:root{
  --bg:#f6f8fb; --surface:#fff; --border:#e3e8ef; --text:#1b2a41; --muted:#64748b;
  --green:#16a34a; --green-dark:#15803d; --green-soft:#e8f6ed;
  --blue-soft:#eaf3fd; --blue:#2563eb; --amber:#d97706; --amber-soft:#fef3c7; --red:#dc2626; --red-soft:#fde8e8;
  --radius:12px; --shadow:0 1px 2px rgba(16,24,40,.05),0 1px 3px rgba(16,24,40,.06);
  --sidebar:248px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text);font-size:15px;line-height:1.5}
a{color:var(--blue);text-decoration:none}
h1,h2,h3{margin:0 0 .5rem;line-height:1.25}
h2{font-size:1.25rem} h3{font-size:1.05rem}
.muted{color:var(--muted)} small{display:block;color:var(--muted);font-size:.78rem}
.icon{width:20px;height:20px;flex:none}

/* layout */
.app{display:flex;min-height:100vh}
.sidebar{width:var(--sidebar);background:var(--surface);border-right:1px solid var(--border);position:fixed;inset:0 auto 0 0;display:flex;flex-direction:column;z-index:30;overflow-y:auto}
.brand{display:flex;gap:.7rem;align-items:center;padding:1rem;border-bottom:1px solid var(--border)}
.brand img{width:42px;height:42px;object-fit:contain;flex:none}
.brand strong{display:block;font-size:.95rem;line-height:1.2}
.sidebar nav{padding:.6rem}
.sidebar nav a{display:flex;align-items:center;gap:.7rem;padding:.6rem .75rem;border-radius:8px;color:var(--text);font-weight:500;margin-bottom:2px}
.sidebar nav a:hover{background:var(--bg)}
.sidebar nav a.active{background:var(--green-soft);color:var(--green-dark)}
.main{margin-left:var(--sidebar);flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;gap:1rem;padding:.75rem 1.5rem;background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:20}
.topbar h1{font-size:1.15rem;margin:0}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:.75rem}
.content{padding:1.5rem;max-width:1280px;width:100%}
.scrim{display:none}

/* controls */
.icon-btn{background:none;border:1px solid var(--border);border-radius:8px;width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;color:var(--text);cursor:pointer;position:relative}
.only-mobile{display:none}
.badge{position:absolute;top:-6px;right:-6px;background:var(--red);color:#fff;font-size:.65rem;border-radius:99px;padding:1px 5px;min-width:18px;text-align:center}
.search{display:flex;align-items:center;gap:.4rem;border:1px solid var(--border);border-radius:8px;padding:0 .6rem;background:var(--bg)}
.search input{border:0;background:none;padding:.5rem 0;outline:none;width:150px;font:inherit}
.year-form select{padding:.45rem .6rem}
.menu{position:relative}
.user-btn{display:flex;align-items:center;gap:.5rem;background:none;border:0;cursor:pointer;font:inherit;color:inherit;text-align:left}
.avatar{width:34px;height:34px;border-radius:50%;overflow:hidden;flex:none;background:var(--green);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:600}
.uname{line-height:1.2;font-weight:600;font-size:.88rem}
.menu-list{display:none;position:absolute;right:0;top:calc(100% + 6px);background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow);min-width:180px;overflow:hidden}
.menu-list.open{display:block}
.menu-list a{display:block;padding:.65rem 1rem;color:var(--text)}
.menu-list a:hover{background:var(--bg)}

