/* ============================================================
   Unique Signature Business SPC — Receipt System
   Application chrome
   ------------------------------------------------------------
   Deliberately a different world from the EJR voucher module:
   porcelain instead of bronze-dark, a geometric sans instead of
   a garalde serif, a standing side rail instead of top tabs.
   The gold is the only thing the two share, because the client's
   mark is gold.
   ============================================================ */

:root {
  /* Brand */
  --gold: #B08D3F;
  --gold-lt: #E0C270;
  --gold-dk: #7C6023;
  --gold-wash: #FBF6E9;

  /* Ink & paper */
  --ink: #14120D;
  --ink-2: #3D382C;
  --ink-3: #6E6757;
  --ink-4: #9A9384;
  --paper: #F5F3EE;
  --surface: #FFFFFF;
  --surface-2: #FAF8F4;
  --line: #E4DFD4;
  --line-2: #D2CBBB;

  /* Kind accents — one hue per receipt type */
  --k-general: #6B5CA5;
  --k-services: #1F7A6B;
  --k-land: #8A6A1F;
  --k-rental: #2A6BA8;

  --ok: #1F7A4D;
  --err: #B23A2F;
  --warn: #B87514;

  --radius: 10px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 2px rgba(20, 18, 13, .05);
  --shadow: 0 4px 16px rgba(20, 18, 13, .07);
  --shadow-lg: 0 18px 48px rgba(20, 18, 13, .16);

  --rail-w: 232px;

  --font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-ar: 'IBM Plex Sans Arabic', 'Tajawal', system-ui, sans-serif;
  --font-num: 'Space Grotesk', ui-monospace, monospace;
}

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

