/*
 * Site-wide theme for the Placement Assessment Software (BugCap Labs Pvt. Ltd.).
 *
 * Loaded once from base.html (pre-login: home/login/register/reset screens)
 * and base_dashboard.html (post-login: the sidebar + topbar app shell), so
 * every page that extends either layout picks up the same look automatically
 * - a page never needs its own copy of this CSS to render correctly.
 *
 * Visual language follows the BugCap Labs "BillFlow" reference: a white
 * left sidebar with brand + role-aware navigation, a topbar with a
 * breadcrumb/search/clock/user chip, blue accent, light slate page
 * background, and a clean sans-serif face throughout (replacing the old
 * gold/navy "Bookman Old Style" theme).
 */

:root {
  --primary-color: #2563eb;   /* brand blue - buttons, active states, accents */
  --primary-hover: #1d4ed8;
  --primary-soft: #eff6ff;    /* pale blue - active nav background, chips */
  --accent-color: #6366f1;    /* indigo - avatar chip */
  --ink-color: #1e293b;       /* slate-800 - headings, primary text */
  --muted-color: #64748b;     /* slate-500 - secondary text */
  --border-color: #e2e8f0;    /* slate-200 - card/sidebar borders */
  --page-bg: #f1f5f9;         /* slate-100 - app background */
  --field-bg: #eef4fc;        /* pale blue - input/select fill */
  --field-border: #dce8f7;    /* pale blue - input/select border */
  --light-gray: #f8fafc;
  --dark-gray: #334155;
  --white: #fff;
  --font-family-base: 'Inter', "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-family-serif: var(--font-family-base); /* kept for back-compat with older rules below */
  --font-family-sans-serif: var(--font-family-base);
  --font-family-mono: 'Courier New', Courier, monospace;
}

* { box-sizing: border-box; }

body {
  background-color: var(--page-bg);
  font-family: var(--font-family-base);
  color: var(--ink-color);
  overflow-x: hidden;
}

/* ================================================================== */
/* Pre-login shell (base.html): home, login, register, password reset  */
/* ================================================================== */

body:has(.header) {
  padding-top: 100px;
  padding-bottom: 70px;
}

.header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1050;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background-color: var(--white);
  border-bottom: 1px solid var(--border-color);
  padding: 14px 20px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

/* ---------------------------------------------------------------- */
/* Software logo (templates/_logo.html). One set of classes for every  */
/* placement; sizes live here only. The logo is 3:2 with transparent   */
/* corners, so width/height auto + object-fit keep it undistorted.     */
/* ---------------------------------------------------------------- */
.app-logo-picture { display: contents; }
.app-logo {
  display: block;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  flex-shrink: 0;
}
.app-logo--header  { width: 96px; }                       /* login / register header */
.app-logo--sidebar { width: 168px; margin: 0 auto; }      /* expanded sidebar */
.app-logo--hero    { width: 150px; margin: 0 auto 0.5rem; } /* home page */
.app-logo--compact { display: none; width: 44px; height: 44px; border-radius: 10px; } /* collapsed sidebar */

@media (max-width: 575.98px) {
  .app-logo--header { width: 72px; }
  .app-logo--hero   { width: 120px; }
}

.header h1 {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--ink-color);
  text-align: center;
}

.header h1 em, .sidebar-head .brand-name em {
  font-style: normal;
  color: var(--primary-color);
}

.header .brand-sub {
  display: block;
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--muted-color);
}

.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: var(--white);
  color: var(--muted-color);
  text-align: center;
  padding: 12px;
  border-top: 1px solid var(--border-color);
  font-size: 0.85rem;
}

.main-content {
  background-color: var(--white);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
  margin-top: 1.5rem;
  min-height: calc(100vh - 200px);
}

.main-content::-webkit-scrollbar { display: none; }

/* Auth cards (login/register/reset): centered icon + title + subtitle,
   no colored header bar - matches the reference design's login screen */
.auth-card {
  max-width: 420px;
  margin: 3rem auto 0;
  background: var(--white);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
  padding: 2.5rem 2.25rem;
}

