/* ══════════════════════════════════════════════════════════════════════════
   Qalla — single stylesheet.  Emerald + graphite, light and dark.

   Design language (deliberately unlike the blue/orange reference system):
     · a permanently dark graphite rail on the left, in BOTH themes, so the
       workspace reads like a console rather than a document
     · tighter 8px geometry instead of pill-shaped cards
     · every card/section is identified by a coloured left edge, not a heading
       colour, which keeps dense financial tables legible
     · money is always colour-coded: green in, red out, grey neutral
   ══════════════════════════════════════════════════════════════════════════ */

/* Ubuntu Arabic covers Latin + Arabic + Kurdish glyphs, so one family serves
   all three locales and layout metrics never shift between languages. */
@font-face {
  font-family: 'Qalla';
  src: url('../fonts/alfont_com_Ubuntu-Arabic_R.ttf') format('truetype');
  font-weight: 300 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Qalla';
  src: url('../fonts/alfont_com_Ubuntu-Arabic_B.ttf') format('truetype');
  font-weight: 600 900; font-style: normal; font-display: swap;
}

/* ── Tokens: light ──────────────────────────────────────────────────────── */
:root,
[data-theme="light"] {
  --brand:         #0f766e;
  --brand-hover:   #115e56;
  --brand-ink:     #ffffff;
  --brand-soft:    rgba(15,118,110,.10);
  --brand-softer:  rgba(15,118,110,.05);
  --brand-line:    rgba(15,118,110,.28);
  --brand-grad:    linear-gradient(135deg, #14a08f 0%, #0f766e 55%, #0b544e 100%);

  --accent:        #d97706;
  --accent-hover:  #b45309;
  --accent-soft:   rgba(217,119,6,.12);
  --accent-grad:   linear-gradient(135deg, #f59e0b 0%, #d97706 100%);

  --success:       #15803d;
  --success-soft:  rgba(21,128,61,.12);
  --danger:        #b91c1c;
  --danger-soft:   rgba(185,28,28,.10);
  --warn:          #b45309;
  --warn-soft:     rgba(180,83,9,.12);
  --info:          #0369a1;
  --info-soft:     rgba(3,105,161,.11);

  /* Money semantics — used everywhere so good/bad reads before you read digits.
     pos  = money realised (profit, cash actually taken)
     neg  = money out OR still outstanding in either direction — an uncollected
            receivable is not a gain, so it must never render green
     zero = settled / nothing to see */
  --money-pos:     #15803d;
  --money-neg:     #b91c1c;
  --money-zero:    #64748b;

  /* Section accents — each page area gets its own edge colour */
  --c-emerald: #0f766e;  --c-emerald-soft: rgba(15,118,110,.12);
  --c-amber:   #d97706;  --c-amber-soft:   rgba(217,119,6,.12);
  --c-sky:     #0369a1;  --c-sky-soft:     rgba(3,105,161,.12);
  --c-rose:    #be123c;  --c-rose-soft:    rgba(190,18,60,.10);
  --c-violet:  #6d28d9;  --c-violet-soft:  rgba(109,40,217,.11);
  --c-slate:   #475569;  --c-slate-soft:   rgba(71,85,105,.11);

  --bg:            #eef1ef;
  --surface:       #ffffff;
  --surface-2:     #f6f8f7;
  --surface-3:     #eceff0;
  --border:        #e0e5e3;
  --border-strong: #cbd3d0;
  --text:          #14211d;
  --text-muted:    #5b6b66;
  --text-soft:     #93a29d;

  /* The rail stays graphite in light mode — that is the signature of this UI */
  --rail-bg:       #131a18;
  --rail-bg-2:     #1b2422;
  --rail-text:     #cfd8d5;
  --rail-text-dim: #8b9995;
  --rail-active:   #14a08f;
  --rail-border:   #263230;

  --shadow-sm: 0 1px 2px rgba(16,32,28,.06);
  --shadow:    0 6px 20px rgba(16,32,28,.09);
  --shadow-lg: 0 18px 44px rgba(16,32,28,.16);

  --r-sm: 6px;
  --r:    9px;
  --r-lg: 14px;
  --trans: 160ms cubic-bezier(.4,0,.2,1);
}

/* ── Tokens: dark ───────────────────────────────────────────────────────── */
[data-theme="dark"] {
  --brand:         #2dd4bf;
  --brand-hover:   #5eead4;
  --brand-ink:     #07211e;
  --brand-soft:    rgba(45,212,191,.16);
  --brand-softer:  rgba(45,212,191,.08);
  --brand-line:    rgba(45,212,191,.34);
  --brand-grad:    linear-gradient(135deg, #5eead4 0%, #2dd4bf 55%, #0f9e8e 100%);

  --accent:        #fbbf24;
  --accent-hover:  #fcd34d;
  --accent-soft:   rgba(251,191,36,.16);
  --accent-grad:   linear-gradient(135deg, #fcd34d 0%, #fbbf24 100%);

  --success:       #34d399;
  --success-soft:  rgba(52,211,153,.15);
  --danger:        #f87171;
  --danger-soft:   rgba(248,113,113,.15);
  --warn:          #fbbf24;
  --warn-soft:     rgba(251,191,36,.15);
  --info:          #38bdf8;
  --info-soft:     rgba(56,189,248,.15);

  --money-pos:     #34d399;
  --money-neg:     #f87171;
  --money-zero:    #94a3b8;

  --c-emerald: #2dd4bf;  --c-emerald-soft: rgba(45,212,191,.16);
  --c-amber:   #fbbf24;  --c-amber-soft:   rgba(251,191,36,.16);
  --c-sky:     #38bdf8;  --c-sky-soft:     rgba(56,189,248,.16);
  --c-rose:    #fb7185;  --c-rose-soft:    rgba(251,113,133,.15);
  --c-violet:  #a78bfa;  --c-violet-soft:  rgba(167,139,250,.16);
  --c-slate:   #94a3b8;  --c-slate-soft:   rgba(148,163,184,.15);

  --bg:            #0b1211;
  --surface:       #121b19;
  --surface-2:     #172220;
  --surface-3:     #1e2b28;
  --border:        #24322f;
  --border-strong: #354642;
  --text:          #e3ebe8;
  --text-muted:    #93a5a0;
  --text-soft:     #6b7d78;

  --rail-bg:       #0a100f;
  --rail-bg-2:     #121b19;
  --rail-text:     #c3d0cc;
  --rail-text-dim: #7d8d89;
  --rail-active:   #2dd4bf;
  --rail-border:   #1d2826;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow:    0 6px 20px rgba(0,0,0,.45);
  --shadow-lg: 0 18px 44px rgba(0,0,0,.6);
}

/* ── Reset ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: 'Qalla', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-hover); }
h1,h2,h3,h4 { margin: 0 0 .5rem; line-height: 1.25; font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1.02rem; }
p  { margin: 0 0 .75rem; }
hr { border: 0; border-top: 1px solid var(--border); margin: 1.1rem 0; }
::selection { background: var(--brand-soft); }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ══ App shell ═════════════════════════════════════════════════════════ */
.app-shell { display: flex; min-height: 100vh; }

/* ── Left rail ──────────────────────────────────────────────────────────── */
.rail {
  width: 236px;
  flex: 0 0 236px;
  background: var(--rail-bg);
  border-inline-end: 1px solid var(--rail-border);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  z-index: 40;
  transition: width var(--trans), flex-basis var(--trans);
}

.rail-brand {
  display: flex; align-items: center; gap: .6rem;
  padding: 1rem .95rem;
  border-bottom: 1px solid var(--rail-border);
  color: #fff;
  min-height: 62px;
}
.rail-mark {
  width: 32px; height: 32px; flex: 0 0 32px;
  border-radius: 8px;
  background: var(--brand-grad);
  display: grid; place-items: center;
  font-weight: 800; font-size: .95rem; color: #04201d;
  box-shadow: 0 2px 10px rgba(20,160,143,.35);
}
.rail-name { font-weight: 700; font-size: 1.02rem; letter-spacing: -.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.rail-nav { flex: 1; overflow-y: auto; padding: .55rem .5rem 1.2rem; }
.rail-nav::-webkit-scrollbar { width: 6px; }
.rail-nav::-webkit-scrollbar-thumb { background: var(--rail-border); border-radius: 3px; }

.rail-group {
  font-size: .66rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--rail-text-dim); font-weight: 700;
  padding: .95rem .65rem .35rem;
}

.rail-link {
  display: flex; align-items: center; gap: .65rem;
  padding: .52rem .65rem;
  border-radius: var(--r-sm);
  color: var(--rail-text);
  font-size: .88rem; font-weight: 500;
  position: relative;
  transition: background var(--trans), color var(--trans);
  white-space: nowrap;
}
.rail-link i { width: 18px; text-align: center; font-size: .92rem; color: var(--rail-text-dim); transition: color var(--trans); flex: 0 0 18px; }
.rail-link:hover { background: rgba(255,255,255,.055); color: #fff; }
.rail-link:hover i { color: var(--rail-active); }
.rail-link.active { background: rgba(45,212,191,.13); color: #fff; font-weight: 600; }
.rail-link.active i { color: var(--rail-active); }
.rail-link.active::before {
  content: ''; position: absolute; inset-inline-start: -.5rem; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 62%;
  background: var(--rail-active);
  border-radius: 0 3px 3px 0;
}
[dir="rtl"] .rail-link.active::before { border-radius: 3px 0 0 3px; }

/* Collapsed rail (toggled on narrow screens or by the user) */
.rail.collapsed { width: 62px; flex-basis: 62px; }
.rail.collapsed .rail-name,
.rail.collapsed .rail-text,
.rail.collapsed .rail-group { display: none; }
.rail.collapsed .rail-link { justify-content: center; padding-inline: 0; }
.rail.collapsed .rail-brand { justify-content: center; padding-inline: 0; }

/* ── Main column ────────────────────────────────────────────────────────── */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  height: 62px;
  display: flex; align-items: center; gap: .8rem;
  padding: 0 1.15rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 30;
}
.topbar-title { font-weight: 700; font-size: 1.06rem; letter-spacing: -.015em; }
.topbar-spacer { flex: 1; }

.icon-btn {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-muted);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: var(--trans);
  font-size: .92rem;
}
.icon-btn:hover { background: var(--brand-soft); color: var(--brand); border-color: var(--brand-line); }

.rate-chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .32rem .6rem;
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-size: .78rem; font-weight: 700;
  white-space: nowrap;
}

.user-chip {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .28rem .55rem .28rem .3rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
  font-size: .82rem; font-weight: 600;
  color: var(--text);
}
.user-av {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--brand-grad); color: var(--brand-ink);
  display: grid; place-items: center;
  font-size: .74rem; font-weight: 800;
}

.content { padding: 1.15rem; flex: 1; max-width: 1560px; width: 100%; }

/* ── Page header ────────────────────────────────────────────────────────── */
.page-head {
  display: flex; align-items: flex-start; gap: 1rem;
  flex-wrap: wrap; margin-bottom: 1.05rem;
}
.page-head h1 { margin: 0; }
.page-sub { color: var(--text-muted); font-size: .87rem; margin: .15rem 0 0; }
.page-actions { margin-inline-start: auto; display: flex; gap: .5rem; flex-wrap: wrap; }

/* ── Cards ──────────────────────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
  margin-bottom: 1.05rem;
  overflow: hidden;
}
.card-head {
  display: flex; align-items: center; gap: .6rem;
  padding: .75rem .95rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.card-head h2, .card-head h3 { margin: 0; font-size: .95rem; }
.card-head .spacer { flex: 1; }
.card-body { padding: .95rem; }
.card-body.tight { padding: 0; }

/* Coloured left edge identifies what a card is about */
.card.edge { border-inline-start: 3px solid var(--c-slate); }
.card.edge-emerald { border-inline-start-color: var(--c-emerald); }
.card.edge-amber   { border-inline-start-color: var(--c-amber); }
.card.edge-sky     { border-inline-start-color: var(--c-sky); }
.card.edge-rose    { border-inline-start-color: var(--c-rose); }
.card.edge-violet  { border-inline-start-color: var(--c-violet); }

/* ── Stat tiles ─────────────────────────────────────────────────────────── */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
  gap: .8rem;
  margin-bottom: 1.05rem;
}
.stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--c-slate);
  border-radius: var(--r);
  padding: .85rem .9rem;
  box-shadow: var(--shadow-sm);
  min-width: 0;
}
.stat-emerald { border-top-color: var(--c-emerald); }
.stat-amber   { border-top-color: var(--c-amber); }
.stat-sky     { border-top-color: var(--c-sky); }
.stat-rose    { border-top-color: var(--c-rose); }
.stat-violet  { border-top-color: var(--c-violet); }

