/* EtokrieGrocery Admin — design system.
   Palette matches the official Etokrie brand mark (bright cyan-blue "Etokrie Mart" lockup +
   deeper azure-blue standalone wordmark, white header/sidebar, dark-blue active state), rebuilt
   with a comfortable 15px base so text is readable without feeling oversized, and refined
   card / table / modal / button components for a balanced, professional operations UI. */
:root {
  --et-blue: #29abe2;
  --et-primary: #0092db;
  --et-primary-dark: #006fa8;
  --et-primary-tint: #e3f4fb;
  --et-navy: #043552;
  --et-ink: #1f2733;
  --et-muted: #6b7688;
  --muted: var(--et-muted); /* alias - a handful of pages reference var(--muted) directly */
  --et-faint: #97a1b2;
  --et-border: #e6e9ef;
  --et-bg: #f4f6fa;
  --et-soft: #f8fafc;
  --et-surface: #ffffff;      /* literal "panel/card background" - sidebar, header, drawers, lightbox */
  --et-surface-alt: #f8f9fb;  /* a slightly-off-white surface, used by pager buttons/hover states */
  --et-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
  --et-shadow-lg: 0 12px 32px rgba(16, 24, 40, .12);
  --et-radius: 10px;
}

/* Dark mode - driven by Bootstrap's own data-bs-theme attribute (set from _Layout.cshtml's
   pre-paint script + the header toggle button) so one attribute flips Bootstrap's native
   component theming (cards/tables/modals/forms/buttons) AND every custom et-* token together.
   A considered slate palette, not a flat invert: near-black (not pure-black) background, one
   lighter step for card surfaces, warm off-white ink (not pure white - easier on the eyes),
   the brand blue lightened slightly so it still pops against a dark ground, and stronger/more
   visible shadows since a light-mode soft shadow disappears against a dark background. */
html[data-bs-theme="dark"] {
  --et-blue: #4dc3f5;
  --et-primary: #29a3e8;
  --et-primary-dark: #7cc9f2;
  --et-primary-tint: rgba(41, 163, 232, .16);
  --et-navy: #06263a;
  --et-ink: #e8ecf3;
  --et-muted: #9aa4b8;
  --muted: var(--et-muted);
  --et-faint: #6d7689;
  --et-border: #2a3244;
  --et-bg: #0d1117;
  --et-soft: #171d29;
  --et-surface: #161c28;
  --et-surface-alt: #1c2331;
  --et-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 1px 3px rgba(0, 0, 0, .4);
  --et-shadow-lg: 0 12px 32px rgba(0, 0, 0, .55);
}

* { box-sizing: border-box; }

html { font-size: 15px; }
html, body { height: 100%; }

body {
  margin: 0;
  background: var(--et-bg);
  color: var(--et-ink);
  font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 0.933rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; }

/* ============ Brand ============ */
/* Fills the entire header-left panel edge-to-edge with the brand blue (sampled from the source
   logo image, #01A1FF) instead of inlining the raster logo - the logo's canvas ratio (~3:1) never
   exactly matches the header panel's box (232x58, 4:1), so stretching/cropping the PNG either
   blurred it or clipped the letters. A live text lockup scales losslessly at any panel size. */
.brand-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: #01A1FF;
}
.brand-logo .brand-word {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 800;
  font-style: italic;
  font-size: 2.85rem;
  line-height: 1;
  color: #fff;
  letter-spacing: -0.01em;
}
/* Collapses in lockstep with the sidebar rail (68px) - "Etokrie" swaps to just "E" so the
   header-left panel always matches the rail's current width instead of overhanging it. */
.brand-logo .brand-word-short { display: none; }
html.sidebar-collapsed .brand-word-full { display: none; }
html.sidebar-collapsed .brand-word-short { display: inline; }

/* ============ Header ============ */
.et-header {
  position: fixed; top: 0; left: 0; right: 0;
  height: 58px;
  background: var(--et-surface);
  border-bottom: 1px solid var(--et-border);
  z-index: 1030;
  display: flex;
  align-items: center;
}
.et-header-left {
  width: 232px;
  height: 58px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
  transition: width .15s ease;
}
.et-header-title-group {
  flex-grow: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  padding-left: 18px;
  min-width: 0;
}
.et-header-back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: var(--et-muted);
  flex-shrink: 0;
  transition: background .15s ease, color .15s ease;
}
.et-header-back:hover { background: var(--et-border); color: var(--et-ink); }
.et-header-title {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--et-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.et-header-right {
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 22px;
  gap: 14px;
}
.et-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--et-navy);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 0.82rem;
}
.et-user-name { font-size: 0.875rem; font-weight: 600; line-height: 1.25; }
.et-user-role { font-size: 0.75rem; color: var(--et-faint); line-height: 1.2; }

