/**
 * Shared premium theme for Student Portal, Teacher Portal, and the Admin
 * panel. These surfaces previously used plain unstyled Bootstrap while the
 * public marketing site had a full brand design system — this file brings
 * them in line: same palette, same rounded/soft-shadow card language, same
 * Baloo 2 display font for headings, same hover micro-interactions.
 *
 * Load AFTER the Bootstrap CDN link, and add the Google Fonts <link> for
 * Inter + Baloo 2 alongside it (see student/teacher/admin login & dashboard
 * <head> blocks for the exact tags to copy).
 */
:root {
  --brand-dark: #0f1e3c;
  --brand-primary: #1d4ed8;
  --brand-primary-dark: #163ea8;
  --brand-light: #eaf1fb;
  --brand-accent: #38bdf8;
}

body {
  font-family: 'Inter', 'Segoe UI', Roboto, Arial, sans-serif;
  color: #24304a;
}
h1, h2, h3, h4, h5, h6, .navbar-brand small { color: var(--brand-dark); }
h4.fw-bold, h5.fw-bold, .card-header.fw-bold { font-family: 'Baloo 2', 'Inter', sans-serif; letter-spacing: -.01em; }

/* ---------- Login screens (student/teacher/admin) ---------- */
body.portal-auth {
  min-height: 100vh;
  background: radial-gradient(circle at 20% 20%, rgba(56,189,248,.16), transparent 45%),
              radial-gradient(circle at 85% 80%, rgba(29,78,216,.14), transparent 50%),
              linear-gradient(160deg, #f4f8fd, #eaf1fb 60%, #e4edfb);
  display: flex;
  align-items: center;
}
body.portal-auth .auth-card {
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(15,30,60,.14);
  overflow: hidden;
  position: relative;
}
body.portal-auth .auth-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px;
  background: linear-gradient(90deg, var(--brand-primary), var(--brand-accent));
}
body.portal-auth .auth-card img { filter: drop-shadow(0 4px 10px rgba(15,30,60,.15)); }
body.portal-auth .form-control {
  border-radius: 10px; border-color: #dde6f4; padding: 10px 14px; transition: box-shadow .15s ease, border-color .15s ease;
}
body.portal-auth .form-control:focus { border-color: var(--brand-primary); box-shadow: 0 0 0 .2rem rgba(29,78,216,.12); }
body.portal-auth .btn-primary {
  border-radius: 999px; padding: 10px 0; font-weight: 700;
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-dark)) !important;
  border: none !important; box-shadow: 0 10px 24px rgba(29,78,216,.28);
  transition: transform .15s ease, box-shadow .15s ease;
}
body.portal-auth .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 14px 30px rgba(29,78,216,.34); }

