/* Brand tokens */
:root {
  --brand-navy: #344c6d;
  --brand-orange: #ea622c;
  --brand-amber: #f6b043;
  --brand-white: #ffffff;
  /* Text scale — all navy-family, not neutral grey */
  --color-text-heading: #344c6d;
  --color-text-body: #253142;
  --color-text-muted: #6b7d93;
  --glass-bg: rgba(255, 255, 255, 0.08);
  --glass-bg-strong: rgba(255, 255, 255, 0.14);
  --glass-bg-dark: rgba(52, 76, 109, 0.28);
  --glass-border: rgba(255, 255, 255, 0.18);
  --glass-border-glow: rgba(255, 255, 255, 0.24);
  --glass-shadow: 0 10px 30px rgba(52, 76, 109, 0.18);
  --glass-blur: 18px;
  --text-on-glass: #1f2937;
  --glass-solid-light: #f7f9fc;
  --glass-solid-dark: #344c6d;
  --cta-primary-solid: #b7481f;
  --cta-primary-solid-hover: #963918;
}

/* Base glass surface */
.glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  color: var(--text-on-glass);
}

/* Elevated glass card */
.glass-card {
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border-glow);
  border-radius: 18px;
  box-shadow: 0 12px 34px rgba(52, 76, 109, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) + 2px));
  backdrop-filter: blur(calc(var(--glass-blur) + 2px));
  color: var(--text-on-glass);
}

/* Sidebar and nav glass panel */
.glass-panel {
  background: var(--glass-bg-dark);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  box-shadow: 0 12px 32px rgba(18, 28, 43, 0.28);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  color: var(--brand-white);
}

/* Primary glass CTA */
.glass-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.2rem;
  background: linear-gradient(135deg, var(--cta-primary-solid), var(--cta-primary-solid-hover));
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(183, 72, 31, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: var(--brand-white);
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.glass-btn-primary:hover,
.glass-btn-primary:focus {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(150, 57, 24, 0.34);
  filter: brightness(1.03);
}

/* Accent glass button */
.glass-btn-accent {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.2rem;
  background: linear-gradient(135deg, rgba(246, 176, 67, 0.92), rgba(246, 176, 67, 0.74));
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(246, 176, 67, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: var(--brand-navy);
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.glass-btn-accent:hover,
.glass-btn-accent:focus {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(246, 176, 67, 0.34);
  filter: brightness(1.03);
}

/* Dark surface override */
.dark-surface .glass,
.dark-surface .glass-card,
.dark-surface .glass-panel {
  background: rgba(255, 255, 255, 0.06);
}

/* No backdrop-filter fallback */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .glass {
    background: rgba(255, 255, 255, 0.92);
  }

  .glass-card {
    background: rgba(255, 255, 255, 0.96);
  }

  .glass-panel {
    background: rgba(52, 76, 109, 0.94);
  }

  .glass-btn-primary {
    background: #ea622c;
  }

  .glass-btn-accent {
    background: #f6b043;
  }
}

/* Navbar glass overrides */
.navbar,
.navbar.navbar-default,
.navbar.navbar-inverse {
  background: rgba(52, 76, 109, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 10px 30px rgba(18, 28, 43, 0.22);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
}

.navbar .navbar-brand,
.navbar .navbar-nav .nav-link,
.navbar .navbar-nav > li > a {
  color: rgba(255, 255, 255, 0.92);
  transition: color 0.2s ease, opacity 0.2s ease;
}

.navbar .navbar-brand:hover,
.navbar .navbar-brand:focus,
.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link:focus,
.navbar .navbar-nav > li > a:hover,
.navbar .navbar-nav > li > a:focus {
  color: var(--brand-amber);
}

/* Sidebar glass overrides */
.sidebar,
.main-sidebar,
.left-side {
  background: rgba(52, 76, 109, 0.82);
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 8px 0 24px rgba(18, 28, 43, 0.18);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
}

.sidebar-menu li > a,
.sidebar .nav-link {
  color: rgba(255, 255, 255, 0.88);
  border-radius: 12px;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.sidebar-menu li.active > a,
.sidebar-menu li.active:hover > a,
.sidebar .nav-item.active .nav-link {
  background: linear-gradient(135deg, var(--cta-primary-solid), var(--cta-primary-solid-hover));
  color: var(--brand-white);
  box-shadow: 0 8px 20px rgba(183, 72, 31, 0.24);
}

/* Card and box glass overrides */
.card,
.box {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 18px;
  box-shadow: 0 12px 34px rgba(52, 76, 109, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) + 2px));
  backdrop-filter: blur(calc(var(--glass-blur) + 2px));
}

.card .card-header,
.box .box-header {
  background: transparent;
  border-bottom: 1px solid rgba(52, 76, 109, 0.08);
}

/* Primary button override */
.btn.btn-primary,
a.btn.btn-primary,
button.btn-primary {
  background: linear-gradient(135deg, var(--cta-primary-solid), var(--cta-primary-solid-hover));
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--brand-white);
  box-shadow: 0 8px 24px rgba(183, 72, 31, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.btn.btn-primary:hover,
.btn.btn-primary:focus,
a.btn.btn-primary:hover,
a.btn.btn-primary:focus,
button.btn-primary:hover,
button.btn-primary:focus {
  background: linear-gradient(135deg, var(--cta-primary-solid-hover), #7d2f14);
  border-color: rgba(255, 255, 255, 0.24);
  color: var(--brand-white);
}

/* Text and link colours — wins by cascade order (brand-overrides loads after style.css) */
body {
  color: #ffffff;
}
a {
  color: #ffffff;
}
a:hover {
  color: var(--brand-amber);
}

/* Table wrapper glass surface */
.table-responsive {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(52, 76, 109, 0.12);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  padding: 0.25rem;
}

/* KPI and stat block accents */
.small-box,
.info-box,
.stat-card,
.kpi-card {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-left: 4px solid var(--brand-amber);
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(52, 76, 109, 0.16);
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) + 1px));
  backdrop-filter: blur(calc(var(--glass-blur) + 1px));
}

/* Student layout glass top bar */
.student-layout .navbar,
.student-layout .top-bar,
.student-layout .student-topbar {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 10px 28px rgba(52, 76, 109, 0.16);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
}

/* Student course and subject cards */
.student-layout .course-card,
.student-layout .subject-card,
.student-layout .student-course-card,
.student-layout .student-subject-card {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-top: 4px solid var(--brand-amber);
  border-radius: 18px;
  box-shadow: 0 12px 34px rgba(52, 76, 109, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) + 2px));
  backdrop-filter: blur(calc(var(--glass-blur) + 2px));
}

