/* ==========================================================================
   NightPOS theme — blue POS, Source Sans Pro
   Loaded by resources/views/layouts/app.blade.php AFTER each page's own
   <style>, so it overrides page colours/fonts without touching page logic.

   Change the look of the WHOLE app by editing the tokens in :root below.
   Balance: ~60% light grey/white, ~30% blue, ~10% status colours.
   ========================================================================== */

:root {
  /* Type */
  --nps-font: 'Source Sans Pro', 'Source Sans 3', -apple-system, BlinkMacSystemFont,
              'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --nps-fs-body: 14px;        /* back-office pages */
  --nps-fs-body-touch: 15px;  /* POS / billing / KDS / login (touchscreens) */
  --nps-fs-table: 14px;
  --nps-fs-table-head: 13px;
  --nps-fs-input: 14px;
  --nps-fs-button: 14px;
  --nps-fs-heading: 22px;

  /* Text */
  --nps-text:   #17202A;
  --nps-muted:  #607080;
  --nps-faint:  #7C8B9C;      /* placeholders / captions (derived) */

  /* Surfaces */
  --nps-bg:     #E9EEF5;      /* page background */
  --nps-card:   #FFFFFF;      /* cards, product tiles */
  --nps-border: #CBD5E1;
  --nps-border-strong: #94A3B8;   /* table outlines (derived) */
  --nps-zebra:  #F4F7FB;          /* alternate table rows (derived) */

  /* Blues */
  --nps-blue:        #1565C0;   /* header + sidebar */
  --nps-blue-strong: #0D47A1;   /* checkout / payment, active nav, totals */
  --nps-blue-bright: #1976D2;   /* primary buttons, links, focus, selected */
  --nps-blue-light:  #E3F2FD;   /* hover, selected fills, table totals */
  --nps-blue-onblue: #90CAF9;   /* accent text on a blue surface (derived) */
  --nps-primary: var(--nps-blue-bright);
  --nps-primary-dark: var(--nps-blue);
  --nps-hover: var(--nps-blue-light);

  /* Status */
  --nps-success:  #16A34A;   /* in stock */
  --nps-danger:   #DC2626;   /* out of stock */
  --nps-warning:  #F59E0B;   /* low stock */
  --nps-discount: #7C3AED;
  --nps-purple: var(--nps-discount);

  /* Pale tints for badges, pills, highlights */
  --nps-primary-bg: rgba(25,118,210,.12);
  --nps-success-bg: rgba(22,163,74,.12);
  --nps-warning-bg: rgba(245,158,11,.16);
  --nps-danger-bg:  rgba(220,38,38,.10);
  --nps-purple-bg:  rgba(124,58,237,.12);

  /* Darker shades for SMALL TEXT on the pale tints (derived, Tailwind 700s) */
  --nps-primary-ink: #0D47A1;
  --nps-success-ink: #15803D;
  --nps-warning-ink: #B45309;
  --nps-danger-ink:  #B91C1C;
  --nps-purple-ink:  #6D28D9;

  --nps-shadow: 0 1px 3px rgba(15,32,60,.14);
}

/* ==========================================================================
   1. Colour tokens — pages that were DARK (share variable names)
   ========================================================================== */
html.pg-waiter-pos, html.pg-cashier-billing, html.pg-stock-management,
html.pg-kds-kitchen, html.pg-cash-drawer, html.pg-manager-dashboard,
html.pg-floor-view, html.pg-settings, html.pg-login, html.pg-directory {
  --bg: var(--nps-bg);  --s1: var(--nps-card);  --s2: #F4F7FB;  --s3: var(--nps-blue-light);
  --b1: var(--nps-border);  --b2: var(--nps-border-strong);
  --t1: var(--nps-text);  --t2: var(--nps-muted);  --t3: var(--nps-faint);
  --shadow: var(--nps-shadow);

  --acc: var(--nps-primary);   --accent: var(--nps-primary);
  --acc2: var(--nps-warning);  --acc3: var(--nps-discount);  --accent2: var(--nps-discount);

  --green: var(--nps-success);  --green-bg: var(--nps-success-bg);  --green-dim: var(--nps-success-bg);
  --red:   var(--nps-danger);   --red-bg:   var(--nps-danger-bg);   --red-dim:   var(--nps-danger-bg);
  --amber: var(--nps-warning);  --amber-bg: var(--nps-warning-bg);  --amber-dim: var(--nps-warning-bg);
  --blue:  var(--nps-primary);  --blue-bg:  var(--nps-primary-bg);  --blue-dim:  var(--nps-primary-bg);
  --purple: var(--nps-discount); --purple-dim: var(--nps-purple-bg);

  --avail: var(--nps-success);  --avail-bg: var(--nps-success-bg);
  --occ:   var(--nps-danger);   --occ-bg:   var(--nps-danger-bg);
  --res:   var(--nps-discount); --res-bg:   var(--nps-purple-bg);
  --clean: var(--nps-warning);  --clean-bg: var(--nps-warning-bg);
  --em: var(--nps-success);     --em-bg: var(--nps-success-bg);
  --gold: var(--nps-warning);
}

