:root {
  --bg: #0c0a09;
  --bg-soft: #110f0d;
  --card: #141210;
  --card-2: #1c1815;
  --border: rgba(201, 162, 74, 0.18);
  --border-strong: rgba(201, 162, 74, 0.38);
  --gold: #c9a24a;
  --gold-2: #e9c86b;
  --gold-bright: #f2d68f;
  --text: #f5efe2;
  --muted: #a8a29e;
  --focus-ring: 0 0 0 3px rgba(201, 162, 74, 0.32);
}

:focus-visible {
  outline: none !important;
  box-shadow: var(--focus-ring) !important;
  border-color: var(--gold) !important;
}

/* =================================================================
   Viktorium — Shared Operational UI Component Stylesheet
   File: cloudflare/assets/vikt-ui.css
   
   Hard Constraints:
   1. 100% token-driven (from vikt-tokens.css) — ZERO hardcoded hex values.
   2. Maximum 2 backdrop-filter surfaces per page (Top Bar + Drawer).
   3. Solid backgrounds for repeating list items (Zero GPU fill-rate penalty).
   4. Pure CSS Logical Properties (Full LTR & RTL support).
   5. High-contrast typography (>= 7:1) and >= 44px touch targets.
   6. 60fps scrolling on mid-range tablets with 50+ cards / 200+ messages.
   ================================================================= */

/* -----------------------------------------------------------------
   1. OFFLINE / STALE STATUS BAR (.vikt-offline-bar)
   Top-level persistent indicator for disconnected or stale (>30s) states.
   ----------------------------------------------------------------- */
.vikt-offline-bar {
  display: none;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  min-height: 40px;
  padding: var(--space-2) var(--space-4);
  background: var(--offline-bg);
  color: var(--offline-text);
  font-family: var(--font-body);
  font-size: var(--fs-md);
  font-weight: 700;
  text-align: center;
  z-index: 990;
  box-sizing: border-box;
}

.vikt-offline-bar.show {
  display: flex;
}

.vikt-offline-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--danger);
  flex-shrink: 0;
  animation: pulse-glow 1.5s infinite;
}

/* -----------------------------------------------------------------
   2. TOP BAR & SHELL (.vikt-topbar, header, .chat-backbar)
   Backdrop-filter surface #1 (Allowed on header)
   ----------------------------------------------------------------- */
.vikt-topbar,
.chat-backbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-4);
  background: rgba(10, 9, 8, 0.92);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-bottom: 1px solid var(--surface-border);
  min-height: 56px;
  box-sizing: border-box;
}

/* Header action buttons */
.topbar-actions,
.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* -----------------------------------------------------------------
   3. NAVIGATION TABS (.vikt-tabs, .vikt-tab, #page-tabs, .mtab)
   Active state: Neutral raised surface + solid bottom/left indicator.
   NO gold glow.
   ----------------------------------------------------------------- */
.vikt-tabs,
#page-tabs,
.messenger-tabs {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--surface-sunken);
  padding: var(--space-1) var(--space-2);
  border-bottom: 1px solid var(--surface-border-subtle);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.vikt-tab,
#page-tabs button,
.mtab {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-height: 48px;
  padding: var(--space-2) var(--space-4);
  background: transparent;
  color: var(--muted);
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  touch-action: manipulation;
  transition: color var(--transition-fast), background var(--transition-fast);
}

.vikt-tab:hover,
#page-tabs button:hover,
.mtab:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
}

.vikt-tab.active,
#page-tabs button.active,
.mtab.active {
  color: var(--text);
  background: var(--tab-active-surface);
  font-weight: 700;
}

.vikt-tab.active::after,
#page-tabs button.active::after,
.mtab.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  inset-inline-start: 12%;
  inset-inline-end: 12%;
  height: 3px;
  background: var(--tab-active-indicator);
  border-radius: 3px 3px 0 0;
}

.tab-sub {
  font-size: var(--fs-xs);
  color: var(--muted-2);
  font-weight: normal;
  margin-top: 2px;
}

/* -----------------------------------------------------------------
   4. OPERATIONAL CARDS & PANELS (.vikt-card, .card-unified, .kpi)
   Used for Order Cards, Complaint Cards, Analytics Cards, Table Rows.
   SOLID surface for 60fps scrolling — NO backdrop-filter, NO blur.
   ----------------------------------------------------------------- */
.vikt-card,
.card-unified,
.kpi-card {
  background: var(--surface-card);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  color: var(--text);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
  contain: content;
}

.card-unified {
  margin-bottom: var(--space-4);
}

.panel-title {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--text);
  margin-bottom: var(--space-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* KPI Card Typography */
.kpi {
  background: var(--surface-card);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  min-height: 84px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

.kpi-card.kpi-hero {
  border-color: var(--surface-border-gold);
}

.kpi .label {
  font-size: var(--fs-sm);
  color: var(--muted);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-1);
}

.kpi .value {
  font-size: var(--fs-2xl);
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.kpi-delta {
  font-size: var(--fs-xs);
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  margin-inline-start: var(--space-2);
}

.kpi-delta.up {
  color: var(--success);
  background: rgba(76, 175, 109, 0.12);
}

.kpi-delta.down {
  color: var(--danger);
  background: rgba(226, 88, 92, 0.12);
}

/* -----------------------------------------------------------------
   5. ORDER RAIL TICKETS (.ticket)
   Operational kitchen/floor tickets.
   Primary table & time: minimum 20px and bold.
   High-contrast, zero-blur solid cards.
   ----------------------------------------------------------------- */
#rail-cards {
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  padding: var(--space-2) 0;
  -webkit-overflow-scrolling: touch;
}

.ticket {
  flex: 0 0 280px;
  background: var(--surface-card);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  color: var(--text);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  contain: content;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.ticket-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ticket .meta {
  font-size: var(--fs-sm);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.ticket .name {
  font-size: var(--fs-lg);
  font-weight: 800;
  color: var(--text);
}

.ticket .items {
  font-size: var(--fs-base);
  color: var(--text);
  line-height: 1.4;
  white-space: pre-wrap;
}

.ticket .foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: var(--space-2);
  border-top: 1px solid var(--surface-border-subtle);
}

.ticket .total {
  font-size: var(--fs-xl);
  font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* Order Type Chips */
.type-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: var(--fs-sm);
  font-weight: 700;
  margin-inline-end: var(--space-2);
}

.chip-dinein {
  background: var(--surface-raised);
  border: 1px solid var(--surface-border);
  color: var(--text);
}

.chip-quick {
  background: rgba(201, 162, 74, 0.15);
  border: 1px solid var(--gold-deep);
  color: var(--gold-bright);
}

.chip-online {
  background: rgba(111, 168, 201, 0.15);
  border: 1px solid var(--blue);
  color: var(--blue);
}

/* -----------------------------------------------------------------
   6. PILLS & STATUS TAGS (.vikt-pill, .stamp, .filters button)
   Dot + Text Label (Glare & Colorblind Safe).
   ----------------------------------------------------------------- */
.vikt-pill,
.filters button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-1) var(--space-3);
  background: var(--surface-card);
  border: 1px solid var(--surface-border);
  border-radius: 22px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-md);
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
  white-space: nowrap;
}

.vikt-pill:hover,
.filters button:hover {
  background: var(--surface-card-hover);
}

.vikt-pill.active,
.filters button.active {
  background: var(--surface-raised);
  border-color: var(--tab-active-indicator);
  color: var(--text);
  font-weight: 700;
}

.filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--surface-sunken);
  color: var(--text);
  font-size: var(--fs-xs);
  font-weight: 700;
}

.stamp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: var(--fs-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.stamp::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.stamp.status-in-kitchen,
.stamp.status-kitchen,
.stamp.cooking {
  background: rgba(233, 200, 107, 0.14);
  color: var(--gold-2);
  border: 1px solid var(--gold-deep);
}
.stamp.status-in-kitchen::before,
.stamp.status-kitchen::before,
.stamp.cooking::before {
  background: var(--gold-2);
}

.stamp.status-delivered,
.stamp.status-paid,
.stamp.ready {
  background: rgba(76, 175, 109, 0.14);
  color: var(--success);
  border: 1px solid var(--success);
}
.stamp.status-delivered::before,
.stamp.status-paid::before,
.stamp.ready::before {
  background: var(--success);
}

.stamp.status-shipped {
  background: rgba(111, 168, 201, 0.14);
  color: var(--blue);
  border: 1px solid var(--blue);
}
.stamp.status-shipped::before {
  background: var(--blue);
}

.stamp.status-cancelled,
.stamp.urgent {
  background: rgba(226, 88, 92, 0.14);
  color: var(--danger);
  border: 1px solid var(--danger);
}
.stamp.status-cancelled::before,
.stamp.urgent::before {
  background: var(--danger);
}

/* -----------------------------------------------------------------
   7. OPERATIONAL TABLES (Admin & Revenue Journals)
   Sticky headers, high contrast >= 7:1, tabular figures.
   ----------------------------------------------------------------- */
#table-scroll,
#revenue-table-scroll {
  max-height: 480px;
  overflow-y: auto;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--text);
}

thead th {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--surface-sunken);
  color: var(--text);
  font-weight: 700;
  text-transform: uppercase;
  font-size: var(--fs-xs);
  letter-spacing: 0.05em;
  padding: var(--space-3) var(--space-2);
  border-bottom: 2px solid var(--surface-border);
  text-align: start;
}

