:root {
  --brand: #1f9d6b;
  --brand-dark: #146b48;
  --brand-light: #e7f7ef;
  --brand-soft: #f2fbf6;
  --ink: #1c2521;
  --muted: #6b7772;
  --border: #e6ebe8;
  --bg: #f4f7f6;
  --card: #ffffff;
  --red: #d1453a;
  --red-light: #fdecea;
  --amber: #b5750a;
  --amber-light: #fff3e0;
  --blue: #1959a3;
  --blue-light: #e8f1fb;
  --ink-soft: #2c3733;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font-size: 15px; }
a { color: var(--brand-dark); text-decoration: none; }
h1, h2, h3 { margin: 0 0 12px; }
p { line-height: 1.5; }
.ic { width: 17px; height: 17px; flex-shrink: 0; }

/* ---------- shell / sidebar ---------- */
.app-shell { display: flex; min-height: 100vh; }
.sidebar {
  width: 236px; background: linear-gradient(180deg, #10201a 0%, #0d1a15 100%); color: #c9dcd3; flex-shrink: 0;
  display: flex; flex-direction: column; padding: 18px 0;
}
.sidebar .brand { display: flex; align-items: center; gap: 10px; padding: 4px 18px 18px; border-bottom: 1px solid rgba(255,255,255,.08); margin-bottom: 10px; }
.brand-logo { width: 34px; height: 34px; border-radius: 8px; object-fit: cover; background: #fff; }
.brand-name { font-size: 16px; font-weight: 700; color: #fff; line-height: 1.2; }
.brand-tagline { font-size: 11px; color: var(--brand); opacity: .85; }
.sidebar nav { display: flex; flex-direction: column; flex: 1; gap: 1px; overflow-y: auto; padding: 0 10px; }
.sidebar nav a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; color: #b9cfc4; border-radius: 8px; font-size: 13.5px; }
.sidebar nav a .ic { color: #82a396; }
.sidebar nav a:hover { background: rgba(255,255,255,.06); color: #fff; }
.sidebar nav a.active { background: var(--brand); color: #fff; }
.sidebar nav a.active .ic { color: #fff; }
.sidebar-footer { padding: 14px 16px 0; border-top: 1px solid rgba(255,255,255,.08); margin-top: 12px; }
.branch-switch { margin-bottom: 10px; }
.branch-switch label { display: block; font-size: 11px; color: var(--brand); text-transform: uppercase; margin-bottom: 3px; }
.branch-switch select { background: rgba(255,255,255,.07); color: #fff; border: 1px solid rgba(255,255,255,.15); font-size: 13px; padding: 6px 8px; }
.who { display: flex; align-items: center; gap: 9px; }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--brand); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex-shrink: 0; }
.who-name { font-size: 13px; color: #fff; font-weight: 600; }
.sidebar-footer .role { display: inline-block; margin-top: 1px; background: rgba(255,255,255,.08); color: var(--brand); padding: 1px 8px; border-radius: 10px; font-size: 10.5px; text-transform: uppercase; }
.sidebar-footer .logout { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 13px; color: #b9cfc4; padding: 6px 2px; }
.sidebar-footer .logout .ic { color: #82a396; }

.content { flex: 1; padding: 26px 30px; max-width: 1280px; }

.flashes { margin-bottom: 16px; display: flex; flex-direction: column; gap: 8px; }
.flashes-plain { max-width: 380px; margin: 24px auto 0; }
.flash { padding: 10px 14px; border-radius: 8px; font-size: 14px; }
.flash-success { background: var(--brand-light); color: var(--brand-dark); border: 1px solid #b9e3c8; }
.flash-error { background: var(--red-light); color: var(--red); border: 1px solid #f2c7c4; }

.event-reminder-banner {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px; margin-bottom: 20px;
  background: var(--amber-light); border: 1px solid #f0d9a8; border-radius: 10px;
  color: #6b4c05; font-size: 13.5px;
}
.event-reminder-banner .ic { flex-shrink: 0; width: 20px; height: 20px; color: var(--amber); }
.event-reminder-banner > div { flex: 1; }
.event-reminder-banner strong { color: var(--amber); }

/* ---------- online orders: nav badge + alert toast ---------- */
.online-orders-badge {
  display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px;
  padding: 0 5px; margin-left: auto; background: var(--red); color: #fff; border-radius: 999px;
  font-size: 10.5px; font-weight: 800;
}
.sidebar nav a#online-orders-nav-link { display: flex; align-items: center; }
.online-order-toast {
  /* Bottom-right, not top-right -- most staff pages already put their own
     buttons (page-header .actions, branch switcher) in the top-right, so a
     top-right toast would sit on top of and block those controls. */
  position: fixed; bottom: 18px; right: 18px; z-index: 200; display: flex; align-items: center; gap: 10px;
  background: #fff; border: 1px solid var(--border); border-left: 4px solid var(--brand); border-radius: 12px;
  padding: 12px 14px; box-shadow: 0 8px 26px rgba(20,40,30,.15); max-width: 340px;
  animation: online-order-toast-in .3s ease;
}
.online-order-toast .ic { flex-shrink: 0; width: 22px; height: 22px; color: var(--brand); }
.online-order-toast-dismiss {
  background: none; border: none; color: var(--muted); font-size: 18px; cursor: pointer; line-height: 1; padding: 0 2px;
}
@keyframes online-order-toast-in {
  from { transform: translateY(12px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* ---------- cards / stats ---------- */
.card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 20px; margin-bottom: 20px; box-shadow: 0 1px 2px rgba(20,40,30,.03); }
.card-row { display: flex; gap: 14px; flex-wrap: wrap; }
.stat {
  flex: 1; min-width: 160px; background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  padding: 16px 18px; border-left: 4px solid var(--brand); box-shadow: 0 1px 2px rgba(20,40,30,.03);
}
.stat .label { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.stat .value { font-size: 25px; font-weight: 700; margin-top: 4px; color: var(--ink); }
.stat.warn { border-left-color: var(--amber); }
.stat.warn .value { color: var(--amber); }
.stat.bad { border-left-color: var(--red); }
.stat.bad .value { color: var(--red); }
.stat.info { border-left-color: var(--blue); }

/* ---------- tables ---------- */
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th, td { text-align: left; padding: 10px 10px; border-bottom: 1px solid var(--border); }
th { color: var(--muted); font-weight: 600; font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em; background: var(--brand-soft); }
tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--brand-soft); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 9px; border: 1px solid var(--brand);
  background: var(--brand); color: #fff; font-size: 14px; font-weight: 600; cursor: pointer;
}
.btn:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.btn.secondary { background: #fff; color: var(--brand-dark); }
.btn.secondary:hover { background: var(--brand-soft); }
.btn.danger { background: #fff; color: var(--red); border-color: #f2c7c4; }
.btn.danger:hover { background: var(--red-light); }
.btn.small { padding: 5px 10px; font-size: 12.5px; }
.btn.full { width: 100%; text-align: center; justify-content: center; }

.pill-group { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--border); background: #fff; color: var(--ink-soft); font-size: 13.5px; font-weight: 600; cursor: pointer; }
.pill:hover { border-color: var(--brand); }
.pill.active { background: var(--brand); border-color: var(--brand); color: #fff; }

/* ---------- forms ---------- */
.form-group { margin-bottom: 14px; }
.form-group label { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 5px; color: var(--muted); }
input, select, textarea {
  width: 100%; padding: 9px 11px; border: 1px solid var(--border); border-radius: 9px; font-size: 14px;
  background: #fff; color: var(--ink);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-light); }
input[type="color"] { padding: 3px; height: 40px; cursor: pointer; }
.form-row { display: flex; gap: 12px; flex-wrap: wrap; }
.form-row > * { flex: 1; min-width: 150px; }
.inline-form { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.search-box { position: relative; max-width: 320px; }
.search-box input { padding-left: 34px; }
.search-box .ic { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--muted); }

/* ---------- badges ---------- */
.badge { display: inline-block; padding: 3px 10px; border-radius: 10px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.badge-open, .badge-pending, .badge-draft { background: var(--amber-light); color: var(--amber); }
.badge-kot_sent, .badge-preparing, .badge-ordered { background: var(--blue-light); color: var(--blue); }
.badge-served, .badge-ready { background: var(--brand-light); color: var(--brand-dark); }
.badge-paid, .badge-received { background: var(--brand-light); color: var(--brand-dark); }
.badge-cancelled { background: var(--red-light); color: var(--red); }
.badge-occupied { background: var(--amber-light); color: var(--amber); }
.badge-available { background: var(--brand-light); color: var(--brand-dark); }
.badge-reserved { background: var(--blue-light); color: var(--blue); }
.badge-open-period { background: var(--brand-light); color: var(--brand-dark); }
.badge-closed-period { background: #eceff1; color: var(--muted); }

.grid { display: grid; gap: 16px; }
.grid.cols-2 { grid-template-columns: 1fr 1fr; }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }

.page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-wrap: wrap; gap: 10px; }
.page-header .actions { display: flex; gap: 8px; flex-wrap: wrap; }
.muted { color: var(--muted); }
.right { text-align: right; }
.center { text-align: center; }
.print-only { display: none; }
.report-total-row td { font-weight: 700; border-top: 2px solid var(--ink); }
.badge-cheapest { background: var(--brand-light); color: var(--brand-dark); }

/* ---------- marketing insight cards ---------- */
.insight-card { background: #fff; border: 1px solid var(--border); border-left: 4px solid var(--brand); border-radius: 10px; padding: 14px 18px; margin-bottom: 12px; }
.insight-card.warn { border-left-color: var(--amber); }
.insight-card.bad { border-left-color: var(--red); }
.insight-card.info { border-left-color: var(--blue); }
.insight-card .insight-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.insight-card .insight-title { font-weight: 700; font-size: 15px; }
.insight-card .insight-meta { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.insight-card .insight-suggestion { margin-top: 6px; font-size: 13.5px; color: var(--ink-soft); }
.insight-empty { color: var(--muted); font-size: 13.5px; padding: 4px 0 12px; }

/* ---------- login (split screen) ---------- */
.login-shell { min-height: 100vh; display: flex; background: var(--bg); }

.login-left { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px; position: relative; overflow: hidden; }
.login-bg-dots {
  position: absolute; inset: 0; opacity: .5; pointer-events: none;
  background-image: radial-gradient(circle, var(--border) 1.2px, transparent 1.2px);
  background-size: 22px 22px; -webkit-mask-image: radial-gradient(circle at 18% 12%, #000 0%, transparent 42%);
  mask-image: radial-gradient(circle at 18% 12%, #000 0%, transparent 42%);
}
.login-bg-wave { position: absolute; left: 0; bottom: 0; width: 100%; height: 30%; pointer-events: none; }
.login-left-inner { width: 100%; max-width: 380px; position: relative; z-index: 1; }
.login-left .brand-row { display: flex; align-items: center; gap: 11px; margin-bottom: 34px; }
.login-left .brand-row img { width: 46px; height: 46px; border-radius: 10px; object-fit: cover; box-shadow: 0 2px 8px rgba(20,40,30,.12); }
.brand-mark {
  width: 46px; height: 46px; border-radius: 12px; background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  color: #fff; font-weight: 800; font-size: 19px; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--brand) 45%, transparent);
}
.login-left .brand-row .name { font-size: 18px; font-weight: 800; color: var(--ink); line-height: 1.2; }
.login-left .brand-row .tag { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.login-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 18px; padding: 30px 28px;
  box-shadow: 0 12px 32px -12px rgba(20,40,30,.14), 0 2px 6px rgba(20,40,30,.04);
}
.login-card h1 { font-size: 23px; margin-bottom: 4px; }
.login-card h1 .accent { color: var(--brand); }
.login-card .sub { color: var(--muted); margin-bottom: 24px; font-size: 13.5px; }
.input-icon { position: relative; }
.input-icon .ic { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.input-icon input { padding-left: 38px; }
.input-icon input#pw-field { padding-right: 66px; }
.input-toggle {
  position: absolute; right: 32px; top: 50%; transform: translateY(-50%); background: none; border: none; padding: 6px;
  color: var(--muted); cursor: pointer; display: flex; z-index: 1;
}
.input-toggle:hover { color: var(--brand-dark); }
.login-row { display: flex; align-items: center; justify-content: space-between; margin: -4px 0 18px; font-size: 12.5px; }
.remember { display: flex; align-items: center; gap: 6px; color: var(--ink-soft); cursor: pointer; }
.remember input { width: auto; accent-color: var(--brand); }
.forgot { color: var(--brand-dark); font-weight: 600; }
.forgot.muted { color: var(--muted); font-weight: 500; }
.login-footer { display: flex; align-items: center; justify-content: center; gap: 8px; text-align: center; color: var(--muted); font-size: 12.5px; margin-top: 22px; }
.login-footer .ic { width: 15px; height: 15px; color: var(--brand); }

.login-right {
  flex: 1.15; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden;
  background: linear-gradient(150deg, #0b0f14, var(--brand-dark) 55%, var(--brand) 100%); padding: 40px 32px;
}
.login-right::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(circle at 12% 10%, rgba(255,255,255,.12) 0, transparent 40%),
                     radial-gradient(circle at 88% 90%, rgba(255,255,255,.08) 0, transparent 45%);
}
.login-bg-grid {
  position: absolute; inset: 0; opacity: .12; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.5) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.5) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: linear-gradient(160deg, #000 0%, transparent 55%);
  mask-image: linear-gradient(160deg, #000 0%, transparent 55%);
}
.login-bg-glow { position: absolute; left: 0; bottom: -20px; width: 100%; height: 42%; pointer-events: none; filter: blur(1px); }
.hex-badge {
  position: absolute; top: 26px; right: 30px; width: 42px; height: 42px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.28); display: flex; align-items: center; justify-content: center; color: #bfe9d4;
  background: rgba(255,255,255,.06);
}
.hex-badge .ic { width: 19px; height: 19px; }

.login-right-inner { position: relative; z-index: 1; width: 100%; max-width: 480px; }
.login-tagline.top { color: #fff; margin-bottom: 26px; }
.login-tagline.top h2 { font-size: 26px; line-height: 1.2; margin-bottom: 10px; }
.login-tagline.top .accent-2 { color: color-mix(in srgb, var(--brand) 55%, white); }
.login-tagline.top p { color: rgba(255,255,255,.82); font-size: 14px; margin: 0; max-width: 420px; }

.mock-stage { position: relative; }
.mock-window {
  background: #fff; border-radius: 14px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.4); overflow: hidden;
  transform: rotate(-1deg);
}
.mock-titlebar { background: #f1f3f2; padding: 8px 12px; display: flex; gap: 6px; }
.mock-titlebar .dot { width: 8px; height: 8px; border-radius: 50%; background: #d7dcd9; display: inline-block; }
.mock-body { display: flex; gap: 0; }
.mock-sidebar { width: 88px; flex-shrink: 0; background: #0e1f18; padding: 12px 8px; display: flex; flex-direction: column; gap: 3px; }
.mock-brand { width: 22px; height: 22px; border-radius: 6px; background: var(--brand); color: #fff; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; margin: 0 0 8px 2px; }
.mock-nav-item { display: flex; align-items: center; gap: 6px; padding: 5px 6px; border-radius: 6px; color: #9db8ac; font-size: 8.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mock-nav-item .ic { width: 11px; height: 11px; flex-shrink: 0; }
.mock-nav-item.active { background: var(--brand); color: #fff; }
.mock-main { flex: 1; padding: 12px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.mock-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.mock-stat { background: var(--brand-soft); border: 1px solid var(--brand-light); border-radius: 7px; padding: 6px 7px; display: flex; flex-direction: column; gap: 2px; }
.mock-stat .k { font-size: 6.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.mock-stat .v { font-size: 10px; font-weight: 800; color: var(--ink); }
.mock-panels { display: flex; gap: 8px; }
.mock-panel { flex: 1; background: #fafcfb; border: 1px solid var(--border); border-radius: 8px; padding: 8px; }
.mock-panel.narrow { flex: 0 0 84px; display: flex; flex-direction: column; align-items: center; }
.mock-panel-title { font-size: 7.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.mock-line { width: 100%; height: 42px; margin-top: 4px; }
.mock-donut { width: 46px; height: 46px; border-radius: 50%; margin-top: 8px; }
.mock-activity { background: #fafcfb; border: 1px solid var(--border); border-radius: 8px; padding: 6px 8px; display: flex; flex-direction: column; gap: 5px; }
.mock-activity-row { display: flex; align-items: center; gap: 6px; font-size: 8px; color: var(--ink-soft); font-weight: 600; white-space: nowrap; }
.mock-activity-row .right { margin-left: auto; color: var(--muted); font-weight: 500; flex-shrink: 0; }
.dot-ok, .dot-info { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.dot-ok { background: var(--brand); }
.dot-info { background: #1959a3; }

.float-card {
  position: absolute; display: flex; align-items: center; gap: 8px; background: #fff; color: var(--ink-soft);
  padding: 8px 13px; border-radius: 11px; font-size: 12px; font-weight: 600; box-shadow: 0 14px 30px -10px rgba(0,0,0,.3);
}
.float-card .ic { width: 14px; height: 14px; color: var(--brand); flex-shrink: 0; }
.fc-1 { top: -14px; right: -14px; }
.fc-2 { top: 40%; left: -36px; }
.fc-3 { bottom: -14px; right: 8%; }

.feature-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 44px; }
.feature-tile {
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); border-radius: 12px;
  padding: 12px 8px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
}
.feature-tile .ic { width: 20px; height: 20px; color: #8ff0c4; }
.feature-tile span { font-size: 10.5px; font-weight: 700; color: #fff; line-height: 1.25; }

@media (max-width: 980px) { .feature-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) { .login-right { display: none; } }

/* ---------- POS ---------- */
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.product-tile {
  background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 0; cursor: pointer;
  text-align: left; overflow: hidden; transition: border-color .12s, transform .12s;
}
.product-tile:hover { border-color: var(--brand); transform: translateY(-1px); }
.product-tile .thumb {
  height: 78px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, var(--brand-soft), #fff);
  overflow: hidden;
}
.product-tile .thumb-photo { width: 100%; height: 100%; object-fit: cover; }
.product-tile .thumb-badge {
  position: relative; width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center;
  justify-content: center; color: #fff; font-size: 19px; font-weight: 700;
  background: linear-gradient(150deg, color-mix(in srgb, var(--brand) 45%, white) 0%, var(--brand) 55%, color-mix(in srgb, var(--brand) 80%, black) 100%);
  box-shadow:
    0 8px 14px -6px color-mix(in srgb, var(--brand) 65%, black 10%),
    inset 0 2px 2px rgba(255,255,255,.55),
    inset 0 -6px 8px rgba(0,0,0,.18);
  transition: transform .15s;
}
.product-tile .thumb-badge::before {
  content: ""; position: absolute; top: 6px; left: 7px; width: 18px; height: 9px; border-radius: 50%;
  background: rgba(255,255,255,.6); filter: blur(2px); transform: rotate(-18deg); pointer-events: none;
}
.product-tile:hover .thumb-badge { transform: translateY(-2px) scale(1.05); }
.product-tile .body { padding: 10px 12px; }
.product-tile .name { font-weight: 600; font-size: 13.5px; }
.product-tile .price { color: var(--brand-dark); font-size: 13px; margin-top: 4px; font-weight: 600; }

.pos-screen { display: grid; grid-template-columns: 190px 1fr 340px; gap: 16px; align-items: start; }
.pos-cats {
  background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 10px; display: flex;
  flex-direction: column; gap: 2px; position: sticky; top: 16px; max-height: calc(100vh - 90px); overflow-y: auto;
}
.pos-cat {
  padding: 9px 10px; border-radius: 8px; font-size: 13.5px; font-weight: 600; color: var(--text); cursor: pointer;
  transition: background .12s, color .12s;
}
.pos-cat:hover { background: var(--brand-soft); }
.pos-cat.active { background: var(--brand); color: #fff; }
.pos-products { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 16px; }
.pos-section-title {
  font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em;
  margin: 4px 0 10px;
}
.pos-cat-section + .pos-cat-section { margin-top: 22px; }
.pos-ticket {
  background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 16px; position: sticky; top: 16px;
}
.pos-ticket-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pos-ticket-type { font-weight: 700; font-size: 14px; }
.pos-ticket-waiter { font-size: 12px; color: var(--muted); }
.pos-ticket-items { margin-top: 12px; max-height: 280px; overflow-y: auto; }
.pos-ticket-table { width: 100%; }
.pos-ticket-totals { margin-top: 14px; border-top: 1px dashed var(--border); padding-top: 12px; }
.pos-ticket-total-row {
  display: flex; justify-content: space-between; font-weight: 700; font-size: 17px; color: var(--brand-dark);
  border-top: 1px solid var(--border); margin-top: 8px; padding-top: 10px;
}
@media (max-width: 1100px) {
  .pos-screen { grid-template-columns: 1fr; }
  .pos-cats { position: static; flex-direction: row; flex-wrap: wrap; max-height: none; }
  .pos-ticket { position: static; }
}

.kot-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.kot-ticket { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 14px; border-top: 3px solid var(--brand); }
.kot-ticket h3 { font-size: 15px; }
.kot-item { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px dashed var(--border); font-size: 14px; }
.kot-item:last-child { border-bottom: none; }

/* ---------- table floor plan ---------- */
.floor-plan { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 18px; }
.table-tile {
  background: #fff; border: 2px solid var(--border); border-radius: 16px; padding: 16px 12px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.table-tile.status-available { border-color: var(--brand); }
.table-tile.status-occupied { border-color: var(--amber); background: var(--amber-light); }
.table-tile.status-reserved { border-color: var(--blue); background: var(--blue-light); }
.table-tile .num {
  width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 800; color: #fff; background: var(--brand);
}
.table-tile.status-occupied .num { background: var(--amber); }
.table-tile.status-reserved .num { background: var(--blue); }
.table-tile .cap { font-size: 12px; color: var(--muted); }

/* ---------- charts (pure CSS, no JS deps) ---------- */
.donut-wrap { display: flex; align-items: center; gap: 18px; }
.donut {
  width: 118px; height: 118px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.donut::after { content: ""; }
.donut .center { position: relative; width: 74px; height: 74px; border-radius: 50%; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.donut-legend { display: flex; flex-direction: column; gap: 7px; font-size: 12.5px; }
.donut-legend .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; margin-right: 7px; }
.donut-legend .row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

.bars { display: flex; align-items: flex-end; gap: 10px; height: 140px; padding-top: 10px; }
.bars .bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 6px; }
.bars .bar { width: 100%; max-width: 34px; border-radius: 5px 5px 0 0; background: var(--brand); min-height: 3px; }
.bars .bar-label { font-size: 10.5px; color: var(--muted); }

.hbar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; font-size: 13px; }
.hbar-row .name { width: 90px; flex-shrink: 0; color: var(--muted); text-transform: capitalize; }
.hbar-track { flex: 1; height: 9px; background: var(--brand-soft); border-radius: 5px; overflow: hidden; }
.hbar-fill { height: 100%; background: var(--brand); border-radius: 5px; }
.hbar-row .amt { width: 90px; text-align: right; flex-shrink: 0; font-weight: 600; }

.receipt { max-width: 320px; margin: 0 auto; background: #fff; padding: 20px; font-family: "Courier New", monospace; font-size: 13px; border: 1px solid var(--border); }
.receipt h2 { text-align: center; font-size: 16px; }
.receipt .center { text-align: center; }
.receipt table { font-size: 12px; }
.receipt hr { border: none; border-top: 1px dashed #999; margin: 8px 0; }

.bill-logo { display: block; width: 56px; height: auto; margin: 0 auto 6px; filter: grayscale(1) contrast(1.3); }
.bill-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 2px 0; }
.bill-row span:first-child { white-space: nowrap; }
.bill-total { font-weight: 700; font-size: 14px; }
.bill-items { width: 100%; border-collapse: collapse; }
.bill-items td { padding: 3px 0; vertical-align: top; }
.bill-items-head td { font-weight: 700; border-bottom: 1px dashed #999; padding-bottom: 5px; }
.bill-items tr:not(.bill-items-head) td:first-child { width: 26px; }

/* ---------- Home (module launcher) ---------- */
.home-sub { color: var(--muted); margin: -8px 0 22px; font-size: 14px; }
.home-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }
.home-card {
  display: flex; flex-direction: column; background: #fff; border-radius: 14px; overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,.06); text-decoration: none; color: inherit; transition: transform .15s, box-shadow .15s;
  border: 1px solid var(--border);
}
.home-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,.09); }
.home-card-art {
  height: 104px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, color-mix(in srgb, var(--hc) 7%, white), color-mix(in srgb, var(--hc) 3%, white));
}
.home-icon-badge {
  position: relative; width: 60px; height: 60px; border-radius: 17px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg, color-mix(in srgb, var(--hc) 45%, white) 0%, var(--hc) 55%, color-mix(in srgb, var(--hc) 80%, black) 100%);
  box-shadow:
    0 10px 16px -6px color-mix(in srgb, var(--hc) 65%, black 10%),
    inset 0 2px 2px rgba(255,255,255,.55),
    inset 0 -8px 10px rgba(0,0,0,.18);
}
.home-icon-badge::before {
  content: ""; position: absolute; top: 7px; left: 9px; width: 24px; height: 12px; border-radius: 50%;
  background: rgba(255,255,255,.6); filter: blur(2.5px); transform: rotate(-18deg); pointer-events: none;
}
.home-art-icon {
  width: 28px; height: 28px; color: #fff; fill: none; stroke: currentColor; stroke-width: 2;
  position: relative; z-index: 1; filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.3));
}
.home-card:hover .home-icon-badge { transform: translateY(-2px) scale(1.04); }
.home-icon-badge { transition: transform .15s; }
.home-card-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; }
.home-card-body h3 { font-size: 16px; margin: 0; }
.home-card-body p { font-size: 12.5px; color: var(--muted); margin: 0; line-height: 1.4; }
.home-tag {
  display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; font-size: 10.5px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; padding: 3px 9px 3px 7px; border-radius: 999px;
  color: var(--hc); background: color-mix(in srgb, var(--hc) 13%, white);
}
.home-tag .ic { width: 12px; height: 12px; }

.home-art-blue, .home-tag-blue { --hc: #2563eb; }
.home-art-violet, .home-tag-violet { --hc: #7c3aed; }
.home-art-red, .home-tag-red { --hc: #dc2626; }
.home-art-teal, .home-tag-teal { --hc: #0d9488; }
.home-art-indigo, .home-tag-indigo { --hc: #4f46e5; }
.home-art-green, .home-tag-green { --hc: #16a34a; }
.home-art-amber, .home-tag-amber { --hc: #d97706; }
.home-art-pink, .home-tag-pink { --hc: #db2777; }
.home-art-orange, .home-tag-orange { --hc: #ea580c; }
.home-art-cyan, .home-tag-cyan { --hc: #0891b2; }
.home-art-yellow, .home-tag-yellow { --hc: #ca8a04; }

/* ---------- Table picker (Select Table screen) ---------- */
.table-pick-screen { display: grid; grid-template-columns: 1fr 300px; gap: 20px; align-items: start; }
.table-pick-grid-wrap { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 20px; }
.table-pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 22px 16px; }

.table-icon { display: flex; flex-direction: column; align-items: center; cursor: pointer; text-align: center; }
.table-icon-graphic { position: relative; width: 74px; height: 74px; }
.table-icon-chair {
  position: absolute; width: 20px; height: 12px; border-radius: 4px;
  background: color-mix(in srgb, var(--brand) 35%, white);
}
.table-icon-chair.c1 { top: -3px; left: 4px; transform: rotate(-45deg); }
.table-icon-chair.c2 { top: -3px; right: 4px; transform: rotate(45deg); }
.table-icon-chair.c3 { bottom: -3px; left: 4px; transform: rotate(45deg); }
.table-icon-chair.c4 { bottom: -3px; right: 4px; transform: rotate(-45deg); }
.table-icon-top {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 56px; height: 56px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff;
  font-size: 11px; font-weight: 700; text-align: center; line-height: 1.15; padding: 4px;
  background: linear-gradient(150deg, color-mix(in srgb, var(--brand) 45%, white) 0%, var(--brand) 55%, color-mix(in srgb, var(--brand) 80%, black) 100%);
  box-shadow:
    0 8px 14px -6px color-mix(in srgb, var(--brand) 65%, black 10%),
    inset 0 2px 2px rgba(255,255,255,.55),
    inset 0 -6px 8px rgba(0,0,0,.18);
}
.table-icon:hover:not(.occupied) .table-icon-top { transform: translate(-50%, -50%) scale(1.06); }
.table-icon-occ { font-size: 10.5px; color: var(--muted); margin-top: 6px; max-width: 90px; }

.table-icon.occupied { cursor: pointer; }
.table-icon.occupied .table-icon-chair { background: #d7dbe0; }
.table-icon.occupied .table-icon-top {
  background: linear-gradient(150deg, #c3c9d1 0%, #9aa1ab 55%, #7c828c 100%);
  box-shadow: inset 0 2px 2px rgba(255,255,255,.4), inset 0 -6px 8px rgba(0,0,0,.15);
}
.table-icon.selected .table-icon-top { outline: 3px solid var(--brand-dark); outline-offset: 3px; }

.table-pick-side {
  background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 18px; position: sticky; top: 16px;
}
.table-pick-side h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); margin: 0 0 10px; }
.guest-stepper { display: flex; align-items: center; gap: 14px; }
.guest-step-btn {
  width: 32px; height: 32px; border-radius: 50%; border: none; background: var(--brand-soft); color: var(--brand-dark);
  font-size: 18px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.guest-step-btn:hover { background: var(--brand-light); }
#guest-display { font-size: 18px; font-weight: 700; min-width: 20px; text-align: center; }
.guest-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.guest-preset {
  border: 1px solid var(--border); background: #fff; border-radius: 7px; padding: 5px 10px; font-size: 12.5px;
  font-weight: 600; cursor: pointer;
}
.guest-preset:hover { border-color: var(--brand); color: var(--brand-dark); }
.waiter-search {
  width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; margin-bottom: 10px;
}
.waiter-chips { display: flex; flex-wrap: wrap; gap: 6px; max-height: 160px; overflow-y: auto; }
.waiter-chip {
  border: 1px solid var(--border); background: #fff; border-radius: 999px; padding: 6px 12px; font-size: 12.5px;
  font-weight: 600; cursor: pointer;
}
.waiter-chip:hover { border-color: var(--brand); }
.waiter-chip.selected { background: var(--brand); border-color: var(--brand); color: #fff; }
.table-pick-actions { display: flex; gap: 10px; margin-top: 22px; }
.table-pick-actions .btn { flex: 1; text-align: center; }
.table-pick-actions .btn[disabled] { opacity: .5; cursor: not-allowed; }

@media (max-width: 900px) {
  .table-pick-screen { grid-template-columns: 1fr; }
  .table-pick-side { position: static; }
}

@media print {
  /* Sized for an 80mm thermal receipt/KOT printer (a "POS-80"). Scoped to
     .receipt (bills, KOT tickets, Z reports) via the named "thermal" page
     below, rather than being the default size for every printed page --
     so a wide tabular report (see .report-print further down) still gets
     a normal page instead of being squeezed into an 80mm strip. Most
     POS-80 drivers expose an 80mm-wide continuous-roll paper size once
     selected as the printer in the browser's print dialog; this makes the
     ticket itself fill that width instead of printing a narrow column. */
  @page thermal { size: 80mm auto; margin: 2mm; }
  .receipt { page: thermal; }
  .no-print { display: none !important; }
  .print-only { display: block; }
  .app-shell { display: block; }
  .sidebar { display: none; }
  .content { padding: 0; max-width: none; }
  .receipt { max-width: none; width: 100%; border: none; padding: 0; }
  /* Thermal printers reproduce solid black far better than grays, so the
     normal on-screen muted/soft text colors (and the light dashed dividers)
     come out faint. Force everything on the printed ticket to solid black
     and bold the dividers up so it prints noticeably darker/crisper. */
  .receipt, .receipt * { color: #000 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .receipt { font-weight: 600; }
  .receipt hr { border-top: 1.5px dashed #000; }

  /* Tabular reports (Sales, Purchasing, P&L...) print on a normal page in
     landscape, wide tables aren't clipped, and get their own named page so
     they're unaffected by the 80mm thermal sizing above. */
  @page report { size: A4 landscape; margin: 12mm; }
  .report-print { page: report; }
  .report-print, .report-print * { color: #000 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .report-print table { font-size: 12.5px; }
}

.kot-ticket { font-size: 14px; }
.kot-ticket h2 { font-size: 17px; }
.kot-big { font-weight: 700; font-size: 15px; margin: 4px 0; }
/* Order type/table/guest, waiter and date/time lines -- these are plain
   running text (not bold like the item list), which on a thermal printer
   reads noticeably fainter than the surrounding bold text even though the
   color itself is forced solid black above. Bumping the weight and size
   here specifically is what actually makes the ink/heat darker on paper. */
.kot-meta { font-weight: 700; font-size: 14px; color: var(--ink); margin: 2px 0; }
.kot-items { width: 100%; }
.kot-items td { padding: 5px 0; vertical-align: top; font-size: 15px; font-weight: 600; }
.kot-items .kot-qty { width: 36px; white-space: nowrap; }
.kot-note { font-size: 12px; font-weight: 400; font-style: italic; color: #444; margin-top: 2px; }

.kot-history { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 10px; }
.kot-history-title { font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); margin-bottom: 6px; }
.kot-history-row { display: flex; align-items: center; justify-content: space-between; padding: 5px 0; font-size: 13px; }

.delivery-customer-card {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--brand-soft);
}

/* ---------- modal (Search Customer, delivery orders) ---------- */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(15,18,23,.55); z-index: 200;
  display: none; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow-y: auto;
}
.modal-box { background: #fff; border-radius: 14px; width: 100%; max-width: 640px; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--border); }
.modal-head h3 { margin: 0; font-size: 18px; color: var(--brand-dark); }
.modal-close { background: none; border: none; font-size: 24px; line-height: 1; cursor: pointer; color: var(--muted); padding: 0; }
.modal-close:hover { color: #111; }
.modal-body { padding: 20px 22px; }
.modal-subhead { font-size: 15px; margin: 18px 0 12px; color: var(--brand-dark); }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }

.customer-search-wrap { position: relative; }
.customer-search-input { width: 100%; }
.customer-search-results {
  position: absolute; left: 0; right: 0; margin-top: 4px; max-height: 180px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: 9px; background: #fff; box-shadow: 0 8px 20px rgba(0,0,0,.1);
  z-index: 5; display: none;
}
.customer-search-wrap:focus-within .customer-search-results { display: block; }
.customer-search-row {
  display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; font-size: 13px;
  cursor: pointer; border-bottom: 1px solid var(--border);
}
.customer-search-row:last-child { border-bottom: none; }
.customer-search-row:hover { background: var(--brand-soft); }

.customer-selected-note { margin-top: 10px; padding: 8px 12px; background: var(--brand-soft); border-radius: 8px; font-size: 13px; }
.link-btn { background: none; border: none; color: var(--brand-dark); text-decoration: underline; cursor: pointer; font-size: 12.5px; margin-left: 8px; padding: 0; }

.form-grid { display: grid; gap: 12px; margin-bottom: 4px; }
.form-grid-2 { grid-template-columns: 1fr 1fr; }
.form-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 560px) {
  .form-grid-2, .form-grid-3 { grid-template-columns: 1fr; }
}

@media (max-width: 800px) {
  .app-shell { flex-direction: column; }
  .sidebar { width: 100%; flex-direction: row; overflow-x: auto; padding: 10px; align-items: center; }
  .sidebar nav { flex-direction: row; }
  .sidebar-footer { display: none; }
  .content { padding: 16px; }
  .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; }
  .donut-wrap { flex-direction: column; align-items: flex-start; }

  /* On phones/tablets, the POS order screen's own action buttons (Send to
     kitchen, Take payment, etc.) sit at the bottom of the page -- a
     bottom-right floating toast would land directly on top of them and
     block taps. Move it to a full-width bar just under the (now
     horizontal, top) sidebar instead, where nothing else ever sits. */
  .online-order-toast {
    bottom: auto; top: 66px; left: 10px; right: 10px; max-width: none;
  }
}