.auth-card .auth-icon {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  background: var(--primary-color);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  margin: 0 auto 1.1rem;
}

.auth-card .auth-title {
  text-align: center;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--ink-color);
  margin-bottom: 0.25rem;
}

.auth-card .auth-subtitle {
  text-align: center;
  color: var(--muted-color);
  font-size: 0.88rem;
  margin-bottom: 1.75rem;
}

.auth-card .auth-footer {
  text-align: center;
  margin-top: 1.25rem;
  font-size: 0.9rem;
}

/* ================================================================== */
/* Post-login app shell (base_dashboard.html): left sidebar + topbar   */
/* ================================================================== */

:root {
  --sidebar-width: 260px;
  --sidebar-collapsed-width: 76px;
}

.app-shell {
  display: flex;
  min-height: 100vh;
}

.app-sidebar {
  width: var(--sidebar-width);
  flex-shrink: 0;
  background: var(--white);
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 1040;
  transition: width 0.2s ease;
}

.sidebar-head {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 24px 16px 20px;
  border-bottom: 1px solid var(--border-color);
}

.sidebar-head .brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  max-width: 100%;
}


.sidebar-head .brand-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.3;
  max-width: 100%;
}

.sidebar-head .brand-name {
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink-color);
}

.sidebar-head .brand-sub {
  font-size: 0.74rem;
  color: var(--muted-color);
}

.sidebar-collapse-btn {
  position: absolute;
  top: 12px;
  right: 10px;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  background: var(--white);
  color: var(--muted-color);
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
}

.sidebar-collapse-btn:hover { background: var(--light-gray); color: var(--ink-color); }
.sidebar-collapse-btn i { transition: transform 0.2s ease; }

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px 10px;
}

.sidebar-nav .nav-item,
.sidebar-nav .nav-group-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  border-radius: 8px;
  color: var(--dark-gray) !important;
  font-weight: 500;
  font-size: 0.88rem;
  text-decoration: none;
  margin-bottom: 2px;
  width: 100%;
  border: none;
  background: transparent;
  text-align: left;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.sidebar-nav .nav-item i,
.sidebar-nav .nav-group-toggle i:first-child { font-size: 0.98rem; width: 1.1rem; text-align: center; color: inherit; flex-shrink: 0; }

.sidebar-nav .nav-item:hover,
.sidebar-nav .nav-group-toggle:hover {
  background-color: var(--light-gray);
  color: var(--ink-color) !important;
}

.sidebar-nav .nav-item.active,
.sidebar-nav .nav-group-toggle.active {
  background-color: var(--primary-soft);
  color: var(--primary-color) !important;
  font-weight: 600;
}