tbody tr {
  border-bottom: 1px solid var(--surface-border-subtle);
  background: var(--surface-card);
}

tbody tr:hover {
  background: var(--surface-card-hover);
}

tbody td {
  padding: var(--space-3) var(--space-2);
  vertical-align: middle;
}

/* -----------------------------------------------------------------
   8. COMPLAINT CARDS (.complaint-card)
   Open/Late = Wine border, Resolved = Muted.
   ----------------------------------------------------------------- */
.complaint-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  margin-bottom: var(--space-3);
  background: var(--surface-card);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  contain: content;
}

.complaint-card:not(.resolved) {
  border-inline-start: 4px solid var(--danger);
}

.complaint-card.resolved {
  opacity: 0.8;
  border-inline-start: 4px solid var(--success);
}

.complaint-card.resolved .complaint-text {
  color: var(--muted);
  text-decoration: line-through;
}

/* -----------------------------------------------------------------
   9. CHAT MESSAGE THREAD & BUBBLES
   Preserve exact scroll container properties: internal scroll,
   box-sizing, height flex so JS stickiness calculation is exact.
   WhatsApp standard ticks: grey sent -> grey delivered -> blue read.
   ----------------------------------------------------------------- */
#thread,
.thread {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--space-3) var(--space-3) var(--space-2);
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
}

.row {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--space-2);
  width: 100%;
}

.row.mine {
  align-items: flex-end;
}

.row.other {
  align-items: flex-start;
}

.bubble {
  max-width: min(82%, 460px);
  padding: 10px 14px;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.5;
  border-radius: var(--radius-md);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  word-break: break-word;
  contain: content;
}

/* Received Message Bubble: Solid neutral dark surface, NO blur, NO glow */
.row.other .bubble {
  background: var(--surface-bubble-in);
  border: 1px solid var(--surface-border);
  color: var(--text);
  border-bottom-inline-start-radius: 4px;
}

/* Sent Message Bubble: Solid neutral dark surface, slightly lighter, NO gradient, NO blur */
.row.mine .bubble {
  background: var(--surface-bubble-out);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text);
  border-bottom-inline-end-radius: 4px;
}

.msg-time {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  margin-top: 4px;
  font-size: var(--fs-xs);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* WhatsApp Delivery Ticks */
.icon-tick {
  width: 14px;
  height: 14px;
  display: inline-block;
  vertical-align: middle;
}

.tick-sent {
  color: var(--tick-sent);
}

.tick-delivered {
  color: var(--tick-delivered);
}

.tick-read {
  color: var(--tick-read); /* WhatsApp Blue */
}

/* Day Separator */
.daysep {
  align-self: center;
  background: var(--surface-sunken);
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 12px;
  border: 1px solid var(--surface-border-subtle);
  margin: var(--space-3) 0;
}

/* -----------------------------------------------------------------
   10. CHAT COMPOSER DOCK & INPUTS (#composer, #chat-input, #send-btn)
   Floating composer dock with 44px+ touch targets.
   ----------------------------------------------------------------- */
#composer,
.chat-footer {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--surface-card);
  border-top: 1px solid var(--surface-border);
  box-sizing: border-box;
}

#chat-input {
  flex: 1;
  min-height: 44px;
  max-height: 132px;
  padding: 10px var(--space-3);
  background: var(--surface-sunken);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  resize: none;
  box-sizing: border-box;
  line-height: 1.4;
}

#chat-input:focus {
  border-color: var(--gold);
  outline: none;
}

#send-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--gold-ink);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  touch-action: manipulation;
}

#send-btn:active {
  transform: scale(0.96);
}

/* -----------------------------------------------------------------
   11. PRIMARY BUTTONS & CTAs (.vikt-btn-primary, .export-btn)
   Gold ONLY for Primary Action & Keyboard Focus.
   ----------------------------------------------------------------- */
.vikt-btn-primary,
.export-btn,
#login-btn,
#confirm-modal-confirm {
  min-height: 44px;
  min-width: 44px;
  padding: var(--space-2) var(--space-4);
  background: var(--gold);
  color: var(--gold-ink);
  border: 1px solid var(--gold-bright);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 800;
  cursor: pointer;
  touch-action: manipulation;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

.vikt-btn-primary:hover,
.export-btn:hover,
#login-btn:hover {
  background: var(--gold-bright);
}

.btn-danger {
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  background: var(--wine);
  color: #ffffff;
  border: 1px solid var(--danger);
  border-radius: var(--radius-sm);
  font-weight: 700;
  cursor: pointer;
}

/* -----------------------------------------------------------------
   12. SLIDE-OUT DRAWER (.staff-drawer, .nav-drawer, .drawer-panel)
   Backdrop-filter surface #2 (Allowed on drawer)
   Positioned fixed, slide from inset-inline-start.
   ----------------------------------------------------------------- */
.staff-drawer,
.nav-drawer {
  position: fixed;
  inset: 0;
  z-index: 1001;
  display: none;
}

.staff-drawer.open,
.nav-drawer.open {
  display: block;
}

.drawer-backdrop,
.side-scrim {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  z-index: 1001;
}

.drawer-panel {
  position: fixed;
  top: 0;
  bottom: 0;
  inset-inline-start: 0;
  width: min(85vw, 360px);
  z-index: 1002;
  background: rgba(18, 16, 14, 0.96);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-inline-end: 1px solid var(--surface-border);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

/* -----------------------------------------------------------------
   13. RECENT CHANNEL ROWS (.recent-item, .conv-row)
   Active channel: Neutral raised surface + solid left indicator bar.
   ----------------------------------------------------------------- */
.recent-item,
.conv-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--surface-border-subtle);
  background: var(--surface-card);
  cursor: pointer;
  min-height: 56px;
  position: relative;
}

.recent-item:hover,
.conv-row:hover {
  background: var(--surface-card-hover);
}

.recent-item.active,
.conv-row.active {
  background: var(--surface-raised);
}

.recent-item.active::before,
.conv-row.active::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  inset-inline-start: 0;
  width: 4px;
  background: var(--tab-active-indicator);
}

/* -----------------------------------------------------------------
   14. EMPTY & SKELETON STATES (.state-empty, .state-loading, .chat-empty)
   ----------------------------------------------------------------- */
.state-empty,
.chat-empty,
.vikt-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-6) var(--space-4);
  text-align: center;
  color: var(--muted);
  gap: var(--space-3);
  min-height: 200px;
}

.state-empty .state-icon,
.chat-empty svg {
  width: 48px;
  height: 48px;
  opacity: 0.5;
}

.state-empty .state-text,
.chat-empty {
  font-size: var(--fs-base);
  color: var(--text);
  font-weight: 600;
}

.state-loading,
.vikt-skeleton {
  background: linear-gradient(90deg, var(--surface-card) 25%, var(--surface-raised) 50%, var(--surface-card) 75%);
  background-size: 200% 100%;
  animation: vikt-shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
  min-height: 48px;
}

@keyframes vikt-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* -----------------------------------------------------------------
   15. CHART.JS CONTAINERS (Preserve ResizeObserver and sharpness)
   Border radius goes on the wrapper, NOT on canvas.
   NO backdrop-filter, NO transform.
   ----------------------------------------------------------------- */
#chart-canvas-wrap,
#revenue-chart-canvas-wrap {
  position: relative;
  width: 100%;
  height: 280px;
  border-radius: var(--radius-sm);
  overflow: hidden;
}

#chart-canvas,
#revenue-chart-canvas {
  width: 100% !important;
  height: 100% !important;
}

/* -----------------------------------------------------------------
   16. FULL RTL SUPPORT
   ----------------------------------------------------------------- */
[dir="rtl"] {
  text-align: start;
}

[dir="rtl"] .drawer-panel {
  border-inline-start: none;
  border-inline-end: 1px solid var(--surface-border);
}

[dir="rtl"] .row.mine {
  align-items: flex-start;
}

[dir="rtl"] .row.other {
  align-items: flex-end;
}

/* -----------------------------------------------------------------
   12. SLIDE-OUT DRAWER — THE MASTERPIECE EDITION
   Backdrop-filter surface #2 (Restricted to drawer)
   Positioned fixed, slide from inset-inline-start.
   ----------------------------------------------------------------- */
.staff-drawer,
.nav-drawer {
  position: fixed;
  inset: 0;
  z-index: 1001;
  display: none;
}

.staff-drawer.open,
.nav-drawer.open {
  display: flex !important;
}

.drawer-backdrop,
.side-scrim {
  position: fixed;
  inset: 0;
  background: rgba(5, 4, 3, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 1001;
  animation: fadeIn 0.25s var(--ease);
}

.drawer-panel {
  position: fixed;
  top: 0;
  bottom: 0;
  inset-inline-start: 0;
  width: min(88vw, 360px);
  z-index: 1002;
  background: radial-gradient(circle at 50% 0%, rgba(201, 162, 74, 0.14) 0%, transparent 55%),
              linear-gradient(180deg, #161311 0%, #0c0a09 100%);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border-inline-end: 1px solid rgba(201, 162, 74, 0.28);
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.85), 0 0 24px rgba(201, 162, 74, 0.08);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  animation: drawerSlideIn 0.3s var(--ease);
  --dir: -1;
}

[dir="rtl"] .drawer-panel {
  --dir: 1;
  border-inline-start: none;
  border-inline-end: 1px solid rgba(201, 162, 74, 0.28);
}

@keyframes drawerSlideIn {
  from { transform: translateX(calc(100% * var(--dir, -1))); }
  to { transform: translateX(0); }
}

/* Header */
.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 22px 18px;
  border-bottom: 1px solid rgba(201, 162, 74, 0.16);
  background: rgba(12, 10, 9, 0.65);
}

