@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;
  /* The raised surfaces. These were only ever defined for the dark theme,
     so in light everything drawn on them (the in-app dialogs, the offline
     bar, drawers) kept a near-black background under the light theme's
     dark text — unreadable. */
  --dg-bg-1: #ffffff;
  --dg-bg-2: #f6f7fb;
  /* Names some screens use that only ever had dark fallbacks written next
     to them (the plan upgrade card, the profile menu, the order window,
     settings cards). Defined here so the light theme gets light surfaces;
     the dark theme keeps its fallbacks exactly as before. */
  --dg-bg: #eef1fb;
  --dg-panel: #ffffff;
  --dg-panel-solid: #ffffff;
  --dg-accent: #6366f1;
  --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); } }
/* A slow glow breathing out from the card's edge. Two soft shadows in
   two hues, each fading in and out on its own rhythm so the colour
   drifts as it breathes. box-shadow only paints OUTSIDE the element, so
   nothing bleeds through the glass and the text stays crisp; only
   opacity animates, which the compositor handles without touching the
   main thread — no jank, no repaint. Dark: cool blue and violet. Light:
   warm marigold and peach. */
.dg-auth-card::before, .dg-auth-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none;
  will-change: opacity;
}
.dg-auth-card::before { box-shadow: 0 0 44px 12px rgba(96, 140, 255, 0.55); animation: dgGlowA 8s ease-in-out infinite; }
.dg-auth-card::after  { box-shadow: 0 0 56px 16px rgba(160, 110, 255, 0.5); animation: dgGlowB 11s ease-in-out infinite; }
body.lg-theme .dg-auth-card::before { box-shadow: 0 0 44px 12px rgba(247, 183, 51, 0.5); }
body.lg-theme .dg-auth-card::after  { box-shadow: 0 0 56px 16px rgba(255, 138, 101, 0.42); }
@keyframes dgGlowA { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
@keyframes dgGlowB { 0%, 100% { opacity: 0.9; } 45% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .dg-auth-card::before, .dg-auth-card::after { animation: none; opacity: 0.6; } }
.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.12); border-color: rgba(220,38,38,0.35); color: #c81e3a; }
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.12); border: 1px solid rgba(220,38,38,0.35); color: #c81e3a; }
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; }

/* ---- Tables: right-click → Print bill --------------------------------
   Shown only on tables whose order has items, and only when Billing/KOT
   setup has both "mark served" and "record default payment" on. Plain
   rgba colours (no color-mix) so the Windows 7 build renders it too. */
