/* ==========================================================================
   Unified Non-Saudi Patient Discharge & Repatriation
   Executive reporting theme — light and dark, RTL and LTR.
   Layout uses logical properties throughout so direction flips cleanly.
   ========================================================================== */

:root{
  --navy:#0B2A3D; --navy-2:#103F56; --gold:#C9A227;
  --accent:#0F766E; --accent-2:#12907F; --accent-soft:#E6F2EF;
  --bg:#F4F6F9; --card:#FFFFFF; --card-2:#FAFBFD;
  --ink:#0F172A; --ink-2:#334155; --muted:#64748B; --faint:#94A3B8;
  --line:#E3E8EF; --line-2:#EEF2F7;
  --ok:#15803D; --ok-bg:#DCFCE7; --ok-ink:#14532D;
  --warn:#B45309; --warn-bg:#FEF3C7; --warn-ink:#78350F;
  --bad:#B91C1C; --bad-bg:#FEE2E2; --bad-ink:#7F1D1D;
  --info-bg:#DBEAFE; --info-ink:#1E3A8A;
  --r:10px; --sh:0 1px 2px rgba(15,23,42,.05),0 1px 3px rgba(15,23,42,.04);
  --sh-lg:0 4px 16px rgba(11,42,61,.08);
}

[data-theme="dark"]{
  --navy:#0A1A24; --navy-2:#0E2836; --gold:#D4AF37;
  --accent:#2DD4BF; --accent-2:#5EEAD4; --accent-soft:#0F2E2C;
  --bg:#0B1219; --card:#111C25; --card-2:#0E1821;
  --ink:#E8EEF4; --ink-2:#C3CFDA; --muted:#8FA3B4; --faint:#6B808F;
  --line:#1E2E3B; --line-2:#182530;
  --ok:#4ADE80; --ok-bg:#052E16; --ok-ink:#86EFAC;
  --warn:#FBBF24; --warn-bg:#3B2508; --warn-ink:#FCD34D;
  --bad:#F87171; --bad-bg:#3B0D0D; --bad-ink:#FCA5A5;
  --info-bg:#0C2545; --info-ink:#93C5FD;
  --sh:0 1px 2px rgba(0,0,0,.35); --sh-lg:0 6px 22px rgba(0,0,0,.45);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"IBM Plex Sans Arabic","Segoe UI",Tahoma,system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  background:var(--bg); color:var(--ink); font-size:15px; line-height:1.7;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1440px;margin:0 auto;padding:0 22px 64px}
h1,h2,h3{margin:0}