.drawer-head-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.drawer-logo {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid rgba(201, 162, 74, 0.38);
  background: rgba(201, 162, 74, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(242, 214, 143, 0.25);
  flex-shrink: 0;
}

.drawer-logo img {
  width: 26px;
  height: 26px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

.drawer-brand {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: linear-gradient(135deg, var(--gold-bright) 0%, var(--gold) 50%, var(--gold-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  white-space: nowrap;
}

.drawer-close {
  width: 38px;
  height: 38px;
  min-width: 38px;
  min-height: 38px;
  border-radius: 50%;
  border: 1px solid var(--surface-border);
  background: var(--surface-raised);
  color: var(--text);
  font-size: 24px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
  touch-action: manipulation;
}

.drawer-close:hover {
  border-color: var(--gold);
  color: var(--gold-bright);
  transform: rotate(90deg) scale(1.05);
  background: rgba(201, 162, 74, 0.15);
}

/* Body & Sections */
.drawer-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 20px 22px 16px;
  gap: 18px;
  overflow-y: auto;
}

.drawer-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.drawer-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.drawer-title-icon {
  width: 15px;
  height: 15px;
  color: var(--gold);
  flex-shrink: 0;
}

.drawer-section-title {
  font-size: 11px;
  font-weight: 800;
  color: var(--gold-2);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin: 0;
}

[dir="rtl"] .drawer-section-title {
  letter-spacing: 0;
}

/* Profile / Welcome Card */
.drawer-welcome-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: linear-gradient(135deg, #1c1815 0%, #13100e 100%);
  border: 1px solid rgba(201, 162, 74, 0.28);
  border-radius: var(--radius-md);
  padding: 16px;
  position: relative;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.drawer-avatar {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid var(--gold);
  box-shadow: 0 0 14px rgba(201, 162, 74, 0.28);
  background: var(--surface-sunken);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-bright);
}

.drawer-avatar svg {
  width: 22px;
  height: 22px;
}

.drawer-welcome-text {
  min-width: 0;
  flex: 1;
}

.drawer-welcome-greeting {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.drawer-welcome-name {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 2px 0 6px;
}

.drawer-welcome-card .role-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  background: rgba(201, 162, 74, 0.15);
  border: 1px solid var(--gold-deep);
  border-radius: 12px;
  color: var(--gold-bright);
  font-size: 11px;
  font-weight: 800;
}

.drawer-welcome-chevron {
  position: absolute;
  inset-inline-end: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  width: 16px;
  height: 16px;
}

[dir="rtl"] .drawer-welcome-chevron {
  transform: translateY(-50%) scaleX(-1);
}

/* Cockpit Status Card */
.drawer-status-card {
  background: var(--surface-card);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  padding: 15px 16px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}

.drawer-status-conn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.drawer-status-conn #status-dot {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--text);
}

.drawer-refresh-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--surface-border);
  background: var(--surface-raised);
  color: var(--gold-2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.drawer-refresh-btn:hover {
  border-color: var(--gold);
  color: var(--gold-bright);
  box-shadow: 0 0 12px rgba(201, 162, 74, 0.28);
}

.drawer-refresh-btn.spinning svg {
  animation: drawer-refresh-spin 0.7s linear infinite;
}

@keyframes drawer-refresh-spin {
  to { transform: rotate(360deg); }
}

.drawer-status-footer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--surface-border-subtle);
}

.drawer-status-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.drawer-status-cell-icon {
  width: 16px;
  height: 16px;
  color: var(--gold);
  flex-shrink: 0;
}

.drawer-status-cell-label {
  font-size: 10.5px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.drawer-status-cell-value {
  font-size: var(--fs-md);
  font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Language Selector Dock */
.drawer-lang .lang-selector {
  display: flex;
  background: var(--surface-sunken);
  border: 1px solid var(--surface-border-subtle);
  border-radius: 24px;
  padding: 3px;
  gap: 2px;
}

.drawer-lang .lang-opt {
  flex: 1;
  min-height: 40px;
  border: none;
  border-radius: 20px;
  background: transparent;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: var(--fs-md);
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.drawer-lang .lang-opt:hover {
  color: var(--text);
}

.drawer-lang .lang-opt.active {
  background: var(--gold);
  color: var(--gold-ink);
  font-weight: 800;
  box-shadow: 0 2px 10px rgba(201, 162, 74, 0.4);
}

/* Notifications & Settings */
.drawer-notifications {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.drawer-notifications .settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: var(--fs-base);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.drawer-notifications .settings-row:hover {
  background: var(--surface-card);
}

/* Refined Logout Button */
.drawer-logout {
  margin-top: auto;
  width: 100%;
  min-height: 48px;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  background: rgba(92, 20, 32, 0.22);
  border: 1px solid rgba(226, 88, 92, 0.45);
  color: #fca5a5;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  transition: all var(--transition-fast);
  touch-action: manipulation;
}

.drawer-logout:hover {
  background: var(--wine);
  color: #ffffff;
  border-color: var(--danger);
  box-shadow: 0 4px 16px rgba(226, 88, 92, 0.35);
}

.drawer-logout:active {
  transform: scale(0.98);
}

.drawer-logout-arrow {
  width: 18px;
  height: 18px;
  transition: transform var(--transition-fast);
}

.drawer-logout:hover .drawer-logout-arrow {
  transform: translateX(4px);
}

[dir="rtl"] .drawer-logout:hover .drawer-logout-arrow {
  transform: translateX(-4px);
}

/* Footer Hallmark */
.drawer-footer {
  padding: 14px var(--space-2) 4px;
  border-top: 1px solid rgba(201, 162, 74, 0.16);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.drawer-footer-logo {
  width: 18px;
  height: 18px;
  opacity: 0.85;
}

.drawer-footer-text {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.04em;
}

.drawer-footer-text b {
  color: var(--gold-2);
}


/* --------------------------------------------------------------------------
   KITCHEN MULTI-COOK "I TAKE IT" WORKFLOW
-------------------------------------------------------------------------- */
.card-unified button.btn-take {
  min-height: 56px;
  padding: 14px 18px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
  font-family: var(--font-body);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--radius-md);
  cursor: pointer;
  background: linear-gradient(135deg, #103b2b 0%, #166534 50%, #15803d 100%);
  background-size: 200% 100%;
  background-position: 0% 0%;
  color: #bbf7d0;
  border: 1px solid rgba(74, 222, 128, 0.45);
  box-shadow: 0 8px 24px rgba(22, 101, 52, 0.35);
  transition: background-position .5s var(--ease), transform .15s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.card-unified button.btn-take:hover {
  background-position: 100% 0%;
  box-shadow: 0 12px 28px rgba(34, 197, 94, 0.4);
  border-color: rgba(74, 222, 128, 0.8);
  color: #ffffff;
  transform: translateY(-1px);
}
.card-unified button.btn-take:active {
  transform: translateY(0) scale(0.98);
}
.card-unified button.btn-take:disabled {
  opacity: .5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.o-badge.is-cooking {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--gold-bright, #c9a24a);
  background: rgba(201, 162, 74, 0.12);
  border: 1px solid rgba(201, 162, 74, 0.38);
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  margin-inline-end: 6px;
}


/* --------------------------------------------------------------------------
   STAFF PERFORMANCE & WORK LOG ANALYTICS (DARK LUXURY MICHELIN)
-------------------------------------------------------------------------- */
.perf-dock {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 22px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.perf-controls-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
}

.perf-group-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--muted);
  font-weight: 700;
  margin-bottom: 6px;
}

.perf-pill-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.perf-pill {
  min-height: 40px;
  padding: 8px 16px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.22s var(--ease);
}

.perf-pill:hover {
  background: rgba(201, 162, 74, 0.08);
  border-color: rgba(201, 162, 74, 0.35);
  color: var(--gold-bright);
  transform: translateY(-1px);
}

.perf-pill.active {
  background: rgba(201, 162, 74, 0.16);
  border-color: var(--gold-bright);
  color: var(--gold-bright);
  font-weight: 700;
  box-shadow: 0 4px 16px rgba(201, 162, 74, 0.2);
}

.perf-chip-group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.perf-chip {
  min-height: 36px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s var(--ease);
}

.perf-chip:hover {
  border-color: var(--border-strong);
  color: var(--text);
}

.perf-chip.active {
  background: var(--gold-deep);
  border-color: var(--gold-bright);
  color: var(--gold-ink);
  font-weight: 700;
}

.perf-date-picker {
  min-height: 40px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text);
  padding: 6px 12px;
  font-family: var(--font-body);
  font-size: 13px;
  outline: none;
  transition: border-color 0.2s var(--ease);
}

.perf-date-picker:focus {
  border-color: var(--gold-bright);
  box-shadow: 0 0 0 2px rgba(201, 162, 74, 0.25);
}

/* KPI Grid */
.perf-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

@media (max-width: 900px) {
  .perf-kpi-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 520px) {
  .perf-kpi-grid { grid-template-columns: 1fr; }
}

.perf-kpi-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
  transition: transform 0.25s var(--ease), border-color 0.25s var(--ease);
}

.perf-kpi-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-strong);
}

.perf-kpi-card.is-top {
  border-color: rgba(201, 162, 74, 0.45);
  background: linear-gradient(145deg, rgba(201, 162, 74, 0.08) 0%, var(--card) 60%);
}

.perf-kpi-card .kpi-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--muted);
  font-weight: 700;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.perf-kpi-card .kpi-value {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.15;
}