.sidebar-nav .nav-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.nav-group-toggle .nav-caret {
  font-size: 0.7rem !important;
  width: auto !important;
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

.nav-group.open .nav-caret,
.nav-group-toggle[aria-expanded="true"] .nav-caret { transform: rotate(180deg); }

.nav-group-items {
  padding-left: 14px;
  border-left: 2px solid var(--border-color);
  margin: 2px 0 2px 24px;
}

.nav-subitem {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  color: var(--muted-color) !important;
  font-weight: 500;
  font-size: 0.84rem;
  text-decoration: none;
}

.nav-subitem i { font-size: 0.9rem; width: 1rem; text-align: center; }

.nav-subitem:hover { background-color: var(--light-gray); color: var(--ink-color) !important; }

.nav-subitem.active {
  background-color: var(--primary-soft);
  color: var(--primary-color) !important;
  font-weight: 600;
}

.sidebar-footer {
  padding: 12px 10px;
  border-top: 1px solid var(--border-color);
}

.sidebar-footer .nav-item { color: #dc3545 !important; }
.sidebar-footer .nav-item:hover { background-color: #fef2f2; }

.sidebar-footer .powered-by {
  margin-top: 8px;
  font-size: 0.68rem;
  color: var(--muted-color);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Collapsed (icons-only) desktop state */
body.sidebar-collapsed .app-sidebar { width: var(--sidebar-collapsed-width); }
body.sidebar-collapsed .app-main { margin-left: var(--sidebar-collapsed-width); }
body.sidebar-collapsed .sidebar-head { padding: 20px 8px 14px; }
/* Collapsed: swap the full logo for the square emblem, centered in the rail. */
body.sidebar-collapsed .sidebar-head .app-logo--sidebar { display: none; }
body.sidebar-collapsed .sidebar-head .app-logo--compact { display: block; }
body.sidebar-collapsed .sidebar-head .brand-text,
body.sidebar-collapsed .nav-label,
body.sidebar-collapsed .nav-caret,
body.sidebar-collapsed .sidebar-footer .powered-by { display: none; }
/* Keep the toggle button visible and reachable when collapsed - just
   re-centered under the icon instead of pinned to the (now much
   narrower) top-right corner, with its arrow flipped to mean "expand". */
body.sidebar-collapsed .sidebar-collapse-btn {
  position: static;
  margin-top: 4px;
}
body.sidebar-collapsed .sidebar-collapse-btn i { transform: rotate(180deg); }
body.sidebar-collapsed .nav-group-items { display: none !important; }
body.sidebar-collapsed .sidebar-nav .nav-item,
body.sidebar-collapsed .sidebar-nav .nav-group-toggle { justify-content: center; }

.app-main {
  flex: 1;
  /* Flex items default to min-width:auto, which let wide tables stretch the whole
     page past the viewport on tablet/mobile instead of scrolling inside
     .table-responsive. */
  min-width: 0;
  margin-left: var(--sidebar-width);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  transition: margin-left 0.2s ease;
}

/* Dedicated exam layout - no sidebar/topbar rendered at all (see
   {% block hide_chrome %} in base_dashboard.html), so the sidebar's usual
   offset must collapse to 0 rather than leaving a blank gutter. */
.app-main.chrome-hidden {
  margin-left: 0;
}

.app-topbar {
  position: sticky;
  top: 0;
  z-index: 1030;
  display: flex;
  align-items: center;
  gap: 20px;
  background: var(--white);
  border-bottom: 1px solid var(--border-color);
  padding: 14px 28px;
}

#sidebarToggleBtn {
  display: none;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: var(--white);
  color: var(--ink-color);
  align-items: center;
  justify-content: center;
}

.breadcrumb-trail {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  color: var(--muted-color);
  white-space: nowrap;
  overflow-x: auto;
}

.breadcrumb-trail a { color: var(--muted-color); text-decoration: none; }
.breadcrumb-trail a:hover { color: var(--primary-color); }
.breadcrumb-trail .current { color: var(--ink-color); font-weight: 600; }

.topbar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-shrink: 0;
}

.topbar-clock {
  font-size: 0.85rem;
  color: var(--muted-color);
  white-space: nowrap;
}

.icon-btn {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted-color);
  background: transparent;
  border: none;
  font-size: 1.05rem;
}

.icon-btn:hover { background: var(--light-gray); color: var(--ink-color); }

.icon-btn .dot {
  position: absolute;
  top: 6px;
  right: 7px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #dc3545;
  border: 1.5px solid var(--white);
}

.user-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 14px;
  border-left: 1px solid var(--border-color);
}

.user-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--accent-color);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  flex-shrink: 0;
}

/* Same circular sizing as the initials avatar, applied to an <img> instead
   when the student has a profile photo on file. */
.user-avatar-photo {
  object-fit: cover;
}

.user-name { font-weight: 600; font-size: 0.88rem; color: var(--ink-color); line-height: 1.2; }
.user-role { font-size: 0.75rem; color: var(--muted-color); }

.app-content {
  flex: 1;
  padding: 24px 28px;
}

/* Opt-in: pages that must fit one screen with no scrolling (the home page).
   .app-shell keeps min-height elsewhere (pages with tables/forms need to grow
   and scroll normally) - only a page that explicitly asks for this via
   {% block content_class %}home-fit{% endblock %} gets locked to the viewport. */