html { font-size: 15px; -webkit-text-size-adjust: 100%; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  min-height: 100vh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

[dir='rtl'] body { font-family: var(--font-ar); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 5px; border: 3px solid var(--paper); }
::-webkit-scrollbar-thumb:hover { background: var(--ink-4); }

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

.ar { font-family: var(--font-ar); }
.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.hidden { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ══════════════════════════════════════════
   BRAND MARK
══════════════════════════════════════════ */
.mark { display: block; flex-shrink: 0; }
.mark-ring { fill: none; stroke: url(#usbGold); stroke-linecap: round; }
.mark-solid { fill: url(#usbGold); }

/* ══════════════════════════════════════════
   AUTH SCREEN
══════════════════════════════════════════ */
.auth {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--ink);
}

.auth-art {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  padding: 48px;
  background:
    radial-gradient(ellipse at 50% 35%, rgba(176, 141, 63, .16), transparent 62%),
    linear-gradient(170deg, #17140D, #0A0906);
  overflow: hidden;
}
.auth-art::after {
  content: '';
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    -38deg, rgba(224, 194, 112, .035) 0 1px, transparent 1px 13px);
  pointer-events: none;
}
.auth-art .mark { width: 128px; height: auto; position: relative; z-index: 1; }
.auth-art-name {
  position: relative; z-index: 1; text-align: center;
}
.auth-art-ar {
  font-family: var(--font-ar);
  font-size: 26px; font-weight: 600; color: var(--gold-lt);
  letter-spacing: .01em; margin-bottom: 4px;
}
.auth-art-en {
  font-size: 13px; font-weight: 600; letter-spacing: .32em;
  text-transform: uppercase; color: rgba(224, 194, 112, .62);
}
.auth-art-rule {
  position: relative; z-index: 1;
  width: 52px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.auth-art-tag {
  position: relative; z-index: 1;
  font-size: 12px; color: rgba(245, 243, 238, .4);
  letter-spacing: .1em; text-transform: uppercase;
}

.auth-form-col {
  background: var(--paper);
  display: flex; align-items: center; justify-content: center;
  padding: 40px 24px;
}
.auth-box { width: 100%; max-width: 348px; }
.auth-kicker {
  font-size: 11px; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 10px;
}
.auth-h { font-size: 27px; font-weight: 800; letter-spacing: -.02em; margin-bottom: 6px; }
.auth-sub { font-size: 13px; color: var(--ink-3); margin-bottom: 28px; }
.auth-box .field { margin-bottom: 14px; }
.auth-box .btn { width: 100%; justify-content: center; padding: 12px; font-size: 14px; }
.auth-note {
  margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line);
  font-size: 12px; color: var(--ink-4); line-height: 1.65;
}
.auth-msg {
  margin-bottom: 16px; padding: 10px 13px; border-radius: 8px;
  font-size: 13px; display: none;
}
.auth-msg.on { display: block; }
.auth-msg.err { background: #FCF0EE; color: var(--err); border: 1px solid #F0D5D1; }
.auth-msg.ok { background: #EEF7F1; color: var(--ok); border: 1px solid #CFE7D9; }

/* ══════════════════════════════════════════
   APP SHELL
══════════════════════════════════════════ */
.shell { display: grid; grid-template-columns: var(--rail-w) 1fr; min-height: 100vh; }

.rail {
  background: var(--ink);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
  padding: 20px 0 14px;
}
.rail-brand {
  display: flex; align-items: center; gap: 11px;
  padding: 0 18px 20px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(224, 194, 112, .14);
}
.rail-brand .mark { width: 34px; height: auto; }
.rail-brand-txt { min-width: 0; }
.rail-brand-ar {
  font-family: var(--font-ar); font-size: 14px; font-weight: 600;
  color: var(--gold-lt); line-height: 1.25; white-space: nowrap;
}
.rail-brand-en {
  font-size: 9px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(245, 243, 238, .38);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.rail-nav { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; }
.rail-btn {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; border-radius: 8px;
  background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: 13.5px; font-weight: 500;
  color: rgba(245, 243, 238, .58);
  text-align: start; width: 100%;
  transition: background .16s, color .16s;
}
.rail-btn svg { width: 17px; height: 17px; flex-shrink: 0; stroke-width: 1.7; }
.rail-btn:hover { background: rgba(245, 243, 238, .06); color: var(--paper); }
.rail-btn.on {
  background: linear-gradient(90deg, rgba(176, 141, 63, .22), rgba(176, 141, 63, .07));
  color: var(--gold-lt); font-weight: 600;
  box-shadow: inset 2px 0 0 var(--gold);
}
[dir='rtl'] .rail-btn.on { box-shadow: inset -2px 0 0 var(--gold); }

.rail-foot { margin-top: auto; padding: 14px 16px 0; border-top: 1px solid rgba(224, 194, 112, .12); }
.rail-user { font-size: 11.5px; color: rgba(245, 243, 238, .5); margin-bottom: 9px; word-break: break-all; }
.rail-status { display: flex; align-items: center; gap: 6px; font-size: 11px; color: rgba(245, 243, 238, .38); margin-bottom: 10px; }
.rail-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); flex-shrink: 0; }
.rail-dot.off { background: var(--warn); }
.rail-foot .btn { width: 100%; justify-content: center; }

.main { min-width: 0; padding: 0 0 72px; }

/* ══════════════════════════════════════════
   PAGE HEADER
══════════════════════════════════════════ */
.phead {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 26px 32px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  position: sticky; top: 0; z-index: 20;
}
.phead-txt { flex: 1; min-width: 180px; }
.phead h1 { font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.phead-sub { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }
.phead-sub .ar { font-size: 13.5px; }

.pbody { padding: 24px 32px 0; max-width: 1180px; }

/* ══════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 15px; border-radius: 8px;
  font-family: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; border: 1px solid transparent;
  white-space: nowrap; transition: all .16s;
}
.btn svg { width: 15px; height: 15px; stroke-width: 1.8; flex-shrink: 0; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn-gold {
  background: linear-gradient(135deg, var(--gold-dk), var(--gold));
  color: #FFF8E6; box-shadow: var(--shadow-sm);
}
.btn-gold:hover:not(:disabled) { filter: brightness(1.1); box-shadow: 0 4px 14px rgba(176, 141, 63, .3); }

.btn-ink { background: var(--ink); color: var(--paper); }
.btn-ink:hover:not(:disabled) { background: var(--ink-2); }

.btn-ghost { background: var(--surface); border-color: var(--line-2); color: var(--ink-2); }
.btn-ghost:hover:not(:disabled) { border-color: var(--gold); color: var(--gold-dk); background: var(--gold-wash); }

.btn-quiet { background: transparent; border-color: transparent; color: var(--ink-3); }
.btn-quiet:hover:not(:disabled) { background: rgba(20, 18, 13, .06); color: var(--ink); }

.btn-danger { background: #FCF0EE; border-color: #F0D5D1; color: var(--err); }
.btn-danger:hover:not(:disabled) { background: #F8E3E0; }

.btn-dark-ghost { background: rgba(245, 243, 238, .08); color: rgba(245, 243, 238, .82); border-color: rgba(245, 243, 238, .14); }
.btn-dark-ghost:hover:not(:disabled) { background: rgba(245, 243, 238, .14); color: var(--paper); }

.btn-sm { padding: 6px 11px; font-size: 12px; border-radius: 7px; }
.btn-sm svg { width: 13px; height: 13px; }
.btn-icon { padding: 6px; border-radius: 7px; }
.btn-icon svg { width: 15px; height: 15px; }

/* ══════════════════════════════════════════
   TYPE PICKER
══════════════════════════════════════════ */
.picker { max-width: 900px; }
.picker-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.pick {
  position: relative; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 22px;
  cursor: pointer; text-align: start;
  font-family: inherit; color: inherit;
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.pick::before {
  content: ''; position: absolute; inset-inline-start: 0; top: 0; bottom: 0;
  width: 3px; background: var(--accent); opacity: .85;
}
.pick:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--line-2); }
.pick-ico {
  width: 40px; height: 40px; border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 11%, transparent);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.pick-ico svg { width: 20px; height: 20px; stroke-width: 1.7; }
.pick-title { font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.pick-title-ar { font-family: var(--font-ar); font-size: 14px; color: var(--ink-3); margin: 1px 0 9px; }
.pick-desc { font-size: 12.5px; color: var(--ink-3); line-height: 1.6; }

/* ══════════════════════════════════════════
   CARDS & FIELDS
══════════════════════════════════════════ */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 20px; margin-bottom: 14px;
  box-shadow: var(--shadow-sm);
}
.card-hd { display: flex; align-items: baseline; gap: 9px; margin-bottom: 16px; }
.card-t { font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink); }
.card-t-ar { font-family: var(--font-ar); font-size: 13px; color: var(--ink-4); }
.card-hd .spacer { margin-inline-start: auto; }

.g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; }
.g4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; }
.span-all { grid-column: 1 / -1; }

.field { display: flex; flex-direction: column; gap: 5px; }
.lbl {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  font-size: 11.5px; font-weight: 600; color: var(--ink-2);
}
.lbl-ar { font-family: var(--font-ar); font-size: 12px; font-weight: 400; color: var(--ink-4); }
.req { color: var(--gold-dk); }

.inp, .sel, .ta {
  width: 100%; background: var(--surface-2);
  border: 1px solid var(--line-2); border-radius: 8px;
  padding: 9px 11px; color: var(--ink);
  font-family: inherit; font-size: 13.5px;
  outline: none; transition: border-color .15s, box-shadow .15s, background .15s;
}
.inp:hover, .sel:hover, .ta:hover { border-color: var(--ink-4); }
.inp:focus, .sel:focus, .ta:focus {
  border-color: var(--gold); background: var(--surface);
  box-shadow: 0 0 0 3px rgba(176, 141, 63, .13);
}
.inp[readonly] { background: var(--gold-wash); border-color: #EBE0C4; color: var(--gold-dk); font-weight: 700; }
.inp.bad, .ta.bad { border-color: var(--err); background: #FEF7F6; }
.ta { resize: vertical; min-height: 62px; line-height: 1.55; }
.sel { cursor: pointer; }
.inp-ar { font-family: var(--font-ar); font-size: 15px; }
.err-txt { font-size: 11.5px; color: var(--err); min-height: 0; }
.hint { font-size: 11.5px; color: var(--ink-4); line-height: 1.55; }

/* Transliteration suggestion */
.sug { display: none; align-items: center; gap: 7px; flex-wrap: wrap; }
.sug.on { display: flex; }
.sug-lbl { font-size: 11px; color: var(--ink-4); }
.sug-chip {
  padding: 3px 11px; border-radius: 20px;
  background: var(--gold-wash); border: 1px solid #E6D9B4;
  color: var(--gold-dk); font-size: 12.5px; font-weight: 600;
  cursor: pointer; font-family: inherit; transition: all .14s;
}
.sug-chip:hover { background: var(--gold); color: #FFF8E6; border-color: var(--gold); }

/* ══════════════════════════════════════════
   AMOUNT
══════════════════════════════════════════ */
.amount-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1.5px solid var(--line-2); border-radius: 10px; overflow: hidden; }
.amount-cell { display: flex; flex-direction: column; background: var(--surface-2); }
.amount-cell + .amount-cell { border-inline-start: 1.5px solid var(--line-2); }
.amount-cap {
  padding: 6px 12px; font-size: 10px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-4);
  background: var(--surface); border-bottom: 1px solid var(--line);
  text-align: center;
}
.amount-inp {
  border: none; background: transparent; outline: none;
  padding: 11px; text-align: center; width: 100%;
  font-family: var(--font-num); font-size: 25px; font-weight: 600;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.amount-inp::placeholder { color: var(--line-2); }
.amount-inp::-webkit-outer-spin-button,
.amount-inp::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.amount-inp[type=number] { -moz-appearance: textfield; }

.words {
  margin-top: 11px; padding: 11px 13px;
  background: var(--gold-wash); border: 1px dashed #E0D0A4; border-radius: 9px;
  min-height: 62px;
}
.words-ar { font-family: var(--font-ar); font-size: 15px; font-weight: 600; color: var(--ink); direction: rtl; text-align: right; line-height: 1.6; }
.words-en { font-size: 12.5px; color: var(--ink-3); margin-top: 4px; direction: ltr; text-align: left; }

/* ══════════════════════════════════════════
   PAYMENT SEGMENT
══════════════════════════════════════════ */
.seg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid var(--line-2); border-radius: 9px; overflow: hidden; }
.seg-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 6px; background: var(--surface-2);
  border: none; cursor: pointer; font-family: inherit;
  font-size: 12.5px; font-weight: 500; color: var(--ink-3);
  transition: all .15s;
}
.seg-btn + .seg-btn { border-inline-start: 1px solid var(--line-2); }
.seg-btn svg { width: 14px; height: 14px; stroke-width: 1.8; }
.seg-btn:hover { background: var(--surface); color: var(--ink); }
.seg-btn.on { background: var(--ink); color: var(--gold-lt); font-weight: 600; }

.pay-extra { margin-top: 13px; padding-top: 13px; border-top: 1px dashed var(--line-2); }

/* ══════════════════════════════════════════
   LINE / PLOT TABLES
══════════════════════════════════════════ */
.dtable-wrap { border: 1px solid var(--line); border-radius: 10px; overflow-x: auto; }
.dtable { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.dtable th {
  background: var(--surface-2); color: var(--ink-3);
  font-weight: 600; font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase;
  padding: 9px 10px; text-align: start; white-space: nowrap;
  border-bottom: 1px solid var(--line);
}
.dtable td { padding: 5px 6px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.dtable tbody tr:last-child td { border-bottom: none; }
.dtable .inp, .dtable .sel { padding: 6px 8px; font-size: 12.5px; border-radius: 6px; }
.dtable .rownum { text-align: center; color: var(--ink-4); font-family: var(--font-num); font-size: 11px; width: 34px; }
.row-del {
  background: none; border: none; cursor: pointer; color: var(--ink-4);
  padding: 5px 7px; border-radius: 6px; display: flex; transition: all .14s;
}
.row-del svg { width: 14px; height: 14px; stroke-width: 1.8; }
.row-del:hover { color: var(--err); background: #FCF0EE; }

.lines-total {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: 10px; padding: 9px 12px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px;
  font-size: 12.5px;
}
.lines-total strong { font-family: var(--font-num); font-size: 15px; }
.lines-total .apply { margin-inline-start: auto; }

/* ══════════════════════════════════════════
   MONTH TAGS
══════════════════════════════════════════ */
.months { border: 1px solid var(--line-2); border-radius: 9px; overflow: hidden; }
.months-add { display: flex; gap: 8px; padding: 9px; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.months-add .inp { flex: 1; }
.months-tags { padding: 9px; display: flex; flex-wrap: wrap; gap: 6px; min-height: 46px; align-items: center; }
.mtag {
  display: inline-flex; align-items: center; gap: 6px;
  background: #EDF3FA; border: 1px solid #D3E2F1; color: var(--k-rental);
  border-radius: 20px; padding: 4px 11px; font-size: 12px; font-weight: 500;
}
.mtag button { background: none; border: none; cursor: pointer; color: inherit; opacity: .55; padding: 0; display: flex; }
.mtag button svg { width: 12px; height: 12px; stroke-width: 2.2; }
.mtag button:hover { opacity: 1; color: var(--err); }
.months-empty { font-size: 12px; color: var(--ink-4); font-style: italic; }

/* ══════════════════════════════════════════
   FORM ACTIONS
══════════════════════════════════════════ */
.form-actions {
  display: flex; gap: 9px; justify-content: flex-end; flex-wrap: wrap;
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line);
}
.form-actions .spacer { margin-inline-end: auto; }

/* ══════════════════════════════════════════
   KIND PILL
══════════════════════════════════════════ */
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 20px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  white-space: nowrap;
}
.pill.cancelled { --accent: var(--err); }

/* ══════════════════════════════════════════
   DASHBOARD
══════════════════════════════════════════ */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; margin-bottom: 20px; }
.kpi {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 16px 18px;
  box-shadow: var(--shadow-sm); position: relative; overflow: hidden;
}
.kpi::before {
  content: ''; position: absolute; top: 0; inset-inline-start: 0; width: 34px; height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--gold-lt));
}
.kpi-l { font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 7px; }
.kpi-v { font-family: var(--font-num); font-size: 25px; font-weight: 600; letter-spacing: -.02em; }
.kpi-sub { font-size: 11.5px; color: var(--ink-4); margin-top: 3px; }

.filters { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 14px; }
.filters .inp, .filters .sel { flex: 1; min-width: 132px; font-size: 13px; background: var(--surface); }
.filters .search { flex: 2.2; min-width: 200px; }

.table-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.table-scroll { overflow-x: auto; }
.rtable { width: 100%; min-width: 880px; border-collapse: collapse; font-size: 13px; }
.rtable th {
  background: var(--surface-2); color: var(--ink-3);
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 11px 13px; text-align: start; white-space: nowrap;
  border-bottom: 1px solid var(--line); position: sticky; top: 0;
}
.rtable td { padding: 11px 13px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.rtable tbody tr:last-child td { border-bottom: none; }
.rtable tbody tr:hover td { background: var(--surface-2); }
.rtable tbody tr.is-cancelled td { opacity: .55; }
.rtable tbody tr.is-cancelled .cell-no { text-decoration: line-through; }
.cell-no { font-family: var(--font-num); font-size: 14px; font-weight: 600; color: var(--gold-dk); }
.cell-amt { font-family: var(--font-num); font-weight: 600; white-space: nowrap; }
.cell-ar { font-family: var(--font-ar); font-size: 14px; }
.cell-det {
  font-size: 11.5px; color: var(--ink-3);
  max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.row-actions { display: flex; gap: 4px; justify-content: flex-end; }

.empty { text-align: center; padding: 56px 20px; color: var(--ink-4); }
.empty svg { width: 34px; height: 34px; stroke-width: 1.4; margin-bottom: 12px; opacity: .45; }
.empty p { font-size: 13.5px; }

.table-foot {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 11px 14px; border-top: 1px solid var(--line);
  background: var(--surface-2); font-size: 12px; color: var(--ink-3);
}
.table-foot .spacer { margin-inline-start: auto; }

/* ══════════════════════════════════════════
   SETTINGS
══════════════════════════════════════════ */
.settings { max-width: 660px; }
.img-drop {
  border: 1px dashed var(--line-2); border-radius: 10px;
  padding: 14px; text-align: center; background: var(--surface-2);
}
.img-drop img { max-height: 76px; max-width: 100%; margin-bottom: 9px; border-radius: 6px; }
.img-drop input[type=file] { font-size: 11.5px; width: 100%; }
.img-drop .ph { font-size: 12px; color: var(--ink-4); padding: 14px 0 9px; }

.danger-zone {
  border: 1px solid #F0D5D1; background: #FDF7F6;
  border-radius: var(--radius-lg); padding: 18px; margin-top: 16px;
}
.danger-zone .card-t { color: var(--err); }
.danger-zone p { font-size: 12.5px; color: var(--ink-3); margin: 8px 0 13px; line-height: 1.6; }

/* ══════════════════════════════════════════
   MODAL
══════════════════════════════════════════ */
.modal {
  display: none; position: fixed; inset: 0; z-index: 200;
  background: rgba(16, 14, 10, .72);
  backdrop-filter: blur(3px);
  overflow-y: auto; padding: 18px 14px 40px;
}
.modal.on { display: block; }
.modal-bar {
  max-width: 800px; margin: 0 auto 14px;
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
}
.modal-title { font-size: 14px; font-weight: 600; color: var(--gold-lt); flex: 1; min-width: 130px; }
.modal-title span { font-family: var(--font-ar); color: rgba(245, 243, 238, .55); font-weight: 400; }

.confirm {
  max-width: 400px; margin: 14vh auto 0;
  background: var(--surface); border-radius: var(--radius-lg);
  padding: 24px; box-shadow: var(--shadow-lg);
}
.confirm h3 { font-size: 17px; font-weight: 700; margin-bottom: 8px; }
.confirm p { font-size: 13px; color: var(--ink-3); line-height: 1.6; margin-bottom: 20px; }
.confirm-actions { display: flex; gap: 9px; justify-content: flex-end; }

/* ══════════════════════════════════════════
   TOAST
══════════════════════════════════════════ */
.toast-stack {
  position: fixed; bottom: 22px; inset-inline-end: 22px;
  z-index: 999; display: flex; flex-direction: column; gap: 8px;
  pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: 9px;
  background: var(--ink); color: var(--paper);
  border-radius: 9px; padding: 11px 16px; font-size: 13px;
  box-shadow: var(--shadow-lg);
  animation: toast-in .24s cubic-bezier(.2, .9, .3, 1);
  max-width: 340px;
}
.toast svg { width: 15px; height: 15px; flex-shrink: 0; stroke-width: 2; }
.toast.ok svg { color: #6FD39B; }
.toast.err svg { color: #F09085; }
.toast.out { animation: toast-out .2s ease forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px) scale(.97); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(6px); } }

/* ══════════════════════════════════════════
   LOADING
══════════════════════════════════════════ */
.spinner {
  width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  animation: spin .6s linear infinite; flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }

.boot {
  position: fixed; inset: 0; background: var(--paper);
  display: flex; align-items: center; justify-content: center;
  gap: 11px; color: var(--ink-3); font-size: 13px; z-index: 500;
}

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */
@media (max-width: 1000px) {
  .kpis { grid-template-columns: 1fr 1fr; }
  .g4 { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  .auth { grid-template-columns: 1fr; }
  .auth-art { padding: 40px 24px; gap: 18px; }
  .auth-art .mark { width: 84px; }
  .auth-art-ar { font-size: 21px; }

  .shell { grid-template-columns: 1fr; }
  .rail {
    position: sticky; top: 0; height: auto; z-index: 30;
    flex-direction: row; align-items: center; gap: 8px;
    padding: 9px 12px; overflow-x: auto;
  }
  .rail-brand { padding: 0 12px 0 0; margin: 0; border-bottom: none; border-inline-end: 1px solid rgba(224, 194, 112, .14); }
  .rail-brand-txt { display: none; }
  .rail-nav { flex-direction: row; padding: 0; gap: 4px; }
  .rail-btn { padding: 8px 11px; font-size: 12.5px; }
  .rail-btn.on { box-shadow: inset 0 -2px 0 var(--gold); }
  .rail-foot { margin: 0 0 0 auto; padding: 0; border-top: none; }
  [dir='rtl'] .rail-foot { margin: 0 auto 0 0; }
  .rail-user, .rail-status { display: none; }
  .phead { position: static; padding: 20px 18px 16px; }
  .pbody { padding: 18px 18px 0; }
}

@media (max-width: 620px) {
  html { font-size: 14px; }
  .picker-grid, .g2, .g3, .g4, .seg { grid-template-columns: 1fr; }
  .kpis { grid-template-columns: 1fr 1fr; }
  .seg-btn + .seg-btn { border-inline-start: none; border-top: 1px solid var(--line-2); }
  .filters .inp, .filters .sel, .filters .search { flex: 1 1 100%; }
  .form-actions { flex-direction: column-reverse; }
  .form-actions .btn { width: 100%; justify-content: center; }
  .form-actions .spacer { margin: 0; }
  .toast-stack { inset-inline: 14px; bottom: 14px; }
  .toast { max-width: none; }
}