/* =========================================================================
   School Management System — Design Tokens & Base Styles
   Palette: deep chalkboard slate + warm brass accent + soft parchment surface
   Typeface: system UI stack (fast, no external font dependency, renders
   Arabic script natively and correctly on every OS/device)
   ========================================================================= */
:root {
  --color-ink: #1c2430;
  --color-slate-900: #202b3a;
  --color-slate-700: #3c4a5e;
  --color-slate-500: #64758c;
  --color-slate-300: #aab6c4;
  --color-slate-100: #e7ebf0;
  --color-paper: #f7f5f0;
  --color-surface: #ffffff;
  --color-brass: #b8863b;
  --color-brass-dark: #93692a;
  --color-brass-light: #f3e6cf;
  --color-green: #2f7d5f;
  --color-green-light: #e2f3ec;
  --color-red: #b3452f;
  --color-red-light: #fbe9e4;
  --color-amber: #b8863b;
  --color-amber-light: #f8ecd6;
  --color-blue: #2f5f8a;
  --color-blue-light: #e5eef6;
  --color-purple: #6b5b95;
  --color-purple-light: #ece8f5;
  --color-pink: #c2185b;
  --color-pink-light: #fbe4ef;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --shadow-1: 0 1px 2px rgba(28,36,48,.06), 0 1px 1px rgba(28,36,48,.04);
  --shadow-2: 0 4px 16px rgba(28,36,48,.10);
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans Arabic", sans-serif;
  --sidebar-w: 240px;
  --topbar-h: 60px;
  --bottomnav-h: 60px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font-ui);
  background: var(--color-paper);
  color: var(--color-ink);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
html[dir="rtl"] body { font-family: "Segoe UI", Tahoma, var(--font-ui); }

h1, h2, h3, h4 { margin: 0 0 .4em; font-weight: 700; letter-spacing: -0.01em; }
p { margin: 0 0 .8em; }
a { color: var(--color-blue); text-decoration: none; }
button { font-family: inherit; }

img { max-width: 100%; }

/* ---------------- Focus & accessibility ---------------- */
:focus-visible {
  outline: 2px solid var(--color-brass);
  outline-offset: 2px;
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ---------------- Layout shell ---------------- */
#app { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w);
  background: var(--color-slate-900);
  color: #fff;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  position: fixed;
  top: 0; bottom: 0;
  z-index: 40;
}
html[dir="rtl"] .sidebar { right: 0; }
html[dir="ltr"] .sidebar { left: 0; }

.sidebar-brand {
  padding: 20px 20px 16px;
  font-size: 18px;
  font-weight: 800;
  border-bottom: 1px solid rgba(255,255,255,.08);
  display: flex; align-items: center; gap: 10px;
}
.sidebar-brand .mark {
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--color-brass); color: var(--color-ink);
  display: flex; align-items: center; justify-content: center; font-weight: 800;
}
.sidebar-nav { flex: 1; overflow-y: auto; padding: 12px 10px; }
.nav-link {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: var(--radius-sm);
  color: #cfd8e3; font-weight: 600; font-size: 14px;
  cursor: pointer; margin-bottom: 2px;
}
.nav-link .ic { width: 20px; text-align: center; opacity: .9; }
.nav-link:hover { background: rgba(255,255,255,.06); color: #fff; }
.nav-link.active { background: var(--color-brass); color: var(--color-ink); }
.sidebar-footer { padding: 14px; border-top: 1px solid rgba(255,255,255,.08); font-size: 12px; color: var(--color-slate-300); }

.main {
  flex: 1;
  min-width: 0;
}
html[dir="ltr"] .main { margin-left: var(--sidebar-w); }
html[dir="rtl"] .main { margin-right: var(--sidebar-w); }

.topbar {
  height: var(--topbar-h);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-slate-100);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px;
  position: sticky; top: 0; z-index: 30;
}
.topbar-title { font-size: 17px; font-weight: 700; }
.topbar-right { display: flex; align-items: center; gap: 14px; }

.content { padding: 20px; max-width: 1400px; }

/* ---------------- Mobile: hide sidebar, show bottom nav ---------------- */
.menu-toggle { display: none; }
.bottom-nav {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--color-surface); border-top: 1px solid var(--color-slate-100);
  z-index: 50;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.bottom-nav-inner { display: flex; }
.bottom-nav-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 8px 2px 10px; font-size: 11px; color: var(--color-slate-500); font-weight: 600;
  cursor: pointer; min-height: 52px; justify-content: center;
}
.bottom-nav-item .ic { font-size: 19px; }
.bottom-nav-item.active { color: var(--color-brass-dark); }

@media (max-width: 900px) {
  .sidebar { transform: translateX(-100%); transition: transform .2s ease; }
  html[dir="rtl"] .sidebar { transform: translateX(100%); }
  .sidebar.open { transform: translateX(0); }
  .main { margin: 0 !important; }
  .menu-toggle { display: inline-flex; }
  .bottom-nav { display: block; }
  .content { padding: 14px 14px 84px; }
  .sidebar-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 39; display: none; }
  .sidebar-overlay.show { display: block; }
}

/* ---------------- Buttons ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 16px; border-radius: var(--radius-sm); border: 1px solid transparent;
  font-weight: 700; font-size: 14px; cursor: pointer; min-height: 40px;
  transition: filter .12s ease, transform .05s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--color-brass); color: #fff; }
.btn-primary:hover { filter: brightness(0.94); }
.btn-secondary { background: var(--color-slate-100); color: var(--color-ink); }
.btn-secondary:hover { filter: brightness(0.97); }
.btn-success { background: var(--color-green); color: #fff; }
.btn-danger { background: var(--color-red); color: #fff; }
.btn-outline { background: transparent; border-color: var(--color-slate-300); color: var(--color-ink); }
.btn-ghost { background: transparent; color: var(--color-slate-700); }
.btn-sm { padding: 6px 10px; min-height: 32px; font-size: 13px; }
.btn-block { width: 100%; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-icon { width: 40px; padding: 0; }

/* ---------------- Cards ---------------- */
.card {
  background: var(--color-surface); border: 1px solid var(--color-slate-100);
  border-radius: var(--radius-md); padding: 18px; box-shadow: var(--shadow-1);
}
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 20px; }
.stat-card { padding: 16px; border-radius: var(--radius-md); background: var(--color-surface); border: 1px solid var(--color-slate-100); }
.stat-card .stat-value { font-size: 26px; font-weight: 800; line-height: 1; margin-bottom: 6px; }
.stat-card .stat-label { font-size: 12.5px; color: var(--color-slate-500); font-weight: 600; }
.stat-card.accent-green { border-top: 3px solid var(--color-green); }
.stat-card.accent-red { border-top: 3px solid var(--color-red); }
.stat-card.accent-amber { border-top: 3px solid var(--color-amber); }
.stat-card.accent-blue { border-top: 3px solid var(--color-blue); }
.stat-card.accent-brass { border-top: 3px solid var(--color-brass); }

/* ---------------- Forms ---------------- */
.form-group { margin-bottom: 14px; }
.form-label { display: block; font-weight: 700; font-size: 13px; margin-bottom: 6px; color: var(--color-slate-700); }
.form-control {
  width: 100%; padding: 10px 12px; border: 1px solid var(--color-slate-300);
  border-radius: var(--radius-sm); font-size: 14px; background: #fff; color: var(--color-ink);
  min-height: 42px;
}
.form-control:focus { border-color: var(--color-brass); }
textarea.form-control { min-height: 90px; resize: vertical; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } }
.form-hint { font-size: 12px; color: var(--color-slate-500); margin-top: 4px; }
.form-error { font-size: 12.5px; color: var(--color-red); margin-top: 4px; font-weight: 600; }
.input-with-icon { position: relative; }
.input-with-icon .form-control { padding-inline-end: 40px; }
.input-icon-btn {
  position: absolute; top: 50%; transform: translateY(-50%); inset-inline-end: 8px;
  background: none; border: none; cursor: pointer; color: var(--color-slate-500); padding: 6px;
}

