/* ============================================================================
   ops.serverbazaar.ai — Internal Ops Dashboard
   Light, data-dense admin UI: white sidebar + content area, blue primary,
   neon-cyan reserved for small accents (logo glow, toast edge, login stripe).
   Plain CSS, no build step. Loaded on every page.
   ========================================================================== */

/* Inter — match the SignageFlow Pro design system (loaded on every page). */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");

/* ----------------------------------------------------------------- Tokens */
:root {
  /* Brand / primary (SignageFlow Pro blue — Tailwind primary-600/700/50) */
  --brand: #2563eb;
  --brand-strong: #1d4ed8;
  --brand-soft: #eff6ff;
  --brand-ring: rgba(59, 130, 246, 0.45);

  /* Light content surface (Tailwind gray scale) */
  --bg: #f9fafb;
  --surface: #ffffff;
  --surface-2: #f9fafb;
  --ink: #111827;
  --ink-soft: #34517d;
  --muted: #6b7a90;
  --line: #e5e7eb;
  --line-strong: #d1d5db; /* control borders (buttons, inputs) */
  --line-2: #f3f4f6;

  /* Neon accent — logo glow, toast edge, login-card stripe */
  --neon: #00d4ff;
  --neon-glow: 0 0 18px rgba(0, 212, 255, 0.45), 0 0 48px rgba(0, 212, 255, 0.16);

  /* Status */
  --ok: #0f7a45;
  --ok-soft: #e3f7ec;
  --warn: #b7791f;
  --warn-soft: #fdf3e2;
  --danger: #c0392f;
  --danger-soft: #fdecea;
  --info: #1d6fd6;
  --info-soft: #e7f1fd;

  /* Shape */
  --r-sm: 6px;
  --r: 8px;
  --r-lg: 8px;
  --r-xl: 12px;
  --pill: 999px;
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --ease: 0.25s cubic-bezier(0.22, 1, 0.36, 1);

  --sidebar-w: 256px;
  --topbar-h: 62px;

  --font-ui: "Inter", system-ui, "Segoe UI", Arial, sans-serif;
  /* Numerals stay in Inter on purpose — .mono/.num pair this with
     font-variant-numeric: tabular-nums for aligned figures instead of a
     typewriter face. Swap in a real mono family here if that ever changes. */
  --font-mono: "Inter", system-ui, "Segoe UI", Arial, sans-serif;
}

/* ------------------------------------------------------------------ Reset */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-x: hidden; max-width: 100%; }
body {
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
button { font-family: inherit; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #cfd8e6; border-radius: 99px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #b6c3d6; background-clip: content-box; }

/* --------------------------------------------- Accessibility & feel ----- */
::selection { background: rgba(37, 99, 235, 0.18); }
body { accent-color: var(--brand); } /* native checkboxes/radios/progress in brand blue */
/* Visible keyboard focus ring — :focus-visible so mouse clicks stay clean */
.btn:focus-visible, .chip:focus-visible, .tab:focus-visible, .qtab:focus-visible,
.icon-btn:focus-visible, .sb-link:focus-visible, .hamburger:focus-visible,
.sb-close:focus-visible, .modal-close:focus-visible, .qa:focus-visible,
.qmenu-item:focus-visible, .qcat-item:focus-visible, a:focus-visible {
  outline: 2px solid var(--brand); outline-offset: 2px;
}
.topbar-search:focus-within { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-ring); color: var(--ink); }

/* =========================================================== App shell == */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
  transition: grid-template-columns 0.3s var(--ease);
}
/* Desktop slide-collapse: hamburger hides the sidebar and main goes full width */
.app.sb-collapsed { grid-template-columns: 0 1fr; }
.app.sb-collapsed .sidebar { transform: translateX(-100%); }

