/* ============================================================
   Kappino — Premium SaaS UI
   Light-mode only · Emerald primary · Violet AI accent
   ============================================================ */

:root {
  /* Palette */
  --bg: #f6f8f7;
  --bg-elev: #ffffff;
  --surface: #ffffff;
  --surface-2: #fafbfa;
  --border: #e6ebe8;
  --border-soft: #eef2ef;
  --border-strong: #d8e0db;

  --text: #0f1a15;
  --text-2: #3b4a43;
  --text-3: #6b7a74;
  --text-muted: #94a29c;

  --emerald-50: #ecfdf5;
  --emerald-100: #d1fae5;
  --emerald-200: #a7f3d0;
  --emerald-500: #10b981;
  --emerald-600: #059669;
  --emerald-700: #047857;

  --violet-50: #f5f3ff;
  --violet-100: #ede9fe;
  --violet-500: #8b5cf6;
  --violet-600: #7c3aed;

  --amber-50: #fffbeb;
  --amber-500: #f59e0b;
  --rose-50: #fff1f2;
  --rose-500: #f43f5e;
  --blue-500: #0ea5e9;

  /* Shadows (layered, soft) */
  --shadow-sm: 0 1px 2px rgba(16, 40, 28, 0.04), 0 1px 1px rgba(16, 40, 28, 0.03);
  --shadow-md: 0 1px 2px rgba(16, 40, 28, 0.04), 0 8px 24px -8px rgba(16, 40, 28, 0.08);
  --shadow-lg: 0 2px 4px rgba(16, 40, 28, 0.04), 0 20px 40px -16px rgba(16, 40, 28, 0.14);
  --shadow-ai: 0 10px 30px -10px rgba(139, 92, 246, 0.35);

  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;

  --tx: cubic-bezier(.2, .8, .2, 1);
  --dur: 180ms;
}

* { box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; }
body {
  margin: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4 { font-family: "Plus Jakarta Sans", Inter, sans-serif; margin: 0; letter-spacing: -0.01em; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select { font-family: inherit; }
ul { list-style: none; padding: 0; margin: 0; }

/* ============================================================
   App shell
   ============================================================ */
.app-shell {
  display: grid;
  grid-template-columns: 268px 1fr;
  height: 100vh;
  background: var(--bg);
  overflow: hidden; /* sidebar and main scroll independently */
}

/* ============================================================
   App shell — column transitions for collapse/expand
   ============================================================ */
.app-shell { transition: grid-template-columns 240ms cubic-bezier(.2,.8,.2,1); }
.app-shell.sb-collapsed { grid-template-columns: 76px 1fr; }

/* ============================================================
   Sidebar
   ============================================================ */
.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  background: linear-gradient(180deg, #ffffff 0%, #fbfcfb 100%);
  border-right: 1px solid var(--border);
  padding: 18px 14px 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow: hidden; /* outer doesn't scroll — only the nav does */
}
.sidebar > .nav { overflow-y: auto; overflow-x: hidden; padding-right: 4px; }
.sidebar > .nav::-webkit-scrollbar { width: 6px; }
.sidebar > .nav::-webkit-scrollbar-thumb { background: #e2e8e4; border-radius: 4px; }

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 6px 6px;
}
.brand-mark {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--emerald-500), var(--emerald-700));
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 6px 18px -4px rgba(16, 185, 129, 0.5);
  overflow: hidden;
}
/* Custom-logo swap. branding.js adds .has-custom-logo + a <img class="brand-logo">
   when /assets/branding/logo.png loads successfully. We strip the gradient
   background + drop-shadow so the user's logo isn't framed in green, and hide
   the inline SVG fallback. */
.brand-mark .brand-logo {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}
.brand-mark.has-custom-logo {
  background: transparent;
  box-shadow: none;
}
.brand-mark.has-custom-logo > svg { display: none; }

/* Wordmark / lockup mode — landscape logo replaces both the icon tile
   AND the "Kappino · AI Restaurant OS" text. Triggered by branding.js
   when the uploaded logo.png has width/height > 1.3. */
.brand.lockup-logo .brand-mark,
.brand.lockup-logo .brand-text { display: none; }
.brand.lockup-logo .brand-lockup-img {
  max-width: 100%;
  max-height: 44px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  flex: 1 1 auto;
  min-width: 0;
}
/* Collapsed sidebar can't fit the wordmark — fall back to the default
   green SVG tile so there's still a recognisable brand mark in the
   narrow rail. */
.sidebar.collapsed .brand.lockup-logo .brand-lockup-img { display: none; }
.sidebar.collapsed .brand.lockup-logo .brand-mark {
  display: grid;
  background: linear-gradient(135deg, var(--emerald-500), var(--emerald-700));
  box-shadow: 0 6px 18px -4px rgba(16, 185, 129, 0.5);
}
.sidebar.collapsed .brand.lockup-logo .brand-mark > svg { display: block; }
.brand-text { line-height: 1.1; flex: 1; }
.brand-name {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -0.02em;
  color: var(--text);
}
.brand-sub { font-size: 11px; color: var(--text-3); margin-top: 2px; letter-spacing: .02em; }
.sidebar-collapse {
  width: 26px; height: 26px;
  border-radius: 8px;
  color: var(--text-3);
  display: grid; place-items: center;
  transition: background var(--dur) var(--tx), color var(--dur) var(--tx), transform var(--dur) var(--tx);
}
.sidebar-collapse:hover { background: var(--surface-2); color: var(--text); }
.sidebar-collapse svg { transition: transform var(--dur) var(--tx); }

/* ============================================================
   Sidebar — Collapsed (icon-rail) state
   ============================================================ */
.sidebar.collapsed { padding: 18px 10px 20px; }

/* Brand: hide text, center the mark; promote collapse btn to a floating tab */
.sidebar.collapsed .brand {
  flex-direction: column;
  gap: 0;
  padding: 4px 0 6px;
}
.sidebar.collapsed .brand-text { display: none; }
.sidebar.collapsed .sidebar-collapse {
  margin-top: 8px;
  width: 30px;
  height: 30px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 50%;
}
.sidebar.collapsed .sidebar-collapse:hover {
  background: var(--emerald-50);
  border-color: var(--emerald-200);
  color: var(--emerald-600);
}
.sidebar.collapsed .sidebar-collapse svg { transform: rotate(180deg); }

/* Branch selector → just the avatar */
.sidebar.collapsed .branch-selector {
  padding: 6px;
  width: 48px;
  height: 48px;
  margin: 0 auto;
  justify-content: center;
}
.sidebar.collapsed .branch-meta,
.sidebar.collapsed .branch-selector > svg:last-child { display: none; }

/* Nav: hide titles & labels, center icons, separate groups with hairlines */
.sidebar.collapsed .nav { gap: 6px; }
.sidebar.collapsed .nav-group {
  position: relative;
  padding: 4px 0;
}
.sidebar.collapsed .nav-group + .nav-group { border-top: 1px solid var(--border-soft); margin-top: 4px; padding-top: 8px; }
.sidebar.collapsed .nav-title { display: none; }

.sidebar.collapsed .nav-item {
  width: 44px;
  height: 40px;
  margin: 0 auto;
  padding: 0;
  justify-content: center;
  position: relative;
}
.sidebar.collapsed .nav-item span,
.sidebar.collapsed .nav-item .nav-tag,
.sidebar.collapsed .nav-item .nav-badge { display: none; }
.sidebar.collapsed .nav-item.active::before {
  left: -10px;
  top: 6px;
  bottom: 6px;
}

/* Subtle dot indicator if a nav item has a badge / tag (preserves info) */
.sidebar.collapsed .nav-item:has(.nav-badge)::after,
.sidebar.collapsed .nav-item:has(.nav-tag.live)::after,
.sidebar.collapsed .nav-item:has(.nav-tag.new)::after {
  content: "";
  position: absolute;
  top: 6px;
  right: 6px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--emerald-500);
  border: 2px solid #fff;
}
.sidebar.collapsed .nav-item:has(.nav-tag.live)::after { background: #ef4444; }
.sidebar.collapsed .nav-item:has(.nav-tag.new)::after  { background: var(--violet-500); }

/* Promo card hidden when collapsed */
.sidebar.collapsed .sidebar-promo { display: none; }

/* Smooth fades for content visibility */
.sidebar { transition: padding 240ms cubic-bezier(.2,.8,.2,1); }
.sidebar .brand-text,
.sidebar .branch-meta,
.sidebar .nav-item span,
.sidebar .nav-title,
.sidebar .sidebar-promo {
  transition: opacity 180ms cubic-bezier(.2,.8,.2,1);
}

.branch-selector {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: pointer;
  transition: border-color var(--dur) var(--tx), box-shadow var(--dur) var(--tx);
}
.branch-selector:hover { border-color: var(--emerald-200); box-shadow: var(--shadow-sm); }
.branch-avatar {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--emerald-500), var(--emerald-700));
  color: #fff;
  font-weight: 700;
  font-size: 11px;
  display: grid; place-items: center;
}
.branch-meta { flex: 1; line-height: 1.2; }
.branch-label { font-size: 10px; color: var(--text-3); text-transform: uppercase; letter-spacing: .08em; }
.branch-name { font-size: 13px; font-weight: 600; color: var(--text); margin-top: 2px; }

/* Nav */
.nav { display: flex; flex-direction: column; gap: 16px; flex: 1; }
.nav-group { display: flex; flex-direction: column; gap: 2px; }
.nav-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
  padding: 6px 10px 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.ai-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--violet-500);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, .2);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(139, 92, 246, .2); }
  50% { box-shadow: 0 0 0 5px rgba(139, 92, 246, .08); }
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 10px;
  color: var(--text-2);
  font-weight: 500;
  font-size: 13.5px;
  cursor: pointer;
  position: relative;
  transition: background var(--dur) var(--tx), color var(--dur) var(--tx), transform var(--dur) var(--tx);
}
.nav-item svg { color: var(--text-3); transition: color var(--dur) var(--tx); flex-shrink: 0; }
.nav-item:hover { background: var(--surface-2); color: var(--text); }
.nav-item:hover svg { color: var(--emerald-600); }
.nav-item.active {
  background: var(--emerald-50);
  color: var(--emerald-700);
  font-weight: 600;
}
.nav-item.active svg { color: var(--emerald-600); }
.nav-item.active::before {
  content: "";
  position: absolute;
  left: -14px; top: 8px; bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--emerald-500);
}
.nav-item span { flex: 1; }
.nav-item.ai.active { background: var(--violet-50); color: var(--violet-600); }
.nav-item.ai.active::before { background: var(--violet-500); }
.nav-item.ai.active svg { color: var(--violet-600); }

.nav-badge {
  background: var(--emerald-500);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 20px;
  line-height: 1;
}
.nav-tag {
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.nav-tag.live { background: #fee2e2; color: #b91c1c; }
.nav-tag.live::before { content: "●"; margin-right: 3px; color: #ef4444; animation: pulse 1.4s infinite; }
.nav-tag.new { background: var(--violet-100); color: var(--violet-600); }

/* Sidebar promo */
.sidebar-promo {
  position: relative;
  padding: 16px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #4c1d95 100%);
  color: #fff;
  overflow: hidden;
  margin-top: auto;
  flex-shrink: 0; /* prevent flex-column collapse when nav is tall */
}
/* Lock the size of the brand row and branch selector too, so the promo never gets squeezed */
.sidebar > .brand,
.sidebar > .branch-selector { flex-shrink: 0; }
/* Let nav grow but allow scrolling if it overflows the available space */
.sidebar > .nav { flex: 1 1 auto; min-height: 0; }
.promo-glow {
  position: absolute;
  width: 180px; height: 180px;
  top: -60px; right: -60px;
  background: radial-gradient(circle, rgba(139, 92, 246, .6), transparent 70%);
  filter: blur(20px);
}
.promo-icon {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .12);
  display: grid; place-items: center;
  backdrop-filter: blur(10px);
  margin-bottom: 10px;
  position: relative;
}
.promo-title { font-weight: 700; font-size: 14px; position: relative; }
.promo-sub { font-size: 12px; color: rgba(255, 255, 255, .7); margin-top: 2px; position: relative; }
.promo-btn {
  margin-top: 12px;
  width: 100%;
  padding: 8px 12px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .18);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  border-radius: 8px;
  transition: background var(--dur) var(--tx);
  position: relative;
  backdrop-filter: blur(10px);
}
.promo-btn:hover { background: rgba(255, 255, 255, .22); }

/* ============================================================
   Main
   ============================================================ */
.main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
}
.main::-webkit-scrollbar { width: 8px; }
.main::-webkit-scrollbar-thumb { background: #d8e0db; border-radius: 4px; }
.main::-webkit-scrollbar-thumb:hover { background: #a8b2ad; }

/* Topbar */
.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 28px;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid var(--border-soft);
}
.topbar-left, .topbar-right { display: flex; align-items: center; gap: 10px; }
.topbar-left { flex: 1; min-width: 0; }

.menu-toggle { display: none; }

.search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  max-width: 480px;
  padding: 9px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-3);
  transition: all var(--dur) var(--tx);
}
.search input { min-width: 0; } /* lets the placeholder ellipsis-truncate cleanly */
.search.open { background: #fff; border-color: var(--emerald-200); box-shadow: 0 0 0 4px rgba(16, 185, 129, .08); }

/* Inline dropdown — appears beneath the topbar search as the user types.
   Replaces the old click-to-open command palette modal. */
.search-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0; right: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .18), 0 4px 12px -6px rgba(0, 0, 0, .08);
  max-height: 60vh;
  overflow-y: auto;
  z-index: 50;
  padding: 6px;
  animation: srDrop .12s ease-out;
}
@keyframes srDrop {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.search-dropdown .sr-group {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .07em;
  font-weight: 600;
  color: var(--text-3);
  padding: 10px 12px 4px;
}
.search-dropdown .sr-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13.5px;
  color: var(--text);
  transition: background .12s ease;
}
.search-dropdown .sr-row:hover,
.search-dropdown .sr-row.hl {
  background: var(--surface-2);
}
.search-dropdown .sr-ico {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  font-size: 14px;
  flex-shrink: 0;
}
.search-dropdown .sr-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.search-dropdown .sr-label {
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-dropdown .sr-sub {
  font-size: 11.5px;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-dropdown .sr-row.hl .sr-sub,
.search-dropdown .sr-row:hover .sr-sub {
  color: var(--text-2);
}
.search-dropdown .sr-kbd {
  font-family: inherit;
  font-size: 10px;
  padding: 2px 5px;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-3);
  background: #fff;
  opacity: 0;
  transition: opacity .12s ease;
}
.search-dropdown .sr-row.hl .sr-kbd,
.search-dropdown .sr-row:hover .sr-kbd { opacity: 1; }
.search-dropdown .sr-empty {
  padding: 22px 14px;
  text-align: center;
  font-size: 12.5px;
  color: var(--text-3);
}
.search:focus-within {
  background: #fff;
  border-color: var(--emerald-200);
  box-shadow: 0 0 0 4px rgba(16, 185, 129, .08);
}
.search input {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font-size: 13.5px;
}
.search input::placeholder { color: var(--text-muted); }
.search kbd {
  font-family: inherit;
  font-size: 11px;
  padding: 2px 6px;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-3);
  background: #fff;
}

.icon-btn {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  color: var(--text-2);
  border-radius: 10px;
  transition: background var(--dur) var(--tx), color var(--dur) var(--tx);
  position: relative;
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); }
.badge-btn .dot {
  position: absolute;
  top: 8px; right: 10px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--rose-500);
  border: 2px solid #fff;
}

.pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 13px;
  transition: all var(--dur) var(--tx);
}
.ai-pill {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  color: #fff;
  box-shadow: var(--shadow-ai);
}
.ai-pill:hover { transform: translateY(-1px); box-shadow: 0 14px 30px -10px rgba(139, 92, 246, .5); }
.ai-spark {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 10px 2px rgba(255, 255, 255, .8);
  animation: spark 1.8s ease-in-out infinite;
}
@keyframes spark { 0%, 100% { opacity: .7; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.2); } }

.user-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 10px 4px 4px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #fff;
  transition: border-color var(--dur) var(--tx);
  cursor: pointer;
}
.user-chip:hover { border-color: var(--emerald-200); }
.avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--emerald-500), var(--emerald-700));
  color: #fff;
  font-weight: 700;
  font-size: 11px;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.avatar.sm { width: 26px; height: 26px; font-size: 10px; }
