:root{--g:#14532d;--g2:#15803d;--bg:#f4f6f3;--c:#fff;--t:#1a2420;--m:#667168;--l:#e1e7e2;--gold:#b8860b;--r:#c0392b;--o:#d97706;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0f1512;--c:#17201b;--t:#e6ede8;--m:#93a39a;--l:#26332b;--g2:#22a559;--gold:#e0b341}}
:root[data-theme="dark"]{--bg:#0f1512;--c:#17201b;--t:#e6ede8;--m:#93a39a;--l:#26332b;--g2:#22a559;--gold:#e0b341}
*{box-sizing:border-box}html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--t);font:14px/1.6 Cairo,'Segoe UI',Tahoma,sans-serif}
#app{display:flex;min-height:100%}
aside{width:210px;background:var(--g);color:#fff;padding:14px 8px;flex:none;position:sticky;top:0;height:100vh;overflow:auto}
aside h1{font-size:15px;margin:0 8px 2px}aside small{display:block;margin:0 8px 12px;opacity:.7;font-size:11px}
aside a{display:block;padding:8px 10px;border-radius:8px;color:#e8f3ec;cursor:pointer;margin:2px 0}
aside a.on,aside a:hover{background:rgba(255,255,255,.16)}
main{flex:1;padding:16px;min-width:0;max-width:1200px}
header{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}header h2{margin:0;font-size:19px;flex:1}
.badge{font-size:11px;padding:2px 8px;border-radius:99px;background:var(--l);color:var(--m)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin:8px 0 14px}
.card{background:var(--c);border:1px solid var(--l);border-radius:12px;padding:10px 12px}
.card.cl{cursor:pointer}.card b{display:block;font-size:21px;color:var(--g2)}.card span{font-size:12px;color:var(--m)}
.card.gold b{color:var(--gold)}.card.red b{color:var(--r)}.card.or b{color:var(--o)}
h3{margin:16px 0 6px;font-size:15px;color:var(--g2)}
.tw{overflow-x:auto;background:var(--c);border:1px solid var(--l);border-radius:10px}
table{border-collapse:collapse;width:100%;font-size:13px}th,td{padding:6px 9px;text-align:right;border-bottom:1px solid var(--l);white-space:nowrap}
th{background:rgba(21,128,61,.09);position:sticky;top:0}tr.cl{cursor:pointer}tr.cl:hover{background:rgba(21,128,61,.07)}
.mt{color:var(--m)}.tg{padding:1px 8px;border-radius:99px;font-size:11px;background:var(--l)}
.tg.g{background:#dcfce7;color:#14532d}.tg.r{background:#fee2e2;color:#991b1b}.tg.o{background:#ffedd5;color:#9a3412}.tg.y{background:#fef3c7;color:#92400e}
.bar{height:8px;border-radius:5px;background:var(--l);overflow:hidden;min-width:70px}.bar i{display:block;height:100%;background:var(--g2)}
.tb{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 10px}
input,select,textarea,button{font:inherit;padding:6px 9px;border:1px solid var(--l);border-radius:8px;background:var(--c);color:var(--t)}
button{cursor:pointer}button.pr{background:var(--g2);color:#fff;border-color:var(--g2)}button.dg{color:var(--r)}
.mb{position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:flex-start;justify-content:center;overflow:auto;padding:20px 10px;z-index:9}
.mc{background:var(--c);border-radius:14px;padding:16px;width:min(620px,100%)}.mc form{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mc label{display:block;font-size:12px;color:var(--m)}.mc label input,.mc label select,.mc label textarea{width:100%;color:var(--t)}
.mc fieldset{border:0;padding:0;margin:0;grid-column:1/-1;display:contents}.mc h4{grid-column:1/-1;margin:6px 0 0;color:var(--g2)}
.bt{display:flex;gap:6px;margin-top:12px;flex-wrap:wrap}
.note{background:rgba(184,134,11,.12);border:1px solid var(--gold);border-radius:10px;padding:8px 12px;margin:8px 0;font-size:13px}
.rp{background:var(--c);border:1px solid var(--l);border-radius:12px;padding:18px}.rp h1{font-size:18px;margin:0 0 4px;color:var(--g)}
#toast{position:fixed;bottom:70px;left:50%;transform:translateX(-50%);background:#222;color:#fff;padding:8px 16px;border-radius:99px;z-index:20;display:none}
@media(max-width:760px){#app{display:block}aside{position:fixed;bottom:0;top:auto;height:auto;width:100%;display:flex;overflow-x:auto;padding:4px;z-index:8}aside h1,aside small{display:none}aside a{white-space:nowrap;font-size:12px;padding:6px 10px}main{padding:10px 10px 70px}.mc form{grid-template-columns:1fr}}
@page{size:A4;margin:12mm 12mm 16mm;@bottom-center{content:"S.A.T.E – المكتب الولائي بالوادي  |  " counter(page)}}
.mc.wd{width:min(900px,100%)}.dh{display:flex;gap:12px;align-items:center;justify-content:center;border-bottom:3px double var(--gold);padding-bottom:8px;margin-bottom:8px;text-align:center}.dh img{height:72px;width:auto}.dh b{font-size:16px;color:var(--g)}.lg{width:72px;display:block;margin:0 auto 6px;background:#fff;border-radius:8px;padding:3px}
.sgt th{text-align:center}.sgt td{height:70px}#pa{display:none}..pdfx {
  position: fixed;
  left: 0;
  top: 0;
  width: 760px;
  min-height: 100px;
  z-index: 99999;
  background: #fff;
}
.pdfx,#pa{--c:#fff;--t:#000;--m:#444;--l:#ccc;--g:#14532d;--g2:#15803d;--gold:#b8860b;background:#fff;color:#000;direction:rtl;font:12px/1.6 Cairo,'Segoe UI',Tahoma,sans-serif}
.pdfx .tw{overflow:visible}.pdfx th,.pdfx td{white-space:normal;border:1px solid #999;font-size:11px}.pdfx th{position:static}
@media print{body.pm #app,body.pm #md,body.pm #toast{display:none!important}body.pm #pa{display:block}html,body{height:auto!important;background:#fff!important}.rp{border:0!important;padding:0!important}#pa .tw{overflow:visible;border:0}#pa tr,#pa .sgt{page-break-inside:avoid}#pa thead{display:table-header-group}#pa th,#pa td{white-space:normal;border:1px solid #999;font-size:11px}#pa th{position:static;background:#eee!important}#pa h3{page-break-after:avoid}*{-webkit-print-color-adjust:exact;print-color-adjust:exact}}

/* =========================================
   SATE IDARA — EXECUTIVE LUXURY REDESIGN
   ========================================= */

:root {
  --g: #123d32;
  --g2: #176b52;
  --bg: #f1f4f2;
  --c: #ffffff;
  --t: #172a25;
  --m: #718078;
  --l: #dce5df;
  --gold: #bd9850;
  --r: #b83d42;
  --o: #c78332;
  --petrol: #174b59;
}

body {
  background: var(--bg);
  color: var(--t);
  font-family: Cairo, "Segoe UI", Tahoma, sans-serif;
}

#app {
  min-height: 100vh;
}

/* القائمة الجانبية اليمنى */
aside {
  width: 250px;
  background: linear-gradient(180deg, #123d32 0%, #102f31 100%);
  color: #fff;
  border-left: 3px solid var(--gold);
  box-shadow: -5px 0 22px rgba(16, 47, 49, .10);
  padding: 22px 13px;
  z-index: 8;
}

aside .lg {
  width: 88px;
  height: 88px;
  object-fit: contain;
  background: #fff;
  border: 2px solid var(--gold);
  border-radius: 16px;
  padding: 6px;
  margin: 0 auto 15px;
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
}

aside h1 {
  text-align: center;
  font-size: 19px;
  font-weight: 700;
  color: #fff;
  margin: 0 8px 3px;
}

aside small {
  text-align: center;
  color: #d9c79e;
  margin-bottom: 25px;
}

aside a {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 43px;
  padding: 9px 13px;
  margin: 4px 0;
  border: 1px solid transparent;
  border-radius: 10px;
  color: #e5eee9;
  transition: .2s ease;
}

aside a:hover {
  background: rgba(255,255,255,.09);
  border-color: rgba(189,152,80,.35);
  transform: translateX(-2px);
}

aside a.on {
  background: linear-gradient(90deg, rgba(189,152,80,.25), rgba(255,255,255,.10));
  border: 1px solid var(--gold);
  color: #fff;
  font-weight: 700;
}

/* المحتوى الرئيسي */
main {
  max-width: none;
  padding: 22px 26px;
}

header {
  min-height: 62px;
  padding: 10px 15px;
  background: var(--c);
  border: 1px solid var(--l);
  border-bottom: 3px solid var(--gold);
  border-radius: 13px;
  box-shadow: 0 3px 12px rgba(20,50,40,.045);
  margin-bottom: 20px;
}

header h2 {
  color: var(--g);
  font-size: 20px;
  font-weight: 700;
}

.badge {
  background: #edf3ef;
  color: var(--g);
  border: 1px solid #dbe6df;
  padding: 4px 10px;
  font-weight: 600;
}

/* زر القائمة */
.menu-toggle {
  display: none;
  background: var(--g);
  color: white;
  border: 1px solid var(--gold);
  border-radius: 9px;
  min-width: 42px;
  min-height: 40px;
  font-size: 20px;
}

/* البطاقات */
.card {
  border: 1px solid var(--l);
  border-radius: 14px;
  padding: 15px;
  box-shadow: 0 3px 12px rgba(20,50,40,.035);
  transition: .2s ease;
}

.card.cl:hover {
  border-color: var(--gold);
  box-shadow: 0 5px 18px rgba(20,50,40,.09);
  transform: translateY(-2px);
}

.card b {
  color: var(--g2);
  font-size: 24px;
}

.card.gold b {
  color: var(--gold);
}

/* العناوين */
h3 {
  color: var(--g);
  border-right: 3px solid var(--gold);
  padding-right: 10px;
  margin-top: 22px;
}

/* الجداول */
.tw {
  border: 1px solid var(--l);
  border-radius: 13px;
  box-shadow: 0 3px 12px rgba(20,50,40,.035);
}

th {
  background: #eaf1ed;
  color: var(--g);
  font-weight: 700;
}

tr.cl:hover {
  background: #f0f6f2;
}

/* الأزرار */
button {
  transition: .18s ease;
}

button.pr {
  background: var(--g2);
  border-color: var(--g2);
  border-radius: 9px;
  font-weight: 700;
}

button.pr:hover {
  background: var(--g);
  border-color: var(--g);
}

button.dg {
  color: var(--r);
}

/* النماذج */
input, select, textarea {
  border-radius: 9px;
  min-height: 37px;
}

input:focus, select:focus, textarea:focus {
  outline: 2px solid rgba(189,152,80,.25);
  border-color: var(--gold);
}

/* النوافذ */
.mc {
  border: 1px solid var(--gold);
  border-radius: 16px;
  box-shadow: 0 15px 45px rgba(0,0,0,.18);
}

.mc h4 {
  color: var(--g);
}

/* التقارير والوثائق */
.rp {
  border: 1px solid var(--gold);
  border-radius: 14px;
}

.rp h1 {
  color: var(--g);
}

/* الهاتف: قائمة جانبية تفتح من اليمين */
@media (max-width: 760px) {
  #app {
    display: flex;
    min-height: 100vh;
  }

  aside {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: min(290px, 82vw);
    height: 100dvh;
    display: block;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 22px 13px;
    transform: translateX(110%);
    transition: transform .25s ease;
    z-index: 12;
  }

  aside.open {
    transform: translateX(0);
  }

  aside h1 {
    display: block;
  }

  aside small {
    display: block;
  }

  aside a {
    white-space: normal;
    font-size: 13px;
    padding: 10px 12px;
  }

  .menu-toggle {
    display: inline-block;
  }

  main {
    width: 100%;
    min-width: 0;
    padding: 10px;
  }

  header {
    gap: 7px;
    padding: 8px;
  }

  header h2 {
    font-size: 15px;
  }

  body.nav-open::after {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.48);
    z-index: 11;
  }

  .mc form {
    grid-template-columns: 1fr;
  }
}

/* المحافظة على تنسيق الطباعة */
@media print {
  aside, .menu-toggle {
    display: none !important;
  }

  main {
    max-width: none;
  }
}
#nav-overlay {
  display: none;
}

@media (max-width: 760px) {
  #nav-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .48);
    z-index: 11;
  }

  body.nav-open #nav-overlay {
    display: block;
  }
}@media (max-width:760px) {
  #nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: rgba(0,0,0,.55);
    pointer-events: auto;
  }

  body.nav-open #nav-overlay {
    display: block;
  }

  #nav {
    position: fixed;
    z-index: 9999;
    right: 0;
    top: 0;
    bottom: 0;
    pointer-events: auto;
  }
}/* لوحة القيادة التنفيذية SATE */
#main h3 {
  color: #145c43;
  font-size: 19px;
  font-weight: 800;
  padding: 12px 16px;
  margin: 28px 0 16px;
  border-right: 5px solid #c5a34a;
  border-radius: 0 8px 8px 0;
  background: linear-gradient(90deg, #ffffff, #edf5f0);
  box-shadow: 0 3px 12px rgba(20, 92, 67, .06);
}