/* ==========================================================================
   2. Colour tokens — pages that were LIGHT (own variable names;
      "-mid" = solid accent, plain name = dark text colour, "-bg" = tint)
   ========================================================================== */
html.pg-purchase-orders, html.pg-reports, html.pg-staff-events, html.pg-suppliers {
  --bg: var(--nps-bg);  --s1: var(--nps-card);  --s2: #F4F7FB;  --s3: var(--nps-blue-light);
  --b1: var(--nps-border);  --b2: var(--nps-border-strong);
  --ink: var(--nps-text);  --ink2: var(--nps-muted);  --ink3: var(--nps-faint);
  --shadow: var(--nps-shadow);
}
html.pg-purchase-orders {
  --teal: var(--nps-primary-ink);   --teal-bg: var(--nps-primary-bg);   --teal-mid: var(--nps-primary);
  --orange: var(--nps-warning-ink); --orange-bg: var(--nps-warning-bg); --orange-mid: var(--nps-warning);
  --violet: var(--nps-purple-ink);  --violet-bg: var(--nps-purple-bg);  --violet-mid: var(--nps-discount);
  --slate: var(--nps-muted);        --slate-bg: #E2E8F0;                --slate-mid: var(--nps-muted);
  --green: var(--nps-success-ink);  --green-bg: var(--nps-success-bg);  --green-mid: var(--nps-success);
  --red: var(--nps-danger-ink);     --red-bg: var(--nps-danger-bg);     --red-mid: var(--nps-danger);
  --amber: var(--nps-warning-ink);  --amber-bg: var(--nps-warning-bg);  --amber-mid: var(--nps-warning);
}
html.pg-reports {
  --emerald: var(--nps-success-ink); --em-bg: var(--nps-success-bg);
  --ruby: var(--nps-danger-ink);     --ruby-bg: var(--nps-danger-bg);
  --gold: var(--nps-warning-ink);    --gold-bg: var(--nps-warning-bg);
  --sapphire: var(--nps-primary-ink); --sap-bg: var(--nps-primary-bg);
}
html.pg-staff-events {
  --purple: var(--nps-purple-ink);  --pur-bg: var(--nps-purple-bg);  --pur-mid: var(--nps-blue-bright);
  --teal: var(--nps-primary-ink);   --teal-bg: var(--nps-primary-bg); --teal-mid: var(--nps-primary);
  --rose: var(--nps-danger-ink);    --rose-bg: var(--nps-danger-bg);  --rose-mid: var(--nps-danger);
  --amber: var(--nps-warning-ink);  --amber-bg: var(--nps-warning-bg); --amber-mid: var(--nps-warning);
  --green: var(--nps-success-ink);  --green-bg: var(--nps-success-bg); --green-mid: var(--nps-success);
}
html.pg-suppliers {
  --indigo: var(--nps-primary-ink); --indigo-bg: var(--nps-primary-bg); --indigo-mid: var(--nps-primary);
  --emerald: var(--nps-success-ink); --em-bg: var(--nps-success-bg);    --em-mid: var(--nps-success);
  --rose: var(--nps-danger-ink);    --rose-bg: var(--nps-danger-bg);    --rose-mid: var(--nps-danger);
  --amber: var(--nps-warning-ink);  --amber-bg: var(--nps-warning-bg);  --amber-mid: var(--nps-warning);
}

/* ==========================================================================
   3. Typography
   ========================================================================== */
