/* Font stack: Cairo is primary — a modern Google-Fonts family that renders
   Kurdish Sorani's extended letters (ڕ ڵ ۆ ێ ھ) and Arabic script cleanly,
   with clear geometric Latin/numerals too. Tajawal is the backup for any
   Arabic glyph Cairo might miss, and Noto Sans Arabic is the next backup
   for broad script coverage, so no matter the language mix on a given
   screen or printout, a modern matching font is always available.
   System fonts remain as the last-resort fallback for the rare
   offline-first paint (before Google Fonts finish loading, or with no
   network at all). This is a single source of truth (--font-main) so
   every part of the UI and every print/export path stays visually
   consistent — never edit font-family directly, edit the variable. */
:root {
  --paper: #FAF7F1; --paper2: #F2EDE2; --ink: #211F1C; --inkSoft: #585149;
  --line: #E7DFCF; --gold: #E2A33B; --goldDeep: #B87F1F; --green: #1F6F5C;
  --greenSoft: #E4EEEA; --red: #B23A2E; --redSoft: #F6E6E2; --white: #FFFFFF;
  --font-main: 'Cairo', 'Tajawal', 'Noto Sans Arabic', 'Segoe UI', Tahoma, Geneva, Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--paper); max-width: 100%; overflow-x: hidden; }
body { font-family: var(--font-main); color: var(--ink); }
button, input, select { font-family: inherit; }
button { cursor: pointer; }
.ss-h { font-family: var(--font-main); font-weight: 800; }

#root { display: flex; min-height: 100vh; }

/* Boot splash */
#boot { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--paper); z-index: 999; }
#boot .ss-boot-mark { animation: bootpulse 1.2s ease-in-out infinite; }
@keyframes bootpulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(.94); } }