#main .grid {
  gap: 16px;
  margin-bottom: 24px;
}

#main .card {
  position: relative;
  overflow: hidden;
  border: 1px solid #e3ebe6;
  border-radius: 14px;
  background: linear-gradient(145deg, #ffffff, #f7faf8);
  box-shadow: 0 5px 18px rgba(20, 60, 45, .07);
  transition: transform .2s ease, box-shadow .2s ease;
}

#main .card:hover {
  transform: translateY(-3px);
  box-shadow: 0 9px 24px rgba(20, 60, 45, .12);
}

#main .note {
  border-right: 5px solid #c5a34a;
  border-radius: 10px;
  padding: 14px;
  background: #fff9e9;
  color: #70551c;
  line-height: 1.8;
}
/* SATE Executive Dashboard */
#main h3 {
  color: #145c43 !important;
  font-size: 19px !important;
  font-weight: 800 !important;
  padding: 14px 17px !important;
  margin: 28px 0 16px !important;
  border-right: 5px solid #c5a34a !important;
  border-radius: 0 9px 9px 0 !important;
  background: linear-gradient(90deg,#fff,#eaf3ed) !important;
}

#main .grid {
  gap: 16px !important;
  margin-bottom: 22px !important;
}

#main .card {
  outline: none !important;
  border: 1px solid #dce9e1 !important;
  border-radius: 15px !important;
  padding: 20px !important;
  background: linear-gradient(145deg,#fff,#f3f8f5) !important;
  box-shadow: 0 5px 18px rgba(20,70,50,.09) !important;
  transition: .2s ease !important;
}

