/* ============================================================================
   Postal POS — design system
   Aesthetic: refined utilitarian "postal counter" — ink + postal amber,
   clean editorial type, subtle paper texture. RTL-aware.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=IBM+Plex+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap');

:root {
  /* warm "paper" palette adopted from the reference build */
  --ink:        #1a1d2b;
  --ink-2:      #2a2e40;
  --ink-3:      #6b6357;       /* muted */
  --line:       #d8cfbd;
  --line-2:     #e8e0cf;
  --paper:      #f4efe6;       /* warm paper */
  --paper-2:    #ebe5d8;
  --card:       #fdfbf6;       /* surface */
  --surface-2:  #f8f4ea;
  --amber:      #b8862c;       /* muted gold accent */
  --amber-2:    #d4a23f;
  --amber-deep: #9a6f20;
  --amber-d:    #9a6f20;       /* alias used by some views */
  --accent:     #b8862c;
  --accent-soft:#f0e3c2;
  --navy:       #2c4a6b;       /* info ink-blue */
  --navy-2:     #1f3650;
  --green:      #2d5a3f;
  --green-soft: #d8e5d6;
  --warn:       #a35a1f;
  --warn-soft:  #f3e1ce;
  --red:        #7d2424;
  --red-soft:   #ecd5d5;
  --info:       #2c4a6b;
  --info-soft:  #d4ddea;
  --shadow:     0 1px 2px rgba(26,29,43,.06), 0 4px 12px rgba(26,29,43,.08);
  --shadow-lg:  0 24px 48px rgba(26,29,43,.16);
  --radius:     12px;
  --radius-sm:  8px;
  --font-disp:  'Fraunces', 'Noto Sans Arabic', Georgia, serif;
  --font-body:  'IBM Plex Sans', system-ui, sans-serif;
  --font-mono:  'JetBrains Mono', 'Menlo', monospace;
}
[dir="rtl"] { --font-body: 'IBM Plex Sans Arabic', 'IBM Plex Sans', sans-serif;
              --font-disp: 'IBM Plex Sans Arabic', 'Fraunces', serif; }

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  background-image:
    radial-gradient(circle at 100% 0, rgba(245,163,0,.06), transparent 38%),
    radial-gradient(circle at 0 100%, rgba(31,58,95,.05), transparent 40%);
  -webkit-font-smoothing: antialiased;
  font-size: 15px; line-height: 1.5;
}
h1,h2,h3,h4 { font-family: var(--font-disp); letter-spacing: -.01em; line-height: 1.15; }
a { color: var(--navy); }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: 15px; }
.mono { font-family: var(--font-mono); }
.hidden { display: none !important; }

/* ---- buttons ---- */
.btn { display:inline-flex; align-items:center; gap:.5rem; justify-content:center;
  border:1px solid var(--line-2); background:var(--card); color:var(--ink);
  padding:.6rem 1rem; border-radius:var(--radius-sm); font-weight:600; font-size:.92rem;
  transition: transform .08s ease, box-shadow .15s ease, background .15s; }