.app-shell:has(.home-fit) { height: 100vh; overflow: hidden; }
.app-shell:has(.home-fit) .app-sidebar { height: 100vh; }
.app-shell:has(.home-fit) .app-main { height: 100vh; min-height: 0; }
.app-content.home-fit {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
  padding-top: 18px;
  padding-bottom: 14px;
}

/* Home page content: hero + two chip sections, sized to share the viewport
   evenly so the whole page reads without scrolling */
.home-hero { flex: 0 0 auto; padding-bottom: 14px; }


.home-hero h1 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); }

.home-hero p {
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
  font-size: 0.92rem;
  line-height: 1.5;
}

.home-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
  border-top: 1px solid var(--border-color);
  padding-top: 14px;
}

.home-section-label h2 { margin-bottom: 0; }

.home-chip-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  gap: 10px;
  margin-top: 14px;
  overflow: hidden;
}

.home-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--white);
  border: 1px solid var(--border-color);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-color);
  white-space: nowrap;
}

.home-chip i { color: var(--primary-color); font-size: 1rem; }

.home-chip.good { background: #f0fdf4; border-color: #bbf7d0; }
.home-chip.good i { color: #16a34a; }

@media (max-width: 991.98px) {
  .app-shell:has(.home-fit) { height: auto; overflow: visible; }
  .app-content.home-fit { overflow: visible; }
  .home-section { flex: none; }
}

@media (max-width: 991.98px) {
  /* Sidebar becomes a left-side off-canvas drawer, closed by default;
     the collapse/icons-only feature is desktop-only (the toggler here
     opens/closes the full drawer instead). */
  .app-sidebar { transform: translateX(-100%); transition: transform 0.2s ease; width: var(--sidebar-width) !important; }
  .app-sidebar.open { transform: translateX(0); }
  .app-main { margin-left: 0 !important; }
  #sidebarToggleBtn { display: flex; }
  .sidebar-collapse-btn { display: none !important; }
  /* The desktop icons-only preference must not bleed into the mobile
     drawer - always show full labels/groups when opened on a small screen. */
  body.sidebar-collapsed .app-sidebar { width: var(--sidebar-width); }
  body.sidebar-collapsed .sidebar-head .brand-text { display: flex; }
  body.sidebar-collapsed .sidebar-head .app-logo--sidebar { display: block; }
  body.sidebar-collapsed .sidebar-head .app-logo--compact { display: none; }
  body.sidebar-collapsed .nav-label { display: inline; }
  body.sidebar-collapsed .nav-caret { display: inline-block; }
  body.sidebar-collapsed .sidebar-footer .powered-by { display: block; }
  body.sidebar-collapsed .nav-group.open .nav-group-items,
  body.sidebar-collapsed .nav-group-items.show { display: block !important; }
}

@media (max-width: 575.98px) {
  .app-topbar { padding: 12px 16px; gap: 12px; }
  .breadcrumb-trail { display: none; }
  .app-content { padding: 20px 16px; }
}

/* ---------------------------------------------------------------- */
/* Brand theme applied on top of Bootstrap, everywhere */
/* ---------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 { color: var(--ink-color); font-weight: 700; }

/* text-primary now means the actual brand blue (standard Bootstrap semantics),
   matching the accent color used for icons/section eyebrows across the app */
.text-primary {
  color: var(--primary-color) !important;
}

.text-gray-800 {
  color: var(--ink-color) !important;
}

.text-muted { color: var(--muted-color) !important; }

.text-white { color: var(--white) !important; }

.text-success { color: #16a34a !important; }
.text-danger  { color: #dc2626 !important; }
.text-warning { color: #d97706 !important; }

/* Live-search box (Admin management/list pages) - icon + input + clear (x),
   used with static/js/live-search.js so typing never reloads the page. */
.search-input-wrap {
  position: relative;
}

.search-input-wrap .form-control {
  padding-left: 36px;
  padding-right: 34px;
}

.search-input-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted-color);
  pointer-events: none;
}

.search-clear-btn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  color: var(--muted-color);
  padding: 2px;
  line-height: 1;
  display: flex;
}

.search-clear-btn:hover { color: var(--ink-color); }

/* Buttons */
.btn { border-radius: 8px; font-weight: 500; }

.btn-primary, .btn-success, .btn-info {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--white) !important;
}

.btn-primary:hover, .btn-success:hover, .btn-info:hover {
  background-color: var(--primary-hover);
  border-color: var(--primary-hover);
}

.btn-outline-primary {
  color: var(--primary-color);
  border-color: var(--primary-color);
}

.btn-outline-success,
.btn-outline-warning {
  color: var(--ink-color);
  border-color: var(--border-color);
}

.btn-outline-primary:hover,
.btn-outline-success:hover,
.btn-outline-warning:hover {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--white) !important;
}

