/* =============================================================
   STUDENT PORTAL SYSTEM — BLUE & YELLOW-GOLD THEME
   Primary:  #0f2044 (deep navy) / #1a3a6e (royal blue) / #1e56d9 (medium blue)
   Accent:   #f5a623 (yellow-gold) / #c8860e (dark gold)
   ============================================================= */

/* ── CSS variables ─────────────────────────────────────────── */
:root {
  /* Blue palette */
  --primary-blue:     #1a3a6e;   /* royal blue — topbar, heavy UI         */
  --primary:          #1e56d9;   /* medium blue — buttons, links           */
  --primary-dark:     #1342b5;   /* darker blue — pressed/active states    */
  --primary-light:    #dbeafe;   /* light blue — tinted backgrounds        */
  --sidebar-bg:       #0f2044;   /* deep navy — sidebar                    */

  /* Gold accent palette */
  --accent-gold:      #f5a623;   /* yellow-gold — highlights / active      */
  --accent-gold-dark: #c8860e;   /* darker gold — hover on gold elements   */
  --accent-gold-light:#fef7e6;   /* very light gold — row / card tints     */

  /* Shared tokens */
  --sidebar-text:     rgba(255, 255, 255, 0.80);
  --sidebar-width:    260px;
  --site-navbar-h:    56px;   /* fixed top navbar height */
  --topbar-h:         60px;
  --radius:           12px;
  --shadow:           0 4px 24px rgba(15, 32, 68, 0.12);
  --shadow-sm:        0 2px 8px  rgba(15, 32, 68, 0.08);

  /* Bootstrap 5 token overrides */
  --bs-primary:       #1e56d9;
  --bs-primary-rgb:   30, 86, 217;
  --bs-warning:       #f5a623;
  --bs-warning-rgb:   245, 166, 35;
}

/* ── Base ───────────────────────────────────────────────────── */
body {
  font-family: 'Nunito', sans-serif;
  background: #f0f4ff;
  color: #1e293b;
  padding-top: var(--site-navbar-h);   /* reserve space for fixed site-navbar */
}

/* ─────────────────────────────────────────────────────────────
   SITE-WIDE TOP NAVBAR
   3-column flex: [equal-side] | [logo center] | [equal-side]
   Perfectly centres the logo at every viewport width.
   ───────────────────────────────────────────────────────────── */
.site-navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--site-navbar-h);
  background: var(--sidebar-bg);
  display: flex;
  align-items: center;
  z-index: 1200;                       /* above sidebar (1000) and topbar (100) */
  border-bottom: 2px solid rgba(245, 166, 35, 0.32);
  box-shadow: 0 2px 12px rgba(15, 32, 68, 0.28);
}

/* Equal-width flanks keep the centre column perfectly centred */
.site-navbar-side {
  flex: 1;
  min-width: 0;
}

.site-navbar-center {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 .5rem;
}

.site-navbar-brand-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  outline-offset: 4px;
  border-radius: 10px;
}
.site-navbar-brand-link:focus-visible {
  outline: 2px solid var(--accent-gold);
}

.site-navbar-logo {
  height: 40px;
  width: auto;
  object-fit: contain;
  border-radius: 8px;
  display: block;
  transition: opacity .2s ease, transform .2s ease;
}
.site-navbar-logo:hover {
  opacity: .82;
  transform: scale(1.04);
}

/* Mobile: slightly smaller logo */
@media (max-width: 480px) {
  .site-navbar-logo { height: 34px; }
}

/* ── Auth pages ─────────────────────────────────────────────── */
.auth-page {
  min-height: calc(100vh - var(--site-navbar-h));   /* fill viewport below navbar */
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0f2044 0%, #1a3a6e 55%, #1e56d9 100%);
  position: relative;
  overflow: hidden;
}
/* Subtle decorative circles behind the card */
.auth-page::before,
.auth-page::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  opacity: .07;
  background: var(--accent-gold);
}
.auth-page::before { width: 420px; height: 420px; top: -120px; right: -100px; }
.auth-page::after  { width: 320px; height: 320px; bottom: -100px; left: -80px; }

