/* ==========================================================
   OM VIDHYALAY — Advanced Mobile-First UI Layer
   Version 1.0
   Loaded after style.css so existing business logic/classes stay intact.
   ========================================================== */

:root {
  --ov-bg: #f3f6fb;
  --ov-card: rgba(255,255,255,.94);
  --ov-card-solid: #ffffff;
  --ov-text: #111827;
  --ov-muted: #697386;
  --ov-line: #e7ebf2;
  --ov-navy: #0b1533;
  --ov-blue: #335cff;
  --ov-blue-2: #6d5dfc;
  --ov-cyan: #14b8d4;
  --ov-green: #0f9f6e;
  --ov-red: #e14b64;
  --ov-amber: #d68a13;
  --ov-radius-xl: 28px;
  --ov-radius-lg: 22px;
  --ov-radius-md: 16px;
  --ov-radius-sm: 12px;
  --ov-shadow: 0 18px 50px rgba(15,23,42,.08);
  --ov-shadow-soft: 0 8px 25px rgba(15,23,42,.06);
  --ov-safe-bottom: env(safe-area-inset-bottom, 0px);
}

html {
  background: var(--ov-bg);
  scroll-behavior: smooth;
}

body {
  color: var(--ov-text);
  background:
    radial-gradient(circle at 0 -8%, rgba(51,92,255,.12), transparent 28rem),
    radial-gradient(circle at 100% 15%, rgba(20,184,212,.07), transparent 24rem),
    var(--ov-bg);
  font-feature-settings: "cv02","cv03","cv04","cv11";
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.ui-ready .app-shell,
body.ui-ready .login-shell { animation: ovFadeIn .25s ease both; }
@keyframes ovFadeIn { from {opacity:.7; transform:translateY(3px)} to {opacity:1;transform:none} }

::selection { background: rgba(51,92,255,.18); }

/* ---------- Global app shell ---------- */
.app-shell { min-height:100dvh; }
.main-content {
  width: min(1440px, calc(100% - 40px));
  padding: 30px 0 92px;
}

.topbar {
  min-height: 72px;
  padding: 10px max(20px, calc((100vw - 1440px)/2));
  border-bottom: 1px solid rgba(226,232,240,.85);
  background: rgba(248,250,252,.82);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  box-shadow: 0 1px 0 rgba(255,255,255,.65);
}
.brand { gap:11px; }
.brand-mark {
  width:44px; height:44px; border-radius:15px;
  background: linear-gradient(145deg, #172554, #335cff 70%, #6d5dfc);
  box-shadow:0 10px 24px rgba(51,92,255,.24), inset 0 1px rgba(255,255,255,.25);
  letter-spacing:-.06em;
}
.brand strong { color:#111a35; font-weight:850; letter-spacing:-.025em; }
.brand small { font-weight:650; }

.topbar-actions { gap:8px; }
.quick-action {
  min-height:40px; padding:0 14px; border:1px solid transparent;
  box-shadow:0 5px 15px rgba(15,23,42,.035);
  transition:transform .18s ease, box-shadow .18s ease;
}
.quick-action:hover { transform:translateY(-1px); box-shadow:0 9px 22px rgba(15,23,42,.08); }
.quick-action.transfer { color:#3655d9; background:#edf1ff; }
.user-chip {
  min-height:44px; padding:5px 10px 5px 6px;
  border:1px solid var(--ov-line); border-radius:16px;
  background:rgba(255,255,255,.78); box-shadow:0 5px 18px rgba(15,23,42,.04);
}
.user-avatar {
  width:34px; height:34px; border-radius:12px;
  background:linear-gradient(145deg,#e9edff,#dfe8ff); color:#2949cf;
  font-size:.78rem; font-weight:900;
}
.user-chip-text strong { font-size:.76rem; }
.user-chip-text small { font-size:.63rem; }
.menu-button {
  width:44px; height:44px; border-radius:15px;
  border-color:var(--ov-line); box-shadow:0 6px 20px rgba(15,23,42,.05);
}
.dropdown-menu {
  width:260px; padding:9px; border:1px solid rgba(226,232,240,.95);
  border-radius:20px; box-shadow:0 24px 70px rgba(15,23,42,.16);
  background:rgba(255,255,255,.96); backdrop-filter:blur(22px);
}
.dropdown-menu a, .logout-menu-button { min-height:46px; border-radius:13px; }
.dropdown-menu a.active { background:linear-gradient(135deg,#edf2ff,#f3f5ff); }
.menu-icon { border-radius:10px; }

/* ---------- Typography ---------- */
.page-heading,
.academic-page-header { align-items:flex-end; }
.page-heading h1,
.academic-page-header h1,
.portal-hero h1 {
  letter-spacing:-.045em;
  line-height:1.05;
}
.page-heading h1 { font-size:clamp(2rem,4vw,3.05rem); }
.eyebrow,
.academic-page-kicker {
  letter-spacing:.14em;
  font-weight:900;
}
.muted { color:var(--ov-muted); }
.heading-date {
  border:1px solid var(--ov-line); background:#fff; border-radius:999px;
  box-shadow:0 5px 15px rgba(15,23,42,.04);
}

/* ---------- Surfaces / buttons / forms ---------- */
.panel,
.form-panel,
.info-panel,
.history-panel,
.filter-panel,
.report-chart-card,
.report-table-panel,
.academic-panel,
.academic-chart-card {
  border:1px solid rgba(226,232,240,.95) !important;
  border-radius:var(--ov-radius-lg) !important;
  background:var(--ov-card) !important;
  box-shadow:var(--ov-shadow-soft) !important;
}

.btn {
  min-height:44px;
  border-radius:13px;
  font-weight:800;
  letter-spacing:-.01em;
  transition:transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.btn:hover { transform:translateY(-1px); }
.btn:active { transform:scale(.985); }
.btn-primary {
  background:linear-gradient(135deg,#2f5bff,#6657ef) !important;
  box-shadow:0 10px 24px rgba(51,92,255,.2);
}
.btn-danger { box-shadow:0 10px 24px rgba(225,75,100,.12); }
.btn-secondary { background:#f4f6fb; border-color:#e2e7f0; }
.btn-small { min-height:38px; border-radius:11px; }
.icon-btn { border-radius:11px; }

.field label { color:#49566b; font-weight:800; }
.field input,
.field select,
.field textarea,
.filter-grid input,
.filter-grid select,
.academic-form-grid input,
.academic-form-grid select,
.academic-form-grid textarea,
.student-search-bar input,
.student-search-bar select {
  min-height:48px;
  border:1px solid #dce3ee !important;
  border-radius:14px !important;
  background:#fff !important;
  box-shadow:inset 0 1px 1px rgba(15,23,42,.02);
  transition:border-color .16s ease, box-shadow .16s ease;
}
.field textarea,
.academic-form-grid textarea { min-height:112px; }
.field input:focus,
.field select:focus,
.field textarea:focus,
.academic-form-grid input:focus,
.academic-form-grid select:focus,
.academic-form-grid textarea:focus,
.student-search-bar input:focus,
.student-search-bar select:focus {
  outline:none;
  border-color:#7892ff !important;
  box-shadow:0 0 0 4px rgba(51,92,255,.11) !important;
}

/* ---------- Home: portal command center ---------- */
.portal-hero {
  position:relative;
  overflow:hidden;
  min-height:255px;
  padding:38px 42px;
  border:0;
  border-radius:32px;
  color:#fff;
  background:
    radial-gradient(circle at 80% 0, rgba(255,255,255,.20), transparent 14rem),
    radial-gradient(circle at 0 100%, rgba(36,211,238,.18), transparent 18rem),
    linear-gradient(135deg,#0b1533 0%,#172e6e 48%,#335cff 100%);
  box-shadow:0 28px 70px rgba(25,49,115,.22);
}
.portal-hero::before,
.portal-hero::after {
  content:""; position:absolute; border:1px solid rgba(255,255,255,.11); border-radius:50%; pointer-events:none;
}
.portal-hero::before { width:260px;height:260px;right:-70px;top:-90px; }
.portal-hero::after { width:160px;height:160px;right:90px;bottom:-120px; }
.portal-hero .eyebrow { color:#9fc1ff; }
.portal-hero h1 { margin:.2rem 0 .65rem; max-width:800px; font-size:clamp(2.15rem,5vw,4.15rem); color:#fff; }
.portal-hero .muted { color:rgba(255,255,255,.72); font-size:1rem; }
.welcome-user {
  position:relative; z-index:1;
  min-width:210px; padding:16px 18px;
  border:1px solid rgba(255,255,255,.16); border-radius:20px;
  background:rgba(255,255,255,.10); backdrop-filter:blur(12px);
}
.welcome-user small { color:rgba(255,255,255,.6); }
.welcome-user strong { color:#fff; font-size:1.02rem; }
.welcome-user span { color:#bcd0ff; }

.portal-grid { gap:18px; margin-top:22px; }
.portal-card {
  position:relative; isolation:isolate; overflow:hidden;
  min-height:250px; padding:26px;
  border:1px solid rgba(224,230,241,.95);
  border-radius:26px;
  background:rgba(255,255,255,.96);
  box-shadow:var(--ov-shadow-soft);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.portal-card::before {
  content:""; position:absolute; inset:0 0 auto 0; height:4px; z-index:-1;
  background:linear-gradient(90deg,#335cff,#6d5dfc);
}
.portal-card::after {
  content:""; position:absolute; width:150px;height:150px;right:-70px;top:-75px;z-index:-1;
  border-radius:50%; background:rgba(51,92,255,.055);
}
.portal-card:hover { transform:translateY(-5px); box-shadow:0 24px 55px rgba(15,23,42,.11); border-color:#d8dfed; }
.portal-card:active { transform:scale(.992); }
.portal-card.academics-module::before { background:linear-gradient(90deg,#335cff,#14b8d4); }
.portal-card.reports-module::before { background:linear-gradient(90deg,#6d5dfc,#d14fe8); }
.portal-icon {
  width:58px;height:58px;border-radius:19px;
  background:linear-gradient(145deg,#edf1ff,#e5eaff); color:#3456dc;
  box-shadow:inset 0 1px rgba(255,255,255,.9);
  font-size:1.35rem;
}
.academics-module .portal-icon { color:#087f96; background:linear-gradient(145deg,#e4fbff,#e6f6ff); }
.reports-module .portal-icon { color:#7a3fc0; background:linear-gradient(145deg,#f5ebff,#f2efff); }
.portal-card h2 { letter-spacing:-.035em; font-size:1.5rem; }
.portal-card p { color:#68758a; }
.module-number { color:#9aa6b8 !important; letter-spacing:.13em; }
.portal-arrow {
  width:42px;height:42px;display:grid;place-items:center;border-radius:14px;
  background:#f3f5fa;color:#243b80;font-size:1.3rem;
}
.admin-badge,
.read-only-badge {
  border-radius:999px; padding:6px 10px;
  font-size:.68rem; font-weight:850; letter-spacing:.01em;
}

/* ---------- Finance: premium mobile banking feel ---------- */
.finance-sync-banner {
  border:1px solid #dce7ff;
  border-radius:18px;
  background:linear-gradient(135deg,#f5f8ff,#eef4ff);
  box-shadow:none;
}
.finance-tabs {
  position:sticky;
  top:82px;
  z-index:20;
  display:flex;
  gap:7px;
  padding:7px;
  margin:18px 0;
  border:1px solid var(--ov-line);
  border-radius:17px;
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(18px);
  box-shadow:0 10px 30px rgba(15,23,42,.06);
}
.finance-tabs a {
  min-height:40px;
  display:inline-flex;align-items:center;justify-content:center;
  padding:0 14px;border-radius:12px;
  color:#657187;font-weight:800;font-size:.8rem;
  white-space:nowrap;
}
.finance-tabs a.active { color:#fff;background:linear-gradient(135deg,#315bff,#6556ef);box-shadow:0 8px 18px rgba(51,92,255,.18); }

.dashboard-grid { gap:15px; }
.metric-card {
  min-height:190px;
  border:1px solid rgba(226,232,240,.95);
  border-radius:23px;
  background:rgba(255,255,255,.96);
  box-shadow:var(--ov-shadow-soft);
  transition:transform .18s ease, box-shadow .18s ease;
}
.metric-card:hover { transform:translateY(-3px); box-shadow:0 18px 38px rgba(15,23,42,.09); }
.metric-card.total-balance-card {
  color:#fff;
  border:0;
  background:
    radial-gradient(circle at 80% -15%, rgba(255,255,255,.2), transparent 13rem),
    linear-gradient(135deg,#0b1533,#173778 58%,#315bff);
  box-shadow:0 22px 50px rgba(18,44,107,.22);
}
.total-balance-card .metric-label,
.total-balance-card .metric-note { color:rgba(255,255,255,.66); }
.total-balance-card h2 { color:#fff; }
.total-balance-card .metric-icon,
.total-balance-card .pill { background:rgba(255,255,255,.14); color:#fff; border-color:rgba(255,255,255,.14); }
.income-card .metric-icon { color:#0f8c63;background:#e9fbf4; }
.expense-card .metric-icon { color:#c63853;background:#fff0f3; }
.account-card .metric-icon { color:#3456dc;background:#eef2ff; }
.metric-card h2 { letter-spacing:-.045em; }
.card-actions { gap:7px; }
.dashboard-actions-panel { border-radius:24px !important; }

.mobile-finance-actions { display:none; }

/* ---------- Transfer / reports ---------- */
.transfer-balance-card,
.report-kpi,
.report-insight-card,
.report-list-card,
.academic-summary-stat,
.academic-summary-main,
.standard-card {
  border:1px solid rgba(226,232,240,.96) !important;
  box-shadow:var(--ov-shadow-soft) !important;
}
.transfer-balance-card { border-radius:20px !important; }
.report-kpi { border-radius:20px !important; }
.report-chart-card canvas,
.academic-chart-card canvas { max-width:100%; }

/* ---------- Academics: app-like top navigation ---------- */
body.academic-area { background:linear-gradient(180deg,#f7f9fc 0,#f2f6fb 35%,#f5f7fb 100%); }
body.academic-area .main-content { width:min(1440px,calc(100% - 40px)); padding-top:20px; }
.academic-top-navigation {
  position:sticky;
  top:82px;
  z-index:22;
  border:1px solid rgba(226,232,240,.96);
  border-radius:22px;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(20px) saturate(150%);
  box-shadow:0 12px 35px rgba(15,23,42,.07);
}
.academic-top-brand-row { padding:12px 14px 8px; }
.academic-top-brand-icon { border-radius:13px; background:linear-gradient(145deg,#edf2ff,#e5ecff); }
.academic-portal-home { border-radius:12px; }
.academic-top-tabs { padding:7px 10px 10px; gap:6px; }
.academic-top-tab {
  min-height:45px; border-radius:13px;
  color:#68758b; font-weight:800;
  transition:background .16s ease,color .16s ease,transform .16s ease;
}
.academic-top-tab:hover { transform:translateY(-1px); }
.academic-top-tab.active {
  color:#fff;
  background:linear-gradient(135deg,#315bff,#6556ef);
  box-shadow:0 8px 18px rgba(51,92,255,.18);
}
.academic-top-tab.active .academic-top-tab-icon { color:#fff; }
.academic-workspace--topnav .academic-content { padding-top:24px; }
.academic-dashboard-summary { gap:12px; }
.academic-summary-main,
.academic-summary-stat { border-radius:20px !important; }
.academic-summary-main { background:linear-gradient(135deg,#fff,#f8faff) !important; }
.academic-summary-icon { border-radius:16px; }
.standards-grid--redesigned { gap:14px; }
.standards-grid--redesigned .standard-card {
  border-radius:21px !important;
  background:linear-gradient(180deg,#fff,#fafcff);
}
.standards-grid--redesigned .standard-card:hover { border-color:#d8e2ff !important; }
.progress-track { overflow:hidden; border-radius:999px; background:#e8edf5; }
.progress-track > span { border-radius:inherit; background:linear-gradient(90deg,#335cff,#27b5d1); }
.academic-status { border-radius:999px; }
.academic-table-wrap,
.table-wrap { border-radius:18px; }

/* ---------- Login / register ---------- */
.login-body {
  min-height:100dvh;
  background:
    radial-gradient(circle at 20% 10%, rgba(75,101,255,.18), transparent 25rem),
    linear-gradient(145deg,#081128,#101d40 52%,#19326c);
}
.login-shell { min-height:100dvh; max-width:1440px; margin:auto; padding:24px; gap:22px; }
.login-brand-panel {
  position:relative; overflow:hidden;
  border:1px solid rgba(255,255,255,.11);
  border-radius:32px;
  background:
    radial-gradient(circle at 82% 0,rgba(255,255,255,.18),transparent 15rem),
    linear-gradient(145deg,rgba(45,75,165,.42),rgba(16,29,64,.45));
  box-shadow:0 30px 80px rgba(0,0,0,.22);
}
.login-brand-panel::after {
  content:"";position:absolute;width:300px;height:300px;right:-145px;bottom:-150px;border:1px solid rgba(255,255,255,.1);border-radius:50%;
}
.login-school-mark { border-radius:20px; box-shadow:0 16px 35px rgba(0,0,0,.2); }
.login-card-wrap { padding:0; }
.login-card {
  border:1px solid rgba(226,232,240,.85);
  border-radius:28px;
  box-shadow:0 30px 80px rgba(0,0,0,.18);
}
.login-card-heading h2 { letter-spacing:-.035em; }
.login-button { min-height:52px; border-radius:15px; }
.login-secondary-button { min-height:48px; }
.login-help { border-radius:15px; }

/* ---------- Modal / toast ---------- */
.modal-backdrop { backdrop-filter:blur(6px); background:rgba(7,14,31,.48); }
.modal-card { border-radius:24px; border:1px solid rgba(255,255,255,.65); box-shadow:0 30px 90px rgba(8,15,33,.25); }
.toast-stack { right:18px; bottom:22px; }
.toast { border-radius:15px; box-shadow:0 16px 40px rgba(15,23,42,.16); }

/* ---------- Mobile app mode ---------- */
@media (max-width: 780px) {
  :root { --ov-radius-xl:22px; --ov-radius-lg:18px; }

  body { background:#f4f7fb; }
  body:not(.login-body) { padding-bottom:calc(78px + var(--ov-safe-bottom)); }
  .app-shell { min-height:100dvh; }

  .topbar {
    min-height:62px;
    padding:8px 12px;
    border-bottom:1px solid rgba(226,232,240,.72);
    background:rgba(248,250,252,.92);
  }
  .brand { min-width:0; gap:9px; }
  .brand-mark { width:38px;height:38px;border-radius:13px;font-size:1rem; }
  .brand strong { font-size:.83rem; white-space:nowrap; }
  .brand small { font-size:.6rem; }
  .topbar-actions { gap:6px; }
  .quick-action { display:none !important; }
  .user-chip { width:38px;height:38px;min-height:38px;padding:2px;border-radius:13px;justify-content:center; }
  .user-avatar { width:32px;height:32px;border-radius:11px; }
  .user-chip-text { display:none; }
  .menu-button { width:38px;height:38px;border-radius:13px;padding:8px; }

  /* Main menu becomes a thumb-friendly bottom sheet */
  .dropdown-menu {
    position:fixed;
    z-index:102;
    top:auto;
    right:10px;
    bottom:calc(82px + var(--ov-safe-bottom));
    left:10px;
    width:auto;
    max-height:min(68dvh,620px);
    overflow:auto;
    padding:12px;
    border-radius:24px;
    transform:translateY(18px) scale(.985);
    transform-origin:bottom center;
    box-shadow:0 28px 90px rgba(6,12,28,.28);
  }
  .dropdown-menu.open { transform:translateY(0) scale(1); }
  .dropdown-menu a,.logout-menu-button { min-height:50px;padding:10px 12px;border-radius:14px;font-size:.9rem; }
  .menu-icon { min-width:30px;height:30px;border-radius:10px; }
  .mobile-menu-backdrop {
    position:fixed; inset:0; z-index:99; display:block;
    background:rgba(8,15,32,.42); backdrop-filter:blur(4px);
    opacity:0; visibility:hidden; transition:.18s ease;
  }
  body.mobile-menu-open .mobile-menu-backdrop { opacity:1;visibility:visible; }

  .main-content {
    width:calc(100% - 24px);
    padding:18px 0 calc(28px + var(--ov-safe-bottom));
  }

  .page-heading { display:block; margin-bottom:16px; }
  .page-heading h1 { margin:.22rem 0 .45rem; font-size:1.82rem; }
  .page-heading .muted { font-size:.82rem; }
  .heading-actions { margin-top:10px; justify-content:flex-start; flex-wrap:wrap; }
  .heading-date { min-height:32px;padding:6px 10px;font-size:.7rem; }

  /* Floating app navigation */
  .mobile-bottom-nav {
    position:fixed !important;
    z-index:90;
    right:10px; bottom:calc(8px + var(--ov-safe-bottom)); left:10px;
    display:flex !important;
    min-height:64px;
    padding:6px;
    border:1px solid rgba(220,226,238,.9);
    border-radius:22px;
    background:rgba(255,255,255,.94);
    box-shadow:0 18px 50px rgba(15,23,42,.16);
    backdrop-filter:blur(22px) saturate(160%);
  }
  .mobile-bottom-nav a {
    position:relative;
    flex:1 1 0;
    min-width:0; min-height:52px;
    border-radius:16px;
    color:#7a8798;
    gap:1px;
  }
  .mobile-bottom-nav a span { font-size:1.05rem; line-height:1; }
  .mobile-bottom-nav a small { font-size:.56rem;font-weight:800;letter-spacing:-.01em; }
  .mobile-bottom-nav a.active {
    color:#2949cf;
    background:linear-gradient(145deg,#edf2ff,#f4f6ff);
  }
  .mobile-bottom-nav a.active::before {
    content:""; position:absolute; top:3px; width:18px;height:3px;border-radius:999px;background:#335cff;
  }

  /* Home */
  .portal-hero {
    min-height:0;
    display:block;
    padding:26px 22px 22px;
    border-radius:24px;
    box-shadow:0 20px 45px rgba(25,49,115,.18);
  }
  .portal-hero h1 { max-width:310px; font-size:2.05rem; line-height:1.02; }
  .portal-hero .muted { max-width:290px;font-size:.8rem; }
  .welcome-user { margin-top:22px;min-width:0;width:100%;padding:12px 14px;border-radius:16px; }
  .welcome-user small,.welcome-user strong,.welcome-user span { display:inline; }
  .welcome-user strong::after { content:" · ";color:rgba(255,255,255,.35); }
  .portal-grid,.portal-grid--single { grid-template-columns:1fr !important;gap:11px;margin-top:14px; }
  .portal-card,
  .portal-grid--single .academics-module {
    min-height:0 !important;
    display:grid;
    grid-template-columns:50px minmax(0,1fr) 36px;
    gap:12px;
    align-items:center;
    padding:17px;
    border-radius:20px;
  }
  .portal-card::before { width:4px;height:100%;right:auto; }
  .portal-card::after { width:92px;height:92px;right:-50px;top:-46px; }
  .portal-icon { width:50px;height:50px;border-radius:16px;font-size:1.1rem; }
  .portal-card-content { min-width:0; }
  .portal-card .module-number { display:none; }
  .portal-card h2 { margin:0 0 4px;font-size:1.05rem; }
  .portal-card p { margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:.72rem;line-height:1.35; }
  .portal-card .admin-badge { display:inline-flex;margin-top:7px;font-size:.57rem;padding:4px 7px; }
  .portal-arrow { width:34px;height:34px;border-radius:12px;font-size:1rem; }

  /* Finance */
  .finance-sync-banner { padding:12px;border-radius:16px; }
  .finance-sync-banner span { font-size:.69rem; }
  .finance-tabs {
    top:68px;
    overflow-x:auto;
    justify-content:flex-start;
    margin:12px -2px 14px;
    padding:6px;
    border-radius:15px;
    scrollbar-width:none;
    scroll-snap-type:x proximity;
  }
  .finance-tabs::-webkit-scrollbar { display:none; }
  .finance-tabs a { flex:0 0 auto;min-height:38px;padding:0 13px;scroll-snap-align:start;font-size:.72rem; }
  .dashboard-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:10px; }
  .metric-card { min-height:155px;padding:14px;border-radius:19px; }
  .metric-card.total-balance-card { grid-column:1/-1;min-height:175px;padding:18px; }
  .metric-card.income-card,.metric-card.expense-card { min-height:142px; }
  .metric-card h2 { font-size:clamp(1.18rem,6vw,1.65rem);overflow-wrap:anywhere; }
  .total-balance-card h2 { font-size:clamp(1.75rem,9vw,2.4rem); }
  .metric-label { font-size:.67rem; }
  .metric-note { font-size:.61rem;line-height:1.35; }
  .metric-top { margin-bottom:12px; }
  .metric-icon { width:36px;height:36px;border-radius:12px;font-size:.85rem; }
  .mini-link { font-size:.61rem; }
  .card-actions { display:grid;grid-template-columns:1fr 1fr auto;margin-top:10px;gap:5px; }
  .card-actions .btn { min-width:0;min-height:34px;padding:5px 6px;font-size:.61rem; }
  .card-actions .icon-btn { width:34px;height:34px; }
  .dashboard-actions-panel { padding:17px !important; }
  .dashboard-actions-panel .hero-actions { display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%; }
  .dashboard-actions-panel .btn { width:100%;justify-content:center; }
  .mobile-finance-actions {
    position:sticky; bottom:82px; z-index:25;
    display:grid; grid-template-columns:repeat(3,1fr); gap:6px;
    margin:14px 0 0; padding:7px;
    border:1px solid rgba(220,226,238,.95); border-radius:18px;
    background:rgba(255,255,255,.93); backdrop-filter:blur(18px);
    box-shadow:0 12px 35px rgba(15,23,42,.13);
  }
  .mobile-finance-actions a { min-height:42px;display:flex;align-items:center;justify-content:center;border-radius:12px;font-size:.68rem;font-weight:850; }
  .mobile-finance-actions .mf-income {color:#087354;background:#ebfaf4;}
  .mobile-finance-actions .mf-expense {color:#bd3550;background:#fff0f3;}
  .mobile-finance-actions .mf-transfer {color:#3154d3;background:#edf2ff;}

  /* Forms */
  .form-layout,.form-grid,.filter-grid,.academic-form-grid { grid-template-columns:1fr !important; gap:12px !important; }
  .form-panel,.info-panel,.panel,.academic-panel,.report-chart-card,.report-table-panel { border-radius:18px !important;padding:16px !important; }
  .field input,.field select,.field textarea,
  .academic-form-grid input,.academic-form-grid select,.academic-form-grid textarea,
  .student-search-bar input,.student-search-bar select { font-size:16px !important; }
  .form-actions { position:sticky;bottom:84px;z-index:16;margin:16px -4px -4px;padding:8px;border:1px solid rgba(220,226,238,.95);border-radius:17px;background:rgba(255,255,255,.94);backdrop-filter:blur(18px);box-shadow:0 12px 35px rgba(15,23,42,.1); }
  .form-actions .btn { min-height:48px; }

  /* Reports */
  .report-kpi-grid,.academic-report-kpis,.academic-report-kpis--enhanced { grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:9px !important; }
  .report-kpi { min-height:112px;padding:12px !important;border-radius:17px !important; }
  .report-kpi strong { font-size:1.2rem;overflow-wrap:anywhere; }
  .report-chart-grid,.academic-chart-grid,.academic-report-two-col { grid-template-columns:1fr !important;gap:11px !important; }
  .pie-chart-layout,.academic-pie-wrap { grid-template-columns:1fr !important;gap:12px !important; }
  .chart-canvas-wrap { min-height:230px; }

  /* Academics */
  body.academic-area { padding-bottom:14px; }
  body.academic-area .main-content { width:calc(100% - 20px);padding:10px 0 26px; }
  body.academic-area .topbar { display:none; }
  .academic-top-navigation {
    top:8px;
    margin:0;
    border-radius:20px;
    box-shadow:0 12px 32px rgba(15,23,42,.09);
  }
  .academic-top-brand-row { min-height:52px;padding:8px 10px 4px; }
  .academic-top-brand-icon { width:38px;height:38px; }
  .academic-top-brand strong { font-size:.77rem; }
  .academic-top-brand small { font-size:.59rem; }
  .academic-portal-home { min-height:38px;padding:7px 10px; }
  .academic-top-tabs {
    display:flex !important;
    overflow-x:auto;
    padding:6px 8px 9px;
    gap:6px;
    scroll-padding-inline:8px;
    scrollbar-width:none;
  }
  .academic-top-tabs::-webkit-scrollbar { display:none; }
  .academic-top-tab { flex:0 0 auto;min-width:auto !important;min-height:39px;padding:0 12px;border-radius:12px;font-size:.68rem;scroll-snap-align:center; }
  .academic-top-tab-icon { font-size:.75rem; }
  .academic-workspace--topnav .academic-content { padding:16px 0 0; }
  .academic-workspace--topnav .academic-page-header { margin-bottom:14px;padding:0 3px; }
  .academic-workspace--topnav .academic-page-header h1 { font-size:1.62rem; }
  .academic-workspace--topnav .academic-page-header p { font-size:.75rem; }
  .academic-page-kicker { font-size:.6rem; }
  .academic-dashboard-summary { grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:8px; }
  .academic-summary-main { grid-column:1/-1;min-height:126px;border-radius:18px !important; }
  .academic-summary-stat { min-height:88px;padding:11px;border-radius:17px !important;text-align:left; }
  .academic-summary-stat strong { font-size:1.28rem; }
  .academic-summary-stat span { font-size:.62rem; }
  .standards-grid--redesigned { grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:9px; }
  .standards-grid--redesigned .standard-card { min-height:160px;padding:13px;border-radius:18px !important; }
  .academic-section-heading-row { align-items:flex-start; }
  .student-search-bar { display:grid;grid-template-columns:1fr !important;gap:8px; }
  .student-search-bar .btn { width:100%; }

  /* Tables become readable cards wherever the existing page supplies labels */
  .mobile-stack-table,
  .academic-table,
  .report-table { border-collapse:separate; border-spacing:0 9px; }
  .mobile-stack-table thead,
  .academic-table thead,
  .report-table thead { display:none; }
  .mobile-stack-table tbody,
  .academic-table tbody,
  .report-table tbody { display:block; }
  .mobile-stack-table tr,
  .academic-table tr,
  .report-table tr {
    display:block;
    padding:9px 12px;
    margin-bottom:9px;
    border:1px solid #e4e9f2;
    border-radius:16px;
    background:#fff;
    box-shadow:0 5px 16px rgba(15,23,42,.035);
  }
  .mobile-stack-table td,
  .academic-table td,
  .report-table td {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    width:100%;
    padding:8px 0 !important;
    border:0 !important;
    border-bottom:1px dashed #edf0f5 !important;
    text-align:right !important;
    overflow-wrap:anywhere;
  }
  .mobile-stack-table td:last-child,
  .academic-table td:last-child,
  .report-table td:last-child { border-bottom:0 !important; }
  .mobile-stack-table td::before,
  .academic-table td::before,
  .report-table td::before {
    content:attr(data-label);
    flex:0 0 38%;
    color:#8390a3;
    font-size:.62rem;
    font-weight:850;
    text-transform:uppercase;
    letter-spacing:.04em;
    text-align:left;
  }
  .mobile-stack-table td[data-label=""],
  .academic-table td[data-label=""],
  .report-table td[data-label=""] { display:block; }
  .mobile-stack-table td[data-label=""]::before,
  .academic-table td[data-label=""]::before,
  .report-table td[data-label=""]::before { display:none; }

  /* Modal as bottom sheet */
  .modal-backdrop { align-items:flex-end !important;padding:0 !important; }
  .modal-card {
    width:100% !important;max-width:none !important;max-height:88dvh;overflow:auto;
    border-radius:26px 26px 0 0 !important;
    padding:18px 16px calc(18px + var(--ov-safe-bottom)) !important;
    animation:ovSheetUp .22s ease both;
  }
  .modal-card::before { content:"";display:block;width:42px;height:5px;margin:-6px auto 14px;border-radius:999px;background:#d6dce7; }
  @keyframes ovSheetUp { from {transform:translateY(35px);opacity:.6} to {transform:none;opacity:1} }

  .toast-stack { right:10px;bottom:calc(82px + var(--ov-safe-bottom));left:10px; }
  .toast { width:100%;max-width:none; }

  /* Login/register: prioritize the form on phone */
  .login-shell { display:block;padding:12px; }
  .login-brand-panel {
    min-height:0;
    padding:24px 20px 54px;
    border-radius:24px 24px 30px 30px;
  }
  .login-brand-panel h1 { margin:.35rem 0 .55rem;font-size:2rem;line-height:1.02; }
  .login-brand-panel > p:not(.eyebrow),.login-feature-list { display:none; }
  .login-school-mark { width:48px;height:48px;border-radius:16px;font-size:1rem; }
  .login-card-wrap { margin-top:-34px;padding:0 6px 14px;position:relative;z-index:2; }
  .login-card { padding:21px 17px;border-radius:22px; }
  .login-card-heading h2 { font-size:1.45rem; }
  .login-card-heading .muted { font-size:.75rem; }
  .login-form .field input { font-size:16px; }
  .login-button { width:100%;min-height:52px; }
}

@media (max-width: 430px) {
  .main-content { width:calc(100% - 18px); }
  .portal-hero { padding:23px 18px 19px; }
  .portal-hero h1 { font-size:1.85rem; }
  .dashboard-grid { gap:8px; }
  .metric-card { min-height:148px;padding:12px; }
  .metric-card.total-balance-card { min-height:165px;padding:16px; }
  .metric-card h2 { font-size:1.18rem; }
  .total-balance-card h2 { font-size:1.82rem; }
  .card-actions { grid-template-columns:1fr 1fr; }
  .card-actions .icon-btn { grid-column:1/-1;width:100%; }
  .academic-summary-main { grid-template-columns:44px 1fr; }
  .academic-summary-icon { width:44px;height:44px; }
  .standards-grid--redesigned .standard-card { min-height:152px;padding:11px; }
  .report-kpi-grid,.academic-report-kpis,.academic-report-kpis--enhanced { gap:7px !important; }
  .report-kpi { min-height:104px;padding:10px !important; }
}

@media (max-width: 360px) {
  .brand small { display:none; }
  .portal-card { grid-template-columns:44px minmax(0,1fr) 32px;padding:14px; }
  .portal-icon { width:44px;height:44px;border-radius:14px; }
  .portal-card h2 { font-size:.96rem; }
  .portal-card p { font-size:.68rem; }
  .dashboard-grid { grid-template-columns:1fr !important; }
  .metric-card.total-balance-card { grid-column:auto; }
  .metric-card { min-height:140px; }
  .academic-dashboard-summary { grid-template-columns:1fr 1fr !important; }
}

@media (min-width: 781px) {
  .mobile-menu-backdrop { display:none !important; }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

@media print {
  .mobile-finance-actions,.mobile-menu-backdrop { display:none !important; }
}