/* Qalam for eSkooly. Built by design/qalam/tools/build_eskooly.py from the design system: do not edit. */
@layer override, legacy, tokens, base, components, bridge, shell, utilities;
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
@layer tokens {
:root, [data-theme="light"] {
  color-scheme: light;
  --q-canvas: #f3f4f7;
  --q-surface: #ffffff;
  --q-surface-raised: #ffffff;
  --q-fill: #ebedf1;
  --q-fill-strong: #dfe1e6;
  --q-hairline: #dde0e4;
  --q-border-control: #858991;
  --q-ink: #14171d;
  --q-ink-secondary: #595e66;
  --q-ink-tertiary: #95989f;
  --q-lapis: #0071e3;
  --q-lapis-strong: #0058b0;
  --q-lapis-soft: #e8f2fe;
  --q-on-lapis: #ffffff;
  --q-accent: var(--q-lapis);
  --q-accent-strong: var(--q-lapis-strong);
  --q-accent-soft: var(--q-lapis-soft);
  --q-on-accent: var(--q-on-lapis);
  --q-focus-ring: #2b8af7;
  --q-gold: #ecba4f;
  --q-gold-ink: #865812;
  --q-on-gold: #14171d;
  --q-success: #05773b;
  --q-success-soft: #dcf7e2;
  --q-success-fill: #0e8142;
  --q-done: var(--q-success);
  --q-done-soft: var(--q-success-soft);
  --q-on-success: #ffffff;
  --q-warning: #995600;
  --q-warning-soft: #ffeecc;
  --q-danger: #c02525;
  --q-danger-soft: #ffe9e5;
  --q-info: #076c92;
  --q-info-soft: #e0f4fe;
  --q-chart-1: #0071e3;
  --q-chart-2: #d4652a;
  --q-glass: rgba(249, 250, 252, 0.72);
  --q-glass-thick: rgba(255, 255, 255, 0.86);
  --q-scrim: rgba(10, 12, 16, 0.28);
  --q-shadow-control: 0 1px 3px rgba(20, 23, 29, 0.14), 0 1px 1px rgba(20, 23, 29, 0.06);
  --q-shadow-raised: 0 12px 32px rgba(20, 23, 29, 0.14), 0 2px 8px rgba(20, 23, 29, 0.08);
  --q-shadow-sheet: 0 -12px 48px rgba(20, 23, 29, 0.18);
  --q-shadow-float: 0 8px 28px rgba(20, 23, 29, 0.16), inset 0 0.5px 0 rgba(255, 255, 255, 0.7);
}
[data-theme="dark"] {
  color-scheme: dark;
  --q-canvas: #0a0b0e;
  --q-surface: #15171b;
  --q-surface-raised: #1e2125;
  --q-fill: #25282c;
  --q-fill-strong: #313439;
  --q-hairline: #2f3236;
  --q-border-control: #71757c;
  --q-ink: #f2f3f5;
  --q-ink-secondary: #aeb1b8;
  --q-ink-tertiary: #66696f;
  --q-lapis: #409cff;
  --q-lapis-strong: #8cc4ff;
  --q-lapis-soft: #0b2a4d;
  --q-on-lapis: #04111f;
  --q-focus-ring: #8cc4ff;
  --q-gold: #e2b34d;
  --q-gold-ink: #f0c876;
  --q-on-gold: #140f06;
  --q-success: #71d790;
  --q-success-soft: #0f341c;
  --q-success-fill: #46b86e;
  --q-on-success: #09120b;
  --q-warning: #f7c15f;
  --q-warning-soft: #412805;
  --q-danger: #ff8880;
  --q-danger-soft: #4f1a17;
  --q-info: #80c8ee;
  --q-info-soft: #0e3243;
  --q-chart-1: #409cff;
  --q-chart-2: #cf6f30;
  --q-glass: rgba(21, 23, 27, 0.70);
  --q-glass-thick: rgba(30, 33, 37, 0.86);
  --q-scrim: rgba(0, 0, 0, 0.55);
  --q-shadow-control: 0 1px 3px rgba(0, 0, 0, 0.5), 0 0 0 0.5px rgba(255, 255, 255, 0.08);
  --q-shadow-raised: 0 12px 32px rgba(0, 0, 0, 0.6), 0 0 0 0.5px rgba(255, 255, 255, 0.10);
  --q-shadow-sheet: 0 -12px 48px rgba(0, 0, 0, 0.7);
  --q-shadow-float: 0 8px 28px rgba(0, 0, 0, 0.6), inset 0 0.5px 0 rgba(255, 255, 255, 0.12);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  color-scheme: dark;
  --q-canvas: #0a0b0e;
  --q-surface: #15171b;
  --q-surface-raised: #1e2125;
  --q-fill: #25282c;
  --q-fill-strong: #313439;
  --q-hairline: #2f3236;
  --q-border-control: #71757c;
  --q-ink: #f2f3f5;
  --q-ink-secondary: #aeb1b8;
  --q-ink-tertiary: #66696f;
  --q-lapis: #409cff;
  --q-lapis-strong: #8cc4ff;
  --q-lapis-soft: #0b2a4d;
  --q-on-lapis: #04111f;
  --q-focus-ring: #8cc4ff;
  --q-gold: #e2b34d;
  --q-gold-ink: #f0c876;
  --q-on-gold: #140f06;
  --q-success: #71d790;
  --q-success-soft: #0f341c;
  --q-success-fill: #46b86e;
  --q-on-success: #09120b;
  --q-warning: #f7c15f;
  --q-warning-soft: #412805;
  --q-danger: #ff8880;
  --q-danger-soft: #4f1a17;
  --q-info: #80c8ee;
  --q-info-soft: #0e3243;
  --q-chart-1: #409cff;
  --q-chart-2: #cf6f30;
  --q-glass: rgba(21, 23, 27, 0.70);
  --q-glass-thick: rgba(30, 33, 37, 0.86);
  --q-scrim: rgba(0, 0, 0, 0.55);
  --q-shadow-control: 0 1px 3px rgba(0, 0, 0, 0.5), 0 0 0 0.5px rgba(255, 255, 255, 0.08);
  --q-shadow-raised: 0 12px 32px rgba(0, 0, 0, 0.6), 0 0 0 0.5px rgba(255, 255, 255, 0.10);
  --q-shadow-sheet: 0 -12px 48px rgba(0, 0, 0, 0.7);
  --q-shadow-float: 0 8px 28px rgba(0, 0, 0, 0.6), inset 0 0.5px 0 rgba(255, 255, 255, 0.12);
  }
}
[data-palette="navy"]:not([data-theme="dark"]) {
  --q-lapis: #1b3a6b;
  --q-lapis-strong: #132b52;
  --q-lapis-soft: #e7edf7;
  --q-on-lapis: #ffffff;
  --q-focus-ring: #2f5aa0;
  --q-chart-1: #1b3a6b;
  --q-done: #865812;
  --q-done-soft: #fbf1d9;
}
[data-palette="navy"][data-theme="dark"] {
  --q-lapis: #7fa7e6;
  --q-lapis-strong: #a9c4ef;
  --q-lapis-soft: #18263d;
  --q-on-lapis: #0c1626;
  --q-focus-ring: #a9c4ef;
  --q-chart-1: #7fa7e6;
  --q-done: #f0c876;
  --q-done-soft: #3a2c0c;
}
@media (prefers-color-scheme: dark) {
  [data-palette="navy"]:not([data-theme="light"]) {
  --q-lapis: #7fa7e6;
  --q-lapis-strong: #a9c4ef;
  --q-lapis-soft: #18263d;
  --q-on-lapis: #0c1626;
  --q-focus-ring: #a9c4ef;
  --q-chart-1: #7fa7e6;
  --q-done: #f0c876;
  --q-done-soft: #3a2c0c;
  }
}
:root {
  --q-space-1: 4px;
  --q-space-2: 8px;
  --q-space-3: 12px;
  --q-space-4: 16px;
  --q-space-5: 20px;
  --q-space-6: 24px;
  --q-space-8: 32px;
  --q-space-12: 48px;
  --q-radius-xs: 6px;
  --q-radius-sm: 10px;
  --q-radius-md: 14px;
  --q-radius-lg: 20px;
  --q-radius-xl: 28px;
  --q-radius-full: 9999px;
  --q-control-sm: 32px;
  --q-control-md: 40px;
  --q-control-touch: 44px;
  --q-control-lg: 52px;
  --q-duration-press: 100ms;
  --q-duration-quick: 180ms;
  --q-duration-spring: 514ms;
  --q-duration-spring-large: 734ms;
  --q-duration-spring-bounce: 472ms;
  --q-font-sans: system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --q-font-arabic: "IBM Plex Sans Arabic", "SF Arabic", "Segoe UI", Tahoma, sans-serif;
  --q-font-quran: "KFGQPC HAFS Uthmanic Script", "Amiri Quran", "Scheherazade New", serif;
  --q-font-urdu: "Jameel Noori Nastaleeq", "Noto Nastaliq Urdu", serif;
  --q-font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}