.auth-card {
  background: #fff;
  border-radius: 20px;
  padding: 2.5rem;
  width: 100%;
  max-width: 460px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
  border-top: 4px solid var(--accent-gold);
  position: relative;
  z-index: 1;
}
.auth-logo { text-align: center; margin-bottom: 1.5rem; }
.auth-logo i {
  font-size: 3rem;
  color: var(--accent-gold);
  filter: drop-shadow(0 4px 8px rgba(245, 166, 35, 0.35));
}
.auth-logo h4  { font-weight: 800; color: var(--sidebar-bg); margin-top: .5rem; }
.auth-logo p   { color: #64748b; }

/* Auth page logo image */
.auth-logo-img {
  height: 96px;
  width:  auto;
  object-fit: contain;
  border-radius: 16px;
  filter: drop-shadow(0 6px 16px rgba(15,32,68,0.30));
  margin-bottom: .25rem;
}

/* Home / landing hero logo */
.hero-logo-img {
  height: 120px;
  width:  auto;
  object-fit: contain;
  border-radius: 20px;
  filter: drop-shadow(0 8px 20px rgba(15,32,68,0.35));
  margin-bottom: 1rem;
}

/* ── Portal layout ──────────────────────────────────────────── */
.portal-layout { display: flex; min-height: 100vh; }

/* ── Sidebar ────────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-width);
  background: var(--sidebar-bg);
  position: fixed;
  top: var(--site-navbar-h); left: 0;   /* start below site-navbar */
  height: calc(100vh - var(--site-navbar-h));
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  z-index: 1000;
  transition: transform .3s ease;
  box-shadow: 4px 0 20px rgba(0, 0, 0, 0.20);
}

.sidebar-brand {
  padding: 1.35rem 1.25rem;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--accent-gold);
  display: flex;
  align-items: center;
  gap: .6rem;
  border-bottom: 1px solid rgba(245, 166, 35, 0.22);
  background: rgba(0, 0, 0, 0.18);
  letter-spacing: .01em;
}
.sidebar-brand i { color: var(--accent-gold); font-size: 1.3rem; flex-shrink: 0; }

/* Sidebar logo image */
.sidebar-logo {
  height: 38px;
  width:  38px;
  object-fit: contain;
  border-radius: 8px;
  flex-shrink: 0;
  background: rgba(255,255,255,0.08);
  padding: 2px;
}

.sidebar-nav { padding: 1rem 0; flex: 1; }

.sidebar-link {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .72rem 1.25rem;
  color: var(--sidebar-text);
  text-decoration: none;
  font-weight: 600;
  font-size: .92rem;
  border-left: 3px solid transparent;
  transition: all .2s ease;
}
.sidebar-link i { font-size: 1.1rem; width: 1.2rem; flex-shrink: 0; }

.sidebar-link:hover {
  color: var(--accent-gold);
  background: rgba(245, 166, 35, 0.10);
  border-left-color: var(--accent-gold);
  text-decoration: none;
}
.sidebar-link.active {
  color: var(--accent-gold);
  background: rgba(245, 166, 35, 0.15);
  border-left-color: var(--accent-gold);
}

/* Logout link — keep red tint */
.sidebar-link.text-danger            { color: #f87171 !important; }
.sidebar-link.text-danger:hover      {
  color: #fca5a5 !important;
  background: rgba(248, 113, 113, 0.12) !important;
  border-left-color: #f87171 !important;
}

.sidebar-divider {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin: .75rem 1.25rem;
}

/* ── Main content ───────────────────────────────────────────── */
.main-content { margin-left: var(--sidebar-width); flex: 1; display: flex; flex-direction: column; }

/* ── Topbar ─────────────────────────────────────────────────── */
.topbar {
  height: var(--topbar-h);
  background: var(--primary-blue);          /* royal blue topbar */
  display: flex;
  align-items: center;
  padding: 0 1.5rem;
  justify-content: space-between;
  box-shadow: 0 2px 12px rgba(15, 32, 68, 0.25);
  position: sticky;
  top: var(--site-navbar-h);   /* stick just below the fixed site-navbar */
  z-index: 100;
  border-bottom: 2px solid rgba(245, 166, 35, 0.35);  /* subtle gold accent line */
}

.topbar-title { font-weight: 800; font-size: 1.1rem; color: #fff; }

/* Text / info on the right side */
.topbar > span.text-muted,
.topbar .text-muted { color: rgba(255, 255, 255, 0.65) !important; }

/* Avatar circle */
.topbar .rounded-circle.bg-primary {
  background: var(--accent-gold) !important;
  color: var(--sidebar-bg) !important;
  font-weight: 800;
}

/* Mobile sidebar toggle inside topbar */
.topbar .btn-light {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
}
.topbar .btn-light:hover {
  background: rgba(245, 166, 35, 0.22);
  border-color: var(--accent-gold);
  color: var(--accent-gold);
}

/* Back / secondary action buttons inside topbar */
.topbar .btn-outline-secondary,
.topbar a.btn-outline-secondary {
  color: rgba(255, 255, 255, 0.85);
  border-color: rgba(255, 255, 255, 0.30);
  background: transparent;
}
.topbar .btn-outline-secondary:hover,
.topbar a.btn-outline-secondary:hover {
  background: rgba(255, 255, 255, 0.10);
  color: var(--accent-gold);
  border-color: var(--accent-gold);
}

/* Primary action buttons inside topbar (e.g. "Add Subject") */
.topbar .btn-primary {
  background: var(--accent-gold);
  border-color: var(--accent-gold-dark);
  color: #fff;
}
.topbar .btn-primary:hover {
  background: var(--accent-gold-dark);
  border-color: var(--accent-gold-dark);
}

/* Outline-primary in topbar (e.g. Print button on grades page) */
.topbar .btn-outline-primary,
.topbar button.btn-outline-primary {
  color: rgba(255, 255, 255, 0.90);
  border-color: rgba(255, 255, 255, 0.35);
  background: transparent;
}
.topbar .btn-outline-primary:hover,
.topbar button.btn-outline-primary:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--accent-gold);
  border-color: var(--accent-gold);
}

