/* ==========================================================================
   NEXORA — Design Tokens
   Palette:
     --ink        #0F1B2E   deep navy — sidebar, headings, dark surfaces
     --canvas     #F3F5F9   app background
     --surface    #FFFFFF   card surfaces
     --teal       #0EA37E   primary / growth / revenue / positive
     --violet     #6D5BF6   AI layer accent (used ONLY for AI surfaces)
     --amber      #F2A93B   pending / warning / low-stock
     --rose       #E15B72   expense / negative / overdue
     --line       #E3E8EF   hairline borders
   Type:
     Display  — 'Space Grotesk' (headings, nav, KPIs labels)
     Body     — 'Inter' (UI text)
     Data     — 'JetBrains Mono' (money, SKUs, quantities — tabular figures)
   Signature: the "ledger stitch" — a dashed perforation with grommet dots,
   borrowed from a tear-off POS receipt / ledger carbon-copy, used to divide
   summary from detail throughout the product.
   ========================================================================== */

:root{
  --ink:#0F1B2E;
  --ink-2:#16233A;
  --ink-soft:#5B6472;
  --canvas:#F3F5F9;
  --surface:#FFFFFF;
  --teal:#0EA37E;
  --teal-dark:#0B8267;
  --teal-tint:#E4F7F1;
  --violet:#6D5BF6;
  --violet-tint:#EEEBFF;
  --amber:#F2A93B;
  --amber-tint:#FDF1DE;
  --rose:#E15B72;
  --rose-tint:#FCEAEE;
  --line:#E3E8EF;
  --radius:14px;
  --radius-sm:10px;
  --shadow-sm: 0 1px 2px rgba(15,27,46,.05), 0 1px 1px rgba(15,27,46,.04);
  --shadow-md: 0 8px 24px -8px rgba(15,27,46,.12);
  --sidebar-w: 256px;
}

*{ box-sizing:border-box; }

html,body{ height:100%; }