.btn{display:inline-block;padding:.55rem 1rem;border-radius:8px;border:1px solid var(--border);background:var(--surface);color:var(--text);font:inherit;font-weight:600;cursor:pointer;transition:background .15s,box-shadow .15s}
.btn:hover{background:var(--bg)}
.btn-primary{background:var(--green);border-color:var(--green);color:#fff}
.btn-primary:hover{background:var(--green-dark)}
.btn-danger{background:var(--red);border-color:var(--red);color:#fff}
.btn-block{width:100%}
label{display:block;font-weight:600;font-size:.88rem;margin-bottom:.9rem}
input,select,textarea{display:block;width:100%;margin-top:.3rem;padding:.55rem .7rem;border:1px solid var(--border);border-radius:8px;font:inherit;background:#fff;color:var(--text)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--green-soft);border-color:var(--green)}

/* cards, grids, tables */
.card{background:rgba(255,255,255,.9);border:1px solid var(--border);border-radius:var(--radius);padding:1.1rem 1.25rem;box-shadow:var(--shadow);margin-bottom:1rem}
.welcome{background:var(--blue-soft);border-color:#cfe2f8}
.grid{display:grid;gap:1rem}
.stats{grid-template-columns:repeat(auto-fit,minmax(210px,1fr));margin-bottom:1rem}
.stat{display:flex;gap:.9rem;align-items:center;margin:0}
.stat-icon{width:44px;height:44px;border-radius:10px;background:var(--green-soft);color:var(--green-dark);display:flex;align-items:center;justify-content:center}
.stat-value{font-size:1.6rem;font-weight:700;line-height:1.1}
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th,td{padding:.65rem .75rem;border-bottom:1px solid var(--border);text-align:left;white-space:nowrap}
th{font-size:.78rem;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);background:var(--bg)}
tr:hover td{background:#fafcff}
.pill{display:inline-block;padding:.1rem .6rem;border-radius:99px;font-size:.78rem;font-weight:600}
.pill-green{background:var(--green-soft);color:var(--green-dark)} .pill-amber{background:var(--amber-soft);color:var(--amber)} .pill-red{background:var(--red-soft);color:var(--red)} .pill-blue{background:var(--blue-soft);color:var(--blue)}
.progress{height:8px;background:var(--border);border-radius:99px;overflow:hidden}
.progress>span{display:block;height:100%;background:var(--green)}

.alert{padding:.7rem 1rem;border-radius:8px;margin-bottom:1rem;border:1px solid}
.alert-success{background:var(--green-soft);border-color:#bfe6cc;color:var(--green-dark)}
.alert-error{background:var(--red-soft);border-color:#f5c2c2;color:var(--red)}
.alert-warning{background:var(--amber-soft);border-color:#f3dc9a;color:#92400e}
.alert-info{background:var(--blue-soft);border-color:#cfe2f8;color:#1e40af}

.checklist{list-style:none;padding:0;margin:0 0 .5rem}
.checklist li{display:flex;align-items:center;gap:.7rem;padding:.4rem 0}
.tick{width:22px;height:22px;border-radius:50%;border:2px solid var(--border);display:inline-flex;align-items:center;justify-content:center;font-size:.8rem;color:#fff}
.checklist li.done .tick{background:var(--green);border-color:var(--green)}
.checklist li.done{color:var(--muted)}

/* auth */
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1rem}
.auth-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);padding:2rem;width:100%;max-width:440px}
.auth-card h2{text-align:center} .auth-card .muted{text-align:center;margin-top:0}
.auth-logo{display:block;margin:0 auto 1rem;width:84px;height:84px;object-fit:contain}
.auth-wrap .alert{max-width:440px;width:100%}

/* responsive */
@media (max-width:900px){
  .sidebar{transform:translateX(-100%);transition:transform .2s}
  .app.nav-open .sidebar{transform:none}
  .app.nav-open .scrim{display:block;position:fixed;inset:0;background:rgba(15,23,42,.4);z-index:25}
  .main{margin-left:0}
  .only-mobile{display:inline-flex}
  .topbar{padding:.6rem 1rem;gap:.6rem}
  .content{padding:1rem}
  .uname,.search{display:none}
}
@media print{.sidebar,.topbar,.btn,.scrim{display:none!important}.main{margin:0}.card{box-shadow:none}}

/* forms and misc (stage 2) */
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0 1rem;align-items:end}
.form-actions{margin-bottom:.9rem}
.inline-form{display:flex;gap:.5rem;align-items:center;margin-bottom:.6rem}
.inline-form input,.inline-form select{margin:0;max-width:320px}
.pager{margin-top:1rem}
.filters{display:flex;flex-wrap:wrap;gap:.6rem;align-items:end;margin-bottom:1rem}
.filters label{margin:0;min-width:150px}
.row-error td{background:var(--red-soft)} .row-ok td{background:#f4fbf6} .row-warn td{background:#fffbeb}
h4{margin:1rem 0 .4rem}
.perm-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:.2rem .8rem;margin-bottom:.6rem}
.perm{display:flex;gap:.5rem;align-items:flex-start;font-weight:500;margin:0;padding:.25rem 0}
.perm input{width:auto;margin:.25rem 0 0}

/* school logo: faint watermark behind every page, logo in header, letterhead on print */
body.has-watermark::before{content:"";position:fixed;inset:0;background:url("../images/watermark.png") center 55% / min(62vmin,560px) no-repeat;pointer-events:none;z-index:0}
.main,.auth-wrap{position:relative;z-index:1}
.top-logo{width:34px;height:34px;object-fit:contain}
.brand img{width:48px;height:48px}
.auth-logo{width:120px;height:120px}
.print-header{display:none}
@media print{
  body.has-watermark::before{background-size:min(70vmin,520px);opacity:1}
  .print-header{display:flex;align-items:center;gap:.9rem;border-bottom:2px solid #16a34a;padding-bottom:.6rem;margin-bottom:1rem}
  .print-header img{width:70px;height:70px;object-fit:contain}
  .print-header strong{display:block;font-size:1.1rem}.print-header span{color:#555;font-size:.85rem}
  .topbar,.filters,.pager{display:none!important}
}

/* language switcher and right-to-left (Arabic) */
.lang-switch{display:inline-flex;gap:.15rem;border:1px solid var(--border);border-radius:8px;overflow:hidden}
.lang-switch a{padding:.3rem .55rem;font-size:.8rem;color:var(--text)}
.lang-switch a.on{background:var(--green);color:#fff}
.auth-lang{position:fixed;top:.8rem;right:.8rem;z-index:5}
[dir=rtl] body{direction:rtl}
[dir=rtl] .auth-lang{right:auto;left:.8rem}
[dir=rtl] .sidebar{inset:0 0 0 auto;border-right:0;border-left:1px solid var(--border)}
[dir=rtl] .main{margin-left:0;margin-right:var(--sidebar)}
[dir=rtl] .topbar-right{margin-left:0;margin-right:auto}
[dir=rtl] th,[dir=rtl] td{text-align:right}
[dir=rtl] .menu-list{right:auto;left:0}
[dir=rtl] .badge{right:auto;left:-6px}
[dir=rtl] .uname{text-align:right}
@media (max-width:900px){
  [dir=rtl] .sidebar{transform:translateX(100%)}
  [dir=rtl] .app.nav-open .sidebar{transform:none}
  [dir=rtl] .main{margin-right:0}
}

/* printable login slips */
.slips{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:.6rem}
.slip{border:1px dashed #94a3b8;border-radius:8px;padding:.7rem;font-size:.85rem;break-inside:avoid;background:#fff}
.sticky-actions{position:sticky;bottom:0;background:rgba(255,255,255,.96);padding:.7rem 0;border-top:1px solid var(--border);margin-top:.6rem;z-index:5}

/* quick-action tiles */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.7rem;margin-bottom:1rem}
.tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;text-align:center;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.1rem .6rem;color:var(--text);font-weight:600;box-shadow:var(--shadow);min-height:96px}
.tile .icon{width:28px;height:28px;color:var(--green-dark)}
.tile:hover{background:var(--green-soft)}

/* phone layout: bottom navigation, tables as cards, bigger touch targets */
.bottom-nav{display:none}
@media (max-width:900px){
  .bottom-nav{display:flex;position:fixed;left:0;right:0;bottom:0;background:var(--surface);border-top:1px solid var(--border);z-index:22;padding-bottom:env(safe-area-inset-bottom,0)}
  .bottom-nav a,.bottom-nav button{flex:1;display:flex;flex-direction:column;align-items:center;gap:.1rem;padding:.45rem .1rem;font-size:.68rem;color:var(--muted);background:none;border:0;font-family:inherit;cursor:pointer}
  .bottom-nav a.on{color:var(--green-dark);font-weight:600}
  .content{padding-bottom:5.2rem}
  .sticky-actions{bottom:3.9rem}
}
@media (max-width:700px){
  input,select,textarea{font-size:16px}
  .btn{min-height:42px;display:inline-flex;align-items:center;justify-content:center}
  .filters label{min-width:100%}
  .form-grid{grid-template-columns:1fr}
  .grid.stats{grid-template-columns:1fr 1fr}
  .stat-value{font-size:1.25rem}
  .table-wrap{overflow:visible}
  table.stack{display:block}
  table.stack tbody{display:block}
  table.stack tr{display:block;border:1px solid var(--border);border-radius:10px;margin-bottom:.6rem;padding:.3rem .7rem;background:var(--surface)}
  table.stack tr.hdr{display:none}
  table.stack td{display:flex;justify-content:space-between;align-items:center;gap:.8rem;border:0;border-bottom:1px dashed var(--border);padding:.45rem 0;white-space:normal;text-align:right}
  table.stack td:last-child{border-bottom:0}
  table.stack td::before{content:attr(data-label);font-weight:600;color:var(--muted);text-align:left;flex:0 0 40%}
  table.stack td:not([data-label])::before{display:none}
  table.stack td:empty{display:none}
  table.stack input,table.stack select{max-width:58%}
  [dir=rtl] table.stack td{text-align:left}
  [dir=rtl] table.stack td::before{text-align:right}
  .tiles{grid-template-columns:1fr 1fr}
}
@media print{.bottom-nav{display:none!important}}

/* examinations: tabs, class headings, results sheet */
.tabs{display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 1rem}
.tabs a{padding:.55rem .95rem;border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--text);text-decoration:none;font-weight:600}
.tabs a.on{background:var(--green);border-color:var(--green);color:#fff}
.class-head{display:flex;align-items:center;gap:.4rem;margin:1rem 0 .4rem;padding:.45rem .7rem;border-left:4px solid var(--green);background:rgba(22,163,74,.07);border-radius:6px}
.who-box{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.6rem;margin:.6rem 0}
.who-box div{border:1px solid var(--border);border-radius:10px;padding:.55rem .75rem}
.who-box b{display:block;font-size:.75rem;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.03em}
table.sheet th small{font-weight:400}
.install-btn{display:none}
.install-btn.show{display:inline-flex}
@media print{.no-print,.tabs,.bottom-nav{display:none!important}table.sheet{font-size:11px}}

/* result slip: one student, one examination (like the national exam result) */
.slip{max-width:640px;background:#fff;color:#1f2937;border:1px solid #d1d5db;border-radius:10px;padding:14px 16px;margin:0 auto 16px;break-inside:avoid;page-break-inside:avoid;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.slip-head{display:flex;gap:12px;align-items:center;border-bottom:2px solid #15803d;padding-bottom:8px;margin-bottom:8px}
.slip-head img{width:64px;height:64px;object-fit:contain;flex:none}
.slip-head strong{display:block;font-size:1.15rem;color:#14532d;line-height:1.2}.slip-head span{display:block;font-size:1.05rem;color:#1e3a8a;font-weight:700}.slip-head em{display:block;font-style:normal;color:#6b7280;font-size:.85rem;margin-top:2px}
.slip table{width:100%;border-collapse:collapse;margin:0}
.slip-info th{width:34%;text-align:left;font-weight:700;padding:7px 8px;border-bottom:1px solid #e5e7eb;color:#111827;background:transparent}
.slip-info td{padding:7px 8px;border-bottom:1px solid #e5e7eb;color:#1e3a8a;font-weight:700;font-size:1.05rem}
.slip-info td small{color:#6b7280;font-weight:600}
.slip-pass{color:#15803d!important}.slip-fail{color:#b91c1c!important}
.slip-marks{margin-top:10px!important;border:1px solid #d1d5db}
.slip-marks td{border:1px solid #d1d5db;padding:8px 10px;font-size:1rem}
.slip-marks td.m{font-weight:700;width:16%;white-space:nowrap}.slip-marks td.m small{color:#6b7280;font-weight:500}
.slip-marks td.slip-low{color:#b91c1c}
.slip-rules{background:#f3f4f6;border-radius:6px;padding:8px 10px;margin-top:10px;font-size:.9rem}.slip-rules b{color:#b91c1c}.slip-rules ol{margin:.3rem 0 0 1.1rem;padding:0}
.slip-note{color:#9ca3af;font-size:.8rem;margin:.4rem 0 0;text-align:right}
@media print{.slip{border-color:#9ca3af;margin:0 auto 6mm;max-width:none;width:180mm}.slips-page .slip:nth-of-type(2n){page-break-after:always;break-after:page}}
.slip th,.slip td{white-space:normal!important;text-transform:none!important;letter-spacing:normal!important;word-break:break-word}
.slip table{table-layout:fixed}.slip-info th{font-size:.95rem}.slip-marks td:not(.m){width:34%}
.lang-switch .ls-short{display:none}
@media (max-width:560px){.lang-switch .ls-long{display:none}.lang-switch .ls-short{display:inline}.lang-switch a{padding:.3rem .45rem}.topbar h1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}}
.slip-marks td.m{white-space:nowrap!important;word-break:normal!important;width:19%!important}.slip-marks td:not(.m){width:31%!important}
@media (max-width:560px){.slip{padding:10px}.slip-marks td{padding:7px 6px;font-size:.92rem}.slip-head img{width:52px;height:52px}}
/* result slip: small logo in the corner, the big one faint behind the marks (watermark) */
.slip{position:relative;overflow:hidden}
.slip>*:not(.slip-wm){position:relative;z-index:1}
.slip .slip-wm{position:absolute;z-index:0;left:50%;top:56%;width:68%;max-width:380px;height:auto;transform:translate(-50%,-50%);opacity:.08;pointer-events:none}
.slip .slip-head img{width:56px!important;height:56px!important;max-width:56px}
.slip-info,.slip-marks{background:transparent!important}.slip-info td,.slip-info th,.slip-marks td{background:transparent!important}
@media (max-width:560px){.slip .slip-head img{width:46px!important;height:46px!important}.slip .slip-wm{width:82%}}
@media print{.slip .slip-wm{opacity:.07}}

/* phones: the top bar is two tidy rows (title + bell + avatar / language + year) instead of squeezing the title to nothing */
@media (max-width:600px){
  .topbar{flex-wrap:wrap;row-gap:.45rem;padding:.5rem .8rem}
  .topbar h1{flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:1.02rem}
  .topbar-right{display:contents}
  .topbar::after{content:"";order:4;flex-basis:100%;height:0}
  .topbar .lang-switch,.topbar .install-btn{order:5}
  .topbar .year-form{order:6;margin-left:auto}
  .topbar .year-form select{padding:.3rem .5rem;min-height:0;font-size:.9rem}
  [dir=rtl] .topbar .year-form{margin-left:0;margin-right:auto}
}
/* long words (codes, logged data, settings) wrap inside the screen instead of pushing the page sideways */
.content{overflow-wrap:break-word}
@media (max-width:640px){
  .table-wrap{overflow-x:auto}
  table.stack td{overflow-wrap:anywhere;word-break:break-word}
  table.stack td>*{min-width:0;max-width:100%}
}
/* phones: small one-line forms (fee plan, renames, filters) wrap onto full-width rows instead of squeezing */
@media (max-width:640px){
  .inline-form{flex-wrap:wrap}
  .inline-form>input:not([type=hidden]):not([type=checkbox]),.inline-form>select{flex:1 1 100%;max-width:none!important;width:100%}
  .inline-form>.btn,.inline-form>button{flex:1 1 auto}
  .lang-switch{flex:none}
}
/* printing one result slip: only that slip, on a clean A4 page */
.slip-actions{max-width:640px;margin:-6px auto 18px;text-align:center}
.slip-actions .btn{min-width:200px}
@media print{
  @page{size:A4;margin:12mm}
  body.printing-one .content>*:not(.print-this){display:none!important}
  body.printing-one .print-header,body.printing-one.has-watermark::before{display:none!important}
  body.printing-one .content{padding:0!important}
  body.printing-one .print-this .slip{width:auto;max-width:180mm;margin:0 auto;font-size:13pt;border-color:#9ca3af}
  body.printing-one .print-this .slip-head img{width:22mm!important;height:22mm!important;max-width:22mm}
}

/* overall result slip: subjects x examinations */
.slip-grid th{background:#f3f4f6;color:#111827;font-weight:700;padding:6px 8px;border:1px solid #d1d5db;text-align:center;font-size:.9rem;white-space:nowrap!important}
.slip-grid th:first-child{text-align:left}
.slip-grid td.m{text-align:center;width:auto}
.slip-grid tr.slip-sum td{background:#f0fdf4;font-weight:700}
.slip-final .table-wrap{margin:0;overflow-x:auto}

.pos-badge{display:inline-block;margin:.4rem 0 .2rem;padding:.35rem .8rem;border-radius:999px;background:#fef3c7;color:#92400e;font-weight:800;font-size:1.05rem}.pos-badge small{font-weight:600;color:#78350f}