/* =======================================================================
   JJ LUXE — Billing & Inventory
   Design tokens: ink black + warm ivory + brass gold signature, with a
   deep emerald secondary accent so the palette reads "boutique ledger"
   rather than generic gold-on-black.
   ======================================================================= */

:root{
  --ink:        #15130F;   /* sidebar / nav */
  --ink-soft:   #211E18;
  --ivory:      #FAF7F1;   /* page background */
  --panel:      #FFFFFF;   /* cards */
  --gold:       #B08D57;   /* brand signature */
  --gold-dark:  #8C6D3F;
  --gold-tint:  #F1E7D3;
  --emerald:    #1F4B3F;   /* stock / success accent */
  --emerald-tint:#E4EEE9;
  --rose:       #A23B3B;   /* danger / low stock */
  --rose-tint:  #F5E4E1;
  --ink-text:   #26221C;
  --taupe:      #857C6D;
  --border:     #E9E2D3;
  --border-soft:#F0EBDF;
  --radius:     10px;
  --radius-lg:  16px;
  --shadow:     0 1px 2px rgba(21,19,15,.05), 0 8px 24px -12px rgba(21,19,15,.18);
  --sidebar-w:  232px;
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:  'JetBrains Mono', ui-monospace, Menlo, monospace;
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:var(--font-body);
  background:var(--ivory);
  color:var(--ink-text);
  -webkit-font-smoothing:antialiased;
  font-size:14.5px;
  line-height:1.5;
}
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:600; margin:0 0 4px; color:var(--ink); letter-spacing:.2px; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }
::selection{ background:var(--gold-tint); }

