@import url('https://fonts.googleapis.com/css2?family=Public+Sans:wght@400;500;600;700;800&family=Playfair+Display:wght@600;700&display=swap');
/* ============================================================
   Youshi Partner Portal — Dark Glass theme
   Deep navy backdrop, glassmorphic cards, glowing blue→purple
   gradient accents. Scoped to the redesigned partner pages only
   (loaded alongside, not instead of, the shared styles.css) so
   customer/kitchen surfaces are untouched.
   ============================================================ */

:root {
  --dg-radius: 20px;
  --dg-radius-sm: 13px;
}

body.dg-theme {
  color-scheme: dark;
  --dg-bg-0: #05060d;
  --dg-bg-1: #0a0e1c;
  --dg-bg-2: #0d1226;
  --dg-glass: rgba(20, 26, 48, 0.55);
  --dg-glass-strong: rgba(20, 26, 48, 0.78);
  --dg-border: rgba(255, 255, 255, 0.08);
  --dg-border-glow: rgba(120, 150, 255, 0.35);
  --dg-text: #eef1fb;
  --dg-text-soft: #99a3c4;
  --dg-text-faint: #5c6690;
  --dg-blue: #4d8dff;
  --dg-blue-2: #7db2ff;
  --dg-purple: #b565f5;
  --dg-purple-2: #e14bd8;
  --dg-gradient: linear-gradient(135deg, var(--dg-blue) 0%, var(--dg-purple) 100%);
  --dg-gradient-soft: linear-gradient(135deg, rgba(77,141,255,0.18) 0%, rgba(181,101,245,0.18) 100%);
  --dg-green: #34d399;
  --dg-red: #f65c6f;
  --dg-amber: #ffb454;
  --dg-shadow-glow: 0 0 0 1px var(--dg-border), 0 8px 32px rgba(0,0,0,0.45), 0 0 40px -20px rgba(120,150,255,0.25);
  /* "surface tint" family — subtle hover/highlight backgrounds. Dark theme
     lightens things slightly (white at low opacity); the light theme
     (below) instead darkens things slightly, so the same rules using
     these variables work correctly in both directions. */
  --dg-tint-1: rgba(255,255,255,0.045);
  --dg-tint-2: rgba(255,255,255,0.07);
  --dg-tint-3: rgba(255,255,255,0.11);
  --dg-tint-4: rgba(255,255,255,0.2);

  background:
    radial-gradient(ellipse 900px 500px at 15% -5%, rgba(77,141,255,0.14), transparent 60%),
    radial-gradient(ellipse 800px 600px at 90% 10%, rgba(181,101,245,0.12), transparent 60%),
    radial-gradient(ellipse 1000px 700px at 50% 100%, rgba(77,141,255,0.08), transparent 60%),
    var(--dg-bg-0);
  color: var(--dg-text);
  font-family: 'Public Sans', -apple-system, sans-serif;
  min-height: 100vh;
}

/* ============================================================
   Light Glass theme — soft pastel gradient backdrop, white
   glassmorphic cards, the same structural classes as the dark
   theme above (only the variable VALUES differ), so every rule
   already written against var(--dg-*) adapts automatically.
   ============================================================ */
body.lg-theme {
  color-scheme: light;
  --dg-bg-0: #eef1fb;
  --dg-glass: rgba(255, 255, 255, 0.6);
  --dg-glass-strong: rgba(255, 255, 255, 0.8);
  --dg-border: rgba(30, 35, 60, 0.09);
  --dg-border-glow: rgba(99, 102, 241, 0.28);
  --dg-text: #1e2233;
  --dg-text-soft: #5b6478;
  --dg-text-faint: #8991a8;
  --dg-blue: #6366f1;
  --dg-blue-2: #4f46e5;
  --dg-purple: #a855f7;
  --dg-purple-2: #d946ef;
  --dg-gradient: linear-gradient(135deg, var(--dg-blue) 0%, var(--dg-purple) 100%);
  --dg-gradient-soft: linear-gradient(135deg, rgba(99,102,241,0.14) 0%, rgba(168,85,247,0.14) 100%);
  --dg-green: #10b981;
  --dg-red: #ef4444;
  --dg-amber: #d97706;
  --dg-shadow-glow: 0 0 0 1px var(--dg-border), 0 8px 28px rgba(30,41,59,0.1), 0 0 32px -18px rgba(99,102,241,0.25);
  /* Inverted relative to the dark theme — subtle DARK tints for hover
     states on a light background, same variable names, opposite direction. */
  --dg-tint-1: rgba(15,23,42,0.035);
  --dg-tint-2: rgba(15,23,42,0.06);
  --dg-tint-3: rgba(15,23,42,0.1);
  --dg-tint-4: rgba(15,23,42,0.16);

  background:
    radial-gradient(ellipse 900px 600px at 10% 0%, rgba(147,197,253,0.55), transparent 60%),
    radial-gradient(ellipse 800px 600px at 95% 10%, rgba(216,180,254,0.5), transparent 60%),
    radial-gradient(ellipse 1000px 700px at 50% 100%, rgba(167,243,208,0.4), transparent 60%),
    var(--dg-bg-0);
  color: var(--dg-text);
  font-family: 'Public Sans', -apple-system, sans-serif;
  min-height: 100vh;
}

.dg-shell { display: flex; flex-direction: column; min-height: 100vh; }
.dg-body { display: flex; gap: 20px; align-items: flex-start; padding: 20px 28px 60px; flex-wrap: wrap; }
.dg-side-panel { width: 620px; flex-shrink: 0; display: flex; flex-direction: row; align-items: flex-start; gap: 16px; position: sticky; top: 84px; }
.dg-side-panel > .dg-card { flex: 1; min-width: 0; }
@media (max-width: 1300px) { .dg-side-panel { width: 380px; flex-direction: column; } }
@media (max-width: 1100px) { .dg-side-panel { width: 100%; position: static; flex-direction: column; } }

/* ---------------- Top nav (was a left sidebar) ---------------- */
.dg-sidebar {
  width: 100%; flex-shrink: 0;
  display: flex; align-items: center; gap: 6px; padding: 12px 22px;
  background: var(--dg-glass); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--dg-border);
  position: sticky; top: 0; z-index: 40;
  transition: padding 0.25s ease;
  flex-wrap: wrap;
}
.dg-sidebar.is-collapsed { padding: 8px 22px; }
.dg-sidebar.is-collapsed .dg-nav-label,
.dg-sidebar.is-collapsed .dg-brand-text,
.dg-sidebar.is-collapsed .dg-sidebar-foot-text { display: none; }
.dg-sidebar.is-collapsed .dg-nav-item { padding: 8px; }
.dg-sidebar.is-collapsed .dg-brand-mark { width: 36px; height: 36px; }

.dg-brand { display: flex; align-items: center; gap: 10px; padding-right: 18px; flex-shrink: 0; }
.dg-brand-mark {
  width: 56px; height: 56px; border-radius: 14px; flex-shrink: 0; transition: width 0.2s ease, height 0.2s ease;
  background: var(--dg-gradient); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 24px -4px rgba(120,150,255,0.6);
}
.dg-brand-text { font-family: 'Playfair Display', serif; font-size: 23px; font-weight: 700; color: var(--dg-text); white-space: nowrap; }
.dg-brand-icon {
  width: 100%; height: 100%;
  object-fit: cover; /* the source image is a 1.5:1 rectangle inside a square badge — contain left visible gaps top/bottom no matter how little padding was used, so this fills the badge completely with a small, centered, symmetric crop instead */
  display: block;
}

.dg-nav { display: flex; flex-direction: row; align-items: center; gap: 4px; flex-wrap: wrap; flex: 1; min-width: 0; }
.dg-nav-item {
  display: flex; align-items: center; gap: 8px; padding: 9px 13px; border-radius: var(--dg-radius-sm);
  color: var(--dg-text-soft); font-size: 13px; font-weight: 600; text-decoration: none;
  cursor: pointer; border: 1px solid transparent; background: none; text-align: left;
  transition: background 0.15s ease, color 0.15s ease, padding 0.2s ease;
  white-space: nowrap; overflow: hidden;
}
.dg-nav-item:hover { background: var(--dg-tint-1); color: var(--dg-text); }
.dg-nav-item.active {
  background: var(--dg-gradient); color: #fff;
  box-shadow: 0 4px 20px -6px rgba(120,150,255,0.55);
}
.dg-nav-icon { width: 18px; height: 18px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 15px; }
.dg-nav-divider { display: none; } /* not meaningful in a horizontal bar */
.dg-sidebar-foot { display: none; } /* wrapper no longer used — collapse btn + logout sit directly in the nav row */
body.dg-theme #youshiLegalLinks .legal-links { flex-direction: row; justify-content: center; flex-wrap: wrap; gap: 4px; } /* wrapper no longer used — collapse btn + logout sit directly in the nav row */
body.lg-theme #youshiLegalLinks .legal-links { flex-direction: row; justify-content: center; flex-wrap: wrap; gap: 4px; }
body.dg-theme #youshiLegalLinks .legal-links button { color: var(--dg-text-faint); font-size: 11px; background: none; border: none; cursor: pointer; padding: 4px 10px; }
body.lg-theme #youshiLegalLinks .legal-links button { color: var(--dg-text-faint); font-size: 11px; background: none; border: none; cursor: pointer; padding: 4px 10px; }
body.dg-theme #youshiLegalLinks .legal-links button:hover { color: var(--dg-text-soft); }
body.lg-theme #youshiLegalLinks .legal-links button:hover { color: var(--dg-text-soft); }
.dg-logout { color: var(--dg-red) !important; }

/* The collapse button now sits at the bar's trailing edge instead of
   floating off a vertical edge — same underlying is-collapsed mechanic
   from common.js, just repositioned for a horizontal bar. */
.dg-sidebar .sidebar-collapse-btn { position: static; margin-left: auto; flex-shrink: 0; }

/* ---------------- Main ---------------- */
.dg-main { flex: 1; min-width: 0; }

