:root {
  --sidebar-width: 228.9px;
  --sidebar-collapsed-width: 74px;
  --topbar-height: 60px;
  --brand-dark: #1e3a5f;
  --brand-mid: #2d5f8b;
  --brand-accent: #ffc107;

  /* Design tokens for dashboard-style surfaces — one deliberate, muted
     palette used consistently instead of assigning a random saturated
     Bootstrap color per card. */
  --ink: #1c2b3a;
  --ink-soft: #5b6b7c;
  --line: #e3e7ec;
  --surface: #f4f6f9;
  --font-display: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --accent-blue: #2d5f8b;    --accent-blue-tint: #e8eff5;
  --accent-teal: #2f8a83;    --accent-teal-tint: #e6f2f1;
  --accent-amber: #b8790a;   --accent-amber-tint: #fbf1e1;
  --accent-plum: #6d5b9e;    --accent-plum-tint: #eeecf6;
  --accent-forest: #3f7a4e;  --accent-forest-tint: #e9f2eb;
  --accent-clay: #b35339;    --accent-clay-tint: #f7e9e5;
  --accent-slate: #47576b;   --accent-slate-tint: #eaedf1;
  --accent-indigo: #4a5a8a;  --accent-indigo-tint: #eceef5;
  --accent-rose: #a14f68;    --accent-rose-tint: #f6e9ee;
  --accent-moss: #5c7a4a;    --accent-moss-tint: #eef2e8;
}

body.role-teacher,
body.role-librarian,
body.role-receptionist,
body.role-student,
body.role-accountant {
  --sidebar-width: 206.01px;
}

/* Requested density pass: everything sized in rem (which is most of
   Bootstrap plus our own tokens) scales down with it, matching the
   ~90% browser-zoom look from the reference screenshot without having
   to hand-tune every component. */
html {
  font-size: 90%;
}

body {
  background-color: #f4f6f9;
  font-family: var(--font-display);
  color: var(--ink);
}

h1, h2, h3, h4, h5, h6,
input, select, textarea, button,
.form-control, .form-select, .btn, .nav-link {
  font-family: var(--font-display);
}

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

/* =========================================================
   Login page (unchanged)
========================================================= */
.login-body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1e3a5f, #2d5f8b);
}

.login-card {
  width: 100%;
  max-width: 420px;
  border: none;
  border-radius: 12px;
}

.card {
  border: none;
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(20,30,45,0.05);
}

.card-header {
  background-color: #fff;
  border-bottom: 1px solid #eee;
  border-radius: 14px 14px 0 0 !important;
}

.stat-card {
  border-radius: 12px;
  transition: transform 0.15s ease;
}

.stat-card:hover {
  transform: translateY(-3px);
}

/* =========================================================
   Stat tiles — one restrained treatment (white card, tinted icon
   chip, large figure) used for every dashboard metric instead of a
   different loud fill color per card.
========================================================= */
.stat-tile {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 1.1rem 1.25rem;
  height: 100%;
}

.stat-tile-icon {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  background: var(--tile-tint, var(--accent-blue-tint));
  color: var(--tile-color, var(--accent-blue));
}

.stat-tile-body {
  min-width: 0;
}

.stat-tile-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--ink);
  white-space: nowrap;
}

.stat-tile-label {
  font-size: 0.82rem;
  color: var(--ink-soft);
}

/* Quick action buttons — one quiet, consistent style instead of a
   different Bootstrap outline color per link. */
.quick-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.quick-link-btn i {
  color: var(--brand-mid);
  font-size: 1rem;
}

.quick-link-btn:hover {
  background: var(--accent-blue-tint);
  border-color: var(--brand-mid);
  color: var(--ink);
}

.table thead th {
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

footer {
  border-top: 1px solid #e0e0e0;
}

/* =========================================================
   LEFT VERTICAL SIDEBAR — categorized navigation, top to bottom
========================================================= */
.app-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--sidebar-width);
  background: linear-gradient(180deg, var(--brand-dark), var(--brand-mid));
  color: #eaf1f8;
  z-index: 1040;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: width 0.2s ease, transform 0.2s ease;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.9rem 1rem;
  height: var(--topbar-height);
  border-bottom: 1px solid rgba(255,255,255,0.12);
  flex-shrink: 0;
}

