/* BizSensei Portal — BizSensei monochrome visual system (matches latest BizSensei OMS).
   Inter / #0b0b0b / sharp 2-4px corners / hard offset shadows. No framework. */
:root {
  --gg-black: #0b0b0b; --gg-ink: #171717; --gg-gray: #686868;
  --gg-line: #dcdcdc; --gg-soft: #f6f6f6;
  --ok: #1e7e34; --warn: #8a5a00; --bad: #a32222; --info: #225a9e;
}
* { box-sizing: border-box; }
body {
  margin: 0; color: var(--gg-ink); background: var(--gg-soft);
  font: 15px/1.55 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}
.wrap { max-width: 1060px; margin: 0 auto; padding: 0 16px; }
a { color: #111; text-decoration-thickness: 1px; }
a:hover { color: #555; }
h1, h2, h3, strong { color: var(--gg-black); letter-spacing: -.015em; }
h1 { font-size: 26px; margin: 6px 0 14px; letter-spacing: -.03em; }
h2 { font-size: 18px; margin: 22px 0 10px; }
.kicker {
  display: block; color: var(--gg-gray); font-size: 10px; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; margin-bottom: 4px;
}

/* Top bar — white brandbar like the plugin */
.topbar { background: #fff; border-bottom: 2px solid var(--gg-black); }
.topbar-in { display: flex; align-items: center; gap: 14px; padding: 12px 16px; flex-wrap: wrap; }
.brand { color: var(--gg-black); font-weight: 800; text-decoration: none; font-size: 18px; letter-spacing: -.02em; }
.brand::before {
  content: ""; display: inline-block; width: 12px; height: 12px; background: var(--gg-black);
  margin-right: 9px; vertical-align: baseline;
}
.rest { color: var(--gg-gray); font-size: 13px; }
.nav { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.nav a {
  color: var(--gg-ink); text-decoration: none; padding: 6px 12px; font-size: 14px; font-weight: 600;
  border: 1px solid transparent; border-radius: 2px;
}
.nav a:hover { border-color: var(--gg-line); background: #fff; color: var(--gg-black); }
.nav a.on { background: var(--gg-black); color: #fff; border-color: var(--gg-black); }
/* Brand logo in header */
.brand { display: inline-flex; align-items: center; gap: 8px; }
.brand-logo { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
/* Hierarchical header nav — premium dropdown menus (monochrome) */
.navdrop { position: relative; }
.navdrop-btn {
  color: var(--gg-ink); background: transparent; padding: 8px 14px; font-size: 14px; font-weight: 600;
  border: 1px solid transparent; border-radius: 3px; cursor: pointer; font-family: inherit;
  letter-spacing: .02em; transition: background .15s, color .15s, border-color .15s;
}
.navdrop-btn:hover { border-color: var(--gg-black); background: #fff; color: var(--gg-black); }
.navdrop-btn.on, .navdrop.on .navdrop-btn { background: var(--gg-black); color: #fff; border-color: var(--gg-black); }
.navdrop-btn .caret { font-size: 10px; margin-left: 4px; opacity: .7; }
.navdrop-menu {
  display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 200; min-width: 210px;
  background: #fff; border: 1px solid var(--gg-black); border-radius: 3px;
  box-shadow: 6px 6px 0 rgba(0,0,0,.12); padding: 6px;
}
.navdrop.open .navdrop-menu { display: block; animation: navdrop-in .15s ease-out; }
@keyframes navdrop-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.navdrop-menu a {
  display: block; padding: 9px 14px; white-space: nowrap; border-radius: 2px;
  font-weight: 500;
}
.navdrop-menu a:hover { background: #f4f4f4; border-color: transparent; color: var(--gg-black); }
.navdrop-menu a.on { background: var(--gg-black); color: #fff; }
main.wrap { padding-top: 22px; padding-bottom: 40px; }
.foot {
  color: var(--gg-gray); font-size: 12px; padding: 18px 16px 30px;
  border-top: 1px solid var(--gg-line); margin-top: 30px;
}
.foot::before { content: "◆"; display: inline-block; margin-right: 6px; color: #111; font-size: 9px; }

/* Cards, stats, panels */
.card, .stat, .feat, .item, .kds-card {
  background: #fff; border: 1px solid var(--gg-line); border-radius: 4px;
  box-shadow: 4px 4px 0 rgba(0,0,0,.08);
}
.card { padding: 18px; margin-bottom: 16px; }
.card h2:first-child { margin-top: 0; border-bottom: 1px solid var(--gg-line); padding-bottom: 10px; }
.grid { display: grid; gap: 14px; }
.grid.c2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid.c4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.stat { padding: 14px 16px; border-top: 4px solid var(--gg-black); }
.stat .n { font-size: 30px; font-weight: 800; color: var(--gg-black); }
.stat .l { color: var(--gg-gray); font-size: 13px; }

/* Tables */
table.t { width: 100%; border-collapse: collapse; background: #fff; }
table.t th, table.t td { text-align: left; padding: 10px 9px; border-bottom: 1px solid var(--gg-line); font-size: 14px; }
table.t th { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--gg-gray); background: #fff; border-bottom: 2px solid var(--gg-black); }
table.t tr:last-child td { border-bottom: 0; }

/* Forms */
form.f label { display: block; font-size: 13px; font-weight: 700; margin: 12px 0 4px; color: var(--gg-black); }
form.f input[type=text], form.f input[type=email], form.f input[type=password],
form.f input[type=number], form.f select, form.f textarea {
  width: 100%; padding: 9px 10px; border: 1px solid #a9a9a9; border-radius: 2px;
  font-size: 15px; background: #fff; box-shadow: none; font-family: inherit;
}
form.f input:focus, form.f select:focus, form.f textarea:focus {
  border-color: #000; box-shadow: 0 0 0 1px #000; outline: 0;
}
form.f textarea { min-height: 64px; }

/* Buttons */
.btn {
  display: inline-block; background: var(--gg-black); color: #fff; border: 1px solid #000;
  border-radius: 2px; padding: 9px 18px; font-size: 14px; font-weight: 700;
  cursor: pointer; text-decoration: none; font-family: inherit;
}
.btn:hover { background: #2b2b2b; color: #fff; }
.btn.ghost { background: #fff; color: #111; border: 1px solid #111; }
.btn.ghost:hover { background: #111; color: #fff; }
.btn.warn { background: #fff; color: var(--warn); border: 1px solid var(--warn); }
.btn.warn:hover { background: var(--warn); color: #fff; }
.btn.bad { background: #fff; color: var(--bad); border: 1px solid var(--bad); }
.btn.bad:hover { background: var(--bad); color: #fff; }
.btn.small { padding: 5px 10px; font-size: 12px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* Notices */
.flash {
  background: #f4f4f4; border: 1px solid #111; border-left: 4px solid #111; color: #111;
  padding: 10px 14px; border-radius: 2px; margin-bottom: 14px;
}
.err {
  background: #f6f6f6; border: 1px solid #d5d5d5; border-left: 4px solid var(--bad); color: #111;
  padding: 10px 14px; border-radius: 2px; margin-bottom: 14px;
}

/* Status pills */
.pill {
  display: inline-block; padding: 3px 9px; font-size: 12px; font-weight: 700;
  background: #f0f0f0; color: #111; border: 1px solid #bcbcbc; border-radius: 2px;
}
.pill.new { background: #fff4c2; border-color: #111; }
.pill.accepted, .pill.preparing { background: #dceafd; border-color: #225a9e; color: #225a9e; }
.pill.ready { background: #d8f2df; border-color: #1e6b3e; color: #1e6b3e; }
.pill.served, .pill.paid { background: #ededed; }
.pill.cancelled { background: #ffe0e0; border-color: #a32222; color: #a32222; }

/* Veg / non-veg marks (same as OMS) */
.vegmark { display: inline-block; width: 13px; height: 13px; border: 2px solid #2e7d32; border-radius: 3px; position: relative; vertical-align: -1px; margin-right: 6px; }
.vegmark::after { content: ""; position: absolute; inset: 2px; border-radius: 50%; background: #2e7d32; }
.vegmark.nonveg { border-color: #a0342a; }
.vegmark.nonveg::after {
  content: ""; position: absolute; left: 50%; top: 54%; transform: translate(-50%,-50%);
  width: 0; height: 0; border-radius: 0; background: none;
  border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 7px solid #a0342a;
}

/* Customer ordering */
.menu-cat {
  margin: 20px 0 10px; font-size: 18px; padding-bottom: 8px;
  border-bottom: 3px solid var(--gg-black); letter-spacing: -.015em;
}
.item { display: flex; gap: 10px; align-items: center; padding: 12px 14px; margin-bottom: 10px; }
.item .nm { font-weight: 700; color: var(--gg-black); }
.item .ds { color: var(--gg-gray); font-size: 13px; }
.item .pr { margin-left: auto; font-weight: 800; white-space: nowrap; color: var(--gg-black); }
.qty { display: flex; align-items: center; gap: 8px; }
.qty button {
  width: 32px; height: 32px; border-radius: 2px; border: 1px solid #111; background: #fff;
  color: #111; font-size: 18px; font-weight: 800; cursor: pointer; line-height: 1;
}
.qty button:hover { background: #111; color: #fff; }
.cartbar {
  position: sticky; bottom: 0; background: var(--gg-black); color: #fff;
  padding: 12px 16px; display: flex; gap: 12px; align-items: center;
  border-radius: 4px 4px 0 0; margin-top: 16px; border: 2px solid #000; border-bottom: 0;
}
.cartbar .btn { background: #fff; color: #111; border-color: #fff; }
.cartbar .btn:hover { background: #e8e8e8; }

/* KDS tickets (same language as OMS kitchen tickets) */
.kds-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.kds-card { padding: 16px; border: 2px solid #d5d5d5; }
.kds-card.new { border-color: #38a169; }
.kds-card.preparing { border-color: #d69e2e; }
.kds-card.ready { border-color: #3182ce; }
.kds-card .ord { font-size: 20px; font-weight: 800; color: var(--gg-black); }
.kds-card ul { margin: 8px 0; padding-left: 18px; font-size: 15px; }
.kds-card li { padding: 4px 0; }
.elapsed { color: var(--gg-gray); font-size: 12px; }

/* Landing */
.hero {
  text-align: center; padding: 64px 28px 52px; margin: 8px 0 26px;
  background: var(--gg-black); color: #fff; border: 2px solid #000; border-radius: 4px;
  box-shadow: 6px 6px 0 #d8d8d8;
}
.hero h1 { font-size: 40px; margin: 0 0 10px; color: #fff; letter-spacing: -.03em; }
.hero .kicker { color: #d8d8d8; }
.hero p { color: #d8d8d8; font-size: 18px; max-width: 640px; margin: 0 auto 24px; }
.hero .btn { background: #fff; color: #111; border-color: #fff; }
.hero .btn:hover { background: #e8e8e8; color: #111; }
.hero .btn.ghost { background: transparent; color: #fff; border: 1px solid #fff; }
.hero .btn.ghost:hover { background: #fff; color: #111; }
.feats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 30px 0; }
.feat { padding: 16px; }
.feat h3 { margin: 0 0 6px; font-size: 16px; }
.feat p { margin: 0; color: var(--gg-gray); font-size: 14px; }

/* Billing */
.bill {
  background: #fff; border: 2px solid #111; border-radius: 2px; padding: 24px;
  max-width: 440px; margin: 0 auto;
}
.bill h2 { text-align: center; margin: 0 0 4px; }
.bill .c { text-align: center; color: var(--gg-gray); font-size: 13px; }
.bill table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 14px; }
.bill td { padding: 5px 0; border-bottom: 1px dotted #bbb; }
.bill .tot { font-weight: 800; font-size: 18px; color: var(--gg-black); }
.qrprint { text-align: center; padding: 30px; }
.qrprint img { max-width: 420px; width: 90%; border: 1px solid var(--gg-line); }

/* Print */
@media print {
  .topbar, .foot, .noprint, .flash { display: none !important; }
  body { background: #fff; }
  .bill { border: 0; box-shadow: none; max-width: 320px; margin: 0 auto; }
  .card, .stat, .kds-card { box-shadow: none; }
}

@media (max-width: 640px) {
  .hero { padding: 44px 18px 36px; }
  .hero h1 { font-size: 30px; }
  .nav { margin-left: 0; }
}

/* Report bars */
.bar-row { display: flex; align-items: center; gap: 10px; margin: 7px 0; }
.bar-label { flex: 0 0 52px; font-size: 12px; color: var(--gg-gray); font-weight: 700; }
.bar-track { flex: 1; height: 14px; background: #f0f0f0; border: 1px solid var(--gg-line); border-radius: 2px; }
.bar-fill { display: block; height: 100%; background: var(--gg-black); border-radius: 1px; }
.bar-val { flex: 0 0 auto; font-size: 13px; font-weight: 700; color: var(--gg-black); }
.bar-val small { color: var(--gg-gray); font-weight: 400; }

/* Old KDS tickets (>15 min): silent visual pulse, no sound */
.kds-card.old { border-color: #a32222; animation: bp-pulse 1.6s ease-in-out infinite alternate; }
@keyframes bp-pulse {
  from { box-shadow: 4px 4px 0 rgba(0,0,0,.08); }
  to   { box-shadow: 4px 4px 0 rgba(163,34,34,.45); }
}

/* ===== v2.0 ported-module CSS ===== */

/* group a */
/* BizSensei Portal v2.0 — GROUP A extra CSS.
   The Group A pages use the existing monochrome system (.card, .btn, .btn.ghost,
   table.t, form.f, .pill, .kicker, .grid). The only gap: style.css styles
   text/email/password/number inputs, select and textarea, but the Group A pages
   also use datetime-local / time / date inputs. Append this to assets/style.css. */
form.f input[type=datetime-local], form.f input[type=time], form.f input[type=date] {
  width: 100%; padding: 9px 10px; border: 1px solid #a9a9a9; border-radius: 2px;
  font-size: 15px; background: #fff; box-shadow: none; font-family: inherit;
}
form.f input[type=datetime-local]:focus, form.f input[type=time]:focus, form.f input[type=date]:focus {
  border-color: #000; box-shadow: 0 0 0 1px #000; outline: 0;
}

/* group b */
CSS.txt — Group B CSS needs
============================
No new global classes are required: all pages reuse the existing design system
(.card, .btn, table.t, form.f, .pill, .kicker, .flash, .grid).

One exception: floor.php needs tiny scoped styles for the drag-and-drop chips.
They are INLINED in floor.php via a <style> block (scoped to .ftable), so NO
change to assets/style.css is needed:

  .ftable       — table chip (position:absolute, translate(-50%,-50%),
                  white bg, 2px black border, 4px radius, 3px 3px 0 hard offset shadow)
  .ftable.drag  — dragging state (grabbing cursor, larger shadow, raised z-index)

If the coordinator prefers these in assets/style.css instead of inline, move
the two rules verbatim from the <style> block at the bottom of floor.php.
Nothing else is new: addons.php uses .pill for option chips, reservations.php
and branding.php use standard table.t / form.f / .card.

/* group c */
# Group C — CSS notes (coordinator merges into assets/style.css if desired)

## Reused existing classes (no changes needed)
.card, .btn (+ .small .ghost .warn .bad), table.t, form.f, .pill
(+ .accepted .cancelled .served .ready), .kicker, .grid.c2, .row,
.flash, .err, .vegmark (+ .nonveg) — used by shifts/kds_stations/kiosk.

## New selectors (currently INLINE in each page's <style> block)
Every Group C page ships its new CSS inline so it renders correctly
before AND after the coordinator merges these into assets/style.css.
If you centralize them, DELETE the inline <style> blocks to avoid duplication.

### shifts.php
.t td.num { text-align: right; white-space: nowrap; }   /* Z-report numbers */
@media print {
  .topbar, .row, .noprint, .foot, .flash { display: none !important; }
  #zreport { box-shadow: none; border: 1px solid #000; }
}

### pin_login.php (all inline)
.pinwrap, .pindots (+ .on), .pinpad (+ button, .util, :active)

### now_serving.php (all inline)
Dark TV-board theme: .head, .cols/.col(.ready/.prep), .toks/.tok (+ .n .who), .empty, .foot

### kot.php (all inline)
Monospace thermal-ticket theme: .kot (+ h1/.c/.meta/h2/ul/li/.q/.foot), .noprint,
@media print { .noprint hidden; @page margin 6mm }

### kiosk.php (all inline)
Big-touch theme: .khead, .kcats/.kcat(+.on), .kgrid/.kitem(+.nm/.pr/.kadd/.qstep),
.kcartbar, .kco/.sheet, .kline, .kdone(+.big), .branchpick

/* group d */
# GROUP D — CSS additions (coordinator appends to assets/style.css)

No new component classes are used: delivery.php and my_deliveries.php reuse
.card, .btn (+ .small, .ghost, .bad), .grid.c2, table.t, form.f, .kicker, .pill.
Status pill colors to add for the new rider statuses (same monochrome system):

.pill.on_the_way { background: #dceafd; border-color: #225a9e; color: #225a9e; }
.pill.delivered { background: #ededed; border-color: #111; }

Note: .pill.cancelled already exists in v1.1 style.css. .pill.paid / .pill.served
already map to the grey style — delivered reuses that treatment.

/* group e */
/* Group E — Inventory section tabs. Append to assets/style.css. */
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 18px; }
.tabs a {
  display: inline-block; padding: 8px 16px;
  border: 2px solid #0b0b0b; border-radius: 3px;
  background: #fff; color: #0b0b0b;
  font-weight: 700; font-size: 14px; text-decoration: none;
  box-shadow: 2px 2px 0 #0b0b0b;
}
.tabs a:hover { background: #f0f0f0; }
.tabs a.on { background: #0b0b0b; color: #fff; }
.pill.bad { background: #ffe1e1; border-color: #a00; color: #a00; }
.pill.draft { background: #eee; border-color: #111; color: #111; }
.pill.ordered { background: #dceafd; border-color: #225a9e; color: #225a9e; }
.pill.received { background: #d9f2dd; border-color: #17603a; color: #17603a; }
.pill.cancelled { background: #f3f3f3; border-color: #888; color: #888; }

/* group f */
/* CSS.txt — Group F additions for assets/style.css.
   Everything else reuses existing classes (.card, .btn, .btn.ghost, .btn.small,
   .btn.bad, table.t, form.f, .pill, .kicker, .flash, .err, .row, .grid.c2,
   .grid.c4, .stat). Append this block to style.css. */

/* Pass/fail pills (health checks, webhook log, API keys) */
.pill.pass { background: #d8f2df; border-color: #1e6b3e; color: #1e6b3e; }
.pill.fail { background: #ffe0e0; border-color: #a32222; color: #a32222; }

/* Monospace for keys / codes / signatures */
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; }

/* Sensei placeholder chat */
.sensei-chat {
  border: 1px solid var(--gg-line); border-radius: 4px; background: var(--gg-soft);
  padding: 14px; margin-bottom: 12px; max-height: 320px; overflow-y: auto;
}
.sensei-msg {
  background: #fff; border: 1px solid var(--gg-line); border-radius: 4px;
  padding: 10px 12px; margin-bottom: 8px; font-size: 14px; max-width: 90%;
}
.sensei-msg.bot { border-left: 4px solid var(--gg-black); }

/* Multi-select for webhook events */
form.f select[multiple] { min-height: 96px; }

/* BizSensei team admin section */
.impbar{background:#0b0b0b;color:#fff;font-size:14px}
.impbar .wrap{padding-top:8px;padding-bottom:8px}
.impbar a{color:#fff;text-decoration:underline}
.pill.suspended{background:#f8d7da;border-color:#a33;color:#a33}
.pill.active{background:#d1e7dd;border-color:#0f5132;color:#0f5132}
.linkbtn{background:none;border:0;color:#0b0b0b;text-decoration:underline;cursor:pointer;font-size:14px;padding:0;margin-left:8px}
.linkbtn:hover{color:#555}