html, body { background: var(--nps-bg); color: var(--nps-text); }
body, body * { font-family: var(--nps-font) !important; }
body { font-size: var(--nps-fs-body); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
html.pg-waiter-pos body, html.pg-cashier-billing body,
html.pg-kds-kitchen body, html.pg-login body { font-size: var(--nps-fs-body-touch); }

table td { font-size: var(--nps-fs-table) !important; }
table th { font-size: var(--nps-fs-table-head) !important; font-weight: 700; }

input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),
select, textarea { font-size: var(--nps-fs-input) !important; color: var(--nps-text); }
::placeholder { color: var(--nps-faint) !important; opacity: 1; }
select option { color: var(--nps-text); background: #fff; }

button, .btn, [class^="btn-"], [class*=" btn-"], .tbtn { font-weight: 600; }
button { font-size: var(--nps-fs-button); }   /* low specificity: a page's own .class size still wins */

/* Focus: search bars, inputs, selects */
input:focus, select:focus, textarea:focus {
  border-color: var(--nps-blue-bright) !important;
  box-shadow: 0 0 0 3px rgba(25,118,210,.22);
  outline: none;
}

/* ==========================================================================
   4. Blue chrome: page header + left sidebar
   ==========================================================================
   Everything inside these surfaces gets its colour variables re-pointed to
   "white on blue", so buttons, chips, clocks, inputs etc. adapt by themselves. */
.topbar, #topbar, .sbh, html.pg-cash-drawer .ph, nav, .sidebar {
  background: var(--nps-blue) !important;
  color: #fff;
  border-color: rgba(255,255,255,.22) !important;
  --t1: #fff; --t2: rgba(255,255,255,.88); --t3: rgba(255,255,255,.68);
  --ink: #fff; --ink2: rgba(255,255,255,.88); --ink3: rgba(255,255,255,.68);
  --s1: rgba(255,255,255,.12); --s2: rgba(255,255,255,.12); --s3: rgba(255,255,255,.24);
  --b1: rgba(255,255,255,.30); --b2: rgba(255,255,255,.50);
  --acc: var(--nps-blue-onblue); --accent: var(--nps-blue-onblue);
  --pur-mid: #fff; --teal-mid: #fff; --indigo-mid: #fff;
  --green: #86EFAC;  --green-bg: rgba(255,255,255,.16);  --green-dim: rgba(255,255,255,.16);
  --red: #FCA5A5;    --red-bg: rgba(255,255,255,.16);
  --amber: #FDE68A;  --amber-bg: rgba(255,255,255,.16);
  --blue: #BFDBFE;   --blue-bg: rgba(255,255,255,.16);
}
.topbar ::placeholder, #topbar ::placeholder, .sbh ::placeholder, html.pg-cash-drawer .ph ::placeholder { color: rgba(255,255,255,.72) !important; }
.topbar h1, .topbar-left h1, .tb-brand h1, .topbar-brand,
html:not(.pg-login) .brand, .sbbrand, .nav-brand h2, .sb-brand h2, html.pg-cash-drawer .ph h2 { color: #fff !important; }
.topbar h1, .topbar-left h1, .tb-brand h1, .topbar-brand { font-size: var(--nps-fs-heading) !important; font-weight: 600 !important; letter-spacing: 0 !important; }
html:not(.pg-login) .brand, .sbbrand, .nav-brand h2, .sb-brand h2, html.pg-cash-drawer .ph h2 { font-size: 20px !important; font-weight: 700 !important; letter-spacing: 0 !important; }
html:not(.pg-login) .brand em, .sbbrand em, .nav-brand h2 span, .topbar-brand span { color: var(--nps-blue-onblue) !important; font-style: normal; }
.topbar .sub, .topbar-sub, html.pg-cash-drawer .ph-sub { color: rgba(255,255,255,.85) !important; }

/* Buttons that sit on blue: ghost by default, white for the main action */
.topbar button, #topbar button, .sbh button, html.pg-cash-drawer .ph button {
  background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.40);
}
.topbar button:hover, #topbar button:hover, html.pg-cash-drawer .ph button:hover { background: rgba(255,255,255,.26) !important; }
.topbar .btn-primary, .topbar .btn-dark, #topbar .pri, .topbar .pri, html.pg-cash-drawer .ph .btn-primary {
  background: #fff !important; color: var(--nps-blue-strong) !important; border-color: #fff !important;
}
.topbar .btn-em, .topbar .btn-green, #topbar .btn-em { background: var(--nps-success) !important; color: #fff !important; border-color: var(--nps-success) !important; }
.topbar .alert-btn { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.40); }
.topbar .date-chip, .topbar .clock, .topbar .tclock { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.35); color: #fff; }

