/* Tahfidh workspace: neutral surfaces, soft category colours, school accents. */
:root {
  --ink: #242a34;
  --muted: #596579;
  --font-ui: "Manrope", "Segoe UI", Arial, sans-serif;
  --line: #e6e8ed;
  --surface: #ffffff;
  --canvas: #f8f9fb;
  --school-colour: #456f63;
  --school-ink: #334c4d;
  --school-soft: #eef2f1;
  --school-line: #d2dcd8;
  --chart-new: #4d796b;
  --chart-revision: #a49aca;
  --shell: 1500px;
  --radius: 12px;
}

.app-body { margin: 0; background: var(--canvas); color: var(--ink); font: 16px/1.55 var(--font-ui); }
.app-body * { box-sizing: border-box; }
.app-body button,.app-body input,.app-body select,.app-body textarea { font: inherit; }
a { color: var(--school-ink); }
button,a,input,select,textarea { touch-action: manipulation; }
button { cursor: pointer; }
button:disabled { opacity: .55; cursor: wait; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible {
  outline: 2px solid var(--school-ink); outline-offset: 3px;
}
[hidden] { display: none !important; }
.icon-library { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { display: inline-block; width: 20px; height: 20px; flex: 0 0 auto; vertical-align: middle; }
.skip-link { position: fixed; inset-block-start: -100px; inset-inline-start: 12px; z-index: 9999; background: white; padding: 12px; }
.skip-link:focus { inset-block-start: 12px; }

/* The school identity is visible without colouring every surface. */
.app-side { position: fixed; inset-block: 0; inset-inline-start: 0; width: 224px; padding: 28px 18px 20px; display: flex; flex-direction: column; background: white; border-inline-end: 1px solid var(--line); z-index: 150; }
.app-brand { display: flex; align-items: center; gap: 10px; padding-inline: 9px; color: #242a34; text-decoration: none; font-size: 23px; font-weight: 700; letter-spacing: -.85px; }
.app-mark { width: 33px; height: 36px; display: grid; place-items: center; border-radius: 9px; background: var(--school-ink); color: white; }
.app-mark .icon { width: 23px; height: 23px; }
.brand-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--secondary); align-self: flex-end; margin: 0 0 8px -8px; }
.centre-label { display: flex; align-items: center; gap: 10px; padding: 12px; margin: 28px 0 29px; border: 1px solid var(--line); border-radius: 9px; background: #fcfcfd; }
.centre-label>div { min-width: 0; }
.centre-label strong { display: block; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.centre-label small { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; }
.centre-monogram { display: grid; place-items: center; width: 33px; height: 33px; border: 1px solid var(--school-line); background: var(--school-soft); color: var(--school-ink); border-radius: 7px; font-size: 13px; font-weight: 700; flex-shrink: 0; overflow: hidden; }
.centre-monogram.has-logo { width: 48px; height: 48px; background: white; border-color: transparent; border-radius: 0; }
.centre-monogram img { width: 100%; height: 100%; object-fit: contain; }
.nav-caption { display: block; color: #747b87; font-size: 13px; letter-spacing: .8px; text-transform: uppercase; font-weight: 500; margin: 0 12px 10px; }
.app-nav { display: flex; flex-direction: column; gap: 5px; }
.app-nav a { position: relative; display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 10px 13px; text-decoration: none; border-radius: 7px; color: #666c79; font-size: 14px; font-weight: 500; }
.app-nav a:hover,.side-secondary a:hover { background: #f6f7f9; color: var(--ink); }
.app-nav a[aria-current=page] { background: var(--school-soft); color: var(--school-ink); font-weight: 600; }
.app-nav a[aria-current=page]:after { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--school-ink); margin-inline-start: auto; }
.app-nav .icon { width: 19px; height: 19px; }
.side-secondary { margin-top: 31px; }
.side-secondary a { display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 10px 13px; border-radius: 7px; color: #777d88; text-decoration: none; font-size: 14px; }
.side-secondary .icon { width: 18px; height: 18px; }
.side-note { display: flex; align-items: center; gap: 11px; margin-top: auto; padding: 22px 10px 0; color: #555e69; font-size: 14px; }
.side-note small { display: block; margin-top: 3px; color: #747b87; font-size: 13px; }
.school-colour-dot { width: 10px; height: 10px; border: 2px solid var(--school-line); background: var(--school-colour); border-radius: 50%; flex-shrink: 0; }
.app-toolbar { min-height: 70px; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 0 32px; background: white; border-bottom: 1px solid var(--line); }
.has-sidebar .app-toolbar { margin-inline-start: 224px; }
.toolbar-centre { display: flex; align-items: center; gap: 10px; font-size: 14px; color: #7c8290; min-width: 0; }
.toolbar-centre span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toolbar-centre .icon { width: 18px; height: 18px; color: var(--school-ink); }
.toolbar-account { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.toolbar-account form { margin: 0; }
.account-avatar { display: grid; place-items: center; width: 31px; height: 31px; background: #eee8dd; color: #71624d; border-radius: 50%; font-size: 14px; font-weight: 600; }
.account-name { font-size: 14px; color: #4c5462; max-width: 165px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.text-button { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 8px; background: none; border: none; color: #656c79; text-decoration: none; font-size: 14px; }
.text-button .icon { width: 16px; height: 16px; }
.toolbar-options { position: relative; font-size: 14px; margin-inline-end: 8px; }
.toolbar-options summary { list-style: none; display: flex; align-items: center; gap: 6px; cursor: pointer; padding: 10px 0; color: #636a76; }
.toolbar-options summary::-webkit-details-marker { display: none; }
.toolbar-options summary .icon { width: 14px; height: 14px; }
.toolbar-options>div { position: absolute; inset-inline-end: 0; top: 38px; width: 220px; padding: 7px; border-radius: 9px; border: 1px solid var(--line); background: white; box-shadow: 0 12px 35px #202a3518; z-index: 200; }
.toolbar-options a,.toolbar-options button { display: block; width: 100%; border: none; border-radius: 5px; padding: 10px; color: var(--ink); background: none; font-size: 14px; text-align: start; text-decoration: none; }
.toolbar-options a:hover,.toolbar-options button:hover { background: #f4f5f8; }

/* Main work: useful headings, compact summaries, register before analysis. */
.app-main { width: auto; max-width: var(--shell); margin: 0 auto; padding: 27px 32px 50px; }
.has-sidebar .app-main { margin-inline-start: 224px; max-width: none; }
.app-main h1,.app-main h2,.app-main h3 { color: var(--ink); }
.ws-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 26px; }
.page-breadcrumb { display: flex; gap: 10px; color: #697386; font-size: 13px; margin-bottom: 13px; }
.page-breadcrumb span { color: #b8bdc6; }
.ws-heading h1 { font-size: 34px; font-weight: 750; line-height: 1.2; letter-spacing: -.9px; margin: 0 0 9px; }
.ws-heading p { font-size: 14px; color: var(--muted); margin: 0; }
.ws-heading-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.date-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; font-size: 14px; color: #666f7d; padding: 9px 11px; background: white; border: 1px solid var(--line); border-radius: 6px; }
.date-chip .icon { width: 16px; height: 16px; color: #7e8694; }
.eyebrow { display: block; color: var(--muted); font-size: 13px; letter-spacing: 1px; font-weight: 500; margin-bottom: 12px; }
.ws-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 11px 16px; background: white; color: #4e5664; border: 1px solid #dfe2e8; border-radius: 6px; text-decoration: none; font-size: 14px; font-weight: 500; line-height: 1.3; }
.ws-btn .icon { width: 16px; height: 16px; }
.ws-btn:hover { background: #f3f5f7; border-color: #cbd0d9; }
.ws-btn.primary { background: var(--school-ink); border-color: var(--school-ink); color: white; }
.ws-btn.primary:hover { filter: brightness(.92); }
.ws-btn.small { padding: 8px 12px; min-height: 34px; font-size: 14px; }
.ws-btn.subtle { background: transparent; border-color: transparent; color: var(--muted); }
.ws-stats { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; margin-bottom: 25px; }
.ws-stat { background: white; border: 1px solid var(--line); border-radius: 10px; padding: 17px 19px 16px; min-width: 0; }
.ws-stat.tone-school,.ws-stat.featured { background: var(--school-soft); border-color: var(--school-line); }
.ws-stat.tone-lavender { background: #f3f0fb; border-color: #e7e1f3; }
.ws-stat.tone-blue { background: #eef4fc; border-color: #e0e8f5; }
.ws-stat.tone-peach { background: var(--school-secondary-soft, #fcf2e9); border-color: #f0e5d9; }
.stat-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.stat-label { color: #626a75; font-size: 14px; font-weight: 500; }
.stat-icon { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 7px; background: #ffffffb8; color: var(--school-ink); }
.stat-icon .icon { width: 16px; height: 16px; }
.tone-lavender .stat-icon { color: #8a73b1; }
.tone-blue .stat-icon { color: #6b8fb7; }
.tone-peach .stat-icon { color: #b48658; }
.ws-stat strong { display: block; margin: 9px 0 8px; color: #303644; font-size: 31px; line-height: 1.2; letter-spacing: -.8px; font-weight: 600; font-variant-numeric: tabular-nums; }
.stat-denominator { margin-inline-start: 6px; font-size: 15px; color: #8d969c; font-weight: 400; letter-spacing: 0; }
.ws-stat small,.ws-stat a { display: inline-flex; align-items: center; gap: 7px; color: #727985; font-size: 13px; text-decoration: none; }
.ws-stat a .icon { width: 13px; height: 13px; }
.ws-stat a:hover { color: var(--ink); text-decoration: underline; }
.notebook-layout { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 20px; align-items: start; }
.reports-layout { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(290px,1fr); gap: 22px; align-items: start; }
.notebook-insights,.reports-layout>div,.reports-layout>aside { min-width: 0; }
.overview-stack { display: grid; gap: 18px; }
.ws-panel { background: white; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; min-width: 0; }
.ws-panel-head { padding: 19px 20px 17px; display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.ws-panel h2 { font-size: 19px; line-height: 1.5; font-weight: 600; letter-spacing: -.2px; margin: 0; }
.ws-panel h3 { font-size: 17px; margin: 0 0 10px; }
.ws-panel-head p { margin: 4px 0 0; color: #697386; font-size: 13px; }
.ws-panel-body { padding: 0 20px 19px; }
.register-panel>.ws-panel-head { align-items: center; }
.notebook-insights .ws-panel-head { flex-wrap: wrap; padding-bottom: 13px; }
.period-tag { color: #697386; font-size: 13px; white-space: nowrap; }
.ws-chart { min-height: 180px; overflow-x: auto; }
.ws-chart svg { display: block; width: 100%; min-width: 240px; height: 185px; }
.chart-legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 13px; color: #697386; margin: 0 0 6px; }
.legend-key:before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 2px; background: var(--chart-new); margin-inline-end: 5px; }
.legend-key.revision:before { background: var(--chart-revision); }
.chart-data { color: #697386; font-size: 13px; border-top: 1px solid #f0f1f4; padding-top: 10px; }
.chart-data summary { cursor: pointer; }
.chart-data table { min-width: 0; font-size: 13px; margin-top: 9px; }
.chart-data .ws-table th,.chart-data .ws-table td { padding: 7px 4px; font-size: 13px; white-space: normal; }
.ws-target { padding: 14px 0; border-bottom: 1px solid #eef0f3; }
.ws-target:last-child { border: 0; }
.ws-target-head { display: flex; justify-content: space-between; align-items: center; gap: 9px; font-size: 14px; color: #737a88; }
.ws-target-head strong { font-size: 14px; color: #394250; font-weight: 500; font-variant-numeric: tabular-nums; }
.ws-target .hint { margin: 5px 0 0; }
.meter { background: #f0f1f4; height: 5px; border-radius: 5px; overflow: hidden; }
.meter span { display: block; height: 100%; border-radius: 5px; background: var(--chart-new); }
.meter.gold span { background: var(--chart-revision); }
.ws-callout { padding: 12px; background: #f8f6f2; border: 1px solid #eee9e1; border-radius: 7px; font-size: 14px; line-height: 1.65; color: #8a7c69; margin-top: 17px; }
.ws-callout strong { display: block; margin-bottom: 4px; color: #76654d; font-weight: 500; }
.muted { color: var(--muted); }
.hint { color: #697386; font-size: 13px; line-height: 1.6; }
.workspace-footnote { color: #697386; font-size: 13px; padding-top: 16px; margin: 0; }

/* Search and learner rows use aligned, quiet controls. */
.ws-filters { display: flex; align-items: end; gap: 9px; flex-wrap: wrap; padding: 13px 18px; background: #fdfdfe; border-block: 1px solid #edf0f3; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field label,.field>span { color: #697386; font-size: 14px; font-weight: 500; }
.field input,.field select,.field textarea { border: 1px solid #dfe3e9; border-radius: 6px; width: 100%; min-height: 39px; padding: 8px 10px; color: #4d5767; background: white; font-size: 14px; }
.field textarea { resize: vertical; }
.field input::placeholder,.field textarea::placeholder { color: var(--muted); }
.field.grow { flex: 1; min-width: 170px; }
.ws-filters .field { flex-basis: 130px; flex-grow: 1; }
.ws-filters .field.grow { flex-grow: 2; }
.ws-filters .field label { font-size: 13px; }
.ws-filters .field input,.ws-filters .field select { min-height: 35px; font-size: 14px; }
.filter-button { min-height: 35px; padding: 9px 12px; }
.period-form { display: flex; align-items: end; gap: 10px; flex-wrap: wrap; padding: 16px 18px; background: white; border: 1px solid var(--line); border-radius: 8px; }
.period-form input,.period-form select { max-width: 185px; }
.ws-table-wrap { overflow-x: auto; }
.ws-table { width: 100%; min-width: 0; border-collapse: collapse; text-align: start; font-size: 14px; }
.ws-table th { padding: 12px 16px; border-bottom: 1px solid var(--line); background: #fafbfd; color: #697386; font-size: 13px; letter-spacing: .3px; font-weight: 500; white-space: nowrap; }
.ws-table td { padding: 15px 16px; border-bottom: 1px solid #edf0f3; vertical-align: middle; color: #555e6d; text-align: start; }
.ws-table tbody tr:last-child td { border-bottom: 0; }
.ws-table tbody tr:hover { background: #fbfcfe; }
.ws-table .number { white-space: nowrap; font-size: 14px; font-variant-numeric: tabular-nums; }
.ws-table .hint { font-size: 13px; }
.student-name { display: flex; align-items: center; gap: 11px; min-width: 155px; }
.student-name>div { min-width: 0; }
.avatar { display: grid; place-items: center; width: 33px; height: 33px; border-radius: 50%; background: #e9edf4; color: #7a88a0; font-size: 14px; font-weight: 500; flex-shrink: 0; overflow: hidden; }
.ws-table tr:nth-child(4n+2) .avatar { background: #efe8de; color: #9d886c; }
.ws-table tr:nth-child(4n+3) .avatar { background: #ebe7f4; color: #9385ac; }
.ws-table tr:nth-child(4n+4) .avatar { background: #e8eee9; color: #7c9385; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.student-name button { min-height: 32px; display: block; background: none; border: none; padding: 0; color: #444d5b; font-size: 14px; line-height: 1.5; font-weight: 500; text-align: start; }
.student-name button:hover { color: var(--school-ink); text-decoration: underline; }
.student-name small { display: block; color: #697386; font-size: 13px; margin-top: 2px; }
.tag { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; padding: 4px 7px; border-radius: 4px; background: #f0f2f5; color: #697386; font-weight: 400; white-space: nowrap; }
.tag:before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.tag.good { color: #496a52; background: #eff5ee; }
.tag.warm { color: #8b672f; background: #faf4e9; }
.tag.neutral { color: #697386; background: #f2f3f6; }
.row-actions { display: flex; justify-content: flex-end; gap: 6px; }
.row-actions .ws-btn { white-space: nowrap; }
.row-actions .ws-btn.primary { color: var(--school-ink); background: var(--school-soft); border-color: var(--school-line); }
.row-actions .ws-btn.primary:hover { background: var(--school-line); filter: none; }
.table-end { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 15px 18px; border-top: 1px solid var(--line); color: #697386; font-size: 13px; }
.pagination { display: flex; align-items: center; gap: 7px; }
.mobile-row-status { display: none !important; }
.ws-empty { padding: 35px 22px; text-align: center; color: var(--muted); font-size: 14px; }
.ws-empty strong { display: block; color: #566071; font-size: 16px; font-weight: 500; margin-bottom: 7px; }

.halaq-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.halaq-card { position: relative; background: white; border: 1px solid var(--line); border-radius: 10px; padding: 23px; }
.halaq-card h2 { font-size: 17px; font-weight: 600; margin: 0 0 5px; letter-spacing: -.3px; }
.halaq-card-mark { display: grid; place-items: center; width: 35px; height: 35px; background: var(--school-soft); border: 1px solid var(--school-line); color: var(--school-ink); border-radius: 9px; margin-bottom: 17px; }
.halaq-card .teacher { font-size: 14px; color: var(--muted); margin-bottom: 22px; }
.halaq-numbers { display: flex; gap: 35px; padding-block: 16px; border-block: 1px solid #eef0f3; margin-bottom: 8px; }
.halaq-numbers strong { display: block; color: #465061; font-size: 23px; font-weight: 500; }
.halaq-numbers small { font-size: 13px; color: #697386; }
.halaq-card footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.builder { padding: 23px; }
.builder h2 { font-size: 17px; margin: 0 0 8px; }
.builder p { font-size: 14px; color: #697386; margin: 0 0 25px; }
.builder .ws-btn { margin-top: 8px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; }
.form-grid .wide { grid-column: 1/-1; }
.report-help { font-size: 14px; color: var(--muted); margin: 15px 0; line-height: 1.7; }

/* Recording and learner panels remain in the current workspace. */
.ws-dialog { width: min(620px,calc(100% - 32px)); max-height: 91dvh; color: var(--ink); border: 1px solid #e4e7ec; padding: 0; border-radius: 12px; box-shadow: 0 24px 90px #17273a2b; }
.ws-dialog::backdrop { background: #26344866; }
.dialog-head { display: flex; justify-content: space-between; align-items: start; gap: 18px; padding: 23px 25px 20px; border-bottom: 1px solid var(--line); }
.dialog-head h2 { font-size: 20px; font-weight: 600; letter-spacing: -.5px; margin: 0 0 5px; }
.dialog-head p { color: var(--muted); font-size: 14px; margin: 0; }
.close-button { display: grid; place-items: center; min-height: 34px; min-width: 34px; border: 1px solid #e8eaf0; background: #fafbfd; color: #929aa6; border-radius: 6px; font-size: 21px; }
.dialog-body { padding: 24px 25px; }
.dialog-footer { display: flex; justify-content: flex-end; gap: 10px; position: sticky; bottom: 0; padding: 17px 25px; background: #fcfcfe; border-top: 1px solid var(--line); }
.record-types { display: flex; flex-wrap: wrap; gap: 7px; }
.record-types label { display: flex; align-items: center; gap: 6px; padding: 9px 10px; color: #7f8795; font-size: 14px; border: 1px solid #e2e6eb; border-radius: 6px; cursor: pointer; }
.record-types label:has(input:checked) { color: var(--school-ink); border-color: var(--school-line); background: var(--school-soft); }
.record-types input { accent-color: var(--school-ink); }
.form-error { padding: 12px; margin-bottom: 16px; border: 1px solid #ecd3ca; background: #fcf1ed; color: #995c46; font-size: 14px; border-radius: 7px; }
.form-error:empty { display: none; }
.toast { position: fixed; z-index: 3000; inset-block-end: 25px; inset-inline-start: 50%; transform: translateX(-50%); max-width: 90vw; padding: 13px 21px; color: white; background: #303b47; border-radius: 7px; box-shadow: 0 5px 24px #202e4b25; font-size: 14px; }
.toast:empty { display: none; }
.student-panel .ws-stats { grid-template-columns: 1fr 1fr; gap: 12px; }
.student-panel .ws-stat strong { font-size: 25px; }
.student-panel h2 { font-weight: 600; }
.panel-section { padding: 20px 0; border-top: 1px solid var(--line); }
.panel-section h3 { margin: 0 0 12px; font-size: 14px; font-weight: 600; }
.entry-line { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid #eceff4; font-size: 14px; color: #657184; }
.entry-line small { display: block; font-size: 13px; color: var(--muted); margin-top: 4px; }
.copy-field { display: flex; gap: 7px; }
.copy-field input { min-width: 0; flex: 1; border: 1px solid var(--line); border-radius: 6px; padding: 10px; font-size: 14px; color: #687286; }

/* Reports retain a clean A4 print layout. */
.report-paper { position: relative; isolation: isolate; max-width: 900px; margin: 0 auto; padding: 40px 45px; background: white; border: 1px solid var(--line); border-radius: 8px; }
.report-letterhead { text-align: center; border-bottom: 2px solid var(--school-ink); padding-bottom: 18px; }
.report-paper > :not(.report-watermark) { position: relative; z-index: 1; }
.report-watermark { position: absolute; z-index: 0; top: 270px; left: 50%; transform: translateX(-50%); width: 360px; max-width: 70%; height: auto; opacity: .045; pointer-events: none; user-select: none; }
.report-letterhead.has-badge { display: grid; grid-template-columns: 96px minmax(0, 1fr) 96px; align-items: center; gap: 16px; }
.report-badge { display: block; width: 96px; height: 96px; object-fit: contain; }
.report-centre-details { min-width: 0; overflow-wrap: anywhere; }
.report-letterhead h1 { font-size: 23px; font-weight: 600; margin: 3px 0; }
.report-letterhead p { font-size: 14px; margin: 3px 0; }
.report-title { text-align: center; text-transform: uppercase; font-size: 15px; letter-spacing: 1px; margin: 18px 0; }
.report-details { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; font-size: 14px; margin: 20px 0; }
.report-paper .ws-table { table-layout: fixed; }
.report-paper .ws-table th,.report-paper .ws-table td { padding: 11px 10px; white-space: normal; overflow-wrap: anywhere; }
.report-note { padding: 13px 0; font-size: 14px; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.report-note strong { display: block; margin-bottom: 6px; }
.signatures { display: flex; justify-content: space-between; gap: 25px; font-size: 14px; margin-top: 38px; }
.signatures div { flex: 1; border-top: 1px solid #99a1ad; padding-top: 8px; }
.report-meta { font-size: 13px; color: var(--muted); margin-top: 25px; }
.report-editor { max-width: 900px; margin: 20px auto; }
.parent-main { max-width: 940px; margin: 0 auto; }
.parent-main .ws-stats { grid-template-columns: repeat(3,1fr); }
.parent-title { margin: 25px 0; }
.parent-title h1 { font-size: 28px; font-weight: 600; letter-spacing: -.7px; margin: 6px 0; }
.parent-title p { color: var(--muted); font-size: 14px; }
.offline-pill:not(.show) { visibility: hidden; }

@media (min-width: 1700px) {
  .app-main { padding-inline: 42px; }
  .notebook-layout { grid-template-columns: minmax(0,1fr) 330px; }
}
@media (max-width: 1450px) {
  .notebook-layout .optional-column { display: none; }
}
@media (max-width: 1200px) {
  .app-side { width: 200px; padding-inline: 14px; }
  .has-sidebar .app-toolbar,.has-sidebar .app-main { margin-inline-start: 200px; }
  .app-toolbar { padding-inline: 24px; }
  .app-main { padding: 24px; }
  .ws-heading { align-items: start; }
  .ws-heading-actions { justify-content: flex-end; }
  .date-chip { display: none; }
  .ws-stats { gap: 10px; }
  .ws-stat { padding: 15px; }
  .notebook-layout { grid-template-columns: minmax(0,1fr) 265px; gap: 16px; }
  .ws-filters .field.grow { flex-basis: 100%; }
  .account-name { display: none; }
  .ws-table th,.ws-table td { padding-inline: 12px; }
}
@media (max-width: 1050px) {
  .notebook-layout,.reports-layout { grid-template-columns: 1fr; }
  .notebook-insights .overview-stack { grid-template-columns: 1fr 1fr; }
  .notebook-layout .optional-column { display: table-cell; }
  .ws-heading h1 { font-size: 26px; }
  .ws-stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 760px) {
  .app-side { inset: auto 0 0; width: 100%; height: calc(64px + env(safe-area-inset-bottom)); padding: 0; border-top: 1px solid var(--line); border-inline-end: 0; }
  .app-brand,.centre-label,.nav-caption,.side-secondary,.side-note { display: none; }
  .app-nav { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; height: 100%; padding-bottom: env(safe-area-inset-bottom); }
  .app-nav a { flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 7px 0; border-radius: 0; font-size: 13px; }
  .app-nav a[aria-current=page] { box-shadow: inset 0 2px var(--school-ink); }
  .app-nav a[aria-current=page]:after { display: none; }
  .app-nav .icon { width: 19px; height: 19px; }
  .has-sidebar .app-toolbar,.has-sidebar .app-main { margin-inline-start: 0; }
  .app-toolbar { min-height: 56px; padding-inline: 16px; gap: 10px; }
  .toolbar-centre { font-size: 14px; gap: 7px; }
  .toolbar-centre .icon,.account-avatar,.signout-button .icon { display: none; }
  .toolbar-account { gap: 6px; }
  .toolbar-options { margin-inline-end: 0; }
  .toolbar-options>div { inset-inline-end: -50px; }
  .text-button { font-size: 13px; padding-inline: 4px; }
  .app-main { padding: 20px 16px 95px; }
  .ws-heading { align-items: start; flex-wrap: wrap; gap: 17px; margin-bottom: 20px; }
  .page-breadcrumb { font-size: 13px; margin-bottom: 12px; }
  .ws-heading h1 { font-size: 27px; }
  .ws-heading p { font-size: 14px; }
  .ws-heading-actions { width: 100%; justify-content: space-between; }
  .ws-heading-actions .date-chip { display: flex; min-height: 39px; padding-inline: 9px; font-size: 13px; }
  .ws-heading-actions .ws-btn { min-height: 39px; padding-inline: 11px; }
  .ws-stats { gap: 10px; margin-bottom: 19px; }
  .ws-stat { padding: 13px 14px; }
  .ws-stat strong { font-size: 28px; margin-top: 10px; }
  .stat-icon { width: 23px; height: 23px; }
  .stat-icon .icon { width: 14px; height: 14px; }
  .stat-label { font-size: 13px; }
  .ws-stat small,.ws-stat a { font-size: 13px; }
  .stat-denominator { font-size: 14px; }
  .notebook-insights .overview-stack { grid-template-columns: 1fr; }
  .ws-panel-head { padding: 16px; gap: 8px; }
  .register-panel .ws-panel-head>.ws-btn span { display: none; }
  .ws-panel-body { padding-inline: 16px; }
  .notebook-layout .optional-column,.ws-table .optional-column,.ws-table .status-column { display: none; }
  .mobile-row-status { display: block !important; color: #849082 !important; margin-top: 4px !important; }
  .student-name { min-width: 0; gap: 9px; }
  .student-name button { font-size: 14px; overflow-wrap: anywhere; }
  .ws-table td:first-child { max-width: 240px; }
  .ws-table th,.ws-table td { padding: 13px 12px; }
  .avatar { width: 29px; height: 29px; }
  .row-actions .ws-btn { padding-inline: 10px; min-height: 36px; }
  .ws-filters { padding: 12px; gap: 9px; }
  .ws-filters .field { flex-basis: 110px; }
  .ws-filters .field.grow { flex-basis: 100%; }
  .ws-filters .field input,.ws-filters .field select { font-size: 14px; min-height: 39px; }
  .filter-button { min-height: 39px; }
  .table-end { padding: 13px 12px; font-size: 13px; }
  .halaq-grid { grid-template-columns: 1fr; }
  .halaq-card { padding: 20px; }
  .period-form { padding: 13px; }
  .period-form .field { max-width: 150px; }
  .field input,.field select,.field textarea { font-size: 16px; }
  .form-grid { gap: 13px; }
  .builder { padding: 19px; }
  .ws-dialog { width: calc(100% - 24px); max-height: 93dvh; }
  .dialog-head,.dialog-body,.dialog-footer { padding: 18px; }
  .dialog-footer { flex-wrap: wrap; }
  .record-types label { font-size: 14px; }
  .toast,.offline-pill { bottom: 80px; }
  .toast { width: calc(100% - 32px); }
  .report-paper { padding: 24px 18px; }
  .report-letterhead.has-badge { grid-template-columns: 64px minmax(0, 1fr); gap: 12px; text-align: start; }
  .report-badge { width: 64px; height: 64px; }
  .report-letterhead h1 { font-size: 18px; }
  .report-letterhead p { font-size: 12px; }
  .report-details { grid-template-columns: 1fr; }
  .report-paper .ws-table { font-size: 14px; }
  .report-paper .ws-table td:first-child { max-width: none; }
  .report-title { font-size: 14px; }
  .report-paper .ws-table th,.report-paper .ws-table td { padding: 8px; }
  .signatures { gap: 12px; flex-wrap: wrap; }
  .signatures div { min-width: 100px; }
  .parent-main .ws-stats { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *,*:before,*:after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}
@page { size: A4; margin: 15mm; }
@media print {
  .app-side,.app-toolbar,.no-print,.install-app-banner,.push-banner,.offline-pill,.toast,.skip-link,.ws-heading { display: none !important; }
  .app-body { color: #111; background: white; }
  .app-main,.has-sidebar .app-main { margin: 0 !important; padding: 0 !important; max-width: none !important; }
  .app-main .report-paper { padding: 0; border: 0; max-width: none; border-radius: 0; line-height: 1.4; }
  .report-paper .ws-table { font-size: 10pt; min-width: 0; }
  .report-paper .ws-table th,.report-paper .ws-table td { padding: 6px; white-space: normal; color: #222; }
  .report-letterhead.has-badge { grid-template-columns: 80px minmax(0, 1fr) 80px; gap: 12px; text-align: center; }
  .report-badge { width: 80px; height: 80px; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .report-watermark { top: 220px; width: 320px; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .report-details { grid-template-columns: 1fr 1fr; margin: 14px 0; }
  .report-title { margin: 12px 0; }
  .report-note { padding: 8px 0; }
  .report-note p { margin: 6px 0; }
  .report-meta { margin-top: 12px; }
  .app-main .report-paper .hint { margin: 8px 0; line-height: 1.4; }
  .report-letterhead,.report-note,.signatures,tr { break-inside: avoid; }
  .report-paper thead { display: table-header-group; }
  .report-paper h2,.report-paper h3 { break-after: avoid; }
  .ws-table-wrap { overflow: visible; }
  .report-meta { font-size: 8pt; }
  .ws-chart { break-inside: avoid; }
  .signatures { margin-top: 20px; }
  .report-paper .optional-column { display: table-cell !important; }
}