/* me.clusters.sa — Clusters brand palette, Arabic-first RTL */

:root {
  --amber:#CE905E; --gold:#DEAD6B; --olive:#495644; --brown:#B08968;
  --cream:#F5EDE3; --beige:#D0BCA1; --charcoal:#383838;
  --ink:#2A241E; --ink-2:#6B5F52; --ink-3:#9C8E7E; --line:#E4D9CB; --paper:#FFFDFA;
  --ok:#4F7A5B; --ok-bg:#EAF1EC; --warn:#A9762B; --warn-bg:#FAF0DF;
  --gone:#9A5F52; --gone-bg:#F6EAE7;
  --tabs-h:62px;
}

* { box-sizing:border-box; }
html, body { margin:0; padding:0; }

body {
  background:var(--cream);
  color:var(--ink);
  font-family:"Segoe UI","Noto Sans Arabic","Geeza Pro",Tahoma,system-ui,sans-serif;
  font-size:14px;
  line-height:1.6;
  -webkit-text-size-adjust:100%;
}

a { color:inherit; text-decoration:none; }
button, input, select, textarea { font-family:inherit; font-size:inherit; }

:focus-visible { outline:2px solid var(--amber); outline-offset:2px; border-radius:6px; }

.num { font-variant-numeric:tabular-nums; }
.muted { color:var(--ink-2); font-size:13px; }
.tiny  { color:var(--ink-3); font-size:12px; }
.k {
  font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-3); font-weight:700;
}
.t { font-size:18px; font-weight:650; letter-spacing:-.01em; margin:3px 0 0; }
.t.big { font-size:22px; }
.center { text-align:center; }
.mt-auto { margin-top:auto; }

/* ---------- buyer shell ---------- */
.shell {
  max-width:520px; margin:0 auto; min-height:100dvh;
  background:var(--paper); display:flex; flex-direction:column;
  box-shadow:0 0 44px -18px rgba(42,36,30,.3);
}

.topbar {
  background:var(--charcoal); color:var(--cream);
  padding:14px 16px; display:flex; align-items:center; justify-content:space-between;
  position:sticky; top:0; z-index:10;
}
.mark { font-size:13.5px; font-weight:650; letter-spacing:.1em; }
.mark span { color:var(--amber); }
.av {
  width:30px; height:30px; border-radius:50%; background:var(--amber); color:#fff;
  display:grid; place-items:center; font-size:12px; font-weight:650; flex:none;
}

.page {
  padding:16px; padding-bottom:calc(var(--tabs-h) + 20px);
  flex:1; display:flex; flex-direction:column; gap:13px;
}

.tabbar {
  position:fixed; bottom:0; inset-inline:0; z-index:20;
  max-width:520px; margin:0 auto;
  display:flex; gap:2px;
  background:var(--cream); border-top:1px solid var(--line);
  padding:8px 4px calc(8px + env(safe-area-inset-bottom));
}
.tabbar a { flex:1; text-align:center; font-size:10px; color:var(--ink-3); line-height:1.35; padding:2px 0; }
.tabbar .ic { display:block; font-size:16px; margin-bottom:2px; opacity:.55; }
.tabbar a.on { color:var(--amber); font-weight:650; }
.tabbar a.on .ic { opacity:1; }

.back { font-size:12px; color:var(--ink-3); display:inline-block; }

/* ---------- cards ---------- */
.card { border:1px solid var(--line); border-radius:14px; padding:14px; background:var(--paper); }
.card.tint { background:var(--cream); }
.card.dark { background:var(--charcoal); color:var(--cream); border-color:var(--charcoal); }
.card.flush { padding:0; overflow:hidden; }