.stat-label {
  font-size: .73rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-muted); font-weight: 700;
  display: flex; align-items: center; gap: .4rem;
}
.stat-label i { font-size: .8rem; opacity: .75; }
.stat-value {
  font-size: 1.32rem; font-weight: 800; letter-spacing: -.02em;
  margin-top: .3rem; word-break: break-word;
}
.stat-sub { font-size: .76rem; color: var(--text-soft); margin-top: .15rem; }
.sub-usd { font-size: .8em; color: var(--text-soft); font-weight: 600; }

.money-pos  { color: var(--money-pos); }
.money-neg  { color: var(--money-neg); }
.money-zero { color: var(--money-zero); }

/* ── Tables ─────────────────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

table.tbl { width: 100%; border-collapse: collapse; font-size: .87rem; }
table.tbl th {
  text-align: start;
  padding: .58rem .7rem;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border-strong);
  font-weight: 700; font-size: .74rem;
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-muted);
  white-space: nowrap;
  position: sticky; top: 0; z-index: 1;
}
table.tbl td {
  padding: .55rem .7rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
table.tbl tbody tr:last-child td { border-bottom: 0; }
table.tbl tbody tr:hover { background: var(--brand-softer); }
table.tbl tfoot td {
  background: var(--surface-2);
  font-weight: 800;
  border-top: 2px solid var(--border-strong);
}
.num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Bidi: "370,000 IQD" is a European-number run followed by a Latin word. Inside
   an RTL paragraph the two land on different embedding levels and get flipped
   to "IQD 370,000". Isolating each money string as its own LTR run keeps the
   amount and its currency in the order they were written, in every locale. */