.btn:hover { box-shadow: var(--shadow); }
.btn:active { transform: translateY(1px); }
.btn-primary { background:var(--ink); color:#fff; border-color:var(--ink); }
.btn-amber { background:var(--amber); border-color:var(--amber-deep); color:#fff; }
.btn-amber:hover { background:var(--amber-2); }
.btn-ghost { background:transparent; border-color:transparent; }
.btn-danger { color:var(--red); border-color:var(--red-soft); }
.btn-block { width:100%; }
.btn-lg { padding:.85rem 1.2rem; font-size:1rem; }
.btn:disabled { opacity:.5; cursor:not-allowed; }

/* ---- fields ---- */
.field { margin-bottom: .9rem; }
.field label { display:block; font-size:.78rem; font-weight:600; color:var(--ink-3);
  text-transform:uppercase; letter-spacing:.04em; margin-bottom:.35rem; }
.input, .field input, .field select, .field textarea {
  width:100%; padding:.62rem .75rem; border:1px solid var(--line-2);
  border-radius:var(--radius-sm); background:var(--surface-2); color:var(--ink); outline:none;
  transition:border .15s, box-shadow .15s; }
.input:focus, .field input:focus, .field select:focus, .field textarea:focus {
  border-color:var(--accent); box-shadow:0 0 0 3px rgba(184,134,44,.18); background:#fff; }
.input.input-error, .input-error {
  border-color:#c0392b !important; box-shadow:0 0 0 3px rgba(192,57,43,.16) !important; }
.row { display:flex; gap:.75rem; } .row > * { flex:1; }

/* ---- cards / surfaces ---- */
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); }
.pad { padding: 1.1rem 1.25rem; }

/* ---- badges ---- */
.badge { display:inline-flex; align-items:center; gap:.35rem; font-size:.72rem; font-weight:700;
  padding:.2rem .55rem; border-radius:99px; text-transform:uppercase; letter-spacing:.03em; }
.badge.pending       { background:var(--warn-soft); color:var(--warn); }
.badge.accepted      { background:var(--info-soft); color:var(--info); }
.badge.at_authority  { background:#fce5b4; color:#8b5a00; }
.badge.ready_to_ship { background:#cfe3f5; color:#004d7a; }
.badge.shipped       { background:#fce5b4; color:#8b5a00; }
.badge.returned_to_us{ background:#f9d6d2; color:#b71c1c; font-weight:600; }
/* "done" = the order was delivered to the customer end-to-end. Bright green
   to make it visually obvious this is the success/terminal state.  */
.badge.done,
.badge.delivered     { background:#2d5a3f; color:#ffffff; font-weight:600; }
.badge.cancelled     { background:var(--red-soft); color:var(--red); }
.badge.sent     { background:var(--green-soft); color:var(--green); }
.badge.failed   { background:var(--red-soft); color:var(--red); }

/* ============================ APP SHELL ================================== */
.app { display:grid; grid-template-columns: 248px 1fr; min-height:100vh; }
.sidebar { background:var(--ink); color:#cdd3d8; display:flex; flex-direction:column;
  padding:1.1rem .9rem; position:sticky; top:0; height:100vh; }
.brand { display:flex; align-items:center; gap:.6rem; padding:.4rem .5rem 1.1rem; }
.brand .mark { width:34px; height:34px; border-radius:9px; background:var(--amber);
  display:grid; place-items:center; color:#231a00; font-family:var(--font-disp); font-weight:800; font-size:1.1rem; }
.brand b { color:#fff; font-family:var(--font-disp); font-size:1.05rem; letter-spacing:-.02em; }
.brand small { display:block; color:#7e878e; font-size:.68rem; letter-spacing:.05em; text-transform:uppercase; }
.nav { display:flex; flex-direction:column; gap:.15rem; flex:1; }
.nav a { display:flex; align-items:center; gap:.7rem; padding:.6rem .7rem; border-radius:9px;
  color:#aeb6bc; text-decoration:none; font-weight:500; font-size:.92rem; transition:.12s; }
.nav a:hover { background:rgba(255,255,255,.06); color:#fff; }
.nav a.active { background:var(--amber); color:#231a00; font-weight:700; }
.nav a .ic { width:18px; text-align:center; }
.nav .qbadge { margin-inline-start:auto; background:var(--red); color:#fff; font-size:.7rem;
  font-weight:700; padding:.05rem .4rem; border-radius:99px; min-width:18px; text-align:center; }
.side-foot { border-top:1px solid rgba(255,255,255,.08); padding-top:.8rem; margin-top:.6rem; }
.side-foot .who { font-size:.85rem; color:#e7ebee; font-weight:600; }
.side-foot .role { font-size:.72rem; color:#7e878e; text-transform:uppercase; letter-spacing:.04em; }

.main { display:flex; flex-direction:column; min-width:0; }
.topbar { display:flex; align-items:center; gap:1rem; padding:.85rem 1.5rem;
  background:rgba(251,250,244,.85); backdrop-filter:blur(8px); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:20; }
.topbar h2 { font-size:1.15rem; }
.topbar .spacer { flex:1; }
.lang-switch { display:flex; gap:.2rem; background:var(--card); border:1px solid var(--line);
  border-radius:99px; padding:.15rem; }
.lang-switch button { border:none; background:transparent; padding:.3rem .6rem; border-radius:99px;
  font-weight:700; font-size:.78rem; color:var(--ink-3); }
.lang-switch button.active { background:var(--ink); color:#fff; }
.ws-dot { width:9px; height:9px; border-radius:50%; background:var(--ink-3); transition:.2s; }
.ws-dot.on { background:var(--green); box-shadow:0 0 0 3px rgba(46,125,79,.2); }

.content { padding:1.5rem; max-width:1200px; width:100%; margin:0 auto; }

/* ---- tables ---- */
table { width:100%; border-collapse:collapse; }
th { text-align:start; font-size:.74rem; text-transform:uppercase; letter-spacing:.04em;
  color:var(--ink-3); font-weight:700; padding:.6rem .75rem; border-bottom:1px solid var(--line); }
td { padding:.7rem .75rem; border-bottom:1px solid var(--line); font-size:.92rem; vertical-align:middle; }
tr:hover td { background:var(--paper-2); }

/* ---- grid helpers ---- */
.grid { display:grid; gap:1rem; }
.cols-2 { grid-template-columns:1fr 1fr; }
.cols-3 { grid-template-columns:repeat(3,1fr); }

/* ============================ LOGIN ===================================== */
.auth-wrap { min-height:100vh; display:grid; place-items:center; padding:1.5rem; }
.auth-card { width:100%; max-width:400px; }
.auth-card .head { text-align:center; margin-bottom:1.4rem; }
.auth-card .mark { width:54px; height:54px; border-radius:14px; background:var(--amber);
  display:grid; place-items:center; margin:0 auto .8rem; color:#231a00; font-family:var(--font-disp);
  font-weight:800; font-size:1.7rem; box-shadow:var(--shadow); }
.auth-err { background:#f9e7e4; color:#a23227; padding:.6rem .8rem; border-radius:9px;
  font-size:.85rem; font-weight:600; margin-bottom:.9rem; }

/* ============================ POS ====================================== */
.pos { display:grid; grid-template-columns: 1fr 380px; gap:1.25rem; align-items:start; }
.svc-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:.7rem; }
.svc { text-align:start; border:1px solid var(--line); border-radius:var(--radius-sm);
  background:var(--card); padding:.8rem; transition:.12s; }
.svc:hover { border-color:var(--amber); box-shadow:var(--shadow); transform:translateY(-1px); }
.svc .nm { font-weight:600; font-size:.9rem; }
.svc .pr { font-family:var(--font-mono); color:var(--navy); font-weight:700; margin-top:.3rem; }
.svc .cat { font-size:.68rem; color:var(--ink-3); text-transform:uppercase; }
.cart { position:sticky; top:84px; }
.cart-line { display:flex; align-items:center; gap:.6rem; padding:.55rem 0; border-bottom:1px solid var(--line); }
.cart-line .nm { flex:1; font-weight:500; font-size:.9rem; }
.qty { display:flex; align-items:center; gap:.3rem; }
.qty button { width:24px; height:24px; border-radius:6px; border:1px solid var(--line-2); background:var(--paper-2); font-weight:700; }
.totrow { display:flex; justify-content:space-between; padding:.3rem 0; font-size:.92rem; }
.totrow.grand { font-size:1.3rem; font-weight:800; font-family:var(--font-disp); border-top:2px solid var(--ink); margin-top:.4rem; padding-top:.6rem; }

/* ---- modal ---- */
.modal-bg { position:fixed; inset:0; background:rgba(22,26,29,.5); display:grid; place-items:center;
  z-index:100; padding:1.5rem; backdrop-filter:blur(3px); }
.modal { background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow-lg);
  width:100%; max-width:520px; max-height:90vh; overflow:auto; }
.modal .mhead { display:flex; align-items:center; padding:1rem 1.25rem; border-bottom:1px solid var(--line); }
.modal .mhead h3 { flex:1; font-size:1.1rem; }
.modal .mbody { padding:1.25rem; }

/* ---- toast ---- */
#toasts { position:fixed; bottom:1.2rem; inset-inline-end:1.2rem; z-index:200; display:flex; flex-direction:column; gap:.5rem; }
.toast { background:var(--ink); color:#fff; padding:.7rem 1rem; border-radius:10px; box-shadow:var(--shadow-lg);
  font-size:.9rem; font-weight:500; animation:slidein .25s ease; max-width:340px; }
.toast.ok { background:var(--green); } .toast.err { background:var(--red); }
@keyframes slidein { from { opacity:0; transform:translateY(8px); } }

.empty { text-align:center; color:var(--ink-3); padding:3rem 1rem; }
.empty .big { font-size:2.2rem; margin-bottom:.5rem; }

/* segmented control for channel picker */
.seg { display:inline-flex; border:1px solid var(--line-2); border-radius:var(--radius-sm); overflow:hidden; }
.seg button { border:none; background:var(--card); padding:.55rem 1rem; font-weight:600; font-size:.88rem; color:var(--ink-3); }
.seg button.active { background:var(--ink); color:#fff; }

/* QR card */
.qr-card { text-align:center; }
.qr-card img { width:240px; height:240px; border-radius:12px; border:1px solid var(--line); }

/* responsive */
@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { position:fixed; inset-inline-start:-260px; z-index:50; transition:.25s; width:248px; }
  .sidebar.open { inset-inline-start:0; box-shadow:var(--shadow-lg); }
  .menu-btn { display:inline-grid !important; }
  .pos { grid-template-columns:1fr; }
  .cols-2, .cols-3 { grid-template-columns:1fr; }
  .cart { position:static; }
}
.menu-btn { display:none; width:38px; height:38px; place-items:center; border-radius:9px;
  border:1px solid var(--line-2); background:var(--card); }

/* ---- numbered POS steps + quick-cash (reference cashier layout) ---- */
.step { display:flex; align-items:center; gap:.5rem; font-family:var(--font-disp); }
.step-no { display:inline-grid; place-items:center; width:24px; height:24px; border-radius:50%;
  background:var(--accent-soft); color:var(--amber-deep); font-family:var(--font-mono);
  font-weight:700; font-size:.8rem; flex:none; }
.quickcash .qc { font-family:var(--font-mono); font-weight:700; color:var(--ink-2); }
.quickcash .qc:hover { border-color:var(--accent); color:var(--amber-deep); background:var(--accent-soft); }
/* service cards: descriptive two-line look */
.svc { background:var(--card); }
.svc .nm { font-family:var(--font-disp); }
.svc:hover { border-color:var(--accent); }
.svc .pr { color:var(--amber-deep); }

/* segmented payment picker in the cashier summary */
.seg.paypick { display:flex; }
.seg.paypick button { flex:1; }
.seg.paypick button.active { background:var(--amber); color:#fff; }

/* invoice management: split list + side preview */
.inv-split { display:grid; grid-template-columns: 1.4fr 1fr; gap:1rem; align-items:start; }
.inv-split tr.sel { background:var(--accent-soft); }
.inv-split tr[data-row]:hover { background:var(--surface-2); }
.hrl { border-top:1px dashed var(--line); margin:.6rem 0; }
@media (max-width: 900px){ .inv-split { grid-template-columns: 1fr; } .inv-split #preview { position:static; max-height:none; } }

/* organized settings: grouped left nav + panel */
.settings-layout { display:grid; grid-template-columns: 240px 1fr; gap:1.2rem; align-items:start; }
.settings-nav { display:flex; flex-direction:column; gap:1rem; position:sticky; top:5rem; }
.settings-group { display:flex; flex-direction:column; gap:.2rem; }
.settings-group-label { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  color:var(--ink-3); padding:0 .2rem .15rem; }
.settings-nav button { text-align:start; border:1px solid transparent; background:transparent;
  padding:.5rem .7rem; border-radius:var(--radius-sm); font-weight:600; font-size:.9rem; color:var(--ink-2);
  cursor:pointer; transition:.12s; }
.settings-nav button:hover { background:var(--surface-2); }
.settings-nav button.active { background:var(--accent-soft); color:var(--amber-deep); border-color:var(--line); }
@media (max-width: 860px){
  .settings-layout { grid-template-columns: 1fr; }
  .settings-nav { position:static; flex-direction:row; flex-wrap:wrap; gap:.5rem; }
  .settings-group { flex-direction:row; flex-wrap:wrap; align-items:center; gap:.3rem; }
  .settings-group-label { width:100%; }
}

/* small count badge over status filter buttons (Orders view) */
.cbadge{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:18px; height:18px; padding:0 5px; margin-inline-start:.3rem;
  font-size:.7rem; font-weight:700; line-height:1;
  background:var(--amber,#c8881b); color:#fff; border-radius:999px; vertical-align:middle;
}
.seg button.active .cbadge{ background:#fff; color:var(--ink,#1c2530); }

/* login: language switch pills */
.auth-card .lang-row { display:flex; gap:.4rem; justify-content:center; margin-bottom:.8rem }
.auth-card .lang-pill { font:600 .78rem/1 system-ui; padding:.35rem .7rem; border:1px solid var(--line); background:transparent;
  color:var(--ink-2); border-radius:999px; cursor:pointer; transition:.15s }
.auth-card .lang-pill:hover { border-color:var(--amber); color:var(--ink-1) }
.auth-card .lang-pill.on { background:var(--amber); border-color:var(--amber); color:#1a1a1a }