/* Sidebar */
.ss-sidebar {
  position: fixed; top: 0; height: 100dvh; width: 240px; z-index: 30; background: var(--ink);
  transition: transform .25s ease; transform: translateX(-104%);
}
html[dir="rtl"] .ss-sidebar { transform: translateX(104%); }
.ss-sidebar.ss-open,
html[dir="rtl"] .ss-sidebar.ss-open { transform: translateX(0); }
.ss-backdrop { position: fixed; inset: 0; background: rgba(33,31,28,.35); z-index: 25; }
.ss-sidebar-inner { width: 220px; height: 100%; display: flex; flex-direction: column; padding: 20px 14px; margin: 0 10px; }
.ss-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 26px; padding: 0 4px; }
.ss-brand-name { color: var(--white); font-weight: 700; font-size: 14px; }
.ss-brand-year { color: #B7AE9F; font-size: 10px; }
.ss-navlist { display: flex; flex-direction: column; gap: 2px; flex: 1; overflow-y: auto; }
.ss-navbtn { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; border: none; background: transparent; color: #D8D2C4; font-weight: 500; font-size: 13px; text-align: start; transition: all .15s; }
.ss-navbtn.active { background: var(--gold); color: var(--ink); font-weight: 700; }
.ss-langswitch { display: flex; gap: 4px; background: #33302A; border-radius: 10px; padding: 3px; margin-top: 12px; }
.ss-langbtn { flex: 1; padding: 6px 0; border-radius: 7px; border: none; font-size: 11px; font-weight: 700; background: transparent; color: #B7AE9F; }
.ss-langbtn.active { background: var(--gold); color: var(--ink); }

@media (min-width: 980px) {
  .ss-sidebar { position: sticky; transform: none !important; flex-shrink: 0; }
  .ss-backdrop { display: none !important; }
  .ss-hamburger { display: none !important; }
}

/* Main / header */
.ss-mainwrap { flex: 1; min-width: 0; }
.ss-header { position: sticky; top: 0; z-index: 10; background: rgba(250,247,241,.92); backdrop-filter: blur(6px); border-bottom: 1px solid var(--line); }
.ss-header-row { display: flex; align-items: center; gap: 12px; padding: 14px 22px; }
.ss-headertitle { font-size: 16px; font-weight: 700; margin: 0; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-header-right { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.ss-installbtn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; font-size: 11px; font-weight: 700; background: var(--gold); color: var(--ink); border: none; }
.ss-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.ss-badge.bad { background: var(--redSoft); color: var(--red); border: 1px solid rgba(178,58,46,.2); }
.ss-badge.good { background: var(--greenSoft); color: var(--green); border: 1px solid rgba(31,111,92,.2); }
.ss-content { padding: 22px; max-width: 1200px; margin: 0 auto; }
.ss-scroll { overflow-y: auto; }
.ss-hint { font-size: 11.5px; color: var(--inkSoft); margin-bottom: 10px; line-height: 1.5; }
@media (max-width: 640px) { .ss-content { padding: 14px; } }
.ss-fade { animation: ssfade .2s ease-out; }
@keyframes ssfade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.ss-iconbtn { border: 1px solid var(--line); background: var(--white); border-radius: 9px; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; }

/* Generic layout helpers */
.ss-stack { display: flex; flex-direction: column; gap: 14px; }
.ss-card { background: var(--white); border: 1px solid var(--line); border-radius: 16px; }
.ss-pad { padding: 18px; }
.ss-cardtitle { font-size: 13px; margin: 0 0 12px; }
.ss-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.ss-field label { font-size: 11px; font-weight: 700; color: var(--inkSoft); display: block; margin-bottom: 5px; }
.ss-input { width: 100%; font-size: 13px; border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; background: var(--paper); outline: none; }
.ss-empty { text-align: center; padding: 30px 0; color: var(--inkSoft); font-size: 13px; }

.ss-btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 10px; border: 1px solid var(--line); background: var(--white); color: var(--ink); font-weight: 700; font-size: 13px; }
.ss-btn.danger { border-color: var(--red); color: var(--red); }
.ss-btn.primary { background: var(--gold); color: var(--ink); border: none; }
.ss-btn.ss-grow { flex: 1; justify-content: center; }
.ss-btn[disabled] { opacity: .5; pointer-events: none; }

/* Toast */
.ss-toast { position: fixed; bottom: 22px; inset-inline-start: 50%; transform: translateX(-50%); z-index: 50; display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; font-weight: 700; font-size: 13px; background: var(--white); box-shadow: 0 8px 24px rgba(33,31,28,.15); border: 1px solid; }
.ss-toast.good { color: var(--green); border-color: rgba(31,111,92,.2); }
.ss-toast.bad { color: var(--red); border-color: rgba(178,58,46,.2); }

/* Dashboard */
.ss-hero { padding: 22px; position: relative; overflow: hidden; }
.ss-hero-mark { position: absolute; inset-inline-end: -30px; top: -30px; opacity: .08; }
.ss-hero-content { position: relative; }
.ss-hero-kicker { font-size: 10px; font-weight: 800; letter-spacing: .5px; color: var(--goldDeep); text-transform: uppercase; margin-bottom: 6px; }
.ss-hero-title { margin: 0; font-size: 22px; }
.ss-hero-sub { margin: 6px 0 0; color: var(--inkSoft); font-size: 13px; }
.ss-statgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.ss-statcard { text-align: start; background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 16px; }
.ss-statval { font-size: 26px; font-weight: 800; }
.ss-statlabel { font-size: 12px; color: var(--inkSoft); margin-top: 2px; }
.ss-conflictcard { padding: 16px; border-color: rgba(178,58,46,.27); }
.ss-conflict-head { display: flex; gap: 10px; }
.ss-conflict-title { font-weight: 800; font-size: 13px; color: var(--red); }
.ss-conflict-list { margin-top: 6px; display: flex; flex-direction: column; gap: 3px; }
.ss-conflict-item { font-size: 12px; color: var(--inkSoft); }
.ss-twocol { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ss-donutrow { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ss-legend { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 120px; }
.ss-legend-row { display: flex; align-items: center; gap: 7px; font-size: 11px; }
.ss-legend-dot { width: 9px; height: 9px; border-radius: 999px; flex-shrink: 0; }
.ss-legend-name { flex: 1; color: var(--inkSoft); }
.ss-legend-val { font-weight: 800; }
.ss-loadlist { display: flex; flex-direction: column; gap: 10px; max-height: 420px; overflow-y: auto; padding-inline-end: 4px; }
.ss-loadrow { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 4px; }
.ss-loadname { font-weight: 700; }
.ss-loadval { color: var(--goldDeep); font-weight: 700; }
.ss-loadtrack { height: 6px; background: var(--paper2); border-radius: 6px; overflow: hidden; }
.ss-loadfill { height: 100%; background: var(--gold); border-radius: 6px; }
@media (max-width: 760px) { .ss-twocol { grid-template-columns: 1fr; } }

/* Schedule grid */
.ss-toolbar { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.ss-grow { flex: 1; min-width: 180px; }
.ss-gridwrap { overflow-x: auto; }
.ss-schedtable { width: 100%; border-spacing: 4px; border-collapse: separate; min-width: 640px; font-size: 12px; }
.ss-th-period { font-size: 11px; font-weight: 800; background: var(--paper2); border-radius: 8px; padding: 7px; min-width: 80px; }
.ss-th-day { font-size: 12px; font-weight: 800; background: var(--paper2); border-radius: 8px; padding: 10px 8px; }
.ss-th-corner { font-size: 11px; color: var(--inkSoft); min-width: 70px; }
.ss-cell-dayoff { background: repeating-linear-gradient(135deg, var(--paper2), var(--paper2) 6px, #EAE3D4 6px, #EAE3D4 12px); cursor: not-allowed; }
.ss-cell-offshift { background: repeating-linear-gradient(135deg, #F2EDE2, #F2EDE2 5px, #E5DEC9 5px, #E5DEC9 10px); cursor: not-allowed; opacity: .55; }
.ss-daypill { display: inline-block; font-size: 9px; font-weight: 800; color: var(--red); background: var(--redSoft); border-radius: 999px; padding: 1px 6px; margin-inline-start: 4px; vertical-align: middle; }
.ss-cell { cursor: pointer; border-radius: 10px; padding: 8px; text-align: center; min-height: 56px; border: 1px solid var(--line); background: var(--paper); }
.ss-cell.filled { border-width: 1px; }
.ss-cell-subject { font-size: 1em; font-weight: 800; }
.ss-cell-other { font-size: 0.83em; color: var(--inkSoft); margin-top: 2px; }

/* Rows / lists */
.ss-row { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.ss-row:first-child { border-top: none; }
.ss-row-left { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 200px; }
.ss-row-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; margin-inline-start: auto; }
.ss-row-title { font-weight: 700; font-size: 13px; overflow-wrap: anywhere; }
.ss-row-sub { font-size: 11px; color: var(--inkSoft); overflow-wrap: anywhere; }
.ss-avatar { width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 12px; flex-shrink: 0; }
.ss-avatarwrap { position: relative; }
.ss-statusdot { position: absolute; bottom: -1px; inset-inline-end: -1px; width: 8px; height: 8px; border-radius: 999px; border: 2px solid var(--white); }
.ss-pill { font-size: 10px; font-weight: 800; padding: 4px 9px; border-radius: 999px; }
.ss-iconbtn2 { width: 26px; height: 26px; border-radius: 8px; border: none; background: var(--paper2); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; }
.ss-iconbtn2.danger { background: var(--redSoft); color: var(--red); }
.ss-assign3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; font-size: 12px; min-width: 200px; flex: 1; }
@media (max-width: 560px) {
  .ss-assign3 { grid-template-columns: 1fr; gap: 2px; }
}
.ss-assign-cell.strong { font-weight: 700; }
.ss-assign-cell { color: var(--inkSoft); }

/* Toolbar with search */
.ss-toolbar2 { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ss-searchwrap { position: relative; flex: 1; min-width: 180px; max-width: 320px; }
.ss-searchicon { position: absolute; inset-inline-start: 12px; top: 50%; transform: translateY(-50%); }
.ss-searchinput { padding-inline-start: 32px; border-radius: 999px; }

/* Class / subject cards */
.ss-cardgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px,1fr)); gap: 12px; }
.ss-classcard { padding: 14px; }
.ss-classcard-head { display: flex; justify-content: space-between; margin-bottom: 8px; }
.ss-classcard-actions { display: flex; gap: 6px; margin-top: 10px; }
.ss-subjgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px,1fr)); gap: 10px; }
.ss-subjcard { padding: 12px; }
.ss-subjcard-icon { width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; margin-bottom: 8px; }
.ss-subjcard-actions { display: flex; gap: 6px; margin-top: 8px; }

/* Modal */
.ss-modal-backdrop { position: fixed; inset: 0; background: rgba(33,31,28,.4); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 40; }
.ss-modal { background: var(--white); border-radius: 18px; padding: 20px; width: 100%; max-width: 460px; max-height: 88vh; overflow-y: auto; }
.ss-modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.ss-modal-head h3 { margin: 0; font-size: 15px; }
.ss-modal-body { display: flex; flex-direction: column; gap: 12px; }
.ss-modal-body .ss-field { margin-bottom: 0; }
.ss-modal-actions { display: flex; gap: 8px; margin-top: 18px; }
.ss-modal-tools { display: flex; gap: 8px; margin-top: 4px; }
.ss-warn { background: var(--redSoft); color: var(--red); border-radius: 10px; padding: 10px; font-size: 12px; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.ss-warn.soft { background: #FBF0DA; color: var(--goldDeep); }

/* Checkbox field (repeat-on-other-days toggle) */
.ss-checkfield { display: flex; flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.ss-checkfield input { width: 16px; height: 16px; accent-color: var(--gold); }

/* Chips — repeat-days picker, quick-subject picker, teacher subject tags */
.ss-chiprow { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.ss-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; padding: 6px 10px; border-radius: 999px; background: var(--paper2); color: var(--inkSoft); cursor: pointer; border: 1px solid transparent; }
.ss-chip input[type="checkbox"] { width: 12px; height: 12px; accent-color: var(--gold); }
.ss-chip.active { background: var(--gold); color: var(--white); }
.ss-chip.disabled { opacity: .5; cursor: not-allowed; }
.ss-chip-x { display: inline-flex; align-items: center; justify-content: center; background: transparent; border: none; color: inherit; padding: 0; }

/* Real clock-time sub-label under period header (P1 / 08:00–08:45) */
.ss-th-time { font-size: 9px; font-weight: 600; opacity: .75; margin-top: 2px; white-space: nowrap; letter-spacing: -0.2px; }

/* Settings */
.ss-settingswrap { max-width: 560px; }
.ss-tilerow { display: flex; gap: 22px; }
.ss-tile { display: flex; flex-direction: column; align-items: center; gap: 8px; border: none; background: transparent; padding: 0; }
.ss-tile-icon { width: 62px; height: 62px; border-radius: 20px; display: flex; align-items: center; justify-content: center; background: var(--ink); border: 1px solid #3A362F; }
.ss-tile-label { font-size: 11px; font-weight: 700; color: var(--inkSoft); }

/* Data inspection */
.ss-statgrid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 8px; margin-bottom: 12px; }
.ss-stat { background: var(--greenSoft); border-radius: 12px; padding: 12px 10px; text-align: center; }
.ss-stat.bad { background: var(--redSoft); }
.ss-stat-n { font-size: 20px; font-weight: 800; }
.ss-stat.bad .ss-stat-n { color: var(--red); }
.ss-stat.good .ss-stat-n, .ss-stat:not(.bad) .ss-stat-n { color: var(--ink); }
.ss-stat-l { font-size: 10px; color: var(--inkSoft); margin-top: 2px; }
.ss-inspect-banner { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; border-radius: 12px; font-weight: 800; font-size: 13px; margin-bottom: 12px; }
.ss-inspect-banner.bad { background: var(--redSoft); color: var(--red); }
.ss-inspect-banner.good { background: var(--greenSoft); color: var(--green); }
.ss-storagebox { border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.ss-storagebox-row { display: flex; justify-content: space-between; font-size: 11px; font-weight: 700; color: var(--inkSoft); margin-bottom: 6px; }

::-webkit-scrollbar { height: 8px; width: 8px; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 8px; }

/* Tabs (used by the whole-school schedule view) */
.ss-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.ss-tab { font-size: 11px; font-weight: 700; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); color: var(--inkSoft); }
.ss-tab.active { background: var(--ink); color: var(--white); border-color: var(--ink); }
.ss-schooltoolbar { align-items: center; justify-content: space-between; }

/* Whole-school grid */
.ss-schoolgridwrap { overflow-x: auto; }
.ss-schooltable { border-spacing: 3px; min-width: 100%; }
.ss-th-entity { font-size: 9px; font-weight: 800; background: var(--paper2); border-radius: 6px; padding: 5px 4px; min-width: 62px; white-space: nowrap; }
.ss-schooltable .ss-cell { min-height: 40px; padding: 4px; border-radius: 6px; }
.ss-schooltable .ss-th-period { min-width: 46px; padding: 4px; font-size: 9px; line-height: 1.15; }

.ss-printhint { font-size: 11px; color: var(--inkSoft); margin-top: 8px; text-align: center; }

/* ============================================================
   Dedicated print system
   #ss-print-root is only shown while document.body has the
   .ss-printing class (set right before window.print() and
   removed again on 'afterprint'). Everything else is hidden.
============================================================ */
#ss-print-root { display: none; }

.ss-printcard {
  border: 1.5px dashed #999; border-radius: 4px; padding: 4mm 5mm;
  display: flex; flex-direction: column; gap: 2mm; break-inside: avoid;
}
/* Single-line header — teacher name on the right (first in RTL flow),
   class/grade in the center, school name on the left — so it costs one
   line of vertical space instead of the old 3-4 stacked lines. That's
   what lets 4 cards (2x2) fit on one A4 page instead of 2. */
.ss-printcard-headline {
  display: flex; align-items: baseline; justify-content: space-between; gap: 3mm;
  border-bottom: 1.5px solid var(--gold); padding-bottom: 1.5mm; margin-bottom: .5mm;
}
.ss-printcard-head-cell { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-printcard-teacher { font-size: 12px; font-weight: 800; color: var(--ink); flex: 1; text-align: right; }
.ss-printcard-center { font-size: 13px; font-weight: 900; color: var(--ink); flex: 1; text-align: center; }
.ss-printcard-schoolname { font-size: 10px; font-weight: 700; color: #666; letter-spacing: .2px; flex: 1; text-align: left; }
.ss-printcard-yearsm { font-size: 8px; font-weight: 600; color: #888; margin-inline-start: 1.5mm; }
/* Older stacked header style — still used by the whole-school combined
   (A3) and per-day school printouts, which are single-table-per-page and
   don't need the compact 2x2-per-page treatment above. */
.ss-printcard-head { text-align: center; border-bottom: 3px solid var(--gold); padding-bottom: 3mm; margin-bottom: 2mm; position: relative; background: linear-gradient(180deg, #FFFDF7 0%, #FFF 100%); border-radius: 4px 4px 0 0; }
.ss-printcard-school { font-size: 12px; font-weight: 800; color: #444; letter-spacing: .5px; text-transform: uppercase; }
.ss-printcard-title { font-size: 19px; font-weight: 900; margin-top: 2mm; color: var(--ink); }
.ss-printcard-sub { font-size: 11px; color: #444; margin-top: 1mm; }
.ss-printcard-year { font-size: 10px; color: #888; margin-top: 2mm; font-weight: 700; }
.ss-printcard-table { width: 100%; border-collapse: collapse; font-size: 9.5px; }
.ss-printcard-table th, .ss-printcard-table td { border: 1px solid #ccc; padding: 1.3mm; text-align: center; }
.ss-printcard-table th { background: #f2f2f2; font-weight: 800; }
.pc-day { font-weight: 800; background: #f2f2f2; }
.pc-subj { font-size: 1em; font-weight: 800; }
.pc-other { font-size: 0.85em; color: #555; margin-top: .5mm; }
.pc-empty { color: #ccc; }

.ss-printpage { display: grid; gap: 4mm; page-break-after: always; }
.ss-printpage:last-child { page-break-after: auto; }
.ss-printpage > .ss-printcard { height: 100%; }

.ss-printschoolpage { page-break-after: always; }
.ss-printschoolpage:last-child { page-break-after: auto; }
.ss-printschool-table { width: 100%; border-collapse: collapse; font-size: 9px; }
.ss-printschool-table th, .ss-printschool-table td { border: 1px solid #ccc; padding: 1.5mm; text-align: center; }
.ss-printschool-table th { background: #f2f2f2; font-weight: 800; font-size: 8px; }

.ss-fullschool-section-title {
  font-size: 13px; font-weight: 900; background: var(--ink); color: #fff;
  padding: 2mm 3mm; border-radius: 3px; margin-bottom: 3mm;
}
.ss-printschool-table.ss-a3-table { font-size: 11px; }
.ss-printschool-table.ss-a3-table th, .ss-printschool-table.ss-a3-table td { padding: 2mm; }

/* ============================================================
   Master schedule (row-per-teacher/class, all workdays as column
   groups) — mirrors the school's own paper template: a yellow title
   banner up top, gold day-group headers, and a dense bordered grid.
============================================================ */
.ms-page { break-inside: avoid; }
.ms-banner {
  display: flex; align-items: center; justify-content: space-between;
  background: #FFEB3B; border: 1px solid #d4b800; border-radius: 3px;
  padding: 2mm 4mm; margin-bottom: 2mm;
}
.ms-schoolname { font-size: 11px; font-weight: 800; color: var(--ink); }
.ms-title { font-size: 13px; font-weight: 900; color: var(--ink); flex: 1; text-align: center; }
.ms-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 8px; }
.ms-table th, .ms-table td { border: 1px solid #999; text-align: center; overflow: hidden; }
.ms-table thead th { background: var(--gold); color: var(--ink); font-weight: 800; padding: 1mm; }
.ms-table thead tr:last-child th.ms-period { background: #FFF7E0; font-size: 8px; padding: .8mm; }
.ms-table td.ms-num { width: 16px; font-weight: 800; background: #f2f2f2; }
.ms-table th.ms-num, .ms-table th.ms-name { background: var(--gold); }
.ms-table td.ms-name { width: 60px; font-weight: 800; background: #FDF6E3; text-align: center; white-space: nowrap; padding: .8mm 1mm; }
.ms-table td.ms-notes, .ms-table th.ms-notes { width: 46px; }
.ms-table td.ms-cell { font-weight: 800; padding: .6mm; white-space: nowrap; }
.ms-table td.ms-empty { background: #fff; }

.ss-printschool-table.ss-a3-table th { font-size: 10px; }
.ss-printschool-table th.ss-fs-day { writing-mode: vertical-rl; white-space: nowrap; font-size: 9px; padding: 1mm; }
.ss-printschool-table.ss-a3-table th.ss-fs-day { font-size: 11px; }
.ss-printschool-table th.ss-fs-period { width: 14mm; font-size: 7px; line-height: 1.15; }
.ss-fs-time { font-size: 7px; font-weight: 600; opacity: .75; white-space: nowrap; }

.ss-wabtn { color: #1F6F5C; border-color: #1F6F5C55; }
.ss-wabtn.danger { color: #1F6F5C; }

@media print {
  .no-print { display: none !important; }
  .ss-sidebar { display: none !important; }
  body, main { background: white !important; }

  /* Without this, Chrome/Firefox strip background colors by default when
     printing — this is what makes subject colors actually come out on
     paper instead of a plain black-and-white table. */
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; color-adjust: exact !important; }

  /* Force the same web font everywhere on paper, regardless of which
     fonts happen to be installed on the computer doing the printing. */
  body, #ss-print-root, #ss-print-root * {
    font-family: var(--font-main) !important;
  }

  @page { size: A4 landscape; margin: 8mm; }

  body.ss-printing > *:not(#ss-print-root) { display: none !important; }
  body.ss-printing #ss-print-root { display: block !important; }

  /* Applied only for the combined whole-school (all classes + all
     teachers) printout, which needs the extra width of A3. Toggled by
     JS adding/removing #ss-page-size-override right before printing. */
  body.ss-printing-a3 { }
}

/* ═══════════════ Sidebar "about developer" trigger ═══════════════ */
.ss-creator-trigger {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: 10px; padding: 9px 0; width: 100%;
  border: 1px dashed rgba(255,255,255,.18); border-radius: 10px;
  background: transparent; color: #B7AE9F; font-size: 11.5px; font-weight: 700;
}
.ss-creator-trigger:hover { color: var(--gold); border-color: rgba(226,163,59,.4); }

/* ═══════════════ Creator profile card modal ═══════════════ */
.ss-creator-modal { max-width: 340px; }
.ss-creator-body { display: flex; flex-direction: column; align-items: center; padding: 8px 8px 6px; text-align: center; }
.ss-creator-avatar-wrap {
  position: relative; width: 108px; height: 108px; margin: 4px 0 16px;
  border-radius: 50%; padding: 4px; background: var(--white);
  box-shadow: 0 10px 26px rgba(33,31,28,.22), 0 0 0 3px var(--gold);
}
.ss-creator-avatar { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.ss-creator-avatar-fallback {
  display: none; width: 100%; height: 100%; border-radius: 50%; position: absolute; inset: 4px;
  align-items: center; justify-content: center; background: linear-gradient(135deg, var(--gold), var(--goldDeep)); color: var(--ink);
}
.ss-creator-name { font-size: 21px; font-weight: 800; margin: 0 0 20px; color: var(--ink); }
.ss-creator-icons { display: flex; align-items: center; justify-content: center; gap: 18px; }
.ss-creator-iconbtn {
  width: 52px; height: 52px; border-radius: 50%; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; text-decoration: none;
  transition: transform .15s;
}
.ss-creator-iconbtn:hover { transform: translateY(-3px); }
.ss-creator-iconbtn:active { transform: scale(.95); }
.ss-creator-iconbtn.mail { background: linear-gradient(135deg, var(--gold), var(--goldDeep)); color: var(--ink); box-shadow: 0 8px 20px rgba(226,163,59,.35); }
.ss-creator-iconbtn.wa { background: #25D366; color: #fff; box-shadow: 0 8px 20px rgba(37,211,102,.32); }

/* ═══════════════ PWA install prompt modal ═══════════════ */
.ss-install-modal { max-width: 340px; }
.ss-install-body { display: flex; flex-direction: column; align-items: center; padding: 10px 6px 4px; text-align: center; }
.ss-install-icon {
  width: 54px; height: 54px; border-radius: 16px; margin-bottom: 14px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--gold), var(--goldDeep)); color: var(--ink);
  box-shadow: 0 10px 22px rgba(226,163,59,.32);
}
.ss-install-title { font-size: 16px; margin: 0 0 8px; }
.ss-install-text { font-size: 12.5px; color: var(--inkSoft); line-height: 1.6; margin: 0 0 20px; }
.ss-install-actions { display: flex; flex-direction: column; gap: 9px; width: 100%; }
.ss-install-actions .ss-btn { width: 100%; justify-content: center; padding: 11px 0; }

@media (max-width: 480px) {
  .ss-creator-icons { gap: 14px; }
  .ss-creator-iconbtn { width: 48px; height: 48px; }
}

/* ═══════════════ Sidebar logout button ═══════════════ */
.ss-logout-trigger {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: 6px; padding: 9px 0; width: 100%;
  border: none; border-radius: 10px;
  background: rgba(178,58,46,.14); color: #E39184; font-size: 11.5px; font-weight: 700;
}
.ss-logout-trigger:hover { background: rgba(178,58,46,.24); color: #fff; }

/* ═══════════════ Boot loading / Firebase error screens ═══════════════ */
.ss-bootwait { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--paper); z-index: 30; }
.ss-bootwait-spinner {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid var(--line); border-top-color: var(--gold);
  animation: ss-spin .8s linear infinite;
}
@keyframes ss-spin { to { transform: rotate(360deg); } }
.ss-bootwait-err { display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--red); max-width: 300px; text-align: center; padding: 0 20px; }
.ss-bootwait-err p { margin: 0; font-size: 13px; color: var(--inkSoft); }

/* ═══════════════ Sync status indicator ═══════════════ */
.ss-syncstatus {
  position: fixed; bottom: 22px; inset-inline-start: 50%; transform: translateX(-50%); z-index: 45;
  display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; background: var(--ink); color: #fff;
  box-shadow: 0 8px 20px rgba(33,31,28,.25);
}
.ss-syncdot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); animation: ss-pulse 1.2s ease-in-out infinite; }
.ss-syncstatus.synced .ss-syncdot { background: var(--green); animation: none; }
.ss-syncstatus.offline .ss-syncdot { background: var(--red); animation: none; }
@keyframes ss-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }

/* ═══════════════ Auth screen (login / signup) ═══════════════ */
.ss-auth-screen {
  min-height: 100vh; width: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 24px 16px;
  background: var(--paper);
}
.ss-auth-langswitch { display: flex; gap: 4px; background: var(--ink); border-radius: 10px; padding: 3px; margin-bottom: 18px; }
.ss-auth-card {
  width: 100%; max-width: 400px; background: var(--white); border-radius: 20px;
  padding: 28px 24px; box-shadow: 0 16px 40px rgba(33,31,28,.12); border: 1px solid var(--line);
}
.ss-auth-brand { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 20px; }
.ss-auth-brand svg { margin-bottom: 10px; }
.ss-auth-brand h1 { font-size: 19px; margin: 0 0 6px; color: var(--ink); }
.ss-auth-brand p { font-size: 12.5px; color: var(--inkSoft); margin: 0; }

.ss-auth-tabs {
  display: flex; gap: 4px; background: var(--paper2); border-radius: 12px; padding: 4px; margin-bottom: 16px;
}
.ss-auth-tabs button {
  flex: 1; padding: 9px 0; border-radius: 9px; border: none; background: transparent;
  color: var(--inkSoft); font-weight: 700; font-size: 12.5px;
}
.ss-auth-tabs button.active { background: var(--white); color: var(--ink); box-shadow: 0 2px 8px rgba(33,31,28,.1); }

.ss-auth-msg {
  display: flex; align-items: center; gap: 8px; padding: 10px 13px; border-radius: 11px;
  font-size: 12px; font-weight: 600; margin-bottom: 14px;
}
.ss-auth-msg.bad { background: var(--redSoft); color: var(--red); }
.ss-auth-msg.good { background: var(--greenSoft); color: var(--green); }

.ss-auth-form { display: flex; flex-direction: column; }
.ss-auth-label {
  font-size: 11.5px; font-weight: 700; color: var(--inkSoft);
  display: flex; align-items: center; gap: 6px; margin: 12px 0 6px;
}
.ss-auth-form input {
  width: 100%; padding: 11px 13px; border-radius: 12px;
  border: 1.5px solid var(--line); background: var(--paper); color: var(--ink);
  font-size: 13px; font-family: inherit;
}
.ss-auth-form input:focus { outline: none; border-color: var(--gold); }

.ss-pw-field { position: relative; }
.ss-pw-field input { padding-right: 42px; }
.ss-pw-toggle {
  position: absolute; top: 50%; transform: translateY(-50%); right: 6px;
  width: 30px; height: 30px; border: none; background: transparent; cursor: pointer;
  color: var(--inkSoft); border-radius: 8px; display: flex; align-items: center; justify-content: center;
}
.ss-pw-toggle:hover { background: var(--paper2); color: var(--ink); }

.ss-auth-forgot {
  align-self: flex-end; margin-top: 8px; border: none; background: transparent;
  color: var(--goldDeep); font-weight: 700; font-size: 11.5px; cursor: pointer; padding: 0;
}
.ss-auth-forgot:hover { text-decoration: underline; }

.ss-auth-submit {
  margin-top: 18px; padding: 12px 0; border: none; border-radius: 13px;
  background: linear-gradient(120deg, var(--gold), var(--goldDeep)); color: var(--ink);
  font-weight: 800; font-size: 13.5px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.ss-auth-submit:disabled { opacity: .7; cursor: default; }
.ss-auth-spinner {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2.5px solid rgba(33,31,28,.25); border-top-color: var(--ink);
  animation: ss-spin .7s linear infinite;
}