[dir="rtl"] .num,
[dir="rtl"] .stat-value,
[dir="rtl"] .val-t,
[dir="rtl"] .line-total,
[dir="rtl"] .sub-usd,
[dir="rtl"] .rate-chip {
  direction: ltr;
  unicode-bidi: isolate;
  text-align: left;          /* the "end" side of an RTL row */
}
[dir="rtl"] .stat-value,
[dir="rtl"] .rate-chip { text-align: right; }
.nowrap { white-space: nowrap; }
.muted { color: var(--text-muted); }
.soft  { color: var(--text-soft); }
.tiny  { font-size: .76rem; }
.strong { font-weight: 700; }

.empty {
  text-align: center; padding: 2.4rem 1rem; color: var(--text-soft);
}
.empty i { font-size: 2rem; opacity: .35; display: block; margin-bottom: .6rem; }

/* ── Badges ─────────────────────────────────────────────────────────────── */
.badge {
  display: inline-block;
  padding: .16rem .48rem;
  border-radius: 999px;
  font-size: .71rem; font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
}
.badge-ok     { background: var(--success-soft); color: var(--success); }
.badge-warn   { background: var(--warn-soft);    color: var(--warn); }
.badge-danger { background: var(--danger-soft);  color: var(--danger); }
.badge-info   { background: var(--info-soft);    color: var(--info); }
.badge-muted  { background: var(--surface-3);    color: var(--text-muted); }
.badge-new    { background: var(--c-emerald-soft); color: var(--c-emerald); }
.badge-used   { background: var(--c-amber-soft);   color: var(--c-amber); }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  padding: .5rem .85rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  font: inherit; font-size: .86rem; font-weight: 600;
  cursor: pointer;
  transition: var(--trans);
  white-space: nowrap;
  text-decoration: none;
}
.btn:hover { background: var(--surface-2); border-color: var(--brand-line); color: var(--text); }
.btn:disabled, .btn.disabled { opacity: .5; cursor: not-allowed; }