/* ---------------- Tables ---------------- */
.table-wrap { overflow-x: auto; border-radius: var(--radius-md); border: 1px solid var(--color-slate-100); }
table.data-table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 640px; }
table.data-table th {
  text-align: start; background: var(--color-slate-100); padding: 10px 12px; font-weight: 700;
  color: var(--color-slate-700); white-space: nowrap; position: sticky; top: 0;
}
table.data-table td { padding: 10px 12px; border-top: 1px solid var(--color-slate-100); vertical-align: middle; }
table.data-table tr:hover td { background: #fbfaf7; }

/* ---------------- Student / list cards for mobile ---------------- */
.list-card { background: #fff; border: 1px solid var(--color-slate-100); border-radius: var(--radius-md); padding: 14px; margin-bottom: 10px; }
.list-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.list-card-name-en { font-weight: 700; font-size: 15px; }
.list-card-name-ar { font-size: 14px; color: var(--color-slate-700); direction: rtl; }
.list-card-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; font-size: 12.5px; color: var(--color-slate-500); }
.list-card-actions { display: flex; gap: 8px; margin-top: 10px; }

/* ---------------- Student profile card (matches reference design) ---------------- */
.student-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.student-card { background: #fff; border: 1px solid var(--color-slate-100); border-radius: var(--radius-lg); padding: 16px 18px; box-shadow: var(--shadow-1); }
.student-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.gender-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700; }
.gender-badge.female { background: var(--color-pink-light); color: var(--color-pink); }
.gender-badge.male { background: var(--color-blue-light); color: var(--color-blue); }
.verified-dot { width: 18px; height: 18px; border-radius: 50%; background: var(--color-green-light); color: var(--color-green); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; }
.id-badge { background: var(--color-slate-100); color: var(--color-slate-700); font-size: 12.5px; font-weight: 600; padding: 5px 10px; border-radius: var(--radius-sm); font-variant-numeric: tabular-nums; }
.student-name-ar { font-size: 19px; font-weight: 800; direction: rtl; text-align: right; line-height: 1.35; margin-bottom: 2px; }
.student-name-en { font-size: 14.5px; color: var(--color-slate-700); font-weight: 600; margin-bottom: 10px; }
.classroom-pill { display: inline-flex; align-items: center; gap: 6px; background: var(--color-purple-light); color: var(--color-purple); font-size: 12.5px; font-weight: 700; padding: 5px 12px; border-radius: 999px; margin-bottom: 12px; }
.contact-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; font-size: 13.5px; }
.contact-row .contact-label { color: var(--color-slate-500); font-weight: 600; white-space: nowrap; }
.contact-row .contact-name { flex: 1; color: var(--color-ink); }
.call-pill { display: inline-flex; align-items: center; gap: 6px; background: var(--color-blue-light); color: var(--color-blue); font-weight: 700; font-size: 12.5px; padding: 6px 10px; border-radius: var(--radius-sm); white-space: nowrap; }
.student-card-divider { border-top: 1px solid var(--color-slate-100); margin: 12px 0 10px; }
.student-card-footer { display: flex; align-items: center; justify-content: space-between; }
.transfer-link { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; color: var(--color-slate-700); font-weight: 700; font-size: 13.5px; cursor: pointer; padding: 6px 4px; }
.icon-btn-group { display: flex; align-items: center; gap: 4px; }
.icon-btn-group button { background: none; border: none; cursor: pointer; color: var(--color-slate-500); width: 32px; height: 32px; border-radius: var(--radius-sm); font-size: 15px; display: inline-flex; align-items: center; justify-content: center; }
.icon-btn-group button:hover { background: var(--color-slate-100); color: var(--color-ink); }
.icon-btn-group button.danger:hover { background: var(--color-red-light); color: var(--color-red); }

/* ---------------- Badges ---------------- */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.badge-green { background: var(--color-green-light); color: var(--color-green); }
.badge-red { background: var(--color-red-light); color: var(--color-red); }
.badge-amber { background: var(--color-amber-light); color: var(--color-brass-dark); }
.badge-blue { background: var(--color-blue-light); color: var(--color-blue); }
.badge-purple { background: var(--color-purple-light); color: var(--color-purple); }
.badge-gray { background: var(--color-slate-100); color: var(--color-slate-700); }

/* ---------------- Page header (title + subtitle) ---------------- */
.page-header { margin-bottom: 16px; }
.page-header h2 { font-size: 19px; margin-bottom: 3px; }
.page-header .sub { color: var(--color-slate-500); font-size: 13px; max-width: 520px; }

/* ---------------- Date navigator ---------------- */
.date-nav { display: flex; align-items: center; gap: 8px; }
.date-nav button { width: 40px; height: 40px; border-radius: var(--radius-sm); border: 1px solid var(--color-slate-300); background: #fff; cursor: pointer; font-size: 16px; color: var(--color-slate-700); flex-shrink: 0; }
.date-nav button:hover { background: var(--color-slate-100); }
.date-nav input[type="date"] { flex: 1; }

/* ---------------- Schedule / holiday pills row ---------------- */
.pill-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0; }
.pill-static { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 700; background: var(--color-slate-100); color: var(--color-slate-700); }
.pill-action { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 700; background: var(--color-purple-light); color: var(--color-purple); border: none; cursor: pointer; }
.pill-action:hover { filter: brightness(0.96); }

