/* ==========================================================================
   Tamam & Safi — shared design system
   RTL-first. Tokens on :root; each app sets --accent* on <html data-app>.
   Status is never colour-only: badges carry an icon glyph and a label.
   ========================================================================== */
:root{
  --font: "IBM Plex Sans Arabic","Segoe UI",Tahoma,system-ui,-apple-system,sans-serif;
  --bg:#f6f7f9; --surface:#ffffff; --surface-2:#f1f3f6; --border:#e3e7ec; --border-strong:#c9d0d9;
  --text:#1b2430; --text-2:#4b5563; --muted:#6b7280; --muted-2:#9aa3ad;
  --pos:#0f7a4a; --pos-bg:#e6f6ee; --neg:#b42318; --neg-bg:#fdecea; --warn:#9a5b00; --warn-bg:#fff4e0;
  --info:#0b5cad; --info-bg:#e8f1fb; --est:#6d4fb3; --est-bg:#f0ebfa;
  --radius:12px; --radius-sm:8px; --shadow:0 1px 2px rgba(16,24,40,.05),0 1px 3px rgba(16,24,40,.06);
  --accent:#0f766e; --accent-2:#115e59; --accent-bg:#e6f4f2; --accent-text:#fff;
  --sidebar-w:248px;
}
html[data-app="tamam"]{ --accent:#8b5e3c; --accent-2:#6f4a2e; --accent-bg:#f6efe9; }
html[data-app="safi"]{ --accent:#0f766e; --accent-2:#115e59; --accent-bg:#e6f4f2; }
html[data-app="admin"]{ --accent:#1f2a44; --accent-2:#141c30; --accent-bg:#e9ecf3; }
*{box-sizing:border-box} html,body{margin:0;padding:0}
body{font-family:var(--font);background:var(--bg);color:var(--text);font-size:15px;line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none} a:hover{text-decoration:underline}
h1,h2,h3,h4{margin:0 0 .5rem;line-height:1.35;font-weight:700} h1{font-size:1.45rem} h2{font-size:1.15rem} h3{font-size:1rem}
p{margin:0 0 .75rem} small,.small{font-size:.85rem} .muted{color:var(--muted)} .muted-2{color:var(--muted-2)}
.num{font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate;display:inline-block}
/* `.num` is used both inline (<b class="num">) and on table cells. inline-block is
   right for the first and ruinous for the second: a <td class="num"> stops being a
   table cell, flows inline with its neighbours and wraps to a second line when it
   does not fit — which is why the fees table showed a column stranded below its row. */
th.num,td.num{display:table-cell}
.pos{color:var(--pos)} .neg{color:var(--neg)} .warn{color:var(--warn)}
/* ---------- layout */
.shell{display:grid;grid-template-columns:var(--sidebar-w) 1fr;min-height:100vh}
.sidebar{background:var(--surface);border-inline-end:1px solid var(--border);padding:1rem .9rem;position:sticky;top:0;height:100vh;overflow:auto}
.brand{display:flex;align-items:center;gap:.6rem;padding:.4rem .5rem 1rem;border-bottom:1px solid var(--border);margin-bottom:.8rem}
.brand .logo{width:36px;height:36px;border-radius:10px;background:var(--accent);color:#fff;display:grid;place-items:center;font-weight:800;font-size:1.1rem}
.brand img.logo{background:none;object-fit:contain;flex:none}
.brand .name{font-weight:800;font-size:1.05rem} .brand .store{font-size:.8rem;color:var(--muted);max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav a{display:flex;align-items:center;gap:.55rem;padding:.55rem .7rem;border-radius:var(--radius-sm);color:var(--text-2);margin-bottom:2px}
.nav a:hover{background:var(--surface-2);text-decoration:none} .nav a.active{background:var(--accent-bg);color:var(--accent);font-weight:700}
.nav .sep{margin:.7rem .5rem .35rem;font-size:.72rem;color:var(--muted-2);text-transform:uppercase;letter-spacing:.06em}
.nav .ico{width:20px;text-align:center;opacity:.8}
.main{padding:1.25rem 1.5rem 3rem;min-width:0}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.1rem;flex-wrap:wrap}
.topbar .crumbs{color:var(--muted);font-size:.85rem}
.menu-btn{display:none}
/* ---------- cards & grids */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:1rem 1.1rem;margin-bottom:1rem}
.card.tight{padding:.7rem .9rem} .card h2{margin-bottom:.6rem} .card .card-head{display:flex;justify-content:space-between;align-items:center;gap:.5rem;margin-bottom:.6rem;flex-wrap:wrap}
.grid{display:grid;gap:1rem} .grid.c2{grid-template-columns:repeat(2,1fr)} .grid.c3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))} .grid.c4{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.kpi{padding:.9rem 1rem} .kpi .label{font-size:.82rem;color:var(--muted);display:flex;justify-content:space-between;align-items:center}
.kpi .value{font-size:1.45rem;font-weight:800;margin:.15rem 0 0;font-variant-numeric:tabular-nums} .kpi .sub{font-size:.8rem;color:var(--muted)}
.kpi.hero{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;border:0} .kpi.hero .label,.kpi.hero .sub{color:rgba(255,255,255,.85)}
.kpi.hero .value{font-size:1.9rem}
/* ---------- badges */
.badge{display:inline-flex;align-items:center;gap:.3rem;padding:.12rem .55rem;border-radius:999px;font-size:.76rem;font-weight:600;border:1px solid transparent;white-space:nowrap}
.badge.ok,.badge.actual{background:var(--pos-bg);color:var(--pos)} .badge.est,.badge.estimated{background:var(--est-bg);color:var(--est)}
.badge.missing,.badge.err{background:var(--neg-bg);color:var(--neg)} .badge.warn,.badge.partial{background:var(--warn-bg);color:var(--warn)}
.badge.info{background:var(--info-bg);color:var(--info)} .badge.neutral,.badge.na{background:var(--surface-2);color:var(--text-2);border-color:var(--border)}
.badge::before{font-weight:800} .badge.ok::before,.badge.actual::before{content:"✓"} .badge.est::before,.badge.estimated::before{content:"≈"}
.badge.missing::before,.badge.err::before{content:"!"} .badge.warn::before,.badge.partial::before{content:"◐"} .badge.info::before{content:"i"} .badge.na::before{content:"–"}
/* ---------- tables */
.table-wrap{overflow:auto;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)}
table{width:100%;border-collapse:collapse;font-size:.9rem} th,td{padding:.55rem .7rem;text-align:start;border-bottom:1px solid var(--border);vertical-align:middle}
th{background:var(--surface-2);font-weight:700;color:var(--text-2);font-size:.8rem;white-space:nowrap;position:sticky;top:0}
tr:last-child td{border-bottom:0} td.num,th.num{text-align:end} tr.total td{font-weight:800;background:var(--surface-2)}
tr.sub td{padding-inline-start:1.6rem;color:var(--text-2)} .row-actions{white-space:nowrap}
/* ---------- forms */
label{display:block;font-size:.85rem;font-weight:600;color:var(--text-2);margin-bottom:.25rem}
input,select,textarea{width:100%;font:inherit;padding:.5rem .65rem;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:#fff;color:var(--text)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
input[type=checkbox],input[type=radio]{width:auto;margin-inline-end:.4rem}
.field{margin-bottom:.8rem} .field .hint{font-size:.78rem;color:var(--muted);margin-top:.2rem} .field.error input{border-color:var(--neg)} .field .err{color:var(--neg);font-size:.8rem}
.form-row{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.btn{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem .95rem;border-radius:var(--radius-sm);border:1px solid var(--border-strong);background:#fff;color:var(--text);font:inherit;font-weight:600;cursor:pointer;line-height:1.3}
.btn:hover{background:var(--surface-2);text-decoration:none} .btn.primary{background:var(--accent);border-color:var(--accent);color:#fff} .btn.primary:hover{background:var(--accent-2)}
.btn.danger{color:var(--neg);border-color:#f3b8b3} .btn.sm{padding:.3rem .65rem;font-size:.82rem} .btn.ghost{border-color:transparent;background:transparent} .btn:disabled{opacity:.5;cursor:not-allowed}
.actions{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
/* ---------- alerts / flash / empty */
.alert{padding:.7rem .9rem;border-radius:var(--radius-sm);border:1px solid;margin-bottom:.9rem;display:flex;gap:.6rem;align-items:flex-start}
.alert.info{background:var(--info-bg);border-color:#bcd6f2;color:#0b3d73} .alert.warn{background:var(--warn-bg);border-color:#f2d59a;color:#6b3f00}
.alert.err{background:var(--neg-bg);border-color:#f3b8b3;color:#7a1a12} .alert.ok{background:var(--pos-bg);border-color:#b7e3cc;color:#0b5a37}
.empty{text-align:center;padding:2.2rem 1rem;color:var(--muted)} .empty .big{font-size:2rem;margin-bottom:.4rem}
.gaps li{display:flex;justify-content:space-between;gap:.6rem;padding:.5rem 0;border-bottom:1px dashed var(--border)} .gaps li:last-child{border:0}
.progress{height:8px;background:var(--surface-2);border-radius:999px;overflow:hidden} .progress>span{display:block;height:100%;background:var(--accent)}
/* ---------- waterfall / bars */
.bars{display:flex;flex-direction:column;gap:.35rem} .bar{display:grid;grid-template-columns:150px 1fr 110px;align-items:center;gap:.6rem;font-size:.85rem}
.bar .track{height:14px;background:var(--surface-2);border-radius:4px;overflow:hidden;direction:ltr} .bar .track>i{display:block;height:100%;background:var(--accent)} .bar.cost .track>i{background:#c56a5a} .bar.profit .track>i{background:var(--pos)}
.spark{display:flex;align-items:flex-end;gap:2px;height:70px;direction:ltr} .spark i{flex:1;background:var(--accent);opacity:.75;border-radius:2px 2px 0 0;min-width:3px} .spark i.neg{background:var(--neg)}
/* ---------- tabs, pills, misc */
.tabs{display:flex;gap:.25rem;border-bottom:1px solid var(--border);margin-bottom:1rem;flex-wrap:wrap} .tabs a{padding:.5rem .8rem;border-bottom:2px solid transparent;color:var(--text-2)} .tabs a.active{border-color:var(--accent);color:var(--accent);font-weight:700}
.pill-row{display:flex;gap:.4rem;flex-wrap:wrap} .pill{padding:.25rem .7rem;border-radius:999px;border:1px solid var(--border-strong);font-size:.82rem;background:#fff} .pill.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.kv{display:grid;grid-template-columns:max-content 1fr;gap:.3rem 1rem;font-size:.9rem} .kv dt{color:var(--muted)} .kv dd{margin:0}
code,.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85em;direction:ltr;unicode-bidi:isolate}
pre.code{background:#0f172a;color:#e2e8f0;padding:.8rem;border-radius:var(--radius-sm);overflow:auto;font-size:.8rem;direction:ltr;text-align:left}
.support-banner{background:#3b1d5c;color:#fff;padding:.5rem 1rem;font-size:.85rem;display:flex;justify-content:space-between;gap:1rem}
.toast{position:fixed;bottom:1rem;inset-inline-start:1rem;background:#1b2430;color:#fff;padding:.6rem .9rem;border-radius:var(--radius-sm);box-shadow:var(--shadow);z-index:50}
.steps{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1rem} .steps div{flex:1;min-width:120px;padding:.5rem .7rem;border-radius:var(--radius-sm);background:var(--surface-2);font-size:.82rem;color:var(--muted)} .steps div.done{background:var(--pos-bg);color:var(--pos)} .steps div.cur{background:var(--accent-bg);color:var(--accent);font-weight:700}
.pagination{display:flex;gap:.3rem;justify-content:center;margin-top:.8rem} .pagination a,.pagination span{padding:.3rem .6rem;border:1px solid var(--border);border-radius:6px;font-size:.85rem} .pagination .cur{background:var(--accent);color:#fff;border-color:var(--accent)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
details summary{cursor:pointer;font-weight:600}
/* ---------- responsive */
@media (max-width:960px){
  .shell{grid-template-columns:1fr} .sidebar{position:fixed;inset-inline-start:0;top:0;transform:translateX(100%);transition:transform .2s;z-index:40;width:min(300px,85vw)}
  html[dir=ltr] .sidebar{transform:translateX(-100%)} .sidebar.open{transform:none!important}
  .menu-btn{display:inline-flex} .main{padding:1rem} .grid.c4,.grid.c3{grid-template-columns:repeat(2,1fr)} .bar{grid-template-columns:100px 1fr 90px}
}
@media (max-width:560px){ .grid.c2,.grid.c3,.grid.c4{grid-template-columns:1fr} .kpi .value{font-size:1.25rem} .form-row{grid-template-columns:1fr} }
@media print{ .sidebar,.topbar .actions,.menu-btn{display:none} .shell{grid-template-columns:1fr} }

/* ---- profitability colour language: green = profit, red = loss, yellow = costs */
.kpi.hero.profit{background:linear-gradient(135deg,#0f7a4a,#1aa864)} .kpi.hero.loss{background:linear-gradient(135deg,#b42318,#d9483b)}
.kpi.cost{background:#fff8e1;border-color:#f2d59a} .kpi.cost .value{color:#7a5a00}
.kpi.revenue{background:#eef5ff;border-color:#bcd6f2} .kpi.revenue .value{color:#0b3d73}
.kpi.profit-soft{background:var(--pos-bg);border-color:#b7e2c8} .kpi.profit-soft .value{color:var(--pos)}
.kpi.loss-soft{background:var(--neg-bg);border-color:#f3b8b1} .kpi.loss-soft .value{color:var(--neg)}
.explain{margin-top:.5rem;font-size:.8rem} .explain summary{cursor:pointer;opacity:.9} .explain div{margin-top:.35rem;line-height:1.6;background:rgba(255,255,255,.15);padding:.5rem .6rem;border-radius:8px}
.donut-wrap{display:grid;grid-template-columns:150px 1fr;gap:1rem;align-items:center} .donut{width:150px;height:150px;transform:rotate(0deg)}
.donut-c{font-size:6px;font-weight:800;text-anchor:middle;fill:var(--text)} .donut-s{font-size:3px;text-anchor:middle;fill:var(--muted)}
.legend{list-style:none;margin:0;padding:0;font-size:.85rem} .legend li{display:flex;gap:.45rem;align-items:center;padding:.15rem 0} .legend li b{margin-inline-start:auto}
.legend i{display:inline-block;width:12px;height:12px;border-radius:3px;flex:none} .legend.row{display:flex;gap:1rem;margin-top:.5rem;color:var(--muted)} .legend.row span{display:flex;gap:.35rem;align-items:center}
.legend i.rev,.mbars i.rev{background:#3b82f6} .legend i.cost,.mbars i.cost{background:#f5c542} .legend i.profit,.mbars i.profit{background:var(--pos)} .legend i.loss,.mbars i.loss{background:var(--neg)}
.mchart{display:flex;gap:.5rem;align-items:flex-end;height:190px;padding-top:.5rem} .mcol{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;text-decoration:none;color:inherit;min-width:0}
.mbars{display:flex;gap:2px;align-items:flex-end;height:130px;width:100%;justify-content:center} .mbars i{width:22%;max-width:18px;border-radius:3px 3px 0 0;min-height:2px}
.mlabel{font-size:.72rem;color:var(--muted);margin-top:.3rem} .mval{font-size:.72rem;font-weight:700}
@media (max-width:560px){ .donut-wrap{grid-template-columns:1fr;justify-items:center} .mbars i{width:28%} .mval{display:none} }
/* ---- simple merchant dashboard */
.simple-hero{color:#fff;border:0;padding:1.3rem 1.4rem} .simple-hero.profit{background:linear-gradient(135deg,#0f7a4a,#1aa864)} .simple-hero.loss{background:linear-gradient(135deg,#b42318,#d9483b)}
.sh-label{font-size:1rem;opacity:.9} .sh-value{font-size:2.6rem;font-weight:800;line-height:1.2;margin:.2rem 0} .sh-value small{font-size:1rem;font-weight:600}
.sh-line{font-size:.95rem;opacity:.95;margin-top:.2rem} .sh-line.small{font-size:.82rem;opacity:.85;margin-top:.5rem} .sh-line .num{font-weight:800} .simple-hero .pos,.simple-hero .neg{color:#fff;text-decoration:underline}
.simple-tiles{margin-top:.8rem} .tile{display:block;text-decoration:none;color:inherit;padding:.9rem 1rem} .t-label{font-size:.85rem;color:var(--muted)} .t-value{font-size:1.5rem;font-weight:800;margin:.1rem 0} .t-sub{font-size:.78rem;color:var(--muted)}
.tile.revenue{background:#eef5ff;border-color:#bcd6f2} .tile.revenue .t-value{color:#0b3d73} .tile.cost{background:#fff8e1;border-color:#f2d59a} .tile.cost .t-value{color:#7a5a00}
.tile.profit{background:var(--pos-bg);border-color:#b7e2c8} .tile.profit .t-value{color:var(--pos)} .tile.loss{background:var(--neg-bg);border-color:#f3b8b1} .tile.loss .t-value{color:var(--neg)}
.grid.c3{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem}
.mchart{overflow:hidden} .mbars{height:110px} .mbars i{width:60%;max-width:34px} .mval{margin-bottom:.2rem}
.todo .gaps li{display:flex;justify-content:space-between;align-items:center;gap:.6rem;padding:.45rem 0;border-bottom:1px solid var(--line)} .todo .gaps li:last-child{border:0}
details.more{margin-top:1rem} details.more>summary{cursor:pointer;font-weight:700;padding:.7rem 1rem;background:var(--card);border:1px solid var(--line);border-radius:12px} details.more[open]>summary{margin-bottom:.8rem}
.kpi.hero-old{background:var(--card);color:var(--text)} .kpi.hero-old .label,.kpi.hero-old .sub{color:var(--muted)} .kpi.hero-old .badge{background:var(--warn-bg)!important;color:var(--warn)!important} .kpi.hero-old .explain div{background:var(--bg)}
@media (max-width:560px){ .grid.c3{grid-template-columns:1fr 1fr} .grid.c3 .tile:last-child{grid-column:1/-1} .sh-value{font-size:2rem} }

/* ---- locked (higher-plan) features: visible, explained, one click to upgrade */
.lock-badge{display:inline-flex;align-items:center;gap:.25rem;font-size:.72rem;font-weight:700;background:var(--warn-bg);color:var(--warn);border:1px solid #f2d59a;border-radius:999px;padding:.12rem .5rem;text-decoration:none;vertical-align:middle}
.lock-badge:hover{background:#ffe9bd}
.lock-note{display:flex;gap:.7rem;align-items:center;background:var(--warn-bg);border:1px solid #f2d59a;border-radius:12px;padding:.7rem .8rem;margin:.4rem 0 .8rem}
.lock-note .lock-ico{font-size:1.2rem} .lock-note div{flex:1} .lock-note .btn{flex:none}
.locked-preview{position:relative} .locked-preview>.inner{filter:blur(2px) grayscale(.5);opacity:.6;pointer-events:none;user-select:none}
.locked-preview>.overlay{position:absolute;inset:0;display:grid;place-items:center}

/* ---------- dashboard setup checklist ("هل رقمك صحيح؟") */
.card.setup .steps{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.card.setup .steps li{display:flex;align-items:flex-start;gap:.6rem;padding:.5rem .6rem;border-radius:var(--radius-sm);background:var(--surface-2)}
.card.setup .steps li.done{background:var(--pos-bg)}
.card.setup .steps li.open{background:var(--warn-bg)}
.card.setup .mark{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:.8rem;flex:none;color:#fff;background:var(--warn)}
.card.setup .steps li.done .mark{background:var(--pos)}
.card.setup .txt{display:flex;flex-direction:column;gap:.1rem;flex:1;min-width:0}
.card.setup .steps li a.btn{flex:none}
.card.setup.all-done .steps li{background:var(--pos-bg)}

/* ---------- ad platform rows (logo · name · action) */
.platform-row{display:flex;align-items:center;gap:.7rem;padding:.6rem .7rem;border:1px solid var(--border);border-radius:var(--radius);margin-bottom:.5rem;background:var(--surface)}
.platform-row .txt{flex:1;min-width:0}
.platform-row svg{flex:none}

/* ---------- payment network chips (logo + fee) */
.nets{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.4rem}
.net-chip{display:inline-flex;align-items:center;gap:.4rem;border:1px solid var(--border);border-radius:999px;padding:.15rem .5rem .15rem .15rem;background:var(--surface);font-size:.8rem;font-variant-numeric:tabular-nums}
.net-chip .v{color:var(--text-2);font-weight:600;white-space:nowrap}
.net-chip.est{border-style:dashed;border-color:var(--est)}
.net-chip.est .v{color:var(--est)}
/* Payment-gateway fees table: the two fee inputs were pinned to 90px inside a much
   wider column so they drifted away from their headers, and the save row floated
   between the table and the notes. Layout only — no field, value or behaviour change. */
.pmfees th,.pmfees td{white-space:nowrap}
.pmfees td:first-child,.pmfees th:first-child{white-space:normal;width:45%}
.pmfees td input[inputmode="decimal"]{width:7rem;text-align:end}
.pmfees td .mono.small{margin-top:.15rem}
/* The first cell stacks the method name, its code, the network chips and a hint, so the
   row runs 120–180px tall while every other cell holds one short control. Centred
   vertically they floated in the middle of that emptiness; aligned to the top they read
   as one line per payment method. */
.pmfees td{vertical-align:top;padding-top:.75rem;padding-bottom:.75rem}
.pmfees td .nets{margin-top:.5rem}
.pmfees td > .muted.small{margin-top:.35rem;line-height:1.5}
.pmfees td:last-child{line-height:1.6}
.pmfees td:last-child .badge{margin-top:.3rem}
.pmfees .fees-actions{margin-top:.9rem;padding-top:.9rem;border-top:1px solid var(--border)}
.pmfees .fees-actions label{display:inline-flex;align-items:center;gap:.45rem}
.pmfees .fees-actions input[type=date]{width:auto}
.pmfees > p{margin-top:.7rem}
/* The saved-rules table carries nine columns inside a narrow card, so every header
   wrapped and the row read as three broken lines. Its wrapper already scrolls
   (.table-wrap{overflow:auto}); let it, instead of folding the header. */
.rules-list th,.rules-list td{white-space:nowrap}
.rules-list td:nth-child(2){white-space:normal;min-width:8rem}
.simple-hero .sh-line .op{color:var(--text-2);padding:0 .15rem;font-weight:600}
.tile.fixed{background:#f3f0fb;border-color:#d6cbee} .tile.fixed .t-value{color:#4b3b7a}