/* ----- Sidebar (dark lux) ----- */
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--sidebar-w);
  background: #ffffff;
  border-right: 1px solid var(--line);
  color: var(--ink-soft);
  display: flex;
  flex-direction: column;
  z-index: 60;
  transition: transform var(--ease);
}
.sb-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 18px 48px 18px 20px;
  min-height: var(--topbar-h);
  border-bottom: 1px solid var(--line);
}
/* Sidebar close (✕) button */
.sb-close {
  position: absolute; top: 14px; right: 12px;
  width: 32px; height: 32px; display: grid; place-items: center;
  background: none; border: 1px solid transparent; border-radius: 9px;
  color: var(--muted); cursor: pointer; z-index: 5;
  transition: background var(--ease), color var(--ease), border-color var(--ease);
}
.sb-close:hover { background: var(--surface-2); color: var(--ink); border-color: var(--line); }
.sb-close svg { width: 18px; height: 18px; }
.sb-logo {
  width: 38px; height: 38px;
  border-radius: 11px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--brand), #0a3d8f);
  color: #fff; font-weight: 800; font-size: 17px;
  font-family: var(--font-mono);
  box-shadow: var(--neon-glow);
  flex: none;
}
.sb-logo-img { width: 40px; height: 40px; flex: none; object-fit: contain; border-radius: 9px; background: #fff; padding: 3px; border: 1px solid var(--line); }
.sb-title { font-size: 0.98rem; font-weight: 800; line-height: 1.1; color: var(--ink); }
.sb-title small { display: block; font-size: 0.66rem; color: var(--brand); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-top: 2px; }

.sb-nav { flex: 1; overflow-y: auto; padding: 10px 10px 24px; }
.sb-nav::-webkit-scrollbar { width: 6px; }
.sb-nav::-webkit-scrollbar-thumb { background: #d7deea; }

/* Collapsible groups (dropdown) */
.sb-group { margin-bottom: 2px; }
.sb-group-head {
  width: 100%; display: flex; align-items: center; gap: 8px;
  background: none; border: 0; cursor: default; text-align: left;
  font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.13em;
  color: var(--muted); font-weight: 700;
  padding: 15px 10px 7px;
}
.sb-group-head .g-label { flex: 1; }
.sb-group-head .g-count {
  font-size: 0.6rem; background: var(--line-2); color: var(--muted);
  border-radius: 99px; padding: 1px 7px; font-weight: 700; letter-spacing: 0;
}
.sb-group-head .chev { width: 13px; height: 13px; flex: none; transition: transform 0.32s var(--ease); opacity: 0.55; }
.sb-group.collapsed .chev { transform: rotate(-90deg); }
.sb-group.has-active .g-label { color: var(--brand); }

.sb-group-items {
  display: flex; flex-direction: column; gap: 2px;
  overflow: hidden; max-height: 720px; opacity: 1;
  transition: max-height 0.34s var(--ease), opacity 0.22s ease, margin 0.34s var(--ease);
}
.sb-group.collapsed .sb-group-items { max-height: 0; opacity: 0; margin-top: -4px; }

/* Flat nav list (no collapse) — must not be height-clamped or it clips long menus */
.sb-nav-list { display: flex; flex-direction: column; gap: 2px; }

.sb-link {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 12px;
  color: var(--ink-soft); font-weight: 600; font-size: 0.88rem;
  cursor: pointer; text-decoration: none;
  transition: background var(--ease), color var(--ease), box-shadow var(--ease);
}
.sb-link:hover { background: #f9fafb; color: var(--ink); text-decoration: none; }
.sb-link.active {
  background: var(--brand-soft);
  color: var(--brand-strong); box-shadow: none; font-weight: 600;
}
/* slim brand bar marking the active page */
.sb-link.active::before {
  content: ""; position: absolute; left: 0; top: 22%; bottom: 22%;
  width: 3px; border-radius: 99px; background: var(--brand);
}
.sb-link .ico {
  width: 19px; height: 19px; flex: none; opacity: 0.8;
  transition: transform 0.3s var(--ease), color 0.25s, opacity 0.25s;
}
.sb-link:hover .ico { transform: scale(1.16) rotate(-4deg); opacity: 1; color: var(--brand); }
.sb-link.active .ico { color: var(--brand-strong); opacity: 1; animation: icoPop 0.36s var(--ease); }
.sb-link span { transition: transform 0.25s var(--ease); }
.sb-link:hover span { transform: translateX(2px); }
@keyframes icoPop { 0% { transform: scale(0.8); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }

.sb-foot { padding: 14px; border-top: 1px solid var(--line); background: var(--surface-2); }
.sb-user { display: flex; align-items: center; gap: 10px; }
.sb-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, var(--brand), var(--brand-strong));
  display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 0.82rem;
  flex: none;
}
.sb-user-meta { line-height: 1.15; overflow: hidden; }
.sb-user-name { font-size: 0.82rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
.sb-user-role { font-size: 0.68rem; color: var(--brand); text-transform: capitalize; }

/* ----- Main column ----- */
.main { grid-column: 2; display: flex; flex-direction: column; min-width: 0; }

.topbar {
  position: sticky; top: 0; z-index: 50;
  height: var(--topbar-h);
  display: flex; align-items: center; gap: 14px;
  padding: 0 22px;
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: saturate(150%) blur(8px);
  backdrop-filter: saturate(150%) blur(8px);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  /* position:sticky + backdrop-filter is a known Chromium bug: the element can
     fail to paint at all on first load (not just visually, no space reserved)
     until something forces a repaint (scroll/resize/reload). Forcing its own
     compositing layer up front prevents it from ever landing un-painted. */
  will-change: transform;
  transform: translateZ(0);
}
.topbar h1 { font-weight: 700; letter-spacing: -.01em; }
.tb-user { padding: 4px 8px 4px 4px; border-radius: var(--pill); border: 1px solid transparent; transition: background var(--ease), border-color var(--ease); }
.tb-user:hover { background: var(--surface-2); border-color: var(--line); }
.topbar h1 { font-size: 1.125rem; }
.topbar .crumb { color: var(--muted); font-size: 0.78rem; font-weight: 600; }
.topbar-spacer { flex: 1; }
.topbar-search {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--pill); padding: 7px 14px; min-width: 220px;
  color: var(--muted);
}
.topbar-search input { border: 0; background: transparent; outline: none; font-size: 0.85rem; width: 100%; color: var(--ink); }
.hamburger { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; background: none; border: 1px solid transparent; border-radius: 10px; cursor: pointer; color: var(--ink); transition: background var(--ease), border-color var(--ease); }
.hamburger:hover { background: var(--surface-2); border-color: var(--line); }
.hamburger .ico { transition: transform 0.3s var(--ease); }
.app.sb-collapsed .hamburger .ico { transform: rotate(90deg); }

.content { padding: 22px; flex: 1; width: 100%; min-width: 0; }

/* ====================================================== Components ====== */
/* Cards */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  min-width: 0;
  overflow: hidden;
}
.card-head {
  display: flex; align-items: center; gap: 12px;
  padding: 15px 18px; border-bottom: 1px solid var(--line-2);
}
.card-head h2, .card-head h3 { font-size: 1rem; font-weight: 600; }
.card-head .sub { color: var(--muted); font-size: 0.8125rem; font-weight: 500; }
.card-head .spacer { flex: 1; }
.card-body { padding: 18px; }
.card-body.flush { padding: 0; }

/* Page header */
.page-head { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.page-head .titles h1 { font-size: 1.5rem; }
.page-head .titles p { margin: 4px 0 0; color: var(--muted); font-size: 0.875rem; }
.page-head .spacer { flex: 1; }
.page-actions { display: flex; gap: 9px; flex-wrap: wrap; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 38px; padding: 8px 12px;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--surface); color: #374151;
  font-weight: 500; font-size: 0.875rem; cursor: pointer;
  transition: background-color var(--ease), border-color var(--ease), color var(--ease); white-space: nowrap;
}
.btn:hover { background: #f9fafb; border-color: #c3cad4; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled, .btn.is-busy { opacity: 0.6; cursor: not-allowed; }
.btn.primary {
  background: var(--brand);
  color: #fff; border-color: transparent;
  box-shadow: none;
}
.btn.primary:hover { background: var(--brand-strong); }
.btn.ghost { background: transparent; }
.btn.danger { color: var(--danger); border-color: #f0c2bd; background: var(--danger-soft); }
.btn.danger:hover { background: #fbdcd8; }
.btn.sm { min-height: 32px; padding: 5px 11px; font-size: 0.78rem; border-radius: 9px; }
.btn.icon { padding: 9px; min-width: 40px; }
.btn.dark { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn-export {
  padding: 8px 16px 8px 8px; font-weight: 600; border-width: 1px;
  transition: border-color var(--ease), color var(--ease), background-color var(--ease);
}
.btn-export .exp-ic { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; flex: none; color: #fff; }
.btn-export .exp-ic svg { width: 15px; height: 15px; }
.btn-export.accent-blue { background: linear-gradient(0deg, rgba(47,134,255,.07), rgba(47,134,255,.07)), var(--surface); border-color: rgba(11,102,228,.28); color: #0b66e4; }
.btn-export.accent-blue .exp-ic { background: linear-gradient(135deg, #2f86ff, #0b66e4); }
.btn-export.accent-green { background: linear-gradient(0deg, rgba(22,163,74,.07), rgba(22,163,74,.07)), var(--surface); border-color: rgba(21,128,61,.28); color: #15803d; }
.btn-export.accent-green .exp-ic { background: linear-gradient(135deg, #22c55e, #15803d); }
.btn-export.accent-blue:hover { border-color: #0b66e4; background: linear-gradient(0deg, rgba(47,134,255,.13), rgba(47,134,255,.13)), var(--surface); }
.btn-export.accent-green:hover { border-color: #15803d; background: linear-gradient(0deg, rgba(22,163,74,.13), rgba(22,163,74,.13)), var(--surface); }

.btn-upload-accent {
  background: linear-gradient(120deg, #2f86ff, #1d4ed8); color: #fff; border-color: transparent;
  font-weight: 700;
  transition: background var(--ease);
}
.btn-upload-accent svg { width: 16px; height: 16px; }
.btn-upload-accent:hover { background: linear-gradient(120deg, #1d4ed8, #1e40af); color: #fff; border-color: transparent; }
.btn-upload-accent:disabled { opacity: .6; }
.btn.dark:hover { background: #000; border-color: #000; color: #fff; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; }

/* Inputs */
.field { display: grid; gap: 6px; margin-bottom: 14px; }
/* .field's own display outranks the UA [hidden] rule, so hiding a field with
   el.hidden silently did nothing. Needed by every conditional form section. */
.field[hidden] { display: none; }
.r-opt { font-weight: 400; color: var(--muted); }
.r-date { position: relative; display: grid; }
.r-date input[type="date"] { position: absolute; right: 12px; bottom: 0; width: 0; height: 0; opacity: 0; pointer-events: none; }
.r-upload-row { display: flex; flex-wrap: wrap; gap: 8px; }
.label { font-size: 0.8125rem; color: var(--ink-soft); font-weight: 600; letter-spacing: 0.01em; }
.input, select.input, textarea.input {
  width: 100%; min-height: 38px;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  padding: 8px 12px; background: #fff; color: var(--ink);
  font-family: inherit; font-size: 0.875rem; outline: none;
  transition: border-color var(--ease), box-shadow var(--ease);
}
.input:focus, select.input:focus, textarea.input:focus {
  border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-ring); background: #fff;
}
.input::placeholder { color: #9aa6b8; }
textarea.input { min-height: 90px; resize: vertical; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 16px; }
.form-grid.cols-2 { grid-template-columns: repeat(2, 1fr); gap: 16px 18px; }
.form-grid.cols-2 .field { margin-bottom: 4px; }
@media (max-width: 640px) { .form-grid.cols-2 { grid-template-columns: 1fr; } }

/* Stat / KPI tiles — flat pastel pill (used app-wide except the Dashboard, which
   keeps its own icon-accented hero KPI tiles). Tone comes from the existing
   color:var(--ok|--danger|--warn) convention already applied inline to
   .stat-value by each page's tile() helper; :has() promotes that tone to the
   whole card's background so no per-page markup changes were needed. */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 24px; }
.stat {
  background: rgba(139, 92, 246, .12);
  border: 1px solid transparent; border-radius: var(--r-lg);
  padding: 16px 18px;
  position: relative; overflow: hidden;
}
.stat .stat-label { font-size: 0.82rem; font-weight: 700; letter-spacing: 0.01em; color: #6d28d9; opacity: .85; }
.stat .stat-value { font-size: 1.62rem; font-weight: 800; font-family: var(--font-mono); margin-top: 6px; letter-spacing: -0.02em; color: #6d28d9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat .stat-sub { font-size: 0.76rem; color: var(--muted); margin-top: 4px; }
.stat .stat-sub.up { color: var(--ok); } .stat .stat-sub.down { color: var(--danger); }
.stat .stat-icon {
  position: absolute; right: 14px; top: 14px; width: 30px; height: 30px;
  color: currentColor; opacity: 0.3; z-index: 1;
}
.stat:has(.stat-value[style*="--ok"])     { background: var(--ok-soft); }
.stat:has(.stat-value[style*="--ok"])     .stat-label { color: var(--ok); }
.stat:has(.stat-value[style*="--danger"]) { background: var(--danger-soft); }
.stat:has(.stat-value[style*="--danger"]) .stat-label { color: var(--danger); }
.stat:has(.stat-value[style*="--warn"])   { background: var(--warn-soft); }
.stat:has(.stat-value[style*="--warn"])   .stat-label { color: var(--warn); }

/* Tables */
.table-wrap { overflow-x: auto; width: 100%; }
table.tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.875rem; }
table.tbl th {
  text-align: left; padding: 12px 16px; position: sticky; top: 0;
  background: var(--surface-2); color: var(--muted); font-weight: 600;
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em;
  border-bottom: 1px solid var(--line); white-space: nowrap;
}
table.tbl td { padding: 12px 16px; border-bottom: 1px solid var(--line-2); vertical-align: middle; color: #374151; }
table.tbl tbody tr { transition: background var(--ease); }
table.tbl tbody tr:hover { background: #f9fafb; }
table.tbl tbody tr.clickable { cursor: pointer; }
table.tbl td.num, table.tbl th.num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.tbl-thumb { width: 40px; height: 40px; border-radius: 9px; object-fit: cover; border: 1px solid var(--line); background: var(--surface-2); }

/* Full grid lines (column + row dividers) — opt-in via .tbl-lines so it only
   affects tables that ask for it, not every .tbl across the app. */
table.tbl.tbl-lines th, table.tbl.tbl-lines td { border-right: 1px solid var(--line-2); }
table.tbl.tbl-lines th:last-child, table.tbl.tbl-lines td:last-child { border-right: none; }
table.tbl.tbl-lines td { border-bottom: 1px solid var(--line); }
.cell-strong { font-weight: 700; color: #111827c2; }
.prod-name-text {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 320px; display: inline-block; vertical-align: middle;
}
.cell-sub { color: var(--muted); font-size: 0.78rem; }

/* Pills / badges */
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: var(--pill);
  font-size: 0.72rem; font-weight: 700; line-height: 1.6;
  background: var(--line-2); color: var(--ink-soft); border: 1px solid transparent;
}
.pill.ok { background: var(--ok-soft); color: var(--ok); }
.pill.warn { background: var(--warn-soft); color: var(--warn); }
.pill.danger { background: var(--danger-soft); color: var(--danger); }
.pill.info { background: var(--info-soft); color: var(--info); }
.pill.brand { background: var(--brand-soft); color: var(--brand-strong); }
.pill.dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.id-pill {
  font-family: var(--font-mono); border: 1px solid #c8d8f6; background: #eef4ff;
  color: #123a80; border-radius: var(--pill); padding: 3px 9px; font-weight: 700; font-size: 0.74rem;
}

/* Empty / loading / error states */
.state { text-align: center; padding: 48px 20px; color: var(--muted); }
.state .state-icon { width: 46px; height: 46px; margin: 0 auto 12px; opacity: 0.5; }
.state h3 { color: var(--ink-soft); margin-bottom: 6px; }
.skeleton { background: linear-gradient(90deg, #eef2f8 25%, #f6f9fd 50%, #eef2f8 75%); background-size: 200% 100%; animation: shimmer 1.3s infinite; border-radius: 8px; }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.skel-row { height: 16px; margin: 10px 0; }

/* Toasts */
/* z-index sits ABOVE the modal overlay (10000) so validation errors raised from
   inside a dialog are never hidden behind its dark/blurred backdrop.
   Anchored TOP-RIGHT, the corner every large dashboard/storefront admin puts
   transient messages in. --toast-top is MEASURED in ui.js (topbar bottom + 12px
   when the header is on screen, 16px from the viewport edge when it isn't), so a
   scrolled-away or unpainted topbar can never leave the popup stranded in the
   middle of the page. column-reverse puts the NEWEST toast at the top: the
   message you just triggered always lands in the same spot, and an older one
   expiring below it never shifts it. */
.toast-host {
  position: fixed; top: var(--toast-top, 76px); right: 18px; bottom: auto; z-index: 12000;
  display: flex; flex-direction: column-reverse; align-items: flex-end; gap: 13px;
  max-width: calc(100vw - 36px); pointer-events: none;
}
/* Neutral white card; colour appears only where it carries meaning — the accent
   rail, the icon chip and the label. No tinted wash, no coloured glow: those read
   as "shaded" rather than crisp. Separation comes from a neutral elevation shadow,
   the way Linear / Stripe / GitHub do it. One custom property per tone, so a new
   outcome colour is a single rule. */
.toast {
  pointer-events: auto; cursor: pointer; position: relative; overflow: hidden;
  display: flex; align-items: flex-start; gap: 12px;
  /* Sizes to its text, with a floor that keeps short messages ("Saved") from
     collapsing into a chip, and a ceiling at a comfortable reading width. */
  width: max-content; min-width: 296px; max-width: min(430px, calc(100vw - 36px));
  padding: 14px 42px 15px 17px;
  border-radius: 13px; color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow:
    0 18px 40px -16px rgba(15, 23, 42, 0.26),
    0 6px 14px -10px rgba(15, 23, 42, 0.16);
  font-size: 0.875rem; line-height: 1.45;
  /* Own keyframe (not the modal's toastIn) so it enters from the top-right
     corner it now lives in. */
  animation: toastInTop 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Accent rail — full height, so the outcome reads before the text is parsed. */
.toast::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--toast-accent, var(--info));
}
.toast-ic {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px;
  display: grid; place-items: center;
  color: #fff; background: var(--toast-accent, var(--info));
}
.toast-ic svg { width: 17px; height: 17px; display: block; }
.toast-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; padding-top: 1px; }
.toast-title {
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--toast-accent, var(--info));
}
.toast-msg { min-width: 0; font-weight: 600; color: var(--ink); word-break: break-word; }
/* Explicit dismiss affordance; the whole card stays clickable too. */
.toast-x {
  position: absolute; top: 9px; right: 9px; width: 24px; height: 24px; padding: 0;
  border: 0; border-radius: 7px; background: none; color: var(--muted);
  font-size: 1.15rem; line-height: 1; cursor: pointer; display: grid; place-items: center;
  opacity: 0.45; transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.toast:hover .toast-x, .toast-x:focus-visible { opacity: 1; }
.toast-x:hover { background: rgba(15, 23, 42, 0.06); color: var(--ink); }
/* Time-remaining bar — pauses while the pointer is over the toast, matching the
   JS timer that also pauses on hover. */
.toast-bar {
  position: absolute; left: 0; bottom: 0; height: 2.5px; width: 100%;
  background: var(--toast-accent, var(--info)); opacity: 0.38; transform-origin: left center;
  animation: toastBar linear forwards; animation-duration: var(--toast-ms, 3200ms);
}
.toast:hover .toast-bar { animation-play-state: paused; }
/* One colour per outcome, so the tone alone tells you what happened:
   ok/success emerald · approved teal · error red · rejected rose
   warn amber · pending orange · info blue · submitted indigo · draft slate. */
.toast.ok, .toast.success { --toast-accent: var(--ok); }
.toast.approved  { --toast-accent: #0f766e; }
.toast.error     { --toast-accent: var(--danger); }
.toast.rejected  { --toast-accent: #be123c; }
.toast.warn      { --toast-accent: var(--warn); }
.toast.pending   { --toast-accent: #c2410c; }
.toast.info      { --toast-accent: var(--info); }
.toast.submitted { --toast-accent: #4338ca; }
.toast.draft     { --toast-accent: #475569; }
@keyframes toastIn { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes toastInTop { from { opacity: 0; transform: translate3d(18px, -10px, 0) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes toastBar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
/* Phones: full-width stack so the message never crowds the right edge. */
@media (max-width: 560px) {
  .toast-host { left: 12px; right: 12px; align-items: stretch; max-width: none; }
  .toast { width: auto; min-width: 0; max-width: none; }
}

/* ============================================================================
   Loaders — professional indicators for work that takes time.
   1) Slim top progress bar (auto-shown during SPA page navigation).
   2) Centered overlay spinner for blocking actions (PDF gen, long saves).
   ========================================================================== */
/* Top progress bar */
.top-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 400;
  pointer-events: none; opacity: 0; transition: opacity 0.25s ease;
}
.top-progress.show { opacity: 1; }
.top-progress .tp-fill {
  height: 100%; width: 0;
  background: linear-gradient(90deg, var(--brand), #00aaff, #f7931e);
  background-size: 200% 100%;
  box-shadow: 0 0 10px rgba(0, 170, 255, 0.5);
  border-radius: 0 3px 3px 0;
  transition: width 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  animation: tpSheen 1.4s linear infinite;
}
@keyframes tpSheen { 0% { background-position: 0 0; } 100% { background-position: 200% 0; } }

/* Full-screen boot loader — inline in every page's <body> so it paints during
   the hard-load gap (script download + auth verify) before the app chrome
   exists. SBShell.mount() fades it out once the shell is ready. */
.boot-loader {
  position: fixed; inset: 0; z-index: 500;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  background: var(--bg);
  transition: opacity 0.3s ease;
}
.boot-loader.hide { opacity: 0; pointer-events: none; }
.boot-label { font-size: 0.82rem; font-weight: 600; color: var(--muted); letter-spacing: 0.05em; }

/* In-content loader shown while the SPA router swaps pages */
.page-loading {
  min-height: min(52vh, 420px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  animation: pageLoadIn 0.3s ease;
}
@keyframes pageLoadIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .page-loading { animation: none; }
}

/* Centered overlay spinner */
.loader-overlay {
  position: fixed; inset: 0; z-index: 420;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  background: rgba(248, 250, 253, 0.72); backdrop-filter: blur(4px);
  opacity: 0; transition: opacity 0.22s ease;
}
.loader-overlay.show { opacity: 1; }
.loader-overlay.scoped { position: absolute; border-radius: var(--r); }
.spinner {
  width: 52px; height: 52px; position: relative;
  display: grid; place-items: center;
}
.spinner::before, .spinner::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 3px solid transparent;
}
.spinner::before {
  border-top-color: var(--brand); border-right-color: #00aaff;
  animation: spin 0.85s linear infinite;
}
.spinner::after {
  inset: 9px; border-bottom-color: #f7931e; border-left-color: var(--brand-strong);
  animation: spin 1.1s linear infinite reverse;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loader-msg { font-size: 0.86rem; font-weight: 600; color: var(--ink-soft, #475569); letter-spacing: 0.01em; }
@media (prefers-reduced-motion: reduce) {
  .spinner::before, .spinner::after, .top-progress .tp-fill { animation: none; }
}

/* Modal / drawer */
.modal-overlay {
  position: fixed; inset: 0; z-index: 120;
  background: rgba(15, 23, 42, 0.5); backdrop-filter: blur(3px);
  display: none; align-items: center; justify-content: center; padding: 20px;
}
.modal-overlay.open { display: flex; }
.modal {
  background: #fff; border-radius: var(--r-xl); width: min(680px, 100%);
  max-height: 90vh; box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; animation: toastIn 0.2s ease;
  overflow: visible; /* ensure sticky foot works; modal body handles scrolling */
}
.modal.wide { width: min(960px, 100%); }
/* The head/foot paint their own white background, so their square corners cover
   the modal's rounded corners — round them to match so the popup reads as one
   clean, professionally rounded sheet (top corners on the head, bottom on the foot). */
.modal-head { display: flex; align-items: center; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--line-2); position: sticky; top: 0; background: #fff; z-index: 1; border-top-left-radius: var(--r-xl); border-top-right-radius: var(--r-xl); }
.modal-head h2 { font-size: 1.08rem; }
.modal-head .spacer { flex: 1; }
.modal-close { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-2); cursor: pointer; color: var(--ink-soft); font-size: 1.1rem; }
.modal-close:hover { background: var(--brand-soft); border-color: var(--brand); }
.modal-body { padding: 22px; overflow: auto; flex: 1 1 auto; }
/* When there's no footer, the body is the last element — round its bottom corners
   so the modal's rounded shell isn't squared off by the body's background. */
.modal-body:last-child { border-bottom-left-radius: var(--r-xl); border-bottom-right-radius: var(--r-xl); }
.modal-foot { padding: 16px 22px; border-top: 1px solid var(--line-2); display: flex; justify-content: flex-end; align-items: center; gap: 12px; position: sticky; bottom: 0; background: #fff; flex: none; border-bottom-left-radius: var(--r-xl); border-bottom-right-radius: var(--r-xl); }
/* footers are usually passed as a single wrapper <div> holding the buttons —
   lay that wrapper out as a right-aligned flex row so buttons get proper spacing */
.modal-foot > div { display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex-wrap: wrap; flex: 1 1 auto; }
.modal-foot .btn { white-space: nowrap; }

/* Filter bar / toolbar */
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.toolbar .input, .toolbar select.input { min-height: 38px; min-width: 150px; width: auto; }
.toolbar .search { min-width: 240px; flex: 1; max-width: 360px; }
.chip-row { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  padding: 6px 13px; border: 1.5px solid var(--line); border-radius: var(--pill);
  background: #fff; color: var(--ink-soft); font-size: 0.78rem; font-weight: 700; cursor: pointer;
  transition: background var(--ease), color var(--ease), border-color var(--ease), transform .18s var(--ease);
}
.chip:hover { border-color: #c9d6ea; background: var(--surface-2); transform: translateY(-1px); }
.chip:active { transform: translateY(0) scale(0.96); }
.chip.active { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-strong); }

/* Definition list (detail views) */
.dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px 22px; }
.dl > div { min-width: 0; }
.dl dt { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: 700; margin-bottom: 3px; }
.dl dd { margin: 0; font-weight: 600; color: var(--ink); word-break: break-word; }

/* Account picker — the "deduct from / credit to account" control shared by the
   Reimbursement, Salary Advance, Pay Vendor, Top-Up and Order Payment forms. */
.acct-picker { display: block; }
.acct-picker-opt {
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--muted); background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--pill); padding: 1px 7px; margin-left: 4px;
}
.acct-picker-note { margin: 6px 0 0; font-size: 0.8rem; }
.acct-picker-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.acct-chip {
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px;
  padding: 7px 12px; cursor: pointer;
  border: 1px solid var(--line-strong); border-radius: var(--r-lg);
  background: var(--surface); color: #374151;
  font: inherit; font-size: 0.82rem; font-weight: 600; line-height: 1.25;
  transition: border-color var(--ease), background var(--ease), color var(--ease);
}
.acct-chip small { font-size: 0.7rem; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.acct-chip:hover { border-color: var(--brand); }
.acct-chip.is-on { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-strong); }
.acct-chip.is-on small { color: var(--brand); }
/* Short of the amount being entered — pickable, but flagged before you save. */
.acct-chip.is-short { border-style: dashed; }
.acct-chip.is-short small { color: var(--danger); }

/* Accounts page — balance panel, account cards and the inline money forms.
   The panel is a light surface like every other card on the page: the headline
   figure earns attention through size and an accent chip, not a dark slab. */
.acct-hero {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 20px;
  padding: 20px 24px; margin-bottom: 20px;
  border: 1px solid var(--line); border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.acct-hero-main { display: flex; align-items: center; gap: 16px; min-width: 0; }
.acct-hero-chip {
  flex: none; width: 46px; height: 46px; border-radius: 13px;
  display: grid; place-items: center;
  background: linear-gradient(140deg, #60a5fa, var(--brand)); color: #fff;
  box-shadow: 0 10px 20px -10px rgba(37, 99, 235, 0.7);
}
.acct-hero-chip svg { width: 22px; height: 22px; }
.acct-hero-text { min-width: 0; }
.acct-hero-label {
  display: block;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted);
}
.acct-hero-value {
  margin: 4px 0 0; color: var(--ink);
  font-size: clamp(1.6rem, 3.2vw, 2rem); font-weight: 800;
  letter-spacing: -0.025em; line-height: 1.1; font-variant-numeric: tabular-nums;
}
.acct-hero-sub { margin: 4px 0 0; font-size: 0.8rem; font-weight: 500; color: var(--muted); }
.acct-hero-side { display: flex; align-items: center; gap: 22px; }
/* Supporting figures — they fill the panel's middle and save a second glance. */
.acct-hero-stats { display: flex; gap: 26px; padding-right: 22px; border-right: 1px solid var(--line); }
.acct-hero-stat b {
  display: block; color: var(--ink); font-size: 1.2rem; font-weight: 800;
  line-height: 1.1; font-variant-numeric: tabular-nums;
}
.acct-hero-stat small {
  display: block; margin-top: 3px;
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--muted);
}
/* The one action on the panel, so it carries the brand fill. */
.acct-hero-btn {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 10px 18px; cursor: pointer;
  border: 1px solid var(--brand); border-radius: var(--pill);
  background: var(--brand); color: #fff;
  font: inherit; font-size: 0.85rem; font-weight: 700;
  box-shadow: 0 10px 20px -12px rgba(37, 99, 235, 0.8);
  transition: background var(--ease), border-color var(--ease), transform var(--ease);
}
.acct-hero-btn svg { width: 16px; height: 16px; }
.acct-hero-btn:hover { background: var(--brand-strong); border-color: var(--brand-strong); }
.acct-hero-btn:active { transform: translateY(1px); }

.acct-empty {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 6px; padding: 52px 24px;
  border: 1px dashed var(--line-strong); border-radius: 18px;
  background:
    radial-gradient(70% 110% at 50% 0%, var(--brand-soft) 0%, rgba(255, 255, 255, 0) 70%),
    var(--surface);
}
.acct-empty-ic {
  display: grid; place-items: center; width: 62px; height: 62px; margin-bottom: 8px;
  border-radius: 50%; background: var(--surface); color: var(--brand);
  box-shadow: 0 0 0 1px var(--line), 0 12px 26px -14px rgba(37, 99, 235, 0.7);
}
.acct-empty-ic svg { width: 26px; height: 26px; }
.acct-empty h3 { margin: 0; font-size: 1.06rem; font-weight: 700; color: var(--ink); }
.acct-empty p { margin: 0; max-width: 430px; font-size: 0.86rem; color: var(--muted); line-height: 1.55; }
.acct-empty .btn { margin-top: 14px; }

.acct-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; align-items: start; }
.acct-card {
  position: relative; overflow: hidden;
  border: 1px solid var(--line); border-radius: 16px;
  background: var(--surface); padding: 18px;
  transition: border-color var(--ease), box-shadow var(--ease), transform var(--ease);
}
/* Brand hairline along the top edge, brightening on hover. */
.acct-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--brand), #22d3ee);
  opacity: 0; transition: opacity var(--ease);
}
.acct-card:hover { border-color: #c7d7f5; box-shadow: 0 16px 32px -22px rgba(15, 35, 80, 0.55); transform: translateY(-2px); }
.acct-card:hover::before { opacity: 1; }
.acct-card.is-inactive { opacity: 0.6; }
.acct-card-top { display: flex; align-items: center; gap: 13px; }
.acct-badge {
  flex: none; width: 46px; height: 46px; border-radius: 14px;
  display: grid; place-items: center;
  background: linear-gradient(140deg, #60a5fa, var(--brand) 60%, #1e3a8a);
  color: #fff; font-weight: 800; font-size: 1.05rem;
  box-shadow: 0 10px 20px -12px rgba(37, 99, 235, 0.9);
}
.acct-card-id { min-width: 0; flex: 1; }
.acct-name {
  margin: 0; font-size: 0.96rem; font-weight: 700; color: var(--ink); letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.acct-sub {
  margin: 3px 0 0; font-size: 0.68rem; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.07em;
}
.acct-balance {
  margin: 0; flex: none; font-size: 1.22rem; font-weight: 800; color: var(--ink);
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}

/* Action strip — one row of equal columns however many actions a role sees. */
.acct-actions {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-2);
}
.acct-action {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
  padding: 10px 4px; border: 1px solid transparent; border-radius: 11px;
  background: transparent; color: var(--muted); cursor: pointer;
  font: inherit; font-size: 0.69rem; font-weight: 700; text-align: center; line-height: 1.1;
  transition: background var(--ease), color var(--ease), border-color var(--ease), transform var(--ease);
}
/* Each action wears its own icon chip, tinted by what it does — the strip is
   scannable by colour before a single label is read, and the tile stays quiet
   so four grey slabs don't compete with the balance above them. */
.acct-action svg {
  width: 34px; height: 34px; padding: 8px; box-sizing: border-box;
  border-radius: 50%; background: #eef2f7; color: #475569;
  transition: box-shadow var(--ease), filter var(--ease);
}
.acct-action[data-act="add-funds"] svg { background: #dcfce7; color: #15803d; }
.acct-action[data-act="transfer"] svg { background: #e0e7ff; color: #4338ca; }
.acct-action[data-act="history"] svg { background: #e2e8f0; color: #475569; }
.acct-action[data-act="statement"] svg { background: #fef3c7; color: #b45309; }
.acct-action[data-act="whatsapp"] svg { background: #d8f5e3; color: #128c7e; }
.acct-action:hover { background: var(--surface-2); border-color: var(--line); color: var(--ink); transform: translateY(-1px); }
.acct-action:hover svg { box-shadow: 0 8px 16px -10px rgba(15, 35, 80, 0.9); filter: saturate(1.15); }
.acct-action:active { transform: translateY(0); }

.acct-panel:empty { display: none; }
.acct-form {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px;
  margin-top: 14px; padding: 14px; border-radius: 12px;
  background: var(--surface-2); border: 1px solid var(--line);
}
.acct-form .field { margin: 0; min-width: 120px; }
.acct-form .field.grow { flex: 1 1 150px; }
.acct-form-btns { display: flex; gap: 8px; margin-left: auto; }

.acct-tx .acct-credit { color: var(--ok); font-weight: 700; }
.acct-tx .acct-debit { color: var(--danger); font-weight: 700; }
.acct-tx .acct-ref { display: block; color: var(--muted); font-size: 0.72rem; margin-top: 2px; }

@media (max-width: 560px) {
  .acct-hero { padding: 18px; }
  .acct-hero-side { width: 100%; flex-direction: column; align-items: stretch; gap: 16px; }
  .acct-hero-stats { padding-right: 0; border-right: 0; }
  .acct-hero-btn { width: 100%; justify-content: center; }
  .acct-actions { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); }
  .acct-form-btns { margin-left: 0; width: 100%; }
}

/* My Profile — identity header + fact tiles.
   The identity panel carries the avatar, name and role; the tiles below hold the
   hard account facts, one row of four on a wide card, 2x2 when it narrows. */
.profile-id {
  display: flex; align-items: center; gap: 18px;
  padding: 20px; margin-bottom: 18px;
  border: 1px solid var(--line); border-radius: var(--r-xl);
  background:
    radial-gradient(130% 150% at 0% 0%, var(--brand-soft) 0%, rgba(255, 255, 255, 0) 60%),
    var(--surface-2);
}
/* One quiet ring, one calm gradient. The previous version stacked a white
   collar, a hairline ring AND a heavy blue drop-glow, which read as a sticker
   floating off the card rather than part of it. */
.profile-avatar {
  position: relative; flex: none;
  width: 72px; height: 72px; border-radius: 50%;
  display: grid; place-items: center;
  color: #fff; font-size: 1.5rem; font-weight: 700; letter-spacing: 0.02em;
  background: linear-gradient(145deg, var(--brand) 0%, var(--brand-strong) 100%);
  box-shadow: 0 0 0 3px var(--surface), 0 0 0 4px var(--line);
}
/* Presence dot — reinforces the Status tile without replacing it. Inset far
   enough to sit ON the circle's edge; at right/bottom 2px it hung off the
   corner, because a dot's corner offset has to shrink with the curve. */
.profile-avatar::after {
  content: ""; position: absolute; right: 4px; bottom: 4px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--ok); box-shadow: 0 0 0 3px var(--surface);
}
.profile-avatar.is-inactive::after { background: var(--muted); }
.profile-id-text { min-width: 0; }
.profile-id-text h2 { margin: 0; font-size: 1.4rem; line-height: 1.2; letter-spacing: -0.015em; }
.profile-id-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 9px; }

/* Fixed 2x2 rather than auto-fit: with exactly four facts, auto-fit lands on a
   3+1 orphan at middling widths, and the balanced block also sits better
   against the taller Change Password card beside it. */
.profile-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.profile-facts .fact {
  display: flex; align-items: flex-start; gap: 11px; min-width: 0;
  padding: 13px 14px;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface);
  transition: border-color var(--ease), box-shadow var(--ease);
}
.profile-facts .fact:hover { border-color: var(--line-strong); box-shadow: var(--shadow-sm); }
.profile-facts .fact-ic {
  flex: none; width: 32px; height: 32px; border-radius: 9px;
  display: grid; place-items: center;
  background: var(--brand-soft); color: var(--brand);
}
.profile-facts .fact-ic svg { width: 16px; height: 16px; display: block; }
.profile-facts .fact-body { min-width: 0; }
.profile-facts dt {
  font-size: 0.67rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted); font-weight: 700; margin-bottom: 4px;
}
.profile-facts dd { margin: 0; font-size: 0.94rem; font-weight: 600; color: var(--ink); word-break: break-word; }

/* Password field with a Show/Hide reveal, and its live requirement checklist
   (My Profile). The reveal button sits inside the input's right padding. */
.pw-input { position: relative; }
.pw-input .input { padding-right: 58px; }
.pw-input button {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  border: none; background: none; cursor: pointer; padding: 4px 8px; border-radius: 6px;
  font: inherit; font-size: 0.72rem; font-weight: 700; color: var(--brand);
}
.pw-input button:hover { background: var(--brand-soft); }

.pw-reqs { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 7px; }
.pw-reqs li {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.8125rem; font-weight: 500; color: var(--muted);
  transition: color 0.15s ease;
}
.pw-reqs .pw-dot {
  position: relative; flex: none; width: 15px; height: 15px;
  border: 1.5px solid var(--line); border-radius: 50%;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.pw-reqs li.ok { color: var(--ok); }
.pw-reqs li.ok .pw-dot { background: var(--ok); border-color: var(--ok); }
.pw-reqs li.ok .pw-dot::after {
  content: ""; position: absolute; left: 4.5px; top: 1.5px;
  width: 3px; height: 7px; border: solid #fff; border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}

/* Two-column responsive grid */
.grid-2 { display: grid; grid-template-columns: 2fr 1fr; gap: 18px; align-items: start; }
.grid-cols { display: grid; gap: 18px; }

/* Pagination */
.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-top: 1px solid var(--line-2); flex-wrap: wrap; }
.pager .info { color: var(--muted); font-size: 0.8rem; }

/* Misc utils */
.muted { color: var(--muted); }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.right { text-align: right; }
.center { text-align: center; }
.flex { display: flex; } .flex.center { align-items: center; justify-content: center; }
.gap-8 { gap: 8px; } .gap-12 { gap: 12px; }
.mt-0 { margin-top: 0; } .mt-16 { margin-top: 16px; } .mb-0 { margin-bottom: 0; }
.hidden { display: none !important; }
.scrim { position: fixed; inset: 0; background: rgba(8, 11, 18, 0.5); z-index: 55; display: none; }
.scrim.open { display: block; }

/* Responsive styles moved to the bottom of the file to ensure correct override behavior */

/* Quotation review modal specific tweaks */
.qr-modal { width: min(640px, 96%); max-width: 920px; }
.qr-modal .modal-body { padding: 20px 24px; }
.qr-modal-body { display: flex; flex-direction: column; gap: 12px; }
.qr-grid-2x2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.qr-field { background: var(--surface-2); padding: 10px 14px; border-radius: 8px; border: 1px solid var(--line); }
.qr-field-label { display: block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em; color: #9ca3af; text-transform: uppercase; margin-bottom: 4px; }
.qr-field-value { font-size: 0.95rem; font-weight: 600; color: #111827; line-height: 1.4; }
.qr-field-value.large { font-size: 1.1rem; font-weight: 700; }
.qr-field-value.amount { font-size: 1.1rem; font-weight: 800; color: #111827; }
.qr-textarea-group label { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; color: #9ca3af; text-transform: uppercase; margin-bottom: 8px; }
.qr-textarea { width: 100%; min-height: 90px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; font-family: inherit; font-size: 0.9rem; resize: vertical; background: #fafbfc; color: var(--ink); transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.qr-textarea::placeholder { color: var(--line-strong); }
.qr-textarea:focus { outline: none; border-color: var(--brand); background: white; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); }

/* Header specific tweaks for qr-modal */
.qr-modal .modal-title-wrapper { display: flex; flex-direction: column; gap: 4px; }
.qr-modal .modal-head h2 { font-size: 1.25rem; font-weight: 700; color: #111827; margin: 0; line-height: 1.2; }
.qr-modal .modal-subtitle { font-size: 0.85rem; color: #6b7280; margin: 0; line-height: 1.4; font-weight: 400; text-transform: none; letter-spacing: normal; }
.qr-modal .modal-close { background: transparent; border: 1px solid var(--line); border-radius: 50%; width: 32px; height: 32px; font-size: 1.15rem; color: #9ca3af; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s ease; padding: 0 0 2px 0; line-height: 1; }
.qr-modal .modal-close:hover { background: var(--line-2); color: var(--ink); border-color: var(--line-strong); }

/* Footer layout for qr-modal */
.qr-modal .modal-foot { display: flex; justify-content: space-between; align-items: center; padding: 14px 24px; border-top: 1px solid #eef2f8; }
.qr-modal .qr-foot-left { display: flex; gap: 8px; }
.qr-modal .qr-foot-right { display: flex; gap: 12px; }
.qr-modal .qr-icon-btn { width: 40px; height: 40px; border-radius: 8px; border: 1px solid var(--line); background: white; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--muted); transition: all 0.2s ease; flex-shrink: 0; margin: 0; }
.qr-modal .qr-icon-btn:hover { background: var(--surface-2); color: var(--brand); border-color: var(--line-strong); }
.qr-modal .qr-icon-btn svg { width: 18px; height: 18px; }

@media (max-width: 720px) {
  .qr-modal { width: 96%; border-radius: 12px; }
  .qr-modal .qr-grid-2x2 { grid-template-columns: 1fr; }
  .qr-grid-2x2 { grid-template-columns: 1fr; }
  .modal { width: 96%; }
}

/* ============================================ Dashboard (ServerFlow) === */
.welcome {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%); border: 1px solid var(--line); border-radius: var(--r-xl);
  padding: 13px 22px; box-shadow: var(--shadow-sm); margin-bottom: 20px;
}
.welcome::after { content: ""; position: absolute; right: -40px; top: -60px; width: 240px; height: 240px; border-radius: 50%;
  background: radial-gradient(circle, rgba(37,99,235,.06), transparent 68%); pointer-events: none; }
.welcome-logo {
  position: relative; flex: none; width: max-content; min-width: 240px; max-width: 480px; min-height: 64px;
  background: linear-gradient(135deg, #ffffff, #eef3fa, #e8f1ff);
  background-size: 200% 200%;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  display: grid; place-items: center; overflow: hidden; padding: 10px 18px;
  box-shadow: 0 0 0 rgba(11,102,228,0);
  opacity: 0;
  animation: logoGlow 3.6s ease-in-out infinite, meshMove 10s ease infinite alternate, containerIntro 2.2s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
  transition: transform 0.45s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.45s ease, border-color 0.45s ease;
}
.welcome-logo:hover {
  transform: translateY(-5px) scale(1.015);
  box-shadow: 0 20px 42px rgba(11, 102, 228, 0.12), 0 0 30px rgba(0, 170, 255, 0.16);
  border-color: rgba(0, 170, 255, 0.35);
}
/* moving diagonal sheen sweep */
.welcome-logo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 28%, rgba(11,102,228,0.16) 46%, rgba(255,255,255,0.55) 50%, rgba(247,147,30,0.14) 54%, transparent 72%);
  transform: translateX(-130%); animation: logoSheen 3.4s ease-in-out infinite;
}
.welcome-logo img { position: relative; z-index: 1; max-width: 100%; max-height: 100%; object-fit: contain; }
.welcome-logo .wl-img { width: 100%; height: 100%; padding: 6px; }
.wl-lockup { position: relative; z-index: 1; display: flex; align-items: center; gap: 14px; }
.wl-mark-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  -webkit-box-reflect: below 2px linear-gradient(transparent 55%, rgba(255, 255, 255, 0.12));
  opacity: 0;
  transform: scale(0.3) rotate(-15deg);
  animation: wlMarkIntro 1.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.4s forwards, logoFloat 4s ease-in-out infinite 1.9s;
}
.wl-mark-glow {
  position: absolute;
  top: 50%; left: 50%;
  width: 70px; height: 70px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 170, 255, 0.5) 0%, rgba(11, 102, 228, 0.2) 50%, transparent 70%);
  filter: blur(12px);
  z-index: 0;
  pointer-events: none;
  animation: auraPulse 3s ease-in-out infinite alternate;
}
.wl-mark-image-container {
  position: relative;
  z-index: 1;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.5);
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.3);
}
.wl-mark-image-container::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, 0.75) 50%, transparent 65%);
  transform: translateX(-150%) skewX(-25deg);
  animation: markGlint 4s ease-in-out infinite;
  pointer-events: none;
  mix-blend-mode: overlay;
  z-index: 2;
}
.wl-mark { width: clamp(42px, 4vw, 58px); height: clamp(42px, 4vw, 58px); flex: none; filter: drop-shadow(0 4px 8px rgba(11,102,228,0.18)); }
.welcome-logo .wl-text {
  position: relative; z-index: 1; font-family: var(--font-mono); font-weight: 800; letter-spacing: .18em;
  font-size: clamp(1rem, 2.2vw, 1.5rem);
  background: linear-gradient(90deg, var(--brand-strong), var(--brand), #00aaff, #f7931e, var(--brand-strong));
  background-size: 280% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  display: inline-block;
  width: max-content;
  white-space: nowrap;
  opacity: 0;
  filter: blur(8px);
  transform: translateX(-6px);
  animation: wlReveal 1.2s cubic-bezier(0.19, 1, 0.22, 1) 2s forwards, wlShimmer 5s linear infinite;
}
@keyframes logoSheen { 0% { transform: translateX(-130%); } 55%, 100% { transform: translateX(130%); } }
@keyframes logoFloat { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-4px) scale(1.025); } }
@keyframes logoGlow { 0%, 100% { box-shadow: 0 0 0 rgba(11,102,228,0); }  }
@keyframes wlShimmer { to { background-position: 280% 0; } }
@keyframes auraPulse {
  0% { transform: translate(-50%, -50%) scale(0.85); opacity: 0.55; }
  100% { transform: translate(-50%, -50%) scale(1.15); opacity: 0.95; filter: blur(15px); }
}
@keyframes markGlint {
  0% { transform: translateX(-150%) skewX(-25deg); }
  25%, 100% { transform: translateX(150%) skewX(-25deg); }
}
@keyframes meshMove {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}
@keyframes containerIntro {
  0% {
    opacity: 0;
    transform: scale(0.95);
    border-color: rgba(11, 102, 228, 0.1);
  }
  60% {
    border-color: rgba(0, 170, 255, 0.6);
    box-shadow: 0 0 35px rgba(0, 170, 255, 0.25);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes wlMarkIntro {
  0% {
    opacity: 0;
    transform: scale(0.3) rotate(-15deg);
    filter: brightness(3) blur(4px);
  }
  50% {
    filter: brightness(1.8) blur(0);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
    filter: brightness(1) blur(0);
  }
}
@keyframes wlReveal {
  0% { opacity: 0; filter: blur(8px); transform: translateX(-6px); }
  100% { opacity: 1; filter: blur(0); transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .welcome-logo, .welcome-logo::after, .welcome-logo img, .welcome-logo .wl-text, .wl-mark-wrapper { animation: none; }
  /* The reveal animations are what un-hide the logo/name — with motion off, pin
     them to their final visible state so nothing stays invisible on any laptop. */
  .welcome-logo, .wl-mark-wrapper { opacity: 1; transform: none; }
  .welcome-logo .wl-text { opacity: 1; filter: none; transform: none; }
}
.welcome-body { position: relative; z-index: 1; flex: 1; min-width: 220px; }
.welcome-body h1 { font-size: 1.5rem; font-weight: 800; letter-spacing: -.015em; }
.welcome-body p { margin: 4px 0 0; color: var(--muted); }
/* margin-left:auto keeps the date pinned to the right even when it's forced
   onto its own wrapped line at in-between (tablet) widths — without it, a
   wrapped flex item falls back to the start of its line and looks orphaned. */
.welcome-meta { position: relative; z-index: 1; text-align: right; margin-left: auto; }
.welcome-meta .date { color: var(--muted); font-size: .85rem; white-space: nowrap; }

/* Dashboard segmented tabs (Storefront / Operations) — compact, content-sized on
   desktop/tablet; only stretches to fill the row on phones (see mobile query). */
.dash-tabs-wrap { margin-bottom: 18px; }
.dash-tabs {
  display: inline-flex; flex-wrap: nowrap; gap: 4px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--pill); padding: 4px;
}
.dash-tabs .chip {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 9px 18px;
  border: 1.5px solid transparent;
  background: transparent; color: var(--ink-soft); text-align: center; white-space: nowrap;
  line-height: 1.25;
}
.dash-tabs .chip svg { width: 15px; height: 15px; flex: none; opacity: .8; transition: opacity var(--ease), color var(--ease); }
.dash-tabs .chip[data-tab="storefront"] svg { color: #2563eb; }
.dash-tabs .chip[data-tab="operations"] svg { color: #7c3aed; }
.dash-tabs .chip:not(.active):hover { background: rgba(37,99,235,.07); transform: none; }
.dash-tabs .chip[data-tab="operations"]:not(.active):hover { background: rgba(124,58,237,.08); }
.dash-tabs .chip.active { border-color: transparent; box-shadow: 0 4px 14px rgba(37,99,235,.25); color: #fff; }
.dash-tabs .chip.active svg { opacity: 1; color: #fff; }
.dash-tabs .chip[data-tab="storefront"].active { background: linear-gradient(135deg, #2f86ff, #1d4ed8); }
.dash-tabs .chip[data-tab="operations"].active { background: linear-gradient(135deg, #a78bfa, #7c3aed); box-shadow: 0 4px 14px rgba(124,58,237,.28); }
.dash-tabs .chip:active { transform: scale(0.98); }

.dash-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: start; }
.dash-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.dash-grid > .card { margin: 0; }
/* !important overrides the inline grid-template-columns set in dashboard.js so rows actually stack */
@media (max-width: 1200px) { .dash-grid, .dash-grid.cols-2 { grid-template-columns: 1fr 1fr !important; } }
@media (max-width: 820px) { .dash-grid, .dash-grid.cols-2 { grid-template-columns: 1fr !important; } }

/* mini summary tiles with colored icon chips */
.mini-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mini-tile { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; background: var(--surface-2); }
.ic { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; color: #fff; flex: none; }
.ic svg { width: 20px; height: 20px; }
.mini-tile .mt-label { font-size: .76rem; color: var(--muted); font-weight: 600; }
.mini-tile .mt-value { font-size: 1.5rem; font-weight: 800; font-family: var(--font-mono); line-height: 1; margin-top: 3px; }
/* Icon badges start soft/light-tinted; hovering the card reveals the full accent
   colour (the Dashboard keeps its original always-vivid icon badges, restored below). */
.ic { transition: background var(--ease), color var(--ease); }
.ic.blue   { background: rgba(47,134,255,.14);  color: #0b66e4; } .ic.green  { background: rgba(46,204,113,.16);  color: #15a85a; }
.ic.purple { background: rgba(139,92,246,.14);  color: #6d28d9; } .ic.orange { background: rgba(251,146,60,.16);  color: #ea7317; }
.ic.teal   { background: rgba(20,184,166,.15);  color: #0d9488; } .ic.pink   { background: rgba(244,114,182,.16); color: #db2777; }
.metric:hover .ic.blue   { background: linear-gradient(135deg,#2f86ff,#0b66e4); color: #fff; }
.metric:hover .ic.green  { background: linear-gradient(135deg,#2ecc71,#15a85a); color: #fff; }
.metric:hover .ic.purple { background: linear-gradient(135deg,#8b5cf6,#6d28d9); color: #fff; }
.metric:hover .ic.orange { background: linear-gradient(135deg,#fb923c,#ea7317); color: #fff; }
.metric:hover .ic.teal   { background: linear-gradient(135deg,#14b8a6,#0d9488); color: #fff; }
.metric:hover .ic.pink   { background: linear-gradient(135deg,#f472b6,#db2777); color: #fff; }
/* Dashboard opt-out: its metric-row / mini-tiles / quick-action icons keep the original vivid look, unconditionally. */
#dashboardView .ic.blue   { background: linear-gradient(135deg,#2f86ff,#0b66e4)  !important; color: #fff !important; }
#dashboardView .ic.green  { background: linear-gradient(135deg,#2ecc71,#15a85a) !important; color: #fff !important; }
#dashboardView .ic.purple { background: linear-gradient(135deg,#8b5cf6,#6d28d9) !important; color: #fff !important; }
#dashboardView .ic.orange { background: linear-gradient(135deg,#fb923c,#ea7317) !important; color: #fff !important; }
#dashboardView .ic.teal   { background: linear-gradient(135deg,#14b8a6,#0d9488) !important; color: #fff !important; }
#dashboardView .ic.pink   { background: linear-gradient(135deg,#f472b6,#db2777) !important; color: #fff !important; }

/* soft KPI boxes (Monthly KPI / Assessment) */
.kpi-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.kpi-box { border-radius: var(--r); padding: 13px 15px; border: 1px solid var(--line); }
.kpi-box .kb-label { font-size: .78rem; font-weight: 600; }
.kpi-box .kb-value { font-size: 1.3rem; font-weight: 800; margin-top: 4px; font-family: var(--font-mono); }
.kpi-box .kb-sub { font-size: .74rem; color: var(--muted); margin-top: 2px; }
/* Clean cards: no filled background — colour lives on the value only */
.kpi-box.green, .kpi-box.red, .kpi-box.blue, .kpi-box.purple, .kpi-box.amber { background: var(--surface); }
.kpi-box.green .kb-value { color: var(--ok); }
.kpi-box.red .kb-value { color: var(--danger); }
.kpi-box.blue .kb-value { color: var(--brand-strong); }
.kpi-box.purple .kb-value { color: #6d28d9; }
.kpi-box.amber .kb-value { color: var(--warn); }

/* status grid (Order Status) */
.status-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.status-cell { border-radius: var(--r); padding: 12px; border: 1px solid var(--line); position: relative; }
.status-cell .sc-label { font-size: .76rem; color: var(--muted); font-weight: 600; }
.status-cell .sc-value { font-size: 1.5rem; font-weight: 800; font-family: var(--font-mono); margin-top: 4px; }

/* progress bars */
.bar { height: 7px; border-radius: 99px; background: var(--line-2); overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--brand); border-radius: 99px; }
.bar.green > span { background: #2ecc71; } .bar.red > span { background: #ef4444; } .bar.amber > span { background: #f59e0b; }
.barrow { display: flex; align-items: center; gap: 10px; margin: 9px 0; }
.barrow .b-label { flex: 1; min-width: 0; font-weight: 600; }
.barrow .b-val { font-family: var(--font-mono); font-weight: 700; white-space: nowrap; }

/* quick actions */
.qa { display: flex; align-items: center; gap: 12px; padding: 13px 15px; border: 1px solid var(--line); border-radius: var(--r); cursor: pointer; transition: all var(--ease); margin-bottom: 11px; }
.qa:hover { border-color: var(--brand); background: var(--brand-soft); }
.qa:hover .ic { transform: scale(1.08) rotate(-3deg); box-shadow: 0 4px 12px rgba(11, 102, 228, 0.2); }
.qa .ic { width: 38px; height: 38px; transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease); }
.qa .qa-label { font-weight: 700; flex: 1; }
.qa .plus { color: var(--brand); font-size: 1.3rem; font-weight: 700; }

/* activity feed */
.feed-item { display: flex; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line-2); }
.feed-item:last-child { border-bottom: 0; }
.feed-dot { width: 30px; height: 30px; border-radius: 50%; background: var(--brand-soft); color: var(--brand-strong); display: grid; place-items: center; flex: none; }
.feed-dot svg { width: 15px; height: 15px; }

/* attendance pill row */
.att-tiles { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-bottom: 14px; }
.att-tile { border-radius: var(--r); padding: 11px; text-align: center; border: 1px solid var(--line); }
.att-tile .at-v { font-size: 1.4rem; font-weight: 800; font-family: var(--font-mono); }
.att-tile.present { background: var(--ok-soft); color: var(--ok); } .att-tile.absent { background: var(--danger-soft); color: var(--danger); }
.att-tile.leave { background: var(--info-soft); color: var(--info); } .att-tile.holiday { background: var(--warn-soft); color: var(--warn); }

/* week time grid */
.week-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 4px; }
.week-cell { text-align: center; border: 1px solid var(--line-2); border-radius: 8px; padding: 6px 2px; }
.week-cell .wd { font-size: .64rem; color: var(--muted); font-weight: 700; }
.week-cell .wt { font-size: .68rem; font-family: var(--font-mono); margin-top: 2px; }

/* connection chip in topbar */
.conn-chip { display: inline-flex; align-items: center; gap: 7px; font-size: .76rem; font-weight: 700; color: var(--ok);
  background: var(--ok-soft); border: 1px solid rgba(16,185,129,.24); padding: 5px 11px 5px 10px; border-radius: var(--pill); }
.conn-chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px rgba(16,185,129,.18); animation: connPulse 2.2s ease-in-out infinite; }
.conn-chip.off { color: var(--danger); background: var(--danger-soft); border-color: rgba(239,68,68,.24); }
.conn-chip.off::before { background: var(--danger); box-shadow: 0 0 0 3px rgba(239,68,68,.18); animation: none; }
@keyframes connPulse { 0%,100% { box-shadow: 0 0 0 2px rgba(16,185,129,.22); } 50% { box-shadow: 0 0 0 5px rgba(16,185,129,0); } }

/* ===================================== notifications bell + dropdown ===== */
.nbell-wrap { position: relative; display: inline-flex; }
.nbell-btn { position: relative; }
.nbell-wrap.is-open .nbell-btn { background: var(--brand-soft); border-color: var(--brand-ring); color: var(--brand-strong); }
.nbell-badge {
  position: absolute; top: -4px; right: -4px; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: var(--pill); background: var(--danger); color: #fff; font-size: .64rem; font-weight: 800;
  line-height: 17px; text-align: center; box-shadow: 0 0 0 2px var(--surface);
}
.nbell-panel {
  position: absolute; top: calc(100% + 10px); right: 0; width: min(360px, calc(100vw - 32px));
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg, 0 12px 32px rgba(15,23,42,.16)); z-index: 60; overflow: hidden;
  animation: nbellIn .14s ease;
}
@keyframes nbellIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.nbell-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line-2, var(--line)); }
.nbell-title { font-weight: 800; font-size: .88rem; flex: 1; }
.nbell-readall { border: 0; background: none; color: var(--brand); font-size: .76rem; font-weight: 700; cursor: pointer; padding: 2px 4px; border-radius: 6px; }
.nbell-readall:hover { background: var(--brand-soft); }
.nbell-list { max-height: min(60vh, 380px); overflow-y: auto; }
.nbell-empty { padding: 26px 16px; text-align: center; color: var(--muted); font-size: .82rem; }
.nbell-item {
  width: 100%; display: flex; gap: 10px; align-items: flex-start; text-align: left; cursor: pointer;
  padding: 11px 14px; border: 0; border-bottom: 1px solid var(--line-2, var(--line)); background: none; font: inherit; color: inherit;
}
.nbell-item:last-child { border-bottom: 0; }
.nbell-item:hover { background: var(--surface-2); }
.nbell-item.is-unread { background: var(--brand-soft); }
.nbell-item.is-unread:hover { background: var(--brand-soft); filter: brightness(.98); }
.nbell-dot { flex: 0 0 auto; width: 7px; height: 7px; margin-top: 6px; border-radius: 50%; background: var(--brand); }
.nbell-item-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nbell-item-title { font-weight: 700; font-size: .83rem; color: var(--ink); }
.nbell-item-msg { font-size: .79rem; color: var(--ink-soft); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.nbell-item-time { font-size: .72rem; color: var(--muted); }
.nbell-foot { display: block; padding: 11px 14px; text-align: center; font-size: .8rem; font-weight: 700; color: var(--brand); border-top: 1px solid var(--line-2, var(--line)); text-decoration: none; }
.nbell-foot:hover { background: var(--surface-2); }

/* ============================================ Catalog (storefront) ===== */
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.product-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; cursor: pointer; transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease);
  display: flex; flex-direction: column;
}
.product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: #c9d6ea; }
.product-media { aspect-ratio: 4 / 3; background: var(--surface-2); display: grid; place-items: center; overflow: hidden; position: relative; }
.product-media img { width: 100%; height: 100%; object-fit: cover; }
.product-media .ph { color: #c2ccdc; font-family: var(--font-mono); font-size: 0.8rem; }
.product-badge { position: absolute; top: 10px; left: 10px; }
.product-body { padding: 13px 14px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.product-brand { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 700; }
.product-name { font-weight: 700; font-size: 0.88rem; color: var(--ink); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.product-price { display: flex; align-items: baseline; gap: 8px; margin-top: auto; padding-top: 6px; }
.product-price .now { font-family: var(--font-mono); font-weight: 800; font-size: 1.05rem; color: var(--brand-strong); }
.product-price .was { font-size: 0.78rem; color: var(--muted); text-decoration: line-through; }
.product-meta-row { display: flex; align-items: center; gap: 8px; font-size: 0.72rem; color: var(--muted); }

/* =================================================== Login page ======== */
body.login-page {
  background:
    radial-gradient(900px 600px at 14% 18%, rgba(59,130,246,0.30), transparent 60%),
    radial-gradient(820px 620px at 86% 84%, rgba(124,58,237,0.26), transparent 60%),
    linear-gradient(135deg, #0a1226 0%, #0f1b3a 46%, #1b1145 100%);
  min-height: 100vh; display: grid; place-items: center; padding: 24px;
  position: relative; overflow: hidden;
}
body.login-page::before, body.login-page::after {
  content: ""; position: fixed; border-radius: 50%; filter: blur(70px); opacity: 0.55; z-index: 0; pointer-events: none;
}
body.login-page::before { width: 480px; height: 480px; top: -130px; left: -120px;
  background: radial-gradient(circle, #2563eb, transparent 70%); animation: loginFloat 15s ease-in-out infinite; }
body.login-page::after { width: 540px; height: 540px; bottom: -170px; right: -150px;
  background: radial-gradient(circle, #7c3aed, transparent 70%); animation: loginFloat 19s ease-in-out infinite reverse; }
@keyframes loginFloat { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(36px, 28px) scale(1.06); } }
@media (prefers-reduced-motion: reduce) { body.login-page::before, body.login-page::after { animation: none; } }
.login-card {
  width: min(420px, 100%);
  position: relative; z-index: 1;
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  padding: 34px 30px;
  position: relative; overflow: hidden;
}
.login-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--brand), var(--neon)); box-shadow: var(--neon-glow);
}
.login-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.login-brand .sb-logo { width: 46px; height: 46px; font-size: 19px; }
.login-brand h1 { font-size: 1.2rem; }
.login-brand small { display: block; color: var(--brand); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; }
.login-msg { padding: 10px 13px; border-radius: 10px; font-size: 0.82rem; font-weight: 600; margin-bottom: 14px; display: none; }
.login-msg.show { display: block; }
.login-msg.error { background: var(--danger-soft); color: var(--danger); }
.login-msg.ok { background: var(--ok-soft); color: var(--ok); }
.login-foot { margin-top: 18px; text-align: center; color: var(--muted); font-size: 0.78rem; }

/* ============================================ Form / tabs helpers ====== */
.field.full { grid-column: 1 / -1; }
.field .hint { font-size: 0.72rem; color: var(--muted); }
.chk { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink-soft); cursor: pointer; user-select: none; }
.chk input { width: 17px; height: 17px; accent-color: var(--brand); }
.static-val { padding: 9px 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; font-weight: 600; color: var(--ink); min-height: 42px; display: flex; align-items: center; }

.tabs { display: inline-flex; gap: 4px; padding: 4px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.tab { border: 0; background: transparent; color: var(--ink-soft); font-weight: 700; font-size: 0.82rem; padding: 8px 15px; border-radius: 9px; cursor: pointer; transition: all var(--ease); white-space: nowrap; }
.tab:hover { color: var(--ink); background: #eef3fb; }
.tab.active { background: linear-gradient(120deg, var(--brand), var(--brand-strong)); color: #fff; }

/* media / file thumbnails in detail + upload previews */
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.media-grid a, .media-grid .media-thumb { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; aspect-ratio: 1; background: var(--surface-2); display: grid; place-items: center; }
.media-grid img { width: 100%; height: 100%; object-fit: cover; }
.timeline { position: relative; padding-left: 18px; }
.timeline::before { content: ""; position: absolute; left: 4px; top: 4px; bottom: 4px; width: 2px; background: var(--line); }
.timeline-item { position: relative; padding: 0 0 16px 14px; }
.timeline-item::before { content: ""; position: absolute; left: -10px; top: 4px; width: 9px; height: 9px; border-radius: 50%; background: var(--brand); border: 2px solid #fff; box-shadow: 0 0 0 2px var(--brand-soft); }
.chat-thread { display: flex; flex-direction: column; gap: 10px; max-height: 52vh; overflow-y: auto; padding: 6px 2px; }
.chat-msg { max-width: 78%; padding: 9px 13px; border-radius: 13px; font-size: 0.86rem; line-height: 1.4; }
.chat-msg .meta { font-size: 0.68rem; opacity: 0.7; margin-top: 4px; }
.chat-msg.them { align-self: flex-start; background: var(--surface-2); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.chat-msg.me { align-self: flex-end; background: linear-gradient(120deg, var(--brand), var(--brand-strong)); color: #fff; border-bottom-right-radius: 4px; }

/* ------------------------------------------------------- Quotations page */
.qt-filters .qt-filter-body { display: flex; flex-direction: column; gap: 18px; padding: 18px; }
.qt-filters .field { margin-bottom: 0; }
.qt-filters .field .label { margin-bottom: 2px; }
.qt-filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px 16px;
  align-items: end;
}
.qt-end-row { display: flex; gap: 8px; align-items: stretch; }
.qt-end-row .input { flex: 1; min-width: 0; }

/* Icon-only action buttons (view / convert / edit / delete / reset) */
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0; flex: 0 0 auto;
  border: 1px solid var(--line); border-radius: 9px;
  background: var(--surface); color: var(--muted); cursor: pointer;
  transition: background var(--ease), color var(--ease), border-color var(--ease), transform .12s ease;
}
.icon-btn svg { width: 17px; height: 17px; display: block; }
.icon-btn:active { transform: translateY(0); }
.icon-btn.view:hover    { color: var(--ok);     border-color: #b6e7cc; background: var(--ok-soft); }
.icon-btn.convert:hover { color: var(--info);   border-color: #bcd9fb; background: var(--info-soft); }
.icon-btn.edit:hover    { color: var(--warn);   border-color: #f2dcae; background: var(--warn-soft); }
.icon-btn.del:hover     { color: var(--danger); border-color: #f0c2bd; background: var(--danger-soft); }
.qt-reset { width: 44px; height: auto; align-self: stretch; }
.qt-reset:hover { color: var(--brand); border-color: var(--brand-ring); background: var(--brand-soft); }

.qt-actions { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: nowrap; }
.icon-btn.is-disabled { opacity: 0.4; cursor: not-allowed; }
.icon-btn.is-disabled:hover { transform: none; box-shadow: none; color: var(--muted); border-color: var(--line); background: var(--surface); }

/* Inline icons inside text buttons (Download / Share) */
.btn > svg { width: 16px; height: 16px; flex: 0 0 auto; }

/* Download / Share option menus */
.qmenu { display: flex; flex-direction: column; gap: 8px; }
.qmenu-item {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); cursor: pointer; transition: all var(--ease);
}
.qmenu-item:hover { border-color: var(--brand-ring); background: var(--brand-soft); transform: translateY(-1px); }
.qmenu-ic { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: 0 0 auto; border-radius: 10px; background: var(--surface-2); color: var(--brand-strong); }
.qmenu-ic svg { width: 20px; height: 20px; }
.qmenu-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.qmenu-t { font-weight: 700; color: var(--ink); font-size: 0.9rem; }
.qmenu-s { font-size: 0.76rem; color: var(--muted); }

/* Server-quotation form extras */
.qsq-quoteno { color: var(--brand-strong); font-weight: 700; margin-bottom: 10px; }
.qsq-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); font-weight: 600; color: var(--ink-soft); cursor: pointer; }
.qsq-company { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--surface-2); font-size: 0.84rem; color: var(--ink-soft); display: flex; flex-direction: column; gap: 3px; }
.qsq-company b { color: var(--ink); }

/* "Payment not complete" gate shown when a quotation is converted to a tax
   invoice before the order is fully paid. */
.qsq-gate-lead { margin: 0 0 14px; font-size: 0.87rem; line-height: 1.55; color: var(--ink-soft); }
.qsq-gate-rows { border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); padding: 8px 12px; }
.qsq-gate-row { display: flex; justify-content: space-between; gap: 14px; padding: 4px 0; font-size: 0.84rem; }
.qsq-gate-row span { color: var(--muted); }
.qsq-gate-bar { height: 8px; border-radius: var(--pill); background: var(--line-2); overflow: hidden; margin: 14px 0 5px; }
.qsq-gate-fill { height: 100%; border-radius: var(--pill); background: linear-gradient(90deg, var(--warn), #f59e0b); }
.qsq-gate-pct { font-size: 0.76rem; font-weight: 700; color: var(--warn); }
.qsq-gate-note { margin: 12px 0 0; font-size: 0.8rem; color: var(--muted); }

/* Quotation → order → payment → invoice chain, shown when a link is missing.
   done = green tick · blocked = the amber link that stops us · wait = greyed. */
.qchain { display: flex; flex-direction: column; }
.qchain-step { position: relative; display: flex; gap: 12px; padding: 0 0 16px 0; }
.qchain-step:last-child { padding-bottom: 0; }
.qchain-step::before {
  content: ""; position: absolute; left: 13px; top: 28px; bottom: 2px; width: 2px; background: var(--line);
}
.qchain-step:last-child::before { display: none; }
.qchain-dot {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  font-size: 0.78rem; font-weight: 800; border: 2px solid var(--line);
  background: var(--surface); color: var(--muted); z-index: 1;
}
.qchain-dot svg { width: 14px; height: 14px; }
.qchain-body { display: flex; flex-direction: column; gap: 2px; padding-top: 3px; min-width: 0; }
.qchain-label { font-size: 0.87rem; font-weight: 700; color: var(--ink); }
.qchain-detail { font-size: 0.78rem; color: var(--muted); }
.qchain-step.is-done .qchain-dot { background: var(--ok); border-color: var(--ok); color: #fff; }
.qchain-step.is-done::before { background: var(--ok); opacity: 0.35; }
.qchain-step.is-blocked .qchain-dot { background: var(--warn-soft); border-color: var(--warn); color: var(--warn); }
.qchain-step.is-blocked .qchain-label { color: var(--warn); }
.qchain-step.is-wait .qchain-label { color: var(--muted); font-weight: 600; }

/* "New Tax Invoice" → pick the fully-paid order it belongs to. */
.ti-pick-lead { margin: 0 0 12px; font-size: 0.86rem; line-height: 1.55; color: var(--ink-soft); }
.ti-pick-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; max-height: 52vh; overflow-y: auto; }
.ti-pick {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; cursor: pointer;
  padding: 11px 14px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface);
  font: inherit; color: inherit; transition: border-color 0.14s ease, background 0.14s ease, transform 0.1s ease;
}
.ti-pick:hover { border-color: var(--brand); background: var(--brand-soft); transform: translateY(-1px); }
.ti-pick.is-blocked { cursor: not-allowed; opacity: 0.66; background: var(--surface-2); }
.ti-pick.is-blocked:hover { border-color: var(--line); background: var(--surface-2); transform: none; }
.ti-pick-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.ti-pick-no { font-weight: 800; font-size: 0.87rem; font-family: var(--font-mono); color: var(--ink); }
.ti-pick-cust { font-size: 0.8rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ti-pick-amt { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: 0 0 auto; }
.ti-pick-total { font-weight: 800; font-size: 0.87rem; color: var(--ink); }
.ti-pick-sub { font-size: 0.74rem; color: var(--muted); }
.ti-pick-go { flex: 0 0 auto; font-size: 0.78rem; font-weight: 800; color: var(--brand); }
.ti-pick-pct { flex: 0 0 auto; font-size: 0.78rem; font-weight: 800; color: var(--warn); }
.ti-pick-sep { margin: 14px 0 2px; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.ti-pick-empty {
  padding: 12px 14px; border-radius: 11px; font-size: 0.83rem; line-height: 1.5;
  border: 1px solid rgba(183,121,31,.3); background: var(--warn-soft); color: #7c5312;
}
/* Manual-invoice switch row (off by default) + its explainer. */
.ti-manual-row {
  display: flex; align-items: center; gap: 14px; padding: 11px 14px; margin-bottom: 14px;
  border: 1px solid var(--line); border-radius: 11px; background: var(--surface-2);
}
.ti-manual-txt { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.ti-manual-txt b { font-size: 0.87rem; color: var(--ink); }
.ti-manual-txt span { font-size: 0.78rem; color: var(--muted); }
.ti-manual-note {
  padding: 12px 14px; border-radius: 11px; font-size: 0.83rem; line-height: 1.55;
  border: 1px solid var(--info-soft); background: var(--info-soft); color: #14487f;
}
/* Reusable on/off switch */
.sw { flex: 0 0 auto; display: inline-flex; align-items: center; cursor: pointer; }
.sw input { position: absolute; opacity: 0; width: 0; height: 0; }
.sw-track {
  position: relative; width: 44px; height: 24px; border-radius: var(--pill);
  background: var(--line-strong); transition: background 0.18s ease;
}
.sw-dot {
  position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(15,23,42,.3); transition: transform 0.18s ease;
}
.sw input:checked + .sw-track { background: var(--brand); }
.sw input:checked + .sw-track .sw-dot { transform: translateX(20px); }
.sw input:focus-visible + .sw-track { box-shadow: 0 0 0 3px var(--brand-ring); }

/* Hint under the in-form quotation dropdown. */
.ti-qhint {
  display: flex; flex-direction: column; gap: 6px; margin-top: 7px; padding: 9px 11px;
  border-radius: 9px; font-size: 0.79rem; line-height: 1.5;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-soft);
}
.ti-qhint b { color: var(--ink); }
.ti-qhint.is-ok { border-color: rgba(15,122,69,.26); background: var(--ok-soft); color: #0b5c34; }
.ti-qhint.is-ok b { color: #0b5c34; }
.ti-qhint.is-warn { border-color: rgba(183,121,31,.3); background: var(--warn-soft); color: #7c5312; }
.ti-qhint.is-warn b { color: #7c5312; }
.ti-qhint.is-none { border-color: rgba(100,116,139,.28); }
.ti-qhint-act { align-self: flex-start; font-weight: 800; color: var(--brand); text-decoration: none; font-size: 0.78rem; }
.ti-qhint-act:hover { text-decoration: underline; }

/* Auto-filled, read-only field (Order ID on the invoice form). */
.input.is-derived { background: var(--surface-2); color: var(--ink); font-weight: 700; cursor: default; }
.input.is-derived:focus { box-shadow: none; border-color: var(--line); }
/* Order ID cell in the Tax Invoices table — opens that order. */
.ti-ordlink {
  border: 0; background: none; padding: 0; font: inherit; font-family: var(--font-mono);
  font-weight: 800; font-size: 0.82rem; color: var(--brand); cursor: pointer;
}
.ti-ordlink:hover { text-decoration: underline; }

/* GST-filing consequence note under the customer GSTIN field (order form). */
.gstnote {
  display: flex; align-items: flex-start; gap: 8px; margin-top: 7px; padding: 8px 10px;
  border-radius: 9px; font-size: 0.78rem; line-height: 1.45;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-soft);
}
.gstnote .gstnote-ic { flex: 0 0 auto; width: 15px; height: 15px; margin-top: 1px; }
.gstnote b { color: var(--ink); }
.gstnote.is-b2b { border-color: rgba(15,122,69,.26); background: var(--ok-soft); color: #0b5c34; }
.gstnote.is-b2b b { color: #0b5c34; }
.gstnote.is-none { border-color: rgba(183,121,31,.3); background: var(--warn-soft); color: #7c5312; }
.gstnote.is-none b { color: #7c5312; }
.gstnote.is-b2c { border-color: rgba(29,111,214,.24); background: var(--info-soft); color: #14487f; }
.gstnote.is-b2c b { color: #14487f; }
/* Loudest state: the source document charged GST and this one doesn't, so tax
   would silently drop out of the return. */
.gstnote.is-mismatch { border-color: rgba(192,57,47,.32); background: var(--danger-soft); color: #8f2b23; }
.gstnote.is-mismatch b { color: #8f2b23; }

/* Catalog picker */
.qcat-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; max-height: 56vh; overflow-y: auto; }
.qcat-item { display: flex; flex-direction: row; align-items: center; gap: 12px; text-align: left; width: 100%; padding: 10px 13px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); cursor: pointer; transition: all var(--ease); }
.qcat-item:hover { border-color: var(--brand-ring); background: var(--brand-soft); transform: translateY(-1px); }
.qcat-thumb { width: 56px; height: 56px; flex: 0 0 auto; border-radius: 8px; object-fit: cover; background: var(--surface-2); border: 1px solid var(--line); }
.qcat-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.qcat-name { font-weight: 700; color: var(--ink); font-size: 0.9rem; }
.qcat-sub { font-size: 0.78rem; color: var(--muted); }

/* Search head stays put while the results scroll under it, so the query and the
   result count are always visible no matter how far down the list you are. */
.qcat-wrap { display: flex; flex-direction: column; min-height: 0; }
.qcat-head { position: sticky; top: 0; z-index: 2; background: var(--surface); padding-bottom: 2px; }
.qcat-search { position: relative; display: flex; align-items: center; }
.qcat-search > svg { position: absolute; left: 12px; color: var(--muted); pointer-events: none; }
.qcat-input { width: 100%; padding: 11px 38px 11px 37px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); color: var(--ink); font: inherit; font-size: 0.9rem; transition: border-color var(--ease), box-shadow var(--ease); }
.qcat-input:focus { outline: none; border-color: var(--brand-ring); box-shadow: 0 0 0 3px var(--brand-soft); }
.qcat-input::-webkit-search-cancel-button { display: none; }
.qcat-clear { position: absolute; right: 6px; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-size: 1.25rem; line-height: 1; cursor: pointer; visibility: hidden; }
.qcat-clear:hover { background: var(--surface-2); color: var(--ink); }
.qcat-meta { margin-top: 9px; font-size: 0.78rem; color: var(--muted); min-height: 1.05em; }
.qcat-meta.warn { color: var(--warn); font-weight: 600; }
.qcat-item.sel { border-color: var(--brand-ring); background: var(--brand-soft); }
.qcat-badges { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; margin-left: auto; flex: 0 0 auto; text-align: right; }
.qcat-price { font-weight: 800; color: var(--ink); font-size: 0.86rem; white-space: nowrap; }
.qcat-hl { background: var(--brand-soft); color: var(--brand-strong); border-radius: 3px; padding: 0 1px; }
.qcat-note { padding: 22px 18px; color: var(--muted); font-size: 0.86rem; text-align: center; }
.qcat-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.qtab-row { display: flex; gap: 8px; margin-bottom: 10px; }
.qtab { padding: 7px 14px; border: 1px solid var(--line); border-radius: var(--pill); background: var(--surface); color: var(--ink-soft); font-weight: 700; font-size: 0.82rem; cursor: pointer; transition: all var(--ease); }
.qtab:hover { border-color: var(--brand-ring); }
.qtab.active { background: var(--brand-soft); color: var(--brand-strong); border-color: var(--brand-ring); }

/* E-Way bill document footer: QR (left) + signature (right) */
.qdoc-ewfoot { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; padding: 16px 24px 26px; }
.qdoc-qr { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.qdoc-qr img { width: 120px; height: 120px; display: block; border: 1px solid var(--line); border-radius: 8px; padding: 4px; background: #fff; }

/* Live total banner */
.qt-total {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 18px; border-radius: var(--r);
  background: linear-gradient(120deg, var(--brand-soft), var(--surface-2));
  border: 1px solid var(--brand-ring);
}
.qt-total-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); font-weight: 800; }
.qt-total-value { font-size: 1.55rem; font-weight: 800; font-family: var(--font-mono); color: var(--brand-strong); letter-spacing: -0.02em; margin-top: 2px; }
.qt-total-count { font-size: 0.82rem; font-weight: 700; color: var(--muted); white-space: nowrap; }

/* Version chip + status stack inside the table */
.qt-ver { display: inline-block; padding: 2px 9px; border-radius: var(--pill); background: var(--line-2); color: var(--ink-soft); font-size: 0.74rem; font-weight: 700; font-family: var(--font-mono); }
.qt-status { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.qt-status .cell-sub { white-space: nowrap; }
.qt-statusbtn { display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; padding: 0; cursor: pointer; }
.qt-statusbtn .qt-caret { display: inline-flex; color: var(--muted); }
.qt-statusbtn .qt-caret svg { width: 13px; height: 13px; }
.qt-statusbtn:hover .qt-caret { color: var(--ink); }
.qmenu-cur { color: var(--muted); font-size: 0.86rem; margin-bottom: 12px; }
.qmenu-div { height: 1px; background: var(--line); margin: 10px 0; }
.qmenu-ic.ok { color: var(--ok); background: var(--ok-soft); }
.qmenu-ic.warn { color: var(--warn); background: var(--warn-soft); }
.qmenu-ic.danger { color: var(--danger); background: var(--danger-soft); }
.qmenu-ic.info { color: var(--info); background: var(--info-soft); }

@media (max-width: 640px) {
  .qt-total { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* ---- Quotation View document (mirrors the app's generated PDF) ---- */
.qdoc-scroll { overflow-x: auto; }
.qdoc {
  background: #fff; color: #111827; max-width: 840px; margin: 0 auto;
  border: 1px solid var(--line); border-radius: 6px; overflow: hidden;
  box-shadow: var(--shadow-sm); font-size: 0.82rem; line-height: 1.45;
}
.qdoc-stripe { height: 8px; background: #f97316; }
.qdoc-lbl { font-size: 0.64rem; font-weight: 800; letter-spacing: 0.08em; color: #6b7280; text-transform: uppercase; margin-bottom: 4px; }
.qdoc-head { display: flex; gap: 20px; justify-content: space-between; padding: 20px 24px 14px; border-bottom: 2px solid #fdba74; }
.qdoc-brand { display: flex; align-items: center; gap: 16px; min-width: 0; }
.qdoc-logo { height: 72px; width: auto; max-width: 230px; object-fit: contain; flex: 0 0 auto; }
.qdoc-co { border-left: 4px solid #f97316; padding-left: 14px; }
.qdoc-coname { font-size: 1.15rem; font-weight: 800; color: #111827; }
.qdoc-coinfo { color: #6b7280; font-size: 0.74rem; margin-top: 4px; }
.qdoc-coinfo div { margin-top: 1px; }
.qdoc-meta { text-align: right; min-width: 230px; }
.qdoc-doctype { font-size: 1.05rem; font-weight: 800; text-transform: lowercase; }
.qdoc-metabox { display: inline-block; text-align: left; margin-top: 8px; padding: 10px 14px; border: 1px solid #fdba74; border-radius: 10px; font-size: 0.74rem; }
.qdoc-metabox div { margin: 1px 0; }
.qdoc-parties { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; padding: 16px 24px; border: 1px solid var(--line); margin: 16px 24px; border-radius: 10px; }
.qdoc-tax { text-align: right; }
.qdoc-tablewrap { padding: 0 24px; overflow-x: auto; }
.qdoc-table { width: 100%; border-collapse: collapse; font-size: 0.74rem; }
.qdoc-table th { background: #fdba74; color: #111827; font-weight: 800; font-size: 0.64rem; letter-spacing: 0.04em; padding: 8px 6px; text-align: left; border: 1px solid #d1d5db; }
.qdoc-table td { padding: 7px 6px; border: 1px solid #d1d5db; vertical-align: top; }
.qdoc-table .qdoc-c { text-align: center; }
.qdoc-table .qdoc-r, .qdoc-table th.qdoc-r { text-align: right; }
.qdoc-iname { font-weight: 700; }
.qdoc-idesc { color: #6b7280; font-size: 0.7rem; margin-top: 3px; }
.qdoc-foot { display: flex; justify-content: space-between; gap: 24px; padding: 18px 24px; align-items: flex-start; }
.qdoc-words { font-size: 0.8rem; max-width: 50%; }
.qdoc-totals { width: 320px; max-width: 60%; border: 1px solid var(--line); border-radius: 10px; padding: 12px 16px; }
.qdoc-trow { display: flex; justify-content: space-between; gap: 14px; padding: 4px 0; color: #374151; font-size: 0.8rem; }
.qdoc-ttot { border-top: 2px solid var(--line); margin-top: 6px; padding-top: 10px; font-weight: 800; font-size: 0.95rem; color: #111827; }
.qdoc-terms { padding: 8px 24px 20px; }
.qdoc-termstext { color: #374151; font-size: 0.7rem; line-height: 1.5; }
.qdoc-term-h { font-weight: 800; color: #111827; letter-spacing: 0.04em; font-size: 0.68rem; margin: 10px 0 4px; }
.qdoc-term-h:first-child { margin-top: 0; }
.qdoc-term { display: flex; gap: 6px; margin-bottom: 2px; }
.qdoc-term-n { flex: 0 0 auto; font-variant-numeric: tabular-nums; color: #6b7280; }
.qdoc-sign { padding: 0 24px 26px; text-align: right; color: #6b7280; font-size: 0.74rem; }
.qdoc-sign-img { display: block; margin: 6px 0 0 auto; height: 76px; width: auto; max-width: 240px; object-fit: contain; }
.qdoc-signline { margin-top: 6px; font-weight: 800; color: #111827; }
/* Keep these blocks intact across PDF page boundaries (html2pdf "css" pagebreak
   mode reads page-break-inside). Without this the page slicer cuts the totals box
   or a row in half — e.g. the totals getting truncated mid-CGST. Harmless on
   screen, since page-break-* applies only to paged output. */
.qdoc-head, .qdoc-parties, .qdoc-foot, .qdoc-totals, .qdoc-words, .qdoc-sign,
.qdoc-ewfoot, .qdoc-qr, .qdoc-table thead, .qdoc-table tr,
.qdoc-term, .qdoc-term-h { page-break-inside: avoid; break-inside: avoid; }
/* A heading stranded at the foot of a page with its terms overleaf reads as a
   mistake — keep it with what follows. */
.qdoc-term-h { page-break-after: avoid; break-after: avoid; }
/* PDF capture only (UI.docPdf flags the capture target with .qdoc-print). The card border,
   radius and shadow belong to the on-screen View modal; carried into a paginated
   PDF they leave an unclosed box — a dangling rule down each page. The on-screen
   document keeps all three. */
.qdoc.qdoc-print { border: 0; border-radius: 0; box-shadow: none; }
/* Give the last block room to breathe above the page-number footer. */
.qdoc-print .qdoc-sign { padding-bottom: 34px; }

/* On phones the document keeps its full desktop layout and is scaled down to
   fit the screen by UI.fitDoc() (see ui.js) — so it reads exactly like the
   laptop/PDF view, just smaller. No mobile reflow here on purpose. */

/* ---- Quotation form (New / Edit) ---- */
.qform-sect { padding: 16px 0; border-top: 1px solid var(--line-2); }
.qform-sect:first-child { padding-top: 0; border-top: 0; }
.qform-sect > h3 { font-size: 0.92rem; margin: 0 0 12px; }
.qitem { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; background: var(--surface-2); }
.qitem-head { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.qitem-no { font-weight: 800; color: var(--brand-strong); font-family: var(--font-mono); }
/* A line that came from the catalog's Server Parts tab — same card, tinted edge
   so a mixed servers+parts list still reads at a glance. */
.qitem.is-part { border-left: 3px solid var(--warn, #d97706); }
.qitem.is-part .qitem-no { color: var(--warn, #b45309); }
.qitem-head .icon-btn { width: 30px; height: 30px; }
.qitem-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.qitem-grid .field { margin-bottom: 0; }
.qitem-grid .field.full { grid-column: 1 / -1; }
.qitem-calc { display: flex; gap: 22px; justify-content: flex-end; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); font-size: 0.84rem; color: var(--muted); }
.qitem-calc b { color: var(--ink); font-family: var(--font-mono); }
.qform-summary { max-width: 420px; margin-left: auto; border: 1px solid var(--brand-ring); border-radius: 12px; padding: 14px 18px; background: linear-gradient(120deg, var(--brand-soft), var(--surface-2)); }
.qform-srow { display: flex; justify-content: space-between; gap: 14px; padding: 4px 0; font-size: 0.86rem; color: var(--ink-soft); }
.qform-srow span:last-child { font-family: var(--font-mono); font-weight: 600; color: var(--ink); }
.qform-stot { border-top: 2px solid var(--brand-ring); margin-top: 8px; padding-top: 10px; font-weight: 800; font-size: 1.05rem; }
.qform-stot span { color: var(--brand-strong) !important; }
.qform-words { margin-top: 10px; font-size: 0.76rem; color: var(--muted); font-style: italic; }

/* ===================== Dashboard redesign (storefront hero + charts) ====== */
.sf-hero { position: relative; overflow: hidden; border-radius: var(--r-xl); padding: 24px 28px; margin-bottom: 20px;
  background:
    radial-gradient(640px 340px at 10% -15%, rgba(14,165,233,.40), transparent 60%),
    radial-gradient(620px 420px at 102% 120%, rgba(37,99,235,.50), transparent 62%),
    linear-gradient(120deg, #0f172a 0%, #1e293b 50%, #1e3a8a 100%);
  color: #fff; box-shadow: 0 20px 48px rgba(15,23,42,.30); border: 1px solid rgba(148,163,184,.16); }
/* subtle infrastructure grid pattern */
.sf-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(148,163,184,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(148,163,184,.07) 1px, transparent 1px);
  background-size: 38px 38px; mask-image: linear-gradient(160deg, #000 30%, transparent 85%); -webkit-mask-image: linear-gradient(160deg, #000 30%, transparent 85%); }
.sf-hero::after { content: ""; position: absolute; right: -70px; top: -80px; width: 340px; height: 340px; border-radius: 50%;
  background: radial-gradient(circle, rgba(14,165,233,.28), transparent 66%); pointer-events: none; }
.hk-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 8px; margin-top: 10px; }
.hk-cap { font-size: .68rem; color: rgba(226,232,240,.62); }
.hk-spark { width: 92px; flex: none; opacity: .95; }
.sf-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.6fr 1fr; gap: 26px; align-items: start; }
.sf-hero h2 { color: #fff; margin: 0 0 3px; font-size: 1.42rem; font-weight: 800; letter-spacing: -.01em; }
.sf-hero .sub { color: rgba(203,213,225,.85); font-size: .9rem; }
.hk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 18px; }
.hk { position: relative; overflow: hidden; background: rgba(255,255,255,.07); border: 1px solid rgba(148,163,184,.18); border-radius: 14px; padding: 14px 16px 13px;
  backdrop-filter: blur(6px); box-shadow: inset 0 1px 0 rgba(255,255,255,.07); }
.hk::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, #0ea5e9, #2563eb); opacity: .9; }
.hk.hk-green::before { background: linear-gradient(180deg, #34d399, #059669); }
.hk.hk-purple::before { background: linear-gradient(180deg, #a78bfa, #7c3aed); }
.hk.hk-orange::before { background: linear-gradient(180deg, #fbbf24, #d97706); }
.hk-top { display: flex; align-items: center; gap: 9px; }
.hk-ic { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center;
  background: linear-gradient(135deg, rgba(14,165,233,.30), rgba(37,99,235,.30)) !important; border: 1px solid rgba(148,163,184,.2); }
/* Echo the metric-row's color coding up into the hero tiles, so the two sections read as one system. */
.hk.hk-green .hk-ic { background: linear-gradient(135deg, rgba(52,211,153,.32), rgba(5,150,105,.32)) !important; }
.hk.hk-purple .hk-ic { background: linear-gradient(135deg, rgba(167,139,250,.32), rgba(124,58,237,.32)) !important; }
.hk.hk-orange .hk-ic { background: linear-gradient(135deg, rgba(251,191,36,.32), rgba(217,119,6,.32)) !important; }
.hk-ic svg { width: 16px; height: 16px; color: #e0f2fe; }
.hk-label { font-size: .76rem; color: rgba(203,213,225,.9); font-weight: 600; }
.hk-trend { margin-left: auto; font-size: .68rem; font-weight: 800; padding: 2px 8px; border-radius: 999px; letter-spacing: .01em; }
.hk-trend.up { color: #bbf7d0; background: rgba(16,185,129,.20); }
.hk-trend.down { color: #fecaca; background: rgba(239,68,68,.20); }
.hk-val { font-size: 1.62rem; font-weight: 800; margin-top: 9px; font-family: var(--font-mono); letter-spacing: -.02em; line-height: 1.1; }
.qa-title { font-size: .84rem; font-weight: 700; color: rgba(226,232,240,.95); margin-bottom: 12px; letter-spacing: .02em; text-transform: uppercase; }
.qa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.qa-btn { display: flex; align-items: center; gap: 11px; background: rgba(255,255,255,.07); border: 1px solid rgba(148,163,184,.18); color: #fff;
  border-radius: 13px; padding: 12px 14px; font-weight: 600; font-size: .85rem; cursor: pointer; text-decoration: none;
  transition: all var(--ease); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.qa-btn:hover { background: rgba(255,255,255,.13); transform: translateY(-2px); box-shadow: 0 14px 26px rgba(2,6,23,.38); border-color: rgba(14,165,233,.5); }
.qa-ic { width: 34px; height: 34px; flex: none; border-radius: 10px; display: grid; place-items: center;
  background: linear-gradient(135deg, #0ea5e9, #2563eb); }
.qa-ic svg { width: 17px; height: 17px; color: #fff; }
.qa-tx { flex: 1; }
.qa-arrow { opacity: 0; transform: translateX(-5px); transition: all var(--ease); font-size: 1rem; color: #7dd3fc; }
.qa-btn:hover .qa-arrow { opacity: 1; transform: none; }
@media (max-width: 1000px) { .sf-hero-grid { grid-template-columns: 1fr; } }

.metric-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 18px; }
@media (max-width: 1100px) { .metric-row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .metric-row { grid-template-columns: 1fr; } }
.metric { position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 17px 18px; box-shadow: var(--shadow-sm); }
.metric::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; opacity: .85; background: var(--brand); }
.metric.m-green::before { background: var(--ok); }
.metric.m-blue::before { background: var(--brand); }
.metric.m-purple::before { background: #2563eb; }
.metric.m-orange::before { background: var(--warn); }
.metric .m-top { display: flex; align-items: center; gap: 10px; }
.metric .m-label { font-size: .8rem; color: var(--muted); font-weight: 600; }
.metric .m-val { font-size: 1.62rem; font-weight: 800; font-family: var(--font-mono); margin-top: 9px; letter-spacing: -.02em; color: var(--ink); }
.metric .m-spark { margin-top: 8px; height: 34px; }
.m-delta { font-size: .78rem; font-weight: 700; } .m-delta.up { color: var(--ok); } .m-delta.down { color: var(--danger); }

.donut-wrap { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.donut-legend { flex: 1; min-width: 150px; display: flex; flex-direction: column; gap: 10px; }
.dl-row { display: flex; align-items: center; gap: 9px; font-size: .86rem; }
.dl-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.dl-name { flex: 1; color: var(--ink-soft); }
.dl-val { font-weight: 700; }

.activity-feed { display: flex; flex-direction: column; }
.af-item { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line-2); }
.af-item:last-child { border-bottom: 0; }
.af-ic { width: 34px; height: 34px; border-radius: 9px; flex: none; display: grid; place-items: center; }
.af-ic svg { width: 16px; height: 16px; }
.af-body { flex: 1; min-width: 0; }
.af-title { font-weight: 600; font-size: .88rem; }
.af-time { color: var(--muted); font-size: .76rem; margin-top: 2px; }

/* ===================== Dashboard animations & polish ===================== */
@keyframes sfRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
#dashboardView .sf-hero,
#dashboardView .metric-row > .metric,
#dashboardView .dash-grid > .card { animation: sfRise .5s var(--ease) both; }
#dashboardView .sf-hero { animation-delay: .02s; }
#dashboardView .metric-row > .metric:nth-child(1) { animation-delay: .06s; }
#dashboardView .metric-row > .metric:nth-child(2) { animation-delay: .12s; }
#dashboardView .metric-row > .metric:nth-child(3) { animation-delay: .18s; }
#dashboardView .metric-row > .metric:nth-child(4) { animation-delay: .24s; }
#dashboardView .dash-grid > .card:nth-child(1) { animation-delay: .10s; }
#dashboardView .dash-grid > .card:nth-child(2) { animation-delay: .18s; }
#dashboardView .dash-grid > .card:nth-child(3) { animation-delay: .26s; }
.metric { transition: transform var(--ease), box-shadow var(--ease); }
.metric:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
#dashboardView .dash-grid > .card { transition: transform var(--ease), box-shadow var(--ease); }
#dashboardView .dash-grid > .card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.hk { transition: transform var(--ease), background var(--ease), box-shadow var(--ease); }
.hk:hover { transform: translateY(-2px); background: rgba(255,255,255,.13); box-shadow: 0 12px 26px rgba(2,6,23,.32); }
.metric .ic, .hk-ic { transition: transform var(--ease); }
.metric:hover .ic { transform: scale(1.08) rotate(-4deg); }
.hk:hover .hk-ic { transform: scale(1.08); }
/* card depth + heading hierarchy (dashboard) */
#dashboardView .dash-grid > .card { border-radius: 16px; border-color: var(--line); }
#dashboardView .dash-grid > .card:hover { border-color: #cdd9ec; }
#dashboardView .card-head h3 { font-size: 1rem; font-weight: 700; letter-spacing: -.005em; }
@media (prefers-reduced-motion: reduce) {
  #dashboardView .sf-hero, #dashboardView .metric-row > .metric, #dashboardView .dash-grid > .card { animation: none; }
}

/* ===================== Analytics chart + KPI animations =================== */
.an-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; margin-bottom: 20px; }
.an-line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: anDraw 1.1s var(--ease) forwards; }
@keyframes anDraw { to { stroke-dashoffset: 0; } }
.an-area { opacity: 0; animation: anFade .9s ease .35s forwards; }
@keyframes anFade { to { opacity: 1; } }
.an-dot { opacity: 0; animation: anFade .4s ease forwards; }
.an-grid line { stroke: var(--line-2); stroke-width: 1; }
.an-axis { fill: var(--muted); font-size: 10px; }
.an-legend { display: flex; gap: 18px; margin-bottom: 10px; font-size: .8rem; color: var(--muted); align-items: center; }
.an-legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; vertical-align: -1px; margin-right: 5px; }
@media (prefers-reduced-motion: reduce) { .an-line, .an-area, .an-dot { animation: none; opacity: 1; stroke-dashoffset: 0; } }

/* Analytics KPI entrance (reuses sfRise keyframe) */
.an-kpis .metric { animation: sfRise .45s var(--ease) both; }
.an-kpis .metric:nth-child(1){animation-delay:.04s} .an-kpis .metric:nth-child(2){animation-delay:.08s}
.an-kpis .metric:nth-child(3){animation-delay:.12s} .an-kpis .metric:nth-child(4){animation-delay:.16s}
.an-kpis .metric:nth-child(5){animation-delay:.20s} .an-kpis .metric:nth-child(6){animation-delay:.24s}
.an-kpis .metric:nth-child(7){animation-delay:.28s} .an-kpis .metric:nth-child(8){animation-delay:.32s}
@media (prefers-reduced-motion: reduce){ .an-kpis .metric{animation:none} }

/* ===================== Premium split-screen login ======================== */
body.login-page { display: block; overflow-x: hidden; font-family: "Inter", "Manrope", system-ui, sans-serif;
  background:
    radial-gradient(1100px 720px at 10% 8%, rgba(37,99,235,0.12), transparent 58%),
    radial-gradient(960px 720px at 90% 92%, rgba(6,182,212,0.10), transparent 60%),
    linear-gradient(140deg, #0b1220 0%, #0f172a 52%, #111827 100%);
  color: #f8fafc; padding: 0; }
body.login-page::before, body.login-page::after { display: none; }
.lg-split { display: flex; min-height: 100vh; }
.lg-left { flex: 0 0 58%; position: relative; overflow: hidden; padding: 56px 60px; display: flex; flex-direction: column; justify-content: center; }
.lg-right { flex: 1; display: grid; place-items: center; padding: 40px 28px; position: relative; }
.lg-left-inner { position: relative; z-index: 2; max-width: 560px; }
.lg-grid-bg { position: absolute; inset: 0; opacity: .55;
  background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 44px 44px; -webkit-mask: radial-gradient(circle at 32% 42%, #000, transparent 72%); mask: radial-gradient(circle at 32% 42%, #000, transparent 72%); }
.lg-orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .3; z-index: 0; pointer-events: none; }
.lg-orb-1 { width: 440px; height: 440px; background: #2563eb; top: -90px; left: -70px; animation: lgFloat 18s ease-in-out infinite; }
.lg-orb-2 { width: 380px; height: 380px; background: #06b6d4; bottom: -110px; left: 30%; animation: lgFloat 22s ease-in-out infinite reverse; }
.lg-orb-3 { width: 340px; height: 340px; background: #1d4ed8; top: 16%; right: -80px; animation: lgFloat 20s ease-in-out infinite; }
@keyframes lgFloat { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(30px,24px) scale(1.08); } }
.lg-brandline { display: flex; align-items: center; gap: 12px; margin-bottom: 46px; }
.lg-brandline img { width: 40px; height: 40px; }
.lg-brandline span { font-family: "Poppins", "Inter", sans-serif; font-weight: 700; letter-spacing: .14em; font-size: .82rem; color: #cdd8ef; }
.lg-brandline b { color: #22d3ee; }
.lg-hero h1 { font-family: "Poppins", "Inter", sans-serif; font-size: clamp(1.85rem, 3vw, 2.6rem); line-height: 1.12; font-weight: 800; color: #f8fafc; margin: 0 0 16px; letter-spacing: -.01em; }
.lg-hero p { color: #94a3b8; font-size: 1.02rem; line-height: 1.6; max-width: 480px; margin: 0 0 28px; }
.lg-features { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.lg-features li { display: flex; align-items: center; gap: 12px; color: #dbe4f5; font-weight: 500; font-size: .98rem; }
.lg-check { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; font-size: .8rem; font-weight: 800; color: #06b6d4; background: rgba(6,182,212,.14); border: 1px solid rgba(6,182,212,.3); }
.lg-rack { position: absolute; right: 40px; bottom: 30px; width: 300px; max-width: 40%; opacity: .92; z-index: 1; filter: drop-shadow(0 20px 40px rgba(0,0,0,.45)); }
.lg-rack .led { animation: ledBlink 2.6s ease-in-out infinite; }
.lg-rack .lg-rk:nth-child(2) .led { animation-duration: 3.1s; } .lg-rack .lg-rk:nth-child(3) .led { animation-duration: 2.2s; }
@keyframes ledBlink { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
.lg-card { width: min(440px, 100%); border-radius: 24px; padding: 40px 36px; color: #f8fafc;
  background: linear-gradient(180deg, rgba(30,41,59,.86), rgba(15,23,42,.9));
  border: 1px solid rgba(148,163,184,.18);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  box-shadow: 0 30px 80px rgba(2,6,23,.6), inset 0 1px 0 rgba(255,255,255,.05); position: relative; z-index: 2; animation: lgCardIn .6s cubic-bezier(.22,1,.36,1) both; }
@keyframes lgCardIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.lg-card-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.lg-card-brand img { width: 46px; height: 46px; }
.lg-card-brand h2 { font-family: "Poppins", "Inter", sans-serif; font-size: 1.18rem; font-weight: 700; color: #fff; margin: 0; }
.lg-card-brand small { color: #22d3ee; font-size: .66rem; letter-spacing: .12em; font-weight: 700; }
.lg-welcome { font-family: "Poppins", "Inter", sans-serif; font-size: 1.5rem; font-weight: 700; color: #fff; margin: 0 0 4px; }
.lg-sub { color: #94a3b8; font-size: .9rem; margin: 0 0 22px; }
.lg-label { display: block; font-size: .78rem; font-weight: 600; color: #cbd5e1; margin: 0 0 7px; }
.lg-input-wrap { position: relative; margin-bottom: 16px; }
.lg-ic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: #7c8aa5; pointer-events: none; }
.lg-input { width: 100%; height: 50px; padding: 0 44px 0 42px; border-radius: 13px; font-size: .95rem; color: #f8fafc;
  background: rgba(2,6,23,.45); border: 1px solid rgba(148,163,184,.24); transition: border-color var(--ease), box-shadow var(--ease), background var(--ease); }
.lg-input::placeholder { color: #64748b; }
.lg-input:focus { outline: none; border-color: #2563eb; background: rgba(255,255,255,.1); box-shadow: 0 0 0 4px rgba(37,99,235,.25); }
.lg-eye { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border: 0; background: transparent; color: #7c8aa5; cursor: pointer; border-radius: 9px; display: grid; place-items: center; }
.lg-eye svg { width: 18px; height: 18px; } .lg-eye:hover { color: #cbd5e1; } .lg-eye.on { color: #22d3ee; }
.lg-row { display: flex; align-items: center; justify-content: space-between; margin: 2px 0 20px; }
.lg-remember { display: flex; align-items: center; gap: 8px; font-size: .84rem; color: #cbd5e1; cursor: pointer; }
.lg-remember input { width: 16px; height: 16px; accent-color: #2563eb; }
.lg-forgot { font-size: .84rem; color: #22d3ee; text-decoration: none; font-weight: 600; }
.lg-forgot:hover { text-decoration: underline; }
.lg-cta { width: 100%; height: 52px; border: 0; border-radius: 13px; cursor: pointer; color: #fff; font-weight: 700; font-size: .98rem;
  background: linear-gradient(90deg, #2563eb, #06b6d4); box-shadow: 0 12px 30px rgba(6,182,212,.3);
  display: flex; align-items: center; justify-content: center; gap: 10px; transition: transform var(--ease), box-shadow var(--ease), filter var(--ease); }

/* ============================================================================
   Modal — base styling
   ========================================================================== */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); display: grid; place-items: center; z-index: 10000; opacity: 0; transition: opacity 0.2s ease; }
.modal-overlay.open { opacity: 1; }
.modal { background: white; border-radius: 16px; max-width: 540px; width: 90vw; max-height: 90vh; display: flex; flex-direction: column; box-shadow: 0 30px 60px rgba(0,0,0,.3); transform: scale(0.95); transition: transform 0.2s ease; }
.modal-overlay.open .modal { transform: scale(1); }
.modal.wide { max-width: 90vw; }
.modal-head { padding: 20px 24px; border-bottom: 1px solid #eef2f8; display: flex; align-items: center; gap: 12px; }
.modal-head h2 { margin: 0; font-size: 1.15rem; font-weight: 700; color: #111827; }
.modal-close { background: transparent; border: 0; font-size: 2rem; cursor: pointer; color: #9ca3af; padding: 0 4px; line-height: 1; transition: color 0.2s ease; }
.modal-close:hover { color: #ef4444; }
.modal-body { flex: 1; overflow-y: auto; padding: 24px; }
.modal-foot { padding: 16px 24px; border-top: 1px solid #eef2f8; display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }

/* Full-size in-page image preview (click a thumbnail instead of a new tab) */
.img-lightbox.modal-overlay { background: rgba(0,0,0,.82); }
.img-lightbox img { max-width: 92vw; max-height: 90vh; object-fit: contain; border-radius: 8px; box-shadow: 0 30px 60px rgba(0,0,0,.4); transform: scale(0.95); transition: transform 0.2s ease; }
.img-lightbox.open img { transform: scale(1); }
.img-lightbox-close { position: fixed; top: 18px; right: 22px; background: rgba(255,255,255,.12); border: 0; color: #fff; font-size: 2rem; line-height: 1; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; transition: background 0.2s ease; }
.img-lightbox-close:hover { background: rgba(255,255,255,.24); }
.img-lightbox-error { color: #fff; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: .95rem; }
.img-lightbox-error a { color: #93c5fd; }

/* ============================================================================
   Quotation Review Modal — matches mobile app design exactly
   ========================================================================== */
.qr-btn-reject { background: #ef4444; color: white; border: none; padding: 12px 28px; border-radius: 8px; font-weight: 600; font-size: .95rem; cursor: pointer; transition: all 0.2s ease; flex: 1; }
.qr-btn-reject:hover:not(:disabled) { background: #dc2626; box-shadow: 0 6px 16px rgba(239, 68, 68, 0.28); }
.qr-btn-approve { background: #10b981; color: white; border: none; padding: 12px 28px; border-radius: 8px; font-weight: 600; font-size: .95rem; cursor: pointer; transition: all 0.2s ease; flex: 1; }
.qr-btn-approve:hover:not(:disabled) { background: #059669; box-shadow: 0 6px 16px rgba(16, 185, 129, 0.28); }
.qr-btn-reject:disabled, .qr-btn-approve:disabled { opacity: 0.6; cursor: not-allowed; }

/* ============================================================================
   Pending Quotations Panel — Quick actions for reviewers
   ========================================================================== */
.qp-table { display: flex; flex-direction: column; gap: 8px; }
.qp-row { display: grid; grid-template-columns: 120px 200px 110px 140px 1fr; gap: 12px; align-items: center; padding: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); transition: all 0.2s ease; }
.qp-row:hover { box-shadow: 0 4px 12px rgba(11, 102, 228, 0.12); border-color: var(--brand); }
.qp-cell { font-size: .9rem; }
.qp-quote { font-weight: 700; color: var(--ink); font-family: var(--font-mono); }
.qp-customer { color: var(--ink); font-weight: 500; }
.qp-date { color: var(--muted); font-size: .85rem; }
.qp-amount { font-weight: 700; color: var(--brand); }
.qp-actions { display: flex; gap: 8px; justify-content: flex-end; }
.qp-btn { width: 32px; height: 32px; border-radius: 6px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; font-size: 1rem; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; }
.qp-btn:hover { background: var(--line-2); border-color: var(--brand); }
.qp-approve { color: #10b981; }
.qp-approve:hover { background: rgba(16, 185, 129, 0.1); border-color: #10b981; }
.qp-reject { color: #ef4444; }
.qp-reject:hover { background: rgba(239, 68, 68, 0.1); border-color: #ef4444; }
.qp-view { color: var(--brand); }
.qp-view:hover { background: var(--brand-ring); border-color: var(--brand); }
.lg-cta:hover { filter: brightness(1.05); }
.lg-cta:active { transform: translateY(0); }
.lg-cta:disabled { cursor: not-allowed; opacity: .85; }
.lg-spinner { display: none; width: 18px; height: 18px; border: 2.5px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: lgSpin .7s linear infinite; }
.lg-cta.is-loading .lg-cta-label { opacity: .7; } .lg-cta.is-loading .lg-spinner { display: inline-block; }
@keyframes lgSpin { to { transform: rotate(360deg); } }
.lg-msg { display: none; padding: 10px 13px; border-radius: 11px; font-size: .82rem; font-weight: 600; margin-bottom: 14px; }
.lg-msg.show { display: block; }
.lg-msg.error { background: rgba(220,57,47,.16); color: #fda29b; border: 1px solid rgba(220,57,47,.35); }
.lg-msg.ok { background: rgba(22,163,74,.16); color: #86efac; border: 1px solid rgba(22,163,74,.35); }
.lg-msg.info { background: rgba(37,99,235,.16); color: #93c5fd; border: 1px solid rgba(37,99,235,.35); }
.lg-trust { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.1); }
.lg-trust span { display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; color: #94a3b8; }
.lg-trust svg { width: 14px; height: 14px; color: #22d3ee; }
.lg-foot { margin-top: 16px; text-align: center; font-size: .72rem; color: #64748b; }
@media (max-width: 980px) { .lg-left { display: none; } .lg-right { flex: 1; } }
@media (prefers-reduced-motion: reduce) { .lg-orb, .lg-rack .led, .lg-card { animation: none; } }

/* ===================================================== Responsive ====== */
@media (max-width: 980px) {
  .grid-2 { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .profile-facts { grid-template-columns: minmax(0, 1fr); }
  .profile-id { flex-direction: column; align-items: flex-start; gap: 14px; }
}
@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { transform: translateX(-100%); box-shadow: var(--shadow-lg); }
  .sidebar.open { transform: none; }
  .main { grid-column: 1; }
  .hamburger { display: inline-flex; }
  .topbar-search { display: none; }
  .content { padding: 16px; }
  .topbar { padding: 0 14px; gap: 10px; }
  .topbar .crumb { display: none; }

  /* Welcome card: stack vertically, logo fits and welcome aligns nicely */
  .welcome { flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 18px 16px; }
  .welcome-logo { width: 100%; max-width: 320px; aspect-ratio: auto; height: 60px; padding: 8px 12px; }
  .welcome-body { min-width: 0; }
  .welcome-body h1 { font-size: 1.34rem; }
  .welcome-meta { text-align: center; width: 100%; margin-left: 0; }
}

/* ── Mobile (≤767px per spec — also catches 1.5× density phones reporting ~720px) ── */
@media (max-width: 767px) {
  .metric-row { display: none; }                /* Order Revenue / Payment Received / Inventory Value / Units in Stock — redundant with the hero KPI tiles on phones */
  .topbar { gap: 8px; }
  .topbar h1 { font-size: 1rem; }
  .conn-chip { display: none; }                 /* status dot is non-essential on phones */
  .tb-user > div:last-child { display: none; }   /* hide name/role text, keep the avatar */
  .tb-user { padding: 4px; }
  .modal-overlay { padding: 12px; }
  .modal-head { padding: 14px 16px; }
  .modal-body { padding: 14px; }                 /* more room for documents on phones */
  .qdoc-scroll { margin: 0 -2px; }               /* let the doc use the full width */
  .card-body { padding: 14px; }
  .page-head .titles h1 { font-size: 1.2rem; }
  .sf-hero { padding: 18px 16px; }

  /* Customers page: title stacks on its own row, actions row stays one line */
  .cust-head .titles { flex: 1 1 100%; }
  .page-actions.actions-row-3 { flex: 1 1 100%; flex-wrap: nowrap; }
  .page-actions.actions-row-3 .btn { flex: 1 1 0; min-width: 0; padding: 8px 4px; font-size: 0.7rem; gap: 4px; overflow: hidden; text-overflow: ellipsis; }

  /* Analytics page: KPI tiles 2-up with values that fit, export buttons stay in one row */
  .an-kpis { grid-template-columns: 1fr 1fr; gap: 10px; }
  .an-kpis .metric { padding: 12px 13px; min-width: 0; }
  .an-kpis .m-top { gap: 8px; }
  .an-kpis .ic { width: 30px; height: 30px; border-radius: 9px; }
  .an-kpis .ic svg { width: 15px; height: 15px; }
  .an-kpis .m-label { font-size: 0.7rem; }
  .an-kpis .m-val { font-size: 1.1rem; margin-top: 7px; overflow-wrap: anywhere; }
  .btn-export { padding: 7px 10px 7px 7px; font-size: 0.72rem; gap: 6px; }
  .btn-export .exp-ic { width: 20px; height: 20px; }
  .btn-export .exp-ic svg { width: 12px; height: 12px; }

  /* KPI + Quick Action tiles stack so long ₹ values never clip */
  .hk-grid { grid-template-columns: 1fr !important; }
  .qa-grid { grid-template-columns: 1fr 1fr !important; }
  .hk, .metric { min-width: 0; }
  .sf-hero-grid { gap: 18px; }
  
  .prod-name-text { max-width: 140px; }
  table.tbl th, table.tbl td { padding: 8px 10px; }

  .dash-tabs { display: flex; width: 100%; }
  .dash-tabs .chip { flex: 1 1 0; min-width: 0; white-space: normal; font-size: 0.72rem; padding: 7px 8px; }

  .card-head { flex-direction: column; align-items: stretch; gap: 12px; }
  .card-head .spacer { display: none; }
  .card-head .input.search { width: 100% !important; min-width: 0 !important; }
  .card-head .toolbar { width: 100%; margin: 0 !important; }
  .card-head .toolbar > * { flex: 1; min-width: 0; }
}
@media (max-width: 420px) {
  .content { padding: 12px; }
  .stat-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat { padding: 12px 14px; }
  .stat .stat-value { font-size: 1.24rem; }
  .modal-foot { padding: 14px 16px; }
  .modal-foot > div { gap: 10px; }

  .an-kpis { gap: 8px; }
  .an-kpis .metric { padding: 10px; }
  .an-kpis .m-val { font-size: 1rem; }
  .btn-export { padding: 7px 8px 7px 6px; font-size: 0.66rem; gap: 5px; }
  .btn-export .exp-ic { width: 18px; height: 18px; }
}

/* Embedded views without sidebar and topbar */
.embedded-shell { background: white !important; }
.embedded-shell .app { display: block !important; padding: 0 !important; }
.embedded-shell .main { margin: 0 !important; padding: 0 !important; }
.content.embedded { padding: 0 !important; margin: 0 !important; height: 100vh; overflow-y: auto; }


/* ============================================================================
   SignageFlow Pro dashboard port (ops.signwale.com) — ERP tab.
   Base typography + Tailwind preflight scoped to .sfp-dash, followed by the
   exact utility subset extracted from the live build (main.518f8f98.css).
   ========================================================================== */
.sfp-dash{font-family:Inter,sans-serif;font-size:16px;line-height:1.5;color:#111827}
.sfp-dash *,.sfp-dash ::before,.sfp-dash ::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}
.sfp-dash h1,.sfp-dash h2,.sfp-dash h3,.sfp-dash h4,.sfp-dash h5,.sfp-dash h6{font-size:inherit;font-weight:inherit;margin:0}
.sfp-dash p,.sfp-dash hr,.sfp-dash figure{margin:0}
.sfp-dash hr{height:0;color:inherit;border-top-width:1px}
.sfp-dash a{color:inherit;text-decoration:inherit}
.sfp-dash a:hover{text-decoration:inherit}
.sfp-dash button,.sfp-dash select,.sfp-dash input{font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}
.sfp-dash button,.sfp-dash [role=button]{cursor:pointer;background-color:transparent;background-image:none;text-transform:none;-webkit-appearance:button}
.sfp-dash button:disabled{cursor:default}
.sfp-dash table{text-indent:0;border-color:inherit;border-collapse:collapse}
.sfp-dash img,.sfp-dash svg,.sfp-dash video,.sfp-dash canvas{display:block;vertical-align:middle}
.sfp-dash img,.sfp-dash video{max-width:100%;height:auto}
.sfp-dash select{text-transform:none;background-color:#fff}
.sfp-dash ol,.sfp-dash ul{list-style:none;margin:0;padding:0}
/* rules Tailwind emits that the class-name extractor cannot match mechanically */
@media (min-width:1536px){.sfp-dash .\32xl\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sfp-dash .\32xl\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.sfp-dash .bg-emerald-200{--tw-bg-opacity:1;background-color:rgb(167 243 208/var(--tw-bg-opacity,1))}
.sfp-dash .bg-violet-50\/40{background-color:#f5f3ff66}
.sfp-dash .mt-0\.5{margin-top:.125rem}
.sfp-dash .max-w-\[180px\]{max-width:180px}

@media (max-width:640px){.sfp-dash .quotation-form .text-base{font-size:.9rem}.sfp-dash .quotation-form .text-lg{font-size:1rem}}
.sfp-dash .pdf-preview .gap-6{gap:1rem}
.sfp-dash .pdf-preview .gap-4{gap:.75rem}
.sfp-dash .pdf-preview .text-xs{font-size:.52rem}
.sfp-dash .pdf-preview .text-sm{font-size:.6rem}
.sfp-dash .pdf-preview .text-base{font-size:.68rem}
.sfp-dash .pdf-preview .text-lg{font-size:.78rem}
.sfp-dash .pdf-preview .text-xl{font-size:.85rem}
.sfp-dash .pdf-preview .text-2xl{font-size:1rem}
.sfp-dash .fixed{position:fixed}
.sfp-dash .absolute{position:absolute}
.sfp-dash .relative{position:relative}
.sfp-dash .sticky{position:-webkit-sticky;position:sticky}
.sfp-dash .inset-0{inset:0}
.sfp-dash .left-0{left:0}
.sfp-dash .right-2{right:.5rem}
.sfp-dash .top-2{top:.5rem}
.sfp-dash .z-10{z-index:10}
.sfp-dash .z-50{z-index:50}
.sfp-dash .col-span-2{grid-column:span 2/span 2}
.sfp-dash .mb-1{margin-bottom:.25rem}
.sfp-dash .mb-2{margin-bottom:.5rem}
.sfp-dash .mb-3{margin-bottom:.75rem}
.sfp-dash .mb-4{margin-bottom:1rem}
.sfp-dash .mb-5{margin-bottom:1.25rem}
.sfp-dash .ml-3{margin-left:.75rem}
.sfp-dash .ml-auto{margin-left:auto}
.sfp-dash .mr-1{margin-right:.25rem}
.sfp-dash .mr-1\.5{margin-right:.375rem}
.sfp-dash .mt-0\.5{margin-top:.125rem}
.sfp-dash .mt-1{margin-top:.25rem}
.sfp-dash .mt-2{margin-top:.5rem}
.sfp-dash .mt-3{margin-top:.75rem}
.sfp-dash .block{display:block}
.sfp-dash .inline-block{display:inline-block}
.sfp-dash .flex{display:flex}
.sfp-dash .inline-flex{display:inline-flex}
.sfp-dash .table{display:table}
.sfp-dash .grid{display:grid}
.sfp-dash .hidden{display:none}
.sfp-dash .h-1\.5{height:.375rem}
.sfp-dash .h-10{height:2.5rem}
.sfp-dash .h-2{height:.5rem}
.sfp-dash .h-2\.5{height:.625rem}
.sfp-dash .h-3{height:.75rem}
.sfp-dash .h-3\.5{height:.875rem}
.sfp-dash .h-4{height:1rem}
.sfp-dash .h-48{height:12rem}
.sfp-dash .h-5{height:1.25rem}
.sfp-dash .h-56{height:14rem}
.sfp-dash .h-64{height:16rem}
.sfp-dash .h-8{height:2rem}
.sfp-dash .h-\[248px\]{height:248px}
.sfp-dash .h-full{height:100%}
.sfp-dash .max-h-\[280px\]{max-height:280px}
.sfp-dash .max-h-\[360px\]{max-height:360px}
.sfp-dash .max-h-\[420px\]{max-height:420px}
.sfp-dash .max-h-\[85vh\]{max-height:85vh}
.sfp-dash .w-10{width:2.5rem}
.sfp-dash .w-16{width:4rem}
.sfp-dash .w-2{width:.5rem}
.sfp-dash .w-2\.5{width:.625rem}
.sfp-dash .w-3{width:.75rem}
.sfp-dash .w-3\.5{width:.875rem}
.sfp-dash .w-4{width:1rem}
.sfp-dash .w-5{width:1.25rem}
.sfp-dash .w-7{width:1.75rem}
.sfp-dash .w-8{width:2rem}
.sfp-dash .w-full{width:100%}
.sfp-dash .min-w-0{min-width:0}
.sfp-dash .min-w-\[110px\]{min-width:110px}
.sfp-dash .min-w-\[140px\]{min-width:140px}
.sfp-dash .min-w-\[28px\]{min-width:28px}
.sfp-dash .min-w-\[2rem\]{min-width:2rem}
.sfp-dash .min-w-\[600px\]{min-width:600px}
.sfp-dash .min-w-\[64px\]{min-width:64px}
.sfp-dash .min-w-\[76px\]{min-width:76px}
.sfp-dash .min-w-full{min-width:100%}
.sfp-dash .max-w-3xl{max-width:48rem}
.sfp-dash .max-w-\[80px\]{max-width:80px}
.sfp-dash .flex-1{flex:1 1}
.sfp-dash .flex-shrink-0,.sfp-dash .shrink-0{flex-shrink:0}
.sfp-dash .border-separate{border-collapse:initial}
.sfp-dash .border-spacing-0{--tw-border-spacing-x:0px;--tw-border-spacing-y:0px;border-spacing:var(--tw-border-spacing-x) var(--tw-border-spacing-y)}
.sfp-dash .cursor-pointer{cursor:pointer}
.sfp-dash .grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
.sfp-dash .grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.sfp-dash .grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.sfp-dash .grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}
.sfp-dash .flex-col{flex-direction:column}
.sfp-dash .flex-wrap{flex-wrap:wrap}
.sfp-dash .items-start{align-items:flex-start}
.sfp-dash .items-end{align-items:flex-end}
.sfp-dash .items-center{align-items:center}
.sfp-dash .justify-end{justify-content:flex-end}
.sfp-dash .justify-center{justify-content:center}
.sfp-dash .justify-between{justify-content:space-between}
.sfp-dash .gap-0\.5{gap:.125rem}
.sfp-dash .gap-1{gap:.25rem}
.sfp-dash .gap-1\.5{gap:.375rem}
.sfp-dash .gap-2{gap:.5rem}
.sfp-dash .gap-3{gap:.75rem}
.sfp-dash .gap-4{gap:1rem}
.sfp-dash .gap-6{gap:1.5rem}
.sfp-dash .gap-x-4{column-gap:1rem}
.sfp-dash .gap-y-2{row-gap:.5rem}
.sfp-dash .space-x-3>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(.75rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(.75rem*var(--tw-space-x-reverse))}
.sfp-dash .space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(.25rem*var(--tw-space-y-reverse));margin-top:calc(.25rem*(1 - var(--tw-space-y-reverse)))}
.sfp-dash .space-y-1\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(.375rem*var(--tw-space-y-reverse));margin-top:calc(.375rem*(1 - var(--tw-space-y-reverse)))}
.sfp-dash .space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(.5rem*var(--tw-space-y-reverse));margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)))}
.sfp-dash .space-y-2\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(.625rem*var(--tw-space-y-reverse));margin-top:calc(.625rem*(1 - var(--tw-space-y-reverse)))}
.sfp-dash .space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(.75rem*var(--tw-space-y-reverse));margin-top:calc(.75rem*(1 - var(--tw-space-y-reverse)))}
.sfp-dash .space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(1rem*var(--tw-space-y-reverse));margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)))}
.sfp-dash .overflow-hidden{overflow:hidden}
.sfp-dash .overflow-x-auto{overflow-x:auto}
.sfp-dash .overflow-y-auto{overflow-y:auto}
.sfp-dash .truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sfp-dash .whitespace-nowrap{white-space:nowrap}
.sfp-dash .rounded{border-radius:.25rem}
.sfp-dash .rounded-full{border-radius:9999px}
.sfp-dash .rounded-lg{border-radius:.5rem}
.sfp-dash .rounded-md{border-radius:.375rem}
.sfp-dash .rounded-sm{border-radius:.125rem}
.sfp-dash .rounded-xl{border-radius:.75rem}
.sfp-dash .border{border-width:1px}
.sfp-dash .border-b{border-bottom-width:1px}
.sfp-dash .border-l{border-left-width:1px}
.sfp-dash .border-r{border-right-width:1px}
.sfp-dash .border-t-2{border-top-width:2px}
.sfp-dash .border-amber-100{--tw-border-opacity:1;border-color:#fef3c7;border-color:rgb(254 243 199/var(--tw-border-opacity,1))}
.sfp-dash .border-amber-200{--tw-border-opacity:1;border-color:#fde68a;border-color:rgb(253 230 138/var(--tw-border-opacity,1))}
.sfp-dash .border-blue-100{--tw-border-opacity:1;border-color:#dbeafe;border-color:rgb(219 234 254/var(--tw-border-opacity,1))}
.sfp-dash .border-blue-200{--tw-border-opacity:1;border-color:#bfdbfe;border-color:rgb(191 219 254/var(--tw-border-opacity,1))}
.sfp-dash .border-cyan-200{--tw-border-opacity:1;border-color:#a5f3fc;border-color:rgb(165 243 252/var(--tw-border-opacity,1))}
.sfp-dash .border-emerald-100{--tw-border-opacity:1;border-color:#d1fae5;border-color:rgb(209 250 229/var(--tw-border-opacity,1))}
.sfp-dash .border-emerald-200{--tw-border-opacity:1;border-color:#a7f3d0;border-color:rgb(167 243 208/var(--tw-border-opacity,1))}
.sfp-dash .border-gray-100{--tw-border-opacity:1;border-color:#f3f4f6;border-color:rgb(243 244 246/var(--tw-border-opacity,1))}
.sfp-dash .border-gray-200{--tw-border-opacity:1;border-color:#e5e7eb;border-color:rgb(229 231 235/var(--tw-border-opacity,1))}
.sfp-dash .border-gray-300{--tw-border-opacity:1;border-color:#d1d5db;border-color:rgb(209 213 219/var(--tw-border-opacity,1))}
.sfp-dash .border-green-200{--tw-border-opacity:1;border-color:#bbf7d0;border-color:rgb(187 247 208/var(--tw-border-opacity,1))}
.sfp-dash .border-indigo-200{--tw-border-opacity:1;border-color:#c7d2fe;border-color:rgb(199 210 254/var(--tw-border-opacity,1))}
.sfp-dash .border-purple-200{--tw-border-opacity:1;border-color:#e9d5ff;border-color:rgb(233 213 255/var(--tw-border-opacity,1))}
.sfp-dash .border-red-200{--tw-border-opacity:1;border-color:#fecaca;border-color:rgb(254 202 202/var(--tw-border-opacity,1))}
.sfp-dash .border-rose-100{--tw-border-opacity:1;border-color:#ffe4e6;border-color:rgb(255 228 230/var(--tw-border-opacity,1))}
.sfp-dash .border-rose-200{--tw-border-opacity:1;border-color:#fecdd3;border-color:rgb(254 205 211/var(--tw-border-opacity,1))}
.sfp-dash .border-sky-100{--tw-border-opacity:1;border-color:#e0f2fe;border-color:rgb(224 242 254/var(--tw-border-opacity,1))}
.sfp-dash .border-sky-200{--tw-border-opacity:1;border-color:#bae6fd;border-color:rgb(186 230 253/var(--tw-border-opacity,1))}
.sfp-dash .border-violet-100{--tw-border-opacity:1;border-color:#ede9fe;border-color:rgb(237 233 254/var(--tw-border-opacity,1))}
.sfp-dash .border-violet-200{--tw-border-opacity:1;border-color:#ddd6fe;border-color:rgb(221 214 254/var(--tw-border-opacity,1))}
.sfp-dash .bg-amber-100{--tw-bg-opacity:1;background-color:#fef3c7;background-color:rgb(254 243 199/var(--tw-bg-opacity,1))}
.sfp-dash .bg-amber-50{--tw-bg-opacity:1;background-color:#fffbeb;background-color:rgb(255 251 235/var(--tw-bg-opacity,1))}
.sfp-dash .bg-black{--tw-bg-opacity:1;background-color:#000;background-color:rgb(0 0 0/var(--tw-bg-opacity,1))}
.sfp-dash .bg-black\/70{background-color:#000000b3}
.sfp-dash .bg-blue-100{--tw-bg-opacity:1;background-color:#dbeafe;background-color:rgb(219 234 254/var(--tw-bg-opacity,1))}
.sfp-dash .bg-blue-200{--tw-bg-opacity:1;background-color:#bfdbfe;background-color:rgb(191 219 254/var(--tw-bg-opacity,1))}
.sfp-dash .bg-blue-50{--tw-bg-opacity:1;background-color:#eff6ff;background-color:rgb(239 246 255/var(--tw-bg-opacity,1))}
.sfp-dash .bg-blue-50\/40{background-color:#eff6ff66}
.sfp-dash .bg-blue-500{--tw-bg-opacity:1;background-color:#3b82f6;background-color:rgb(59 130 246/var(--tw-bg-opacity,1))}
.sfp-dash .bg-blue-600{--tw-bg-opacity:1;background-color:#2563eb;background-color:rgb(37 99 235/var(--tw-bg-opacity,1))}
.sfp-dash .bg-cyan-100{--tw-bg-opacity:1;background-color:#cffafe;background-color:rgb(207 250 254/var(--tw-bg-opacity,1))}
.sfp-dash .bg-cyan-50{--tw-bg-opacity:1;background-color:#ecfeff;background-color:rgb(236 254 255/var(--tw-bg-opacity,1))}
.sfp-dash .bg-emerald-100{--tw-bg-opacity:1;background-color:#d1fae5;background-color:rgb(209 250 229/var(--tw-bg-opacity,1))}
.sfp-dash .bg-emerald-400{--tw-bg-opacity:1;background-color:#34d399;background-color:rgb(52 211 153/var(--tw-bg-opacity,1))}
.sfp-dash .bg-emerald-50{--tw-bg-opacity:1;background-color:#ecfdf5;background-color:rgb(236 253 245/var(--tw-bg-opacity,1))}
.sfp-dash .bg-emerald-50\/40{background-color:#ecfdf566}
.sfp-dash .bg-emerald-600{--tw-bg-opacity:1;background-color:#059669;background-color:rgb(5 150 105/var(--tw-bg-opacity,1))}
.sfp-dash .bg-gray-100{--tw-bg-opacity:1;background-color:#f3f4f6;background-color:rgb(243 244 246/var(--tw-bg-opacity,1))}
.sfp-dash .bg-gray-200{--tw-bg-opacity:1;background-color:#e5e7eb;background-color:rgb(229 231 235/var(--tw-bg-opacity,1))}
.sfp-dash .bg-gray-50{--tw-bg-opacity:1;background-color:#f9fafb;background-color:rgb(249 250 251/var(--tw-bg-opacity,1))}
.sfp-dash .bg-gray-50\/50{background-color:#f9fafb80}
.sfp-dash .bg-gray-50\/60{background-color:#f9fafb99}
.sfp-dash .bg-green-100{--tw-bg-opacity:1;background-color:#dcfce7;background-color:rgb(220 252 231/var(--tw-bg-opacity,1))}
.sfp-dash .bg-green-50{--tw-bg-opacity:1;background-color:#f0fdf4;background-color:rgb(240 253 244/var(--tw-bg-opacity,1))}
.sfp-dash .bg-green-500{--tw-bg-opacity:1;background-color:#22c55e;background-color:rgb(34 197 94/var(--tw-bg-opacity,1))}
.sfp-dash .bg-indigo-50{--tw-bg-opacity:1;background-color:#eef2ff;background-color:rgb(238 242 255/var(--tw-bg-opacity,1))}
.sfp-dash .bg-inherit{background-color:inherit}
.sfp-dash .bg-orange-100{--tw-bg-opacity:1;background-color:#ffedd5;background-color:rgb(255 237 213/var(--tw-bg-opacity,1))}
.sfp-dash .bg-orange-500{--tw-bg-opacity:1;background-color:#f97316;background-color:rgb(249 115 22/var(--tw-bg-opacity,1))}
.sfp-dash .bg-purple-50{--tw-bg-opacity:1;background-color:#faf5ff;background-color:rgb(250 245 255/var(--tw-bg-opacity,1))}
.sfp-dash .bg-purple-500{--tw-bg-opacity:1;background-color:#a855f7;background-color:rgb(168 85 247/var(--tw-bg-opacity,1))}
.sfp-dash .bg-red-100{--tw-bg-opacity:1;background-color:#fee2e2;background-color:rgb(254 226 226/var(--tw-bg-opacity,1))}
.sfp-dash .bg-red-50{--tw-bg-opacity:1;background-color:#fef2f2;background-color:rgb(254 242 242/var(--tw-bg-opacity,1))}
.sfp-dash .bg-rose-100{--tw-bg-opacity:1;background-color:#ffe4e6;background-color:rgb(255 228 230/var(--tw-bg-opacity,1))}
.sfp-dash .bg-rose-50{--tw-bg-opacity:1;background-color:#fff1f2;background-color:rgb(255 241 242/var(--tw-bg-opacity,1))}
.sfp-dash .bg-sky-100{--tw-bg-opacity:1;background-color:#e0f2fe;background-color:rgb(224 242 254/var(--tw-bg-opacity,1))}
.sfp-dash .bg-sky-50{--tw-bg-opacity:1;background-color:#f0f9ff;background-color:rgb(240 249 255/var(--tw-bg-opacity,1))}
.sfp-dash .bg-slate-100{--tw-bg-opacity:1;background-color:#f1f5f9;background-color:rgb(241 245 249/var(--tw-bg-opacity,1))}
.sfp-dash .bg-violet-100{--tw-bg-opacity:1;background-color:#ede9fe;background-color:rgb(237 233 254/var(--tw-bg-opacity,1))}
.sfp-dash .bg-violet-50{--tw-bg-opacity:1;background-color:#f5f3ff;background-color:rgb(245 243 255/var(--tw-bg-opacity,1))}
.sfp-dash .bg-violet-50\/60{background-color:#f5f3ff99}
.sfp-dash .bg-white{--tw-bg-opacity:1;background-color:#fff;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}
.sfp-dash .bg-white\/60{background-color:#fff9}
.sfp-dash .bg-white\/70{background-color:#ffffffb3}
.sfp-dash .bg-opacity-50{--tw-bg-opacity:0.5}
.sfp-dash .bg-opacity-80{--tw-bg-opacity:0.8}
.sfp-dash .object-contain{object-fit:contain}
.sfp-dash .object-cover{object-fit:cover}
.sfp-dash .p-1{padding:.25rem}
.sfp-dash .p-1\.5{padding:.375rem}
.sfp-dash .p-2{padding:.5rem}
.sfp-dash .p-2\.5{padding:.625rem}
.sfp-dash .p-3{padding:.75rem}
.sfp-dash .p-4{padding:1rem}
.sfp-dash .p-6{padding:1.5rem}
.sfp-dash .px-1{padding-left:.25rem;padding-right:.25rem}
.sfp-dash .px-1\.5{padding-left:.375rem;padding-right:.375rem}
.sfp-dash .px-2{padding-left:.5rem;padding-right:.5rem}
.sfp-dash .px-2\.5{padding-left:.625rem;padding-right:.625rem}
.sfp-dash .px-3{padding-left:.75rem;padding-right:.75rem}
.sfp-dash .px-4{padding-left:1rem;padding-right:1rem}
.sfp-dash .py-0\.5{padding-bottom:.125rem;padding-top:.125rem}
.sfp-dash .py-1{padding-bottom:.25rem;padding-top:.25rem}
.sfp-dash .py-1\.5{padding-bottom:.375rem;padding-top:.375rem}
.sfp-dash .py-2{padding-bottom:.5rem;padding-top:.5rem}
.sfp-dash .py-3{padding-bottom:.75rem;padding-top:.75rem}
.sfp-dash .py-4{padding-bottom:1rem;padding-top:1rem}
.sfp-dash .py-6{padding-bottom:1.5rem;padding-top:1.5rem}
.sfp-dash .py-8{padding-bottom:2rem;padding-top:2rem}
.sfp-dash .pl-1{padding-left:.25rem}
.sfp-dash .pr-1{padding-right:.25rem}
.sfp-dash .pr-2{padding-right:.5rem}
.sfp-dash .text-left{text-align:left}
.sfp-dash .text-center{text-align:center}
.sfp-dash .text-right{text-align:right}
.sfp-dash .align-top{vertical-align:top}
.sfp-dash .align-middle{vertical-align:middle}
.sfp-dash .text-2xl{font-size:1.5rem;line-height:2rem}
.sfp-dash .text-\[10px\]{font-size:10px}
.sfp-dash .text-\[11px\]{font-size:11px}
.sfp-dash .text-\[9px\]{font-size:9px}
.sfp-dash .text-base{font-size:1rem;line-height:1.5rem}
.sfp-dash .text-lg{font-size:1.125rem;line-height:1.75rem}
.sfp-dash .text-sm{font-size:.875rem;line-height:1.25rem}
.sfp-dash .text-xl{font-size:1.25rem;line-height:1.75rem}
.sfp-dash .text-xs{font-size:.75rem;line-height:1rem}
.sfp-dash .font-bold{font-weight:700}
.sfp-dash .font-medium{font-weight:500}
.sfp-dash .font-normal{font-weight:400}
.sfp-dash .font-semibold{font-weight:600}
.sfp-dash .uppercase{text-transform:uppercase}
.sfp-dash .capitalize{text-transform:capitalize}
.sfp-dash .text-amber-500{--tw-text-opacity:1;color:#f59e0b;color:rgb(245 158 11/var(--tw-text-opacity,1))}
.sfp-dash .text-amber-600{--tw-text-opacity:1;color:#d97706;color:rgb(217 119 6/var(--tw-text-opacity,1))}
.sfp-dash .text-amber-700{--tw-text-opacity:1;color:#b45309;color:rgb(180 83 9/var(--tw-text-opacity,1))}
.sfp-dash .text-amber-800{--tw-text-opacity:1;color:#92400e;color:rgb(146 64 14/var(--tw-text-opacity,1))}
.sfp-dash .text-amber-900{--tw-text-opacity:1;color:#78350f;color:rgb(120 53 15/var(--tw-text-opacity,1))}
.sfp-dash .text-blue-600{--tw-text-opacity:1;color:#2563eb;color:rgb(37 99 235/var(--tw-text-opacity,1))}
.sfp-dash .text-blue-700{--tw-text-opacity:1;color:#1d4ed8;color:rgb(29 78 216/var(--tw-text-opacity,1))}
.sfp-dash .text-blue-800{--tw-text-opacity:1;color:#1e40af;color:rgb(30 64 175/var(--tw-text-opacity,1))}
.sfp-dash .text-blue-900{--tw-text-opacity:1;color:#1e3a8a;color:rgb(30 58 138/var(--tw-text-opacity,1))}
.sfp-dash .text-cyan-700{--tw-text-opacity:1;color:#0e7490;color:rgb(14 116 144/var(--tw-text-opacity,1))}
.sfp-dash .text-emerald-500{--tw-text-opacity:1;color:#10b981;color:rgb(16 185 129/var(--tw-text-opacity,1))}
.sfp-dash .text-emerald-600{--tw-text-opacity:1;color:#059669;color:rgb(5 150 105/var(--tw-text-opacity,1))}
.sfp-dash .text-emerald-700{--tw-text-opacity:1;color:#047857;color:rgb(4 120 87/var(--tw-text-opacity,1))}
.sfp-dash .text-emerald-800{--tw-text-opacity:1;color:#065f46;color:rgb(6 95 70/var(--tw-text-opacity,1))}
.sfp-dash .text-emerald-900{--tw-text-opacity:1;color:#064e3b;color:rgb(6 78 59/var(--tw-text-opacity,1))}
.sfp-dash .text-gray-200{--tw-text-opacity:1;color:#e5e7eb;color:rgb(229 231 235/var(--tw-text-opacity,1))}
.sfp-dash .text-gray-300{--tw-text-opacity:1;color:#d1d5db;color:rgb(209 213 219/var(--tw-text-opacity,1))}
.sfp-dash .text-gray-400{--tw-text-opacity:1;color:#9ca3af;color:rgb(156 163 175/var(--tw-text-opacity,1))}
.sfp-dash .text-gray-500{--tw-text-opacity:1;color:#6b7280;color:rgb(107 114 128/var(--tw-text-opacity,1))}
.sfp-dash .text-gray-600{--tw-text-opacity:1;color:#4b5563;color:rgb(75 85 99/var(--tw-text-opacity,1))}
.sfp-dash .text-gray-700{--tw-text-opacity:1;color:#374151;color:rgb(55 65 81/var(--tw-text-opacity,1))}
.sfp-dash .text-gray-800{--tw-text-opacity:1;color:#1f2937;color:rgb(31 41 55/var(--tw-text-opacity,1))}
.sfp-dash .text-gray-900{--tw-text-opacity:1;color:#111827;color:rgb(17 24 39/var(--tw-text-opacity,1))}
.sfp-dash .text-green-600{--tw-text-opacity:1;color:#16a34a;color:rgb(22 163 74/var(--tw-text-opacity,1))}
.sfp-dash .text-green-700{--tw-text-opacity:1;color:#15803d;color:rgb(21 128 61/var(--tw-text-opacity,1))}
.sfp-dash .text-green-900{--tw-text-opacity:1;color:#14532d;color:rgb(20 83 45/var(--tw-text-opacity,1))}
.sfp-dash .text-indigo-600{--tw-text-opacity:1;color:#4f46e5;color:rgb(79 70 229/var(--tw-text-opacity,1))}
.sfp-dash .text-indigo-700{--tw-text-opacity:1;color:#4338ca;color:rgb(67 56 202/var(--tw-text-opacity,1))}
.sfp-dash .text-indigo-900{--tw-text-opacity:1;color:#312e81;color:rgb(49 46 129/var(--tw-text-opacity,1))}
.sfp-dash .text-orange-700{--tw-text-opacity:1;color:#c2410c;color:rgb(194 65 12/var(--tw-text-opacity,1))}
.sfp-dash .text-purple-600{--tw-text-opacity:1;color:#9333ea;color:rgb(147 51 234/var(--tw-text-opacity,1))}
.sfp-dash .text-purple-700{--tw-text-opacity:1;color:#7e22ce;color:rgb(126 34 206/var(--tw-text-opacity,1))}
.sfp-dash .text-purple-900{--tw-text-opacity:1;color:#581c87;color:rgb(88 28 135/var(--tw-text-opacity,1))}
.sfp-dash .text-red-600{--tw-text-opacity:1;color:#dc2626;color:rgb(220 38 38/var(--tw-text-opacity,1))}
.sfp-dash .text-red-700{--tw-text-opacity:1;color:#b91c1c;color:rgb(185 28 28/var(--tw-text-opacity,1))}
.sfp-dash .text-red-900{--tw-text-opacity:1;color:#7f1d1d;color:rgb(127 29 29/var(--tw-text-opacity,1))}
.sfp-dash .text-rose-500{--tw-text-opacity:1;color:#f43f5e;color:rgb(244 63 94/var(--tw-text-opacity,1))}
.sfp-dash .text-rose-600{--tw-text-opacity:1;color:#e11d48;color:rgb(225 29 72/var(--tw-text-opacity,1))}
.sfp-dash .text-rose-700{--tw-text-opacity:1;color:#be123c;color:rgb(190 18 60/var(--tw-text-opacity,1))}
.sfp-dash .text-rose-800{--tw-text-opacity:1;color:#9f1239;color:rgb(159 18 57/var(--tw-text-opacity,1))}
.sfp-dash .text-rose-900{--tw-text-opacity:1;color:#881337;color:rgb(136 19 55/var(--tw-text-opacity,1))}
.sfp-dash .text-sky-500{--tw-text-opacity:1;color:#0ea5e9;color:rgb(14 165 233/var(--tw-text-opacity,1))}
.sfp-dash .text-sky-600{--tw-text-opacity:1;color:#0284c7;color:rgb(2 132 199/var(--tw-text-opacity,1))}
.sfp-dash .text-sky-700{--tw-text-opacity:1;color:#0369a1;color:rgb(3 105 161/var(--tw-text-opacity,1))}
.sfp-dash .text-sky-900{--tw-text-opacity:1;color:#0c4a6e;color:rgb(12 74 110/var(--tw-text-opacity,1))}
.sfp-dash .text-slate-700{--tw-text-opacity:1;color:#334155;color:rgb(51 65 85/var(--tw-text-opacity,1))}
.sfp-dash .text-violet-500{--tw-text-opacity:1;color:#8b5cf6;color:rgb(139 92 246/var(--tw-text-opacity,1))}
.sfp-dash .text-violet-600{--tw-text-opacity:1;color:#7c3aed;color:rgb(124 58 237/var(--tw-text-opacity,1))}
.sfp-dash .text-violet-700{--tw-text-opacity:1;color:#6d28d9;color:rgb(109 40 217/var(--tw-text-opacity,1))}
.sfp-dash .text-violet-800{--tw-text-opacity:1;color:#5b21b6;color:rgb(91 33 182/var(--tw-text-opacity,1))}
.sfp-dash .text-violet-900{--tw-text-opacity:1;color:#4c1d95;color:rgb(76 29 149/var(--tw-text-opacity,1))}
.sfp-dash .text-white{--tw-text-opacity:1;color:#fff;color:rgb(255 255 255/var(--tw-text-opacity,1))}
.sfp-dash .underline{-webkit-text-decoration-line:underline;text-decoration-line:underline}
.sfp-dash .underline-offset-2{text-underline-offset:2px}
.sfp-dash .opacity-80{opacity:.8}
.sfp-dash .shadow-md,.sfp-dash .shadow-sm{box-shadow:0 0 #0000,0 0 #0000,var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}
.sfp-dash .shadow-sm{--tw-shadow:0 1px 2px 0 #0000000d;--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}
.sfp-dash .shadow-xl{--tw-shadow:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a;--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color),0 8px 10px -6px var(--tw-shadow-color);box-shadow:0 0 #0000,0 0 #0000,var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}
.sfp-dash .transition{transition-duration:.15s;transition-property:color,background-color,border-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-text-decoration-color,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-text-decoration-color,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}
.sfp-dash .transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}
.sfp-dash .transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,fill,stroke,-webkit-text-decoration-color;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,-webkit-text-decoration-color;transition-timing-function:cubic-bezier(.4,0,.2,1)}
.sfp-dash .transition-opacity{transition-duration:.15s;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1)}
.sfp-dash .transition-shadow{transition-duration:.15s;transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1)}
.sfp-dash .card{--tw-border-opacity:1;--tw-bg-opacity:1;--tw-shadow:0 1px 2px 0 #0000000d;--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);background-color:#fff;background-color:rgb(255 255 255/var(--tw-bg-opacity,1));border-color:#e5e7eb;border-color:rgb(229 231 235/var(--tw-border-opacity,1));border-radius:.5rem;border-width:1px;box-shadow:0 0 #0000,0 0 #0000,var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);padding:1.5rem}
.sfp-dash .hover\:border-blue-300:hover{--tw-border-opacity:1;border-color:#93c5fd;border-color:rgb(147 197 253/var(--tw-border-opacity,1))}
.sfp-dash .hover\:bg-black:hover{--tw-bg-opacity:1;background-color:#000;background-color:rgb(0 0 0/var(--tw-bg-opacity,1))}
.sfp-dash .hover\:bg-blue-100:hover{--tw-bg-opacity:1;background-color:#dbeafe;background-color:rgb(219 234 254/var(--tw-bg-opacity,1))}
.sfp-dash .hover\:bg-blue-50\/40:hover{background-color:#eff6ff66}
.sfp-dash .hover\:bg-blue-700:hover{--tw-bg-opacity:1;background-color:#1d4ed8;background-color:rgb(29 78 216/var(--tw-bg-opacity,1))}
.sfp-dash .hover\:bg-emerald-100:hover{--tw-bg-opacity:1;background-color:#d1fae5;background-color:rgb(209 250 229/var(--tw-bg-opacity,1))}
.sfp-dash .hover\:bg-emerald-700:hover{--tw-bg-opacity:1;background-color:#047857;background-color:rgb(4 120 87/var(--tw-bg-opacity,1))}
.sfp-dash .hover\:bg-gray-100:hover{--tw-bg-opacity:1;background-color:#f3f4f6;background-color:rgb(243 244 246/var(--tw-bg-opacity,1))}
.sfp-dash .hover\:bg-gray-200:hover{--tw-bg-opacity:1;background-color:#e5e7eb;background-color:rgb(229 231 235/var(--tw-bg-opacity,1))}
.sfp-dash .hover\:bg-gray-50:hover{--tw-bg-opacity:1;background-color:#f9fafb;background-color:rgb(249 250 251/var(--tw-bg-opacity,1))}
.sfp-dash .hover\:bg-indigo-100:hover{--tw-bg-opacity:1;background-color:#e0e7ff;background-color:rgb(224 231 255/var(--tw-bg-opacity,1))}
.sfp-dash .hover\:bg-purple-100:hover{--tw-bg-opacity:1;background-color:#f3e8ff;background-color:rgb(243 232 255/var(--tw-bg-opacity,1))}
.sfp-dash .hover\:bg-red-100:hover{--tw-bg-opacity:1;background-color:#fee2e2;background-color:rgb(254 226 226/var(--tw-bg-opacity,1))}
.sfp-dash .hover\:bg-rose-100:hover{--tw-bg-opacity:1;background-color:#ffe4e6;background-color:rgb(255 228 230/var(--tw-bg-opacity,1))}
.sfp-dash .hover\:bg-white:hover{--tw-bg-opacity:1;background-color:#fff;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}
.sfp-dash .hover\:text-gray-600:hover{--tw-text-opacity:1;color:#4b5563;color:rgb(75 85 99/var(--tw-text-opacity,1))}
.sfp-dash .hover\:text-gray-700:hover{--tw-text-opacity:1;color:#374151;color:rgb(55 65 81/var(--tw-text-opacity,1))}
.sfp-dash .hover\:underline:hover{-webkit-text-decoration-line:underline;text-decoration-line:underline}
.sfp-dash .hover\:opacity-75:hover{opacity:.75}
.sfp-dash .hover\:shadow-md:hover,.sfp-dash .hover\:shadow-sm:hover{box-shadow:0 0 #0000,0 0 #0000,var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}
.sfp-dash .hover\:shadow-sm:hover{--tw-shadow:0 1px 2px 0 #0000000d;--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}
.sfp-dash .focus\:outline-none:focus{outline:2px solid #0000;outline-offset:2px}
.sfp-dash .focus\:ring-1:focus,.sfp-dash .focus\:ring-2:focus{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),0 0 #0000;box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}
.sfp-dash .focus\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)}
.sfp-dash .focus\:ring-primary-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(59 130 246/var(--tw-ring-opacity,1))}
.sfp-dash .disabled\:opacity-50:disabled{opacity:.5}
.sfp-dash .disabled\:opacity-60:disabled{opacity:.6}
.sfp-dash .group:hover .group-hover\:scale-105{--tw-scale-x:1.05;--tw-scale-y:1.05}
.sfp-dash .group:hover .group-hover\:scale-105,.sfp-dash .group:hover .group-hover\:scale-110{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
.sfp-dash .group:hover .group-hover\:scale-110{--tw-scale-x:1.1;--tw-scale-y:1.1}
.sfp-dash .group:hover .group-hover\:bg-black\/55{background-color:#0000008c}
.sfp-dash .group:hover .group-hover\:text-blue-600{--tw-text-opacity:1;color:#2563eb;color:rgb(37 99 235/var(--tw-text-opacity,1))}
.sfp-dash .group:hover .group-hover\:text-gray-500{--tw-text-opacity:1;color:#6b7280;color:rgb(107 114 128/var(--tw-text-opacity,1))}
.sfp-dash .group:hover .group-hover\:text-indigo-600{--tw-text-opacity:1;color:#4f46e5;color:rgb(79 70 229/var(--tw-text-opacity,1))}
.sfp-dash .group:hover .group-hover\:underline{-webkit-text-decoration-line:underline;text-decoration-line:underline}
.sfp-dash .group:hover .group-hover\:opacity-100{opacity:1}
.sfp-dash .group:hover .group-hover\:shadow-md{--tw-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color);box-shadow:0 0 #0000,0 0 #0000,var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}
.sfp-dash .group:hover .group-hover\:brightness-95{--tw-brightness:brightness(.95);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}
@media (min-width:640px){.sfp-dash .sm\:col-span-1{grid-column:span 1/span 1}.sfp-dash .sm\:h-64{height:16rem}.sfp-dash .sm\:h-72{height:18rem}.sfp-dash .sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sfp-dash .sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.sfp-dash .sm\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.sfp-dash .sm\:flex-row{flex-direction:row}.sfp-dash .sm\:items-center{align-items:center}.sfp-dash .sm\:justify-between{justify-content:space-between}.sfp-dash .sm\:gap-6{gap:1.5rem}.sfp-dash .sm\:space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(.75rem*var(--tw-space-y-reverse));margin-top:calc(.75rem*(1 - var(--tw-space-y-reverse)))}.sfp-dash .sm\:space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(1rem*var(--tw-space-y-reverse));margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)))}.sfp-dash .sm\:space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(1.5rem*var(--tw-space-y-reverse));margin-top:calc(1.5rem*(1 - var(--tw-space-y-reverse)))}.sfp-dash .sm\:p-2{padding:.5rem}.sfp-dash .sm\:p-3{padding:.75rem}.sfp-dash .sm\:p-4{padding:1rem}.sfp-dash .sm\:p-5{padding:1.25rem}.sfp-dash .sm\:p-6{padding:1.5rem}.sfp-dash .sm\:px-3{padding-left:.75rem;padding-right:.75rem}.sfp-dash .sm\:py-2{padding-bottom:.5rem;padding-top:.5rem}.sfp-dash .sm\:text-\[11px\]{font-size:11px}.sfp-dash .sm\:text-base{font-size:1rem;line-height:1.5rem}.sfp-dash .sm\:text-lg{font-size:1.125rem;line-height:1.75rem}.sfp-dash .sm\:text-sm{font-size:.875rem;line-height:1.25rem}.sfp-dash .sm\:text-xl{font-size:1.25rem;line-height:1.75rem}.sfp-dash .sm\:text-xs{font-size:.75rem;line-height:1rem}}
@media (min-width:768px){.sfp-dash .md\:flex-row{flex-direction:row}.sfp-dash .md\:items-center{align-items:center}.sfp-dash .md\:justify-between{justify-content:space-between}}
@media (min-width:1024px){.sfp-dash .lg\:w-\[280px\]{width:280px}.sfp-dash .lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sfp-dash .lg\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.sfp-dash .lg\:flex-row{flex-direction:row}.sfp-dash .lg\:items-center{align-items:center}.sfp-dash .lg\:justify-between{justify-content:space-between}}
@media (min-width:1280px){.sfp-dash .xl\:grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.sfp-dash .xl\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sfp-dash .xl\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Hand-authored additions — NOT part of the extracted Tailwind subset above.
   The subset only contains classes the original bundle happened to use, so any
   new class referenced from dashboard-erp.js (e.g. max-w-5xl, rounded-2xl,
   max-h-[88vh]) silently renders with NO rule at all (no error, just missing
   style) — that's what caused the engineer-activities modal to go full-bleed,
   square-cornered and uncapped in height. Real, hand-written rules below don't
   have that failure mode. */
.sfp-dash .sfp-act-modal{width:100%;max-width:1040px;max-height:82vh;border-radius:16px;overflow:hidden;}
@media (max-width:480px){.sfp-dash .sfp-act-modal{max-height:94vh;border-radius:12px;}}
/* This modal is wide enough to reach under the app's global sidebar (.sidebar,
   z-index:60) — the shared overlay backdrop is only z-50, so without this the
   sidebar painted over the modal's left edge. Scoped to this one overlay only. */
.sfp-dash .sfp-act-overlay{z-index:70;}

/* ------------------------------------------------- Order Status tiles (os-*)
   Full-width Order Status card KPI tiles. Hand-authored so the accent chip,
   hover-lift and uppercase label render without depending on Tailwind classes
   that aren't in the extracted subset. Accent is themed per status via a
   modifier class (os-amber / os-rose / …) driving CSS custom properties. */
.sfp-dash .sfp-ostat{position:relative;display:flex;flex-direction:column;gap:6px;padding:10px 12px;border-radius:10px;border:1px solid var(--os-bd,#e5e7eb);background:var(--os-bg,#fff);text-align:left;cursor:pointer;transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease;}
.sfp-dash .sfp-ostat:hover{transform:translateY(-1px);box-shadow:0 8px 18px -10px rgba(15,23,42,.26);border-color:var(--os-ac,#cbd5e1);}
.sfp-dash .sfp-ostat:focus-visible{outline:2px solid var(--os-ac,#2563eb);outline-offset:2px;}
.sfp-dash .sfp-ostat-top{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.sfp-dash .sfp-ostat-label{font-size:.62rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--os-ac,#64748b);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sfp-dash .sfp-ostat-ic{flex:0 0 auto;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;border-radius:7px;background:var(--os-ic,#f1f5f9);color:var(--os-ac,#475569);}
.sfp-dash .sfp-ostat-ic svg{width:14px;height:14px;}
.sfp-dash .sfp-ostat-val{font-size:1.25rem;font-weight:800;line-height:1;letter-spacing:-.02em;color:#0f172a;font-variant-numeric:tabular-nums;}
.sfp-dash .sfp-ostat.os-amber{--os-ac:#b45309;--os-bg:#fffbeb;--os-bd:#fde68a;--os-ic:#fef3c7;}
.sfp-dash .sfp-ostat.os-rose{--os-ac:#be123c;--os-bg:#fff1f2;--os-bd:#fecdd3;--os-ic:#ffe4e6;}
.sfp-dash .sfp-ostat.os-violet{--os-ac:#6d28d9;--os-bg:#f5f3ff;--os-bd:#ddd6fe;--os-ic:#ede9fe;}
.sfp-dash .sfp-ostat.os-blue{--os-ac:#1d4ed8;--os-bg:#eff6ff;--os-bd:#bfdbfe;--os-ic:#dbeafe;}
.sfp-dash .sfp-ostat.os-emerald{--os-ac:#047857;--os-bg:#ecfdf5;--os-bd:#a7f3d0;--os-ic:#d1fae5;}

/* Utilities referenced by dashboard-storefront.js that the extracted subset
   above doesn't happen to contain (the original bundle never used them).
   Same values Tailwind would generate, so both dashboard tabs stay identical. */
.sfp-dash .hover\:bg-amber-100:hover{--tw-bg-opacity:1;background-color:rgb(254 243 199/var(--tw-bg-opacity,1))}
.sfp-dash .hover\:border-gray-300:hover{--tw-border-opacity:1;border-color:rgb(209 213 219/var(--tw-border-opacity,1))}
/* The drill-down modal needs a shell wider than the 3xl detail dialogs — its
   rows carry a title, pills and an amount on one line. */
.sfp-dash .max-w-4xl{max-width:56rem}
/* Stat-tile typography: the same treatment .sfp-ostat hard-codes (tracked
   uppercase caption, tight tabular headline), exposed as utilities so the
   Business Overview tiles can share it. */
.sfp-dash .tracking-wide{letter-spacing:.04em}
.sfp-dash .tracking-tight{letter-spacing:-.02em}
.sfp-dash .tabular-nums{font-variant-numeric:tabular-nums}

/* ------------------------------------------------- Live Chat (lc-*) -------
   Executive live-chat console, ported from ops.signwale admin-live-chat.html.
   Every selector is lc- prefixed and used only by pages/live-chat.js. */
.lc-grid { display: grid; grid-template-columns: 360px 1fr; gap: 14px; align-items: stretch; min-height: 0; height: calc(100vh - var(--topbar-h) - 148px); }
.lc-card { display: flex; flex-direction: column; min-height: 320px; overflow: hidden; }
.lc-card-head { display: flex; align-items: center; gap: 10px; }
.lc-count { min-width: 28px; height: 24px; padding: 0 8px; border-radius: var(--pill); display: inline-flex; align-items: center; justify-content: center; font-size: 0.76rem; font-weight: 700; background: var(--brand-soft); color: var(--brand-strong); border: 1px solid #cadcf7; }
.lc-filter { width: auto; min-height: 32px; padding: 4px 8px; font-size: 0.8rem; }
.lc-queue { flex: 1; overflow: auto; padding: 12px; display: grid; gap: 10px; align-content: start; }
.lc-item { border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--surface); padding: 10px; display: grid; gap: 6px; transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; }
.lc-item:hover { border-color: #bdd2f2; box-shadow: 0 6px 16px rgba(16, 40, 84, 0.08); transform: translateY(-1px); }
.lc-item.active { border-color: #73a7ef; box-shadow: 0 8px 20px rgba(37, 99, 235, 0.14); background: #f7fbff; }
.lc-item strong { font-size: 0.92rem; }
.lc-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.lc-meta { color: var(--muted); font-size: 0.78rem; line-height: 1.35; word-break: break-word; }
.lc-clamp { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.lc-join { min-height: 32px; padding: 4px 12px; font-size: 0.8rem; }
.lc-chat-head { padding: 12px 14px; border-bottom: 1px solid var(--line); background: var(--surface-2); display: flex; align-items: center; gap: 10px; }
.lc-chat-titles { min-width: 0; flex: 1; }
.lc-chat-title { font-weight: 700; }
.lc-chat-sub { color: var(--muted); font-size: 0.78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-messages { flex: 1; overflow: auto; padding: 14px 12px; display: flex; flex-direction: column; gap: 10px; background: radial-gradient(620px 200px at 12% 0%, rgba(37, 99, 235, 0.07), transparent 74%), linear-gradient(180deg, #fdfefe 0%, #eff5ff 100%); }
.lc-msg-row { display: flex; flex-direction: column; gap: 4px; max-width: 84%; }
.lc-msg-row.customer { align-self: flex-start; }
.lc-msg-row.staff { align-self: flex-end; align-items: flex-end; }
.lc-bubble { max-width: 100%; padding: 10px 12px; border-radius: 12px; font-size: 0.85rem; line-height: 1.45; white-space: pre-wrap; word-break: break-word; box-shadow: 0 4px 14px rgba(14, 34, 70, 0.08); }
.lc-bubble.customer { border: 1px solid #d4deef; background: var(--surface); color: #0f1f36; }
.lc-bubble.staff { border: 1px solid var(--brand-strong); background: linear-gradient(120deg, var(--brand), var(--brand-strong)); color: #fff; }
.lc-bubble-meta { font-size: 0.72rem; color: #6d84a8; padding: 0 2px; }
.lc-system { align-self: center; background: var(--warn-soft); color: var(--warn); border-radius: var(--pill); padding: 4px 14px; font-size: 0.74rem; font-weight: 600; }
.lc-file-links { display: grid; gap: 6px; margin-top: 8px; }
.lc-file-link { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; padding: 7px 9px; border-radius: 9px; border: 1px solid rgba(37, 99, 235, 0.2); background: #f3f8ff; color: #0b56b3; text-decoration: none; overflow-wrap: anywhere; }
.lc-file-link.lc-file-image { padding: 0; border: 0; background: transparent; }
.lc-bubble.staff .lc-file-link { color: #fff; border-color: rgba(255, 255, 255, 0.34); background: rgba(255, 255, 255, 0.14); }
.lc-file-thumb { width: min(220px, 100%); max-height: 160px; object-fit: cover; border-radius: 9px; border: 1px solid rgba(37, 99, 235, 0.18); display: block; }
.lc-empty { margin: auto; width: min(360px, 100%); border: 1px dashed #c7d9f2; border-radius: 14px; padding: 18px 16px; text-align: center; color: #557193; background: rgba(255, 255, 255, 0.75); font-size: 0.86rem; line-height: 1.45; }
.lc-compose { border-top: 1px solid var(--line); padding: 11px 12px; display: flex; gap: 8px; background: var(--surface); align-items: center; }
.lc-input { flex: 1; min-height: 40px; }
.lc-attach-btn { min-height: 40px; min-width: 42px; display: inline-flex; align-items: center; justify-content: center; padding: 0 10px; color: var(--ink-soft); }
.lc-attach-preview { border-top: 1px solid var(--line); padding: 8px 12px; display: flex; flex-wrap: wrap; gap: 8px; background: var(--surface-2); }
.lc-attach-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--surface); border-radius: var(--pill); padding: 3px 6px 3px 4px; font-size: 0.76rem; color: var(--ink-soft); max-width: 220px; }
.lc-attach-chip img { width: 26px; height: 26px; object-fit: cover; border-radius: 50%; }
.lc-attach-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-attach-x { border: 0; background: transparent; cursor: pointer; font-size: 0.95rem; line-height: 1; color: var(--muted); padding: 2px 4px; }
.lc-attach-x:hover { color: var(--danger); }
.lc-status { min-height: 18px; font-size: 0.76rem; color: var(--muted); padding: 4px 12px 10px; margin: 0; }
.lc-status.err { color: var(--danger); }
.lc-status.ok { color: var(--ok); }
.lc-live { display: inline-flex; align-items: center; gap: 5px; font-size: 0.72rem; font-weight: 700; margin-right: 4px; }
.lc-live.on { color: var(--ok); }
.lc-live.off { color: var(--muted); }
.lc-live-label { text-transform: uppercase; letter-spacing: 0.04em; }
.lc-toast-stack { position: fixed; top: calc(var(--topbar-h) + 12px); right: 14px; width: min(360px, calc(100vw - 20px)); display: grid; gap: 10px; z-index: 4000; pointer-events: none; }
.lc-toast { pointer-events: auto; border-radius: 16px; border: 1px solid rgba(194, 212, 237, 0.75); background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(14px); box-shadow: 0 14px 30px rgba(10, 34, 72, 0.2); padding: 10px 12px 11px; color: #1a2c48; transform: translateY(-8px) scale(0.985); opacity: 0; animation: lc-toast-in 260ms cubic-bezier(0.22, 1, 0.36, 1) forwards; cursor: pointer; }
.lc-toast.closing { animation: lc-toast-out 220ms ease forwards; }
.lc-toast-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.lc-toast-brand { display: inline-flex; align-items: center; gap: 8px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.01em; color: #46668f; text-transform: uppercase; }
.lc-toast-dot { width: 16px; height: 16px; border-radius: 4px; background: linear-gradient(135deg, var(--brand), var(--brand-strong)); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.42); }
.lc-toast-time { font-size: 0.72rem; color: #6a83a8; white-space: nowrap; }
.lc-toast-title { margin: 0; font-size: 0.87rem; font-weight: 700; color: #193153; line-height: 1.28; }
.lc-toast-text { margin: 2px 0 0; font-size: 0.8rem; line-height: 1.36; color: #2d466b; }
@keyframes lc-toast-in { from { opacity: 0; transform: translateY(-8px) scale(0.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes lc-toast-out { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(-6px) scale(0.985); } }
@media (max-width: 980px) {
  .lc-grid { grid-template-columns: 1fr; height: auto; }
  .lc-card { min-height: 320px; }
  .lc-messages { max-height: 52vh; }
  .lc-msg-row { max-width: 92%; }
  .lc-toast-stack { left: 10px; right: 10px; width: auto; }
}