/* The hidden attribute always hides, whatever display a component sets (.q-field is a grid). */
[hidden] { display: none !important; }

:root {
  /* Springs as CSS linear(): Apple damping/response, sampled. Settle times are the duration-* tokens. */
  --q-ease-spring: linear(0, 0.0344, 0.1143, 0.2148, 0.3205, 0.4225, 0.5161, 0.599, 0.6707, 0.7317, 0.7828, 0.8251, 0.8598, 0.8882, 0.9111, 0.9295, 0.9443, 0.9561, 0.9655, 0.973, 0.9788, 0.9835, 0.9871, 0.9899, 0.9922, 0.9939, 0.9953, 0.9963, 0.9972, 0.9978, 0.9983, 0.9987, 1);
  --q-ease-spring-bounce: linear(0, 0.0304, 0.1054, 0.2054, 0.3159, 0.4272, 0.5326, 0.6281, 0.7118, 0.783, 0.8419, 0.8894, 0.9268, 0.9555, 0.9768, 0.992, 1.0025, 1.0092, 1.013, 1.0148, 1.0151, 1.0145, 1.0132, 1.0117, 1.01, 1.0083, 1.0067, 1.0053, 1.0041, 1.0031, 1.0022, 1.0015, 1);
  --q-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --q-blur-chrome: 14px;
  --q-blur-thick: 20px;
}
@media (prefers-reduced-motion: reduce) {
  :root { --q-duration-spring: 180ms; --q-duration-spring-large: 180ms; --q-duration-spring-bounce: 180ms; --q-ease-spring: ease; --q-ease-spring-bounce: ease; }
}


}
@layer base {

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--q-canvas); color: var(--q-ink); font-family: var(--q-font-sans); font-size: 0.9375rem; line-height: 22px; letter-spacing: -0.006em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
@media (max-width: 640px) { body { font-size: 1.0625rem; line-height: 24px; letter-spacing: -0.01em; } }
:lang(ar), [lang="ar"] { font-family: var(--q-font-arabic); letter-spacing: 0; line-height: 1.65; }
:lang(ur), [lang="ur"] { font-family: var(--q-font-urdu); letter-spacing: 0; line-height: 2; }
.q-quran { font-family: var(--q-font-quran); font-size: 1.75rem; line-height: 2; letter-spacing: 0; direction: rtl; text-align: right; }
.q-num { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--q-focus-ring); outline-offset: 2px; }
h1, h2, h3, h4, h5, h6 { font-family: var(--q-font-sans); }
.q-sheet h2, .q-card-title, .q-page-head h1, .q-empty h3, .q-dialog h2 { color: var(--q-ink); }
.q-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.q-icon { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.q-icon-sm { width: 16px; height: 16px; }
[dir="rtl"] .q-icon-dir { transform: scaleX(-1); }


}
@layer components {

.q-btn { --_h: var(--q-control-md); display: inline-flex; align-items: center; justify-content: center; gap: var(--q-space-2); height: var(--_h); padding-inline: 18px; border: 0; border-radius: var(--q-radius-full); font: inherit; font-size: 0.9375rem; font-weight: 590; letter-spacing: -0.008em; white-space: nowrap; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; text-decoration: none; transition: background-color var(--q-duration-quick) ease, color var(--q-duration-quick) ease, transform var(--q-duration-press) var(--q-ease-out), box-shadow var(--q-duration-quick) ease; }
.q-btn:active:not(:disabled) { transform: scale(0.97); }
.q-btn:disabled { cursor: default; opacity: 1; background: var(--q-fill); color: var(--q-ink-tertiary); }
.q-btn-filled { background: var(--q-accent); color: var(--q-on-accent); }
.q-btn-filled:hover:not(:disabled) { background: var(--q-accent-strong); }
.q-btn-tinted { background: var(--q-accent-soft); color: var(--q-accent-strong); }
.q-btn-gray { background: var(--q-fill); color: var(--q-ink); }
.q-btn-gray:hover:not(:disabled) { background: var(--q-fill-strong); }
.q-btn-plain { background: none; color: var(--q-accent); padding-inline: 10px; }
.q-btn-plain:hover:not(:disabled) { background: var(--q-accent-soft); }
.q-btn-danger { background: var(--q-danger-soft); color: var(--q-danger); }
.q-btn-sm { --_h: var(--q-control-sm); padding-inline: 14px; font-size: 0.875rem; }
.q-btn-lg { --_h: var(--q-control-lg); padding-inline: 24px; font-size: 1.0625rem; }
.q-btn-icon { width: var(--_h); padding: 0; }
.q-btn-block { width: 100%; }
@media (pointer: coarse) { .q-btn { --_h: max(var(--q-control-touch), var(--q-control-md)); } .q-btn-lg { --_h: var(--q-control-lg); } }

/* ---------- Segmented control ---------- */
.q-seg { position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 3px; border-radius: var(--q-radius-full); background: var(--q-fill); isolation: isolate; }
.q-seg input { position: absolute; opacity: 0; pointer-events: none; }
.q-seg label { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; min-height: calc(var(--q-control-md) - 6px); padding-inline: 14px; border-radius: var(--q-radius-full); font-size: 0.875rem; font-weight: 510; color: var(--q-ink-secondary); cursor: pointer; transition: color var(--q-duration-quick) ease; white-space: nowrap; }
.q-seg input:checked + label { color: var(--q-ink); font-weight: 600; }
.q-seg input:focus-visible + label { outline: 2px solid var(--q-focus-ring); outline-offset: 1px; }
.q-seg-thumb { position: absolute; z-index: 0; inset-block: 3px; inset-inline-start: 0; border-radius: var(--q-radius-full); background: var(--q-surface); box-shadow: var(--q-shadow-control); transition: transform var(--q-duration-spring) var(--q-ease-spring), width var(--q-duration-spring) var(--q-ease-spring); }
@media (pointer: coarse) { .q-seg label { min-height: calc(var(--q-control-touch) - 6px); } }

/* ---------- Switch ---------- */
.q-switch { position: relative; display: inline-flex; align-items: center; gap: var(--q-space-3); cursor: pointer; }
.q-switch input { position: absolute; opacity: 0; }
.q-switch-track { position: relative; width: 51px; height: 31px; border-radius: var(--q-radius-full); background: var(--q-fill-strong); box-shadow: inset 0 0 0 1px var(--q-border-control); transition: background-color var(--q-duration-quick) ease, box-shadow var(--q-duration-quick) ease; flex: none; }
.q-switch-track::after { content: ""; position: absolute; top: 2px; inset-inline-start: 2px; width: 27px; height: 27px; border-radius: 50%; background: #ffffff; box-shadow: var(--q-shadow-control); transition: transform var(--q-duration-spring) var(--q-ease-spring); }
.q-switch input:checked + .q-switch-track { background: var(--q-accent); box-shadow: none; }
.q-switch input:checked + .q-switch-track::after { transform: translateX(20px); }
[dir="rtl"] .q-switch input:checked + .q-switch-track::after { transform: translateX(-20px); }
.q-switch input:focus-visible + .q-switch-track { outline: 2px solid var(--q-focus-ring); outline-offset: 2px; }

/* ---------- Text field, select, search ---------- */
.q-field { display: grid; gap: 6px; min-width: 0; }
.q-field-label { font-size: 0.8125rem; line-height: 18px; font-weight: 600; color: var(--q-ink); }
.q-field-help { font-size: 0.8125rem; line-height: 18px; color: var(--q-ink-secondary); }
.q-field-error { font-size: 0.8125rem; line-height: 18px; color: var(--q-danger); display: flex; gap: 6px; align-items: flex-start; }
.q-input, .q-select { width: 100%; height: var(--q-control-md); padding-inline: 14px; border: 1px solid var(--q-border-control); border-radius: var(--q-radius-md); background: var(--q-surface); color: var(--q-ink); font: inherit; font-size: 1rem; letter-spacing: -0.01em; transition: border-color var(--q-duration-quick) ease, box-shadow var(--q-duration-quick) ease, background-color var(--q-duration-quick) ease; }
.q-input::placeholder { color: var(--q-ink-secondary); }
.q-input:hover, .q-select:hover { background: var(--q-fill); }
.q-input:focus, .q-select:focus { outline: none; border-color: var(--q-accent); box-shadow: 0 0 0 3px var(--q-accent-soft), 0 0 0 1px var(--q-accent) inset; background: var(--q-surface); }
.q-input[aria-invalid="true"] { border-color: var(--q-danger); }
.q-input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px var(--q-danger-soft), 0 0 0 1px var(--q-danger) inset; }
textarea.q-input { height: auto; min-height: 96px; padding-block: 10px; resize: vertical; line-height: 22px; }
.q-select { appearance: none; padding-inline-end: 38px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23858991' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }
[dir="rtl"] .q-select { background-position: left 14px center; }
@media (pointer: coarse) { .q-input, .q-select { height: var(--q-control-touch); } }
.q-search { position: relative; display: flex; align-items: center; }
.q-search .q-icon { position: absolute; inset-inline-start: 12px; color: var(--q-ink-secondary); pointer-events: none; }
.q-search .q-input { padding-inline-start: 40px; border-color: transparent; background: var(--q-fill); border-radius: var(--q-radius-full); }
.q-search .q-input:hover { background: var(--q-fill-strong); }
.q-search .q-input:focus { background: var(--q-surface); }
.q-kbd { display: inline-flex; align-items: center; height: 20px; padding-inline: 6px; border-radius: var(--q-radius-xs); background: var(--q-surface); box-shadow: inset 0 0 0 1px var(--q-hairline); color: var(--q-ink-secondary); font: 500 12px/1 var(--q-font-sans); }
.q-search .q-kbd { position: absolute; inset-inline-end: 10px; }

/* ---------- Checkbox and radio ---------- */
.q-choice { display: flex; align-items: flex-start; gap: var(--q-space-3); cursor: pointer; min-height: var(--q-control-sm); padding-block: 5px; }
.q-choice input { appearance: none; flex: none; width: 22px; height: 22px; margin: 0; border: 1.5px solid var(--q-border-control); border-radius: var(--q-radius-xs); background: var(--q-surface); display: grid; place-content: center; transition: background-color var(--q-duration-quick) ease, border-color var(--q-duration-quick) ease; }
.q-choice input[type="radio"] { border-radius: 50%; }
.q-choice input:checked { background: var(--q-accent); border-color: var(--q-accent); }
.q-choice input[type="checkbox"]:checked::after { content: ""; width: 12px; height: 9px; background: var(--q-on-accent); clip-path: polygon(0 52%, 14% 38%, 38% 62%, 86% 0, 100% 14%, 38% 92%); }
.q-choice input[type="radio"]:checked::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--q-on-accent); }
.q-choice-text { display: grid; gap: 2px; }
.q-choice-text small { color: var(--q-ink-secondary); font-size: 0.8125rem; line-height: 18px; }