/* ---------------- Attendance status buttons ---------------- */
.att-status-row { display: flex; gap: 6px; flex-wrap: wrap; }
.att-btn {
  border: 1.5px solid var(--color-slate-300); background: #fff; border-radius: var(--radius-sm);
  padding: 8px 10px; font-size: 12.5px; font-weight: 700; cursor: pointer; min-height: 38px; min-width: 44px;
  color: var(--color-slate-700);
}
.att-btn.present.active { background: var(--color-green); border-color: var(--color-green); color: #fff; }
.att-btn.absent.active { background: var(--color-red); border-color: var(--color-red); color: #fff; }
.att-btn.late.active { background: var(--color-amber); border-color: var(--color-amber); color: #fff; }
.att-btn.excused.active { background: var(--color-blue); border-color: var(--color-blue); color: #fff; }
.att-btn.holiday.active { background: var(--color-purple); border-color: var(--color-purple); color: #fff; }

/* ---------------- Modals ---------------- */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(28,36,48,.5); z-index: 100;
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.modal {
  background: #fff; border-radius: var(--radius-lg); max-width: 560px; width: 100%;
  max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-2);
}
.modal-header { padding: 18px 20px; border-bottom: 1px solid var(--color-slate-100); display: flex; justify-content: space-between; align-items: center; }
.modal-header h3 { margin: 0; }
.modal-body { padding: 20px; }
.modal-footer { padding: 16px 20px; border-top: 1px solid var(--color-slate-100); display: flex; justify-content: flex-end; gap: 10px; }
.modal-close { background: none; border: none; font-size: 20px; cursor: pointer; color: var(--color-slate-500); }

/* ---------------- Toasts ---------------- */
#toast-container {
  position: fixed; top: 16px; z-index: 200; display: flex; flex-direction: column; gap: 8px;
  inset-inline-end: 16px; max-width: 340px;
}
.toast {
  background: var(--color-ink); color: #fff; padding: 12px 16px; border-radius: var(--radius-sm);
  font-size: 13.5px; box-shadow: var(--shadow-2); font-weight: 600;
  display: flex; align-items: center; gap: 8px;
}
.toast.success { background: var(--color-green); }
.toast.error { background: var(--color-red); }
.toast.warning { background: var(--color-brass-dark); }

/* ---------------- Empty / loading states ---------------- */
.empty-state { text-align: center; padding: 50px 20px; color: var(--color-slate-500); }
.empty-state .ic { font-size: 40px; margin-bottom: 10px; }
.spinner { width: 18px; height: 18px; border: 2.5px solid rgba(0,0,0,.15); border-top-color: var(--color-brass); border-radius: 50%; animation: spin .7s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
.skeleton { background: linear-gradient(90deg, var(--color-slate-100) 25%, #f0f0ec 37%, var(--color-slate-100) 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; border-radius: var(--radius-sm); }
@keyframes shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ---------------- Sync status pill ---------------- */
.sync-pill { display: flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700; }
.sync-pill.online { background: var(--color-green-light); color: var(--color-green); }
.sync-pill.offline { background: var(--color-red-light); color: var(--color-red); }
.sync-pill.syncing { background: var(--color-amber-light); color: var(--color-brass-dark); }
.sync-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.sync-dot.pulse { animation: pulse 1s ease infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }

/* ---------------- Login page ---------------- */
.auth-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, var(--color-slate-900), var(--color-ink)); padding: 20px; }
.auth-card { background: #fff; width: 100%; max-width: 400px; border-radius: var(--radius-lg); padding: 32px 28px; box-shadow: var(--shadow-2); }
.auth-logo { width: 52px; height: 52px; border-radius: 14px; background: var(--color-brass); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 22px; margin: 0 auto 16px; }
.auth-title { text-align: center; font-size: 20px; margin-bottom: 4px; }
.auth-sub { text-align: center; color: var(--color-slate-500); font-size: 13.5px; margin-bottom: 22px; }
.lang-switch { position: fixed; top: 16px; inset-inline-end: 16px; }

/* ---------------- Misc utility ---------------- */
.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mb-16 { margin-bottom: 16px; }
.text-muted { color: var(--color-slate-500); }
.text-sm { font-size: 12.5px; }
.section-title { font-size: 15px; font-weight: 800; margin: 22px 0 12px; }
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.toolbar .filters { display: flex; flex-wrap: wrap; gap: 8px; flex: 1; }
.pagination { display: flex; gap: 6px; align-items: center; justify-content: center; margin-top: 16px; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--color-brass-light); color: var(--color-brass-dark); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }

@media print {
  .sidebar, .topbar, .bottom-nav, .no-print { display: none !important; }
  .main { margin: 0 !important; }
  body { background: #fff; }
}


/* =============================================================
   PREMIUM 3D MOBILE APP DESIGN LAYER
   ============================================================= */
:root{
  --app-bg:#eef2f7;
  --app-surface:rgba(255,255,255,.92);
  --app-surface-strong:#fff;
  --app-primary:#5b4ce6;
  --app-primary-2:#7c6cf2;
  --app-accent:#00a88f;
  --app-text:#1c2230;
  --app-muted:#667085;
  --app-line:rgba(31,41,55,.08);
  --app-shadow:0 18px 45px rgba(31,41,55,.10),0 3px 10px rgba(31,41,55,.06);
  --app-shadow-soft:0 10px 25px rgba(31,41,55,.08), inset 0 1px 0 rgba(255,255,255,.85);
  --app-radius:20px;
}
body{background:radial-gradient(circle at 10% 0%,rgba(124,108,242,.08),transparent 28%),radial-gradient(circle at 90% 10%,rgba(0,168,143,.07),transparent 26%),var(--app-bg);color:var(--app-text)}
.sidebar{background:linear-gradient(180deg,#1e2433 0%,#151a25 100%);box-shadow:18px 0 40px rgba(17,24,39,.13);padding:12px 10px}
.sidebar-brand{margin:4px 4px 14px;padding:14px;border:1px solid rgba(255,255,255,.08);border-radius:18px;background:linear-gradient(145deg,rgba(255,255,255,.10),rgba(255,255,255,.03));box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 12px 24px rgba(0,0,0,.14)}
.sidebar-brand .mark{width:42px;height:42px;border-radius:14px;background:linear-gradient(145deg,#8a7cff,#5b4ce6);color:#fff;box-shadow:0 10px 22px rgba(91,76,230,.38),inset 0 1px 0 rgba(255,255,255,.4)}
.nav-link{border-radius:14px;padding:12px 13px;margin-bottom:5px;transition:.2s transform,.2s box-shadow,.2s background}
.nav-link:hover{background:rgba(255,255,255,.06);transform:translateY(-1px)}
.nav-link.active{background:linear-gradient(145deg,#7869ee,#5b4ce6);color:#fff;box-shadow:0 10px 24px rgba(91,76,230,.28),inset 0 1px 0 rgba(255,255,255,.22)}
.main{min-width:0}
.topbar{height:74px;margin:10px 14px 0;border:1px solid var(--app-line);border-radius:18px;background:rgba(255,255,255,.78);backdrop-filter:blur(18px);box-shadow:var(--app-shadow-soft);padding:0 18px}
.topbar-title{font-size:20px;font-weight:800}.topbar-right{gap:10px}.content{padding:18px 18px 28px;max-width:1500px}
.card,.stat-card,.list-card,.table-wrap,.toolbar,.page-header{border:1px solid var(--app-line);border-radius:var(--app-radius);background:var(--app-surface);box-shadow:var(--app-shadow-soft)}
.card{padding:20px}.stat-grid{gap:14px}.stat-card{padding:18px;position:relative;overflow:hidden}.stat-card:after{content:"";position:absolute;inset:auto -24px -24px auto;width:90px;height:90px;border-radius:50%;background:linear-gradient(145deg,rgba(124,108,242,.11),transparent);pointer-events:none}
.stat-card .stat-value{font-size:30px}.btn{min-height:44px;border-radius:13px;box-shadow:0 8px 16px rgba(31,41,55,.08),inset 0 1px 0 rgba(255,255,255,.35);transition:transform .16s,box-shadow .16s,filter .16s}.btn:hover{transform:translateY(-1px);box-shadow:0 12px 24px rgba(31,41,55,.11),inset 0 1px 0 rgba(255,255,255,.35)}.btn:active{transform:translateY(1px)}
.btn-primary{background:linear-gradient(145deg,#7c6cf2,#5b4ce6);border:0}.btn-success{background:linear-gradient(145deg,#2fbd9a,#149777);border:0}.btn-danger{background:linear-gradient(145deg,#e76b63,#bf3f36);border:0}
.form-control{border-radius:13px;border:1px solid rgba(31,41,55,.12);background:rgba(255,255,255,.9);box-shadow:inset 0 2px 5px rgba(31,41,55,.035),0 1px 0 rgba(255,255,255,.8);min-height:46px}.form-control:focus{box-shadow:0 0 0 4px rgba(91,76,230,.11),inset 0 2px 5px rgba(31,41,55,.035)}
.table-wrap{overflow:auto}.data-table th{background:linear-gradient(180deg,#f7f8fc,#eef1f7);font-size:12px;text-transform:uppercase;letter-spacing:.04em}.data-table td,.data-table th{border-color:var(--app-line)}
.page-header{padding:18px 20px;margin-bottom:16px}.toolbar{padding:12px 14px;margin-bottom:16px}.list-card{padding:16px;margin-bottom:12px;transition:.18s transform,.18s box-shadow}.list-card:hover{transform:translateY(-2px);box-shadow:var(--app-shadow)}
.auth-shell{min-height:100vh;background:radial-gradient(circle at 20% 20%,rgba(124,108,242,.18),transparent 30%),radial-gradient(circle at 80% 30%,rgba(0,168,143,.12),transparent 30%),var(--app-bg)}.auth-card{border:1px solid var(--app-line);border-radius:28px;background:rgba(255,255,255,.82);backdrop-filter:blur(20px);box-shadow:0 30px 80px rgba(31,41,55,.16),inset 0 1px 0 rgba(255,255,255,.8)}.auth-logo{background:linear-gradient(145deg,#8a7cff,#5b4ce6);box-shadow:0 18px 35px rgba(91,76,230,.28),inset 0 1px 0 rgba(255,255,255,.4)}
.att-status-row{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.att-btn{min-height:46px;border-radius:12px;border:1px solid var(--app-line);background:#f7f8fb;font-size:17px;box-shadow:inset 0 1px 0 #fff,0 4px 10px rgba(31,41,55,.05);transition:.16s}.att-btn.active{transform:translateY(-1px);box-shadow:0 10px 18px rgba(31,41,55,.12),inset 0 1px 0 rgba(255,255,255,.55);font-weight:800}
.monthly-grid{min-width:max-content}.monthly-student{position:sticky;inset-inline-start:0;z-index:3;background:rgba(255,255,255,.96)!important;backdrop-filter:blur(8px)}.monthly-head{position:sticky;top:0;z-index:4}.monthly-status{width:30px;height:30px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;font-weight:800;box-shadow:0 5px 10px rgba(31,41,55,.08),inset 0 1px 0 rgba(255,255,255,.45)}
.kpi-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;margin-bottom:18px}.kpi-card{min-height:120px;padding:18px;border-radius:20px;background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(245,247,252,.9));border:1px solid var(--app-line);box-shadow:var(--app-shadow-soft)}.kpi-label{font-size:12px;color:var(--app-muted);font-weight:800;text-transform:uppercase;letter-spacing:.04em}.kpi-value{font-size:30px;font-weight:900;margin-top:8px}.dashboard-grid{display:grid;grid-template-columns:2fr 1fr;gap:16px}.chart-card{padding:20px;border-radius:20px;background:rgba(255,255,255,.92);border:1px solid var(--app-line);box-shadow:var(--app-shadow-soft)}.bar-chart{display:flex;align-items:flex-end;gap:7px;height:160px;padding-top:15px}.bar-chart span{flex:1;border-radius:9px 9px 4px 4px;background:linear-gradient(180deg,#7c6cf2,#5b4ce6);box-shadow:0 8px 18px rgba(91,76,230,.18);min-height:8px}.bar-chart small{display:block;text-align:center;margin-top:5px;font-size:9px;color:var(--app-muted)}
.progress-ring{--p:0;width:92px;height:92px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#5b4ce6 calc(var(--p)*1%),#e7eaf1 0);box-shadow:0 10px 24px rgba(91,76,230,.12)}.progress-ring:before{content:"";position:absolute;width:68px;height:68px;border-radius:50%;background:#fff;box-shadow:inset 0 2px 6px rgba(31,41,55,.06)}.progress-ring>span{position:relative;font-weight:900;font-size:18px}
.bottom-nav{background:rgba(255,255,255,.88);backdrop-filter:blur(18px);border-top:1px solid var(--app-line);box-shadow:0 -10px 30px rgba(31,41,55,.10)}.bottom-nav-item{min-height:62px}.bottom-nav-item.active{color:var(--app-primary);font-weight:800}
.sync-pill,.status-pill,.badge{border-radius:999px}.sync-pill{box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 5px 12px rgba(31,41,55,.06)}
@media(max-width:1100px){.kpi-grid{grid-template-columns:repeat(3,1fr)}.dashboard-grid{grid-template-columns:1fr}}
@media(max-width:900px){.topbar{margin:8px 8px 0;height:68px}.content{padding:14px 10px 84px}.sidebar{box-shadow:25px 0 50px rgba(17,24,39,.25)}.kpi-grid{grid-template-columns:repeat(2,1fr)}.att-status-row{grid-template-columns:repeat(5,minmax(56px,1fr))}.toolbar{overflow:auto}}
@media(max-width:520px){.topbar-title{font-size:17px}.topbar-right .btn{display:none}.kpi-grid{grid-template-columns:1fr 1fr;gap:10px}.kpi-card{min-height:104px;padding:14px}.kpi-value{font-size:25px}.card{padding:15px}.page-header{padding:15px}.att-status-row{gap:6px}.att-btn{min-height:48px}.stat-grid{grid-template-columns:repeat(2,1fr)!important}}

/* =============================================================
   PREMIUM 3D APP SHELL V2 — SAFE AREA + GLASS/DEPTH REDESIGN
   ============================================================= */
:root{
  --app-bg:#edf1f8;
  --app-surface:rgba(255,255,255,.94);
  --app-surface-solid:#ffffff;
  --app-primary:#6657e8;
  --app-primary-deep:#4f42c7;
  --app-accent:#16a085;
  --app-text:#182033;
  --app-muted:#6e7890;
  --app-line:rgba(35,43,69,.09);
  --app-shadow-3d:0 24px 60px rgba(37,44,72,.12),0 6px 18px rgba(37,44,72,.07),inset 0 1px 0 rgba(255,255,255,.92);
  --app-shadow-lift:0 14px 32px rgba(37,44,72,.12),0 4px 10px rgba(37,44,72,.06),inset 0 1px 0 rgba(255,255,255,.85);
  --app-radius-xl:26px;
}

html,body{min-height:100%;overflow-x:hidden}
body{
  background:
    radial-gradient(900px 420px at -10% -5%, rgba(102,87,232,.18), transparent 60%),
    radial-gradient(720px 420px at 110% 8%, rgba(22,160,133,.13), transparent 60%),
    linear-gradient(180deg,#f7f9fd 0%,#edf1f8 42%,#e9eef6 100%);
  color:var(--app-text);
}

#app{min-height:100dvh}

/* iOS/Android safe-area protection: keeps app controls below clock/signal/battery. */
.topbar{
  margin-top:calc(10px + env(safe-area-inset-top, 0px));
  min-height:74px;
  height:auto;
  padding-top:10px;
  padding-bottom:10px;
  border-radius:22px;
  background:linear-gradient(135deg,rgba(255,255,255,.94),rgba(247,249,255,.78));
  border:1px solid rgba(255,255,255,.88);
  box-shadow:var(--app-shadow-lift);
}
.topbar:before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(35,43,69,.03);
}
.topbar-title{letter-spacing:-.02em}
.topbar-right{position:relative;z-index:1}

.menu-toggle,.topbar .btn,.avatar{
  position:relative;
  border:1px solid rgba(35,43,69,.08);
  box-shadow:0 8px 18px rgba(37,44,72,.08), inset 0 1px 0 rgba(255,255,255,.9);
}
.menu-toggle{background:rgba(255,255,255,.9)!important}
.avatar{
  width:40px;height:40px;
  background:linear-gradient(145deg,#8173f4,#5b4bdd);
  color:#fff;
  box-shadow:0 10px 20px rgba(91,75,221,.25), inset 0 1px 0 rgba(255,255,255,.45);
}

.sidebar{
  background:
    radial-gradient(380px 240px at 90% 0%,rgba(129,115,244,.25),transparent 65%),
    linear-gradient(180deg,#1a2030 0%,#111726 100%);
  box-shadow:24px 0 60px rgba(17,23,38,.18);
  border-inline-end:1px solid rgba(255,255,255,.06);
}
.sidebar-brand .mark{
  background:linear-gradient(145deg,#9589ff 0%,#5a4ad8 100%);
  box-shadow:0 14px 28px rgba(90,74,216,.4), inset 0 1px 0 rgba(255,255,255,.5);
}
.sidebar-footer{opacity:.9}
.nav-link{
  min-height:48px;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}
.nav-link.active{
  background:linear-gradient(145deg,#7c6df0,#5647d3);
  box-shadow:0 12px 28px rgba(86,71,211,.28),inset 0 1px 0 rgba(255,255,255,.22);
}

.content{padding:22px 20px calc(34px + env(safe-area-inset-bottom,0px));}
.page-header{
  position:relative;
  overflow:hidden;
  background:linear-gradient(135deg,rgba(255,255,255,.97),rgba(248,250,255,.88));
  box-shadow:var(--app-shadow-3d);
}
.page-header:after{
  content:"";
  position:absolute;
  width:180px;height:180px;
  inset-inline-end:-80px;top:-100px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(102,87,232,.13),transparent 68%);
  pointer-events:none;
}

.card,.stat-card,.list-card,.chart-card,.kpi-card,.toolbar,.table-wrap{
  border:1px solid rgba(255,255,255,.92);
  box-shadow:var(--app-shadow-3d);
}
.card,.stat-card,.list-card,.chart-card,.kpi-card{transition:transform .2s ease,box-shadow .2s ease}
.card:hover,.stat-card:hover,.list-card:hover,.chart-card:hover,.kpi-card:hover{
  transform:translateY(-2px);
  box-shadow:0 28px 64px rgba(37,44,72,.14),0 8px 18px rgba(37,44,72,.07),inset 0 1px 0 rgba(255,255,255,.95);
}

.stat-card,.kpi-card{
  background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(244,247,253,.92));
  overflow:hidden;
}
.stat-card:before,.kpi-card:before{
  content:"";
  position:absolute;
  inset:8px 8px auto;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.95),transparent);
  pointer-events:none;
}

.btn-primary{
  background:linear-gradient(145deg,#8274f4 0%,#5b4bdd 100%);
  box-shadow:0 12px 25px rgba(91,75,221,.28),inset 0 1px 0 rgba(255,255,255,.35);
}
.btn-secondary{background:linear-gradient(145deg,#ffffff,#eef2f8)}
.btn-outline{background:rgba(255,255,255,.72)}

.form-control{
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(247,249,253,.92));
  border-color:rgba(35,43,69,.11);
}

.table-wrap{background:rgba(255,255,255,.9)}
.data-table thead th,
.data-table th{
  background:linear-gradient(180deg,#fdfdff,#eef2f8)!important;
}

.monthly-grid .monthly-head{box-shadow:0 10px 18px rgba(37,44,72,.07)}
.monthly-status{
  border:1px solid rgba(255,255,255,.8);
  box-shadow:0 7px 14px rgba(37,44,72,.1),inset 0 1px 0 rgba(255,255,255,.5);
}

.att-btn{
  background:linear-gradient(145deg,#ffffff,#f1f4f9);
  border-color:rgba(35,43,69,.1);
}
.att-btn.active{transform:translateY(-2px) scale(1.01)}

.bottom-nav{
  padding-bottom:calc(8px + env(safe-area-inset-bottom,0px));
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(247,249,253,.96));
  border-top:1px solid rgba(35,43,69,.09);
  box-shadow:0 -18px 40px rgba(37,44,72,.13),inset 0 1px 0 rgba(255,255,255,.95);
}
.bottom-nav-inner{padding:3px 6px 0}
.bottom-nav-item{
  min-height:62px;
  margin:0 3px;
  border-radius:18px;
  position:relative;
  transition:transform .18s ease,background .18s ease,box-shadow .18s ease;
}
.bottom-nav-item.active{
  background:linear-gradient(145deg,rgba(130,116,244,.16),rgba(91,75,221,.06));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 7px 18px rgba(91,75,221,.08);
}
.bottom-nav-item.active:after{
  content:"";
  position:absolute;
  left:50%;bottom:4px;transform:translateX(-50%);
  width:22px;height:3px;border-radius:99px;
  background:linear-gradient(90deg,#8678f4,#5b4bdd);
}

.sync-pill{backdrop-filter:blur(14px)}
.toast{top:calc(16px + env(safe-area-inset-top,0px))}
#toast-container{top:calc(16px + env(safe-area-inset-top,0px));}

.auth-shell{
  min-height:100dvh;
  padding:calc(28px + env(safe-area-inset-top,0px)) 20px calc(28px + env(safe-area-inset-bottom,0px));
  background:
    radial-gradient(700px 450px at 10% 10%,rgba(124,108,242,.26),transparent 58%),
    radial-gradient(600px 420px at 90% 90%,rgba(22,160,133,.18),transparent 58%),
    linear-gradient(160deg,#f6f8fd 0%,#e9edf6 100%);
}
.auth-card{
  position:relative;
  overflow:hidden;
  background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(247,249,253,.88));
  box-shadow:0 36px 90px rgba(31,41,55,.18),0 10px 25px rgba(31,41,55,.08),inset 0 1px 0 rgba(255,255,255,.96);
}
.auth-card:after{
  content:"";position:absolute;inset:auto -80px -110px auto;width:240px;height:240px;border-radius:50%;
  background:radial-gradient(circle,rgba(102,87,232,.15),transparent 70%);pointer-events:none;
}

/* Phone/tablet: more breathing room below the OS status bar and bottom home indicator. */
@media (max-width:900px){
  #app{padding-top:0}
  .topbar{margin-inline:8px;margin-top:calc(6px + env(safe-area-inset-top,0px));}
  .content{padding:16px 10px calc(92px + env(safe-area-inset-bottom,0px));}
  .sidebar{top:env(safe-area-inset-top,0px);bottom:0}
  .sidebar-overlay{top:env(safe-area-inset-top,0px)}
}

@media (max-width:520px){
  .topbar{min-height:72px;border-radius:20px;padding-inline:12px;padding-top:9px;padding-bottom:9px}
  .topbar-title{font-size:16px;max-width:45vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .topbar-right{gap:7px}
  .topbar-right .btn{display:none}
  .menu-toggle{width:42px;height:42px}
  .avatar{width:38px;height:38px}
  .content{padding-top:14px}
  .page-header{padding:16px;border-radius:22px}
  .card{padding:16px;border-radius:22px}
  .kpi-grid{gap:10px}
  .kpi-card{border-radius:20px}
  .att-btn{min-height:52px;border-radius:14px}
  .bottom-nav-item{min-height:60px;font-size:10.5px}
}

@media (max-width:380px){
  .topbar-title{max-width:39vw}
  .content{padding-inline:8px}
  .kpi-grid{gap:8px}
  .kpi-card{padding:12px}
  .kpi-value{font-size:23px}
}

/* Arabic: keep app controls visually balanced in RTL. */
html[dir="rtl"] .topbar,
html[dir="rtl"] .page-header,
html[dir="rtl"] .card,
html[dir="rtl"] .kpi-card,
html[dir="rtl"] .stat-card{direction:rtl}
html[dir="rtl"] .topbar-right{flex-direction:row}
html[dir="rtl"] .bottom-nav-inner{direction:rtl}

/* Reduce motion for devices that request it. */
@media (prefers-reduced-motion:reduce){
  .card,.stat-card,.list-card,.chart-card,.kpi-card,.btn,.bottom-nav-item,.nav-link{transition:none!important}
}


/* =============================================================
   MENU LANGUAGE + BLUE STUDENT NUMBER V3
   ============================================================= */
.btn-language{
  min-width:92px;
  padding-inline:11px!important;
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  gap:6px;
  font-weight:900;
  letter-spacing:.01em;
}
.btn-language .lang-code,
.lang-choice .lang-code{
  font-size:12px;
  line-height:1;
  opacity:.58;
}
.btn-language .lang-code.active,
.lang-choice .lang-code.active{
  opacity:1;
  color:var(--app-primary);
}
.lang-sep{opacity:.35;font-weight:700}
.sidebar-language{
  margin:8px 10px 10px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.025));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 8px 20px rgba(0,0,0,.10);
}
.sidebar-language-label{
  color:#dfe5f4;
  font-size:12px;
  font-weight:800;
}
.lang-choice{
  border:1px solid rgba(255,255,255,.12);
  color:#fff;
  background:rgba(255,255,255,.08);
  border-radius:12px;
  padding:8px 10px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
}
.lang-choice .lang-code.active{color:#9e94ff}

.id-badge{
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  min-width:72px;
  padding:7px 11px!important;
  border-radius:12px!important;
  color:#fff!important;
  background:linear-gradient(145deg,#2f7df6 0%,#1557c9 100%)!important;
  border:1px solid rgba(255,255,255,.45)!important;
  box-shadow:0 9px 18px rgba(21,87,201,.25),inset 0 1px 0 rgba(255,255,255,.42)!important;
  font-weight:900!important;
  letter-spacing:.02em;
  text-shadow:0 1px 1px rgba(0,0,0,.15);
}
.student-card .id-badge{font-size:12px}

@media(max-width:520px){
  .btn-language{min-width:86px;font-size:12px!important;padding-inline:9px!important}
  .sidebar-language{margin-inline:8px}
  .id-badge{min-width:68px;padding:6px 9px!important}
}


/* ===== V4 PREMIUM BLUE / CYAN / GOLD CONTACT STYLE ===== */
:root{
  --premium-blue-900:#0b2f6b;
  --premium-blue-700:#1557c9;
  --premium-blue-600:#1f6ff2;
  --premium-blue-500:#2f7df6;
  --premium-blue-100:#eaf2ff;
  --premium-cyan-500:#19b8d7;
  --premium-cyan-100:#e9fbff;
  --premium-gold-500:#c9952e;
  --premium-gold-100:#fff7df;
}

.student-card{background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(243,248,255,.94));border:1px solid rgba(31,111,242,.12);box-shadow:0 18px 38px rgba(11,47,107,.10),inset 0 1px 0 rgba(255,255,255,.9);}
.student-card:before{background:linear-gradient(135deg,rgba(47,125,246,.10),transparent 40%,rgba(25,184,215,.08));}

/* Student number remains strongly blue */
.student-card .id-badge{
  background:linear-gradient(145deg,var(--premium-blue-500),var(--premium-blue-700)) !important;
  color:#fff !important;
  border-color:rgba(255,255,255,.55)!important;
  box-shadow:0 9px 20px rgba(21,87,201,.28),inset 0 1px 0 rgba(255,255,255,.45)!important;
}

/* Mother/Father phone numbers: blue professional tap targets */
.contact-row .call-pill,
.student-card a[href^="tel:"],
.modal-body a[href^="tel:"]{
  color:var(--premium-blue-700)!important;
  background:linear-gradient(145deg,#f5f9ff,var(--premium-blue-100))!important;
  border:1px solid rgba(31,111,242,.18)!important;
  box-shadow:0 6px 14px rgba(21,87,201,.12),inset 0 1px 0 rgba(255,255,255,.9)!important;
  font-weight:900!important;
  text-decoration:none!important;
}
.contact-row .call-pill:hover,
.student-card a[href^="tel:"]:hover,
.modal-body a[href^="tel:"]:hover{
  background:linear-gradient(145deg,#eaf2ff,#dce9ff)!important;
  transform:translateY(-1px);
}

/* Distinct parent contact blocks */
.contact-row:has(.call-pill)::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--premium-cyan-500);box-shadow:0 0 0 4px rgba(25,184,215,.10);}

/* Premium section accents */
.section-title,.page-title{color:var(--premium-blue-900);}
.btn-primary{background:linear-gradient(145deg,var(--premium-blue-500),var(--premium-blue-700))!important;box-shadow:0 10px 22px rgba(21,87,201,.22),inset 0 1px 0 rgba(255,255,255,.30)!important;}

/* Gold micro-accent for premium feel */
.student-card .gender-badge{box-shadow:0 5px 13px rgba(11,47,107,.06);}
.student-card .verified-dot{background:linear-gradient(145deg,#d8aa49,#b9821d)!important;box-shadow:0 4px 10px rgba(201,149,46,.22)!important;}

@media(max-width:520px){
  .contact-row{align-items:flex-start;flex-wrap:wrap;}
  .contact-row .contact-name{min-width:38%;}
  .contact-row .call-pill{margin-inline-start:auto;max-width:100%;overflow:hidden;text-overflow:ellipsis;}
  .student-card a[href^="tel:"],.modal-body a[href^="tel:"]{padding:7px 10px!important;border-radius:12px!important;}
}


/* V5 automatic Arabic fields: generated by translation service, never typed manually. */
.auto-ar-field{background:linear-gradient(145deg,rgba(240,248,255,.96),rgba(232,241,255,.96))!important;border:1px solid rgba(31,111,242,.18)!important;color:#134a9c!important;font-weight:700;box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 8px 18px rgba(31,111,242,.08)!important;}
.auto-ar-field[readonly]{cursor:not-allowed;}
.auto-badge{display:inline-flex;align-items:center;margin-inline-start:6px;padding:3px 7px;border-radius:999px;font-size:9px;font-weight:900;letter-spacing:.04em;background:linear-gradient(135deg,#1677ff,#20c4d9);color:#fff;vertical-align:middle;box-shadow:0 4px 10px rgba(31,111,242,.18);}
.auto-ar-status{font-size:11px;margin-top:5px;color:#2870bf;font-weight:700;min-height:16px;}
.auto-ar-status.is-loading{opacity:.65;animation:pulse-auto-ar 1s ease-in-out infinite;}
@keyframes pulse-auto-ar{50%{opacity:.35}}
@media(max-width:520px){.auto-ar-status{font-size:10px}.auto-badge{font-size:8px;padding:2px 6px}}

/* Arabic auto-translation edit controls */
.auto-ar-edit-wrap{display:flex;justify-content:flex-end;margin-top:7px}
.auto-ar-edit{font-size:11px!important;padding:6px 10px!important;border-radius:10px!important}
.auto-ar-field.is-manual{background:linear-gradient(145deg,#fffaf0,#fff4d8)!important;border-color:rgba(180,120,0,.35)!important;color:#5f4300!important;cursor:text!important}

/* =========================================================================
   Attendance Refresh — mobile-first professional register
   ========================================================================= */
.eyebrow{display:block;text-transform:uppercase;letter-spacing:.12em;font-size:11px;font-weight:800;color:var(--color-brass-dark);margin-bottom:4px}
.attendance-hero,.dashboard-hero{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px}
.schedule-chip{background:var(--color-slate-900);color:#fff;border-radius:999px;padding:8px 13px;font-size:11px;font-weight:800;letter-spacing:.08em;white-space:nowrap}
.dashboard-date{background:#fff;border:1px solid var(--color-slate-100);padding:9px 12px;border-radius:999px;color:var(--color-slate-700);font-size:12px;font-weight:700}
.attendance-controls{padding:16px}
.attendance-control-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.date-nav-inline{display:flex;gap:7px;align-items:center}.date-nav-inline .form-control{min-width:0}
.attendance-search-wrap{position:relative;display:flex;align-items:center;gap:8px;margin-top:14px}
.attendance-search-wrap.compact{margin-top:0;max-width:460px}
.search-symbol{position:absolute;left:12px;z-index:1;font-size:22px;color:var(--color-slate-500);line-height:1}
.attendance-search{padding-left:38px!important;min-height:46px!important}
.attendance-quick-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.attendance-summary{padding:18px}
.attendance-summary-top,.teacher-self-top{display:flex;align-items:center;justify-content:space-between;gap:14px}
.attendance-mini-stats,.teacher-count-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:16px}
.attendance-mini-stats>div,.teacher-count-grid>div{background:var(--color-paper);border:1px solid var(--color-slate-100);border-radius:10px;padding:10px;text-align:center}
.attendance-mini-stats b,.teacher-count-grid b{display:block;font-size:20px}.attendance-mini-stats span,.teacher-count-grid span{font-size:11px;color:var(--color-slate-500);font-weight:700}
.notice{border-radius:10px;padding:11px 13px;margin-top:12px;font-size:13px}.notice-warning{background:var(--color-amber-light);color:#6f521d;border:1px solid #ead6ad}
.student-list-heading,.section-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:16px 0 10px}.student-list-heading h3,.section-heading h3{margin:0}
.attendance-student-list{display:grid;gap:9px}
.attendance-student-card,.teacher-register-card,.enrollment-teacher{background:#fff;border:1px solid var(--color-slate-100);border-radius:14px;padding:13px;box-shadow:var(--shadow-1)}
.student-register-main{display:flex;align-items:center;gap:11px}.student-number{width:30px;height:30px;border-radius:9px;background:var(--color-slate-100);display:grid;place-items:center;font-size:12px;font-weight:800;flex:0 0 30px}
.student-register-info{min-width:0;flex:1}.student-register-name{font-weight:800;font-size:15px}.student-register-ar{font-size:13px;direction:rtl;text-align:left;color:var(--color-slate-700)}.student-register-id{font-size:11px;color:var(--color-slate-500);margin-top:2px}
.status-pill{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:5px 9px;font-size:11px;font-weight:800;white-space:nowrap;background:var(--color-slate-100);color:var(--color-slate-700)}
.status-present{background:var(--color-green-light);color:var(--color-green)}.status-absent{background:var(--color-red-light);color:var(--color-red)}.status-late{background:var(--color-amber-light);color:#79591f}.status-excused{background:var(--color-blue-light);color:var(--color-blue)}.status-holiday{background:var(--color-purple-light);color:var(--color-purple)}
.student-status-actions,.teacher-status-actions{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin-top:11px}
.att-btn{border:1px solid var(--color-slate-100);background:#fff;border-radius:9px;min-height:42px;display:flex;align-items:center;justify-content:center;gap:5px;cursor:pointer;font-weight:800;color:var(--color-slate-700);font-size:12px}
.att-btn:hover{filter:brightness(.98)}.att-btn.active{box-shadow:inset 0 0 0 2px currentColor}
.att-btn.present.active{color:var(--color-green);background:var(--color-green-light)}.att-btn.absent.active{color:var(--color-red);background:var(--color-red-light)}.att-btn.late.active{color:#79591f;background:var(--color-amber-light)}.att-btn.excused.active{color:var(--color-blue);background:var(--color-blue-light)}.att-btn.holiday.active{color:var(--color-purple);background:var(--color-purple-light)}
.teacher-admin-tabs{display:flex;gap:6px;overflow:auto;padding:4px;background:var(--color-slate-100);border-radius:12px;margin-bottom:14px}.teacher-tab{border:0;background:transparent;padding:10px 14px;border-radius:9px;font:inherit;font-size:13px;font-weight:800;white-space:nowrap;cursor:pointer;color:var(--color-slate-700)}.teacher-tab.active{background:#fff;color:var(--color-ink);box-shadow:var(--shadow-1)}
.teacher-self-card{border-left:4px solid var(--color-green)}.teacher-time-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:15px}.teacher-time-row>div{background:var(--color-paper);border-radius:9px;padding:10px;font-size:12px;color:var(--color-slate-500)}.teacher-time-row strong{display:block;color:var(--color-ink);font-size:15px}.teacher-self-actions{margin-top:13px}
.teacher-register{display:grid;gap:9px;margin-top:12px}.teacher-register-card{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}.teacher-register-info,.enrollment-teacher-head{display:flex;align-items:center;gap:10px;min-width:0}.teacher-avatar{width:38px;height:38px;border-radius:11px;background:var(--color-slate-900);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:800;flex:0 0 38px}.teacher-status-actions{grid-column:1/-1}
.enrollment-list{display:grid;gap:10px;margin-top:12px}.enrollment-levels{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}.enroll-check{display:flex;align-items:center;gap:7px;border:1px solid var(--color-slate-100);border-radius:9px;padding:8px 10px;font-size:12px;font-weight:700;background:var(--color-paper);cursor:pointer}.enroll-check input{accent-color:var(--color-brass-dark)}
.attendance-trend{height:190px;display:flex;align-items:stretch;justify-content:space-around;gap:16px;padding:12px 4px 0}.trend-item{flex:1;display:flex;flex-direction:column;align-items:center;min-width:70px}.trend-value{font-weight:800;font-size:12px;height:20px}.trend-track{height:125px;width:100%;max-width:55px;background:var(--color-slate-100);border-radius:9px 9px 4px 4px;display:flex;align-items:flex-end;overflow:hidden}.trend-fill{width:100%;background:var(--color-brass);border-radius:8px 8px 3px 3px;min-height:6px}.trend-day{font-size:12px;font-weight:800;margin-top:7px}.trend-date{font-size:10px;color:var(--color-slate-500)}
@media(max-width:700px){
 .attendance-hero,.dashboard-hero{flex-direction:column}.schedule-chip{align-self:flex-start}
 .attendance-control-grid{grid-template-columns:1fr}.attendance-mini-stats,.teacher-count-grid{grid-template-columns:repeat(3,1fr)}
 .student-register-main{align-items:flex-start}.student-register-main .status-pill{margin-left:auto}.student-status-actions,.teacher-status-actions{grid-template-columns:repeat(5,1fr)}
 .att-btn{min-height:44px;flex-direction:column;gap:1px}.att-btn span{font-size:9px}.teacher-register-card{grid-template-columns:1fr}
 .teacher-status-actions{grid-column:auto}.teacher-time-row{grid-template-columns:1fr}.attendance-trend{gap:7px}
}

/* =============================================================
   MOBILE-FIRST REDESIGN V3 — RIHABUL QURAAN APP
   Optimised for one-hand phone use, touch targets and quick attendance.
   ============================================================= */
:root{
  --mobile-bg:#f4f7fb;
  --mobile-card:#ffffff;
  --mobile-primary:#4f46e5;
  --mobile-primary-dark:#3730a3;
  --mobile-teal:#0f9f8b;
  --mobile-text:#172033;
  --mobile-muted:#718096;
  --mobile-border:#e6eaf0;
  --mobile-radius:22px;
}
body{background:linear-gradient(180deg,#f8faff 0%,#f0f4f9 100%);color:var(--mobile-text)}
.topbar{background:rgba(255,255,255,.94);border-color:var(--mobile-border);box-shadow:0 8px 24px rgba(30,41,59,.07)}
.content{max-width:1280px}
.page-header{border:0;background:linear-gradient(135deg,#4f46e5 0%,#6366f1 55%,#0f9f8b 140%);color:#fff;box-shadow:0 18px 35px rgba(79,70,229,.18);border-radius:24px;padding:22px;margin-bottom:16px}
.page-header .sub,.page-header .text-muted{color:rgba(255,255,255,.78)}
.page-header .eyebrow{color:rgba(255,255,255,.72)}
.dashboard-date,.schedule-chip{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.24);color:#fff;border-radius:999px;padding:8px 12px;font-weight:800}
.card,.stat-card,.toolbar,.table-wrap,.kpi-card{border-color:var(--mobile-border);border-radius:var(--mobile-radius);box-shadow:0 10px 28px rgba(30,41,59,.06)}
.stat-card{background:#fff}
.stat-card .stat-value{color:var(--mobile-text)}
.form-control{min-height:50px;border-radius:15px;border-color:#dfe4ec;font-size:15px}
select.form-control,input.form-control{touch-action:manipulation}
.btn{min-height:48px;border-radius:15px;font-weight:800}
.btn-primary{background:linear-gradient(135deg,#6366f1,#4f46e5)}
.btn-success{background:linear-gradient(135deg,#16b39b,#0f9f8b)}
.attendance-controls{padding:16px}
.attendance-control-grid{gap:12px}
.attendance-search-wrap{position:relative;display:flex;align-items:center;gap:8px;margin-top:14px}
.attendance-search-wrap .search-symbol{position:absolute;inset-inline-start:14px;z-index:2;font-size:20px;color:#8994a7}
.attendance-search-wrap .attendance-search{padding-inline-start:42px}
.student-filter-row{display:flex;gap:8px;overflow-x:auto;padding:12px 0 4px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.student-filter-row::-webkit-scrollbar{display:none}
.filter-chip{flex:0 0 auto;border:1px solid var(--mobile-border);background:#fff;color:#64748b;border-radius:999px;padding:9px 13px;font:800 12px inherit;box-shadow:0 4px 10px rgba(30,41,59,.04);cursor:pointer}
.filter-chip span{display:inline-flex;min-width:19px;height:19px;padding:0 5px;align-items:center;justify-content:center;border-radius:999px;background:#eef2f7;margin-inline-start:4px}
.filter-chip.active{background:#eef2ff;color:#4338ca;border-color:#c7d2fe;box-shadow:0 6px 15px rgba(79,70,229,.12)}
.attendance-quick-actions{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:10px}
.attendance-quick-actions .btn{padding-inline:8px;font-size:12px}
.student-list-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:18px 2px 10px}
.attendance-student-list{display:grid;gap:10px}
.attendance-student-card{border-radius:20px!important;border:1px solid var(--mobile-border)!important;background:#fff!important;padding:14px!important;box-shadow:0 8px 22px rgba(30,41,59,.055)!important}
.student-register-main{align-items:center}
.student-number{width:32px;height:32px;border-radius:11px;background:#eef2ff;color:#4f46e5;display:flex;align-items:center;justify-content:center;font-weight:900}
.student-register-name{font-size:15px;font-weight:900}
.student-register-ar{font-size:13px;color:#64748b;margin-top:1px}
.student-register-id{font-size:11px;color:#94a3b8;font-weight:700;margin-top:2px}
.status-pill{padding:7px 10px;font-size:11px;font-weight:900}
.student-status-actions{display:grid!important;grid-template-columns:repeat(5,1fr);gap:6px!important;margin-top:12px}
.att-btn{min-height:54px!important;border-radius:14px!important;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:16px!important;padding:5px!important}
.att-btn span{font-size:9px;font-weight:900}
.att-btn.present.active{background:#dff8f1;border-color:#8ee0cd}
.att-btn.absent.active{background:#ffe7e5;border-color:#ffaaa5}
.att-btn.late.active{background:#fff3d8;border-color:#f3cf7a}
.att-btn.excused.active{background:#e5efff;border-color:#a9c9ff}
.att-btn.holiday.active{background:#eee9ff;border-color:#c7b9ff}
.teacher-register{display:grid;gap:10px}
.teacher-register-card,.enrollment-teacher{border-radius:20px!important;box-shadow:0 8px 22px rgba(30,41,59,.055)!important}
.teacher-admin-tabs{display:flex;gap:8px;overflow:auto;padding:4px 2px 12px;scrollbar-width:none}
.teacher-tab{flex:0 0 auto;border:1px solid var(--mobile-border);background:#fff;border-radius:999px;padding:10px 14px;font-weight:800;color:#64748b}
.teacher-tab.active{background:#eef2ff;color:#4338ca;border-color:#c7d2fe}
.enrollment-search{margin-bottom:12px}
.progress-ring{box-shadow:0 12px 28px rgba(79,70,229,.15)}
.trend-card{overflow:hidden}
.attendance-trend{display:flex;gap:10px;align-items:flex-end;min-height:190px;padding:12px 2px 4px;overflow-x:auto}
.trend-item{min-width:62px;text-align:center}
.trend-track{height:125px;background:#edf0f5;border-radius:12px 12px 7px 7px;padding:3px;display:flex;align-items:flex-end}
.trend-fill{width:100%;background:linear-gradient(180deg,#7c6cf2,#4f46e5);border-radius:9px 9px 5px 5px;min-height:6px}
.trend-value{font-weight:900;font-size:12px;margin-bottom:5px;color:#4338ca}
.trend-day{font-weight:900;font-size:11px;margin-top:6px}.trend-date{font-size:10px;color:#94a3b8}
.bottom-nav-item{position:relative;padding-top:9px}.bottom-nav-item.active:before{content:"";position:absolute;top:0;left:25%;right:25%;height:3px;border-radius:99px;background:#4f46e5}

@media(max-width:700px){
  .topbar{margin:7px 7px 0;height:64px;padding:0 12px;border-radius:18px}
  .topbar-right{gap:5px}.topbar-right .sync-pill{font-size:9px;padding:5px 7px}.topbar-right .avatar{width:34px;height:34px}
  .content{padding:10px 9px calc(86px + env(safe-area-inset-bottom))}
  .page-header{padding:18px;border-radius:22px;display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
  .page-header h2{font-size:21px}.page-header .sub{font-size:12px}
  .stat-grid{grid-template-columns:repeat(2,1fr)!important;gap:9px}.stat-card{padding:14px;border-radius:18px}.stat-card .stat-value{font-size:25px}
  .dashboard-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.dashboard-actions .btn:first-child{grid-column:1/-1}
  .attendance-summary-top{gap:10px}.attendance-summary{padding:15px!important}
  .attendance-mini-stats{grid-template-columns:repeat(3,1fr)!important;gap:7px!important}.attendance-mini-stats div{padding:10px 5px!important;border-radius:14px!important}
  .attendance-control-grid{grid-template-columns:1fr!important}
  .date-nav-inline .btn{min-width:46px}
  .toolbar{padding:10px!important;overflow:visible!important}
  .teacher-count-grid{grid-template-columns:repeat(3,1fr)!important;gap:7px!important}.teacher-count-grid>div{padding:10px 5px!important;border-radius:14px!important}
  .section-heading{gap:8px}.section-heading h3{font-size:15px}
  .modal{width:calc(100% - 18px);max-height:88vh;border-radius:24px}.modal-body{padding:16px}.modal-footer{padding:12px 16px}
  .data-table{font-size:12px}
}
@media(max-width:420px){
  .page-header .schedule-chip{font-size:9px;padding:7px 9px}
  .student-status-actions{gap:4px!important}.att-btn{min-height:51px!important}.att-btn span{font-size:8px}
  .attendance-quick-actions .btn{min-height:44px;font-size:11px}
  .stat-card .stat-label{font-size:10px}
}

/* ========================================================================
   2026 MOBILE APP REDESIGN — Rihabul Quraan
   Mobile-first school app: calm navy, indigo and teal, large touch targets.
   ======================================================================== */
:root{
  --app-navy:#0f172a;
  --app-indigo:#4f46e5;
  --app-indigo-2:#6366f1;
  --app-teal:#0d9488;
  --app-bg:#f5f7fb;
  --app-card:#ffffff;
  --app-line:#e7eaf1;
  --app-muted:#64748b;
  --app-text:#172033;
  --app-radius:22px;
  --app-shadow:0 10px 30px rgba(15,23,42,.07);
}
body{background:var(--app-bg);color:var(--app-text)}
.sidebar{background:linear-gradient(180deg,#0f172a 0%,#172554 100%);border:0}
.sidebar-brand{padding:22px 18px;border-bottom:1px solid rgba(255,255,255,.09)}
.sidebar-brand .mark{width:42px;height:42px;border-radius:14px;background:linear-gradient(135deg,#818cf8,#2dd4bf);color:#fff;box-shadow:0 8px 20px rgba(79,70,229,.25)}
.nav-link{border-radius:14px;padding:12px 13px;margin:3px 8px;color:#cbd5e1}
.nav-link:hover{background:rgba(255,255,255,.08)}
.nav-link.active{background:linear-gradient(135deg,#6366f1,#4f46e5);color:#fff;box-shadow:0 8px 18px rgba(79,70,229,.24)}
.main{background:var(--app-bg)}
.topbar{height:72px;background:rgba(255,255,255,.92);backdrop-filter:blur(14px);border:0;border-bottom:1px solid var(--app-line);padding:0 24px}
.topbar-title{font-size:18px;color:var(--app-navy)}
.content{padding:22px;max-width:1450px}
.card,.stat-card,.toolbar,.table-wrap,.kpi-card{background:var(--app-card);border:1px solid var(--app-line);border-radius:var(--app-radius);box-shadow:var(--app-shadow)}
.stat-card{border-top:0!important;position:relative;overflow:hidden}
.stat-card:after{content:"";position:absolute;inset:auto -15px -28px auto;width:80px;height:80px;border-radius:50%;background:#eef2ff}
.btn{border-radius:15px;min-height:48px}
.btn-primary{background:linear-gradient(135deg,var(--app-indigo-2),var(--app-indigo));box-shadow:0 7px 18px rgba(79,70,229,.18)}
.form-control{border-radius:15px;border-color:#dfe4ed;background:#fff;min-height:48px}
.page-header{border-radius:26px!important;background:linear-gradient(135deg,#172554,#312e81 55%,#0f766e)!important;box-shadow:0 16px 34px rgba(30,41,59,.13)!important;border:0!important}
.page-header h2{letter-spacing:-.03em}
.badge,.status-pill{border-radius:999px}
.bottom-nav{background:rgba(255,255,255,.96);backdrop-filter:blur(18px);border-top:1px solid var(--app-line);box-shadow:0 -8px 30px rgba(15,23,42,.08);padding-top:5px}
.bottom-nav-inner{max-width:680px;margin:auto}
.bottom-nav-item{min-height:62px;border-radius:16px;margin:0 3px;padding:7px 2px 8px;font-size:10px;color:#64748b}
.bottom-nav-item .ic{font-size:21px;line-height:22px}
.bottom-nav-item.active{color:var(--app-indigo);background:#eef2ff}
.bottom-nav-item.active:before{display:none}
.avatar{background:linear-gradient(135deg,#6366f1,#0d9488)!important;color:#fff!important;border:0!important}

/* Mobile home/app chrome */
@media(max-width:900px){
  body{background:linear-gradient(180deg,#eef2ff 0,#f5f7fb 220px)}
  .sidebar{box-shadow:18px 0 50px rgba(15,23,42,.25)}
  .topbar{margin:8px 8px 0;border-radius:20px;height:62px;padding:0 10px;box-shadow:0 8px 24px rgba(15,23,42,.07);border:1px solid rgba(255,255,255,.8)}
  .topbar-title{font-size:16px;font-weight:850}
  .menu-toggle{width:42px!important;height:42px!important;border-radius:13px!important;background:#eef2ff!important;color:#4338ca!important}
  .topbar-right .btn-language{display:none}
  .content{padding:12px 10px calc(92px + env(safe-area-inset-bottom));max-width:none}
  .page-header{padding:20px!important;border-radius:24px!important;margin-bottom:12px}
  .page-header h2{font-size:22px!important}
  .card{padding:15px}
  .stat-grid{gap:10px!important;margin-bottom:12px}
  .stat-card{padding:15px!important;min-height:104px}
  .stat-card .stat-value{font-size:27px!important}
  .section-heading{margin-top:18px}
  .toolbar{border-radius:20px;padding:12px!important}
  .bottom-nav{display:block}
}
@media(max-width:480px){
  .topbar-right #sync-pill-mount{display:none}
  .content{padding-left:8px;padding-right:8px}
  .page-header{padding:18px!important}
  .stat-grid{grid-template-columns:repeat(2,1fr)!important}
  .stat-card .stat-value{font-size:24px!important}
}

/* ================================================================
   Professional School App UI v2 — desktop + mobile
   ================================================================ */
:root {
  --app-primary: #4338ca;
  --app-primary-dark: #312e81;
  --app-primary-soft: #eef2ff;
  --app-teal: #0f766e;
  --app-teal-soft: #ccfbf1;
  --app-bg: #f5f7fb;
  --app-border: #e5e7eb;
}
body { background: var(--app-bg); }
.sidebar { background: linear-gradient(180deg, #111827 0%, #1f2937 100%); box-shadow: 6px 0 24px rgba(15,23,42,.08); }
.sidebar-brand { min-height: 78px; padding: 16px 18px; }
.sidebar-brand .mark { width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg,var(--app-primary),#6366f1); color:#fff; box-shadow:0 5px 16px rgba(67,56,202,.35); }
.nav-link { margin: 3px 8px; padding: 12px 13px; border-radius: 11px; }
.nav-link:hover { background: rgba(255,255,255,.08); transform: translateX(2px); }
.nav-link.active { background: linear-gradient(135deg,var(--app-primary),#6366f1); color:#fff; box-shadow:0 6px 16px rgba(67,56,202,.25); }
.nav-link .ic { font-size: 18px; }
.topbar { height: 68px; padding: 0 26px; box-shadow: 0 1px 0 rgba(15,23,42,.04); }
.topbar-title { font-size: 19px; font-weight: 800; }
.content { padding: 26px; max-width: 1500px; }
.card, .stat-card, .student-card, .list-card { border-color: var(--app-border); box-shadow: 0 5px 18px rgba(15,23,42,.055); }
.card { border-radius: 16px; }
.btn { border-radius: 10px; min-height: 42px; }
.btn-primary { background: linear-gradient(135deg,var(--app-primary),#6366f1); box-shadow: 0 4px 10px rgba(67,56,202,.18); }
.btn-success { background: #0f766e; }
.form-control { border-radius: 10px; border-color: #d7dce5; min-height: 44px; }
.form-control:focus { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,.12); }
/* Keep the complete desktop navigation and make it equally available in the mobile drawer. */
.sidebar-nav { padding: 14px 7px; }
@media (min-width: 901px) {
  .sidebar { width: 258px; }
  html[dir="ltr"] .main { margin-left: 258px; }
  html[dir="rtl"] .main { margin-right: 258px; }
  .content { padding: 28px 32px 40px; }
  .bottom-nav { display: none !important; }
  .menu-toggle { display: none; }
}
@media (max-width: 900px) {
  .topbar { height: 62px; padding: 0 12px; }
  .topbar-title { font-size: 16px; }
  .topbar-right { gap: 6px; }
  .topbar-right .btn-language, .topbar-right #sync-pill-mount { display:none; }
  .content { padding: 14px 12px 88px; }
  .card { padding: 14px; border-radius: 14px; }
  .sidebar { width: min(86vw, 330px); box-shadow: 12px 0 32px rgba(15,23,42,.25); }
  .sidebar-brand { min-height: 72px; }
  .nav-link { min-height: 48px; padding: 12px 14px; font-size: 14px; }
  .bottom-nav { box-shadow: 0 -5px 18px rgba(15,23,42,.08); }
}


/* Teacher school-list enrollment */
.add-teacher-panel{margin:0 0 18px;padding:18px;border:1px solid var(--color-slate-200);border-radius:18px;background:var(--color-slate-50,#f8fafc)}
.add-teacher-form{display:flex;flex-direction:column;gap:14px}.add-teacher-form .section-heading{margin-bottom:0}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.justify-end{justify-content:flex-end}
@media(max-width:700px){.form-grid{grid-template-columns:1fr}.enrollment-card .section-heading{align-items:flex-start;flex-direction:column}.enrollment-card .section-heading .flex{width:100%}.enrollment-card .section-heading .flex .btn{flex:1}.add-teacher-panel{padding:14px;border-radius:14px}}

/* v6: Teacher Enrollment always presents a clear Add Teacher action */
.enrollment-header{align-items:center}.enrollment-actions{display:flex;gap:8px;flex-wrap:wrap}.add-teacher-main{font-weight:800;min-width:150px}.teacher-quick-add{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0 0 16px;padding:15px 16px;border:1px solid var(--color-slate-200);border-radius:16px;background:linear-gradient(135deg,#f8fafc,#eef2ff)}.teacher-quick-add .btn{min-width:145px;font-weight:800}
@media(max-width:700px){.enrollment-actions{width:100%}.enrollment-actions .btn{flex:1}.teacher-quick-add{align-items:flex-start;flex-direction:column}.teacher-quick-add .btn{width:100%}}