.perf-kpi-card.is-top .kpi-value {
  color: var(--gold-bright);
}

.perf-kpi-card .kpi-sub {
  font-size: 12px;
  color: var(--muted);
  margin-top: 6px;
}

/* Leaderboard & Comparison Meter */
.perf-leaderboard-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-card);
}

.perf-meter-row {
  margin-bottom: 18px;
}

.perf-meter-row:last-child {
  margin-bottom: 0;
}

.perf-meter-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 7px;
  font-size: 13.5px;
}

.perf-meter-user {
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}

.perf-meter-val {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--gold-bright);
}

.perf-meter-track {
  height: 10px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}

.perf-meter-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #b38b34, #f5d485);
  box-shadow: 0 0 12px rgba(201, 162, 74, 0.4);
  transition: width 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Staff Cards Grid */
.perf-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 18px;
  margin-bottom: 30px;
}

.perf-worker-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  transition: all 0.25s var(--ease);
}

.perf-worker-card:hover {
  transform: translateY(-3px);
  border-color: var(--border-strong);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
}

.perf-worker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.perf-worker-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.perf-rank-badge {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 14px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--muted);
  border: 1px solid var(--border);
  flex-shrink: 0;
}

.perf-rank-badge.rank-1 {
  background: linear-gradient(135deg, #c9a24a, #8f6c1e);
  color: #000;
  border-color: #ffd700;
  box-shadow: 0 4px 14px rgba(201, 162, 74, 0.4);
}

.perf-rank-badge.rank-2 {
  background: linear-gradient(135deg, #e0e0e0, #888888);
  color: #000;
  border-color: #ffffff;
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.2);
}

.perf-rank-badge.rank-3 {
  background: linear-gradient(135deg, #cd7f32, #8b4513);
  color: #fff;
  border-color: #cd7f32;
  box-shadow: 0 4px 12px rgba(205, 127, 50, 0.25);
}

.perf-worker-name {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}

.perf-metrics-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  background: rgba(0, 0, 0, 0.25);
  padding: 12px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.03);
}

.perf-metric-item {
  text-align: center;
}

.perf-metric-item .val {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
  color: var(--gold-bright);
}

.perf-metric-item .lbl {
  font-size: 10.5px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-top: 2px;
}

.perf-breakdown-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.perf-breakdown-tag {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  border: 1px solid var(--border);
}

.perf-toggle-btn {
  width: 100%;
  min-height: 38px;
  padding: 8px 14px;
  border-radius: var(--radius-md);
  background: rgba(201, 162, 74, 0.06);
  border: 1px solid rgba(201, 162, 74, 0.25);
  color: var(--gold-bright);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s var(--ease);
}

.perf-toggle-btn:hover {
  background: rgba(201, 162, 74, 0.14);
  border-color: var(--gold-bright);
  transform: translateY(-1px);
}

/* Expandable Task Timeline Drawer */
.perf-timeline-drawer {
  display: none;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px;
  margin-top: 4px;
  max-height: 260px;
  overflow-y: auto;
}

.perf-timeline-drawer.is-open {
  display: block;
  animation: fadeIn 0.25s var(--ease);
}

.perf-timeline-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  font-size: 12px;
}

.perf-timeline-item:last-child {
  border-bottom: none;
}

.perf-timeline-time {
  font-family: var(--font-mono, monospace);
  color: var(--gold-2);
  font-size: 11px;
  white-space: nowrap;
  flex-shrink: 0;
}

.perf-timeline-desc {
  color: var(--text);
  line-height: 1.4;
  word-break: break-word;
}


/* --------------------------------------------------------------------------
   UI/UX PRO MAX - MASTER LUXURY COMPONENT SYSTEM
-------------------------------------------------------------------------- */
/* Master Input Styling */
.field-input, .field-input-sm, .field-input-wide, .field-select,
input[type="text"], input[type="password"], input[type="number"], input[type="search"], input[type="tel"], input[type="email"], select, textarea {
  min-height: 44px;
  background: rgba(14, 12, 10, 0.85);
  border: 1px solid rgba(201, 162, 74, 0.22);
  border-radius: var(--radius-md);
  color: var(--text);
  padding: 10px 16px;
  font-family: var(--font-body);
  font-size: 14px;
  transition: all 0.22s var(--ease);
  outline: none;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
}

.field-input:focus, .field-input-sm:focus, .field-input-wide:focus, .field-select:focus,
input[type="text"]:focus, input[type="password"]:focus, input[type="number"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="email"]:focus, select:focus, textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201, 162, 74, 0.22), inset 0 2px 4px rgba(0, 0, 0, 0.3);
  background: rgba(18, 15, 13, 0.95);
}

.field-input::placeholder, input::placeholder, textarea::placeholder {
  color: var(--muted);
  opacity: 0.8;
}

/* Master Button Styles */
.btn-gold, button.btn-gold {
  min-height: 44px;
  padding: 10px 22px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, #d4af37 0%, #c9a24a 50%, #a9812f 100%);
  background-size: 200% 100%;
  background-position: 0% 0%;
  color: #140f05;
  border: none;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 6px 20px rgba(201, 162, 74, 0.25);
  transition: background-position 0.5s var(--ease), transform 0.15s var(--ease), box-shadow 0.25s var(--ease);
}

.btn-gold:hover, button.btn-gold:hover {
  background-position: 100% 0%;
  box-shadow: 0 10px 26px rgba(201, 162, 74, 0.38);
  transform: translateY(-1px);
}

.btn-gold:active, button.btn-gold:active {
  transform: translateY(0) scale(0.98);
}

.btn-outline, button.btn-outline {
  min-height: 44px;
  padding: 10px 20px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(201, 162, 74, 0.35);
  color: var(--gold-bright);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13.5px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.22s var(--ease);
}

.btn-outline:hover, button.btn-outline:hover {
  background: rgba(201, 162, 74, 0.12);
  border-color: var(--gold-bright);
  color: #ffffff;
  transform: translateY(-1px);
}

.btn-outline:active, button.btn-outline:active {
  transform: translateY(0) scale(0.98);
}

/* Master Card Elevations */
.card-unified {
  position: relative;
  background: var(--card, #141210);
  border: 1px solid var(--border, rgba(201, 162, 74, 0.18));
  border-radius: var(--radius-lg, 18px);
  padding: 22px;
  box-shadow: var(--shadow-card, 0 16px 40px rgba(0, 0, 0, 0.45));
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
}

.card-unified::before {
  content: "";
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201, 162, 74, 0.35), transparent);
  pointer-events: none;
}

.card-unified:hover {
  border-color: var(--border-strong, rgba(201, 162, 74, 0.38));
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.55), 0 0 20px rgba(201, 162, 74, 0.08);
}

/* Master Badge System */
.o-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  line-height: 1.2;
}

.o-badge svg.icon-sm {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

/* Subtle Scrollbar Luxury Styling */
*::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
*::-webkit-scrollbar-track {
  background: rgba(12, 10, 9, 0.6);
}
*::-webkit-scrollbar-thumb {
  background: rgba(201, 162, 74, 0.25);
  border-radius: 6px;
}
*::-webkit-scrollbar-thumb:hover {
  background: rgba(201, 162, 74, 0.55);
}


/* --------------------------------------------------------------------------
   HELIOS DARK LUXURY ARCHITECTURE (BLACK, CHARCOAL & GOLD GLOW)
-------------------------------------------------------------------------- */
:root {
  --helios-bg: #0d0c11;
  --helios-frame: #131217;
  --helios-card: #18171e;
  --helios-card-hover: #1e1d26;
  --helios-inset: #21202a;
  --helios-border: rgba(255, 255, 255, 0.06);
  --helios-border-strong: rgba(255, 255, 255, 0.12);
  --helios-gold: #c9a24a;
  --helios-gold-bright: #ecd58b;
  --helios-gold-glow: rgba(201, 162, 74, 0.35);
  --helios-text: #f3effc;
  --helios-text-muted: #8e8a9a;
  --helios-green: #10b981;
}

/* Master Helios Chassis Frame */
.helios-frame {
  background: var(--helios-frame);
  border: 1px solid var(--helios-border);
  border-radius: 28px;
  padding: 28px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7);
  color: var(--helios-text);
  position: relative;
  overflow: hidden;
  margin-bottom: 30px;
}

/* Helios Top Header */
.helios-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 24px;
}

.helios-title-wrap h1, .helios-title-wrap .h-title {
  font-family: var(--font-display, 'Fraunces', serif);
  font-size: 26px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 4px;
  letter-spacing: -0.3px;
}

