/*
 * Deep English Model School — responsive theme override
 * Load this file AFTER the existing site.css and Bootstrap/framework CSS.
 * Existing class names are preserved; add the optional utility classes described
 * in the implementation prompt for new views.
 */

:root {
  color-scheme: light;
  --color-primary: #ba1e1e;
  --color-primary-dark: #8e1616;
  --color-primary-soft: rgba(186, 30, 30, 0.1);
  --color-secondary: #151515;
  --color-success: #337147;
  --color-danger: #ba1e1e;
  --color-warning: #8a5b00;
  --color-info: #337147;
  --color-bg: #f7f8fa;
  --color-surface: #ffffff;
  --color-sidebar: #151515;
  --color-sidebar-text: #ffffff;
  --color-sidebar-active: #337147;
  --color-border: rgba(21, 21, 21, 0.18);
  --color-text: #151515;
  --color-muted: #3d3d3d;
  --color-on-primary: #ffffff;
  --color-on-dark: #ffffff;
  --color-overlay: rgba(21, 21, 21, 0.48);
  --fs-xs: 14px;
  --fs-sm: 15px;
  --fs-md: 16px;
  --fs-lg: 20px;
  --fs-xl: 26px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --radius: 8px;
  --shadow: 0 3px 14px rgba(21, 21, 21, 0.07);
  --control-h: 46px;
  --sidebar-w: 240px;
  --sidebar-mini: 64px;
  --bs-body-font-size: 16px;
  --bs-body-color: #151515;
  --bs-body-bg: #f7f8fa;
  --bs-primary: #ba1e1e;
  --bs-border-color: rgba(21, 21, 21, 0.18);
  --bs-table-bg: transparent;
  --bs-table-color: #151515;
  --bs-table-striped-bg: #f8f8f8;
  --bs-table-hover-bg: rgba(186, 30, 30, 0.045);
}

html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-width: 320px;
  font-family: "Segoe UI", Tahoma, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-bg);
}
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea, [tabindex]:not([tabindex="-1"]) { touch-action: manipulation; }
:focus-visible { outline: 3px solid rgba(186, 30, 30, .45); outline-offset: 2px; }