/* ---------- Pill (status) ---------- */
.q-pill { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding-inline: 10px; border-radius: var(--q-radius-full); font-size: 0.75rem; line-height: 16px; font-weight: 600; letter-spacing: 0.005em; white-space: nowrap; background: var(--q-fill); color: var(--q-ink-secondary); }
.q-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.q-pill-plain::before { display: none; }
.q-pill-success { background: var(--q-success-soft); color: var(--q-success); }
.q-pill-warning { background: var(--q-warning-soft); color: var(--q-warning); }
.q-pill-danger { background: var(--q-danger-soft); color: var(--q-danger); }
.q-pill-info { background: var(--q-info-soft); color: var(--q-info); }
.q-pill-accent { background: var(--q-accent-soft); color: var(--q-accent-strong); }
.q-pill-gold { background: var(--q-gold); color: var(--q-on-gold); }
.q-pill-gold::before { background: var(--q-on-gold); }

/* ---------- Grouped list (inset grouped, like Settings) ---------- */
.q-list-header { padding: 0 var(--q-space-4) 6px; font-size: 0.8125rem; line-height: 18px; font-weight: 600; color: var(--q-ink-secondary); }
.q-list { margin: 0; padding: 0; list-style: none; background: var(--q-surface); border-radius: var(--q-radius-lg); overflow: hidden; }
.q-row { position: relative; display: flex; align-items: center; gap: var(--q-space-3); min-height: 52px; padding: 10px var(--q-space-4); color: inherit; text-decoration: none; }
.q-row + .q-row::before { content: ""; position: absolute; top: 0; inset-inline: var(--_inset, var(--q-space-4)) 0; border-top: 1px solid var(--q-hairline); }
.q-row.has-lead { --_inset: 64px; }
a.q-row, button.q-row { width: 100%; border: 0; background: none; font: inherit; text-align: start; cursor: pointer; transition: background-color var(--q-duration-quick) ease; }
a.q-row:hover, button.q-row:hover { background: var(--q-fill); }
a.q-row:active, button.q-row:active { background: var(--q-fill-strong); }
.q-row-main { flex: 1; min-width: 0; display: grid; gap: 1px; }
.q-row-title { font-size: 1rem; line-height: 21px; font-weight: 510; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-row-sub { font-size: 0.875rem; line-height: 19px; color: var(--q-ink-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-row-trail { display: flex; align-items: center; gap: var(--q-space-2); color: var(--q-ink-secondary); font-size: 0.9375rem; flex: none; }
.q-chevron { width: 8px; height: 13px; color: var(--q-ink-tertiary); flex: none; }
[dir="rtl"] .q-chevron { transform: scaleX(-1); }
.q-list-footer { padding: 6px var(--q-space-4) 0; font-size: 0.8125rem; line-height: 18px; color: var(--q-ink-secondary); }

/* ---------- Avatar ---------- */
.q-avatar { --_s: 40px; width: var(--_s); height: var(--_s); flex: none; border-radius: 50%; display: grid; place-items: center; overflow: hidden; background: var(--q-accent-soft); color: var(--q-accent-strong); font-size: calc(var(--_s) * 0.38); font-weight: 650; letter-spacing: 0; }
.q-avatar img { width: 100%; height: 100%; object-fit: cover; }
.q-avatar-sm { --_s: 28px; }
.q-avatar-lg { --_s: 64px; }

/* ---------- Card, stat tile ---------- */
.q-card { background: var(--q-surface); border-radius: var(--q-radius-lg); padding: var(--q-space-5); min-width: 0; }
.q-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--q-space-3); margin-bottom: var(--q-space-3); }
.q-card-title { margin: 0; font-size: 1.0625rem; line-height: 22px; font-weight: 600; letter-spacing: -0.01em; }
.q-stat { display: grid; gap: 4px; align-content: start; }
.q-stat-label { font-size: 0.8125rem; line-height: 18px; font-weight: 600; color: var(--q-ink-secondary); }
.q-stat-value { font-size: 1.75rem; line-height: 32px; font-weight: 650; letter-spacing: -0.012em; font-variant-numeric: tabular-nums; }
.q-stat-value small { font-size: 1.0625rem; font-weight: 500; color: var(--q-ink-secondary); letter-spacing: -0.01em; }
.q-stat-note { font-size: 0.8125rem; line-height: 18px; color: var(--q-ink-secondary); }
.q-meter { height: 6px; border-radius: var(--q-radius-full); background: var(--q-fill-strong); overflow: hidden; }
.q-meter > span { display: block; height: 100%; border-radius: inherit; background: var(--q-accent); }

/* ---------- Banner and toast ---------- */
.q-banner { display: flex; gap: var(--q-space-3); align-items: flex-start; padding: 14px var(--q-space-4); border-radius: var(--q-radius-lg); background: var(--q-info-soft); color: var(--q-ink); }
.q-banner .q-icon { color: var(--q-info); margin-top: 1px; }
.q-banner-title { font-weight: 600; }
.q-banner-warning { background: var(--q-warning-soft); } .q-banner-warning .q-icon { color: var(--q-warning); }
.q-banner-danger { background: var(--q-danger-soft); } .q-banner-danger .q-icon { color: var(--q-danger); }
.q-banner-success { background: var(--q-success-soft); } .q-banner-success .q-icon { color: var(--q-success); }
.q-banner-actions { display: flex; gap: var(--q-space-2); margin-top: var(--q-space-2); }
.q-toast { display: inline-flex; align-items: center; gap: var(--q-space-3); min-height: 48px; padding: 8px 8px 8px 16px; border-radius: var(--q-radius-full); background: var(--q-glass-thick); -webkit-backdrop-filter: blur(var(--q-blur-thick)) saturate(180%); backdrop-filter: blur(var(--q-blur-thick)) saturate(180%); box-shadow: var(--q-shadow-raised); color: var(--q-ink); font-weight: 510; }
.q-toast .q-icon { color: var(--q-success); }
.q-toast-error .q-icon { color: var(--q-danger); }
.q-toast.is-entering { animation: q-materialize var(--q-duration-spring) var(--q-ease-spring) both; }
@keyframes q-materialize { from { opacity: 0; transform: translateY(-12px) scale(0.96); } to { opacity: 1; transform: none; } }

/* ---------- Table (desktop) that becomes rows (phone) ---------- */
.q-table-wrap { background: var(--q-surface); border-radius: var(--q-radius-lg); overflow: auto; }
.q-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; line-height: 20px; }
.q-table th { position: sticky; top: 0; z-index: 1; padding: 10px var(--q-space-4); background: var(--q-surface); text-align: start; font-size: 0.8125rem; font-weight: 600; color: var(--q-ink-secondary); white-space: nowrap; box-shadow: inset 0 -1px 0 var(--q-hairline); }
.q-table td { padding: 12px var(--q-space-4); border-top: 1px solid var(--q-hairline); vertical-align: middle; }
.q-table tbody tr:first-child td { border-top: 0; }
.q-table tbody tr { transition: background-color var(--q-duration-quick) ease; }
.q-table tbody tr:hover { background: var(--q-fill); }
.q-table tr[aria-selected="true"] { background: var(--q-accent-soft); }
.q-table .num { text-align: end; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .q-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .q-table, .q-table tbody, .q-table tr, .q-table td { display: block; }
  .q-table tr { position: relative; padding: 12px var(--q-space-4); border-top: 1px solid var(--q-hairline); }
  .q-table tbody tr:first-child { border-top: 0; }
  .q-table td { padding: 0; border: 0; }
  .q-table td[data-role="title"] { font-size: 1rem; font-weight: 510; }
  /* The trail sits over the title's line, so a long title wraps before it instead of running under it. */
  .q-table tr:has(> td[data-role="trail"]) > td[data-role="title"] { padding-inline-end: 124px; }
  .q-table td[data-role="meta"] { display: inline; color: var(--q-ink-secondary); }
  .q-table td[data-role="meta"] + td[data-role="meta"]::before { content: " · "; }
  .q-table td[data-role="trail"] { position: absolute; inset-inline-end: var(--q-space-4); top: 14px; }
  .q-table td[data-role="hide-phone"] { display: none; }
}

