/* ============================================================
   Youshi design system
   Palette: parchment base, deep teal ink, marigold accent —
   a nod to the marigold garlands & signage of the restaurants
   this tool runs in, rather than a generic AI-app palette.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&family=Public+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root {
  --partner-primary: #14615f;
  --partner-secondary: #e2972f;
  --ink: #16262a;
  --ink-soft: #3c5459;
  --parchment: #f4f1e6;
  --parchment-dim: #e9e4d3;
  --panel: #ffffff;
  --marigold: #e2972f;
  --marigold-dark: #b8721a;
  --teal: #14615f;
  --teal-dark: #0d4442;
  --green: #3f7d5c;
  --green-bg: #e6f2ea;
  --red: #b8423a;
  --red-bg: #fbeae8;
  --amber-bg: #fdf1de;
  --border: #ddd6c1;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(22,38,42,0.06), 0 6px 20px rgba(22,38,42,0.06);
  --font-display: 'Fraunces', serif;
  --font-body: 'Public Sans', -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--parchment);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 4px;
}

a { color: var(--teal-dark); }

.mono { font-family: var(--font-mono); letter-spacing: 0.02em; }

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
}

/* ---------- Layout shells ---------- */
.auth-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    radial-gradient(circle at 15% 10%, rgba(226,151,47,0.14), transparent 45%),
    radial-gradient(circle at 85% 90%, rgba(20,97,95,0.12), transparent 45%),
    var(--parchment);
}
.auth-card {
  width: 100%;
  max-width: 400px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 36px 32px;
}
.auth-card .eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--marigold-dark);
  margin-bottom: 10px;
}
.auth-card h1 { font-size: 28px; margin-bottom: 6px; }
.auth-card p.sub { color: var(--ink-soft); margin: 0 0 24px; font-size: 14px; }

.app-shell { display: flex; min-height: 100vh; }
.sidebar {
  width: 220px;
  flex-shrink: 0;
  background: var(--ink);
  color: #eee7d4;
  padding: 24px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  overflow: hidden;
  transition: width 0.4s cubic-bezier(0.65, 0, 0.35, 1), padding 0.4s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.3s ease;
  white-space: nowrap;
}
.sidebar.is-collapsed {
  width: 0;
  padding-left: 0;
  padding-right: 0;
  opacity: 0;
  pointer-events: none;
}
.sidebar-collapse-btn {
  position: absolute; top: 18px; right: -13px; z-index: 5;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--panel); border: 1px solid var(--border); color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 13px; line-height: 1;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  transition: transform 0.2s ease;
}
.sidebar-collapse-btn:hover { transform: scale(1.12); }

/* The FAB is always position:fixed at its final spot — even while invisible
   — so its true centre point can be read via getBoundingClientRect() at any
   time, which is what lets the travelling orb below aim at the right place
   regardless of the FAB's current scale. */
.sidebar-fab {
  position: fixed; right: 24px; bottom: 24px; z-index: 500;
  width: 52px; height: 52px; border-radius: 50%;
  background: linear-gradient(150deg, var(--marigold), var(--teal));
  border: none; color: #fff; font-family: var(--font-display); font-size: 18px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: 0 10px 26px rgba(0,0,0,0.3);
  transform: scale(0); opacity: 0;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease;
}
.sidebar-fab.is-visible { transform: scale(1); opacity: 1; }
.sidebar-fab:hover { transform: scale(1.08); }
.sidebar-fab.is-visible:hover { transform: scale(1.08); }

/* The "soul" that travels from the collapse button to the corner, where it
   becomes the FAB. A short-lived element, created and destroyed per click. */
.sidebar-soul-orb {
  position: fixed; z-index: 600; pointer-events: none;
  width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle, #fff, var(--marigold) 70%);
  box-shadow: 0 0 16px 4px rgba(244, 176, 0, 0.55);
  transition: left 0.55s cubic-bezier(0.6, -0.15, 0.3, 1.15), top 0.55s cubic-bezier(0.6, -0.15, 0.3, 1.15), opacity 0.3s ease;
}

.sidebar .brand {
  font-family: var(--font-display);
  font-size: 22px;
  color: #fff;
  margin-bottom: 26px;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.sidebar .brand .dot { color: var(--marigold); }
.sidebar nav a, .sidebar .nav-btn {
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  color: #cfd8d4;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  background: none;
  text-align: left;
  width: 100%;
}
.sidebar nav a:hover, .sidebar .nav-btn:hover, .sidebar nav a.active {
  background: rgba(255,255,255,0.08);
  color: #fff;
}
.sidebar .spacer { flex: 1; }
.sidebar .logout {
  color: #e2a89c;
  font-size: 13px;
}
.main { flex: 1; padding: 32px 40px; max-width: 1200px; }
.main-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 12px;
}

/* ---------- Forms ---------- */
.field { margin-bottom: 16px; }
.field label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 5px;
}
/* Base size for every hint. Previously only ".field .hint" was sized, so
   a hint used outside a form field (stock alerts, panel subtitles) fell
   back to the body size and rendered noticeably too large. */
