/* ==========================================================================
   متابعة — operations UI
   RTL-first. This is a tool that gets scanned and operated, not read, so
   state is encoded in shape and colour as well as in words.
   ========================================================================== */

@font-face { font-family:"Plex AR"; font-weight:400; font-display:swap;
  src:url("fonts/ibm-plex-sans-arabic-latin-400-normal.4767e1197706.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122,U+2190-2193,U+2212; }
@font-face { font-family:"Plex AR"; font-weight:400; font-display:swap;
  src:url("fonts/ibm-plex-sans-arabic-arabic-400-normal.4fa3d81d41ab.woff2") format("woff2");
  unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF; }
@font-face { font-family:"Plex AR"; font-weight:500; font-display:swap;
  src:url("fonts/ibm-plex-sans-arabic-latin-500-normal.80ebc672c915.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122,U+2190-2193,U+2212; }
@font-face { font-family:"Plex AR"; font-weight:500; font-display:swap;
  src:url("fonts/ibm-plex-sans-arabic-arabic-500-normal.106892212ea7.woff2") format("woff2");
  unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF; }
@font-face { font-family:"Plex AR"; font-weight:600; font-display:swap;
  src:url("fonts/ibm-plex-sans-arabic-latin-600-normal.f417eeb0d15e.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122,U+2190-2193,U+2212; }
@font-face { font-family:"Plex AR"; font-weight:600; font-display:swap;
  src:url("fonts/ibm-plex-sans-arabic-arabic-600-normal.64891a810259.woff2") format("woff2");
  unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF; }
@font-face { font-family:"Plex Mono"; font-weight:400; font-display:swap;
  src:url("fonts/ibm-plex-mono-latin-400-normal.79936b18df9f.woff2") format("woff2"); }
@font-face { font-family:"Plex Mono"; font-weight:500; font-display:swap;
  src:url("fonts/ibm-plex-mono-latin-500-normal.b1c8a895f5fd.woff2") format("woff2"); }

:root{
  --paper:#F4F6F4; --surface:#fff; --surface-2:#EDF1EF; --surface-3:#E3E9E6;
  --ink:#131B19; --ink-2:#46534F; --ink-3:#6E7C77;
  --rule:#D5DBD8; --rule-soft:#E6EBE8;
  --petrol:#0D6E62; --petrol-deep:#0A544B; --petrol-wash:#E2EFEC;
  --ok:#1F7A44; --ok-wash:#E4F2E9;
  --warn:#A2650A; --warn-wash:#FBF1DD;
  --danger:#A63328; --danger-wash:#FAEAE7;
  --info:#1F5E86; --info-wash:#E6EFF6;
  --sans:"Plex AR",system-ui,"Segoe UI",sans-serif;
  --mono:"Plex Mono","Plex AR",ui-monospace,Menlo,monospace;
  --r:6px; --shadow:0 1px 2px rgba(19,27,25,.06),0 1px 8px rgba(19,27,25,.04);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#0D1412; --surface:#141D1A; --surface-2:#1A2521; --surface-3:#22302B;
    --ink:#DEE6E2; --ink-2:#A0ADA8; --ink-3:#74827D;
    --rule:#25332E; --rule-soft:#1C2724;
    --petrol:#48C7B4; --petrol-deep:#6FDCCA; --petrol-wash:#10312C;
    --ok:#5BC98A; --ok-wash:#11291B;
    --warn:#E0AA46; --warn-wash:#2C2211;
    --danger:#E88A78; --danger-wash:#331A15;
    --info:#7FB6DC; --info-wash:#132430;
    --shadow:0 1px 2px rgba(0,0,0,.4);
    color-scheme:dark;
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:15px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--petrol);text-underline-offset:2px}
:focus-visible{outline:2px solid var(--petrol);outline-offset:2px;border-radius:3px}
h1,h2,h3{margin:0;line-height:1.25;text-wrap:balance}
h1{font-size:1.5rem;font-weight:600}
h2{font-size:1.15rem;font-weight:600}
h3{font-size:1rem;font-weight:600}

/* ── shell ─────────────────────────────────────────────────────────── */
.topbar{
  position:sticky;top:0;z-index:30;background:var(--surface);
  border-bottom:1px solid var(--rule);
}
.topbar-in{
  max-width:1180px;margin:0 auto;padding:.6rem 1rem;
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
}
.brand{display:flex;align-items:center;gap:.55rem;text-decoration:none;color:inherit}
.brand-mark{
  width:30px;height:30px;border-radius:7px;background:var(--petrol);
  display:grid;place-items:center;flex:0 0 auto;
}
.brand-mark span{display:block;width:3px;border-radius:2px;background:#EAF4F1}
.brand-mark i{display:flex;align-items:flex-end;gap:2px;height:16px;font-style:normal}
.brand-name{font-weight:600;font-size:1.05rem;letter-spacing:-.01em}
.brand-sub{font-size:.68rem;color:var(--ink-3);display:block;line-height:1.2}
nav.main{display:flex;gap:.15rem;margin-inline-start:auto;flex-wrap:wrap}
nav.main a{
  padding:.4rem .7rem;border-radius:var(--r);text-decoration:none;
  color:var(--ink-2);font-size:.9rem;font-weight:500;white-space:nowrap;
}
nav.main a:hover{background:var(--surface-2);color:var(--ink)}
nav.main a.on{background:var(--petrol-wash);color:var(--petrol-deep)}
.who{font-size:.78rem;color:var(--ink-3);text-align:start;line-height:1.3}
.who b{display:block;color:var(--ink);font-size:.85rem;font-weight:600}

main{max-width:1180px;margin:0 auto;padding:1.25rem 1rem 4rem}
.page-head{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1.1rem}
.page-head .grow{flex:1}
.muted{color:var(--ink-3)}
.small{font-size:.82rem}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ── cards / panels ────────────────────────────────────────────────── */
.card{
  background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--r);box-shadow:var(--shadow);
}
.card + .card{margin-top:1rem}
.card-head{
  padding:.75rem 1rem;border-bottom:1px solid var(--rule-soft);
  display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
}
.card-head h2,.card-head h3{flex:1}
.card-body{padding:1rem}
.card-body.tight{padding:.5rem 1rem}
.grid{display:grid;gap:1rem}
@media(min-width:900px){
  .grid-2{grid-template-columns:1fr 1fr}
  .grid-3{grid-template-columns:repeat(3,1fr)}
  .detail-grid{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
}

/* ── KPI tiles ─────────────────────────────────────────────────────── */
.kpis{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.kpi{
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);
  padding:.8rem .9rem;position:relative;overflow:hidden;
}
.kpi::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:3px;background:var(--rule)}
.kpi.is-danger::before{background:var(--danger)}
.kpi.is-warn::before{background:var(--warn)}
.kpi.is-ok::before{background:var(--ok)}
.kpi.is-info::before{background:var(--petrol)}
.kpi .k{font-size:.75rem;color:var(--ink-3);font-weight:500}
.kpi .v{font-size:1.7rem;font-weight:600;line-height:1.15;font-variant-numeric:tabular-nums}
.kpi.is-danger .v{color:var(--danger)}
.kpi.is-warn .v{color:var(--warn)}
.kpi .sub{font-size:.72rem;color:var(--ink-3)}

/* ── pills ─────────────────────────────────────────────────────────── */
.pill{
  display:inline-block;padding:.12rem .45rem;border-radius:100px;
  font-size:.74rem;font-weight:500;white-space:nowrap;
  background:var(--surface-2);color:var(--ink-2);border:1px solid var(--rule);
}
.pill.ok{background:var(--ok-wash);color:var(--ok);border-color:transparent}
.pill.warn{background:var(--warn-wash);color:var(--warn);border-color:transparent}
.pill.danger{background:var(--danger-wash);color:var(--danger);border-color:transparent}
.pill.info{background:var(--info-wash);color:var(--info);border-color:transparent}
.pill.petrol{background:var(--petrol-wash);color:var(--petrol-deep);border-color:transparent}
.pill.solid{background:var(--danger);color:#fff;border-color:transparent}

/* ── tables ────────────────────────────────────────────────────────── */
.table-wrap{overflow-x:auto}
table.data{width:100%;border-collapse:collapse;font-size:.88rem}
table.data th{
  text-align:start;font-weight:500;font-size:.72rem;letter-spacing:.05em;
  color:var(--ink-3);padding:.55rem .7rem;border-bottom:1px solid var(--rule);
  white-space:nowrap;background:var(--surface-2);
}
table.data td{padding:.6rem .7rem;border-bottom:1px solid var(--rule-soft);vertical-align:middle}
table.data tr:last-child td{border-bottom:none}
table.data tbody tr:hover{background:var(--surface-2)}
table.data a{text-decoration:none;font-weight:500}
.row-late{box-shadow:inset 3px 0 0 var(--danger)}
:dir(rtl) .row-late{box-shadow:inset -3px 0 0 var(--danger)}

/* ── forms ─────────────────────────────────────────────────────────── */
label{display:block;font-size:.82rem;font-weight:500;color:var(--ink-2);margin-bottom:.25rem}
.field,input[type=text],input[type=password],input[type=number],input[type=date],
input[type=datetime-local],select,textarea{
  width:100%;padding:.55rem .7rem;font:inherit;font-size:.92rem;
  color:var(--ink);background:var(--surface);
  border:1px solid var(--rule);border-radius:var(--r);
}
textarea{resize:vertical}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),
  linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-position:calc(0% + 14px) 55%,calc(0% + 19px) 55%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-inline-start:2rem}
.field:focus,input:focus,select:focus,textarea:focus{border-color:var(--petrol);outline:none;
  box-shadow:0 0 0 3px var(--petrol-wash)}
.form-row{margin-bottom:.85rem}
.form-grid{display:grid;gap:.85rem}
@media(min-width:640px){.form-grid.cols-2{grid-template-columns:1fr 1fr}}
.errors{color:var(--danger);font-size:.8rem;margin-top:.2rem}
.help{font-size:.78rem;color:var(--ink-3);margin-top:.2rem}
.check{display:flex;align-items:center;gap:.45rem}
.check input{width:auto}
.check label{margin:0}

/* ── buttons ───────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  padding:.55rem .9rem;border-radius:var(--r);border:1px solid var(--rule);
  background:var(--surface);color:var(--ink);font:inherit;font-size:.9rem;
  font-weight:500;cursor:pointer;text-decoration:none;min-height:40px;
}
.btn:hover{background:var(--surface-2)}
.btn.primary{background:var(--petrol);border-color:var(--petrol);color:#fff}
.btn.primary:hover{background:var(--petrol-deep);border-color:var(--petrol-deep)}
.btn.danger{background:var(--danger);border-color:var(--danger);color:#fff}
.btn.warn{background:var(--warn);border-color:var(--warn);color:#fff}
.btn.ghost{background:transparent}
.btn.wa{background:#25D366;border-color:#1da851;color:#fff}
.btn.wa:hover{background:#1da851}
.btn.block{width:100%}
.btn.big{font-size:1rem;padding:.75rem 1.1rem;min-height:48px}
.btn-row{display:flex;gap:.5rem;flex-wrap:wrap}

/* ── the action the ticket is waiting for ──────────────────────────── */
.callout{
  border:1px solid var(--rule);border-radius:var(--r);padding:.9rem 1rem;
  background:var(--surface);border-inline-start:3px solid var(--petrol);
}
.callout.warn{border-inline-start-color:var(--warn);background:var(--warn-wash)}
.callout.danger{border-inline-start-color:var(--danger);background:var(--danger-wash)}
.callout h3{margin-bottom:.3rem;font-size:.95rem}
.callout p{margin:.2rem 0 .6rem;font-size:.88rem;color:var(--ink-2)}

/* ── timeline ──────────────────────────────────────────────────────── */
.timeline{list-style:none;margin:0;padding:0}
.timeline li{
  position:relative;padding-inline-start:1.35rem;padding-bottom:.9rem;
  border-inline-start:1px solid var(--rule);margin-inline-start:.35rem;
}
.timeline li:last-child{border-inline-start-color:transparent;padding-bottom:0}
.timeline li::before{
  content:"";position:absolute;inset-inline-start:-4.5px;top:.45rem;
  width:8px;height:8px;border-radius:50%;background:var(--petrol);
}
.timeline li.sys::before{background:var(--ink-3)}
.timeline li.esc::before{background:var(--danger)}
.timeline .when{font-size:.74rem;color:var(--ink-3);font-variant-numeric:tabular-nums}
.timeline .what{font-size:.88rem}

/* ── messages ──────────────────────────────────────────────────────── */
.flash{margin-bottom:1rem;display:grid;gap:.5rem}
.flash div{
  padding:.65rem .9rem;border-radius:var(--r);font-size:.9rem;
  border-inline-start:3px solid var(--petrol);background:var(--petrol-wash);color:var(--ink);
}
.flash .error{border-inline-start-color:var(--danger);background:var(--danger-wash)}
.flash .warning{border-inline-start-color:var(--warn);background:var(--warn-wash)}
.flash .success{border-inline-start-color:var(--ok);background:var(--ok-wash)}

/* ── filters ───────────────────────────────────────────────────────── */
.tabs{display:flex;gap:.3rem;flex-wrap:wrap;margin-bottom:.8rem}
.tabs a{
  padding:.35rem .75rem;border-radius:100px;text-decoration:none;font-size:.85rem;
  color:var(--ink-2);border:1px solid var(--rule);background:var(--surface);
}
.tabs a.on{background:var(--petrol);border-color:var(--petrol);color:#fff;font-weight:500}
.filters{display:grid;gap:.5rem;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  align-items:end}

/* ── misc ──────────────────────────────────────────────────────────── */
.dl{display:grid;grid-template-columns:auto 1fr;gap:.35rem .8rem;font-size:.88rem;margin:0}
.dl dt{color:var(--ink-3);font-size:.8rem}
.dl dd{margin:0}
.empty{padding:2.5rem 1rem;text-align:center;color:var(--ink-3)}
.empty p{margin:.4rem 0 1rem}
.pager{display:flex;gap:.4rem;justify-content:center;margin-top:1rem;flex-wrap:wrap}
.pager a,.pager span{padding:.35rem .7rem;border-radius:var(--r);border:1px solid var(--rule);
  text-decoration:none;font-size:.85rem;background:var(--surface)}
.pager .cur{background:var(--petrol);border-color:var(--petrol);color:#fff}
details.panel{border:1px solid var(--rule);border-radius:var(--r);background:var(--surface);
  margin-top:.6rem}
details.panel>summary{padding:.6rem .9rem;cursor:pointer;font-weight:500;font-size:.9rem;
  list-style:none}
details.panel>summary::-webkit-details-marker{display:none}
details.panel>summary::before{content:"▸ ";color:var(--ink-3)}
details.panel[open]>summary::before{content:"▾ "}
details.panel>div{padding:0 .9rem .9rem}
.thumbs{display:flex;gap:.5rem;flex-wrap:wrap}
.thumbs img{width:90px;height:90px;object-fit:cover;border-radius:var(--r);
  border:1px solid var(--rule)}
.banner-mode{
  background:var(--warn-wash);color:var(--warn);font-size:.8rem;
  padding:.35rem 1rem;text-align:center;border-bottom:1px solid var(--rule);
}

@media(max-width:640px){
  .topbar-in{padding:.5rem .75rem;gap:.5rem}
  .who{display:none}
  main{padding:1rem .75rem 4rem}
  h1{font-size:1.25rem}
  nav.main{width:100%;order:3;margin-inline-start:0;overflow-x:auto}
}