.btn-outline-secondary {
  color: var(--muted-color);
  border-color: var(--border-color);
}

.btn-outline-secondary:hover {
  background-color: var(--ink-color);
  border-color: var(--ink-color);
  color: var(--white) !important;
}

.btn-danger  { background-color: #dc2626; border-color: #dc2626; }
.btn-danger:hover  { background-color: #b91c1c; border-color: #b91c1c; }
.btn-warning { background-color: #f59e0b; border-color: #f59e0b; color: #212529; }
.btn-warning:hover { background-color: #d97706; border-color: #d97706; color: #212529; }

/* Badges */
.badge.bg-primary { background-color: var(--primary-color) !important; color: var(--white) !important; }
.badge.bg-secondary { background-color: var(--muted-color) !important; color: var(--white) !important; }

.mt-3 span { font-weight: 600; }

/* Cards */
.card {
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.card-header {
  background-color: var(--white);
  border-bottom: 1px solid var(--border-color);
  font-weight: 600;
}

.card-header.bg-primary {
  background-color: var(--primary-color) !important;
}

/* Tables */
.table-light { background-color: var(--light-gray); }
.table-hover tbody tr:hover { background-color: var(--primary-soft); }
.table thead th {
  background-color: var(--light-gray);
  border-bottom: 1px solid var(--border-color);
  color: var(--muted-color);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
}
.table tbody tr:hover { background-color: var(--light-gray); }

/* Nav pills (used on the add-question tabs) */
.nav-pills .nav-link { color: var(--ink-color); }
.nav-pills .nav-link.active { background-color: var(--primary-color); color: var(--white) !important; }
.nav-pills .nav-link:hover { background-color: var(--primary-soft); }

/* Nav tabs (e.g. "Create X / X History" section switchers) - blue underline
   on the active tab, matching the reference design's section tabs */
.nav-tabs { border-bottom: 1px solid var(--border-color); }
.nav-tabs .nav-link {
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--muted-color);
  font-weight: 600;
  padding: 0.6rem 0.25rem;
  margin-right: 1.5rem;
  border-radius: 0;
}
.nav-tabs .nav-link:hover { color: var(--ink-color); border-color: var(--border-color); }
.nav-tabs .nav-link.active {
  color: var(--primary-color);
  background: transparent;
  border-color: var(--primary-color);
}

/* Forms - pale-blue field fill, matching the reference design's text boxes/dropdowns */
.form-control, .form-select {
  background-color: var(--field-bg);
  border: 1px solid var(--field-border);
  border-radius: 8px;
  padding: 0.55rem 0.85rem;
  color: var(--ink-color);
}

.form-select { padding-top: 0.55rem; padding-bottom: 0.55rem; }

.form-control:focus, .form-select:focus {
  background-color: var(--white);
  border-color: var(--primary-color);
  box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.15);
}

.form-control:disabled, .form-control[readonly],
.form-select:disabled {
  background-color: var(--light-gray);
  color: var(--muted-color);
}

.form-check-input {
  border: 1px solid var(--field-border);
}

.form-check-input:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.15);
}

.form-check-input:checked {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

.form-label {
  color: var(--ink-color) !important;
  font-weight: 600;
  font-size: 0.88rem;
  margin-bottom: 0.4rem;
}

.input-group-text {
  border-color: var(--field-border);
  background-color: var(--field-bg);
  color: var(--muted-color) !important;
}

/* Regular placeholders read as muted gray hint text */
.form-control::placeholder { color: var(--muted-color); opacity: 0.75; }

/* Bootstrap's form-floating relies on its own placeholder becoming transparent so the
   floating label doesn't render on top of (and garble with) the placeholder text -
   never force a placeholder color with !important here, or the two overlap. */
.form-floating > .form-control::placeholder { color: transparent !important; }

/* Icons: inherit the surrounding text color so icons inside colored buttons/badges/
   nav-pills pick up white (or whatever) instead of always being forced one color */
.bi { color: inherit; }

/* Alerts - category colors stay semantic; only success is brand-tinted */
.alert-success {
  --bs-alert-color: color-mix(in srgb, var(--primary-color) 65%, black);
  --bs-alert-bg: color-mix(in srgb, var(--primary-color) 12%, white);
  --bs-alert-border-color: color-mix(in srgb, var(--primary-color) 35%, white);
}

/* Modals: header keeps whatever Bootstrap contextual class it's given
   (bg-success, bg-primary, ...) rather than being forced to one color */
.modal-title, .modal-body, .modal-footer { color: var(--ink-color); }
.modal-header.bg-primary .modal-title,
.modal-header.bg-success .modal-title,
.modal-header .text-white { color: var(--white) !important; }

/* Pagination */
.page-link { color: var(--ink-color); border-color: var(--border-color); }
.page-link:hover { color: var(--primary-color); border-color: var(--primary-color); background-color: var(--light-gray); }
.page-item.active .page-link { background-color: var(--primary-color); border-color: var(--primary-color); }

/* Code / preformatted text */
pre, code { font-family: var(--font-family-mono); }

/* ---------------------------------------------------------------- */
/* Landing page (index.html) */
/* ---------------------------------------------------------------- */

@media (max-width: 767.98px) {
  .display-4 { font-size: 2.5rem; }
  .display-3 { font-size: 3rem; }
  .lead { font-size: 1.1rem; }
  .card-title { font-size: 1.5rem; }
  .card-text { font-size: 1rem; }
  .row.g-4 > .col-md-4 { margin-bottom: 1rem; }
}

@media (max-width: 991.98px) and (min-width: 768px) {
  .display-4 { font-size: 3rem; }
  .lead { font-size: 1.2rem; }
}

/* ---------------------------------------------------------------- */
/* Dashboard / data-heavy pages: mobile, tablet and touch responsiveness */
/* ---------------------------------------------------------------- */

@media (max-width: 767.98px) {
  .container-fluid { padding: 0.5rem; }
  .d-sm-flex { flex-direction: column !important; }
  .d-sm-flex .mb-0 { margin-bottom: 0.5rem !important; }
  .card { margin-bottom: 1rem; }
  .card-header { padding: 1rem; font-size: 1rem; }
  .card-body { padding: 1rem; }
  .card-title { margin-bottom: 1rem; }
  .btn { padding: 0.5rem 1rem; font-size: 0.9rem; margin-bottom: 0.5rem; }
  .btn-group .btn { margin-bottom: 0; }
  .table-responsive { font-size: 0.875rem; }
  .table td, .table th { padding: 0.5rem; white-space: nowrap; }
  .badge { font-size: 0.75rem; }
  .dropdown-menu { font-size: 0.9rem; }
  .modal-dialog { margin: 0.5rem; max-width: calc(100vw - 1rem); }
  .modal-content { border-radius: 0.5rem; }
  .form-control, .form-select { font-size: 1rem; min-height: 44px; }
  .input-group-text { font-size: 0.9rem; }
  .btn-group-vertical .btn { margin-bottom: 0.25rem; }
  .mb-4 { margin-bottom: 1.5rem !important; }
  .mb-3 { margin-bottom: 1rem !important; }
  .row > .col-md-4, .row > .col-md-6, .row > .col-lg-3 { margin-bottom: 1rem; }
  .d-flex { flex-direction: column !important; gap: 0.5rem; }
  .d-flex .form-control, .d-flex .form-select, .d-flex .btn { width: 100% !important; margin-bottom: 0.5rem; }
  .btn, .form-control, .form-select, .dropdown-item { min-height: 44px; }
  .modal-fullscreen-sm-down { max-width: 100vw; margin: 0; }
  .row.g-4 > .col-xl-3, .row.g-4 > .col-md-6 { margin-bottom: 1rem; }
  .chart-container { height: 200px !important; min-height: 200px !important; margin-bottom: 1rem; }

  /* Exam report status tiles */
  .status-button { min-height: 80px; padding: 1rem !important; margin-bottom: 1rem; }
  .status-icon i { font-size: 2rem; margin-bottom: 0.5rem; }
  .student-count { font-size: 1.5rem; }
  .progress-card { padding: 1rem !important; margin-bottom: 1rem; }
  .card-header .btn { padding: 0.5rem 1rem; font-size: 0.9rem; }

  @media (max-width: 575.98px) {
    .card-header .d-flex { flex-direction: column; gap: 0.5rem; }
    .card-header .form-control, .card-header .form-select { width: 100% !important; min-width: auto; }
  }
}

@media (max-width: 991.98px) and (min-width: 768px) {
  .container-fluid { padding: 1rem; }
  .card-body { padding: 1.5rem; }
  .table-responsive { font-size: 0.9rem; }
  .btn { padding: 0.6rem 1.2rem; font-size: 0.95rem; }
  .chart-container { height: 250px !important; min-height: 250px !important; }
}

@media (max-width: 991.98px) {
  .chart-container { height: 200px !important; min-height: 200px !important; }
}

@media (hover: none) and (pointer: coarse) {
  .btn:active { transform: scale(0.95); }
  .card:active { transform: scale(0.98); }
  .status-button { transition: transform 0.1s ease; }
  .status-button:active { transform: scale(0.98); }
}

/* ---------------------------------------------------------------- */
/* Coding exam (exam_question.html, code_test.html): editor + test results */
/* ---------------------------------------------------------------- */

.btn-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

#code-editor,
#code {
  font-family: var(--font-family-mono);
  font-size: 14px;
}

#code-editor {
  background-color: #1e1e1e;
  color: #d4d4d4;
  border: 1px solid #333;
  border-radius: 4px;
  padding: 15px;
  resize: vertical;
}

