: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;
}

/* =========================================================
   Sidebar edge — a crisp divider line plus soft depth so the
   navigation panel reads as a distinct, finished surface.
========================================================= */
.app-sidebar {
  border-right: 1px solid rgba(255,255,255,0.16);
  box-shadow: 1px 0 0 rgba(15,32,56,0.35), 4px 0 18px rgba(15,32,56,0.18);
}
.app-sidebar::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--brand-accent), rgba(255,193,7,0.15) 45%, rgba(255,193,7,0));
  pointer-events: none;
}
/* No stray rules between menu groups */
.sidebar-nav .nav-item,
.sidebar-nav .nav-link { border-top: 0; border-bottom: 0; box-shadow: none; }
.sidebar-nav .nav-item + .nav-item { border-top: 1px solid rgba(255,255,255,0.05); }

/* =========================================================
   Form hierarchy — readable labels, clear section headings,
   and a consistent red asterisk for required fields
   (admission + edit screens for students and staff).
========================================================= */
.form-hier .form-label {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--ink);
  margin-bottom: 0.3rem;
}
.form-hier .form-text,
.form-hier .form-text small { color: #6b7b8c; font-size: 0.78rem; }
.form-hier .form-control,
.form-hier .form-select { border-color: #cdd5de; color: var(--ink); }
.form-hier .form-control:focus,
.form-hier .form-select:focus { border-color: var(--brand-mid); box-shadow: 0 0 0 .2rem rgba(45,95,139,.15); }
.form-hier .form-control:disabled,
.form-hier .form-control[readonly] { background: #eef1f5; }
.form-hier .form-section {
  margin-top: 1.1rem;
  padding: .45rem .8rem;
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--brand-dark);
  background: linear-gradient(90deg, #eef3f8, rgba(238,243,248,0));
  border-left: 4px solid var(--brand-accent);
  border-radius: 2px;
}
.form-hier .form-section:first-child { margin-top: 0; }
.form-hier .form-section small { font-weight: 500; letter-spacing: 0; text-transform: none; color: #6b7b8c; margin-left: .4rem; }
.form-hier h6.text-muted.text-uppercase {
  color: var(--brand-dark) !important;
  font-weight: 800;
  letter-spacing: .09em;
  font-size: .8rem !important;
  padding: .45rem .8rem;
  background: linear-gradient(90deg, #eef3f8, rgba(238,243,248,0));
  border-left: 4px solid var(--brand-accent);
}
.form-hier .nav-tabs .nav-link { font-weight: 600; color: #47576b; }
.form-hier .nav-tabs .nav-link.active { color: var(--brand-dark); border-bottom: 3px solid var(--brand-accent); }
.req { color: #dc3545; font-weight: 700; margin-left: 2px; }


/* =========================================================
   Readability: key text parts are bold across the whole system
========================================================= */
.form-label, label.form-check-label.fw-semibold, legend { font-weight: 600; }
.table thead th, .table tfoot th, .table tfoot td { font-weight: 700; }
.table tbody td > a:not(.btn), .table tbody th { font-weight: 600; }
.card-header, .modal-title, .offcanvas-title { font-weight: 700; }
h1, h2, h3, h4, h5, h6 { font-weight: 700; }
.nav-tabs .nav-link, .nav-pills .nav-link { font-weight: 600; }
.btn { font-weight: 600; }
.badge { font-weight: 600; }
.alert .alert-heading, .alert strong { font-weight: 700; }
dt, .fw-medium { font-weight: 700; }
.table .text-end.fw-bold, .table tr.total-row td { font-weight: 700; }

/* Required-field asterisk (wrapped in .req-star by footer.php, so it works on every page) */
.req-star { color: #dc3545 !important; font-weight: 700; }

/* =========================================================
   Metric cards - flat tinted panel, coloured left edge, no icon chip.
   Used by the dashboard, attendance report and other stat tiles.
========================================================= */
.stat-tile {
  gap: 0;
  border: 1px solid var(--stat-edge, var(--line));
  border-left: 4px solid var(--tile-color, var(--accent-blue));
  border-radius: 10px;
  background: var(--tile-tint, var(--accent-blue-tint));
}
.stat-tile-icon { display: none; }
.stat-tile-value { color: var(--tile-color, var(--accent-blue)); font-weight: 800; }
.stat-tile-label { color: var(--tile-color, var(--accent-blue)); font-weight: 600; }
.card:has(> .stat-tile) { border: 0; background: transparent; box-shadow: none; }

.metric-card {
  border: 1px solid var(--stat-edge); border-left: 4px solid var(--stat-tone);
  border-radius: 10px; background: var(--stat-wash); padding: 1rem 1.1rem; height: 100%;
}
.metric-card .metric-label { color: var(--stat-tone); font-size: .82rem; font-weight: 600; }
.metric-card .metric-value { margin: .35rem 0 0; color: var(--stat-tone); font-family: var(--font-display); font-size: 1.65rem; font-weight: 800; line-height: 1; }
.metric-card .metric-note { margin-top: .45rem; color: var(--ink-soft); font-size: .76rem; }
.metric--olive  { --stat-tone:#536642; --stat-edge:#dce3d1; --stat-wash:#f1f3eb; }
.metric--green  { --stat-tone:#31644c; --stat-edge:#d9e7dc; --stat-wash:#edf4ef; }
.metric--teal   { --stat-tone:#426570; --stat-edge:#d8e5e7; --stat-wash:#eef3f4; }
.metric--clay   { --stat-tone:#8b5242; --stat-edge:#eadbd4; --stat-wash:#f6efeb; }

/* Timetable: a break is written once, along its column, instead of repeated in every row */
.grid-table .break-th { width: 46px; min-width: 46px; padding-left: 2px !important; padding-right: 2px !important; font-size: .62rem; }
.grid-table .break-col { width: 46px; min-width: 46px; padding: 0 !important; text-align: center; vertical-align: middle; background: #e8ecf1; }
.grid-table .break-col span { display: inline-block; writing-mode: vertical-rl; transform: rotate(180deg); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: .78rem; color: #475467; white-space: nowrap; }
@media print { .grid-table .break-col { background: #e8ecf1 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; } }

/* =========================================================
   Header divider: the gold line continues under the logo block, plus a soft vertical separator
========================================================= */
.sidebar-brand { box-shadow: inset -1px 0 0 rgba(255,255,255,0.28); }
.app-topbar { box-shadow: -1px 0 0 rgba(255,255,255,0.32) inset, 0 2px 10px rgba(25, 53, 62, 0.16); }

/* Sortable table headers */
th.eh-sortable { cursor: pointer; user-select: none; white-space: nowrap; }
th.eh-sortable:hover { background: rgba(30,58,95,.08); }
.eh-sort-ind { font-size: .7em; color: #1e3a5f; }
.eh-sortbar { display: flex; gap: .35rem; align-items: center; margin: 0 0 .5rem; }

/* =========================================================
   Phones: no wasted space, no sideways page scroll, no accidental zoom
   (pinch-zoom stays available for accessibility)
========================================================= */
html, body { max-width: 100%; overflow-x: hidden; }
.app-main { min-width: 0; max-width: 100%; }
a, button, .btn, .nav-link, label, select, summary { touch-action: manipulation; }   /* stops double-tap zoom */
img, canvas, video, iframe { max-width: 100%; }
@media (max-width: 767.98px) {
  .container-fluid { padding-left: .6rem !important; padding-right: .6rem !important; padding-top: .75rem !important; padding-bottom: 1rem !important; }
  .row { --bs-gutter-x: .75rem; --bs-gutter-y: .75rem; }
  .card-body { padding: .85rem; }
  .card-header { padding: .6rem .85rem; }
  .table > :not(caption) > * > * { padding: .45rem .5rem; }
  h4, .h4 { font-size: 1.15rem; }
  input, select, textarea, .form-control, .form-select { font-size: 16px !important; }   /* iOS/Android do not auto-zoom on focus */
  .topbar-search-wrap { min-width: 0; flex: 1 1 auto; }
  .app-topbar { padding: 0 .6rem; gap: .5rem; }
}

/* Searchable pick-list (long selects) */
.eh-combo { position: relative; }
.eh-combo-list { position: absolute; z-index: 2050; left: 0; right: 0; top: 100%; margin-top: 2px; max-height: 280px; overflow-y: auto; background: #fff; border: 1px solid #cfd8e3; border-radius: 8px; box-shadow: 0 10px 24px rgba(16, 38, 62, .16); }
.eh-combo-item { padding: .5rem .75rem; cursor: pointer; font-size: .92rem; border-bottom: 1px solid #f1f4f8; }
.eh-combo-item:last-child { border-bottom: 0; }
.eh-combo-item.active, .eh-combo-item:hover { background: #e8f0fb; }
.eh-combo-empty { padding: .6rem .75rem; color: #8492a6; font-size: .9rem; }

/* =========================================================
   Printing: keep the original colours and structure, and make sure every piece of information is captured
========================================================= */
*, *::before, *::after { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
@page { margin: 10mm; }
@media print {
  *, *::before, *::after { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  html, body { background: #fff !important; overflow: visible !important; }
  .app-sidebar, .app-topbar, #appSidebar, #sidebarBackdrop, .sidebar-backdrop, .d-print-none, .eh-sortbar, .eh-combo-list,
  .btn-close, .modal-backdrop, .toast-container { display: none !important; }
  .app-main { margin: 0 !important; padding: 0 !important; width: 100% !important; max-width: 100% !important; }
  .container-fluid { padding: 0 !important; max-width: 100% !important; }
  .table-responsive, .overflow-auto, .overflow-x-auto { overflow: visible !important; max-height: none !important; }
  .table td, .table th { white-space: normal !important; word-break: break-word; }
  .text-truncate, .truncate { overflow: visible !important; text-overflow: clip !important; white-space: normal !important; }
  table { width: 100% !important; page-break-inside: auto; }
  thead { display: table-header-group; }
  tr, .card, .metric-card, .slip { page-break-inside: avoid; break-inside: avoid; }
  .card { box-shadow: none !important; }
  a[href]::after { content: none !important; }
  .eh-combo input { border: 0 !important; background: transparent !important; padding-left: 0; }
  .grid-table { font-size: 10px; }
}

/* Gold frame lines on every screen size: under the logo block, aligned with the top bar, and down the sidebar edge */
.sidebar-brand { min-height: var(--topbar-height); box-sizing: border-box; border-bottom: 0 !important; }   /* no gold line under the logo */
.app-sidebar::after { width: 3px; background: linear-gradient(180deg, #f0bd45, rgba(240,189,69,0.65)) !important; }

/* =========================================================
   Dashboard: balanced card grid with equal-height cards
========================================================= */
.dash-grid { align-items: stretch; }
.dash-cell { display: flex; flex-direction: column; min-width: 0; }
.dash-cell > * { flex: 1 1 auto; height: 100%; box-sizing: border-box; transition: box-shadow .2s ease, transform .2s ease; }
.dash-cell > *:hover { box-shadow: 0 14px 34px rgba(27, 37, 89, .09); transform: translateY(-2px); }
.dash-cell .attendance-overview-card { height: 100%; }
@media (prefers-reduced-motion: reduce) { .dash-cell > *:hover { transform: none; } }