/* Tabs inside the blue header (Staff & Events) */
.topbar .ptab { color: rgba(255,255,255,.80) !important; border-bottom-color: transparent !important; }
.topbar .ptab:hover { color: #fff !important; }
.topbar .ptab.active { color: #fff !important; border-bottom-color: #fff !important; }

/* Login: brand sits on the light page, not on blue */
html.pg-login .brand, html.pg-login .brand em { color: var(--nps-text); }
html.pg-login .brand em { color: var(--nps-blue-bright); font-style: normal; }

/* Sidebar navigation */
nav .nav-item, .sidebar .nav-item, .sidebar .sb-item { color: rgba(255,255,255,.90); }
nav .nav-item:hover, .sidebar .nav-item:hover, .sidebar .sb-item:hover { background: rgba(255,255,255,.16) !important; color: #fff; }
nav .nav-item.active, .sidebar .nav-item.active, .sidebar .sb-item.active {
  background: var(--nps-blue-strong) !important; color: #fff !important; font-weight: 700;
  box-shadow: inset 4px 0 0 var(--nps-blue-onblue);
}
.nav-section, .sb-section { color: rgba(255,255,255,.62) !important; }
nav .nav-item.soon, .sidebar .nav-item.soon, .sidebar .sb-item.soon { opacity: .55; }
.nav-brand, .sb-brand { border-bottom: 1px solid rgba(255,255,255,.22) !important; }
.sb-foot, .nav-foot { border-top: 1px solid rgba(255,255,255,.22) !important; }

/* ==========================================================================
   5. Buttons, tabs, pagination
   ========================================================================== */
.btn-green, .ef-btn.save, .btn-em { color: #fff !important; }
.btn-primary, .btn-dark { background: var(--nps-blue-bright) !important; color: #fff !important; border-color: var(--nps-blue-bright) !important; }
.btn-primary:hover, .btn-dark:hover, .tbtn.pri:hover { background: var(--nps-blue) !important; }
.tbtn.pri, .newbtn, .bprim, .lbtn-primary { color: #fff !important; }
.bkot, .ftab.active { color: #17202A !important; }            /* dark text on amber */
.bbill, .bpay, .pay-btn { background: var(--nps-blue-strong) !important; color: #fff !important; }

/* Selected category / active tab / active filter */
.cb.on { background: var(--nps-blue-bright) !important; border-color: var(--nps-blue-bright) !important; color: #fff !important; }
.tab.on, .sbt.on, .ptab.active { color: var(--nps-blue-bright) !important; border-bottom-color: var(--nps-blue-bright) !important; border-bottom-width: 3px; }
.stab.active, .ftab.active { box-shadow: var(--nps-shadow); }
.page-btn.active, .pagination .active { background: var(--nps-blue-bright); color: #fff; border-color: var(--nps-blue-bright); }

/* ==========================================================================
   6. Tables — clearly outlined grid, blue header, zebra rows, hover
   ========================================================================== */
table { border-collapse: collapse !important; border: 1px solid var(--nps-border-strong) !important; }
table th, table td { border: 1px solid var(--nps-border) !important; }
table thead th, table th {
  background: var(--nps-blue) !important; color: #fff !important;
  border-color: var(--nps-blue-strong) !important;
  text-transform: uppercase; letter-spacing: .3px; text-align: left;
}
table tbody td { background: transparent; color: var(--nps-text); }
table tbody tr:nth-child(even) > td { background: var(--nps-zebra) !important; }
table tbody tr:nth-child(odd)  > td { background: #fff !important; }
table tbody tr:hover > td { background: var(--nps-blue-light) !important; }
table tfoot td, table tfoot th { background: var(--nps-blue-light) !important; color: var(--nps-blue-strong) !important; font-weight: 700; border-top: 2px solid var(--nps-blue) !important; }
table td:first-child { font-weight: 600; }
/* wrappers that clip tables should still show the outline */
.tbl-wrap, .table-wrap, .tw { border: 1px solid var(--nps-border-strong); border-radius: 6px; overflow: auto; }

/* Stock status chips: solid + unmistakable */
.chip.stkchip { padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .2px; }
.chip.stkchip.c-ok  { background: var(--nps-success); color: #fff; }
.chip.stkchip.c-low { background: var(--nps-warning); color: #17202A; }
.chip.stkchip.c-out { background: var(--nps-danger);  color: #fff; }

/* ==========================================================================
   7. Cards + KPI tiles (icon circle like the ERP / POS references)
   ========================================================================== */
.kpi-card, .sc, .metric, .dcard, .panel, .card { border: 1px solid var(--nps-border) !important; box-shadow: var(--nps-shadow); }
html:not(.pg-cash-drawer) .panel, html:not(.pg-cash-drawer) .card { border-top: 3px solid var(--nps-blue-bright) !important; }
.kpi-card { padding-right: 76px; }
.kpi-card::before { height: 4px !important; }
.kpi-card::after {
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 22px; color: #fff;
}
.kpi-card.green::after  { content: '\1F4B0'; background: var(--nps-success); }
.kpi-card.blue::after   { content: '\1F9FE'; background: var(--nps-blue-bright); }
.kpi-card.amber::after  { content: '\1F4CA'; background: var(--nps-warning); }
.kpi-card.purple::after { content: '\1F37D'; background: var(--nps-discount); }
.kpi-card.red::after    { content: '\26A0';  background: var(--nps-danger); }
.kpi-val { color: var(--nps-text); }

/* Left accent stripes on the summary tiles */
.sc { border-left: 4px solid var(--nps-blue-bright) !important; }
.sc.g { border-left-color: var(--nps-success) !important; }
.sc.a { border-left-color: var(--nps-warning) !important; }
.sc.b { border-left-color: var(--nps-blue-bright) !important; }
.dcard { border-left: 4px solid var(--nps-blue-bright) !important; }
.dcard.g { border-left-color: var(--nps-success) !important; }
.dcard.a { border-left-color: var(--nps-warning) !important; }

/* ==========================================================================
   8. Waiter POS: product tiles, stock states, checkout
   ========================================================================== */
.prod { background: #fff; border: 1.5px solid var(--nps-border); overflow: hidden; box-shadow: var(--nps-shadow); }
.prod:hover { border-color: var(--nps-blue-bright); }
.prod.inord { border-color: var(--nps-blue-bright) !important; background: var(--nps-blue-light) !important; box-shadow: 0 0 0 2px rgba(25,118,210,.28); }
.prod .ppr { color: var(--nps-blue-strong); font-size: 13px; }
.prod .pnm { font-size: 13px; }
.prod .stk { display: block; margin-top: 6px; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; line-height: 1.6; }
.prod .stk-in  { background: var(--nps-success); color: #fff; }
.prod .stk-low { background: var(--nps-warning); color: #17202A; }
.prod.lowx { border-color: var(--nps-warning); }
.prod.outx { background: #F1F5F9; border-color: #CBD5E1; opacity: 1; pointer-events: auto; box-shadow: none; }
.prod.outx .pem, .prod.outx .pnm, .prod.outx .ppr { opacity: .5; filter: grayscale(1); }
.prod.outx.inord { background: #F1F5F9 !important; border-color: #CBD5E1 !important; box-shadow: none; }
.prod .stk-ribbon {          /* red band across the lower part, so the item name stays readable */
  position: absolute; left: -8%; right: -8%; bottom: 12px; top: auto; transform: rotate(-9deg);
  background: var(--nps-danger); color: #fff; text-align: center; padding: 4px 0;
  font-size: 12px; font-weight: 800; letter-spacing: .6px; box-shadow: 0 1px 3px rgba(0,0,0,.3);
}

/* Checkout / payment block on the right */
#tots { background: var(--nps-blue-light); border-top: 2px solid var(--nps-blue); }
#tots .gt, #tots .gtv, #tots .tot-grand, #tots .grand { color: var(--nps-blue-strong) !important; font-weight: 800; }
.oc.on { background: var(--nps-blue-light) !important; border-color: var(--nps-blue-bright) !important; }

/* ==========================================================================
   9. Misc that hard-coded dark colours
   ========================================================================== */
.wtag, .c-store, .c-submitted, .st-billed { background: var(--nps-purple-bg) !important; color: var(--nps-purple-ink) !important; }
.pill.kitchen { background: var(--nps-warning-bg) !important; color: var(--nps-warning-ink) !important; }
.pill.bar     { background: var(--nps-success-bg) !important; color: var(--nps-success-ink) !important; }
.pill.cashier { background: var(--nps-purple-bg)  !important; color: var(--nps-purple-ink)  !important; }
.pill.receipt { background: var(--nps-primary-bg) !important; color: var(--nps-primary-ink) !important; }
.ev-status.live { background: var(--nps-success-bg) !important; color: var(--nps-success-ink) !important; }

/* User-menu widget keeps its own white chip / red logout even inside blue headers */
.nps-usermenu .nps-chip { background: #fff !important; color: #17202a !important; border: 1px solid #cbd5e1 !important; }
.nps-usermenu .nps-chip:hover { background: var(--nps-blue-light) !important; }
.nps-usermenu .nps-logout { background: var(--nps-danger) !important; color: #fff !important; border: 1px solid var(--nps-danger) !important; }
.nps-usermenu .nps-logout:hover { background: #B91C1C !important; }