#code-editor::placeholder {
  color: #858585;
}

.test-case-card {
  background-color: var(--light-gray);
  border: 1px solid var(--border-color);
}

.test-case-card pre {
  margin: 0;
  font-size: 13px;
  max-height: 150px;
  overflow-y: auto;
}

.test-result-item {
  padding: 12px;
  margin-bottom: 10px;
  border-radius: 6px;
  border-left: 4px solid;
}

.test-result-item.passed { background-color: #dcfce7; border-left-color: #16a34a; }
.test-result-item.failed { background-color: #fee2e2; border-left-color: #dc2626; }
.test-result-item.error  { background-color: #fef3c7; border-left-color: #f59e0b; }

.overlay-spinner {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(15, 23, 42, 0.6);
  z-index: 10000;
  justify-content: center;
  align-items: center;
}

/* "Starts in HH:MM:SS" countdown on the Assigned Exams table (student
   dashboard / assessments list) - previously small, low-contrast text easy
   to miss; now a clear, high-contrast pill consistent with the badge
   language already used elsewhere (Resume Available, security warnings). */
.exam-start-countdown {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.4rem;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #92400e;
  background: #fef3c7;
  border: 1px solid #fde68a;
  border-radius: 8px;
  padding: 0.35rem 0.75rem;
}
/* Warning styling once the wait is nearly over (last minute) - a slightly
   stronger, still-accessible amber, not the full "critical" red used for
   in-exam time-up warnings elsewhere, since nothing is at risk here. */
.exam-start-countdown.countdown-imminent {
  color: #7c2d12;
  background: #fed7aa;
  border-color: #fb923c;
}
@media (max-width: 576px) {
  .exam-start-countdown { font-size: 0.82rem; padding: 0.3rem 0.6rem; }
}

/* ---------------------------------------------------------------- */
/* Save-status indicator (idle/saving/success/error) - reusable across any
   fetch-based save action. A page supplies <span class="save-status"> and
   calls window.SaveStatus.saving/success/error/idle(el, ...) (see
   app/static/js/save-status.js). Lightweight CSS-only spinner/pop-in icon,
   no external animation library, disabled under prefers-reduced-motion. */
/* ---------------------------------------------------------------- */
.save-status { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; font-weight: 600; min-height: 1.2em; }
.save-status:empty { display: none; }
.save-status .save-spinner {
  width: 0.9em; height: 0.9em; border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; display: inline-block; animation: save-spin 0.6s linear infinite;
}
.save-status .save-icon { display: inline-block; animation: save-pop 0.2s ease-out; }
.save-status.saving { color: #d97706; }
.save-status.saved { color: #16a34a; }
.save-status.error { color: #dc2626; }
.save-status .save-retry { margin-left: 0.35rem; font-weight: 700; text-decoration: underline; cursor: pointer; }
@keyframes save-spin { to { transform: rotate(360deg); } }
@keyframes save-pop { from { transform: scale(0.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .save-status .save-spinner { animation: none; opacity: 0.6; }
  .save-status .save-icon { animation: none; }
}

/* ---------------------------------------------------------------- */
/* Global page-loading overlay (see app/templates/_page_loader.html and
   app/static/js/page-loader.js) - server-rendered visible by default so it
   covers the page from first paint; JS toggles .page-loader-hidden once the
   page has actually loaded. z-index deliberately higher than the exam
   page's own fullscreen gate (20000, exam_question.html) so it always sits
   on top during the instant both could be present. */
/* ---------------------------------------------------------------- */
.page-loader {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  background: #ffffff;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.25s ease, visibility 0s linear 0s;
}
/* Dot-ring spinner: 24 dots placed around a circle, each one lighter than the
   last (dark "head" fading to light grey), and the whole ring turns in 24
   discrete steps so the dark head appears to travel around the BCL name. */
.page-loader-ring {
  --ring: min(200px, 56vw);          /* overall diameter */
  --dot: calc(var(--ring) * 0.085);  /* dot diameter */
  position: relative;
  width: var(--ring);
  height: var(--ring);
}
.page-loader-dots {
  position: absolute;
  inset: 0;
  animation: page-loader-spin 1.2s steps(24) infinite;
}
.page-loader-dots span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--dot);
  height: var(--dot);
  margin: calc(var(--dot) / -2) 0 0 calc(var(--dot) / -2);
  border-radius: 50%;
  background: var(--ink-color, #1e293b);
  /* Dot i sits at angle i*15deg; dot 0 is the dark head, later dots fade out. */
  transform: rotate(calc(var(--i) * -15deg)) translateY(calc((var(--ring) - var(--dot)) / -2));
  opacity: calc(1 - var(--i) * 0.036);
}
.page-loader-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.1;
}
.page-loader-brand {
  font-size: calc(var(--ring) * 0.22);
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--primary-color, #2563eb);
}
.page-loader-text {
  margin-top: 0.3rem;
  font-size: calc(var(--ring) * 0.085);
  font-weight: 600;
  color: var(--ink-color, #1e293b);
  letter-spacing: 0.02em;
}
@keyframes page-loader-spin {
  to { transform: rotate(360deg); }
}
.page-loader.page-loader-hidden {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .page-loader { transition: none; }
  .page-loader.page-loader-hidden { transition: none; }
  .page-loader-dots { animation-duration: 3.6s; }
}