.btn-primary { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.btn-primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); color: var(--brand-ink); }

.btn-accent { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-accent:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }
[data-theme="dark"] .btn-accent { color: #241a04; }

.btn-danger { background: transparent; border-color: var(--danger); color: var(--danger); }
.btn-danger:hover { background: var(--danger-soft); color: var(--danger); }

.btn-ghost { background: transparent; border-color: transparent; color: var(--text-muted); }
.btn-ghost:hover { background: var(--surface-3); color: var(--text); }

.btn-sm { padding: .32rem .6rem; font-size: .78rem; }
.btn-lg { padding: .7rem 1.3rem; font-size: .95rem; }
.btn-block { width: 100%; }

.btn-row { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }

/* ── Forms ──────────────────────────────────────────────────────────────── */
.field { margin-bottom: .8rem; min-width: 0; }
.field > label,
.lbl {
  display: block;
  font-size: .77rem; font-weight: 700;
  color: var(--text-muted);
  margin-bottom: .28rem;
  text-transform: uppercase; letter-spacing: .04em;
}
.req::after { content: ' *'; color: var(--danger); }

input[type=text], input[type=number], input[type=password], input[type=date],
input[type=datetime-local], input[type=search], input[type=tel], input[type=email],
select, textarea {
  width: 100%;
  padding: .48rem .6rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit; font-size: .87rem;
  transition: border-color var(--trans), box-shadow var(--trans);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}
input::placeholder, textarea::placeholder { color: var(--text-soft); }
input:disabled, select:disabled, textarea:disabled { background: var(--surface-3); color: var(--text-soft); cursor: not-allowed; }
textarea { min-height: 68px; resize: vertical; }
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%235b6b66' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .6rem center;
  padding-inline-end: 1.7rem;
}
[dir="rtl"] select { background-position: left .6rem center; }
[data-theme="dark"] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2393a5a0' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Amount + currency as one control */
.money-input { display: flex; }
.money-input input { border-start-end-radius: 0; border-end-end-radius: 0; }
.money-input select {
  width: auto; flex: 0 0 auto;
  border-start-start-radius: 0; border-end-start-radius: 0;
  border-inline-start: 0;
  background-color: var(--surface-2);
  font-weight: 700; font-size: .8rem;
  padding-inline: .5rem 1.5rem;
}