.helios-title-wrap p, .helios-title-wrap .h-sub {
  font-size: 13px;
  color: var(--helios-text-muted);
  margin: 0;
  font-weight: 400;
}

/* Continuous Pill Switcher Track (like Market | Wallet | Tools & 1D | 1W | 1M) */
.helios-pill-track {
  display: inline-flex;
  align-items: center;
  background: var(--helios-inset);
  border: 1px solid var(--helios-border);
  border-radius: 999px;
  padding: 4px;
  gap: 3px;
}

.helios-pill {
  min-height: 34px;
  padding: 6px 16px;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: var(--helios-text-muted);
  font-family: var(--font-body, 'Manrope', sans-serif);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.helios-pill:hover {
  color: #fff;
}

.helios-pill.active {
  background: linear-gradient(135deg, rgba(201, 162, 74, 0.32), rgba(201, 162, 74, 0.12));
  border: 1px solid rgba(242, 214, 143, 0.45);
  color: #ffffff;
  font-weight: 700;
  box-shadow: 0 2px 10px rgba(201, 162, 74, 0.25);
}

/* Helios 3-Column Top Grid */
.helios-top-grid {
  display: grid;
  grid-template-columns: 1.05fr 1.25fr 1.4fr;
  gap: 20px;
  margin-bottom: 24px;
}

@media (max-width: 1100px) {
  .helios-top-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .helios-top-grid { grid-template-columns: 1fr; }
}

/* Helios Card Base */
.helios-card {
  background: var(--helios-card);
  border: 1px solid var(--helios-border);
  border-radius: 22px;
  padding: 22px;
  position: relative;
  overflow: hidden;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.helios-card:hover {
  border-color: var(--helios-border-strong);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.4);
}

.helios-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.helios-card-title {
  font-size: 14.5px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.1px;
}

/* Left Col Card 1: Total Output */
.helios-total-val {
  font-family: var(--font-display, 'Fraunces', serif);
  font-size: 32px;
  font-weight: 800;
  color: #ffffff;
  margin: 14px 0 6px;
  font-variant-numeric: tabular-nums;
}

/* Left Col Card 2: Ambient Gold Glow Hero */
.helios-glow-hero {
  background: var(--helios-card);
  border: 1px solid var(--helios-border);
  border-radius: 22px;
  padding: 24px 20px 28px;
  margin-top: 20px;
  position: relative;
  overflow: hidden;
  text-align: center;
}

.helios-glow-hero::after {
  content: "";
  position: absolute;
  bottom: -40px;
  left: 10%;
  right: 10%;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(ellipse at bottom, rgba(201, 162, 74, 0.45) 0%, rgba(201, 162, 74, 0.12) 50%, transparent 75%);
  pointer-events: none;
  filter: blur(12px);
}

.helios-glow-hero h3 {
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 8px;
}

.helios-glow-hero p {
  font-size: 12px;
  color: var(--helios-text-muted);
  line-height: 1.5;
  max-width: 260px;
  margin: 0 auto 18px;
}

.helios-glow-btn,
.vikt-glow-btn {
  background: linear-gradient(135deg, rgba(201, 162, 74, 0.4), rgba(201, 162, 74, 0.18));
  border: 1px solid rgba(242, 214, 143, 0.5);
  color: #ffffff;
  font-family: var(--font-body, 'Manrope', sans-serif);
  font-size: 13px;
  font-weight: 700;
  padding: 10px 24px;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(201, 162, 74, 0.3);
  transition: all 0.22s var(--ease);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
  z-index: 2;
}

.helios-glow-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(201, 162, 74, 0.45);
  border-color: #ffd770;
}

/* Center Col: Watchlist rows (Spotify, Amazon, etc. equivalent) */
.helios-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 10px;
  border-radius: 14px;
  transition: background 0.18s var(--ease);
  cursor: pointer;
  border-bottom: 1px solid rgba(255, 255, 255, 0.02);
}

.helios-list-item:last-child {
  border-bottom: none;
}

.helios-list-item:hover {
  background: rgba(255, 255, 255, 0.04);
}

.helios-item-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.helios-item-icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--helios-inset);
  border: 1px solid var(--helios-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--helios-gold-bright);
  font-weight: 800;
  font-size: 13px;
  flex-shrink: 0;
}

.helios-item-title {
  font-size: 13.5px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.2;
}

.helios-item-sub {
  font-size: 11px;
  color: var(--helios-text-muted);
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.helios-item-right {
  text-align: right;
}

.helios-item-val {
  font-family: var(--font-display, 'Fraunces', serif);
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  font-variant-numeric: tabular-nums;
}

.helios-badge-pos {
  font-size: 11px;
  font-weight: 700;
  color: var(--helios-green);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

/* Right Col: 2x2 Mini Cards Grid */
.helios-mini-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.helios-mini-card {
  background: var(--helios-inset);
  border: 1px solid var(--helios-border);
  border-radius: 16px;
  padding: 16px;
  transition: all 0.2s var(--ease);
}

.helios-mini-card:hover {
  border-color: var(--helios-border-strong);
  background: #252430;
  transform: translateY(-2px);
}

.helios-mini-val {
  font-family: var(--font-display, 'Fraunces', serif);
  font-size: 19px;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 2px;
  font-variant-numeric: tabular-nums;
}

.helios-mini-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
  font-size: 11px;
  color: var(--helios-text-muted);
}

.helios-mini-foot .brand {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #ffffff;
  font-weight: 700;
}

/* Bottom Wide Card: Performance Spline Chart */
.helios-chart-card {
  background: var(--helios-card);
  border: 1px solid var(--helios-border);
  border-radius: 22px;
  padding: 24px;
  position: relative;
  overflow: hidden;
}

.helios-chart-wrap {
  position: relative;
  height: 270px;
  width: 100%;
  margin-top: 14px;
}

/* Floating Chart Tooltip Tag (Matching reference image) */
.helios-chart-tooltip {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(32, 31, 40, 0.95);
  border: 1px solid rgba(201, 162, 74, 0.35);
  backdrop-filter: blur(8px);
  border-radius: 14px;
  padding: 8px 16px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}

.helios-tooltip-date {
  font-size: 11px;
  color: var(--helios-text-muted);
  margin-bottom: 4px;
}

.helios-tooltip-val-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.helios-tooltip-val {
  font-family: var(--font-display, 'Fraunces', serif);
  font-size: 16px;
  font-weight: 800;
  color: #ffffff;
}

.helios-search-bar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--helios-inset);
  border: 1px solid var(--helios-border);
  border-radius: 999px;
  padding: 6px 16px;
  color: var(--helios-text-muted);
  font-size: 12.5px;
}


/* ==========================================================================
   VIKTORIUM MASTER VISUAL RE-ARCHITECTURE (REFERENCE OPERATIONS SYSTEM)
   File: vikt-ui.css
   Hard Constraints: 60fps GPU-safe, zero heavy blurs, pure CSS logical props,
   full RTL support, WCAG AA compliant, desktop + mobile companion layouts.
========================================================================== */

/* Shell & Chassis Layout */
.vikt-app-shell {
  display: flex;
  min-height: 100vh;
  background: var(--vikt-bg);
  color: var(--vikt-text-primary);
  font-family: var(--font-body);
  position: relative;
  overflow-x: hidden;
}

/* 1. Fixed Icon-Rail Sidebar (Desktop) */
.vikt-icon-sidebar {
  width: 76px;
  flex-shrink: 0;
  background: var(--vikt-sidebar);
  border: 1px solid var(--vikt-border);
  border-radius: 26px;
  margin: 16px 0 16px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5);
  z-index: 100;
  position: sticky;
  top: 16px;
  height: calc(100vh - 32px);
  box-sizing: border-box;
}

html[dir="rtl"] .vikt-icon-sidebar {
  margin: 16px 16px 16px 0;
}

.vikt-sidebar-logo {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--vikt-gold), #8a6a1f);
  color: #000;
  font-weight: 900;
  font-size: 20px;
  font-family: var(--font-display);
  box-shadow: 0 4px 14px rgba(201, 162, 74, 0.35);
}

.vikt-sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  width: 100%;
}

.vikt-nav-icon-btn {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--vikt-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s var(--ease);
  position: relative;
}

.vikt-nav-icon-btn:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--vikt-text-primary);
  transform: translateY(-1px);
}

.vikt-nav-icon-btn.active {
  background: var(--vikt-gold);
  color: #0c0a09;
  border-color: var(--vikt-gold-bright);
  box-shadow: 0 4px 16px rgba(201, 162, 74, 0.4);
}

.vikt-nav-icon-btn svg {
  width: 20px;
  height: 20px;
}

.vikt-sidebar-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* 2. Main Content Canvas */
.vikt-main-canvas {
  flex: 1;
  min-width: 0;
  padding: 20px 24px 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-sizing: border-box;
}

/* Top App Header */
.vikt-top-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 4px;
}

.vikt-user-greeting h1, .vikt-user-greeting .title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  color: var(--vikt-text-primary);
  margin: 0;
  letter-spacing: -0.2px;
}

.vikt-user-greeting p, .vikt-user-greeting .sub {
  font-size: 12.5px;
  color: var(--vikt-text-muted);
  margin: 3px 0 0;
}