/* ---------- Sheet (bottom on phones, side on wide screens) and dialog ---------- */
.q-scrim { position: fixed; inset: 0; background: var(--q-scrim); opacity: 0; transition: opacity var(--q-duration-spring) var(--q-ease-spring); }
.q-sheet { position: fixed; z-index: 50; background: var(--q-surface); color: var(--q-ink); box-shadow: var(--q-shadow-sheet); display: flex; flex-direction: column; max-height: 100dvh; transition: transform var(--q-duration-spring) var(--q-ease-spring); }
.q-sheet-grabber { width: 36px; height: 5px; border-radius: var(--q-radius-full); background: var(--q-fill-strong); margin: 6px auto 0; flex: none; touch-action: none; }
.q-sheet-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--q-space-2); padding: 10px var(--q-space-4) 8px; }
.q-sheet-head h2 { grid-column: 2; margin: 0; font-size: 1.0625rem; line-height: 22px; font-weight: 600; text-align: center; }
.q-sheet-head .end { justify-self: end; }
.q-sheet-body { overflow: auto; padding: var(--q-space-2) var(--q-space-4) var(--q-space-4); display: grid; gap: var(--q-space-4); overscroll-behavior: contain; }
.q-sheet-foot { padding: var(--q-space-3) var(--q-space-4) max(var(--q-space-4), env(safe-area-inset-bottom)); border-top: 1px solid var(--q-hairline); }
@media (max-width: 767px) { .q-sheet { inset: auto 0 0 0; max-height: calc(100dvh - 48px); border-radius: var(--q-radius-xl) var(--q-radius-xl) 0 0; } }
@media (min-width: 768px) { .q-sheet { top: 12px; bottom: 12px; inset-inline-start: auto; inset-inline-end: 12px; width: min(480px, calc(100vw - 24px)); border-radius: var(--q-radius-xl); } .q-sheet-grabber { display: none; } }
.q-dialog { width: min(360px, calc(100vw - 48px)); border: 0; padding: var(--q-space-6) var(--q-space-5) var(--q-space-5); border-radius: var(--q-radius-xl); background: var(--q-glass-thick); -webkit-backdrop-filter: blur(var(--q-blur-thick)) saturate(180%); backdrop-filter: blur(var(--q-blur-thick)) saturate(180%); box-shadow: var(--q-shadow-raised); color: var(--q-ink); text-align: center; }
.q-dialog h2 { margin: 0 0 6px; font-size: 1.0625rem; line-height: 22px; font-weight: 600; }
.q-dialog p { margin: 0 0 var(--q-space-5); color: var(--q-ink-secondary); font-size: 0.875rem; line-height: 20px; }
.q-dialog-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--q-space-2); }

/* ---------- Menu / popover ---------- */
.q-menu { min-width: 220px; padding: 6px; border-radius: 16px; background: var(--q-glass-thick); -webkit-backdrop-filter: blur(var(--q-blur-thick)) saturate(180%); backdrop-filter: blur(var(--q-blur-thick)) saturate(180%); box-shadow: var(--q-shadow-raised); transform-origin: var(--_origin, top left); }
.q-menu-item { display: flex; align-items: center; gap: var(--q-space-3); width: 100%; min-height: 36px; padding: 0 10px; border: 0; border-radius: var(--q-radius-sm); background: none; color: var(--q-ink); font: inherit; font-size: 0.9375rem; text-align: start; cursor: pointer; }
.q-menu-item:hover, .q-menu-item:focus-visible { background: var(--q-accent); color: var(--q-on-accent); outline: none; }
.q-menu-item.danger { color: var(--q-danger); }
.q-menu-item.danger:hover { background: var(--q-danger); color: var(--q-surface); }
.q-menu-sep { height: 1px; margin: 5px 10px; background: var(--q-hairline); }
.q-menu-item .q-kbd { margin-inline-start: auto; background: none; box-shadow: none; color: inherit; opacity: 0.7; }

