/* =====================================================================
   G.T.C Odomola Result Portal — Shared Theme
   Professional typography + UI polish layered on AdminLTE 4 / Bootstrap 5.
   Loaded AFTER adminlte.min.css so these rules win where needed.
   ===================================================================== */

/* ---------- Design tokens ---------- */
:root {
  /* Clean, highly readable, standard corporate dashboard typography */
  --portal-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --portal-font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Brand palette (school green + gold accent) */
  --portal-green-900: #05291f;
  --portal-green-800: #063a2b;
  --portal-green-700: #07543d;
  --portal-green-600: #087a4d;
  --portal-green-500: #0c9660;
  --portal-gold: #fec34b;

  /* Surfaces + depth */
  --portal-radius: 0.75rem;
  --portal-radius-sm: 0.5rem;
  --portal-shadow-sm: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .08);
  --portal-shadow-md: 0 4px 12px rgba(16, 24, 40, .06), 0 2px 4px rgba(16, 24, 40, .04);
  --portal-shadow-lg: 0 16px 36px rgba(6, 58, 43, .15);
}

/* ---------- Global type ---------- */
html {
  color-scheme: light;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--portal-font-sans);
  font-size: 0.875rem;
  line-height: 1.55;
  color: #1e293b;
  letter-spacing: normal;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.navbar-brand, .brand-text, .app-content-header h1 {
  font-family: var(--portal-font-display);
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.3;
  color: #0f172a;
}

/* Headings */
h1, .h1 { letter-spacing: -0.018em; font-weight: 700; }

/* Numeric / metric emphasis */
.fs-2.fw-bold, .metric-value {
  font-family: var(--portal-font-display);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* ---------- Buttons ---------- */
.btn {
  --bs-btn-font-weight: 600;
  border-radius: var(--portal-radius-sm);
  letter-spacing: 0.01em;
  transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease;
}
.btn:not(.btn-link):active { transform: translateY(1px); }

.btn-school {
  --bs-btn-bg: var(--portal-green-600);
  --bs-btn-border-color: var(--portal-green-600);
  --bs-btn-hover-bg: var(--portal-green-700);
  --bs-btn-hover-border-color: var(--portal-green-700);
  --bs-btn-active-bg: var(--portal-green-800);
  --bs-btn-active-border-color: var(--portal-green-800);
  --bs-btn-focus-shadow-rgb: 8, 122, 77;
  box-shadow: 0 8px 18px rgba(8, 122, 77, .28);
}
.btn-school:hover { box-shadow: 0 10px 22px rgba(8, 122, 77, .34); }

/* ---------- Form controls ---------- */
.form-control, .form-select, .input-group-text {
  border-radius: var(--portal-radius-sm);
}
.form-control:focus, .form-select:focus {
  border-color: var(--portal-green-500);
  box-shadow: 0 0 0 .22rem rgba(12, 150, 96, .18);
}
.form-label {
  font-weight: 600;
  color: var(--bs-body-color);
  letter-spacing: 0.01em;
}

/* ---------- Cards ---------- */
.card {
  border-radius: var(--portal-radius);
  border: 1px solid var(--bs-border-color-translucent, rgba(0, 0, 0, .08));
}
.card .card-header { font-family: var(--portal-font-display); font-weight: 700; }

/* ---------- Alerts ---------- */
.alert { border-radius: var(--portal-radius-sm); border: 0; box-shadow: var(--portal-shadow-sm); }

/* ---------- Badges / pills ---------- */
.badge { font-weight: 600; letter-spacing: 0.01em; border-radius: 2rem; padding: .35em .7em; }

/* =====================================================================
   Login page
   Animated dual-photo backdrop (photo3 + college cross-fade with a slow
   Ken-Burns drift), a frosted glass card, and a rotating brand logo ring.
   ===================================================================== */
body.login-page {
  min-height: 100vh;
  background-color: var(--portal-green-900);
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}

/* -- Animated background: college and photo3 swap briskly back and forth, each
   holding ~3s with a quick ~1s cross-fade. A soft white veil sits on top so
   the headline and form text stay readable over busy areas of the photos. -- */
.login-bg {
  position: fixed; inset: 0; z-index: -2;
  overflow: hidden;
  background-color: #06222f;
}
.login-bg__layer {
  position: absolute;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  will-change: transform, opacity;
}
/* Primary photo: college. */
.login-bg__layer--one {
  inset: -6%;
  background-image: url('/dist/img/college.jpg');
  animation: loginShowPrimary 8s ease-in-out infinite;
}
/* Secondary photo: photo3. */
.login-bg__layer--two {
  inset: -6%;
  background-image: url('/dist/img/photo3.jpg');
  opacity: 0;
  animation: loginShowSecondary 8s ease-in-out infinite;
}
@keyframes loginShowPrimary {
  0%, 37.5%  { opacity: 1; transform: scale(1.06); }
  50%        { opacity: 0; transform: scale(1.1); }
  87.5%      { opacity: 0; transform: scale(1.1); }
  100%       { opacity: 1; transform: scale(1.06); }
}
@keyframes loginShowSecondary {
  0%, 37.5%  { opacity: 0; transform: scale(1.1); }
  50%        { opacity: 1; transform: scale(1.06); }
  87.5%      { opacity: 1; transform: scale(1.06); }
  100%       { opacity: 0; transform: scale(1.1); }
}
/* Dark veil: dims the photos so the white headline and form text read clearly
   over any part of the image, with a slightly lighter centre so the sign-in
   card area does not go flat. */
.login-bg__veil {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 50% 32%, rgba(0, 0, 0, .35), rgba(0, 0, 0, .55) 70%),
    rgba(0, 0, 0, .45);
}
/* Respect users who ask for less motion: hold the primary photo still. */
@media (prefers-reduced-motion: reduce) {
  .login-bg__layer { animation: none !important; opacity: 1; }
  .login-bg__layer--two { opacity: 0; }
  .portal-logo-ring, .portal-logo { animation: none !important; }
}