.hint { font-size: 12px; color: var(--ink-soft); line-height: 1.45; }
.field .hint { font-size: 12px; color: #8a8570; margin-top: 4px; }
input[type=text], input[type=email], input[type=password], input[type=tel],
input[type=number], textarea, select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
}
input:focus, textarea:focus, select:focus, button:focus-visible {
  outline: 2px solid var(--marigold);
  outline-offset: 1px;
}
textarea { resize: vertical; min-height: 60px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: transform 0.05s ease;
}
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--teal-dark); color: #fff; }
.btn-primary:hover { background: var(--teal); }
.btn-marigold { background: var(--marigold); color: #1c1204; }
.btn-marigold:hover { background: var(--marigold-dark); color: #fff; }
.btn-outline { background: transparent; border-color: var(--border); color: var(--ink); }
.btn-outline:hover { border-color: var(--ink); }
.btn-danger { background: var(--red-bg); color: var(--red); }
.btn-danger:hover { background: var(--red); color: #fff; }
.btn-success { background: var(--green-bg); color: var(--green); }
.btn-success:hover { background: var(--green); color: #fff; }
.btn-sm { padding: 6px 12px; font-size: 12.5px; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

.dp-status-box { background: var(--amber-bg); color: var(--marigold-dark); }
.dp-tier-label { font-size: 13px; color: var(--ink-soft); white-space: nowrap; }
.error-box {
  background: var(--red-bg);
  color: var(--red);
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13.5px;
  margin-bottom: 16px;
  display: none;
}
.error-box.show { display: block; }
.success-box {
  background: var(--green-bg);
  color: var(--green);
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13.5px;
  margin-bottom: 16px;
  display: none;
}
.success-box.show { display: block; }

/* ---------- Cards / panels ---------- */
.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px;
}
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 24px; }
.stat-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
}
.stat-card .num { font-family: var(--font-display); font-size: 30px; font-weight: 700; }
.stat-card .label { font-size: 12.5px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.04em; }

/* ---------- Table status grid (signature element) ---------- */
.table-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 18px 14px;
}
.table-tile {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 6px 4px 2px;
  background: none; border: none;
}
.table-setting {
  position: relative;
  width: 84px; height: 84px;
}
.table-chair {
  position: absolute;
  background: #d8d0bd; border-radius: 5px;
}
.table-chair.top    { top: -3px; left: 50%; width: 20px; height: 11px; margin-left: -10px; border-radius: 5px 5px 3px 3px; }
.table-chair.bottom { bottom: -3px; left: 50%; width: 20px; height: 11px; margin-left: -10px; border-radius: 3px 3px 5px 5px; }
.table-chair.left   { left: -3px; top: 50%; width: 11px; height: 20px; margin-top: -10px; border-radius: 5px 3px 3px 5px; }
.table-chair.right  { right: -3px; top: 50%; width: 11px; height: 20px; margin-top: -10px; border-radius: 3px 5px 5px 3px; }
.table-top {
  position: absolute; inset: 13px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-weight: 700; font-size: 21px; color: #fff;
  box-shadow: inset 0 3px 6px rgba(0,0,0,0.18), 0 4px 10px rgba(0,0,0,0.16);
}
.table-tile.empty .table-top { background: linear-gradient(160deg, var(--green), #2e6247); }
.table-tile.occupied .table-top {
  background: linear-gradient(160deg, var(--red), #8c3128);
  animation: tablePulseRing 2.2s ease-in-out infinite;
}
@keyframes tablePulseRing {
  0%, 100% { box-shadow: inset 0 3px 6px rgba(0,0,0,0.18), 0 4px 10px rgba(0,0,0,0.16), 0 0 0 0 rgba(201,86,74,0.45); }
  50% { box-shadow: inset 0 3px 6px rgba(0,0,0,0.18), 0 4px 10px rgba(0,0,0,0.16), 0 0 0 7px rgba(201,86,74,0); }
}
.table-tile .status { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; color: var(--ink-soft); }
.table-tile.empty .status { color: var(--green); }
.table-tile.occupied .status { color: var(--red); }

/* ---------- Data table ---------- */
table.data { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.data th {
  text-align: left;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
}
table.data td { padding: 10px 10px; border-bottom: 1px solid var(--parchment-dim); vertical-align: top; }
table.data tr:hover td { background: var(--parchment-dim); }

.badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.badge.pending { background: var(--amber-bg); color: var(--marigold-dark); }
.badge.confirmed { background: #e5eef8; color: #2c5c8f; }
.badge.rejected { background: var(--red-bg); color: var(--red); }
.badge.completed { background: var(--green-bg); color: var(--green); }
.badge.served { background: var(--green-bg); color: var(--green); }
.badge.rush { background: var(--red-bg); color: var(--red); animation: rushPulse 1.8s ease-in-out infinite; }
@keyframes rushPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }
.badge-btn {
  display: inline-block; padding: 3px 9px; border-radius: 20px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em; border: none; cursor: pointer;
}
.badge-btn.unserved { background: var(--parchment-dim); color: var(--ink-soft); }
.badge-btn.unserved:hover { background: var(--marigold); color: #fff; }
.badge-btn.served { background: var(--green-bg); color: var(--green); }
.badge-btn.served:hover { background: var(--red-bg); color: var(--red); }

.adjustment-note {
  margin-top: 10px; padding: 8px 12px; border-radius: 8px;
  background: var(--amber-bg); border: 1px solid var(--marigold);
  font-size: 12.5px; color: var(--marigold-dark);
}
.adjustment-note--free { background: var(--green-bg); border-color: var(--green); color: var(--green); }
.badge.active { background: var(--green-bg); color: var(--green); }
.badge.disabled { background: var(--red-bg); color: var(--red); }

.empty-state {
  text-align: center;
  padding: 50px 20px;
  color: var(--ink-soft);
}
.empty-state .display { font-size: 20px; margin-bottom: 6px; color: var(--ink); }

/* Toast (order/waiter alerts) */
#toast-root {
  position: fixed;
  top: 96px;
  right: 18px;
  z-index: 999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 320px;
}
.toast {
  background: var(--ink);
  color: #fff;
  border-radius: 10px;
  padding: 14px 16px;
  box-shadow: var(--shadow);
  border-left: 4px solid var(--marigold);
  animation: slidein 0.25s ease;
}
.toast .t-title { font-weight: 700; font-size: 13.5px; margin-bottom: 2px; }
.toast .t-body { font-size: 12.5px; color: #d8d2bd; }
@keyframes slidein { from { transform: translateX(30px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

@media (max-width: 800px) {
  .app-shell { flex-direction: column; }
  .sidebar { width: 100%; flex-direction: row; align-items: center; overflow-x: auto; padding: 12px 16px; }
  .sidebar .brand { margin-bottom: 0; }
  .sidebar .spacer { display: none; }
  .main { padding: 20px; }
}

/* ---------- Shared logo mark ---------- */
.logo-mark {
  width: 26px; height: 26px; border-radius: 7px;
  background: linear-gradient(150deg, var(--marigold), var(--teal));
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 15px;
  flex-shrink: 0;
  overflow: hidden;
}
.logo-mark img { width: 100%; height: 100%; object-fit: contain; padding: 4px; box-sizing: border-box; }
.logo-mark.has-image { background: none; }

/* ---------- Footer ---------- */
.site-footer {
  text-align: center;
  padding: 18px 20px;
  font-size: 12px;
  color: var(--ink-soft);
  border-top: 1px solid var(--border);
  margin-top: 30px;
}
.customer-shell .site-footer { border-top: none; margin-top: 6px; }

/* ---------- Order-placed thank-you animation ---------- */
.order-placed-overlay {
  position: fixed; inset: 0; z-index: 600;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: rgba(22,38,42,0.55);
  animation: splashIn 0.25s ease;
}
.order-placed-card {
  background: #fff; border-radius: 20px; padding: 36px 30px; text-align: center; max-width: 320px;
}
.order-placed-check {
  width: 78px; height: 78px; border-radius: 50%; background: var(--green);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 18px;
  animation: checkPop 0.5s cubic-bezier(.34,1.56,.64,1) both;
}
.order-placed-check svg { width: 38px; height: 38px; }
.order-placed-card h3 { font-family: var(--font-display); font-size: 22px; margin-bottom: 6px; }
.order-placed-card p { color: var(--ink-soft); font-size: 13.5px; margin: 0; }
.fortune-unlock-icon {
  width: 78px; height: 78px; border-radius: 50%;
  background: linear-gradient(135deg, #6d4fc2, #b565f5);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; font-size: 36px;
  animation: checkPop 0.5s cubic-bezier(.34,1.56,.64,1) both, fortuneGlow 1.8s ease-in-out infinite 0.5s;
}
@keyframes fortuneGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(181,101,245,0.5); }
  50% { box-shadow: 0 0 0 14px rgba(181,101,245,0); }
}
@keyframes checkPop { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.check-draw { stroke-dasharray: 40; stroke-dashoffset: 40; animation: checkDraw 0.4s ease 0.25s forwards; }
@keyframes checkDraw { to { stroke-dashoffset: 0; } }

/* ---------- GST note ---------- */
.gst-note { font-size: 11px; color: var(--ink-soft); text-align: right; margin-top: 2px; }
.cart-bar .gst-note { color: rgba(255,255,255,0.65); text-align: left; margin-top: 1px; }

/* ---------- Order batches (partner Orders view) ---------- */
.order-batch { border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; }
.order-batch .batch-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; opacity: 0.75; }
.order-batch .batch-note { font-size: 12.5px; margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(0,0,0,0.08); }
.order-batch table.data td { padding: 4px 8px; border-bottom: none; }
.order-batch table.data { margin: 0; }

/* ---------- Offline banner ---------- */
body.youshi-offline .app-shell,
body.youshi-offline .auth-shell,
body.youshi-offline .customer-shell {
  margin-top: 38px;
}
body.youshi-offline button:not(#youshiOfflineBanner),
body.youshi-offline input,
body.youshi-offline textarea,
body.youshi-offline select {
  opacity: 0.55;
  pointer-events: none;
}
body.youshi-offline #youshiOfflineBanner,
body.youshi-offline #youshiOfflineBanner * {
  opacity: 1;
  pointer-events: auto;
}

/* ---------- Repeat-last-order popup ---------- */
.repeat-order-overlay { align-items: center; }
.repeat-order-card {
  width: 100%;
  max-width: 380px;
  background: var(--panel);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  animation: repeatOrderPop 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
@keyframes repeatOrderPop {
  from { transform: scale(0.85) translateY(10px); opacity: 0; }
  to { transform: scale(1) translateY(0); opacity: 1; }
}
.repeat-order-header {
  background: linear-gradient(135deg, var(--partner-primary), var(--partner-secondary));
  padding: 32px 24px 26px;
  text-align: center;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.repeat-order-header::before, .repeat-order-header::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
}
.repeat-order-header::before { width: 140px; height: 140px; top: -70px; right: -40px; }
.repeat-order-header::after { width: 90px; height: 90px; bottom: -50px; left: -20px; }
.repeat-order-icon {
  width: 54px; height: 54px; margin: 0 auto 12px;
  background: rgba(255,255,255,0.22);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
  position: relative;
  animation: repeatOrderSpin 0.6s ease-out 0.15s both;
}
@keyframes repeatOrderSpin {
  from { transform: rotate(-90deg) scale(0.5); opacity: 0; }
  to { transform: rotate(0) scale(1); opacity: 1; }
}
.repeat-order-header h2 {
  font-family: var(--font-display);
  font-size: 24px;
  margin: 0 0 4px;
  position: relative;
}
.repeat-order-header p {
  margin: 0;
  font-size: 14px;
  opacity: 0.92;
  position: relative;
}
.repeat-order-body { padding: 20px 22px 24px; }
.repeat-order-items {
  background: var(--parchment-dim);
  border-radius: 12px;
  padding: 6px 14px;
  max-height: 180px;
  overflow-y: auto;
}
.repeat-order-line {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  font-size: 14px;
  color: var(--ink);
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.repeat-order-line:last-child { border-bottom: none; }
.repeat-order-qty {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--partner-primary);
  min-width: 28px;
}
.repeat-order-confirm {
  margin-top: 0;
  font-size: 15px;
  padding: 13px;
  border-radius: 12px;
}
.repeat-order-dismiss {
  display: block;
  width: 100%;
  text-align: center;
  background: none;
  border: none;
  color: var(--ink-soft);
  font-size: 13px;
  padding: 12px 0 0;
  cursor: pointer;
  text-decoration: underline;
}

/* ---------- Closed for orders banner (customer menu) ---------- */
.closed-banner {
  margin: 14px 16px 0;
  background: var(--red-bg);
  color: var(--red);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 13.5px;
  line-height: 1.5;
}
.closed-banner strong { display: block; font-size: 14.5px; margin-bottom: 2px; }

/* ---------- Emergency notice marquee (partner portal) ---------- */
#youshiEmergencyNotice {
  position: relative;
  overflow: hidden;
  background: var(--red);
  color: #fff;
  padding: 9px 0;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
#youshiEmergencyNotice .marquee-track {
  display: inline-block;
  white-space: nowrap;
  animation: youshiMarquee 16s linear infinite;
}
/* Starts fully off-screen to the left, ends fully off-screen to the right —
   i.e. the notice visibly travels left → right, as requested. */
@keyframes youshiMarquee {
  from { transform: translateX(-100%); }
  to { transform: translateX(100vw); }
}
@media (prefers-reduced-motion: reduce) {
  #youshiEmergencyNotice .marquee-track { animation: none; padding-left: 16px; transform: none; }
}

/* ---------- Analytics dashboard ---------- */
.range-toggle { display: inline-flex; background: var(--parchment-dim); border-radius: 10px; padding: 3px; gap: 2px; }
.range-toggle button {
  border: none; background: none; padding: 7px 16px; border-radius: 8px; font-size: 13px; font-weight: 600;
  color: var(--ink-soft); cursor: pointer;
}
.range-toggle button.active { background: var(--ink); color: #fff; }
.analytics-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 24px; }
.analytics-stat-card {
  background: linear-gradient(150deg, #fff, var(--parchment-dim));
  border: 1px solid var(--border); border-radius: 14px; padding: 20px;
  position: relative; overflow: hidden;
}
.analytics-stat-card::after {
  content: ""; position: absolute; top: -30px; right: -30px; width: 90px; height: 90px; border-radius: 50%;
  background: radial-gradient(circle, rgba(226,151,47,0.16), transparent 70%);
}
.analytics-stat-card .label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); font-weight: 600; margin-bottom: 6px; }
.analytics-stat-card .value { font-family: var(--font-display); font-size: 30px; font-weight: 700; color: var(--ink); }
.analytics-stat-card .sub { font-size: 12px; color: var(--ink-soft); margin-top: 4px; }
.chart-card { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 22px; margin-bottom: 20px; }
.chart-card h3 { font-size: 15px; margin-bottom: 4px; }
.chart-card .chart-sub { font-size: 12.5px; color: var(--ink-soft); margin-bottom: 16px; }
.chart-canvas-wrap { position: relative; height: 260px; }
.best-seller-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; }
.best-seller-rank {
  width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: #fff; font-family: var(--font-mono);
  font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.best-seller-row:nth-child(1) .best-seller-rank { background: var(--marigold); color: #241a06; }
.best-seller-row:nth-child(2) .best-seller-rank { background: #c9ab7a; color: #241a06; }
.best-seller-row:nth-child(3) .best-seller-rank { background: #a67a4d; color: #fff; }
.best-seller-info { flex: 1; min-width: 0; }
.best-seller-name { font-size: 13.5px; font-weight: 600; margin-bottom: 4px; }
.best-seller-bar-track { height: 6px; border-radius: 4px; background: var(--parchment-dim); overflow: hidden; }
.best-seller-bar-fill { height: 100%; background: linear-gradient(90deg, var(--teal), var(--marigold)); border-radius: 4px; }
.best-seller-stats { text-align: right; flex-shrink: 0; font-family: var(--font-mono); font-size: 12.5px; }
.best-seller-stats .qty { color: var(--ink-soft); font-size: 11px; }

/* ---------- Sidebar platform logo ---------- */


/* ---------- Search & category filter (customer menu) ---------- */
.menu-search-bar { padding: 14px 16px 0; }
.menu-search-bar input {
  width: 100%; padding: 10px 14px; border-radius: 24px; border: 1px solid var(--border); background: #fff;
}
.filter-chips { display: flex; gap: 8px; overflow-x: auto; padding: 12px 16px 0; }
.filter-chip {
  flex-shrink: 0; padding: 6px 14px; border-radius: 20px; border: 1px solid var(--border);
  background: #fff; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; color: var(--ink);
}
.filter-chip.active { background: var(--partner-primary); color: #fff; border-color: var(--partner-primary); }

/* ---------- Out of stock ---------- */
.out-of-stock-badge {
  display: inline-block; background: var(--red-bg); color: var(--red); font-size: 10.5px; font-weight: 700;
  padding: 2px 7px; border-radius: 20px; margin-left: 6px; vertical-align: middle; text-transform: uppercase;
}
.menu-item.out-of-stock { opacity: 0.6; }
.menu-item.out-of-stock .qty-controls button, .menu-item.out-of-stock .customize-btn { pointer-events: none; opacity: 0.5; }

/* ---------- Menu media: blur-in loading + zoom ---------- */
.menu-media-wrap {
  position: relative; flex-shrink: 0; width: 76px; height: 76px;
  border-radius: 10px; overflow: hidden; cursor: zoom-in;
  background: var(--panel);
}
.menu-media {
  width: 100%; height: 100%; display: block;
  filter: blur(0); transform: scale(1);
  transition: filter 0.5s ease, transform 0.5s ease;
}
.menu-media.is-loading { filter: blur(16px); transform: scale(1.08); }
.menu-media-zoom-hint {
  position: absolute; right: 4px; bottom: 4px;
  width: 18px; height: 18px; border-radius: 5px;
  background: rgba(0,0,0,0.55); color: #fff;
  font-size: 11px; display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.15s ease;
  pointer-events: none;
}
.menu-media-wrap:hover .menu-media-zoom-hint,
.menu-media-wrap:active .menu-media-zoom-hint { opacity: 1; }

.media-lightbox {
  position: fixed; inset: 0; z-index: 900;
  background: rgba(10,10,10,0);
  display: flex; align-items: center; justify-content: center;
  padding: 24px; opacity: 0; pointer-events: none;
  transition: opacity 0.2s ease, background 0.2s ease;
}
.media-lightbox.is-open { opacity: 1; pointer-events: auto; background: rgba(10,10,10,0.88); }
.media-lightbox-inner { max-width: 100%; max-height: 100%; }
.media-lightbox-inner img, .media-lightbox-inner video {
  max-width: min(90vw, 640px); max-height: 82vh;
  border-radius: 14px; display: block;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  transform: scale(0.94); transition: transform 0.2s ease;
}
.media-lightbox.is-open .media-lightbox-inner img,
.media-lightbox.is-open .media-lightbox-inner video { transform: scale(1); }
.media-lightbox-close {
  position: absolute; top: 18px; right: 20px;
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,0.12); color: #fff; border: none;
  font-size: 22px; line-height: 1; cursor: pointer;
}
.media-lightbox-close:hover { background: rgba(255,255,255,0.22); }

/* ---------- Combo items ---------- */
.combo-components-list { font-size: 12px; color: var(--ink-soft); margin-top: 6px; }
.combo-components-list span { display: block; }
.customize-btn { padding: 8px 14px; border-radius: 20px; border: 1px solid var(--partner-primary); background: #fff; color: var(--partner-primary); font-weight: 700; font-size: 12.5px; cursor: pointer; white-space: nowrap; }

/* ---------- Parameter selector (item customize modal) ---------- */
.param-group { margin-bottom: 16px; }
.param-name { font-weight: 700; font-size: 13.5px; margin-bottom: 6px; }
.param-option-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 13.5px; cursor: pointer; }
.component-heading { font-family: var(--font-display); font-size: 15px; margin: 14px 0 4px; padding-top: 10px; border-top: 1px solid var(--border); }
.component-heading:first-child { border-top: none; padding-top: 0; }
.legal-links { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.legal-links button {
  background: none; border: none; padding: 4px 12px; cursor: pointer;
  font-size: 12.5px; color: var(--teal-dark); text-decoration: none;
  text-align: left;
}
.sidebar .legal-links { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 10px; }
.sidebar .legal-links button { color: #a9b3ae; }
.sidebar .legal-links button:hover { color: #fff; }

/* ---------- Subscription-blocked screen ---------- */
.blocked-shell {
  min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px;
  background: var(--parchment);
}
.blocked-card {
  max-width: 420px; text-align: center; background: var(--panel);
  border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 36px 30px;
}
.blocked-card .icon { font-size: 34px; margin-bottom: 10px; }

/* ---------- Color swatch input (branding page) ---------- */
.swatch-field { display: flex; align-items: center; gap: 12px; }
.swatch-field input[type=color] { width: 46px; height: 36px; padding: 2px; border: 1px solid var(--border); border-radius: 6px; cursor: pointer; }
.swatch-field input[type=text] { max-width: 120px; }

/* ---------- Right-side notification panel (partner portal) ---------- */
.app-shell.with-notif-panel { display: flex; }
.app-shell.with-notif-panel .main { flex: 1; min-width: 0; }
.notif-panel {
  width: 300px;
  flex-shrink: 0;
  background: var(--panel);
  border-left: 1px solid var(--border);
  padding: 20px 16px;
  min-height: 100vh;
}
.notif-panel h3 { font-size: 15px; margin-bottom: 4px; }
.notif-panel .notif-sub { font-size: 12px; color: var(--ink-soft); margin-bottom: 14px; }

.stock-alert-row {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 9px 10px; border-radius: 9px; margin-bottom: 7px;
  background: var(--red-bg);
}
.stock-alert-row.low { background: var(--amber-bg); }
.stock-alert-row.predicted { background: var(--panel); border: 1px dashed var(--border); }
.stock-alert-row strong { font-size: 13px; }
.notif-tabs { display: flex; gap: 6px; margin-bottom: 14px; }
.notif-tab {
  flex: 1; text-align: center; padding: 7px 0; border-radius: 8px; border: 1px solid var(--border);
  background: transparent; cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--ink-soft);
}
.notif-tab.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.notif-card {
  border: 1px solid var(--border);
  border-left: 3px solid var(--marigold);
  border-radius: 10px;
  padding: 11px 12px;
  margin-bottom: 10px;
  background: var(--parchment);
  animation: slidein 0.25s ease;
}
.notif-card.resolved { border-left-color: var(--green); opacity: 0.65; }
.notif-card .n-top { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; margin-bottom: 3px; }
.notif-card .n-table { font-weight: 700; font-size: 13px; }
.notif-card .n-time { font-size: 10.5px; color: var(--ink-soft); font-family: var(--font-mono); white-space: nowrap; }
.notif-card .n-msg { font-size: 12.5px; color: var(--ink); line-height: 1.4; }
.notif-card .n-phone { font-size: 11px; color: var(--marigold-dark); font-family: var(--font-mono); margin-top: 3px; }
.notif-card .n-actions { margin-top: 8px; display: flex; gap: 6px; }
.notif-card .n-actions button {
  flex: 1; font-size: 11.5px; padding: 5px 0; border-radius: 6px; border: 1px solid var(--border);
  background: #fff; cursor: pointer; font-weight: 600;
}
.notif-card .n-actions button:hover { background: var(--parchment-dim); }
.notif-empty { text-align: center; color: var(--ink-soft); font-size: 12.5px; padding: 30px 10px; }

/* ---------- Strike price / discount badge ---------- */
.strike-price { text-decoration: line-through; color: var(--ink-soft); font-size: 12.5px; margin-right: 6px; }
.discount-badge {
  display: inline-block; background: var(--marigold); color: #241a06; font-size: 10.5px; font-weight: 700;
  padding: 2px 7px; border-radius: 20px; margin-left: 6px; vertical-align: middle;
}

/* ---------- Category grouping (customer menu) ---------- */
.category-heading { font-family: var(--font-display); font-size: 19px; margin: 22px 16px 4px; color: var(--ink); }
.category-heading:first-of-type { margin-top: 6px; }
.subcategory-heading {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--partner-primary);
  margin: 14px 16px 2px; font-weight: 700;
}

/* ---------- Category manager (partner menu page) ---------- */
.category-manager { display: flex; flex-direction: column; gap: 10px; }
.avail-day-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 500; padding: 4px 8px; border: 1px solid var(--border); border-radius: 16px; cursor: pointer; }
.category-row { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; background: var(--panel); transition: opacity 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; position: relative; }
.category-row .cat-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.category-row .cat-name { font-weight: 700; font-size: 14px; flex: 1; }
.cat-drag-handle { cursor: grab; color: var(--ink-soft); font-size: 15px; letter-spacing: -1px; user-select: none; padding: 2px 4px; }
.cat-drag-handle:active { cursor: grabbing; }
.category-row.is-dragging { opacity: 0.4; }
.category-row.drag-over-top { box-shadow: 0 -3px 0 0 var(--marigold); }
.category-row.drag-over-bottom { box-shadow: 0 3px 0 0 var(--marigold); }
.subcat-chip {
  display: inline-flex; align-items: center; gap: 6px; background: var(--parchment-dim);
  border-radius: 20px; padding: 3px 10px; font-size: 12px; margin: 6px 6px 0 0;
}
.subcat-chip button { border: none; background: none; cursor: pointer; color: var(--red); font-weight: 700; padding: 0; }

@media (max-width: 1000px) {
  .app-shell.with-notif-panel { flex-direction: column; }
  .notif-panel { width: 100%; border-left: none; border-top: 1px solid var(--border); min-height: 0; }
}

/* ---------- Customer-facing menu ---------- */
.customer-shell {
  max-width: 520px; margin: 0 auto; padding-bottom: 100px; min-height: 100vh; background: var(--parchment);
}
.customer-header {
  background: linear-gradient(135deg, var(--partner-primary), color-mix(in srgb, var(--partner-primary) 60%, #000 15%));
  color: #fff;
  padding: 22px 20px 20px;
  border-radius: 0 0 18px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.customer-header .header-logo { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; background: #fff; flex-shrink: 0; }
.customer-header .r-name { font-family: var(--font-display); font-size: 24px; }
.customer-header .t-no { font-family: var(--font-mono); color: var(--partner-secondary); font-size: 13px; margin-top: 2px; }
.quick-actions { display: flex; gap: 8px; padding: 16px 20px 0; flex-wrap: wrap; }
.quick-actions .btn { flex: 1; white-space: nowrap; border-color: var(--partner-primary); color: var(--partner-primary); }
.btn-accent { background: var(--partner-secondary); color: #241a06; border-color: transparent; }

/* Entry gate: skip option is deliberately large and plain — a real,
   equal-weight alternative to verifying, not a hidden afterthought. */
.entry-gate-skip {
  display: block; width: 100%; text-align: center;
  background: none; border: none; padding: 14px 0;
  font-size: 15px; font-weight: 600; color: var(--partner-primary);
  cursor: pointer;
}
.entry-gate-skip:hover { text-decoration: underline; }

/* Menu / Orders page tabs */
.page-tabs { display: flex; gap: 6px; padding: 14px 20px 0; }
.page-tab {
  flex: 1; padding: 10px 0; text-align: center; border-radius: 10px;
  background: var(--panel); border: 1px solid var(--border); color: var(--ink-soft);
  font-weight: 600; font-size: 14px; cursor: pointer;
}
.page-tab.active { background: var(--partner-primary); color: #fff; border-color: transparent; }

/* Non-intrusive reorder hint — a single slim line, never a popup */
.reorder-hint {
  display: flex; align-items: center; gap: 10px;
  margin: 12px 16px 0; padding: 10px 14px; border-radius: 12px;
  background: var(--amber-bg); border: 1px solid var(--marigold);
  font-size: 12.5px; color: var(--marigold-dark);
}
.reorder-hint span { flex: 1; }
.reorder-hint button {
  background: none; border: none; cursor: pointer; font-size: 12.5px; font-weight: 700;
  color: var(--marigold-dark); padding: 2px 4px;
}
.reorder-hint button:last-child { font-weight: 400; opacity: 0.7; }
.btn-accent:hover { filter: brightness(0.92); }

/* ---------- Welcome splash ---------- */
.splash-shell {
  position: fixed; inset: 0; z-index: 500;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: #fff; text-align: center; padding: 24px;
  cursor: pointer;
  background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--partner-primary) 85%, #000 0%), color-mix(in srgb, var(--partner-primary) 55%, #000 35%));
  animation: splashIn 0.5s ease;
}
.splash-shell .splash-logo {
  width: 84px; height: 84px; border-radius: 20px; object-fit: cover;
  background: #fff; margin-bottom: 22px;
  animation: splashLogoPop 0.7s cubic-bezier(.34,1.56,.64,1) both;
}
.splash-shell .splash-eyebrow {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  color: color-mix(in srgb, var(--partner-secondary) 80%, #fff 20%);
  opacity: 0; animation: splashFade 0.6s ease 0.15s forwards;
}
.splash-shell .splash-title {
  font-family: var(--font-display); font-size: 34px; font-weight: 700; margin: 8px 0 4px;
  opacity: 0; animation: splashFade 0.7s ease 0.35s forwards;
}
.splash-shell .splash-sub {
  font-size: 14px; color: rgba(255,255,255,0.75); max-width: 320px;
  opacity: 0; animation: splashFade 0.7s ease 0.55s forwards;
}
.splash-shell .splash-cta {
  margin-top: 26px; opacity: 0; animation: splashFade 0.6s ease 0.9s forwards;
}
.splash-shell .splash-ring {
  position: absolute; border: 1px solid rgba(255,255,255,0.18); border-radius: 50%;
  animation: splashRing 2.6s ease-out infinite;
}
@keyframes splashIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes splashLogoPop { from { transform: scale(0.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes splashFade { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes splashRing {
  from { width: 90px; height: 90px; opacity: 0.5; }
  to { width: 340px; height: 340px; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .splash-shell, .splash-shell * { animation: none !important; opacity: 1 !important; }
}
.menu-list { padding: 10px 16px 0; }
.menu-item {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 12px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.menu-item .name { font-weight: 700; font-size: 15px; }
.menu-item .gdesc { font-size: 12.5px; color: var(--marigold-dark); margin-top: 2px; }
.menu-item .desc { font-size: 12.5px; color: var(--ink-soft); margin-top: 4px; }
.menu-item .meta { font-size: 11px; color: var(--ink-soft); margin-top: 6px; display: flex; gap: 8px; flex-wrap: wrap; }
.menu-item .price { font-family: var(--font-mono); font-weight: 700; margin-top: 6px; }
.veg-dot { width: 10px; height: 10px; border: 2px solid var(--green); display: inline-block; border-radius: 2px; position: relative; top: 1px; }
.veg-dot::after { content:""; display:block; width:4px; height:4px; background:var(--green); border-radius:50%; margin:1px auto; }
.veg-dot.nonveg { border-color: var(--red); }
.veg-dot.nonveg::after { background: var(--red); }
.qty-box { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.qty-controls { display: flex; align-items: center; gap: 6px; }
.qty-controls button {
  width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--border);
  background: #fff; font-weight: 700; cursor: pointer; font-size: 15px; line-height: 1;
}
.qty-controls .n { min-width: 18px; text-align: center; font-weight: 700; }

.cart-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--partner-primary, var(--ink));
  color: #fff;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.2);
}
.cart-bar .info { font-size: 13px; }
.cart-bar .amt { font-family: var(--font-mono); font-weight: 700; font-size: 16px; }

.modal-overlay {
  position: fixed; inset: 0; background: rgba(22,38,42,0.55);
  display: flex; align-items: flex-end; justify-content: center; z-index: 200;
}
.checkout-sheet .field { margin-bottom: 12px; }
.checkout-dev-note {
  background: var(--amber-bg); border: 1px solid var(--marigold);
  border-radius: 10px; padding: 10px 12px; font-size: 12.5px;
  color: var(--marigold-dark); margin-bottom: 6px;
}
.checkout-resend {
  display: block; width: 100%; text-align: center; background: none; border: none;
  color: var(--ink-soft); font-size: 12.5px; padding: 12px 0 0; cursor: pointer;
}
.checkout-resend:disabled { cursor: default; opacity: 0.6; }
.modal-sheet {
  background: var(--panel);
  width: 100%; max-width: 520px;
  border-radius: 18px 18px 0 0;
  padding: 22px 20px 26px;
  max-height: 85vh;
  overflow-y: auto;
}
@media (min-width: 560px) {
  .modal-overlay { align-items: center; }
  .modal-sheet { border-radius: 16px; }
}

/* ===================== Menu management: browse + edit ===================== */
.mm-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 18px; align-items: start; }
@media (max-width: 1100px) { .mm-layout { grid-template-columns: 1fr; } }

.mm-browse { background: var(--panel, #fff); border: 1px solid var(--line, rgba(17,24,39,.08)); border-radius: 18px; padding: 14px 16px 18px; position: sticky; top: 76px; }
.mm-browse-head { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; }
.mm-search { flex: 1; display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 12px; background: var(--parchment-dim, #f3f1ea); border: 1px solid transparent; transition: border-color .15s ease; }
.mm-search:focus-within { border-color: var(--marigold, #e2972f); }
.mm-search input { flex: 1; border: 0; background: none; outline: none; font-size: 14px; color: inherit; }
.mm-view-toggle { display: flex; gap: 2px; background: var(--parchment-dim, #f3f1ea); border-radius: 10px; padding: 3px; }
.mm-vt { border: 0; background: none; padding: 6px 10px; border-radius: 8px; cursor: pointer; font-size: 14px; color: var(--ink-soft, #6b7280); }
.mm-vt.on { background: #fff; color: var(--ink, #111827); box-shadow: 0 1px 3px rgba(0,0,0,.08); }

.mm-cats { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 8px; scrollbar-width: thin; }
.mm-cat { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--line, rgba(17,24,39,.1)); background: transparent; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink-soft, #6b7280); white-space: nowrap; transition: all .15s ease; }
.mm-cat img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.mm-cat:hover { border-color: var(--marigold, #e2972f); color: var(--ink, #111827); }
.mm-cat.on { background: var(--ink, #111827); border-color: var(--ink, #111827); color: #fff; }
.mm-cat .n { opacity: .6; font-weight: 500; }

.mm-filters { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.mm-chip { padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line, rgba(17,24,39,.1)); background: transparent; font-size: 12px; font-weight: 600; color: var(--ink-soft, #6b7280); cursor: pointer; }
.mm-chip.on { background: var(--marigold, #e2972f); border-color: var(--marigold, #e2972f); color: #fff; }
.mm-count { margin-left: auto; font-size: 12px; color: var(--ink-soft, #6b7280); }

.mm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; max-height: calc(100vh - 260px); overflow-y: auto; padding: 2px; }
.mm-grid.list { grid-template-columns: 1fr; }
.mm-item { position: relative; border: 1px solid var(--line, rgba(17,24,39,.08)); border-radius: 14px; overflow: hidden; background: var(--panel, #fff); cursor: pointer; transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease; }
.mm-item:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(17,24,39,.10); border-color: var(--marigold, #e2972f); }
.mm-item .ph { height: 96px; background: linear-gradient(135deg, #f1ece1, #e3d9c6); background-size: cover; background-position: center; }
.mm-item .bd { padding: 9px 11px 11px; }
.mm-item .nm { font-weight: 700; font-size: 13.5px; line-height: 1.25; display: flex; align-items: center; gap: 5px; }
.mm-item .meta { font-size: 11.5px; color: var(--ink-soft, #6b7280); margin-top: 2px; }
.mm-item .pr { font-weight: 700; font-size: 13.5px; margin-top: 6px; }
.mm-item .pr .strike { text-decoration: line-through; opacity: .5; font-weight: 500; margin-right: 5px; }
.mm-dot { width: 11px; height: 11px; border-radius: 2px; border: 1.5px solid #2e9e4f; display: inline-grid; place-items: center; flex: none; }
.mm-dot::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #2e9e4f; }
.mm-dot.nv { border-color: #c0392b; } .mm-dot.nv::after { background: #c0392b; }
.mm-fav { position: absolute; top: 7px; right: 7px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgba(255,255,255,.92); color: #c9c4b8; font-size: 14px; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.14); z-index: 2; }
.mm-fav.on { color: #e2972f; }
.mm-flags { position: absolute; top: 7px; left: 7px; display: flex; gap: 4px; z-index: 2; }
.mm-flag { font-size: 9.5px; font-weight: 800; letter-spacing: .04em; padding: 3px 6px; border-radius: 6px; background: rgba(17,24,39,.78); color: #fff; text-transform: uppercase; }
.mm-flag.oos { background: #c0392b; } .mm-flag.hidden { background: #6b7280; } .mm-flag.combo { background: #6850D8; }
.mm-item.dim .ph, .mm-item.dim .bd { opacity: .5; }
.mm-row-actions { display: flex; gap: 5px; padding: 0 11px 11px; }
.mm-row-actions button { flex: 1; font-size: 11px; font-weight: 600; padding: 5px 0; border-radius: 8px; border: 1px solid var(--line, rgba(17,24,39,.12)); background: transparent; cursor: pointer; color: var(--ink-soft, #6b7280); }
.mm-row-actions button:hover { border-color: var(--ink, #111827); color: var(--ink, #111827); }

.mm-side { display: flex; flex-direction: column; gap: 14px; }
.mm-actions { display: flex; gap: 8px; }
.mm-actions .btn { flex: 1; }
.mm-card { background: var(--panel, #fff); border: 1px solid var(--line, rgba(17,24,39,.08)); border-radius: 16px; padding: 16px; }
.mm-card h3 { font-size: 14px; margin: 0 0 6px; }
.mm-empty { grid-column: 1/-1; text-align: center; padding: 40px 20px; color: var(--ink-soft, #6b7280); font-size: 13.5px; }

/* Menu management in the portal's dark theme — the light palette above is
   for the parchment pages; here the surfaces and text follow the portal. */
body.dg-theme .mm-browse, body.dg-theme .mm-card { background: var(--dg-panel, rgba(255,255,255,.04)); border-color: var(--dg-border, rgba(255,255,255,.1)); color: var(--dg-text, #eef2ff); }
body.dg-theme .mm-card h3, body.dg-theme .mm-browse { color: var(--dg-text, #eef2ff); }
body.dg-theme .mm-search { background: rgba(255,255,255,.06); }
body.dg-theme .mm-search input { color: #eef2ff; }
body.dg-theme .mm-search input::placeholder { color: rgba(238,242,255,.45); }
body.dg-theme .mm-view-toggle { background: rgba(255,255,255,.06); }
body.dg-theme .mm-vt { color: rgba(238,242,255,.6); }
body.dg-theme .mm-vt.on { background: rgba(255,255,255,.14); color: #fff; box-shadow: none; }
body.dg-theme .mm-cat { border-color: rgba(255,255,255,.14); color: rgba(238,242,255,.72); }
body.dg-theme .mm-cat:hover { border-color: #8b78ff; color: #fff; }
body.dg-theme .mm-cat.on { background: linear-gradient(160deg,#8b78ff,#6850D8); border-color: transparent; color: #fff; }
body.dg-theme .mm-chip { border-color: rgba(255,255,255,.14); color: rgba(238,242,255,.72); }
body.dg-theme .mm-chip.on { background: linear-gradient(160deg,#8b78ff,#6850D8); border-color: transparent; color: #fff; }
body.dg-theme .mm-count { color: rgba(238,242,255,.55); }
body.dg-theme .mm-item { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); }
body.dg-theme .mm-item:hover { border-color: #8b78ff; box-shadow: 0 8px 22px rgba(0,0,0,.35); }
body.dg-theme .mm-item .ph { background: linear-gradient(135deg, #2a3150, #1b2138); }
body.dg-theme .mm-item .nm { color: #eef2ff; }
body.dg-theme .mm-item .meta { color: rgba(238,242,255,.58); }
body.dg-theme .mm-item .pr { color: #eef2ff; }
body.dg-theme .mm-fav { background: rgba(10,14,28,.75); color: rgba(238,242,255,.5); }
body.dg-theme .mm-fav.on { color: #fbbf24; }
body.dg-theme .mm-row-actions button { border-color: rgba(255,255,255,.14); color: rgba(238,242,255,.7); }
body.dg-theme .mm-row-actions button:hover { border-color: #8b78ff; color: #fff; }
body.dg-theme .mm-empty { color: rgba(238,242,255,.55); }
/* The settings cards carry their own inner markup from the old page. */
body.dg-theme .mm-card .hint, body.dg-theme .mm-card p { color: rgba(238,242,255,.62); }
body.dg-theme .mm-card input[type="text"], body.dg-theme .mm-card select { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); color: #eef2ff; }
body.dg-theme .mm-card label { color: rgba(238,242,255,.85); }



/* ------------------------------------------------ Desktop focus hygiene
   Chromium on Windows can fail to hit-test a text field until the
   input's layer is repainted (the stuck-caret bug). Giving fields their
   own compositor layer in the desktop shell makes that repaint happen on
   every focus change. Scoped to .is-desktop so the web build, which does
   not suffer from it, does not pay for the extra layers. */
html.is-desktop input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html.is-desktop textarea,
html.is-desktop select {
  will-change: transform;
  transform: translateZ(0);
}

/* ---- Limit extension requests (admin) ---- */
.nav-badge { display:inline-flex; align-items:center; justify-content:center; min-width:19px; height:19px; padding:0 6px; margin-left:8px;
  border-radius:999px; background:var(--red); color:#fff; font-size:11px; font-weight:800; vertical-align:middle; }
.lx-card { border-radius:14px; border:1px solid var(--line,#e5e7eb); background:var(--card,#fff); padding:16px 18px; margin-bottom:12px; }
.lx-card.is-pending { border-left:4px solid var(--marigold,#e5a11a); }
.lx-head { display:flex; justify-content:space-between; align-items:flex-start; gap:14px; flex-wrap:wrap; margin-bottom:10px; }
.lx-who { font-size:15.5px; font-weight:800; }
.lx-meta { font-size:12px; color:var(--ink-soft,#667085); margin-top:3px; }
.lx-reason { font-size:14px; line-height:1.65; padding:12px 14px; border-radius:10px; background:var(--parchment-dim,#f6f7fb); margin-bottom:10px; white-space:pre-wrap; }
.lx-facts { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.lx-fact { font-size:11.5px; padding:4px 10px; border-radius:999px; background:var(--parchment-dim,#f1f2f7); color:var(--ink-soft,#667085); }
.lx-fact b { color:var(--ink,#111827); }
.lx-actions { display:flex; gap:8px; flex-wrap:wrap; }
.lx-state { font-size:12px; font-weight:700; padding:5px 11px; border-radius:999px; white-space:nowrap; }
.lx-state.pending { background:rgba(229,161,26,.16); color:#b57a00; }
.lx-state.approved { background:rgba(32,166,106,.14); color:#20a66a; }
.lx-state.rejected { background:rgba(217,83,79,.14); color:#d9534f; }