/* ---------- Reduced transparency and more contrast ---------- */
@media (prefers-reduced-transparency: reduce) {
  .q-toast, .q-dialog, .q-menu { background: var(--q-surface-raised); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  .q-list, .q-card, .q-table-wrap, .q-menu, .q-dialog { box-shadow: 0 0 0 1px var(--q-border-control); }
  .q-pill { box-shadow: inset 0 0 0 1px currentColor; }
}

/* ======================= Madrasa components ======================= */

/* ---------- Juz grid: 30 paras, state shown by fill AND mark ---------- */
.q-juz { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; }
@media (max-width: 480px) { .q-juz { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.q-juz-cell { position: relative; aspect-ratio: 1; min-height: 40px; display: grid; place-items: center; align-content: center; gap: 1px; border: 0; border-radius: var(--q-radius-md); background: var(--q-fill); color: var(--q-ink-secondary); font: 600 13px/1 var(--q-font-sans); font-variant-numeric: tabular-nums; cursor: pointer; transition: transform var(--q-duration-press) var(--q-ease-out), background-color var(--q-duration-quick) ease; }
.q-juz-cell:active { transform: scale(0.94); }
.q-juz-cell .mark { font-size: 0.625rem; line-height: 1; font-weight: 700; }
.q-juz-cell[data-state="learning"] { background: var(--q-accent-soft); color: var(--q-accent-strong); box-shadow: inset 0 0 0 1.5px var(--q-accent); }
.q-juz-cell[data-state="memorised"] { background: var(--q-success-fill); color: var(--q-on-success); }
.q-juz-cell[data-state="tested"] { background: var(--q-gold); color: var(--q-on-gold); }
.q-juz-cell[data-state="due"] { background: var(--q-surface); color: var(--q-warning); box-shadow: inset 0 0 0 1.5px var(--q-warning); }
.q-juz-legend { display: flex; flex-wrap: wrap; gap: var(--q-space-4); font-size: 0.8125rem; color: var(--q-ink-secondary); }
.q-juz-legend span { display: inline-flex; align-items: center; gap: 6px; }
.q-juz-legend i { width: 12px; height: 12px; border-radius: 4px; background: var(--q-fill); }
.q-juz-legend i.learning { background: var(--q-accent-soft); box-shadow: inset 0 0 0 1.5px var(--q-accent); }
.q-juz-legend i.memorised { background: var(--q-success-fill); }
.q-juz-legend i.tested { background: var(--q-gold); }
.q-juz-legend i.due { box-shadow: inset 0 0 0 1.5px var(--q-warning); background: var(--q-surface); }

/* ---------- Register row: one student, four statuses, thumb-sized ---------- */
.q-register { display: flex; align-items: center; gap: var(--q-space-3); min-height: 60px; padding: 8px var(--q-space-4); }
.q-register + .q-register { border-top: 1px solid var(--q-hairline); }
.q-register-name { flex: 1; min-width: 0; display: grid; }
.q-register-name b { font-weight: 510; font-size: 1rem; line-height: 21px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-register-name small { color: var(--q-ink-secondary); font-size: 0.8125rem; line-height: 18px; }
.q-register-marks { position: relative; display: flex; gap: 4px; padding: 3px; border-radius: var(--q-radius-full); background: var(--q-fill); }
.q-register-marks input { position: absolute; opacity: 0; pointer-events: none; }
.q-register-marks label { display: grid; place-items: center; width: 40px; height: 36px; border-radius: var(--q-radius-full); color: var(--q-ink-secondary); font-weight: 650; font-size: 0.875rem; cursor: pointer; transition: background-color var(--q-duration-quick) ease, color var(--q-duration-quick) ease, transform var(--q-duration-press) var(--q-ease-out); }
.q-register-marks label:active { transform: scale(0.92); }
.q-register-marks input:focus-visible + label { outline: 2px solid var(--q-focus-ring); outline-offset: 1px; }
.q-register-marks input[value="P"]:checked + label { background: var(--q-success-fill); color: var(--q-on-success); }
.q-register-marks input[value="L"]:checked + label { background: var(--q-warning-soft); color: var(--q-warning); box-shadow: inset 0 0 0 1.5px var(--q-warning); }
.q-register-marks input[value="A"]:checked + label { background: var(--q-danger); color: var(--q-surface); }
.q-register-marks input[value="E"]:checked + label { background: var(--q-info-soft); color: var(--q-info); box-shadow: inset 0 0 0 1.5px var(--q-info); }
@media (pointer: coarse) { .q-register-marks label { width: 44px; height: 40px; } }

/* ---------- Dual date: Gregorian first, Hijri beside it ---------- */
.q-date { display: inline-grid; line-height: 1.25; }
.q-date-greg { font-weight: 510; }
.q-date-hijri { font-size: 0.86em; color: var(--q-ink-secondary); }
.q-date-inline { display: inline-flex; gap: 0.5em; align-items: baseline; flex-wrap: wrap; }
.q-date-inline .q-date-hijri::before { content: "\00B7"; margin-inline-end: 0.5em; color: var(--q-ink-tertiary); }

/* ---------- Ayah range: surah, ayahs, Arabic name ---------- */
.q-ayah { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: var(--q-radius-full); background: var(--q-fill); }
.q-ayah-no { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--q-surface); color: var(--q-accent-strong); font: 650 12px/1 var(--q-font-sans); font-variant-numeric: tabular-nums; box-shadow: inset 0 0 0 1px var(--q-hairline); }
.q-ayah-text { display: grid; line-height: 1.2; }
.q-ayah-text b { font-weight: 600; font-size: 0.9375rem; }
.q-ayah-text small { color: var(--q-ink-secondary); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.q-ayah-ar { font-family: var(--q-font-arabic); font-size: 1.125rem; line-height: 1; color: var(--q-ink); direction: rtl; margin-inline-start: 4px; }

/* ---------- Tabs: a record's sections, as a row of capsules that scrolls sideways on a phone ---------- */
.q-tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding-block: 2px; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent); }
.q-tabs::-webkit-scrollbar { display: none; }
.q-tabs a { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding-inline: 14px; border-radius: var(--q-radius-full); color: var(--q-ink-secondary); font-size: 0.875rem; font-weight: 510; text-decoration: none; white-space: nowrap; transition: background-color var(--q-duration-quick) ease, color var(--q-duration-quick) ease; }
.q-tabs a:hover { background: var(--q-fill); color: var(--q-ink); }
.q-tabs a[aria-current="page"] { background: var(--q-accent-soft); color: var(--q-accent-strong); font-weight: 600; }
.q-tabs a[aria-current="true"] { background: var(--q-fill); color: var(--q-ink); font-weight: 600; }
.q-tabs a small { font-size: 0.75rem; font-weight: 600; font-variant-numeric: tabular-nums; color: inherit; opacity: 0.7; }
:dir(rtl).q-tabs, [dir="rtl"] .q-tabs { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 24px), transparent); }

/* ---------- File field: the system picker, with Qalam's button ---------- */
.q-file { display: block; width: 100%; min-height: var(--q-control-md); padding: 6px; border: 1px dashed var(--q-border-control); border-radius: var(--q-radius-md); background: var(--q-surface); color: var(--q-ink-secondary); font: inherit; font-size: 0.875rem; }
.q-file::file-selector-button { margin-inline-end: 12px; height: 32px; padding-inline: 14px; border: 0; border-radius: var(--q-radius-full); background: var(--q-fill); color: var(--q-accent); font: inherit; font-size: 0.875rem; font-weight: 600; cursor: pointer; }
.q-file:hover::file-selector-button { background: var(--q-fill-strong); }
.q-file:focus-visible { outline: 2px solid var(--q-focus-ring); outline-offset: 2px; }
.q-file-current { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 0.8125rem; color: var(--q-ink-secondary); }
.q-file-current a { color: var(--q-accent); font-weight: 510; text-decoration: none; }

/* ---------- Dialog as a <dialog> ---------- */
dialog.q-dialog { margin: auto; }
dialog.q-dialog::backdrop { background: var(--q-scrim); }

/* ---------- Bulk action bar (appears when rows are selected) ---------- */
.q-bulkbar { display: flex; align-items: center; gap: var(--q-space-2); padding: 8px 8px 8px 18px; border-radius: var(--q-radius-full); background: var(--q-glass-thick); -webkit-backdrop-filter: blur(var(--q-blur-thick)) saturate(180%); backdrop-filter: blur(var(--q-blur-thick)) saturate(180%); box-shadow: var(--q-shadow-float); }
.q-bulkbar-count { font-weight: 600; margin-inline-end: auto; font-variant-numeric: tabular-nums; }

/* ---------- Child switcher (parents) ---------- */
.q-switcher { display: inline-flex; align-items: center; gap: var(--q-space-2); height: 40px; padding: 4px 12px 4px 4px; border: 0; border-radius: var(--q-radius-full); background: var(--q-fill); color: var(--q-ink); font: inherit; font-weight: 600; cursor: pointer; }
.q-switcher .q-icon { width: 16px; height: 16px; color: var(--q-ink-secondary); }

/* ---------- Pending sync marker ---------- */
.q-pending { display: inline-flex; align-items: center; gap: 5px; font-size: 0.75rem; font-weight: 600; color: var(--q-ink-secondary); }
.q-pending .q-icon { width: 14px; height: 14px; }