/* ---------- Dashboard shell (student/teacher) ---------- */
body.portal-shell {
  background: linear-gradient(180deg, #f6f9fd 0%, #f4f6f9 220px);
}
body.portal-shell .navbar {
  box-shadow: 0 2px 16px rgba(15,30,60,.06);
  border-bottom: 3px solid var(--brand-light);
}
body.portal-shell .navbar-brand small { font-weight: 600; }

/* Cards: soft shadow, rounded corners, gentle lift on hover for anything clickable */
body.portal-shell .card, body.admin-shell .card {
  border-radius: 16px !important;
  box-shadow: 0 4px 18px rgba(15,30,60,.06) !important;
  transition: box-shadow .2s ease, transform .2s ease;
}
body.portal-shell .card:hover, body.admin-shell .card:hover { box-shadow: 0 10px 28px rgba(15,30,60,.1) !important; }
body.portal-shell .card-header, body.admin-shell .card-header {
  border-radius: 16px 16px 0 0 !important; border-bottom: 1px solid #eef1f6 !important;
  background: #fff !important;
}

/* Buttons: brand gradient + pill shape, consistent with the public site */
body.portal-shell .btn-primary, body.admin-shell .btn-primary {
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-dark)) !important;
  border: none !important; border-radius: 999px !important; font-weight: 600;
  box-shadow: 0 6px 16px rgba(29,78,216,.22); transition: transform .15s ease, box-shadow .15s ease;
}
body.portal-shell .btn-primary:hover, body.admin-shell .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(29,78,216,.28); }
body.portal-shell .btn-outline-primary, body.admin-shell .btn-outline-primary {
  border-radius: 999px !important; border-color: var(--brand-primary) !important; color: var(--brand-primary) !important; font-weight: 600;
}
body.portal-shell .btn-outline-primary:hover, body.admin-shell .btn-outline-primary:hover { background: var(--brand-primary) !important; color: #fff !important; }
body.portal-shell .btn-outline-danger, body.admin-shell .btn-outline-danger,
body.portal-shell .btn-outline-secondary, body.admin-shell .btn-outline-secondary,
body.portal-shell .btn-success, body.admin-shell .btn-success { border-radius: 999px !important; font-weight: 600; }
body.portal-shell .btn-sm, body.admin-shell .btn-sm { padding: 6px 16px; }

/* Badges: pill shape, soft brand tints */
body.portal-shell .badge, body.admin-shell .badge { border-radius: 999px; font-weight: 600; padding: 5px 11px; }

/* Tables: rounded, subtle row hover, breathing room */
body.portal-shell .table, body.admin-shell .table { font-size: .92rem; }
body.portal-shell .table thead th, body.admin-shell .table thead th {
  text-transform: uppercase; font-size: .72rem; letter-spacing: .5px; color: #6b7a99; border-bottom-width: 1px;
}
body.portal-shell .table tbody tr, body.admin-shell .table tbody tr { transition: background-color .12s ease; }
body.portal-shell .table tbody tr:hover, body.admin-shell .table tbody tr:hover { background-color: var(--brand-light); }

/* List groups (dashboard item lists) */
body.portal-shell .list-group-item, body.admin-shell .list-group-item { border-color: #eef1f6; transition: background-color .12s ease; }
body.portal-shell .list-group-item:hover { background-color: #fafcff; }

/* Nav tabs (teacher course tabs) styled like the public site */
body.portal-shell .nav-tabs { border-bottom: 2px solid var(--brand-light); }
body.portal-shell .nav-tabs .nav-link { border: none; color: #6b7a99; font-weight: 600; border-radius: 10px 10px 0 0; padding: 10px 18px; }
body.portal-shell .nav-tabs .nav-link:hover { color: var(--brand-primary); background: var(--brand-light); }
body.portal-shell .nav-tabs .nav-link.active { color: var(--brand-primary); background: var(--brand-light); border-bottom: 2px solid var(--brand-primary); margin-bottom: -2px; }

/* Empty-state placeholders (e.g. "No assignments yet") */
body.portal-shell .text-center.text-secondary.py-4,
body.portal-shell .text-center.text-secondary.py-3,
body.portal-shell .text-center.text-secondary.py-5 { font-size: .9rem; }

/* Small stat pills used on the student dashboard (attendance/fee badges) */
.stat-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; font-weight: 700; font-size: .8rem; }
.stat-pill.good { background: #e7f7ee; color: #1a8f4c; }
.stat-pill.warn { background: #fdecec; color: #d64545; }
.stat-pill.neutral { background: var(--brand-light); color: var(--brand-primary); }

/* ---------- Admin sidebar polish ---------- */
/* Sticky + independently scrollable, so a long admin page doesn't carry the
   nav out of reach — with ~25 links across the panel, that mattered. */
body.admin-shell .admin-sidebar {
  background: linear-gradient(180deg, var(--brand-dark), #0b1730);
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.2) transparent;
}
body.admin-shell .admin-sidebar::-webkit-scrollbar { width: 6px; }
body.admin-shell .admin-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 6px; }

body.admin-shell .admin-sidebar a {
  border-radius: 10px; margin: 2px 10px; padding: 9px 14px !important; width: calc(100% - 20px);
  font-size: .89rem; transition: background-color .15s ease, transform .1s ease;
}
body.admin-shell .admin-sidebar a.active {
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-dark)) !important;
  box-shadow: 0 6px 16px rgba(29,78,216,.35);
}
body.admin-shell .admin-sidebar a:hover:not(.active) { background: rgba(255,255,255,.08); transform: translateX(2px); }
body.admin-shell .admin-sidebar .brand { border-bottom: 1px solid rgba(255,255,255,.08); flex-shrink: 0; }

/* Section group labels ("ACADEMICS", "LEADS & ADMISSIONS", ...) that break
   the ~25 links into scannable clusters instead of one long undifferentiated
   list — the main fix for the sidebar feeling cluttered. */
body.admin-shell .admin-sidebar .nav-group-label {
  font-size: .68rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  color: rgba(255,255,255,.35); padding: 16px 20px 6px;
}
body.admin-shell .admin-sidebar .nav-links-scroll { flex: 1; overflow-y: auto; padding-bottom: 8px; }
body.admin-shell .admin-sidebar .nav-utility {
  flex-shrink: 0; border-top: 1px solid rgba(255,255,255,.08); padding: 8px 0; margin-top: 4px;
}

/* Sidebar quick-filter input (search-as-you-type across the ~25 nav links) */
body.admin-shell .admin-sidebar .nav-filter-wrap { padding: 4px 16px 8px; flex-shrink: 0; }
body.admin-shell .admin-sidebar .nav-filter-wrap input {
  width: 100%; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12);
  color: #fff; border-radius: 8px; padding: 7px 10px 7px 30px; font-size: .82rem;
}
body.admin-shell .admin-sidebar .nav-filter-wrap input::placeholder { color: rgba(255,255,255,.45); }
body.admin-shell .admin-sidebar .nav-filter-wrap input:focus { outline: none; border-color: var(--brand-accent); background: rgba(255,255,255,.12); }
body.admin-shell .admin-sidebar .nav-filter-wrap { position: relative; }
body.admin-shell .admin-sidebar .nav-filter-wrap i { position: absolute; left: 26px; top: 15px; color: rgba(255,255,255,.4); font-size: .78rem; }
body.admin-shell .admin-sidebar a.nav-link-hidden { display: none; }
body.admin-shell .admin-sidebar .nav-group-label.nav-group-hidden { display: none; }

/* Buttons/tap targets stay comfortable on touch screens */
@media (max-width: 576px) {
  body.portal-shell .btn-sm, body.admin-shell .btn-sm { padding: 8px 16px; }
  body.portal-auth .container { padding-left: 20px; padding-right: 20px; }
}