body{
  background:var(--canvas);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  font-size:14px;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,h5,h6, .display{
  font-family:'Space Grotesk',sans-serif;
  color:var(--ink);
  letter-spacing:-0.01em;
}

.mono, .num, td.num, .kpi-value, .sku{
  font-family:'JetBrains Mono',monospace;
  font-variant-numeric: tabular-nums;
}

a{ text-decoration:none; color:inherit; }
button{ font-family:inherit; }
::selection{ background:var(--teal); color:#fff; }

/* focus visibility */
a:focus-visible, button:focus-visible, .form-control:focus-visible, .form-select:focus-visible{
  outline:2px solid var(--teal);
  outline-offset:2px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* ==========================================================================
   Shell layout
   ========================================================================== */

.app-shell{
  display:grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height:100vh;
}

body.sidebar-collapsed .app-shell{
  grid-template-columns: 76px 1fr;
}

/* ---------- Sidebar ---------- */
.sidebar{
  background:linear-gradient(190deg, var(--ink) 0%, var(--ink-2) 100%);
  color:#C9D3E0;
  position:sticky;
  top:0;
  height:100vh;
  display:flex;
  flex-direction:column;
  padding:20px 14px;
  overflow-y:auto;
  z-index:40;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  padding:6px 8px 20px;
  white-space:nowrap;
}
.brand-mark{
  width:34px;height:34px;flex:0 0 34px;
  border-radius:9px;
  background:conic-gradient(from 220deg, var(--teal), var(--violet), var(--teal));
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-family:'Space Grotesk',sans-serif;font-weight:700;
  box-shadow:var(--shadow-sm);
}
.brand-name{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:17px; color:#fff; line-height:1.1;}
.brand-sub{ font-size:11px; color:#8592A6; letter-spacing:.04em; }
body.sidebar-collapsed .brand-text, body.sidebar-collapsed .nav-label, body.sidebar-collapsed .nav-section-title, body.sidebar-collapsed .sidebar-plan{ display:none; }

.nav-section-title{
  font-size:10.5px; text-transform:uppercase; letter-spacing:.09em;
  color:#5E6C82; margin:16px 10px 6px; font-weight:600;
}

.nav-item{
  display:flex; align-items:center; gap:11px;
  padding:9px 10px; border-radius:10px; color:#C9D3E0;
  font-size:13.5px; font-weight:500; margin-bottom:2px; cursor:pointer;
  position:relative; transition:background .15s ease, color .15s ease;
}
.nav-item i{ font-size:16px; width:18px; text-align:center; color:#8FA0B8; flex:0 0 auto; }
.nav-item:hover{ background:rgba(255,255,255,.06); color:#fff; }
.nav-item.active{ background:rgba(14,163,126,.18); color:#fff; }
.nav-item.active i{ color:var(--teal); }
.nav-item.active::before{
  content:""; position:absolute; left:-14px; top:8px; bottom:8px; width:3px;
  background:var(--teal); border-radius:3px;
}
.nav-item.locked{ opacity:.42; cursor:not-allowed; }
.nav-item .lock-ic{ margin-left:auto; font-size:11px; color:#8FA0B8; }
.nav-item .nav-badge{
  margin-left:auto; font-size:9.5px; font-weight:700; background:var(--violet);
  color:#fff; padding:1px 6px; border-radius:20px; letter-spacing:.03em;
}

.sidebar-plan{
  margin-top:auto; padding-top:14px;
}
.plan-card{
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08);
  border-radius:12px; padding:12px; font-size:12px;
}
.plan-card .plan-name{ color:#fff; font-weight:600; font-family:'Space Grotesk',sans-serif; }
.plan-card select{
  width:100%; margin-top:8px; background:rgba(255,255,255,.08); color:#fff;
  border:1px solid rgba(255,255,255,.14); border-radius:8px; padding:6px 8px; font-size:12px;
}
.plan-card select option{ color:#111; }

.collapse-btn{
  position:absolute; top:22px; right:-12px; width:24px; height:24px; border-radius:50%;
  background:var(--surface); border:1px solid var(--line); color:var(--ink-soft);
  display:flex; align-items:center; justify-content:center; font-size:11px; cursor:pointer;
  box-shadow:var(--shadow-sm);
}

/* ---------- Topbar ---------- */
.topbar{
  height:66px; background:var(--surface); border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:16px; padding:0 22px; position:sticky; top:0; z-index:30;
}
.topbar .page-title{ font-size:19px; font-weight:600; }
.topbar .page-eyebrow{ font-size:11px; color:var(--ink-soft); letter-spacing:.06em; text-transform:uppercase; }
.search-box{
  flex:0 1 340px; display:flex; align-items:center; gap:8px;
  background:var(--canvas); border:1px solid var(--line); border-radius:10px; padding:8px 12px;
  color:var(--ink-soft); font-size:13px;
}
.search-box input{ border:none; background:transparent; outline:none; width:100%; font-size:13px; }
.icon-btn{
  width:38px; height:38px; border-radius:10px; border:1px solid var(--line); background:var(--surface);
  display:flex; align-items:center; justify-content:center; color:var(--ink-soft); position:relative; cursor:pointer;
}
.icon-btn:hover{ background:var(--canvas); }
.icon-btn .dot{
  position:absolute; top:7px; right:7px; width:7px; height:7px; border-radius:50%; background:var(--rose);
  border:1.5px solid var(--surface);
}
.user-chip{ display:flex; align-items:center; gap:9px; padding-left:14px; border-left:1px solid var(--line); cursor:pointer;}
.avatar{
  width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg,var(--teal),#0B5F4C);
  display:flex; align-items:center; justify-content:center; color:#fff; font-weight:600; font-size:13px;
  font-family:'Space Grotesk',sans-serif;
}
.user-chip .u-name{ font-size:13px; font-weight:600; line-height:1.15; }
.user-chip .u-role{ font-size:11px; color:var(--ink-soft); }

.main{ min-width:0; }
.content{ padding:22px 26px 60px; }

/* ==========================================================================
   Ledger-stitch signature: dashed perforation w/ grommet dots
   ========================================================================== */
.ledger-rule{
  position:relative; height:1px; margin:14px 0;
  background-image: linear-gradient(to right, var(--line) 60%, transparent 0%);
  background-position: top; background-size: 9px 1px; background-repeat: repeat-x;
}
.ledger-rule::before, .ledger-rule::after{
  content:""; position:absolute; top:50%; width:8px; height:8px; border-radius:50%;
  background:var(--canvas); border:1px solid var(--line); transform:translateY(-50%);
}
.ledger-rule::before{ left:-19px; }
.ledger-rule::after{ right:-19px; }
.card .ledger-rule::before, .card .ledger-rule::after{ background:var(--surface); }

/* ==========================================================================
   Cards / KPIs
   ========================================================================== */
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
}
.card-head{ display:flex; align-items:center; justify-content:between; padding:16px 18px 0; }
.card-body{ padding:16px 18px 18px; }
.card-title{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:14.5px; }
.card-sub{ font-size:12px; color:var(--ink-soft); }

.kpi{
  padding:17px 18px; display:flex; flex-direction:column; gap:6px; position:relative; overflow:hidden;
}
.kpi-icon{
  width:32px; height:32px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:14px;
  margin-bottom:2px;
}
.kpi-label{ font-size:12px; color:var(--ink-soft); font-weight:500; }
.kpi-value{ font-size:23px; font-weight:600; letter-spacing:-0.02em; }
.kpi-delta{ font-size:11.5px; font-weight:600; display:flex; align-items:center; gap:4px; }
.kpi-delta.up{ color:var(--teal-dark); }
.kpi-delta.down{ color:var(--rose); }

.bg-teal-tint{ background:var(--teal-tint); color:var(--teal-dark); }
.bg-violet-tint{ background:var(--violet-tint); color:var(--violet); }
.bg-amber-tint{ background:var(--amber-tint); color:#946213; }
.bg-rose-tint{ background:var(--rose-tint); color:var(--rose); }

/* Badges */
.badge-pill{
  display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600;
  padding:3.5px 9px; border-radius:20px; letter-spacing:.01em;
}
.badge-pill::before{ content:""; width:6px; height:6px; border-radius:50%; }
.badge-teal{ background:var(--teal-tint); color:var(--teal-dark); }
.badge-teal::before{ background:var(--teal); }
.badge-amber{ background:var(--amber-tint); color:#946213; }
.badge-amber::before{ background:var(--amber); }
.badge-rose{ background:var(--rose-tint); color:var(--rose); }
.badge-rose::before{ background:var(--rose); }
.badge-violet{ background:var(--violet-tint); color:var(--violet); }
.badge-violet::before{ background:var(--violet); }
.badge-slate{ background:#EEF1F5; color:var(--ink-soft); }
.badge-slate::before{ background:#9AA6B6; }

/* Tables */
.table-clean{ width:100%; border-collapse:separate; border-spacing:0; font-size:13px; }
.table-clean thead th{
  font-size:10.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-soft);
  font-weight:600; padding:0 14px 10px; text-align:left; border-bottom:1px solid var(--line);
}
.table-clean tbody td{ padding:12px 14px; border-bottom:1px solid var(--line); vertical-align:middle; }
.table-clean tbody tr:last-child td{ border-bottom:none; }
.table-clean tbody tr:hover{ background:#FAFBFD; }
.table-clean td.num, .table-clean th.num{ text-align:right; }

.avatar-sm{
  width:28px;height:28px;border-radius:50%; background:var(--canvas); border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center; font-size:11px; font-weight:600; color:var(--ink-soft);
  font-family:'Space Grotesk',sans-serif;
}

/* buttons */
.btn-nexora{
  background:var(--ink); color:#fff; border:none; border-radius:10px; padding:9px 16px; font-size:13px;
  font-weight:600; display:inline-flex; align-items:center; gap:7px;
}
.btn-nexora:hover{ background:var(--ink-2); color:#fff; }
.btn-teal{ background:var(--teal); color:#fff; border:none; border-radius:10px; padding:9px 16px; font-weight:600; font-size:13px; display:inline-flex; align-items:center; gap:7px;}
.btn-teal:hover{ background:var(--teal-dark); color:#fff; }
.btn-ghost{ background:transparent; border:1px solid var(--line); border-radius:10px; padding:8px 14px; font-size:13px; font-weight:600; color:var(--ink); display:inline-flex; align-items:center; gap:7px;}
.btn-ghost:hover{ background:var(--canvas); }
.btn-violet{ background:var(--violet); color:#fff; border:none; border-radius:10px; padding:9px 16px; font-weight:600; font-size:13px; display:inline-flex; align-items:center; gap:7px;}
.btn-violet:hover{ background:#5A48E0; color:#fff; }

/* views */
.view{ display:none; animation:fadeIn .25s ease; }
.view.active{ display:block; }
@keyframes fadeIn{ from{ opacity:0; transform:translateY(4px);} to{opacity:1; transform:none;} }

.section-heading{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:14px; flex-wrap:wrap; gap:10px;}
.section-heading h2{ font-size:16px; font-weight:600; margin:0; }
.eyebrow{ font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft); font-weight:600; }

/* AI surfaces get the violet treatment exclusively */
.ai-surface{
  background:linear-gradient(155deg, #FBFAFF 0%, var(--violet-tint) 100%);
  border:1px solid #DCD5FE;
}
.ai-chip{
  width:30px;height:30px;border-radius:9px;background:var(--violet); color:#fff;
  display:flex;align-items:center;justify-content:center; font-size:14px; flex:0 0 auto;
}

/* Nav pills (tabs) */
.pill-tabs{ display:flex; gap:6px; background:var(--canvas); padding:4px; border-radius:11px; width:fit-content; }
.pill-tabs button{
  border:none; background:transparent; padding:7px 14px; border-radius:8px; font-size:12.5px; font-weight:600;
  color:var(--ink-soft); cursor:pointer;
}
.pill-tabs button.active{ background:var(--surface); color:var(--ink); box-shadow:var(--shadow-sm); }

/* ==========================================================================
   POS
   ========================================================================== */
.pos-wrap{ display:grid; grid-template-columns: 1fr 360px; gap:16px; align-items:start; }
.pos-cat{
  border:1px solid var(--line); background:var(--surface); border-radius:20px; padding:6px 14px; font-size:12.5px;
  font-weight:600; color:var(--ink-soft); cursor:pointer; white-space:nowrap;
}
.pos-cat.active{ background:var(--ink); color:#fff; border-color:var(--ink); }
.pos-product{
  border:1px solid var(--line); background:var(--surface); border-radius:14px; padding:12px; cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease; text-align:left; width:100%;
}
.pos-product:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:#D3DAE3;}
.pos-product .thumb{
  height:64px; border-radius:10px; margin-bottom:9px; display:flex;align-items:center;justify-content:center;
  font-size:20px; color:#fff;
}
.pos-product .p-name{ font-size:12.8px; font-weight:600; line-height:1.25; margin-bottom:3px; }
.pos-product .p-sku{ font-size:10.5px; color:var(--ink-soft); font-family:'JetBrains Mono',monospace; }
.pos-product .p-price{ font-size:13.5px; font-weight:700; margin-top:6px; font-family:'JetBrains Mono',monospace; color:var(--teal-dark); }

.cart-panel{ position:sticky; top:86px; }
.cart-line{ display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px dashed var(--line); }
.cart-line:last-child{ border-bottom:none; }
.qty-stepper{ display:flex; align-items:center; border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.qty-stepper button{ width:24px; height:24px; border:none; background:var(--canvas); color:var(--ink); font-weight:700; }
.qty-stepper span{ width:26px; text-align:center; font-family:'JetBrains Mono',monospace; font-size:12.5px; }

/* Kanban (CRM) */
.kanban{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.kanban-col{ background:#EEF1F6; border-radius:14px; padding:12px; }
.kanban-col-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; padding:0 4px;}
.kanban-col-head span.count{ background:#fff; border-radius:20px; font-size:10.5px; padding:1px 8px; font-weight:700; color:var(--ink-soft); }
.kanban-card{ background:var(--surface); border-radius:11px; padding:11px; margin-bottom:9px; border:1px solid var(--line); box-shadow:var(--shadow-sm); cursor:grab; }
.kanban-card .k-title{ font-size:12.5px; font-weight:600; margin-bottom:5px; }
.kanban-card .k-meta{ font-size:11px; color:var(--ink-soft); display:flex; justify-content:space-between; }

/* Invoice template */
.invoice-doc{ background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:34px; max-width:640px; }
.invoice-doc .inv-head{ display:flex; justify-content:space-between; align-items:flex-start; }
.invoice-stub{ border-top:none; }

/* progress ring */
.ring{ position:relative; width:96px; height:96px; }
.ring svg{ transform:rotate(-90deg); }
.ring-value{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column; }
.ring-value b{ font-size:20px; font-family:'Space Grotesk',sans-serif; }
.ring-value small{ font-size:9.5px; color:var(--ink-soft); }

/* module lock overlay */
.locked-panel{
  border:1px dashed #C9D2DE; border-radius:16px; padding:50px 24px; text-align:center; background:#FAFBFD;
}
.locked-panel .lock-badge{
  width:52px; height:52px; border-radius:14px; background:var(--ink); color:#fff; display:flex; align-items:center;
  justify-content:center; font-size:20px; margin:0 auto 16px;
}

/* Toast */
.nx-toast{
  position:fixed; bottom:22px; right:22px; background:var(--ink); color:#fff; padding:13px 18px; border-radius:12px;
  font-size:13px; display:flex; align-items:center; gap:10px; box-shadow:var(--shadow-md); z-index:200;
  transform:translateY(20px); opacity:0; pointer-events:none; transition:all .25s ease;
}
.nx-toast.show{ transform:translateY(0); opacity:1; }
.nx-toast i{ color:var(--teal); }

/* Command palette / modals inherit bootstrap, lightly themed */
.modal-content{ border-radius:16px; border:none; }
.modal-header{ border-bottom:1px solid var(--line); }
.modal-footer{ border-top:1px solid var(--line); }

/* scrollbars */
::-webkit-scrollbar{ width:9px; height:9px; }
::-webkit-scrollbar-thumb{ background:#CBD3DE; border-radius:20px; }
.sidebar::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.15); }

/* ==========================================================================
   Dark theme
   ========================================================================== */
[data-theme="dark"]{
  --canvas:#0B121F;
  --surface:#121B2B;
  --ink:#EAF0FA;
  --ink-soft:#8FA0B8;
  --line:#223049;
  --teal-tint:#0F3830;
  --violet-tint:#241E45;
  --amber-tint:#3A2C10;
  --rose-tint:#3A1620;
}
[data-theme="dark"] .table-clean tbody tr:hover{ background:#17223A; }
[data-theme="dark"] .locked-panel{ background:#0F1826; border-color:#233047; }
[data-theme="dark"] .kanban-col{ background:#17223A; }
[data-theme="dark"] .invoice-doc{ background:var(--surface); }
[data-theme="dark"] .ai-surface{ background:linear-gradient(155deg, #171233 0%, #1C1740 100%); border-color:#372C63; }

/* ==========================================================================
   Dropdown menus (notifications / user / held orders)
   ========================================================================== */
.dropdown-menu{
  border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow-md); padding:8px;
  font-size:13px; background:var(--surface); color:var(--ink);
}
.dropdown-item{ border-radius:8px; padding:8px 10px; color:var(--ink); }
.dropdown-item:hover, .dropdown-item:focus{ background:var(--canvas); color:var(--ink); }
.notif-menu{ min-width:290px; }
.notif-head{ font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-soft); font-weight:700; padding:6px 10px; }
.notif-item{ display:flex; align-items:flex-start; gap:10px; white-space:normal; }
.notif-item i{ margin-top:2px; }
.ni-title{ font-size:12.5px; font-weight:600; }
.ni-sub{ font-size:11px; color:var(--ink-soft); }

/* ==========================================================================
   Global search
   ========================================================================== */
.search-results{
  position:absolute; top:calc(100% + 6px); left:0; right:0; background:var(--surface);
  border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow-md); padding:6px;
  display:none; z-index:50; max-height:320px; overflow-y:auto;
}
.search-results.show{ display:block; }
.search-result-item{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:8px; cursor:pointer; color:var(--ink); }
.search-result-item:hover{ background:var(--canvas); }
.search-result-item i{ color:var(--ink-soft); }
.search-result-item .sr-title{ font-size:12.5px; font-weight:600; }
.search-result-item .sr-sub{ font-size:11px; color:var(--ink-soft); }
.search-empty{ padding:10px; font-size:12.5px; color:var(--ink-soft); text-align:center; }

/* ==========================================================================
   Kanban drag & drop
   ========================================================================== */
.kanban-card.dragging{ opacity:.4; }
.kanban-col.drag-over{ background:var(--teal-tint); outline:2px dashed var(--teal); outline-offset:-4px; }

/* ==========================================================================
   Accent colour swatches (Settings)
   ========================================================================== */
.accent-swatch{ width:26px; height:26px; border-radius:50%; display:inline-block; cursor:pointer; border:2px solid var(--surface); box-shadow:0 0 0 1px var(--line); }
.accent-swatch.selected{ box-shadow:0 0 0 2px var(--ink); }

/* responsive */
@media (max-width: 1180px){
  .pos-wrap{ grid-template-columns:1fr; }
  .cart-panel{ position:static; }
  .kanban{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 860px){
  .app-shell{ grid-template-columns: 1fr; }
  .sidebar{ position:fixed; left:-280px; width:256px; transition:left .2s ease; box-shadow:var(--shadow-md); }
  body.sidebar-open .sidebar{ left:0; }
  .search-box{ display:none; }
  .kanban{ grid-template-columns:1fr; }
}