/* -- Brand block -- */
.login-box {
  width: min(100% - 2rem, 440px);
  margin: auto;
  padding: 2rem 0 1.25rem;
  position: relative;
}
.portal-brand { color: #fff; text-align: center; margin-bottom: 1.15rem; }

/* Rotating gold ring around a slowly-rotating logo. */
.portal-logo-wrap {
  position: relative;
  width: 106px; height: 106px;
  margin: 0 auto;
  display: grid; place-items: center;
}
.portal-logo-ring {
  position: absolute; inset: 0;
  border-radius: 50%;
  padding: 3px;
  background: conic-gradient(from 0deg, var(--portal-gold), transparent 55%, var(--portal-gold));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  animation: spinRing 6s linear infinite;
}
@keyframes spinRing { to { transform: rotate(360deg); } }
.portal-logo {
  width: 92px; height: 92px;
  object-fit: cover;
  border: 3px solid rgba(255, 255, 255, .85);
  border-radius: 50%;
  box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .35);
  animation: spinLogo 18s linear infinite;
}
@keyframes spinLogo { to { transform: rotate(360deg); } }

.portal-brand h1 {
  margin: .75rem 0 .15rem; font-size: 2rem; font-weight: 800;
  font-family: var(--portal-font-display);
  letter-spacing: -0.015em; line-height: 1.15;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .55);
}
.portal-brand p {
  margin: 0; font-size: .82rem; font-weight: 500;
  color: rgba(255, 255, 255, .82); letter-spacing: .1em; text-transform: uppercase;
}

/* -- Frosted glass sign-in card -- */
.login-card-body {
  padding: 1.9rem 1.9rem 1.7rem;
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: 1.1rem;
  background-color: #ffffff;
  box-shadow: 0 1.5rem 3.5rem rgba(0, 0, 0, .42);
  font-family: var(--portal-font-sans);
  color: #1f2937;
}
.login-card-body h2 {
  font-family: var(--portal-font-display);
  font-weight: 800; font-size: 1.35rem; line-height: 1.25;
  letter-spacing: -0.015em; color: #0f172a !important;
  margin-bottom: .25rem;
}
.login-card-body .text-secondary {
  color: #556070 !important; font-size: .9rem; margin-bottom: 1.35rem !important;
}
/* Labels: crisp, spaced, clearly readable above each field. */
.login-card-body .form-label {
  color: #0f172a !important; font-weight: 600; font-size: .85rem;
  letter-spacing: .01em; margin-bottom: .4rem;
}
/* Pin the field surface and typed text. Without an explicit background the
   input inherits --bs-body-bg, which is near-black under a dark scheme, so what
   you type ends up dark-on-dark. */