/* ---------- masthead ---------- */
.topbar{background:var(--navy);color:#fff;border-bottom:2px solid var(--gold)}
.topbar .inner{max-width:1440px;margin:0 auto;padding:9px 22px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.brand{font-weight:700;font-size:14.5px;line-height:1.3}
.brand small{display:block;font-weight:600;font-size:10px;opacity:.6;letter-spacing:1.1px;text-transform:uppercase}
.topnav{display:flex;gap:2px;margin-inline-start:auto;flex-wrap:wrap}
.topnav a{color:#B6C6D2;padding:7px 13px;border-radius:7px;font-size:13.5px;font-weight:500}
.topnav a:hover{background:rgba(255,255,255,.08);color:#fff;text-decoration:none}
.topnav a.on{background:var(--accent);color:#fff}
.tools{display:flex;gap:6px;align-items:center}
.tool{color:#B6C6D2;border:1px solid rgba(255,255,255,.18);border-radius:7px;padding:5px 10px;font-size:12px;font-weight:600;background:none;cursor:pointer;font-family:inherit}
.tool:hover{background:rgba(255,255,255,.1);color:#fff;text-decoration:none}
.who{font-size:11.5px;color:#8FA8B6;border-inline-start:1px solid rgba(255,255,255,.15);padding-inline-start:14px;line-height:1.45}
.who b{color:#DDE6EC;display:block;font-size:12.5px;font-weight:600}

/* ---------- official report header ---------- */
.masthead{
  background:linear-gradient(135deg,var(--navy),var(--navy-2));color:#fff;
  border-radius:var(--r);margin:20px 0 0;padding:20px 28px;position:relative;
  border-top:3px solid var(--gold);box-shadow:var(--sh-lg);
  display:flex;flex-direction:column;align-items:flex-start;
}
.masthead > *{max-width:100%}
.masthead .org{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--gold);font-weight:700}
.masthead h1{font-size:25px;font-weight:700;letter-spacing:-.3px;margin:7px 0 5px}
.masthead .sub{color:#A6BECC;font-size:13px;max-width:70ch}
.masthead .rule{height:1px;background:rgba(255,255,255,.14);margin:16px 0 13px;align-self:stretch}
.masthead .meta{display:flex;gap:26px;flex-wrap:wrap;font-size:12px;color:#8FA8B6;width:100%}
.masthead .meta b{display:block;color:#E2EAF0;font-weight:600;font-size:12.5px;margin-top:2px}
.classif{align-self:flex-end;margin-bottom:10px;font-size:9.5px;font-weight:700;letter-spacing:1.4px;
  color:var(--gold);border:1px solid rgba(201,162,39,.45);border-radius:4px;padding:4px 10px;
  background:rgba(201,162,39,.08);white-space:nowrap}

/* ---------- executive summary ---------- */
.summary{
  background:var(--card);border:1px solid var(--line);border-inline-start:3px solid var(--accent);
  border-radius:var(--r);padding:15px 20px;margin-top:16px;box-shadow:var(--sh);font-size:14.5px;color:var(--ink-2);
}
.summary b{color:var(--ink);font-weight:700}
.summary .h{font-size:10.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:5px}

/* ---------- section headings ---------- */
.sec{display:flex;align-items:baseline;gap:10px;margin:26px 0 12px}
.sec h2{font-size:12px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--ink-2)}
.sec .note{font-size:11.5px;color:var(--faint);font-weight:400;letter-spacing:0;text-transform:none}
.sec::before{content:"";width:3px;height:14px;background:var(--accent);border-radius:2px;flex:none;align-self:center}

/* ---------- cards ---------- */
.grid{display:grid;gap:13px}
.g4{grid-template-columns:repeat(4,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
.g7{grid-template-columns:repeat(7,1fr)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;box-shadow:var(--sh)}
.card h3{font-size:12px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;color:var(--ink-2);margin-bottom:14px}

.kpi{position:relative;padding-inline-start:20px;overflow:hidden}
.kpi::before{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:4px;background:var(--accent)}
.kpi .lbl{font-size:11px;letter-spacing:.9px;text-transform:uppercase;color:var(--muted);font-weight:700}
.kpi .n{font-size:36px;font-weight:700;line-height:1.05;letter-spacing:-1.4px;margin:7px 0 3px;font-variant-numeric:tabular-nums}
.kpi .n.sm{font-size:19px;letter-spacing:-.3px;padding:8px 0 5px}
.kpi .s{font-size:12px;color:var(--muted)}
.kpi.good::before{background:var(--ok)} .kpi.good .n{color:var(--ok)}
.kpi.warn::before{background:var(--warn)} .kpi.warn .n{color:var(--warn)}
.kpi.bad::before{background:var(--bad)}  .kpi.bad .n{color:var(--bad)}

/* ---------- journey ---------- */
.step{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:12px 13px;box-shadow:var(--sh);position:relative}
.step .i{font-size:10px;color:var(--faint);font-weight:700;letter-spacing:.8px}
.step .l{font-size:12px;font-weight:600;color:var(--ink-2);min-height:32px;margin-top:3px;line-height:1.35}
.step .n{font-size:24px;font-weight:700;margin-top:5px;font-variant-numeric:tabular-nums}
.step .track{height:3px;background:var(--line-2);border-radius:2px;margin-top:9px;overflow:hidden}
.step .track i{display:block;height:100%;background:var(--accent)}

/* ---------- charts ---------- */
.bars{display:flex;align-items:flex-end;gap:14px;height:180px;padding:4px 2px 0}
.bar{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%}
.bar .v{font-size:12.5px;font-weight:700;margin-bottom:5px;font-variant-numeric:tabular-nums}
.bar .fill{width:100%;max-width:64px;border-radius:3px 3px 0 0;min-height:3px}
.bar .lb{font-size:10.5px;color:var(--muted);text-align:center;margin-top:8px;min-height:32px;line-height:1.35}

.trend{display:flex;align-items:flex-end;gap:18px;height:170px;padding:4px 2px 0}
.tcol{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%}
.tpair{display:flex;align-items:flex-end;gap:4px;width:100%;justify-content:center;height:100%}
.tpair span{width:26%;max-width:22px;border-radius:3px 3px 0 0;min-height:3px}
.tcol .lb{font-size:10.5px;color:var(--muted);margin-top:8px;white-space:nowrap}
.legend{display:flex;gap:16px;font-size:11.5px;color:var(--muted);margin-top:10px}
.legend i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-inline-end:5px}

.rowbar{display:flex;align-items:center;gap:11px;margin:10px 0}
.rowbar .k{width:120px;font-size:12px;color:var(--ink-2);flex:none}
.rowbar .track{flex:1;height:8px;background:var(--line-2);border-radius:99px;overflow:hidden}
.rowbar .track i{display:block;height:100%;background:var(--accent-2);border-radius:99px}
.rowbar .v{width:36px;text-align:end;font-size:12.5px;font-weight:700;flex:none;font-variant-numeric:tabular-nums}

/* ---------- filters & forms ---------- */
.filters{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:12px;display:flex;gap:9px;flex-wrap:wrap;box-shadow:var(--sh);align-items:end;margin-top:16px}
label{display:block;font-size:11.5px;font-weight:600;color:var(--ink-2);margin-bottom:5px}
select,input[type=text],input[type=date],input[type=number],input[type=password],textarea{
  font:inherit;font-size:13.5px;padding:8px 11px;border:1px solid var(--line);border-radius:8px;
  background:var(--card);color:var(--ink);width:100%;
}
[data-theme="dark"] select,[data-theme="dark"] input,[data-theme="dark"] textarea{background:var(--card-2)}
select:focus,input:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
textarea{min-height:80px;resize:vertical}
.f{min-width:165px;flex:1}
.btn{display:inline-block;font:inherit;font-size:13.5px;font-weight:600;padding:9px 17px;border-radius:8px;border:1px solid transparent;cursor:pointer;background:var(--accent);color:#fff}
.btn:hover{filter:brightness(1.08);text-decoration:none}
[data-theme="dark"] .btn{color:#07211E}
.btn.ghost{background:var(--card);color:var(--ink-2);border-color:var(--line)}
.btn.ghost:hover{background:var(--card-2);filter:none}
.btn.dark{background:var(--navy);color:#fff}
.btn.sm{padding:6px 11px;font-size:12.5px}
.btn.danger{background:var(--bad);color:#fff}
.frow{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:14px}
.frow.two{grid-template-columns:repeat(2,1fr)}
.frow.one{grid-template-columns:1fr}
.hint{font-size:11.5px;color:var(--muted);margin-top:4px}
.req{color:var(--bad)}

/* ---------- tables ---------- */
.tbl{width:100%;border-collapse:collapse;background:var(--card);font-size:13px}
.tbl th{text-align:start;font-size:10.5px;letter-spacing:.7px;text-transform:uppercase;color:var(--muted);font-weight:700;padding:11px 12px;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--card-2)}
.tbl td{padding:10px 12px;border-bottom:1px solid var(--line-2);vertical-align:middle}
.tbl tr:last-child td{border-bottom:none}
.tbl tbody tr:hover td{background:var(--card-2)}
.tbl .num{font-variant-numeric:tabular-nums;font-weight:600}
.tblwrap{border:1px solid var(--line);border-radius:var(--r);overflow:auto;box-shadow:var(--sh)}
.empty{padding:44px;text-align:center;color:var(--muted);background:var(--card)}
.rank{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:5px;background:var(--line-2);color:var(--ink-2);font-size:11px;font-weight:700;margin-inline-end:8px}

.pill{display:inline-block;font-size:11px;font-weight:700;padding:3px 9px;border-radius:99px;white-space:nowrap}
.sla-ok{background:var(--ok-bg);color:var(--ok-ink)}
.sla-warn{background:var(--warn-bg);color:var(--warn-ink)}
.sla-bad{background:var(--bad-bg);color:var(--bad-ink)}
.p-High{background:var(--bad-bg);color:var(--bad-ink)}
.p-Medium{background:var(--warn-bg);color:var(--warn-ink)}
.p-Low{background:var(--line-2);color:var(--ink-2)}
.st-Active{background:var(--info-bg);color:var(--info-ink)}
.st-Resolved{background:var(--ok-bg);color:var(--ok-ink)}

.msg{padding:11px 15px;border-radius:9px;margin:14px 0;font-size:13.5px;font-weight:500}
.msg.ok{background:var(--ok-bg);color:var(--ok-ink);border:1px solid var(--ok)}
.msg.err{background:var(--bad-bg);color:var(--bad-ink);border:1px solid var(--bad)}
.msg.warn{background:var(--warn-bg);color:var(--warn-ink);border:1px solid var(--warn)}
.msg ul{margin:6px 0 0;padding-inline-start:20px}

/* ---------- login ---------- */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--navy),var(--navy-2));padding:20px}
.login{background:var(--card);border-radius:14px;padding:34px;width:100%;max-width:420px;box-shadow:0 24px 60px rgba(0,0,0,.35);border-top:3px solid var(--gold)}
.login .org{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--accent);font-weight:700}
.login h1{font-size:18px;margin:7px 0 4px}
.login .sub{color:var(--muted);font-size:12.5px;margin-bottom:22px}
.login .fld{margin-bottom:14px}
.login .alt{margin-top:18px;text-align:center;font-size:12px;color:var(--muted)}

.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:18px 0;flex-wrap:wrap}
.tabs a{padding:9px 15px;font-size:13.5px;font-weight:600;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs a.on{color:var(--accent);border-bottom-color:var(--accent);text-decoration:none}

.dl{display:grid;grid-template-columns:210px 1fr;gap:0}
.dl dt{padding:9px 0;font-size:12.5px;color:var(--muted);border-bottom:1px solid var(--line-2);font-weight:600}
.dl dd{padding:9px 0;margin:0;font-size:13.5px;border-bottom:1px solid var(--line-2)}
.tl{list-style:none;padding:0;margin:0}
.tl li{padding:10px 0;border-inline-start:2px solid var(--line);padding-inline-start:16px;position:relative;font-size:13px}
.tl li::before{content:"";position:absolute;inset-inline-start:-5px;top:15px;width:8px;height:8px;border-radius:99px;background:var(--accent)}
.tl .w{font-size:11.5px;color:var(--muted)}
.mono{font-family:ui-monospace,Consolas,"Cascadia Mono",monospace;font-size:12px}
.was{color:var(--faint);text-decoration:line-through}

.docfoot{margin-top:34px;padding-top:14px;border-top:1px solid var(--line);font-size:11.5px;color:var(--faint);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

@media(max-width:1150px){
  .g4{grid-template-columns:repeat(2,1fr)}
  .g7{grid-template-columns:repeat(4,1fr)}
  .g3,.g2{grid-template-columns:1fr}
  .frow,.frow.two{grid-template-columns:1fr}
  .dl{grid-template-columns:1fr}
}
@media(max-width:620px){
  .g4,.g7{grid-template-columns:1fr}
  .masthead h1{font-size:19px}
  .rowbar .k{width:92px}
}

@media print{
  .topbar,.filters,.btn,.tabs,.tool,.docfoot .noprint{display:none!important}
  body{background:#fff;color:#000;font-size:11pt}
  .wrap{max-width:none;padding:0}
  .masthead{background:#0B2A3D!important;-webkit-print-color-adjust:exact;print-color-adjust:exact;box-shadow:none}
  .card,.step,.tblwrap{box-shadow:none;break-inside:avoid}
  .sec{break-after:avoid}
}

/* ==========================================================================
   Motion layer
   Every animated element renders in its final state by default. The .anim
   class is added by app.js only when the visitor has not asked for reduced
   motion, so with JS blocked — or reduced motion on — the page is simply
   static and complete. Print is always static.
   ========================================================================== */

.bar .fill        { height: var(--h, 0%) }
.tpair span       { height: var(--h, 0%) }
.rowbar .track i  { width:  var(--w, 0%) }
.step .track i    { width:  var(--w, 0%) }

.card, .step, .btn, .tbl tbody tr, .topnav a, .tool, .tabs a{
  transition: transform .22s cubic-bezier(.22,.8,.28,1), box-shadow .22s ease,
              background-color .18s ease, border-color .18s ease, color .18s ease;
}
.card:hover, .step:hover{ transform: translateY(-2px); box-shadow: var(--sh-lg) }
.btn:active{ transform: translateY(1px) }
:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px }

/* live indicator */
.live-dot{ display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent-2);
  margin-inline-end:6px;vertical-align:middle }

.anim .live-dot{ animation: pulse 2.4s ease-in-out infinite }
@keyframes pulse{ 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.35;transform:scale(.78)} }

/* one restrained sheen across the masthead on arrival */
.anim .masthead::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.10) 48%,rgba(201,162,39,.14) 52%,transparent 62%);
  transform:translateX(-120%); animation: sheen 2.1s cubic-bezier(.4,0,.2,1) .35s 1 forwards;
}
@keyframes sheen{ to{ transform:translateX(120%) } }

/* staggered entrance */
.anim .reveal{ opacity:0; transform:translateY(12px);
  transition: opacity .55s cubic-bezier(.22,.8,.28,1), transform .55s cubic-bezier(.22,.8,.28,1) }
.anim .reveal.in{ opacity:1; transform:none }

/* charts grow into place once their section is on screen */
.anim .bar .fill, .anim .tpair span{ height:0; transition: height .8s cubic-bezier(.22,.8,.28,1) }
.anim .bar .fill.grow, .anim .tpair span.grow{ height: var(--h, 0%) }
.anim .rowbar .track i, .anim .step .track i{ width:0; transition: width .85s cubic-bezier(.22,.8,.28,1) }
.anim .rowbar .track i.grow, .anim .step .track i.grow{ width: var(--w, 0%) }

/* table rows settle in */
.anim tbody tr.rin{ opacity:0; transform:translateY(6px);
  transition: opacity .4s ease, transform .4s cubic-bezier(.22,.8,.28,1) }
.anim tbody tr.rin.in{ opacity:1; transform:none }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation:none!important; transition:none!important }
  .reveal{ opacity:1!important; transform:none!important }
}
@media print{
  .reveal{ opacity:1!important; transform:none!important }
  tbody tr.rin{ opacity:1!important; transform:none!important }
  .masthead::after{ display:none!important }
  .bar .fill{ height:var(--h,0%)!important }
  .tpair span{ height:var(--h,0%)!important }
  .rowbar .track i,.step .track i{ width:var(--w,0%)!important }
}

/* ==========================================================================
   Typography comfort
   Arabic is a connected script: letter-spacing pulls the joins apart and
   uppercase transforms do nothing, so both are switched off in RTL. Line
   height and cell padding are loosened so nothing reads as cramped.
   ========================================================================== */

html[lang="ar"] body{ font-size:15.5px; line-height:1.85 }
html[lang="ar"] .masthead h1{ line-height:1.5 }

html[dir="rtl"] .brand small, html[dir="rtl"] .masthead .org, html[dir="rtl"] .login .org,
html[dir="rtl"] .sec h2, html[dir="rtl"] .card h3, html[dir="rtl"] .kpi .lbl,
html[dir="rtl"] .tbl th, html[dir="rtl"] .classif, html[dir="rtl"] .summary .h,
html[dir="rtl"] .step .i, html[dir="rtl"] .rdoc .sechead .no, html[dir="rtl"] .rdoc .sechead h2,
html[dir="rtl"] .masthead h1, html[dir="rtl"] .kpi .n, html[dir="rtl"] .step .n,
html[dir="rtl"] .pill, html[dir="rtl"] .tabs a, html[dir="rtl"] .btn{
  letter-spacing:normal;
}
html[dir="rtl"] .brand small, html[dir="rtl"] .masthead .org, html[dir="rtl"] .login .org,
html[dir="rtl"] .sec h2, html[dir="rtl"] .card h3, html[dir="rtl"] .kpi .lbl,
html[dir="rtl"] .tbl th, html[dir="rtl"] .classif, html[dir="rtl"] .summary .h{
  text-transform:none;
}
html[dir="rtl"] .sec h2, html[dir="rtl"] .card h3, html[dir="rtl"] .tbl th,
html[dir="rtl"] .kpi .lbl{ font-size:13px }
html[dir="rtl"] .classif{ font-size:11px }

/* roomier reading rhythm everywhere */
.tbl{ font-size:13.5px }
.tbl th{ padding:12px 14px; line-height:1.5 }
.tbl td{ padding:12px 14px; line-height:1.6 }
html[lang="ar"] .tbl td{ line-height:1.75 }
.dl dt, .dl dd{ padding:11px 0; line-height:1.7 }
.pill{ padding:4px 11px; line-height:1.6 }
.card{ padding:18px 20px }
.card h3{ margin-bottom:16px; line-height:1.6 }
.kpi .lbl{ line-height:1.6 }
.kpi .s{ line-height:1.6; margin-top:4px }
.step .l{ min-height:38px; line-height:1.5 }
.bar .lb{ min-height:38px; line-height:1.5; font-size:11.5px }
.summary{ line-height:1.85; padding:17px 22px }
.hint{ line-height:1.65 }
label{ font-size:12.5px; line-height:1.6; margin-bottom:6px }
.masthead .sub{ line-height:1.75 }
.masthead .meta{ gap:30px; line-height:1.7 }
.obs li{ line-height:1.85; margin-bottom:9px }
.tl li{ line-height:1.75 }
select, input[type=text], input[type=date], input[type=number], input[type=password], textarea{
  font-size:14px; padding:10px 12px; line-height:1.6;
}
.perm{ line-height:1.6; padding:10px 12px }
.summary{ font-size:inherit }

/* ==========================================================================
   Phone and tablet
   Tables keep their own horizontal scroller so the page body never scrolls
   sideways. Form controls go to 16px below 768px because iOS Safari zooms
   the viewport when focusing anything smaller.
   ========================================================================== */

@media (max-width:900px){
  .wrap{padding:0 14px 48px}
  .masthead{padding:16px 18px;margin-top:14px}
  .masthead h1{font-size:20px}
  html[lang="ar"] .masthead h1{font-size:19px}
  .masthead .meta{gap:16px 22px;font-size:11.5px}
  .card{padding:15px 16px}
  .topbar .inner{padding:9px 14px;gap:10px}
  .topnav{margin-inline-start:0;width:100%;order:3}
  .who{border:0;padding-inline-start:0;order:2;margin-inline-start:auto;text-align:end}
  .tools{order:2}
  .filters,.rtoolbar{padding:10px}
  .f{min-width:100%}
  .sec{margin:20px 0 10px}
}

@media (max-width:768px){
  select,input[type=text],input[type=date],input[type=number],input[type=password],textarea{
    font-size:16px;                 /* stops iOS Safari zooming on focus */
  }
  .btn{padding:11px 18px;min-height:44px}      /* comfortable touch targets */
  .btn.sm{padding:9px 13px;min-height:38px}
  .topnav a{padding:9px 12px}
  .tabs a{padding:11px 14px}
  .perm{padding:12px}
  .tbl th,.tbl td{padding:11px 12px}
  .bars{height:150px;gap:8px}
  .trend{height:140px;gap:10px}
  .rowbar .k{width:96px;font-size:11.5px}
  .dl{grid-template-columns:1fr}
  .dl dt{padding-bottom:0;color:var(--muted)}
  .dl dd{padding-top:2px;border-bottom:1px solid var(--line-2)}
  .sign{grid-template-columns:1fr;gap:14px}
  .permtags{max-width:none}
}

@media (max-width:520px){
  .masthead .meta > div{min-width:45%}
  .g7{grid-template-columns:repeat(2,1fr)}
  .bar .lb{font-size:10px;min-height:44px}
  .kpi .n{font-size:30px}
  .classif{align-self:flex-start}
}

/* Older engines ignore `dvh`; the `vh` line before it stays in force. */
.login-wrap{min-height:100vh}
@supports (min-height:100dvh){ .login-wrap{min-height:100dvh} }

/* Never let a wide element push the page sideways on a phone. */
html,body{max-width:100%;overflow-x:hidden}
.tblwrap{-webkit-overflow-scrolling:touch}
img,svg,table{max-width:100%}