/* Student grade and result badges */
.student-layout .badge-grade,
.student-layout .badge-result,
.student-layout .result-badge,
.student-layout .grade-badge,
.student-layout .badge.badge-warning,
.student-layout .badge.badge-orange {
  background: linear-gradient(135deg, rgba(246, 176, 67, 0.96), rgba(255, 214, 120, 0.88));
  color: #1f2937;
  border: 1px solid rgba(183, 72, 31, 0.18);
  box-shadow: 0 6px 16px rgba(234, 98, 44, 0.16);
}

/* Student widgets glass treatment */
.student-layout .timetable-widget,
.student-layout .notice-board,
.student-layout .notice-widget,
.student-layout .student-timetable,
.student-layout .student-notices {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 18px;
  box-shadow: 0 12px 34px rgba(52, 76, 109, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) + 2px));
  backdrop-filter: blur(calc(var(--glass-blur) + 2px));
}

/* Student profile sidebar glass panel */
.student-layout .profile-sidebar,
.student-layout .student-sidebar,
.student-layout .student-profile-panel {
  background: rgba(52, 76, 109, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  box-shadow: 0 12px 32px rgba(18, 28, 43, 0.28);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  color: var(--brand-white);
}

/* Extended no-blur fallback */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .navbar,
  .navbar.navbar-default,
  .navbar.navbar-inverse,
  .sidebar,
  .main-sidebar,
  .left-side,
  .student-layout .profile-sidebar,
  .student-layout .student-sidebar,
  .student-layout .student-profile-panel {
    background: var(--glass-solid-dark);
  }

  .card,
  .box,
  .table-responsive,
  .small-box,
  .info-box,
  .stat-card,
  .kpi-card,
  .student-layout .course-card,
  .student-layout .subject-card,
  .student-layout .student-course-card,
  .student-layout .student-subject-card,
  .student-layout .timetable-widget,
  .student-layout .notice-board,
  .student-layout .notice-widget,
  .student-layout .student-timetable,
  .student-layout .student-notices,
  .student-layout .navbar,
  .student-layout .top-bar,
  .student-layout .student-topbar {
    background: var(--glass-solid-light);
  }

  .glass-btn-primary,
  .btn.btn-primary,
  a.btn.btn-primary,
  button.btn-primary,
  .sidebar-menu li.active > a,
  .sidebar .nav-item.active .nav-link {
    background: var(--cta-primary-solid);
  }
}

