/* No external font CDN — system fonts only, so this works with zero
   network access, ever (Tahoma/Segoe UI/system-ui all render Kurdish
   Sorani and Arabic script correctly on Windows, Android, iOS, macOS). */
: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;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--paper); max-width: 100%; overflow-x: hidden; }
body { font-family: 'Segoe UI', Tahoma, Geneva, 'Noto Sans Arabic', Arial, sans-serif; color: var(--ink); }
button, input, select { font-family: inherit; }
button { cursor: pointer; }
.ss-h { font-family: 'Segoe UI', Tahoma, Geneva, 'Noto Sans Arabic', Arial, sans-serif; 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; }
@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.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; }
.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; }
.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 { 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: 12px; font-weight: 800; }
.ss-cell-other { font-size: 10px; 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); }

/* 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; }

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