.vikt-header-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.vikt-search-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--vikt-card-inset);
  border: 1px solid var(--vikt-border);
  border-radius: var(--vikt-radius-pill);
  padding: 8px 18px;
  min-width: 260px;
  transition: border-color 0.2s;
}

.vikt-search-pill:focus-within {
  border-color: var(--vikt-gold);
}

.vikt-search-pill input {
  background: transparent;
  border: none;
  color: var(--vikt-text-primary);
  font-size: 13px;
  font-family: var(--font-body);
  outline: none;
  width: 100%;
}

.vikt-search-pill input::placeholder {
  color: var(--vikt-text-muted);
}

.vikt-header-circle-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--vikt-card-inset);
  border: 1px solid var(--vikt-border);
  color: var(--vikt-text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s var(--ease);
}

.vikt-header-circle-btn:hover {
  border-color: var(--vikt-border-strong);
  color: var(--vikt-text-primary);
}

.vikt-header-profile-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--vikt-card-inset);
  border: 1px solid var(--vikt-border);
  border-radius: var(--vikt-radius-pill);
  padding: 4px 14px 4px 4px;
  cursor: pointer;
}

html[dir="rtl"] .vikt-header-profile-pill {
  padding: 4px 4px 4px 14px;
}

.vikt-avatar-circle {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--vikt-gold), #8a6a1f);
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 13px;
}

/* 3. Top Compact KPI Row (3 Stat Cards + Quick Action Button) */
.vikt-kpi-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr) auto;
  gap: 16px;
  align-items: stretch;
}

.vikt-kpi-card {
  background: var(--vikt-card);
  border: 1px solid var(--vikt-border);
  border-radius: var(--vikt-radius-card);
  padding: 18px 20px;
  box-shadow: var(--vikt-shadow-card);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  transition: transform 0.2s var(--ease), border-color 0.2s var(--ease);
}

.vikt-kpi-card:hover {
  transform: translateY(-2px);
  border-color: var(--vikt-border-strong);
}

.vikt-kpi-top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.vikt-icon-chip {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--vikt-card-inset);
  border: 1px solid var(--vikt-border);
  flex-shrink: 0;
}

.vikt-icon-chip.chip-gold {
  color: var(--vikt-gold-bright);
  background: var(--vikt-gold-subtle);
  border-color: rgba(201, 162, 74, 0.3);
}

.vikt-icon-chip.chip-emerald {
  color: var(--vikt-emerald);
  background: var(--vikt-emerald-subtle);
  border-color: rgba(16, 185, 129, 0.3);
}

.vikt-icon-chip.chip-wine {
  color: #f43f5e;
  background: var(--vikt-wine-subtle);
  border-color: rgba(138, 34, 50, 0.3);
}

.vikt-kpi-label {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--vikt-text-secondary);
  letter-spacing: 0.4px;
}

.vikt-kpi-bottom {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.vikt-kpi-value {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 800;
  color: var(--vikt-text-primary);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.vikt-badge-delta {
  font-size: 11px;
  font-weight: 700;
  color: var(--vikt-emerald);
  background: var(--vikt-emerald-subtle);
  border-radius: var(--vikt-radius-pill);
  padding: 3px 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.vikt-kpi-action-card {
  width: 58px;
  background: var(--vikt-card);
  border: 1px solid var(--vikt-border);
  border-radius: var(--vikt-radius-card);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--vikt-gold);
  transition: all 0.2s var(--ease);
  box-shadow: var(--vikt-shadow-card);
}

.vikt-kpi-action-card:hover {
  background: var(--vikt-card-hover);
  border-color: var(--vikt-gold);
  transform: scale(1.05);
}

/* 4. Mixed-Density Content Grid */
.vikt-content-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1.15fr;
  gap: 18px;
}

.vikt-card {
  background: var(--vikt-card);
  border: 1px solid var(--vikt-border);
  border-radius: var(--vikt-radius-card);
  padding: 20px;
  box-shadow: var(--vikt-shadow-card);
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

.vikt-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.vikt-card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--vikt-text-primary);
  letter-spacing: -0.1px;
}

.vikt-pill-dropdown {
  background: var(--vikt-card-inset);
  border: 1px solid var(--vikt-border);
  border-radius: var(--vikt-radius-pill);
  padding: 5px 14px;
  font-size: 11.5px;
  color: var(--vikt-text-secondary);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

/* Wide Analytics Sub-Metrics Chips */
.vikt-submetrics-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}

.vikt-submetric-chip {
  background: var(--vikt-card-inset);
  border: 1px solid var(--vikt-border);
  border-radius: var(--vikt-radius-card-sm);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.vikt-submetric-val {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
  color: var(--vikt-text-primary);
  font-variant-numeric: tabular-nums;
}

.vikt-submetric-lbl {
  font-size: 10.5px;
  color: var(--vikt-text-muted);
  text-transform: uppercase;
}

/* Donut / Gauge Center */
.vikt-gauge-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.vikt-gauge-val {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 800;
  color: var(--vikt-text-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.vikt-gauge-lbl {
  font-size: 10px;
  text-transform: uppercase;
  color: var(--vikt-text-muted);
  margin-top: 4px;
}

/* Department / Line Status List */
.vikt-status-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.vikt-status-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: var(--vikt-card-inset);
  border: 1px solid var(--vikt-border);
  border-radius: var(--vikt-radius-card-sm);
}

.vikt-status-pill {
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: var(--vikt-radius-pill);
}

.vikt-status-pill.active {
  background: var(--vikt-emerald-subtle);
  color: var(--vikt-emerald);
}

.vikt-status-pill.idle {
  background: rgba(255, 255, 255, 0.05);
  color: var(--vikt-text-muted);
}

.vikt-status-pill.maintenance {
  background: var(--vikt-gold-subtle);
  color: var(--vikt-gold-bright);
}

/* Bottom Grid Row: Spline Chart + Orders Table + Highlight Card */
.vikt-bottom-grid {
  display: grid;
  grid-template-columns: 1.25fr 2fr 0.95fr;
  gap: 18px;
}

/* Highlight Hero Card (Top Performer / Top Dish) */
.vikt-highlight-inner {
  display: flex;
  align-items: center;
  gap: 14px;
}

.vikt-highlight-thumb {
  width: 58px;
  height: 58px;
  border-radius: 16px;
  background: var(--vikt-card-inset);
  border: 1px solid var(--vikt-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--vikt-gold-bright);
  flex-shrink: 0;
}

.vikt-highlight-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--vikt-text-primary);
}

.vikt-highlight-sub {
  font-size: 12px;
  color: var(--vikt-gold-bright);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin-top: 3px;
}

/* Responsive Dual-Breakpoint Specs (Desktop + Mobile Companion) */
@media (max-width: 1199px) {
  .vikt-content-grid {
    grid-template-columns: 1fr 1fr;
  }
  .vikt-bottom-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 767px) {
  .vikt-app-shell {
    flex-direction: column;
  }
  .vikt-icon-sidebar {
    display: none; /* Collapses to top mobile header */
  }
  .vikt-main-canvas {
    padding: 14px 14px 32px;
  }
  /* Mobile Companion 2x2 KPI Grid */
  .vikt-kpi-row {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
  }
  .vikt-kpi-action-card {
    width: 100%;
    min-height: 80px;
  }
  .vikt-content-grid,
  .vikt-bottom-grid {
    grid-template-columns: 1fr;
  }
  .vikt-submetrics-strip {
    grid-template-columns: 1fr;
  }
}

/* Mobile Navigation Strip (Under Header on Mobile <768px) */
.vikt-mobile-nav-strip {
  display: none;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 4px 2px 10px;
  border-bottom: 1px solid var(--vikt-border);
  margin-bottom: 12px;
}

@media (max-width: 767px) {
  .vikt-mobile-nav-strip {
    display: flex !important;
  }
  .vikt-top-header .drawer-toggle {
    display: flex !important;
  }
}

@media (min-width: 768px) {
  .vikt-top-header .drawer-toggle {
    display: none !important;
  }
}


/* ==========================================================================
   VIKTORIUM 1:1 REFERENCE DASHBOARD STYLES (media_1789668885409.png)
   ========================================================================== */

/* Dark matte base canvas */
:root {
  --vikt-bg: #0b0a0e;
  --vikt-sidebar: #121117;
  --vikt-card: #15141c;
  --vikt-card-inset: #1d1b26;
  --vikt-card-hover: #22202c;
  --vikt-border: rgba(255, 255, 255, 0.07);
  --vikt-border-strong: rgba(255, 255, 255, 0.14);
  --vikt-gold: #c9a24a;
  --vikt-gold-bright: #f2d68f;
  --vikt-gold-subtle: rgba(201, 162, 74, 0.15);
  --vikt-emerald: #10b981;
  --vikt-emerald-subtle: rgba(16, 185, 129, 0.14);
  --vikt-wine: #8a2232;
  --vikt-wine-subtle: rgba(138, 34, 50, 0.16);
  --vikt-text-primary: #f5f2fc;
  --vikt-text-secondary: #a6a0b5;
  --vikt-text-muted: #6e687e;
  --vikt-radius-card: 22px;
  --vikt-radius-pill: 999px;
  --vikt-shadow-card: 0 10px 32px rgba(0, 0, 0, 0.5);
}

