/* --- Global Style Overrides for a Modern, Professional Look --- */

/* 1. Base & Typography */
:root {
  /* Muted primary color */
  --bs-primary: #005A9C;
  --bs-primary-rgb: 0, 90, 156;
  --bs-link-color: #005A9C;
  --bs-link-hover-color: #003d69;
  
  /* Disable all border-radius for a sharp, professional look */
  --bs-border-radius: 0;
  --bs-border-radius-sm: 0;
  --bs-border-radius-lg: 0;
  --bs-border-radius-xl: 0;
  --bs-border-radius-2xl: 0;
  --bs-border-radius-pill: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background-color: #f8f9fa; /* Lighter grey background */
  font-size: 0.9rem; /* Slightly smaller base font size */
  color: #333;
}

/* Heading styles: smaller, lighter, and more modern */
h1, h2, h3, h4, h5, h6 {
  font-weight: 400; /* Lighter font weight */
  color: #2c3e50;
}

h1 { font-size: 2rem; }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }

/* 2. Components */

/* Cards: clean, flat design */
.card {
  border: 1px solid #dee2e6; /* Lighter border */
  box-shadow: 0 1px 3px rgba(0,0,0,0.05); /* Subtle shadow */
}

.card-header {
  background-color: #ffffff;
  border-bottom: 1px solid #dee2e6;
  font-weight: 500;
}

/* Buttons: more subtle */
.btn {
  font-weight: 500;
  padding: 0.5rem 1rem;
}
.btn-primary {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

/* Forms: clean and simple */
.form-control, .form-select {
  border: 1px solid #ced4da;
}
.form-control:focus, .form-select:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25);
}

/*
 * Deprecated Navbar Style
 * This rule is no longer needed as we switched to a dark navbar.
.navbar.bg-light {
  background-color: #fff !important;
  border-bottom: 1px solid #e9ecef;
}
*/

/* Admin Navbar: keep it distinct */
.navbar.bg-dark {
    background-color: #343a40 !important;
}

/* Table */
.table {
    border-color: #dee2e6;
}
.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(0,0,0,0.02); /* More subtle striping */
}


/* --- 3. NEW: Navbar Customization --- */

/* 
  We now use .navbar-dark and .bg-primary in header.php.
  The .bg-primary class automatically uses the --bs-primary variable.
*/

/* Style for navbar links in the dark theme */
.navbar-dark .navbar-nav .nav-link {
  color: rgba(255, 255, 255, 0.75); /* Slightly transparent white for non-active links */
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  transition: color 0.2s ease-in-out;
}

/* Hover and focus states for better interactivity */
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
  color: #ffffff;
}

/* Style for the active link to make it stand out */
.navbar-dark .navbar-nav .nav-link.active {
  color: #ffffff;
  font-weight: 500; /* Make it slightly bolder */
}

/* Style the mobile toggler button to ensure it's visible */
.navbar-dark .navbar-toggler {
  border-color: rgba(255, 255, 255, 0.25);
}

/* On mobile (when menu is collapsed), add some padding to items for better touch targets */
@media (max-width: 991.98px) {
  .navbar-nav .nav-item {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }
}
/* --- 4b. NEW: List-style Assessment Options --- */

/* 选项的网格布局容器 */
.question-options-list {
  display: grid;
  /* 关键的响应式布局：
     - auto-fit: 根据可用空间自动调整列数
     - minmax(250px, 1fr): 每列最小宽度250px，最大平分剩余空间
  */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 0.75rem; /* 选项之间的间距 */
}

/* 手机端强制单列，保证长句子完整显示 */
@media (max-width: 575.98px) {
  .question-options-list {
    grid-template-columns: 1fr;
  }
}

/* 隐藏原始的 radio 按钮 */
.option-item .option-radio {
  display: none;
}

/* 可点击的标签样式 */
.option-item .option-label {
  display: block;
  width: 100%;
  padding: 0.75rem 1.25rem;
  border: 1px solid #dee2e6;
  cursor: pointer;
  line-height: 1.5;
  text-align: left; /* 核心：文本左对齐 */
  background-color: #fff;
  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

/* 鼠标悬停在未选中项上的效果 */
.option-item .option-radio:not(:checked) + .option-label:hover {
  background-color: #f8f9fa; /* 类似 Bootstrap 的 bg-light */
  border-color: #ced4da;
}

/* 选项被选中时的效果 */
.option-item .option-radio:checked + .option-label {
  background-color: #e7f0f8; /* 清爽的淡蓝色背景 */
  border-color: var(--bs-primary); /* 使用主题色作为边框 */
  font-weight: 500; /* 字体加粗一点点，突出显示 */
}