.av-violet { background: linear-gradient(135deg, #a78bfa, #7c3aed); }
.av-amber { background: linear-gradient(135deg, #fbbf24, #d97706); }
.av-rose { background: linear-gradient(135deg, #fda4af, #e11d48); }
.av-blue { background: linear-gradient(135deg, #60a5fa, #2563eb); }
.av-emerald { background: linear-gradient(135deg, #34d399, #059669); }
.avatar.plus { background: #f1f5f3; color: var(--text-2); font-size: 10px; }

.user-meta { line-height: 1.2; }
.user-name { font-weight: 600; font-size: 12.5px; }
.user-role { font-size: 11px; color: var(--text-3); margin-top: 1px; }

/* ============================================================
   View container
   ============================================================ */
.view-container { padding: 28px; }
.view { display: none; animation: fadeIn .3s var(--tx); }
.view.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* Page header */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.crumb { font-size: 12px; color: var(--text-3); font-weight: 500; }
.page-title {
  font-size: 26px;
  font-weight: 700;
  margin-top: 4px;
  color: var(--text);
}
.wave { display: inline-block; animation: wave 2.4s ease-in-out infinite; transform-origin: 70% 70%; }
@keyframes wave { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(14deg); } 30% { transform: rotate(-8deg); } 45% { transform: rotate(14deg); } 60% { transform: rotate(0); } }
.page-sub { color: var(--text-3); margin-top: 4px; font-size: 13.5px; }
.page-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

.ai-gradient {
  background: linear-gradient(135deg, #8b5cf6 0%, #10b981 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 800;
}

/* Segmented */
.segmented {
  display: inline-flex;
  padding: 3px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  gap: 1px;
}
.segmented .seg {
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-3);
  border-radius: 7px;
  transition: all var(--dur) var(--tx);
}
.segmented .seg:hover { color: var(--text); }
.segmented .seg.active {
  background: #fff;
  color: var(--text);
  box-shadow: var(--shadow-sm);
  font-weight: 600;
}
.segmented.small .seg { padding: 5px 10px; font-size: 11.5px; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 9px;
  border: 1px solid transparent;
  transition: all var(--dur) var(--tx);
}
.btn.primary {
  background: linear-gradient(180deg, var(--emerald-500) 0%, var(--emerald-600) 100%);
  color: #fff;
  box-shadow: 0 1px 2px rgba(16, 185, 129, .3), 0 6px 18px -8px rgba(16, 185, 129, .5);
}
.btn.primary:hover { transform: translateY(-1px); box-shadow: 0 1px 2px rgba(16, 185, 129, .3), 0 12px 22px -8px rgba(16, 185, 129, .6); }
.btn.primary.ai {
  background: linear-gradient(180deg, #8b5cf6 0%, #7c3aed 100%);
  box-shadow: var(--shadow-ai);
}
.btn.ghost {
  background: #fff;
  border-color: var(--border);
  color: var(--text-2);
}
.btn.ghost:hover { border-color: var(--border-strong); background: var(--surface-2); color: var(--text); }
.btn.sm { padding: 5px 10px; font-size: 11.5px; }
.btn.large { padding: 12px 20px; font-size: 14px; }

.mini-btn {
  padding: 6px 10px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-2);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 7px;
  transition: all var(--dur) var(--tx);
}
.mini-btn:hover { background: #fff; border-color: var(--border-strong); color: var(--text); }
.mini-btn.success { background: var(--emerald-500); color: #fff; border-color: var(--emerald-600); }
.mini-btn.success:hover { background: var(--emerald-600); }
.mini-btn.ai { background: var(--violet-50); color: var(--violet-600); border-color: var(--violet-100); }

/* ============================================================
   KPI cards
   ============================================================ */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}
.kpi-grid.four { grid-template-columns: repeat(4, 1fr); }
.kpi-grid.five { grid-template-columns: repeat(5, 1fr); }
.kpi-grid.six  { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 1400px) {
  .kpi-grid.six { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1200px) {
  .kpi-grid.five { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .kpi-grid.five,
  .kpi-grid.six { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 440px) {
  .kpi-grid.five,
  .kpi-grid.six { grid-template-columns: 1fr; }
}

.kpi-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  overflow: hidden;
  transition: transform var(--dur) var(--tx), box-shadow var(--dur) var(--tx);
}
.kpi-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

.kpi-top { display: flex; justify-content: space-between; align-items: flex-start; }
.kpi-label { font-size: 12px; color: var(--text-3); font-weight: 500; }
.kpi-icon {
  width: 30px; height: 30px;
  border-radius: 8px;
  display: grid; place-items: center;
}
.kpi-icon.emerald { background: var(--emerald-50); color: var(--emerald-600); }
.kpi-icon.amber { background: var(--amber-50); color: var(--amber-500); }
.kpi-icon.violet { background: var(--violet-50); color: var(--violet-500); }
.kpi-icon.rose { background: var(--rose-50); color: var(--rose-500); }

.kpi-value {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 800;
  font-size: 28px;
  color: var(--text);
  margin-top: 12px;
  letter-spacing: -0.02em;
}
.kpi-dec { font-size: 18px; color: var(--text-3); font-weight: 600; }
.kpi-meta { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.kpi-sub { font-size: 12px; color: var(--text-3); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 20px;
  line-height: 1.2;
}
.chip.up { background: var(--emerald-50); color: var(--emerald-600); }
.chip.down { background: var(--rose-50); color: var(--rose-500); }
.chip.warn { background: var(--amber-50); color: var(--amber-500); }
.chip.bad { background: #fef2f2; color: #dc2626; }
.chip.neutral { background: #f1f5f3; color: var(--text-3); }
.chip.vip { background: linear-gradient(135deg, #fef3c7, #fde68a); color: #b45309; }
.chip.ai { background: var(--violet-50); color: var(--violet-600); }
.chip.sm { padding: 2px 7px; font-size: 10.5px; }

.spark { width: 100%; height: 36px; margin-top: 14px; display: block; }

/* Status bar for active orders */
.status-bar {
  display: flex;
  height: 6px;
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
  margin-top: 18px;
  gap: 2px;
}
.seg-fill { height: 100%; border-radius: 2px; }
.seg-fill.s-new { background: #6366f1; }
.seg-fill.s-preparing { background: var(--amber-500); }
.seg-fill.s-ready { background: var(--emerald-500); }
.seg-fill.s-delivery { background: var(--blue-500); }

.status-legend {
  display: flex;
  gap: 12px;
  margin-top: 10px;
  font-size: 11px;
  color: var(--text-3);
  flex-wrap: wrap;
}
.status-legend span { display: inline-flex; align-items: center; gap: 5px; }
.d { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.d.new { background: #6366f1; }
.d.preparing { background: var(--amber-500); }
.d.ready { background: var(--emerald-500); }
.d.delivery { background: var(--blue-500); }
.d.pending { background: #0ea5e9; }
.d.emerald { background: var(--emerald-500); }
.d.violet { background: var(--violet-500); }
.d.violet.dashed { background: repeating-linear-gradient(90deg, var(--violet-500) 0 3px, transparent 3px 5px); border-radius: 0; }
.d.amber { background: var(--amber-500); }
.d.rose { background: var(--rose-500); }
.d.rose.dashed { background: repeating-linear-gradient(90deg, var(--rose-500) 0 3px, transparent 3px 5px); border-radius: 0; }

.stars { margin-top: 14px; display: flex; gap: 2px; }
.star { color: #e5e7eb; font-size: 16px; }
.star.filled { color: var(--amber-500); }

/* ============================================================
   Cards & grid
   ============================================================ */
.card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  transition: box-shadow var(--dur) var(--tx);
}
.card:hover { box-shadow: var(--shadow-sm); }

.card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.card-title { font-size: 15px; font-weight: 700; color: var(--text); letter-spacing: -0.01em; }
.card-sub { font-size: 12px; color: var(--text-3); margin-top: 3px; }

.grid-2 {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}
.grid-2-wide {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}

/* ============================================================
   AI strip
   ============================================================ */
.ai-strip {
  position: relative;
  background: linear-gradient(135deg, rgba(139, 92, 246, .05), rgba(16, 185, 129, .05));
  border: 1px solid var(--violet-100);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  margin-bottom: 20px;
  overflow: hidden;
}
.ai-strip::before {
  content: "";
  position: absolute;
  top: -80px; right: -40px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(139, 92, 246, .15), transparent 70%);
  filter: blur(20px);
}
.ai-strip-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  position: relative;
}
.ai-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  background: #fff;
  border: 1px solid var(--violet-100);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  color: var(--violet-600);
}
.ai-badge.big {
  padding: 6px 14px;
  font-size: 12.5px;
}
.ai-strip-actions { display: flex; gap: 8px; }
.ai-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  position: relative;
}
.ai-card {
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 14px;
  transition: all var(--dur) var(--tx);
}
.ai-card:hover { transform: translateY(-1px); border-color: var(--violet-100); box-shadow: var(--shadow-md); }
.ai-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.ai-tag {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.ai-tag.opportunity { background: var(--emerald-50); color: var(--emerald-600); }
.ai-tag.risk { background: #fef2f2; color: #dc2626; }
.ai-tag.insight { background: var(--violet-50); color: var(--violet-600); }
.ai-impact { font-size: 11px; font-weight: 600; color: var(--text-3); }
.ai-card-title { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.ai-card-desc { font-size: 12px; color: var(--text-3); line-height: 1.5; margin-bottom: 12px; }
.ai-card-foot { display: flex; gap: 8px; }

/* ============================================================
   Chart
   ============================================================ */
.chart-wrap { width: 100%; }
.area-chart, .bars { width: 100%; height: 220px; display: block; }
.chart-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 11px;
  color: var(--text-3);
}
.chart-axis.seven > span, .chart-axis.twelve > span { flex: 1; text-align: center; }
.chart-legend {
  display: flex;
  gap: 18px;
  margin-top: 14px;
  font-size: 12px;
  color: var(--text-3);
  flex-wrap: wrap;
}
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }

/* ============================================================
   Forecast chart — professional area chart with axis labels
   ============================================================ */
.fc-chart-wrap { position: relative; width: 100%; }
.fc-chart {
  width: 100%;
  height: auto;
  aspect-ratio: 800 / 280;
  display: block;
  max-height: 360px;
}
.fc-chart * { vector-effect: non-scaling-stroke; }
.fc-chart .fc-grid line { stroke: #eef2ef; stroke-width: 1; }
.fc-chart text { font-family: "Inter", system-ui, sans-serif; }
.fc-chart-wrap .chart-axis {
  position: relative;
  margin-top: 4px;
  height: 18px;
  font-size: 11px;
  color: var(--text-3);
  display: block;
  /* paddingLeft / paddingRight set inline by JS to match chart inner area */
}
.fc-chart-wrap .chart-axis .fc-tick {
  position: absolute;
  transform: translateX(-50%);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.fc-chart-wrap #fc-tooltip {
  width: 200px;
  pointer-events: none;
  z-index: 5;
  transform: none;          /* override the default translateY(-100%) */
  white-space: normal;
}
.fc-chart-wrap #fc-tooltip .rt-row { white-space: nowrap; }
/* Empty / error state overlay — sits on top of the SVG when there is no
   forecast data yet, instead of leaving a blank canvas with a stray
   dotted line. JS toggles `.show` on `.fc-empty` and writes the message
   into `.fc-empty-msg`. */
.fc-chart-wrap .fc-empty {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  padding: 24px;
  pointer-events: none;
  color: var(--text-3);
}
.fc-chart-wrap .fc-empty.show { display: flex; }
.fc-chart-wrap .fc-empty .fc-empty-icon {
  width: 48px; height: 48px; border-radius: 50%;
  background: linear-gradient(135deg, rgba(139,92,246,.12), rgba(16,185,129,.12));
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
}
.fc-chart-wrap .fc-empty .fc-empty-title {
  font-size: 14px; font-weight: 600; color: var(--text-1);
}
.fc-chart-wrap .fc-empty .fc-empty-msg {
  font-size: 12.5px; max-width: 360px; line-height: 1.45;
}
.fc-chart-wrap .fc-empty .fc-empty-cta {
  pointer-events: auto;
  margin-top: 4px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(139,92,246,.35);
  background: rgba(139,92,246,.08);
  color: #6d28d9;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease;
}
.fc-chart-wrap .fc-empty .fc-empty-cta:hover { background: rgba(139,92,246,.16); }
@media (max-width: 720px) {
  .fc-chart { height: 260px; }
  .fc-chart-wrap .chart-axis .fc-tick { font-size: 10px; }
}
@media (max-width: 480px) {
  .fc-chart { height: 220px; }
}

/* ============================================================
   Live feed
   ============================================================ */
.live-feed { display: flex; flex-direction: column; gap: 6px; }
.feed-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border-radius: var(--radius);
  transition: background var(--dur) var(--tx);
}
.feed-item:hover { background: var(--surface-2); }
.feed-left { display: flex; gap: 10px; align-items: center; }
.feed-source {
  width: 34px; height: 34px;
  border-radius: 9px;
  display: grid; place-items: center;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
}
.feed-source.dinein { background: linear-gradient(135deg, #34d399, #059669); }
.feed-source.delivery { background: linear-gradient(135deg, #a78bfa, #7c3aed); }
.feed-source.takeaway { background: linear-gradient(135deg, #fbbf24, #d97706); }
.feed-title { font-weight: 600; font-size: 13px; color: var(--text); }
.feed-meta { font-size: 11.5px; color: var(--text-3); margin-top: 2px; }
.feed-right { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.feed-amt { font-weight: 700; font-size: 13px; }
.status {
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 8px 2px 6px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.status i { width: 5px; height: 5px; border-radius: 50%; }
.status.preparing { background: var(--amber-50); color: var(--amber-500); }
.status.preparing i { background: var(--amber-500); }
.status.ready { background: var(--emerald-50); color: var(--emerald-600); }
.status.ready i { background: var(--emerald-500); }
.status.delivery { background: #e0f2fe; color: var(--blue-500); }
.status.delivery i { background: var(--blue-500); }
.status.new { background: var(--violet-50); color: var(--violet-600); }
.status.new i { background: var(--violet-500); animation: pulse 1.2s infinite; }
.status.delivered { background: #f1f5f3; color: var(--text-3); }
.status.delivered i { background: var(--text-3); }

/* ============================================================
   Top items
   ============================================================ */
.top-items { display: flex; flex-direction: column; gap: 14px; }
.top-items li { display: grid; grid-template-columns: 40px 1fr; gap: 10px; align-items: center; grid-template-areas: "img meta" "img bar"; }
.ti-img {
  grid-area: img;
  width: 40px; height: 40px;
  border-radius: 10px;
  display: grid; place-items: center;
  font-size: 20px;
}
.ti-meta { grid-area: meta; }
.ti-name { font-weight: 600; font-size: 13px; }
.ti-sub { font-size: 11.5px; color: var(--text-3); margin-top: 1px; }
.ti-bar {
  grid-area: bar;
  height: 4px;
  background: var(--surface-2);
  border-radius: 4px;
  overflow: hidden;
  margin-top: 4px;
}
.ti-bar > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--emerald-500), var(--emerald-600));
  border-radius: 4px;
  transition: width 1s var(--tx);
}

/* Branch list */
.branch-list { display: flex; flex-direction: column; gap: 12px; }
.branch-list li {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 8px;
  border-radius: var(--radius);
  transition: background var(--dur) var(--tx);
}
.branch-list li:hover { background: var(--surface-2); }
.b-avatar {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--emerald-500), var(--emerald-700));
  color: #fff;
  font-weight: 700;
  font-size: 11px;
  display: grid; place-items: center;
}
.b-name { font-weight: 600; font-size: 13px; }
.b-sub { font-size: 11.5px; color: var(--text-3); margin-top: 1px; }
.b-val { text-align: right; }
.b-amt { font-weight: 700; font-size: 13.5px; }
.b-change { font-size: 11px; font-weight: 600; margin-top: 2px; }
.b-change.up { color: var(--emerald-600); }
.b-change.down { color: var(--rose-500); }

/* Alerts */
.alert-list { display: flex; flex-direction: column; gap: 10px; }
.alert-item {
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius);
  background: var(--surface-2);
  border-left: 3px solid var(--text-3);
}
.alert-item.critical { border-color: #dc2626; background: #fef2f2; }
.alert-item.warning { border-color: var(--amber-500); background: var(--amber-50); }
.alert-item.info { border-color: var(--blue-500); background: #f0f9ff; }
.alert-item.success { border-color: var(--emerald-500); background: var(--emerald-50); }
.alert-icon {
  width: 26px; height: 26px;
  border-radius: 7px;
  background: #fff;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.alert-item.critical .alert-icon { color: #dc2626; }
.alert-item.warning .alert-icon { color: var(--amber-500); }
.alert-item.info .alert-icon { color: var(--blue-500); }
.alert-item.success .alert-icon { color: var(--emerald-600); }
.alert-title { font-weight: 600; font-size: 12.5px; color: var(--text); }
.alert-sub { font-size: 11.5px; color: var(--text-3); margin-top: 1px; }

/* ============================================================
   Menu Items management
   ============================================================ */
.mm-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding: 12px 16px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.mm-toolbar .cat-row {
  flex: 1;
  min-width: 0;
  margin-bottom: 0;
  border-bottom: 0;
  padding-bottom: 0;
}
.mm-toolbar-right {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.mm-toolbar-right .search-sm { width: 240px; }

.mm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.mm-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all var(--dur) var(--tx);
}
.mm-card:hover {
  border-color: var(--emerald-200);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.mm-card.unavailable { opacity: 0.7; }
.mm-card.unavailable .mm-img::after {
  content: "Paused";
  position: absolute;
  inset: 0;
  background: rgba(15, 26, 21, .55);
  color: #fff;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 12px;
  display: grid;
  place-items: center;
  z-index: 1;
  pointer-events: none; /* let clicks pass through to the controls below */
}

.mm-img {
  position: relative;
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  font-size: 64px;
  background: linear-gradient(135deg, #fde68a, #f59e0b);
  user-select: none;
}
.mm-img.c-pizza    { background: linear-gradient(135deg, #fde68a, #f59e0b); }
.mm-img.c-burgers  { background: linear-gradient(135deg, #fecaca, #ef4444); }
.mm-img.c-salads   { background: linear-gradient(135deg, #bbf7d0, #10b981); }
.mm-img.c-pasta    { background: linear-gradient(135deg, #ddd6fe, #8b5cf6); }
.mm-img.c-seafood  { background: linear-gradient(135deg, #bae6fd, #0ea5e9); }
.mm-img.c-dessert  { background: linear-gradient(135deg, #fbcfe8, #ec4899); }
.mm-img.c-drinks   { background: linear-gradient(135deg, #a7f3d0, #059669); }
.mm-img.c-default  { background: linear-gradient(135deg, #c7d2fe, #6366f1); }

.mm-badges {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  z-index: 2;
}
.mm-badge {
  background: rgba(15, 26, 21, .8);
  color: #fff;
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 3px 7px;
  border-radius: 10px;
  backdrop-filter: blur(8px);
}
.mm-badge.bestseller { background: linear-gradient(135deg, #f59e0b, #ea580c); }
.mm-badge.ai { background: linear-gradient(135deg, #8b5cf6, #6366f1); }

.mm-availability {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 36px;
  height: 22px;
  background: rgba(15, 26, 21, .35);
  border-radius: 22px;
  cursor: pointer;
  transition: background var(--dur) var(--tx);
  border: 0;
  padding: 0;
  z-index: 2;
}
/* Keep the toggle solidly visible (and clickable) when the card is paused */
.mm-card.unavailable .mm-availability {
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}
.mm-card.unavailable { opacity: 1; }
.mm-card.unavailable .mm-img > .mm-emoji,
.mm-card.unavailable .mm-img.has-photo { filter: grayscale(0.4); }
.mm-card.unavailable .mm-body { opacity: 0.6; }
.mm-availability::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  transition: transform var(--dur) var(--tx);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}
.mm-availability.on {
  background: var(--emerald-500);
}
.mm-availability.on::after {
  transform: translateX(14px);
}

.mm-body {
  padding: 14px 16px 10px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.mm-name {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--text);
}
.mm-desc {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 4px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mm-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-top: 12px;
}
.mm-price {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 800;
  font-size: 18px;
  color: var(--emerald-600);
  letter-spacing: -0.01em;
}
.mm-margin {
  font-size: 11px;
  color: var(--text-3);
  font-weight: 600;
}
.mm-margin.up { color: var(--emerald-600); }
.mm-margin.down { color: var(--rose-500); }

.mm-channels {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 12px;
}
.mm-chan {
  font-size: 10.5px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 10px;
  border: 1px solid var(--border);
  color: var(--text-3);
  background: var(--surface-2);
  cursor: pointer;
  transition: all var(--dur) var(--tx);
  user-select: none;
  white-space: nowrap;
}
.mm-chan:hover { border-color: var(--border-strong); }
.mm-chan.on {
  background: var(--emerald-50);
  color: var(--emerald-700);
  border-color: var(--emerald-200);
}

.mm-foot {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  padding: 10px 16px 14px;
  border-top: 1px solid var(--border-soft);
  margin-top: 10px;
}
.mm-foot .row-btn { flex: 1; text-align: center; }

.mm-empty {
  padding: 56px 24px;
  text-align: center;
  background: #fff;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
}
.mm-empty-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--surface-2);
  display: grid;
  place-items: center;
  margin: 0 auto 14px;
  color: var(--text-3);
}
.mm-empty-title { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700; font-size: 15px; color: var(--text); }
.mm-empty-sub { font-size: 13px; color: var(--text-3); margin: 4px 0 16px; }

/* ============================================================
   Payment modal — POS Charge flow
   ============================================================ */
.pay-modal { width: 540px; }

.pay-total-banner {
  background: linear-gradient(135deg, var(--emerald-50), #fff 70%);
  border: 1px solid var(--emerald-100);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  text-align: center;
  margin-bottom: 18px;
}
.ptb-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--emerald-700);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.ptb-amount {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 38px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.025em;
  margin: 6px 0 4px;
  font-variant-numeric: tabular-nums;
}
.ptb-sub { font-size: 12px; color: var(--text-3); }

.pay-section { margin-bottom: 18px; }
.pay-section:last-child { margin-bottom: 0; }
.pay-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-3);
  margin-bottom: 8px;
}

/* Payment method grid */
.pmt-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.pmt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 8px;
  background: var(--surface-2);
  border: 1.5px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  transition: all var(--dur) var(--tx);
  font-family: inherit;
}
.pmt:hover { background: #fff; border-color: var(--border); }
.pmt.active {
  background: var(--emerald-50);
  border-color: var(--emerald-500);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, .12);
}
.pmt-ico { font-size: 22px; line-height: 1; }
.pmt-label { font-size: 12px; font-weight: 600; color: var(--text-2); }
.pmt.active .pmt-label { color: var(--emerald-700); }

/* Tip selector */
.tip-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
.tip-btn {
  padding: 10px 6px;
  background: var(--surface-2);
  border: 1.5px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  transition: all var(--dur) var(--tx);
}
.tip-btn:hover { background: #fff; border-color: var(--border); }
.tip-btn b { font-weight: 700; font-size: 13px; color: var(--text); }
.tip-btn .tip-amt { font-size: 10.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.tip-btn.active {
  background: var(--emerald-50);
  border-color: var(--emerald-500);
  color: var(--emerald-700);
}
.tip-btn.active b { color: var(--emerald-700); }
.tip-btn.active .tip-amt { color: var(--emerald-600); }

#payCustomTip {
  width: 100%;
  padding: 9px 12px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  margin-top: 8px;
  outline: 0;
}
#payCustomTip:focus {
  border-color: var(--emerald-500);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, .12);
}

/* Cash quick amounts */
.cash-quick {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  margin-bottom: 8px;
}
.cash-btn {
  padding: 9px 6px;
  background: var(--surface-2);
  border: 1.5px solid transparent;
  border-radius: 9px;
  font-weight: 700;
  font-size: 13px;
  color: var(--text-2);
  cursor: pointer;
  transition: all var(--dur) var(--tx);
  font-family: inherit;
  font-variant-numeric: tabular-nums;
}
.cash-btn:hover { background: #fff; border-color: var(--border); }
.cash-btn.active {
  background: var(--emerald-50);
  border-color: var(--emerald-500);
  color: var(--emerald-700);
}

#payCashAmount {
  width: 100%;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 9px;
  font-size: 14px;
  font-weight: 600;
  outline: 0;
  font-variant-numeric: tabular-nums;
}
#payCashAmount:focus {
  border-color: var(--emerald-500);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, .12);
}
.cash-change {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: var(--emerald-50);
  border: 1px solid var(--emerald-100);
  border-radius: 9px;
  margin-top: 8px;
  font-size: 13px;
  color: var(--emerald-700);
  font-weight: 600;
}
.cash-change b {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 18px;
  color: var(--emerald-700);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.cash-change.short {
  background: #fff1f2;
  border-color: #fecaca;
  color: var(--rose-500);
}
.cash-change.short b { color: var(--rose-500); }

/* Card mock display */
.card-mock {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  background: linear-gradient(135deg, #f0f9ff, #fff);
  border: 1px dashed var(--blue-500);
  border-radius: 12px;
}
.card-mock-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #bae6fd;
  display: grid;
  place-items: center;
  color: var(--blue-500);
  flex-shrink: 0;
}
.card-mock-text { display: flex; flex-direction: column; gap: 2px; }
.card-mock-text b { font-size: 13.5px; color: var(--text); }
.card-mock-text span { font-size: 11.5px; color: var(--text-3); }

/* Receipt buttons */
.receipt-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.rcpt {
  padding: 10px 6px;
  background: var(--surface-2);
  border: 1.5px solid transparent;
  border-radius: 9px;
  cursor: pointer;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-2);
  transition: all var(--dur) var(--tx);
}
.rcpt:hover { background: #fff; border-color: var(--border); }
.rcpt.active {
  background: var(--emerald-50);
  border-color: var(--emerald-500);
  color: var(--emerald-700);
}

#payContact {
  width: 100%;
  padding: 9px 12px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  margin-top: 8px;
  outline: 0;
}
#payContact:focus {
  border-color: var(--emerald-500);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, .12);
}

/* Customer email field (optional) */
#payEmail {
  width: 100%;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 9px;
  font-size: 13.5px;
  outline: 0;
  font-family: inherit;
  transition: border-color var(--dur) var(--tx), box-shadow var(--dur) var(--tx);
}
#payEmail:focus {
  border-color: var(--emerald-500);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, .12);
}
#payEmail.invalid {
  border-color: var(--rose-500);
  box-shadow: 0 0 0 3px rgba(244, 63, 94, .12);
}
#payEmailHint { margin-top: 6px; }
.pay-optional {
  font-weight: 500;
  color: var(--text-muted);
  text-transform: none;
  letter-spacing: 0;
  font-size: 11px;
}

/* Discount row dimmed when discount is zero */
.pay-summary .ps-row.zero { opacity: 0.5; }

/* Final breakdown */
.pay-summary {
  background: var(--surface-2);
  border-radius: 10px;
  padding: 12px 14px;
  margin-top: 4px;
}
.pay-summary .ps-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  font-size: 13px;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.pay-summary .ps-row.total {
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-weight: 800;
  font-size: 17px;
  color: var(--text);
  font-family: "Plus Jakarta Sans", sans-serif;
  letter-spacing: -0.01em;
}

/* Process button states */
#payProcessBtn[disabled] { opacity: 0.55; cursor: not-allowed; }
#payProcessBtn.processing { pointer-events: none; }
#payProcessBtn.processing svg { display: none; }
#payProcessBtn.processing::before {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.3);
  border-top-color: #fff;
  animation: spin .7s linear infinite;
}

/* Success overlay */
.pay-success-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--emerald-50), #fff);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  z-index: 5;
  animation: fadeIn .3s var(--tx);
}
/* Kitchen-fired overlay variant — amber background instead of emerald
   so operators visually distinguish "sent to kitchen, payment pending"
   from "payment received, all done". */
.pay-success-overlay.kitchen-fired-overlay {
  background: linear-gradient(135deg, #fef3c7, #fff);
}
.pay-success-overlay.kitchen-fired-overlay .pay-success-circle {
  box-shadow: 0 12px 30px -8px rgba(245, 158, 11, .55);
}

/* Warn-styled button — amber outline that matches the kitchen-fired
   theme. Used by the KOT button in the payment modal so it stands out
   from both the Cancel (ghost) and Process payment (primary emerald)
   buttons without being visually destructive. */
.btn.warn {
  background: #fffbeb;
  color: #b45309;
  border: 1px solid #fde68a;
}
.btn.warn:hover:not(:disabled) {
  background: #fef3c7;
  border-color: #fcd34d;
  color: #92400e;
}
.btn.warn:active:not(:disabled) {
  background: #fde68a;
}
.btn.warn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.btn.warn.processing {
  pointer-events: none;
  opacity: 0.7;
}

/* Pay modal footer — let the three buttons wrap on narrow screens
   instead of overflowing the modal width. */
.pay-modal-foot { flex-wrap: wrap; row-gap: 8px; }
.pay-success-circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--emerald-500), var(--emerald-600));
  display: grid;
  place-items: center;
  color: #fff;
  margin-bottom: 16px;
  box-shadow: 0 12px 30px -8px rgba(16, 185, 129, .55);
  animation: popIn .5s var(--tx);
}
.pay-success-title {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}
.pay-success-order {
  display: inline-block;
  font-family: "SF Mono", "Cascadia Mono", Menlo, Monaco, Consolas, monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--emerald-700);
  background: rgba(16, 185, 129, .12);
  border: 1px solid var(--emerald-200);
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: .04em;
  margin-bottom: 8px;
}
.pay-success-sub { font-size: 13px; color: var(--text-3); }

/* Held tickets — count badge on the POS button + dropdown list */
.held-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  margin-left: 4px;
  background: var(--amber-500);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  border-radius: 20px;
  line-height: 1;
}

#heldMenu { width: 360px; }
.held-list { display: flex; flex-direction: column; gap: 4px; padding: 4px 8px 8px; }
.held-row {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  cursor: pointer;
  transition: all var(--dur) var(--tx);
  position: relative;
}
.held-row:hover {
  background: var(--surface-2);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}
.held-icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  font-size: 18px;
  background: var(--surface-2);
}
.held-icon.dinein   { background: linear-gradient(135deg, #d1fae5, var(--emerald-500)); color: #fff; }
.held-icon.takeaway { background: linear-gradient(135deg, #fde68a, var(--amber-500)); color: #fff; }
.held-icon.delivery { background: linear-gradient(135deg, #ddd6fe, var(--violet-500)); color: #fff; }
.held-meta { min-width: 0; }
.held-title {
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.held-sub {
  font-size: 11.5px;
  color: var(--text-3);
  margin-top: 2px;
}
.held-amt {
  font-weight: 700;
  font-size: 13px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.held-row .held-delete {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: transparent;
  color: var(--text-3);
  display: grid;
  place-items: center;
  opacity: 0;
  transition: all var(--dur) var(--tx);
  border: 0;
  cursor: pointer;
  padding: 0;
}
.held-row:hover .held-delete { opacity: 1; }
.held-row .held-delete:hover {
  background: #fff1f2;
  color: var(--rose-500);
}

.held-empty {
  text-align: center;
  padding: 28px 16px 16px;
  color: var(--text-3);
}
.held-empty[hidden] { display: none; }
.held-empty-ico {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--surface-2);
  display: grid;
  place-items: center;
  margin: 0 auto 10px;
  color: var(--text-muted);
}
.held-empty-title {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--text);
}
.held-empty-sub {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 4px;
  line-height: 1.5;
}
.mini-btn.ghost {
  background: transparent;
  border-color: transparent;
  color: var(--text-3);
}
.mini-btn.ghost:hover {
  background: #fff1f2;
  color: var(--rose-500);
}

/* Image upload widget inside the add/edit item modal */
.img-upload {
  position: relative;
  border: 1.5px dashed var(--border-strong);
  border-radius: 12px;
  background: var(--surface-2);
  min-height: 132px;
  cursor: pointer;
  transition: all var(--dur) var(--tx);
  overflow: hidden;
}
.img-upload:hover {
  border-color: var(--emerald-500);
  background: var(--emerald-50);
}
.img-upload.dragging {
  border-color: var(--emerald-500);
  border-style: solid;
  background: var(--emerald-50);
  transform: scale(1.01);
}
.img-upload.has-image { cursor: default; }
.img-upload.has-image:hover { background: var(--surface-2); border-color: var(--border-strong); border-style: solid; }
.img-upload.uploading { cursor: wait; pointer-events: none; }

.img-upload-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px 16px;
  text-align: center;
}
.img-upload-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  color: var(--emerald-600);
  box-shadow: var(--shadow-sm);
}
.img-upload:hover .img-upload-icon { color: var(--emerald-600); border-color: var(--emerald-200); }
.img-upload-text {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.5;
}
.img-upload-text b { color: var(--emerald-600); font-weight: 700; }
.img-upload-hint { font-size: 11px; color: var(--text-3); margin-top: 4px; font-weight: 500; }

.img-upload-preview {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #0f1a15;
  border-radius: 10px 10px 0 0;
}
.img-upload-preview::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 60%, rgba(0,0,0,.35));
  pointer-events: none;
  border-radius: inherit;
}
.img-upload-actions {
  position: absolute;
  bottom: 8px;
  right: 8px;
  display: flex;
  gap: 6px;
  z-index: 2;
}
.img-upload-actions .mini-btn {
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(0, 0, 0, .08);
  font-size: 11px;
  padding: 5px 10px;
}
.img-upload-actions .mini-btn:hover { background: #fff; }
.img-upload-actions .mini-btn.ghost { background: rgba(15, 26, 21, .72); color: #fff; border-color: transparent; }
.img-upload-actions .mini-btn.ghost:hover { background: rgba(15, 26, 21, .9); }

.img-upload .upload-progress {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(4px);
  font-size: 12px;
  color: var(--text-2);
  font-weight: 600;
  z-index: 3;
}
.img-upload .upload-progress::before {
  content: "";
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2.5px solid var(--border);
  border-top-color: var(--emerald-500);
  animation: spin .7s linear infinite;
  margin-right: 10px;
}

/* Menu card image when uploaded */
.mm-img.has-photo {
  background-image: var(--mm-img);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  font-size: 0;
}
.mm-img.has-photo .mm-emoji { display: none; }

/* Category manager (modal) */
.cat-mgmt { display: flex; flex-direction: column; gap: 12px; }

.cat-add-row {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 10px;
  background: var(--surface-2);
  border-radius: 10px;
  border: 1px solid var(--border);
}
.cat-add-row input {
  padding: 9px 12px !important;
  background: #fff !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  font-size: 13.5px !important;
  width: 100% !important;
  outline: 0;
}
.cat-add-row input.emoji-input {
  text-align: center;
  font-size: 18px !important;
}
.cat-add-row input:focus {
  border-color: var(--emerald-500) !important;
  box-shadow: 0 0 0 4px rgba(16, 185, 129, .12) !important;
}
.cat-add-row .btn { white-space: nowrap; padding: 9px 14px; }

.cat-list-header {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-3);
  padding: 4px 4px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.cat-list-header span {
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 20px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
}

.cat-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cat-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  background: #fff;
  transition: all var(--dur) var(--tx);
}
.cat-row:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}
.cat-row.editing {
  background: var(--emerald-50);
  border-color: var(--emerald-200);
}
.cat-row.editing .cat-emoji-edit-wrap { width: 64px; flex-shrink: 0; }
.cat-row.editing input[data-cat-edit="name"] { flex: 1; }

.cat-emoji {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  background: var(--surface-2);
  border-radius: 8px;
  font-size: 18px;
  flex-shrink: 0;
}
.cat-name {
  flex: 1;
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
  word-break: break-word;
  line-height: 1.35;
}
.cat-count-badge {
  font-size: 11px;
  color: var(--text-3);
  background: var(--surface-2);
  padding: 3px 9px;
  border-radius: 20px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}
.cat-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

/* Icon-only action buttons */
.cat-icon-btn {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-3);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all var(--dur) var(--tx);
  padding: 0;
  flex-shrink: 0;
}
.cat-icon-btn:hover {
  background: #fff;
  border-color: var(--border-strong);
  color: var(--text);
}
.cat-icon-btn.danger { color: var(--rose-500); }
.cat-icon-btn.danger:hover {
  background: #fff1f2;
  border-color: #fecaca;
  color: var(--rose-500);
}
.cat-icon-btn.primary {
  background: var(--emerald-500);
  border-color: var(--emerald-500);
  color: #fff;
}
.cat-icon-btn.primary:hover {
  background: var(--emerald-600);
  border-color: var(--emerald-600);
  color: #fff;
}
.cat-row.editing input {
  padding: 7px 10px !important;
  border-radius: 7px !important;
  border: 1px solid var(--emerald-300, #86efac) !important;
  background: #fff !important;
  font-size: 13.5px !important;
  width: 100% !important;
  outline: 0;
}
.cat-row.editing input:focus {
  border-color: var(--emerald-500) !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, .14) !important;
}
.cat-row.editing input.emoji-input { text-align: center; font-size: 18px !important; }

.row-btn.danger {
  color: var(--rose-500);
  background: #fff1f2;
}
.row-btn.danger:hover { background: #ffe4e6; }
.row-btn.ghost.danger { background: #fff1f2; color: var(--rose-500); border-color: #fecaca; }
.row-btn.ghost.danger:hover { background: #ffe4e6; border-color: #fca5a5; }

.cat-empty {
  text-align: center;
  padding: 32px 16px;
  color: var(--text-3);
  font-size: 13px;
  background: var(--surface-2);
  border: 1px dashed var(--border-strong);
  border-radius: 10px;
}

/* Channel checkboxes inside the add/edit item modal */
.channel-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.channel-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1.5px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  transition: all var(--dur) var(--tx);
}
.channel-card.on { border-color: var(--emerald-500); background: var(--emerald-50); }
.channel-card .ch-ico {
  width: 28px; height: 28px;
  background: #fff;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-size: 14px;
}
.channel-card.on .ch-ico { background: var(--emerald-500); color: #fff; }
.channel-card .ch-name { font-weight: 600; font-size: 13px; }
.channel-card .ch-sub { font-size: 11px; color: var(--text-3); margin-top: 1px; }
.channel-card input { display: none; }

/* ============================================================
   POS
   ============================================================ */
.pos-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 16px;
}
.pos-left {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  min-width: 0; /* allow grid item to shrink below its content's intrinsic min-width */
  overflow: hidden;
}
.pos-right { min-width: 0; }
.cat-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 12px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border-soft);
}
.cat {
  padding: 7px 14px;
  font-size: 12.5px;
  font-weight: 500;
  border-radius: 20px;
  background: var(--surface-2);
  color: var(--text-2);
  white-space: nowrap;
  border: 1px solid transparent;
  transition: all var(--dur) var(--tx);
}
.cat:hover { background: #fff; border-color: var(--border); }
.cat.active { background: var(--text); color: #fff; }
.menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
  gap: 10px;
}
.menu-item {
  position: relative;
  background: var(--surface-2);
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 12px;
  cursor: pointer;
  transition: all var(--dur) var(--tx);
}
.menu-item:hover {
  background: #fff;
  border-color: var(--emerald-200);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.mi-img {
  width: 100%;
  aspect-ratio: 1.3;
  border-radius: 10px;
  display: grid; place-items: center;
  font-size: 36px;
  margin-bottom: 8px;
}
.mi-name { font-weight: 600; font-size: 12.5px; }
.mi-price { font-weight: 700; font-size: 13px; color: var(--emerald-600); margin-top: 2px; }
.mi-tag {
  position: absolute;
  top: 8px; right: 8px;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  background: #fff;
  color: var(--emerald-600);
  border: 1px solid var(--emerald-200);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.mi-tag.ai { background: linear-gradient(135deg, #8b5cf6, #7c3aed); color: #fff; border-color: transparent; }

.pos-right {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ticket-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-soft);
}
.ticket-title { font-weight: 700; font-size: 15px; }
.ticket-sub { font-size: 12px; color: var(--text-3); margin-top: 2px; }

.ticket { display: flex; flex-direction: column; gap: 8px; max-height: 280px; overflow-y: auto; padding-right: 4px; }
.ticket::-webkit-scrollbar { width: 6px; }
.ticket::-webkit-scrollbar-thumb { background: #d8e0db; border-radius: 4px; }
.ticket li {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  padding: 10px;
  background: var(--surface-2);
  border-radius: 10px;
  transition: background var(--dur) var(--tx);
}
.ticket li:hover { background: #fff; box-shadow: var(--shadow-sm); }
.tk-left { display: flex; gap: 10px; align-items: center; min-width: 0; flex: 1; }
.tk-info { min-width: 0; }
.tk-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.tk-name { font-weight: 600; font-size: 13px; }
.tk-mod { font-size: 11.5px; color: var(--text-3); margin-top: 2px; }
.tk-price {
  font-weight: 700;
  font-size: 13.5px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* Quantity controls */
.tk-qty-group {
  display: inline-flex;
  align-items: stretch;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}
.tk-mini-btn {
  width: 24px;
  height: 28px;
  background: transparent;
  border: 0;
  color: var(--text-3);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: all var(--dur) var(--tx);
  display: grid;
  place-items: center;
  padding: 0;
  line-height: 1;
}
.tk-mini-btn:hover {
  background: var(--emerald-50);
  color: var(--emerald-600);
}
.tk-mini-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.tk-qty-group .tk-qty {
  min-width: 22px;
  padding: 0 4px;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 12.5px;
  color: var(--emerald-600);
  font-variant-numeric: tabular-nums;
}

/* Remove button */
.tk-remove {
  width: 24px;
  height: 24px;
  background: transparent;
  border: 0;
  color: var(--text-3);
  border-radius: 6px;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: all var(--dur) var(--tx);
  padding: 0;
  flex-shrink: 0;
  opacity: 0.6;
}
.tk-remove:hover {
  background: #fff1f2;
  color: var(--rose-500);
  opacity: 1;
}

/* Order type strip + conditional fields */
.ot-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 4px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.ot-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 7px 6px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-3);
  background: transparent;
  border: 0;
  border-radius: 7px;
  cursor: pointer;
  transition: all var(--dur) var(--tx);
}
.ot-btn:hover {
  background: rgba(255, 255, 255, .6);
  color: var(--text);
}
.ot-btn.active {
  background: #fff;
  color: var(--text);
  box-shadow: var(--shadow-sm);
}
.ot-btn.active[data-ot="dinein"]   { color: var(--emerald-600); }
.ot-btn.active[data-ot="takeaway"] { color: var(--amber-500); }
.ot-btn.active[data-ot="delivery"] { color: var(--violet-500); }
.ot-btn svg { flex-shrink: 0; }

.ot-fields {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 12px 14px;
  background: linear-gradient(160deg, #fafbfa, #fff 70%);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  animation: fadeIn .25s var(--tx);
}
.ot-fields[hidden] { display: none; }

.otf-row {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 10px;
  align-items: center;
}
.otf-row label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.otf-row input,
.otf-row select,
.otf-row textarea {
  padding: 7px 10px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 7px;
  font-size: 13px;
  color: var(--text);
  outline: 0;
  transition: border-color var(--dur) var(--tx), box-shadow var(--dur) var(--tx);
  font-family: inherit;
  width: 100%;
  min-width: 0;
}
.otf-row textarea { resize: vertical; min-height: 50px; }
.otf-row input:focus,
.otf-row select:focus,
.otf-row textarea:focus {
  border-color: var(--emerald-500);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, .12);
}

.totals { padding-top: 10px; border-top: 1px solid var(--border-soft); }
.tot-row {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
  font-size: 13px;
  color: var(--text-2);
}
.tot-row.total {
  font-weight: 800;
  font-size: 18px;
  color: var(--text);
  padding-top: 10px;
  margin-top: 6px;
  border-top: 1px solid var(--border-soft);
  font-family: "Plus Jakarta Sans", sans-serif;
}
.pay-actions { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 8px; }
.btn.large { justify-content: center; }

/* ============================================================
   Order history — companion view to the Kanban
   Tab-switched from the page-header segmented; #ord-tab-kanban
   and #ord-tab-history get .hidden toggled by ordersMgr.
   ============================================================ */
.ord-history { display: block; }
.ord-history[hidden] { display: none !important; }
/* Topbar (Back + Title) — only revealed when fullscreen mode is on */
.ord-hist-topbar { display: none; }

/* ----------------------------------------------------------------
   Fullscreen History mode.
   When `.history-fullscreen` is on the orders <section>, the page-
   header (Order Management title block) is hidden and the .ord-history
   view expands to fill all remaining viewport space below the topbar
   so the table gets every pixel of vertical room. A slim topbar
   inside .ord-history exposes a "Back to Kanban" button.
   ---------------------------------------------------------------- */
.view[data-view="orders"].history-fullscreen .page-header { display: none; }
.view[data-view="orders"].history-fullscreen .ord-history {
  display: flex;
  flex-direction: column;
  /* Eat the full viewport minus the app topbar (~64 px) and view padding */
  min-height: calc(100vh - 64px);
  margin: 0;
}
.view[data-view="orders"].history-fullscreen .ord-hist-topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 4px 18px;
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: 16px;
  position: sticky;
  top: 0;
  background: var(--bg-page, var(--bg, #f9fafb));
  z-index: 5;
}
.view[data-view="orders"].history-fullscreen .ord-hist-topbar-title { flex: 1; min-width: 0; }
/* Circular "back" arrow button — clear, prominent, keyboard-focusable */
.ord-hist-back-arrow {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-soft, #e5e7eb);
  background: var(--surface-1, #fff);
  color: var(--text, #111827);
  cursor: pointer;
  transition: background var(--dur, .18s) ease, transform var(--dur, .18s) ease, border-color var(--dur, .18s) ease, color var(--dur, .18s) ease;
  flex: 0 0 auto;
}
.ord-hist-back-arrow:hover {
  background: var(--surface-2, #f3f4f6);
  border-color: var(--border, #d1d5db);
  transform: translateX(-2px);
}
.ord-hist-back-arrow:focus-visible {
  outline: 2px solid var(--violet-500, #8b5cf6);
  outline-offset: 2px;
}
.ord-hist-back-arrow:active { transform: translateX(-2px) scale(.96); }
.view[data-view="orders"].history-fullscreen .ord-hist-topbar .page-title {
  margin: 2px 0 0;
  font-size: 22px;
  line-height: 1.2;
}
.view[data-view="orders"].history-fullscreen .ord-history > .card {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin: 0;
}
.view[data-view="orders"].history-fullscreen .ord-history > .card > .table-wrap {
  flex: 1;
  overflow-y: auto;
}
.view[data-view="orders"].history-fullscreen .ord-hist-head { position: sticky; top: 0; background: var(--surface-1, #fff); z-index: 4; }
@media (max-width: 720px) {
  .view[data-view="orders"].history-fullscreen .ord-hist-topbar { padding: 10px 2px 12px; }
  .view[data-view="orders"].history-fullscreen .ord-hist-topbar .page-title { font-size: 18px; }
}

.ord-hist-head {
  flex-wrap: wrap;
  gap: 12px;
}
.ord-hist-head .toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.ord-hist-search {
  min-width: 280px;
  flex: 1 1 280px;
}
.ord-hist-filters {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  background: var(--surface-2);
  flex-wrap: wrap;
}
.field-row-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ord-hist-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.input.sm {
  padding: 6px 10px;
  font-size: 12.5px;
}
.ord-hist-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.ord-hist-table tbody tr {
  cursor: pointer;
  transition: background var(--dur, .18s) ease;
}
.ord-hist-table tbody tr:hover {
  background: var(--surface-2);
}
.ord-hist-table .ord-hist-num {
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.ord-hist-table .ord-hist-cust-sub {
  font-size: 11.5px;
  color: var(--text-3);
  margin-top: 2px;
}
.ord-hist-pager {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 12px 18px;
  border-top: 1px solid var(--border-soft);
  font-size: 12.5px;
  color: var(--text-3);
}
.ord-hist-pager-label {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 720px) {
  .ord-hist-filters {
    align-items: stretch;
    flex-direction: column;
  }
  .ord-hist-filters .segmented { width: 100%; }
  .ord-hist-search { min-width: 0; }
}

/* ============================================================
   Kanban
   ============================================================ */
.kanban {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
/* `display: grid` above wins over the user-agent's [hidden] rule, so the
   kanban grid (New / Preparing / Ready / Out for delivery columns) was
   still visible when ordersMgr set hidden=true on tab switch. Force it. */
.kanban[hidden] { display: none !important; }
/* Wasted-order column + cards (Orders board). Additive, used by the
   "Wasted" kanban column and ordersMgr.buildKanCard. */
.dot-stat.waste { background: #e0533d; }
.kan-card.wasted { opacity: .8; border-left: 3px solid #e0533d; }
.kan-card.wasted .kan-title { text-decoration: line-through; text-decoration-color: rgba(224, 83, 61, .55); }
.kan-card .mini-btn.danger { background: rgba(224, 83, 61, .14); color: #e0533d; }
.kan-card .mini-btn.danger:hover { background: rgba(224, 83, 61, .24); }
.kan-col {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px;
  min-height: 400px;
}
.kan-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 13px;
  padding: 4px 6px 12px;
  color: var(--text);
}
.dot-stat { width: 8px; height: 8px; border-radius: 50%; }
.dot-stat.new { background: var(--violet-500); box-shadow: 0 0 0 3px rgba(139, 92, 246, .2); }
.dot-stat.preparing { background: var(--amber-500); box-shadow: 0 0 0 3px rgba(245, 158, 11, .2); }
.dot-stat.ready { background: var(--emerald-500); box-shadow: 0 0 0 3px rgba(16, 185, 129, .2); }
.dot-stat.delivery { background: var(--blue-500); box-shadow: 0 0 0 3px rgba(14, 165, 233, .2); }
/* Pending-payment column header — rose/amber to signal "money owed". */
.dot-stat.pending-payment { background: #f43f5e; box-shadow: 0 0 0 3px rgba(244, 63, 94, .2); }
.kan-count {
  margin-left: auto;
  font-size: 11px;
  padding: 2px 8px;
  background: #fff;
  border-radius: 20px;
  color: var(--text-3);
  font-weight: 600;
  border: 1px solid var(--border);
}
.kan-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  margin-bottom: 10px;
  transition: all var(--dur) var(--tx);
  cursor: grab;
}
.kan-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.kan-card.done { background: var(--emerald-50); border-color: var(--emerald-100); }
.kan-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.src { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 4px; text-transform: uppercase; letter-spacing: .04em; }
.src.dinein { background: var(--emerald-50); color: var(--emerald-600); }
.src.delivery { background: var(--violet-50); color: var(--violet-600); }
.src.takeaway { background: var(--amber-50); color: var(--amber-500); }
.src.online   { background: var(--indigo-50, #eef2ff); color: var(--indigo-700, #3730a3); margin-left: 4px; }
.kan-time { font-size: 11px; color: var(--text-3); }
.kan-title { font-weight: 600; font-size: 13px; }
.kan-meta { font-size: 11.5px; color: var(--text-3); margin-top: 2px; }
.progress {
  height: 4px;
  background: var(--surface-2);
  border-radius: 4px;
  margin-top: 10px;
  overflow: hidden;
}
.progress > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--amber-500), var(--emerald-500));
  border-radius: 4px;
  transition: width 1s var(--tx);
}
.kan-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  font-weight: 700;
  font-size: 13px;
}

/* Lifecycle timeline pips on each kanban card */
.kan-timeline {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border-soft);
}
.kan-timeline .ms {
  flex: 1;
  height: 4px;
  border-radius: 4px;
  background: var(--surface-2);
  transition: background var(--dur) var(--tx);
  cursor: help;
}
.kan-timeline .ms.done { background: var(--emerald-500); }
.kan-card.done .kan-timeline .ms.done { background: var(--emerald-600); }

/* Stage cell in the orders list table */
.cell-stage { font-weight: 600; font-size: 12.5px; color: var(--text); cursor: help; }
.cell-stage-sub { font-size: 11px; color: var(--text-3); margin-top: 2px; font-variant-numeric: tabular-nums; }

/* ============================================================
   Inventory item details modal — read-only quick-look
   ============================================================ */
.inv-d-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}
.inv-d-thumb {
  width: 56px; height: 56px;
  border-radius: 12px;
  background: var(--surface-2);
  display: grid; place-items: center;
  font-size: 28px;
  flex-shrink: 0;
}
.inv-d-head-meta { min-width: 0; }
.inv-d-name {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.01em;
  margin-bottom: 4px;
  overflow-wrap: anywhere;
}
.inv-d-status {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.inv-d-sku {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11.5px;
  color: var(--text-3);
  font-weight: 600;
}
.inv-d-stock-bar {
  background: var(--surface-2);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 16px;
}
.inv-d-stock-label {
  font-size: 12.5px;
  color: var(--text-2);
  margin-bottom: 8px;
}
.inv-d-stock-bar .bar-wrap { width: 100%; height: 8px; }
.inv-d-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 18px;
  padding: 14px 0;
  border-top: 1px solid var(--border-soft);
}
.inv-d-cell-wide { grid-column: 1 / -1; }
.inv-d-key {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-3);
  font-weight: 600;
  margin-bottom: 3px;
}
.inv-d-val {
  font-size: 13.5px;
  color: var(--text);
  font-weight: 500;
  overflow-wrap: anywhere;
}

@media (max-width: 480px) {
  .inv-d-grid { grid-template-columns: 1fr; gap: 10px; }
  .inv-d-thumb { width: 48px; height: 48px; font-size: 24px; }
  .inv-d-name { font-size: 15px; }
}

/* ============================================================
   Revenue overview chart — hover tooltip
   ============================================================ */
.chart-wrap { position: relative; }
.chart-tooltip {
  position: absolute;
  pointer-events: none;
  background: rgba(17, 24, 39, .94);
  color: #fff;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.4;
  white-space: nowrap;
  box-shadow: 0 8px 24px -8px rgba(0,0,0,.35);
  z-index: 5;
  transform: translateY(-100%);
  animation: srDrop .12s ease-out;
}
.chart-tooltip .rt-time {
  font-size: 11px;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 4px;
}
.chart-tooltip .rt-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
}
.chart-tooltip .rt-dot {
  width: 8px; height: 8px; border-radius: 50%;
  flex-shrink: 0;
}
.chart-tooltip .rt-dot.emerald { background: #34d399; }
.chart-tooltip .rt-dot.violet  { background: #a78bfa; }
.chart-tooltip .rt-key { color: #94a3b8; font-size: 11px; margin-left: 2px; }
.chart-tooltip b { font-variant-numeric: tabular-nums; }

/* Make the chart's hover hit-areas obvious-ish on hover */
#revHover rect:hover { fill: rgba(16, 185, 129, .04); }

/* ============================================================
   AI Insights — small enhancements over the existing styles
   ============================================================ */
.ai-act-impact {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  background: var(--emerald-50);
  color: var(--emerald-600);
  font-size: 10.5px;
  font-weight: 700;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
/* Bubbles in the Menu intelligence matrix — center on their (left, top) */
.matrix .bubble {
  transform: translate(-50%, -50%);
  cursor: help;
}

/* ============================================================
   My Profile modal
   ============================================================ */
.pf-modal { width: min(560px, 96vw); }
.pf-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: linear-gradient(180deg, var(--surface-2), #fff);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  margin-bottom: 16px;
}
.pf-avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: #fff;
  font-weight: 700;
  font-size: 18px;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
}
.pf-meta { min-width: 0; }
.pf-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}
.pf-role { margin-bottom: 4px; }
.pf-context {
  font-size: 11.5px;
  color: var(--text-3);
}
.pf-color-grid { display: flex; gap: 8px; }
.pf-color {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 3px solid #fff;
  outline: 2px solid var(--border);
  cursor: pointer;
  padding: 0;
  transition: outline-color var(--dur) var(--tx), transform var(--dur) var(--tx);
}
.pf-color:hover { transform: scale(1.08); }
.pf-color.active {
  outline-color: var(--text);
  outline-width: 3px;
}
.pf-color.emerald { background: linear-gradient(135deg,#10b981,#047857); }
.pf-color.violet  { background: linear-gradient(135deg,#a78bfa,#7c3aed); }
.pf-color.amber   { background: linear-gradient(135deg,#fbbf24,#f59e0b); }
.pf-color.rose    { background: linear-gradient(135deg,#fda4af,#f43f5e); }
.pf-color.blue    { background: linear-gradient(135deg,#60a5fa,#2563eb); }

.pf-meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--border-soft);
  margin-top: 8px;
}
.pf-meta-cell .pf-meta-key {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-3);
  font-weight: 600;
  margin-bottom: 3px;
}
.pf-meta-cell .pf-meta-val {
  font-size: 12.5px;
  color: var(--text);
}

/* ============================================================
   Billing & Subscription modal
   ============================================================ */
.bl-modal { width: min(560px, 96vw); }
.bl-plan-card {
  background: linear-gradient(135deg, rgba(16,185,129,.06), rgba(124,58,237,.04));
  border: 1px solid var(--emerald-200, #a7f3d0);
  border-radius: 12px;
  padding: 18px 20px;
  margin-bottom: 16px;
}
.bl-plan-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.bl-plan-name {
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.02em;
}
.bl-plan-price {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 28px;
  font-weight: 800;
  color: var(--emerald-600);
  letter-spacing: -.02em;
  margin-bottom: 6px;
}
.bl-plan-renews {
  font-size: 12.5px;
  color: var(--text-3);
  margin-bottom: 14px;
}
.bl-plan-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bl-plan-features li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text);
}
.bl-plan-features svg {
  color: var(--emerald-500);
  flex-shrink: 0;
}
.bl-section-head {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-3);
  margin: 16px 0 8px;
}
.bl-usage-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.bl-usage-cell {
  background: var(--surface-2);
  border-radius: 8px;
  padding: 10px 12px;
}
.bl-usage-cell .bl-usage-key {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-3);
  font-weight: 600;
  margin-bottom: 3px;
}
.bl-usage-cell .bl-usage-val {
  font-size: 18px;
  font-weight: 800;
  font-family: "Plus Jakarta Sans", sans-serif;
  color: var(--text);
  letter-spacing: -.01em;
}
.bl-contact {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}
.bl-foot {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
}
.bl-actions { display: flex; gap: 8px; margin-left: auto; }

@media (max-width: 480px) {
  .bl-usage-grid { grid-template-columns: 1fr; }
  .pf-meta-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Reports & Analytics — top items + schedule modal + print
   ============================================================ */
.rp-rank {
  display: inline-grid;
  place-items: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--surface-2);
  font-weight: 700;
  font-size: 11.5px;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
tr:nth-child(1) .rp-rank,
tr:first-child .rp-rank { background: linear-gradient(135deg, #fef3c7, #fde68a); color: #b45309; }

.rp-share-bar {
  position: relative;
  width: 140px;
  height: 18px;
  background: var(--surface-2);
  border-radius: 4px;
  overflow: hidden;
}
.rp-share-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: linear-gradient(90deg, #34d399, #10b981);
  border-radius: 4px;
  transition: width .6s ease-out;
}
.rp-share-bar span {
  position: relative;
  display: block;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  line-height: 18px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  z-index: 1;
}

/* Schedule report modal */
.rp-schedule-modal { width: min(560px, 96vw); }

/* Reports period segmented switcher in the page header */
.view[data-view="reports"] .page-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Hover tooltip — re-uses the same styling as the dashboard chart */

/* Print-friendly export — when body has rp-printing class, hide chrome */
@media print {
  body.rp-printing .sidebar,
  body.rp-printing .topbar,
  body.rp-printing .toast-container,
  body.rp-printing .backdrop,
  body.rp-printing .slide-panel,
  body.rp-printing .modal,
  body.rp-printing .page-actions,
  body.rp-printing #revHover,
  body.rp-printing #rp-rvc-hover {
    display: none !important;
  }
  body.rp-printing .app-shell { display: block; height: auto; overflow: visible; }
  body.rp-printing .main { height: auto; overflow: visible; padding: 0 12mm; }
  body.rp-printing .view[data-view="reports"] { display: block !important; }
  body.rp-printing .view:not([data-view="reports"]) { display: none !important; }
  body.rp-printing .grid-2 { grid-template-columns: 1fr 1fr; gap: 12mm; }
  body.rp-printing .card { break-inside: avoid; box-shadow: none; }
}

@media (max-width: 720px) {
  .rp-share-bar { width: 100px; }
  .view[data-view="reports"] #rp-period-seg { order: -1; flex: 1 1 100%; }
}

/* ============================================================
   RBAC — Roles & Permissions matrix (Settings)
   ============================================================ */
.rbac-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.rbac-sub {
  font-size: 12.5px;
  color: var(--text-3);
  margin-top: 4px;
  max-width: 600px;
  line-height: 1.45;
}
.rbac-head-actions { display: flex; gap: 8px; flex-shrink: 0; }

/* Role overview cards */
.rbac-roles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.rbac-role-card {
  background: linear-gradient(180deg, var(--surface-2), #fff);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  padding: 14px 16px;
}
.rbac-role-card.locked {
  background: linear-gradient(180deg, rgba(16,185,129,.06), #fff);
  border-color: var(--emerald-200, #a7f3d0);
}
.rbac-role-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
}
.rbac-role-desc {
  font-size: 11.5px;
  color: var(--text-3);
  margin-top: 2px;
}
.rbac-role-summary {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rbac-role-stat {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.rbac-num {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--text);
  font-family: "Plus Jakarta Sans", sans-serif;
}
.rbac-stat-label { font-size: 11px; color: var(--text-3); }
.rbac-role-mini {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.rbac-mini-chip {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Level color tokens — used in chips, mini-chips, and selects */
.level-none {
  background: var(--surface-2);
  color: var(--text-3);
}
.level-view {
  background: rgba(96,165,250,.12);
  color: #1d4ed8;
}
.level-edit {
  background: rgba(251,191,36,.16);
  color: #b45309;
}
.level-full {
  background: rgba(16,185,129,.14);
  color: var(--emerald-600);
}

/* Legend strip */
.rbac-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 6px 0 14px;
}
.rbac-lvl-pill {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
}

/* Matrix table */
.rbac-matrix-wrap {
  overflow-x: auto;
  border-radius: 10px;
  border: 1px solid var(--border-soft);
  background: #fff;
}
.rbac-matrix {
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
}
.rbac-matrix thead th {
  background: var(--surface-2);
  position: sticky;
  top: 0;
  z-index: 1;
  text-align: left;
  padding: 12px 14px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-3);
  border-bottom: 1px solid var(--border);
}
.rbac-matrix .rbac-mod-col { min-width: 200px; }
.rbac-matrix .rbac-role-col { min-width: 140px; text-transform: none; }
.rbac-matrix tbody tr.rbac-group-row td {
  background: linear-gradient(180deg, #fafbfa, #fff);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-3);
  padding: 10px 14px 6px;
  border-top: 1px solid var(--border-soft);
}
.rbac-matrix tbody tr:not(.rbac-group-row) td {
  padding: 10px 14px;
  border-top: 1px solid var(--border-soft);
}
.rbac-mod-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}
.rbac-cell { vertical-align: middle; }
.rbac-locked-icon {
  margin-left: 6px;
  font-size: 11px;
  opacity: .8;
}

/* Level-aware select */
.rbac-select {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 6px 26px 6px 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
  font-family: inherit;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 8px center;
  transition: border-color var(--dur) var(--tx), box-shadow var(--dur) var(--tx);
}
.rbac-select:focus { outline: 0; border-color: var(--emerald-500); box-shadow: 0 0 0 3px rgba(16,185,129,.12); }
.rbac-select:disabled { opacity: .65; cursor: not-allowed; }

/* Footer */
.rbac-foot {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  padding-top: 16px;
  margin-top: 8px;
}
.rbac-dirty-hint {
  font-size: 12px;
  color: var(--amber-500);
  font-weight: 600;
  margin-right: auto;
}

@media (max-width: 720px) {
  .rbac-roles { grid-template-columns: 1fr; }
  .rbac-matrix { min-width: 540px; }
}

/* ============================================================
   Integrations — API Key modal + API docs modal + Manage modal
   ============================================================ */
.ak-modal { width: min(520px, 96vw); }
.ak-modal-foot { display: flex !important; justify-content: flex-end; }
.ak-foot-form, .ak-foot-reveal { display: flex; gap: 8px; }
.ak-reveal-warn {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 12.5px;
  font-weight: 600;
  margin-bottom: 14px;
}
.ak-reveal-key {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 13px;
  background: #1f2937;
  color: #34d399;
  padding: 14px 16px;
  border-radius: 10px;
  word-break: break-all;
  user-select: all;
  margin-bottom: 10px;
}
.ak-reveal-meta {
  font-size: 12px;
  color: var(--text-3);
}

/* API docs modal */
.api-docs-modal { width: min(720px, 96vw); }
.api-docs-modal .modal-sub code {
  background: var(--surface-2);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 11.5px;
}
.ad-section { margin-bottom: 18px; }
.ad-section:last-child { margin-bottom: 0; }
.ad-section-head {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-3);
  margin-bottom: 8px;
}
.ad-text { font-size: 12.5px; color: var(--text-2); margin: 6px 0 0; }
.ad-code, .ad-pre {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px;
  background: #1f2937;
  color: #e5e7eb;
  padding: 10px 14px;
  border-radius: 8px;
  overflow-x: auto;
}
.ad-pre { white-space: pre-wrap; }
.ad-group {
  background: var(--surface-2);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 8px;
}
.ad-group-title {
  font-weight: 700;
  font-size: 13px;
  color: var(--text);
  text-transform: capitalize;
  margin-bottom: 6px;
}
.ad-endpoint-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ad-endpoint-list li {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11.5px;
  color: var(--text-2);
}

/* Integration manage modal */
.int-manage-modal { width: min(560px, 96vw); }
.int-mng-head { display: flex; align-items: center; gap: 14px; }
.int-mng-head .int-logo {
  width: 44px; height: 44px;
  border-radius: 10px;
  display: grid; place-items: center;
  font-weight: 700; font-size: 18px;
  background: var(--surface-2);
}
.int-mng-status {
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.int-mng-section {
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border-soft);
}
.int-mng-section:last-child { border-bottom: 0; margin-bottom: 0; }
.int-mng-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  font-size: 12.5px;
}
.int-mng-key {
  color: var(--text-3);
  font-weight: 500;
}
.int-mng-foot {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
}
.int-mng-actions { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; }

/* Manage modal — provider-aware help text + docs link */
.int-mng-section .field-help {
  font-size: 11.5px;
  color: var(--text-3);
  margin-top: 4px;
  line-height: 1.4;
}
.im-docs-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--violet-600, #7c3aed);
  text-decoration: none;
}
.im-docs-link:hover { text-decoration: underline; }

/* API keys table chip styling */
/* Reports — Saved Reports table responsiveness
   Seven columns + 4 action buttons per row. Without a min-width the
   table tries to fit on mobile and the actions cell (constrained to
   50px by the generic .rv-cell-actions rule) wraps every button onto
   its own line. We declare a min-width so .table-wrap scrolls
   horizontally instead, and override the actions cell so the buttons
   stay on a single horizontal line. */
.rp-saved-table {
  min-width: 980px;
  width: 100%;
}
.rp-saved-table thead th { white-space: nowrap; }
.rp-saved-table .rv-th-actions { width: auto; }
.rp-saved-table .rv-cell-actions {
  width: auto;
  white-space: nowrap;
  text-align: right;
}
.rp-saved-table .rv-cell-actions .row-btn + .row-btn { margin-left: 4px; }
.rp-saved-table tbody td { vertical-align: middle; }

/* Reports — saved-report viewer modal sections */
.rp-viewer-identity {
  background: var(--surface-2);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 22px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 24px;
  border-left: 3px solid var(--emerald-500, #10b981);
}
.rp-id-row {
  display: flex;
  gap: 8px;
  font-size: 12.5px;
  align-items: baseline;
}
.rp-id-k {
  font-weight: 600;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 10.5px;
  min-width: 78px;
}
.rp-id-v { color: var(--text); font-weight: 500; word-break: break-word; }
@media (max-width: 640px) { .rp-viewer-identity { grid-template-columns: 1fr; } }

.rp-viewer-section { margin-bottom: 18px; }
.rp-viewer-section:last-child { margin-bottom: 0; }
.rp-viewer-section h4 {
  font-size: 13px;
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.rp-viewer-section .rp-viewer-sub {
  font-size: 11.5px;
  color: var(--text-3);
  margin-bottom: 10px;
  font-style: italic;
}
.rp-viewer-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}
.rp-viewer-kpi {
  background: var(--surface-2);
  border-radius: var(--radius);
  padding: 12px;
}
.rp-viewer-kpi-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-3);
  font-weight: 600;
}
.rp-viewer-kpi-value {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 18px;
  font-weight: 800;
  margin-top: 4px;
  letter-spacing: -0.01em;
}
.row-btn.danger { color: var(--rose-600, #e11d48); }
.row-btn.danger:hover { background: #fee2e2; }

.api-keys-table {
  /* Eight columns of dense data — force the table to keep its natural
     width and let .table-wrap scroll horizontally on narrow viewports
     instead of squeezing every header into a vertical word-split. */
  min-width: 880px;
  width: 100%;
}
.api-keys-table thead th { white-space: nowrap; }
.api-keys-table tbody td { padding: 12px 14px; vertical-align: middle; }
.api-keys-table code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11.5px;
  color: var(--text-2);
}

/* ============================================================
   Staff & HR — directory page + add/edit modal
   ============================================================ */
.hr-table { min-width: 1080px; width: 100%; }
.hr-table tbody td { padding: 12px 14px; vertical-align: middle; }
.hr-table tbody tr { transition: background var(--dur) var(--tx); }
.hr-table tbody tr:hover { background: rgba(16, 185, 129, .04); }

.hr-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .02em;
  flex-shrink: 0;
  box-shadow: 0 2px 4px rgba(0,0,0,.08);
}

.hr-position {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-2);
  white-space: nowrap;
}
.hr-shift {
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  font-weight: 500;
}
.hr-days {
  font-size: 11.5px;
  color: var(--text-3);
  white-space: nowrap;
}
.hr-salary-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.hr-salary-pill.monthly {
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  color: #b45309;
}
.hr-salary-pill.hourly {
  background: var(--emerald-50);
  color: var(--emerald-600);
}
.hr-salary-pill .hr-salary-period {
  font-size: 10.5px;
  font-weight: 500;
  opacity: .75;
}

.hr-filter {
  height: 36px;
  padding: 0 28px 0 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  font-size: 12.5px;
  color: var(--text);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 8px center;
}
.hr-filter:focus {
  outline: 0;
  border-color: var(--emerald-500);
  box-shadow: 0 0 0 3px rgba(16,185,129,.12);
}

/* Staff modal */
.hr-modal { width: min(640px, 96vw); }
.hr-modal-section {
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border-soft);
}
.hr-modal-section:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.hr-section-head {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-3);
  margin-bottom: 12px;
}

/* Salary type toggle (two big choice cards) */
.hr-salary-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}
.hr-salary-opt {
  background: #fff;
  border: 2px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 10px;
  transition: border-color var(--dur) var(--tx), background var(--dur) var(--tx);
}
.hr-salary-opt:hover { border-color: var(--text-3); }
.hr-salary-opt.active {
  border-color: var(--emerald-500);
  background: linear-gradient(180deg, rgba(16,185,129,.06), #fff 60%);
}
.hr-salary-opt .hr-salary-icon {
  grid-row: 1 / 3;
  font-size: 22px;
  align-self: center;
}
.hr-salary-opt .hr-salary-name {
  font-weight: 700;
  font-size: 13.5px;
  color: var(--text);
}
.hr-salary-opt .hr-salary-desc {
  font-size: 11.5px;
  color: var(--text-3);
}

/* Working-day pills */
.hr-days {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.hr-days .hr-day {
  appearance: none;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
  font-family: inherit;
  transition: all var(--dur) var(--tx);
}
.hr-days .hr-day:hover { border-color: var(--text-3); }
.hr-days .hr-day.active {
  background: var(--emerald-500);
  border-color: var(--emerald-500);
  color: #fff;
}

.hr-modal-foot {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
}
.hr-form-actions { display: flex; gap: 8px; margin-left: auto; }

/* Transfer button styling on staff rows */
.row-btn.hr-transfer-btn {
  background: var(--violet-100, #ede9fe);
  color: var(--violet-600, #7c3aed);
  display: inline-flex;
  align-items: center;
  margin-right: 4px;
}
.row-btn.hr-transfer-btn:hover {
  background: rgba(124, 58, 237, .15);
}

/* ============================================================
   Transfer Employee modal
   ============================================================ */
.hr-transfer-modal { width: min(560px, 96vw); }
.hr-tr-staff {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: linear-gradient(180deg, var(--surface-2), #fff);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  margin-bottom: 16px;
}
.hr-tr-avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
  box-shadow: 0 2px 4px rgba(0,0,0,.08);
}
.hr-tr-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px;
}
.hr-tr-position {
  font-size: 12.5px;
  color: var(--text-3);
}

/* From → To visual */
.hr-tr-flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: stretch;
  margin-bottom: 18px;
}
.hr-tr-leg {
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  padding: 12px 14px;
}
.hr-tr-leg.from {
  border-color: rgba(245, 158, 11, .3);
  background: linear-gradient(180deg, rgba(245, 158, 11, .06), #fff 60%);
}
.hr-tr-leg.to {
  border-color: var(--emerald-200, #a7f3d0);
  background: linear-gradient(180deg, rgba(16, 185, 129, .06), #fff 60%);
}
.hr-tr-leg-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-3);
  font-weight: 700;
  margin-bottom: 4px;
}
.hr-tr-leg-branch {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hr-tr-arrow {
  display: grid;
  place-items: center;
  color: var(--text-3);
  padding: 0 4px;
}
.hr-transfer-foot {
  display: flex !important;
  justify-content: flex-end;
  gap: 8px;
}

@media (max-width: 480px) {
  .hr-tr-flow { grid-template-columns: 1fr; }
  .hr-tr-arrow { transform: rotate(90deg); padding: 4px 0; }
}

/* Branch context strip inside the staff modal */
.hr-branch-context {
  display: flex;
  align-items: center;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 12px;
  color: var(--text-2);
  margin-bottom: 12px;
}
.hr-branch-context b { color: var(--text); font-weight: 700; }

/* Progressive column-hide (column 3 used to be Branch — removed). New
   indices: 1 Staff · 2 Position · 3 Salary · 4 Shift · 5 Days · 6 Status · 7 ✏ */
@media (max-width: 1180px) {
  .hr-table { min-width: 820px; }
  .hr-table thead th:nth-child(5),
  .hr-table tbody td:nth-child(5) { display: none; } /* Days */
}
@media (max-width: 980px) {
  .hr-table { min-width: 660px; }
  .hr-table thead th:nth-child(4),
  .hr-table tbody td:nth-child(4) { display: none; } /* Shift */
}
@media (max-width: 720px) {
  .hr-table { min-width: 480px; }
  .hr-salary-toggle { grid-template-columns: 1fr; }
}

/* ============================================================
   Rider assignment modal (Dispatch)
   ============================================================ */
.rdr-assign-modal { width: min(560px, 96vw); }
.rdr-assign-info {
  background: var(--surface-2);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 12px;
  font-size: 12.5px;
  color: var(--text-2);
}
.rdr-ord-num {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-weight: 700;
  color: var(--text);
  background: #fff;
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid var(--border-soft);
  margin-right: 4px;
}
.rdr-assign-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 60vh;
  overflow-y: auto;
}
.rdr-assign-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  transition: border-color var(--dur) var(--tx), box-shadow var(--dur) var(--tx);
}
.rdr-assign-row:hover {
  border-color: var(--emerald-500);
  box-shadow: 0 4px 12px -6px rgba(16,185,129,.18);
}
.rdr-assign-row.recommended {
  border-color: var(--emerald-200, #a7f3d0);
  background: linear-gradient(180deg, rgba(16,185,129,.04), #fff 50%);
}
.rdr-assign-avatar {
  width: 42px; height: 42px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
}
.rdr-assign-info-block { flex: 1; min-width: 0; }
.rdr-assign-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 3px;
}
.rdr-assign-meta {
  font-size: 11.5px;
  color: var(--text-3);
  display: flex;
  flex-wrap: wrap;
  gap: 3px 10px;
}
.rdr-assign-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.rdr-assign-actions .btn.sm {
  padding: 6px 14px;
  font-size: 12px;
}
.rdr-no-riders {
  text-align: center;
  padding: 28px 16px;
}
.rdr-no-riders-icon { font-size: 36px; margin-bottom: 8px; }
.rdr-no-riders-title { font-weight: 600; color: var(--text); margin-bottom: 4px; }
.rdr-no-riders-sub { font-size: 12px; color: var(--text-3); margin-bottom: 16px; }

/* ============================================================
   Rider live tracking modal (Track)
   ============================================================ */
.rdr-track-modal { width: min(720px, 96vw); }
.rdr-track-head { min-width: 0; }
.rdr-track-name {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 3px;
}
.rdr-track-meta {
  font-size: 12px;
  color: var(--text-3);
}
.rdr-track-body { padding: 16px 18px; }
.rdr-track-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
.rdr-tk-stat {
  background: var(--surface-2);
  border-radius: 8px;
  padding: 10px 12px;
}
.rdr-tk-key {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-3);
  font-weight: 600;
  margin-bottom: 3px;
}
.rdr-tk-val {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.rdr-map-wrap {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border-soft);
  background: #f4f7f5;
}
.rdr-map {
  display: block;
  width: 100%;
  height: 380px;
}
/* New Google Maps canvas (replaces the legacy .rdr-map SVG).
   Height matches the old SVG so the modal layout is unchanged. */
.rdr-track-map-canvas {
  width: 100%;
  height: 380px;
  position: relative;
  background: var(--surface-2, #f4f6f8);
}
.rdr-track-map-canvas .rdr-map-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--text-3);
  text-align: center;
  padding: 24px;
}
.rdr-map-legend {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  padding: 6px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  color: var(--text-2);
  box-shadow: 0 4px 12px -6px rgba(0,0,0,.15);
}
.rdr-map-legend span {
  display: flex;
  align-items: center;
  gap: 6px;
}
.rdr-map-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.rdr-map-dot.emerald { background: #10b981; }
.rdr-map-dot.red     { background: #ef4444; }
.rdr-map-dot.live    { background: #fff; border: 2px solid #10b981; }
.rdr-map-progress {
  position: absolute;
  bottom: 12px;
  left: 12px;
  right: 12px;
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  padding: 10px 12px;
  box-shadow: 0 4px 12px -6px rgba(0,0,0,.15);
}
.rdr-progress-bar {
  width: 100%;
  height: 6px;
  border-radius: 4px;
  background: var(--surface-2);
  overflow: hidden;
}
.rdr-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #34d399, #10b981);
  border-radius: 4px;
  transition: width .8s ease-out;
}
.rdr-progress-label {
  font-size: 11.5px;
  color: var(--text-2);
  margin-top: 6px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rdr-track-foot {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.rdr-track-source {
  font-size: 11.5px;
  color: var(--text-3);
}

/* Track button on rider rows — emerald accent */
.row-btn.rdr-track-btn {
  background: var(--emerald-50);
  color: var(--emerald-600);
  display: inline-flex;
  align-items: center;
}
.row-btn.rdr-track-btn:hover { background: var(--emerald-100, #d1fae5); }

@media (max-width: 600px) {
  .rdr-track-stats { grid-template-columns: 1fr 1fr; }
  .rdr-map { height: 300px; }
  .rdr-assign-row { flex-wrap: wrap; }
  .rdr-assign-actions { width: 100%; justify-content: flex-end; }
}

/* ============================================================
   Delivery Riders — directory page
   ============================================================ */
.rdr-table { min-width: 900px; width: 100%; }
.rdr-table tbody td { padding: 12px 14px; vertical-align: middle; }
.rdr-table tbody tr { transition: background var(--dur) var(--tx); }
.rdr-table tbody tr:hover { background: rgba(16, 185, 129, .04); }

.rdr-avatar {
  position: relative;
  width: 38px; height: 38px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: #fff;
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: .02em;
  flex-shrink: 0;
  box-shadow: 0 2px 4px rgba(0,0,0,.08);
}
/* Status dot at the bottom-right corner of the avatar */
.rdr-avatar::after {
  content: "";
  position: absolute;
  width: 11px; height: 11px;
  border-radius: 50%;
  bottom: -1px; right: -1px;
  border: 2px solid #fff;
}
.rdr-avatar.status-online::after  { background: #10b981; }
.rdr-avatar.status-busy::after    { background: #f59e0b; }
.rdr-avatar.status-offline::after { background: #94a3b8; }

.rdr-vehicle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  color: var(--text-2);
  font-weight: 500;
}
.rdr-plate {
  display: inline-block;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--text);
  background: var(--surface-2);
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid var(--border-soft);
  text-transform: uppercase;
}
.rdr-rating {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  color: #b45309;
  font-size: 11.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.rdr-active-count {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: #ffedd5;
  color: #c2410c;
  font-size: 11.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.rdr-modal { width: min(560px, 94vw); }
.rdr-modal-foot {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
}
.rdr-form-actions { display: flex; gap: 8px; margin-left: auto; }

/* ---------- Rider mobile-app credentials info (in edit modal) ---------- */
.rdr-creds-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  margin-top: 16px;
  background: linear-gradient(135deg, #ecfdf5, #f0fdfa);
  border: 1px solid var(--emerald-100);
  border-radius: 12px;
}
.rdr-creds-info-head { display: flex; align-items: center; gap: 12px; }
.rdr-creds-info-ico {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  background: #fff;
  border: 1px solid var(--emerald-100);
  border-radius: 10px;
  font-size: 18px;
}
.rdr-creds-info-title { font-weight: 600; font-size: 13.5px; color: var(--text); }
.rdr-creds-info-sub   { font-size: 11.5px; color: var(--text-3); margin-top: 2px; }

/* ---------- Credentials toast modal (one-time temp-password reveal) ---------- */
.rdr-creds-modal { z-index: 250; }
.rdr-creds-dialog { width: min(520px, 94vw); }
.rdr-creds-body { display: flex; flex-direction: column; gap: 16px; }
.rdr-creds-card {
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.rdr-creds-row {
  display: grid;
  grid-template-columns: 130px 1fr auto;
  gap: 10px;
  align-items: center;
}
.rdr-creds-key {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--text-3);
  font-weight: 700;
}
.rdr-creds-val {
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  padding: 8px 12px;
  font-family: "JetBrains Mono", "Consolas", monospace;
  font-size: 13.5px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  user-select: all;
}
.rdr-creds-val.rdr-creds-pw {
  letter-spacing: .04em;
  font-weight: 600;
}
.rdr-creds-hint {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 12.5px;
  color: var(--text-2);
  line-height: 1.5;
}
.rdr-creds-hint b { color: var(--text); }
.mini-btn.success { background: var(--emerald-500); color: #fff; border-color: var(--emerald-500); }

@media (max-width: 520px) {
  .rdr-creds-info { flex-direction: column; align-items: stretch; }
  .rdr-creds-info-head { flex: 1; }
  .rdr-creds-row { grid-template-columns: 100px 1fr auto; }
}

/* Progressive column hide for small screens */
@media (max-width: 1180px) {
  .rdr-table { min-width: 760px; }
  .rdr-table thead th:nth-child(4),
  .rdr-table tbody td:nth-child(4) { display: none; } /* hide Plate */
}
@media (max-width: 940px) {
  .rdr-table { min-width: 600px; }
  .rdr-table thead th:nth-child(8),
  .rdr-table tbody td:nth-child(8) { display: none; } /* hide Deliveries */
}
@media (max-width: 720px) {
  .rdr-table { min-width: 480px; }
  .rdr-table thead th:nth-child(2),
  .rdr-table tbody td:nth-child(2) { display: none; } /* hide Phone */
  .rdr-table thead th:nth-child(7),
  .rdr-table tbody td:nth-child(7) { display: none; } /* hide Rating */
}

/* ============================================================
   Loyalty point badges (menu cards + order details)
   ============================================================ */
.mm-loyalty {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  color: #b45309;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  margin-left: auto;
}
.loyalty-hint {
  font-size: 11px;
  color: var(--text-3);
  font-weight: 400;
  margin-left: 6px;
}
.ord-d-item-loyalty {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  background: #fef3c7;
  color: #b45309;
  font-size: 10.5px;
  font-weight: 700;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.ord-d-cust-loyalty {
  margin-top: 8px;
  padding: 8px 10px;
  background: linear-gradient(135deg, #fef3c7, #fef9c3);
  border-radius: 8px;
  font-size: 12.5px;
  color: #78350f;
  font-weight: 500;
}
.ord-d-cust-loyalty b { color: #b45309; font-variant-numeric: tabular-nums; }

/* ============================================================
   Order details modal
   ============================================================ */
.ord-detail-modal { width: min(680px, 96vw); }
.ord-d-head { min-width: 0; }
.ord-d-num-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}
.ord-d-num {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--text);
}
.ord-d-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 12px 14px;
  background: var(--surface-2);
  border-radius: 10px;
  margin-bottom: 16px;
}
.ord-d-stat .ord-d-key {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-3);
  font-weight: 600;
  margin-bottom: 3px;
}
.ord-d-stat .ord-d-val {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.ord-d-total { color: var(--emerald-600) !important; font-size: 16px !important; }
.ord-d-pay-method { color: var(--text-3); font-size: 11.5px; margin-left: 4px; }

/* Sections */
.ord-d-section { margin-top: 18px; }
.ord-d-section:first-of-type { margin-top: 0; }
.ord-d-section-head {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-3);
  font-weight: 700;
  margin-bottom: 8px;
}

/* Customer block */
.ord-d-customer {
  background: var(--surface-2);
  border-radius: 8px;
  padding: 10px 12px;
}
.ord-d-cust-name { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.ord-d-cust-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.ord-d-cust-id {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-2);
  background: #fff;
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid var(--border-soft);
}
.ord-d-cust-contact { font-size: 12px; color: var(--text-2); }
.ord-d-cust-contact a { color: var(--emerald-600); text-decoration: none; }
.ord-d-cust-contact a:hover { text-decoration: underline; }

/* Items list */
.ord-d-items { list-style: none; padding: 0; margin: 0; }
.ord-d-items li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-soft);
}
.ord-d-items li:last-child { border-bottom: 0; }
.ord-d-item-name { font-size: 13.5px; font-weight: 500; color: var(--text); }
.ord-d-item-qty {
  display: inline-block;
  margin-right: 4px;
  font-weight: 700;
  color: var(--emerald-600);
  font-variant-numeric: tabular-nums;
}
.ord-d-item-meta {
  font-size: 11.5px;
  color: var(--text-3);
  grid-column: 1 / 2;
}
.ord-d-item-total {
  font-weight: 600;
  font-size: 13.5px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  grid-column: 2 / 3;
  grid-row: 1 / 3;
  align-self: center;
}
.ord-d-empty { padding: 14px 0; color: var(--text-3); font-size: 12.5px; text-align: center; }

/* Pricing breakdown */
.ord-d-prices { background: var(--surface-2); border-radius: 8px; padding: 10px 14px; }
.ord-d-price-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  padding: 4px 0;
  font-variant-numeric: tabular-nums;
}
.ord-d-price-row span:first-child { color: var(--text-2); }
.ord-d-price-row span:last-child { color: var(--text); font-weight: 500; }
.ord-d-price-row.total {
  border-top: 1px solid var(--border);
  margin-top: 4px;
  padding-top: 8px;
}
.ord-d-price-row.total span { font-weight: 700; font-size: 15px; color: var(--text); }
.ord-d-price-row.total span:last-child { color: var(--emerald-600); }

/* Lifecycle timeline */
.ord-d-timeline {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ord-d-timeline li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--surface-2);
  border-left: 3px solid var(--border);
}
.ord-d-timeline li.done {
  border-left-color: var(--emerald-500);
  background: rgba(16, 185, 129, .05);
}
.ord-d-timeline li.pending { opacity: .55; }
.ord-d-tl-icon { font-size: 16px; flex-shrink: 0; }
.ord-d-tl-text { flex: 1; min-width: 0; }
.ord-d-tl-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.ord-d-tl-time {
  font-size: 11.5px;
  color: var(--text-3);
  margin-top: 1px;
}
.ord-d-timeline li.done .ord-d-tl-label { color: var(--emerald-600); }

/* Misc info grid */
.ord-d-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 18px;
  padding: 14px 0;
}
.ord-d-cell .ord-d-key {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-3);
  font-weight: 600;
  margin-bottom: 3px;
}
.ord-d-cell .ord-d-val {
  font-size: 13px;
  color: var(--text);
  font-weight: 500;
  overflow-wrap: anywhere;
}
.ord-d-notes {
  background: var(--surface-2);
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 12.5px;
  color: var(--text);
  line-height: 1.5;
  margin-top: 6px;
}

/* Footer actions */
.ord-d-foot { display: flex !important; justify-content: flex-end; }
.ord-d-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- Delivery proof panel (rider photo on hand-off) ---------- */
.dlv-proof-section { margin-top: 18px; }
.dlv-proof-card {
  background: linear-gradient(135deg, #ecfdf5, #f0fdfa);
  border: 1px solid var(--emerald-100);
  border-radius: 14px;
  padding: 16px;
  margin-top: 8px;
}

/* Empty state */
.dlv-proof-empty {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 24px 16px;
  text-align: center;
  border: 2px dashed var(--emerald-200);
  background: #fff;
  border-radius: 12px;
  color: var(--text-3);
}
.dlv-proof-empty-ico { font-size: 32px; margin-bottom: 6px; opacity: .8; }
.dlv-proof-empty-title { font-size: 13.5px; color: var(--text-2); font-weight: 600; margin-bottom: 2px; }
.dlv-proof-empty-sub { font-size: 11.5px; color: var(--text-3); }

/* Filled state — image + meta */
.dlv-proof-filled {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 16px;
  align-items: stretch;
}
.dlv-proof-thumb {
  position: relative;
  display: block;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--border-soft);
  cursor: zoom-in;
  transition: transform var(--dur) var(--tx), box-shadow var(--dur) var(--tx);
}
.dlv-proof-thumb:hover { transform: scale(1.01); box-shadow: var(--shadow-md); }
.dlv-proof-thumb img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.dlv-proof-thumb .dlv-proof-zoom {
  position: absolute;
  inset: auto 8px 8px auto;
  background: rgba(15, 23, 42, .82);
  color: #fff;
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 6px;
  opacity: 0;
  transition: opacity var(--dur) var(--tx);
}
.dlv-proof-thumb:hover .dlv-proof-zoom { opacity: 1; }

.dlv-proof-meta {
  display: flex; flex-direction: column;
  justify-content: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text-2);
}
.dlv-proof-meta-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.dlv-proof-when { font-size: 11.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.dlv-proof-meta-rider { font-size: 12.5px; color: var(--text-2); }
.dlv-proof-meta-rider b { color: var(--text); }
.dlv-proof-note {
  font-size: 12.5px;
  color: var(--text-2);
  font-style: italic;
  background: #fff;
  border-left: 3px solid var(--emerald-500);
  padding: 8px 10px;
  border-radius: 4px;
}

.dlv-proof-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.dlv-proof-actions .btn.sm { padding: 7px 14px; font-size: 12.5px; }
.dlv-proof-actions .btn.danger { color: var(--rose-500); }
.dlv-proof-actions .btn.danger:hover { background: var(--rose-50); }

@media (max-width: 520px) {
  .dlv-proof-filled { grid-template-columns: 1fr; }
  .dlv-proof-thumb img { aspect-ratio: 4 / 3; }
}

@media (max-width: 600px) {
  .ord-d-summary { grid-template-columns: 1fr; gap: 8px; padding: 10px 12px; }
  .ord-d-grid { grid-template-columns: 1fr; }
  .ord-d-actions { width: 100%; justify-content: stretch; }
  .ord-d-actions .btn { flex: 1 1 auto; }
}

/* Make kanban cards feel clickable */
.kan-card[data-order-id] { cursor: pointer; }

/* ============================================================
   POS — Customer auto-fill (Takeaway & Delivery)
   ============================================================ */
.cust-ac { position: relative; }
.cust-ac > input { width: 100%; padding-right: 32px; }
.cust-ac-clear {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background var(--dur) var(--tx), color var(--dur) var(--tx);
}
.cust-ac-clear:hover {
  background: var(--rose-100, #fee2e2);
  color: var(--rose-500);
}

/* Dropdown panel beneath the customer-name input */
.cust-ac-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 16px 40px -12px rgba(0,0,0,.18), 0 4px 12px -6px rgba(0,0,0,.08);
  max-height: 300px;
  overflow-y: auto;
  z-index: 50;
  padding: 4px;
  animation: srDrop .12s ease-out;
}
.cust-ac-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background var(--dur) var(--tx);
}
.cust-ac-row:hover { background: var(--surface-2); }
.cust-ac-avatar {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 700;
  font-size: 11.5px;
  flex-shrink: 0;
}
.cust-ac-text { flex: 1; min-width: 0; }
.cust-ac-name {
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cust-ac-sub {
  font-size: 11px;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cust-ac-empty {
  padding: 14px 12px;
  font-size: 12px;
  color: var(--text-3);
  text-align: center;
  line-height: 1.45;
}

/* Selected-customer badge that appears under the name input */
.otf-cust-badge-row {
  align-items: center;
}
.otf-cust-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  background: var(--emerald-50);
  border: 1px solid var(--emerald-100, #d1fae5);
  border-radius: 999px;
  font-size: 11px;
  color: var(--emerald-600);
}
.otf-cust-num {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-weight: 700;
  letter-spacing: .02em;
}

/* ============================================================
   Order Management — Filters dropdown panel
   ============================================================ */
.orders-filter-wrap { position: relative; }
#ord-filter-btn { position: relative; padding-right: 14px; }
#ord-filter-btn.active {
  background: var(--surface-2);
  border-color: var(--emerald-200);
  box-shadow: 0 0 0 4px rgba(16, 185, 129, .08);
}
.ord-filter-badge {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: 6px;
  border-radius: 999px;
  background: var(--emerald-500);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  vertical-align: 1px;
}
.orders-filter-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 320px;
  max-width: 90vw;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 16px 40px -12px rgba(0,0,0,.18), 0 4px 12px -6px rgba(0,0,0,.08);
  padding: 16px;
  z-index: 50;
  animation: srDrop .12s ease-out;
}
.off-section { margin-bottom: 14px; }
.off-section:last-of-type { margin-bottom: 0; }
.off-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-3);
  font-weight: 600;
  margin-bottom: 6px;
}
.orders-filter-panel .segmented {
  flex-wrap: wrap;
  gap: 4px;
  background: var(--surface-2);
  padding: 3px;
  border-radius: 8px;
}
.orders-filter-panel .seg {
  font-size: 12px;
  padding: 5px 10px;
}
.orders-filter-panel .search-sm {
  width: 100%;
  height: 34px;
  padding: 0 10px;
}
.orders-filter-panel .search-sm input {
  width: 100%;
  font-size: 12.5px;
}
.off-foot {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border-soft);
}
.off-foot .btn.sm {
  padding: 7px 14px;
  font-size: 12.5px;
}

@media (max-width: 480px) {
  .orders-filter-panel {
    right: -8px;
    width: calc(100vw - 32px);
  }
}

/* ============================================================
   Customers — segment chip + filter dropdown + modal
   ============================================================ */
/* "New" segment chip — soft violet to differentiate from "Frequent" (default) */
.chip.new {
  background: var(--violet-100, #ede9fe);
  color: var(--violet-600, #7c3aed);
}
/* Segment filter dropdown next to the search box */
.cust-filter {
  height: 36px;
  padding: 0 28px 0 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  font-size: 12.5px;
  color: var(--text);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 8px center;
  transition: border-color var(--dur) var(--tx), box-shadow var(--dur) var(--tx);
}
.cust-filter:hover { border-color: var(--text-3); }
.cust-filter:focus {
  outline: 0;
  border-color: var(--emerald-500);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, .12);
}
.cust-modal { width: min(560px, 94vw); }

/* =========================================================
   Riders live-map modal
   Sized to feel like a real ops console — taller than typical
   form modals so the map gets useful real estate. The body
   has 0 padding so the Google Maps canvas can fill edge-to-edge.
   ========================================================= */
.rdr-map-modal {
  width: min(960px, 96vw);
  height: min(720px, 92vh);
  display: flex;
  flex-direction: column;
}
.rdr-map-modal .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.rdr-map-canvas {
  width: 100%;
  height: 100%;
  position: relative;
  background: var(--surface-2, #f4f6f8);
}
.rdr-map-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--text-3);
  text-align: center;
  padding: 32px;
}
.rdr-map-placeholder-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-2);
  margin-top: 6px;
}
.rdr-map-placeholder-sub {
  font-size: 12.5px;
  max-width: 380px;
  line-height: 1.5;
}
.rdr-map-placeholder a {
  color: var(--emerald-600);
  text-decoration: underline;
}
.rdr-map-legend {
  display: flex;
  gap: 14px;
  font-size: 11.5px;
  color: var(--text-3);
  font-weight: 600;
  flex-wrap: wrap;
}
.rdr-map-legend i {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: 1px;
  box-shadow: 0 0 0 2px #fff;
}
@media (max-width: 480px) {
  .rdr-map-modal { width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; }
}
.cust-modal-foot {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
}
.cust-form-actions { display: flex; gap: 8px; margin-left: auto; }

/* ============================================================
   Suppliers modal
   ============================================================ */
/* ----- Suppliers — full page table (replaces the old modal) ----- */
.sup-page-table { min-width: 1100px; width: 100%; }
.sup-page-table tbody td { padding: 12px 14px; vertical-align: middle; }
.sup-page-table tbody tr { transition: background var(--dur) var(--tx); }
.sup-page-table tbody tr:hover { background: rgba(16, 185, 129, .04); }

/* Address cell can hold a long string — clamp to 2 lines so rows stay tidy */
.sup-addr {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  overflow: hidden;
  font-size: 12.5px;
  color: var(--text-2);
  max-width: 220px;
  line-height: 1.35;
}
/* Delivery-time pill — subtle so it doesn't compete with the status chip */
.sup-eta {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--violet-100, #ede9fe);
  color: var(--violet-600, #7c3aed);
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}

/* Supplier avatar — gradient square with initials, color seeded by name */
.sup-cell-main { display: flex; align-items: center; gap: 12px; }
.sup-avatar {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: .02em;
  flex-shrink: 0;
  box-shadow: 0 2px 4px rgba(0,0,0,.08);
}

.sup-link {
  color: var(--emerald-600);
  text-decoration: none;
  font-weight: 500;
}
.sup-link:hover { text-decoration: underline; }

/* Item-count chip — visually consistent with the rest of the app */
.sup-count-chip {
  display: inline-block;
  min-width: 30px;
  text-align: center;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 11.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.sup-count-chip.has-items {
  background: var(--emerald-50);
  color: var(--emerald-600);
}

/* ----- Form-only modal (for add/edit) ----- */
.sup-form-modal { width: min(520px, 94vw); }
.sup-form-modal-foot {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
}
.sup-form-actions { display: flex; gap: 8px; margin-left: auto; }

/* Progressive column-hide: address goes first, then warehouse, then email
   so the most-essential cols (name, phone, delivery, items, edit) survive */
@media (max-width: 1180px) {
  .sup-page-table { min-width: 900px; }
  .sup-page-table .sup-col-address { display: none; }
}
@media (max-width: 940px) {
  .sup-page-table { min-width: 720px; }
  .sup-page-table .sup-col-warehouse { display: none; }
}
@media (max-width: 720px) {
  .sup-page-table { min-width: 560px; }
  .sup-page-table .sup-col-email { display: none; }
}
@media (max-width: 480px) {
  .sup-avatar { width: 32px; height: 32px; font-size: 11.5px; }
  .sup-form-modal-foot { flex-direction: column-reverse; align-items: stretch; gap: 10px; }
  .sup-form-actions { width: 100%; justify-content: flex-end; }
}

/* ============================================================
   Tables Management — floor-plan grid
   ============================================================ */
.tb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
  padding-top: 12px;
}
.tb-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding: 16px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: transform var(--dur) var(--tx), box-shadow var(--dur) var(--tx), border-color var(--dur) var(--tx);
  min-height: 130px;
}
.tb-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px -12px rgba(0, 0, 0, .18);
  border-color: var(--border-strong);
}
/* Status accent: thicker top stripe so it reads from a distance */
.tb-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 4px;
  border-radius: 12px 12px 0 0;
  background: var(--text-3);
}
.tb-card.status-available::before { background: linear-gradient(90deg, #10b981, #059669); }
.tb-card.status-occupied::before  { background: linear-gradient(90deg, #fbbf24, #d97706); }
.tb-card.status-reserved::before  { background: linear-gradient(90deg, #60a5fa, #2563eb); }
.tb-card.status-occupied  { background: linear-gradient(180deg, rgba(251, 191, 36, .06), #fff 60%); }
.tb-card.status-reserved  { background: linear-gradient(180deg, rgba(96, 165, 250, .06), #fff 60%); }
.tb-card.status-available { background: linear-gradient(180deg, rgba(16, 185, 129, .04), #fff 60%); }

.tb-card-num {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.tb-num {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--text);
  line-height: 1;
}
.tb-num::before {
  content: "Table ";
  font-size: 11px;
  font-weight: 600;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: .08em;
  display: block;
  margin-bottom: 2px;
}
.tb-chip { flex-shrink: 0; }
.tb-card-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: auto;
}
.tb-seats {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.tb-zone {
  font-size: 11.5px;
  color: var(--text-3);
  font-weight: 500;
}
.tb-note {
  font-size: 11px;
  color: var(--text-3);
  font-style: italic;
  border-top: 1px dashed var(--border-soft);
  padding-top: 8px;
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Modal layout: footer with delete on left, save/cancel right */
.tb-modal { width: min(520px, 92vw); }
.tb-modal-foot {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
}
.tb-modal-actions { display: flex; gap: 8px; }

/* Toolbar: stack the two segmented groups */
.view[data-view="tables"] .toolbar {
  flex-wrap: wrap;
  gap: 8px;
}

/* Stats row uses the existing 5-up KPI grid */

@media (max-width: 600px) {
  .tb-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
  .tb-card { padding: 14px; min-height: 120px; }
  .tb-num { font-size: 24px; }
}

/* ============================================================
   Reservations — table view
   ============================================================ */
.rv-table { min-width: 880px; }
.rv-table tbody tr { cursor: pointer; }
.rv-table tbody tr.rv-row-past { opacity: .6; }
.rv-table tbody tr.rv-row-past:hover { opacity: 1; }

/* Empty state spans the whole row */
.rv-table tbody td.res-empty {
  text-align: center;
  padding: 32px 12px;
  color: var(--text-3);
  background: var(--surface-2);
}

/* Reservation ID — monospace pill */
.rv-cell-id { white-space: nowrap; }
.rv-num {
  display: inline-block;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--text-2);
  background: var(--surface-2);
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid var(--border-soft);
}

/* Numeric cells */
.rv-cell-num {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--text);
}

/* Date & Time stack */
.rv-cell-when { white-space: nowrap; }
.rv-when-date {
  font-weight: 600;
  color: var(--text);
  font-size: 12.5px;
}
.rv-when-time {
  font-size: 11.5px;
  color: var(--text-3);
  margin-top: 1px;
  font-variant-numeric: tabular-nums;
}

/* Dimmed placeholder for empty cells */
.rv-dim { color: var(--text-3); }

/* Edit-icon column */
.rv-th-actions { width: 50px; }
.rv-cell-actions { width: 50px; text-align: right; padding-right: 12px !important; }
.rv-edit-btn {
  width: 32px;
  height: 32px;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  color: var(--text-2);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--dur) var(--tx);
}
.rv-edit-btn:hover {
  background: var(--emerald-50);
  color: var(--emerald-600);
  border-color: var(--emerald-100, #d1fae5);
}


/* ============================================================
   Reservation details modal
   ============================================================ */
.rv-detail-modal { width: min(560px, 92vw); }
.rv-dt-head { display: flex; align-items: center; gap: 14px; }
.rv-dt-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--emerald-500);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px;
  flex-shrink: 0;
}
.rv-dt-status-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px;
}
.rv-dt-id {
  font-size: 12px; color: var(--text-3);
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.rv-dt-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 20px;
  padding: 14px 0;
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}
.rv-dt-cell { min-width: 0; }
.rv-dt-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-3);
  font-weight: 600;
  margin-bottom: 4px;
}
.rv-dt-val {
  font-size: 13.5px;
  color: var(--text);
  font-weight: 500;
  overflow-wrap: anywhere;
}
.rv-dt-section { padding: 14px 0; border-bottom: 1px solid var(--border-soft); }
.rv-dt-notes {
  font-size: 13px;
  color: var(--text);
  line-height: 1.5;
  background: var(--surface-2);
  border-radius: 6px;
  padding: 10px 12px;
}
.rv-dt-meta {
  padding-top: 12px;
  font-size: 11.5px;
  color: var(--text-3);
}
.rv-dt-foot {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.rv-dt-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
/* Destructive ghost button — transparent bg + rose-red text/border.
   Must explicitly override .btn.danger's solid red background, otherwise
   the .btn.danger rule below leaves us with red text on a red fill
   (invisible). Mirror the existing .row-btn.ghost.danger pattern. */
.btn.ghost.danger {
  background: #fff;
  color: var(--rose-500, #ef4444);
  border: 1px solid #fecaca;
}
.btn.ghost.danger:hover:not(:disabled) {
  background: #fff1f2;
  border-color: var(--rose-500, #ef4444);
  color: #be123c;
}
.btn.ghost.danger:active:not(:disabled) {
  background: #ffe4e6;
}

@media (max-width: 480px) {
  .rv-dt-grid { grid-template-columns: 1fr; gap: 12px; }
  .rv-dt-foot { flex-direction: column-reverse; align-items: stretch; }
  .rv-dt-actions { width: 100%; }
  .rv-dt-actions .btn { flex: 1 1 auto; }
}

/* Empty / loading state for the reservations card grid */
.res-empty {
  display: block;
  padding: 28px 16px;
  text-align: center;
  font-size: 13px;
  color: var(--text-3);
  background: var(--surface-2);
  border-radius: 8px;
  grid-column: 1 / -1;
}
/* When `.res-empty` is used as a <td colspan="N"> (every empty-state
   table in the app does this — API keys, orders, customers, riders…),
   `display: block` would pull it out of the table layout and let the
   header cells compute their own minimum widths, which on mobile
   produces ugly vertical word-splits. Restore table-cell display
   while keeping the centered, muted look. */
td.res-empty {
  display: table-cell;
  border-radius: 0;
  grid-column: auto;
}

/* When .res-empty appears inside a list whose <li> is itself a CSS-grid
   container (e.g. .top-items li, .branch-list li, .live-feed li), the
   parent's grid-template-columns/areas would otherwise squeeze the empty
   text into the first cell — the bug visible on Top selling items where
   "No sales yet…" wrapped vertically into the 40px image column.
   Force block layout + reset grid props with a slightly higher
   specificity so the empty state always spans the full row. */
li.res-empty {
  display: block !important;
  grid-template-columns: unset !important;
  grid-template-areas: unset !important;
  grid-template-rows: unset !important;
  width: 100%;
}

/* Date picker in page header */
.date-picker {
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  font-size: 13px;
  font-family: inherit;
  color: var(--text);
  cursor: pointer;
  transition: border-color var(--dur) var(--tx), box-shadow var(--dur) var(--tx);
}
.date-picker:hover { border-color: var(--text-3); }
.date-picker:focus {
  outline: 0;
  border-color: var(--emerald-500);
  box-shadow: 0 0 0 3px rgba(16,185,129,.12);
}

/* ============================================================
   Inventory & tables
   ============================================================ */
.mini-kpi {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  transition: box-shadow var(--dur) var(--tx);
}
.mini-kpi:hover { box-shadow: var(--shadow-sm); }
.mk-label { font-size: 11.5px; color: var(--text-3); font-weight: 500; }
.mk-val {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 22px;
  font-weight: 800;
  margin-top: 6px;
  color: var(--text);
  letter-spacing: -0.01em;
}
.mk-val.warn { color: var(--amber-500); }
.mk-val.bad  { color: var(--rose-500); }
.mk-val.good { color: var(--emerald-600); }
/* Brief flash whenever a KPI value changes — visible signal that data is live */
@keyframes mkFlash {
  0%   { background: rgba(16, 185, 129, .18); }
  100% { background: transparent; }
}
.mk-val.mk-flash { animation: mkFlash .9s ease-out; border-radius: 4px; }
.mk-sub { font-size: 11.5px; color: var(--text-3); margin-top: 2px; }
.mk-sub.up { color: var(--emerald-600); }
.mk-sub.down { color: var(--rose-500); }

.toolbar { display: flex; gap: 8px; align-items: center; }
.search-sm {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-3);
  width: 220px;
}
.search-sm input { border: 0; outline: 0; background: transparent; font-size: 12.5px; flex: 1; }

.table-wrap {
  overflow-x: auto;
  /* Smooth momentum-scrolling on iOS for the horizontal table scroll */
  -webkit-overflow-scrolling: touch;
  /* Edge fade hint so the user sees there's more table off-screen */
  background:
    linear-gradient(to right, var(--surface-1, #fff) 30%, rgba(255,255,255,0)),
    linear-gradient(to right, rgba(255,255,255,0), var(--surface-1, #fff) 70%) 100% 0,
    radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.08), rgba(0,0,0,0)),
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.08), rgba(0,0,0,0)) 100% 0;
  background-repeat: no-repeat;
  background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}
.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}
.table thead th {
  text-align: left;
  padding: 10px 12px;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-3);
  font-weight: 600;
  border-bottom: 1px solid var(--border-soft);
  background: var(--surface-2);
}
.table thead th:first-child { border-top-left-radius: 8px; }
.table thead th:last-child { border-top-right-radius: 8px; }
.table tbody td {
  padding: 12px;
  border-bottom: 1px solid var(--border-soft);
  vertical-align: middle;
}
.table tbody tr { transition: background var(--dur) var(--tx); }
.table tbody tr:hover { background: var(--surface-2); }
.table tbody tr:last-child td { border-bottom: 0; }

.cell-main { display: flex; align-items: center; gap: 10px; }
.cell-title { font-weight: 600; color: var(--text); }
.cell-sub { font-size: 11.5px; color: var(--text-3); margin-top: 1px; }
.thumb {
  width: 34px; height: 34px;
  border-radius: 9px;
  display: grid; place-items: center;
  font-size: 18px;
}
.thumb.red { background: #fee2e2; }
.thumb.yellow { background: #fef3c7; }
.thumb.green { background: #d1fae5; }
.thumb.blue { background: #dbeafe; }
.thumb.orange { background: #fed7aa; }
.thumb.purple { background: #ede9fe; }

.bar-wrap { width: 100px; height: 6px; background: var(--surface-2); border-radius: 4px; overflow: hidden; }
.bar { height: 100%; border-radius: 4px; transition: width 1s var(--tx); }
.bar.ok { background: linear-gradient(90deg, var(--emerald-500), var(--emerald-600)); }
.bar.warn { background: linear-gradient(90deg, #fbbf24, var(--amber-500)); }
.bar.critical { background: linear-gradient(90deg, #f87171, #dc2626); }

.row-btn {
  padding: 5px 10px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--emerald-600);
  background: var(--emerald-50);
  border-radius: 7px;
  transition: all var(--dur) var(--tx);
}
.row-btn:hover { background: var(--emerald-100); }
.row-btn.ghost {
  background: var(--surface-2);
  color: var(--text-2);
  border: 1px solid var(--border);
}
.row-btn.ghost:hover { background: #fff; border-color: var(--border-strong); color: var(--text); }

/* Row actions cell — multiple buttons side-by-side */
.row-actions { white-space: nowrap; }
.row-actions .row-btn + .row-btn { margin-left: 6px; }

/* ============================================================
   Customers & segments
   ============================================================ */
.seg-card {
  padding: 18px 20px;
  background: linear-gradient(160deg, #fff, #fafbfa);
}
.seg-top { display: flex; justify-content: space-between; align-items: center; }
.seg-icon {
  width: 40px; height: 40px;
  border-radius: 12px;
  display: grid; place-items: center;
  font-size: 22px;
  background: var(--emerald-50);
}
.seg-icon.vip { background: linear-gradient(135deg, #fef3c7, #fde68a); }
.seg-icon.loyal { background: linear-gradient(135deg, #ddd6fe, #c4b5fd); }
.seg-icon.inactive { background: linear-gradient(135deg, #f1f5f3, #e5e7eb); }
.seg-pct {
  font-size: 12px;
  font-weight: 700;
  color: var(--emerald-600);
  padding: 3px 9px;
  background: var(--emerald-50);
  border-radius: 20px;
}
.seg-pct.down { color: var(--rose-500); background: var(--rose-50); }
.seg-val {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 32px;
  font-weight: 800;
  margin-top: 16px;
  letter-spacing: -0.02em;
}
.seg-label { font-weight: 600; font-size: 13px; margin-top: 2px; }
.seg-sub { font-size: 12px; color: var(--text-3); margin-top: 2px; }

/* ============================================================
   AI view
   ============================================================ */
.ai-hero {
  position: relative;
  background: linear-gradient(135deg, #0f172a 0%, #312e81 45%, #4c1d95 100%);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 28px 32px;
  margin-bottom: 20px;
  overflow: hidden;
}
.ai-hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 15% 20%, rgba(139, 92, 246, .45), transparent 40%),
    radial-gradient(circle at 85% 80%, rgba(16, 185, 129, .35), transparent 40%);
  pointer-events: none;
}
.ai-hero-content { position: relative; }
.ai-hero-title {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.35;
  max-width: 760px;
  margin-top: 12px;
  letter-spacing: -0.01em;
}
.ai-hero-title .up { color: #34d399; }
.ai-hero-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.ahm-label { font-size: 11.5px; color: rgba(255, 255, 255, .6); font-weight: 500; }
.ahm-val {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 24px;
  font-weight: 800;
  margin-top: 4px;
  letter-spacing: -0.01em;
}

.price-list { display: flex; flex-direction: column; gap: 4px; }
.price-list li {
  display: grid;
  grid-template-columns: 1.6fr 1.2fr 60px auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border-radius: var(--radius);
  transition: background var(--dur) var(--tx);
}
.price-list li:hover { background: var(--surface-2); }
.pl-left { display: flex; align-items: center; gap: 10px; }
.pl-img {
  width: 36px; height: 36px;
  background: var(--surface-2);
  border-radius: 10px;
  display: grid; place-items: center;
  font-size: 20px;
}
.pl-name { font-weight: 600; font-size: 13px; }
.pl-sub { font-size: 11.5px; color: var(--text-3); margin-top: 1px; }
.pl-mid { font-size: 13px; }
.pl-mid .old { color: var(--text-3); text-decoration: line-through; }
.pl-mid .new { color: var(--emerald-600); font-weight: 700; }
.pl-change { font-size: 12px; font-weight: 700; text-align: center; }
.pl-change.up { color: var(--emerald-600); }
.pl-change.down { color: var(--rose-500); }

.matrix { position: relative; padding: 16px 12px 32px 40px; }
.matrix-grid {
  position: relative;
  height: 280px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 1px;
  background: var(--border-soft);
  border-radius: 12px;
  overflow: hidden;
}
.quadrant { position: relative; background: #fff; }
.q-label {
  position: absolute;
  top: 8px; left: 10px;
  font-size: 10.5px;
  color: var(--text-3);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.bubble {
  position: absolute;
  width: 32px; height: 32px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 16px;
  transform: translate(-50%, -50%);
  box-shadow: 0 4px 12px -2px rgba(0,0,0,.18);
  cursor: pointer;
  transition: transform var(--dur) var(--tx);
}
.bubble:hover { transform: translate(-50%, -50%) scale(1.15); }
.matrix-axes { position: relative; }
.axis-y {
  position: absolute;
  left: -40px; top: -152px;
  transform: rotate(-90deg);
  transform-origin: top left;
  font-size: 11px;
  color: var(--text-3);
}
.axis-x {
  text-align: center;
  font-size: 11px;
  color: var(--text-3);
  padding-top: 12px;
}

.ai-actions { display: flex; flex-direction: column; gap: 6px; }
.ai-act {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border-radius: var(--radius);
  background: var(--surface-2);
}
.ai-act-icon {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: #fff;
  display: grid; place-items: center;
}
.ai-act.executed .ai-act-icon { color: var(--emerald-600); background: var(--emerald-50); }
.ai-act.pending .ai-act-icon { color: var(--amber-500); background: var(--amber-50); }
.ai-act-title { font-weight: 600; font-size: 13px; }
.ai-act-sub { font-size: 11.5px; color: var(--text-3); margin-top: 2px; }
.ai-act-time { font-size: 11.5px; color: var(--text-3); }
.ai-act-actions { display: flex; gap: 6px; }

/* ============================================================
   Reports · donut
   ============================================================ */
.donut-wrap {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 20px;
  align-items: center;
}
.donut { width: 220px; height: 220px; }
.d-num { font-family: "Plus Jakarta Sans", sans-serif; font-size: 22px; font-weight: 800; fill: var(--text); }
.d-lbl { font-size: 11px; fill: var(--text-3); }
.donut-legend { display: flex; flex-direction: column; gap: 10px; }
.donut-legend li {
  display: grid;
  grid-template-columns: 8px 1fr auto;
  gap: 10px;
  align-items: center;
  font-size: 13px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border-soft);
}
.donut-legend li:last-child { border: 0; }
.donut-legend b { font-weight: 700; }

/* ============================================================
   Branches
   ============================================================ */
.branch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}
.branch-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px;
  transition: all var(--dur) var(--tx);
}
.branch-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--emerald-100); }
.branch-card { position: relative; }
.branch-card.featured { background: linear-gradient(160deg, #ecfdf5 0%, #ffffff 50%); border-color: var(--emerald-100); }
.branch-card.featured[data-color="amber"]  { background: linear-gradient(160deg, #fffbeb 0%, #fff 50%); border-color: #fde68a; }
.branch-card.featured[data-color="violet"] { background: linear-gradient(160deg, #f5f3ff 0%, #fff 50%); border-color: var(--violet-100); }
.branch-card.featured[data-color="rose"]   { background: linear-gradient(160deg, #fff1f2 0%, #fff 50%); border-color: #fecaca; }

.branch-card.featured::before {
  content: "Current";
  position: absolute;
  top: -10px;
  left: 16px;
  background: linear-gradient(135deg, var(--emerald-500), var(--emerald-700));
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 4px 10px 4px 22px;
  border-radius: 20px;
  box-shadow: 0 4px 10px -2px rgba(16, 185, 129, .4);
  z-index: 1;
}
.branch-card.featured::after {
  content: "";
  position: absolute;
  top: -4px;
  left: 22px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  animation: pulse 1.6s infinite;
  z-index: 2;
}
.branch-card.featured[data-color="amber"]::before  { background: linear-gradient(135deg, #fbbf24, #d97706); box-shadow: 0 4px 10px -2px rgba(245, 158, 11, .4); }
.branch-card.featured[data-color="violet"]::before { background: linear-gradient(135deg, #a78bfa, #7c3aed); box-shadow: 0 4px 10px -2px rgba(139, 92, 246, .4); }
.branch-card.featured[data-color="rose"]::before   { background: linear-gradient(135deg, #fda4af, #e11d48); box-shadow: 0 4px 10px -2px rgba(244, 63, 94, .4); }

.branch-card .bc-open {
  background: var(--text);
  color: #fff;
  border-color: var(--text);
  font-weight: 600;
}
.branch-card .bc-open:hover { background: var(--emerald-600); border-color: var(--emerald-600); color: #fff; }
.branch-card.featured .bc-open {
  background: var(--emerald-50);
  color: var(--emerald-700);
  border-color: var(--emerald-200);
}
.branch-card.featured .bc-open::before { content: "✓ "; }
.branch-card.featured[data-color="amber"]  .bc-open { background: #fffbeb; color: #b45309; border-color: #fde68a; }
.branch-card.featured[data-color="violet"] .bc-open { background: var(--violet-50); color: var(--violet-600); border-color: var(--violet-100); }
.branch-card.featured[data-color="rose"]   .bc-open { background: #fff1f2; color: #be123c; border-color: #fecaca; }
.bc-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.bc-avatar {
  width: 40px; height: 40px;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--emerald-500), var(--emerald-700));
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  display: grid; place-items: center;
}
.bc-name { font-weight: 700; font-size: 14px; }
.bc-sub { font-size: 11.5px; color: var(--text-3); margin-top: 2px; }
.bc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 14px; }
.bc-lbl { font-size: 11px; color: var(--text-3); }
.bc-val { font-weight: 700; font-size: 16px; margin-top: 2px; font-family: "Plus Jakarta Sans", sans-serif; }
.bc-bar {
  height: 6px;
  background: var(--surface-2);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 14px;
}
.bcb { height: 100%; border-radius: 4px; transition: width 1s var(--tx); }
.bcb.ok { background: linear-gradient(90deg, var(--emerald-500), var(--emerald-600)); }
.bcb.warn { background: linear-gradient(90deg, #fbbf24, var(--amber-500)); }
.bcb.bad { background: linear-gradient(90deg, #f87171, var(--rose-500)); }
.bc-foot { display: flex; justify-content: space-between; align-items: center; }
.bc-staff { display: flex; }
.bc-staff .avatar { border: 2px solid #fff; margin-left: -8px; }
.bc-staff .avatar:first-child { margin-left: 0; }

/* ============================================================
   Marketing & Loyalty
   ============================================================ */
.camp-list { display: flex; flex-direction: column; gap: 4px; }
.camp-list li {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 8px;
  border-bottom: 1px solid var(--border-soft);
}
.camp-list li:last-child { border: 0; }
.camp-ico {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--surface-2);
  display: grid; place-items: center;
  font-size: 18px;
}
.camp-ico.email { background: #e0f2fe; }
.camp-ico.sms { background: #fef3c7; }
.camp-ico.push { background: #ede9fe; }
.camp-name { font-weight: 600; font-size: 13px; }
.camp-sub { font-size: 11.5px; color: var(--text-3); margin-top: 2px; }

.workflow {
  display: grid;
  grid-template-columns: repeat(5, 1fr) auto auto auto auto;
  gap: 8px;
  align-items: center;
  overflow-x: auto;
  padding: 8px 0 14px;
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
}
.wf-node {
  padding: 12px 16px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 11px;
  color: var(--text-3);
  line-height: 1.4;
  min-width: 110px;
  text-align: center;
}
.wf-node b { display: block; color: var(--text); font-size: 13px; margin-top: 3px; }
.wf-node.trigger { background: var(--violet-50); border-color: var(--violet-100); color: var(--violet-600); }
.wf-node.trigger b { color: var(--violet-600); }
.wf-node.delay { background: #fef3c7; border-color: #fde68a; color: #b45309; }
.wf-node.delay b { color: #b45309; }
.wf-node.condition { background: var(--amber-50); border-color: #fde68a; }
.wf-node.action.green { background: var(--emerald-50); border-color: var(--emerald-100); color: var(--emerald-700); }
.wf-node.action.green b { color: var(--emerald-700); }
.wf-arrow {
  width: 22px; height: 2px;
  background: var(--border-strong);
  position: relative;
}
.wf-arrow::after {
  content: "";
  position: absolute;
  right: -1px; top: 50%;
  transform: translateY(-50%);
  width: 0; height: 0;
  border-left: 6px solid var(--border-strong);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
}
.wf-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--border-soft);
}
.wf-lbl { font-size: 11px; color: var(--text-3); }
.wf-val { font-family: "Plus Jakarta Sans", sans-serif; font-size: 20px; font-weight: 800; margin-top: 2px; }

.tier-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  text-align: center;
  transition: all var(--dur) var(--tx);
}
.tier-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.tier-card.bronze { background: linear-gradient(160deg, #fff, #fef3c7); }
.tier-card.silver { background: linear-gradient(160deg, #fff, #f1f5f9); }
.tier-card.gold { background: linear-gradient(160deg, #fff, #fef3c7); border-color: #fde68a; }
.tier-card.platinum { background: linear-gradient(160deg, #fff, #e0e7ff); border-color: #c7d2fe; }
.tier-badge { font-size: 40px; margin-bottom: 8px; }
.tier-name { font-family: "Plus Jakarta Sans", sans-serif; font-size: 18px; font-weight: 800; }
.tier-count { font-weight: 600; margin-top: 4px; color: var(--text-2); }
.tier-perks { font-size: 12px; color: var(--text-3); margin-top: 8px; }

.rewards { display: flex; flex-direction: column; gap: 8px; }
.rewards li {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 8px;
  border-radius: var(--radius);
  transition: background var(--dur) var(--tx);
}
.rewards li:hover { background: var(--surface-2); }
.rw-img {
  width: 40px; height: 40px;
  border-radius: 10px;
  display: grid; place-items: center;
  font-size: 20px;
}
.rw-name { font-weight: 600; font-size: 13px; }
.rw-sub { font-size: 11.5px; color: var(--text-3); margin-top: 2px; }

.referral { text-align: center; padding: 18px 0; }
.ref-big {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 40px;
  font-weight: 800;
  color: var(--emerald-600);
  letter-spacing: -0.02em;
}
.ref-sub { color: var(--text-3); margin-top: 4px; }
.ref-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border-soft);
}
.rs-lbl { font-size: 11.5px; color: var(--text-3); }
.rs-val { font-family: "Plus Jakarta Sans", sans-serif; font-size: 20px; font-weight: 800; margin-top: 2px; }

/* ============================================================
   Loyalty & Rewards — real-data layout
   - Tier grid uses 4 columns now (bronze/silver/gold/platinum)
   - .grid-4 already exists or we declare it locally
   - Reward rows include status chip + action buttons
   - Program metrics card has a stat-grid layout
   ============================================================ */
.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 980px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .grid-4 { grid-template-columns: 1fr; } }
.loy-skel { color: var(--text-3); font-size: 13px; padding: 12px; }
.loy-tiers { margin-bottom: 16px; }
.tier-card.empty { opacity: .65; }

/* Reward row — adds a chip + per-row action buttons */
.rewards li.reward-row {
  grid-template-columns: 44px 1fr auto auto;
  align-items: center;
}
.rewards li.reward-row.inactive .rw-name { color: var(--text-3); }
.rewards li.reward-row.inactive .rw-img  { filter: grayscale(.7); opacity: .65; }
.rw-status {
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.rw-status.active   { background: #d1fae5; color: var(--emerald-700, #047857); }
.rw-status.inactive { background: #f3f4f6; color: var(--text-3); }
.rw-tier {
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-2);
  margin-left: 6px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.rw-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}
.rw-actions .mini-btn {
  padding: 5px 9px;
  font-size: 11.5px;
}
.rw-actions .mini-btn.danger {
  color: var(--rose-600, #e11d48);
}
.rw-actions .mini-btn.danger:hover {
  background: #fee2e2;
  border-color: #fecaca;
}
/* The base `.rewards li` rule is `display: grid` with 3 columns, which
   would otherwise jam the empty-state's three children (title, help-text,
   button) into 40px / 1fr / auto columns and produce vertical word-stacks
   on mobile. Override to a centered block so children flow naturally. */
.rewards li.rewards-empty {
  display: block;
  text-align: center;
  padding: 28px 16px;
  color: var(--text-3);
  font-size: 13px;
}
.rewards li.rewards-empty:hover { background: transparent; }
.rewards li.rewards-empty .btn { margin-top: 12px; }

/* Program metrics */
.loy-metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.loy-metric {
  background: var(--surface-2);
  border-radius: var(--radius);
  padding: 14px;
}
.loy-metric.wide { grid-column: span 2; }
.loy-m-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.loy-m-value {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 22px;
  font-weight: 800;
  margin-top: 6px;
  letter-spacing: -0.02em;
}
.loy-m-sub {
  font-size: 11.5px;
  color: var(--text-3);
  margin-top: 4px;
}
@media (max-width: 720px) { .loy-metrics { grid-template-columns: 1fr; } .loy-metric.wide { grid-column: auto; } }

/* ============================================================
   Settings
   ============================================================ */
.settings-wrap {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 16px;
}
.settings-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 8px;
  height: fit-content;
}
.sn-item {
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
  cursor: pointer;
  transition: all var(--dur) var(--tx);
}
.sn-item:hover { background: var(--surface-2); color: var(--text); }
.sn-item.active { background: var(--emerald-50); color: var(--emerald-700); font-weight: 600; }

.settings-panel .card { padding: 0; }
.set-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-soft);
}
.set-row:last-child { border: 0; }
.set-title { font-weight: 600; font-size: 13.5px; }
.set-sub { font-size: 12px; color: var(--text-3); margin-top: 3px; }

/* =========================================================
   Maintenance window — Custom days & time row
   Reveals day-of-week checkboxes + a time-range pair when
   the preset dropdown above is set to "Custom…".
   ========================================================= */
.maint-custom-row[hidden] { display: none; }
.maint-custom-row {
  flex-direction: column;
  align-items: stretch;
  background: var(--surface-2, #fafbfa);
}
.maint-custom {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}
.maint-custom-days {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.maint-custom-days label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  background: #fff;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  transition: background var(--dur, .18s), border-color var(--dur, .18s), color var(--dur, .18s);
}
.maint-custom-days label:hover {
  background: var(--surface-2, #f4f6f8);
  border-color: var(--border-strong, #d1d5db);
}
.maint-custom-days label input { accent-color: var(--emerald-500, #10b981); }
/* Active (checked) chip — emerald tint so the picked days pop */
.maint-custom-days label:has(input:checked) {
  background: rgba(16, 185, 129, .10);
  border-color: var(--emerald-500, #10b981);
  color: var(--emerald-700, #047857);
}
.maint-custom-times {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.maint-time-field {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11.5px;
  color: var(--text-3, #6b7a74);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.maint-time-field input[type="time"] {
  padding: 7px 10px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  background: #fff;
  color: var(--text);
  font-family: inherit;
  min-width: 130px;
}
.maint-time-field input[type="time"]:focus {
  outline: none;
  border-color: var(--emerald-500, #10b981);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, .15);
}
.maint-custom-summary {
  font-size: 12.5px;
  color: var(--text-3, #6b7a74);
}
.maint-custom-summary.ok { color: var(--emerald-600, #059669); font-weight: 600; }
.maint-custom-summary.bad { color: var(--rose-500, #ef4444); font-weight: 600; }

@media (max-width: 480px) {
  .maint-custom-times { flex-direction: column; }
  .maint-time-field input[type="time"] { width: 100%; }
}
.input {
  padding: 8px 12px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  color: var(--text);
  min-width: 260px;
  outline: 0;
  transition: border-color var(--dur) var(--tx);
}
.input:focus { border-color: var(--emerald-500); box-shadow: 0 0 0 4px rgba(16, 185, 129, .1); }

/* Multi-line text inputs (e.g. Restaurant address). The row's default
   align-items: center looks awkward when one field is several lines tall
   — pin the label to the top of the row and let the textarea behave like
   a real text field (resize vertical only, no font weirdness). */
.set-row:has(> textarea.input),
.set-row:has(> .addr-field) { align-items: flex-start; }
textarea.input {
  font-family: inherit;
  line-height: 1.45;
  resize: vertical;
  min-height: 76px;
}

/* =========================================================
   Restaurant address — Google Places autocomplete bundle.
   The search input sits above the textarea; both share the
   same min-width so the field doesn't shift when typing.
   The status pill below carries the verification state.
   ========================================================= */
.addr-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 320px;
  max-width: 420px;
}
.addr-search-wrap { position: relative; }
.addr-search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-3);
  pointer-events: none;
}
.addr-search-input {
  width: 100%;
  padding-left: 30px;
  min-width: 0;
}
.addr-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--text-3);
  padding: 2px 0;
  line-height: 1.4;
}
.addr-status-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--border);
  flex: 0 0 7px;
}
.addr-status[data-state="empty"]    .addr-status-dot { background: var(--border); }
.addr-status[data-state="pinned"]   .addr-status-dot { background: var(--emerald-500, #10b981); box-shadow: 0 0 0 3px rgba(16,185,129,.15); }
.addr-status[data-state="manual"]   .addr-status-dot { background: var(--amber-500,  #f59e0b); box-shadow: 0 0 0 3px rgba(245,158,11,.15); }
.addr-status[data-state="no-maps"]  .addr-status-dot { background: var(--rose-400,   #fb7185); }
.addr-status[data-state="pinned"]   .addr-status-text { color: var(--emerald-700, #047857); }
.addr-status[data-state="manual"]   .addr-status-text { color: var(--amber-700,   #b45309); }
.addr-status[data-state="no-maps"]  .addr-status-text { color: var(--text-2); }

/* Custom suggestions dropdown for the Restaurant Address field.
   Anchored under .addr-search-wrap; bumped above the settings
   panel + modal backdrop (z-index 600 / 999). */
.addr-suggestions {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 9999;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  max-height: 280px;
  overflow-y: auto;
  padding: 4px 0;
}
.addr-suggestion-item {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 12.5px;
  line-height: 1.3;
  color: var(--text-1, #1a2420);
}
.addr-suggestion-item.is-active,
.addr-suggestion-item:hover {
  background: var(--surface-2);
}
.addr-suggestion-main { font-weight: 600; color: var(--text-1, #1a2420); }
.addr-suggestion-sub  { font-size: 11.5px; color: var(--text-3); margin-top: 2px; }

.switch {
  position: relative;
  width: 40px; height: 22px;
  display: inline-block;
}
.switch input { opacity: 0; width: 0; height: 0; }
.switch span {
  position: absolute;
  inset: 0;
  background: #e5e7eb;
  border-radius: 22px;
  cursor: pointer;
  transition: background var(--dur) var(--tx);
}
.switch span::before {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 16px; height: 16px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
  transition: transform var(--dur) var(--tx);
}
.switch input:checked + span { background: var(--emerald-500); }
.switch input:checked + span::before { transform: translateX(18px); }

.alert-card { display: flex; flex-direction: column; }

.empty-view {
  background: #fff;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 80px 40px;
  text-align: center;
}
.empty-view h1 { font-size: 24px; margin-bottom: 8px; }
.empty-view p { color: var(--text-3); max-width: 520px; margin: 0 auto; }

/* ============================================================
   Copilot dock
   ============================================================ */
.copilot-dock { position: fixed; right: 24px; bottom: 24px; z-index: 20; }
.copilot-fab {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #8b5cf6, #6366f1);
  display: grid; place-items: center;
  box-shadow: 0 14px 30px -8px rgba(139, 92, 246, .6);
  transition: transform var(--dur) var(--tx), box-shadow var(--dur) var(--tx);
}
.copilot-fab:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 20px 40px -8px rgba(139, 92, 246, .7); }
.copilot-fab .ai-spark {
  width: 14px; height: 14px;
  background: #fff;
  box-shadow: 0 0 20px 4px rgba(255, 255, 255, .7);
}

/* ============================================================
   KPI swap (branch switching)
   ============================================================ */
.kpi-grid.swap .kpi-card { animation: kpiFlip .55s var(--tx); }
.kpi-grid.swap .kpi-card:nth-child(2) { animation-delay: .05s; }
.kpi-grid.swap .kpi-card:nth-child(3) { animation-delay: .1s; }
.kpi-grid.swap .kpi-card:nth-child(4) { animation-delay: .15s; }
@keyframes kpiFlip {
  0%   { opacity: 1; transform: translateY(0) scale(1); }
  45%  { opacity: 0; transform: translateY(-6px) scale(.97); }
  55%  { opacity: 0; transform: translateY(6px) scale(.97); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Brief glow on switch */
.branch-switch-flash {
  animation: branchFlash 1.2s var(--tx);
}
@keyframes branchFlash {
  0%   { box-shadow: 0 0 0 0 rgba(16, 185, 129, .35); }
  30%  { box-shadow: 0 0 0 4px rgba(16, 185, 129, .25); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

/* ============================================================
   Heatmap (Forecasting)
   ============================================================ */
.heatmap { padding: 6px 0; }
.hm-head, .hm-row {
  display: grid;
  grid-template-columns: 52px repeat(7, 1fr);
  gap: 4px;
  align-items: center;
}
.hm-head span { font-size: 10.5px; color: var(--text-3); text-align: center; font-weight: 600; padding-bottom: 4px; }
.hm-head span:first-child { text-align: left; }
.hm-row { margin-bottom: 4px; }
.hm-lbl { font-size: 10.5px; color: var(--text-3); font-weight: 500; }
.hm { display: block; height: 28px; border-radius: 5px; transition: transform var(--dur) var(--tx); cursor: pointer; }
.hm:hover { transform: scale(1.06); }
.hm.l1 { background: #ecfdf5; }
.hm.l2 { background: #a7f3d0; }
.hm.l3 { background: #6ee7b7; }
.hm.l4 { background: #34d399; }
.hm.l5 { background: var(--emerald-500); }
.hm-legend {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 14px;
  font-size: 11px;
  color: var(--text-3);
  justify-content: flex-end;
}
.hm-legend .hm { width: 20px; height: 12px; }

/* ============================================================
   Scenario cards (Forecasting)
   ============================================================ */
.scenario { position: relative; padding: 18px 20px; }
.scenario.best { background: linear-gradient(160deg, #ecfdf5, #fff); border-color: var(--emerald-100); }
.scenario.worst { background: linear-gradient(160deg, #fef2f2, #fff); border-color: #fecaca; }
.scenario-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.sc-prob { font-size: 11.5px; color: var(--text-3); font-weight: 500; }
.scenario-val {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
}
.scenario-val.up { color: var(--emerald-600); }
.scenario-val.down { color: var(--rose-500); }
.scenario-sub { font-size: 12px; color: var(--text-3); margin-top: 2px; margin-bottom: 14px; }
.scenario-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.scenario-list li {
  font-size: 12px;
  color: var(--text-2);
  padding-left: 18px;
  position: relative;
}
.scenario-list li::before {
  content: "";
  position: absolute;
  left: 4px; top: 7px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--emerald-500);
}
.scenario.worst .scenario-list li::before { background: var(--rose-500); }
.scenario.active { box-shadow: 0 0 0 2px var(--violet-500), var(--shadow-md); }
.scenario .btn.full { width: 100%; justify-content: center; }
.scenario.active .btn.full { background: var(--violet-50); color: var(--violet-600); }

/* ============================================================
   Pricing rules
   ============================================================ */
.rule-list { display: flex; flex-direction: column; gap: 8px; }
.rule-item {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  background: var(--surface-2);
  border-radius: var(--radius);
  transition: background var(--dur) var(--tx);
}
.rule-item:hover { background: #fff; box-shadow: var(--shadow-sm); }
.rule-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
.rule-icon.discount { background: #d1fae5; color: #047857; }
.rule-icon.surge    { background: #fee2e2; color: #b91c1c; }
.rule-icon.flat     { background: #e0e7ff; color: #4338ca; }

/* Smart Pricing — recommendations table responsiveness */
.pr-recs-table { min-width: 1080px; width: 100%; }
.pr-recs-table thead th { white-space: nowrap; }
.pr-recs-table .rv-cell-actions {
  width: auto;
  white-space: nowrap;
  text-align: right;
}
.pr-recs-table .pr-rec-name { font-weight: 600; }
.pr-recs-table .pr-rec-reason {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 2px;
}
.rule-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  display: grid; place-items: center;
  font-size: 20px;
  background: #fff;
}
.rule-icon.happy { background: linear-gradient(135deg, #fef3c7, #fde68a); }
.rule-icon.peak { background: linear-gradient(135deg, #fecaca, #fca5a5); }
.rule-icon.off { background: linear-gradient(135deg, #ede9fe, #ddd6fe); }
.rule-icon.weather { background: linear-gradient(135deg, #dbeafe, #bfdbfe); }
.rule-icon.loyalty { background: linear-gradient(135deg, #fef3c7, #fcd34d); }
.rule-title { font-weight: 600; font-size: 13.5px; }
.rule-sub { font-size: 11.5px; color: var(--text-3); margin-top: 2px; }

/* ============================================================
   Integrations
   ============================================================ */
.integ-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.integ-card {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  transition: all var(--dur) var(--tx);
}
.integ-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--emerald-100); }
.integ-card.connected { background: linear-gradient(160deg, #f0fdf4, #fff 70%); }
.integ-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.integ-logo {
  width: 40px; height: 40px;
  border-radius: 10px;
  display: grid; place-items: center;
  font-weight: 800;
  font-size: 18px;
  color: #fff;
  font-family: "Plus Jakarta Sans", sans-serif;
}
.integ-logo.shopify { background: #95bf47; }
.integ-logo.wordpress { background: #21759b; }
.integ-logo.stripe { background: #635bff; }
.integ-logo.twilio { background: #f22f46; }
.integ-logo.gmaps { background: #4285f4; }
.integ-logo.mailchimp { background: #ffe01b; color: #241c15; }
.integ-logo.qb { background: #2ca01c; }
.integ-logo.slack { background: #4a154b; }
.integ-logo.ubereats { background: #000; }
.integ-logo.doordash { background: #ef3338; }
.integ-logo.meta { background: #1877f2; }
.integ-logo.tiktok { background: #010101; }
.integ-name { font-weight: 700; font-size: 14px; color: var(--text); }
.integ-sub { font-size: 12px; color: var(--text-3); margin-top: 2px; margin-bottom: 14px; min-height: 32px; }
.integ-card code {
  font-family: "SF Mono", Menlo, monospace;
  font-size: 11.5px;
  color: var(--text-2);
  background: var(--surface-2);
  padding: 2px 6px;
  border-radius: 4px;
}
.table code {
  font-family: "SF Mono", Menlo, monospace;
  font-size: 12px;
  color: var(--text-2);
  background: var(--surface-2);
  padding: 3px 7px;
  border-radius: 5px;
}

/* ============================================================
   Backdrop / Panels / Modals
   ============================================================ */
.backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 26, 21, 0.32);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur) var(--tx);
  z-index: 40;
}
.backdrop.show { opacity: 1; pointer-events: auto; }

.slide-panel {
  position: fixed;
  top: 0; right: 0;
  height: 100vh;
  width: 420px;
  max-width: 92vw;
  background: #fff;
  box-shadow: -20px 0 60px -20px rgba(15, 26, 21, 0.18);
  transform: translateX(100%);
  transition: transform 280ms var(--tx);
  z-index: 50;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--border);
}
.slide-panel.open { transform: translateX(0); }
.sp-head {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-soft);
  gap: 12px;
}
/* Pin the close button to the right edge; everything else flows left. */
.sp-head .sp-close { margin-left: auto; }
/* Back button — mirrors sp-close styling, sits before the avatar. */
.sp-head .sp-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 8px;
  color: var(--text-2);
  transition: background var(--dur) var(--tx), color var(--dur) var(--tx);
}
.sp-head .sp-back:hover { background: var(--surface-2); color: var(--text); }
.sp-head.ai-head {
  background: linear-gradient(135deg, #0f172a 0%, #312e81 70%, #4c1d95 100%);
  color: #fff;
  border-bottom: 0;
}
.sp-head.ai-head .sp-close { color: rgba(255,255,255,.7); }
.sp-head.ai-head .sp-close:hover { color: #fff; background: rgba(255,255,255,.1); }
.sp-head.ai-head .sp-back  { color: rgba(255,255,255,.7); }
.sp-head.ai-head .sp-back:hover  { color: #fff; background: rgba(255,255,255,.1); }
.sp-title { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700; font-size: 15px; }
.sp-sub { font-size: 12px; opacity: .72; margin-top: 2px; display: flex; align-items: center; gap: 6px; }
.online {
  display: inline-block;
  width: 7px; height: 7px;
  background: #34d399;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(52, 211, 153, .3);
}
.sp-actions { display: flex; align-items: center; gap: 6px; }
.cp-avatar {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, #8b5cf6, #6366f1);
  display: grid; place-items: center;
  box-shadow: 0 6px 20px -4px rgba(139, 92, 246, .5);
}
.cp-avatar .ai-spark { width: 10px; height: 10px; }

.sp-tabs {
  display: flex;
  gap: 4px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-soft);
  background: var(--surface-2);
}
.sp-tab {
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 7px;
  color: var(--text-3);
  transition: all var(--dur) var(--tx);
}
.sp-tab:hover { background: #fff; color: var(--text); }
.sp-tab.active { background: #fff; color: var(--text); font-weight: 600; box-shadow: var(--shadow-sm); }

.sp-body { flex: 1; overflow-y: auto; padding: 12px 16px; }
.sp-body::-webkit-scrollbar { width: 6px; }
.sp-body::-webkit-scrollbar-thumb { background: #e2e8e4; border-radius: 4px; }

/* Notifications */
.notif-group-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
  font-weight: 600;
  padding: 12px 4px 6px;
}
.notif-item {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 12px;
  padding: 12px;
  border-radius: var(--radius);
  transition: background var(--dur) var(--tx);
  cursor: pointer;
  position: relative;
}
.notif-item:hover { background: var(--surface-2); }
.notif-item.unread::before {
  content: "";
  position: absolute;
  left: 4px; top: 18px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--emerald-500);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, .15);
}
.notif-item.unread { padding-left: 18px; }
.notif-icon {
  width: 32px; height: 32px;
  border-radius: 9px;
  display: grid; place-items: center;
  background: var(--surface-2);
  color: var(--text-3);
}
.notif-icon.ai { background: linear-gradient(135deg, #8b5cf6, #6366f1); color: #fff; }
.notif-icon.warn { background: var(--amber-50); color: var(--amber-500); }
.notif-icon.info { background: #e0f2fe; color: var(--blue-500); }
.notif-icon.success { background: var(--emerald-50); color: var(--emerald-600); }
.notif-title { font-weight: 600; font-size: 13px; color: var(--text); }
.notif-sub { font-size: 12px; color: var(--text-3); margin-top: 2px; line-height: 1.45; }
.notif-time { font-size: 11px; color: var(--text-muted); margin-top: 4px; }

/* Copilot chat */
.chat-body { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.chat-body::-webkit-scrollbar { width: 6px; }
.chat-body::-webkit-scrollbar-thumb { background: #e2e8e4; border-radius: 4px; }
.chat-msg { display: flex; flex-direction: column; max-width: 86%; }
.chat-msg.ai { align-self: flex-start; }
.chat-msg.user { align-self: flex-end; }
.msg-bubble {
  padding: 12px 14px;
  border-radius: 14px;
  font-size: 13.5px;
  line-height: 1.5;
  word-wrap: break-word;
}
.chat-msg.ai .msg-bubble {
  background: linear-gradient(135deg, #faf5ff, #f5f3ff);
  border: 1px solid var(--violet-100);
  color: var(--text);
  border-top-left-radius: 4px;
}
.chat-msg.user .msg-bubble {
  background: linear-gradient(135deg, var(--emerald-500), var(--emerald-600));
  color: #fff;
  border-top-right-radius: 4px;
}
.msg-time { font-size: 10.5px; color: var(--text-muted); margin-top: 4px; padding: 0 6px; }
.chat-msg.user .msg-time { text-align: right; }
.chat-msg.typing .msg-bubble {
  display: inline-flex;
  gap: 4px;
  padding: 14px 16px;
}
.typing-dot {
  width: 7px; height: 7px;
  background: var(--violet-500);
  border-radius: 50%;
  animation: typing 1.4s infinite;
}
.typing-dot:nth-child(2) { animation-delay: .2s; }
.typing-dot:nth-child(3) { animation-delay: .4s; }
@keyframes typing { 0%, 60%, 100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-4px); opacity: 1; } }

.chat-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px 0 4px;
}
.chat-chip {
  padding: 6px 12px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: 12px;
  color: var(--text-2);
  transition: all var(--dur) var(--tx);
}
.chat-chip:hover { border-color: var(--violet-500); color: var(--violet-600); background: var(--violet-50); }

.chat-footer { padding: 14px 16px; border-top: 1px solid var(--border-soft); background: var(--surface-2); }
.chat-input {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 6px 6px 6px 14px;
  transition: border-color var(--dur) var(--tx), box-shadow var(--dur) var(--tx);
}
.chat-input:focus-within { border-color: var(--violet-500); box-shadow: 0 0 0 4px rgba(139, 92, 246, .1); }
.chat-input input {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 13.5px;
  padding: 6px 0;
  color: var(--text);
}
.chat-send {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, #8b5cf6, #6366f1);
  color: #fff;
  display: grid; place-items: center;
  transition: transform var(--dur) var(--tx);
}
.chat-send:hover { transform: scale(1.05); }
.chat-hint { font-size: 10.5px; color: var(--text-muted); text-align: center; margin-top: 8px; }

/* ============================================================
   Dropdown menus
   ============================================================ */
.dropdown {
  position: fixed;
  min-width: 240px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 6px;
  z-index: 60;
  opacity: 0;
  transform: translateY(-4px) scale(.98);
  transform-origin: top right;
  pointer-events: none;
  transition: all var(--dur) var(--tx);
}
.dropdown.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.dd-head {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: 4px;
}
.dd-title { font-weight: 600; font-size: 13px; color: var(--text); }
.dd-sub { font-size: 11.5px; color: var(--text-3); margin-top: 1px; }
.dd-list { display: flex; flex-direction: column; gap: 1px; }
.dd-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 7px;
  font-size: 13px;
  color: var(--text-2);
  cursor: pointer;
  transition: background var(--dur) var(--tx), color var(--dur) var(--tx);
}
.dd-list li:hover { background: var(--surface-2); color: var(--text); }
.dd-list li svg { color: var(--text-3); flex-shrink: 0; }
.dd-list li.danger { color: #dc2626; }
.dd-list li.danger svg { color: #dc2626; }
.dd-list li.danger:hover { background: #fef2f2; }
.dd-list li kbd {
  margin-left: auto;
  font-family: inherit;
  font-size: 10px;
  padding: 1px 5px;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-3);
}
.dd-list.branches li {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 10px;
  padding: 10px;
}
.dd-list.branches li.active { background: var(--emerald-50); }
.dd-list.branches li .branch-avatar { width: 32px; height: 32px; }
.dd-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: 4px;
  color: var(--text-3);
}
.dd-search input { border: 0; outline: 0; background: transparent; flex: 1; font-size: 12.5px; }
.dd-foot { padding: 6px 4px 2px; border-top: 1px solid var(--border-soft); margin-top: 4px; }
.dd-foot .mini-btn { width: 100%; text-align: center; justify-content: center; }

/* ============================================================
   Shifts dropdown (topbar clock icon)
   ============================================================ */
.icon-btn .shift-dot {
  position: absolute;
  top: 9px; right: 11px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--emerald-500);
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(16, 185, 129, .25);
  animation: pulse 2s infinite;
}
.shifts-dropdown {
  width: 360px;
  padding: 0 !important;
  max-height: 540px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.shifts-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-soft);
  background: linear-gradient(135deg, #fafbfa, #fff);
  flex-shrink: 0;
}
.shifts-live {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.shifts-live i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--emerald-500);
  animation: pulse 1.4s infinite;
}
.shifts-body {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0 8px;
}
.shifts-body::-webkit-scrollbar { width: 6px; }
.shifts-body::-webkit-scrollbar-thumb { background: #e2e8e4; border-radius: 4px; }

.shifts-section-title {
  padding: 12px 16px 4px;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
  font-weight: 700;
}

.shift-list {
  display: flex;
  flex-direction: column;
  padding: 0 6px;
}
.shift-item {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background var(--dur) var(--tx);
  position: relative;
}
.shift-item:hover { background: var(--surface-2); }
.shift-item.late {
  background: #fff1f2;
}
.shift-item.late:hover {
  background: #ffe4e6;
}
.shift-meta { min-width: 0; }
.shift-name {
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.shift-sub {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 2px;
}
.shift-time {
  text-align: right;
  flex-shrink: 0;
}
.shift-elapsed {
  font-weight: 700;
  font-size: 12.5px;
  color: var(--emerald-600);
  font-variant-numeric: tabular-nums;
  font-family: "Plus Jakarta Sans", sans-serif;
  letter-spacing: -0.01em;
}
.shift-elapsed.warn { color: var(--rose-500); }
.shift-elapsed.upcoming { color: var(--amber-500); }
.shift-end {
  font-size: 10.5px;
  color: var(--text-3);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

.shifts-foot {
  border-top: 1px solid var(--border-soft);
  padding: 8px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  flex-shrink: 0;
  background: var(--surface-2);
}
.shifts-foot .mini-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  background: #fff;
}

/* ============================================================
   Modals
   ============================================================ */
.modal {
  position: fixed;
  inset: 0;
  z-index: 55;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 6vh 16px 4vh;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur) var(--tx);
  overflow: hidden;
}
.modal.open { opacity: 1; pointer-events: auto; }
.modal-box {
  width: 520px;
  max-width: 92vw;
  max-height: 100%;
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
  transform: scale(.96) translateY(12px);
  transition: transform var(--dur) var(--tx);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.modal.open .modal-box { transform: scale(1) translateY(0); }
.modal-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border-soft);
  flex-shrink: 0;
}
.modal-title { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700; font-size: 17px; color: var(--text); letter-spacing: -0.01em; }
.modal-sub { font-size: 13px; color: var(--text-3); margin-top: 3px; }
.modal-body {
  padding: 20px 22px;
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
}
.modal-body::-webkit-scrollbar { width: 8px; }
.modal-body::-webkit-scrollbar-thumb { background: #d8e0db; border-radius: 4px; }
.modal-body::-webkit-scrollbar-thumb:hover { background: #a8b2ad; }
.modal-body .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.modal-body .field:last-child { margin-bottom: 0; }
.modal-body label { font-size: 12px; font-weight: 600; color: var(--text-2); }
.modal-body .hint { font-size: 11.5px; color: var(--text-3); }
.modal-body .input, .modal-body input, .modal-body select, .modal-body textarea {
  width: 100%;
  padding: 9px 12px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  color: var(--text);
  outline: 0;
  transition: border-color var(--dur) var(--tx), box-shadow var(--dur) var(--tx);
  font-family: inherit;
}
.modal-body .input:focus, .modal-body input:focus, .modal-body select:focus, .modal-body textarea:focus {
  border-color: var(--emerald-500);
  box-shadow: 0 0 0 4px rgba(16, 185, 129, .1);
}

/* Native selects in modals — custom chevron, polished spacing */
.modal-body select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
}
.modal-body select:focus {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23059669' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
}
/* Inventory category select: optgroup labels show emojis, so give them a
   touch more left padding so the emoji doesn't crowd the chevron */
.ii-category-select optgroup {
  font-weight: 700;
  color: var(--text);
  font-style: normal;
  background: var(--surface-2);
  padding: 4px 0;
}
.ii-category-select option {
  font-weight: 400;
  color: var(--text);
  padding: 6px 8px;
}
.modal-body input.invalid,
.modal-body select.invalid,
.modal-body textarea.invalid,
.modal-body .input.invalid {
  border-color: var(--rose-500) !important;
  box-shadow: 0 0 0 4px rgba(244, 63, 94, .12) !important;
  animation: shake .4s var(--tx);
}
.modal-body textarea { resize: vertical; min-height: 72px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) {
  .field-row { grid-template-columns: 1fr; gap: 10px; }
  .modal-body { padding: 16px; }
  .modal-foot { padding: 12px 16px; }
}
.modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 22px;
  border-top: 1px solid var(--border-soft);
  background: var(--surface-2);
  flex-shrink: 0;
}

/* Step indicator (inside reset-password modal) shouldn't shrink */
.modal-box > .step-indicator { flex-shrink: 0; }

/* Reset-password modal — each step wraps its own body+foot, so the active
   step needs to flex to allow internal scrolling of its body */
.reset-step.active {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

/* Command palette */
#commandPalette { align-items: flex-start; padding-top: 14vh; }
.cp-wrap {
  width: 640px;
  max-width: 92vw;
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
  transform: scale(.96) translateY(12px);
  transition: transform var(--dur) var(--tx);
  overflow: hidden;
}
#commandPalette.open .cp-wrap { transform: scale(1) translateY(0); }
.cp-search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-soft);
  color: var(--text-3);
}
.cp-search input {
  flex: 1;
  border: 0;
  outline: 0;
  font-size: 15px;
  color: var(--text);
  background: transparent;
}
.cp-search kbd {
  font-family: inherit;
  font-size: 11px;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text-3);
  background: var(--surface-2);
  cursor: pointer;
  user-select: none;
  transition: all var(--dur) var(--tx);
  font-weight: 600;
  letter-spacing: .04em;
}
.cp-search kbd:hover {
  background: #fff;
  border-color: var(--border-strong);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
.cp-search kbd:active {
  transform: scale(.95);
}
.cp-search kbd:focus-visible {
  outline: 2px solid var(--emerald-500);
  outline-offset: 2px;
}
.cp-results { padding: 8px; max-height: 400px; overflow-y: auto; }
.cp-group-title {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
  padding: 8px 10px 4px;
}
.cp-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  font-size: 13.5px;
  border-radius: 8px;
  cursor: pointer;
  transition: background var(--dur) var(--tx);
  color: var(--text-2);
}
.cp-row:hover, .cp-row.hl { background: var(--emerald-50); color: var(--emerald-700); }
.cp-row:hover kbd, .cp-row.hl kbd { background: #fff; }
.cp-ico { font-size: 16px; width: 22px; text-align: center; }
.cp-row span:nth-child(2) { flex: 1; }
.cp-row kbd {
  font-family: inherit;
  font-size: 11px;
  padding: 1px 6px;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-3);
  background: var(--surface-2);
}

/* ============================================================
   Confirmation dialog (replaces native confirm() for destructive
   menu / staff / rider / table delete prompts)
   ============================================================ */
.rv-confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 19, 0.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 20px;
  opacity: 0;
  /* Default to NO pointer-events so the invisible overlay can't trap
     clicks during the entrance/exit transitions (or if a removal is
     delayed by an inactive tab). The `.show` class flips it on while
     the dialog is actually visible. */
  pointer-events: none;
  transition: opacity 0.18s ease;
}
.rv-confirm-overlay.show { opacity: 1; pointer-events: auto; }
.rv-confirm-card {
  background: #fff;
  border-radius: 16px;
  padding: 24px 24px 20px;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 24px 60px -12px rgba(0,0,0,0.25), 0 0 0 1px rgba(0,0,0,0.04);
  display: grid;
  grid-template-columns: 44px 1fr;
  grid-template-rows: auto auto;
  gap: 14px 16px;
  transform: translateY(8px) scale(0.98);
  transition: transform 0.22s var(--tx);
}
.rv-confirm-overlay.show .rv-confirm-card { transform: translateY(0) scale(1); }
.rv-confirm-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: grid; place-items: center;
  background: rgba(16, 185, 129, 0.10);
  color: var(--emerald-600);
}
.rv-confirm-icon.danger {
  background: rgba(244, 63, 94, 0.10);
  color: var(--rose-500);
}
.rv-confirm-body {
  min-width: 0;
  align-self: center;
}
.rv-confirm-title {
  margin: 0 0 6px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}
.rv-confirm-text {
  margin: 0;
  font-size: 13.5px;
  color: var(--text-2);
  line-height: 1.5;
}
.rv-confirm-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 6px;
}
.rv-confirm-actions .btn { min-width: 88px; justify-content: center; }
.rv-confirm-actions .btn.danger {
  background: var(--rose-500);
  color: #fff;
  border-color: var(--rose-500);
}
.rv-confirm-actions .btn.danger:hover {
  background: #e11d48;
  border-color: #e11d48;
}

@media (max-width: 420px) {
  .rv-confirm-card {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .rv-confirm-icon { margin: 0 auto; }
  .rv-confirm-actions { justify-content: stretch; }
  .rv-confirm-actions .btn { flex: 1; }
}

/* ============================================================
   promptModal() — styled drop-in replacement for window.prompt()
   ============================================================ */
.pm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(7, 18, 14, .58);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 16px;
  animation: pmFadeIn 180ms var(--tx);
}
.pm-overlay.pm-closing { animation: pmFadeOut 160ms var(--tx) forwards; }
.pm-box {
  width: min(420px, 100%);
  background: var(--surface, #fff);
  color: var(--text, #0f1a15);
  border-radius: 16px;
  padding: 22px 22px 18px;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.35), 0 4px 14px -4px rgba(0,0,0,.18);
  animation: pmPopIn 220ms var(--tx);
}
.pm-overlay.pm-closing .pm-box { animation: pmPopOut 160ms var(--tx) forwards; }
.pm-title {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}
.pm-msg {
  font-size: 13px;
  color: var(--text-muted, #6b7a72);
  line-height: 1.45;
  margin-bottom: 14px;
}
.pm-input {
  width: 100%;
  padding: 11px 14px;
  font-size: 14px;
  font-weight: 500;
  border: 1.5px solid var(--border, #e3e9e6);
  border-radius: 10px;
  background: var(--bg, #f6f8f7);
  color: inherit;
  outline: none;
  transition: border-color var(--dur) var(--tx), box-shadow var(--dur) var(--tx), background var(--dur) var(--tx);
}
.pm-input:focus {
  border-color: var(--emerald-500, #10b981);
  background: var(--surface, #fff);
  box-shadow: 0 0 0 4px rgba(16, 185, 129, .14);
}
.pm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}
.pm-actions .btn { min-width: 92px; }
@keyframes pmFadeIn  { from { opacity: 0 } to { opacity: 1 } }
@keyframes pmFadeOut { from { opacity: 1 } to { opacity: 0 } }
@keyframes pmPopIn {
  0%   { opacity: 0; transform: translateY(12px) scale(.97); }
  100% { opacity: 1; transform: translateY(0)    scale(1); }
}
@keyframes pmPopOut {
  0%   { opacity: 1; transform: translateY(0)    scale(1); }
  100% { opacity: 0; transform: translateY(8px)  scale(.98); }
}
@media (max-width: 480px) {
  .pm-box { padding: 18px 16px 14px; border-radius: 14px; }
  .pm-actions { justify-content: stretch; }
  .pm-actions .btn { flex: 1; min-width: 0; }
}

/* ============================================================
   Toasts
   ============================================================ */
.toast-container {
  position: fixed;
  bottom: 24px; left: 50%;
  transform: translateX(-50%);
  z-index: 70;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  align-items: center;
}
.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px 11px 14px;
  background: #0f1a15;
  color: #fff;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 500;
  box-shadow: 0 10px 30px -10px rgba(0,0,0,.3);
  opacity: 0;
  transform: translateY(20px);
  transition: all 280ms var(--tx);
  pointer-events: auto;
  max-width: 480px;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast-ico {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.toast.success .toast-ico { background: var(--emerald-500); color: #fff; }
.toast.warn .toast-ico { background: var(--amber-500); color: #fff; }
.toast.error .toast-ico { background: var(--rose-500); color: #fff; }
.toast.ai .toast-ico { background: linear-gradient(135deg, #8b5cf6, #6366f1); }
.toast .undo {
  margin-left: 6px;
  padding: 4px 10px;
  background: rgba(255,255,255,.14);
  border-radius: 6px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--dur) var(--tx);
}
.toast .undo:hover { background: rgba(255,255,255,.22); }

/* Row fade-out helper */
.row-fade {
  animation: rowFade 450ms var(--tx) forwards;
}
@keyframes rowFade {
  0% { opacity: 1; transform: translateX(0); max-height: 200px; }
  70% { opacity: 0; transform: translateX(40px); }
  100% { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; margin: 0; border: 0; }
}

/* ============================================================
   Settings — panels & advanced controls
   ============================================================ */
.settings-page { display: none; }
.settings-page.active { display: block; animation: fadeIn .3s var(--tx); }

.set-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-3);
  padding: 4px 20px 12px;
  margin: -20px -20px 0;
  border-bottom: 1px solid var(--border-soft);
  background: var(--surface-2);
}
.set-section-title .ai-spark {
  background: var(--violet-500);
  box-shadow: 0 0 10px 2px rgba(139, 92, 246, .45);
}
.set-section-title .mini-btn,
.set-section-title .btn {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
  font-size: 11.5px;
}
.settings-page .card { padding: 20px; }
.settings-page .set-row { padding: 16px 20px; margin: 0 -20px; }
.settings-page .set-row:last-child { border-bottom: 0; }
.settings-page .set-row + .set-section-title { margin-top: 0; }

.set-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 16px;
  margin-top: 16px;
}

.inline-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.inline-group .prefix, .inline-group .suffix {
  font-size: 13px;
  color: var(--text-3);
  font-weight: 500;
}

/* Chip group (tip suggestions, language picks) */
.chip-group { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.chip-btn {
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 20px;
  transition: all var(--dur) var(--tx);
}
.chip-btn:hover { background: #fff; border-color: var(--border-strong); }
.chip-btn.active {
  background: var(--emerald-50);
  border-color: var(--emerald-200);
  color: var(--emerald-700);
}

/* Payment method cards */
.pay-methods {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
  padding-top: 16px;
}
.pm-card {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 12px;
  background: var(--surface-2);
  border: 1px solid transparent;
  border-radius: var(--radius);
  transition: all var(--dur) var(--tx);
}
.pm-card.on { background: linear-gradient(135deg, #ecfdf5, #fff 70%); border-color: var(--emerald-100); }
.pm-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.pm-ico {
  width: 40px; height: 40px;
  border-radius: 10px;
  display: grid; place-items: center;
  font-size: 20px;
  background: #fff;
  border: 1px solid var(--border);
}
.pm-name { font-weight: 600; font-size: 13px; color: var(--text); }
.pm-sub  { font-size: 11.5px; color: var(--text-3); margin-top: 2px; }

/* Printers & devices */
.device-list { display: flex; flex-direction: column; gap: 10px; padding-top: 16px; }
.device-row {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  background: var(--surface-2);
  border-radius: var(--radius);
  border: 1px solid transparent;
  transition: all var(--dur) var(--tx);
}
.device-row:hover { background: #fff; border-color: var(--border); box-shadow: var(--shadow-sm); }
.device-ico {
  width: 48px; height: 48px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--border);
  display: grid; place-items: center;
  font-size: 22px;
  position: relative;
}
.device-ico.on::after {
  content: "";
  position: absolute;
  bottom: 4px; right: 4px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--emerald-500);
  border: 2px solid #fff;
}
.device-name { font-weight: 600; font-size: 13px; color: var(--text); }
.device-sub { font-size: 11.5px; color: var(--text-3); margin-top: 3px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dev-status { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.dev-status i { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.dev-status.on { color: var(--emerald-600); }
.dev-status.on i { background: var(--emerald-500); box-shadow: 0 0 0 3px rgba(16,185,129,.15); }
.dev-status.off { color: var(--rose-500); }
.dev-status.off i { background: var(--rose-500); }
.device-actions { display: flex; gap: 6px; }

/* Small switch (for matrix) */
.switch.sm { width: 32px; height: 18px; }
.switch.sm span::before { width: 12px; height: 12px; top: 3px; left: 3px; }
.switch.sm input:checked + span::before { transform: translateX(14px); }

/* Notification matrix */
.notif-matrix { width: 100%; border-collapse: separate; border-spacing: 0; margin-top: 16px; font-size: 13px; }
.notif-matrix thead th {
  text-align: center;
  padding: 10px 8px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-3);
  font-weight: 600;
  border-bottom: 1px solid var(--border-soft);
}
.notif-matrix thead th:first-child { text-align: left; }
.notif-matrix tbody td {
  padding: 12px 8px;
  text-align: center;
  border-bottom: 1px solid var(--border-soft);
}
.notif-matrix tbody td:first-child { text-align: left; font-weight: 500; color: var(--text); }
.notif-matrix tbody tr:last-child td { border-bottom: 0; }
.notif-matrix .switch { display: inline-block; }

/* AI settings hero */
.ai-settings-hero {
  background: linear-gradient(160deg, #faf5ff 0%, #fff 70%);
  border-color: var(--violet-100);
}
.ai-settings-hero .set-section-title {
  background: linear-gradient(135deg, rgba(139,92,246,.08), transparent);
  color: var(--violet-600);
  display: flex;
  gap: 8px;
}
.ai-settings-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding-top: 20px;
}
.ai-settings-stats .ahm-label { color: var(--text-3); }
.ai-settings-stats .ahm-val { color: var(--text); }

/* Backup */
.backup-hero { background: linear-gradient(160deg, #ecfdf5 0%, #fff 70%); border-color: var(--emerald-100); }
.backup-hero-body {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 18px 0 4px;
}
.bh-title {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.01em;
}
.bh-sub { font-size: 12.5px; color: var(--text-3); margin-top: 3px; }
.backup-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--border-soft);
  margin-top: 16px;
}

.dest-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
  padding-top: 16px;
}
.dest-card {
  padding: 16px;
  text-align: center;
  background: var(--surface-2);
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: all var(--dur) var(--tx);
}
.dest-card:hover { background: #fff; border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.dest-card.active { background: linear-gradient(135deg, #ecfdf5, #fff 70%); border-color: var(--emerald-200); }
.dest-ico { font-size: 30px; margin-bottom: 8px; }
.dest-name { font-weight: 700; font-size: 13px; color: var(--text); }
.dest-sub { font-size: 11.5px; color: var(--text-3); margin-top: 3px; }

/* Code pill (for API keys, URLs) */
.set-row code, .device-sub code {
  font-family: "SF Mono", Menlo, monospace;
  font-size: 11.5px;
  color: var(--text-2);
  background: #fff;
  padding: 2px 7px;
  border: 1px solid var(--border-soft);
  border-radius: 5px;
}

.btn.sm.primary { padding: 6px 12px; font-size: 12px; }

/* ============================================================
   Password form & OTP reset flow
   ============================================================ */
.pwd-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 16px;
}
.pwd-form .field { display: flex; flex-direction: column; gap: 6px; }
.pwd-form label { font-size: 12px; font-weight: 600; color: var(--text-2); }

.pwd-input {
  position: relative;
  display: flex;
  align-items: center;
}
.pwd-input input {
  width: 100%;
  padding: 10px 40px 10px 12px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 9px;
  font-size: 13.5px;
  color: var(--text);
  outline: 0;
  transition: border-color var(--dur) var(--tx), box-shadow var(--dur) var(--tx);
  font-family: inherit;
}
.pwd-input input:focus {
  border-color: var(--emerald-500);
  box-shadow: 0 0 0 4px rgba(16, 185, 129, .1);
}
.pwd-input input.invalid {
  border-color: var(--rose-500);
  box-shadow: 0 0 0 4px rgba(244, 63, 94, .1);
}
.pwd-toggle {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border-radius: 7px;
  color: var(--text-3);
  display: grid;
  place-items: center;
  transition: background var(--dur) var(--tx), color var(--dur) var(--tx);
}
.pwd-toggle:hover { background: var(--surface-2); color: var(--text); }
.pwd-toggle.on { color: var(--emerald-600); }

.pwd-strength {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  margin-top: 2px;
}
.pwd-strength span {
  height: 4px;
  border-radius: 3px;
  background: #e5e7eb;
  transition: background var(--dur) var(--tx);
}
.pwd-strength.s1 span:nth-child(-n+1) { background: var(--rose-500); }
.pwd-strength.s2 span:nth-child(-n+2) { background: #f97316; }
.pwd-strength.s3 span:nth-child(-n+3) { background: var(--amber-500); }
.pwd-strength.s4 span:nth-child(-n+4) { background: var(--emerald-500); }

.hint.ok { color: var(--emerald-600); font-weight: 600; }
.hint.bad { color: var(--rose-500); font-weight: 600; }

.pwd-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
  flex-wrap: wrap;
}

.link-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--emerald-600);
  padding: 6px 0;
  transition: color var(--dur) var(--tx);
}
.link-btn:hover { color: var(--emerald-700); text-decoration: underline; text-underline-offset: 3px; }

/* Step indicator */
.step-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--border-soft);
  background: var(--surface-2);
}
.step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-3);
  white-space: nowrap;
}
.step i {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--border);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  color: var(--text-3);
  transition: all var(--dur) var(--tx);
}
.step.active { color: var(--emerald-700); }
.step.active i {
  background: var(--emerald-500);
  border-color: var(--emerald-500);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(16, 185, 129, .15);
}
.step.done i {
  background: var(--emerald-500);
  border-color: var(--emerald-500);
  color: #fff;
}
.step.done i::before {
  content: "✓";
  font-size: 12px;
}
.step.done i { font-size: 0; }
.step.done { color: var(--emerald-600); }
.step-bar {
  flex: 1;
  height: 2px;
  background: var(--border);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
  min-width: 20px;
}
.step-bar.filled::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--emerald-500);
  animation: stepFill 400ms var(--tx);
}
@keyframes stepFill { from { transform: translateX(-100%); } to { transform: translateX(0); } }

.reset-step { display: none; }
.reset-step.active { display: block; animation: fadeIn .25s var(--tx); }

.reset-email {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  background: linear-gradient(135deg, #ecfdf5, #fff 70%);
  border: 1px solid var(--emerald-100);
  border-radius: var(--radius);
}
.re-ico {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--emerald-100);
  display: grid;
  place-items: center;
  color: var(--emerald-600);
}
.re-label { font-size: 11.5px; color: var(--text-3); font-weight: 500; }
.re-val {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin-top: 2px;
  letter-spacing: -0.01em;
}

/* OTP inputs */
.otp-desc {
  font-size: 13px;
  color: var(--text-2);
  margin-bottom: 16px;
  line-height: 1.55;
}
.otp-desc b { color: var(--text); }
.otp-inputs {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 16px;
}
.otp {
  width: 48px;
  height: 56px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  text-align: center;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  outline: 0;
  transition: all var(--dur) var(--tx);
}
.otp:focus {
  border-color: var(--emerald-500);
  box-shadow: 0 0 0 4px rgba(16, 185, 129, .12);
  transform: translateY(-1px);
}
.otp.filled {
  border-color: var(--emerald-500);
  background: var(--emerald-50);
}
.otp.error {
  border-color: var(--rose-500);
  box-shadow: 0 0 0 4px rgba(244, 63, 94, .12);
  animation: shake .4s var(--tx);
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-4px); }
  40%, 80% { transform: translateX(4px); }
}

.otp-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--text-3);
  margin-bottom: 4px;
}
.otp-timer b { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.otp-timer.warn b { color: var(--amber-500); }
.otp-timer.bad b { color: var(--rose-500); }

/* Disabled button */
.btn.primary:disabled,
.btn.primary[disabled] {
  opacity: .55;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: 0 1px 2px rgba(16, 185, 129, .2);
}

/* ============================================================
   Responsive
   ============================================================ */
/* Global guard against page-level horizontal scroll */
.app-shell { max-width: 100vw; overflow-x: hidden; }
.main { min-width: 0; max-width: 100%; overflow-x: hidden; }
.view-container { min-width: 0; }

@media (max-width: 1280px) {
  .pos-wrap { grid-template-columns: 1fr; }
}

@media (max-width: 1200px) {
  .kpi-grid, .kpi-grid.four { grid-template-columns: repeat(2, 1fr); }
  .ai-cards { grid-template-columns: 1fr; }
  .grid-2, .grid-2-wide { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .kanban { grid-template-columns: repeat(2, 1fr); }
  .pos-wrap { grid-template-columns: 1fr; }
  .ai-hero-metrics { grid-template-columns: repeat(2, 1fr); }
  .donut-wrap { grid-template-columns: 1fr; text-align: center; }
  .donut { margin: 0 auto; }
}
@media (max-width: 880px) {
  .app-shell, .app-shell.sb-collapsed { grid-template-columns: 1fr; }
  .sidebar.collapsed { padding: 18px 14px 20px; }
  .sidebar.collapsed .brand-text,
  .sidebar.collapsed .branch-meta,
  .sidebar.collapsed .nav-item span,
  .sidebar.collapsed .nav-title { display: revert; }
  .sidebar.collapsed .sidebar-promo { display: revert; }
  .sidebar.collapsed .sidebar-collapse { margin: 0; width: 26px; height: 26px; background: transparent; border: 0; }
  .sidebar.collapsed .sidebar-collapse svg { transform: none; }
  .sidebar {
    position: fixed;
    left: 0; top: 0;
    width: 280px;
    transform: translateX(-100%);
    transition: transform var(--dur) var(--tx);
    z-index: 30;
    box-shadow: var(--shadow-lg);
  }
  .sidebar.open { transform: translateX(0); }
  .menu-toggle { display: grid; }
  .grid-3 { grid-template-columns: 1fr; }
  .view-container { padding: 16px; }
  .kpi-grid, .kpi-grid.four { grid-template-columns: 1fr 1fr; }
  .kanban { grid-template-columns: 1fr; }
  .settings-wrap { grid-template-columns: 1fr; }
  /* Search stays visible — just trims its chrome to fit narrow viewports */
  .search { padding: 8px 10px; gap: 6px; }
  .search kbd { display: none; }
  .search input { font-size: 13px; }
  .page-title { font-size: 22px; }
  .topbar { padding: 12px 16px; gap: 10px; }
  .user-meta { display: none; }
}
@media (max-width: 480px) {
  .search input { font-size: 12.5px; }
  .search input::placeholder { font-size: 12px; }
  /* Keep the icon flush so the input can use every available pixel */
  .search { padding: 7px 9px; }
}

/* ============================================================
   Accessibility — skip-link
   Hidden until focused, jumps over the sidebar to main content.
   ============================================================ */
.skip-link {
  position: fixed;
  top: -42px;
  left: 12px;
  z-index: 9999;
  background: var(--emerald-600);
  color: #fff;
  padding: 10px 18px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 13.5px;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
  transition: top 160ms var(--tx);
}
.skip-link:focus { top: 12px; outline: 2px solid #fff; outline-offset: 2px; }

/* ============================================================
   Network status banner
   Persistent rail at the top of the screen when offline / API down.
   ============================================================ */
.net-banner {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.16);
  animation: netSlideIn 220ms var(--tx);
}
.net-banner.net-rose  { background: linear-gradient(90deg, #f43f5e, #e11d48); }
.net-banner.net-amber { background: linear-gradient(90deg, #f59e0b, #d97706); color: #1f1300; }
.net-banner .net-dot {
  width: 8px; height: 8px;
  background: rgba(255,255,255,.95);
  border-radius: 50%;
  animation: netPulse 1.4s ease-in-out infinite;
  flex-shrink: 0;
}
.net-banner .net-retry {
  margin-left: auto;
  background: rgba(0,0,0,.18);
  color: inherit;
  border: 0;
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.net-banner .net-retry:hover { background: rgba(0,0,0,.32); }
@keyframes netSlideIn { from { transform: translateY(-100%); } to { transform: translateY(0); } }
@keyframes netPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .55; transform: scale(.85); }
}

/* ============================================================
   Cookie consent banner (GDPR / ePrivacy)
   ============================================================ */
.cookie-consent {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  max-width: 720px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 12px 40px -12px rgba(15, 23, 42, .25);
  padding: 16px 20px;
  display: flex;
  gap: 16px;
  align-items: center;
  z-index: 9500;
  animation: ccSlideIn 320ms var(--tx);
}
.cookie-consent.out { animation: ccSlideOut 240ms var(--tx) forwards; }
@keyframes ccSlideIn  { from { transform: translateY(120%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes ccSlideOut { from { transform: translateY(0); opacity: 1; } to { transform: translateY(120%); opacity: 0; } }
.cookie-consent-text {
  flex: 1;
  font-size: 12.5px;
  color: var(--text-2);
  line-height: 1.5;
}
.cookie-consent-text b {
  display: block;
  color: var(--text);
  font-size: 13.5px;
  margin-bottom: 4px;
}
.cookie-consent-link {
  color: var(--emerald-600);
  text-decoration: underline;
  margin-left: 4px;
}
.cookie-consent-actions { display: flex; gap: 8px; flex-shrink: 0; }
.cookie-consent-actions .btn.sm { padding: 8px 16px; font-size: 12.5px; }
@media (max-width: 600px) {
  .cookie-consent { flex-direction: column; align-items: stretch; padding: 14px; }
  .cookie-consent-actions { width: 100%; }
  .cookie-consent-actions .btn { flex: 1; justify-content: center; }
}

/* ============================================================
   Settings → Danger Zone
   Owner-only nav item + the destructive action card. Visually
   distinct from every other settings panel so it's impossible
   to misclick.
   ============================================================ */
.settings-nav .sn-item.sn-danger {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-soft);
  color: var(--rose-500);
  font-weight: 600;
}
.settings-nav .sn-item.sn-danger.active {
  background: #fef2f2;
  color: #b91c1c;
}
.settings-nav .sn-item.sn-danger:hover { background: #fff1f2; }

.danger-card {
  border-color: #fecaca !important;
  background: linear-gradient(180deg, #fff 0%, #fff5f5 100%);
}
.danger-title { color: #b91c1c !important; font-weight: 700; }
.danger-intro {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.55;
  margin: 0 0 18px;
}
.danger-intro b { color: var(--rose-500); }

.danger-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 18px;
  background: #fff;
  border: 1px solid #fecaca;
  border-radius: var(--radius);
}
.danger-row-text { min-width: 0; }
.danger-row-title {
  font-weight: 700;
  font-size: 14.5px;
  color: var(--text);
  margin-bottom: 6px;
}
.danger-row-sub {
  font-size: 12.5px;
  color: var(--text-2);
  line-height: 1.55;
}

/* ---- Destructive button variant ---- */
.btn.danger {
  background: var(--rose-500);
  color: #fff;
  border: 1px solid var(--rose-500);
  font-weight: 600;
}
.btn.danger:hover:not(:disabled)  { background: #e11d48; border-color: #e11d48; }
.btn.danger:active:not(:disabled) { background: #be123c; border-color: #be123c; }
.btn.danger:disabled { opacity: .55; cursor: not-allowed; }

/* ---- Delete-account modals ---- */
.delacct-modal {
  width: min(540px, 94vw);
  max-height: 92vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.delacct-modal .modal-body {
  overflow: auto;
  flex: 1;
}
.delacct-head .modal-title {
  color: #b91c1c;
  font-size: 17px;
  font-weight: 700;
}
.delacct-warn {
  font-size: 13.5px;
  color: var(--text);
  line-height: 1.5;
  margin-bottom: 14px;
}
.delacct-warn b { color: var(--rose-500); }

.delacct-list {
  list-style: none;
  margin: 0 0 16px;
  padding: 14px 16px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12.5px;
  color: var(--text-2);
}
.delacct-list li::before {
  content: "✗";
  display: inline-block;
  width: 16px;
  color: var(--rose-500);
  font-weight: 700;
}

.delacct-callout {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #7f1d1d;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  line-height: 1.5;
  margin-bottom: 16px;
}
.delacct-callout b { color: #b91c1c; }

.delacct-typecheck {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
  color: var(--text);
}
.delacct-typecheck code {
  background: var(--surface-2);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 12px;
  color: #b91c1c;
  font-weight: 700;
  letter-spacing: .05em;
}

.delacct-error {
  margin-top: 12px;
  padding: 10px 14px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: var(--radius-sm);
  color: #b91c1c;
  font-size: 13px;
  line-height: 1.4;
}

.delacct-modal .field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}
.delacct-modal .field span {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-2);
}

.delacct-btn-spinner::before {
  content: "";
  display: inline-block;
  width: 12px; height: 12px;
  margin-right: 6px;
  border: 2px solid rgba(255,255,255,.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: delacctSpin .7s linear infinite;
  vertical-align: -2px;
}
@keyframes delacctSpin { to { transform: rotate(360deg); } }

@media (max-width: 600px) {
  .danger-row { grid-template-columns: 1fr; }
  .danger-row .btn.danger { width: 100%; justify-content: center; }
}

/* ============================================================
   Inbox panel — messaging with delivery riders
   ============================================================ */
.inbox-panel { width: 720px; max-width: 96vw; }
.inbox-body {
  flex: 1;
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 0; /* lets the children scroll independently */
}
.inbox-list {
  border-right: 1px solid var(--border-soft);
  overflow-y: auto;
  background: var(--surface-2, #fafbfa);
}
.inbox-list-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-soft);
  cursor: pointer;
  transition: background var(--dur) var(--tx);
  position: relative;
}
.inbox-list-row:hover  { background: rgba(16, 185, 129, .06); }
.inbox-list-row.active { background: rgba(16, 185, 129, .12); }
.inbox-list-row .avatar { width: 36px; height: 36px; font-size: 13px; flex-shrink: 0; }
.inbox-list-meta { flex: 1; min-width: 0; }
.inbox-list-name {
  font-weight: 600;
  font-size: 13.5px;
  color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.inbox-list-last {
  font-size: 12px;
  color: var(--text-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: 2px;
}
.inbox-list-last.unsent { color: var(--text-2); font-style: italic; }
.inbox-list-time {
  font-size: 11px;
  color: var(--text-3);
  white-space: nowrap;
  flex-shrink: 0;
}
.inbox-list-unread {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 9px;
  background: var(--emerald-500, #10b981);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  margin-left: 6px;
}
.inbox-thread {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.inbox-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 20px;
  color: var(--text-2);
}
.inbox-thread-inner { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.inbox-thread-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-soft);
  background: #fff;
}
.inbox-thread-head .avatar { width: 32px; height: 32px; font-size: 12px; }
.inbox-thread-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
}
.inbox-thread-status {
  font-size: 11.5px;
  color: var(--text-3);
  margin-top: 1px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.inbox-thread-status .dot {
  width: 6px; height: 6px; border-radius: 50%;
  display: inline-block;
}
.inbox-thread-status .dot.online      { background: #10b981; }
.inbox-thread-status .dot.busy        { background: #f59e0b; }
.inbox-thread-status .dot.on_delivery { background: #8b5cf6; }
.inbox-thread-status .dot.offline     { background: #94a3b8; }
.inbox-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  background: var(--surface-2, #fafbfa);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.inbox-msg {
  max-width: 75%;
  padding: 9px 13px;
  border-radius: 14px;
  font-size: 13.5px;
  line-height: 1.4;
  word-wrap: break-word;
  white-space: pre-wrap;
}
.inbox-msg.from-user {
  align-self: flex-end;
  background: var(--emerald-500, #10b981);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.inbox-msg.from-rider {
  align-self: flex-start;
  background: #fff;
  color: var(--text);
  border: 1px solid var(--border-soft);
  border-bottom-left-radius: 4px;
}
.inbox-msg-time {
  font-size: 10.5px;
  color: var(--text-3);
  padding: 0 4px;
}
.inbox-msg.from-user + .inbox-msg-time { align-self: flex-end; }
.inbox-msg.from-rider + .inbox-msg-time { align-self: flex-start; }
.inbox-empty-thread {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-3);
  font-size: 13px;
  font-style: italic;
}
.inbox-composer {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 12px 14px;
  border-top: 1px solid var(--border-soft);
  background: #fff;
}
.inbox-composer textarea {
  flex: 1;
  resize: none;
  min-height: 38px;
  max-height: 120px;
  padding: 9px 12px;
  border: 1px solid var(--border, #e3e9e6);
  border-radius: 10px;
  font: inherit;
  font-size: 14px;
  background: var(--surface-2, #fafbfa);
  outline: none;
  transition: border-color var(--dur) var(--tx), box-shadow var(--dur) var(--tx);
}
.inbox-composer textarea:focus {
  border-color: var(--emerald-500, #10b981);
  box-shadow: 0 0 0 4px rgba(16, 185, 129, .14);
  background: #fff;
}
.inbox-composer .btn {
  flex-shrink: 0;
  height: 38px;
  padding: 0 14px;
}
.inbox-composer .btn[disabled] {
  opacity: .5;
  cursor: not-allowed;
}

/* Inbox badge on the topbar icon */
#inboxBtn { position: relative; }
#inboxBtn .dot {
  position: absolute;
  top: 6px; right: 6px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--rose-500, #f43f5e);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

@media (max-width: 720px) {
  .inbox-body { grid-template-columns: 1fr; }
  .inbox-list { max-height: 35vh; border-right: 0; border-bottom: 1px solid var(--border-soft); }
}

/* ============================================================
   AI Smart Pricing — recs table, menu engineering, scenario sim
   ============================================================ */
.pr-ai-card .ai-pill-sm {
  background: linear-gradient(135deg, #8b5cf6, #6d28d9); color: #fff;
  border-radius: 999px; padding: 1px 8px; font-size: 10px; font-weight: 700;
  margin-left: 6px; vertical-align: 2px;
}
.pr-ai-recs-table .pr-ai-rec-name { font-weight: 600; color: var(--text-1); }
.pr-ai-recs-table .pr-ai-rec-rationale { font-size: 11px; color: var(--text-3); margin-top: 2px; max-width: 280px; }
.pr-ai-kind {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
}
.pr-ai-kind.raise               { background: rgba(16,185,129,.14); color: #047857; }
.pr-ai-kind.lower               { background: rgba(239,68,68,.14);  color: #b91c1c; }
.pr-ai-kind.hold                { background: rgba(148,163,184,.18); color: #475569; }
.pr-ai-kind.inventory_clearance { background: rgba(234,179,8,.16);  color: #92400e; }
.pr-ai-kind.time_surge          { background: rgba(139,92,246,.16); color: #6d28d9; }
.pr-ai-kind.time_discount       { background: rgba(14,165,233,.16); color: #0369a1; }
.pr-ai-delta.up                 { color: #047857; font-weight: 700; }
.pr-ai-delta.down               { color: #b91c1c; font-weight: 700; }
.pr-ai-risk {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700;
}
.pr-ai-risk.low    { background: rgba(16,185,129,.12); color: #047857; }
.pr-ai-risk.medium { background: rgba(234,179,8,.16);  color: #92400e; }
.pr-ai-risk.high   { background: rgba(239,68,68,.16);  color: #b91c1c; }

.pr-menu-quadrants {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
  padding: 4px;
}
.pr-quadrant {
  border: 1px solid var(--border-soft, #e5e7eb);
  border-radius: 12px; padding: 12px;
  background: var(--bg-elev, #fff);
}
.pr-quadrant[data-q="star"]       { background: linear-gradient(180deg, rgba(234,179,8,.08), transparent); }
.pr-quadrant[data-q="plow_horse"] { background: linear-gradient(180deg, rgba(14,165,233,.08), transparent); }
.pr-quadrant[data-q="puzzle"]     { background: linear-gradient(180deg, rgba(139,92,246,.08), transparent); }
.pr-quadrant[data-q="dog"]        { background: linear-gradient(180deg, rgba(239,68,68,.07), transparent); }
.pr-q-head {
  display: flex; align-items: center; gap: 8px;
  font-weight: 700; color: var(--text-1); margin-bottom: 8px;
}
.pr-q-emoji { font-size: 18px; }
.pr-q-title { flex: 1; }
.pr-q-count {
  background: rgba(15,23,42,.06); color: var(--text-2);
  border-radius: 999px; padding: 0 8px; font-size: 11px; font-weight: 700;
}
.pr-q-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pr-q-item { border: 1px solid var(--border-soft); border-radius: 8px; padding: 6px 8px; background: #fff; }
.pr-q-item-name   { font-weight: 600; font-size: 12.5px; color: var(--text-1); }
.pr-q-item-meta   { font-size: 11px; color: var(--text-3); }
.pr-q-item-action { font-size: 11px; color: #6d28d9; margin-top: 2px; }
.pr-q-empty       { font-size: 12px; color: var(--text-3); padding: 4px 6px; }
@media (max-width: 720px) { .pr-menu-quadrants { grid-template-columns: 1fr; } }

.pr-scenario-body { padding: 12px; display: flex; flex-direction: column; gap: 12px; }
.pr-scn-inputs    { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.pr-scn-inputs .select, .pr-scn-inputs input[type="number"] {
  padding: 6px 10px; border-radius: 8px;
  border: 1px solid var(--border-soft, #e5e7eb); background: #fff; font: inherit; font-size: 13px;
}
.pr-scn-inputs input[type="number"] { width: 80px; }
.pr-scn-result   { border-top: 1px dashed var(--border-soft); padding-top: 12px; }
.pr-scn-kpis     { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pr-scn-kpi      {
  border: 1px solid var(--border-soft); border-radius: 10px;
  padding: 8px 10px; background: #fff;
}
.pr-scn-kpi .mk-label { font-size: 11px; color: var(--text-3); }
.pr-scn-kpi .mk-val   { font-weight: 700; color: var(--text-1); font-size: 16px; }
.pr-scn-narrative { margin-top: 10px; font-size: 12.5px; color: var(--text-2); line-height: 1.5; }
@media (max-width: 720px) { .pr-scn-kpis { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================
   Ask Kapo AI — conversational copilot panel + FAB
   ============================================================ */
.kapo-fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 9000;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 16px; border-radius: 999px; border: 0;
  background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
  color: #fff; font-weight: 600; cursor: pointer;
  box-shadow: 0 12px 30px rgba(109,40,217,.32), 0 4px 8px rgba(0,0,0,.06);
  transition: transform .15s ease, box-shadow .15s ease;
}
.kapo-fab:hover  { transform: translateY(-1px); box-shadow: 0 14px 34px rgba(109,40,217,.4); }
.kapo-fab:focus  { outline: 3px solid rgba(139,92,246,.35); outline-offset: 2px; }
.kapo-fab-label  { font-size: 13px; letter-spacing: .2px; }
@media (max-width: 480px) {
  .kapo-fab-label { display: none; }
  .kapo-fab { padding: 12px; }
}

/* When the launcher is mounted inside the top nav bar (see mount() in
   ask-kapo.js), neutralise the floating-FAB positioning and shrink the
   padding so it sits comfortably alongside the inbox/notification
   icons + user chip. */
.topbar-right .kapo-fab {
  position: static;
  right: auto; bottom: auto;
  padding: 7px 14px;
  font-size: 12.5px;
  box-shadow: 0 4px 12px rgba(109,40,217,.22);
}
.topbar-right .kapo-fab:hover {
  transform: none;
  box-shadow: 0 6px 16px rgba(109,40,217,.32);
}

.kapo-panel {
  position: fixed; right: 14px; bottom: 14px; top: 14px;
  width: min(420px, calc(100vw - 28px));
  background: var(--bg-elev, #fff);
  border: 1px solid var(--border-soft, #e5e7eb);
  border-radius: 16px;
  box-shadow: 0 30px 70px rgba(15,23,42,.18), 0 4px 12px rgba(15,23,42,.06);
  display: flex; flex-direction: column;
  transform: translateX(calc(100% + 24px));
  transition: transform .25s ease;
  z-index: 9100;
  overflow: hidden;
}
.kapo-panel.open { transform: translateX(0); }
@media (max-width: 720px) {
  .kapo-panel { right: 0; left: 0; bottom: 0; top: 0; width: 100%; border-radius: 0; border: 0; }
}

.kapo-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-soft, #e5e7eb);
  background: linear-gradient(135deg, rgba(139,92,246,.06), rgba(16,185,129,.04));
}
.kapo-head-l { display: flex; align-items: center; gap: 10px; }
.kapo-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, #8b5cf6, #6d28d9);
  color: #fff; display: flex; align-items: center; justify-content: center;
}
.kapo-title { font-weight: 700; font-size: 14px; color: var(--text-1, #0f172a); }
.kapo-sub   { font-size: 11.5px; color: var(--text-3, #6b7280); }

.kapo-head-r { display: flex; gap: 4px; }
.kapo-icon-btn {
  width: 30px; height: 30px; border-radius: 8px; border: 0;
  background: transparent; color: var(--text-2, #475569); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.kapo-icon-btn:hover { background: rgba(15,23,42,.06); color: var(--text-1, #0f172a); }

.kapo-body {
  flex: 1; overflow-y: auto;
  padding: 14px;
  display: flex; flex-direction: column; gap: 12px;
  background: var(--bg, #f6f8f7);
}
.kapo-empty {
  margin: auto;
  text-align: center;
  padding: 16px;
  color: var(--text-2, #475569);
}
.kapo-empty-icon {
  width: 56px; height: 56px; border-radius: 50%;
  margin: 0 auto 10px;
  background: linear-gradient(135deg, rgba(139,92,246,.18), rgba(16,185,129,.18));
  color: #6d28d9;
  display: flex; align-items: center; justify-content: center;
}
.kapo-empty h3 { font-size: 16px; font-weight: 700; margin: 4px 0; color: var(--text-1); }
.kapo-empty p  { font-size: 12.5px; line-height: 1.5; max-width: 320px; margin: 0 auto; }

.kapo-msg { display: flex; gap: 8px; }
.kapo-msg.user { justify-content: flex-end; }
.kapo-msg.user .kapo-bubble {
  background: linear-gradient(135deg, #8b5cf6, #6d28d9);
  color: #fff;
  border-radius: 14px 14px 4px 14px;
}
.kapo-msg.assistant .kapo-bubble {
  background: #fff;
  border: 1px solid var(--border-soft, #e5e7eb);
  color: var(--text-1, #0f172a);
  border-radius: 14px 14px 14px 4px;
}
.kapo-msg.system .kapo-bubble.error {
  background: #fff5f5; border: 1px solid #fecaca; color: #991b1b;
  border-radius: 8px;
}
.kapo-msg-icon {
  width: 24px; height: 24px; border-radius: 50%;
  background: linear-gradient(135deg, #8b5cf6, #6d28d9);
  color: #fff;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  margin-top: 4px;
}
.kapo-msg-main { flex: 1; min-width: 0; }
.kapo-bubble {
  padding: 10px 14px;
  font-size: 13.5px; line-height: 1.55;
  max-width: 100%;
  word-wrap: break-word;
}
.kapo-bubble code {
  background: rgba(15,23,42,.06); padding: 1px 5px; border-radius: 4px; font-size: 12px;
}
.kapo-bubble pre {
  background: rgba(15,23,42,.06); padding: 8px 10px; border-radius: 8px;
  overflow-x: auto; font-size: 12px;
}
.kapo-bubble h2, .kapo-bubble h3, .kapo-bubble h4 { margin: 4px 0; font-weight: 700; }
.kapo-bubble ul, .kapo-bubble ol { margin: 4px 0 4px 18px; padding: 0; }
.kapo-bubble li { margin: 2px 0; }
.kapo-bubble blockquote {
  border-left: 3px solid #c4b5fd;
  padding-left: 8px; margin: 4px 0; color: #4b5563;
}
.kapo-bubble a { color: #6d28d9; text-decoration: underline; }
.kapo-cite {
  display: inline-block;
  background: rgba(139,92,246,.12); color: #6d28d9;
  border-radius: 4px; padding: 0 4px; margin: 0 2px;
  font-size: 10px; vertical-align: 2px;
}

.kapo-tools { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.kapo-tool-pill {
  display: inline-block; background: rgba(16,185,129,.10);
  color: #047857; font-size: 10.5px; font-weight: 600;
  padding: 2px 8px; border-radius: 999px;
}

.kapo-attachments { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.kapo-att {
  background: #fff; border: 1px solid var(--border-soft, #e5e7eb);
  border-radius: 10px; padding: 8px 10px;
  min-width: 100px; flex: 1 1 130px;
  font-size: 12px; color: var(--text-2, #475569);
}
.kapo-att.kpi .kapo-att-value { font-weight: 700; font-size: 16px; color: var(--text-1); }
.kapo-att-title { font-weight: 700; font-size: 12px; color: var(--text-1); margin-bottom: 4px; }
.kapo-att-sub   { font-size: 11px; color: var(--text-3); }
.kapo-att table { width: 100%; border-collapse: collapse; font-size: 11px; }
.kapo-att th { text-align: left; padding: 3px 4px; color: var(--text-3); font-weight: 600; }
.kapo-att td { padding: 3px 4px; border-top: 1px solid var(--border-soft); }

.kapo-citations { margin-top: 6px; }
.kapo-cit-label { font-size: 10.5px; font-weight: 600; color: var(--text-3); margin-bottom: 3px; }
.kapo-cit-pill {
  display: inline-block; background: rgba(15,23,42,.06);
  color: var(--text-2); font-size: 10.5px;
  padding: 2px 8px; border-radius: 999px; margin-right: 4px;
}

.kapo-feedback { display: flex; gap: 4px; align-items: center; margin-top: 8px; }
.kapo-fb {
  width: 26px; height: 26px; border-radius: 6px; border: 0; background: transparent;
  cursor: pointer; font-size: 14px; padding: 0;
}
.kapo-fb:hover    { background: rgba(15,23,42,.06); }
.kapo-fb.active   { background: rgba(139,92,246,.16); }
.kapo-fb.active.down { background: rgba(239,68,68,.16); }
.kapo-copy {
  margin-left: auto; padding: 4px 10px; border-radius: 6px; border: 0;
  background: rgba(15,23,42,.04); color: var(--text-2); font-size: 11.5px;
  cursor: pointer;
}

.kapo-typing { display: inline-flex; gap: 4px; padding: 6px 4px; }
.kapo-typing span {
  width: 7px; height: 7px; border-radius: 50%; background: #c4b5fd;
  animation: kapo-bounce 1.2s infinite ease-in-out;
}
.kapo-typing span:nth-child(2) { animation-delay: .15s; }
.kapo-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes kapo-bounce {
  0%, 100% { transform: scale(.6); opacity: .5; }
  40%      { transform: scale(1);  opacity: 1; }
}

.kapo-chips {
  display: flex; gap: 6px; padding: 6px 12px 0;
  flex-wrap: wrap;
  border-top: 1px solid var(--border-soft, #e5e7eb);
  background: var(--bg-elev, #fff);
}
.kapo-chip {
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid rgba(139,92,246,.30);
  background: rgba(139,92,246,.06);
  color: #6d28d9; font-size: 12px; font-weight: 600; cursor: pointer;
  white-space: nowrap;
  transition: background .12s;
}
.kapo-chip:hover { background: rgba(139,92,246,.14); }

.kapo-input {
  display: flex; gap: 6px; align-items: flex-end;
  padding: 10px 12px;
  border-top: 1px solid var(--border-soft, #e5e7eb);
  background: var(--bg-elev, #fff);
}
.kapo-input textarea {
  flex: 1; resize: none; max-height: 140px; min-height: 36px;
  padding: 8px 10px; border-radius: 8px;
  border: 1px solid var(--border-soft, #e5e7eb);
  font: inherit; font-size: 13.5px; line-height: 1.45;
  color: var(--text-1); background: var(--bg, #f8fafc);
}
.kapo-input textarea:focus {
  outline: 2px solid rgba(139,92,246,.30); border-color: #c4b5fd; background: #fff;
}
.kapo-input button[type="submit"] {
  width: 36px; height: 36px; border-radius: 8px; border: 0;
  background: linear-gradient(135deg, #8b5cf6, #6d28d9); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
}
.kapo-input button[type="submit"]:hover  { filter: brightness(1.05); }
.kapo-input button[type="submit"]:disabled { opacity: .5; cursor: not-allowed; }

.kapo-foot {
  padding: 6px 12px 10px;
  font-size: 10.5px; color: var(--text-3, #6b7280);
  text-align: center;
  background: var(--bg-elev, #fff);
  border-top: 1px solid var(--border-soft, #e5e7eb);
}

/* AI Auto-Translate — customization editor in the item modal. */
.mi-customizations { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
.mi-customization-row {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(160px, 2fr) auto;
  gap: 6px;
  align-items: center;
}
.mi-customization-row .input { padding: 6px 10px; font-size: 12.5px; }
.mi-cz-remove { padding: 4px 9px; font-size: 14px; line-height: 1; }

/* "AI translation in progress" indicator next to the item name on cards. */
.mm-translating-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--indigo-500, #6366f1);
  box-shadow: 0 0 0 3px rgba(99,102,241,.18);
  vertical-align: middle;
  margin-left: 6px;
  animation: mm-translating-pulse 1.4s ease-in-out infinite;
}
.mm-translating-dot.failed {
  background: var(--rose-500, #f43f5e);
  box-shadow: 0 0 0 3px rgba(244,63,94,.18);
  animation: none;
}
@keyframes mm-translating-pulse {
  0%, 100% { opacity: 0.6; transform: scale(0.85); }
  50%      { opacity: 1.0; transform: scale(1.0); }
}