/* General anchor in topbar */
.topbar a { color: rgba(255, 255, 255, 0.85); }
.topbar a:hover { color: var(--accent-gold); }

/* ── Page body ──────────────────────────────────────────────── */
.page-body { padding: 1.75rem; }

/* ── Stat cards ─────────────────────────────────────────────── */
.stat-card {
  background: #fff;
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  gap: 1.25rem;
  border-left: 4px solid var(--primary);
  transition: transform .2s ease, box-shadow .2s ease;
}
.stat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(15, 32, 68, 0.16);
}

.stat-icon {
  width: 56px; height: 56px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem;
  flex-shrink: 0;
}
.stat-icon.blue   { background: var(--primary-light); color: var(--primary); }
.stat-icon.gold,
.stat-icon.yellow { background: var(--accent-gold-light); color: var(--accent-gold-dark); }
.stat-icon.green  { background: #d1fae5; color: #059669; }
.stat-icon.red    { background: #fee2e2; color: #dc2626; }
.stat-icon.purple { background: #ede9fe; color: #7c3aed; }

.stat-value { font-size: 1.8rem; font-weight: 800; color: var(--sidebar-bg); line-height: 1; }
.stat-label { font-size: .82rem; color: #64748b; font-weight: 600; margin-top: .2rem; }

/* ── Portal table ───────────────────────────────────────────── */
.portal-table {
  background: #fff;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.portal-table .table { margin: 0; }
.portal-table .table td { vertical-align: middle; }

/* Section-header bars (the coloured divider divs above each table).
   These use inline styles so we need !important to override them.      */
.portal-table > div.border-bottom,
.portal-table > .table-responsive + div.border-bottom {
  background: linear-gradient(90deg, var(--sidebar-bg) 0%, var(--primary-blue) 100%) !important;
  color: #fff !important;
  border-bottom: 1px solid rgba(245, 166, 35, 0.30) !important;
}
/* Text colours inside those headers */
.portal-table > div.border-bottom .fw-bold          { color: #fff !important; }
.portal-table > div.border-bottom .text-muted        { color: rgba(255,255,255,.65) !important; }
.portal-table > div.border-bottom .text-primary      { color: var(--accent-gold) !important; }
.portal-table > div.border-bottom small              { color: rgba(255,255,255,.70) !important; }
.portal-table > div.border-bottom span.badge         { border: 1px solid rgba(255,255,255,.25); }
.portal-table > div.border-bottom .badge.bg-secondary { background: rgba(255,255,255,.18) !important; color: #fff !important; }
.portal-table > div.border-bottom .badge.bg-light     { background: rgba(255,255,255,.18) !important; color: #fff !important; }
.portal-table > div.border-bottom .badge.bg-primary   { background: var(--accent-gold)  !important; color: #fff !important; }

/* Buttons inside section-header bars */
.portal-table > div.border-bottom .btn-outline-primary,
.portal-table > div.border-bottom .btn-sm.btn-outline-primary {
  color: #fff;
  border-color: rgba(255,255,255,.40);
  background: transparent;
}
.portal-table > div.border-bottom .btn-outline-primary:hover {
  background: var(--accent-gold);
  border-color: var(--accent-gold-dark);
  color: #fff;
}
.portal-table > div.border-bottom .btn-outline-success {
  color: #6ee7b7;
  border-color: rgba(110,231,183,.45);
}
.portal-table > div.border-bottom .btn-outline-success:hover {
  background: #059669;
  border-color: #059669;
  color: #fff;
}

/* Table head rows — deep blue with white text */
.portal-table .table thead th,
.table thead th {
  background: var(--sidebar-bg);
  color: #fff;
  font-weight: 700;
  border-bottom: 2px solid var(--accent-gold);
  border-top: none;
  white-space: nowrap;
}

/* Table hover rows — very subtle gold tint */
.table-hover > tbody > tr:hover > * {
  background-color: var(--accent-gold-light);
}

/* ── Form card ──────────────────────────────────────────────── */
.form-card {
  background: #fff;
  border-radius: var(--radius);
  padding: 2rem;
  box-shadow: var(--shadow);
}

/* ── Section titles ─────────────────────────────────────────── */
.section-title {
  font-weight: 800;
  font-size: 1rem;
  color: var(--sidebar-bg);
  border-bottom: 2px solid var(--accent-gold);
  padding-bottom: .5rem;
  margin-bottom: 1.5rem;
}

/* ── Announcement accent bar ────────────────────────────────── */
.border-start.border-primary.border-3 { border-color: var(--accent-gold) !important; }

/* ── Animations ─────────────────────────────────────────────── */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-in { animation: fadeIn .35s ease both; }

/* ================================================================
   BOOTSTRAP 5 OVERRIDES
   ================================================================ */

/* ── btn-primary ────────────────────────────────────────────── */
.btn-primary,
.btn-primary:not(:disabled):not(.disabled) {
  background-color: var(--primary);
  border-color: var(--primary);
  color: #fff;
  font-weight: 700;
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--accent-gold);
  border-color: var(--accent-gold-dark);
  color: #fff;
  box-shadow: 0 4px 14px rgba(245, 166, 35, 0.40);
}
.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle {
  background-color: var(--accent-gold-dark) !important;
  border-color:     var(--accent-gold-dark) !important;
}

/* ── btn-outline-primary ────────────────────────────────────── */
.btn-outline-primary {
  color: var(--primary);
  border-color: var(--primary);
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

/* ── btn-outline-secondary (in content area, not topbar) ────── */
.page-body .btn-outline-secondary:hover,
.form-card .btn-outline-secondary:hover {
  background-color: #64748b;
  border-color: #64748b;
  color: #fff;
}

/* ── btn-success ────────────────────────────────────────────── */
.btn-success  { font-weight: 700; }
.btn-outline-success { font-weight: 600; }

/* ── btn-danger ─────────────────────────────────────────────── */
.btn-outline-danger { font-weight: 600; }

/* ── Forms — focus state ────────────────────────────────────── */
.form-control:focus,
.form-select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 .22rem rgba(245, 166, 35, 0.28);
  outline: none;
}

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

/* bg-warning → gold; keep dark text for readability */
.badge.bg-warning {
  background-color: var(--accent-gold) !important;
  color: #1a1a1a !important;
}

/* ── Text / border utilities ────────────────────────────────── */
.text-primary { color: var(--primary) !important; }
.border-primary { border-color: var(--primary) !important; }

/* ── Progress bars ──────────────────────────────────────────── */
.progress-bar { font-weight: 700; }

/* ── Alerts ─────────────────────────────────────────────────── */
.alert-info {
  background-color: var(--primary-light);
  border-color: var(--primary);
  color: var(--sidebar-bg);
}
.alert-info strong { color: var(--primary-blue); }

/* ── Custom enrollment-status badges ───────────────────────── */
.badge-pending  {
  background: var(--accent-gold-light);
  color: #92400e;
  padding: .3rem .7rem; border-radius: 50px; font-size: .78rem; font-weight: 700;
}
.badge-approved {
  background: #d1fae5; color: #064e3b;
  padding: .3rem .7rem; border-radius: 50px; font-size: .78rem; font-weight: 700;
}
.badge-rejected {
  background: #fee2e2; color: #7f1d1d;
  padding: .3rem .7rem; border-radius: 50px; font-size: .78rem; font-weight: 700;
}

/* ================================================================
   REPORT PAGE SPECIFICS
   Override the inline !important colours in attendance_sheet / report
   so the column-group headers stay distinct from the main deep-blue
   ================================================================ */
.report-table th[style*="background:#1a3a6e"],
.report-table th[style*="background: #1a3a6e"] {
  background: #1a3a6e !important;
}
.report-table th[style*="background:#14532d"],
.report-table th[style*="background: #14532d"] {
  background: #14532d !important;
}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 768px) {
  .sidebar {
    transform: translateX(-100%);
  }
  .sidebar.open {
    transform: translateX(0);
  }
  .main-content {
    margin-left: 0;
  }
}

/* ================================================================
   PRINT (global — page-specific print CSS lives in each template)
   ================================================================ */
@media print {
  .site-navbar, .sidebar, .topbar, .no-print { display: none !important; }
  .main-content { margin: 0; width: 100%; }
  body { padding-top: 0; background: #fff; }
}