.sidebar-brand-text {
  color: #fff;
  font-weight: 700;
  font-size: 1.05rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-logo-img {
  height: 32px;
  width: 32px;
  object-fit: contain;
  border-radius: 4px;
  background: #fff;
  padding: 2px;
}

.sidebar-close {
  background: none;
  border: none;
  color: #fff;
  font-size: 1.1rem;
}

.sidebar-nav {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0.5rem 0 1.5rem;
}

.sidebar-nav::-webkit-scrollbar { width: 6px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 3px; }

.sidebar-nav .nav-item {
  width: 100%;
}

.sidebar-nav .nav-link {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  color: rgba(255,255,255,0.85);
  padding: 0.65rem 1.1rem;
  font-size: 0.92rem;
  border-left: 3px solid transparent;
  white-space: normal;
  line-height: 1.3;
}

.sidebar-nav .nav-link i:first-child {
  font-size: 1.05rem;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.sidebar-nav .nav-link span {
  flex: 1 1 auto;
  padding-top: 0.05rem;
}

.sidebar-nav .nav-link .chev {
  font-size: 0.7rem;
  flex: 0 0 auto;
  margin-top: 0.2rem;
  transition: transform 0.2s ease;
}

.sidebar-nav .nav-link.expanded .chev {
  transform: rotate(180deg);
}

.sidebar-nav .nav-link:hover,
.sidebar-nav .nav-link.active {
  background: rgba(255,255,255,0.1);
  color: #fff;
  border-left-color: var(--brand-accent);
}

.sidebar-submenu {
  list-style: none;
  padding: 0.15rem 0 0.4rem;
  margin: 0;
  background: rgba(0,0,0,0.15);
}

/* Hard guard against Tailwind's Play CDN (loaded on dashboard.php) auto-
   generating a `.collapse { visibility: collapse }` utility that collides
   with Bootstrap's own `.collapse` class on these menus. The tailwind.config
   change in dashboard.php should already prevent that utility from being
   generated at all, but this !important rule guarantees the menu stays
   visible even if that stylesheet is stale/cached or injected late. */
.sidebar-submenu.show,
.sidebar-submenu.showing {
  visibility: visible !important;
}

.sidebar-submenu a {
  display: block;
  color: rgba(255,255,255,0.75);
  padding: 0.45rem 1.1rem 0.45rem 2.6rem;
  font-size: 0.85rem;
  text-decoration: none;
  white-space: nowrap;
}

.sidebar-submenu a:hover {
  color: #fff;
  background: rgba(255,255,255,0.08);
}

.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 1035;
}

.sidebar-backdrop.show {
  display: block;
}

/* =========================================================
   TOP BAR — school name left, user + logout pinned top-right
========================================================= */
.app-topbar {
  position: fixed;
  top: 0;
  left: var(--sidebar-width);
  right: 0;
  height: var(--topbar-height);
  background: linear-gradient(105deg, #1e3a5f 0%, #2f8177 58%, #547d4d 100%);
  border-bottom: 3px solid #f0bd45;
  box-shadow: 0 2px 10px rgba(25, 53, 62, 0.16);
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 1.25rem;
  z-index: 1030;
  transition: left 0.2s ease;
}

.sidebar-toggle {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: rgba(255,255,255,0.12);
  border: none;
  font-size: 1.3rem;
  color: #fff;
}

.sidebar-toggle:hover {
  background: rgba(255,255,255,0.22);
}

.topbar-title {
  font-weight: 700;
  color: #fff;
  flex: 0 0 auto;
}

.topbar-spacer {
  flex: 1 1 0;
}

.topbar-search-wrap {
  position: relative;
  flex: 0 1 400px;
  max-width: 400px;
  width: 100%;
}

.topbar-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #47756e;
  pointer-events: none;
}

.topbar-search-input {
  padding-left: 34px;
  background: rgba(255,255,255,0.95);
  border: 1px solid rgba(255,255,255,0.72);
  border-radius: 8px;
}

.topbar-search-input:focus {
  background: #fff;
  border-color: #f0bd45;
  box-shadow: 0 0 0 0.2rem rgba(240,189,69,0.24);
}

.topbar-search-results {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #e3e7ec;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  z-index: 1050;
  max-height: 340px;
  overflow-y: auto;
}

.topbar-search-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.9rem;
  color: #333;
  text-decoration: none;
  font-size: 0.9rem;
}