/* ---------- Solid surfaces: the in-app switch (iOS does not pass Reduce Transparency to the web) and no-blur browsers ---------- */
:root[data-surfaces="solid"] .q-toast, :root[data-surfaces="solid"] .q-dialog, :root[data-surfaces="solid"] .q-menu,
:root[data-surfaces="solid"] .q-palette, :root[data-surfaces="solid"] .q-topbar.is-scrolled, :root[data-surfaces="solid"] .q-tabbar {
  background: var(--q-surface-raised); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: var(--q-shadow-raised), 0 0 0 1px var(--q-hairline);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .q-toast, .q-dialog, .q-menu, .q-palette, .q-topbar.is-scrolled, .q-tabbar { background: var(--q-surface-raised); }
}

/* ---------- Unsaved changes bar ---------- */
.q-savebar { display: flex; align-items: center; gap: var(--q-space-2); padding: 8px 8px 8px 18px; border-radius: var(--q-radius-full); background: var(--q-ink); color: var(--q-canvas); box-shadow: var(--q-shadow-float); }
.q-savebar-text { margin-inline-end: auto; font-weight: 600; }
.q-savebar .q-btn-gray { background: transparent; color: var(--q-canvas); box-shadow: inset 0 0 0 1px currentColor; }

/* ---------- Empty state ---------- */
.q-empty { display: grid; justify-items: center; gap: var(--q-space-2); padding: var(--q-space-12) var(--q-space-6); text-align: center; color: var(--q-ink-secondary); }
.q-empty h3 { margin: var(--q-space-2) 0 0; color: var(--q-ink); font-size: 1.25rem; line-height: 25px; font-weight: 600; letter-spacing: -0.01em; }
.q-empty p { margin: 0 0 var(--q-space-3); max-width: 36ch; }


}
@layer shell {


.q-app { display: grid; grid-template-columns: 260px minmax(0, 1fr); min-height: 100dvh; background: var(--q-canvas); }
.q-sidebar { position: sticky; top: 0; height: 100dvh; padding-block: 8px; padding-inline: 8px 0; view-transition-name: q-sidebar; }
.q-sidebar-panel { height: 100%; display: flex; flex-direction: column; border-radius: var(--q-radius-lg); background: var(--q-surface); box-shadow: 0 0 0 1px var(--q-hairline); overflow: hidden; }
/* The head lines up with the top bar (56px: 40px buttons and 8px padding): the panel starts 8px down, so 48px. */
.q-sidebar-head { display: flex; align-items: center; gap: 6px; min-height: 48px; box-sizing: border-box; padding: 6px 8px 6px 14px; }
.q-sidebar-home { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; color: inherit; text-decoration: none; border-radius: var(--q-radius-sm); }
.q-sidebar-mark { width: 32px; height: 32px; border-radius: 9px; flex: none; }
.q-sidebar-brand { display: grid; line-height: 1.15; min-width: 0; }
.q-sidebar-brand b { font-size: 0.9375rem; font-weight: 650; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-sidebar-brand small { font-size: 0.75rem; color: var(--q-ink-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-sidebar-rail { flex: none; color: var(--q-ink-secondary); }
.q-sidebar .q-search { margin: 4px 10px 6px; }
.q-sidebar .q-search .q-input { height: 34px; font-size: 0.875rem; }

/* Navigation: areas (a link, or a disclosure that opens its modules), under optional group headings.
   Two levels at most; a module's own pages are tabs on the page (.q-localnav). */
.q-nav { flex: 1; display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden; padding: 2px 10px 10px; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-gutter: stable; }
.q-nav-section + .q-nav-section { margin-top: 12px; }
.q-nav-heading { margin: 0; padding: 4px 10px; font-size: 0.71875rem; line-height: 16px; font-weight: 600; letter-spacing: 0.01em; color: var(--q-ink-tertiary); }
.q-nav-label { padding: 0 10px 4px; font-size: 0.75rem; line-height: 16px; font-weight: 600; color: var(--q-ink-secondary); }
.q-nav-list { display: grid; gap: 1px; margin: 0; padding: 0; list-style: none; }
.q-nav-item { display: flex; align-items: center; gap: 10px; width: 100%; height: 34px; padding: 0 10px; border: 0; border-radius: var(--q-radius-sm); background: transparent; color: var(--q-ink); text-decoration: none; text-align: start; font: inherit; font-size: 0.875rem; font-weight: 510; letter-spacing: -0.006em; cursor: pointer; transition: background-color var(--q-duration-quick) ease, color var(--q-duration-quick) ease; }
.q-nav-item .q-icon { width: 18px; height: 18px; color: var(--q-ink-secondary); }
.q-nav-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-nav-item:hover { background: var(--q-fill); }
.q-nav-item:focus-visible, .q-nav-sub a:focus-visible { outline: 2px solid var(--q-accent); outline-offset: -2px; }
.q-nav-item.is-active .q-icon { color: var(--q-accent); }
.q-nav-item[aria-current="true"] { font-weight: 600; }
.q-nav-item[aria-current="page"] { background: var(--q-accent-soft); color: var(--q-accent-strong); font-weight: 600; }
.q-nav-item[aria-current="page"] .q-icon { color: var(--q-accent); }
.q-nav-chev.q-icon { width: 14px; height: 14px; margin-inline-start: auto; color: var(--q-ink-tertiary); transition: transform var(--q-duration-quick) ease; }
.q-nav-toggle[aria-expanded="true"] .q-nav-chev { transform: rotate(90deg); }
[dir="rtl"] .q-nav-toggle[aria-expanded="false"] .q-nav-chev { transform: scaleX(-1); }
.q-nav-quiet { color: var(--q-ink-secondary); font-weight: 450; }
.q-nav-quiet .q-icon { color: var(--q-ink-tertiary); }
.q-nav-end { margin-top: auto; padding-top: 12px; }
.q-nav-count { margin-inline-start: auto; min-width: 22px; height: 20px; padding-inline: 6px; border-radius: var(--q-radius-full); background: var(--q-fill-strong); color: var(--q-ink-secondary); font: 600 12px/20px var(--q-font-sans); text-align: center; font-variant-numeric: tabular-nums; }
.q-nav-count.attention { background: var(--q-danger); color: var(--q-surface); }
.q-sidebar-foot { padding: 6px 6px 8px; border-top: 1px solid var(--q-hairline); }
/* The account: one button, at the sidebar's foot and at the top of the phone menu sheet */
.q-account { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 6px 8px; border: 0; border-radius: var(--q-radius-sm); background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.q-account:hover { background: var(--q-fill); }
.q-account:focus-visible { outline: 2px solid var(--q-focus-ring); outline-offset: 2px; }
.q-account .who { display: grid; line-height: 1.2; min-width: 0; flex: 1; }
.q-account .who b { font-size: 0.875rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-account .who small { font-size: 0.75rem; color: var(--q-ink-secondary); }
.q-account-more { flex: none; color: var(--q-ink-secondary); }
.q-navsheet-account { margin: 0 -4px 4px; padding-bottom: 6px; border-bottom: 1px solid var(--q-hairline); }

.q-main { min-width: 0; display: flex; flex-direction: column; }
.q-topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: var(--q-space-3); min-height: 52px; padding: 8px var(--q-space-6); view-transition-name: q-topbar; transition: background-color var(--q-duration-quick) ease, box-shadow var(--q-duration-quick) ease; }
.q-topbar.is-scrolled { background: var(--q-glass); -webkit-backdrop-filter: blur(var(--q-blur-chrome)) saturate(180%); backdrop-filter: blur(var(--q-blur-chrome)) saturate(180%); box-shadow: 0 1px 0 var(--q-hairline); }
.q-topbar-title { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; opacity: 0; transform: translateY(4px); transition: opacity var(--q-duration-quick) ease, transform var(--q-duration-spring) var(--q-ease-spring); }
.q-topbar.is-scrolled .q-topbar-title { opacity: 1; transform: none; }
/* Wide screens: the top bar floats like the sidebar, 8px in from the top and from the sidebar, with the
   same corners and edge, so the two read as a pair and the bar never runs straight into the sidebar's curve.
   48px tall from 8px down: its bottom meets the sidebar head's. */
@media (min-width: 1024px) {
  .q-topbar { top: 8px; margin: 8px 8px 0; min-height: 48px; padding: 4px 8px 4px var(--q-space-5); border-radius: var(--q-radius-lg); background: var(--q-surface); box-shadow: 0 0 0 1px var(--q-hairline); }
  .q-topbar.is-scrolled { background: var(--q-glass); box-shadow: 0 0 0 1px var(--q-hairline); }
}
.q-topbar-actions { margin-inline-start: auto; display: flex; gap: var(--q-space-2); align-items: center; }
/* Today's date, Gregorian and Hijri, on one line at the start of the actions; on a narrow screen
   the actions need the room. */
.q-topbar-date { margin-inline-end: var(--q-space-2); color: var(--q-ink-secondary); font-size: 0.8125rem; white-space: nowrap; }
.q-topbar-date .q-date-inline { flex-wrap: nowrap; }
@media (max-width: 899px) { .q-topbar-date { display: none; } }
.q-back { display: inline-flex; align-items: center; gap: 4px; color: var(--q-accent); text-decoration: none; font-weight: 510; }
/* One page frame for every screen: the content column (.q-content in the app) sets the width and the
   centring, so every page shares its edges. Forms take the narrow column; wide grids the full width. */
html { scrollbar-gutter: stable; }
.q-page { width: 100%; display: grid; gap: var(--q-space-8); }
.q-page-narrow { max-width: 760px; margin-inline: auto; }
.q-content:has(> .q-page-wide) { max-width: none; }
.q-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--q-space-4); flex-wrap: wrap; padding-top: 4px; }
.q-page-head h1 { margin: 0; font-size: 2.125rem; line-height: 40px; font-weight: 700; letter-spacing: -0.022em; text-wrap: balance; }
.q-page-sub { margin-top: 2px; color: var(--q-ink-secondary); font-size: 0.9375rem; }
.q-grid { display: grid; gap: var(--q-space-5); grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); }

/* Second level: an area's modules */
.q-nav-sub { display: grid; gap: 1px; margin: 1px 0 6px; padding: 0; list-style: none; }
.q-nav-sub[hidden] { display: none; }
.q-nav-sub a { display: flex; align-items: center; min-height: 30px; padding: 4px 10px 4px 38px; border-radius: var(--q-radius-sm); color: var(--q-ink-secondary); text-decoration: none; font-size: 0.84375rem; line-height: 18px; transition: background-color var(--q-duration-quick) ease, color var(--q-duration-quick) ease; }
.q-nav-sub a:hover { background: var(--q-fill); color: var(--q-ink); }
.q-nav-sub a[aria-current="true"] { color: var(--q-ink); font-weight: 600; }
.q-nav-sub a[aria-current="page"] { color: var(--q-accent-strong); font-weight: 600; background: var(--q-accent-soft); }

/* Icon rail: the person's choice on wide screens (Ctrl/⌘ B). Labels stay as names and tooltips;
   an area's modules open as a flyout beside it. */
@media (min-width: 1024px) {
  .q-app.is-rail { grid-template-columns: 76px minmax(0, 1fr); }
  .is-rail .q-sidebar-head { flex-direction: column; gap: 8px; padding: 12px 8px 6px; }
  .is-rail .q-sidebar-home { flex: none; }
  .is-rail :is(.q-sidebar-brand, .q-nav-text, .q-nav-chev, .q-nav-heading, .q-sidebar-foot .who, .q-sidebar-foot .q-account-more) { display: none; }
  .is-rail .q-sidebar-rail .q-icon { transform: scaleX(-1); }
  .is-rail .q-nav { padding-inline: 8px; scrollbar-gutter: auto; }
  .is-rail .q-nav-section + .q-nav-section { padding-top: 8px; border-top: 1px solid var(--q-hairline); }
  .is-rail .q-nav-item { justify-content: center; height: 40px; padding: 0; }
  .is-rail .q-nav-item .q-icon { width: 20px; height: 20px; }
  .is-rail .q-nav-sub:not([hidden]) { position: fixed; z-index: 45; inset-inline-start: 88px; top: var(--q-flyout-top, 80px); min-width: 220px; margin: 0; padding: 6px; border-radius: 14px; background: var(--q-surface-raised); box-shadow: var(--q-shadow-raised); }
  .is-rail .q-nav-sub::before { content: attr(data-q-nav-label); display: block; padding: 6px 10px 4px; font-size: 0.75rem; font-weight: 600; color: var(--q-ink-secondary); }
  .is-rail .q-nav-sub a { padding-inline: 10px; }
  .is-rail .q-sidebar-foot .q-account { justify-content: center; }
}

/* The third level: the current module's pages as tabs at the top of the page */
.q-localnav { display: flex; align-items: center; gap: var(--q-space-3); flex-wrap: wrap; margin-bottom: var(--q-space-5); }
.q-localnav .q-tabs { flex: 1 1 auto; min-width: 0; }
.q-localnav-back { flex: none; font-size: 0.875rem; }

/* Looking at another academic year */
.q-yearbanner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: var(--q-space-5); padding: 10px 12px 10px 14px; border-radius: var(--q-radius-lg); background: var(--q-warning-soft); color: var(--q-ink); font-size: 0.875rem; }
.q-yearbanner > .q-icon { color: var(--q-warning); }
.q-yearbanner .q-btn { margin-inline-start: auto; }

/* Skip link */
.q-skip { position: fixed; z-index: 100; top: -60px; inset-inline-start: 12px; padding: 8px 14px; border-radius: var(--q-radius-full); background: var(--q-ink); color: var(--q-canvas); font-weight: 600; text-decoration: none; transition: top var(--q-duration-quick) ease; }
.q-skip:focus { top: 12px; }
.q-content:focus { outline: none; }

/* Top bar options */
.q-topbar-new { height: 34px; padding-inline: 10px 14px; gap: 4px; font-size: 0.875rem; }
.q-pinbtn[aria-pressed="true"] { background: var(--q-accent-soft); color: var(--q-accent); }
@media (max-width: 767px) {
  .q-topbar-opt, .q-topbar-lang { display: none; }
  .q-topbar-new { width: 34px; padding: 0; justify-content: center; }
  .q-topbar-new span { display: none; }
}

/* Customise sidebar / top bar */
.q-navcustom-note { margin: 0 0 var(--q-space-4); color: var(--q-ink-secondary); font-size: 0.875rem; line-height: 1.45; }
.q-navcustom-section + .q-navcustom-section { margin-top: var(--q-space-6); }
.q-navcustom-section h3 { margin: 0 0 var(--q-space-2); font-size: 0.8125rem; font-weight: 600; color: var(--q-ink-secondary); }
.q-navcustom-list { display: grid; gap: 2px; margin: 0; padding: 4px; list-style: none; border-radius: var(--q-radius-lg); background: var(--q-fill); }
.q-navcustom-row { display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 4px 6px 4px 10px; border-radius: 12px; background: var(--q-surface); }
.q-navcustom-row.is-dragging { opacity: 0.45; }
.q-navcustom-row.is-off .q-navcustom-label { color: var(--q-ink-tertiary); }
.q-navcustom-grip.q-icon { color: var(--q-ink-tertiary); cursor: grab; stroke-width: 3; }
.q-navcustom-label { flex: 1; min-width: 0; display: grid; font-size: 0.9375rem; }
.q-navcustom-label small { font-size: 0.78125rem; color: var(--q-ink-secondary); }
.q-navcustom-row .q-switch { margin-inline-start: 4px; }
.q-navcustom-foot { display: flex; justify-content: space-between; gap: var(--q-space-3); }

/* Setup guide (Dashboard and Settings) */
.q-guide { padding: var(--q-space-5) var(--q-space-5) var(--q-space-4); }
.q-guide-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--q-space-4); margin-bottom: var(--q-space-4); }
.q-guide-head h2 { margin: 0; font-size: 1.25rem; line-height: 26px; font-weight: 650; letter-spacing: -0.012em; }
.q-guide-head p { margin: 2px 0 0; color: var(--q-ink-secondary); font-size: 0.875rem; }
.q-guide-progress { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 4px 6px; min-width: 120px; }
.q-guide-progress b { font-size: 1.375rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.q-guide-progress > span { color: var(--q-ink-secondary); font-size: 0.8125rem; }
.q-guide-meter { grid-column: 1 / -1; height: 6px; border-radius: var(--q-radius-full); background: var(--q-fill-strong); overflow: hidden; }
.q-guide-meter span { display: block; height: 100%; border-radius: inherit; background: var(--q-accent); }
.q-guide-steps { margin: 0; padding: 0; list-style: none; }
@media (min-width: 1100px) { .q-guide-steps { columns: 2; column-gap: var(--q-space-5); } }
.q-guide-step { display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 6px 8px; border-radius: 12px; break-inside: avoid; }
.q-guide-step.is-next { background: var(--q-accent-soft); }
.q-guide-mark { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--q-fill-strong); color: var(--q-ink-secondary); font-size: 0.8125rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.q-guide-mark .q-icon { width: 14px; height: 14px; stroke-width: 2.6; }
.q-guide-step.is-done .q-guide-mark { background: var(--q-done-soft); color: var(--q-done); }
.q-guide-step.is-next .q-guide-mark { background: var(--q-accent); color: var(--q-on-accent); }
.q-guide-text { flex: 1; min-width: 0; display: grid; }
.q-guide-text b { font-size: 0.9375rem; font-weight: 600; }
.q-guide-step.is-done .q-guide-text b { color: var(--q-ink-secondary); font-weight: 510; }
.q-guide-text small { font-size: 0.8125rem; line-height: 18px; color: var(--q-ink-secondary); }
.q-guide-foot { display: flex; align-items: center; gap: 8px; margin-top: var(--q-space-2); color: var(--q-ink-secondary); font-size: 0.8125rem; }

/* Hubs (Reports, Settings): sections side by side on wide screens */
.q-hub { display: grid; gap: var(--q-space-6); grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr)); align-items: start; }