.golden {
  border-radius:14px; padding:15px; color:var(--cream);
  background:linear-gradient(150deg,#6E4F30 0%,#3F2E1D 100%);
  border:1px solid var(--gold); display:block;
}
.golden .k { color:var(--gold); }
.golden.spent { background:var(--cream); color:var(--ink-2); border-color:var(--line); }
.golden.spent .k { color:var(--ink-3); }
.golden.spent .t { color:var(--ink-2); }

.rows { display:flex; flex-direction:column; }
.row {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:9px 0; border-bottom:1px solid var(--line);
}
.row:last-child { border-bottom:0; padding-bottom:0; }
.row:first-child { padding-top:0; }
.card.dark .row, .golden .row { border-color:rgba(245,237,227,.16); }

/* ---------- pills + meters ---------- */
.pill {
  display:inline-flex; align-items:center; gap:5px;
  font-size:11px; font-weight:650; border-radius:20px; padding:3px 9px; white-space:nowrap;
}
.pill::before { content:""; width:5px; height:5px; border-radius:50%; background:currentColor; }
.pill.flat::before { display:none; }
.pill.ok   { color:var(--ok);   background:var(--ok-bg); }
.pill.warn { color:var(--warn); background:var(--warn-bg); }
.pill.gone { color:var(--gone); background:var(--gone-bg); }
.pill.info { color:var(--brown); background:#F4ECE4; }
.pill.gold { color:#3F2E1D; background:var(--gold); }

.meter { height:5px; border-radius:5px; background:var(--cream); overflow:hidden; }
.meter i { display:block; height:100%; background:var(--ok); }
.meter.on-dark { background:rgba(245,237,227,.18); }
.meter i.g { background:var(--gold); }
.meter i.w { background:var(--warn); }
.meter i.x { background:var(--gone); }

/* ---------- controls ---------- */
.btn {
  display:block; width:100%; text-align:center; cursor:pointer;
  background:var(--amber); color:#fff; border:0; border-radius:12px;
  padding:11px; font-size:14px; font-weight:650;
}
.btn:hover { filter:brightness(.96); }
.btn.ghost { background:transparent; color:var(--ink); border:1px solid var(--line); }
.btn.dark  { background:var(--olive); color:#fff; }
.btn.gold  { background:var(--gold); color:#3F2E1D; }
.btn.danger{ background:transparent; color:var(--gone); border:1px solid var(--gone-bg); }
.btn.sm    { width:auto; padding:8px 16px; font-size:13px; }
.btn[disabled] { opacity:.5; cursor:not-allowed; }

.field { display:block; margin-bottom:12px; }
.lab { display:block; font-size:11.5px; font-weight:650; color:var(--ink-2); margin-bottom:5px; }
.inp {
  width:100%; border:1px solid var(--line); border-radius:12px; background:var(--cream);
  padding:10px 12px; font-size:13.5px; color:var(--ink);
}
.inp:focus { background:var(--paper); }
select.inp { appearance:none; }

.tog { display:flex; border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.tog label { flex:1; }
.tog input { position:absolute; opacity:0; pointer-events:none; }
.tog span {
  display:block; text-align:center; padding:8px; font-size:12.5px;
  color:var(--ink-3); cursor:pointer;
}
.tog input:checked + span { background:var(--amber); color:#fff; font-weight:650; }

.two   { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.three { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }

/* ---------- documents ---------- */
.doc { display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--line); }
.doc:last-child { border-bottom:0; padding-bottom:0; }
.doc:first-child { padding-top:0; }
.fic {
  width:32px; height:32px; border-radius:8px; flex:none; display:grid; place-items:center;
  font-size:9px; font-weight:700; background:var(--cream); color:var(--brown);
  border:1px solid var(--line);
}
.doc .m { flex:1; min-width:0; }
.doc .n { font-size:13px; font-weight:600; }
.doc .go { color:var(--ink-3); font-size:13px; }

.cat {
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  border:1px solid var(--line); border-radius:12px; padding:12px;
}
.cat:hover { border-color:var(--beige); background:var(--cream); }
.cat .c { display:flex; align-items:center; gap:10px; }
.cat .e { font-size:16px; color:var(--brown); }
.cnt {
  font-size:11px; font-weight:700; color:var(--ink-3); background:var(--cream);
  border-radius:20px; padding:2px 8px; min-width:24px; text-align:center;
}

/* ---------- album ---------- */
.album { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; }
.album img {
  width:100%; aspect-ratio:1; object-fit:cover; border-radius:7px;
  border:1px solid var(--line); display:block; cursor:zoom-in;
  -webkit-user-drag:none; user-select:none;
}

.viewer {
  position:fixed; inset:0; z-index:100; background:rgba(20,17,14,.95);
  display:none; align-items:center; justify-content:center; flex-direction:column; gap:14px;
}
.viewer.open { display:flex; }
.viewer img {
  max-width:94vw; max-height:80dvh; object-fit:contain; border-radius:8px;
  -webkit-user-drag:none; user-select:none; pointer-events:none;
}
.viewer .vbar { display:flex; gap:16px; align-items:center; color:var(--cream); font-size:13px; }
.viewer button {
  background:rgba(245,237,227,.12); color:var(--cream); border:0;
  width:38px; height:38px; border-radius:50%; cursor:pointer; font-size:16px;
}

/* ---------- finishes ---------- */
.sw { width:36px; height:36px; border-radius:8px; border:1px solid var(--line); flex:none; }
.tile { width:56px; height:56px; border-radius:8px; border:1px solid var(--line); object-fit:cover; flex:none; }

/* ---------- notices ---------- */
.flash { border-radius:12px; padding:11px 13px; font-size:13px; margin-bottom:4px; }
.flash.ok  { background:var(--ok-bg);   color:var(--ok); }
.flash.bad { background:var(--gone-bg); color:var(--gone); }

.empty { text-align:center; padding:26px 14px; color:var(--ink-3); font-size:13px; }

/* =========================================================
   admin
   ========================================================= */
.adm { display:grid; grid-template-columns:200px 1fr; min-height:100dvh; }

.side {
  background:var(--charcoal); color:var(--beige);
  padding:18px 12px; display:flex; flex-direction:column; gap:3px;
}
.side .mark { margin:2px 4px 18px; }
.side a { padding:9px 10px; border-radius:9px; font-size:13px; color:var(--beige); display:block; }
.side a:hover { background:rgba(245,237,227,.07); }
.side a.on { background:rgba(206,144,94,.2); color:var(--cream); font-weight:650; }
.side .who { margin-top:auto; padding:10px; font-size:11.5px; color:var(--brown); }

.main {
  padding:22px; display:flex; flex-direction:column; gap:16px;
  background:var(--paper); min-width:0;
}
.head { display:flex; align-items:flex-end; justify-content:space-between; gap:14px; flex-wrap:wrap; }

.subnav { display:flex; gap:4px; border-bottom:1px solid var(--line); overflow-x:auto; }
.subnav a {
  padding:9px 13px; font-size:12.5px; color:var(--ink-3); white-space:nowrap;
  border-bottom:2px solid transparent; margin-bottom:-1px;
}
.subnav a.on { color:var(--amber); font-weight:650; border-bottom-color:var(--amber); }
.subnav a .b { font-size:10.5px; color:var(--ink-3); font-weight:400; }

.tblwrap { overflow-x:auto; border:1px solid var(--line); border-radius:12px; }
table { border-collapse:collapse; width:100%; font-size:12.5px; }
th {
  text-align:right; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); font-weight:700; padding:10px 12px;
  background:var(--cream); border-bottom:1px solid var(--line); white-space:nowrap;
}
td { padding:11px 12px; border-bottom:1px solid var(--line); vertical-align:middle; }
tr:last-child td { border-bottom:0; }
tbody tr:hover { background:var(--cream); }

.drop {
  border:1.5px dashed var(--beige); border-radius:14px; background:var(--cream);
  padding:22px; text-align:center; cursor:pointer; display:block;
}
.drop.over { border-color:var(--amber); background:#FAF2E8; }

.reqmark { color:var(--gone); }
.inp.req { border-color:var(--amber); }

.rowedit { display:flex; gap:8px; align-items:flex-end; margin-bottom:9px; }
.rowedit .grow { flex:1; min-width:0; }
.rowedit .x { color:var(--gone); cursor:pointer; padding:0 4px 11px; background:none; border:0; }

@media (max-width:820px) {
  .adm { grid-template-columns:1fr; }
  .side { flex-direction:row; overflow-x:auto; padding:10px; align-items:center; }
  .side .mark, .side .who { display:none; }
  .side a { white-space:nowrap; }
  .two, .three { grid-template-columns:1fr; }
  .main { padding:16px; }
}

@media (prefers-reduced-motion:reduce) {
  * { transition:none !important; animation:none !important; }
}

@media print { .tabbar, .topbar, .side { display:none; } }