/* Master App Shell Chassis */
.vikt-app-shell {
  display: flex !important;
  flex-direction: row !important;
  min-height: 100vh !important;
  background: var(--vikt-bg) !important;
  color: var(--vikt-text-primary) !important;
  font-family: var(--font-body, 'Manrope', sans-serif) !important;
  overflow-x: hidden !important;
}

/* 1. Floating Icon-Rail Sidebar (Desktop) */
.vikt-icon-sidebar {
  width: 76px !important;
  flex-shrink: 0 !important;
  background: var(--vikt-sidebar) !important;
  border: 1px solid var(--vikt-border) !important;
  border-radius: 28px !important;
  margin: 16px 0 16px 16px !important;
  padding: 22px 0 !important;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: space-between !important;
  position: sticky !important;
  top: 16px !important;
  height: calc(100vh - 32px) !important;
  box-sizing: border-box !important;
  z-index: 100 !important;
}

html[dir="rtl"] .vikt-icon-sidebar {
  margin: 16px 16px 16px 0 !important;
}

/* Sidebar Top Logo Monogram (Gold 'V' squircle) */
.vikt-sidebar-logo {
  width: 48px !important;
  height: 48px !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, #f0d588 0%, #c9a24a 50%, #8a6a1f 100%) !important;
  color: #0c0a09 !important;
  font-weight: 900 !important;
  font-size: 22px !important;
  font-family: var(--font-display, serif) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 6px 20px rgba(201, 162, 74, 0.4) !important;
  cursor: pointer !important;
  transition: transform 0.2s var(--ease) !important;
}

.vikt-sidebar-logo:hover {
  transform: scale(1.05) !important;
}

/* Sidebar Navigation Stack */
.vikt-sidebar-nav {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  align-items: center !important;
  width: 100% !important;
}

/* Individual Sidebar Icon Button */
.vikt-nav-icon-btn {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  border-radius: 16px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: var(--vikt-text-muted) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  padding: 0 !important;
  position: relative !important;
}

.vikt-nav-icon-btn svg {
  width: 20px !important;
  height: 20px !important;
  pointer-events: none !important;
}

.vikt-nav-icon-btn:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  color: var(--vikt-text-primary) !important;
  transform: translateY(-1px) !important;
}

/* Active Nav Button: Solid Gold Squircle (Replaces red from reference) */
.vikt-nav-icon-btn.active {
  background: linear-gradient(135deg, #d4af37 0%, #c9a24a 100%) !important;
  color: #0b0a0e !important;
  border-color: var(--vikt-gold-bright) !important;
  box-shadow: 0 6px 22px rgba(201, 162, 74, 0.45) !important;
  transform: scale(1.04) !important;
}

.vikt-nav-icon-btn.active svg {
  color: #0b0a0e !important;
}

/* Sidebar Bottom Accent Button (Glow Circle from Reference) */
.vikt-sidebar-bottom-accent {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at 35% 35%, #f2d68f, #c9a24a 60%, #8a6a1f 100%) !important;
  color: #0b0a0e !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 6px 22px rgba(201, 162, 74, 0.45), 0 0 12px rgba(242, 214, 143, 0.3) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.25) !important;
  cursor: pointer !important;
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease) !important;
}

.vikt-sidebar-bottom-accent:hover {
  transform: scale(1.08) !important;
  box-shadow: 0 8px 28px rgba(201, 162, 74, 0.6), 0 0 18px rgba(242, 214, 143, 0.5) !important;
}

/* 2. Main Content Canvas */
.vikt-main-canvas {
  flex: 1 !important;
  min-width: 0 !important;
  padding: 20px 28px 48px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 22px !important;
  box-sizing: border-box !important;
  overflow-y: auto !important;
  height: 100vh !important;
}

/* Master Top Header Bar */
.vikt-top-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
  padding: 6px 0 16px !important;
  border-bottom: 1px solid var(--vikt-border) !important;
  flex-shrink: 0 !important;
  background: transparent !important;
  min-height: unset !important;
  flex-wrap: wrap !important;
}

.vikt-greeting-block {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.vikt-greeting-sub {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--vikt-text-muted) !important;
  letter-spacing: 0.2px !important;
}

.vikt-greeting-title {
  font-size: 24px !important;
  font-weight: 800 !important;
  color: var(--vikt-text-primary) !important;
  letter-spacing: -0.3px !important;
  margin: 0 !important;
  line-height: 1.2 !important;
}

.vikt-top-controls {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

/* Search Pill Bar (Exact match to reference 'Search Here') */
.vikt-search-pill-bar {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 20px !important;
  background: var(--vikt-card-inset) !important;
  border: 1px solid var(--vikt-border) !important;
  border-radius: var(--vikt-radius-pill) !important;
  width: 340px !important;
  box-sizing: border-box !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25) !important;
}

.vikt-search-pill-bar input {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  color: var(--vikt-text-primary) !important;
  font-size: 13px !important;
  width: 100% !important;
  font-family: inherit !important;
}

.vikt-search-pill-bar input::placeholder {
  color: var(--vikt-text-muted) !important;
}

/* Top Circular Control Buttons (Notification Bell) */
.vikt-circle-icon-btn {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  border-radius: 50% !important;
  background: var(--vikt-card-inset) !important;
  border: 1px solid var(--vikt-border) !important;
  color: var(--vikt-text-secondary) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s var(--ease) !important;
}

.vikt-circle-icon-btn:hover {
  background: var(--vikt-card-hover) !important;
  color: var(--vikt-text-primary) !important;
  transform: translateY(-1px) !important;
}

/* User Profile Capsule */
.vikt-profile-capsule {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 5px 14px 5px 5px !important;
  background: var(--vikt-card-inset) !important;
  border: 1px solid var(--vikt-border) !important;
  border-radius: var(--vikt-radius-pill) !important;
  cursor: pointer !important;
  transition: all 0.2s var(--ease) !important;
}

.vikt-profile-capsule:hover {
  background: var(--vikt-card-hover) !important;
  border-color: var(--vikt-border-strong) !important;
}

.vikt-profile-avatar {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #c9a24a, #8a6a1f) !important;
  color: #0b0a0e !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 2px solid var(--vikt-card) !important;
}

/* 3. Top KPI Row (3 Stats + 1 Action Card) */
.vikt-kpi-row {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) 88px !important;
  gap: 16px !important;
  margin-bottom: 4px !important;
}

.vikt-kpi-card {
  background: var(--vikt-card) !important;
  border: 1px solid var(--vikt-border) !important;
  border-radius: var(--vikt-radius-card) !important;
  padding: 20px 22px !important;
  box-shadow: var(--vikt-shadow-card) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  gap: 14px !important;
  box-sizing: border-box !important;
  transition: border-color 0.2s, transform 0.2s !important;
}

.vikt-kpi-card:hover {
  border-color: var(--vikt-border-strong) !important;
  transform: translateY(-2px) !important;
}

.vikt-kpi-top {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.vikt-icon-chip {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.chip-gold {
  background: var(--vikt-gold-subtle) !important;
  color: var(--vikt-gold-bright) !important;
  border: 1px solid rgba(201, 162, 74, 0.3) !important;
}

.chip-emerald {
  background: var(--vikt-emerald-subtle) !important;
  color: var(--vikt-emerald) !important;
  border: 1px solid rgba(16, 185, 129, 0.3) !important;
}

.chip-wine {
  background: var(--vikt-wine-subtle) !important;
  color: #f28b99 !important;
  border: 1px solid rgba(138, 34, 50, 0.35) !important;
}

.vikt-kpi-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  color: var(--vikt-text-secondary) !important;
  line-height: 1.3 !important;
}

.vikt-kpi-bottom {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

.vikt-kpi-value {
  font-size: 30px !important;
  font-weight: 800 !important;
  color: var(--vikt-text-primary) !important;
  font-variant-numeric: tabular-nums !important;
  line-height: 1.1 !important;
  letter-spacing: -0.5px !important;
}

.vikt-badge-delta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 3px 9px !important;
  border-radius: var(--vikt-radius-pill) !important;
  background: var(--vikt-emerald-subtle) !important;
  color: var(--vikt-emerald) !important;
  width: fit-content !important;
}

/* Quick Action (+) Button Card */
.vikt-kpi-action-card {
  width: 88px !important;
  background: var(--vikt-card) !important;
  border: 2px dashed var(--vikt-border-strong) !important;
  border-radius: var(--vikt-radius-card) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  color: var(--vikt-text-muted) !important;
  font-size: 28px !important;
  transition: all 0.22s var(--ease) !important;
  box-shadow: var(--vikt-shadow-card) !important;
}

.vikt-kpi-action-card:hover {
  border-color: var(--vikt-gold) !important;
  color: var(--vikt-gold-bright) !important;
  background: var(--vikt-gold-subtle) !important;
  transform: scale(1.03) !important;
}

/* 4. Middle Mixed-Density Grid */
.vikt-content-grid {
  display: grid !important;
  grid-template-columns: 1.7fr 1fr 1.1fr !important;
  gap: 18px !important;
}

/* Generic Elevated Card */
.vikt-card {
  background: var(--vikt-card) !important;
  border: 1px solid var(--vikt-border) !important;
  border-radius: var(--vikt-radius-card) !important;
  padding: 22px !important;
  box-shadow: var(--vikt-shadow-card) !important;
  box-sizing: border-box !important;
  transition: border-color 0.2s !important;
}

.vikt-card:hover {
  border-color: var(--vikt-border-strong) !important;
}

.vikt-card-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin-bottom: 16px !important;
}

