/* RJA Design System — petrol premium identity, RTL-first */
:root{
  --petrol:#082C34; --petrol2:#10434B; --teal:#287A80; --teal-l:#3aa5ab;
  --mist:#D5E4E2; --paper:#F4F7F6;
  --bg:#082C34; --bg2:#0a3540; --card:#0e3b47; --card2:#0a303a;
  --ink:#F4F7F6; --muted:#9dbfc2; --line:#1c5561;
  --ok:#4ade80; --warn:#f5c542; --err:#f87171; --pink:#e6a9b3;
  --shadow:0 10px 26px rgba(0,0,0,.35);
  --r:14px;
}
[data-theme="light"]{
  --bg:#F4F7F6; --bg2:#EDF3F2; --card:#ffffff; --card2:#f7fbfa;
  --ink:#0d2b33; --muted:#52747a; --line:#D5E4E2;
  --shadow:0 8px 20px rgba(8,44,52,.10);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:radial-gradient(1200px 500px at 50% -100px,var(--petrol2),var(--bg)) fixed,var(--bg);color:var(--ink);font-family:"Almarai","Segoe UI",Tahoma,Arial,sans-serif;line-height:1.7}
h1,.sidelogo span,.kpi{font-family:"Amiri","Almarai",serif}
[data-theme="light"] body{background:var(--bg)}
body::after{content:'';position:fixed;inset:0;background:url('logo.jpg') center 30%/min(520px,80vw) no-repeat;opacity:.05;pointer-events:none;z-index:0}
[data-theme="light"] body::after{opacity:.04}
.shell{display:flex;min-height:100vh;position:relative;z-index:1}
/* Sidebar — brand petrol in both themes */
.side{width:260px;flex:0 0 260px;background:linear-gradient(180deg,#061f26,#10434B);border-inline-end:1px solid rgba(213,228,226,.14);padding:18px 14px;position:sticky;top:0;height:100vh;overflow:auto;display:flex;flex-direction:column;gap:4px;color:#EDF3F2}
.sidelogo{display:flex;align-items:center;gap:12px;padding:4px 8px 14px;border-bottom:1px solid rgba(213,228,226,.14);margin-bottom:10px;text-decoration:none}
.sidelogo img{width:62px;height:62px;object-fit:cover;border-radius:50%;border:2px solid var(--mist);box-shadow:0 0 14px rgba(58,165,171,.45)}
.sidelogo span{font-weight:800;font-size:19px;color:#fff;letter-spacing:.5px}
.sidelogo small{display:block;font-size:11px;color:#9dbfc2;font-weight:400}
.navgroup{font-size:12px;color:#9dbfc2;padding:10px 10px 4px;letter-spacing:.4px}
.sidenav{display:flex;flex-direction:column;gap:3px}
.sidenav a{color:#d7e6e9;text-decoration:none;padding:9px 12px;border-radius:10px;font-size:14px;border:1px solid transparent;transition:background .15s}
.sidenav a:hover{background:rgba(58,165,171,.14);color:#fff}
.sidenav a.on{background:linear-gradient(90deg,rgba(58,165,171,.30),rgba(58,165,171,.10));border-color:rgba(58,165,171,.45);color:#fff;font-weight:700}
.sidefoot{margin-top:auto;display:flex;gap:8px;padding-top:12px;flex-wrap:wrap}
.lang,.themebtn{color:var(--teal-l);text-decoration:none;border:1px solid rgba(58,165,171,.5);padding:6px 14px;border-radius:20px;font-size:13px;background:transparent;cursor:pointer;font-family:inherit}
.wrap{flex:1;min-width:0;max-width:1150px;margin:0 auto;padding:24px 20px 60px}
h1{font-size:25px;margin:6px 0 16px;font-weight:800}
h1::after{content:'';display:block;width:64px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--teal-l),transparent);margin-top:8px}
h2{font-size:18px;color:var(--teal-l);margin:0 0 10px}
[data-theme="light"] h2{color:var(--teal)}
.card{background:linear-gradient(180deg,var(--card),var(--card2));border:1px solid var(--line);border-radius:var(--r);padding:18px;margin:0 0 16px;box-shadow:var(--shadow)}
.grid{display:grid;gap:14px;margin-bottom:16px}
@media(min-width:760px){.grid{grid-template-columns:repeat(3,1fr)}}
.kpi{font-size:30px;font-weight:800}
.kpi small{font-size:13px;color:var(--muted);font-weight:400}
.muted{color:var(--muted);font-size:13px}
.tblwrap{overflow:auto;border-radius:10px}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:start}
th{background:rgba(40,122,128,.14);color:inherit;font-weight:700;white-space:nowrap}
tbody tr:hover{background:rgba(40,122,128,.07)}
input,select,textarea{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;font-size:14px;background:var(--bg2);color:var(--ink);font-family:inherit}
input:focus,select:focus,textarea:focus{outline:2px solid var(--teal-l);outline-offset:0;border-color:var(--teal-l)}
label{font-size:13px;color:var(--muted);font-weight:700;display:block;margin:8px 0 4px}
.btn{background:linear-gradient(180deg,#3aa5ab,var(--teal));border:0;color:#fff;font-weight:700;padding:10px 20px;border-radius:10px;cursor:pointer;font-size:15px;font-family:inherit;transition:filter .15s}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--ink)}
.actions{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.flash{padding:11px 15px;border-radius:10px;border:1px solid transparent}
.flash.ok{background:rgba(74,222,128,.12);color:var(--ok);border-color:rgba(74,222,128,.3)}
.flash.err{background:rgba(248,113,113,.12);color:var(--err);border-color:rgba(248,113,113,.3)}
.badge{display:inline-block;padding:3px 12px;border-radius:20px;font-size:12px;background:rgba(40,122,128,.16);font-weight:700}
.badge.posted{background:rgba(74,222,128,.16);color:var(--ok)}
.badge.reversed{background:rgba(230,169,179,.16);color:var(--pink)}
.badge.closed{background:rgba(248,113,113,.16);color:var(--err)}
.foot{text-align:center;color:var(--muted);padding:22px;font-size:13px}
.loginbox{max-width:430px;margin:6vh auto;text-align:center}
.loginlogo{width:118px;height:118px;object-fit:cover;border-radius:50%;border:3px solid var(--mist);box-shadow:0 0 26px rgba(58,165,171,.45);margin-bottom:6px}
.loginbox form{text-align:start}
.row2{display:grid;gap:12px}
@media(min-width:700px){.row2{grid-template-columns:1fr 1fr}}
.line{display:grid;grid-template-columns:2fr 1fr 1fr auto;gap:8px;align-items:end;margin-bottom:8px}
a{color:var(--teal-l)}
[data-theme="light"] a{color:var(--teal)}
code{background:rgba(40,122,128,.14);padding:2px 8px;border-radius:6px;font-size:13px}
pre{background:var(--bg2);padding:12px;border-radius:10px;border:1px solid var(--line);overflow:auto}
.noprint-show{display:none}
@media(max-width:880px){
  .shell{flex-direction:column}
  .side{width:100%;flex:none;height:auto;position:static}
  .sidenav{flex-direction:row;overflow:auto;padding-bottom:4px}
  .sidenav a{white-space:nowrap}
  .navgroup{display:none}
  .sidefoot{margin-top:8px}
  .line{grid-template-columns:1fr 1fr}
}
@media print{
  body{background:#fff;color:#000}
  body::after{display:none}
  .side,.actions,.foot,.flash,.noprint,.themebtn{display:none}
  .wrap{max-width:none}
  .card{background:#fff;border-color:#ccc;box-shadow:none}
  h1,h2,.kpi,th{color:#000}
  td,th{border-color:#ccc}
  a{color:#000;text-decoration:none}
}