.q-menu-btn { display: none; }

/* Tablet and narrower: the sidebar becomes a sheet opened from the top bar */
@media (max-width: 1023px) {
  .q-app { grid-template-columns: minmax(0, 1fr); }
  .q-sidebar { display: none; }
  .q-menu-btn { display: inline-flex; }
}

/* Dialog-based sheets (navigation, search) */
dialog.q-sheet, dialog.q-palette-dialog { margin: 0; padding: 0; border: 0; max-width: none; color: var(--q-ink); }
dialog.q-sheet:not([open]), dialog.q-palette-dialog:not([open]) { display: none; }
dialog.q-sheet::backdrop, dialog.q-palette-dialog::backdrop { background: var(--q-scrim); }
/* A dialog is fit-content by default: the phone sheet spans the width, the side sheet the height. */
@media (max-width: 767px) { dialog.q-sheet { width: auto; } }
@media (min-width: 768px) { dialog.q-sheet { height: auto; } }
dialog.q-navsheet { inset-inline-start: 0; inset-inline-end: auto; }
@media (min-width: 768px) { dialog.q-navsheet { top: 12px; bottom: 12px; inset-inline-start: 12px; inset-inline-end: auto; width: 320px; height: auto; } }
@media (max-width: 767px) { dialog.q-navsheet { inset: auto 0 0 0; width: 100%; height: auto; max-height: calc(100dvh - 48px); } }
dialog.q-navsheet .q-nav { padding-bottom: 16px; }
dialog.q-palette-dialog { top: 12vh; inset-inline: 0; margin-inline: auto; background: transparent; overflow: visible; }
dialog[open].q-sheet, dialog[open].q-palette-dialog { animation: q-rise var(--q-duration-spring) var(--q-ease-spring) both; }
@keyframes q-rise { from { opacity: 0; transform: translateY(16px) scale(0.98); } to { opacity: 1; transform: none; } }