.dg-topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-bottom: 22px; flex-wrap: wrap;
}
.dg-greeting h1 { font-family: 'Playfair Display', serif; font-size: 25px; margin: 0; color: var(--dg-text); }
.dg-greeting p { margin: 2px 0 0; font-size: 13px; color: var(--dg-text-soft); }
.dg-topbar-right { display: flex; align-items: center; gap: 12px; }
.dg-search {
  display: flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px;
  background: var(--dg-glass); border: 1px solid var(--dg-border); color: var(--dg-text-faint); font-size: 13px;
  min-width: 220px;
}
.dg-icon-btn {
  width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--dg-glass); border: 1px solid var(--dg-border); color: var(--dg-text-soft); cursor: pointer;
  position: relative; flex-shrink: 0;
}
.dg-icon-btn .dg-dot { position: absolute; top: 7px; right: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--dg-purple-2); box-shadow: 0 0 8px 1px var(--dg-purple-2); }
.dg-user { display: flex; align-items: center; gap: 10px; }
.dg-user-avatar {
  width: 38px; height: 38px; border-radius: 50%; background: var(--dg-gradient);
  display: flex; align-items: center; justify-content: center; font-weight: 700; color: #fff; font-size: 14px;
  box-shadow: 0 0 16px -4px rgba(120,150,255,0.6);
}
.dg-user-name { font-size: 13px; font-weight: 700; color: var(--dg-text); line-height: 1.3; }
.dg-user-role { font-size: 11px; color: var(--dg-text-faint); }

/* ---------------- Cards & glass panels ---------------- */
.dg-card {
  background: var(--dg-glass); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--dg-border); border-radius: var(--dg-radius);
  box-shadow: var(--dg-shadow-glow);
  padding: 20px;
}
.dg-card-title { font-size: 15px; font-weight: 700; color: var(--dg-text); display: flex; align-items: center; gap: 8px; }
.dg-card-sub { font-size: 12px; color: var(--dg-text-faint); margin: 2px 0 0; }

.dg-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 18px; }
.dg-stat-card { padding: 16px 18px; }
.dg-stat-label { font-size: 11px; letter-spacing: 0.06em; color: var(--dg-text-faint); text-transform: uppercase; font-weight: 700; }
.dg-stat-value {
  font-size: 28px; font-weight: 800; color: #fff; margin: 6px 0 2px; font-family: 'Public Sans', sans-serif;
  background: var(--dg-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  text-shadow: 0 0 30px rgba(120,150,255,0.25);
}
.dg-stat-trend { font-size: 11px; color: var(--dg-green); font-weight: 600; }
.dg-stat-trend.down { color: var(--dg-red); }

.dg-row { display: flex; gap: 16px; align-items: stretch; flex-wrap: wrap; margin-bottom: 18px; }
.dg-row > * { flex: 1; min-width: 260px; }

/* Alerts / notifications list rows, used in the moved-to-top panels */
.dg-alert-row { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--dg-border); }
.dg-alert-row:last-child { border-bottom: none; }
.dg-alert-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; }
.dg-alert-dot.red { background: var(--dg-red); box-shadow: 0 0 8px 1px var(--dg-red); }
.dg-alert-dot.blue { background: var(--dg-blue-2); box-shadow: 0 0 8px 1px var(--dg-blue-2); }
.dg-alert-dot.amber { background: var(--dg-amber); box-shadow: 0 0 8px 1px var(--dg-amber); }
.dg-alert-title { font-size: 12.5px; font-weight: 700; color: var(--dg-text); }
.dg-alert-sub { font-size: 11px; color: var(--dg-text-faint); margin-top: 1px; }
.dg-alert-time { font-size: 10.5px; color: var(--dg-text-faint); margin-left: auto; flex-shrink: 0; white-space: nowrap; }