.grid { display: grid; gap: .8rem; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }

.help { font-size: .76rem; color: var(--text-soft); margin-top: .25rem; }

.check {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .86rem; font-weight: 500; cursor: pointer;
}
.check input { width: auto; margin: 0; accent-color: var(--brand); }

/* Segmented radio control */
.seg { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--r-sm); overflow: hidden; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label {
  padding: .42rem .8rem;
  font-size: .82rem; font-weight: 600;
  cursor: pointer;
  background: var(--surface);
  color: var(--text-muted);
  border-inline-end: 1px solid var(--border);
  transition: var(--trans);
  margin: 0; text-transform: none; letter-spacing: 0;
}
.seg label:last-of-type { border-inline-end: 0; }
.seg input:checked + label { background: var(--brand); color: var(--brand-ink); }
.seg input:focus-visible + label { box-shadow: inset 0 0 0 2px var(--brand-hover); }

/* ── Notes / alerts ─────────────────────────────────────────────────────── */
.note {
  padding: .65rem .85rem;
  border-radius: var(--r-sm);
  border-inline-start: 3px solid;
  margin-bottom: .9rem;
  font-size: .87rem; font-weight: 500;
  display: flex; align-items: flex-start; gap: .55rem;
}
.note i { margin-top: .15rem; }
.note-ok   { background: var(--success-soft); border-color: var(--success); color: var(--success); }
.note-err  { background: var(--danger-soft);  border-color: var(--danger);  color: var(--danger); }
.note-warn { background: var(--warn-soft);    border-color: var(--warn);    color: var(--warn); }
.note-info { background: var(--info-soft);    border-color: var(--info);    color: var(--info); }

/* ── Filter / period bar ────────────────────────────────────────────────── */
.range-bar { margin-bottom: 1rem; }
.range-tabs {
  display: flex; flex-wrap: wrap; gap: .35rem; align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: .4rem;
  box-shadow: var(--shadow-sm);
}
.range-tab {
  padding: .38rem .72rem;
  border-radius: var(--r-sm);
  font-size: .83rem; font-weight: 600;
  color: var(--text-muted);
  transition: var(--trans);
}
a.range-tab:hover { background: var(--surface-3); color: var(--text); }
a.range-tab.active { background: var(--brand); color: var(--brand-ink); }
.range-custom {
  display: inline-flex; align-items: center; gap: .35rem;
  margin-inline-start: auto; padding: .15rem .3rem;
}
.range-custom input[type=date] { width: auto; padding: .3rem .45rem; font-size: .8rem; }
.range-custom.active { background: var(--brand-soft); border-radius: var(--r-sm); }
.range-dash { color: var(--text-soft); }

.filters {
  display: flex; gap: .6rem; flex-wrap: wrap; align-items: flex-end;
  margin-bottom: 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: .75rem;
  box-shadow: var(--shadow-sm);
}
.filters .field { margin-bottom: 0; }
.filters .field input, .filters .field select { min-width: 150px; }