.vikt-card-title {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: var(--vikt-text-primary) !important;
  letter-spacing: -0.2px !important;
}

.vikt-pill-dropdown {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 14px !important;
  background: var(--vikt-card-inset) !important;
  border: 1px solid var(--vikt-border) !important;
  border-radius: var(--vikt-radius-pill) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: var(--vikt-text-secondary) !important;
  cursor: pointer !important;
  transition: background 0.2s !important;
}

.vikt-pill-dropdown:hover {
  background: var(--vikt-card-hover) !important;
  color: var(--vikt-text-primary) !important;
}

/* 3 Inset Sub-Metric Chips (from Reference 'Current Stock' card) */
.vikt-submetrics-strip {
  display: flex !important;
  gap: 10px !important;
  margin-bottom: 16px !important;
}

.vikt-submetric-chip {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 14px !important;
  background: var(--vikt-card-inset) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 16px !important;
  flex: 1 !important;
}

.vikt-submetric-val {
  font-size: 14px !important;
  font-weight: 800 !important;
  color: var(--vikt-text-primary) !important;
  font-variant-numeric: tabular-nums !important;
}

.vikt-submetric-lbl {
  font-size: 10.5px !important;
  font-weight: 600 !important;
  color: var(--vikt-text-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.4px !important;
}

/* Circular Gauge Center */
.vikt-gauge-center {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
}

.vikt-gauge-val {
  font-size: 28px !important;
  font-weight: 800 !important;
  color: var(--vikt-text-primary) !important;
  font-variant-numeric: tabular-nums !important;
  line-height: 1 !important;
}

.vikt-gauge-lbl {
  font-size: 10.5px !important;
  color: var(--vikt-text-muted) !important;
  font-weight: 700 !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  margin-top: 4px !important;
}

/* Status List (Production Line Status) */
.vikt-status-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.vikt-status-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 14px !important;
  background: var(--vikt-card-inset) !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.vikt-status-pill {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.4px !important;
  padding: 3px 9px !important;
  border-radius: var(--vikt-radius-pill) !important;
  border: 1px solid !important;
  white-space: nowrap !important;
}

.vikt-status-pill.active {
  background: var(--vikt-emerald-subtle) !important;
  color: var(--vikt-emerald) !important;
  border-color: rgba(16, 185, 129, 0.35) !important;
}

.vikt-status-pill.idle {
  background: rgba(255, 255, 255, 0.05) !important;
  color: var(--vikt-text-muted) !important;
  border-color: var(--vikt-border) !important;
}

.vikt-status-pill.maintenance,
.vikt-status-pill.warn {
  background: var(--vikt-wine-subtle) !important;
  color: #f28b99 !important;
  border-color: rgba(138, 34, 50, 0.35) !important;
}

/* 5. Bottom Grid */
.vikt-bottom-grid {
  display: grid !important;
  grid-template-columns: 1.1fr 1.7fr 1fr !important;
  gap: 18px !important;
}

/* Highlight showcase cards */
.vikt-highlight-inner {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}

.vikt-highlight-thumb {
  width: 52px !important;
  height: 52px !important;
  border-radius: 14px !important;
  background: var(--vikt-card-inset) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 22px !important;
  flex-shrink: 0 !important;
  border: 1px solid var(--vikt-border) !important;
}

.vikt-highlight-name {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--vikt-text-primary) !important;
}

.vikt-highlight-sub {
  font-size: 12px !important;
  color: var(--vikt-text-muted) !important;
  margin-top: 3px !important;
}

/* Glowing Primary Button */
.vikt-glow-btn,
.helios-glow-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 22px !important;
  border-radius: var(--vikt-radius-pill) !important;
  background: linear-gradient(135deg, #f0d588 0%, #c9a24a 50%, #8a6a1f 100%) !important;
  color: #0b0a0e !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 0.2s var(--ease) !important;
  min-height: 40px !important;
  box-shadow: 0 4px 16px rgba(201, 162, 74, 0.35) !important;
  white-space: nowrap !important;
}

.vikt-glow-btn:hover,
.helios-glow-btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 22px rgba(201, 162, 74, 0.5) !important;
}

/* Pill track filters & horizons */
.helios-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 7px 15px !important;
  border-radius: var(--vikt-radius-pill) !important;
  border: 1px solid var(--vikt-border) !important;
  background: var(--vikt-card-inset) !important;
  color: var(--vikt-text-muted) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.2s var(--ease) !important;
  white-space: nowrap !important;
  min-height: 36px !important;
}

.helios-pill:hover {
  color: var(--vikt-text-primary) !important;
  border-color: var(--vikt-border-strong) !important;
}

.helios-pill.active {
  background: var(--vikt-gold-subtle) !important;
  border-color: var(--vikt-gold) !important;
  color: var(--vikt-gold-bright) !important;
}

/* Tables in all views */
#app-content table {
  width: 100% !important;
  border-collapse: collapse !important;
}

#app-content table th {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  color: var(--vikt-text-muted) !important;
  padding: 12px 14px !important;
  border-bottom: 1px solid var(--vikt-border) !important;
  text-align: start !important;
}

#app-content table td {
  padding: 12px 14px !important;
  font-size: 13px !important;
  color: var(--vikt-text-secondary) !important;
  border-bottom: 1px solid var(--vikt-border) !important;
  vertical-align: middle !important;
}

#app-content table tr:hover td {
  background: rgba(255, 255, 255, 0.02) !important;
}

/* Mobile companion layout (<768px - right side of reference screenshot) */
@media (max-width: 767px) {
  .vikt-icon-sidebar {
    display: none !important;
  }
  .vikt-mobile-nav-strip {
    display: flex !important;
  }
  .vikt-kpi-row {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }
  .vikt-kpi-action-card {
    width: 100% !important;
    min-height: 90px !important;
  }
  .vikt-content-grid,
  .vikt-bottom-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .vikt-main-canvas {
    padding: 14px 16px 48px !important;
    height: auto !important;
  }
  .vikt-search-pill-bar {
    width: 100% !important;
  }
  .vikt-submetrics-strip {
    flex-direction: column !important;
  }
}


/* ==========================================================================
   AUDIT RESOLUTION POLISH: ACCESSIBILITY, CONTRAST, & LIVE STATUS
   ========================================================================== */

/* 1. Live Heartbeat Header Pill */
.vikt-live-status-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 6px 14px !important;
  border-radius: var(--vikt-radius-pill) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  border: 1px solid var(--vikt-border) !important;
  background: var(--vikt-card-inset) !important;
  transition: all 0.25s var(--ease) !important;
}

.vikt-live-status-pill.connected {
  border-color: rgba(16, 185, 129, 0.4) !important;
  background: var(--vikt-emerald-subtle) !important;
  color: var(--vikt-emerald) !important;
}

.vikt-live-status-pill.connected .vikt-status-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: var(--vikt-emerald) !important;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.8) !important;
  animation: livePulse 2s infinite ease-in-out !important;
}

.vikt-live-status-pill.degraded {
  border-color: rgba(201, 162, 74, 0.4) !important;
  background: var(--vikt-gold-subtle) !important;
  color: var(--vikt-gold-bright) !important;
}

.vikt-live-status-pill.degraded .vikt-status-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: var(--vikt-gold) !important;
  animation: livePulse 1.2s infinite ease-in-out !important;
}

.vikt-live-status-pill.offline {
  border-color: rgba(244, 63, 94, 0.4) !important;
  background: var(--vikt-wine-subtle) !important;
  color: #fca5a5 !important;
}

.vikt-live-status-pill.offline .vikt-status-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: var(--danger) !important;
}

.vikt-status-sep {
  opacity: 0.5 !important;
}

.vikt-status-time {
  font-variant-numeric: tabular-nums !important;
  font-size: 11.5px !important;
}

/* 2. Offline Action Guard on Destructive Buttons */
.disabled-offline {
  opacity: 0.45 !important;
  pointer-events: none !important;
  cursor: not-allowed !important;
  filter: grayscale(0.8) !important;
}

/* 3. Typography Floor (Eliminate hard-to-read <12px text) */
.vikt-kpi-label,
.vikt-submetric-lbl,
.vikt-gauge-lbl,
.vikt-status-pill {
  font-size: 12px !important;
  letter-spacing: 0.5px !important;
}

/* Higher contrast for secondary & muted text (WCAG AA >= 4.5:1) */
.dim,
.ticket .meta,
.vikt-card-header .vikt-card-title + div,
.vikt-greeting-sub {
  color: #b8b2c6 !important;
}

/* 4. Table Delete Button Minimum Touch Target & Clear Focus State */
.delete-single-order-btn {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(244, 63, 94, 0.3) !important;
  background: rgba(244, 63, 94, 0.08) !important;
  color: #fca5a5 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s var(--ease) !important;
}

.delete-single-order-btn:hover {
  background: rgba(244, 63, 94, 0.22) !important;
  border-color: var(--danger) !important;
  color: #fff !important;
  transform: scale(1.05) !important;
}

/* 5. Full Screen-Reader Accessibility Utility */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}