.dg-qb {
  position: absolute; left: 50%; bottom: calc(100% - 4px); z-index: 6;
  display: flex; align-items: center; gap: 7px; padding: 7px 11px 7px 9px;
  border-radius: 14px; white-space: nowrap; pointer-events: none;
  background: linear-gradient(180deg, #242e4a, #141a2c);
  border: 1px solid rgba(124, 156, 255, 0.45);
  box-shadow: 0 10px 26px -8px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.04) inset, 0 0 22px -6px rgba(99, 132, 255, 0.55);
  color: #eef2ff; font-size: 12px; font-weight: 700; letter-spacing: .01em;
  opacity: 0; transform: translate(-50%, 10px) scale(.6); transform-origin: 50% 100%;
  transition: opacity .18s ease, transform .42s cubic-bezier(.34, 1.56, .64, 1);
}
.dg-qb::after {
  content: ""; position: absolute; left: 50%; bottom: -6px; width: 11px; height: 11px; margin-left: -5.5px;
  background: #141a2c; border-right: 1px solid rgba(124, 156, 255, 0.45); border-bottom: 1px solid rgba(124, 156, 255, 0.45);
  transform: rotate(45deg); border-radius: 0 0 3px 0;
}
.dg-table-tile.has-quickbill:hover .dg-qb { opacity: 1; transform: translate(-50%, -6px) scale(1); transition-delay: .08s; }
.dg-qb-icon { display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; border-radius: 9px; background: rgba(255, 255, 255, 0.08); }
.dg-qb-printer { color: #c7d4ff; }
.dg-qb-mouse { color: #ffffff; }
.dg-qb-rbtn { fill: #7c9cff; }
.dg-qb-dot { width: 4px; height: 4px; border-radius: 50%; background: rgba(199, 212, 255, 0.55); }
.dg-qb-label { margin-left: 2px; color: #dfe6ff; }
.dg-table-tile.has-quickbill:hover .dg-qb-paper { animation: dg-qb-paper 1.6s ease-in-out infinite; }
.dg-table-tile.has-quickbill:hover .dg-qb-rbtn { animation: dg-qb-click 1.6s ease-in-out infinite; }
.dg-table-tile.has-quickbill:hover .dg-qb-mouse svg { animation: dg-qb-press 1.6s ease-in-out infinite; transform-origin: 50% 50%; }
@keyframes dg-qb-paper { 0%, 35% { transform: translateY(-3px); opacity: .5; } 60%, 100% { transform: translateY(1.5px); opacity: 1; } }
@keyframes dg-qb-click { 0%, 20%, 60%, 100% { opacity: 1; } 30%, 45% { opacity: .35; } }
@keyframes dg-qb-press { 0%, 22%, 52%, 100% { transform: scale(1); } 32%, 42% { transform: scale(.9); } }
.dg-table-tile.has-quickbill .dg-table-top { transition: box-shadow .25s ease; }
.dg-table-tile.has-quickbill:hover .dg-table-top { box-shadow: 0 0 0 2px rgba(124, 156, 255, 0.55), 0 0 26px -4px rgba(124, 156, 255, 0.6); }
/* while it runs, and the moment it is done */
.dg-table-tile.is-billing .dg-qb { opacity: 0 !important; }
.dg-table-tile.is-billing .dg-table-top { animation: dg-qb-busy 0.9s ease-in-out infinite; }
@keyframes dg-qb-busy { 0%, 100% { box-shadow: 0 0 0 2px rgba(124, 156, 255, 0.35), 0 0 14px -4px rgba(124, 156, 255, 0.5); } 50% { box-shadow: 0 0 0 4px rgba(124, 156, 255, 0.75), 0 0 30px -2px rgba(124, 156, 255, 0.85); } }
.dg-table-tile.is-billed .dg-table-top { animation: dg-qb-done 1.3s ease-out; }
@keyframes dg-qb-done { 0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.9); } 100% { box-shadow: 0 0 0 16px rgba(52, 211, 153, 0); } }
@media (prefers-reduced-motion: reduce) { .dg-qb, .dg-qb * { animation: none !important; transition: opacity .15s ease !important; } }
/* Light theme: a white glass bubble with indigo accents. */
body.lg-theme .dg-qb {
  background: linear-gradient(180deg, #ffffff, #f4f5ff);
  border-color: rgba(99, 102, 241, 0.35);
  box-shadow: 0 10px 24px -10px rgba(30, 41, 59, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.8) inset, 0 0 20px -8px rgba(99, 102, 241, 0.45);
  color: #1e2233;
}
body.lg-theme .dg-qb::after { background: #f4f5ff; border-color: rgba(99, 102, 241, 0.35); }
body.lg-theme .dg-qb-icon { background: rgba(99, 102, 241, 0.1); }
body.lg-theme .dg-qb-printer { color: #4f46e5; }
body.lg-theme .dg-qb-mouse { color: #312e81; }
body.lg-theme .dg-qb-rbtn { fill: #6366f1; }
body.lg-theme .dg-qb-dot { background: rgba(79, 70, 229, 0.4); }
body.lg-theme .dg-qb-label { color: #1e2233; }
body.lg-theme .dg-table-tile.has-quickbill:hover .dg-table-top { box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.5), 0 0 22px -6px rgba(99, 102, 241, 0.55); }
body.lg-theme .dg-table-tile.is-billing .dg-table-top { animation-name: dg-qb-busy-lg; }
@keyframes dg-qb-busy-lg { 0%, 100% { box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.3), 0 0 12px -4px rgba(99, 102, 241, 0.4); } 50% { box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.65), 0 0 26px -4px rgba(99, 102, 241, 0.7); } }
/* Keep the hovered table (and its bubble) above the panel heading and the
   neighbouring tiles. Chromium 108 — the Windows 7 build — stacked the
   heading text over the bubble in the light theme without this. */
.dg-table-tile.has-quickbill:hover { z-index: 30; }
.dg-table-tile.has-quickbill .dg-qb { z-index: 31; isolation: isolate; }

/* ---- Tables: hold right-click → Settle & Complete ---------------------
   The hint bubble now has up to two rows (Print bill · right-click,
   Settle & Complete · hold right-click). While the right button is held,
   liquid rises inside the round table top; at the top the order is
   settled. Plain rgba colours and transforms only — no color-mix, no
   @property — so Chromium 108 (the Windows 7 build) draws it the same. */
.dg-qb.dg-qb-two, .dg-qb { flex-direction: column; align-items: stretch; gap: 6px; }
.dg-qb-row { display: flex; align-items: center; gap: 7px; }
.dg-qb-how { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 6px; font-size: 10.5px; font-weight: 600; letter-spacing: .02em; background: rgba(124, 156, 255, 0.16); color: #b9c8ff; }
.dg-qb-since { font-size: 11px; font-weight: 500; text-align: center; color: rgba(223, 230, 255, 0.7); padding-top: 4px; border-top: 1px solid rgba(124, 156, 255, 0.22); }
.dg-qb-settle { color: #6ee7b7; }
.dg-qb-tick { stroke-dasharray: 12; stroke-dashoffset: 0; }
.dg-qb-holdmouse { position: relative; }
.dg-qb-ring { position: absolute; left: 50%; top: 50%; margin: -17px 0 0 -17px; transform: rotate(-90deg); pointer-events: none; }
.dg-qb-ring circle { fill: none; stroke: #34d399; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 97.4; stroke-dashoffset: 97.4; opacity: 0; }
.dg-table-tile.has-quickbill:hover .dg-qb-ring circle { animation: dg-qb-ring 2.2s ease-in-out infinite; }
.dg-table-tile.has-quickbill:hover .dg-qb-rhold { animation: dg-qb-rhold 2.2s ease-in-out infinite; }
.dg-table-tile.has-quickbill:hover .dg-qb-tick { animation: dg-qb-tick 2.2s ease-in-out infinite; }
@keyframes dg-qb-ring { 0%, 12% { stroke-dashoffset: 97.4; opacity: 0; } 18% { opacity: 1; } 62% { stroke-dashoffset: 0; opacity: 1; } 80%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes dg-qb-rhold { 0%, 12% { opacity: 1; } 16%, 62% { opacity: .35; } 70%, 100% { opacity: 1; } }
@keyframes dg-qb-tick { 0%, 60% { stroke-dashoffset: 12; } 74%, 100% { stroke-dashoffset: 0; } }
.dg-table-tile.is-filling .dg-qb, .dg-table-tile.is-settling .dg-qb, .dg-table-tile.is-settled .dg-qb { opacity: 0 !important; }

/* The liquid. Two slowly turning rounded squares make the moving surface;
   their top edge is the level, raised from below the table to above it. */
.dg-table-top { isolation: isolate; }
.dg-table-label { position: relative; z-index: 1; }
.dg-fluid { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; pointer-events: none; z-index: 0; }
.dg-fluid-wave {
  position: absolute; left: 50%; width: 210%; height: 210%; margin-left: -105%;
  top: 112%; border-radius: 42%;
  transition: top .28s cubic-bezier(.4, 0, .2, 1);
  animation: dg-fluid-spin 2.4s linear infinite;
}
.dg-fluid-wave.w1 { background: rgba(16, 185, 129, 0.82); }
.dg-fluid-wave.w2 { background: rgba(110, 231, 183, 0.45); border-radius: 38%; animation-duration: 3.6s; animation-direction: reverse; }
.dg-table-tile.is-filling .dg-fluid-wave { top: -12%; transition: top var(--dg-fill-ms, 750ms) linear; }
.dg-table-tile.is-filling .dg-fluid-wave.w2 { top: -20%; }
.dg-table-tile.is-settling .dg-fluid-wave, .dg-table-tile.is-settled .dg-fluid-wave { top: -20%; transition: none; }
@keyframes dg-fluid-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.dg-table-tile.is-filling .dg-table-label, .dg-table-tile.is-settling .dg-table-label, .dg-table-tile.is-settled .dg-table-label { color: #ffffff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); }
.dg-table-tile.is-filling .dg-table-top, .dg-table-tile.is-settling .dg-table-top { border-color: rgba(52, 211, 153, 0.9); box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.35), 0 0 26px -4px rgba(52, 211, 153, 0.7); animation: none; }
.dg-table-tile.is-settling .dg-table-top { animation: dg-settle-busy 0.9s ease-in-out infinite; }
@keyframes dg-settle-busy { 0%, 100% { box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.35), 0 0 14px -4px rgba(52, 211, 153, 0.5); } 50% { box-shadow: 0 0 0 5px rgba(52, 211, 153, 0.7), 0 0 30px -2px rgba(52, 211, 153, 0.85); } }
.dg-table-tile.is-settled .dg-table-top { animation: dg-qb-done 1.1s ease-out; border-color: rgba(52, 211, 153, 0.9); }
.dg-table-tile.is-filling .dg-table-setting, .dg-table-tile.is-settling .dg-table-setting { transform: translateY(-3px) scale(1.04); }
@media (prefers-reduced-motion: reduce) { .dg-fluid-wave { animation: none; border-radius: 0; } }

body.lg-theme .dg-qb-how { background: rgba(99, 102, 241, 0.1); color: #4338ca; }
body.lg-theme .dg-qb-since { color: #5b6280; border-top-color: rgba(99, 102, 241, 0.18); }
body.lg-theme .dg-qb-settle { color: #059669; }
body.lg-theme .dg-qb-ring circle { stroke: #10b981; }
body.lg-theme .dg-fluid-wave.w1 { background: rgba(16, 185, 129, 0.78); }
body.lg-theme .dg-fluid-wave.w2 { background: rgba(52, 211, 153, 0.38); }
/* compact two-line labels, and the sideways nudge near screen edges */
.dg-qb { margin-left: var(--dg-qb-shift, 0px); padding: 8px 12px 8px 9px; }
.dg-qb::after { left: calc(50% - var(--dg-qb-shift, 0px)); }
.dg-qb-label { display: flex; flex-direction: column; line-height: 1.2; }
.dg-qb-how { margin: 2px 0 0; align-self: flex-start; }
.dg-qb-row + .dg-qb-row { padding-top: 6px; border-top: 1px solid rgba(124, 156, 255, 0.16); }
body.lg-theme .dg-qb-row + .dg-qb-row { border-top-color: rgba(99, 102, 241, 0.14); }
/* Light theme: the label stays dark (with a soft halo) while the liquid
   rises, and turns white once the table is full. */
body.lg-theme .dg-table-tile.is-filling .dg-table-label { color: #1e2233; text-shadow: 0 0 6px rgba(255, 255, 255, 0.95), 0 0 2px rgba(255, 255, 255, 0.95); }

/* The signed-in bar is drawn with dark-theme inline colours (common.js);
   on the light theme its text was white on near-white. */
body.lg-theme #youshiWho { color: #5b6478 !important; background: rgba(15,23,42,.03) !important; border-top-color: rgba(15,23,42,.07) !important; }
body.lg-theme #youshiWho > span > b { color: #1e2233 !important; }
body.lg-theme #youshiWho a:not(.op-mytasks) { color: #6d4fd8 !important; }

/* =====================================================================
   Light theme: colours written for the dark theme.
   Several screens set text in pale "on dark" colours (amber #fbbf24,
   mint #34d399, lilac #a78bfa …), some in stylesheets and some inline
   from scripts. On the light theme's white cards those were almost
   invisible. The same hues, deep enough to read on white:
   ===================================================================== */
body.lg-theme .pos-badge-veg { background: rgba(16, 185, 129, .14); color: #047857; }
body.lg-theme .cfg-warn { color: #b45309; }
body.lg-theme .prn-purpose--kot { color: #b45309; border-color: rgba(180, 83, 9, .35); }
body.lg-theme .pill.ok { background: rgba(16, 185, 129, .14); color: #047857; }
body.lg-theme .mm-fav { color: #8f897d; }
body.lg-theme .crm-stat .n { color: #111827; }
body.lg-theme [style*="color:#fbbf24"], body.lg-theme [style*="color: #fbbf24"], body.lg-theme [style*="color:#fcd34d"], body.lg-theme [style*="color: #fcd34d"], body.lg-theme [style*="color:#f59e0b"] { color: #b45309 !important; }
body.lg-theme [style*="color:#34d399"], body.lg-theme [style*="color: #34d399"], body.lg-theme [style*="color:#4ade80"], body.lg-theme [style*="color: #4ade80"] { color: #047857 !important; }
body.lg-theme [style*="color:#a78bfa"], body.lg-theme [style*="color: #a78bfa"], body.lg-theme [style*="color:#c4b5fd"] { color: #6d28d9 !important; }
body.lg-theme [style*="color:#f87171"], body.lg-theme [style*="color: #f87171"], body.lg-theme [style*="color:#fca5a5"], body.lg-theme [style*="color: #fca5a5"] { color: #dc2626 !important; }
body.lg-theme [style*="color:#60a5fa"], body.lg-theme [style*="color: #60a5fa"], body.lg-theme [style*="color:#7db2ff"], body.lg-theme [style*="color:#93c5fd"] { color: #2563eb !important; }
body.lg-theme [style*="color:#f97316"], body.lg-theme [style*="color: #f97316"] { color: #c2410c !important; }
/* Dark theme: an unstyled link inside a hint line kept the browser's
   default dark blue on the dark background. */
body.dg-theme .hint a:not([class]), body.dg-theme .sub a:not([class]) { color: #a5b4fc; }

/* "Who's signed in" strip with Switch user / Lock (common.js) */
.yw-bar { display: flex; align-items: center; justify-content: flex-start; text-align: left; gap: 10px; padding: 7px 18px; font-size: 12.5px; color: var(--dg-text-soft, #b7bfdc); background: var(--dg-tint-1, rgba(255,255,255,.03)); border-top: 1px solid var(--dg-border); }
.yw-av { width: 26px; height: 26px; flex: none; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(160deg, #8b78ff, #6850d8); color: #fff; font-weight: 700; font-size: 12px; }
.yw-who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yw-who b { color: var(--dg-text, #fff); }
.yw-acts { margin-left: auto; display: flex; gap: 6px; flex: none; }
.yw-btn { min-height: 28px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--dg-border); background: transparent; color: var(--dg-text-soft); font-size: 12px; font-weight: 600; font-family: inherit; cursor: pointer; transition: transform .12s, background .15s, border-color .15s, color .15s; }
.yw-btn:hover { background: var(--dg-tint-2); color: var(--dg-text); }
.yw-btn:active { transform: scale(.96); }
.yw-btn-pri { border-color: rgba(139, 120, 255, .45); background: rgba(139, 120, 255, .14); color: #c4b8ff; }
.yw-btn-pri:hover { background: rgba(139, 120, 255, .24); color: #fff; border-color: #8b78ff; }
body.lg-theme .yw-btn-pri { color: #5b45c9; background: rgba(104, 80, 216, .09); border-color: rgba(104, 80, 216, .35); }
body.lg-theme .yw-btn-pri:hover { color: #4a35b5; background: rgba(104, 80, 216, .16); }
@media (prefers-reduced-motion: reduce) { .yw-btn { transition: none; } }

/* ---------------------------------------------------------------- 3.2.0
   Desktop app: the window draws its own title bar, fixed at the top
   (--yb-h, set by the app). Every full-screen overlay and side drawer
   starts below it, so a drawer's heading and close button are never
   hidden under the title bar. In a browser --yb-h is unset: 0. */
.inv-drawer-wrap, .crm-drawer-wrap, .um-drawer-wrap, .op-veil, .op-modal, .pks-drawer-ov, .pks-drawer,
.modal-overlay, .yd-overlay, .yo-overlay, .yss-ov, .dg-popup-backdrop, .pos-config-backdrop, #youshiUpgrade { top: var(--yb-h, 0px) !important; }
.pos-config-sheet { max-height: calc(82vh - var(--yb-h, 0px)); }