/* ---------------- Tables ("Live Table Map") ---------------- */
.dg-table-map { position: relative; min-height: 160px; }
.dg-table-grid { display: block; }
.dg-table-tile { display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; position: relative; }
.dg-area-heading {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--dg-text-faint); margin: 18px 0 10px; padding-top: 14px; border-top: 1px solid var(--dg-border);
}
.dg-area-heading:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.dg-table-group { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 20px 16px; }
.dg-table-setting { position: relative; width: 88px; height: 88px; transition: transform 0.15s ease; }
.dg-table-tile:hover .dg-table-setting { transform: translateY(-3px); }
.dg-table-chair { position: absolute; background: var(--dg-tint-3); border-radius: 5px; }
.dg-table-chair.top { top: -3px; left: 50%; width: 20px; height: 11px; margin-left: -10px; border-radius: 5px 5px 3px 3px; }
.dg-table-chair.bottom { bottom: -3px; left: 50%; width: 20px; height: 11px; margin-left: -10px; border-radius: 3px 3px 5px 5px; }
.dg-table-chair.left { left: -3px; top: 50%; width: 11px; height: 20px; margin-top: -10px; border-radius: 5px 3px 3px 5px; }
.dg-table-chair.right { right: -3px; top: 50%; width: 11px; height: 20px; margin-top: -10px; border-radius: 3px 5px 5px 3px; }
.dg-table-top {
  position: absolute; inset: 13px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-weight: 300; font-size: 15px; color: var(--dg-text); background: var(--dg-tint-2);
  border: 1.5px solid rgba(255,255,255,0.15);
  text-align: center; line-height: 1; padding: 4px; overflow: hidden;
}
.dg-table-tile.empty .dg-table-top { border-color: rgba(52,211,153,0.5); box-shadow: 0 0 22px -6px rgba(52,211,153,0.55), inset 0 0 14px -6px rgba(52,211,153,0.3); }
.dg-table-tile.occupied .dg-table-top {
  border-color: rgba(246,92,111,0.6); box-shadow: 0 0 22px -6px rgba(246,92,111,0.6), inset 0 0 14px -6px rgba(246,92,111,0.35);
  animation: dgPulseTable 2.2s ease-in-out infinite;
}
.dg-table-tile.inactive .dg-table-top { opacity: 0.45; border-color: rgba(255,255,255,0.15); }
.dg-table-tile.inactive .dg-table-chair { opacity: 0.35; }
@keyframes dgPulseTable {
  0%, 100% { box-shadow: 0 0 22px -6px rgba(246,92,111,0.6), inset 0 0 14px -6px rgba(246,92,111,0.35); }
  50% { box-shadow: 0 0 32px -4px rgba(246,92,111,0.85), inset 0 0 14px -6px rgba(246,92,111,0.4); }
}
.dg-table-status { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; color: var(--dg-text-faint); }
.dg-table-tile.empty .dg-table-status { color: var(--dg-green); }
.dg-table-tile.occupied .dg-table-status { color: var(--dg-red); }
.dg-table-order-badge {
  position: absolute; top: 6px; right: 6px; min-width: 18px; height: 18px; border-radius: 999px; padding: 0 5px;
  background: var(--dg-gradient); color: #fff; font-size: 10px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 10px -1px rgba(181,101,245,0.7);
  animation: dgBadgePop 0.35s cubic-bezier(0.34,1.56,0.64,1);
}
.dg-table-quick-btn {
  position: absolute; top: -6px; z-index: 3; width: 20px; height: 20px; border-radius: 999px; border: 1px solid var(--dg-border);
  display: flex; align-items: center; justify-content: center; font-size: 12px; line-height: 1; cursor: pointer;
  background: var(--dg-glass-strong); color: var(--dg-text-soft); opacity: 0; transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.dg-table-tile:hover .dg-table-quick-btn { opacity: 1; }
.dg-table-quick-remove { right: -6px; }
.dg-table-quick-remove:hover { background: var(--dg-red); color: #fff; border-color: transparent; }
.dg-table-quick-power { left: -6px; font-size: 10px; }
.dg-table-quick-power.is-on:hover { background: var(--dg-red); color: #fff; border-color: transparent; }
.dg-table-quick-power.is-off { background: var(--dg-tint-3); color: var(--dg-text-faint); }
.dg-table-quick-power.is-off:hover { background: var(--dg-green); color: #051b12; border-color: transparent; }
@keyframes dgBadgePop { 0% { transform: scale(0); } 70% { transform: scale(1.2); } 100% { transform: scale(1); } }

/* ---------------- Buttons ---------------- */
.dg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 18px; border-radius: 11px; font-size: 12.5px; font-weight: 700; cursor: pointer;
  border: 1px solid var(--dg-border); background: var(--dg-glass); color: var(--dg-text); transition: all 0.15s ease;
}
.dg-btn:hover { background: var(--dg-tint-2); }
.dg-btn-primary { background: var(--dg-gradient); border: none; color: #fff; box-shadow: 0 4px 18px -6px rgba(120,150,255,0.55); }
.dg-btn-primary:hover { filter: brightness(1.1); }
.dg-btn-danger { background: rgba(246,92,111,0.14); border-color: rgba(246,92,111,0.35); color: #ffb0ba; }
.dg-btn-danger:hover { background: rgba(246,92,111,0.22); }
.dg-btn-sm { padding: 6px 12px; font-size: 11.5px; border-radius: 9px; }
.dg-btn.active { background: var(--dg-gradient); border-color: transparent; color: #fff; }
.dg-toggle { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--dg-text); cursor: pointer; }
.dg-toggle input { width: 17px; height: 17px; accent-color: var(--dg-purple); }

/* ---------------- Order popup (from tapping a table) ---------------- */
.dg-popup-backdrop {
  position: fixed; inset: 0; z-index: 950; background: rgba(3,4,10,0);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  opacity: 0; pointer-events: none; transition: opacity 0.25s ease, background 0.25s ease;
}
.dg-popup-backdrop.is-open { opacity: 1; pointer-events: auto; background: rgba(3,4,10,0.72); backdrop-filter: blur(3px); }
.dg-popup {
  width: 100%; max-width: 460px; max-height: 84vh; overflow-y: auto;
  background: var(--dg-glass-strong); backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px);
  border: 1px solid var(--dg-border-glow); border-radius: 22px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.55), 0 0 60px -20px rgba(120,150,255,0.35);
  padding: 22px;
  transform-origin: var(--dg-popup-origin-x, 50%) var(--dg-popup-origin-y, 50%);
  transform: scale(0.35) translateY(10px); opacity: 0;
  transition: transform 0.38s cubic-bezier(0.2, 1, 0.3, 1), opacity 0.25s ease;
}
.dg-popup-backdrop.is-open .dg-popup { transform: scale(1) translateY(0); opacity: 1; }
.dg-popup-close {
  position: absolute; top: 16px; right: 16px; width: 30px; height: 30px; border-radius: 50%;
  background: var(--dg-tint-2); border: 1px solid var(--dg-border); color: var(--dg-text-soft);
  font-size: 17px; cursor: pointer; display: flex; align-items: center; justify-content: center;
}

@media (max-width: 900px) {
  .dg-body { padding: 16px; flex-direction: column; }
  .dg-nav { overflow-x: auto; }
}

/* ---------------- Auth pages (login / signup) ---------------- */
.dg-auth-shell {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 24px; position: relative; overflow: hidden;
}
.dg-auth-orb {
  position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.35; pointer-events: none;
  animation: dgOrbDrift 14s ease-in-out infinite alternate;
}
.dg-auth-orb.o1 { width: 420px; height: 420px; background: var(--dg-blue); top: -120px; left: -100px; }
.dg-auth-orb.o2 { width: 380px; height: 380px; background: var(--dg-purple); bottom: -140px; right: -100px; animation-delay: -6s; }
@keyframes dgOrbDrift { 0% { transform: translate(0,0) scale(1); } 100% { transform: translate(30px,-20px) scale(1.08); } }

.dg-auth-card {
  width: 100%; max-width: 400px; position: relative; z-index: 2;
  background: var(--dg-glass-strong); backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px);
  border: 1px solid var(--dg-border-glow); border-radius: 24px;
  box-shadow: 0 24px 70px rgba(0,0,0,0.55), 0 0 80px -30px rgba(120,150,255,0.4);
  padding: 38px 34px;
  animation: dgCardIn 0.5s cubic-bezier(0.2,1,0.3,1);
}
@keyframes dgCardIn { from { opacity: 0; transform: translateY(16px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
.dg-auth-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; }
.dg-auth-brand .dg-brand-mark { width: 42px; height: 42px; border-radius: 12px; }
.dg-auth-eyebrow { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dg-blue-2); font-weight: 700; margin-bottom: 6px; }
.dg-auth-card h1 { font-family: 'Playfair Display', serif; font-size: 26px; color: var(--dg-text); margin: 0 0 6px; }
.dg-auth-card .dg-auth-sub { color: var(--dg-text-faint); font-size: 13px; margin: 0 0 22px; }
.dg-auth-card .field label { color: var(--dg-text-soft); font-size: 12.5px; }
.dg-auth-card input {
  background: var(--dg-tint-1); border: 1px solid var(--dg-border); color: var(--dg-text);
  border-radius: 11px; transition: border-color 0.15s ease, background 0.15s ease;
}
.dg-auth-card input:focus { outline: none; border-color: var(--dg-blue); background: var(--dg-tint-2); }
.dg-auth-card .btn-primary, .dg-auth-card .btn-block {
  background: var(--dg-gradient); border: none; box-shadow: 0 6px 24px -6px rgba(120,150,255,0.55);
  border-radius: 12px; font-weight: 700;
}
.dg-auth-card a { color: var(--dg-blue-2); }
.dg-auth-footer { text-align: center; margin-top: 22px; color: var(--dg-text-faint); font-size: 11.5px; }

/* ---------------- Portal reveal (on successful login) ---------------- */
.dg-portal-overlay {
  position: fixed; inset: 0; z-index: 999; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
}
.dg-portal-ring {
  width: 12px; height: 12px; border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, var(--dg-blue-2) 25%, var(--dg-purple) 65%, transparent 100%);
  opacity: 0;
  box-shadow: 0 0 40px 10px rgba(120,150,255,0.8);
}
.dg-portal-overlay.is-active .dg-portal-ring {
  animation: dgPortalExpand 0.85s cubic-bezier(0.6,0,0.4,1) forwards;
}
@keyframes dgPortalExpand {
  0% { transform: scale(1); opacity: 0.9; }
  60% { opacity: 1; }
  100% { transform: scale(260); opacity: 1; }
}
.dg-portal-overlay .dg-portal-flash {
  position: absolute; inset: 0; background: #0a0e1c; opacity: 0; transition: opacity 0.25s ease;
}
.dg-portal-overlay.is-flashing .dg-portal-flash { opacity: 1; }
.dg-auth-card.is-leaving { animation: dgCardOut 0.4s ease forwards; }
@keyframes dgCardOut { to { opacity: 0; transform: scale(0.92) translateY(-8px); } }


/* Dark-theme skin for the shared modal system (styles.css), so existing
   modals (manual-add, custom order, bill) don't look jarringly out of
   place against the new theme without needing to rebuild every one. */
body.dg-theme .modal-overlay { background: rgba(3,4,10,0.72); backdrop-filter: blur(3px); z-index: 970; }
/* Parameter and choice-group builders open ON TOP of an already-open Add
   Item modal — an explicit higher z-index here makes that correct
   regardless of DOM order, rather than leaning on the fact that they
   currently happen to come later in the markup. */
#paramModal, #choiceGroupModal, #comboCompModal { z-index: 980; }


/* Dark-theme skin for the shared modal system (styles.css), so existing
   modals (manual-add, custom order, bill) don't look jarringly out of
   place against the new theme without needing to rebuild every one. */
body.lg-theme .modal-overlay { background: rgba(3,4,10,0.72); backdrop-filter: blur(3px); z-index: 970; }
body.dg-theme .modal-sheet {
  background: var(--dg-glass-strong); backdrop-filter: blur(28px);
  border: 1px solid var(--dg-border-glow); color: var(--dg-text);
  box-shadow: 0 20px 60px rgba(0,0,0,0.55), 0 0 60px -20px rgba(120,150,255,0.35);
}
body.lg-theme .modal-sheet {
  background: var(--dg-glass-strong); backdrop-filter: blur(28px);
  border: 1px solid var(--dg-border-glow); color: var(--dg-text);
  box-shadow: 0 20px 60px rgba(0,0,0,0.55), 0 0 60px -20px rgba(120,150,255,0.35);
}
body.dg-theme .modal-sheet h2 { color: var(--dg-text); }
body.lg-theme .modal-sheet h2 { color: var(--dg-text); }
body.dg-theme .modal-sheet .hint { color: var(--dg-text-faint); }
body.lg-theme .modal-sheet .hint { color: var(--dg-text-faint); }
body.dg-theme .modal-sheet label { color: var(--dg-text-soft); }
body.lg-theme .modal-sheet label { color: var(--dg-text-soft); }
body.dg-theme .modal-sheet input, body.dg-theme .modal-sheet select, body.dg-theme .modal-sheet textarea {
  background: var(--dg-tint-1); border: 1px solid var(--dg-border); color: var(--dg-text);
}
body.lg-theme .modal-sheet input, body.lg-theme .modal-sheet select, body.lg-theme .modal-sheet textarea {
  background: var(--dg-tint-1); border: 1px solid var(--dg-border); color: var(--dg-text);
}
body.dg-theme .modal-sheet .btn-outline { background: transparent; border-color: var(--dg-border); color: var(--dg-text); }
body.lg-theme .modal-sheet .btn-outline { background: transparent; border-color: var(--dg-border); color: var(--dg-text); }
body.dg-theme .modal-sheet .btn-marigold, body.dg-theme .modal-sheet .btn-primary {
  background: var(--dg-gradient); border: none; box-shadow: 0 4px 18px -6px rgba(120,150,255,0.55);
}
body.lg-theme .modal-sheet .btn-marigold, body.lg-theme .modal-sheet .btn-primary {
  background: var(--dg-gradient); border: none; box-shadow: 0 4px 18px -6px rgba(120,150,255,0.55);
}
body.dg-theme .modal-sheet .btn-danger { background: rgba(246,92,111,0.14); border-color: rgba(246,92,111,0.35); color: #ffb0ba; }
body.lg-theme .modal-sheet .btn-danger { background: rgba(246,92,111,0.14); border-color: rgba(246,92,111,0.35); color: #ffb0ba; }
body.dg-theme .modal-sheet .range-toggle { background: var(--dg-tint-1); border: 1px solid var(--dg-border); }
body.lg-theme .modal-sheet .range-toggle { background: var(--dg-tint-1); border: 1px solid var(--dg-border); }
body.dg-theme .modal-sheet .range-toggle button.active { background: var(--dg-gradient); color: #fff; }
body.lg-theme .modal-sheet .range-toggle button.active { background: var(--dg-gradient); color: #fff; }
body.dg-theme .sidebar-fab { background: var(--dg-gradient); box-shadow: 0 6px 24px -6px rgba(120,150,255,0.6); }
body.lg-theme .sidebar-fab { background: var(--dg-gradient); box-shadow: 0 6px 24px -6px rgba(120,150,255,0.6); }
body.dg-theme .sidebar-collapse-btn { background: var(--dg-glass-strong); border-color: var(--dg-border); color: var(--dg-text); }
body.lg-theme .sidebar-collapse-btn { background: var(--dg-glass-strong); border-color: var(--dg-border); color: var(--dg-text); }

/* Order cards (renderOrderCardHtml) are shared between the main Orders
   list and the table-tap popup, and use the OLD light .panel/.badge/etc
   classes — themed here rather than rebuilt, so both call sites stay
   visually consistent with the new theme automatically. */
body.dg-theme .panel {
  background: var(--dg-glass); border: 1px solid var(--dg-border); box-shadow: var(--dg-shadow-glow); color: var(--dg-text);
}

/* Order cards (renderOrderCardHtml) are shared between the main Orders
   list and the table-tap popup, and use the OLD light .panel/.badge/etc
   classes — themed here rather than rebuilt, so both call sites stay
   visually consistent with the new theme automatically. */
body.lg-theme .panel {
  background: var(--dg-glass); border: 1px solid var(--dg-border); box-shadow: var(--dg-shadow-glow); color: var(--dg-text);
}
body.dg-theme .panel strong { color: var(--dg-text); }
body.lg-theme .panel strong { color: var(--dg-text); }
body.dg-theme .mono { color: var(--dg-text-soft); }
body.lg-theme .mono { color: var(--dg-text-soft); }
body.dg-theme .hint { color: var(--dg-text-faint); }
body.lg-theme .hint { color: var(--dg-text-faint); }
body.dg-theme table.data { color: var(--dg-text); }
body.lg-theme table.data { color: var(--dg-text); }
body.dg-theme table.data th { color: var(--dg-text-faint); border-color: var(--dg-border); }
body.lg-theme table.data th { color: var(--dg-text-faint); border-color: var(--dg-border); }
body.dg-theme table.data td { border-color: var(--dg-border); }
body.lg-theme table.data td { border-color: var(--dg-border); }
body.dg-theme table.data tr:hover td { background: var(--dg-tint-2); }
body.lg-theme table.data tr:hover td { background: var(--dg-tint-2); }
body.dg-theme .order-batch { background: var(--dg-tint-1) !important; border: 1px solid var(--dg-border); }
body.lg-theme .order-batch { background: var(--dg-tint-1) !important; border: 1px solid var(--dg-border); }
body.dg-theme .order-batch .batch-note { border-top-color: var(--dg-border); color: var(--dg-text-soft); }
body.lg-theme .order-batch .batch-note { border-top-color: var(--dg-border); color: var(--dg-text-soft); }
body.dg-theme .adjustment-note { background: rgba(255,180,84,0.1); border-color: rgba(255,180,84,0.35); color: var(--dg-amber); }
body.lg-theme .adjustment-note { background: rgba(255,180,84,0.1); border-color: rgba(255,180,84,0.35); color: var(--dg-amber); }
body.dg-theme .adjustment-note--free { background: rgba(52,211,153,0.1); border-color: rgba(52,211,153,0.35); color: var(--dg-green); }
body.lg-theme .adjustment-note--free { background: rgba(52,211,153,0.1); border-color: rgba(52,211,153,0.35); color: var(--dg-green); }
body.dg-theme .badge.pending { background: rgba(255,180,84,0.16); color: var(--dg-amber); }
body.lg-theme .badge.pending { background: rgba(255,180,84,0.16); color: var(--dg-amber); }
body.dg-theme .badge.confirmed { background: rgba(77,141,255,0.16); color: var(--dg-blue-2); }
body.lg-theme .badge.confirmed { background: rgba(77,141,255,0.16); color: var(--dg-blue-2); }
body.dg-theme .badge.rejected { background: rgba(246,92,111,0.16); color: #ff8f9a; }
body.lg-theme .badge.rejected { background: rgba(246,92,111,0.16); color: #ff8f9a; }
body.dg-theme .badge.completed, body.dg-theme .badge.served { background: rgba(52,211,153,0.16); color: var(--dg-green); }
body.lg-theme .badge.completed, body.lg-theme .badge.served { background: rgba(52,211,153,0.16); color: var(--dg-green); }
body.dg-theme .badge.rush { background: rgba(246,92,111,0.16); color: #ff8f9a; }
body.lg-theme .badge.rush { background: rgba(246,92,111,0.16); color: #ff8f9a; }
body.dg-theme .badge-btn.unserved { background: var(--dg-tint-2); color: var(--dg-text-soft); }
body.lg-theme .badge-btn.unserved { background: var(--dg-tint-2); color: var(--dg-text-soft); }
body.dg-theme .badge-btn.unserved:hover { background: var(--dg-amber); color: #241a06; }
body.lg-theme .badge-btn.unserved:hover { background: var(--dg-amber); color: #241a06; }
body.dg-theme .badge-btn.served { background: rgba(52,211,153,0.16); color: var(--dg-green); }
body.lg-theme .badge-btn.served { background: rgba(52,211,153,0.16); color: var(--dg-green); }
body.dg-theme .badge-btn.served:hover { background: rgba(246,92,111,0.16); color: #ff8f9a; }
body.lg-theme .badge-btn.served:hover { background: rgba(246,92,111,0.16); color: #ff8f9a; }
body.dg-theme .btn-outline { background: transparent; border: 1px solid var(--dg-border); color: var(--dg-text); }
body.lg-theme .btn-outline { background: transparent; border: 1px solid var(--dg-border); color: var(--dg-text); }
body.dg-theme .btn-outline:hover { background: var(--dg-tint-2); }
body.lg-theme .btn-outline:hover { background: var(--dg-tint-2); }
body.dg-theme .btn-success { background: rgba(52,211,153,0.85); border: none; color: #06281c; }
body.lg-theme .btn-success { background: rgba(52,211,153,0.85); border: none; color: #06281c; }
body.dg-theme .btn-danger { background: rgba(246,92,111,0.16); border: 1px solid rgba(246,92,111,0.35); color: #ffb0ba; }
body.lg-theme .btn-danger { background: rgba(246,92,111,0.16); border: 1px solid rgba(246,92,111,0.35); color: #ffb0ba; }
body.dg-theme .btn-primary { background: var(--dg-gradient); border: none; box-shadow: 0 4px 18px -6px rgba(120,150,255,0.55); }
body.lg-theme .btn-primary { background: var(--dg-gradient); border: none; box-shadow: 0 4px 18px -6px rgba(120,150,255,0.55); }
body.dg-theme .empty-state { color: var(--dg-text-faint); }
body.lg-theme .empty-state { color: var(--dg-text-faint); }
body.dg-theme .empty-state .display { color: var(--dg-text-soft); }
body.lg-theme .empty-state .display { color: var(--dg-text-soft); }
body.dg-theme .notif-card { background: var(--dg-tint-1); border: 1px solid var(--dg-border); border-left: 3px solid var(--dg-purple); }
body.lg-theme .notif-card { background: var(--dg-tint-1); border: 1px solid var(--dg-border); border-left: 3px solid var(--dg-purple); }
body.dg-theme .notif-card.resolved { border-left-color: var(--dg-green); }
body.lg-theme .notif-card.resolved { border-left-color: var(--dg-green); }
body.dg-theme .notif-card .n-msg { color: var(--dg-text); }
body.lg-theme .notif-card .n-msg { color: var(--dg-text); }
body.dg-theme .notif-card .n-time { color: var(--dg-text-faint); }
body.lg-theme .notif-card .n-time { color: var(--dg-text-faint); }
body.dg-theme .notif-card .n-phone { color: var(--dg-blue-2); }
body.lg-theme .notif-card .n-phone { color: var(--dg-blue-2); }
body.dg-theme .notif-card .n-actions button { background: var(--dg-tint-2); border-color: var(--dg-border); color: var(--dg-text); }
body.lg-theme .notif-card .n-actions button { background: var(--dg-tint-2); border-color: var(--dg-border); color: var(--dg-text); }
body.dg-theme .notif-card .n-actions button:hover { background: var(--dg-tint-3); }
body.lg-theme .notif-card .n-actions button:hover { background: var(--dg-tint-3); }
body.dg-theme .notif-empty { color: var(--dg-text-faint); }
body.lg-theme .notif-empty { color: var(--dg-text-faint); }

/* ---- Page-level content shared across Menu/Inventory/Branding/Analytics/
   Billing/Settings — headings, form fields, tabs, charts, category rows ---- */
body.dg-theme .main-header h1 { color: var(--dg-text); }

/* ---- Page-level content shared across Menu/Inventory/Branding/Analytics/
   Billing/Settings — headings, form fields, tabs, charts, category rows ---- */
body.lg-theme .main-header h1 { color: var(--dg-text); }
body.dg-theme h1, body.dg-theme h2, body.dg-theme h3, body.dg-theme h4 { color: var(--dg-text); }
body.lg-theme h1, body.lg-theme h2, body.lg-theme h3, body.lg-theme h4 { color: var(--dg-text); }
body.dg-theme .field label { color: var(--dg-text-soft); }
body.lg-theme .field label { color: var(--dg-text-soft); }
body.dg-theme input[type=text], body.dg-theme input[type=email], body.dg-theme input[type=password],
body.dg-theme input[type=tel], body.dg-theme input[type=number], body.dg-theme input[type=date],
body.dg-theme textarea, body.dg-theme select {
  background: var(--dg-tint-1); border: 1px solid var(--dg-border); color: var(--dg-text);
}
body.lg-theme input[type=text], body.lg-theme input[type=email], body.lg-theme input[type=password],
body.lg-theme input[type=tel], body.lg-theme input[type=number], body.lg-theme input[type=date],
body.lg-theme textarea, body.lg-theme select {
  background: var(--dg-tint-1); border: 1px solid var(--dg-border); color: var(--dg-text);
}
body.dg-theme option { background: var(--dg-bg-1); color: var(--dg-text); }
body.lg-theme option { background: var(--dg-bg-0); color: var(--dg-text); }

body.dg-theme .stock-alert-row { background: rgba(246,92,111,0.14); }
body.lg-theme .stock-alert-row { background: rgba(246,92,111,0.14); }
body.dg-theme .stock-alert-row.low { background: rgba(255,180,84,0.14); }
body.lg-theme .stock-alert-row.low { background: rgba(255,180,84,0.14); }
body.dg-theme .stock-alert-row.predicted { background: var(--dg-tint-1); border: 1px dashed var(--dg-border); }
body.lg-theme .stock-alert-row.predicted { background: var(--dg-tint-1); border: 1px dashed var(--dg-border); }
body.dg-theme .stock-alert-row strong { color: var(--dg-text); }
body.lg-theme .stock-alert-row strong { color: var(--dg-text); }

/* ---------------- Custom scrollbar ---------------- */
body.dg-theme, body.lg-theme { scrollbar-width: thin; scrollbar-color: var(--dg-blue) transparent; }

body.dg-theme ::-webkit-scrollbar, body.lg-theme ::-webkit-scrollbar { width: 11px; height: 11px; }
body.dg-theme ::-webkit-scrollbar-track, body.lg-theme ::-webkit-scrollbar-track { background: transparent; }
body.dg-theme ::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--dg-blue), var(--dg-purple));
  border-radius: 999px;
  border: 2.5px solid transparent;
  background-clip: padding-box;
  box-shadow: 0 0 8px -1px rgba(120,150,255,0.6);
}
body.lg-theme ::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--dg-blue), var(--dg-purple));
  border-radius: 999px;
  border: 2.5px solid transparent;
  background-clip: padding-box;
  box-shadow: 0 0 8px -1px rgba(99,102,241,0.4);
}
body.dg-theme ::-webkit-scrollbar-thumb:hover, body.lg-theme ::-webkit-scrollbar-thumb:hover { filter: brightness(1.15); }
body.dg-theme ::-webkit-scrollbar-corner, body.lg-theme ::-webkit-scrollbar-corner { background: transparent; }
body.dg-theme input::placeholder, body.dg-theme textarea::placeholder { color: var(--dg-text-faint); }
body.lg-theme input::placeholder, body.lg-theme textarea::placeholder { color: var(--dg-text-faint); }
body.dg-theme .error-box { background: rgba(246,92,111,0.12); border: 1px solid rgba(246,92,111,0.35); color: #ffb0ba; }
body.lg-theme .error-box { background: rgba(246,92,111,0.12); border: 1px solid rgba(246,92,111,0.35); color: #ffb0ba; }
body.dg-theme .success-box { background: rgba(52,211,153,0.12); border: 1px solid rgba(52,211,153,0.35); color: var(--dg-green); }
body.lg-theme .success-box { background: rgba(52,211,153,0.12); border: 1px solid rgba(52,211,153,0.35); color: var(--dg-green); }
body.dg-theme .page-tabs { background: none; }
body.lg-theme .page-tabs { background: none; }
body.dg-theme .page-tab { background: var(--dg-tint-1); border: 1px solid var(--dg-border); color: var(--dg-text-soft); }
body.lg-theme .page-tab { background: var(--dg-tint-1); border: 1px solid var(--dg-border); color: var(--dg-text-soft); }
body.dg-theme .page-tab.active { background: var(--dg-gradient); color: #fff; border-color: transparent; }
body.lg-theme .page-tab.active { background: var(--dg-gradient); color: #fff; border-color: transparent; }
body.dg-theme .analytics-stat-grid .stat-card,
body.dg-theme .stat-card { background: var(--dg-glass); border: 1px solid var(--dg-border); box-shadow: var(--dg-shadow-glow); color: var(--dg-text); }
body.lg-theme .analytics-stat-grid .stat-card,
body.lg-theme .stat-card { background: var(--dg-glass); border: 1px solid var(--dg-border); box-shadow: var(--dg-shadow-glow); color: var(--dg-text); }
body.dg-theme .chart-card { background: var(--dg-glass); border: 1px solid var(--dg-border); box-shadow: var(--dg-shadow-glow); }
body.lg-theme .chart-card { background: var(--dg-glass); border: 1px solid var(--dg-border); box-shadow: var(--dg-shadow-glow); }
body.dg-theme .chart-card h3 { color: var(--dg-text); }
body.lg-theme .chart-card h3 { color: var(--dg-text); }
body.dg-theme .chart-card .chart-sub { color: var(--dg-text-faint); }
body.lg-theme .chart-card .chart-sub { color: var(--dg-text-faint); }
body.dg-theme .category-row { background: var(--dg-tint-1); border: 1px solid var(--dg-border); }
body.lg-theme .category-row { background: var(--dg-tint-1); border: 1px solid var(--dg-border); }
body.dg-theme .category-row .cat-name { color: var(--dg-text); }
body.lg-theme .category-row .cat-name { color: var(--dg-text); }
body.dg-theme .avail-day-chip { border: 1px solid var(--dg-border); color: var(--dg-text-soft); }
body.lg-theme .avail-day-chip { border: 1px solid var(--dg-border); color: var(--dg-text-soft); }
body.dg-theme .swatch-field input[type=text] { color: var(--dg-text); }
body.lg-theme .swatch-field input[type=text] { color: var(--dg-text); }
body.dg-theme .cat-drag-handle { color: var(--dg-text-faint); }
body.lg-theme .cat-drag-handle { color: var(--dg-text-faint); }
body.dg-theme .dp-status-box { background: var(--dg-tint-3); color: var(--dg-amber); }
body.lg-theme .dp-status-box { background: var(--dg-tint-3); color: var(--dg-amber); }
body.dg-theme .dp-tier-label { color: var(--dg-text-soft); }
body.lg-theme .dp-tier-label { color: var(--dg-text-soft); }
body.dg-theme .subcat-chip { background: var(--dg-tint-3); color: var(--dg-text); }
body.lg-theme .subcat-chip { background: var(--dg-tint-3); color: var(--dg-text); }

/* Analytics page — range toggle, stat cards, and the best-seller bar
   track were still using the original light-theme backgrounds; the range
   toggle and stat cards aren't scoped inside .modal-sheet or .panel, so
   the earlier passes never touched them, and they only actually render
   once a partner has real order data — which is why this went unnoticed
   until now. */
body.dg-theme .range-toggle { background: var(--dg-tint-1); }
body.lg-theme .range-toggle { background: var(--dg-tint-1); }
body.dg-theme .range-toggle button { color: var(--dg-text-soft); }
body.lg-theme .range-toggle button { color: var(--dg-text-soft); }
body.dg-theme .range-toggle button.active { background: var(--dg-gradient); color: #fff; }
body.lg-theme .range-toggle button.active { background: var(--dg-gradient); color: #fff; }
body.dg-theme .analytics-stat-card { background: var(--dg-glass); border: 1px solid var(--dg-border); box-shadow: var(--dg-shadow-glow); }
body.lg-theme .analytics-stat-card { background: var(--dg-glass); border: 1px solid var(--dg-border); box-shadow: var(--dg-shadow-glow); }
body.dg-theme .analytics-stat-card .label { color: var(--dg-text-faint); }
body.lg-theme .analytics-stat-card .label { color: var(--dg-text-faint); }
body.dg-theme .analytics-stat-card .value { color: var(--dg-text); }
body.lg-theme .analytics-stat-card .value { color: var(--dg-text); }
body.dg-theme .analytics-stat-card .sub { color: var(--dg-text-faint); }
body.lg-theme .analytics-stat-card .sub { color: var(--dg-text-faint); }
body.dg-theme .best-seller-bar-track { background: var(--dg-tint-2); }
body.lg-theme .best-seller-bar-track { background: var(--dg-tint-2); }
body.dg-theme .best-seller-stats .qty { color: var(--dg-text-faint); }
body.lg-theme .best-seller-stats .qty { color: var(--dg-text-faint); }

/* ---------------- Theme toggle water-splash ---------------- */
.theme-splash {
  position: fixed; width: 40px; height: 40px; border-radius: 50%;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: none; z-index: 9999;
  filter: blur(6px);
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.42s ease;
  opacity: 1;
}
.theme-toggle-btn { font-size: 14px; }


/* ---------------------------------------------- Open-order bar + POS transition
   The orders list is now a summary-only view: every per-order action moved
   into the full POS screen, and this bar is the single way through to it. */
.order-open-bar {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; margin-top: 12px; padding: 9px 12px;
  border: 1px solid var(--dg-border); border-radius: 10px;
  background: var(--dg-tint-2); color: var(--dg-text);
  font-size: 12.5px; font-weight: 700; cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.order-open-bar:hover {
  background: var(--dg-tint-3, rgba(255,255,255,0.1));
  border-color: var(--dg-accent, #7c6cf0);
}
.order-open-bar:hover .order-open-bar-arrow { transform: translateY(2px); }
.order-open-bar-arrow {
  font-size: 13px; line-height: 1;
  transition: transform 0.2s cubic-bezier(.34,1.56,.64,1);
}

/* Expanding wipe that covers the screen before navigating to the POS, so
   the page swap reads as the order opening rather than an abrupt jump. */
.pos-transition {
  position: fixed; left: var(--x); top: var(--y);
  width: 10px; height: 10px; margin: -5px 0 0 -5px;
  border-radius: 50%; background: var(--dg-bg, #0b0f1c);
  z-index: 9999; pointer-events: none;
  animation: posWipe 0.3s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes posWipe {
  from { transform: scale(0); opacity: 0.85; }
  to { transform: scale(220); opacity: 1; }
}

/* ---------------------------------------- Outstanding payment reminders
   Money the restaurant is owed but hasn't collected — deliberately styled
   to stand out, since an unpaid tab that scrolls past unnoticed is the
   whole problem this is meant to prevent. */
.due-reminder {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; margin-bottom: 14px; border-radius: 12px;
  background: rgba(245,158,11,0.12); border: 1px solid rgba(245,158,11,0.4);
  color: #fbbf24;
}
.due-reminder strong { font-size: 14px; }
.due-reminder-sub { font-size: 12.5px; opacity: 0.85; margin-top: 2px; }
.adjustment-note--due {
  background: rgba(245,158,11,0.12);
  border: 1px solid rgba(245,158,11,0.35);
  color: #fbbf24;
}
.badge.partially_completed {
  background: rgba(245,158,11,0.18); color: #fbbf24;
}

/* ------------------------------------------------ Table switch (hover) */
.dg-table-tile { position: relative; }
.dg-table-switch {
  position: absolute; top: 6px; right: 6px; z-index: 2;
  width: 26px; height: 26px; border-radius: 8px;
  border: 1px solid var(--dg-border); background: var(--dg-panel, #1b2236);
  color: var(--dg-text); font-size: 13px; cursor: pointer; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: scale(0.85);
  transition: opacity 0.15s, transform 0.15s, border-color 0.15s;
}
/* Revealed on hover so the tile stays clean at rest, but always visible on
   touch devices, where there's no hover to reveal it with. */
.dg-table-tile:hover .dg-table-switch { opacity: 1; transform: scale(1); }
.dg-table-switch:hover { border-color: var(--dg-accent, #7c6cf0); }

/* The light theme needs its own values. The dark panel colour above made
   this button a near-black square sitting on a pale tile, which read as a
   rendering fault rather than a control. */
body.lg-theme .dg-table-switch {
  background: #ffffff;
  border-color: #d7dbe6;
  color: #4b5165;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}
body.lg-theme .dg-table-switch:hover {
  background: #7c6cf0;
  border-color: #7c6cf0;
  color: #ffffff;
}
@media (hover: none) {
  .dg-table-switch { opacity: 1; transform: scale(1); }
}

.switch-targets { display: flex; flex-direction: column; gap: 7px; max-height: 300px; overflow-y: auto; }
.switch-target {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 13px; border-radius: 10px; text-align: left;
  border: 1px solid var(--dg-border); background: var(--dg-tint-2);
  color: var(--dg-text); cursor: pointer; transition: all 0.15s;
}
.switch-target:hover { border-color: var(--dg-accent, #7c6cf0); background: var(--dg-tint-3, rgba(255,255,255,0.09)); }
.switch-target:disabled { opacity: 0.5; cursor: default; }
.switch-target-name { font-size: 13.5px; font-weight: 600; }
.switch-target-state { font-size: 11.5px; color: var(--dg-text-soft); }
.switch-target.occupied .switch-target-state { color: #fbbf24; }

.shift-kot-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid var(--dg-border);
}

/* The rules above use a descendant combinator (`body.dg-theme ::-webkit-...`),
   which styles scrollbars INSIDE the page but never the document's own —
   the root scrollbar isn't a descendant of body. In a browser that goes
   unnoticed; in the desktop app it's a bright OS-grey slab against a dark
   window. These repeat the same design for the root element. */
body.dg-theme::-webkit-scrollbar,
body.lg-theme::-webkit-scrollbar,
html::-webkit-scrollbar { width: 11px; height: 11px; }

body.dg-theme::-webkit-scrollbar-track,
body.lg-theme::-webkit-scrollbar-track,
html::-webkit-scrollbar-track { background: transparent; }

body.dg-theme::-webkit-scrollbar-thumb,
html::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--dg-blue), var(--dg-purple));
  border-radius: 999px;
  border: 2.5px solid transparent;
  background-clip: padding-box;
  box-shadow: 0 0 8px -1px rgba(120,150,255,0.6);
}
body.lg-theme::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--dg-blue), var(--dg-purple));
  border-radius: 999px;
  border: 2.5px solid transparent;
  background-clip: padding-box;
  box-shadow: 0 0 8px -1px rgba(99,102,241,0.4);
}

/* Firefox / standards property, applied at the root too. */
html { scrollbar-width: thin; scrollbar-color: var(--dg-blue) transparent; }

::-webkit-scrollbar-corner { background: transparent; }

/* Why an order stopped, on the order card itself. A bare "cancelled"
   makes staff open the delivery screen to learn anything; this puts the
   answer where the question is asked. */
.order-outcome {
  margin: 6px 0 2px; padding: 6px 9px; border-radius: 7px;
  background: rgba(239, 68, 68, .09); border: 1px solid rgba(239, 68, 68, .28);
  font-size: 12px; color: #fca5a5; line-height: 1.45;
}
.order-outcome-num { font-weight: 700; color: #fecaca; }
.order-refund-note {
  margin: 6px 0 2px; padding: 6px 9px; border-radius: 7px;
  background: rgba(251, 191, 36, .10); border: 1px solid rgba(251, 191, 36, .28);
  font-size: 12px; color: #fcd34d;
}

/* Address autocomplete */
.ya-suggest { position:absolute; left:0; right:0; top:100%; z-index:60; background:#141826; border:1px solid var(--dg-border,#2a3044); border-radius:10px; box-shadow:0 12px 30px rgba(0,0,0,.45); max-height:260px; overflow:auto; margin-top:4px; }
.ya-item { padding:9px 12px; cursor:pointer; border-bottom:1px solid rgba(255,255,255,.05); }
.ya-item:hover { background:rgba(124,108,240,.15); }
.ya-status { margin:2px 0 6px; font-size:12px; }
.ya-attrib { font-size:10.5px; color:rgba(255,255,255,.35); }

/* CRM strip on the order screen */
.pos-crm { margin: 6px 0 10px; padding: 8px 10px; border: 1px solid rgba(124,108,240,.35); background: rgba(124,108,240,.08); border-radius: 10px; font-size: 12.5px; }
.pos-crm-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pos-crm-vip { background: rgba(245,158,11,.2); color: #fbbf24; font-size: 10px; padding: 1px 6px; border-radius: 999px; font-weight: 700; }
.pos-crm-link { margin-left: auto; font-size: 12px; color: var(--accent, #7c6cf0); }
.pos-crm-note { margin-top: 4px; padding: 4px 8px; background: rgba(251,191,36,.12); border-radius: 6px; color: #fcd34d; }
.pos-crm-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.pos-crm-row input { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.15); color: inherit; border-radius: 6px; padding: 3px 6px; font-size: 12px; }
.pos-crm-code { background: rgba(255,255,255,.08); border: 1px dashed rgba(255,255,255,.3); color: inherit; border-radius: 6px; padding: 1px 6px; font-family: monospose, monospace; cursor: pointer; }

/* reserved tables on the map */
.dg-table-tile .dg-table-rsv { position: absolute; top: 6px; left: 8px; font-size: 13px; }
.dg-table-tile.empty:has(.dg-table-rsv) .dg-table-top { box-shadow: 0 0 0 2px rgba(251,191,36,.7) inset; }
.dg-table-tile:has(.dg-table-rsv) .dg-table-status { color: #fbbf24; }
.ya-item.ya-google { background: rgba(124,108,240,.08); } .ya-src { font-size: 10px; padding: 1px 6px; border-radius: 999px; background: rgba(255,255,255,.1); margin-left: 6px; }
.ya-street { display: flex; gap: 6px; } .ya-street input { flex: 1; }
.ya-find { font-family: 'Public Sans', sans-serif; font-size: 12.5px; font-weight: 600; padding: 0 14px; border-radius: 10px; border: 1px solid rgba(124,108,240,.5); background: rgba(124,108,240,.16); color: #fff; cursor: pointer; }
.ya-find:disabled { opacity: .5; } .ya-item.ya-alt { background: rgba(124,108,240,.08); }
.ya-item.ya-local { border-left: 3px solid rgba(52,211,153,.6); } .ya-tag { font-size: 10px; padding: 1px 6px; border-radius: 999px; background: rgba(52,211,153,.15); color: #6ee7b7; margin-left: 6px; }

/* ============================================================
   New custom order — the one action on the Orders toolbar that
   starts something, so it is sized like a primary action rather
   than like the filter chips beside it.
   ============================================================ */
.yo-new-order {
  font-size: 14px;
  font-weight: 700;
  padding: 11px 20px;
  border-radius: 12px;
  letter-spacing: .1px;
  box-shadow: 0 6px 20px -8px rgba(99, 102, 241, .6);
  transition: transform .15s cubic-bezier(.2, .8, .3, 1), box-shadow .2s ease;
}
.yo-new-order:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 26px -8px rgba(99, 102, 241, .75);
}
.yo-new-order:active { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .yo-new-order { transition: none; } }

/* ============================================================
   Edge glow — the whole window rim pulses when an order or an
   alert arrives.

   Built from two stacked inset shadows rather than a border, so
   nothing in the layout moves and no scrollbar appears. Three
   slow breaths over four seconds, each fading all the way in and
   all the way out, then it removes itself.
   ============================================================ */
#youshiEdgeGlow {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  pointer-events: none;
  opacity: 0;
  border-radius: inherit;
}
#youshiEdgeGlow.on {
  animation: yoEdgePulse 4.2s cubic-bezier(.4, 0, .3, 1) 1;
}
@keyframes yoEdgePulse {
  0% {
    opacity: 0;
    box-shadow:
      inset 0 0 0 0 rgba(139, 120, 255, 0),
      inset 0 0 40px 6px rgba(139, 120, 255, 0);
  }
  14% {
    opacity: 1;
    box-shadow:
      inset 0 0 0 2px rgba(167, 139, 250, .9),
      inset 0 0 90px 22px rgba(99, 102, 241, .55);
  }
  38% {
    opacity: .55;
    box-shadow:
      inset 0 0 0 2px rgba(139, 120, 255, .45),
      inset 0 0 60px 12px rgba(99, 102, 241, .28);
  }
  58% {
    opacity: 1;
    box-shadow:
      inset 0 0 0 2px rgba(196, 130, 255, .85),
      inset 0 0 100px 26px rgba(124, 108, 240, .5);
  }
  80% {
    opacity: .4;
    box-shadow:
      inset 0 0 0 2px rgba(139, 120, 255, .35),
      inset 0 0 55px 10px rgba(99, 102, 241, .2);
  }
  100% {
    opacity: 0;
    box-shadow:
      inset 0 0 0 0 rgba(139, 120, 255, 0),
      inset 0 0 40px 6px rgba(139, 120, 255, 0);
  }
}
/* The light theme needs a deeper violet to read against a pale page. */
body.lg-theme #youshiEdgeGlow.on { animation-name: yoEdgePulseLight; }
@keyframes yoEdgePulseLight {
  0%   { opacity: 0; box-shadow: inset 0 0 0 0 rgba(79, 70, 229, 0), inset 0 0 40px 6px rgba(79, 70, 229, 0); }
  14%  { opacity: 1; box-shadow: inset 0 0 0 2px rgba(79, 70, 229, .8), inset 0 0 90px 22px rgba(124, 58, 237, .38); }
  38%  { opacity: .5; box-shadow: inset 0 0 0 2px rgba(79, 70, 229, .4), inset 0 0 60px 12px rgba(124, 58, 237, .2); }
  58%  { opacity: 1; box-shadow: inset 0 0 0 2px rgba(147, 51, 234, .75), inset 0 0 100px 26px rgba(79, 70, 229, .34); }
  80%  { opacity: .35; box-shadow: inset 0 0 0 2px rgba(79, 70, 229, .3), inset 0 0 55px 10px rgba(124, 58, 237, .16); }
  100% { opacity: 0; box-shadow: inset 0 0 0 0 rgba(79, 70, 229, 0), inset 0 0 40px 6px rgba(79, 70, 229, 0); }
}
@media (prefers-reduced-motion: reduce) {
  #youshiEdgeGlow.on { animation: none; opacity: 1; box-shadow: inset 0 0 0 2px rgba(167, 139, 250, .7); }
}

/* ============================================================
   Menu management — the option gear, the option sheet, and the
   item → parameter → option tree.
   ============================================================ */

/* ---- option rows in the parameter modal --------------------- */
.pm-option-row {
  display: flex;
  gap: 7px;
  align-items: center;
  flex-wrap: wrap;
  padding: 5px;
  margin: 0 -5px;
  border-radius: 11px;
  transition: background .15s ease;
}
.pm-option-row:hover { background: var(--dg-tint-1, rgba(255,255,255,.035)); }
.pm-option-row .pm-option-name { flex: 1; min-width: 120px; }
.pm-option-row .pm-option-pricetype { width: 150px; }
.pm-option-row .pm-option-price { width: 78px; }

/* The gear carries a count when the option has been configured, so a
   partner can see which options differ without opening each one. */
.pm-opt-cfg, .pm-opt-del {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 34px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid var(--dg-border, rgba(255,255,255,.14));
  background: transparent;
  color: var(--dg-text-soft, #99a3c4);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease, transform .12s ease;
}
.pm-opt-cfg:hover, .pm-opt-del:hover {
  border-color: var(--dg-blue, #6366f1);
  color: var(--dg-text, #eef1fb);
  background: var(--dg-tint-2, rgba(255,255,255,.06));
}
.pm-opt-cfg:active { transform: scale(.96); }
.pm-opt-cfg.on {
  border-color: color-mix(in srgb, var(--dg-purple, #a855f7) 55%, transparent);
  background: color-mix(in srgb, var(--dg-purple, #a855f7) 14%, transparent);
  color: var(--dg-purple, #c084fc);
}
.pm-opt-cfg .pm-cog { font-size: 14px; line-height: 1; }
.pm-opt-cfg.on .pm-cog { animation: pmCogIn .4s cubic-bezier(.2,.8,.3,1); }
@keyframes pmCogIn { from { transform: rotate(-90deg) scale(.7); } to { transform: none; } }
.pm-cfg-n { font-size: 11px; font-weight: 800; }
.pm-opt-del:hover { border-color: var(--dg-red, #ef4444); color: var(--dg-red, #ef4444); }

/* ---- the option settings sheet ------------------------------ */
.oc-sheet { max-width: 620px; }
.oc-title { margin-bottom: 4px; font-size: 18px; }
.oc-title span { color: var(--dg-purple, #c084fc); }
.oc-lead { margin: 2px 0 16px; }
.oc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.oc-grid .field:first-child { grid-column: 1 / -1; }
.oc-media { margin: 6px 0 14px; }
.oc-media-row { display: flex; gap: 14px; align-items: flex-start; }
.oc-thumb {
  width: 92px; height: 92px; flex: 0 0 92px;
  border-radius: 14px;
  border: 1px dashed var(--dg-border, rgba(255,255,255,.18));
  background: var(--dg-tint-1, rgba(255,255,255,.04));
  display: grid; place-items: center; overflow: hidden;
  font-size: 11px; color: var(--dg-text-faint, #5c6690); text-align: center;
}
.oc-thumb img, .oc-thumb video { width: 100%; height: 100%; object-fit: cover; }
.oc-media-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.oc-media-actions .hint { flex: 1 1 100%; margin: 2px 0 0; }
.oc-bad { color: var(--dg-red, #ef4444) !important; font-weight: 600; }
.oc-recipe { margin-bottom: 10px; }
.oc-oos { margin-bottom: 4px; }
.oc-actions { display: flex; gap: 10px; margin-top: 18px; }
.oc-actions .btn:last-child { flex: 1; }
@media (max-width: 620px) { .oc-grid { grid-template-columns: 1fr; } }

/* ---- the tree ----------------------------------------------- */
.mm-tree { display: grid; gap: 8px; }
.mt-node {
  border: 1px solid var(--dg-border, rgba(255,255,255,.08));
  border-radius: 16px;
  background: var(--dg-glass, rgba(20,26,48,.45));
  overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.mt-node:hover { border-color: var(--dg-border-glow, rgba(120,150,255,.3)); }
.mt-node.open { box-shadow: var(--dg-shadow-glow, 0 8px 28px rgba(0,0,0,.25)); }
.mt-node.dim { opacity: .55; }

.mt-item { display: flex; align-items: center; gap: 11px; padding: 11px 13px; }
.mt-twist {
  width: 24px; height: 24px; flex: 0 0 24px;
  border-radius: 8px; border: 1px solid var(--dg-border, rgba(255,255,255,.12));
  background: transparent; color: var(--dg-text-soft, #99a3c4);
  cursor: pointer; font-size: 15px; line-height: 1;
  display: grid; place-items: center;
  transition: transform .22s cubic-bezier(.2,.8,.3,1), color .15s ease, border-color .15s ease;
}
.mt-twist:disabled { opacity: .3; cursor: default; }
.mt-twist:not(:disabled):hover { color: var(--dg-text, #eef1fb); border-color: var(--dg-blue, #6366f1); }
.mt-node.open .mt-twist { transform: rotate(90deg); }

.mt-thumb {
  width: 40px; height: 40px; flex: 0 0 40px; border-radius: 11px;
  background: var(--dg-tint-2, rgba(255,255,255,.06)) center/cover no-repeat;
}
.mt-main { flex: 1; min-width: 0; cursor: pointer; }
.mt-name { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 700; color: var(--dg-text, #eef1fb); }
.mt-sub { font-size: 11.5px; color: var(--dg-text-faint, #5c6690); margin-top: 2px; }
.mt-cfgn { color: var(--dg-purple, #c084fc); font-weight: 700; }
.mt-price { font-size: 13.5px; font-weight: 700; white-space: nowrap; }
.mt-price .strike { text-decoration: line-through; opacity: .5; margin-right: 5px; font-weight: 500; }
.mt-fav { background: none; border: none; cursor: pointer; font-size: 15px; color: var(--dg-text-faint, #5c6690); }
.mt-fav.on { color: #fbbf24; }
.mt-tag {
  font-size: 9.5px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase;
  padding: 2px 6px; border-radius: 999px;
  background: var(--dg-tint-2, rgba(255,255,255,.08)); color: var(--dg-text-soft, #99a3c4);
}
.mt-tag.oos { background: rgba(239,68,68,.16); color: #f87171; }
.mt-tag.hid { background: rgba(245,158,11,.16); color: #fbbf24; }
.mt-tag.combo { background: rgba(99,102,241,.18); color: #a5b4fc; }

/* The branches slide open rather than appearing, so the hierarchy reads
   as one thing unfolding instead of the list jumping. */
.mt-branches {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .28s cubic-bezier(.2,.8,.3,1);
}
.mt-branches > * { overflow: hidden; }
.mt-node.open .mt-branches { grid-template-rows: 1fr; }
/* The padding lives on the inner wrapper: padding on the grid itself
   would keep the collapsed state a few pixels tall. */
.mt-branches-in { padding: 0 13px 0 48px; }
.mt-node.open .mt-branches-in { padding-bottom: 12px; }

.mt-param { position: relative; padding: 9px 0 3px 16px; }
/* The connecting spine — one vertical rule down the parameters, with a
   short elbow into each. */
.mt-param::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 1px; background: var(--dg-border, rgba(255,255,255,.12));
}
.mt-param:last-child::before { bottom: auto; height: 20px; }
.mt-param::after {
  content: ''; position: absolute; left: 0; top: 20px; width: 11px; height: 1px;
  background: var(--dg-border, rgba(255,255,255,.12));
}
.mt-param-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.mt-pname { font-size: 12.5px; font-weight: 700; color: var(--dg-text, #eef1fb); }
.mt-rule { font-size: 10.5px; color: var(--dg-text-faint, #5c6690); }
.mt-from {
  font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px;
  padding: 1px 6px; border-radius: 999px;
  background: rgba(99,102,241,.16); color: #a5b4fc;
}

.mt-options { display: flex; flex-wrap: wrap; gap: 6px; }
.mt-opt {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 999px;
  border: 1px solid var(--dg-border, rgba(255,255,255,.1));
  background: var(--dg-tint-1, rgba(255,255,255,.035));
  font-size: 12px; color: var(--dg-text-soft, #99a3c4);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .12s ease;
}
.mt-opt:hover { transform: translateY(-1px); border-color: var(--dg-blue, #6366f1); background: var(--dg-tint-2, rgba(255,255,255,.07)); }
.mt-opt.has-cfg {
  border-color: color-mix(in srgb, var(--dg-purple, #a855f7) 45%, transparent);
  background: color-mix(in srgb, var(--dg-purple, #a855f7) 10%, transparent);
  color: var(--dg-text, #eef1fb);
}
/* The strike-through belongs on the name and the price, not on the chip
   that explains why: struck-through text inside a small coloured pill is
   close to unreadable, and it is the one part the reader needs. */
.mt-opt.oos .mt-oclick { opacity: .6; }
.mt-opt.oos .mt-oname, .mt-opt.oos .mt-odelta { text-decoration: line-through; }
/* Hidden is not struck through: the option still exists and is still
   sellable at the counter, it just is not on the customer menu. Dimmed
   and dashed says "set aside" where the strike-through says "gone". */
.mt-opt.hid { border-style: dashed; }
.mt-opt.hid .mt-oclick { opacity: .7; }

/* The option's own two switches. The row is no longer a single button, so
   the name is the click target for editing and these sit beside it. */
.mt-opt { padding-right: 5px; }
.mt-oclick { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.mt-oacts { display: inline-flex; align-items: center; gap: 4px; margin-left: 2px; }
.mt-obtn {
  font: 700 10.5px/1 Inter, system-ui, sans-serif; letter-spacing: .02em;
  padding: 5px 8px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--dg-border, rgba(255,255,255,.14));
  background: var(--dg-tint-2, rgba(255,255,255,.06));
  color: var(--dg-text-soft, #99a3c4);
  transition: background .14s ease, color .14s ease, border-color .14s ease;
}
.mt-obtn:hover:not(:disabled) { color: var(--dg-text, #eef1fb); border-color: var(--dg-blue, #6366f1); background: var(--dg-tint-3, rgba(255,255,255,.1)); }
.mt-obtn.on { color: var(--dg-amber, #fbbf24); border-color: color-mix(in srgb, var(--dg-amber, #fbbf24) 50%, transparent); background: color-mix(in srgb, var(--dg-amber, #fbbf24) 14%, transparent); }
.mt-obtn:disabled { opacity: .5; cursor: default; }
body.lg-theme .mt-obtn { border-color: #d5d9e8; background: #f4f6fb; color: #475069; }
body.lg-theme .mt-obtn:hover:not(:disabled) { background: #e9edf8; color: #1e2233; }
body.lg-theme .mt-obtn.on { color: #92400e; border-color: #f0c67a; background: #fdf3e3; }
.mt-oname { font-weight: 600; }
.mt-odelta { font-size: 11px; font-weight: 700; color: var(--dg-amber, #fbbf24); }
.mt-othumb {
  width: 18px; height: 18px; border-radius: 6px; flex: 0 0 18px;
  background: var(--dg-tint-3, rgba(255,255,255,.1)) center/cover no-repeat;
  display: grid; place-items: center; font-size: 8px;
}
.mt-chips { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.mt-chip {
  font-size: 9px; font-weight: 700; letter-spacing: .2px; text-transform: uppercase;
  padding: 1px 5px; border-radius: 999px;
  background: color-mix(in srgb, var(--dg-purple, #a855f7) 20%, transparent);
  color: var(--dg-purple-2, #e9d5ff);
}
.mt-chip.bad { background: rgba(239,68,68,.2); color: #fca5a5; }
body.lg-theme .mt-chip.bad { background: #fdecec; color: #a61b1b; }
body.lg-theme .mt-chip { background: #eef0f7; color: #475069; }
/* A chip sits inside the dimmed name area, so it gets its own opacity
   back — the status is the thing that must stay readable. */
.mt-opt.oos .mt-chip, .mt-opt.hid .mt-chip { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .mt-branches, .mt-twist, .mt-opt, .pm-opt-cfg { transition: none; }
  .pm-opt-cfg.on .pm-cog { animation: none; }
}

/* Category media thumb + the buttons beside it. */
.cat-media { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; margin-right: 8px; flex: 0 0 34px; }
.cat-media-btn { margin-right: 6px; cursor: pointer; }

/* The option sheet is opened FROM the parameter modal, so it has to sit
   above it — at the shared overlay z-index it rendered underneath, which
   read as the button doing nothing. */
#optCfgModal { z-index: 1200; }
#optCfgModal .modal-sheet { box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .8); }

/* ============================================================
   The menu spreadsheet dialog.
   ============================================================ */
.csv-sheet { max-width: 760px; max-height: 88vh; overflow: auto; }
.csv-steps { display: grid; gap: 14px; margin-bottom: 16px; }
.csv-step { display: flex; gap: 12px; align-items: flex-start; }
.csv-n {
  width: 24px; height: 24px; flex: 0 0 24px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--dg-gradient, linear-gradient(135deg, #6366f1, #a855f7));
  color: #fff; font-size: 12px; font-weight: 800;
}
.csv-step b { font-size: 13.5px; }
.csv-step p { margin: 4px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--dg-text-soft, #99a3c4); }
.csv-step code {
  font-size: 11.5px; padding: 1px 5px; border-radius: 5px;
  background: var(--dg-tint-2, rgba(255,255,255,.07)); color: var(--dg-blue-2, #7db2ff);
}
.csv-ref { margin-bottom: 16px; }
.csv-ref summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--dg-blue-2, #7db2ff); }
.csv-ref-table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 12px; }
.csv-ref-table td { padding: 6px 8px; border-top: 1px solid var(--dg-border, rgba(255,255,255,.07)); vertical-align: top; }
.csv-ref-table td:first-child { white-space: nowrap; }
.csv-ref-table code { font-size: 11.5px; color: var(--dg-text, #eef1fb); }
.csv-req {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px;
  padding: 2px 6px; border-radius: 999px; white-space: nowrap;
  background: var(--dg-tint-2, rgba(255,255,255,.07)); color: var(--dg-text-faint, #5c6690);
}
.csv-req.must { background: rgba(245,158,11,.16); color: #fbbf24; }

#csvImportResults { margin-top: 14px; }
.csv-summary {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0;
}
.csv-summary span {
  font-size: 12px; padding: 5px 11px; border-radius: 999px;
  background: var(--dg-tint-1, rgba(255,255,255,.04));
  border: 1px solid var(--dg-border, rgba(255,255,255,.08));
  color: var(--dg-text-soft, #99a3c4);
}
.csv-summary b { color: var(--dg-text, #eef1fb); font-weight: 800; }
.csv-summary .csv-cfg { border-color: color-mix(in srgb, var(--dg-purple, #a855f7) 40%, transparent); color: var(--dg-purple, #c084fc); }

.csv-problems h4 { margin: 14px 0 8px; font-size: 13px; color: var(--dg-red, #ef4444); }
.csv-err-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.csv-err-table th {
  text-align: left; padding: 6px 8px; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .3px; color: var(--dg-text-faint, #5c6690);
  border-bottom: 1px solid var(--dg-border, rgba(255,255,255,.1));
}
.csv-err-table td { padding: 7px 8px; border-top: 1px solid var(--dg-border, rgba(255,255,255,.06)); vertical-align: top; }
.csv-err-table tr:hover td { background: var(--dg-tint-1, rgba(255,255,255,.03)); }
.csv-row { font-weight: 800; color: var(--dg-red, #f87171); white-space: nowrap; }
.csv-val { font-family: ui-monospace, monospace; font-size: 11.5px; color: var(--dg-amber, #fbbf24); word-break: break-all; }
.csv-err-table code { font-size: 11px; color: var(--dg-blue-2, #7db2ff); }

.csv-warns { margin-top: 12px; }
.csv-warns summary { cursor: pointer; font-size: 12px; color: var(--dg-amber, #fbbf24); }
.csv-warns ul { margin: 8px 0 0; padding-left: 18px; font-size: 12px; line-height: 1.7; color: var(--dg-text-soft, #99a3c4); }

.csv-actions { display: flex; gap: 10px; margin-top: 18px; }
.csv-actions .btn:last-child { flex: 1; }

/* ================= Open Store — the master switch =================
   One control decides whether the restaurant is reachable at all: the
   QR menu, online ordering, everything a guest can open. It used to be
   a small checkbox in a card halfway down the Tables view, which is the
   wrong weight for the thing that shuts the shop. It now sits next to
   the greeting, reads its state at a glance from across the counter,
   and follows both themes. */
.os-switch {
  display: flex; align-items: center; gap: 16px;
  padding: 10px 14px 10px 20px;
  border-radius: 999px;
  background: var(--dg-glass);
  border: 1px solid var(--dg-border);
  box-shadow: var(--dg-shadow-glow);
  transition: border-color .25s ease, background .25s ease;
}
.os-switch[hidden] { display: none; }
.os-copy { min-width: 0; }
.os-title {
  font-size: 16px; font-weight: 800; letter-spacing: -.2px;
  color: var(--dg-text); line-height: 1.15;
}
.os-sub {
  font-size: 12px; color: var(--dg-text-soft); margin-top: 2px; white-space: nowrap;
}
.os-toggle {
  background: none; border: none; padding: 0; cursor: pointer;
  flex: 0 0 auto; line-height: 0;
}
.os-toggle:disabled { cursor: progress; opacity: .6; }
.os-track {
  display: block; position: relative;
  width: 74px; height: 38px; border-radius: 999px;
  background: var(--dg-tint-3);
  border: 1px solid var(--dg-border);
  transition: background .28s cubic-bezier(.3,.9,.3,1.2), box-shadow .28s ease;
}
.os-knob {
  position: absolute; top: 3px; left: 3px;
  width: 30px; height: 30px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
  transition: transform .28s cubic-bezier(.3,.9,.3,1.2), background .28s ease;
}
/* Open: the brand gradient, and a soft halo so it reads as live. */
.os-toggle[aria-checked="true"] .os-track {
  background: linear-gradient(135deg, var(--dg-green) 0%, #12b981 100%);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--dg-green) 22%, transparent);
}
.os-toggle[aria-checked="true"] .os-knob { transform: translateX(36px); }
.os-toggle:focus-visible .os-track { outline: 2px solid var(--dg-blue); outline-offset: 3px; }
.os-switch.is-closed { border-color: color-mix(in srgb, var(--dg-red) 45%, transparent); }
.os-switch.is-closed .os-title { color: var(--dg-red); }

.os-mini {
  font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 999px;
  background: color-mix(in srgb, var(--dg-green) 18%, transparent);
  color: var(--dg-green);
  border: 1px solid color-mix(in srgb, var(--dg-green) 35%, transparent);
}
.os-mini.is-closed {
  background: color-mix(in srgb, var(--dg-red) 16%, transparent);
  color: var(--dg-red);
  border-color: color-mix(in srgb, var(--dg-red) 35%, transparent);
}

@media (max-width: 760px) {
  .os-switch { order: 3; width: 100%; justify-content: space-between; }
  .os-sub { white-space: normal; }
}

/* ---- The signup agreement ----
   One checkbox covering four documents. It is deliberately not styled as
   fine print: this is a binding agreement, so it gets a real surface, a
   real hit area and links that look like links. */
.dg-consent {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin: 4px 0 18px;
  padding: 13px 15px;
  border-radius: 13px;
  background: var(--dg-tint-1);
  border: 1px solid var(--dg-border);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--dg-text-soft);
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}
.dg-consent:hover { border-color: color-mix(in srgb, var(--dg-blue) 40%, transparent); }
.dg-consent input[type="checkbox"] {
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
  margin: 1px 0 0;
  accent-color: var(--dg-blue);
  cursor: pointer;
}
.dg-consent:has(input:checked) {
  background: color-mix(in srgb, var(--dg-blue) 10%, transparent);
  border-color: color-mix(in srgb, var(--dg-blue) 45%, transparent);
  color: var(--dg-text);
}
.dg-consent a { color: var(--dg-blue-2); text-decoration: underline; }
.dg-consent a:hover { color: var(--dg-blue); }
/* A disabled Create account button should look disabled, not broken. */
.dg-auth-card .btn.btn-primary:disabled { opacity: .45; cursor: not-allowed; filter: grayscale(.3); }


/* ============ Navigation: loading, not hung ============
   The pressed nav item pulses from the click until the destination has
   actually finished loading its data, and a thin bar runs across the
   top. Without it, the second or two between pressing a section and it
   appearing looks exactly like a click that did not register. */
.dg-nav-item.is-loading {
  position: relative;
  animation: ynPulse 1.15s ease-in-out infinite;
}
.dg-nav-item.is-loading::after {
  /* A travelling sheen over the item itself, so the pulse reads as
     progress rather than as a warning blink. */
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 20%, color-mix(in srgb, var(--dg-blue, #4d8dff) 26%, transparent) 50%, transparent 80%);
  background-size: 220% 100%;
  animation: ynSheen 1.15s linear infinite;
}
@keyframes ynPulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--dg-blue, #4d8dff) 42%, transparent); }
  55% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--dg-blue, #4d8dff) 0%, transparent); }
}
@keyframes ynSheen {
  from { background-position: 140% 0; }
  to { background-position: -60% 0; }
}
/* The label itself breathes, which is what makes it read as "working"
   on a narrow sidebar where the halo is barely visible. */
.dg-nav-item.is-loading .dg-nav-label { opacity: .72; }
.dg-nav-item.is-loading .dg-nav-icon { animation: ynIcon 1.15s ease-in-out infinite; display: inline-block; }
@keyframes ynIcon {
  0%, 100% { transform: scale(1); opacity: .8; }
  50% { transform: scale(1.14); opacity: 1; }
}

.yn-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2.5px;
  z-index: 4000;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s ease;
}
.yn-bar.is-on { opacity: 1; }
.yn-bar i {
  display: block;
  height: 100%;
  width: 40%;
  border-radius: 0 3px 3px 0;
  background: var(--dg-gradient, linear-gradient(135deg, #4d8dff, #b565f5));
  box-shadow: 0 0 12px color-mix(in srgb, var(--dg-blue, #4d8dff) 60%, transparent);
  animation: ynBar 1.05s cubic-bezier(.5, 0, .3, 1) infinite;
}
@keyframes ynBar {
  0% { transform: translateX(-100%) scaleX(.6); }
  55% { transform: translateX(60%) scaleX(1); }
  100% { transform: translateX(260%) scaleX(.5); }
}
/* On finishing, the bar completes its run rather than vanishing
   mid-stride — a progress bar that disappears halfway looks like a
   failure. */
.yn-bar.is-done i { animation: none; width: 100%; transform: none; transition: opacity .3s ease; opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .dg-nav-item.is-loading, .dg-nav-item.is-loading::after,
  .dg-nav-item.is-loading .dg-nav-icon, .yn-bar i { animation: none; }
  .dg-nav-item.is-loading { outline: 2px solid var(--dg-blue, #4d8dff); outline-offset: -2px; }
  .yn-bar i { width: 100%; }
}

/* ---- Orders pager: arrow, page number, arrow ---- */
.orders-pager { display:flex; align-items:center; justify-content:center; gap:18px; margin:18px 0 6px; padding:10px 14px; border-radius:14px; background:var(--dg-tint-1, rgba(255,255,255,.04)); border:1px solid var(--dg-border, rgba(255,255,255,.1)); }
.orders-pager-btn { width:42px; height:42px; border-radius:12px; border:1px solid var(--dg-border, rgba(255,255,255,.14)); background:var(--dg-tint-2, rgba(255,255,255,.06)); color:var(--dg-text, #eef1fb); font-size:18px; cursor:pointer; transition:background .15s, transform .15s, border-color .15s; }
.orders-pager-btn:hover:not(:disabled) { background:var(--dg-accent, #7c6cf0); border-color:var(--dg-accent, #7c6cf0); color:#fff; transform:translateY(-1px); }
.orders-pager-btn:disabled { opacity:.35; cursor:default; }
.orders-pager-mid { display:flex; flex-direction:column; align-items:center; min-width:120px; font-size:14px; }
.orders-pager-sub { font-size:11.5px; color:var(--dg-text-soft, #98a2c3); margin-top:2px; }
#ordersList.is-loading { opacity:.55; transition:opacity .15s; }
body.lg-theme .orders-pager { background:#fff; border-color:#dfe3ee; }
body.lg-theme .orders-pager-btn { background:#f4f5f9; border-color:#cfd3e3; color:#1e2233; }