.mono{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
.muted{ color:var(--taupe); }
.hidden{ display:none !important; }

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

.sidebar{
  width:var(--sidebar-w);
  background:linear-gradient(185deg,var(--ink) 0%, var(--ink-soft) 100%);
  color:#EFE9DC;
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  padding:22px 16px;
  position:sticky;
  top:0;
  height:100vh;
}
.brand{ display:flex; align-items:center; gap:12px; padding:4px 6px 22px; border-bottom:1px solid rgba(255,255,255,.08); margin-bottom:18px; }
.brand-badge{
  width:42px; height:42px; border-radius:50%;
  border:1.4px solid var(--gold);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:16px; color:var(--gold);
  letter-spacing:1px;
  flex-shrink:0;
  background:radial-gradient(circle at 30% 25%, rgba(176,141,87,.18), transparent 70%);
}
.brand-name{ font-family:var(--font-display); font-size:20px; font-weight:700; color:#F6F1E6; line-height:1.1; }
.brand-sub{ font-size:10.5px; letter-spacing:1.6px; text-transform:uppercase; color:var(--gold); margin-top:2px; }

.nav{ display:flex; flex-direction:column; gap:2px; flex:1; }
.nav-link{
  display:flex; align-items:center; gap:12px;
  padding:11px 14px; border-radius:9px;
  color:#CFC7B4; font-size:14px; font-weight:500;
  transition:background .15s ease, color .15s ease;
}
.nav-link svg{ width:18px; height:18px; flex-shrink:0; opacity:.85; }
.nav-link:hover{ background:rgba(255,255,255,.06); color:#fff; }
.nav-link.active{ background:rgba(176,141,87,.16); color:#fff; box-shadow:inset 2px 0 0 var(--gold); }

.sidebar-foot{ font-size:11px; color:#8A8272; padding-top:14px; border-top:1px solid rgba(255,255,255,.08); }

/* ---------- Main area ---------- */
.main{ flex:1; min-width:0; display:flex; flex-direction:column; }
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 28px; background:var(--panel); border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:20;
}
.topbar h1{ font-size:24px; }
.topbar .subtitle{ font-size:12.5px; color:var(--taupe); margin-top:2px; }
.topbar-actions{ display:flex; gap:10px; align-items:center; }

.content{ padding:26px 28px 90px; flex:1; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:1px solid transparent; border-radius:8px;
  padding:10px 16px; font-size:13.5px; font-weight:600; cursor:pointer;
  background:var(--ink); color:#fff; transition:transform .1s ease, opacity .15s ease, background .15s;
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px); }
.btn:disabled{ opacity:.5; cursor:not-allowed; }
.btn-gold{ background:var(--gold); color:#1A150C; }
.btn-gold:hover{ background:var(--gold-dark); }
.btn-outline{ background:transparent; color:var(--ink); border-color:var(--border); }
.btn-outline:hover{ background:var(--border-soft); }
.btn-ghost{ background:transparent; color:var(--ink); }
.btn-ghost:hover{ background:var(--border-soft); }
.btn-danger{ background:var(--rose); color:#fff; }
.btn-danger:hover{ background:#8A2F2F; }
.btn-sm{ padding:6px 11px; font-size:12.5px; border-radius:7px; }
.btn-icon{ padding:8px; border-radius:7px; }
.btn-block{ width:100%; }

/* ---------- Cards / stats ---------- */
.grid-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:24px; }
.card{ background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-lg); padding:18px 20px; box-shadow:var(--shadow); }
.stat-label{ font-size:11.5px; text-transform:uppercase; letter-spacing:1.2px; color:var(--taupe); font-weight:600; }
.stat-value{ font-family:var(--font-display); font-size:30px; font-weight:700; color:var(--ink); margin-top:6px; }
.stat-foot{ font-size:12px; margin-top:6px; color:var(--taupe); }
.stat-foot.up{ color:var(--emerald); }
.stat-foot.down{ color:var(--rose); }

.panel-title-row{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; flex-wrap:wrap; gap:10px; }
.panel-title-row h2{ font-size:19px; }

/* ---------- Forms ---------- */
label{ font-size:12.5px; font-weight:600; color:var(--ink); display:block; margin-bottom:6px; }
input,select,textarea{
  width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:8px;
  font-family:inherit; font-size:13.5px; background:#fff; color:var(--ink-text);
}
input:focus,select:focus,textarea:focus{ outline:2px solid var(--gold); outline-offset:1px; border-color:var(--gold); }
.field{ margin-bottom:14px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.help-text{ font-size:11.5px; color:var(--taupe); margin-top:4px; }
.search-box{ position:relative; }
.search-box input{ padding-left:36px; }
.search-box svg{ position:absolute; left:11px; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--taupe); }

/* ---------- Table ---------- */
.table-wrap{ background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow); }
table{ width:100%; border-collapse:collapse; }
thead th{
  text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.8px;
  color:var(--taupe); font-weight:700; padding:12px 16px; border-bottom:1px solid var(--border); background:#FCFAF5;
}
tbody td{ padding:13px 16px; border-bottom:1px solid var(--border-soft); font-size:13.5px; vertical-align:middle; }
tbody tr:last-child td{ border-bottom:none; }
tbody tr:hover{ background:#FCFAF5; }
td.num, th.num{ text-align:right; font-family:var(--font-mono); }

.badge{ display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:99px; font-size:11px; font-weight:700; letter-spacing:.3px; }
.badge-ok{ background:var(--emerald-tint); color:var(--emerald); }
.badge-low{ background:var(--rose-tint); color:var(--rose); }
.badge-neutral{ background:var(--gold-tint); color:var(--gold-dark); }

.row-actions{ display:flex; gap:6px; }

/* Mobile card-table */
@media (max-width: 760px){
  .table-wrap table thead{ display:none; }
  .table-wrap table, .table-wrap tbody, .table-wrap tr, .table-wrap td{ display:block; width:100%; }
  .table-wrap tr{ padding:14px 16px; border-bottom:1px solid var(--border-soft); }
  .table-wrap td{ border:none; padding:4px 0; display:flex; justify-content:space-between; gap:10px; }
  .table-wrap td::before{ content:attr(data-label); font-weight:700; color:var(--taupe); font-size:11px; text-transform:uppercase; letter-spacing:.5px; }
  .table-wrap td.row-actions-cell::before{ content:''; }
  .table-wrap td.row-actions-cell{ justify-content:flex-end; }
}

/* ---------- Modal ---------- */
.modal-overlay{
  position:fixed; inset:0; background:rgba(21,19,15,.55); display:flex; align-items:center; justify-content:center;
  z-index:100; padding:16px; backdrop-filter:blur(2px);
}
.modal{ background:#fff; border-radius:var(--radius-lg); width:100%; max-width:480px; max-height:90vh; overflow-y:auto; box-shadow:0 24px 60px -12px rgba(0,0,0,.35); }
.modal-header{ display:flex; align-items:center; justify-content:space-between; padding:18px 22px; border-bottom:1px solid var(--border); }
.modal-header h3{ font-size:19px; }
.modal-body{ padding:20px 22px; }
.modal-footer{ padding:16px 22px; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:10px; }
.modal-close{ background:none; border:none; cursor:pointer; color:var(--taupe); font-size:20px; line-height:1; padding:4px; }

/* ---------- Toast ---------- */
#toast-stack{ position:fixed; bottom:24px; right:24px; z-index:200; display:flex; flex-direction:column; gap:8px; }
.toast{ background:var(--ink); color:#fff; padding:12px 18px; border-radius:9px; font-size:13px; box-shadow:var(--shadow); min-width:220px; border-left:3px solid var(--gold); animation:toast-in .2s ease; }
.toast.error{ border-left-color:var(--rose); }
.toast.success{ border-left-color:var(--emerald); }
@keyframes toast-in{ from{ opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);} }

/* ---------- Billing / POS layout ---------- */
.pos-grid{ display:grid; grid-template-columns:1.5fr 1fr; gap:20px; align-items:start; }
.pos-results{ max-height:460px; overflow-y:auto; border:1px solid var(--border); border-radius:var(--radius); }
.pos-result-item{ display:flex; justify-content:space-between; align-items:center; padding:11px 14px; border-bottom:1px solid var(--border-soft); cursor:pointer; }
.pos-result-item:hover{ background:var(--gold-tint); }
.pos-result-item:last-child{ border-bottom:none; }
.pos-result-name{ font-weight:600; font-size:13.5px; }
.pos-result-meta{ font-size:11.5px; color:var(--taupe); }
.pos-result-price{ font-family:var(--font-mono); font-weight:700; }

.cart-item{ display:grid; grid-template-columns:1fr auto auto auto; gap:8px; align-items:center; padding:10px 0; border-bottom:1px solid var(--border-soft); }
.cart-item:last-child{ border-bottom:none; }
.cart-qty{ width:56px; text-align:center; padding:6px; }
.cart-remove{ background:none; border:none; color:var(--rose); cursor:pointer; font-size:16px; }

.summary-row{ display:flex; justify-content:space-between; padding:6px 0; font-size:13.5px; }
.summary-row.total{ font-size:19px; font-weight:700; font-family:var(--font-display); border-top:1px dashed var(--border); margin-top:8px; padding-top:12px; color:var(--ink); }

@media (max-width: 900px){
  .pos-grid{ grid-template-columns:1fr; }
}

/* ---------- Invoice sheet ---------- */
.invoice-toolbar{ display:flex; gap:10px; justify-content:flex-end; margin-bottom:18px; flex-wrap:wrap; }
.invoice-sheet{
  background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg);
  max-width:720px; margin:0 auto; padding:40px 44px; box-shadow:var(--shadow);
}
.invoice-head{ display:flex; justify-content:space-between; align-items:flex-start; border-bottom:2px solid var(--gold); padding-bottom:18px; margin-bottom:22px; }
.invoice-brand{ display:flex; gap:14px; align-items:center; }
.invoice-emblem{ width:52px; height:52px; border-radius:50%; border:1.6px solid var(--gold); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; color:var(--gold); font-size:19px; }
.invoice-title{ text-align:right; }
.invoice-title .doc-label{ font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--taupe); }
.invoice-title .doc-no{ font-family:var(--font-mono); font-size:15px; font-weight:700; color:var(--ink); }
.invoice-meta{ display:flex; justify-content:space-between; margin-bottom:20px; gap:20px; flex-wrap:wrap; }
.invoice-meta .block h4{ font-size:11px; text-transform:uppercase; letter-spacing:1px; color:var(--taupe); margin-bottom:4px; }
.invoice-table{ width:100%; border-collapse:collapse; margin-bottom:18px; }
.invoice-table th{ text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.6px; color:var(--taupe); border-bottom:1px solid var(--border); padding:8px 4px; }
.invoice-table td{ padding:9px 4px; border-bottom:1px solid var(--border-soft); font-size:13px; }
.invoice-table td.num, .invoice-table th.num{ text-align:right; font-family:var(--font-mono); }
.invoice-summary{ margin-left:auto; width:260px; }
.invoice-foot{ margin-top:30px; padding-top:16px; border-top:1px dashed var(--border); text-align:center; color:var(--taupe); font-size:12px; }

@media print{
  .sidebar, .topbar, .invoice-toolbar, .no-print{ display:none !important; }
  .content{ padding:0; }
  .invoice-sheet{ box-shadow:none; border:none; max-width:100%; }
  body{ background:#fff; }
}

/* ---------- Mobile bottom nav ---------- */
.bottom-nav{ display:none; }
@media (max-width: 860px){
  .app-shell{ flex-direction:column; }
  .sidebar{ display:none; }
  .content{ padding:16px 14px 96px; }
  .topbar{ padding:14px 16px; }
  .topbar h1{ font-size:19px; }
  .grid-stats{ grid-template-columns:1fr 1fr; }
  .field-row{ grid-template-columns:1fr; }
  .invoice-sheet{ padding:22px 18px; }

  .bottom-nav{
    display:flex; position:fixed; bottom:0; left:0; right:0; z-index:50;
    background:var(--ink); border-top:1px solid rgba(255,255,255,.08);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  .bottom-nav a{ flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; padding:6px 2px; color:#B7AF9C; font-size:10px; font-weight:600; }
  .bottom-nav a svg{ width:19px; height:19px; }
  .bottom-nav a.active{ color:var(--gold); }
}

@media (max-width: 480px){
  .grid-stats{ grid-template-columns:1fr; }
}

/* ---------- Empty state ---------- */
.empty-state{ text-align:center; padding:50px 20px; color:var(--taupe); }
.empty-state h3{ color:var(--ink); font-size:18px; margin-bottom:6px; }