/* ── Pager ──────────────────────────────────────────────────────────────── */
.pager {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding: .7rem .3rem 0;
  font-size: .82rem; color: var(--text-muted);
}
.pager-links { display: flex; gap: .25rem; flex-wrap: wrap; }
.pg {
  min-width: 30px; height: 30px;
  display: inline-grid; place-items: center;
  padding: 0 .4rem;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text-muted);
  font-size: .82rem; font-weight: 600;
}
a.pg:hover { border-color: var(--brand); color: var(--brand); }
.pg-active { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.pg-off, .pg-gap { opacity: .4; }

/* ── Line-item grid (sale screens) ──────────────────────────────────────── */
.lines { width: 100%; border-collapse: collapse; font-size: .86rem; }
.lines th {
  text-align: start; padding: .45rem .5rem;
  font-size: .7rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-muted); font-weight: 700;
  border-bottom: 1px solid var(--border-strong);
  white-space: nowrap;
}
.lines td { padding: .32rem .3rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.lines tr:last-child td { border-bottom: 0; }
.lines input, .lines select { padding: .4rem .5rem; font-size: .84rem; }
/* Inside the narrow grid cells the currency select gets squeezed until the
   label collides with its own arrow — give it a floor and tighten the arrow. */
.lines .money-input select {
  min-width: 64px;
  padding-inline: .4rem 1.25rem;
  background-position: right .3rem center;
  font-size: .76rem;
}
[dir="rtl"] .lines .money-input select { background-position: left .3rem center; }
.lines .col-del { width: 38px; }
.line-total { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; padding-top: .68rem; display: block; }
.row-new { background: var(--accent-soft); }
.stock-hint { font-size: .72rem; color: var(--text-soft); margin-top: .15rem; display: block; }
.stock-hint.low { color: var(--warn); font-weight: 700; }
.stock-hint.none { color: var(--danger); font-weight: 700; }

/* Totals panel beside the line grid */
.totals { display: flex; flex-direction: column; gap: .4rem; }
.totals-row {
  display: flex; justify-content: space-between; gap: 1rem;
  font-size: .88rem;
  padding: .2rem 0;
}
.totals-row.grand {
  border-top: 2px solid var(--border-strong);
  margin-top: .35rem; padding-top: .55rem;
  font-size: 1.12rem; font-weight: 800;
}
.totals-row .lbl-t { color: var(--text-muted); font-weight: 600; }
.totals-row .val-t { font-variant-numeric: tabular-nums; font-weight: 700; }

/* ── Autocomplete ───────────────────────────────────────────────────────── */
.ac-wrap { position: relative; }
.ac-list {
  position: absolute; inset-inline: 0; top: calc(100% + 3px);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-lg);
  max-height: 260px; overflow-y: auto;
  z-index: 60;
  display: none;
}
.ac-list.open { display: block; }
.ac-item {
  padding: .45rem .6rem;
  cursor: pointer;
  font-size: .85rem;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: .5rem;
}
.ac-item:last-child { border-bottom: 0; }
.ac-item:hover, .ac-item.sel { background: var(--brand-soft); }
.ac-item .ac-main { font-weight: 600; }
.ac-item .ac-meta { margin-inline-start: auto; font-size: .75rem; color: var(--text-soft); white-space: nowrap; }
.ac-empty { padding: .6rem; font-size: .82rem; color: var(--text-soft); text-align: center; }

/* ── Modal ──────────────────────────────────────────────────────────────── */
.modal-back {
  position: fixed; inset: 0;
  background: rgba(8,16,14,.55);
  backdrop-filter: blur(2px);
  display: none;
  align-items: center; justify-content: center;
  z-index: 100; padding: 1rem;
}
.modal-back.open { display: flex; }
.modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  width: 100%; max-width: 520px;
  max-height: 90vh; overflow-y: auto;
}
.modal-head {
  display: flex; align-items: center; gap: .6rem;
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--border);
}
.modal-head h3 { margin: 0; }
.modal-head .spacer { flex: 1; }
.modal-body { padding: 1rem; }
.modal-foot {
  display: flex; gap: .5rem; justify-content: flex-end;
  padding: .8rem 1rem;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
}

/* ── Daily revenue vs profit — GROUPED bars ─────────────────────────────
   Deliberately grouped, not stacked: profit is a part OF revenue, so
   stacking the two would draw a total that doesn't exist. Both series are
   money in IQD on one shared scale — never a second axis.

   The two hues were validated with the dataviz palette checker against both
   the light (#ffffff) and dark (#121b19) chart surfaces: adjacent CVD
   separation ΔE 12.5 (protan) / 28.7 (tritan), normal-vision ΔE 24.3, chroma
   and contrast pass in both modes. They are identical across themes because
   this pair clears the light AND dark lightness bands. Don't "fix" them to
   match the UI accent — that would break the check.  */