/* Popovers from the top bar (notifications, profile) */
.q-popover { position: fixed; margin: 0; inset: auto; border: 0; padding: 6px; max-height: min(70dvh, 520px); overflow: auto; }
.q-popover:popover-open { animation: q-rise var(--q-duration-spring) var(--q-ease-spring) both; }
.q-popover-head { padding: 8px 10px 6px; font-size: 0.8125rem; font-weight: 600; color: var(--q-ink-secondary); }
.q-note { display: grid; gap: 2px; padding: 8px 10px; border-radius: var(--q-radius-sm); color: var(--q-ink); text-decoration: none; }
.q-note:hover { background: var(--q-fill); }
.q-note small { color: var(--q-ink-secondary); font-size: 0.75rem; }
.q-badge-count { position: absolute; top: 2px; inset-inline-end: 2px; min-width: 18px; height: 18px; padding-inline: 5px; border-radius: var(--q-radius-full); background: var(--q-danger); color: var(--q-surface); font: 700 11px/18px var(--q-font-sans); text-align: center; font-variant-numeric: tabular-nums; }
.q-topbar .q-btn-icon { position: relative; }
.q-year { height: 34px; width: auto; max-width: 200px; padding-inline: 12px 32px; border-radius: var(--q-radius-full); border-color: transparent; background-color: var(--q-fill); font-size: 0.875rem; }
.q-searchbtn { display: inline-flex; align-items: center; gap: 8px; height: 34px; min-width: 220px; padding-inline: 12px 8px; border: 0; border-radius: var(--q-radius-full); background: var(--q-fill); color: var(--q-ink-secondary); font: inherit; font-size: 0.875rem; cursor: pointer; }
.q-searchbtn .q-kbd { margin-inline-start: auto; }
.q-searchbtn:hover { background: var(--q-fill-strong); }
@media (max-width: 767px) { .q-searchbtn { min-width: 0; width: 34px; padding: 0; justify-content: center; } .q-searchbtn span, .q-searchbtn .q-kbd, .q-year { display: none; } }

/* Phone: no sidebar; floating glass tab bar */
.q-tabbar { display: none; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 6px; border-radius: var(--q-radius-full); background: var(--q-glass); -webkit-backdrop-filter: blur(var(--q-blur-chrome)) saturate(180%); backdrop-filter: blur(var(--q-blur-chrome)) saturate(180%); box-shadow: var(--q-shadow-float); view-transition-name: q-tabbar; }
@media (max-width: 767px) {
  .q-app { grid-template-columns: minmax(0, 1fr); }
  .q-sidebar { display: none; }
  .q-topbar { padding-inline: var(--q-space-4); }
  .q-page { gap: var(--q-space-6); }
  .q-page-head h1 { font-size: 1.875rem; line-height: 36px; }
  .q-tabbar { display: grid; position: fixed; z-index: 40; inset-inline: 12px; bottom: max(12px, env(safe-area-inset-bottom)); }
}
.q-tab { display: grid; justify-items: center; gap: 2px; padding: 6px 0 5px; border: 0; background: transparent; font-family: inherit; cursor: pointer; border-radius: var(--q-radius-full); color: var(--q-ink-secondary); text-decoration: none; font-size: 0.6875rem; line-height: 13px; font-weight: 600; letter-spacing: 0.012em; transition: background-color var(--q-duration-quick) ease, color var(--q-duration-quick) ease; }
.q-tab .q-icon { width: 24px; height: 24px; }
.q-tab[aria-current="page"] { color: var(--q-accent); background: var(--q-accent-soft); }
@media (prefers-reduced-transparency: reduce) { .q-topbar.is-scrolled, .q-tabbar { background: var(--q-surface); -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* Command palette (Cmd K / Ctrl K) */
.q-palette { width: min(640px, calc(100vw - 32px)); border-radius: var(--q-radius-xl); background: var(--q-glass-thick); -webkit-backdrop-filter: blur(var(--q-blur-thick)) saturate(180%); backdrop-filter: blur(var(--q-blur-thick)) saturate(180%); box-shadow: var(--q-shadow-raised); overflow: hidden; }
.q-palette-input { display: flex; align-items: center; gap: var(--q-space-3); padding: 14px 18px; border-bottom: 1px solid var(--q-hairline); }
.q-palette-input input { flex: 1; border: 0; background: none; color: var(--q-ink); font: inherit; font-size: 1.1875rem; letter-spacing: -0.012em; outline: none; }
.q-palette-input input::placeholder { color: var(--q-ink-secondary); }
.q-palette-list { max-height: 360px; overflow: auto; padding: 6px; }
.q-palette-group { padding: 10px 12px 4px; font-size: 0.75rem; font-weight: 600; color: var(--q-ink-secondary); }
.q-palette-item { display: flex; align-items: center; gap: var(--q-space-3); min-height: 44px; padding: 0 12px; border-radius: 14px; color: var(--q-ink); }
.q-palette-item[aria-selected="true"] { background: var(--q-accent); color: var(--q-on-accent); }
.q-palette-item[aria-selected="true"] .hint { color: var(--q-on-accent); }
.q-palette-item .hint { margin-inline-start: auto; font-size: 0.8125rem; color: var(--q-ink-secondary); }


}