.topbar-search-item:hover {
  background: #f4f6f9;
}

.topbar-search-item i {
  color: var(--brand-mid);
}

.topbar-search-viewall {
  border-top: 1px solid #eef0f3;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--brand-mid);
}

.topbar-search-empty {
  padding: 0.75rem 0.9rem;
  color: #98a2b3;
  font-size: 0.85rem;
}

@media (max-width: 767px) {
  .topbar-search-wrap { flex: 1 1 auto; max-width: none; }
  .topbar-title { display: none !important; }
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.topbar-user {
  align-items: center;
  gap: 0.4rem;
  color: #445;
  font-size: 0.9rem;
}

/* =========================================================
   MAIN CONTENT AREA — offset for fixed sidebar + topbar
========================================================= */
.app-main {
  margin-left: var(--sidebar-width);
  padding-top: var(--topbar-height);
  min-height: 100vh;
  transition: margin-left 0.2s ease;
}

/* Desktop collapse: icons-only rail */
body.sidebar-collapsed .app-sidebar {
  width: var(--sidebar-collapsed-width);
}
body.sidebar-collapsed .app-sidebar .sidebar-brand-text,
body.sidebar-collapsed .app-sidebar .nav-link span,
body.sidebar-collapsed .app-sidebar .nav-link .chev,
body.sidebar-collapsed .app-sidebar .sidebar-submenu {
  display: none;
}
body.sidebar-collapsed .app-topbar {
  left: var(--sidebar-collapsed-width);
}
body.sidebar-collapsed .app-main {
  margin-left: var(--sidebar-collapsed-width);
}

/* Mobile: sidebar becomes an off-canvas drawer */
@media (max-width: 991.98px) {
  .app-sidebar {
    transform: translateX(-100%);
    width: var(--sidebar-width) !important;
  }
  .app-sidebar.sidebar-open {
    transform: translateX(0);
  }
  .app-topbar {
    left: 0 !important;
  }
  .app-main {
    margin-left: 0 !important;
  }
  .sidebar-close {
    display: inline-flex !important;
  }
}

/* =========================================================
   Timetable / Lesson plan grid tables
========================================================= */
.grid-table {
  border-collapse: collapse;
  width: 100%;
}
.grid-table th, .grid-table td {
  border: 1px solid #dee2e6;
  vertical-align: middle;
  text-align: center;
  padding: 0.5rem;
}
.grid-table thead th {
  background: var(--brand-dark);
  color: #fff;
}
.grid-table .day-col {
  background: #eef3f8;
  font-weight: 700;
  white-space: nowrap;
}
.grid-table .period-cell {
  font-size: 0.82rem;
  min-width: 110px;
}
.grid-table .period-cell .subj {
  font-weight: 600;
}
.grid-table .period-cell .teacher {
  color: #6c757d;
  font-size: 0.75rem;
}

/* =========================================================
   Dashboard sidebar panels — Recent Activity / Announcements
========================================================= */
.activity-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--line);
}

.activity-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.activity-item:first-child {
  padding-top: 0;
}

.activity-icon {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  background: var(--tile-tint, var(--accent-blue-tint));
  color: var(--tile-color, var(--accent-blue));
}

.activity-text {
  font-size: 0.85rem;
  color: var(--ink);
  line-height: 1.35;
}

.activity-time {
  font-size: 0.72rem;
  color: var(--ink-soft);
}

.panel-empty {
  color: var(--ink-soft);
  font-size: 0.85rem;
}

/* Fee structure "vote head" table */
.fee-vote-table th, .fee-vote-table td {
  text-align: center;
  vertical-align: middle;
}
.fee-vote-table td.vote-head-label {
  text-align: left;
  font-weight: 600;
}