.login-card-body .form-control {
  color: #1f2937 !important;
  background-color: #f7f9fa !important;
  font-size: .95rem;
  border-color: #d7dce2;
}
.login-card-body .form-control:focus {
  color: #111827 !important;
  background-color: #ffffff !important;
  border-color: var(--portal-green-500);
}
.login-card-body .form-control::placeholder { color: #9aa3ad !important; }
/* Keep the typed value legible when the browser autofills it. */
.login-card-body .form-control:-webkit-autofill,
.login-card-body .form-control:-webkit-autofill:focus {
  -webkit-text-fill-color: #1f2937;
  box-shadow: 0 0 0 1000px #ffffff inset;
}
.login-card-body .input-group-text { color: var(--portal-green-600); background-color: #eef2f1 !important; border-color: #d7dce2; }
.login-card-body .form-control,
.login-card-body .input-group-text { min-height: 3.05rem; }
/* Fields sit a touch tighter so the form reads as one block. */
.login-card-body .mb-3 { margin-bottom: .95rem !important; }
.login-card-body .mb-4 { margin-bottom: 1.25rem !important; }
.btn-school { min-height: 3rem; }
.login-card-body .btn-outline-secondary { font-weight: 600; }
.help-text {
  color: #6b7280; font-size: .82rem; line-height: 1.5;
  margin-top: 1.25rem !important;
}
.site-footer { color: rgba(255, 255, 255, .85); font-size: .8rem; text-align: center; padding: 0 1rem 1.5rem; position: relative; }
.site-footer a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .35); }
.site-footer a:hover { border-bottom-color: #fff; }

/* =====================================================================
   Admin / app shell
   ===================================================================== */
/* -- App shell --
   AdminLTE 4 already lays out .app-wrapper as a two-column grid
   (sidebar | header/main/footer) and slides the sidebar off-canvas via a
   negative margin on small screens, overlaying it on demand. Here we only
   add defensive guards so the content column always shares the row with the
   sidebar instead of stacking below it. */
.app-wrapper > .app-main { min-width: 0; }
.app-wrapper > .app-sidebar { min-width: var(--lte-sidebar-width); }

/* White dashboard surface (overrides the grey bg-body-tertiary default) */
body.bg-body-tertiary { background-color: #fff !important; }
.app-main, .app-content, .app-content > .container-fluid { background-color: #fff; }

.app-sidebar {
  --lte-sidebar-width: 17rem;
  /* AdminLTE paints sidebar text from these variables (defaults are dark grey
     for a light sidebar). Because the shell here uses a dark green sidebar, we
     retarget them to light-on-dark or the menu text is unreadable. */
  --lte-sidebar-color: rgba(255, 255, 255, .88);
  --lte-sidebar-hover-color: #fff;
  --lte-sidebar-hover-bg: rgba(255, 255, 255, .12);
  --lte-sidebar-active-color: #fff;
  --lte-sidebar-menu-active-bg: var(--portal-green-600);
  --lte-sidebar-menu-active-color: #fff;
  --lte-sidebar-submenu-color: rgba(255, 255, 255, .78);
  --lte-sidebar-submenu-hover-color: #fff;
  --lte-sidebar-submenu-hover-bg: rgba(255, 255, 255, .12);
  --lte-sidebar-submenu-active-color: #fff;
  --lte-sidebar-submenu-active-bg: rgba(255, 255, 255, .16);
  --lte-sidebar-header-color: rgba(254, 195, 75, .85);
  background: linear-gradient(180deg, var(--portal-green-800), var(--portal-green-900)) !important;
}
.brand-link { text-decoration: none; }
.brand-text { font-family: var(--portal-font-display); font-weight: 700; letter-spacing: -0.01em; color: #fff; }
.sidebar-brand { height: 3.5rem; border-bottom: 1px solid rgba(255, 255, 255, .12); }

/* These selectors mirror AdminLTE's own `.sidebar-wrapper .sidebar-menu>...`
   chains (equal specificity, later in the cascade) so the rounded pill look,
   hover and active colours actually apply instead of being overridden. */
.sidebar-wrapper .sidebar-menu>.nav-item>.nav-link,
.sidebar-wrapper .sidebar-menu .nav-treeview>.nav-item>.nav-link {
  border-radius: var(--portal-radius-sm); margin: 0 .5rem;
  color: rgba(255, 255, 255, .88);
  transition: background-color .18s ease, color .18s ease;
}
.sidebar-wrapper .sidebar-menu>.nav-item>.nav-link:hover,
.sidebar-wrapper .sidebar-menu>.nav-item>.nav-link:focus,
.sidebar-wrapper .sidebar-menu .nav-treeview>.nav-item>.nav-link:hover,
.sidebar-wrapper .sidebar-menu .nav-treeview>.nav-item>.nav-link:focus {
  color: #fff; background-color: rgba(255, 255, 255, .12);
}
.sidebar-wrapper .sidebar-menu>.nav-item>.nav-link.active,
.sidebar-wrapper .sidebar-menu .nav-treeview>.nav-item>.nav-link.active {
  color: #fff;
  background-color: var(--portal-green-600);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .25);
}
.sidebar-wrapper .nav-header {
  font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(254, 195, 75, .85);
}
.app-content-header h1 { font-weight: 800; letter-spacing: -0.02em; }

/* Keep the dashboard header the exact same height as the sidebar brand
   (3.5rem) so both bottom borders sit on one straight horizontal line. */
.app-header {
  height: 3.5rem;
  position: sticky;
  top: 0;
  z-index: 1035;
  background-color: #fff !important;
  border-bottom: 1px solid var(--bs-border-color);
}
.app-header .navbar {
  height: 100%;
  background-color: #fff !important;
}

/* -- Header controls (sidebar toggle + profile menu) --
   Every colour here is pinned explicitly. The bar is always white, so the
   controls must be dark regardless of any inherited dark scheme (Bootstrap's
   prefers-color-scheme, AdminLTE data-bs-theme, or the OS dark mode), and the
   dropdown menu must open as a solid white panel with dark text. */
.app-header .header-icon-btn,
.app-header .header-user-btn {
  color: #1f2937 !important;
  background-color: transparent !important;
  border: 0;
  border-radius: var(--portal-radius-sm);
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  line-height: 1;
  transition: background-color .18s ease, color .18s ease;
}
.app-header .header-icon-btn { padding: .45rem .6rem; }
.app-header .header-user-btn { padding: .4rem .8rem; font-weight: 600; }
.app-header .header-icon-btn:hover,
.app-header .header-icon-btn:focus-visible,
.app-header .header-user-btn:hover,
.app-header .header-user-btn:focus-visible,
.app-header .header-user-btn.show {
  color: var(--portal-green-700) !important;
  background-color: rgba(12, 150, 96, .1) !important;
}
.app-header .header-user-icon { font-size: 1.35rem; }
/* On very small screens the name would crowd the bar; the avatar and the menu
   header still identify the account. */
@media (max-width: 575.98px) {
  .app-header .header-user-name { display: none; }
}

/* -- Profile dropdown panel -- */
.app-header .app-user-menu {
  min-width: 15rem;
  padding: .4rem;
  background-color: #fff !important;
  border: 1px solid var(--bs-border-color) !important;
  border-radius: var(--portal-radius-sm);
  box-shadow: var(--portal-shadow-md);
}
.app-header .app-user-menu__head {
  display: flex;
  align-items: center;
  padding: .55rem .75rem;
  font-weight: 700;
  color: #111827 !important;
  background-color: #f1f3f5;
  border-radius: calc(var(--portal-radius-sm) - .2rem);
}
.app-header .app-user-menu .dropdown-divider { margin: .4rem 0; }
.app-header .app-user-menu .dropdown-item {
  display: flex;
  align-items: center;
  padding: .6rem .75rem;
  border-radius: calc(var(--portal-radius-sm) - .2rem);
  color: #1f2937 !important;
  font-weight: 500;
  transition: background-color .15s ease, color .15s ease;
}
.app-header .app-user-menu .dropdown-item:hover,
.app-header .app-user-menu .dropdown-item:focus {
  color: #fff !important;
  background-color: var(--portal-green-600) !important;
}
.app-footer {
  font-size: .85rem;
  background-color: #fff;
  color: var(--bs-secondary-color);
}
/* Footer credit link: readable on white, never the default blue, with a clear
   accessible affordance (underline + focus ring) instead of "link blue". */
.app-footer a {
  color: var(--portal-green-700);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  border-radius: 3px;
  transition: color .18s ease;
}
.app-footer a:hover { color: var(--portal-green-600); }
.app-footer a:focus-visible {
  outline: 2px solid var(--portal-green-600);
  outline-offset: 2px;
  text-decoration: none;
}

/* =====================================================================
   Readability on the white dashboard surface
   The body uses bg-body-tertiary (grey) which we repaint white. Bootstrap 5.3
   then inherits some light/blue link colours that vanish on white, so we
   pin explicit, high-contrast dark text on every content element.
   ===================================================================== */
:root {
  --bs-body-color: #1f2937;      /* readable near-black */
  --bs-emphasis-color: #111827;
  --bs-secondary-color: #4b5563; /* grey text that still passes contrast */
  --bs-tertiary-bg: #f1f3f5;
}
/* Pin the whole content surface to a light palette. Bootstrap 5.3 flips
   --bs-* tokens to dark under prefers-color-scheme: dark; without this an
   admin form renders dark-on-dark ("a black rule over everything"). */
.app-main,
.app-content,
.app-content > .container-fluid {
  background-color: #fff !important;
  color: var(--bs-body-color);
}
/* Cards stay white with dark text, in any scheme. */
.app-main .card {
  --bs-card-bg: #ffffff;
  --bs-card-color: #1f2937;
  background-color: #ffffff;
  color: #1f2937;
}
.app-main .card-header,
.app-main .card-footer { background-color: rgba(0, 0, 0, .02); }
/* Form controls: explicit light surface + dark text so whatever you type shows. */
.app-main .form-control,
.app-main .form-select,
.app-main .input-group-text,
.app-main textarea.form-control {
  background-color: #ffffff !important;
  color: #1f2937 !important;
  border-color: #ced4da;
}
.app-main .form-control:focus,
.app-main .form-select:focus {
  background-color: #ffffff !important;
  color: #111827 !important;
  border-color: var(--portal-green-500);
}
.app-main .form-control::placeholder { color: #9aa3ad !important; }
.app-main .form-control[readonly],
.app-main .form-control:disabled {
  background-color: #f1f3f5 !important;
  color: #4b5563 !important;
}
/* Browser autofill must not repaint the field dark either. */
.app-main .form-control:-webkit-autofill,
.app-main .form-control:-webkit-autofill:focus {
  -webkit-text-fill-color: #1f2937;
  box-shadow: 0 0 0 1000px #ffffff inset;
}
/* Multi-selects (Subjects / Terms) keep a light list box. */
.app-main select.form-select[multiple] option { color: #1f2937; background-color: #fff; }
.app-main select.form-select[multiple] option:checked {
  color: #fff; background: var(--portal-green-600) linear-gradient(0deg, var(--portal-green-600), var(--portal-green-600));
}
/* Headings, paragraphs and lists inheriting the surface colour. */
.app-main h1, .app-main h2, .app-main h3, .app-main h4, .app-main h5, .app-main h6,
.app-content-header h1, .card-title {
  color: var(--bs-emphasis-color);
}
.app-main p, .app-main li, .app-main td, .app-main th, .app-main span:not([class]),
.form-label, .form-check-label, .card-text, .nav-tabs .nav-link {
  color: var(--bs-body-color);
}
/* Keep white text on the coloured metric cards (they set a green background,
   so the dark surface colour must not leak in). */
.text-bg-primary, .text-bg-primary h1, .text-bg-primary h2, .text-bg-primary h3,
.text-bg-primary p, .text-bg-primary span, .text-bg-primary div, .text-bg-primary i,
.text-bg-success, .text-bg-success h1, .text-bg-success h2, .text-bg-success h3,
.text-bg-success p, .text-bg-success span, .text-bg-success div, .text-bg-success i,
.text-bg-info, .text-bg-info h1, .text-bg-info h2, .text-bg-info h3,
.text-bg-info p, .text-bg-info span, .text-bg-info div, .text-bg-info i,
.text-bg-secondary, .text-bg-secondary p, .text-bg-secondary span, .text-bg-secondary div,
.text-bg-teal, .text-bg-teal p, .text-bg-teal span, .text-bg-teal div,
.text-bg-maroon, .text-bg-maroon p, .text-bg-maroon span, .text-bg-maroon div,
.text-bg-navy, .text-bg-navy p, .text-bg-navy span, .text-bg-navy div {
  color: #fff;
}
.text-bg-warning, .text-bg-warning h1, .text-bg-warning h2, .text-bg-warning h3,
.text-bg-warning p, .text-bg-warning span, .text-bg-warning div, .text-bg-warning i {
  color: #3a2c00;
}
/* Secondary/muted wording stays a grey that is still legible on white. */
.text-secondary, .text-body-secondary, .form-text, .help-text,
.breadcrumb .breadcrumb-item, .breadcrumb .breadcrumb-item.active,
.app-main .small, .app-main small, .app-main .text-muted {
  color: var(--bs-secondary-color) !important;
}
/* Icon-only and link buttons must not fall back to the blue link colour. */
.app-main .btn-link,
.app-header .btn-link,
.app-header .dropdown-toggle {
  color: var(--bs-body-color);
}
.app-main .btn-link:hover,
.app-header .btn-link:hover,
.app-header .dropdown-toggle:hover {
  color: var(--portal-green-700);
}
/* Breadcrumb "Home" link readable on white. */
.breadcrumb a { color: var(--portal-green-700); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
/* Table text on white cards. */
.table > :not(caption) > * > * { color: var(--bs-body-color); }
.table thead.table-light th { color: var(--bs-emphasis-color); }

/* Metric cards */
.metric-card {
  height: 100%;
  min-height: 9.5rem;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
  overflow: hidden;
  border: 0;
}
.metric-card:hover { transform: translateY(-.25rem); box-shadow: var(--portal-shadow-lg); filter: saturate(1.05); }
.metric-card .card-body { padding: 1.35rem 1.4rem; }
.metric-icon { font-size: 2.5rem; opacity: .82; }
.metric-card .card-footer {
  padding: .7rem 1.4rem;
  font-weight: 600; letter-spacing: .01em;
  border-top: 1px solid rgba(255, 255, 255, .18) !important;
}

/* ---- Professional green accent scheme ---- */
/* Primary metric -> deep school green */
.text-bg-primary { background-color: var(--portal-green-600) !important; }
/* Secondary metric -> muted slate-teal */
.text-bg-secondary { background-color: #43655c !important; }
/* Success metric -> forest green */
.text-bg-success { background-color: #1c7c54 !important; }
/* Info metric -> teal */
.text-bg-info { background-color: #2f8f7f !important; color: #fff !important; }
/* Warning metric -> warm gold (dark text for contrast) */
.text-bg-warning { background-color: var(--portal-gold) !important; color: #3a2c00 !important; }

/* Tech-level cards: three tonal greens instead of clashing hues */
.text-bg-teal { color: #fff; background-color: #1f8a7a; }
.text-bg-maroon { color: #fff; background-color: #136b4a; }
.text-bg-navy { color: #fff; background-color: #0a4a34; }

/* =====================================================================
   Student management workspace
   ===================================================================== */
.student-page { padding-bottom: 1.5rem; }
.student-form-card,
.student-list-card {
  overflow: hidden;
  border: 1px solid #dfe7e4;
  box-shadow: 0 8px 24px rgba(6, 58, 43, .07);
}
.student-form-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 5.7rem;
  padding: 1.1rem 1.35rem;
  color: #fff;
  background: linear-gradient(120deg, var(--portal-green-900), var(--portal-green-700));
}
.student-form-card__header .card-title { color: #fff; font-size: 1.15rem; }
.student-form-card__eyebrow {
  display: block;
  margin-bottom: .18rem;
  color: rgba(255, 255, 255, .72);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.student-form-card__icon {
  display: grid;
  width: 2.8rem;
  height: 2.8rem;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 50%;
  color: var(--portal-gold);
  font-size: 1.35rem;
}
.student-form-card .card-body { padding: 1.35rem; }
.student-form-section { padding: 1.1rem 0; border-bottom: 1px solid #e6ece9; }
.student-form-section:first-of-type { padding-top: 0; }
.student-form-section:last-child { padding-bottom: 0; border-bottom: 0; }
.student-form-section__title { display: flex; gap: .7rem; align-items: flex-start; margin-bottom: 1rem; }
.student-form-section__title > span {
  display: grid;
  flex: 0 0 auto;
  width: 1.65rem;
  height: 1.65rem;
  place-items: center;
  margin-top: .08rem;
  border-radius: 50%;
  color: var(--portal-green-700);
  background: #e8f3ed;
  font-size: .68rem;
  font-weight: 800;
}
.student-form-section__title h4 { margin: 0; color: #16362b; font-size: .91rem; font-weight: 800; }
.student-form-section__title p { margin: .1rem 0 0; color: #66756e; font-size: .77rem; line-height: 1.4; }
.student-form-card .form-label { margin-bottom: .35rem; color: #33463e; font-size: .78rem; font-weight: 700; }
.student-form-card .form-control,
.student-form-card .form-select {
  min-height: 2.65rem;
  border-color: #cfdad5;
  font-size: .9rem;
}
.student-form-card textarea.form-control { min-height: 4.8rem; }
.student-form-card .form-check-inline { margin: .28rem .75rem .15rem 0; }
.student-form-card .form-check-input { border-color: #aebeb6; }
.student-form-card .form-check-input:checked { background-color: var(--portal-green-600); border-color: var(--portal-green-600); }
.choice-panel {
  display: grid;
  gap: .55rem;
  padding: .7rem;
  border: 1px solid #cfdad5;
  border-radius: var(--portal-radius-sm);
  background: #fbfdfc;
}
.choice-panel--terms { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.choice-panel--subjects { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); min-height: 3.75rem; }
.choice-panel.is-loading { opacity: .6; pointer-events: none; }
.choice-card {
  display: flex;
  gap: .55rem;
  align-items: center;
  min-width: 0;
  min-height: 3rem;
  padding: .55rem .65rem;
  margin: 0;
  border: 1px solid #dbe4e0;
  border-radius: .48rem;
  color: #2d4138;
  background: #fff;
  font-size: .82rem;
  font-weight: 700;
  line-height: 1.25;
  cursor: pointer;
  transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}
.choice-card:hover { border-color: #91b7a4; background: #f5faf7; }
.choice-card input { position: absolute; opacity: 0; pointer-events: none; }
.choice-card__check {
  display: grid;
  flex: 0 0 auto;
  width: 1.15rem;
  height: 1.15rem;
  place-items: center;
  border: 1px solid #a9bbb2;
  border-radius: .28rem;
  color: transparent;
  background: #fff;
  font-size: .75rem;
}
.choice-card small { display: block; margin-top: .13rem; color: #718078; font-size: .7rem; font-weight: 500; }
.choice-card:has(input:checked) { border-color: var(--portal-green-600); background: #eef8f2; box-shadow: 0 0 0 1px rgba(8, 122, 77, .1); }
.choice-card:has(input:checked) .choice-card__check { border-color: var(--portal-green-600); color: #fff; background: var(--portal-green-600); }
.choice-card:has(input:focus-visible) { outline: 3px solid rgba(12, 150, 96, .24); outline-offset: 2px; }
.student-form-card__footer { padding: .9rem 1.35rem; color: #62726a; background: #f7faf8 !important; font-size: .78rem; }
.student-form-card__footer .btn-primary { background: var(--portal-green-600); border-color: var(--portal-green-600); }
.student-list-card .card-header { min-height: 5.7rem; padding: 1.25rem; background: #fff; border-bottom: 1px solid #e2e9e6; }
.student-list-card .card-title { color: #18382c; font-size: 1rem; font-weight: 800; }
.student-list-card .table { font-size: .79rem; }
.student-list-card .table thead th { padding: .8rem .7rem; color: #466055; background: #f4f8f6; font-size: .67rem; font-weight: 800; letter-spacing: .055em; text-transform: uppercase; white-space: nowrap; }
.student-list-card .table td { padding: .72rem .7rem; vertical-align: middle; }
.student-list-card .student-subjects {
  display: -webkit-box;
  max-width: 15rem;
  overflow: hidden;
  color: #496057;
  font-size: .75rem;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
@media (max-width: 575.98px) {
  .student-form-card .card-body { padding: 1rem; }
  .student-form-card__footer { align-items: flex-start !important; flex-direction: column; }
  .choice-panel--terms, .choice-panel--subjects { grid-template-columns: 1fr; }
}

/* =====================================================================
   Teacher Module — Admin UI Styles
   ===================================================================== */
.teacher-form-card{border:none;border-radius:var(--portal-radius);box-shadow:var(--portal-shadow-md);overflow:hidden}
.teacher-form-card__header{display:flex;align-items:center;justify-content:space-between;padding:1.35rem 1.6rem;background:linear-gradient(135deg,var(--portal-green-800) 0%,var(--portal-green-600) 100%);color:#fff}
.teacher-form-card__eyebrow{font-size:.68rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;opacity:.72;display:block;margin-bottom:.2rem}
.teacher-form-card__header h3{color:#fff;font-size:1.15rem}
.teacher-form-card__icon{font-size:2.4rem;opacity:.18}
.teacher-form-section{margin-bottom:1.8rem;padding-bottom:1.5rem;border-bottom:1px dashed #d9e4de}
.teacher-form-section:last-child{border-bottom:none;padding-bottom:0;margin-bottom:0}
.teacher-form-section__title{display:flex;gap:1rem;align-items:flex-start;margin-bottom:1.2rem}
.teacher-form-section__title>span{display:grid;place-items:center;flex-shrink:0;width:2.2rem;height:2.2rem;background:linear-gradient(135deg,var(--portal-green-700) 0%,var(--portal-green-500) 100%);color:#fff;border-radius:.5rem;font-weight:800;font-size:.8rem}
.teacher-form-section__title h4{margin:0 0 .15rem;font-size:.95rem;font-weight:700;color:#183a2c}
.teacher-form-section__title p{margin:0;font-size:.78rem;color:#657a70}
.teacher-form-card__footer{padding:.9rem 1.35rem;color:#62726a;background:#f7faf8!important;font-size:.78rem}
.teacher-form-card__footer .btn-primary{background:var(--portal-green-600);border-color:var(--portal-green-600)}
.allocation-list{min-height:2rem}
.allocation-row{border:1px solid #d4e5dc;border-radius:var(--portal-radius-sm);background:#fafcfb;transition:box-shadow .2s ease}
.allocation-row:hover{box-shadow:var(--portal-shadow-sm)}
.allocation-row-num{font-size:.7rem;letter-spacing:.06em}
.alloc-class-block{background:#f4f8f6;border:1px solid #dce9e3;border-radius:var(--portal-radius-sm);padding:.85rem 1rem}
.alloc-class-label{font-weight:700;font-size:.88rem;color:var(--portal-green-700);margin-bottom:.6rem}
.alloc-subject-item{padding:.5rem .75rem;margin-bottom:.5rem;background:#fff;border:1px solid #e8f0ec;border-radius:.4rem;font-size:.82rem}
.choice-card--sm{padding:.35rem .6rem;font-size:.76rem}
.choice-card--sm small{font-size:.64rem}
.teacher-avatar{display:inline-grid;place-items:center;width:2.2rem;height:2.2rem;border-radius:50%;font-size:.68rem;font-weight:800;letter-spacing:.04em;flex-shrink:0;background:linear-gradient(135deg,var(--portal-green-600) 0%,var(--portal-green-500) 100%);color:#fff}
.teacher-avatar--female{background:linear-gradient(135deg,#9c4eb0 0%,#c26bd9 100%)}
.teacher-list-card .card-header{min-height:5.7rem;padding:1.25rem;background:#fff;border-bottom:1px solid #e2e9e6}
.teacher-list-card .card-title{color:#18382c;font-size:1rem;font-weight:800}
.teacher-list-card .table{font-size:.79rem}
.teacher-list-card .table thead th{padding:.8rem .7rem;color:#466055;background:#f4f8f6;font-size:.67rem;font-weight:800;letter-spacing:.055em;text-transform:uppercase;white-space:nowrap}
.teacher-list-card .table td{padding:.72rem .7rem;vertical-align:middle}
.teacher-subjects-overflow{display:-webkit-box;max-width:12rem;overflow:hidden;color:#496057;font-size:.72rem;line-height:1.35;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}
.teacher-stats-card{border:none;box-shadow:var(--portal-shadow-sm)}
.teacher-stat-item{display:flex;align-items:center;gap:1rem}
.teacher-stat-item>i{font-size:1.8rem;opacity:.8}
#allocModal .modal-header{background:linear-gradient(135deg,var(--portal-green-800) 0%,var(--portal-green-600) 100%);color:#fff}
#allocModal .modal-title{font-weight:700;color:#fff}
#allocModal .btn-close{filter:invert(1) brightness(2)}
@media(max-width:575.98px){.teacher-form-card .card-body{padding:1rem}.teacher-form-card__footer{align-items:flex-start!important;flex-direction:column}}

/* =====================================================================
   Dashboard Metrics & Custom Background Utilities
   ===================================================================== */
.metric-card {
  border-radius: var(--portal-radius, 0.75rem);
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.07);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.metric-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.15);
}
.metric-card .card-body {
  padding: 1.35rem 1.35rem 0.85rem 1.35rem;
}
.metric-card .metric-icon {
  font-size: 2.3rem;
  opacity: 0.82;
  align-self: flex-start;
}
.metric-card .card-footer {
  padding: 0.55rem 1.35rem 0.85rem 1.35rem;
  font-size: 0.82rem;
  font-weight: 600;
  opacity: 0.92;
  border-top: 1px solid rgba(255, 255, 255, 0.18) !important;
}

/* Custom text-bg color badges and cards */
.text-bg-teal {
  background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%) !important;
  color: #ffffff !important;
}
.text-bg-maroon {
  background: linear-gradient(135deg, #be123c 0%, #9f1239 100%) !important;
  color: #ffffff !important;
}
.text-bg-navy {
  background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%) !important;
  color: #ffffff !important;
}
.text-bg-indigo {
  background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%) !important;
  color: #ffffff !important;
}
.text-bg-purple {
  background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%) !important;
  color: #ffffff !important;
}
.text-bg-emerald {
  background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
  color: #ffffff !important;
}
.text-bg-amber {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%) !important;
  color: #ffffff !important;
}

/* Class Levels Sidebar Widget */
.class-levels-card {
  border-radius: var(--portal-radius, 0.75rem);
  overflow: hidden;
}
.class-levels-card .list-group-item {
  border-left: 0;
  border-right: 0;
  font-size: 0.8125rem;
  transition: background-color 0.15s ease;
}
.class-levels-card .list-group-item:hover {
  background-color: #f8faf9;
}
.class-levels-card .card-footer {
  font-size: 0.8125rem;
}

/* =====================================================================
   Subject Module — Admin UI Styles
   ===================================================================== */
.subject-page { padding-bottom: 1.5rem; }
.subject-form-card { border: none; border-radius: var(--portal-radius); box-shadow: var(--portal-shadow-md); overflow: hidden; }
.subject-form-card__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.35rem 1.6rem;
  background: linear-gradient(135deg, var(--portal-green-800) 0%, var(--portal-green-600) 100%);
  color: #fff;
}
.subject-form-card__eyebrow { font-size: .68rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; opacity: .72; display: block; margin-bottom: .2rem; }
.subject-form-card__header h3 { color: #fff; font-size: 1.15rem; }
.subject-form-card__icon { font-size: 2.4rem; opacity: .18; }
.subject-form-section { margin-bottom: 1.8rem; padding-bottom: 1.5rem; border-bottom: 1px dashed #d9e4de; }
.subject-form-section:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
.subject-form-section__title { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1.2rem; }
.subject-form-section__title > span {
  display: grid; place-items: center; flex-shrink: 0;
  width: 2.2rem; height: 2.2rem;
  background: linear-gradient(135deg, var(--portal-green-700) 0%, var(--portal-green-500) 100%);
  color: #fff; border-radius: .5rem; font-weight: 800; font-size: .8rem;
}
.subject-form-section__title h4 { margin: 0 0 .15rem; font-size: .95rem; font-weight: 700; color: #183a2c; }
.subject-form-section__title p { margin: 0; font-size: .78rem; color: #657a70; }
.subject-form-card__footer { padding: .9rem 1.35rem; color: #62726a; background: #f7faf8 !important; font-size: .78rem; }
.subject-form-card__footer .btn-primary { background: var(--portal-green-600); border-color: var(--portal-green-600); }

/* Class mapping grid */
.subject-class-grid { display: flex; flex-direction: column; gap: 1rem; max-height: 420px; overflow-y: auto; padding: .25rem .1rem; }
.subject-dept-group {}
.subject-dept-label {
  font-size: .68rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--portal-green-700); margin-bottom: .5rem;
}
.subject-class-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.subject-class-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .3rem .6rem; border: 1px solid #d4e5dc; border-radius: 2rem;
  background: #fff; cursor: pointer; font-size: .78rem; font-weight: 600;
  color: #2d4138; transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
  user-select: none;
}
.subject-class-chip input { position: absolute; opacity: 0; pointer-events: none; }
.subject-class-chip__check {
  display: grid; place-items: center; flex-shrink: 0;
  width: 1rem; height: 1rem; border: 1px solid #b0c8bc; border-radius: 50%;
  color: transparent; background: #fff; font-size: .65rem;
  transition: background .15s ease, border-color .15s ease;
}
.subject-class-chip__label { line-height: 1.2; }
.subject-class-chip:hover { border-color: #91b7a4; background: #f5faf7; }
.subject-class-chip.is-checked {
  border-color: var(--portal-green-600); background: #eef8f2;
  box-shadow: 0 0 0 1px rgba(8,122,77,.12);
}
.subject-class-chip.is-checked .subject-class-chip__check {
  background: var(--portal-green-600); border-color: var(--portal-green-600); color: #fff;
}

/* Subject list table */
.subject-list-card .card-header { min-height: 4.5rem; padding: 1rem 1.25rem; background: #fff; border-bottom: 1px solid #e2e9e6; }
.subject-list-card .card-title { color: #18382c; font-size: 1rem; font-weight: 800; }
.subject-list-card .table { font-size: .79rem; }
.subject-list-card .table thead th { padding: .8rem .7rem; color: #466055; background: #f4f8f6; font-size: .67rem; font-weight: 800; letter-spacing: .055em; text-transform: uppercase; white-space: nowrap; }
.subject-list-card .table td { padding: .72rem .7rem; vertical-align: middle; }
.subject-desc-overflow { display: -webkit-box; max-width: 18rem; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 1; line-clamp: 1; }

/* Dept filter badges */
.dept-badge { cursor: pointer; transition: opacity .15s ease; }
.dept-badge:hover { opacity: .85; }

/* =====================================================================
   Class Level Module
   ===================================================================== */
.class-page { padding-bottom: 1.5rem; }

/* Form card */
.class-form-card { border: none; border-radius: var(--portal-radius); box-shadow: var(--portal-shadow-md); overflow: hidden; }
.class-form-card__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.2rem 1.5rem;
  background: linear-gradient(135deg, var(--portal-green-800) 0%, var(--portal-green-600) 100%);
  color: #fff;
}
.class-form-card__eyebrow { font-size:.68rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; opacity:.72; display:block; margin-bottom:.2rem; }
.class-form-card__title { color:#fff; font-size:1.05rem; font-weight:700; margin:0; }
.class-form-card__icon { font-size:2.2rem; opacity:.18; }
.class-form-card .card-body { padding: 1.25rem 1.35rem; }
.class-form-card .card-footer { background:#f7faf8; padding:.8rem 1.35rem; border-top:1px solid #e2e9e6; }

/* Department section in directory */
.class-dept-banner {
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem .75rem;
  background: linear-gradient(90deg, #e8f4ed 0%, #f4faf7 100%);
  border-left: 3px solid var(--portal-green-600);
  border-radius: .4rem;
  font-size: .78rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .06em; color: var(--portal-green-800);
  margin-bottom: .6rem;
}

/* Class item card */
.class-item-card {
  border: 1px solid #ddeae3; border-radius: .6rem;
  padding: .85rem .9rem; background: #fff;
  transition: border-color .15s, box-shadow .15s, transform .15s;
  height: 100%;
}
.class-item-card:hover { border-color: var(--portal-green-500); box-shadow: 0 4px 12px rgba(8,122,77,.1); transform: translateY(-2px); }
.class-item-card--active { border-color: var(--portal-green-600) !important; background: #eef8f2 !important; box-shadow: 0 0 0 2px rgba(8,122,77,.15) !important; }
.class-item-card__name { font-size: .9rem; font-weight: 700; color: #1a3828; margin-bottom: .4rem; }
.class-item-card__stats { font-size: .75rem; color: #556b5f; display: flex; gap: .75rem; margin-bottom: .6rem; }
.class-item-card__actions { display: flex; gap: .35rem; }
.btn-xs { padding: .2rem .45rem; font-size: .72rem; border-radius: .35rem; line-height: 1.4; }

/* =====================================================================
   Terms & Sessions Module
   ===================================================================== */
.term-page { padding-bottom: 1.5rem; }

/* Term form card */
.term-form-card { border: none; border-radius: var(--portal-radius); box-shadow: var(--portal-shadow-md); overflow: hidden; }
.term-form-card__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.2rem 1.5rem;
  background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
  color: #fff;
}
.term-form-card__eyebrow { font-size:.68rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; opacity:.72; display:block; margin-bottom:.2rem; }
.term-form-card__title { color:#fff; font-size:1.05rem; font-weight:700; margin:0; }
.term-form-card__icon { font-size:2.2rem; opacity:.18; }
.term-form-card .card-body { padding: 1.25rem 1.35rem; }
.term-form-card .card-footer { background:#f3f6ff; padding:.8rem 1.35rem; border-top:1px solid #d4ddf6; }
.term-form-card .btn-primary { background: #2563eb; border-color: #2563eb; }

/* Active term card */
.term-active-card {
  background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
  border-radius: var(--portal-radius) !important;
}
.term-active-pulse {
  width: 14px; height: 14px; border-radius: 50%; flex-shrink:0;
  background: #fff;
  box-shadow: 0 0 0 0 rgba(255,255,255,.6);
  animation: pulse-ring 1.6s ease-in-out infinite;
}
@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(255,255,255,.5); }
  70%  { box-shadow: 0 0 0 8px rgba(255,255,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}

/* Session banner */
.term-session-banner {
  display: flex; align-items: center; justify-content: space-between;
  padding: .6rem 1rem;
  background: linear-gradient(90deg, #dbeafe 0%, #f0f6ff 100%);
  border-left: 3px solid #2563eb;
  border-radius: .4rem;
  font-size: .82rem; color: #1e3a8a;
}
.term-session-block { }

/* Term item card */
.term-item-card {
  position: relative;
  border: 1px solid #d4ddf6; border-radius: .65rem;
  padding: 1rem; background: #fff;
  transition: border-color .15s, box-shadow .15s, transform .15s;
  height: 100%;
}
.term-item-card:hover { border-color: #2563eb; box-shadow: 0 4px 14px rgba(37,99,235,.1); transform: translateY(-2px); }
.term-item-card--active {
  border-color: #059669 !important;
  background: linear-gradient(135deg, #ecfdf5 0%, #f0fdf4 100%) !important;
  box-shadow: 0 0 0 2px rgba(5,150,105,.15) !important;
}
.term-item-card--editing { border-color: #f59e0b !important; box-shadow: 0 0 0 2px rgba(245,158,11,.2) !important; }
.term-item-card__badge {
  position: absolute; top: -.5rem; right: .75rem;
  background: #059669; color: #fff;
  font-size: .58rem; font-weight: 800; letter-spacing: .08em;
  padding: .15rem .5rem; border-radius: 2rem;
}
.term-item-card__name { font-size: .95rem; font-weight: 700; color: #1e3a8a; margin-bottom: .2rem; }
.term-item-card__session { font-size: .72rem; color: #64748b; margin-bottom: .6rem; }
.term-item-card__stats { font-size: .73rem; color: #475569; display: flex; flex-direction: column; gap: .2rem; margin-bottom: .75rem; }
.term-item-card__actions { display: flex; gap: .35rem; }


/* Class Directory Table & Card */
.class-dir-card {
  border-radius: var(--portal-radius, 12px);
  overflow: hidden;
}
.class-directory-table thead th {
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #4a6356;
  background-color: #f7faf8;
  padding: .75rem .9rem;
  border-bottom: 1px solid #e3ebe7;
  white-space: nowrap;
}
.class-directory-table tbody td {
  padding: .75rem .9rem;
  font-size: .84rem;
  vertical-align: middle;
  border-bottom: 1px solid #edf3ef;
}
.class-directory-table tbody tr:hover {
  background-color: #f4faf7;
}
.class-directory-table .btn-xs {
  padding: .22rem .48rem;
  font-size: .72rem;
  border-radius: .35rem;
  line-height: 1.4;
}
.fs-7 {
  font-size: .75rem !important;
}


/* Term Active Indicator in Navbar */
.term-active-pulse-sm {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #10b981;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  animation: termPulse 2s infinite;
  display: inline-block;
  flex-shrink: 0;
}
@keyframes termPulse {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
  }
}

/* =====================================================================
   Trade Departments Module
   ===================================================================== */
.dept-page { padding-bottom: 1.5rem; }

/* Department Form Card */
.dept-form-card {
  border: none;
  border-radius: var(--portal-radius, 12px);
  box-shadow: var(--portal-shadow-md, 0 4px 16px rgba(0,0,0,0.06));
  overflow: hidden;
}
.dept-form-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.2rem 1.5rem;
  background: linear-gradient(135deg, #065f46 0%, #059669 100%);
  color: #fff;
}
.dept-form-card__eyebrow {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  opacity: .75;
  display: block;
  margin-bottom: .2rem;
}
.dept-form-card__title {
  color: #fff;
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0;
}
.dept-form-card__icon {
  font-size: 2.2rem;
  opacity: .2;
}
.dept-form-card .card-body {
  padding: 1.25rem 1.35rem;
}
.dept-form-card .card-footer {
  background: #f7faf8;
  padding: .8rem 1.35rem;
  border-top: 1px solid #e2e9e6;
}

/* Department Directory Card & Table */
.dept-dir-card {
  border-radius: var(--portal-radius, 12px);
  overflow: hidden;
}
.dept-directory-table thead th {
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #3e5649;
  background-color: #f6faf7;
  padding: .75rem .9rem;
  border-bottom: 1px solid #e1ebe5;
  white-space: nowrap;
}
.dept-directory-table tbody td {
  padding: .75rem .9rem;
  font-size: .84rem;
  vertical-align: middle;
  border-bottom: 1px solid #edf3ef;
}
.dept-directory-table tbody tr:hover {
  background-color: #f4faf7;
}

/* Treeview & Submenu Dropdown Display Fix */
.sidebar-wrapper .sidebar-menu .nav-item .nav-link .nav-arrow,
.sidebar-wrapper .sidebar-menu .nav-item .nav-link > p > .nav-arrow {
  position: absolute !important;
  top: 50% !important;
  right: 1rem !important;
  transform: translateY(-50%) !important;
  transform-origin: center center !important;
  transition: transform 0.22s ease-in-out !important;
  margin: 0 !important;
  float: none !important;
}

.sidebar-wrapper .sidebar-menu .nav-item.menu-open > .nav-link .nav-arrow,
.sidebar-wrapper .sidebar-menu .nav-item.menu-open > .nav-link > p > .nav-arrow {
  transform: translateY(-50%) rotate(90deg) !important;
}

.sidebar-wrapper .sidebar-menu .nav-item:not(.menu-open) > .nav-treeview {
  display: none;
}

.sidebar-wrapper .sidebar-menu .nav-item.menu-open > .nav-treeview {
  display: block !important;
}