#main .card span {
  display: block !important;
  color: #62766a !important;
  font-size: 13px !important;
  line-height: 1.8 !important;
}

#main .card b {
  display: block !important;
  color: #145c43 !important;
  font-size: 27px !important;
  font-weight: 900 !important;
  margin: 9px 0 !important;
}

#main .card.cl {
  cursor: pointer !important;
}

#main .card.cl:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 10px 25px rgba(20,70,50,.16) !important;
  border-color: #c5a34a !important;
}

#main .note {
  padding: 15px !important;
  border-right: 5px solid #c5a34a !important;
  border-radius: 10px !important;
  background: #fff8e8 !important;
  color: #75591e !important;
  line-height: 1.9 !important;
}

/* تحسين تباين البطاقات والجداول مع الإبقاء على هوية SATE الخضراء */
:root{
  --bg:#edf2f5;
  --c:#f4f7f9;
  --t:#172b3a;
  --m:#526675;
  --l:#d3dee6;
}
.card{
  background:linear-gradient(145deg,#f7fafc 0%,#e8f0f5 100%);
  border-color:#cfdae3;
  box-shadow:0 2px 8px rgba(28,55,75,.055);
}
.card b{color:#176044}
.tw{
  background:#f3f7fa;
  border-color:#cbd8e2;
  box-shadow:0 2px 8px rgba(28,55,75,.045);
}
table{color:#1b3040}
th{background:#dce8ef;color:#17384a;border-bottom:1px solid #c4d3de}
td{background:rgba(248,251,253,.78)}
tbody tr:nth-child(even) td{background:#eaf1f5}
tr.cl:hover td{background:#dcebe5}
input,select,textarea{background:#f7fafc}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#111c25;--c:#1b2a35;--t:#e7f0f5;--m:#a9bbc7;--l:#344956;
  }
  :root:not([data-theme="light"]) .card{background:linear-gradient(145deg,#203441,#1a2a35);border-color:#3a5260}
  :root:not([data-theme="light"]) .tw{background:#1b2a35;border-color:#3a5260}
  :root:not([data-theme="light"]) th{background:#294452;color:#e7f0f5}
  :root:not([data-theme="light"]) td{background:#1b2a35;color:#e7f0f5}
  :root:not([data-theme="light"]) tbody tr:nth-child(even) td{background:#203441}
}
:root[data-theme="dark"] .card{background:linear-gradient(145deg,#203441,#1a2a35);border-color:#3a5260}
:root[data-theme="dark"] .tw{background:#1b2a35;border-color:#3a5260}
:root[data-theme="dark"] th{background:#294452;color:#e7f0f5}
:root[data-theme="dark"] td{background:#1b2a35;color:#e7f0f5}
:root[data-theme="dark"] tbody tr:nth-child(even) td{background:#203441}


/* SATE Idara — readable institutional palette (screen) */
@media screen {
  :root {
    --bg: #e9eff3;
    --c: #f2f6f8;
    --t: #172b3a;
    --m: #536878;
    --l: #cfdae2;
    --g: #123d32;
    --g2: #176b52;
  }
  body { background: var(--bg) !important; color: var(--t) !important; }
  #main .card, .card {
    background: linear-gradient(145deg, #f5f8fa 0%, #e5edf2 100%) !important;
    border: 1px solid #cbd8e1 !important;
    color: #172b3a !important;
    box-shadow: 0 3px 12px rgba(25, 52, 70, .08) !important;
  }
  #main .card span, .card span { color: #526879 !important; }
  #main .card b, .card b { color: #176044 !important; }
  .tw {
    background: #e4edf2 !important;
    border: 1px solid #c7d5df !important;
    border-radius: 11px !important;
  }
  table { background: #edf3f6 !important; color: #172b3a !important; }
  table th { background: #d5e3eb !important; color: #17384a !important; border-color: #c1d1dc !important; }
  table td { background: #f1f6f8 !important; color: #203747 !important; border-color: #d5e0e7 !important; }
  table tbody tr:nth-child(even) td { background: #e5eef3 !important; }
  table tbody tr:hover td { background: #d8e9e3 !important; }
  input, select, textarea { background: #f4f8fa !important; color: #172b3a !important; }
}
/* Keep exported and printed documents clean and printer-friendly. */
@media print {
  .card, .tw, table, th, td { box-shadow: none !important; }
}