.et-header-bell {
  position: relative;
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--et-muted);
  font-size: 1.1rem;
  transition: background .15s ease, color .15s ease;
}
.et-header-bell:hover { background: var(--et-soft); color: var(--et-ink); }
.et-header-bell-amber { color: #b45309; }
.et-header-bell-red { color: #dc2626; }
.et-header-bell-badge {
  position: absolute;
  top: 2px; right: 2px;
  min-width: 16px; height: 16px;
  padding: 0 3px;
  border-radius: 8px;
  background: #dc2626;
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}
.et-header-bell-amber .et-header-bell-badge { background: #b45309; }
.et-header-bell-blue { color: #0369a1; }
.et-header-bell-blue .et-header-bell-badge { background: #0369a1; }
@keyframes et-bell-ring {
  0%, 100% { transform: rotate(0deg); }
  15% { transform: rotate(-18deg); }
  30% { transform: rotate(16deg); }
  45% { transform: rotate(-12deg); }
  60% { transform: rotate(8deg); }
  75% { transform: rotate(-4deg); }
}
.et-header-bell-ringing i { display: inline-block; animation: et-bell-ring 0.6s ease-in-out; transform-origin: top center; }

.et-status-pill-wrap { position: relative; }
.et-status-pill {
  display: flex; align-items: center; gap: 6px;
  height: 32px;
  padding: 0 12px 0 10px;
  border-radius: 16px;
  border: 1px solid var(--et-border);
  background: var(--et-soft);
  color: var(--et-ink);
  font-size: 0.8rem;
  font-weight: 600;
  transition: background .15s ease, border-color .15s ease;
}
.et-status-pill:hover { background: var(--et-border); }
.et-status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--et-faint);
  flex-shrink: 0;
}
.et-status-pill.is-open .et-status-dot { background: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,.16); }
.et-status-pill.is-open { color: #15803d; border-color: rgba(22,163,74,.35); }
.et-status-pill.is-closed .et-status-dot { background: #dc2626; box-shadow: 0 0 0 3px rgba(220,38,38,.16); }
.et-status-pill.is-closed { color: #b91c1c; border-color: rgba(220,38,38,.35); }

.et-status-popover {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 300px;
  background: var(--et-surface);
  border: 1px solid var(--et-border);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,.18);
  z-index: 1080;
  overflow: hidden;
}
.et-status-popover-body { padding: 14px 16px; font-size: 0.82rem; color: var(--et-ink); }
.et-status-popover-loading { color: var(--et-faint); }
.et-status-popover-headline { display: flex; align-items: center; gap: 8px; font-size: 0.95rem; font-weight: 700; margin-bottom: 8px; }
.et-status-popover-heading { font-weight: 600; margin-bottom: 2px; }
.et-status-popover-desc { color: var(--et-muted); margin-bottom: 8px; line-height: 1.4; }
.et-status-popover-countdown { display: inline-block; font-weight: 700; color: var(--et-brand, #0092db); margin-bottom: 8px; }
.et-status-popover-row { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-top: 1px solid var(--et-border); font-size: 0.76rem; }
.et-status-popover-row:first-of-type { border-top: none; padding-top: 0; }
.et-status-popover-row .label { color: var(--et-faint); }
.et-status-popover-row .value { color: var(--et-muted); text-align: right; }
.et-status-popover-manage {
  display: block;
  text-align: center;
  padding: 10px 16px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--et-brand, #0092db);
  background: var(--et-soft);
  border-top: 1px solid var(--et-border);
}
.et-status-popover-manage:hover { background: var(--et-border); }

/* ============ Sidebar ============ */
.et-sidebar {
  position: fixed; top: 58px; bottom: 0; left: 0;
  width: 232px;
  background: var(--et-surface);
  border-right: 1px solid var(--et-border);
  z-index: 1020;
  transition: width .15s ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.et-sidebar-nav {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px 0 12px;
}
.et-sidebar-back {
  display: flex; align-items: center; gap: 8px;
  color: var(--et-muted);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 14px 20px;
  border-bottom: 1px solid var(--et-border);
  margin-bottom: 4px;
}
.et-sidebar-back:hover { color: var(--et-primary); }
.et-sidebar .nav-section-title {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--et-faint);
  padding: 16px 20px 6px;
}
.et-sidebar .nav-link {
  display: flex; align-items: center; gap: 11px;
  color: var(--et-ink);
  font-size: 0.9rem;
  font-weight: 500;
  padding: 8px 14px;
  margin: 2px 12px;
  border-radius: 8px;
  line-height: 1.3;
}
.et-sidebar .nav-link:hover { background: var(--et-soft); }
.et-sidebar .nav-link.active,
.et-sidebar .nav-link.et-parent-active {
  background: var(--et-navy);
  color: #fff;
}
.et-sidebar .nav-link.active:hover,
.et-sidebar .nav-link.et-parent-active:hover { background: var(--et-navy); }
.et-sidebar .bi { font-size: 1rem; width: 18px; text-align: center; flex-shrink: 0; }
.et-sidebar .submenu {
  margin: 0 12px 4px;
  padding: 2px 0;
}
.et-sidebar .submenu .nav-link {
  padding: 6px 14px 6px 40px;
  margin: 1px 0;
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--et-muted);
}
.et-sidebar .submenu .nav-link:hover { color: var(--et-ink); }
.et-sidebar .submenu .nav-link.active {
  background: transparent;
  color: var(--et-primary);
  font-weight: 600;
}
.et-sidebar .menu-arrow {
  margin-left: auto;
  font-size: 0.7rem;
  color: var(--et-faint);
  transition: transform .18s ease;
}
.et-sidebar a[aria-expanded="true"] .menu-arrow { transform: rotate(90deg); }
.et-sidebar a[aria-expanded="true"] .menu-arrow,
.et-sidebar .et-parent-active .menu-arrow { color: inherit; }

/* ============ Sidebar collapse ============ */
/* Pinned to the bottom of the sidebar's own flex column (not floating over content), full width,
   so it reads as part of the rail rather than a stray control. */
.et-sidebar-footer-toggle {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%;
  border: none; border-top: 1px solid var(--et-border);
  background: var(--et-surface); color: var(--et-muted);
  padding: 13px 20px;
  font-size: 0.82rem; font-weight: 600;
  transition: background .12s ease, color .12s ease;
}
.et-sidebar-footer-toggle:hover { background: var(--et-soft); color: var(--et-primary); }
.et-sidebar-footer-toggle .bi { font-size: 0.95rem; width: auto; transition: transform .15s ease; }

html.sidebar-collapsed .et-sidebar { width: 68px; }
html.sidebar-collapsed .et-header-left { width: 68px; }
html.sidebar-collapsed .et-page-wrapper:not(.no-sidebar) { margin-left: 68px; }
html.sidebar-collapsed .et-sidebar .nav-section-title,
html.sidebar-collapsed .et-sidebar .menu-arrow,
html.sidebar-collapsed .et-sidebar .submenu,
html.sidebar-collapsed .et-sidebar .nav-label { display: none; }
html.sidebar-collapsed .et-sidebar .nav-link,
html.sidebar-collapsed .et-sidebar-back {
  justify-content: center; padding: 10px 0; margin: 2px 10px; gap: 0;
}
html.sidebar-collapsed .et-sidebar-back { border-bottom: 1px solid var(--et-border); }
html.sidebar-collapsed .et-sidebar .bi { font-size: 1.25rem; }
html.sidebar-collapsed .et-sidebar-footer-toggle { padding: 13px 0; gap: 0; }
html.sidebar-collapsed .et-sidebar-footer-toggle .bi { font-size: 1.1rem; }

/* ============ Bulk Demand Portal / Purchase Finalize Portal — compact header info bar ============
   Shared by CreateDemand.cshtml and Purchase.cshtml: a dense header card (small labels + small
   inputs, or a read-only "static field" for auto-filled/display-only values) so more of the
   viewport is left for the items table below it. */
.et-header-card { margin-bottom: 0.75rem; }
.et-header-card .card-body { padding: 0.75rem 1rem 0.85rem; }
/* Collapse toggle bar - shown on the header card so it can shrink to a one-line summary, freeing
   up room for the items table below without losing the info (still one click away). */
.et-collapse-toggle {
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; user-select: none;
  font-size: 0.85rem; font-weight: 600;
}
.et-collapse-toggle .bi { transition: transform .15s ease; color: var(--et-muted); }
.et-header-card.collapsed .card-body { display: none; }
.et-header-card.collapsed .et-collapse-toggle .bi { transform: rotate(180deg); }

/* ---- Orders page: SignalR live-update toast ---- */
.et-realtime-toast {
  position: fixed; top: 70px; right: 20px; z-index: 1080;
  background: var(--et-primary, #0092db); color: #fff;
  padding: 0.55rem 1rem; border-radius: 8px; font-size: 0.82rem; font-weight: 600;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
  opacity: 0; transform: translateY(-8px); pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.et-realtime-toast.show { opacity: 1; transform: translateY(0); }
.et-realtime-toast-clickable { cursor: pointer; pointer-events: auto; }

/* ---- Shared client-side table pagination (table[data-paginate]) ---- */
.et-pager {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.75rem; padding: 0.6rem 0.9rem; border: 1px solid var(--et-border);
  border-top: none; border-radius: 0 0 8px 8px; background: var(--et-surface-alt, #f8f9fb);
  font-size: 0.82rem; flex-wrap: wrap;
}
.et-pager-info { color: var(--et-muted, #6b7280); }
.et-pager-nav { display: flex; align-items: center; gap: 0.5rem; }
.et-pager-nav button {
  border: 1px solid var(--et-border); background: var(--et-surface); border-radius: 6px;
  padding: 0.3rem 0.7rem; font-size: 0.8rem; cursor: pointer; color: inherit;
}
.et-pager-nav button:disabled { opacity: 0.45; cursor: default; }
.et-pager-nav button:not(:disabled):hover { background: var(--et-surface-alt, #f1f3f5); }

/* ---- Orders page: collapsible status/amount summary ---- */
.et-summary-row { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.et-summary-row + .et-summary-row { margin-top: 0.65rem; padding-top: 0.65rem; border-top: 1px dashed var(--et-border); }
.et-summary-cell {
  flex: 1 1 150px; min-width: 130px; display: flex; align-items: center; gap: 0.55rem;
  background: var(--et-soft); border: 1px solid var(--et-border); border-radius: 8px; padding: 0.5rem 0.65rem;
}
.et-summary-icon {
  width: 28px; height: 28px; border-radius: 7px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 0.82rem;
}
.et-summary-icon.i-blue   { background: rgba(0, 146, 219, .1);  color: var(--et-primary); }
.et-summary-icon.i-green  { background: rgba(22, 163, 74, .1);   color: #16a34a; }
.et-summary-icon.i-amber  { background: rgba(217, 119, 6, .12);  color: #d97706; }
.et-summary-icon.i-violet { background: rgba(124, 58, 237, .1);  color: #7c3aed; }
.et-summary-icon.i-red    { background: rgba(220, 38, 38, .1);   color: #dc2626; }
.et-summary-label { font-size: 0.66rem; color: var(--et-muted); text-transform: uppercase; letter-spacing: .02em; line-height: 1.15; }
.et-summary-value { font-size: 0.88rem; font-weight: 700; color: var(--et-ink); font-variant-numeric: tabular-nums; line-height: 1.2; }
.et-summary-subvalue { font-size: 0.68rem; color: var(--et-muted); font-variant-numeric: tabular-nums; margin-top: 1px; }
.et-compact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 0.65rem 1rem;
}
.et-compact-grid .et-span-full { grid-column: 1 / -1; }
.et-field-label {
  display: block;
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--et-muted);
  margin-bottom: 3px;
}
.et-field-label em { text-transform: none; font-style: normal; font-weight: 500; letter-spacing: 0; opacity: .8; }
/* Mimics form-control-sm's box so read-only display values sit flush with real inputs in the grid. */
.et-static-field {
  display: block; width: 100%;
  min-height: 31px;
  padding: 0.25rem 0.6rem;
  font-size: 0.82rem; font-weight: 600; color: var(--et-ink);
  background: var(--et-soft);
  border: 1px solid var(--et-border);
  border-radius: 6px;
  line-height: 1.5;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.et-compact-grid .form-select-sm,
.et-compact-grid .form-control-sm { font-size: 0.82rem; }

/* ============ Bulk Demand Portal (Purchasing/CreateDemand) ============ */
.et-demand-card { margin-bottom: 88px; } /* reserves room for the fixed footer below */
.et-demand-card .card-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.6rem 0.9rem; }
.et-demand-table > thead > tr > th { padding: 0.5rem 0.85rem; font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--et-muted); }
.et-demand-table > tbody > tr > td { padding: 0.42rem 0.85rem; font-size: 0.85rem; vertical-align: middle; }
.et-demand-table input.form-control-sm { width: 110px; margin-left: auto; text-align: right; }
.et-demand-table .demand-subtotal { font-variant-numeric: tabular-nums; }

/* Fixed to the viewport bottom (not just after the table) so totals stay visible while scrolling
   a long items list - left offset mirrors .et-page-wrapper's sidebar-width margin exactly. */
.et-demand-footer {
  position: fixed; left: 232px; right: 0; bottom: 0; z-index: 900;
  display: flex; align-items: center; gap: 2.2rem;
  padding: 0.7rem 1.4rem;
  background: linear-gradient(90deg, var(--et-navy), var(--et-primary));
  box-shadow: 0 -4px 18px rgba(4, 53, 82, .18);
  color: #fff;
  transition: left .15s ease;
}
html.sidebar-collapsed .et-demand-footer { left: 68px; }
.et-demand-footer-stat { display: flex; flex-direction: column; line-height: 1.25; }
.et-demand-footer-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: .05em; opacity: .8; }
.et-demand-footer-value { font-size: 1.2rem; font-weight: 700; }
.et-demand-footer-actions { margin-left: auto; display: flex; gap: 0.6rem; }
.et-demand-footer-actions .btn-outline-light { border-color: rgba(255,255,255,.55); }
.et-demand-footer-actions .btn-light { color: var(--et-navy); }
/* Full invoice summary (Purchasing/Purchase) - a light 2-row box grid matching the legacy
   FinilizePO footer layout (Total Discount/Extra Discount/Sales/Advance/Further Tax broken out
   individually, Total Amount Exc.Tax vs Total Amount, two-way %/Rs bill-level Adv.Tax + Bill Disc.,
   Final Amount) - the always-visible part is just a slim bar (Final Amount + a toggle + Finalize),
   fixed to the viewport bottom; the full breakdown only opens as an on-demand overlay directly
   above it, like the line-editor side panel, so it never permanently eats table space. */
.et-purchase-items-card { margin-bottom: 68px; } /* reserves room for the slim bar only */
.et-invoice-summary {
  position: fixed; left: 232px; right: 0; bottom: 0; z-index: 900;
  display: flex; align-items: center; gap: 1.2rem;
  background: linear-gradient(90deg, var(--et-navy), var(--et-primary));
  color: #fff;
  padding: 0.6rem 1.2rem;
  box-shadow: 0 -4px 18px rgba(4, 53, 82, .18);
  transition: left .15s ease;
}
html.sidebar-collapsed .et-invoice-summary { left: 68px; }
.et-invoice-toggle {
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.3); border-radius: 6px;
  color: #fff; font-size: 0.8rem; font-weight: 600;
  padding: 0.35rem 0.7rem;
}
.et-invoice-toggle:hover { background: rgba(255,255,255,.2); }
.et-invoice-toggle .bi { transition: transform .15s ease; }
.et-invoice-toggle.open .bi { transform: rotate(180deg); }
.et-invoice-final { display: flex; flex-direction: column; line-height: 1.25; }
.et-invoice-final-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: .05em; opacity: .8; }
.et-invoice-final-value { font-size: 1.2rem; font-weight: 700; }
.et-invoice-summary-actions { margin-left: auto; }
.et-invoice-summary-actions .btn-light { color: var(--et-navy); }

/* The expandable breakdown panel itself - hidden by default, sits directly above the slim bar. */
.et-invoice-breakdown {
  display: none;
  position: fixed; left: 232px; right: 0; bottom: 56px; z-index: 899;
  background: var(--et-bg); border-top: 1px solid var(--et-border);
  padding: 0.6rem 1rem;
  box-shadow: 0 -2px 10px rgba(4, 53, 82, .1);
  max-height: 45vh; overflow-y: auto;
  transition: left .15s ease;
}
.et-invoice-breakdown.open { display: block; }
html.sidebar-collapsed .et-invoice-breakdown { left: 68px; }
.et-invoice-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
  gap: 0.4rem;
}
.et-invoice-stat {
  background: var(--et-soft); border: 1px solid var(--et-border); border-radius: 6px;
  padding: 0.3rem 0.5rem;
  text-align: center;
}
.et-invoice-stat-label { display: block; font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--et-muted); }
.et-invoice-stat-value { display: block; font-size: 0.92rem; font-weight: 700; color: var(--et-ink); font-variant-numeric: tabular-nums; }
.et-invoice-stat.editable { background: var(--et-surface); padding: 0.2rem 0.4rem; }
.et-invoice-stat.editable input {
  width: 100%; border: none; background: transparent;
  text-align: center; font-size: 0.92rem; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--et-ink); padding: 0;
}
.et-invoice-stat.editable input:disabled { color: var(--et-muted); }

/* ============ Purchase Finalize Portal (Purchasing/Purchase) ============ */
.et-panel-overlay {
  display: none; position: fixed; inset: 0; background: rgba(4, 20, 35, .5); z-index: 1040;
}
.et-panel-overlay.show { display: block; }
.et-panel {
  position: fixed; top: 0; right: -420px; width: 420px; max-width: 92vw; height: 100%;
  background: var(--et-surface); box-shadow: -6px 0 24px rgba(0,0,0,.15); z-index: 1050;
  transition: right .25s ease; display: flex; flex-direction: column;
}
.et-panel.open { right: 0; }
.et-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.25rem; background: var(--et-navy); color: #fff;
}
.et-panel-close { font-size: 1.6rem; line-height: 1; cursor: pointer; }
.et-panel-body { padding: 1rem 1.25rem; overflow-y: auto; flex: 1; }
.et-panel-section { padding: 0.6rem 0; border-bottom: 1px solid var(--et-border); }
.et-panel-section:last-of-type { border-bottom: none; }
.et-panel-summary { font-weight: 600; }
.cell-tax, .cell-lineamount, .cell-tradeprice, .cell-recvqty { font-variant-numeric: tabular-nums; }

/* Transient "just saved this session" cue on a receiving line - not persisted, just a same-view
   confirmation the row's edits actually went through (mirrors the legacy FinilizePO processed-row cue). */
.et-row-processed > td { background: #eafaf0; }
.et-row-processed:hover > td { background: #ddf5e6; }
.et-row-processed > td:first-child { box-shadow: inset 3px 0 0 #22c55e; }

/* Two-segment Demand->Purchase progress indicator (Purchasing/Index) */
.step-row { margin-bottom: 0; }
.step-col { padding-left: 3px; padding-right: 3px; }
.step-bar { height: 6px; border-radius: 5px; margin-bottom: 3px; }
.step-text { font-size: 9px; letter-spacing: .03em; text-transform: uppercase; font-weight: 700; color: var(--et-muted); }
.seg-gray  { background: #dcdcdc; }
.seg-amber { background: #f59e0b; }
.seg-blue  { background: var(--et-primary); }
.seg-green { background: #22c55e; }
.seg-red   { background: #ef4444; }
.item-count-badge { background: var(--et-soft); color: var(--et-ink); padding: 2px 8px; border-radius: 4px; font-size: 12px; border: 1px solid var(--et-border); }

/* ============ Page shell ============ */
.et-page-wrapper {
  margin-left: 232px;
  padding-top: 58px;
  min-height: 100%;
  transition: margin-left .15s ease;
}
.et-page-wrapper.no-sidebar { margin-left: 0; }
.et-content { padding: 24px 26px; max-width: 100%; }

.et-page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  gap: 12px;
}
.et-page-sub { font-size: 0.85rem; color: var(--et-muted); margin-top: 2px; }

/* ============ Cards ============ */
.card {
  background: var(--et-surface);
  border: 1px solid var(--et-border);
  border-radius: var(--et-radius);
  box-shadow: var(--et-shadow);
  margin-bottom: 20px;
}
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: transparent;
  border-bottom: 1px solid var(--et-border);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.8rem 1.1rem;
}
.card-body { padding: 1.1rem; }

/* ============ Stat cards ============ */
.stat-card { display: flex; align-items: center; gap: 14px; padding: 1.15rem 1.25rem; }
.stat-icon {
  width: 46px; height: 46px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}
.stat-icon.i-blue   { background: rgba(0, 146, 219, .1);  color: var(--et-primary); }
.stat-icon.i-green  { background: rgba(22, 163, 74, .1);   color: #16a34a; }
.stat-icon.i-amber  { background: rgba(217, 119, 6, .12);  color: #d97706; }
.stat-icon.i-violet { background: rgba(124, 58, 237, .1);  color: #7c3aed; }
.stat-icon.i-red    { background: rgba(220, 38, 38, .1);   color: #dc2626; }
.stat-label {
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--et-muted); font-weight: 600; margin-bottom: 3px;
}
.stat-value { font-size: 1.7rem; font-weight: 700; line-height: 1; letter-spacing: -0.02em; }
.stat-value .unit { font-size: 0.9rem; font-weight: 500; color: var(--et-faint); }

/* ============ Tables ============ */
.table { margin: 0; color: var(--et-ink); }
.table > thead > tr > th {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--et-muted);
  font-weight: 600;
  background: var(--et-soft);
  border-bottom: 1px solid var(--et-border);
  padding: 0.6rem 1.1rem;
  white-space: nowrap;
}
.table > tbody > tr > td {
  font-size: 0.9rem;
  padding: 0.7rem 1.1rem;
  vertical-align: middle;
  border-bottom: 1px solid var(--et-border);
}
.table > tbody > tr:last-child > td { border-bottom: 0; }
.table-hover > tbody > tr:hover > td { background: var(--et-soft); }
.text-num { font-variant-numeric: tabular-nums; text-align: right; }
.cell-strong { font-weight: 600; }
.cell-muted { color: var(--et-muted); }

/* ============ Badges (status pills) ============ */
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.75rem; font-weight: 600;
  padding: 0.24rem 0.62rem;
  border-radius: 999px;
  line-height: 1.4;
}
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .9; }
.pill-slate  { background: #eef1f6; color: #52607a; }
.pill-blue   { background: var(--et-primary-tint); color: var(--et-primary-dark); }
.pill-amber  { background: #fef3e2; color: #b45309; }
.pill-violet { background: #f1e9fe; color: #6d28d9; }
.pill-green  { background: #e6f6ec; color: #15803d; }
.pill-red    { background: #fdeaea; color: #c02626; }
.pill-gray   { background: #eef1f6; color: #52607a; }

/* ============ Rider Performance leaderboard: compact multi-line cells ============ */
.et-perf-table td { vertical-align: middle; }
.et-perf-table .et-subline { display: flex; gap: 0.3rem; flex-wrap: wrap; justify-content: flex-end; margin-top: 0.2rem; font-size: 0.72rem; }
.et-perf-table .et-subline .pill { font-size: 0.66rem; padding: 0.1rem 0.45rem; }
.et-perf-table .et-subline .pill::before { width: 4px; height: 4px; }

/* ============ Forms ============ */
.form-label { font-size: 0.82rem; font-weight: 600; color: var(--et-ink); margin-bottom: 0.3rem; }
.form-control, .form-select {
  font-size: 0.9rem;
  padding: 0.45rem 0.7rem;
  border-color: var(--et-border);
  border-radius: 8px;
  color: var(--et-ink);
}
.form-control:focus, .form-select:focus {
  border-color: var(--et-primary);
  box-shadow: 0 0 0 3px rgba(0, 146, 219, .12);
}
.form-control::placeholder { color: var(--et-faint); }
.form-text { font-size: 0.78rem; color: var(--et-muted); }
.form-check-input:checked { background-color: var(--et-primary); border-color: var(--et-primary); }

/* ============ Buttons ============ */
.btn {
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.45rem 0.95rem;
  border-radius: 8px;
  display: inline-flex; align-items: center; gap: 6px;
}
.btn-sm { font-size: 0.8rem; padding: 0.3rem 0.7rem; border-radius: 7px; }
.btn-primary { background-color: var(--et-primary); border-color: var(--et-primary); }
.btn-primary:hover, .btn-primary:focus { background-color: var(--et-primary-dark); border-color: var(--et-primary-dark); }
.btn-outline-secondary { color: var(--et-muted); border-color: var(--et-border); }
.btn-outline-secondary:hover { background: var(--et-soft); color: var(--et-ink); border-color: var(--et-border); }
.btn-success { background-color: #16a34a; border-color: #16a34a; }
.btn-success:hover { background-color: #12833c; border-color: #12833c; }

/* ============ Modals ============ */
.modal-content {
  border: 0;
  border-radius: 14px;
  box-shadow: var(--et-shadow-lg);
  overflow: hidden;
}
.modal-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--et-border);
}
.modal-title { font-size: 1.02rem; font-weight: 700; }
.modal-body { padding: 1.25rem; }
.modal-footer { padding: 0.85rem 1.25rem; border-top: 1px solid var(--et-border); }
.modal-backdrop.show { opacity: .4; }

/* ============ Alerts ============ */
.alert { font-size: 0.88rem; padding: 0.7rem 1rem; border-radius: 9px; border: 0; }
.alert-success { background: #e6f6ec; color: #15803d; }
.alert-danger { background: #fdeaea; color: #c02626; }

/* ============ Table toolbar: search ============ */
.et-search { position: relative; width: 260px; max-width: 40vw; }
.et-search .bi { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--et-faint); font-size: 0.9rem; pointer-events: none; }
.et-search .form-control { padding-left: 32px; }

/* ============ Status switch (green when on, like legacy) ============ */
.et-switch { min-height: auto; padding-left: 2.4em; }
.et-switch .form-check-input { width: 2em; height: 1.05em; margin-left: -2.4em; cursor: pointer; }
.et-switch .form-check-input:checked { background-color: #16a34a; border-color: #16a34a; }
.et-switch .form-check-input:focus { box-shadow: 0 0 0 3px rgba(22, 163, 74, .15); border-color: #16a34a; }

/* ============ Row action icons ============ */
.et-actions { display: flex; align-items: center; gap: 6px; }
.et-icon-btn {
  width: 30px; height: 30px;
  border: 0; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.9rem; cursor: pointer;
  background: var(--et-soft); color: var(--et-muted);
  transition: background .15s ease, color .15s ease;
}
.et-icon-btn.edit:hover { background: var(--et-primary-tint); color: var(--et-primary); }
.et-icon-btn.delete:hover { background: #fdeaea; color: #c02626; }
.et-icon-btn.expired:hover { background: #fef3e2; color: #b45309; }

/* ============ Home: grouped navigation cards ============ */
.et-group-title {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 28px 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.et-group-title .bi { color: var(--et-faint); font-size: 0.85rem; }

/* ============ Home: welcome header + app grid ============ */
.et-welcome { margin-bottom: 24px; }
.et-welcome-title { font-size: 1.6rem; font-weight: 700; color: var(--et-ink); letter-spacing: -0.02em; margin: 0; }
.et-welcome-sub { font-size: 0.88rem; color: var(--et-muted); margin-top: 4px; }

.et-apps-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--et-border);
}
.et-welcome + .et-apps-head { margin-top: 0; }
.et-apps-title { font-size: 0.92rem; font-weight: 700; color: var(--et-ink); letter-spacing: -0.01em; }
.et-category-select { width: auto; min-width: 140px; }

.et-app-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 10px;
  align-items: stretch;
}
.et-app-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--et-surface);
  border: 1px solid var(--et-border);
  border-radius: var(--et-radius);
  box-shadow: var(--et-shadow);
  padding: 0.7rem 0.85rem;
  transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease;
}
.et-app-card:hover {
  box-shadow: var(--et-shadow-lg);
  border-color: var(--et-primary);
  transform: translateY(-1px);
}
.et-app-card-body { flex-grow: 1; min-width: 0; }
.et-app-card-title { font-weight: 700; font-size: 0.92rem; color: var(--et-primary); margin-bottom: 2px; }
.et-app-card-module { font-size: 0.72rem; font-weight: 600; color: var(--et-faint); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.et-app-card-desc { font-size: 0.79rem; color: var(--et-muted); line-height: 1.4; }
.et-app-card-arrow { flex-shrink: 0; color: var(--et-faint); font-size: 1rem; }
.et-app-card:hover .et-app-card-arrow { color: var(--et-primary); }

/* ============ Misc ============ */
.empty-row td { color: var(--et-muted); text-align: center; padding: 2rem 1rem !important; font-size: 0.88rem; }
.section-hint { font-size: 0.82rem; color: var(--et-muted); }
hr { border-color: var(--et-border); opacity: 1; }

/* ============ Orders: status pill-tabs ============ */
.et-status-tabs {
  display: inline-flex;
  gap: 2px;
  background: var(--et-soft);
  border: 1px solid var(--et-border);
  border-radius: 999px;
  padding: 3px;
}
.et-status-tab {
  padding: 6px 14px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--et-muted);
  border-radius: 999px;
  white-space: nowrap;
  text-decoration: none;
  /* Reset for <button>-based tabs (e.g. Stock Adjustment's Reason selector) - <a>-based tabs
     (Orders' own status filter) never needed this, since links carry none of this chrome by
     default, but a plain <button> does unless explicitly cleared. */
  border: 0;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  line-height: 1.3;
  cursor: pointer;
}
.et-status-tab:hover { color: var(--et-ink); }
.et-status-tab:focus, .et-status-tab:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--et-primary-tint); }
.et-status-tab.active { background: var(--et-navy); color: #fff; }
/* Count pill inside a status tab. Quiet by default, brighter on the active tab, amber when it needs attention. */
.et-tab-count {
  display: inline-block;
  min-width: 20px;
  margin-left: 7px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--et-border);
  color: var(--et-ink);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.et-status-tab.active .et-tab-count { background: rgba(255, 255, 255, 0.22); color: #fff; }
.et-tab-count.warn { background: #f59e0b; color: #fff; }

/* ============ Orders: filters bar ============ */
.et-filters-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--et-soft);
  border: 1px solid var(--et-border);
  border-radius: var(--et-radius);
  padding: 10px 14px;
  margin-bottom: 14px;
}
.et-results-count { font-size: 0.82rem; color: var(--et-muted); white-space: nowrap; }
.et-sortable { user-select: none; }
.et-sortable .bi { font-size: 0.7rem; color: var(--et-faint); margin-left: 3px; }
.et-sortable:hover { color: var(--et-primary); }
.et-sortable:hover .bi { color: var(--et-primary); }

/* ============ Orders: status progress bar ============ */
.et-status-cell { min-width: 110px; }
.et-status-label { font-size: 0.74rem; font-weight: 700; margin-bottom: 3px; }
.et-status-label.s-neutral { color: var(--et-muted); }
.et-status-label.s-progress { color: #b45309; }
.et-status-label.s-done { color: #15803d; }
.et-status-label.s-failed { color: #c02626; }
.et-progress-bar {
  display: flex;
  gap: 3px;
  height: 4px;
}
.et-progress-bar span { flex: 1; border-radius: 3px; background: var(--et-border); }
.et-progress-bar span.on-neutral { background: #94a3b8; }
.et-progress-bar span.on-progress { background: #d97706; }
.et-progress-bar span.on-done { background: #16a34a; }
.et-progress-bar span.on-failed { background: #dc2626; }

/* ============ Orders: payment method icon ============ */
.et-pay-icon { font-size: 1rem; color: var(--et-muted); }
.et-pay-icon.cash { color: #16a34a; }
.et-pay-icon.card { color: var(--et-primary); }

/* ============ Orders table: denser, professional data-grid treatment ============ */
.et-orders-table > thead > tr > th { padding: 0.5rem 0.65rem; font-size: 0.7rem; }
.et-orders-table > tbody > tr > td { padding: 0.36rem 0.65rem; font-size: 0.81rem; }
.et-orders-table > tbody > tr { border-left: 3px solid transparent; }
.et-orders-table > tbody > tr.on-progress { border-left-color: #d97706; }
.et-orders-table > tbody > tr.on-done { border-left-color: #16a34a; }
.et-orders-table > tbody > tr.on-failed { border-left-color: #dc2626; }
.et-orders-table > tbody > tr.on-neutral { border-left-color: var(--et-border); }

/* Total column gets its own slightly larger/bolder treatment (not the generic .cell-strong, which
   is reused across other pages) since it's the single most-scanned number in this table. */
.et-total-cell { font-size: 0.92rem; font-weight: 700; color: var(--et-ink); }

/* Purchase Finalize Portal: flags a line Etotrack received short or not at all, so Admin can spot
   a supplier shortfall at a glance before finalizing - red for nothing received, amber for
   partial. Confirmed live (via computed-style inspection) that a background-color on the <tr>
   itself is invisible: Bootstrap's table CSS paints its own opaque background on every <td>
   (`--bs-table-bg`), which sits on top of and fully hides any color set on the parent row - the
   fix has to target the cells directly, not the row. */
.et-demand-table > tbody > tr.et-row-danger > td { background-color: rgba(220, 38, 38, 0.22) !important; }
.et-demand-table > tbody > tr.et-row-warning > td { background-color: rgba(217, 119, 6, 0.22) !important; }
.et-demand-table > tbody > tr.et-row-danger > td:first-child { box-shadow: inset 4px 0 0 #dc2626; }
/* Purchase finalize page: a line whose estimated selling price is below its cost */
.et-demand-table > tbody > tr.et-row-loss > td { background-color: rgba(220, 38, 38, 0.10); }
.et-demand-table > tbody > tr.et-row-loss > td:first-child { box-shadow: inset 4px 0 0 #dc2626; }
.et-profit-value.et-profit-gain { color: #6ee0a0; }
.et-profit-value.et-profit-loss, .et-profit-note.et-profit-loss { color: #ff9a9a; }
.et-profit-margin { opacity: .85; font-weight: 600; }
.et-profit-note { display: block; font-size: 0.68rem; opacity: .8; }
.et-demand-table > tbody > tr.et-row-warning > td:first-child { box-shadow: inset 4px 0 0 #d97706; }

.et-cell-primary { font-weight: 600; color: var(--et-ink); font-size: 0.83rem; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 130px; }
.et-cell-secondary { font-size: 0.72rem; color: var(--et-faint); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 130px; }

.et-note-cell { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.78rem; }

/* Timer pills - stacked vertically (Order/Prep/Rider), solid-filled colors so a "late" order is
   unmistakable at a glance (red) vs. on-track (blue running / green done). This is the one
   deliberate exception to the otherwise-compact row density elsewhere on this page - flagging a
   late order is worth the extra row height. A title attribute carries the full explanation for
   hover; the pill text itself stays short. */
.et-timer-group { display: flex; flex-direction: column; gap: 3px; }
.et-timer-big {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  font-size: 0.66rem; font-weight: 600;
  padding: 2px 7px;
  border-radius: 5px;
  white-space: nowrap;
  width: 100px;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.et-timer-big .bi { font-size: 0.62rem; flex-shrink: 0; }
.et-timer-big.pending { background: var(--et-border); color: var(--et-faint); }
.et-timer-big.running { background: var(--et-primary); }
.et-timer-big.done { background: #16a34a; }
.et-timer-big.late { background: #dc2626; }
.et-timer-big.stopped { background: #6b7688; }

/* Compact inline assign control (picker/rider cells) - was a full select+button, now fits one
   tight row instead of stretching the row height. */
/* Auto-submits on selection (no separate button) - a plain Bootstrap form-select-sm, just
   narrowed to fit the column. The earlier attempt shrank its vertical padding directly, which
   broke the native dropdown-arrow icon's positioning (rendered above the text) - width alone is
   safe to override, padding/line-height are not. */
.et-assign-select { width: 118px; font-size: 0.76rem; }

/* Product list thumbnail + click-to-zoom lightbox. */
.et-thumb {
  width: 46px; height: 46px; object-fit: cover; border-radius: 9px;
  border: 1px solid var(--et-border, #e2e8f0);
  background: var(--et-surface); cursor: zoom-in;
  transition: transform .12s ease, box-shadow .12s ease;
}
.et-thumb[data-full]:hover { transform: scale(1.04); box-shadow: 0 3px 10px rgba(15, 23, 42, .14); }
.et-thumb-empty {
  width: 46px; height: 46px; border-radius: 9px;
  border: 1px dashed var(--et-border, #e2e8f0);
  display: flex; align-items: center; justify-content: center;
  color: var(--et-faint); font-size: 1.15rem; cursor: default;
}
/* Lazy-loaded thumbnail: shimmer placeholder while loading, icon fallback on load failure. */
.et-thumb-wrap {
  position: relative;
  width: 46px; height: 46px;
  border-radius: 9px;
  overflow: hidden;
  border: 1px solid var(--et-border, #e2e8f0);
  background: var(--et-surface);
}
.et-thumb-img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  cursor: zoom-in;
  transition: transform .12s ease, box-shadow .12s ease;
}
.et-thumb-wrap:hover .et-thumb-img { transform: scale(1.04); }
.et-thumb-shimmer {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--et-border) 25%, var(--et-soft) 37%, var(--et-border) 63%);
  background-size: 400% 100%;
  animation: et-thumb-shimmer 1.4s ease infinite;
}
.et-thumb-wrap.loaded .et-thumb-shimmer { display: none; }
.et-thumb-fallback {
  position: absolute; inset: 0;
  display: none; align-items: center; justify-content: center;
  color: var(--et-faint); font-size: 1.15rem;
  background: var(--et-surface);
}
.et-thumb-wrap.error .et-thumb-fallback { display: flex; }
@keyframes et-thumb-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}
.et-img-lightbox .modal-dialog { transform: scale(.85); transition: transform .25s ease; max-width: min(90vw, 560px); }
.et-img-lightbox.show .modal-dialog { transform: scale(1); }
.et-img-lightbox .modal-content { background: transparent; }
.et-lightbox-img { width: 100%; max-height: 80vh; object-fit: contain; border-radius: 8px; }

/* ============ Purchase Finalize: Invoice Photos gallery ============ */
.et-invoice-photos { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.et-invoice-photo { position: relative; width: 64px; height: 64px; border-radius: 9px; overflow: hidden; border: 1px solid var(--et-border); }
.et-invoice-photo .et-thumb-img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }
.et-invoice-photo-remove {
  position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; border-radius: 50%;
  background: rgba(0,0,0,.55); color: #fff; border: none; font-size: .6rem;
  display: flex; align-items: center; justify-content: center; padding: 0; line-height: 1;
}
.et-invoice-photo-remove:hover { background: rgba(220, 38, 38, .85); }

/* ============ Products list (polished) ============ */
.et-products-table > thead > tr > th {
  padding: 0.55rem 0.9rem;
  font-size: 0.68rem;
  letter-spacing: .06em;
}
.et-products-table > tbody > tr > td {
  padding: 0.5rem 0.9rem;
  font-size: 0.85rem;
  vertical-align: middle;
}
.et-products-table > tbody > tr:hover > td { background: var(--et-soft); }
.et-products-table .et-col-img { width: 1%; padding-right: 0.4rem; }
.et-products-table .et-col-act { width: 1%; }

/* Product identity cell: name (strong) + barcode (muted, tabular) stacked. */
.et-prod-name {
  font-weight: 600; color: var(--et-ink);
  font-size: 0.86rem; line-height: 1.25;
  display: flex; align-items: center; gap: 0.3rem;
}
.et-prod-barcode {
  font-size: 0.72rem; color: var(--et-faint);
  font-variant-numeric: tabular-nums; letter-spacing: .02em; line-height: 1.25;
}
.et-perishable { color: #d97706; font-size: 0.78rem; }

.et-nowrap { white-space: nowrap; }
.et-cat-path {
  color: var(--et-muted); font-size: 0.8rem; white-space: nowrap;
}
.et-cat-path .bi { font-size: 0.6rem; color: var(--et-faint); margin: 0 0.28rem; vertical-align: middle; }

.et-price { font-weight: 700; color: var(--et-ink); }
.et-stock-low { color: #dc2626; font-weight: 700; }
.et-set-price {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.78rem; font-weight: 600; color: var(--et-primary);
}
.et-set-price .bi { font-size: 0.72rem; }

/* ============ Inventory / Stock list (polished, same density pass as Products) ============ */
.et-inventory-table > thead > tr > th {
  padding: 0.55rem 0.9rem;
  font-size: 0.68rem;
  letter-spacing: .06em;
}
.et-inventory-table > tbody > tr > td {
  padding: 0.5rem 0.9rem;
  font-size: 0.85rem;
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
}
.et-inventory-table > tbody > tr:hover > td { background: var(--et-soft); }

/* ============ Login page (split-screen, brand-forward) ============ */
.et-login-page {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  background: var(--et-soft);
}
@media (max-width: 860px) {
  .et-login-page { grid-template-columns: 1fr; }
}

.et-login-brand {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 4rem;
  background: linear-gradient(155deg, #01A1FF 0%, #0092DB 55%, #043552 100%);
  color: #fff;
}
.et-login-brand::before,
.et-login-brand::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
}
.et-login-brand::before { width: 420px; height: 420px; top: -140px; right: -120px; }
.et-login-brand::after { width: 280px; height: 280px; bottom: -100px; left: -60px; background: rgba(255, 255, 255, .06); }

.et-login-brand-icons { position: absolute; inset: 0; pointer-events: none; }
.et-login-brand-icons i { position: absolute; color: rgba(255, 255, 255, .16); }
.et-login-brand-icons i:nth-child(1) { top: 10%; left: 66%; font-size: 3.4rem; transform: rotate(-10deg); }
.et-login-brand-icons i:nth-child(2) { top: 60%; left: 76%; font-size: 2.5rem; transform: rotate(12deg); }
.et-login-brand-icons i:nth-child(3) { top: 76%; left: 12%; font-size: 2.9rem; transform: rotate(-14deg); }
.et-login-brand-icons i:nth-child(4) { top: 16%; left: 6%; font-size: 2.1rem; transform: rotate(18deg); }

.et-login-brand-content { position: relative; z-index: 1; max-width: 420px; }
.et-login-wordmark {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 800;
  font-style: italic;
  font-size: 3rem;
  line-height: 1;
  letter-spacing: -0.01em;
}
.et-login-tagline { margin-top: 0.9rem; font-size: 1.05rem; color: rgba(255, 255, 255, .86); line-height: 1.5; }
.et-login-badges { margin-top: 2.5rem; display: flex; flex-wrap: wrap; gap: 1.5rem 1.75rem; }
.et-login-badge { display: flex; align-items: center; gap: 0.55rem; font-size: 0.85rem; color: rgba(255, 255, 255, .92); }
.et-login-badge i { font-size: 1.1rem; }

.et-login-form-side { display: flex; align-items: center; justify-content: center; padding: 2.5rem 1.5rem; }
.et-login-card { width: 100%; max-width: 360px; }

.et-login-heading { font-size: 1.5rem; font-weight: 700; color: var(--et-ink); margin-bottom: 0.3rem; }
.et-login-sub { color: var(--et-muted); font-size: 0.9rem; margin-bottom: 2rem; }
@media (max-width: 860px) {
  .et-login-brand { padding: 2.5rem 2rem 2.25rem; }
}

.et-login-field { margin-bottom: 1.2rem; }
.et-login-field label {
  display: block; font-size: 0.8rem; font-weight: 600; color: var(--et-muted);
  margin-bottom: 0.4rem; text-transform: uppercase; letter-spacing: .03em;
}
.et-login-input-wrap { position: relative; display: flex; align-items: center; }
.et-login-input-wrap i { position: absolute; left: 0.9rem; color: var(--et-faint); font-size: 1rem; }
.et-login-input-wrap input {
  width: 100%;
  padding: 0.75rem 1rem 0.75rem 2.6rem;
  border: 1.5px solid var(--et-border);
  border-radius: var(--et-radius);
  font-size: 0.95rem;
  color: var(--et-ink);
  background: var(--et-surface);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.et-login-input-wrap input:focus {
  outline: none;
  border-color: var(--et-primary);
  box-shadow: 0 0 0 3px var(--et-primary-tint);
}
.et-login-input-wrap.has-toggle input { padding-right: 2.8rem; }
.et-login-pw-toggle {
  position: absolute;
  right: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: none;
  background: transparent;
  color: var(--et-faint);
  cursor: pointer;
  border-radius: 6px;
}
.et-login-pw-toggle:hover { color: var(--et-muted); }
.et-login-pw-toggle i { position: static; left: auto; font-size: 1rem; }

.et-login-btn {
  width: 100%;
  padding: 0.8rem 1rem;
  border: none;
  border-radius: var(--et-radius);
  background: linear-gradient(135deg, #01A1FF, #0092DB);
  color: #fff;
  font-weight: 700;
  font-size: 0.98rem;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
  box-shadow: 0 8px 20px rgba(0, 146, 219, .28);
}
.et-login-btn:hover { transform: translateY(-1px); box-shadow: 0 12px 24px rgba(0, 146, 219, .36); }
.et-login-btn:active { transform: translateY(0); }

.et-login-error {
  display: flex; align-items: center; gap: 0.55rem;
  background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c;
  padding: 0.7rem 0.9rem; border-radius: var(--et-radius);
  font-size: 0.85rem; margin-bottom: 1.2rem;
}
.et-login-error i { font-size: 1rem; flex-shrink: 0; }

.et-login-footer { margin-top: 2rem; font-size: 0.78rem; color: var(--et-faint); text-align: center; }

/* ---- Reports: compact chart primitives (dependency-free, inline SVG/CSS) ---- */
.et-report-row { display: flex; gap: 1rem; flex-wrap: wrap; align-items: stretch; }
.et-report-card { flex: 1 1 360px; min-width: 300px; }
.et-report-card .card-header { font-size: 0.82rem; font-weight: 600; color: var(--et-ink); }

.et-donut-wrap { display: flex; align-items: center; gap: 1.25rem; padding: 0.9rem 1rem; }
.et-donut-outer { position: relative; width: 128px; height: 128px; flex-shrink: 0; }
.et-donut { width: 100%; height: 100%; border-radius: 50%; }
.et-donut-center {
  position: absolute; inset: 20px; background: var(--et-surface); border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  box-shadow: inset 0 0 0 1px var(--et-border);
}
.et-donut-value { font-size: 0.8rem; font-weight: 700; color: var(--et-ink); line-height: 1.15; }
.et-donut-label { font-size: 0.6rem; color: var(--et-muted); text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; }

.et-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; flex: 1; min-width: 0; }
.et-legend li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.78rem; }
.et-legend-swatch { width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0; }
.et-legend-name { flex: 1; color: var(--et-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.et-legend-pct { color: var(--et-muted); font-variant-numeric: tabular-nums; font-size: 0.74rem; width: 40px; text-align: right; }
.et-legend-value { color: var(--et-faint); font-variant-numeric: tabular-nums; font-size: 0.72rem; width: 68px; text-align: right; }

.et-barchart { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.9rem 1rem; }
.et-bar-row { display: grid; grid-template-columns: 132px 1fr 78px; align-items: center; gap: 0.6rem; font-size: 0.76rem; }
.et-bar-name { color: var(--et-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.et-bar-track { background: var(--et-soft); border-radius: 4px; height: 9px; overflow: hidden; border: 1px solid var(--et-border); }
.et-bar-fill { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--et-primary), var(--et-blue)); }
.et-bar-value { text-align: right; color: var(--et-muted); font-variant-numeric: tabular-nums; }

.et-trend-wrap { padding: 1rem 1rem 0.75rem; }
.et-trend { display: flex; align-items: flex-end; gap: 3px; height: 140px; }
.et-trend-col { flex: 1; display: flex; align-items: flex-end; height: 100%; min-width: 2px; }
.et-trend-bar {
  width: 100%; border-radius: 3px 3px 0 0; min-height: 2px;
  background: linear-gradient(180deg, var(--et-blue), var(--et-primary));
}
.et-trend-labels { display: flex; justify-content: space-between; margin-top: 0.4rem; font-size: 0.68rem; color: var(--et-faint); }

/* ============ Mart Health dashboard ============ */
.mh-status-banner {
  display: flex; align-items: flex-start; gap: 0.9rem;
  border-radius: 12px; padding: 1rem 1.2rem; border: 1px solid transparent;
}
.mh-status-icon { font-size: 1.6rem; line-height: 1; margin-top: 0.1rem; }
.mh-status-headline { font-size: 1.05rem; font-weight: 700; }
.mh-status-issues { margin: 0.4rem 0 0; padding-left: 1.1rem; font-size: 0.84rem; }
.mh-status-issues li { margin-bottom: 0.15rem; }
.mh-status-green { background: #e6f6ec; border-color: #bfe8cc; color: #15803d; }
.mh-status-green .mh-status-issues { color: #1b6b3a; }
.mh-status-amber { background: #fef3e2; border-color: #fbdca3; color: #b45309; }
.mh-status-amber .mh-status-issues { color: #92400e; }
.mh-status-red { background: #fdeaea; border-color: #f7c4c4; color: #c02626; }
.mh-status-red .mh-status-issues { color: #9c1c1c; }

.mh-hero { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; }
.mh-hero-cell {
  background: var(--et-surface); border: 1px solid var(--et-border); border-radius: 12px;
  padding: 1rem 1.1rem; box-shadow: var(--et-shadow);
}
.mh-hero-label { font-size: 0.76rem; color: var(--et-muted); font-weight: 600; display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.35rem; }
.mh-hero-value { font-size: 1.7rem; font-weight: 700; color: var(--et-ink); line-height: 1.1; font-variant-numeric: tabular-nums; }
.mh-hero-value .unit { font-size: 0.85rem; font-weight: 600; color: var(--et-muted); }
.mh-hero-sub { font-size: 0.74rem; color: var(--et-faint); margin-top: 0.3rem; }
.mh-hero-delta { font-size: 0.76rem; font-weight: 600; margin-top: 0.3rem; display: flex; align-items: center; gap: 0.2rem; }
.mh-hero-delta.up { color: #16a34a; }
.mh-hero-delta.down { color: #dc2626; }

.mh-chart-wrap { padding: 1rem 1.1rem 0.8rem; }
.mh-chart-svg { width: 100%; height: 180px; display: block; }
.mh-chart-legend { display: flex; gap: 1.1rem; margin-top: 0.5rem; font-size: 0.74rem; color: var(--et-muted); }
.mh-chart-legend span { display: flex; align-items: center; gap: 0.35rem; }
.mh-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; }
.mh-dot-dash { border-radius: 2px; }

.mh-linkcell { text-decoration: none; color: inherit; transition: background .12s ease, transform .12s ease; }
.mh-linkcell:hover { background: var(--et-soft); transform: translateY(-1px); }

@@media (max-width: 992px) { .mh-hero { grid-template-columns: repeat(2, 1fr); } }
@@media (max-width: 560px) { .mh-hero { grid-template-columns: 1fr; } }

/* ============ Riders Attendance table (polished) ============ */
.et-attendance-table > thead > tr > th {
  padding: 0.6rem 0.9rem;
  font-size: 0.68rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--et-faint);
}
.et-attendance-table > tbody > tr > td {
  padding: 0.65rem 0.9rem;
  vertical-align: middle;
}
.et-attendance-table > tbody > tr.et-row-accent-blue > td:first-child { box-shadow: inset 3px 0 0 var(--et-primary); }
.et-attendance-table > tbody > tr.et-row-accent-red > td:first-child { box-shadow: inset 3px 0 0 #dc2626; }
.et-attendance-table > tbody > tr.et-row-accent-green > td:first-child { box-shadow: inset 3px 0 0 #16a34a; }

.et-att-rider { display: flex; align-items: center; gap: 10px; }
.et-att-avatar {
  width: 34px; height: 34px; flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--et-primary), var(--et-navy));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.72rem;
}
.et-att-shift {
  display: flex; align-items: center; gap: 7px;
  font-size: 0.82rem;
  color: var(--et-ink);
  line-height: 1.7;
}
.et-att-shift-icon { font-size: 0.85rem; width: 14px; text-align: center; }
.et-att-shift-icon.in { color: #16a34a; }
.et-att-shift-icon.out { color: #64748b; }
.et-att-shift-icon.live { color: var(--et-primary); }

.et-att-photos { display: flex; gap: 10px; }
.et-att-photo-slot { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.et-att-photo-slot .et-thumb-wrap,
.et-att-photo-slot .et-thumb-empty { width: 40px; height: 40px; border-radius: 50%; }
.et-att-photo-label {
  font-size: 0.6rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--et-faint);
}
.et-att-hours { font-weight: 700; font-size: 0.95rem; color: var(--et-ink); }

/* ============ Dark mode - component overrides ============
   Everything above already flips automatically via the :root/html[data-bs-theme="dark"] token
   redefinitions at the top of this file (var(--et-surface)/(--et-bg)/(--et-soft)/(--et-border)
   etc.) or via Bootstrap's own native data-bs-theme theming (cards, tables, modals, forms,
   buttons). This block only covers the handful of components that intentionally use a fixed
   pastel-light color per semantic state (status pills, alert banners, hover tints) - those need
   a genuinely different, dark-appropriate value, not just a token swap, so the text stays legible
   against a light chip and the chip itself doesn't glare against a dark page. */
html[data-bs-theme="dark"] .pill-slate  { background: rgba(148, 163, 184, .16); color: #c3cadb; }
html[data-bs-theme="dark"] .pill-amber  { background: rgba(217, 119, 6, .22);   color: #fbbf6b; }
html[data-bs-theme="dark"] .pill-violet { background: rgba(124, 58, 237, .24);  color: #c4a5fb; }
html[data-bs-theme="dark"] .pill-green  { background: rgba(22, 163, 74, .22);   color: #6ee0a0; }
html[data-bs-theme="dark"] .pill-red    { background: rgba(220, 38, 38, .22);   color: #ff9a9a; }
html[data-bs-theme="dark"] .pill-gray   { background: rgba(148, 163, 184, .16); color: #c3cadb; }

html[data-bs-theme="dark"] .alert-success { background: rgba(22, 163, 74, .16); color: #6ee0a0; }
html[data-bs-theme="dark"] .alert-danger  { background: rgba(220, 38, 38, .16); color: #ff9a9a; }

html[data-bs-theme="dark"] .et-icon-btn.delete:hover  { background: rgba(220, 38, 38, .18); color: #ff9a9a; }
html[data-bs-theme="dark"] .et-icon-btn.expired:hover { background: rgba(217, 119, 6, .2);  color: #fbbf6b; }

html[data-bs-theme="dark"] .et-row-processed > td { background: rgba(34, 197, 94, .12); }
html[data-bs-theme="dark"] .et-row-processed:hover > td { background: rgba(34, 197, 94, .18); }

html[data-bs-theme="dark"] .mh-status-green { background: rgba(22, 163, 74, .14); border-color: rgba(22, 163, 74, .35); color: #6ee0a0; }
html[data-bs-theme="dark"] .mh-status-green .mh-status-issues { color: #a3e8c0; }
html[data-bs-theme="dark"] .mh-status-amber { background: rgba(217, 119, 6, .16); border-color: rgba(217, 119, 6, .4); color: #fbbf6b; }
html[data-bs-theme="dark"] .mh-status-amber .mh-status-issues { color: #fdd9ad; }
html[data-bs-theme="dark"] .mh-status-red { background: rgba(220, 38, 38, .16); border-color: rgba(220, 38, 38, .4); color: #ff9a9a; }
html[data-bs-theme="dark"] .mh-status-red .mh-status-issues { color: #ffc2c2; }

html[data-bs-theme="dark"] .et-login-error { background: rgba(220, 38, 38, .16); border-color: rgba(220, 38, 38, .4); color: #ff9a9a; }

/* The side-panel drawer and image lightbox need a stronger shadow to actually read as "lifted"
   against a dark page - the light-mode shadow value all but disappears on a dark background. */
html[data-bs-theme="dark"] .et-panel { box-shadow: -6px 0 24px rgba(0, 0, 0, .55); }
html[data-bs-theme="dark"] .et-lightbox-img { box-shadow: 0 12px 40px rgba(0, 0, 0, .6); }

/* Header/sidebar theme toggle button - same circular chip as the existing bell buttons. */
.et-header-theme-toggle {
  position: relative;
  width: 36px; height: 36px;
  border: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--et-muted);
  font-size: 1.05rem;
  background: transparent;
  cursor: pointer;
}
.et-header-theme-toggle:hover { background: var(--et-soft); color: var(--et-ink); }
.et-header-theme-toggle .bi-moon-stars { display: none; }
html[data-bs-theme="dark"] .et-header-theme-toggle .bi-sun { display: none; }
html[data-bs-theme="dark"] .et-header-theme-toggle .bi-moon-stars { display: inline; }

/* ============ Global command palette (Ctrl+K) ============ */
.et-header-search-trigger {
  display: flex; align-items: center; gap: 6px;
  border: 1px solid var(--et-border); border-radius: 20px;
  background: var(--et-soft); color: var(--et-muted);
  padding: 6px 12px; font-size: 0.82rem;
  cursor: pointer; margin-right: 6px;
}
.et-header-search-trigger:hover { background: var(--et-border); color: var(--et-ink); }
.et-header-search-label { display: none; }
@media (min-width: 992px) { .et-header-search-label { display: inline; } }
.et-header-search-kbd {
  font-size: 0.68rem; font-weight: 600; color: var(--et-faint);
  border: 1px solid var(--et-border); border-radius: 4px; padding: 1px 5px;
  display: none;
}
@media (min-width: 992px) { .et-header-search-kbd { display: inline; } }

.et-gsearch-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(0, 0, 0, .45);
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 12vh;
}
.et-gsearch-box {
  width: 100%; max-width: 560px; max-height: 70vh;
  background: var(--et-surface); border-radius: 14px;
  box-shadow: var(--et-shadow-lg);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.et-gsearch-input-row {
  display: flex; align-items: center; gap: 10px;
  padding: 0.9rem 1.1rem;
  border-bottom: 1px solid var(--et-border);
  color: var(--et-faint);
  font-size: 1.05rem;
}
.et-gsearch-input-row input {
  flex: 1; border: none; outline: none; background: transparent;
  color: var(--et-ink); font-size: 0.98rem;
}
.et-gsearch-input-row input::placeholder { color: var(--et-faint); }
.et-gsearch-input-row kbd {
  font-size: 0.7rem; color: var(--et-faint);
  border: 1px solid var(--et-border); border-radius: 4px; padding: 1px 6px;
}
.et-gsearch-results { overflow-y: auto; padding: 0.5rem 0; }
.et-gsearch-hint { padding: 1.2rem; text-align: center; color: var(--et-faint); font-size: 0.86rem; }
.et-gsearch-group-title {
  padding: 0.5rem 1.1rem 0.3rem;
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--et-faint);
}
.et-gsearch-item {
  display: flex; flex-direction: column; gap: 1px;
  padding: 0.55rem 1.1rem;
  text-decoration: none; color: var(--et-ink);
  cursor: pointer;
}
.et-gsearch-item.active, .et-gsearch-item:hover { background: var(--et-soft); }
.et-gsearch-item-main { font-weight: 600; font-size: 0.9rem; }
.et-gsearch-item-sub { font-size: 0.76rem; color: var(--et-muted); }

/* Login page's own toggle - no header to sit in, so it floats top-right of the whole page. On a
   narrow viewport the two-column layout stacks (brand gradient panel on top), so a translucent
   backdrop keeps the icon legible whether it lands over the gradient or the light form panel. */
.et-login-theme-toggle {
  position: absolute; top: 1.1rem; right: 1.1rem; z-index: 5;
  background: rgba(127, 127, 127, .14);
  color: var(--et-ink);
}
.et-login-theme-toggle:hover { background: rgba(127, 127, 127, .24); }

/* Mart Health - busy-hours chart (24 columns, zero-dependency) */
.mh-hours { display: flex; align-items: stretch; gap: 3px; height: 170px; border-bottom: 1px solid var(--et-border); }
.mh-hour-col { flex: 1; position: relative; display: flex; align-items: flex-end; border-radius: 3px 3px 0 0; }
.mh-hour-col:hover { background: rgba(0, 146, 219, 0.08); }
.mh-hour-col.mh-hour-now { background: rgba(245, 158, 11, 0.10); }
.mh-hour-bar { width: 100%; min-height: 2px; background: var(--et-primary); opacity: 0.78; border-radius: 3px 3px 0 0; }
.mh-hour-bar.mh-hour-top { background: #0b3b57; opacity: 1; }
.mh-hour-today { position: absolute; left: 12%; right: 12%; height: 3px; background: #d97706; border-radius: 2px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6); }
.mh-hours-labels { display: flex; gap: 3px; margin-top: 4px; font-size: 0.66rem; color: var(--et-muted); }
.mh-hours-labels span { flex: 1; text-align: left; white-space: nowrap; }
html[data-bs-theme="dark"] .mh-hour-bar.mh-hour-top { background: #7dd3fc; }

/* Customer flag icon shown next to a name in lists (opens a "why" popup) */
.et-flag-btn { background: none; border: 0; padding: 0 .15rem; margin-left: .25rem; cursor: pointer; font-size: 1.05rem; line-height: 1; vertical-align: middle; }
.et-flag-btn:hover { transform: scale(1.15); }

/* ============ Live ticker + voice announcer (under the header) ============ */
.et-ticker {
  position: sticky; top: 58px; z-index: 1015;
  display: flex; align-items: center; gap: 10px;
  height: 36px; padding: 0 14px;
  background: var(--et-surface); border-bottom: 1px solid var(--et-border);
  font-size: 0.8rem;
}
.et-ticker[hidden] { display: none; }
.et-ticker-live {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  font-weight: 800; font-size: 0.68rem; letter-spacing: .08em; color: var(--et-ink);
}
.et-ticker-dot { width: 8px; height: 8px; border-radius: 50%; background: #9ca3af; }
.et-ticker-dot.green { background: #16a34a; box-shadow: 0 0 0 0 rgba(22,163,74,.5); animation: etTickerPulse 1.8s infinite; }
.et-ticker-dot.amber { background: #f59e0b; }
.et-ticker-dot.red { background: #dc2626; }
@keyframes etTickerPulse { 0% { box-shadow: 0 0 0 0 rgba(22,163,74,.5); } 70% { box-shadow: 0 0 0 6px rgba(22,163,74,0); } 100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); } }
.et-ticker-viewport { position: relative; flex: 1 1 auto; min-width: 0; height: 100%; overflow: hidden; display: flex; align-items: center; }
.et-ticker-track { display: flex; align-items: center; gap: 28px; white-space: nowrap; will-change: transform; position: absolute; left: 0; }
.et-ticker-idle { color: var(--et-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.et-ticker-item { display: inline-flex; align-items: center; gap: 7px; color: var(--et-ink); text-decoration: none; font-weight: 600; }
.et-ticker-item:hover { text-decoration: underline; }
.et-ticker-item .bi { font-size: 0.95rem; }
.et-ticker-item.tone-blue .bi { color: var(--et-primary); }
.et-ticker-item.tone-green .bi { color: #16a34a; }
.et-ticker-item.tone-red .bi { color: #dc2626; }
.et-ticker-item.tone-amber .bi { color: #d97706; }
.et-ticker-item.tone-gray .bi { color: var(--et-muted); }
.et-ticker-hint { color: #b45309; font-size: 0.74rem; flex-shrink: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 38%; }
.et-ticker-controls { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.et-ticker-lang { display: inline-flex; border: 1px solid var(--et-border); border-radius: 6px; overflow: hidden; }
.et-ticker-lang button { border: 0; background: transparent; color: var(--et-muted); padding: 2px 9px; font-size: 0.72rem; font-weight: 700; cursor: pointer; }
.et-ticker-lang button.active { background: var(--et-primary); color: #fff; }
.et-ticker-btn { border: 0; background: transparent; color: var(--et-muted); width: 28px; height: 28px; border-radius: 6px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.et-ticker-btn:hover { background: var(--et-soft); color: var(--et-ink); }
.et-ticker-btn.on { color: #16a34a; background: rgba(22,163,74,.12); }
.et-ticker-menuwrap { position: relative; }
.et-ticker-menu {
  position: absolute; right: 0; top: 34px; width: 290px; z-index: 1040;
  background: var(--et-surface); border: 1px solid var(--et-border); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18); padding: 12px 14px;
}
.et-ticker-menu[hidden] { display: none; }
.et-ticker-menu-title { font-size: 0.7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--et-muted); margin-bottom: 6px; }
.et-ticker-menu label { display: flex; align-items: flex-start; gap: 8px; font-size: 0.8rem; padding: 3px 0; cursor: pointer; }
.et-ticker-menu input { margin-top: 3px; }
.et-ticker-toggle.active { color: var(--et-primary); }
@media (max-width: 767.98px) { .et-ticker-lang { display: none; } .et-ticker-hint { display: none; } }