/* Existing authenticated staff shell */
.app-shell { display: flex; min-height: 100vh; }
.app-sidebar {
  width: var(--sidebar-w); flex: 0 0 var(--sidebar-w); min-height: 100vh;
  background: var(--color-sidebar); color: var(--color-sidebar-text);
  border-right: 1px solid rgba(255,255,255,.12); transition: width .18s ease, transform .18s ease;
}
.brand-block { padding: 16px 12px; text-align: center; border-bottom: 1px solid rgba(255,255,255,.14); }
.brand-logo { width: 88px; max-height: 88px; object-fit: contain; }
.brand-name { margin: 8px 0 2px; font-size: 15px; font-weight: 700; line-height: 1.35; color: #fff; }
.brand-place { margin: 0; color: rgba(255,255,255,.82); font-size: 14px; }
.app-main { flex: 1; min-width: 0; }
.app-topbar {
  position: sticky; top: 0; z-index: 25; min-height: 60px; height: auto;
  display: flex; align-items: center; gap: 12px; padding: 8px 20px;
  background: #fff; color: var(--color-text); border-bottom: 1px solid var(--color-border);
}
.app-brand { font-size: 17px; font-weight: 700; color: var(--color-primary-dark); text-decoration: none; }
.app-user { margin-left: auto; color: var(--color-muted); font-size: 14px; }
.app-content { padding: 24px; min-width: 0; }

.side-link {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 46px;
  padding: 10px 14px; border: 0; border-radius: 0; background: transparent;
  color: var(--color-sidebar-text); text-decoration: none; text-align: left;
  font-size: 15px; line-height: 1.35;
}
.side-link:hover, .side-link:focus-visible, .side-link.active,
.side-group.active > .side-link { background: var(--color-sidebar-active); color: #fff; }
.side-children .side-link { padding-left: 42px; font-size: 14px; }
.nav-caret { margin-left: auto; font-size: 14px; }
body.nav-mini .app-sidebar { width: var(--sidebar-mini); flex-basis: var(--sidebar-mini); }
body.nav-mini .nav-text, body.nav-mini .nav-caret,
body.nav-mini .brand-name, body.nav-mini .brand-place { display: none; }
body.nav-mini .brand-logo { width: 40px; }

.page-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 20px; }
.page-title, h1.page-title { margin: 0; font-size: clamp(23px, 2vw, 28px); line-height: 1.2; font-weight: 700; }
.page-description { margin: 6px 0 0; color: var(--color-muted); font-size: 15px; }
.card {
  min-width: 0; margin-bottom: 18px; padding: 20px;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.card-title, .section-title { margin: 0 0 14px; font-size: 19px; font-weight: 700; }

/* Forms and actions */
.form-label, label.form-label { display: block; margin: 0 0 6px; color: #303030; font-size: 15px; font-weight: 600; }
.form-control, .form-select, input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="date"], input[type="search"], select, textarea {
  width: 100%; min-height: var(--control-h); height: auto; padding: 10px 12px;
  color: var(--color-text); background: #fff; border: 1px solid var(--color-border);
  border-radius: 6px; font-size: 16px; line-height: 1.35;
}
textarea.form-control, textarea { min-height: 112px; resize: vertical; }
.form-control:focus, .form-select:focus, input:focus, select:focus, textarea:focus {
  border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-soft); outline: 0;
}
.form-text, .hint, .help-text, .text-muted { color: #4a4a4a; font-size: 14px; line-height: 1.45; }
.btn, button.btn, a.btn {
  display: inline-flex; min-height: 44px; align-items: center; justify-content: center; gap: 8px;
  padding: 9px 16px; border-radius: 6px; font-size: 15px; font-weight: 650; line-height: 1.25;
}
.btn-sm { min-height: 40px; padding: 7px 12px; font-size: 14px; }
.btn-icon { width: 44px; min-width: 44px; min-height: 44px; padding: 0; }
.btn-primary { color: #fff; background: var(--color-primary); border-color: var(--color-primary); }
.btn-primary:hover, .btn-primary:focus { color: #fff; background: var(--color-primary-dark); border-color: var(--color-primary-dark); }
.btn-secondary { color: var(--color-secondary); background: #fff; border-color: var(--color-secondary); }
.btn-danger, .js-delete { color: var(--color-danger); }
.btn:disabled, button:disabled { cursor: not-allowed; opacity: .58; }

/* Tables: allow local scroll without causing page-wide overflow */
.table-responsive, .table-wrap, .dataTables_wrapper { width: 100%; min-width: 0; overflow-x: auto; }
.table { width: 100%; margin: 0; color: var(--color-text); background: transparent; --bs-table-bg: transparent; --bs-table-color: var(--color-text); }
.table td, .table th { padding: 12px 12px; font-size: 15px; line-height: 1.4; vertical-align: middle; }
.table > thead > tr > th, table.table.dataTable > thead > tr > th {
  color: #fff !important; background: var(--color-secondary) !important;
  border-color: var(--color-secondary) !important; font-size: 14px; font-weight: 700; white-space: nowrap;
}
.table > tbody > tr > td { color: var(--color-text); }
.table tbody tr:hover { background: rgba(186,30,30,.045); }
.col-actions { width: 96px; white-space: nowrap; }
.dataTables_wrapper { font-size: 15px; }
.dataTables_length label, .dataTables_info, .page-link { font-size: 14px; color: var(--color-secondary); }
.money, .currency, .amount { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Reusable feedback/status components */
.status, .status-badge, .badge-status {
  display: inline-flex; align-items: center; gap: 6px; min-height: 28px;
  padding: 4px 10px; border-radius: 999px; background: #f0f0f0;
  color: #252525; font-size: 13px; font-weight: 700; white-space: nowrap;
}
.status-success, .status-paid, .status-present, .status-published { color: #1d5731; background: #e9f4ec; }
.status-warning, .status-pending, .status-draft { color: #714900; background: #fff3d7; }
.status-danger, .status-overdue, .status-absent, .status-error { color: #8e1616; background: #fbeaea; }
.status-neutral, .status-inactive { color: #454545; background: #eceff2; }
.alert, .inline-alert { border-radius: 7px; font-size: 15px; }
#toastHost { position: fixed; top: 16px; right: 16px; z-index: 2000; display: flex; flex-direction: column; gap: 8px; }
.app-toast { min-width: 260px; max-width: min(420px, calc(100vw - 32px)); padding: 14px 16px; border-radius: 8px; color: #fff; font-size: 15px; box-shadow: var(--shadow); }
.app-toast.success { background: var(--color-success); }
.app-toast.error { background: var(--color-danger); }
.app-toast.warning { background: #7a5100; }
.app-toast.info { background: #265d39; }
.suggest-list { width: min(420px, 100%); max-height: 280px; overflow: auto; background: #fff; border: 1px solid var(--color-border); border-radius: 7px; box-shadow: var(--shadow); }
.suggest-item { display: block; width: 100%; padding: 10px 12px; text-align: left; background: #fff; border: 0; color: var(--color-text); font-size: 15px; }
.suggest-item:hover, .suggest-item:focus-visible { background: var(--color-primary-soft); }

/* Layout helpers for new screens */
.page-grid { display: grid; gap: 18px; }
.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
.stat-card { padding: 18px; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow); }
.stat-label { color: var(--color-muted); font-size: 14px; font-weight: 600; }
.stat-value { display: block; margin-top: 6px; font-size: 26px; font-weight: 750; font-variant-numeric: tabular-nums; }
.filter-form { display: flex; flex-wrap: wrap; align-items: end; gap: 14px; }
.filter-form .form-control, .filter-form .form-select { max-width: 320px; }
.form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.action-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.tabs, .nav-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--color-border); }
.tabs a, .nav-tabs .nav-link { min-height: 44px; padding: 10px 14px; font-size: 15px; }
.fee-summary, .result-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 16px; border-radius: 8px; background: #f7f8fa; }
.student-lookup { width: 100%; }
.exam-roster input[type="number"] { width: 110px; }
.exam-roster .student-name, .student-name-col { min-width: 180px; }

/* CSS mask icon kit. Use: <span class="app-icon icon-fees" aria-hidden="true"></span> */
.app-icon {
  display: inline-block; flex: 0 0 auto; width: 20px; height: 20px;
  background-color: currentColor; vertical-align: -0.18em;
  -webkit-mask: var(--icon-mask) center / contain no-repeat;
  mask: var(--icon-mask) center / contain no-repeat;
}
.app-icon.icon-sm { width: 16px; height: 16px; }
.app-icon.icon-lg { width: 24px; height: 24px; }
.icon-dashboard { --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M3 3h8v8H3zm10 0h8v5h-8zm0 7h8v11h-8zM3 13h8v8H3z'/%3E%3C/svg%3E"); }
.icon-fees, .icon-wallet { --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' d='M4 6.5A2.5 2.5 0 0 1 6.5 4H20v16H6.5A2.5 2.5 0 0 1 4 17.5zM4 7h16M15 13h5'/%3E%3Ccircle cx='15' cy='13' r='1'/%3E%3C/svg%3E"); }
.icon-receipt { --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round' d='M6 3h12v18l-3-2-3 2-3-2-3 2zM9 8h6M9 12h6M9 16h3'/%3E%3C/svg%3E"); }
.icon-students { --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='9' cy='8' r='3' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' d='M3 20v-1a6 6 0 0 1 12 0v1zm13-9a3 3 0 1 0-1-5m2 8a5 5 0 0 1 4 5v1h-3'/%3E%3C/svg%3E"); }
.icon-reports { --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' d='M4 20V4m0 16h17M7 16l4-5 3 2 5-7'/%3E%3C/svg%3E"); }
.icon-settings { --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' d='M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8Zm0-5v2m0 14v2M3 12h2m14 0h2M5.6 5.6 7 7m10 10 1.4 1.4m0-12.8L17 7M7 17l-1.4 1.4'/%3E%3C/svg%3E"); }
.icon-upload { --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M12 16V4m-5 5 5-5 5 5M4 16v4h16v-4'/%3E%3C/svg%3E"); }
.icon-exam { --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round' d='M6 3h12v18H6zM9 8h6M9 12h6M9 16h3'/%3E%3C/svg%3E"); }
.icon-calendar { --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='5' width='18' height='16' rx='2' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' d='M16 3v4M8 3v4M3 10h18'/%3E%3C/svg%3E"); }
.icon-attendance { --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' d='m5 12 4 4L19 6'/%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E"); }
.icon-results { --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' d='M4 4h16v16H4zM8 8h8M8 12h8M8 16h5'/%3E%3C/svg%3E"); }
.icon-news { --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' d='M4 4h16v16H4zM8 8h8M8 12h8M8 16h5'/%3E%3C/svg%3E"); }
.icon-events { --icon-mask: var(--icon-calendar); }
.icon-gallery { --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' fill='none' stroke='%23000' stroke-width='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' d='m21 15-5-5L5 21'/%3E%3C/svg%3E"); }
.icon-contact { --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' d='M4 5h16v14H4zM4 7l8 6 8-6'/%3E%3C/svg%3E"); }
.icon-menu { --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' d='M3 6h18M3 12h18M3 18h18'/%3E%3C/svg%3E"); }
.icon-search { --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' d='m16 16 5 5'/%3E%3C/svg%3E"); }
.icon-print { --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' d='M6 8V3h12v5M6 17H4V9h16v8h-2M6 14h12v7H6z'/%3E%3C/svg%3E"); }
.icon-download { --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M12 4v12m-5-5 5 5 5-5M4 20h16'/%3E%3C/svg%3E"); }
.icon-add { --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); }
.icon-edit { --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='m4 16-.8 4.8L8 20l11-11-4-4zM13.5 6.5l4 4'/%3E%3C/svg%3E"); }
.icon-delete { --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' d='M4 7h16M10 11v6m4-6v6M6 7l1 14h10l1-14M9 7V4h6v3'/%3E%3C/svg%3E"); }
.icon-chevron { --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
.icon-logout { --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M10 17l5-5-5-5m5 5H3m9-9h8v18h-8'/%3E%3C/svg%3E"); }

/* Public site, student portal, and print views */
.public-shell, .student-shell { min-height: 100vh; background: #fff; }
.public-header, .student-header { background: #fff; border-bottom: 1px solid var(--color-border); }
.public-nav, .student-nav { display: flex; align-items: center; gap: 18px; min-height: 68px; padding: 12px clamp(16px, 4vw, 56px); }
.public-nav a, .student-nav a { color: var(--color-text); text-decoration: none; font-size: 15px; font-weight: 600; }
.public-nav a[aria-current="page"], .student-nav a[aria-current="page"] { color: var(--color-primary); }
.public-container { width: min(1200px, calc(100% - 40px)); margin-inline: auto; }
.public-hero { padding: clamp(32px, 6vw, 72px) 0; }
.public-section { padding-block: clamp(28px, 5vw, 56px); }
.public-footer { padding: 32px 20px; color: #fff; background: var(--color-secondary); }
.public-card, .news-card, .event-card, .gallery-card { overflow: hidden; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow); }
.public-card img, .news-card img, .event-card img, .gallery-card img { display: block; width: 100%; height: auto; object-fit: cover; }
.student-content { width: min(1040px, calc(100% - 32px)); margin: 24px auto; }
.student-bottom-nav { display: none; }
.report-card-print { width: min(210mm, 100%); margin: 0 auto; padding: 16mm; background: #fff; color: #111; }
.receipt-print { width: min(148mm, 100%); margin: 0 auto; padding: 8mm; background: #fff; color: #111; }
.receipt-print h1, .report-card-print h1 { font-size: 24px; }

@media (max-width: 1024px) {
  .app-content { padding: 18px; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-sidebar { width: var(--sidebar-mini); flex-basis: var(--sidebar-mini); }
  .app-sidebar .nav-text, .app-sidebar .nav-caret, .app-sidebar .brand-name, .app-sidebar .brand-place { display: none; }
  .app-sidebar .brand-logo { width: 42px; }
}
@media (max-width: 768px) {
  .app-shell { display: block; }
  .app-sidebar { position: fixed; z-index: 60; inset: 0 auto 0 0; width: min(300px, 86vw); flex-basis: auto; min-height: 100dvh; overflow-y: auto; transform: translateX(-105%); box-shadow: none; }
  body.nav-open .app-sidebar { width: min(300px, 86vw); transform: translateX(0); box-shadow: 0 0 0 100vmax var(--color-overlay); }
  body.nav-open .app-sidebar .nav-text, body.nav-open .app-sidebar .nav-caret,
  body.nav-open .app-sidebar .brand-name, body.nav-open .app-sidebar .brand-place { display: inline; }
  body.nav-open .app-sidebar .brand-logo { width: 72px; }
  body.nav-mini .app-sidebar { width: min(300px, 86vw); }
  .app-topbar { min-height: 56px; padding: 8px 12px; }
  .app-content { padding: 16px 12px 24px; }
  .page-bar { align-items: flex-start; flex-direction: column; gap: 12px; }
  .page-bar .action-row { width: 100%; }
  .page-bar .action-row .btn { flex: 1 1 auto; }
  .card { padding: 16px; }
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat-card { padding: 14px; }
  .stat-value { font-size: 22px; }
  .form-grid { grid-template-columns: 1fr; }
  .filter-form { align-items: stretch; flex-direction: column; }
  .filter-form > * { max-width: none !important; width: 100%; }
  .fee-summary, .result-summary { grid-template-columns: 1fr; }
  .public-nav { flex-wrap: wrap; gap: 10px 16px; }
  .public-nav a { font-size: 14px; }
  .public-container { width: calc(100% - 28px); }
  .student-bottom-nav { position: fixed; z-index: 30; inset: auto 0 0; display: flex; justify-content: space-around; padding: 8px 4px calc(8px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--color-border); }
  .student-content { width: calc(100% - 24px); margin: 16px auto 84px; }
}
@media (max-width: 480px) {
  body { font-size: 16px; }
  .app-brand { max-width: 52vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
  .app-user { display: none; }
  .page-title, h1.page-title { font-size: 23px; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .table td, .table th { padding: 10px 9px; }
  .btn { width: auto; }
  .action-row .btn { flex: 1 1 100%; }
  #toastHost { top: auto; right: 8px; bottom: calc(76px + env(safe-area-inset-bottom)); left: 8px; }
  .app-toast { min-width: 0; max-width: none; width: 100%; }
  .public-nav { padding: 10px 14px; }
  .public-nav a { padding-block: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
@media print {
  @page { size: A4 portrait; margin: 12mm; }
  body, .app-shell, .app-main, .app-content { background: #fff !important; color: #000 !important; }
  .app-sidebar, .app-topbar, .page-bar, .no-print, .btn, #toastHost { display: none !important; }
  .app-content { padding: 0 !important; }
  .card, .receipt-print, .report-card-print { box-shadow: none !important; border: 0 !important; padding: 0 !important; margin: 0 !important; }
  .table th, .table td { color: #000 !important; border-color: #777 !important; }
  a { color: #000 !important; text-decoration: none !important; }
  .receipt-print, .report-card-print { width: 100% !important; }
}
/* ---------------------------------------------------------------------------
   Common Figma density — applied on every admin page after the shared theme.
   Compact action icons, denser table rows, and smaller card icons.
--------------------------------------------------------------------------- */
:root {
  --control-h: 40px;
  --btn-h: 40px;
  --btn-icon-size: 32px;
  --table-cell-y: 8px;
  --table-cell-x: 10px;
  --stat-icon-size: 34px;
}

.card {
  padding: 16px;
  margin-bottom: 14px;
}

.form-control, .form-select,
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="date"], input[type="search"], select, textarea {
  min-height: var(--control-h);
  padding: 8px 10px;
  font-size: 14px;
  line-height: 1.3;
}

.btn, button.btn, a.btn {
  min-height: var(--btn-h);
  padding: 7px 14px;
  gap: 6px;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.2;
}

.btn-sm {
  min-height: 32px;
  padding: 4px 10px;
  font-size: 13px;
}

.btn-icon,
a.btn-icon,
button.btn-icon,
.table .btn-icon,
.col-actions .btn-icon,
.fee-setup-table .btn-icon {
  width: var(--btn-icon-size);
  min-width: var(--btn-icon-size);
  height: var(--btn-icon-size);
  min-height: var(--btn-icon-size);
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: #fff;
  color: #4a4a4a;
  font-size: 12px;
  line-height: 1;
  box-shadow: none;
}

.btn-icon i,
.table .btn-icon i {
  font-size: 12px;
  line-height: 1;
}

.btn-icon.js-delete,
.btn-icon.text-danger,
.col-actions .js-delete {
  color: var(--color-danger);
  border-color: rgba(186, 30, 30, 0.28);
}

.col-actions {
  width: 1%;
  white-space: nowrap;
}

.col-actions .btn-icon + .btn-icon,
.col-actions a.btn-icon + a.btn-icon,
.col-actions a.btn-icon + button.btn-icon {
  margin-left: 4px;
}

.table td,
.table th,
table.table.dataTable > tbody > tr > td,
table.table.dataTable > thead > tr > th {
  padding: var(--table-cell-y) var(--table-cell-x) !important;
  font-size: 13px !important;
  line-height: 1.35;
  vertical-align: middle;
}

.table > thead > tr > th,
table.table.dataTable > thead > tr > th {
  font-size: 12px !important;
  font-weight: 700;
  padding-top: 9px !important;
  padding-bottom: 9px !important;
}

.table tbody tr:nth-child(even) {
  background: #fafbfc;
}

.status, .status-badge, .badge-status, .status-pill {
  min-height: 24px;
  padding: 2px 8px;
  gap: 5px;
  font-size: 12px;
}

.stat-card {
  padding: 14px 16px;
}

.stat-label {
  font-size: 12px;
}

.stat-value {
  margin-top: 4px;
  font-size: 22px;
}

.stat-sub {
  margin-top: 4px;
  font-size: 12px;
}

.stat-icon,
.stat-chip i,
.dash-grid .stat-icon {
  width: var(--stat-icon-size);
  height: var(--stat-icon-size);
  min-width: var(--stat-icon-size);
  font-size: 14px;
}

.app-icon {
  width: 18px;
  height: 18px;
}

.app-icon.icon-lg {
  width: 20px;
  height: 20px;
}

.side-link {
  min-height: 42px;
  gap: 10px;
  padding: 8px 12px;
  font-size: 14px;
}

.side-link i {
  width: 16px;
  font-size: 14px;
}

.page-title, h1.page-title {
  font-size: clamp(20px, 1.8vw, 24px);
}

.page-description {
  font-size: 13px;
}

.dataTables_wrapper {
  font-size: 13px;
}

.dataTables_length label,
.dataTables_info,
.page-link {
  font-size: 12px;
}

.dataTables_paginate .paginate_button,
.dataTables_wrapper .dataTables_paginate .paginate_button {
  min-height: 32px;
  padding: 4px 10px !important;
}

@media (max-width: 480px) {
  .table td, .table th {
    padding: 7px 8px !important;
  }
}