:root, [data-theme="light"], [data-theme="dark"] {
  --chart-rev: #d97706;   /* revenue — amber */
  --chart-pro: #0d9488;   /* profit  — teal  */
}

.chart {
  display: flex; align-items: flex-end; gap: 6px;
  height: 148px; padding: .4rem 0 0;
  overflow-x: auto;
}
.chart-col {
  flex: 1 0 22px; min-width: 22px; height: 100%;
  display: flex; align-items: flex-end; justify-content: center;
  gap: 2px;                       /* the 2px surface gap between adjacent marks */
  position: relative;
  cursor: default;
}
.chart-bar {
  width: 9px;                     /* thin marks */
  border-radius: 3px 3px 0 0;     /* rounded data-end, square on the baseline */
  min-height: 2px;
  transition: opacity var(--trans);
}
.chart-bar.rev { background: var(--chart-rev); }
.chart-bar.pro { background: var(--chart-pro); }
.chart-col:hover .chart-bar { opacity: .68; }

.chart-axis {
  display: flex; gap: 6px;
  font-size: .66rem; color: var(--text-soft);
  border-top: 1px solid var(--border);
  padding-top: .3rem;
  overflow-x: auto;
}
.chart-axis span {
  flex: 1 0 22px; min-width: 22px;
  text-align: center;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.chart-legend {
  display: flex; gap: 1.1rem; flex-wrap: wrap;
  font-size: .78rem; color: var(--text-muted);
  margin-top: .6rem;
}
.chart-legend span { display: inline-flex; align-items: center; gap: .4rem; }
.chart-key { width: 10px; height: 10px; border-radius: 2px; flex: 0 0 10px; }

/* Forced-colors / print fallback: hue alone stops carrying identity, so give
   the two series different textures as a secondary encoding. */
@media (forced-colors: active), print {
  .chart-bar.rev { background: repeating-linear-gradient(45deg,  currentColor 0 2px, transparent 2px 4px); }
  .chart-bar.pro { background: repeating-linear-gradient(135deg, currentColor 0 2px, transparent 2px 4px); }
}

/* ── Misc ───────────────────────────────────────────────────────────────── */
/* 1fr can shrink below its content and let the fixed sidebar overflow the
   viewport; minmax(0,1fr) pins the flexible column so the split always fits its
   parent instead of spilling (which, in RTL, clips the sidebar off the start). */
.split { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1.05rem; align-items: start; }
.hstack { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.vstack { display: flex; flex-direction: column; gap: .5rem; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.mt-1 { margin-top: .6rem; } .mb-1 { margin-bottom: .6rem; }
.mt-2 { margin-top: 1.1rem; } .mb-2 { margin-bottom: 1.1rem; }
.text-end { text-align: end; }
.text-center { text-align: center; }
.w-full { width: 100%; }

.progress { height: 6px; background: var(--surface-3); border-radius: 3px; overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--brand); border-radius: 3px; }
.progress.warn > span { background: var(--warn); }
.progress.danger > span { background: var(--danger); }

/* ── Responsive ─────────────────────────────────────────────────────────── */
/* Stack the split (main + fixed 320px sidebar) once the rail plus both columns
   no longer fit a laptop viewport. Below this the sidebar would be squeezed —
   and in RTL squeezed clean off the start edge — so drop to one column. */
@media (max-width: 1240px) {
  .split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .rail {
    position: fixed; inset-inline-start: 0; top: 0;
    transform: translateX(-100%);
    transition: transform var(--trans);
    box-shadow: var(--shadow-lg);
  }
  [dir="rtl"] .rail { transform: translateX(100%); }
  .rail.open { transform: translateX(0); }
  .rail-backdrop {
    position: fixed; inset: 0; background: rgba(8,16,14,.5);
    z-index: 39; display: none;
  }
  .rail-backdrop.open { display: block; }
  .content { padding: .85rem; }
  .topbar { padding: 0 .8rem; }
  .stats { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .6rem; }
  .stat-value { font-size: 1.14rem; }
  /* Drop secondary top-bar text so the rate chip and controls keep their room. */
  .hide-sm { display: none; }
}
@media (max-width: 560px) {
  body { font-size: 14px; }
  .page-actions { width: 100%; }
  .range-custom { margin-inline-start: 0; width: 100%; }
}

/* ══ Motion ════════════════════════════════════════════════════════════════
   Restrained, GPU-cheap animation: only transform + opacity, never layout
   properties, so nothing here can cause reflow jank. Every effect is wrapped
   so `prefers-reduced-motion: reduce` turns the whole layer off for anyone who
   asked their OS to stop animations. Motion is decoration — the UI is fully
   usable with all of it disabled.
   ══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {

  @keyframes rise {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes fade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes pop {
    from { opacity: 0; transform: scale(.96) translateY(6px); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes slideIn {
    from { opacity: 0; transform: translateX(-10px); }
    to   { opacity: 1; transform: none; }
  }
  [dir="rtl"] .note { animation-name: slideInRtl; }
  @keyframes slideInRtl {
    from { opacity: 0; transform: translateX(10px); }
    to   { opacity: 1; transform: none; }
  }

  /* Page content settles in on load. The rail and top bar are deliberately
     excluded — chrome that flew in on every navigation would read as noise. */
  .content > .page-head { animation: rise .32s cubic-bezier(.4,0,.2,1) both; }
  .content > .stats > .stat,
  .content > .card,
  .content > .split > div > .card,
  .content > .table-wrap,
  .content > .range-bar,
  .content > .filters { animation: rise .34s cubic-bezier(.4,0,.2,1) both; }

  /* A gentle stagger so tiles/cards cascade rather than snapping together. */
  .content > .stats > .stat:nth-child(1) { animation-delay: .02s; }
  .content > .stats > .stat:nth-child(2) { animation-delay: .06s; }
  .content > .stats > .stat:nth-child(3) { animation-delay: .10s; }
  .content > .stats > .stat:nth-child(4) { animation-delay: .14s; }
  .content > .stats > .stat:nth-child(5) { animation-delay: .18s; }
  .content > .card:nth-of-type(1) { animation-delay: .04s; }
  .content > .card:nth-of-type(2) { animation-delay: .10s; }
  .content > .card:nth-of-type(3) { animation-delay: .16s; }

  .note { animation: slideIn .3s cubic-bezier(.4,0,.2,1) both; }

  /* Table rows fade in as a group (one animation on tbody, not per-row, so a
     500-row table doesn't run 500 timelines). */
  table.tbl tbody { animation: fade .4s ease both; }

  /* Interactive feedback — cards and stat tiles lift a hair on hover. */
  .stat, .card { transition: transform var(--trans), box-shadow var(--trans); }
  .stat:hover  { transform: translateY(-2px); box-shadow: var(--shadow); }

  /* Buttons dip when pressed — the tactile "it registered" cue. */
  .btn:active:not(:disabled):not(.disabled) { transform: translateY(1px); }

  /* Rail links slide their icon a touch toward the label on hover. */
  .rail-link { transition: background var(--trans), color var(--trans); }
  .rail-link:hover i { transform: translateX(2px); }
  [dir="rtl"] .rail-link:hover i { transform: translateX(-2px); }
  .rail-link i { transition: color var(--trans), transform var(--trans); }

  /* Modal and autocomplete grow in from slightly small instead of blinking on. */
  .modal-back.open .modal { animation: pop .22s cubic-bezier(.34,1.4,.64,1) both; }
  .ac-list.open { animation: pop .16s ease both; }

  /* The dollar-rate chip pulses once when the page loads so the eye finds it. */
  .rate-chip { transition: transform var(--trans), background var(--trans); }
  .rate-chip:hover { transform: scale(1.04); }

  /* Line-item rows drop in as you add them on the sale screen. */
  .lines tbody tr[data-line] { animation: rise .22s ease both; }

  /* Chart bars grow up from the baseline on first paint. */
  .chart-bar { transform-origin: bottom; animation: growUp .5s cubic-bezier(.2,.7,.3,1) both; }
  @keyframes growUp { from { transform: scaleY(0); } to { transform: scaleY(1); } }
}

/* ── Print ──────────────────────────────────────────────────────────────── */
@media print {
  .rail, .topbar, .page-actions, .filters, .range-bar, .pager, .no-print { display: none !important; }
  .app-shell { display: block; }
  .content { padding: 0; max-width: none; }
  .card { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
  body { background: #fff; color: #000; font-size: 12px; }
  table.tbl th { background: #f0f0f0 !important; color: #000; }
  a { color: #000; text-decoration: none; }
  /* Kill every entrance animation for print so nothing renders mid-transition. */
  * { animation: none !important; }
}