/* Shared finish for workspace, setup, assessment, parent and report screens.
   Page-specific layouts remain in their templates; visual tokens live here. */
@font-face {
  font-family: Manrope;
  src: url('../fonts/Manrope-Variable.ttf') format('truetype');
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}
:root {
  --font-ui: Manrope, 'Segoe UI', Arial, sans-serif;
  --text: #202a38;
  --ink: #202a38;
  --muted: #596579;
  --border: #dfe5eb;
  --line: #dfe5eb;
  --soft: var(--school-soft);
  --bg: #f6f8fa;
  --canvas: #f6f8fa;
  --radius: 12px;
  --shadow: 0 2px 4px #24344503;
}
.app-body { font-family: var(--font-ui); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
.app-body :is(button,input,textarea,select) { font-family: inherit; }
.app-body :is(h1,h2,h3,h4) { font-family: inherit; font-weight: 700; line-height: 1.35; }
.app-body :is(b,strong) { font-weight: 700; }
html[dir=rtl] .app-body { font-family: var(--arabic-ui-font); }
.app-side { width: 216px; padding: 20px 14px 16px; overflow-y: auto; }
.has-sidebar :is(.app-toolbar,.app-main) { margin-inline-start: 216px; }
.app-brand { font-size: 23px; font-weight: 750; letter-spacing: -.7px; }
.app-mark { width: 32px; height: 34px; }
.centre-label { margin-block: 20px; padding: 10px; }
.centre-label strong { font-size: 14px; }
.centre-label small,.nav-caption,.side-note small { font-size: 12px; }
.centre-monogram { width: 32px; height: 32px; font-size: 12px; }
.app-nav a { font-size: 14px; min-height: 40px; padding-block: 8px; }
.side-secondary a { font-size: 13px; min-height: 38px; padding-block: 8px; color: #566175; }
.side-secondary a[aria-current=page] { color: var(--school-ink); background: var(--school-soft); font-weight: 700; }
.toolbar-centre { font-size: 14px; color: var(--muted); }
.account-name,.toolbar-options,.text-button { font-size: 13px; }
.toolbar-options a,.toolbar-options button { font-size: 14px; }
.app-main { padding: 20px 24px 32px; }
.app-toolbar { min-height: 56px; padding-inline: 24px; }
.side-secondary { margin-top: 24px; }
.app-main :is(.hero,[class$='-hero']) { background: none; border: 0; box-shadow: none; border-radius: 0; padding: 0; margin: 0 0 18px; }
.app-main :is(.hero,[class$='-hero']) h1,.ws-heading h1 { font-size: 24px; font-weight: 750; letter-spacing: -.6px; line-height: 1.2; }
.app-main :is(.hero,[class$='-hero']) p,.ws-heading p { font-size: 13px; line-height: 1.5; color: var(--muted); max-width: 72ch; margin: 6px 0 0; }
.app-main :is(.hero,[class$='-hero'])>div>div:first-child { flex: 1 1 340px; min-width: 0; }
.app-main :is(.hero,[class$='-hero']) :is(.muted,small) { font-size: 13px; }
.page-breadcrumb { font-size: 12px; margin-bottom: 10px; }
.page-breadcrumb a { text-decoration: none; color: var(--muted); }
.page-breadcrumb a:hover { color: var(--school-ink); text-decoration: underline; }
.eyebrow { font-size: 12px; font-weight: 700; color: var(--muted); }
.section-nav { display: flex; gap: 8px; flex-wrap: wrap; margin: -4px 0 16px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.section-nav a { font-size: 13px; font-weight: 650; text-decoration: none; padding: 6px 10px; min-height: 34px; background: white; border: 1px solid var(--line); border-radius: 7px; }
.section-nav a:hover { border-color: var(--school-line); background: var(--school-soft); }
.app-main h2[id] { scroll-margin-top: 24px; }

@media screen {
  .app-main :is(.card,.table-card,.panel,.section-card,.eval-card,.analysis-card,.filter-card,.result-section,.report-section,.settings-section,.teacher-section,.student-section,.halaq-section,.plan-section,.template-section,.logs-section,.ready-section,.graph-section,.form-card,.eval-form-card,.result-form-card,.offline-log-card,.report-section-card,.competition-summary,.student-report) {
    background: white; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow);
  }
  .app-main :is(.table-head,.section-head,.eval-head,[class$='-section-head']) { background: white; padding: 14px 18px; border-bottom: 1px solid var(--line); }
  .app-main :is(.table-head,.section-head,.eval-head,[class$='-section-head']) h2,.app-main h2 { font-size: 17px; letter-spacing: -.25px; }
  .app-main :is(.table-head,.section-head,.eval-head,[class$='-section-head']) p { font-size: 13px; line-height: 1.5; color: var(--muted); margin: 4px 0 0; }
  .app-main :is(.settings-body,.teacher-body,.student-body,.halaq-body,.plan-body,.template-body,.logs-body,.ready-body) { padding: 18px; }
  .app-main :is(.form-card,.eval-form-card,.result-form-card,.offline-log-card) { padding: 18px; margin-bottom: 16px; }
  .app-main :is(.cards,.teacher-metrics,.student-metrics,.halaq-metrics,.plan-metrics,.template-metrics,.logs-metrics,.ready-summary) { gap: 12px; margin-bottom: 16px; }
  .app-main :is(.cards>.card,.teacher-metric,.student-metric,.halaq-metric,.plan-metric,.template-metric,.logs-metric,.ready-metric,.alert-metric,.report-metric,.graph-metric) {
    background: var(--school-soft); border: 1px solid var(--school-line); border-radius: 10px; padding: 14px 16px; box-shadow: none; min-width: 0;
  }
  .app-main :is(.cards>.card,[class$='-metric']):nth-child(4n+2) { background: #f1eefb; border-color: #e4def4; }
  .app-main :is(.cards>.card,[class$='-metric']):nth-child(4n+3) { background: #edf3fd; border-color: #dce7f7; }
  .app-main :is(.cards>.card,[class$='-metric']):nth-child(4n+4) { background: #fbf3e9; border-color: #efe3d3; }
  .app-main :is(.cards>.card,[class$='-metric'])>b { color: var(--ink); font-size: 26px; line-height: 1.25; font-weight: 750; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
  .app-main :is(.cards>.card,[class$='-metric'])>span { display: block; font-size: 13px; line-height: 1.5; margin-top: 4px; color: var(--muted); }
  .app-main .card:not(.cards>.card) b { font-size: inherit; display: inline; }
  .app-main :is(.mini-card,.detail-box,.criteria-mini,.summary-box,.question-card,.template-card) { border-radius: 9px; border: 1px solid var(--line); background: #fbfcfd; box-shadow: none; }
  .app-main :is(.settings-note,.teacher-note,.student-note,.halaq-note,.plan-note,.template-note,.logs-note,.ready-note,.eval-note,.eval-hint,.result-hint,.offline-note,.log-note,.journey-note,.filter-note,.entry-side-note) {
    background: #f0f4f8; color: #455468; border: 1px solid #dae3ee; border-inline-start: 3px solid #93a7c0; border-radius: 9px; padding: 10px 14px; font-size: 13px; line-height: 1.55; box-shadow: none;
  }
  .app-main :is(.hint,.muted,[class$='-help'],[class$='-hint'],[class$='-note']) { font-size: 13px; }
  .app-main :is(.muted,[class$='-help']) { color: var(--muted); line-height: 1.6; }
  .app-main :is(.btn,.ws-btn) { font-size: 13px; font-weight: 650; min-height: 36px; border-radius: 7px; padding: 7px 12px; line-height: 1.45; box-shadow: none; }
  .app-main .btn { background: var(--school-ink); color: white; border: 1px solid var(--school-ink); }
  .app-main :is(.btn-soft,.btn-gold) { background: white; color: var(--school-ink); border-color: #cfd8e2; }
  .app-main :is(.btn,.ws-btn):hover { box-shadow: 0 2px 5px #24344512; }
  .app-main :is(.btn-soft,.btn-gold):hover { background: var(--school-soft); border-color: var(--school-line); }
  .app-main .ws-btn.small { min-height: 32px; padding: 5px 10px; font-size: 12px; }
  .app-main :is(.form-actions,[class$='-form-footer'],.form-footer) { gap: 8px; padding-top: 14px; }
  .app-main :is([class$='-form-footer'],.form-footer) { padding: 12px 18px; background: #fafbfd; border-top: 1px solid var(--line); }
  .app-main label { color: #364458; font-size: 13px; font-weight: 650; line-height: 1.5; }
  .app-main :is(input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea) {
    font-size: 14px; color: #263548; background-color: white; border: 1px solid #bac6d3; border-radius: 8px; padding: 7px 10px; min-height: 36px; max-width: 100%; box-shadow: none; line-height: 1.45;
  }
  .app-main input[type=color] { padding: 5px !important; width: 100%; }
  .app-main :is(input[type=checkbox],input[type=radio]) { accent-color: var(--school-ink); min-width: 18px; height: 18px; flex-shrink: 0; }
  .app-main :is(input,textarea)::placeholder { color: #69778a; opacity: 1; }
  .app-main :is(input,select,textarea):focus-visible { outline: 3px solid var(--school-line); outline-offset: 1px; border-color: var(--school-ink); }
  .app-main :is(.check-card,.setting-toggle,.active-check) { font-size: 14px; font-weight: 600; border-radius: 8px; }
  .app-main :is(.settings-grid,.teacher-grid,.student-grid,.halaq-grid,.plan-grid,.template-grid,.eval-grid,.result-grid,.form-grid) { gap: 14px; }
  .app-main :is(.field-full,.wide) { min-width: 0; }
  .app-main table { font-size: 14px; font-variant-numeric: tabular-nums; }
  .app-main table th { background: #f4f7fa; color: #526175; font-size: 12px; font-weight: 650; text-transform: none; letter-spacing: .15px; line-height: 1.5; }
  .app-main table td { color: #354255; font-size: 14px; line-height: 1.5; }
  .app-main table :is(th,td) { padding: 10px 14px; border-bottom: 1px solid #e7ecf1; }
  .app-main table tbody tr:nth-child(even) { background: #fcfdfe; }
  .app-main table tbody tr:hover { background: #f4f7fa; }
  .app-main table :is(input,select) { min-width: 130px; }
  .app-main :is(.student-link,.halaq-link) { font-weight: 700; color: var(--ink); }
  .app-main :is(.badge,.tag,[class$='-pill']) { font-size: 12px; font-weight: 650; border-radius: 6px; padding: 3px 7px; line-height: 1.5; }
  .app-main :is(.errors,.form-error,.errorlist) { color: #8c343c; background: #fff1f1; font-size: 14px; border-radius: 8px; }
  .app-main .errorlist { margin: 7px 0; padding: 8px 12px 8px 30px; }
  .app-main .report-paper h1 { font-size: 27px; }
  .app-main .report-paper h2 { font-size: 18px; }
  .app-main .report-paper :is(.report-details,.report-note,.report-letterhead p) { font-size: 15px; }
}

/* Compact workspace hierarchy. Shared type sizes keep long pages consistent. */
.ws-heading { margin-bottom: 16px; gap: 16px; }
.ws-heading h1 { margin: 0; }
.ws-stats { gap: 12px; margin-bottom: 16px; }
.ws-stat { padding: 12px 16px; }
.ws-stat strong { font-size: 28px; font-weight: 750; letter-spacing: -.6px; margin: 5px 0 3px; }
.stat-label { font-size: 13px; color: #455269; font-weight: 650; }
.ws-stat small,.ws-stat a { font-size: 12px; color: #566277; }
.stat-icon { width: 24px; height: 24px; }
.stat-icon .icon { width: 15px; height: 15px; }
.stat-denominator { font-size: 15px; color: #647187; }
.ws-panel-head { padding: 12px 16px; align-items: center; }
.ws-panel-head p { font-size: 12px; }
.ws-panel-body { padding: 0 16px 14px; }
.ws-target-head { font-size: 13px; }
.ws-target-head strong { font-size: 14px; }
.chart-legend { font-size: 12px; }
.app-main .chart-data .ws-table :is(th,td) { padding: 8px 6px; font-size: 12px; }
.student-name button { min-height: 24px; font-size: 14px; font-weight: 650; }
.student-name small,.ws-table .hint { font-size: 12px; }
.student-name { gap: 10px; }
.avatar { width: 32px; height: 32px; font-size: 13px; font-weight: 700; }
.ws-filters { padding: 10px 16px; gap: 10px; }
.ws-filters .field label { font-size: 13px; }
.table-end { font-size: 13px; }
.halaq-card h2 { font-size: 18px; }
.halaq-card .teacher { font-size: 13px; margin-bottom: 12px; }
.halaq-numbers strong { font-size: 23px; font-weight: 750; }
.halaq-numbers small { font-size: 12px; }
.builder { padding: 18px; }
.builder p { font-size: 13px; margin-bottom: 16px; }
.dialog-head h2 { font-size: 20px; font-weight: 750; }
.dialog-head p,.dialog-body .hint { font-size: 13px; }
.dialog-head .close-button { width: 40px; height: 40px; color: #4d5b70; }
.dialog-body .field label,.dialog-body .record-types label { font-size: 13px; color: #435267; }
.dialog-body :is(input,select,textarea) { font-size: 14px; min-height: 38px; }
.dialog-body :is(input[type=radio],input[type=checkbox]) { min-height: 0; }
.dialog-footer .ws-btn { font-size: 13px; min-height: 38px; }
.panel-section h3 { font-size: 16px; }
.entry-line { font-size: 14px; }
.entry-line small { font-size: 13px; }
.brand-preview { --preview-colour: #456f63; margin-top: 12px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fbfcfd; }
.brand-preview-top { padding: 12px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 10px; font-size: 13px; }
.brand-preview-dot { height: 22px; width: 22px; background: var(--preview-colour); border-radius: 6px; }
.brand-preview-bar { height: 5px; background: var(--preview-colour); }
.brand-preview-body { padding: 16px; font-size: 14px; }
.brand-preview-code { color: var(--muted); margin-inline-start: auto; font-variant-numeric: tabular-nums; }
.login-wrap { width: min(100%,460px); }
.login-card { padding: 28px; box-shadow: 0 8px 30px #24344508; }
.login-card h1 { font-size: 24px; }
.login-card p,.login-note { font-size: 14px; }
.parent-title h1 { font-size: 26px; font-weight: 750; }
.parent-title p { font-size: 14px; }
.parent-unavailable { max-width: 660px; margin: 40px auto; padding: 32px; }
.parent-unavailable h1 { font-size: 24px; margin: 0 0 12px; }
.offline-card { border-radius: 12px; box-shadow: var(--shadow); }

/* Place filters beside the register, with one submission for all choices. */
.filter-fields { display: contents; }
.ws-filters .field { flex: 1 1 118px; gap: 4px; }
.ws-filters .field.grow { flex: 1.5 1 170px; }
.filter-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--school-ink); }
.column-caption { display: block; font-size: 11px; font-weight: 500; color: var(--muted); }
.app-main .ws-table th { padding-block: 8px; }
.table-end { padding: 10px 16px; }
.period-form { padding: 10px 14px; margin: 0 0 16px; }
.period-form .field { gap: 4px; }
.period-form label { font-size: 12px; }
.period-form .hint { margin-inline-start: auto; }
.notebook-layout,.reports-layout { gap: 16px; }
.overview-stack { gap: 14px; }
.ws-target { padding: 10px 0; }
.ws-callout { margin-top: 12px; padding: 10px 12px; font-size: 13px; line-height: 1.5; }
.ws-callout strong { font-weight: 650; }
.ws-chart { min-height: 165px; overflow: visible; }
.ws-chart svg { min-width: 0; height: 175px; }
.workspace-footnote,.report-help { font-size: 12px; line-height: 1.5; }
.workspace-footnote { padding-top: 12px; }
.halaq-card { padding: 16px 18px; }
.halaq-card-mark { float: inline-end; width: 32px; height: 32px; margin: 0 0 8px 12px; }
.halaq-numbers { gap: 24px; padding-block: 10px; margin-bottom: 0; }
.halaq-target-caption { font-size: 12px; color: var(--muted); margin: 12px 0 0; }
.halaq-card footer { margin-top: 14px; gap: 8px; }
.builder .ws-btn { margin-top: 0; }
.dialog-head { padding: 14px 18px; align-items: center; }
.dialog-body { padding: 16px 18px; }
.dialog-footer { padding: 12px 18px; }
.dialog-body .field { gap: 4px; }
.record-types label { padding: 6px 9px; min-height: 36px; }
.panel-section { padding: 14px 0; }
.panel-section h3 { margin-bottom: 8px; }
.entry-line { padding-block: 8px; }
.parent-title { margin: 12px 0 18px; }
.app-main .musabaqah-stat-cards { grid-template-columns: repeat(3,minmax(0,1fr)); }
.app-main .graph-body { padding: 14px 16px; }
.app-main .trend-card.compact-graph-card { padding: 0; background: none; border: 0; border-radius: 0; }
.app-main .trend-copy h3 { font-size: 17px; color: var(--ink); }
.app-main .trend-copy p { font-size: 13px; }
.trend-legend { gap: 8px 14px; font-size: 12px; font-weight: 600; }
.trend-legend span { border: 0; background: none; padding: 0; }
.trend-toolbar { display: flex; flex-wrap: wrap; padding: 8px 0; border: 0; border-radius: 0; background: none; gap: 10px; }
.trend-mode-buttons-inline { display: flex; gap: 6px; }
.trend-mode-buttons-inline .trend-mode-btn { padding: 7px 12px; min-height: 36px; border-radius: 7px; box-shadow: none; font-size: 13px; }
.compare-compact-form { flex: 1 1 260px; grid-template-columns: minmax(0,1fr) auto; }
.compare-compact-field input { font-weight: 500; }
.trend-chart-wrap { border: 0; border-radius: 0; background: white; }
#studentTrendChart text { font-size: 12px; font-weight: 500; }
#studentTrendChart :is(.chart-point-actual,.chart-point-expected,.chart-point-compare) { stroke-width: 1; }
.app-main :is(.student-metrics,.teacher-metrics,.halaq-metrics,.plan-metrics,.ready-summary,.logs-metrics) { margin-top: 0; }

@media (max-width:1200px) and (min-width:761px) {
  .app-side { width: 210px; padding-inline: 12px; }
  .has-sidebar :is(.app-toolbar,.app-main) { margin-inline-start: 210px; }
  .app-main { padding-inline: 24px; }
  .notebook-layout { grid-template-columns: minmax(0,1fr); }
  .notebook-insights .overview-stack { grid-template-columns: 1fr 1fr; }
}
@media (max-width:1000px) {
  .app-main :is(.teacher-metrics,.student-metrics,.halaq-metrics,.plan-metrics,.template-metrics,.logs-metrics,.ready-summary) { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .app-main :is(.settings-grid.three,.plan-grid.three,.check-grid) { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width:760px) {
  .app-side { width: 100%; padding: 0; overflow: visible; height: calc(64px + env(safe-area-inset-bottom)); }
  .has-sidebar :is(.app-toolbar,.app-main) { margin-inline-start: 0; }
  .app-nav a { font-size: 12px; padding: 6px 2px; min-height: 56px; }
  .app-nav .icon { width: 21px; height: 21px; }
  .app-toolbar { min-height: 52px; }
  .toolbar-centre { font-size: 13px; }
  .app-toolbar .text-button,.toolbar-options { font-size: 12px; }
  .app-main { padding: 16px 14px 88px; }
  .app-main :is(.hero,[class$='-hero']) h1,.ws-heading h1 { font-size: 22px; letter-spacing: -.5px; }
  .app-main :is(.hero,[class$='-hero']) p,.ws-heading p { font-size: 13px; }
  .page-breadcrumb { font-size: 12px; }
  .ws-heading-actions { gap: 8px; }
  .ws-heading-actions .ws-btn { flex: 1; min-height: 40px; }
  .ws-heading-actions .date-chip { width: 100%; background: none; border: 0; padding: 0; min-height: 20px; font-size: 13px; }
  .ws-stat { padding: 10px 12px; }
  .ws-stat strong { font-size: 24px; margin: 4px 0 0; }
  .stat-label { font-size: 13px; }
  .ws-stat small,.ws-stat a { font-size: 12px; }
  .stat-icon { display: none; }
  .stat-denominator { font-size: 15px; }
  .notebook-insights .overview-stack { grid-template-columns: 1fr; }
  .app-main .ws-panel-head { padding: 10px 12px; }
  .app-main .ws-panel h2 { font-size: 16px; }
  .ws-panel-head p { font-size: 12px; }
  .ws-filters { padding: 10px 12px; }
  .app-main :is(input:not([type=hidden]),select,textarea) { font-size: 16px; }
  .app-main .ws-table :is(th,td) { padding: 9px 12px; }
  .student-name { gap: 0; }
  .student-name .avatar { display: none; }
  .student-name button { font-size: 14px; min-height: 28px; }
  .student-name small { font-size: 12px; }
  .app-main .row-actions .ws-btn { padding: 8px 10px; min-height: 40px; }
  .table-end { font-size: 12px; flex-wrap: wrap; }
  .app-main :is(.settings-grid,.settings-grid.three,.teacher-grid,.student-grid,.halaq-grid,.plan-grid,.plan-grid.three,.template-grid,.eval-grid,.result-grid,.form-grid) { grid-template-columns: 1fr; }
  .app-main :is(.settings-body,.teacher-body,.student-body,.halaq-body,.plan-body,.template-body,.logs-body,.ready-body,.form-card,.eval-form-card,.result-form-card,.offline-log-card) { padding: 16px; }
  .app-main :is(.table-head,.section-head,.eval-head,[class$='-section-head']) { padding: 12px 16px; }
  .app-main :is(.hero,[class$='-hero']) :is(.page-actions,[class$='-actions'],.actions) { width: 100%; display: flex; flex-wrap: wrap; margin-top: 8px; gap: 8px; }
  .app-main :is(.hero,[class$='-hero']) :is(.page-actions,[class$='-actions'],.actions) .btn { flex: 1 1 auto; font-size: 13px; min-height: 44px; }
  .app-main :is(.cards>.card,[class$='-metric']) { padding: 12px; }
  .app-main :is(.cards>.card,[class$='-metric'])>b { font-size: 24px; }
  .app-main :is(.cards>.card,[class$='-metric'])>span { font-size: 13px; }
  .section-nav { flex-wrap: wrap; gap: 6px; padding-bottom: 10px; }
  .section-nav a { flex-shrink: 0; font-size: 12px; }
  .has-sidebar .app-main :is(.form-footer,.manage-section .student-form-footer) { bottom: calc(64px + env(safe-area-inset-bottom)); border-radius: 10px; padding: 12px; display: flex; flex-wrap: wrap; }
  .app-main :is(.form-footer,.manage-section .student-form-footer)>.muted { display: none; }
  .app-main .form-footer>div { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
  .app-main .form-footer .btn { flex: 1; min-width: 0; }
  .app-main .report-paper { padding: 24px 16px; }
  .app-main .report-paper h1 { font-size: 23px; }
  .app-main .report-paper .ws-table :is(th,td) { padding: 8px 5px; font-size: 12px; }
  .app-main .dialog-body .form-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .dialog-footer { padding: 12px; }
  .dialog-footer .ws-btn { flex: 1; }
  .login-wrap .app-brand { display: flex; }
  .login-card { padding: 28px 24px; }
  .login-card h1 { font-size: 23px; }
  .parent-title h1 { font-size: 24px; }
  .ws-heading { gap: 12px; margin-bottom: 14px; }
  .ws-heading-actions .date-chip { width: auto; font-size: 12px; }
  .ws-heading-actions:has(.date-chip) .ws-btn { flex: 0 1 auto; }
  .ws-stats { gap: 8px; margin-bottom: 14px; }
  .workspace-summary .ws-stat { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 4px 6px; }
  .workspace-summary .stat-top { grid-column: 1; }
  .workspace-summary .stat-label { font-size: 12px; }
  .workspace-summary .ws-stat strong { grid-column: 2; grid-row: 1 / 3; margin: 0; font-size: 23px; }
  .workspace-summary .ws-stat small,.workspace-summary .ws-stat a { grid-column: 1; font-size: 12px; line-height: 1.4; }
  .workspace-summary .ws-stat small { max-width: 13ch; }
  .workspace-summary .ws-stat a { min-height: 24px; }
  .workspace-summary .stat-denominator { display: block; font-size: 12px; margin: 0; text-align: end; }
  .ws-filters .field.grow { flex: 1 1 100px; min-width: 0; }
  .ws-filters .field.grow label { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .ws-filters { gap: 8px; }
  .ws-filters .filter-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; width: 100%; order: 3; }
  .ws-filters .filter-clear { order: 4; }
  .ws-filters .filter-button { order: 2; }
  .ws-filters .filter-toggle { order: 1; }
  .app-main .ws-filters :is(.ws-btn,input,select) { min-height: 40px; }
  .app-main .filter-toggle { padding-inline: 10px; }
  .filter-toggle .icon { width: 12px; }
  .app-main .ws-filters .filter-fields label { font-size: 12px; }
  .period-form { gap: 8px; }
  .period-form .field { flex: 1 1 120px; max-width: none; }
  .period-form input,.period-form select { max-width: 100%; }
  .period-form .hint { font-size: 12px; }
  .app-main :is(.btn,.ws-btn) { min-height: 40px; }
  .app-main :is(.settings-grid,.teacher-grid,.student-grid,.halaq-grid,.plan-grid,.template-grid,.eval-grid,.result-grid,.form-grid) { gap: 12px; }
  .app-main .builder.form-grid,.app-main .builder .form-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .halaq-card { padding: 14px; }
  .halaq-card-mark { width: 28px; height: 28px; }
  .halaq-numbers { gap: 20px; }
  .dialog-head,.dialog-body { padding: 12px 14px; }
  .dialog-body .record-types { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .dialog-body .record-types label { font-size: 12px; padding: 6px; min-height: 40px; }
  .dialog-body .record-types input { min-width: 16px; height: 16px; margin: 0; }
  .dialog-body #record-hint { margin: 0; font-size: 12px; }
  .dialog-body :is(input,select,textarea) { font-size: 16px; }
  .mobile-row-status { margin-top: 1px !important; color: #596b59 !important; }
  .student-name small { margin-top: 0; }
  .app-main .musabaqah-stat-cards { gap: 8px; }
  .app-main .musabaqah-stat-cards>.card { padding: 10px; }
  .app-main .musabaqah-stat-cards>.card>span { font-size: 12px; }
  .filter-card:has(> .filter-toggle) { padding: 10px 12px; }
  .filter-card>.filter-toggle { width: 100%; justify-content: space-between; }
  #assessment-filters:not([hidden]) { margin-top: 12px; }
  .app-main .graph-body { padding: 12px; }
  .trend-mode-buttons-inline .trend-mode-btn { min-height: 40px; }
  .compare-compact-form { flex-basis: 100%; }
}
@media print {
  .section-nav,.secondary-breadcrumb,.push-alert-banner { display: none !important; }
  .app-body { font-size: 10pt; }
  .has-sidebar .app-main { margin: 0 !important; }
  .app-main .report-paper :is(p,td,.report-details,.report-note) { font-size: 10pt; }
}

/* Keep wide data within its own scroll area, including older detail screens. */
@media screen {
  .app-main :is(.table-wrap,.table-scroll,.ws-table-wrap,[class$="-table-scroll"],.analysis-table-wrap) {
    min-width: 0; max-width: 100%; overflow-x: auto;
    overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
  }
  .app-main :is(.card,.section-card,.level-snapshot,.ws-panel,.builder,.field) { min-width: 0; }
}
@media screen and (max-width:760px) {
  .has-sidebar .app-main { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
  .app-main :is(.grid-2,.mini-grid,.form-grid,.settings-grid,.plan-grid)>* { min-width: 0; }
  .app-main :is(.level-pill,.journey-chip,.student-profile-copy,.ws-stat,.mini-card) { overflow-wrap: anywhere; }
  .dialog-body .student-name { flex-wrap: wrap; gap: 8px; }
  .dialog-body .student-name>div { flex: 1 1 160px; min-width: 0; }
  .dialog-body .student-name .tag { margin-inline-start: 0 !important; }
  .dialog-body .ws-stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .dialog-body .ws-stat { overflow-wrap: anywhere; }
}
@media screen and (max-width:480px) {
  .app-main .builder.form-grid,.app-main .builder .form-grid,
  .app-main .dialog-body .form-grid,.dialog-body .form-grid { grid-template-columns: minmax(0,1fr); }
  .dialog-body .form-grid>* { min-width: 0; }
  .page-student_detail .student-profile-head { align-items: flex-start; }
  .page-student_detail .level-pill-row { grid-template-columns: minmax(0,1fr); }
  .page-student_detail .journey-history-title { flex-wrap: wrap; }
}

@media screen {
  .page-student_detail .monthly-summary-table { min-width: 0; }
}
@media screen and (max-width:480px) {
  .app-main .student-photo-row { flex-direction: column; align-items: flex-start; }
  .app-main .student-photo-row>div { min-width: 0 !important; max-width: 100%; }
}