/* Print safety */
@media print {
  .glass,
  .glass-card,
  .glass-panel,
  .glass-btn-primary,
  .glass-btn-accent,
  .navbar,
  .sidebar,
  .main-sidebar,
  .left-side,
  .card,
  .box,
  .table-responsive,
  .small-box,
  .info-box,
  .stat-card,
  .kpi-card {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
    background: #ffffff !important;
  }
}

/* =====================================================
   Global colour corrections — override theme defaults
   ===================================================== */

/* 1. Labels */
label,
.form-label,
.form-group label,
.form-group .form-label {
  color: #ffffff;
}

/* 2. Form inputs keep dark text — they have their own white/light background */
.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="search"],
textarea,
select {
  color: var(--color-text-body);
}

/* 3. Table cells — white text; thead already has its own white rule */
.table tbody td,
.table tbody th,
.table tfoot td,
.table tfoot th {
  color: #ffffff !important;
}
/* Align table header background to exact brand navy */
.table thead th {
  background: var(--brand-navy) !important;
}

/* 4. List group items */
.list-group-item {
  color: #ffffff;
}

/* 5. Navigation tabs */
.nav-tabs .nav-link {
  color: rgba(255, 255, 255, 0.75);
}
.nav-tabs .nav-link:hover,
.nav-tabs .nav-link.active {
  color: #ffffff;
}

/* 6. Dropdown menus — keep dark for readability on white dropdown surface */
.dropdown-menu > li > a,
.dropdown-menu .dropdown-item,
.pcoded-header .dropdown .profile-notification .pro-body li a {
  color: var(--color-text-body);
}
.dropdown-menu > li > a:hover,
.dropdown-menu .dropdown-item:hover {
  color: var(--brand-navy);
}

/* 7. Breadcrumb links */
.page-header-title + .breadcrumb > .breadcrumb-item a {
  color: rgba(255, 255, 255, 0.8);
}

/* 8. Card header dropdown toggle */
.card .card-header .card-header-right .btn.dropdown-toggle {
  color: rgba(255, 255, 255, 0.8);
}

/* 9. Auth page — replace teal/purple decorative circles with brand palette */
.auth-wrapper .auth-bg .r:first-child {
  background: linear-gradient(-135deg, var(--brand-amber) 0%, var(--brand-orange) 100%);
}
.auth-wrapper .auth-bg .r:last-child {
  background: linear-gradient(-135deg, var(--brand-navy) 0%, #1e2f44 100%);
}
.auth-wrapper .auth-bg .r.s:nth-child(2) {
  background: var(--brand-orange);
}
.auth-wrapper .auth-bg .r.s:nth-child(3) {
  background: var(--brand-amber);
}

/* 10. Auth icon — replace teal gradient with brand orange/amber */
.auth-wrapper .auth-icon:before {
  background: linear-gradient(-135deg, var(--brand-orange) 0%, var(--brand-amber) 100%);
  background-clip: text;
  -webkit-background-clip: text;
}

/* 11. Dashboard stat card backgrounds */
.bg-c-blue {
  background: var(--brand-navy) !important;
}
.theme-bg {
  background: linear-gradient(-135deg, var(--brand-orange) 0%, var(--brand-navy) 100%) !important;
}
.theme-bg2 {
  background: linear-gradient(-135deg, var(--brand-amber) 0%, var(--brand-navy) 100%) !important;
}

/* Motion and mobile performance */
@media (prefers-reduced-motion: reduce) {
  .glass,
  .glass-card,
  .glass-panel,
  .glass-btn-primary,
  .glass-btn-accent,
  .btn.btn-primary,
  a.btn.btn-primary,
  button.btn-primary {
    transition: none;
  }
}

@media (max-width: 768px) {
  .glass,
  .glass-card,
  .glass-panel,
  .navbar,
  .sidebar,
  .main-sidebar,
  .left-side,
  .card,
  .box,
  .table-responsive {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: 0 6px 16px rgba(52, 76, 109, 0.12);
  }
}