/* ==========================================================================
   Design tokens — single source of truth for typography & color.
   Any rule that uses `font-family: inherit` will pick up var(--font-sans).
   ========================================================================== */
:root {
  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  --text-xs: 11px;
  --text-sm: 12px;
  --text-base: 13px;
  --text-md: 14px;
  --text-lg: 16px;
  --text-xl: 18px;
  --text-2xl: 22px;
  --text-3xl: 28px;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --leading-tight: 1.2;
  --leading-normal: 1.45;
  --tracking-tight: -0.01em;

  /* Ink (text) */
  --ink-1: #1a1d24;
  --ink-2: #4a4f57;
  --ink-3: #6c727a;
  --ink-4: #9aa0a6;

  /* Surfaces */
  --bg: #f2f4f6;
  --surface: #ffffff;
  --surface-alt: #f7f8fa;
  --border: #dde1e6;
  --border-strong: #c4c9d0;

  /* Brand & semantic */
  --brand: #1a1d24;
  --brand-hover: #2a2f38;
  --accent: #0e7c86;
  --accent-2: #14a0ac;
  --accent-soft: rgba(14,124,134,0.10);
  --success: #0c5132;
  --success-bg: #c8eadb;
  --warning: #7a5300;
  --warning-bg: #fde9c0;
  --danger: #8a1b04;
  --danger-bg: #fbd5cd;

  /* Dark top-bar palette */
  --bar-bg: #1a1d24;
  --bar-bg-2: #272b34;
  --bar-bg-3: #20242c;
  --bar-text: #e1e3e6;
  --bar-text-dim: #a0a4ab;

  /* Status pills */
  --pill-amber-bg: #fde9c0;
  --pill-amber-text: #7a5300;
  --pill-amber-bd: #f1cf85;
  --pill-green-bg: #c8eadb;
  --pill-green-text: #0c5132;
  --pill-green-bd: #97d3b6;
  --pill-gray-bg: #dde1e6;
  --pill-gray-text: #3a4148;
  --pill-orange-bg: #ffd79d;
  --pill-orange-text: #7e5700;
  --pill-orange-bd: #f1be7a;
  --pill-red-bg: #fbd5cd;
  --pill-red-text: #8a1b04;
  --pill-red-bd: #f0a89c;
  --pill-blue-bg: #d6e6ff;
  --pill-blue-text: #1f3a82;
  --pill-blue-bd: #a8c4f0;

  /* Radii / shadows */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--ink-2);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Unified heading rhythm. */
h1 { font-size: var(--text-2xl); font-weight: var(--weight-bold);
     letter-spacing: var(--tracking-tight); color: var(--ink-1); }
h2 { font-size: var(--text-xl); font-weight: var(--weight-semibold);
     letter-spacing: var(--tracking-tight); color: var(--ink-1); }
h3 { font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--ink-1); }
h4 { font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--ink-1); }

/* ==========================================================================
   Dark top bar (Shopify-style chrome).
   - Single 56px row on desktop: brand + nav + global search + actions.
   - On tablets we wrap the search to a second row underneath.
   - On phones the desktop search hides and the mobile-search row shows.
   ========================================================================== */
header.topbar {
  background: var(--bar-bg);
  color: var(--bar-text);
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 0;
  border-bottom: 1px solid #000;
  box-shadow: 0 1px 0 rgba(0,0,0,0.4);
}
.topbar-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 16px;
  height: 56px;
  max-width: 1440px;
  margin: 0 auto;
}
.topbar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  padding: 4px 6px;
  margin: 0 -6px;
  border-radius: 8px;
  transition: background .15s;
}
.topbar-brand:hover { background: var(--bar-bg-2); }
.topbar-brand:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.brand-dot {
  width: 26px; height: 26px;
  border-radius: 7px;
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  color: #fff;
  display: inline-flex;
  align-items: center; justify-content: center;
  font-weight: 700;
  font-size: 13px;
}
.brand-text { white-space: nowrap; }

.topnav {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
nav { /* legacy fallback for any stray nav usage */
  display: flex;
  gap: 4px;
  align-items: center;
}
.topnav .tab {
  background: none;
  border: none;
  padding: 7px 12px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--bar-text-dim);
  font-family: inherit;
  border-radius: 6px;
  white-space: nowrap;
  transition: color .15s, background .15s;
  position: relative;
}
.topnav .tab:hover { color: #fff; background: var(--bar-bg-2); }
.topnav .tab.active {
  color: #fff;
  background: var(--bar-bg-2);
  font-weight: 600;
}
.topnav .tab.active::after {
  content: "";
  position: absolute;
  left: 12px; right: 12px;
  bottom: -10px;
  height: 2px;
  background: var(--accent-2);
  border-radius: 2px;
}

/* "Cifre"/"Numbers" nav dropdown — collapses the four admin report tabs
   (Vânzări, Intrări, Ieșiri, Sumar) into one menu so the topnav stays short. */
.nav-dropdown { position: relative; display: inline-flex; }
.nav-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.nav-dropdown-caret {
  width: 11px;
  height: 11px;
  opacity: .75;
  transition: transform .15s;
}
.nav-dropdown-trigger[aria-expanded="true"] .nav-dropdown-caret { transform: rotate(180deg); }
.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 168px;
  padding: 6px;
  background: var(--bar-bg, #1c1c1e);
  border: 1px solid var(--bar-bg-2, rgba(255,255,255,.1));
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(0,0,0,.45);
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 60;
}
.nav-dropdown-menu[hidden] { display: none; }
.nav-dropdown-item {
  background: none;
  border: none;
  text-align: left;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--bar-text-dim);
  white-space: nowrap;
  transition: color .12s, background .12s;
}
.nav-dropdown-item:hover { color: #fff; background: var(--bar-bg-2); }

/* ==========================================================================
   Left sidebar (Shopify/WooCommerce-style admin nav).
   The primary nav lives here on desktop; the dark top bar keeps only search +
   account chrome. Together they form a continuous dark L over light content.
   Hidden ≤768px — phones keep the bottom nav (.mnav).
   ========================================================================== */
.sidebar {
  position: fixed;
  top: 56px;
  left: 0;
  bottom: 0;
  width: 240px;
  background: var(--surface);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 40;
  padding: 14px 12px;
}
.sidenav { display: flex; flex-direction: column; gap: 1px; }

/* Shared row layout for nav items + the Cifre trigger. Reset the global
   blue `button` background (the cause of the earlier solid-blue blocks). */
.sidebar .tab,
.sidebar .nav-dropdown-item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  justify-content: flex-start;
  text-align: left;
  padding: 8px 11px;
  border-radius: 9px;
  background: none;
  border: none;
  color: var(--ink-3);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.006em;
  cursor: pointer;
  transition: color .12s, background .12s;
}
.snav-ic {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  opacity: 0.7;
  transition: opacity .12s;
}
.snav-label { flex: 1; min-width: 0; }

.sidebar .tab:hover,
.sidebar .nav-dropdown-item:hover { color: var(--ink-1); background: var(--surface-alt); }
.sidebar .tab:hover .snav-ic,
.sidebar .nav-dropdown-item:hover .snav-ic { opacity: 0.95; }

.sidebar .tab.active,
.sidebar .nav-dropdown-item.active {
  color: var(--brand-strong);
  background: var(--brand-soft);
  font-weight: 600;
}
.sidebar .tab.active .snav-ic,
.sidebar .nav-dropdown-item.active .snav-ic { opacity: 1; }
.sidebar .tab.active::after { display: none; }

.sidenav-sep { height: 1px; background: var(--border); margin: 10px 8px; }

/* Cifre group: inline accordion (not a floating menu). */
.sidebar .nav-dropdown { display: block; width: 100%; }
/* Reassert the row layout on the trigger's own (last-winning) rule so it can
   never fall back to a <button>'s default centered text-align — that was
   clustering the icon + "Cifre" + caret in the middle of the row. */
.sidebar .nav-dropdown-trigger {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  text-align: left;
}
.sidebar .nav-dropdown-caret {
  width: 13px;
  height: 13px;
  margin-left: auto;
  flex-shrink: 0;
  opacity: 0.55;
}
.sidebar .nav-dropdown-menu {
  position: static;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 1px 0 0;
  margin: 1px 0 0 19px;          /* align sub-items under the parent icon */
  border-left: 1px solid var(--border);
  min-width: 0;
  z-index: auto;
}
.sidebar .nav-dropdown-item {
  font-size: 13px;
  padding-left: 13px;
}
.sidebar .nav-dropdown-item .snav-ic { width: 16px; height: 16px; }

/* The Cifre row is a section header, not a destination — when one of its
   pages is active, tint the label but skip the filled pill so the highlighted
   child below reads as the current location. */
.sidebar .nav-dropdown-trigger.active { background: none; color: var(--brand-strong); }

/* The topbar "search" is a trigger button styled to look like a search
   input — clicking it opens the command-palette modal (industry pattern:
   Shopify, Linear, GitHub, Notion). */
.topbar-search {
  flex: 1;
  max-width: 560px;
  margin: 0 auto;
  height: 34px;
  background: var(--bar-bg-2);
  border: 1px solid transparent;
  border-radius: 8px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 8px;
  color: var(--bar-text-dim);
  transition: border-color .15s, background .15s;
  cursor: text;
  font-family: inherit;
  text-align: left;
}
.topbar-search:hover {
  background: var(--bar-bg-3);
  color: var(--bar-text);
}
.topbar-search:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}
.topbar-search .ts-icon { width: 14px; height: 14px; flex-shrink: 0; }
.topbar-search-text {
  flex: 1;
  font-size: 13px;
  color: inherit;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.topbar-kbd {
  border: 1px solid #3a3e47;
  color: var(--bar-text-dim);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 11px;
  background: var(--bar-bg-3);
  font-family: var(--font-mono);
  flex-shrink: 0;
}

.topbar-search-mobile {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--bar-bg);
  border-top: 1px solid rgba(255,255,255,0.05);
  width: 100%;
  cursor: text;
  border: 0;
  font-family: inherit;
  text-align: left;
}
.topbar-search-mobile .ts-icon { width: 14px; height: 14px; color: var(--bar-text-dim); flex-shrink: 0; }
.topbar-search-mobile .topbar-search-text {
  flex: 1;
  background: var(--bar-bg-2);
  border-radius: 8px;
  height: 34px;
  padding: 0 10px;
  color: var(--bar-text-dim);
  font-size: 13px;
  display: flex;
  align-items: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.topbar-icon {
  width: 34px; height: 34px;
  padding: 0;
  border-radius: 8px;
  display: inline-flex;
  align-items: center; justify-content: center;
  color: var(--bar-text);
  border: 0;
  background: transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s;
}
.topbar-icon:hover { background: var(--bar-bg-2); color: #fff; }
.topbar-icon svg { width: 18px; height: 18px; }
.topbar-bell { position: relative; }
.topbar-bell-dot {
  position: absolute;
  top: 6px; right: 6px;
  width: 8px; height: 8px;
  background: #ee4a3a;
  border-radius: 50%;
  border: 2px solid var(--bar-bg);
}
.topbar-bell-dot[hidden] { display: none; }

.topbar-user {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 3px 10px 3px 3px;
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  transition: background .15s;
}
.topbar-user:hover { background: var(--bar-bg-2); }
.topbar-user .avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  color: #fff;
  display: inline-flex;
  align-items: center; justify-content: center;
  font-weight: 600;
  font-size: 12px;
}
.topbar-user .user-name { white-space: nowrap; }

/* Lang button inside dark bar */
.lang-btn {
  background: var(--bar-bg-2);
  color: var(--bar-text);
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  padding: 5px 10px;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: 0.04em;
}
.lang-btn:hover { background: var(--bar-bg-3); color: #fff; }

/* Role badge inside dark bar */
header.topbar .role-badge {
  background: var(--bar-bg-2);
  color: var(--bar-text);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
header.topbar .role-badge.admin {
  background: rgba(241,207,133,0.18);
  color: #f1cf85;
  border-color: rgba(241,207,133,0.3);
}

/* Global search — command palette modal (Shopify/Linear/GitHub/Notion
   pattern). Dark backdrop covers the whole page (incl. topbar).
   Centered panel with its own input field at the top + results below. */
.global-search-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15,17,21,0.45);
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 92px;
  pointer-events: auto;
  animation: gso-fade-in 0.12s ease-out;
}
.global-search-overlay[hidden] { display: none; }
@keyframes gso-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.gso-panel {
  background: var(--surface);
  border-radius: 14px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.32),
              0 2px 8px rgba(0,0,0,0.08);
  width: min(640px, calc(100% - 32px));
  max-height: calc(100vh - 180px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  animation: gso-slide-in 0.16s cubic-bezier(.22,.94,.36,1.04);
}
@keyframes gso-slide-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.gso-input-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.gso-input-icon {
  width: 18px; height: 18px;
  color: var(--ink-3);
  flex-shrink: 0;
}
#gso-input {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: inherit;
  font-size: 16px;
  color: var(--ink-1);
  padding: 4px 0;
  min-width: 0;
}
#gso-input::placeholder { color: var(--ink-3); }
.gso-close {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  color: var(--ink-3);
  padding: 4px 10px;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}
.gso-close:hover { background: var(--border); color: var(--ink-1); }
.gso-results {
  overflow-y: auto;
  padding: 8px 0;
  flex: 1;
  min-height: 80px;
}
.gso-empty {
  padding: 32px 24px;
  text-align: center;
  color: var(--ink-3);
  font-size: 13px;
}
.gso-group {
  padding: 12px 16px 6px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}
.gso-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  cursor: pointer;
  font-size: 14px;
  color: var(--ink-1);
}
.gso-item.active, .gso-item:hover { background: var(--surface-alt); }
.gso-item.active {
  background: var(--accent-soft);
  position: relative;
}
.gso-item.active::before {
  content: "";
  position: absolute;
  left: 0; top: 4px; bottom: 4px;
  width: 3px;
  background: var(--accent);
  border-radius: 0 2px 2px 0;
}
.gso-item .gso-label { flex: 1; min-width: 0; }
.gso-item .gso-label strong { font-weight: 600; }
.gso-item .gso-sub {
  display: block;
  font-size: 12px;
  color: var(--ink-3);
  margin-top: 2px;
}
.gso-item .gso-type {
  font-size: 11px;
  color: var(--ink-3);
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  text-transform: capitalize;
  flex-shrink: 0;
}
.gso-item.active .gso-type {
  background: var(--surface);
  border-color: var(--accent);
  color: var(--accent);
}
.gso-hint {
  border-top: 1px solid var(--border);
  padding: 10px 16px;
  font-size: 11px;
  color: var(--ink-3);
  background: var(--surface-alt);
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.gso-hint-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-2);
  margin-right: 3px;
}
@media (max-width: 640px) {
  .global-search-overlay { padding-top: 64px; }
  .gso-panel { width: calc(100% - 24px); }
  .gso-hint { font-size: 10px; }
}
.gso-results {
  overflow-y: auto;
  padding: 8px 0;
  flex: 1;
}
.gso-empty {
  padding: 24px;
  text-align: center;
  color: var(--ink-3);
  font-size: 13px;
}
.gso-group {
  padding: 8px 16px 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}
.gso-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  cursor: pointer;
  font-size: 13px;
  color: var(--ink-1);
}
.gso-item.active, .gso-item:hover { background: var(--surface-alt); }
.gso-item .gso-label { flex: 1; min-width: 0; }
.gso-item .gso-label strong { font-weight: 600; }
.gso-item .gso-sub { display: block; font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.gso-item .gso-type {
  font-size: 11px;
  color: var(--ink-3);
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
}
.gso-hint {
  border-top: 1px solid var(--border);
  padding: 8px 16px;
  font-size: 11px;
  color: var(--ink-3);
  background: var(--surface-alt);
}

@media (max-width: 980px) {
  .topbar-inner { gap: 8px; padding: 0 12px; }
  .topbar-search { display: none; }
  .topbar-search-mobile { display: flex; }
  .topbar-user .user-name { display: none; }
  .topnav { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .topnav::-webkit-scrollbar { display: none; }
}
@media (max-width: 768px) {
  .topbar-inner { height: 52px; }
  .sidebar { display: none; } /* mobile uses the bottom nav */
  .topbar-icon.admin-only { display: none; }
}
@media (max-width: 640px) {
  .brand-text { display: none; }
  header.topbar .role-badge { display: none; }
  .topbar-user .user-name { display: none; }
}

/* The global `body:not(.is-admin) .admin-only` rule (below) hides admin-only
   bits for employees; nothing extra needed here. */

/* Legacy `.auth-bar` / `.lang-btn` / `.role-badge` / `#auth-toggle` styles
   were here. The new dark top bar above defines its own scoped rules. */

.reopen-day {
  background: #fff;
  color: #b06000;
  border: 1px solid #b06000;
  font-size: 16px;
  padding: 11px 18px;
  font-weight: 600;
}
.reopen-day:hover { background: #fef7e0; }

.locked-banner {
  background: #f1f3f4;
  border: 1px solid #dadce0;
  color: #5f6368;
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 12px;
}

.date-picker { display: inline-flex; align-items: center; gap: 8px; }
.date-btn {
  background: #fff;
  color: #202124;
  border: 1px solid #dadce0;
  padding: 10px 16px;
  font-size: 17px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 6px;
  cursor: pointer;
}
.date-btn:hover { background: #f1f3f4; border-color: #1a73e8; }
.date-btn.small {
  padding: 7px 12px;
  font-size: 15px;
  font-weight: 500;
}
.date-label[data-placeholder]:empty::before {
  content: attr(data-placeholder);
  color: #80868b;
}

.calendar-popover {
  position: fixed;
  background: #fff;
  border: 1px solid #dadce0;
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0,0,0,.18);
  padding: 16px;
  z-index: 60;
  width: 620px;
}
.calendar-popover[hidden] { display: none; }
.cal-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.cal-nav {
  background: #fff;
  color: #5f6368;
  border: 1px solid #dadce0;
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
}
.cal-nav:hover { background: #f1f3f4; }
.cal-month {
  flex: 1;
  text-align: center;
  font-size: 19px;
  font-weight: 600;
  color: #202124;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.cal-stats-toggle {
  font-size: 13px;
  font-weight: 500;
  color: #5f6368;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  user-select: none;
}
.cal-stats-toggle input { margin: 0; cursor: pointer; }
.cal-today-btn {
  background: #1a73e8;
  color: #fff;
  border: none;
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
}
.cal-week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  font-size: 12px;
  color: #5f6368;
  text-transform: uppercase;
  letter-spacing: .5px;
  font-weight: 700;
  padding: 0 2px 6px;
}
.cal-week > div { text-align: center; padding: 4px 0; }
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.cal-day {
  background: #fafbfc;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  padding: 6px 8px;
  min-height: 76px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  transition: background .1s, transform .05s;
}
.cal-day:hover {
  background: #e8f0fe;
  border-color: #1a73e8;
  transform: translateY(-1px);
}
.cal-day.outside { color: #b0b4ba; background: #fff; }
.cal-day.outside .cal-stat { opacity: .4; }
.cal-day.selected {
  background: #1a73e8;
  color: #fff;
  border-color: #174ea6;
}
.cal-day.selected .cal-stat { color: rgba(255,255,255,.92); }
.cal-day.today .cal-day-num { color: #1a73e8; font-weight: 800; }
.cal-day.selected.today .cal-day-num { color: #fff; }
.cal-day.submitted {
  background: #e6f4ea;
  border-color: #a5d6a7;
}
.cal-day.submitted:hover { background: #d4edda; }
.cal-day.submitted.selected { background: #137333; border-color: #0d5c27; color: #fff; }
.cal-day.in-range {
  background: #d2e3fc;
  border-color: #aecbfa;
}
.cal-day.in-range .cal-stat { color: #1967d2; }
.cal-day.in-range.submitted { background: #c5e8d0; border-color: #82c995; }
.cal-day.range-start, .cal-day.range-end {
  background: #1a73e8; color: #fff; border-color: #174ea6;
}
.cal-day.range-start .cal-stat, .cal-day.range-end .cal-stat { color: rgba(255,255,255,.92); }
.cal-range-hint {
  background: #e8f0fe;
  border: 1px solid #aecbfa;
  color: #1967d2;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 10px;
}
.cal-range-hint strong { color: #174ea6; }
.cal-day-num {
  font-size: 15px;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1px;
}
.cal-stat {
  font-size: 11px;
  line-height: 1.25;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cal-stat.sales { color: #1a73e8; font-weight: 600; }
.cal-stat.entries { color: #137333; }
.cal-stat.exits { color: #b3271c; }
.cal-day.selected .cal-stat.sales,
.cal-day.selected .cal-stat.entries,
.cal-day.selected .cal-stat.exits { color: rgba(255,255,255,.95); }
.cal-lock { font-size: 11px; }

main { padding: 18px 22px 40px; }
.page { display: none; }
.page.active { display: block; }
/* Pre-paint route gate: hide the main content area until app.js has run
   `tab(location.hash)` and added .booted to <html>. Without this, an
   already-authed user landing on #orders sees the default FDV page flash
   briefly before JS switches to the correct one. Header stays visible. */
html:not(.booted) main { visibility: hidden; }

table {
  border-collapse: collapse;
  width: 100%;
  background: #fff;
  font-size: 17px;
}
th, td {
  border: 1px solid #e0e0e0;
  padding: 10px 14px;
  text-align: left;
  vertical-align: middle;
}
th {
  background: #f1f3f4;
  font-weight: 600;
  color: #3c4043;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: .3px;
}
tbody tr:nth-child(even) td { background: #fafbfc; }
tbody tr:hover td { background: #e8f0fe; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.actions, th.actions { text-align: center; width: 52px; }
#inventory-table th, #inventory-table td { text-align: center; }
#inventory-table td.num, #inventory-table th.num { text-align: center; }
td.actions button {
  background: none;
  border: none;
  cursor: pointer;
  color: #80868b;
  font-size: 22px;
  line-height: 1;
  padding: 4px 8px;
}
td.actions button:hover { color: #d93025; }
.empty {
  text-align: center;
  color: #80868b;
  padding: 24px;
  font-style: italic;
  font-size: 16px;
}

.toolbar, .daily-toolbar {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.toolbar h2, .page > h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 500;
  color: #202124;
  margin-right: auto;
}
.daily-toolbar label { display: flex; align-items: center; gap: 8px; font-size: 17px; color: #3c4043; }
.day-totals { margin-left: auto; font-size: 17px; color: #202124; }
.day-totals strong { color: #1a73e8; }

.submit-day {
  background: #137333;
  font-size: 17px;
  padding: 12px 22px;
  font-weight: 600;
}
.submit-day:hover { background: #0d5c27; }
.submit-day.is-submitted { background: #5f6368; }

.print-day {
  background: #fff;
  color: #3c4043;
  border: 1px solid #dadce0;
  font-size: 16px;
  padding: 11px 18px;
  font-weight: 600;
}
.print-day:hover { background: #f1f3f4; }
.submit-status {
  font-size: 16px;
  font-weight: 600;
  color: #137333;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.submit-status.unsubmitted { color: #b06000; }

.submit-body { min-width: 480px; }
.submit-intro { font-size: 16px; color: #3c4043; margin: 0 0 16px; line-height: 1.4; }
#submit-summary {
  background: #f8f9fa;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  padding: 14px 18px;
  margin-bottom: 16px;
  font-size: 17px;
  line-height: 1.7;
}
#submit-summary .row { display: flex; justify-content: space-between; }
#submit-summary .row.total { border-top: 1px solid #dadce0; margin-top: 8px; padding-top: 8px; font-weight: 600; font-size: 19px; }
#submit-summary .lbl { color: #3c4043; }
#submit-summary .val { font-weight: 600; color: #202124; font-variant-numeric: tabular-nums; }
button.confirm { background: #137333; font-size: 17px; padding: 11px 22px; font-weight: 600; }
button.confirm:hover { background: #0d5c27; }

button {
  background: #1a73e8;
  color: #fff;
  border: none;
  padding: 10px 18px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
  font-family: inherit;
}
button:hover { background: #1765cc; }
button[data-add="entry"] { background: #188038; }
button[data-add="entry"]:hover { background: #137333; }
button[data-add="exit"] { background: #d93025; }
button[data-add="exit"]:hover { background: #b3271c; }
button.ghost { background: #fff; color: #1a73e8; border: 1px solid #dadce0; }
button.ghost:hover { background: #f1f3f4; }

input, select {
  padding: 9px 12px;
  border: 1px solid #dadce0;
  border-radius: 4px;
  font-size: 17px;
  font-family: inherit;
  background: #fff;
}
input:focus, select:focus { outline: none; border-color: #1a73e8; }

.daily-grid {
  display: grid;
  grid-template-columns: 3fr 2fr;
  grid-template-rows: 1fr 1fr;
  gap: 14px;
  height: calc(100vh - 240px);
  min-height: 540px;
}
.sales-panel   { grid-row: 1 / span 2; grid-column: 1; }
.entries-panel { grid-row: 1; grid-column: 2; }
.exits-panel   { grid-row: 2; grid-column: 2; }

.panel {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px 8px 16px;
  background: #f1f3f4;
  border-bottom: 1px solid #e0e0e0;
}
.panel h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #3c4043;
  text-transform: uppercase;
  letter-spacing: .6px;
}
.entries-panel .panel-head { background: #e6f4ea; }
.entries-panel h2 { color: #137333; }
.exits-panel   .panel-head { background: #fce8e6; }
.exits-panel   h2 { color: #b3271c; }
.sales-panel   .panel-head { background: #e8f0fe; }
.sales-panel   h2 { color: #1a73e8; }

.panel-add {
  padding: 8px 16px;
  font-size: 15px;
  font-weight: 600;
}
.sales-panel   .panel-add { background: #1a73e8; }
.sales-panel   .panel-add:hover { background: #1765cc; }
.entries-panel .panel-add { background: #188038; }
.entries-panel .panel-add:hover { background: #137333; }
.exits-panel   .panel-add { background: #d93025; }
.exits-panel   .panel-add:hover { background: #b3271c; }

.panel-head-actions { display: flex; gap: 8px; align-items: center; }
.panel-add-new {
  background: #fff;
  font-size: 14px;
  padding: 7px 12px;
  font-weight: 600;
  border: 1px solid currentColor;
}
.entries-panel .panel-add-new { color: #137333; }
.entries-panel .panel-add-new:hover { background: #d4edda; }
.exits-panel   .panel-add-new { color: #b3271c; }
.exits-panel   .panel-add-new:hover { background: #fad2cf; }
.newprod-intro { font-size: 15px; color: #3c4043; margin: 0 0 16px; line-height: 1.4; }

.panel-scroll { flex: 1; overflow: auto; }
.panel-scroll table th { position: sticky; top: 0; z-index: 1; }
.totals {
  padding: 12px 16px;
  font-size: 17px;
  color: #202124;
  border-top: 1px solid #e0e0e0;
  background: #fafbfc;
}
.totals strong { color: #1a73e8; }

.low-stock { color: #d93025; font-weight: 700; }

.inventory-total {
  background: #e8f0fe;
  color: #1a73e8;
  padding: 10px 18px;
  border-radius: 6px;
  font-size: 17px;
  font-weight: 500;
  border: 1px solid #c7daf8;
}
.inventory-total strong { color: #174ea6; font-weight: 700; }

.filter-bar {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 14px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
}
.chip {
  background: #f1f3f4;
  color: #3c4043;
  border: 1px solid #dadce0;
  font-size: 15px;
  padding: 8px 16px;
  font-weight: 500;
}
.chip:hover { background: #e8eaed; }
.chip.active {
  background: #1a73e8;
  color: #fff;
  border-color: #1a73e8;
}
.filter-field {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: #3c4043;
  margin-left: 14px;
  padding-left: 14px;
  border-left: 1px solid #dadce0;
}
.filter-summary {
  margin-left: auto;
  font-size: 17px;
  color: #3c4043;
}
.filter-summary strong { color: #1a73e8; font-weight: 700; }

.modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(32, 33, 36, .5);
  align-items: center;
  justify-content: center;
  z-index: 100;
}
.modal.open { display: flex; }

/* When the auth modal is open, hide the rest of the app entirely so the
   dashboard isn't visible behind the login form. Implemented as a body
   class set by openAuth/closeAuth — covers any case where the modal's
   own backdrop might leak (z-index, transparency, etc.). */
body.auth-open > header,
body.auth-open > main { visibility: hidden; }

/* Admin-only nav tabs (Sales/Entries/Exits/Summary etc.) — hidden whenever
   the body doesn't have the `is-admin` class, so employees only see the
   pages they actually use (FDV, Inventory, Orders, AWB, Settings). */
body:not(.is-admin) .admin-only { display: none !important; }
body.auth-open { background: #0f172a !important; }

#auth-modal {
  background: #0f172a !important; /* opaque dark — no peek-through ever */
  z-index: 10000;
  flex-direction: column;
  gap: 24px;
}
#auth-modal::before {
  content: "Shop Inventory & Sales";
  color: #e2e8f0; font-size: 22px; font-weight: 500;
  letter-spacing: 0.3px;
}
#auth-modal .modal-body {
  background: #fff;
  min-width: 360px; max-width: 420px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.45);
}
.auth-remember {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 10px;
  margin: 14px 0 4px;
  font-size: 14px;
  color: var(--ink-2);
  cursor: pointer;
  user-select: none;
}
.auth-remember > input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 auto;
  cursor: pointer;
  accent-color: var(--brand);
}
.auth-remember > span {
  font-size: 14px;
  font-weight: 500;
}
.auth-remember-hint {
  margin: 0 0 12px;
  padding-left: 28px;
  font-size: 12px;
  color: var(--ink-4);
  line-height: 1.4;
}
.modal-body {
  background: #fff;
  padding: 28px;
  border-radius: 8px;
  min-width: 420px;
  max-width: 520px;
  box-shadow: 0 6px 20px rgba(0,0,0,.2);
}
.modal-body h3 {
  margin: 0 0 18px;
  font-size: 22px;
  font-weight: 500;
}
.modal-body label {
  display: block;
  margin-bottom: 14px;
  font-size: 15px;
  color: #3c4043;
}
.modal-body input, .modal-body select {
  width: 100%;
  margin-top: 5px;
  padding: 11px 12px;
  font-size: 17px;
}
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 8px;
  align-items: center;
}
.modal-actions .add-product-btn {
  background: #188038;
  margin-right: auto;
  font-weight: 600;
}
.modal-actions .add-product-btn:hover { background: #137333; }

/* ---- Product image (modal + inventory thumbnail + zoom lightbox) ---- */
.prod-image-row {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 14px;
}
.prod-image-label {
  display: block;
  font-size: 15px;
  color: #3c4043;
  padding-top: 8px;
  min-width: 70px;
}
.prod-image-controls {
  display: flex;
  gap: 12px;
  align-items: center;
  flex: 1;
}
.prod-image-preview {
  width: 96px;
  height: 96px;
  border: 1px solid #dadce0;
  border-radius: 6px;
  background: #f8f9fa;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex: 0 0 96px;
}
.prod-image-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.prod-image-preview.empty { color: #9aa0a6; }
.prod-image-placeholder { font-size: 32px; opacity: .5; }
.prod-image-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.prod-image-buttons button { font-size: 14px; padding: 8px 12px; }

#inventory-table th.col-img,
#inventory-table td.col-img {
  width: 64px;
  padding: 6px 8px;
}
#inventory-table .thumb {
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid #dadce0;
  border-radius: 6px;
  background: #f8f9fa;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
#inventory-table button.thumb:hover {
  transform: scale(1.05);
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
#inventory-table .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
#inventory-table .thumb-empty {
  color: #c1c4c9;
  font-size: 20px;
  cursor: default;
}

.modal.image-zoom {
  background: rgba(0, 0, 0, .92);
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease-out;
  /* Cover safe-area on iPhones with notch so the backdrop is truly fullscreen. */
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.modal.image-zoom.open {
  opacity: 1;
  pointer-events: auto;
}
.modal.image-zoom .image-zoom-img {
  max-width: 96vw;
  max-height: 92vh;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 10px 40px rgba(0,0,0,.5);
  cursor: zoom-out;
  transform: scale(.92);
  transition: transform 200ms cubic-bezier(.2,.8,.2,1);
  /* Let the OS pinch-zoom the image itself. */
  touch-action: pinch-zoom;
  -webkit-user-select: none;
  user-select: none;
}
.modal.image-zoom.open .image-zoom-img { transform: scale(1); }
.image-zoom-close {
  position: absolute;
  top: calc(14px + env(safe-area-inset-top));
  right: calc(18px + env(safe-area-inset-right));
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  background: rgba(255,255,255,.18);
  color: #fff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  -webkit-tap-highlight-color: transparent;
}
.image-zoom-close:hover,
.image-zoom-close:active { background: rgba(255,255,255,.32); }

/* Inventory thumbnail: nicer empty state + clearer tap affordance on mobile. */
.thumb {
  -webkit-tap-highlight-color: transparent;
  transition: transform 80ms ease-out;
}
.thumb:active { transform: scale(.94); }
.thumb-empty {
  background: linear-gradient(135deg, #f3f4f6 0%, #e6e8eb 100%);
  color: #9aa0a6;
  font-size: 18px;
}

#summary-content {
  background: #fff;
  padding: 24px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
}
.kpi-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.kpi {
  background: #f8f9fa;
  padding: 16px 22px;
  border-radius: 6px;
  border: 1px solid #e0e0e0;
  min-width: 150px;
}
.kpi .v { font-size: 30px; font-weight: 500; color: #202124; }
.kpi .l { font-size: 14px; color: #5f6368; text-transform: uppercase; letter-spacing: .4px; margin-top: 4px; }
.summary-section { margin-bottom: 28px; }
.summary-section h3 {
  font-size: 17px;
  margin: 0 0 10px;
  color: #3c4043;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .4px;
}

.print-only { display: none; }

@media print {
  /* Portrait. `margin: 0` suppresses the browser-rendered URL/title/date
     headers and the page-number footer in Chrome/Safari. Re-add print
     padding via main below. */
  @page { size: A4 portrait; margin: 0; }

  /* Restore color printing (Chrome / Safari) */
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

  body { background: #fff !important; }
  html, body { height: auto !important; }

  /* Hide everything except the daily view, including the mobile bottom nav. */
  body > header,
  body > main > section:not(#daily),
  .mobile-nav,
  .mnav-sheet,
  .modal,
  .calendar-popover { display: none !important; }
  main { padding: 12mm !important; }

  /* The pickup tick is an on-screen control — drop it from the printed sheet. */
  .col-pickup { display: none !important; }

  /* Reorder daily view so the toolbar prints at the bottom */
  #daily { display: flex !important; flex-direction: column !important; }
  #print-header { order: 1 !important; }
  .daily-grid    { order: 2 !important; }
  .daily-toolbar { order: 99 !important; margin: 6mm 0 0 !important; }

  /* Hide non-print bits inside the daily view */
  #locked-banner,
  .panel-add,
  .panel-head-actions,
  td.actions,
  th.actions,
  .daily-toolbar .date-picker,
  .daily-toolbar .submit-status,
  .daily-toolbar #print-day-btn,
  .daily-toolbar #reopen-day-btn,
  .daily-toolbar #submit-day-btn { display: none !important; }

  /* The toolbar (now at bottom) — compact for print */
  .daily-toolbar {
    border-top: 1px solid #b0b4ba;
    padding-top: 4mm !important;
    gap: 10mm !important;
    font-size: 11pt !important;
  }
  .daily-toolbar .day-totals { font-size: 11pt !important; margin-left: 0 !important; }
  .daily-toolbar .submit-status { font-size: 11pt !important; }
  .daily-toolbar .print-day {
    font-size: 10pt !important;
    padding: 5pt 10pt !important;
    background: #fff !important;
    color: #3c4043 !important;
    border: 1px solid #dadce0 !important;
  }

  /* Print header — title left, date right. */
  .print-only { display: block !important; }
  #print-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12mm;
    border-bottom: 2px solid #202124;
    padding-bottom: 5mm;
    margin-bottom: 5mm;
    font-family: var(--font-sans);
    color: #202124;
  }
  #print-header h1 {
    margin: 0;
    font-size: 22pt;
    font-weight: 700;
    letter-spacing: -0.01em;
  }
  #print-header .print-date {
    font-size: 13pt;
    font-weight: 500;
    color: #3c4043;
  }

  /* Print footer — revenue total pinned to the page's bottom-right corner
     with a 100px inset on both axes. `position: fixed` anchors it to the
     page box (with @page margin: 0, that's the paper edge). */
  #print-footer {
    display: block !important;
    position: fixed;
    right: 20px;
    bottom: 20px;
    margin: 0;
    order: 100 !important;
  }
  .print-total-box {
    border: 1.5pt solid #202124;
    border-radius: 4pt;
    padding: 4mm 6mm;
    text-align: right;
  }
  .print-total-value {
    font-size: 22pt;
    font-weight: 700;
    color: #202124;
    white-space: nowrap;
  }
  .print-total-value span {
    font-size: 12pt;
    font-weight: 500;
    color: #5f6368;
    margin-left: 2mm;
  }

  /* Daily grid — keep the 60/40 layout, but auto-size to content */
  .daily-grid {
    height: auto !important;
    min-height: 0 !important;
    grid-template-columns: 3fr 2fr !important;
    grid-template-rows: auto auto !important;
    gap: 6mm !important;
  }
  .sales-panel   { grid-row: 1 / span 2 !important; grid-column: 1 !important; }
  .entries-panel { grid-row: 1 !important; grid-column: 2 !important; }
  .exits-panel   { grid-row: 2 !important; grid-column: 2 !important; }

  .panel {
    border: 1px solid #b0b4ba !important;
    box-shadow: none !important;
    break-inside: avoid;
  }
  .panel-scroll { overflow: visible !important; flex: none !important; }
  .panel table { font-size: 10pt; }
  .panel th, .panel td { padding: 4pt 7pt !important; }
  .panel-head { padding: 4pt 8pt !important; }
  .panel h2 { font-size: 11pt !important; }
  .totals { padding: 4pt 8pt !important; font-size: 11pt !important; }

  /* Force the panel colours to stick on paper */
  .sales-panel   .panel-head { background: #e8f0fe !important; }
  .entries-panel .panel-head { background: #e6f4ea !important; }
  .exits-panel   .panel-head { background: #fce8e6 !important; }
}

/* =================== AWB tab =================== */
#awb {
  padding: 28px 32px 48px;
  background: var(--bg);
  font-family: var(--font-sans);
  color: var(--ink-2);
}
.awb-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 22px; flex-wrap: wrap;
}
.tab-sub {
  font-size: 10px; font-weight: 700; letter-spacing: 0.5px;
  background: #dc2626; color: #fff; padding: 2px 6px; border-radius: 4px;
  margin-left: 4px; vertical-align: 1px;
}
.awb2-title { display: flex; flex-direction: column; gap: 2px; }
.awb2-brand {
  font-weight: 700; font-size: 18px; color: #dc2626; letter-spacing: 0.3px;
}
.awb2-sub { font-size: 12px; color: #6b7280; }
.awb-tabs {
  display: flex; gap: 0; background: #fff; border-radius: 8px;
  padding: 4px; border: 1px solid #e2e6ea;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.awb-tab {
  background: none; border: none; padding: 10px 22px; cursor: pointer;
  font-size: 14px; color: #6b7280; border-radius: 6px;
  font-family: inherit; font-weight: 500; letter-spacing: 0.2px;
  transition: background 0.15s, color 0.15s;
}
.awb-tab:hover { color: #ec8a1f; }
.awb-tab.active { background: #ec8a1f; color: #fff; font-weight: 600; }
.awb-tools { display: flex; align-items: center; gap: 14px; }
.awb-config-status { font-size: 13px; color: #6b7280; font-weight: 500; }
.awb-config-status.ok { color: #16a34a; }
.awb-config-status.warn { color: #dc2626; }
.awb-settings-btn {
  background: #fff; color: #4b5563; border: 1px solid #e2e6ea;
  padding: 9px 16px; border-radius: 6px; cursor: pointer; font-size: 13px;
  font-family: inherit; font-weight: 500;
  transition: background 0.15s, border-color 0.15s;
}
.awb-settings-btn:hover { background: #f9fafb; border-color: #d1d5db; }

.awb-view { display: none; }
.awb-view.active { display: block; }

/* ----- List view ----- */
.awb-list-panel {
  background: #fff; border-radius: 10px; overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
}
.awb-list-bar {
  background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
  color: #fff; padding: 20px 26px;
  display: flex; align-items: center; justify-content: space-between;
}
.awb-list-bar h2 {
  margin: 0; font-size: 19px; font-weight: 600; letter-spacing: 0.2px;
}
.awb-list-bar h2 .awb-page-info {
  color: rgba(255,255,255,0.75); font-weight: 400; font-size: 15px; margin-left: 8px;
}
.awb-list-filter-btn {
  background: rgba(255,255,255,0.15); color: #fff;
  border: 1px solid rgba(255,255,255,0.25); padding: 7px 14px;
  border-radius: 6px; cursor: pointer; font-size: 13px;
  font-family: inherit; font-weight: 500;
}
.awb-list-filter-btn:hover { background: rgba(255,255,255,0.25); }
.awb-search-bar {
  padding: 22px 26px 18px; display: flex; gap: 10px; align-items: center;
  justify-content: center;
}
.awb-search-bar .awb-search-wrap {
  position: relative; flex: 1; max-width: 580px;
  display: flex; align-items: center;
}
.awb-search-bar .awb-search-wrap::before {
  content: ""; position: absolute; left: 14px; width: 16px; height: 16px;
  background: no-repeat center / 16px 16px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c3aed' stroke-width='2.2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>");
}
.awb-search-bar input {
  flex: 1; padding: 11px 14px 11px 40px; border: 1px solid #e2e6ea;
  border-radius: 6px; font-size: 14px; font-family: inherit; color: #1f2937;
}
.awb-search-bar input::placeholder { color: #9ca3af; }
.awb-search-bar input:focus { outline: none; border-color: #7c3aed; }
.awb-search-bar .awb-search-btn {
  background: #ec8a1f; color: #fff; border: none;
  padding: 11px 22px; border-radius: 6px; cursor: pointer;
  font-size: 14px; font-family: inherit; font-weight: 600;
}
.awb-search-bar .awb-search-btn:hover { background: #d27200; }
.awb-refresh-btn {
  background: #fff; border: 1px solid #e2e6ea; padding: 10px 16px;
  border-radius: 6px; cursor: pointer; font-size: 13px; font-family: inherit; color: #4b5563;
}
.awb-refresh-btn:hover { background: #f9fafb; }
#awb-table { width: 100%; border-collapse: collapse; background: #fff; }
#awb-table th {
  background: #f9fafb; color: #6b7280; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.6px;
  padding: 14px 18px; text-align: left;
  border-top: 1px solid #e5e7eb; border-bottom: 1px solid #e5e7eb;
  font-weight: 600;
}
#awb-table th:first-child { width: 36px; padding-right: 0; }
#awb-table td {
  padding: 18px; border-bottom: 1px solid #f1f2f4; vertical-align: top; font-size: 14px;
  color: #1f2937;
}
#awb-table tr:last-child td { border-bottom: none; }
#awb-table tr:hover td { background: #fafbfc; }
.awb-cell-check { padding-right: 0 !important; }
.awb-cell-check input[type="checkbox"] {
  width: 18px; height: 18px; cursor: pointer; accent-color: #7c3aed;
}
.awb-cell-date { color: #374151; line-height: 1.5; }
.awb-cell-date .sub { display: block; color: #9ca3af; font-size: 13px; margin-top: 2px; }
.awb-cell-colet .awb-awb-num {
  font-weight: 600; color: #1f2937; font-size: 14px; letter-spacing: 0.2px;
}
.awb-courier-pill {
  display: inline-block; padding: 2px 8px; border-radius: 3px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.5px;
  margin-left: 6px; vertical-align: middle; text-transform: uppercase;
  color: #fff; background: #6b7280;
}
.awb-courier-pill.cb-dpd { background: #dc2626; }
.awb-courier-pill.cb-gls { background: #1e40af; }
.awb-courier-pill.cb-cargus { background: #f59e0b; }
.awb-courier-pill.cb-fedex { background: #6b21a8; }
.awb-courier-pill.cb-sameday { background: #be123c; }
.awb-courier-pill.cb-bookurie { background: #b45309; }
.awb-courier-pill.cb-posta { background: #fbbf24; color: #422006; }
.awb-cell-colet .awb-status-line {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: #6b7280; margin-top: 6px;
}
.awb-cell-colet .awb-status-line .ico {
  display: inline-block; width: 14px; height: 14px; border-radius: 50%;
  background: #3b82f6 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'><polyline points='20 6 9 17 4 12'/></svg>") no-repeat center / 9px 9px;
}
.awb-cell-colet .awb-status-line.pending .ico {
  background: #3b82f6 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><circle cx='12' cy='12' r='5'/></svg>") no-repeat center / 9px 9px;
}
.awb-cell-receiver .name { font-weight: 600; color: #1f2937; }
.awb-cell-receiver .addr { color: #6b7280; font-size: 13px; margin-top: 3px; line-height: 1.4; }
.awb-status {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; line-height: 1.4;
}
.awb-status::before {
  content: ""; display: inline-block; width: 8px; height: 8px;
  border-radius: 50%; background: currentColor; flex-shrink: 0;
}
.awb-status.new { color: #2563eb; }
.awb-status.delivered { color: #16a34a; }
.awb-status.exception { color: #ea580c; }
.awb-status.cancelled { color: #9ca3af; }
.awb-status.in-transit { color: #7c3aed; }
.awb-status .label { color: #4b5563; }
.awb-status.delivered .label { color: #16a34a; }
.awb-status.exception .label { color: #ea580c; }
.awb-num {
  text-align: right; font-variant-numeric: tabular-nums;
  font-weight: 500; color: #1f2937;
}
.awb-actions { white-space: nowrap; text-align: right; }
.awb-action-btn {
  background: #fff; border: 1px solid #e2e6ea;
  width: 34px; height: 34px; margin-left: 6px;
  border-radius: 6px; cursor: pointer; font-size: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #6b7280; transition: all 0.15s;
}
.awb-action-btn:hover { background: #f9fafb; color: #1f2937; border-color: #d1d5db; }
a.awb-action-btn { text-decoration: none; }

/* Live-from-courier status pill: pulsing green dot on the right edge tells
   the operator this status came from the courier directly (DPD/etc.), not
   from Ecolet's possibly-stale list. */
.awb-status-live { position: relative; padding-right: 22px; }
/* COD-settled badge: small pill shown under the COD amount when the courier
   has paid us back. Tick-in-circle + date, sized so it sits cleanly beneath
   the number without crowding the row. */
.awb-cod-paid {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 4px; padding: 2px 8px 2px 4px;
  background: #ecfdf5; border: 1px solid #a7f3d0; border-radius: 999px;
  font-size: 11px; font-weight: 600; color: #047857;
  font-variant-numeric: tabular-nums; line-height: 1.5;
  white-space: nowrap;
}
.awb-cod-paid-tick { width: 13px; height: 13px; flex-shrink: 0; }
.awb-cod-paid-cash { width: 17px; height: 12px; flex-shrink: 0; }
.awb-cod-paid:hover { background: #d1fae5; border-color: #6ee7b7; }

/* ----- COD email automation panel (top of the 💰 Settlements tab) ----- */
.codinbox {
  background: #fff; border: 1px solid #e5e7eb; border-radius: 12px;
  padding: 18px 20px; margin-bottom: 20px;
  box-shadow: 0 1px 2px rgba(16,24,40,.04);
}
.codinbox-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.codinbox-head h4 { margin: 0 0 4px; font-size: 15px; font-weight: 700; color: #111827; }
.codinbox-intro { font-size: 12.5px; color: #6b7280; line-height: 1.5; max-width: 640px; }
.codinbox-badge {
  flex-shrink: 0; font-size: 11px; font-weight: 600; padding: 3px 10px;
  border-radius: 999px; white-space: nowrap;
}
.codinbox-badge.active { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
.codinbox-badge.inactive { background: #fffbeb; color: #b45309; border: 1px solid #fde68a; }
.codinbox-badge.unconfigured { background: #f3f4f6; color: #6b7280; border: 1px solid #e5e7eb; }

/* Drag-and-drop import zone */
.codinbox-drop {
  margin: 16px 0 8px; padding: 22px; border: 2px dashed #cbd5e1; border-radius: 10px;
  text-align: center; cursor: pointer; background: #f8fafc;
  transition: background .12s, border-color .12s;
}
.codinbox-drop:hover, .codinbox-drop:focus { border-color: #6366f1; background: #f5f3ff; outline: none; }
.codinbox-drop.dragover { border-color: #4f46e5; background: #eef2ff; }
.codinbox-drop-ico { font-size: 26px; line-height: 1; margin-bottom: 6px; }
.codinbox-drop-hint { font-size: 12.5px; color: #6b7280; }

/* Import result (preview before confirm) */
.codinbox-result { margin: 10px 0 4px; }
.codinbox-result-head { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.codinbox-chip {
  font-size: 11.5px; color: #374151; background: #f3f4f6;
  border: 1px solid #e5e7eb; border-radius: 6px; padding: 3px 9px;
}
.codinbox-chip b { color: #111827; }
.codinbox-result-cols { display: flex; flex-wrap: wrap; gap: 12px; }
.codinbox-col { flex: 1 1 240px; min-width: 220px; border-radius: 8px; padding: 10px 12px; }
.codinbox-col.ok { background: #f0fdf4; border: 1px solid #bbf7d0; }
.codinbox-col.warn { background: #fffbeb; border: 1px solid #fde68a; }
.codinbox-col.muted { background: #f9fafb; border: 1px solid #e5e7eb; }
.codinbox-col-h { font-size: 12px; font-weight: 700; margin-bottom: 6px; }
.codinbox-col.ok .codinbox-col-h { color: #047857; }
.codinbox-col.warn .codinbox-col-h { color: #b45309; }
.codinbox-col ul { margin: 0; padding-left: 4px; list-style: none; max-height: 220px; overflow: auto; }
.codinbox-col li { font-size: 12px; color: #374151; padding: 2px 0; }
.codinbox-col code { background: rgba(0,0,0,.05); padding: 1px 4px; border-radius: 3px; font-size: 11.5px; }
.codinbox-reason { color: #9a6700; font-size: 11px; }
.codinbox-col-empty { color: #9ca3af; font-size: 12px; }
.codinbox-result #cod-confirm-btn { margin-top: 12px; }

/* Settings form */
.codinbox-settings { margin-top: 14px; border-top: 1px solid #f1f5f9; padding-top: 10px; }
.codinbox-settings summary { cursor: pointer; font-size: 13px; font-weight: 600; color: #374151; padding: 4px 0; }
.codinbox-form { padding: 10px 2px 4px; }
.codinbox-toggle { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: #111827; margin-bottom: 12px; }
.codinbox-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.codinbox-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; font-weight: 600; color: #6b7280; }
.codinbox-grid label.codinbox-wide { grid-column: 1 / -1; }
.codinbox-grid input {
  font-size: 13px; padding: 7px 9px; border: 1px solid #d1d5db; border-radius: 7px;
  font-weight: 400; color: #111827; background: #fff;
}
.codinbox-grid input:focus { border-color: #6366f1; outline: none; box-shadow: 0 0 0 3px rgba(99,102,241,.12); }
.codinbox-form-actions { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.codinbox-msg { font-size: 12px; color: #047857; font-weight: 600; }
.codinbox-lastpoll { font-size: 11.5px; color: #9ca3af; margin-top: 8px; }
.codinbox-synclog { margin-top: 14px; border-top: 1px solid #f1f5f9; padding-top: 10px; }
.codinbox-synclog-title { font-size: 11.5px; font-weight: 700; color: #6b7280; margin-bottom: 6px; }
.codinbox-synclog-row { display: flex; gap: 12px; align-items: baseline; font-size: 12px; padding: 3px 0; border-bottom: 1px solid #f8fafc; }
.codinbox-synclog-row .when { color: #6b7280; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.codinbox-synclog-row .res { color: #374151; flex: 1; }
.codinbox-synclog-row .res .ok { color: #047857; }
.codinbox-synclog-row .res .warn { color: #b45309; }
.codinbox-synclog-row .res.err, .codinbox-synclog-row.err .res { color: #b91c1c; }
.codinbox-synclog-row .trig { color: #9ca3af; font-size: 10.5px; text-transform: uppercase; letter-spacing: .03em; }
@media (max-width: 640px) { .codinbox-grid { grid-template-columns: 1fr; } }

/* Courier (DPD) panel sub-tabs: Comenzi DPD | Decontări COD */
.awb2-subtabs { display: flex; gap: 4px; margin: 4px 0 16px; border-bottom: 1px solid #e5e7eb; }
.awb2-subtab {
  appearance: none; background: none; border: none; cursor: pointer;
  font-size: 13.5px; font-weight: 600; color: #6b7280;
  padding: 9px 16px; border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .12s, border-color .12s;
}
.awb2-subtab:hover { color: #374151; }
.awb2-subtab.active { color: #4f46e5; border-bottom-color: #4f46e5; }
.awb2-view { display: none; }
.awb2-view.active { display: block; }

/* Status-filter chip bar sitting above the AWB orders table. Each chip
   shows the bucket's live count (pulled from /api/awb/stats) so the
   operator sees at a glance how many parcels match each status. */
.awb-status-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 10px 22px 14px; border-bottom: 1px solid #f1f5f9;
}
.awb-status-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff; color: #4b5563;
  border: 1px solid #e5e7eb; border-radius: 999px;
  padding: 6px 14px; font-size: 13px; font-weight: 500;
  font-family: inherit; cursor: pointer;
  transition: all 0.14s ease;
}
.awb-status-chip:hover {
  background: #f5f3ff; border-color: #c4b5fd; color: #6d28d9;
}
.awb-status-chip.active {
  background: #7c3aed; border-color: #6d28d9; color: #fff;
}
.awb-status-chip .awb-chip-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; padding: 0 6px; height: 18px;
  background: #f3f4f6; color: #4b5563;
  border-radius: 999px; font-size: 11px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.awb-status-chip:hover .awb-chip-count { background: #ede9fe; color: #6d28d9; }
.awb-status-chip.active .awb-chip-count {
  background: rgba(255,255,255,0.25); color: #fff;
}
.awb-status-chip .awb-chip-count:empty { display: none; }

/* Filter-summary banner that appears when a status chip is active. Confirms
   the total count is the complete set (so the user doesn't wonder if it's
   paginated/partial) and offers a one-click way to clear the filter. */
.awb-filter-summary {
  margin: 14px 22px 0; padding: 10px 14px;
  background: #f5f3ff; border: 1px solid #ddd6fe;
  border-radius: 8px; font-size: 13px; color: #4b5563;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.awb-filter-summary strong { color: #6d28d9; }
.awb-filter-clear {
  margin-left: auto;
  background: #fff; color: #6d28d9; border: 1px solid #c4b5fd;
  padding: 5px 12px; border-radius: 6px; font-size: 12px; font-weight: 500;
  font-family: inherit; cursor: pointer;
}
.awb-filter-clear:hover { background: #ede9fe; }

.awb-status-live .awb-live-dot {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  color: #16a34a; font-size: 8px; line-height: 1;
  animation: awb-live-pulse 1.6s ease-in-out infinite;
}
@keyframes awb-live-pulse {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 1; }
}
.awb-action-btn.danger { color: #dc2626; }
.awb-action-btn.danger:hover { background: #fef2f2; border-color: #fecaca; }

/* ----- Create form ----- */
.awb-form {
  background: #fff; border-radius: 10px;
  padding: 30px 32px; box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
}
.awb-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-bottom: 28px; }
.awb-col-title {
  color: #ec8a1f; font-weight: 600; font-size: 15px;
  letter-spacing: 1px; text-transform: uppercase;
  margin: 0 0 16px; padding: 0;
}
.awb-courier-strip {
  display: flex; align-items: center; gap: 12px;
  padding: 0 0 16px; margin-bottom: 4px; min-height: 30px;
}
.awb-courier-strip .cb {
  font-size: 10px; font-weight: 700; letter-spacing: 0.5px;
  padding: 3px 9px; border-radius: 3px; color: #fff; text-transform: uppercase;
}
.awb-courier-strip .cb-dpd { background: #dc2626; }
.awb-courier-strip .cb-gls { background: #1e40af; }
.awb-courier-strip .cb-fan { background: linear-gradient(90deg, #06b6d4, #2563eb, #7c3aed, #ec4899); }
.awb-courier-strip .cb-easy { background: #f59e0b; color: #1f2937; }
.awb-strip-receiver { padding-bottom: 14px; }
.awb-check {
  display: inline-flex !important; align-items: center; gap: 8px;
  font-size: 13px !important; color: #6b7280 !important;
  cursor: pointer; flex-direction: row !important;
}
.awb-check input { width: 16px; height: 16px; cursor: pointer; accent-color: #ec8a1f; }

.awb-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
.awb-grid label,
.awb-parcel-grid label,
.awb-settings-grid label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 13px; color: #6b7280; position: relative;
  min-width: 0;
}
.awb-grid input,
.awb-grid select,
.awb-parcel-grid input,
.awb-parcel-grid select,
.awb-settings-grid input,
.awb-settings-body > label input {
  padding: 11px 14px;
  border: 1px solid #d1d5db; border-radius: 4px;
  font-size: 14px; font-family: inherit; color: #1f2937; background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
  width: 100%; min-width: 0; box-sizing: border-box;
}
.awb-grid input::placeholder,
.awb-parcel-grid input::placeholder { color: #9ca3af; }
.awb-grid input:focus,
.awb-grid select:focus,
.awb-parcel-grid input:focus,
.awb-parcel-grid select:focus,
.awb-settings-grid input:focus,
.awb-settings-body > label input:focus {
  outline: none; border-color: #ec8a1f; box-shadow: 0 0 0 3px rgba(236,138,31,0.12);
}
.awb-grid input:disabled { background: #f9fafb; color: #9ca3af; cursor: not-allowed; }
.awb-full  { grid-column: 1 / -1; }
.awb-span3 { grid-column: span 3; }
.awb-span2 { grid-column: span 2; }
.awb-span1 { grid-column: span 1; }

/* Icon-prefixed inputs */
.awb-ico input { padding-left: 38px; }
.awb-ico::before {
  content: ""; position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; background: no-repeat center / contain;
  opacity: 0.6; pointer-events: none;
}
.awb-ico-company::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ec8a1f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='3' width='16' height='18' rx='2'/><line x1='8' y1='8' x2='16' y2='8'/><line x1='8' y1='12' x2='16' y2='12'/><line x1='8' y1='16' x2='13' y2='16'/></svg>");
}
.awb-ico-person::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/><circle cx='12' cy='7' r='4'/></svg>");
}
.awb-ico-mail input { padding-left: 14px; padding-right: 38px; }
.awb-ico-mail::before {
  left: auto; right: 12px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/><polyline points='22,6 12,13 2,6'/></svg>");
}
.awb-ico-phone input { padding-left: 14px; padding-right: 38px; }
.awb-ico-phone::before {
  left: auto; right: 12px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/></svg>");
}

/* Parcel grid */
.awb-parcel-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px;
  margin-bottom: 28px;
}
.awb-parcel-grid label.awb-cod input { font-weight: 600; color: #ec8a1f; }

/* Typeahead */
.awb-typeahead { position: relative; }
.awb-suggest {
  position: absolute; top: calc(100% + 2px); left: 0; right: 0; background: #fff;
  border: 1px solid #d1d5db; border-radius: 6px;
  max-height: 260px; overflow-y: auto; z-index: 5;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}
.awb-suggest div {
  padding: 11px 14px; cursor: pointer; font-size: 14px;
  border-bottom: 1px solid #f3f4f6; color: #1f2937;
}
.awb-suggest div:hover, .awb-suggest div.active { background: #fff7ed; color: #c2410c; }
.awb-suggest div:last-child { border-bottom: none; }
.awb-suggest .muted { color: #9ca3af; font-size: 12px; margin-left: 6px; }

/* Courier selection */
.awb-courier-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(135px, 1fr));
  gap: 14px; margin-bottom: 28px;
}
.awb-couriers-empty {
  grid-column: 1 / -1; padding: 32px; text-align: center; color: #9ca3af;
  border: 2px dashed #e5e7eb; border-radius: 8px; font-size: 14px;
  background: #fafbfc;
}
.awb-courier-card {
  background: #fff; border: 2px solid #e5e7eb; border-radius: 4px;
  padding: 16px 10px 0; cursor: pointer; text-align: center;
  transition: border-color 0.15s, box-shadow 0.15s; position: relative;
  display: flex; flex-direction: column; align-items: stretch;
}
.awb-courier-card:hover { border-color: #ec8a1f; }
.awb-courier-card.selected { border-color: #ec8a1f; box-shadow: 0 0 0 2px rgba(236,138,31,0.15); }
.awb-courier-card.disabled { opacity: 0.4; cursor: not-allowed; }
.awb-courier-logo {
  height: 38px; display: flex; align-items: center; justify-content: center;
  margin-bottom: 6px; font-weight: 800; font-size: 16px; letter-spacing: 0.5px;
}
.awb-courier-logo.cb-dpd { color: #dc2626; }
.awb-courier-logo.cb-gls { color: #1e40af; }
.awb-courier-logo.cb-cargus { color: #f59e0b; }
.awb-courier-logo.cb-fedex { color: #6b21a8; }
.awb-courier-logo.cb-sameday { color: #be123c; }
.awb-courier-logo.cb-bookurie { color: #b45309; }
.awb-courier-logo.cb-posta { color: #fbbf24; }
.awb-courier-name { font-weight: 600; font-size: 13px; color: #374151; margin-bottom: 6px; }
.awb-courier-link {
  font-size: 11px; color: #ec8a1f; text-decoration: underline;
  margin-bottom: 12px; cursor: pointer;
}
.awb-courier-price {
  background: #f3f4f6; padding: 10px 8px; margin: 0 -10px -1px;
  border-top: 1px solid #e5e7eb;
  font-size: 14px; font-weight: 600; color: #1f2937;
  border-radius: 0 0 4px 4px;
}
.awb-courier-card.selected .awb-courier-price { background: #fff7ed; color: #c2410c; }
.awb-courier-badge {
  position: absolute; top: 0; right: 0;
  background: #dc2626; color: #fff; font-size: 9px; font-weight: 700;
  padding: 2px 10px; letter-spacing: 0.5px;
  clip-path: polygon(15% 0, 100% 0, 100% 100%, 0% 100%);
}

/* Form actions */
.awb-form-actions {
  display: flex; justify-content: flex-end; gap: 12px;
  padding-top: 22px; border-top: 1px solid #f1f2f4; margin-top: 8px;
}
.awb-form-actions button {
  padding: 12px 24px; border-radius: 6px; font-size: 14px;
  font-family: inherit; cursor: pointer; font-weight: 600;
  transition: background 0.15s;
}
.awb-form-actions button.ghost {
  background: #fff; border: 1px solid #d1d5db; color: #4b5563;
}
.awb-form-actions button.ghost:hover { background: #f9fafb; }
.awb-form-actions .awb-submit {
  background: #ec8a1f; color: #fff; border: none;
}
.awb-form-actions .awb-submit:hover:not(:disabled) { background: #d27200; }
.awb-form-actions .awb-submit:disabled { background: #f3c485; cursor: not-allowed; }

.awb-error {
  margin-top: 16px; padding: 14px 18px; border-radius: 8px;
  background: #fef2f2; color: #b91c1c; font-size: 14px; line-height: 1.6;
  border-left: 4px solid #dc2626; border-top: 1px solid #fecaca;
  border-right: 1px solid #fecaca; border-bottom: 1px solid #fecaca;
  font-weight: 500; white-space: pre-line;
}
.awb-error::before { content: "⚠ "; font-size: 16px; margin-right: 4px; }

/* ----- Settings modal ----- */
.awb-settings-body { max-width: 680px; }
.awb-settings-body h4 {
  margin: 22px 0 12px; font-size: 12px; color: #6b7280;
  text-transform: uppercase; letter-spacing: 0.8px; font-weight: 600;
}
.awb-settings-body > label { margin-bottom: 14px; }
.awb-settings-help { color: #6b7280; font-size: 14px; margin: -4px 0 16px; line-height: 1.5; }
.awb-settings-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }

/* Below ~1180px CSS the two sender/receiver columns get cramped (each
   needs ~640px to hold its 4-col grid + side fields). Stack earlier so
   the form keeps breathing room on common laptop screens. */
@media (max-width: 1180px) {
  .awb-cols { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 980px) {
  .awb-parcel-grid { grid-template-columns: repeat(3, 1fr); }
  .awb-settings-grid { grid-template-columns: repeat(2, 1fr); }
  #awb { padding: 18px; }
  .awb-form { padding: 22px; }
}
@media (max-width: 720px) {
  .awb-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .awb-grid .awb-full,
  .awb-grid .awb-span3,
  .awb-grid .awb-span2 { grid-column: 1 / -1; }
  .awb-grid .awb-span1 { grid-column: span 1; }
  .awb-parcel-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .awb-settings-grid { grid-template-columns: 1fr; }
  #awb { padding: 12px; }
  .awb-form { padding: 16px; }
  .awb-col-title { font-size: 14px; }
  .awb-form-actions { flex-direction: column-reverse; }
  .awb-form-actions button { width: 100%; }
}

.awb-pagination {
  display: flex; gap: 8px; padding: 22px 26px;
  justify-content: center; align-items: center; flex-wrap: wrap;
  border-top: 1px solid #f1f2f4;
}
/* `display: flex` above outranks the UA's [hidden] { display: none }, so
   the JS-set `pag.hidden = true` never actually hides the bar without
   this explicit override. Same fix as .awb-stats-show-btn[hidden] above. */
.awb-pagination[hidden] { display: none; }
.awb-pg-btn {
  background: #fff; border: 1px solid #d8dde3; padding: 11px 16px;
  border-radius: 8px; cursor: pointer; font-size: 15px;
  font-family: inherit; color: #374151; min-width: 46px; min-height: 44px;
  font-weight: 500; transition: background-color 0.12s, border-color 0.12s, transform 0.05s;
}
.awb-pg-btn:hover:not(:disabled) { background: #f3f4f6; border-color: #b9c0c8; }
.awb-pg-btn:active:not(:disabled) { transform: translateY(1px); }
.awb-pg-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.awb-pg-btn.active {
  background: #7c3aed; color: #fff; border-color: #7c3aed;
  font-weight: 700; box-shadow: 0 1px 3px rgba(124, 58, 237, 0.35);
}
.awb-pg-btn.awb-pg-edge { font-weight: 600; }
.awb-pg-btn.awb-pg-step { font-weight: 600; }
.awb-pg-gap { color: #9ca3af; padding: 0 6px; font-size: 16px; user-select: none; }
.awb-pg-jump {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: 14px; padding-left: 14px;
  border-left: 1px solid #e5e7eb;
  font-size: 14px; color: #4b5563;
}
.awb-pg-jump label { font-weight: 500; }
.awb-pg-jump input {
  width: 64px; padding: 9px 10px; font-size: 15px;
  border: 1px solid #d8dde3; border-radius: 8px;
  font-family: inherit; min-height: 44px; box-sizing: border-box;
  text-align: center; color: #111827;
}
.awb-pg-jump input:focus { outline: none; border-color: #7c3aed; box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.18); }
.awb-pg-jump-total { color: #6b7280; }

/* AWB-printable fields — emphasized because they appear on the printed AWB */
.awb-print-fields {
  display: grid; gap: 12px; margin-bottom: 28px;
  padding: 16px 18px; background: #fdf6ee;
  border: 1px solid #f1c98a; border-left: 4px solid #ec8a1f;
  border-radius: 6px;
}
.awb-print-field { gap: 6px; }
.awb-pf-label {
  font-size: 12px !important; color: #7c3a00 !important;
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px;
}
.awb-pf-label em {
  font-style: normal; font-weight: 400; text-transform: none;
  letter-spacing: 0; color: #b45309; margin-left: 6px; font-size: 11px;
}
.awb-print-field input { background: #fff !important; }

/* Inline validation */
.awb-grid label.invalid input,
.awb-grid label.invalid select {
  border-color: #dc2626 !important;
  background: #fef2f2;
}
.awb-grid label.invalid::after {
  content: "✗"; position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  color: #dc2626; font-weight: 700; font-size: 13px; pointer-events: none;
}
.awb-grid label.invalid.awb-ico::after { right: 36px; }
.awb-error { white-space: pre-line; }

/* ===================== Sales chart — "Revenue Pulse" ===================== */
.sc-panel {
  position: relative;
  overflow: hidden;
  margin: 18px 0 24px;
  padding: 22px 24px 18px;
  border-radius: 18px;
  background:
    radial-gradient(1100px 360px at 0% -20%, rgba(167,139,250,.32), transparent 60%),
    radial-gradient(900px 320px at 100% 120%, rgba(244,114,182,.28), transparent 60%),
    linear-gradient(160deg, #0b1020 0%, #131a36 55%, #1a1240 100%);
  color: #e9ecf8;
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 18px 50px -22px rgba(20,14,60,.9),
    0 4px 18px -8px rgba(0,0,0,.55);
  isolation: isolate;
}
.sc-aurora {
  position: absolute; inset: -40%;
  background:
    conic-gradient(from 90deg at 50% 50%,
      rgba(124,58,237,.0) 0deg,
      rgba(244,114,182,.18) 90deg,
      rgba(34,211,238,.18) 180deg,
      rgba(167,139,250,.18) 270deg,
      rgba(124,58,237,.0) 360deg);
  filter: blur(60px);
  z-index: 0;
  animation: scAurora 22s linear infinite;
  pointer-events: none;
  opacity: .65;
}
@keyframes scAurora { to { transform: rotate(360deg); } }
.sc-panel > * { position: relative; z-index: 1; }

.sc-empty {
  padding: 40px 20px;
  text-align: center;
  color: #aab1c8;
  font-size: 15px;
  font-style: italic;
}

.sc-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.sc-eyebrow {
  font-size: 11px;
  letter-spacing: 2px;
  font-weight: 700;
  color: #a78bfa;
  margin-bottom: 6px;
}
.sc-title {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.3px;
  background: linear-gradient(90deg, #fbbf24, #f472b6 50%, #a78bfa);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.sc-legend { display: flex; gap: 14px; flex-wrap: wrap; }
.sc-leg {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; color: #cbd1e8; font-weight: 500;
  padding: 5px 10px; border-radius: 999px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
}
.sc-leg i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.sc-leg-store i  { background: linear-gradient(180deg, #67e8f9, #0891b2); }
.sc-leg-online i { background: linear-gradient(180deg, #f9a8d4, #be185d); }
.sc-leg-rev i    { background: linear-gradient(90deg, #fbbf24, #f472b6, #a78bfa); border-radius: 999px; height: 4px; }

.sc-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}
.sc-kpi {
  position: relative;
  padding: 14px 16px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.09);
  overflow: hidden;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: transform .25s ease, border-color .25s ease;
}
.sc-kpi:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.18); }
.sc-kpi::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(180px 80px at 100% 0%, var(--sc-glow, rgba(167,139,250,.35)), transparent 70%);
  opacity: .9;
}
.sc-kpi-rev   { --sc-glow: rgba(251,191,36,.32); }
.sc-kpi-items { --sc-glow: rgba(34,211,238,.32); }
.sc-kpi-avg   { --sc-glow: rgba(244,114,182,.32); }
.sc-kpi-best  { --sc-glow: rgba(167,139,250,.32); }
.sc-kpi-lbl {
  font-size: 11px; letter-spacing: 1.4px;
  text-transform: uppercase; color: #aab1c8; font-weight: 600;
}
.sc-kpi-val {
  font-size: 26px; font-weight: 700; margin-top: 4px;
  font-variant-numeric: tabular-nums;
  color: #fff;
  letter-spacing: -.5px;
}
.sc-kpi-sub { margin-top: 2px; font-size: 12px; color: #8e95b3; }

.sc-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 18px;
  align-items: stretch;
}
.sc-chart-wrap {
  position: relative;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border: 1px solid rgba(255,255,255,.07);
  padding: 8px 6px 4px;
  min-height: 320px;
}
.sc-svg { display: block; width: 100%; height: auto; }

.sc-grid { stroke: rgba(255,255,255,.07); stroke-width: 1; stroke-dasharray: 3 5; }
.sc-axis-lbl { fill: #8e95b3; font-size: 11px; font-family: inherit; }
.sc-axis-left  { text-anchor: end; }
.sc-axis-right { text-anchor: start; }
.sc-axis-x     { text-anchor: middle; }

.sc-bar {
  fill: url(#sc-grad-store);
  transform-origin: center bottom;
  transform-box: fill-box;
  opacity: 0;
  animation: scBarIn .65s cubic-bezier(.2,.9,.25,1) forwards;
  transition: opacity .2s ease;
}
.sc-bar-online { fill: url(#sc-grad-online); }
.sc-bar.dim { opacity: .35; }
@keyframes scBarIn {
  from { transform: scaleY(0); opacity: 0; }
  to   { transform: scaleY(1); opacity: 1; }
}

.sc-area {
  fill: url(#sc-grad-rev);
  opacity: 0;
  animation: scFadeIn .8s .35s ease forwards;
}
.sc-line {
  fill: none;
  stroke: url(#sc-grad-line);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 2200;
  stroke-dashoffset: 2200;
  animation: scLineDraw 1.6s .2s cubic-bezier(.5,.1,.2,1) forwards;
}
@keyframes scLineDraw { to { stroke-dashoffset: 0; } }
@keyframes scFadeIn { to { opacity: 1; } }

.sc-dot {
  fill: #fff;
  stroke: #f472b6;
  stroke-width: 2;
  opacity: 0;
  animation: scDotPop .5s ease forwards;
  transition: r .15s ease, stroke-width .15s ease;
}
.sc-dot.on { r: 6.5; stroke-width: 3; }
@keyframes scDotPop { to { opacity: 1; } }

.sc-cursor {
  stroke: rgba(255,255,255,.35);
  stroke-width: 1;
  stroke-dasharray: 4 4;
  pointer-events: none;
}
.sc-hot { fill: transparent; cursor: crosshair; }

.sc-tip {
  position: absolute;
  min-width: 180px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(10, 12, 28, .92);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 30px -8px rgba(0,0,0,.7);
  color: #e9ecf8;
  font-size: 12px;
  pointer-events: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 2;
  transition: opacity .12s ease;
}
.sc-tip[hidden] { display: none; }
.sc-tip-date {
  font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
  color: #a78bfa; font-weight: 700; margin-bottom: 2px;
}
.sc-tip-rev {
  font-size: 20px; font-weight: 700; color: #fff;
  font-variant-numeric: tabular-nums;
  margin-bottom: 6px;
}
.sc-tip-rev span { font-size: 11px; font-weight: 500; color: #8e95b3; margin-left: 4px; }
.sc-tip-rows > div {
  display: flex; align-items: center; gap: 6px;
  margin-top: 2px; color: #cbd1e8;
}
.sc-tip-rows b { color: #fff; margin: 0 2px; font-variant-numeric: tabular-nums; }
.sc-tip-foot {
  margin-top: 6px !important; padding-top: 6px;
  border-top: 1px solid rgba(255,255,255,.1);
  font-size: 11px; color: #8e95b3;
}
.sc-d { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.sc-d-store  { background: linear-gradient(180deg, #67e8f9, #0891b2); }
.sc-d-online { background: linear-gradient(180deg, #f9a8d4, #be185d); }

.sc-side {
  border-radius: 14px;
  padding: 14px 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  border: 1px solid rgba(255,255,255,.07);
  display: flex; flex-direction: column;
}
.sc-side-title {
  font-size: 12px; letter-spacing: 1.6px; text-transform: uppercase;
  color: #a78bfa; font-weight: 700; margin-bottom: 12px;
}
.sc-top { display: flex; flex-direction: column; gap: 10px; }
.sc-top-row {
  opacity: 0;
  animation: scFadeUp .5s ease forwards;
}
@keyframes scFadeUp {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.sc-top-head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 13px;
}
.sc-top-name { color: #fff; font-weight: 600; }
.sc-top-val  { color: #fbbf24; font-variant-numeric: tabular-nums; font-size: 12px; }
.sc-top-bar {
  height: 6px; border-radius: 999px;
  background: rgba(255,255,255,.07);
  overflow: hidden;
  margin-top: 6px;
}
.sc-top-fill {
  height: 100%; width: 0;
  background: linear-gradient(90deg, #22d3ee, #a78bfa 55%, #f472b6);
  border-radius: 999px;
  animation: scTopFill .9s cubic-bezier(.2,.9,.25,1) forwards;
  box-shadow: 0 0 12px rgba(167,139,250,.5);
}
@keyframes scTopFill {
  from { width: 0; }
  to   { width: var(--w); }
}
.sc-top-sub { font-size: 11px; color: #8e95b3; margin-top: 3px; }

@media (max-width: 980px) {
  .sc-body { grid-template-columns: 1fr; }
  .sc-kpis { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .sc-kpis { grid-template-columns: 1fr 1fr; }
  .sc-kpi-val { font-size: 22px; }
  .sc-title { font-size: 22px; }
}

@media print {
  .sc-panel { display: none !important; }
}

/* ===================== INTRĂRI — green "Supply Stream" (clean bars) ==== */
.ec-panel {
  position: relative;
  overflow: hidden;
  margin: 18px 0 24px;
  padding: 22px 24px 18px;
  border-radius: 18px;
  background:
    radial-gradient(900px 280px at 0% 0%, rgba(16,185,129,.22), transparent 60%),
    radial-gradient(700px 260px at 100% 100%, rgba(132,204,22,.20), transparent 60%),
    linear-gradient(180deg, #f0fdf4 0%, #ecfeff 60%, #f0fdf4 100%);
  color: #064e3b;
  border: 1px solid rgba(16,185,129,.25);
  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 18px 40px -22px rgba(6,78,59,.35),
    0 4px 14px -8px rgba(6,78,59,.18);
  isolation: isolate;
}
.ec-water {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(72deg,
      rgba(16,185,129,.05) 0 14px,
      transparent 14px 28px);
  mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 80%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 80%, transparent 100%);
  pointer-events: none;
  z-index: 0;
  animation: ecDrift 28s linear infinite;
}
@keyframes ecDrift { from { background-position: 0 0; } to { background-position: 280px 0; } }
.ec-panel > * { position: relative; z-index: 1; }

.ec-empty {
  padding: 40px 20px; text-align: center;
  color: #047857; font-style: italic; font-size: 15px;
}

.ec-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; margin-bottom: 14px; flex-wrap: wrap;
}
.ec-eyebrow {
  font-size: 11px; letter-spacing: 2px; font-weight: 700;
  color: #059669; margin-bottom: 4px;
}
.ec-title {
  font-size: 26px; font-weight: 700; letter-spacing: -.3px;
  background: linear-gradient(90deg, #047857, #0891b2 60%, #65a30d);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin: 0;
}
.ec-sub { font-size: 12px; color: #047857; margin-top: 4px; opacity: .8; }

.ec-kpis {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  margin-bottom: 16px;
}
.ec-kpi {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 14px;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(16,185,129,.18);
  box-shadow: 0 4px 14px -8px rgba(6,78,59,.25);
  backdrop-filter: blur(6px);
  transition: transform .2s ease;
}
.ec-kpi:hover { transform: translateY(-2px); }
.ec-kpi-ic {
  width: 38px; height: 38px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, #10b981, #059669);
  box-shadow: 0 4px 10px -2px rgba(5,150,105,.45);
  letter-spacing: -1px;
  flex-shrink: 0;
}
.ec-kpi-ic-coin { font-size: 11px; letter-spacing: 0.5px; background: linear-gradient(135deg, #f59e0b, #b45309); }
.ec-kpi-ic-star { background: linear-gradient(135deg, #84cc16, #4d7c0f); }
.ec-kpi-lbl {
  font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase;
  color: #047857; font-weight: 600;
}
.ec-kpi-val {
  font-size: 22px; font-weight: 700; color: #064e3b;
  font-variant-numeric: tabular-nums; line-height: 1.1; margin-top: 2px;
}
.ec-kpi-name { font-size: 18px; }

.ec-body {
  display: grid; grid-template-columns: minmax(0, 1fr) 260px;
  gap: 16px;
}
.ec-chart-wrap {
  position: relative;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,.35));
  border: 1px solid rgba(16,185,129,.18);
  padding: 8px;
  overflow: hidden;
}
.ec-svg { display: block; width: 100%; height: auto; }
.ec-grid { stroke: rgba(6,78,59,.10); stroke-width: 1; stroke-dasharray: 2 4; }
.ec-axis-lbl { fill: #047857; font-size: 11px; font-family: inherit; }
.ec-axis-left { text-anchor: end; }
.ec-axis-x { text-anchor: middle; }

.ec-bar {
  fill: url(#ec-bar-grad);
  transform-origin: center bottom;
  transform-box: fill-box;
  opacity: 0;
  animation: ecBarIn .6s cubic-bezier(.2,.9,.25,1) forwards;
  transition: filter .15s ease;
}
.ec-bar:hover, .ec-bar.on {
  filter: brightness(1.1) saturate(1.15) drop-shadow(0 2px 6px rgba(5,150,105,.4));
}
@keyframes ecBarIn {
  from { opacity: 0; transform: scaleY(0); }
  to   { opacity: 1; transform: scaleY(1); }
}
.ec-hot { fill: transparent; cursor: pointer; }

.ec-bubbles {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
}
.ec-bubble {
  position: absolute; bottom: -20px; width: 8px; height: 8px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.9), rgba(16,185,129,.5));
  box-shadow: 0 0 6px rgba(16,185,129,.4);
  opacity: 0;
  animation: ecBubbleRise linear infinite;
}
@keyframes ecBubbleRise {
  0%   { transform: translateY(0) scale(0.6); opacity: 0; }
  20%  { opacity: .9; }
  100% { transform: translateY(-320px) scale(1.1); opacity: 0; }
}

.ec-tip {
  position: absolute; min-width: 180px;
  padding: 10px 12px; border-radius: 10px;
  background: rgba(255,255,255,.95);
  border: 1px solid rgba(16,185,129,.3);
  color: #064e3b; font-size: 12px;
  box-shadow: 0 10px 24px -8px rgba(6,78,59,.35);
  pointer-events: none; z-index: 2;
}
.ec-tip[hidden] { display: none; }
.ec-tip-date {
  font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
  color: #059669; font-weight: 700;
}
.ec-tip-total {
  font-size: 22px; font-weight: 700; color: #064e3b; margin: 2px 0 6px;
  font-variant-numeric: tabular-nums;
}
.ec-tip-total span { font-size: 11px; color: #047857; margin-left: 4px; font-weight: 500; }
.ec-tip-foot {
  margin-top: 6px; padding-top: 6px;
  border-top: 1px dashed rgba(6,78,59,.18);
  font-size: 11px; color: #047857;
}

.ec-side {
  border-radius: 14px;
  padding: 14px;
  background: rgba(255,255,255,.6);
  border: 1px solid rgba(16,185,129,.18);
  display: flex; flex-direction: column;
}
.ec-side-title {
  font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase;
  color: #059669; font-weight: 700; margin-bottom: 12px;
}
.ec-tanks { display: flex; flex-direction: column; gap: 10px; }
.ec-tank {
  opacity: 0; animation: ecFadeUp .5s ease forwards;
}
@keyframes ecFadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.ec-tank-head {
  display: flex; justify-content: space-between; font-size: 13px;
  color: #064e3b;
}
.ec-tank-name { font-weight: 600; }
.ec-tank-qty {
  font-variant-numeric: tabular-nums; color: #047857; font-weight: 700;
}
.ec-tank-bar {
  margin-top: 5px; height: 10px; border-radius: 999px;
  background: rgba(6,78,59,.08); position: relative; overflow: hidden;
}
.ec-tank-fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  background: linear-gradient(90deg, #10b981, #34d399);
  border-radius: 999px;
  animation: ecTankFill 1s cubic-bezier(.2,.9,.25,1) forwards;
  box-shadow: 0 0 8px rgba(16,185,129,.5);
}
@keyframes ecTankFill { from { width: 0; } to { width: var(--w); } }
.ec-tank-fill::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
  transform: translateX(-100%);
  animation: ecShine 2.6s 1.2s ease-in-out infinite;
}
@keyframes ecShine { 50% { transform: translateX(120%); } 100% { transform: translateX(120%); } }
.ec-tank-foot { font-size: 11px; color: #047857; margin-top: 3px; opacity: .85; }

@media (max-width: 980px) {
  .ec-body { grid-template-columns: 1fr; }
  .ec-kpis { grid-template-columns: repeat(2, 1fr); }
}
@media print { .ec-panel { display: none !important; } }


/* ===================== IEȘIRI — "Loss Ledger" (dark, crimson) ========= */
.xc-panel {
  position: relative;
  overflow: hidden;
  margin: 18px 0 24px;
  padding: 22px 24px 18px;
  border-radius: 18px;
  background:
    radial-gradient(900px 320px at 100% 0%, rgba(239,68,68,.30), transparent 65%),
    radial-gradient(700px 280px at 0% 100%, rgba(168,85,247,.18), transparent 60%),
    linear-gradient(160deg, #1c0a0a 0%, #2a0f12 40%, #1a0a1f 100%);
  color: #fee2e2;
  border: 1px solid rgba(239,68,68,.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 18px 50px -22px rgba(80,10,10,.9);
  isolation: isolate;
}
.xc-grain {
  position: absolute; inset: 0; pointer-events: none; opacity: .25;
  background-image:
    radial-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    radial-gradient(rgba(255,255,255,.02) 1px, transparent 1px);
  background-size: 3px 3px, 7px 7px;
  background-position: 0 0, 2px 2px;
  z-index: 0;
}
.xc-veins {
  position: absolute; inset: -30%;
  background:
    repeating-conic-gradient(from 0deg at 50% 50%,
      rgba(239,68,68,.0) 0deg,
      rgba(239,68,68,.06) 8deg,
      rgba(239,68,68,.0) 16deg);
  filter: blur(40px);
  pointer-events: none; z-index: 0;
  animation: xcPulse 8s ease-in-out infinite;
}
@keyframes xcPulse { 50% { opacity: .7; } }
.xc-panel > * { position: relative; z-index: 1; }

.xc-empty {
  padding: 40px 20px; text-align: center;
  color: #fda4af; font-style: italic; font-size: 15px;
}

.xc-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; margin-bottom: 14px; flex-wrap: wrap;
}
.xc-eyebrow {
  font-size: 11px; letter-spacing: 2.5px; font-weight: 700;
  color: #fb7185; margin-bottom: 4px;
}
.xc-title {
  font-size: 26px; font-weight: 700; letter-spacing: -.3px;
  background: linear-gradient(90deg, #fbbf24, #ef4444 55%, #a855f7);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.xc-sub { font-size: 12px; color: #fda4af; margin-top: 4px; opacity: .85; }
.xc-stamp {
  position: relative;
  padding: 10px 18px;
  border: 2px dashed rgba(239,68,68,.5);
  border-radius: 6px;
  transform: rotate(-2deg);
  color: #fecaca;
  text-align: center;
  background: rgba(239,68,68,.05);
  box-shadow: 0 0 20px rgba(239,68,68,.15) inset;
}
.xc-stamp-lbl {
  font-size: 9px; letter-spacing: 3px; font-weight: 700; color: #f87171;
}
.xc-stamp-val {
  font-size: 22px; font-weight: 800; color: #fef2f2;
  font-variant-numeric: tabular-nums; margin-top: 2px;
}
.xc-stamp-val span { font-size: 11px; color: #fda4af; margin-left: 4px; }

.xc-kpis {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  margin-bottom: 16px;
}
.xc-kpi {
  padding: 12px 14px; border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  border: 1px solid rgba(255,255,255,.07);
  position: relative; overflow: hidden;
}
.xc-kpi-lbl {
  font-size: 10px; letter-spacing: 1.6px; text-transform: uppercase;
  color: #fda4af; font-weight: 600;
}
.xc-kpi-val {
  font-size: 22px; font-weight: 700; color: #fff;
  font-variant-numeric: tabular-nums; margin-top: 4px; line-height: 1.1;
}
.xc-kpi-cause-val { font-size: 18px; font-weight: 700; }
.xc-kpi-bar {
  margin-top: 8px; height: 4px; border-radius: 999px;
  background: rgba(255,255,255,.07); overflow: hidden;
}
.xc-kpi-bar span {
  display: block; height: 100%; width: 0;
  background: #ef4444;
  border-radius: 999px;
  animation: xcBarGrow 1s .2s cubic-bezier(.2,.9,.25,1) forwards;
}
@keyframes xcBarGrow { to { width: var(--w); } }

.xc-body {
  display: grid; grid-template-columns: minmax(0, 1fr) 280px;
  gap: 16px;
}
.xc-chart-wrap {
  position: relative; min-height: 320px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.05));
  border: 1px solid rgba(255,255,255,.05);
  padding: 6px;
  overflow: hidden;
}
.xc-svg { display: block; width: 100%; height: auto; }
.xc-grid { stroke: rgba(255,255,255,.05); stroke-width: 1; stroke-dasharray: 1 5; }
.xc-axis-lbl { fill: #fda4af; font-size: 11px; font-family: inherit; }
.xc-axis-left { text-anchor: end; }
.xc-axis-x { text-anchor: middle; }

.xc-drop {
  opacity: 0;
  animation: xcDropFall .7s cubic-bezier(.5,.1,.2,1.4) forwards;
  transform-origin: center;
  cursor: pointer;
  transition: opacity .2s ease;
}
.xc-drop.dim { opacity: .15 !important; }
.xc-drop:hover .xc-drop-core { stroke-width: 2.4; }
.xc-drop:hover .xc-drop-halo { opacity: .35 !important; }
@keyframes xcDropFall {
  from { opacity: 0; transform: translateY(-30px); }
  to   { opacity: 1; transform: translateY(0); }
}
.xc-drop-core {
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.5));
}
.xc-drop-halo {
  animation: xcHaloPulse 2.4s ease-in-out infinite;
}
@keyframes xcHaloPulse { 50% { opacity: .35; transform: scale(1.05); transform-origin: center; } }
.xc-drop-lbl {
  fill: #fff; font-size: 10px; font-weight: 700;
  text-anchor: middle; pointer-events: none;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
}

.xc-tip {
  position: absolute; min-width: 200px;
  padding: 10px 12px; border-radius: 10px;
  background: rgba(10,5,10,.95);
  border: 1px solid rgba(239,68,68,.25);
  color: #fee2e2; font-size: 12px;
  box-shadow: 0 10px 30px -8px rgba(0,0,0,.7);
  pointer-events: none; z-index: 3;
  backdrop-filter: blur(6px);
}
.xc-tip[hidden] { display: none; }
.xc-tip-head {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase;
  font-weight: 700; color: #fb7185;
}
.xc-tip-reason {
  width: 9px; height: 9px; border-radius: 2px; display: inline-block;
}
.xc-tip-product {
  font-size: 17px; font-weight: 700; color: #fff;
  margin: 4px 0 2px;
}
.xc-tip-product span { font-size: 12px; color: #fda4af; font-weight: 500; margin-left: 4px; }
.xc-tip-val {
  font-size: 18px; font-weight: 700; color: #fca5a5;
  font-variant-numeric: tabular-nums;
}
.xc-tip-date {
  font-size: 11px; color: #fda4af; margin-top: 4px;
}
.xc-tip-notes {
  margin-top: 6px; padding-top: 6px;
  border-top: 1px dashed rgba(239,68,68,.25);
  font-size: 11px; color: #fecaca; font-style: italic;
}

.xc-side {
  border-radius: 14px; padding: 14px 12px;
  background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(255,255,255,.01));
  border: 1px solid rgba(255,255,255,.06);
  display: flex; flex-direction: column;
}
.xc-side-title {
  font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase;
  color: #fb7185; font-weight: 700; margin-bottom: 8px; text-align: center;
}
.xc-donut-wrap {
  display: flex; justify-content: center; padding: 4px 0 8px;
}
.xc-donut { width: 200px; height: 200px; }
.xc-arc {
  transform-origin: 140px 140px;
  opacity: 0;
  animation: xcArcIn .6s cubic-bezier(.2,.9,.25,1) forwards;
  filter: drop-shadow(0 0 8px currentColor);
  transition: opacity .2s ease, transform .2s ease;
  cursor: pointer;
}
.xc-arc:hover { transform: scale(1.04); }
.xc-arc.dim { opacity: .25 !important; }
@keyframes xcArcIn {
  from { opacity: 0; transform: scale(.85); }
  to   { opacity: 1; transform: scale(1); }
}
.xc-donut-center-lbl {
  fill: #fda4af; font-size: 10px; font-weight: 700;
  letter-spacing: 1.8px; text-anchor: middle;
}
.xc-donut-center-val {
  fill: #fff; font-size: 28px; font-weight: 800;
  text-anchor: middle; font-variant-numeric: tabular-nums;
}
.xc-donut-center-sub {
  fill: #fda4af; font-size: 11px; text-anchor: middle;
}

.xc-reasons {
  display: flex; flex-direction: column; gap: 4px;
  border-top: 1px dashed rgba(255,255,255,.07);
  padding-top: 10px; margin-top: 4px;
}
.xc-reason {
  display: grid; grid-template-columns: 12px 1fr auto auto;
  gap: 8px; align-items: center;
  font-size: 12px; color: #fee2e2;
  padding: 4px 6px; border-radius: 6px;
  transition: background .15s ease, opacity .15s ease;
  cursor: pointer;
}
.xc-reason:hover { background: rgba(255,255,255,.04); }
.xc-reason.dim { opacity: .35; }
.xc-reason-dot { width: 9px; height: 9px; border-radius: 2px; }
.xc-reason-lbl { color: #fee2e2; }
.xc-reason-qty {
  font-weight: 700; color: #fff; font-variant-numeric: tabular-nums;
}
.xc-reason-pct {
  color: #fda4af; font-size: 11px; font-variant-numeric: tabular-nums;
  min-width: 32px; text-align: right;
}

@media (max-width: 980px) {
  .xc-body { grid-template-columns: 1fr; }
  .xc-kpis { grid-template-columns: repeat(2, 1fr); }
}
@media print { .xc-panel { display: none !important; } }

/* =================== Orders (Shopify-Polaris-inspired) =================== */
#orders { font-family: var(--font-sans); color: var(--ink-1); }
#orders .toolbar h2 {
  font-size: 20px; font-weight: 650; letter-spacing: -0.01em; color: #1a1a1a;
}
#orders .filter-summary { color: #616161; font-weight: 500; font-size: 13px; }

.new-order-btn {
  margin-left: auto;
  background: #1a1a1a;
  color: #fff;
  border: 1px solid #1a1a1a;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(0,0,0,0.05);
  transition: background .12s, transform .06s;
}
.new-order-btn:hover { background: #303030; }
.new-order-btn:active { transform: translateY(1px); }

#orders .filter-bar { gap: 4px; align-items: center; padding: 6px; background: #f6f6f7; border-radius: 10px; border: 1px solid #e1e3e5; }
#orders .filter-bar .chip {
  background: transparent !important;
  border: 1px solid transparent !important;
  color: #4a4a4a !important;
  padding: 6px 14px !important;
  border-radius: 7px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  box-shadow: none !important;
}
#orders .filter-bar .chip:hover { background: #ebebeb !important; color: #1a1a1a !important; }
#orders .filter-bar .chip.active {
  background: #fff !important;
  color: #1a1a1a !important;
  border-color: #e1e3e5 !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
}

.orders-search-wrap { margin-left: auto; }
.orders-search-wrap input {
  padding: 8px 12px; font-size: 13px; min-width: 280px;
  border: 1px solid #e1e3e5; border-radius: 8px;
  background: #fff; color: #1a1a1a;
  transition: border-color .12s, box-shadow .12s;
}
.orders-search-wrap input::placeholder { color: #8a8a8a; }
.orders-search-wrap input:focus {
  outline: none; border-color: #1a1a1a;
  box-shadow: 0 0 0 3px rgba(0,0,0,0.06);
}

#orders-table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: #fff;
  border: 1px solid #e1e3e5;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
  margin-top: 14px;
}
#orders-table th, #orders-table td {
  padding: 9px 14px; text-align: left;
  border-bottom: 1px solid #f1f2f3; font-size: 13px;
  vertical-align: middle;
  color: #1a1a1a;
}
#orders-table thead th {
  background: #fbfbfb; color: #6d7175; font-weight: 500;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px;
  border-bottom: 1px solid #e1e3e5;
  padding: 9px 14px;
}
#orders-table tbody td:first-child { font-weight: 600; color: #1a1a1a; }
#orders-table tbody td.num { font-variant-numeric: tabular-nums; }
#orders-table tbody tr:last-child td { border-bottom: none; }
#orders-table tr.ord-row { cursor: pointer; transition: background .1s; }
#orders-table tr.ord-row:hover { background: #fafafa; }
.ord-cust { font-weight: 600; color: #1a1a1a; font-size: 13px; }
.ord-cust-sub { font-size: 12px; color: #6d7175; margin-top: 2px; }
.ord-awb-link { font-size: 17px; }

/* Compact column widths so the table fits on a phone without horizontal
   scroll. Date/Total/Status/ID all shrink to their content; only Customer
   gets the leftover space. */
#orders-table .ord-col-id    { width: 56px; padding-left: 12px; padding-right: 8px; }
#orders-table .ord-col-date  { width: 72px; padding-right: 8px; white-space: nowrap; color: var(--ink-3); font-size: 13px; }
#orders-table .ord-col-total { width: 88px; padding-right: 10px; }
#orders-table .ord-col-status{ width: 110px; padding-right: 8px; }
#orders-table .actions       { width: 80px; padding-right: 12px; }

/* Total cell: big number on top, "1 art" muted line below. Two-line layout
   replaces the previous separate "Articole" column. */
.ord-total-num {
  font-weight: 600;
  font-size: 14px;
  color: #1a1a1a;
  line-height: 1.2;
}
.ord-total-items {
  font-size: 11px;
  color: #6d7175;
  line-height: 1.2;
  margin-top: 1px;
}

/* Mobile orders list — each table row becomes a stacked card. Inspired by
   the Shopify mobile orders layout: ID + total on the top line, customer
   block + action icons in the middle, status pill on the bottom. Same
   pattern the inventory table uses on mobile (#inventory-table tr cards). */
@media (max-width: 700px) {
  #orders-table {
    display: block;
    width: 100%;
    background: transparent;
    border: none;
    box-shadow: none;
  }
  #orders-table thead { display: none; }
  #orders-table tbody { display: block; width: 100%; }
  #orders-table tbody tr.ord-row {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "id      total"
      "cust    actions"
      "date    date"
      "status  status";
    column-gap: 12px;
    row-gap: 4px;
    background: #fff;
    border: 1px solid #e1e3e5;
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 10px;
    align-items: center;
  }
  #orders-table tbody tr.ord-row td {
    display: block;
    padding: 0 !important;
    border: none !important;
  }
  #orders-table td.ord-col-id     { grid-area: id; font-size: 17px; font-weight: 700; color: #1a1a1a; }
  #orders-table td.ord-col-id strong { font-weight: 700; }
  #orders-table td.ord-col-date   { grid-area: date; font-size: 12px; color: #6b7280; }
  #orders-table tbody tr.ord-row td:nth-child(3) { grid-area: cust; }
  #orders-table td.ord-col-total  { grid-area: total; text-align: right; }
  #orders-table td.ord-col-status { grid-area: status; padding-top: 8px !important; margin-top: 4px; border-top: 1px solid #f1f2f4 !important; }
  #orders-table td.actions        { grid-area: actions; align-self: start; }

  .ord-cust { font-size: 15px; font-weight: 600; color: #1a1a1a; }
  .ord-cust-sub { font-size: 12px; color: #6b7280; margin-top: 2px; }
  .ord-total-num { font-size: 17px; font-weight: 700; color: #1a1a1a; line-height: 1.2; }
  .ord-total-items { font-size: 12px; color: #6b7280; margin-top: 2px; }
  .ord-status {
    font-size: 12px;
    padding: 4px 10px;
    letter-spacing: 0;
    line-height: 1.3;
    white-space: normal;
  }
  .ord-status::before { display: inline-block; }

  .ord-row-actions { display: flex; justify-content: flex-end; gap: 6px; white-space: nowrap; }
  .ord-icon-btn { width: 34px; height: 34px; }
  .ord-icon-btn svg { width: 17px; height: 17px; }

  /* Empty-state row keeps simple block centering. */
  #orders-table tbody tr td.empty {
    display: block;
    text-align: center;
    padding: 24px 12px !important;
    background: #fff;
    border: 1px solid #e1e3e5;
    border-radius: 12px;
    color: #6b7280;
  }
}

.ord-status, .order-status-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 500; letter-spacing: 0;
  line-height: 1.4;
}
.ord-status::before, .order-status-pill::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; flex: 0 0 7px;
}
.ord-status.os-new, .order-status-pill.os-new { background: #ffd79d; color: #4a2800; }
.ord-status.os-shipped, .order-status-pill.os-shipped { background: #ffea8a; color: #6b4a00; }
.ord-status.os-delivered, .order-status-pill.os-delivered { background: #aee9d1; color: #0c5132; }
.ord-status.os-returned, .order-status-pill.os-returned { background: #ffb3b3; color: #8e1f1f; }
.ord-status.os-cancelled, .order-status-pill.os-cancelled { background: #e3e5e7; color: #4a4a4a; }

/* ----- Order modal ----- */
.order-modal-body {
  min-width: 720px; max-width: 880px;
  max-height: 92vh; overflow-y: auto;
}
.order-modal-head {
  display: flex; align-items: center; gap: 14px; margin-bottom: 8px;
}
.order-modal-head h3 { margin: 0; }
.order-form-grid {
  display: grid; grid-template-columns: 1fr 1.2fr; gap: 24px;
  margin-top: 18px;
}
.order-form-grid h4 {
  margin: 0 0 12px; font-size: 13px; color: #5f6368;
  text-transform: uppercase; letter-spacing: .4px; font-weight: 600;
}
.order-customer label, .order-items label {
  margin-bottom: 10px;
}
.order-customer textarea {
  width: 100%; margin-top: 5px; padding: 10px 12px;
  font-size: 15px; font-family: inherit; resize: vertical;
  border: 1px solid #dadce0; border-radius: 4px;
}
.order-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.ord-line {
  display: grid;
  grid-template-columns: 1fr 70px 90px 80px 28px;
  gap: 8px; align-items: center;
  padding: 6px 0; border-bottom: 1px dashed #f1f3f4;
}
.ord-line select, .ord-line input {
  font-size: 14px; padding: 7px 8px;
  border: 1px solid #dadce0; border-radius: 4px;
  margin-top: 0;
}
.ord-line-total {
  text-align: right; font-variant-numeric: tabular-nums;
  font-weight: 600; color: #1f2937;
}
.ord-line-del {
  background: transparent; border: none; color: #d93025;
  font-size: 18px; cursor: pointer; padding: 0;
}
.ord-line-del:hover { color: #b3271c; }
.ord-add-line {
  margin-top: 8px; background: transparent; color: #1a73e8;
  border: 1px dashed #1a73e8; padding: 6px 12px; border-radius: 4px;
  font-size: 13px; cursor: pointer;
}
.ord-add-line:hover { background: #f0f6ff; }
.ord-empty-lines, .ord-no-products {
  padding: 16px; text-align: center;
  color: #9aa0a6; font-size: 13px; font-style: italic;
}

.order-totals {
  margin-top: 12px; padding: 10px 12px;
  background: #f8f9fa; border-radius: 6px;
}
.ord-tot-row {
  display: flex; justify-content: space-between;
  font-size: 14px; padding: 3px 0; color: #3c4043;
}
.ord-tot-row.total {
  border-top: 1px solid #dadce0; margin-top: 4px; padding-top: 8px;
  font-size: 16px; color: #1f2937;
}
.ord-shipping { margin-top: 10px; }

.order-history {
  margin-top: 18px; padding: 12px 14px;
  background: #fafafa; border-radius: 6px;
}
.order-history h4 {
  margin: 0 0 8px; font-size: 12px; color: #5f6368;
  text-transform: uppercase; letter-spacing: .4px;
}
.ord-hist-row {
  display: flex; gap: 12px; font-size: 13px; padding: 3px 0;
}
.ord-hist-row .when { color: #5f6368; min-width: 130px; font-variant-numeric: tabular-nums; }
.ord-hist-row .trans { color: #1f2937; }

.order-actions {
  margin-top: 18px; gap: 8px;
  flex-wrap: wrap;
}
.order-status-actions {
  display: flex; gap: 8px; margin-right: auto; flex-wrap: wrap;
}
.ord-act {
  padding: 8px 14px; border-radius: 4px;
  font-size: 13px; font-weight: 600; cursor: pointer;
  border: 1px solid transparent;
}
.ord-act-ship    { background: #fff4e5; color: #b45309; border-color: #fde0b6; }
.ord-act-ship:hover { background: #fde0b6; }
.ord-act-deliver { background: #e6f4ea; color: #137333; border-color: #b7e1c5; }
.ord-act-deliver:hover { background: #b7e1c5; }
.ord-act-return  { background: #fde7f3; color: #a3266c; border-color: #f5b5d8; }
.ord-act-return:hover { background: #f5b5d8; }
.ord-act-cancel  { background: #fce8e6; color: #b3271c; border-color: #f7c4be; }
.ord-act-cancel:hover { background: #f7c4be; }
.ord-act-awb     { background: #e8f0fe; color: #1a73e8; border-color: #c3d9fb; }
.ord-act-awb:hover { background: #c3d9fb; }
.ord-save-awb {
  background: #1a73e8; color: #fff; border: none;
  padding: 10px 18px; border-radius: 4px;
  font-size: 14px; font-weight: 600; cursor: pointer;
}
.ord-save-awb:hover { background: #1765cc; }
.ghost.danger { color: #b3271c; border-color: #f7c4be; }
.ghost.danger:hover { background: #fce8e6; }

@media (max-width: 880px) {
  .order-modal-body { min-width: auto; width: 92vw; }
  .order-form-grid { grid-template-columns: 1fr; }
}

/* ----- AWB Stats panel (admin only) ----- */
.awb-stats-show-btn {
  background: #fff; border: 1px dashed #c4b5fd; color: #6d28d9;
  padding: 12px 20px; border-radius: 10px; cursor: pointer;
  font-size: 14px; font-family: inherit; font-weight: 600;
  margin-bottom: 14px; display: block; width: 100%;
}
/* `display: block` above outranks the UA's `[hidden] { display: none }`
   when both apply, so we have to re-assert hidden explicitly. */
.awb-stats-show-btn[hidden] { display: none; }
.awb-stats-show-btn:hover { background: #f5f3ff; border-color: #7c3aed; }

.awb-stats-panel {
  background: #fff; border-radius: 10px; overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  margin-bottom: 14px;
}
/* Match the purple list-panel header so the two stacked cards read as one
   coherent dashboard instead of "stats card" + "orders card" in different
   palettes. Same gradient, font size, and padding as .awb-list-bar. */
.awb-stats-head {
  background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
  color: #fff; padding: 20px 26px;
  display: flex; align-items: center; justify-content: space-between;
}
.awb-stats-head h3 { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: 0.2px; }
.awb-stats-head-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.awb-stats-viewtabs {
  display: inline-flex; background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2); border-radius: 6px;
  padding: 2px; margin-right: 4px;
}
.awb-stats-viewtab {
  background: transparent; color: rgba(255,255,255,0.85);
  border: none; padding: 6px 14px; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 500;
  border-radius: 4px;
}
.awb-stats-viewtab.active {
  background: #fff; color: #6d28d9; font-weight: 600;
}
.awb-stats-viewtab:not(.active):hover { background: rgba(255,255,255,0.08); }
.awb-stats-refresh-btn,
.awb-stats-toggle-btn {
  background: rgba(255,255,255,0.15); color: #fff;
  border: 1px solid rgba(255,255,255,0.25); padding: 7px 14px;
  border-radius: 6px; cursor: pointer; font-size: 13px;
  font-family: inherit; font-weight: 500;
}
.awb-stats-refresh-btn:hover,
.awb-stats-toggle-btn:hover { background: rgba(255,255,255,0.25); }

.awb-stats-filter-bar {
  /* Inherits .filter-bar (chip pattern from logs); sit flush inside the panel. */
  margin: 0; border-radius: 0; border-left: 0; border-right: 0;
  border-top: 0;
}
.awb-stats-range-applied {
  background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46;
  padding: 6px 12px; border-radius: 6px; font-size: 13px; margin-bottom: 12px;
  display: inline-block;
}
.awb-stats-body {
  padding: 14px 18px 16px;
  font-feature-settings: "tnum", "cv11";
}
.awb-stats-warn {
  background: #fef3c7; border: 1px solid #fde68a; color: #92400e;
  padding: 8px 12px; border-radius: 6px; font-size: 12px; margin-bottom: 12px;
}
.awb-stats-loading,
.awb-stats-empty { padding: 18px; color: #6b7280; text-align: center; font-size: 14px; }
.awb-stats-error { padding: 18px; color: #b3271c; text-align: center; font-size: 14px; }
@keyframes awb-spin { to { transform: rotate(360deg); } }

/* ----- topline: range badge + live freshness indicator ----- */
.awb-stats-topline {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px; margin-bottom: 10px; flex-wrap: wrap;
}
.awb-stats-rangebadge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: #111827;
  background: #eff6ff; border: 1px solid #bfdbfe;
  padding: 5px 10px; border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.awb-stats-rangebadge.muted {
  background: #f3f4f6; border-color: #e5e7eb; color: #6b7280; font-weight: 500;
}
.awb-stats-live {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; color: #6b7280; font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.awb-stats-live.spinning {
  color: #1a73e8; font-weight: 600;
}
.awb-stats-live.spinning::before {
  content: "↻"; display: inline-block;
  animation: awb-spin .9s linear infinite;
}
.awb-stats-pulse {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: #10b981; position: relative;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.55);
  animation: awb-stats-pulse 2s ease-out infinite;
}
@keyframes awb-stats-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(16,185,129,.55); }
  70%  { box-shadow: 0 0 0 6px rgba(16,185,129,0); }
  100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); }
}

/* ----- hero strip ----- */
/* ----- TWO HERO CARDS: Out for Delivery + Sitting (new) ----- */
@keyframes awb-stats-fade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes awb-stats-bar-grow {
  from { transform: scaleX(0); transform-origin: left; }
  to   { transform: scaleX(1); }
}

.awb-stats-hero-pair {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 12px; margin-bottom: 10px;
  animation: awb-stats-fade .25s ease-out;
}
.awb-stats-hero-card {
  position: relative;
  padding: 14px 16px 12px 18px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid #e5e7eb;
  overflow: hidden;
  transition: box-shadow .15s ease, transform .15s ease;
}
.awb-stats-hero-card::before {
  content: ""; position: absolute;
  left: 0; top: 0; bottom: 0; width: 5px;
}
.awb-stats-hero-card.out-for-delivery {
  background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 60%);
  border-color: #a7f3d0;
}
.awb-stats-hero-card.out-for-delivery::before {
  background: linear-gradient(180deg, #10b981, #059669);
}
.awb-stats-hero-card.sitting {
  background: linear-gradient(135deg, #fffbeb 0%, #ffffff 60%);
  border-color: #fcd34d;
}
.awb-stats-hero-card.sitting::before {
  background: linear-gradient(180deg, #f59e0b, #d97706);
}
.awb-stats-hero-card.sitting.attention {
  border-color: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.12);
}
.awb-stats-hero-card.incoming-payments {
  background: linear-gradient(135deg, #eef2ff 0%, #ffffff 60%);
  border-color: #c7d2fe;
}
.awb-stats-hero-card.incoming-payments::before {
  background: linear-gradient(180deg, #6366f1, #4f46e5);
}
.awb-stats-hero-card.empty {
  background: #f9fafb; border-color: #e5e7eb;
  opacity: 0.65;
}
.awb-stats-hero-card.empty::before { opacity: 0.5; }
.awb-stats-hero-card:hover { box-shadow: 0 6px 16px -8px rgba(0,0,0,.10); }
.awb-stats-hero-card-head {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 8px;
}
.awb-stats-hero-card-ic { font-size: 15px; }
.awb-stats-hero-card-eyebrow {
  font-size: 10.5px; letter-spacing: 1.4px; font-weight: 800;
  text-transform: uppercase; color: #6b7280;
}
.awb-stats-hero-card.out-for-delivery .awb-stats-hero-card-eyebrow { color: #047857; }
.awb-stats-hero-card.sitting .awb-stats-hero-card-eyebrow { color: #b45309; }
.awb-stats-hero-card-warn {
  margin-left: auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #f59e0b; color: #fff;
  font-size: 11px; font-weight: 900;
  animation: awb-stats-pulse 2s ease-out infinite;
}
.awb-stats-hero-card-money {
  display: flex; align-items: baseline; flex-wrap: wrap;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}
.awb-stats-money-int {
  font-size: 30px; font-weight: 800; color: #0f172a;
  letter-spacing: -0.8px;
}
.awb-stats-money-dec {
  font-size: 18px; font-weight: 700; color: #9ca3af;
}
.awb-stats-money-unit {
  font-size: 12px; font-weight: 700; color: #6b7280;
  margin-left: 6px; letter-spacing: 0.4px;
}
.awb-stats-hero-card-sub {
  font-size: 12px; color: #6b7280; margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.awb-stats-hero-card-sub strong { color: #0f172a; font-weight: 700; }
.awb-stats-hero-card-empty {
  font-size: 13px; color: #9ca3af; font-style: italic;
  padding: 10px 0 6px;
}

/* ----- SECONDARY ONE-LINE STRIP (other in flight / collected / lost / ndl) ----- */
.awb-stats-second {
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  padding: 8px 12px;
  margin-bottom: 12px;
  font-size: 12.5px; color: #4b5563;
  background: #f9fafb;
  border: 1px solid #f1f3f5;
  border-radius: 8px;
}
.awb-stats-second-item {
  display: inline-flex; align-items: center; gap: 4px;
  font-variant-numeric: tabular-nums;
}
.awb-stats-second-item b { color: #0f172a; font-weight: 700; margin: 0 1px; }
.awb-stats-second-item.moving { color: #047857; font-weight: 600; }

/* ----- DRILL-DOWN: actual parcels behind each hero number ----- */
.awb-stats-drills {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 12px; margin-bottom: 14px;
}
.awb-stats-drill {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}
.awb-stats-drill.out-for-delivery { border-color: #a7f3d0; }
.awb-stats-drill.sitting { border-color: #fcd34d; }
.awb-stats-drill-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  font-size: 12px; font-weight: 800; letter-spacing: 1.1px;
  border-bottom: 1px solid;
}
.awb-stats-drill-title { display: inline-flex; align-items: center; gap: 6px; }
.awb-stats-drill-totals strong { font-size: 14px; }
.awb-stats-drill.out-for-delivery .awb-stats-drill-head {
  background: #ecfdf5; color: #047857; border-color: #a7f3d0;
}
.awb-stats-drill.sitting .awb-stats-drill-head {
  background: #fffbeb; color: #b45309; border-color: #fcd34d;
}
.awb-stats-drill-totals { font-variant-numeric: tabular-nums; }
.awb-stats-drill-totals strong {
  color: #0f172a; font-weight: 800;
}
.awb-stats-drill-hint {
  padding: 6px 14px;
  font-size: 11px; font-style: italic; color: #b45309;
  background: #fffbeb; border-bottom: 1px solid #fcd34d;
}
.awb-stats-drill-orders { display: flex; flex-direction: column; }
/* One row per parcel. 4 columns: AWB block | recipient | COD | actions.
   Sized for at-a-glance scanning — the recipient name is the headline,
   AWB and amount play supporting roles. Hover lifts the whole row so it
   reads as a clickable surface (the entire row opens the detail modal). */
.awb-stats-order {
  display: grid;
  grid-template-columns: 130px 1fr auto auto;
  gap: 14px; align-items: center;
  padding: 12px 16px;
  font-size: 14px;
  border-bottom: 1px solid #f1f3f5;
  transition: background .14s ease, box-shadow .14s ease;
}
.awb-stats-order:last-child { border-bottom: none; }
.awb-stats-order:hover {
  background: #fafbff;
  box-shadow: inset 3px 0 0 #7c3aed;
}
.awb-stats-order-ref {
  font-size: 14px;
  color: #111827;
  display: flex; flex-direction: column; gap: 3px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.awb-stats-order-ref > span:first-child {
  display: inline-flex; align-items: center; gap: 5px;
}
.awb-stats-order-date {
  font-size: 13px; color: #6b7280; font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.awb-stats-order-ndl {
  font-size: 12px; opacity: 0.85;
  background: #fef3c7; padding: 1px 4px; border-radius: 4px;
}
.awb-stats-order-recv { min-width: 0; line-height: 1.35; }
.awb-stats-order-name {
  font-weight: 600; color: #111827; font-size: 15px;
  display: block;
}
.awb-stats-order-city { color: #6b7280; font-size: 13px; }
.awb-stats-order-info {
  display: block;
  color: #9ca3af; font-size: 12px; font-style: italic;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%;
  margin-top: 1px;
}
.awb-stats-order-cod {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  text-align: right;
  font-size: 16px;
  color: #0f172a;
  white-space: nowrap;
}
.awb-stats-order-cod span {
  color: #9ca3af; font-size: 11px; font-weight: 500;
  margin-left: 2px; text-transform: uppercase; letter-spacing: 0.3px;
}
.awb-stats-order-more {
  display: block; width: 100%;
  padding: 10px 14px;
  font-size: 12px; color: #6b7280;
  text-align: center; font-style: italic;
  background: #f9fafb;
  border: none; border-top: 1px dashed #e5e7eb;
  cursor: pointer;
  font-family: inherit;
}
button.awb-stats-order-more:hover { background: #f3f4f6; color: #374151; }

@keyframes awb-stats-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(245,158,11,.55); }
  70%  { box-shadow: 0 0 0 6px rgba(245,158,11,0); }
  100% { box-shadow: 0 0 0 0 rgba(245,158,11,0); }
}

/* ----- collapsible detail table (kept as a "see everything" footer) ----- */
.awb-stats-table-wrap {
  margin-top: 6px;
}
.awb-stats-table-wrap > summary {
  cursor: pointer; padding: 8px 4px;
  font-size: 12px; color: #6b7280; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.6px;
  list-style: none;
}
.awb-stats-table-wrap > summary::before {
  content: "▸"; display: inline-block;
  margin-right: 6px; transition: transform .12s ease;
  font-size: 10px; color: #9ca3af;
}
.awb-stats-table-wrap[open] > summary::before { transform: rotate(90deg); }
.awb-stats-table-wrap > summary::-webkit-details-marker { display: none; }

@media (max-width: 720px) {
  .awb-stats-hero-pair,
  .awb-stats-drills { grid-template-columns: 1fr; }
  .awb-stats-order { grid-template-columns: 80px 1fr auto; gap: 8px; }
  .awb-stats-money-int { font-size: 26px; }
}

/* ----- status table — denser, with inline %-bars ----- */
.awb-stats-empty-row { padding: 24px; color: #9ca3af; text-align: center; font-style: italic; }
.awb-stats-table { width: 100%; border-collapse: collapse; }
.awb-stats-table th {
  background: transparent; color: #9ca3af; font-size: 10.5px;
  text-transform: uppercase; letter-spacing: 0.8px;
  padding: 8px 12px; text-align: left; font-weight: 700;
  border-bottom: 1px solid #e5e7eb;
}
.awb-stats-table th.awb-num,
.awb-stats-table td.awb-num { text-align: right; font-variant-numeric: tabular-nums; }
.awb-stats-table td {
  padding: 9px 12px; border-bottom: 1px solid #f3f4f6;
  font-size: 13.5px; color: #1f2937;
}
.awb-stats-table tr:last-child td { border-bottom: none; }
.awb-stats-table tr.awb-stats-group td {
  font-size: 10.5px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.9px;
  padding: 10px 12px;
  border-top: 1px solid #e5e7eb;
  background: transparent;
}
.awb-stats-group-icon {
  display: inline-block; width: 18px; height: 18px;
  margin-right: 6px; text-align: center;
  font-size: 11px; line-height: 18px; border-radius: 5px;
}
.awb-stats-group.phase-delivered td { color: #047857; }
.awb-stats-group.phase-delivered .awb-stats-group-icon { background: #d1fae5; color: #047857; }
.awb-stats-group.phase-pending td   { color: #b45309; }
.awb-stats-group.phase-pending .awb-stats-group-icon { background: #fef3c7; color: #b45309; }
.awb-stats-group.phase-failed td    { color: #b91c1c; }
.awb-stats-group.phase-failed .awb-stats-group-icon { background: #fee2e2; color: #b91c1c; }
.awb-stats-group-totals {
  float: right; font-weight: 700; color: inherit; opacity: 0.85;
  font-variant-numeric: tabular-nums;
}
.awb-stats-row-dot {
  display: inline-block; width: 6px; height: 6px;
  border-radius: 50%; margin-right: 8px; vertical-align: middle;
}
.awb-stats-row.phase-delivered .awb-stats-row-dot { background: #10b981; }
.awb-stats-row.phase-pending   .awb-stats-row-dot { background: #f59e0b; }
.awb-stats-row.phase-failed    .awb-stats-row-dot { background: #ef4444; }
.awb-stats-pct {
  color: #6b7280; font-weight: 500;
  display: flex; align-items: center; gap: 8px;
  justify-content: flex-end;
}
.awb-stats-rowbar {
  display: inline-block; width: 64px; height: 4px;
  background: #f1f3f5; border-radius: 999px; overflow: hidden;
}
.awb-stats-rowbar > span {
  display: block; height: 100%; background: #d1d5db;
  border-radius: 999px;
  animation: awb-stats-bar-grow .5s ease-out;
}
.awb-stats-row.phase-delivered .awb-stats-rowbar > span { background: #10b981; }
.awb-stats-row.phase-pending   .awb-stats-rowbar > span { background: #f59e0b; }
.awb-stats-row.phase-failed    .awb-stats-rowbar > span { background: #ef4444; }

@media (max-width: 760px) {
  .awb-stats-ledger { grid-template-columns: 1fr; }
  .awb-stats-hero-money { font-size: 30px; }
}

.settings-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
}
.settings-card {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 20px 22px;
}
.settings-card h3 {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
  color: #202124;
  text-transform: uppercase;
  letter-spacing: .4px;
}
.settings-help {
  margin: 0 0 14px;
  font-size: 14px;
  color: #5f6368;
  line-height: 1.4;
}
.settings-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
  color: #3c4043;
  font-weight: 500;
  margin-bottom: 14px;
}
.settings-row input {
  font-size: 18px;
  font-weight: 600;
  max-width: 220px;
}
.settings-actions { display: flex; justify-content: flex-end; gap: 8px; }
.settings-save {
  background: #1a73e8;
  color: #fff;
  border: none;
  padding: 10px 18px;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 600;
}
.settings-save:hover { background: #1765cc; }
.settings-save.saved { background: #137333; }

.ord-tot-row.free {
  color: #137333;
  font-weight: 600;
  background: #e6f4ea;
  padding: 6px 12px;
  border-radius: 6px;
  margin: 2px 0;
}
.ord-tot-row.discount { color: #137333; font-weight: 600; }
.ord-shipping input:disabled {
  background: #f1f3f4;
  color: #5f6368;
  cursor: not-allowed;
}

/* Quick AWB row button + modal */
#orders-table td.ord-row-actions {
  white-space: nowrap; text-align: right; width: 1%; padding-right: 14px;
}
.ord-row-actions .ord-icon-btn + .ord-icon-btn { margin-left: 6px; }

/* Compact icon-only action buttons (AWB / invoice / etc.). */
.ord-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  padding: 0;
  background: #fff; color: #1a1a1a;
  border: 1px solid #d1d3d5; border-radius: 8px;
  font-size: 16px; line-height: 1;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
  transition: background .12s, border-color .12s, transform .06s, opacity .12s;
  font-family: inherit;
  vertical-align: middle;
}
.ord-icon-btn svg { width: 18px; height: 18px; display: block; }
.ord-icon-btn:hover:not(:disabled) { background: #f6f6f7; border-color: #b4b7ba; }
.ord-icon-btn:active:not(:disabled) { transform: translateY(1px); }
.ord-icon-btn:disabled, .ord-icon-btn.is-disabled {
  opacity: 0.35; cursor: not-allowed;
}
.ord-icon-btn.ord-awb-link {
  background: #ecfdf5; border-color: #a7f3d0; color: #047857;
}
.ord-icon-btn.ord-awb-link:hover { background: #d1fadf; border-color: #6ee7b7; }

#orders-table .ord-gen-awb.is-loading {
  opacity: 0.65; cursor: wait; position: relative;
}
#orders-table .ord-gen-awb.is-loading::after {
  content: ""; width: 14px; height: 14px;
  border: 2px solid rgba(0,0,0,0.15);
  border-top-color: #1a1a1a;
  border-radius: 50%;
  animation: ord-spin 0.7s linear infinite;
  position: absolute;
}
@keyframes ord-spin { to { transform: rotate(360deg); } }
.ord-awb-link {
  background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0;
  padding: 6px 10px; border-radius: 6px; cursor: pointer;
  font-size: 12px; font-weight: 600; font-family: inherit;
  display: inline-flex; align-items: center; gap: 4px; margin-right: 4px;
}
.ord-awb-link:hover { background: #d1fae5; }

.order-awb-body {
  max-width: 600px;
}
.order-awb-body h3 { margin: 0 0 14px; font-size: 18px; }
.oawb-summary {
  color: #4a4a4a; font-size: 13px; margin: 0 0 10px;
  padding: 0; background: transparent;
}
.oawb-preflight {
  margin: 0 0 14px; padding: 12px 14px;
  background: #f6f6f7; border: 1px solid #e1e3e5; border-radius: 10px;
  font-size: 13px; line-height: 1.55;
}
.oawb-preflight-row {
  display: flex; gap: 10px; align-items: baseline;
}
.oawb-preflight-row + .oawb-preflight-row { margin-top: 4px; }
.oawb-preflight-label {
  color: #6d7175; font-size: 12px; font-weight: 500;
  min-width: 72px; text-transform: uppercase; letter-spacing: 0.3px;
}
.oawb-preflight-val {
  color: #1a1a1a; font-weight: 500; flex: 1; word-break: break-word;
}
.oawb-preflight-val strong { font-weight: 600; }
.oawb-ready-pill {
  display: inline-flex; align-items: center; gap: 5px;
  margin-left: 8px; padding: 2px 8px; border-radius: 999px;
  background: #aee9d1; color: #0c5132;
  font-size: 11px; font-weight: 600; letter-spacing: 0.3px;
}
.oawb-ready-pill::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
}
.oawb-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
.oawb-grid label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 13px; color: #6b7280;
}
.oawb-grid input {
  padding: 10px 12px; border: 1px solid #d1d5db; border-radius: 4px;
  font-size: 14px; font-family: inherit; color: #1f2937; background: #fff;
}
.oawb-grid input:disabled { background: #f9fafb; color: #6b7280; }
.oawb-grid input:focus {
  outline: none; border-color: #ec8a1f;
  box-shadow: 0 0 0 3px rgba(236,138,31,0.12);
}
.oawb-full  { grid-column: 1 / -1; }
.oawb-span2 { grid-column: span 2; }
.oawb-county-display input { font-style: italic; }
#oawb-error { margin-top: 14px; }
.order-awb-body .modal-actions { margin-top: 18px; }
#oawb-submit {
  background: #1a1a1a; color: #fff; border: 1px solid #1a1a1a;
  padding: 10px 22px; border-radius: 8px; cursor: pointer;
  font-size: 14px; font-weight: 600;
  transition: background .12s, transform .06s, box-shadow .15s;
}
#oawb-submit:hover:not(:disabled) { background: #303030; }
#oawb-submit:active:not(:disabled) { transform: translateY(1px); }
#oawb-submit:disabled { background: #d1d3d5; color: #ffffff; border-color: #d1d3d5; cursor: not-allowed; }
#oawb-submit.is-ready {
  box-shadow: 0 0 0 3px rgba(12, 81, 50, 0.18);
}

/* Inline per-field errors on the Order modal (Telefon / E-mail) */
.order-modal-body label.invalid input,
.order-modal-body label.invalid textarea {
  border-color: #dc2626 !important;
  background: #fef2f2;
}
.order-modal-body label.invalid span {
  color: #b91c1c;
}
.ord-field-err {
  color: #b91c1c; font-size: 12px; margin-top: 4px;
  font-weight: 500;
}

/* Quick-AWB modal: phone note + parser hint */
.oawb-phone-note {
  font-size: 13px; color: #4b5563; margin: -8px 0 16px;
  padding: 8px 12px; background: #fff7ed; border-radius: 6px;
  border-left: 3px solid #ec8a1f;
}
.oawb-parse-hint {
  font-size: 12px; color: #6b7280; margin-top: 4px;
  font-weight: 500; min-height: 16px;
}
.oawb-parse-hint.ok   { color: #047857; }
.oawb-parse-hint.warn { color: #c2410c; }
.oawb-parse-hint.searching { color: #6366f1; }

/* ========================= Admin-only profit/cost cells ================ */
.admin-badge {
  display: inline-block;
  font-size: 9px; font-weight: 800; letter-spacing: 1px;
  text-transform: uppercase;
  padding: 1px 6px; border-radius: 999px;
  background: #fef3c7; color: #92400e;
  vertical-align: middle; margin-left: 4px;
  border: 1px solid #fde68a;
}
.admin-cell {
  background: rgba(254, 243, 199, 0.18);
  color: #1f2937;
}
.admin-cell.muted { color: #9ca3af; }
.admin-cell.margin-cell { font-weight: 700; }
.admin-cell.margin-cell.low  { color: #b45309; }
.admin-cell.margin-cell.neg  { color: #b91c1c; }

/* Inventory edit (pencil) button */
.ghost-btn {
  background: transparent; border: 1px solid transparent;
  color: #6b7280; cursor: pointer; padding: 2px 6px;
  font-size: 14px; border-radius: 4px;
  margin-right: 2px;
}
.ghost-btn:hover { background: #f3f4f6; color: #111827; }

/* Sales chart: admin-only profit sub-line under the revenue KPI */
.sc-kpi-profit {
  margin-top: 6px; padding-top: 6px;
  border-top: 1px dashed rgba(255, 255, 255, 0.15);
  display: flex; align-items: baseline; flex-wrap: wrap;
  gap: 4px 6px; font-size: 11px;
  color: #fde68a;
  font-variant-numeric: tabular-nums;
}
.sc-kpi-profit.neg { color: #fda4af; }
.sc-kpi-profit-lbl {
  text-transform: uppercase; letter-spacing: 1px;
  font-weight: 700; font-size: 9px; opacity: 0.85;
}
.sc-kpi-profit-val { font-size: 14px; font-weight: 800; color: #fef3c7; }
.sc-kpi-profit.neg .sc-kpi-profit-val { color: #fecaca; }
.sc-kpi-profit-pct { opacity: 0.85; }
.sc-kpi-profit-warn {
  margin-left: auto;
  font-size: 10px; padding: 1px 6px;
  border-radius: 999px;
  background: rgba(251, 191, 36, 0.15);
  color: #fef3c7;
  cursor: help;
}

/* Summary tab: admin profit KPI tiles */
.kpi.admin-kpi {
  background: linear-gradient(135deg, #fffbeb 0%, #ffffff 60%);
  border: 1px solid #fde68a;
  position: relative;
}
.kpi.admin-kpi.neg {
  background: linear-gradient(135deg, #fef2f2 0%, #ffffff 60%);
  border-color: #fecaca;
}
.kpi.admin-kpi.neg .v { color: #b91c1c; }
.kpi.admin-kpi .v { color: #92400e; }

.admin-hint {
  margin: 10px 0;
  padding: 8px 14px;
  background: #fffbeb; border: 1px solid #fde68a;
  border-radius: 8px;
  font-size: 13px; color: #92400e;
}
.admin-hint-list {
  display: block; margin-top: 4px;
  font-size: 11px; color: #b45309;
  font-family: ui-monospace, Menlo, monospace;
}

/* Product modal: cost field reveals only for admin */
#prod-cost-wrap[hidden] { display: none; }

/* ========================= COD settlement panel (admin only) =========== */
.awb-tab.admin-only[hidden] { display: none; }
.awb-tab-settle { color: #92400e; }
.awb-tab-settle.active { color: #b45309; border-bottom-color: #f59e0b; }

#awb-settle { padding: 0; }
#awb-settle-body {
  padding: 18px 22px 24px;
  font-feature-settings: "tnum";
}

.awb-settle-head {
  display: flex; justify-content: space-between; gap: 24px;
  flex-wrap: wrap; margin-bottom: 18px;
}
.awb-settle-head h3 {
  margin: 0 0 4px; font-size: 20px; font-weight: 700; color: #0f172a;
}
.awb-settle-intro {
  font-size: 13px; color: #6b7280; max-width: 540px;
  line-height: 1.45;
}

.awb-settle-kpis {
  display: flex; gap: 12px; flex-wrap: wrap;
}
.awb-settle-kpi {
  padding: 12px 16px; border-radius: 12px;
  border: 1px solid #e5e7eb;
  background: #fff;
  min-width: 180px;
}
.awb-settle-kpi.unpaid {
  border-color: #fde68a;
  background: linear-gradient(135deg, #fffbeb 0%, #fff 100%);
}
.awb-settle-kpi.paid {
  border-color: #a7f3d0;
  background: linear-gradient(135deg, #ecfdf5 0%, #fff 100%);
}
.awb-settle-kpi-lbl {
  font-size: 10.5px; letter-spacing: 1.2px; font-weight: 700;
  text-transform: uppercase; color: #6b7280;
}
.awb-settle-kpi.unpaid .awb-settle-kpi-lbl { color: #b45309; }
.awb-settle-kpi.paid   .awb-settle-kpi-lbl { color: #047857; }
.awb-settle-kpi-val {
  font-size: 22px; font-weight: 800; color: #0f172a;
  font-variant-numeric: tabular-nums; margin-top: 4px;
  line-height: 1.1;
}
.awb-settle-kpi-val span {
  font-size: 12px; font-weight: 600; color: #6b7280; margin-left: 4px;
}
.awb-settle-kpi-sub {
  font-size: 12px; color: #6b7280; margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

.awb-settle-section {
  margin-top: 18px;
  border: 1px solid #e5e7eb; border-radius: 12px;
  background: #fff; overflow: hidden;
}
.awb-settle-section-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  background: #f9fafb; border-bottom: 1px solid #e5e7eb;
}
.awb-settle-section-head h4 {
  margin: 0; font-size: 13px; font-weight: 700; color: #1f2937;
}
.awb-settle-actions { display: flex; gap: 8px; }

.awb-settle-mark {
  background: #10b981; color: #fff;
  border: none; padding: 8px 14px;
  border-radius: 6px; font-size: 13px; font-weight: 600;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.awb-settle-mark:hover { background: #059669; }
.awb-settle-mark:disabled {
  background: #e5e7eb; color: #9ca3af; cursor: not-allowed;
}

.awb-settle-empty {
  padding: 28px 20px; text-align: center;
  color: #9ca3af; font-style: italic; font-size: 14px;
}

.awb-settle-table { width: 100%; border-collapse: collapse; }
.awb-settle-table th {
  background: transparent; color: #9ca3af; font-size: 10.5px;
  text-transform: uppercase; letter-spacing: 0.8px;
  padding: 8px 14px; text-align: left; font-weight: 700;
  border-bottom: 1px solid #e5e7eb;
}
.awb-settle-table th.awb-num,
.awb-settle-table td.awb-num { text-align: right; font-variant-numeric: tabular-nums; }
.awb-settle-table td {
  padding: 8px 14px; border-bottom: 1px solid #f3f4f6;
  font-size: 13px; color: #1f2937;
}
.awb-settle-table tr:last-child td { border-bottom: none; }
.awb-settle-row.checked td { background: #fffbeb; }
.awb-settle-check { width: 28px; text-align: center; }
.awb-settle-check input { width: 16px; height: 16px; cursor: pointer; vertical-align: middle; }
.awb-settle-awb {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12px; color: #4b5563;
}
.awb-settle-city { color: #9ca3af; font-size: 12px; }
.awb-settle-note {
  font-size: 12px; color: #6b7280; font-style: italic;
  max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.awb-settle-more {
  padding: 8px 14px; font-size: 11px; color: #9ca3af;
  text-align: center; font-style: italic;
}

.awb-settle-import-text {
  width: 100%; min-height: 110px; box-sizing: border-box;
  padding: 10px 12px; border: 1px solid #d1d5db; border-radius: 8px;
  font-family: ui-monospace, Menlo, monospace; font-size: 12px;
  resize: vertical; margin-top: 10px;
}
.awb-settle-import-actions {
  display: flex; gap: 8px; padding: 10px 14px 4px;
}
.awb-settle-import-actions button {
  padding: 8px 14px; border-radius: 6px; font-size: 13px;
  border: 1px solid #d1d5db; background: #fff; cursor: pointer; font-weight: 600;
}
.awb-settle-import-actions button:not(.ghost) {
  background: #10b981; color: #fff; border-color: #10b981;
}
.awb-settle-import-actions button:not(.ghost):disabled {
  background: #e5e7eb; color: #9ca3af; border-color: #e5e7eb; cursor: not-allowed;
}
.awb-settle-import-preview {
  margin: 8px 14px 14px;
  padding: 10px 12px; border-radius: 8px;
  background: #f9fafb; border: 1px solid #e5e7eb;
}
.awb-settle-import-summary {
  display: flex; gap: 16px; flex-wrap: wrap;
  font-size: 13px; font-variant-numeric: tabular-nums;
  margin-bottom: 6px;
}
.awb-settle-import-summary .ok    { color: #047857; font-weight: 700; }
.awb-settle-import-summary .muted { color: #6b7280; }
.awb-settle-import-summary .warn  { color: #b45309; font-weight: 600; }
.awb-settle-import-list summary {
  cursor: pointer; padding: 6px 0; font-size: 12px; font-weight: 600;
}
.awb-settle-import-list summary.ok   { color: #047857; }
.awb-settle-import-list summary.warn { color: #b45309; }
.awb-settle-import-list ul {
  list-style: none; padding: 4px 0 6px 0; margin: 0;
  font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; color: #4b5563;
  max-height: 160px; overflow-y: auto;
}
.awb-settle-import-list code {
  background: rgba(0,0,0,.04); padding: 1px 4px; border-radius: 3px;
}
.awb-settle-import-list li.more { color: #9ca3af; font-style: italic; }

/* Stats panel: the unpaid chip is clickable, the settled one isn't */
.awb-stats-second-item.unsettled {
  cursor: pointer;
  background: rgba(251, 191, 36, .12);
  padding: 2px 8px; border-radius: 999px;
  border: 1px solid rgba(245, 158, 11, .25);
}
.awb-stats-second-item.unsettled:hover {
  background: rgba(251, 191, 36, .22);
  border-color: rgba(245, 158, 11, .45);
}
.awb-stats-second-item.settled {
  background: rgba(16, 185, 129, .08);
  padding: 2px 8px; border-radius: 999px;
  border: 1px solid rgba(16, 185, 129, .2);
}

/* Real courier logos on the AWB courier-pick cards.
   Keeps the brand-coloured text as a fallback in case the image fails. */
.awb-courier-logo.has-img {
  height: 56px; display: flex; align-items: center; justify-content: center;
  margin-bottom: 8px; padding: 4px;
}
.awb-courier-logo.has-img img {
  max-height: 100%; max-width: 100%; object-fit: contain; display: block;
}
.awb-courier-logo-fb {
  font-weight: 800; font-size: 16px; letter-spacing: 0.5px;
}
.awb-courier-logo-fb.cb-dpd      { color: #dc2626; }
.awb-courier-logo-fb.cb-gls      { color: #1e40af; }
.awb-courier-logo-fb.cb-fan      { color: #e11d48; }
.awb-courier-logo-fb.cb-cargus   { color: #f59e0b; }
.awb-courier-logo-fb.cb-fedex    { color: #6b21a8; }
.awb-courier-logo-fb.cb-sameday  { color: #be123c; }
.awb-courier-logo-fb.cb-bookurie { color: #b45309; }
.awb-courier-logo-fb.cb-posta    { color: #fbbf24; }

/* Inline status line in the "Choose a courier" empty state — surfaces
   exactly what's still missing instead of staying silent. */
.awb-couriers-status {
  text-align: left; padding: 18px 22px;
}
.awb-couriers-status .awb-cqs-block {
  margin-bottom: 10px;
}
.awb-couriers-status .awb-cqs-block:last-child { margin-bottom: 0; }
.awb-couriers-status .awb-cqs-block.missing strong {
  color: #b91c1c; font-size: 13px; display: block; margin-bottom: 4px;
}
.awb-couriers-status .awb-cqs-block.missing ul {
  margin: 0; padding-left: 18px; color: #b91c1c; font-size: 13px;
}
.awb-couriers-status .awb-cqs-block.missing li { margin: 2px 0; }
.awb-couriers-status .awb-cqs-block.hints {
  color: #c2410c; font-size: 12px; line-height: 1.6;
  border-top: 1px dashed #fecaca; padding-top: 10px;
}

/* =================== AWB guide banner =================== */
/* Sits at the top of the Create-AWB form. Two flavours:
   .blocking → red/orange, the quote can't fire yet.
   .warn     → orange, soft hints (Ecolet may still quote).
   .loading  → blue, while the quote is in flight.                            */
.awb-guide {
  margin: 0 0 22px;
  padding: 14px 18px;
  border-radius: 10px;
  border-left: 5px solid #ea580c;
  background: #fff7ed;
  color: #7c2d12;
  font-size: 14px;
  position: sticky; top: 8px; z-index: 4;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.awb-guide.warn     { border-left-color: #d97706; background: #fffbeb; color: #7c2d12; }
.awb-guide.blocking { border-left-color: #dc2626; background: #fef2f2; color: #7f1d1d; }
.awb-guide.loading  { border-left-color: #2563eb; background: #eff6ff; color: #1e3a8a; }
.awb-guide-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 15px;
}
.awb-guide-icon { font-size: 18px; line-height: 1; }
.awb-guide-list {
  margin: 8px 0 0; padding: 0; list-style: none;
}
.awb-guide-list li { margin: 6px 0; }
.awb-guide-list li.hint { opacity: 0.85; }
.awb-guide-jump {
  background: rgba(255,255,255,0.6); color: inherit;
  border: 1px solid rgba(220,38,38,0.3);
  padding: 8px 12px; border-radius: 6px;
  cursor: pointer; font-size: 13px; font-family: inherit; font-weight: 500;
  text-align: left; width: 100%;
  transition: background 0.15s, border-color 0.15s, transform 0.05s;
}
.awb-guide-jump:hover {
  background: #fff;
  border-color: #dc2626;
  transform: translateX(2px);
}
.awb-guide-jump.soft {
  border-color: rgba(217,119,6,0.4);
}
.awb-guide-jump.soft:hover {
  border-color: #d97706;
}
.awb-guide.warn .awb-guide-jump { border-color: rgba(217,119,6,0.3); }

/* Pulse animation when the user clicks a guide item — the target field's
   label glows briefly so the eye lands on the right input. */
@keyframes awbPulse {
  0%   { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.6); }
  50%  { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); }
  100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
}
.awb-pulse {
  animation: awbPulse 1.1s ease-out 2;
  border-radius: 6px;
}
.awb-pulse input, .awb-pulse select {
  border-color: #dc2626 !important;
  background: #fef2f2;
}

/* Hint shown inside the street suggest dropdown when locality isn't picked
   yet ("Mai întâi alegeți localitatea"). */
.awb-suggest .awb-suggest-hint {
  color: #c2410c; font-style: italic; cursor: default; background: #fff7ed;
}
.awb-suggest .awb-suggest-hint:hover { background: #fff7ed; }

/* Pickup-point (easybox / locker / fanbox) picker, shown when the
   "Ridicare la punct" checkbox is ticked on the receiver column. */
.awb-mappoint-panel {
  margin: 8px 0 12px; border: 1px solid #fed7aa; border-radius: 8px;
  background: #fff7ed; padding: 8px;
}
.awb-mappoint-bar { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.awb-mappoint-bar input { flex: 1; padding: 6px 8px; border: 1px solid #d1d5db; border-radius: 6px; }
.awb-mappoint-bar .muted { font-size: 12px; color: #6b7280; }
.awb-mappoint-list { max-height: 220px; overflow-y: auto; background: #fff;
  border: 1px solid #fde6c8; border-radius: 6px; }
.awb-mappoint-list .mp-item { padding: 8px 10px; border-bottom: 1px solid #f3f4f6;
  cursor: pointer; font-size: 13px; }
.awb-mappoint-list .mp-item:last-child { border-bottom: none; }
.awb-mappoint-list .mp-item:hover { background: #fff7ed; }
.awb-mappoint-list .mp-item.selected { background: #ffedd5; }
.awb-mappoint-list .mp-item .mp-name { font-weight: 600; color: #111827; }
.awb-mappoint-list .mp-item .mp-meta { color: #6b7280; font-size: 12px; }
.awb-mappoint-list .mp-empty { padding: 12px; color: #9ca3af; font-style: italic; text-align: center; }

/* Courier-card price breakdown — net + VAT + fuel + total, mirroring
   Ecolet's "Summary" panel. Toggled by the "Show details" link. */
.awb-courier-link[data-pb-toggle] { cursor: pointer; text-decoration: underline; }
.awb-courier-link--inert { opacity: 0.4; cursor: default; }
.awb-pb-panel { margin-top: 8px; padding: 8px 10px; background: #f8fafc;
  border: 1px solid #e5e7eb; border-radius: 6px; font-size: 12px; }
.awb-pb-row { display: flex; justify-content: space-between; padding: 2px 0; }
.awb-pb-row .awb-pb-label { color: #4b5563; }
.awb-pb-row .awb-pb-value { color: #111827; font-variant-numeric: tabular-nums; }
.awb-pb-row.awb-pb-total { border-top: 1px solid #d1d5db; margin-top: 4px; padding-top: 6px;
  font-weight: 700; }
.awb-pb-row.awb-pb-total .awb-pb-label,
.awb-pb-row.awb-pb-total .awb-pb-value { color: #9a3412; }

/* Per-row tracking actions in the "OUT FOR DELIVERY" / "SITTING" drill lists.
   Buttons sit on the same row as the COD value (not below it). */
.awb-stats-order { cursor: pointer; }
.awb-stats-order-actions {
  display: flex; gap: 4px;
  opacity: 0.55; transition: opacity .14s ease;
}
.awb-stats-order:hover .awb-stats-order-actions { opacity: 1; }
.awb-stats-order-act {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 6px;
  font-size: 14px; cursor: pointer; text-decoration: none;
  color: #6b7280; background: #fff; border: 1px solid #e5e7eb;
  transition: all .12s ease;
}
.awb-stats-order-act:hover {
  background: #ede9fe; border-color: #c4b5fd; color: #6d28d9;
  transform: translateY(-1px);
}

/* AWB detail modal — opens when a row is clicked or the 👁 action used.
   Shows recipient/courier summary + status timeline + tracking link. */
.awb-detail-body { max-width: 720px; width: 92vw; padding: 0; }
.awb-detail-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 22px; border-bottom: 1px solid #f1f5f9;
  background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%); color: #fff;
  border-radius: 8px 8px 0 0;
}
.awb-detail-head h3 { margin: 0; font-size: 17px; font-weight: 600; display: flex; align-items: center; gap: 10px; }
.awb-detail-status {
  display: inline-block; background: rgba(255,255,255,0.18);
  font-size: 11px; padding: 3px 9px; border-radius: 999px; font-weight: 500;
  text-transform: lowercase; letter-spacing: 0.3px;
}
.awb-detail-close {
  background: rgba(255,255,255,0.15); color: #fff; border: none;
  width: 32px; height: 32px; border-radius: 6px; font-size: 20px; cursor: pointer; line-height: 1;
}
.awb-detail-close:hover { background: rgba(255,255,255,0.28); }
#awb-detail-content { padding: 18px 22px 22px; }
.awb-detail-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 16px;
}
.awb-detail-section h4 {
  margin: 0 0 6px; font-size: 11px; text-transform: uppercase;
  color: #9ca3af; letter-spacing: 0.6px;
}
.awb-detail-section .muted { color: #6b7280; font-size: 13px; }
.awb-detail-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.awb-detail-btn {
  background: #fff; border: 1px solid #d1d5db; padding: 8px 14px;
  border-radius: 6px; font-size: 13px; cursor: pointer; text-decoration: none; color: #1f2937;
  font-family: inherit; font-weight: 500;
}
.awb-detail-btn:hover { background: #f9fafb; border-color: #7c3aed; color: #6d28d9; }
.awb-detail-btn.primary {
  background: #7c3aed; color: #fff; border-color: #6d28d9;
}
.awb-detail-btn.primary:hover { background: #6d28d9; color: #fff; }
.awb-detail-section-title {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px;
  color: #9ca3af; margin: 0 0 8px;
}
.awb-detail-timeline {
  list-style: none; padding: 0; margin: 0; border-left: 2px solid #e5e7eb; padding-left: 14px;
}
.awb-detail-timeline li {
  position: relative; padding: 6px 0; font-size: 13px; color: #1f2937;
}
.awb-detail-timeline li::before {
  content: ""; position: absolute; left: -19px; top: 12px;
  width: 8px; height: 8px; border-radius: 50%; background: #a78bfa;
}
.awb-detail-event-time { color: #6b7280; font-variant-numeric: tabular-nums; margin-right: 8px; font-size: 12px; }
.awb-detail-event-what { font-weight: 500; }
.awb-detail-event-where { color: #6b7280; margin-left: 4px; }
.awb-detail-loading, .awb-detail-error, .awb-detail-empty {
  padding: 24px; text-align: center; color: #6b7280;
}
.awb-detail-error { color: #b91c1c; }
@media (max-width: 600px) {
  .awb-detail-grid { grid-template-columns: 1fr; }
}

/* Compact card shown after a locker is picked — the picker collapses and
   this card takes its place, mirroring Ecolet's panel behaviour. */
.awb-mappoint-selected {
  display: flex; align-items: center; gap: 10px;
  margin: 8px 0 12px; padding: 10px 12px;
  border: 1px solid #fdba74; border-radius: 8px;
  background: #fff7ed;
}
.awb-mappoint-selected .mp-sel-icon { font-size: 20px; }
.awb-mappoint-selected .mp-sel-body { flex: 1; min-width: 0; }
.awb-mappoint-selected .mp-sel-name { font-weight: 600; color: #9a3412; }
.awb-mappoint-selected .mp-sel-meta { font-size: 12px; color: #6b7280; }
.awb-mappoint-selected .mp-sel-change {
  background: #f97316; color: #fff; border: none; border-radius: 6px;
  padding: 6px 12px; cursor: pointer; font-size: 13px; font-weight: 500;
}
.awb-mappoint-selected .mp-sel-change:hover { background: #ea580c; }

/* Pickup-mode: hide street-level address fields on the receiver column —
   the locker IS the address, so asking again is just noise. */
.rcv-pickup-mode #rcv-street,
.rcv-pickup-mode #rcv-number,
.rcv-pickup-mode #rcv-block,
.rcv-pickup-mode #rcv-entrance,
.rcv-pickup-mode #rcv-floor,
.rcv-pickup-mode #rcv-flat,
.rcv-pickup-mode #rcv-street-sug {
  display: none;
}
.rcv-pickup-mode label:has(#rcv-street),
.rcv-pickup-mode label:has(#rcv-number),
.rcv-pickup-mode label:has(#rcv-block),
.rcv-pickup-mode label:has(#rcv-entrance),
.rcv-pickup-mode label:has(#rcv-floor),
.rcv-pickup-mode label:has(#rcv-flat) {
  display: none;
}

/* ===================== Required-field marker =====================
   Tiny red star top-right of any label whose input/select/textarea has
   the `required` attribute. Uses :has() so it picks up every form
   without us having to thread classes through the markup. */
.awb-req-legend {
  font-size: 12px; color: #6b7280;
  margin: 0 0 14px; text-align: right;
}
.awb-req-legend .req-star {
  color: #dc2626; font-weight: 700; margin-right: 3px;
}

.awb-grid label,
.awb-parcel-grid label,
.awb-print-fields label,
.oawb-grid label,
.awb-settings-grid label,
.awb-settings-body > label,
.order-customer label,
.order-items label,
.order-row2 label {
  position: relative;
}

.awb-grid label:has(input[required]),
.awb-grid label:has(select[required]),
.awb-parcel-grid label:has(input[required]),
.awb-parcel-grid label:has(select[required]),
.awb-print-fields label:has(input[required]),
.oawb-grid label:has(input[required]),
.awb-settings-grid label:has(input[required]),
.awb-settings-body > label:has(input[required]),
.order-customer label:has(input[required]),
.order-customer label:has(textarea[required]),
.order-row2 label:has(input[required]) {
  /* mark for the asterisk pseudo below */
}

/* The actual star — top-right, outside the input area so it doesn't
   collide with icon-prefixed inputs (mail/phone). Pointer-events off
   so it never blocks clicking into the field. */
.awb-grid label:has(input[required])::after,
.awb-grid label:has(select[required])::after,
.awb-parcel-grid label:has(input[required])::after,
.awb-parcel-grid label:has(select[required])::after,
.awb-print-fields label:has(input[required])::after,
.oawb-grid label:has(input[required])::after,
.awb-settings-grid label:has(input[required])::after,
.awb-settings-body > label:has(input[required])::after,
.order-customer label:has(input[required])::after,
.order-customer label:has(textarea[required])::after,
.order-row2 label:has(input[required])::after {
  content: "*";
  position: absolute;
  top: -6px; right: -2px;
  color: #dc2626;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  pointer-events: none;
  z-index: 2;
}

/* For labels that DO have a visible <span> title (e.g. parcel grid,
   order modal): keep the absolute-positioned star — it's consistent
   with the icon-prefixed labels and works regardless of label content. */

/* ============================================================================
   ====  PREMIUM 2027 DESIGN LAYER  ===========================================
   ============================================================================
   Everything above this line is the original (2015-era Material-ish) styling.
   Everything below is a sophisticated visual overlay: refined typography,
   richer surfaces, micro-interactions, and a coherent design-token system.
   No JS changes required — this is a pure CSS upgrade.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;600&display=swap');

:root {
  /* — Surface — */
  --bg:           #f6f7fb;
  --bg-gradient:  radial-gradient(at 0% 0%, #eef2ff 0%, transparent 45%),
                  radial-gradient(at 100% 0%, #fef3f9 0%, transparent 45%),
                  #f6f7fb;
  --surface:      #ffffff;
  --surface-2:    #fafbff;
  --surface-3:    #f3f4f8;

  /* — Borders — */
  --border:       #e7e9ef;
  --border-2:     #eef0f5;
  --border-soft:  #f1f2f7;

  /* — Text — */
  --ink-1:        #0f172a;
  --ink-2:        #1f2937;
  --ink-3:        #4b5563;
  --ink-4:        #6b7280;
  --ink-5:        #9ca3af;

  /* — Brand (cool slate / teal) — */
  --brand:        #1a1d24;
  --brand-strong: #0e7c86;
  --brand-soft:   #e6f4f5;
  --brand-ring:   rgba(14, 124, 134, 0.22);

  /* — Status — */
  --emerald:      #10b981;
  --emerald-soft: #ecfdf5;
  --amber:        #f59e0b;
  --amber-soft:   #fffbeb;
  --rose:         #f43f5e;
  --rose-soft:    #fff1f2;
  --violet:       #8b5cf6;
  --violet-soft:  #f5f3ff;

  /* — Shadows (layered, soft) — */
  --sh-1: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 1px rgba(15, 23, 42, 0.02);
  --sh-2: 0 4px 12px -2px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
  --sh-3: 0 12px 32px -8px rgba(15, 23, 42, 0.12), 0 4px 8px -4px rgba(15, 23, 42, 0.06);
  --sh-glow-brand: 0 0 0 4px var(--brand-ring);

  /* — Radii — */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;

  /* — Motion — */
  --t-fast:  120ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-base:  200ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-slow:  320ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- TYPOGRAPHY ---------- */
body {
  font-family: var(--font-sans);
  font-feature-settings: 'tnum';
  letter-spacing: 0;
  background: var(--bg);
  color: var(--ink-2);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
}
code, pre, .mono, .awb-awb-num {
  font-family: var(--font-mono);
  letter-spacing: 0;
}

/* ---------- HEADER & NAV ---------- */
header {
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--border);
  padding: 18px 28px 0;
}
header h1 {
  font-size: 22px; font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--ink-1);
  margin: 0 0 14px;
  background: linear-gradient(135deg, var(--ink-1) 0%, var(--brand-strong) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
nav { gap: 2px; }
.tab {
  padding: 11px 18px;
  font-size: 14px; font-weight: 500;
  color: var(--ink-4);
  border-radius: 8px 8px 0 0;
  border-bottom: 2px solid transparent;
  transition: all var(--t-base);
  position: relative;
}
.tab:hover {
  background: transparent;
  color: var(--ink-2);
}
.tab:hover::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 0;
  height: 2px; background: var(--border);
  border-radius: 1px;
}
.tab.active {
  color: var(--brand-strong);
  font-weight: 600;
  border-bottom-color: var(--brand);
  background: linear-gradient(180deg, transparent 0%, var(--brand-soft) 100%);
}
.tab.active::after { display: none; }

/* Auth bar pills */
/* Legacy `.auth-bar` / `.role-badge` / `#auth-toggle` / `.lang-btn` /
   `.export-btn` styles removed — superseded by dark top bar rules at top
   of file. */
.export-btn-legacy-ghost {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-strong) 100%);
  color: white;
  padding: 8px 18px;
  border-radius: 8px;
  font-size: 13px; font-weight: 600;
  letter-spacing: -0.005em;
  transition: all var(--t-fast);
}
.export-btn:hover {
  background: linear-gradient(135deg, var(--brand-strong) 0%, #4338ca 100%);
  box-shadow: var(--sh-2), inset 0 1px 0 rgba(255,255,255,0.2);
  transform: translateY(-1px);
}

/* ---------- MAIN AREA ---------- */
main { padding: 26px 28px 60px; }
/* Offset for the fixed left sidebar. Scoped to ≥769px so it never lingers on
   phones (≤768px hides the sidebar and uses the bottom nav). */
@media (min-width: 769px) { main { margin-left: 224px; } }

/* ---------- TOOLBARS ---------- */
.toolbar, .daily-toolbar {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 14px;
  padding: 16px 20px;
  margin-bottom: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--sh-1);
}
.daily-toolbar label, .toolbar label {
  font-size: 13px; color: var(--ink-4); font-weight: 500;
}

/* Day totals → mini stat block, centered in the toolbar */
.day-totals {
  margin-left: auto;
  margin-right: auto;
  font-size: 13px; color: var(--ink-4); font-weight: 500;
  display: inline-flex; gap: 14px; align-items: center;
  justify-content: center;
}
.day-totals strong {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink-1);
  letter-spacing: -0.02em;
}

/* Submit/print/reopen buttons */
.submit-day {
  background: linear-gradient(135deg, var(--emerald) 0%, #059669 100%);
  color: white;
  padding: 9px 18px;
  border-radius: 8px;
  font-size: 13px; font-weight: 600;
  box-shadow: var(--sh-1), inset 0 1px 0 rgba(255,255,255,0.2);
  transition: all var(--t-fast);
}
.submit-day:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  transform: translateY(-1px);
  box-shadow: var(--sh-2), inset 0 1px 0 rgba(255,255,255,0.2);
}
.submit-day.is-submitted {
  background: linear-gradient(135deg, var(--ink-5) 0%, var(--ink-4) 100%);
}
.print-day, .reopen-day {
  background: var(--surface);
  color: var(--ink-3);
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px; font-weight: 500;
  border: 1px solid var(--border);
  transition: all var(--t-fast);
}
.print-day:hover, .reopen-day:hover {
  background: var(--surface-2);
  border-color: var(--ink-5);
  transform: translateY(-1px);
}
.submit-status {
  font-size: 12px; font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--amber-soft);
  color: var(--amber);
  border: 1px solid #fcd34d;
  letter-spacing: 0.2px;
}

/* ---------- DATE PICKER ---------- */
.date-picker .date-btn {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 13px; font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  transition: all var(--t-fast);
  font-family: inherit;
}
.date-picker .date-btn:hover {
  border-color: var(--brand);
  background: var(--brand-soft);
  color: var(--brand-strong);
}

/* ---------- DAILY GRID ---------- */
.daily-grid {
  gap: 18px;
}

/* ---------- PANELS ---------- */
.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--sh-1);
  overflow: hidden;
  transition: all var(--t-base);
}
.panel:hover {
  box-shadow: var(--sh-2);
  border-color: var(--border-2);
}
.panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-soft);
  background: var(--surface);
}
.panel h2 {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--ink-4);
}

/* Sales panel — blue accent */
.sales-panel .panel-head {
  background: linear-gradient(135deg, rgba(99,102,241,0.05) 0%, transparent 80%);
}
.sales-panel h2 { color: var(--brand-strong); }

/* Entries panel — emerald accent */
.entries-panel .panel-head {
  background: linear-gradient(135deg, rgba(16,185,129,0.06) 0%, transparent 80%);
}
.entries-panel h2 { color: #047857; }

/* Exits panel — rose accent */
.exits-panel .panel-head {
  background: linear-gradient(135deg, rgba(244,63,94,0.06) 0%, transparent 80%);
}
.exits-panel h2 { color: #be123c; }

/* Panel add buttons */
.panel-add {
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 12.5px; font-weight: 600;
  letter-spacing: -0.005em;
  border: none;
  cursor: pointer;
  transition: all var(--t-fast);
  font-family: inherit;
  box-shadow: var(--sh-1), inset 0 1px 0 rgba(255,255,255,0.2);
}
.panel-add:hover { transform: translateY(-1px); box-shadow: var(--sh-2), inset 0 1px 0 rgba(255,255,255,0.2); }
.sales-panel .panel-add {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-strong) 100%);
  color: white;
}
.sales-panel .panel-add:hover {
  background: linear-gradient(135deg, var(--brand-strong) 0%, #4338ca 100%);
}
.entries-panel .panel-add {
  background: linear-gradient(135deg, var(--emerald) 0%, #059669 100%);
  color: white;
}
.entries-panel .panel-add:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
}
.exits-panel .panel-add {
  background: linear-gradient(135deg, var(--rose) 0%, #e11d48 100%);
  color: white;
}
.exits-panel .panel-add:hover {
  background: linear-gradient(135deg, #e11d48 0%, #be123c 100%);
}

/* ---------- TABLES ---------- */
.panel table {
  width: 100%;
  border-collapse: collapse;
}
.panel table thead {
  background: var(--surface-2);
}
.panel table thead th {
  text-align: left;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--ink-5);
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-soft);
}
.panel table tbody td {
  padding: 12px 14px;
  font-size: 13.5px;
  color: var(--ink-2);
  border-bottom: 1px solid var(--border-soft);
  transition: background var(--t-fast);
}
.panel table tbody tr:last-child td { border-bottom: none; }
.panel table tbody tr:hover td { background: var(--surface-2); }

/* Empty state for "Nicio vânzare la această dată" etc. */
.panel table tbody tr td[colspan] {
  text-align: center;
  padding: 36px 14px;
  color: var(--ink-5);
  font-style: normal;
  font-size: 13px;
  font-weight: 500;
}
.panel table tbody tr td[colspan]::before {
  content: "";
  display: block;
  width: 42px; height: 42px;
  margin: 0 auto 10px;
  border-radius: 50%;
  background: var(--surface-2);
  background-image: radial-gradient(circle at center, var(--border) 1.5px, transparent 2px),
                    radial-gradient(circle at 30% 40%, var(--border) 1.5px, transparent 2px),
                    radial-gradient(circle at 70% 60%, var(--border) 1.5px, transparent 2px);
  background-size: 100% 100%, 12px 12px, 12px 12px;
  background-repeat: no-repeat;
  opacity: 0.65;
}

/* Panel scroll container */
.panel-scroll {
  max-height: 720px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.panel-scroll::-webkit-scrollbar { width: 8px; }
.panel-scroll::-webkit-scrollbar-track { background: transparent; }
.panel-scroll::-webkit-scrollbar-thumb {
  background: var(--border); border-radius: 4px;
}
.panel-scroll::-webkit-scrollbar-thumb:hover { background: var(--ink-5); }

/* Panel totals footer */
.totals, [id$="-totals"] {
  padding: 12px 18px;
  background: var(--surface-2);
  border-top: 1px solid var(--border-soft);
  font-size: 12.5px; font-weight: 600;
  color: var(--ink-3);
  display: flex; gap: 14px; flex-wrap: wrap;
}
.totals strong, [id$="-totals"] strong {
  color: var(--ink-1);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.01em;
}

/* ---------- BUTTONS (generic) ---------- */
button, .btn {
  font-family: inherit;
}
button:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* ---------- ACTIVE SESSIONS PANEL ---------- */
.sessions-card { grid-column: 1 / -1; }
.sessions-warning {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  margin: 8px 0 14px;
  background: #fff4e5;
  border: 1px solid #f59e0b;
  border-radius: 8px;
}
.sessions-warning[hidden] { display: none; }
.sessions-warn-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #92400e;
}
.sessions-warn-ic {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  color: #d97706;
}
.sessions-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px 0;
}
.sessions-empty {
  padding: 12px;
  color: var(--ink-3);
  font-style: italic;
  text-align: center;
}
.session-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  transition: all var(--t-fast);
}
.session-row:hover { border-color: var(--brand); }
.session-row.flagged { border-color: #f59e0b; background: #fffbeb; }
.session-row.current { border-color: var(--brand); background: #f0f4ff; }
.session-main { min-width: 0; flex: 1; }
.session-user {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.session-user > strong { font-size: 15px; color: var(--ink-1); }
.session-role {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--surface-2);
  color: var(--ink-3);
}
.session-role.admin { background: #fef3c7; color: #92400e; }
.session-tag-current,
.session-tag-flagged {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 8px;
  border-radius: 999px;
}
.session-tag-current { background: var(--brand); color: #fff; }
.session-tag-flagged { background: #f59e0b; color: #fff; }
.session-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  color: var(--ink-3);
}
.session-dot { opacity: 0.5; }
.session-revoke {
  flex: 0 0 auto;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid #c0392b;
  color: #c0392b;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  transition: all var(--t-fast);
}
.session-revoke:hover { background: #c0392b; color: #fff; }

/* ---------- CUSTOMERS PAGE ---------- */
.customers-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin: 16px 0 18px;
}
.cust-stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: all var(--t-fast);
}
.cust-stat-card[data-cust-jump] { cursor: pointer; }
.cust-stat-card[data-cust-jump]:hover {
  border-color: var(--brand);
  transform: translateY(-1px);
  box-shadow: var(--sh-2);
}
.cust-stat-card.total {
  background: linear-gradient(135deg, var(--brand), var(--accent));
  color: #fff;
  border: none;
}
.cust-stat-card.total .cust-stat-label { color: rgba(255,255,255,0.85); }
.cust-stat-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}
.cust-stat-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cust-stat-value { font-size: 14px; color: var(--ink-2); }
.cust-stat-bignumber {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #fff;
  line-height: 1;
  margin-top: 4px;
}
.cust-stat-empty { color: var(--ink-3); font-style: italic; }
#customers-table tbody tr.cust-row { cursor: pointer; }
#customers-table tbody tr.cust-row:hover { background: var(--surface-2); }
#customers-table .neg { color: #c0392b; font-weight: 600; }
#customers-table .low { color: #d97706; font-weight: 600; }
#customers-table .muted { color: var(--ink-4); }

.customer-modal-body { max-width: 720px; }
.customer-modal-body h4 { margin: 14px 0 6px; font-size: 14px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.04em; }
.cust-detail-summary {
  display: flex; gap: 18px; flex-wrap: wrap;
  padding: 12px 14px; background: var(--surface-2);
  border-radius: 8px; margin: 8px 0;
}
.cust-detail-summary > div { font-size: 13px; color: var(--ink-3); }
.cust-detail-summary strong { display: block; font-size: 18px; color: var(--ink-1); font-weight: 700; }
.cust-detail-summary .neg strong { color: #c0392b; }
.cust-detail-contact { font-size: 13px; color: var(--ink-3); padding: 8px 0; }
.cust-detail-orders { width: 100%; }
.cust-detail-orders th { font-size: 12px; }

.ord-phone-wrap { position: relative; }
.ord-phone-sug {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--sh-2);
  max-height: 220px;
  overflow-y: auto;
  z-index: 50;
}
.ord-phone-sug[hidden] { display: none; }
.ord-phone-sug-item {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.ord-phone-sug-item:last-child { border-bottom: none; }
.ord-phone-sug-item:hover { background: var(--surface-2); }
.ord-phone-sug-name { font-weight: 600; color: var(--ink-1); font-size: 14px; }
.ord-phone-sug-phone { color: var(--ink-3); font-size: 13px; text-align: right; }
.ord-phone-sug-meta { grid-column: 1 / -1; font-size: 12px; color: var(--ink-3); }
.ord-phone-sug-meta .neg { color: #c0392b; font-weight: 600; }

/* Quantity stepper — big tap targets so the user doesn't have to fight the
   tiny native number-spinner arrows. */
.qty-stepper {
  display: flex;
  align-items: stretch;
  gap: 8px;
  width: 100%;
}
.qty-stepper input[type="number"] {
  flex: 1;
  text-align: center;
  -moz-appearance: textfield;
}
.qty-stepper input[type="number"]::-webkit-outer-spin-button,
.qty-stepper input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.qty-step {
  flex: 0 0 44px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  color: var(--ink-1);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
  transition: all var(--t-fast);
}
.qty-step:hover {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}
.qty-step:active { transform: scale(0.95); }

/* Custom combobox (product picker) — reliable typeahead without relying on
   the flaky native <datalist>, which renders inconsistently across browsers
   and can fail to show all options. */
/* The combo carries the full visual frame so the input + toggle align
   pixel-perfectly. The inner input is borderless and inherits the
   combo's background/focus state. */
.combo {
  position: relative;
  width: 100%;
  display: flex;
  align-items: stretch;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.combo:focus-within {
  border-color: var(--brand);
  box-shadow: var(--sh-glow-brand);
}
.combo input[type="text"] {
  flex: 1;
  border: none !important;
  background: transparent !important;
  border-radius: 8px 0 0 8px !important;
  box-shadow: none !important;
  padding-right: 8px !important;
}
.combo input[type="text"]:focus { box-shadow: none !important; }
.combo.has-thumb input[type="text"] { padding-left: 48px !important; }
.combo-selected-thumb {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  pointer-events: none;
  z-index: 1;
}
.combo-selected-thumb[hidden] { display: none; }
.combo-toggle {
  flex: 0 0 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-left: 1px solid var(--border);
  color: var(--ink-3);
  cursor: pointer;
  font-size: 10px;
  line-height: 1;
  border-radius: 0 8px 8px 0;
  transition: background var(--t-fast), color var(--t-fast);
}
.combo-toggle:hover { background: var(--surface-2); color: var(--ink-1); }
.combo-toggle:active { background: var(--border); }
.combo-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 240px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--sh-2);
  z-index: 50;
}
.combo-list[hidden] { display: none; }
.combo-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  cursor: pointer;
  font-size: 14px;
  color: var(--ink-1);
  border-bottom: 1px solid var(--border);
}
.combo-item:last-child { border-bottom: none; }
.combo-item:hover { background: var(--surface-2); }
.combo-item-thumb {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  object-fit: cover;
  background: var(--surface-2);
  flex: 0 0 36px;
  border: 1px solid var(--border);
}
.combo-item-thumb-empty {
  background: linear-gradient(135deg, var(--surface-2) 25%, transparent 25%, transparent 50%, var(--surface-2) 50%, var(--surface-2) 75%, transparent 75%);
  background-size: 8px 8px;
  opacity: 0.5;
}
.combo-item-name { font-weight: 500; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.combo-item-meta { color: var(--ink-3); font-size: 12px; flex: 0 0 auto; }
.combo-empty { padding: 10px 12px; color: var(--ink-3); font-size: 13px; }

/* Product cell in tx tables (Sales / Entries / Exits + daily FDV view).
   Only rendered with a thumbnail when the product actually has an image —
   names without images stay flush-left so the column doesn't get a ragged
   indent. Thumb is a button to reuse the existing image-zoom modal. */
.tx-prod {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.tx-prod-thumb {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  overflow: hidden;
  cursor: zoom-in;
  transition: transform var(--t-fast);
}
.tx-prod-thumb:hover { transform: scale(1.08); }
.tx-prod-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tx-prod-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Order id + customer columns (sales tables). Walk-in sales render a faint
   "—" in both. Columns are sized tightly — qty is at most 2-3 digits, money
   is short now that ".00" is stripped, so we don't need a lot of room. */
.col-order {
  white-space: nowrap;
  width: 60px;
}
.col-customer {
  white-space: nowrap;
  max-width: 160px;
}
.tx-orderid {
  font-weight: 600;
  color: var(--brand);
  font-size: 13px;
}
.tx-ordername-cell {
  display: inline-block;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}
.tx-noorder { color: var(--ink-4); }

/* Row interactivity hint: subtle hover so users notice the row is the
   delete target now that the × button is gone. Locked rows skip the hover
   to avoid suggesting they're clickable. */
.tx-row { transition: background var(--t-fast); }
.tx-row:hover { background: var(--surface-2); }
.tx-row.locked:hover { background: transparent; }
/* Block native text-select on long-press so iOS/Android don't pop their
   own selection menu over ours. */
.tx-row { -webkit-user-select: none; user-select: none; }

/* Floating action popover (right-click / long-press / double-click). */
.tx-row-popover {
  position: fixed;
  z-index: 200;
  min-width: 160px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--sh-3);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  animation: tx-row-popover-in 100ms ease-out;
}
.tx-row-popover[hidden] { display: none; }
@keyframes tx-row-popover-in {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}
.tx-row-popover-action {
  padding: 8px 12px;
  border: none;
  background: transparent;
  font-size: 14px;
  text-align: left;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  color: var(--ink-1);
}
.tx-row-popover-action:hover { background: var(--surface-2); }
.tx-row-popover-action.danger { color: #c0392b; font-weight: 600; }
.tx-row-popover-action.danger:hover { background: #fee2e2; }
.tx-row-popover-action.ghost { color: var(--ink-3); }

/* Tighten the always-narrow numeric/short-text columns so the table doesn't
   spread its content over the full width and waste space. Qty rarely
   exceeds 2 digits in a shoe shop; channel labels are short words.
   Targets just the daily/log sales/entries/exits tables via their parents. */
#daily-sales th.num, #daily-sales td.num,
#daily-entries th.num, #daily-entries td.num,
#daily-exits th.num, #daily-exits td.num,
#sales-table th.num, #sales-table td.num,
#entries-table th.num, #entries-table td.num,
#exits-table th.num, #exits-table td.num {
  width: 72px;
}
/* Qty narrower than price/total — always 1-3 digits. */
#daily-sales th:nth-child(4),  /* qty col index in daily sale  */
#daily-sales td:nth-child(4),
#daily-entries th:nth-child(2), #daily-entries td:nth-child(2),
#daily-exits th:nth-child(2), #daily-exits td:nth-child(2) {
  width: 56px;
}

/* ---------- MODALS (refined) ---------- */
.modal-body {
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
  padding: 32px;
  border: 1px solid var(--border);
}
.modal-body h3 {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink-1);
  margin: 0 0 6px;
}
.modal-body input,
.modal-body select,
.modal-body textarea {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
  color: var(--ink-1);
  background: var(--surface);
  transition: all var(--t-fast);
  width: 100%;
}
.modal-body input:focus,
.modal-body select:focus,
.modal-body textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: var(--sh-glow-brand);
}
.modal-body label > span:first-child {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-3);
  letter-spacing: 0.2px;
  margin-bottom: 4px;
  display: block;
}
.modal-actions {
  display: flex; gap: 10px; justify-content: flex-end;
  margin-top: 20px;
}
.modal-actions button {
  padding: 9px 18px;
  border-radius: 8px;
  font-size: 13.5px; font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all var(--t-fast);
}
.modal-actions button:not(.ghost) {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-strong) 100%);
  color: white;
  box-shadow: var(--sh-1), inset 0 1px 0 rgba(255,255,255,0.2);
}
.modal-actions button:not(.ghost):hover {
  transform: translateY(-1px);
  box-shadow: var(--sh-2), inset 0 1px 0 rgba(255,255,255,0.2);
}
.modal-actions button.ghost {
  background: var(--surface);
  color: var(--ink-3);
  border: 1px solid var(--border);
}
.modal-actions button.ghost:hover {
  background: var(--surface-2);
  border-color: var(--ink-5);
}

/* ---------- LOCKED BANNER ---------- */
.locked-banner {
  padding: 14px 18px;
  background: linear-gradient(135deg, var(--amber-soft) 0%, #fef3c7 100%);
  border: 1px solid #fcd34d;
  border-radius: var(--r-md);
  color: #92400e;
  font-size: 13px; font-weight: 600;
  margin-bottom: 16px;
  box-shadow: var(--sh-1);
}

/* ---------- INVENTORY TOTAL CHIP ---------- */
.inventory-total {
  font-size: 13px; font-weight: 600;
  color: var(--ink-3);
  padding: 6px 14px;
  background: var(--brand-soft);
  border-radius: 999px;
  border: 1px solid #c7d2fe;
}

/* ---------- SUBTLE PAGE FADE-IN ---------- */
.page.active {
  animation: page-fade-in 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes page-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- AUTH MODAL POLISH ---------- */
#auth-modal::before {
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #cbd5e1 0%, #ffffff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
#auth-modal .modal-body {
  border-radius: var(--r-lg);
  border: 1px solid rgba(255,255,255,0.08);
  padding: 36px 32px;
}

/* ---------- HOVER-LIFT UTILITY (apply via class) ---------- */
.hover-lift {
  transition: all var(--t-fast);
}
.hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-2);
}

/* ============================================================================
   ====  AWB ORDERS PAGE — premium polish layer  ==============================
   ============================================================================ */

/* Inline icons inside text (filter summary labels, detail-modal buttons,
   city pin under the recipient name in the drill rows). Sized to match
   adjacent text so they read as a typographic mark, not a graphic. */
.awb-inline-ic {
  display: inline-block;
  width: 14px; height: 14px;
  vertical-align: -2px;
  margin-right: 2px;
  stroke-width: 2.2;
  flex-shrink: 0;
}

/* ---------- STATUS-FILTER CHIPS (bigger, modern) ---------- */
/* Override the earlier compact chip styling. These now feel like first-class
   navigation pills — bigger, icon + label + count, clearly tappable. */
.awb-status-chips {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 16px 26px 18px;
  border-bottom: 1px solid var(--border, #e7e9ef);
  background: var(--surface-2, #fafbff);
}
.awb-status-chip {
  display: inline-flex; align-items: center; gap: 9px;
  background: #fff;
  color: #4b5563;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 9px 16px;
  font-size: 14px; font-weight: 500;
  font-family: inherit; cursor: pointer;
  transition: all 160ms cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}
.awb-status-chip .chip-ic {
  width: 17px; height: 17px;
  stroke-width: 2;
  flex-shrink: 0;
  opacity: 0.7;
}
.awb-status-chip .chip-label { letter-spacing: -0.005em; }
.awb-status-chip:hover {
  background: #f5f3ff;
  border-color: #c4b5fd;
  color: #6d28d9;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px -2px rgba(99, 102, 241, 0.15);
}
.awb-status-chip:hover .chip-ic { opacity: 1; }
.awb-status-chip.active {
  background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
  border-color: #6d28d9;
  color: #fff;
  box-shadow: 0 4px 14px -2px rgba(124, 58, 237, 0.4),
              inset 0 1px 0 rgba(255,255,255,0.2);
}
.awb-status-chip.active .chip-ic { opacity: 1; }
.awb-status-chip .awb-chip-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; padding: 0 7px; height: 20px;
  background: #f3f4f6; color: #4b5563;
  border-radius: 999px; font-size: 12px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.awb-status-chip:hover .awb-chip-count { background: #ede9fe; color: #6d28d9; }
.awb-status-chip.active .awb-chip-count {
  background: rgba(255,255,255,0.25); color: #fff;
}
.awb-status-chip .awb-chip-count:empty { display: none; }

/* ---------- ROW ACTION BUTTONS (SVG icons, refined) ---------- */
/* Override the earlier emoji-button styling. Smaller, more refined,
   smooth hover lift, icons in muted grey then brand color on hover. */
.awb-action-btn {
  background: #fff;
  border: 1px solid #e5e7eb;
  width: 32px; height: 32px;
  margin-left: 4px;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  color: #6b7280;
  transition: all 140ms cubic-bezier(0.4, 0, 0.2, 1);
  padding: 0;
  font-family: inherit;
}
.awb-action-btn svg {
  width: 15px; height: 15px;
  stroke-width: 2;
  transition: transform 140ms cubic-bezier(0.4, 0, 0.2, 1);
}
.awb-action-btn:hover {
  background: #f5f3ff;
  border-color: #c4b5fd;
  color: #6d28d9;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px -2px rgba(99, 102, 241, 0.18);
}
.awb-action-btn:hover svg { transform: scale(1.08); }
.awb-action-btn:active { transform: translateY(0); }
.awb-action-btn.danger { color: #dc2626; }
.awb-action-btn.danger:hover {
  background: #fef2f2;
  border-color: #fecaca;
  color: #b91c1c;
  box-shadow: 0 4px 10px -2px rgba(220, 38, 38, 0.18);
}
a.awb-action-btn { text-decoration: none; }

/* ---------- AWB LIST PANEL — match the premium aesthetic ---------- */
.awb-list-panel {
  border-radius: 14px;
  border: 1px solid var(--border, #e7e9ef);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 12px -4px rgba(15, 23, 42, 0.04);
  overflow: hidden;
}
.awb-list-bar {
  /* keep the purple — it's the section's identity — but refine */
  background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
  padding: 22px 28px;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,0.08);
}
.awb-list-bar h2 {
  font-family: var(--font-sans);
  font-size: var(--text-xl); font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
}
.awb-list-bar h2 .awb-page-info {
  font-size: 13px; font-weight: 500;
}
.awb-list-filter-btn {
  border-radius: 8px;
  font-size: 13px; font-weight: 600;
  padding: 8px 14px;
  letter-spacing: -0.005em;
  transition: all 140ms ease;
}
.awb-list-filter-btn:hover { transform: translateY(-1px); }

/* AWB search bar */
.awb-search-bar {
  padding: 18px 26px 0;
  background: #fff;
}
.awb-search-bar input {
  border-radius: 10px;
  font-size: 14px;
  padding: 11px 14px 11px 42px;
  border: 1px solid #e5e7eb;
  font-family: inherit;
  transition: all 140ms ease;
}
.awb-search-bar input:focus {
  border-color: #7c3aed;
  box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.12);
}
.awb-search-bar .awb-search-btn {
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
  padding: 11px 22px;
  border-radius: 10px;
  font-size: 14px; font-weight: 600;
  letter-spacing: -0.005em;
  box-shadow: 0 4px 10px -2px rgba(249, 115, 22, 0.3),
              inset 0 1px 0 rgba(255,255,255,0.2);
  transition: all 140ms ease;
}
.awb-search-bar .awb-search-btn:hover {
  background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%);
  transform: translateY(-1px);
  box-shadow: 0 6px 14px -2px rgba(249, 115, 22, 0.4),
              inset 0 1px 0 rgba(255,255,255,0.2);
}
.awb-refresh-btn {
  border-radius: 10px;
  padding: 11px 16px;
  font-size: 14px;
  border: 1px solid #e5e7eb;
  background: #fff;
  transition: all 140ms ease;
}
.awb-refresh-btn:hover {
  background: #f5f3ff;
  border-color: #c4b5fd;
  color: #6d28d9;
  transform: translateY(-1px);
}

/* AWB table — refined typography to match Inter elsewhere */
#awb-table th {
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.7px;
  color: #9ca3af;
  padding: 14px 16px;
  background: #fafbff;
  border-bottom: 1px solid #eef0f5;
}
#awb-table td {
  padding: 14px 16px;
  font-size: 13.5px;
  border-bottom: 1px solid #f1f2f7;
  transition: background 140ms ease;
}
#awb-table tbody tr:hover td { background: #fafbff; }
.awb-awb-num {
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 13px; font-weight: 600;
  color: #1f2937;
}

/* ==========================================================================
   Tracking tables — premium redesign (shared by Ecolet #awb-table and the
   DPD/Courier #awb2-table). The DPD table previously fell back to the dated
   generic <table> rules (17px text, full grid borders, zebra striping); these
   rules give it the same airy, high-end treatment and override that fallback.
   The goal: a calm list where delivered/in-transit recede and the parcels that
   need attention (waiting = amber, problem = red) visually jump out.
   ========================================================================== */
#awb2-table { width: 100%; border-collapse: collapse; background: #fff; font-size: 13.5px; }
#awb2-table th {
  font-family: 'Inter', sans-serif;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.7px;
  text-transform: uppercase; color: #9ca3af;
  background: #fafbff; text-align: left;
  padding: 14px 18px;
  border: none; border-bottom: 1px solid #eef0f5;
}
#awb2-table th.awb-num { text-align: right; }
#awb2-table td {
  padding: 17px 18px;
  font-size: 13.5px; color: #1f2937;
  border: none; border-bottom: 1px solid #f1f2f7;
  vertical-align: top;
  background: #fff;                 /* kill the generic even-row striping */
  transition: background 140ms ease;
}
#awb2-table tbody tr:last-child td { border-bottom: none; }
#awb2-table tbody tr:hover td { background: #fafbff; }

/* A touch more vertical breathing room for the Ecolet table too. */
#awb-table td { padding: 17px 18px; }

/* ----- Status badges: semantic, attention-ranked pills ----- */
.awb-status {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 11px 4px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 12.5px; font-weight: 600; line-height: 1.45;
  white-space: nowrap;
}
.awb-status::before {
  content: ""; display: inline-block;
  width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; flex-shrink: 0;
}
/* Neutralise the legacy gray label + per-state label colours so the label
   simply inherits its pill's colour. */
.awb-status .label,
.awb-status.delivered .label,
.awb-status.exception .label { color: inherit; }

.awb-status.delivered  { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.awb-status.in-transit { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.awb-status.new        { background: #fffbeb; color: #b45309; border-color: #fcd996; }
.awb-status.exception  { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.awb-status.cancelled  { background: #f3f4f6; color: #6b7280; border-color: #e5e7eb; }

/* Attention states gently pulse their dot so the eye is drawn to them. */
.awb-status.new::before,
.awb-status.exception::before { animation: awbDotPulse 1.8s ease-in-out infinite; }
@keyframes awbDotPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

/* ----- Row-level attention accents ----- */
tr.awb-row-attn td:first-child  { box-shadow: inset 3px 0 0 #f59e0b; }
tr.awb-row-alert td:first-child { box-shadow: inset 3px 0 0 #ef4444; }
tr.awb-row-alert td { background: #fffafa; }
tr.awb-row-alert:hover td { background: #fef2f2; }

/* ----- "AWB downloaded" sub-line: pending = amber action cue, done = calm green ----- */
.awb-cell-colet .awb-status-line.pending { color: #b45309; font-weight: 600; }
.awb-cell-colet .awb-status-line.pending .ico {
  background: #f59e0b url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><circle cx='12' cy='12' r='5'/></svg>") no-repeat center / 9px 9px;
}
.awb-cell-colet .awb-status-line:not(.pending) { color: #059669; }
.awb-cell-colet .awb-status-line:not(.pending) .ico {
  background: #10b981 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'><polyline points='20 6 9 17 4 12'/></svg>") no-repeat center / 9px 9px;
}

/* ----- Action buttons: lighter, section-tinted hover ----- */
.awb-action-btn { border-radius: 8px; border-color: #eceef2; }
.awb-action-btn:hover { background: #f5f3ff; color: #6d28d9; border-color: #ddd6fe; }

@media (prefers-reduced-motion: reduce) {
  .awb-status.new::before,
  .awb-status.exception::before { animation: none; }
}

/* Filter summary banner — match the polish */
.awb-filter-summary {
  margin: 16px 26px 0;
  padding: 12px 16px;
  background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
  border: 1px solid #ddd6fe;
  border-radius: 10px;
  font-size: 13.5px; color: #4b5563;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  box-shadow: 0 2px 6px -2px rgba(124, 58, 237, 0.12);
}
.awb-filter-summary strong {
  color: #6d28d9;
  font-weight: 700;
  display: inline-flex; align-items: center; gap: 4px;
}
.awb-filter-clear {
  margin-left: auto;
  background: #fff;
  color: #6d28d9;
  border: 1px solid #c4b5fd;
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 12.5px; font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 140ms ease;
}
.awb-filter-clear:hover {
  background: #7c3aed;
  color: #fff;
  border-color: #7c3aed;
  transform: translateY(-1px);
}

/* Hero card icons now render as SVGs (truck/wallet/hourglass) — size them
   to match the previous emoji visual weight. */
.awb-stats-hero-card-ic { display: inline-flex; align-items: center; }
.awb-stats-hero-card-ic svg { width: 18px; height: 18px; stroke-width: 2; }

/* Drill card titles also got SVG icons — same treatment. */
.awb-stats-drill-title svg { width: 14px; height: 14px; vertical-align: -2px; margin-right: 2px; }

/* ---- accessibility: keyboard focus indicator -----------------------------
   Several legacy rules above set `outline: none` on inputs to keep the UI
   visually quiet on mouse-click. That hides the focus ring entirely, which
   makes keyboard navigation invisible for the elderly employee. We restore a
   strong indicator via :focus-visible so it only shows up for keyboard /
   programmatic focus, not for mouse clicks. */
:where(input, select, textarea, button, [tabindex]):focus-visible {
  outline: 2px solid #1a73e8 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(26, 115, 232, 0.18) !important;
}

/* ---- Phone layout (≤640px) ---- efficiency-first redesign.
 * Layout priorities (user spec):
 *   1. Date is the hero — large tap target, opens a comfortable calendar.
 *   2. Sales = full-width main panel.
 *   3. Entries (left) + Exits (right) share one row below Sales.
 *   4. Minimize whitespace, push useful info up, less-useful actions down.
 */
@media (max-width: 640px) {
  body { font-size: 16px; }

  /* Header: shrink the title chrome and remove the trailing padding eaten by
   * the nav so the date hero can sit higher on the page. */
  header { padding: 6px 10px 0; }
  header h1 {
    font-size: 16px; margin: 0 0 4px;
    font-weight: 600; color: #5f6368; letter-spacing: .2px;
  }

  /* Horizontal-scroll tabs — every tab is one thumb swipe away. */
  nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 0;
  }
  nav::-webkit-scrollbar { display: none; }
  .tab { padding: 9px 14px; font-size: 15px; flex: 0 0 auto; }
  .export-btn { margin-left: 6px; padding: 7px 10px; font-size: 13px; flex: 0 0 auto; }

  .auth-bar { gap: 4px; flex-wrap: nowrap; margin-left: 4px; }
  .auth-bar button, .role-badge { font-size: 12px; padding: 5px 9px; }

  main { padding: 0 !important; }
  main > section { padding: 10px; }

  /* ---- Daily toolbar: turn the date into the hero ---- */
  .daily-toolbar {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "date    actions"
      "totals  totals"
      "status  status";
    gap: 8px 10px;
    margin-bottom: 10px;
  }
  .daily-toolbar > .date-picker { grid-area: date; }
  .daily-toolbar > .day-totals  { grid-area: totals; margin: 0; }
  .daily-toolbar > .submit-status { grid-area: status; }
  .daily-toolbar > #print-day-btn,
  .daily-toolbar > #reopen-day-btn,
  .daily-toolbar > #submit-day-btn { grid-area: actions; }

  .daily-toolbar .date-picker {
    width: 100%;
    display: flex;
  }
  .daily-toolbar .date-btn {
    width: 100%;
    justify-content: center;
    padding: 16px 18px;
    font-size: 22px;
    font-weight: 700;
    color: #1a73e8;
    border: 2px solid #d2e3fc;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(60,64,67,.06);
  }
  .daily-toolbar .date-btn:hover,
  .daily-toolbar .date-btn:focus { border-color: #1a73e8; }
  .daily-toolbar .date-picker > span { display: none; } /* "Data" label is redundant */

  .day-totals { font-size: 14px; line-height: 1.3; }
  .submit-status { font-size: 13px; }

  /* Day-action buttons: keep Submit prominent, print/reopen smaller. */
  .submit-day {
    padding: 12px 18px; font-size: 15px; font-weight: 700;
    border-radius: 10px; min-height: 48px;
  }
  .print-day, .reopen-day {
    padding: 9px 12px; font-size: 13px;
  }

  /* ---- Daily grid: Sales (full row), then Entries | Exits ---- */
  .daily-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
      "sales   sales"
      "entries exits";
    height: auto;
    min-height: 0;
    gap: 10px;
  }
  .sales-panel   { grid-area: sales; }
  .entries-panel { grid-area: entries; }
  .exits-panel   { grid-area: exits; }
  .sales-panel, .entries-panel, .exits-panel {
    min-height: 0;
  }
  .sales-panel   { min-height: 260px; }
  .entries-panel, .exits-panel { min-height: 220px; }

  /* Tighten panel chrome to claw back whitespace. */
  .panel-head {
    padding: 6px 8px 6px 10px;
    gap: 6px;
  }
  .panel h2 {
    font-size: 12px;
    letter-spacing: .4px;
  }
  .panel-add {
    padding: 6px 10px;
    font-size: 13px;
    min-width: 0;
  }

  /* Tables: smaller, scroll if a row really won't fit. */
  .panel-scroll { overflow-x: auto; }
  table { font-size: 13px; }
  th, td { padding: 6px 8px !important; }

  /* ---- Calendar popover: comfortable on phone ---- */
  .calendar-popover {
    width: calc(100vw - 16px) !important;
    max-width: 420px;
    left: 8px !important;
    right: 8px;
    padding: 14px !important;
  }
}

/* Very small (≤380px) — single column for entries/exits so each row still
 * fits ~4 chars of product name without ellipsing into nothing. */
@media (max-width: 380px) {
  .daily-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "sales"
      "entries"
      "exits";
  }
}

/* Settings → Cache card: inline checkbox row + result line. */
.settings-row-inline {
  flex-direction: row !important; align-items: center; gap: 10px;
  font-size: 14px; color: #374151;
}
.settings-row-inline input[type="checkbox"] {
  width: auto; margin: 0; transform: scale(1.15);
}
.settings-cache-status {
  margin-top: 12px; padding: 10px 12px;
  background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46;
  border-radius: 8px; font-size: 13px; font-family: inherit;
}

/* =================== Mobile bottom navigation =================== */
/* Hidden by default — only shown at ≤768px. Sticky to viewport bottom,
   honors iOS safe-area inset so it floats above the home-indicator. */
.mobile-nav {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: rgba(255,255,255,0.96);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-top: 1px solid #e1e3e5;
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom)) 4px;
  z-index: 50;
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
}
.mnav-btn {
  flex: 1; min-width: 0;
  background: none; border: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px;
  padding: 6px 4px;
  color: #6d7175;
  font: inherit; font-size: 11px; font-weight: 500;
  cursor: pointer;
  border-radius: 10px;
  transition: color .15s, background .15s, transform .08s;
}
.mnav-btn:active { transform: scale(0.94); }
.mnav-btn svg { width: 24px; height: 24px; stroke-width: 1.8; }
.mnav-btn.active { color: #1a1a1a; background: #f4f4f4; }
.mnav-btn.active svg { stroke-width: 2.1; }

/* ----- "More" sheet (slide-up overlay) ----- */
.mnav-sheet {
  position: fixed; inset: 0; z-index: 200;
  display: flex; flex-direction: column; justify-content: flex-end;
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
}
.mnav-sheet[hidden] { display: none; }
.mnav-sheet-backdrop {
  position: absolute; inset: 0;
  background: rgba(20,20,20,0.42);
  animation: mnav-fade-in .18s ease-out;
}
.mnav-sheet-body {
  position: relative;
  background: #fff;
  border-radius: 18px 18px 0 0;
  padding: 8px 0 calc(12px + env(safe-area-inset-bottom));
  box-shadow: 0 -10px 30px rgba(0,0,0,0.18);
  animation: mnav-slide-up .22s cubic-bezier(.22,.94,.36,1.04);
  max-height: 85vh;
  overflow-y: auto;
}
.mnav-sheet-handle {
  width: 38px; height: 4px; border-radius: 999px;
  background: #d1d5db; margin: 0 auto 6px;
}
.mnav-sheet-list { padding: 4px 8px; }
.mnav-sheet-item {
  display: flex; align-items: center; gap: 14px;
  width: 100%; padding: 14px 14px;
  background: none; border: none;
  font: inherit; font-size: 16px; color: #1a1a1a;
  text-align: left; text-decoration: none;
  cursor: pointer;
  border-radius: 10px;
}
.mnav-sheet-item:active { background: #f1f1f1; }
.mnav-sheet-ic {
  width: 28px; text-align: center; font-size: 19px;
  filter: grayscale(0.15);
}
.mnav-sheet-foot {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 18px 0; margin-top: 8px;
  border-top: 1px solid #f1f1f1;
}
.mnav-sheet-lang {
  background: #fff; color: #1a1a1a;
  border: 1px solid #e1e3e5; border-radius: 8px;
  padding: 7px 14px; font: inherit; font-size: 13px; font-weight: 600;
}
.mnav-sheet-role {
  font-size: 13px; font-weight: 600; padding: 6px 12px;
  border-radius: 999px; background: #f1f1f1; color: #545454;
}
.mnav-sheet-role.admin { background: #fef7e0; color: #8a5a00; }
.mnav-sheet-logout {
  margin-left: auto;
  background: #1a1a1a; color: #fff;
  border: none; border-radius: 8px;
  padding: 8px 16px; font: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer;
}

@keyframes mnav-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes mnav-slide-up {
  from { transform: translateY(110%); }
  to   { transform: translateY(0); }
}

/* =================== Mobile layout (≤768px) =================== */
@media (max-width: 768px) {
  body {
    font-size: 15px;
  }
  html, body { overflow-x: hidden; }
  main { padding: 14px 12px calc(120px + env(safe-area-inset-bottom)) !important; }

  /* Wide tables become horizontally scrollable so they never push the
     whole page sideways. Inventory keeps its card layout (untouched).
     Orders table is excluded — it fits to viewport so the AWB + invoice
     action icons stay visible (rules in the @media ≤700px block above). */
  #sales-table, #entries-table, #exits-table,
  #awb-table, #awb-orders-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  /* Tighten the dashboard chart panels so their gradients don't bleed. */
  .sc-panel, .ec-panel, .xc-panel {
    padding: 14px 14px 12px !important;
    margin: 12px 0 16px !important;
    border-radius: 14px !important;
  }

  /* ----- Header / top nav ----- */
  header {
    padding: 10px 14px 0;
    border-bottom: 1px solid #ececec;
  }
  header h1 {
    font-size: 17px; font-weight: 650;
    letter-spacing: -0.01em;
    margin: 0 0 10px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  /* The desktop tab strip becomes the mobile bottom nav. */
  header nav { display: none; }

  /* Show the bottom nav. */
  .mobile-nav { display: flex; }

  /* main padding handled above */

  /* ----- Toolbars: wrap, full-width primary buttons ----- */
  .toolbar {
    flex-wrap: wrap;
    align-items: stretch;
    gap: 10px;
  }
  .toolbar h2 {
    flex: 1 1 100%;
    font-size: 18px !important;
    margin: 0 !important;
  }
  .toolbar .filter-summary,
  .toolbar .inventory-total { flex: 1 1 auto; font-size: 13px; }
  .toolbar .new-order-btn,
  .toolbar #add-product-btn {
    margin-left: 0 !important;
    flex: 1 1 100%;
    text-align: center;
    padding: 11px 14px;
    font-size: 14px;
  }

  /* ----- Filter chips: horizontal scroll snap ----- */
  .filter-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 4px;
    margin: 0 -12px 12px;
    padding-left: 12px; padding-right: 12px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .filter-bar::-webkit-scrollbar { display: none; }
  .filter-bar .chip { flex: 0 0 auto; white-space: nowrap; }
  .orders-search-wrap { flex: 1 1 100%; margin: 0 !important; }
  .orders-search-wrap input { min-width: 0; width: 100%; }

  /* ----- FDV daily-grid: switch to flex so each panel becomes a full-width
     section. Grid breaks down here because the panel-level `grid-column`
     overrides create implicit extra columns. */
  .daily-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    height: auto !important;
    min-height: 0 !important;
  }
  .sales-panel, .entries-panel, .exits-panel {
    grid-row: auto !important;
    grid-column: auto !important;
    width: 100%;
    max-height: none !important;
  }
  .panel { max-height: none !important; }
  .panel-scroll { max-height: 55vh; overflow: auto; }
  .daily-toolbar {
    flex-wrap: wrap; gap: 8px; row-gap: 10px;
  }
  .daily-toolbar .day-totals { flex: 1 1 100%; order: 5; }
  .daily-toolbar .submit-day,
  .daily-toolbar .reopen-day,
  .daily-toolbar .print-day { flex: 1 1 auto; }

  /* ----- Tables: smaller cells, allow horizontal scroll wrapper -----
     #orders-table is intentionally excluded — it has its own dedicated
     mobile rules in the @media ≤700px block above (fit-to-viewport, no
     scroll, action icons sized to fit). */
  #inventory-table, #sales-table, #entries-table, #exits-table,
  #awb-orders-table, .awb-stats-table {
    font-size: 13px;
  }
  #inventory-table th, #inventory-table td,
  #sales-table th, #sales-table td,
  #entries-table th, #entries-table td,
  #exits-table th, #exits-table td {
    padding: 10px 8px !important;
  }

  /* Inventory rows — turn into cards on phones. */
  #inventory-table thead { display: none; }
  #inventory-table, #inventory-table tbody,
  #inventory-table tr, #inventory-table td { display: block; width: 100%; }
  #inventory-table tr {
    background: #fff;
    border: 1px solid #e1e3e5;
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 10px;
    display: grid;
    grid-template-columns: 56px 1fr auto;
    grid-template-areas:
      "img name  price"
      "img stock actions"
      "img value value";
    gap: 6px 12px;
    align-items: center;
  }
  #inventory-table td {
    padding: 0 !important;
    border: none !important;
  }
  #inventory-table td.col-img { grid-area: img; align-self: start; }
  #inventory-table td.col-img .thumb,
  #inventory-table td.col-img img {
    width: 56px; height: 56px;
  }
  #inventory-table td.inv-c-prod { grid-area: name; }
  #inventory-table td.inv-c-prod .inv-prod-name { font-size: 15px; }
  #inventory-table td.inv-c-stock { grid-area: stock; }
  #inventory-table td.inv-c-price { grid-area: price; text-align: right; font-weight: 700; font-size: 15px; }
  #inventory-table td.inv-c-value { grid-area: value; text-align: left; font-size: 12px; color: var(--ink-3); }
  #inventory-table td.inv-c-value::before { content: "Valoare: "; }
  #inventory-table td.actions.inv-actions { grid-area: actions; text-align: right; opacity: 1; }
  /* Admin cost/margin cells tuck under the value line. */
  #inventory-table td.admin-cell { grid-area: value; }

  /* ----- Modals: full-screen sheet on phones ----- */
  .modal { align-items: stretch; justify-content: stretch; }
  .modal.open { padding: 0; }
  .modal-body {
    min-width: 0 !important;
    max-width: 100vw !important;
    width: 100vw !important;
    min-height: 100vh;
    max-height: 100vh;
    border-radius: 0 !important;
    padding: 18px 16px calc(18px + env(safe-area-inset-bottom)) !important;
    overflow-y: auto;
  }
  .modal-body h3 { font-size: 18px; margin-bottom: 14px; }
  .modal-body input, .modal-body select, .modal-body textarea {
    font-size: 16px; /* prevents iOS auto-zoom on focus */
    padding: 12px;
  }
  .modal-actions {
    position: sticky; bottom: 0; left: 0; right: 0;
    background: #fff;
    margin: 14px -16px -18px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid #f1f1f1;
    flex-wrap: wrap; gap: 8px;
  }
  .modal-actions > button { flex: 1 1 calc(50% - 4px); padding: 12px; font-size: 14px; }
  .order-modal-body, .awb-detail-body {
    min-width: 0 !important; max-width: 100vw !important;
    width: 100vw !important; max-height: 100vh !important;
  }
  .order-form-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  #auth-modal .modal-body {
    min-width: 0 !important; max-width: 92vw !important;
    width: 92vw !important; min-height: auto !important;
    max-height: 90vh !important; border-radius: 14px !important;
    margin: auto;
  }
  body.auth-open #auth-modal { align-items: center; justify-content: center; }

  /* ----- Orders status badge: keep dot but tighten ----- */
  .ord-status, .order-status-pill { font-size: 11px; padding: 3px 8px 3px 7px; }

  /* ----- AWB tabs: scroll horizontally ----- */
  .awb-tabs, .awb-status-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .awb-tabs::-webkit-scrollbar,
  .awb-status-chips::-webkit-scrollbar { display: none; }

  /* ----- Settings cards: single column ----- */
  .settings-grid { grid-template-columns: 1fr !important; }
  .settings-card { padding: 16px; }

  /* ----- Buttons: comfortable tap target ----- */
  button, .export-btn, .new-order-btn, .add-product-btn {
    min-height: 40px;
  }

  /* ----- Image zoom: keep full-bleed ----- */
  .modal.image-zoom .image-zoom-img { max-width: 96vw; max-height: 80vh; }
}

/* Very small phones (≤380px): hide bottom-nav labels, icons only. */
@media (max-width: 380px) {
  .mnav-btn span { display: none; }
  .mnav-btn { padding: 8px 4px; }
}

/* Reduced motion: skip the sheet slide animation. */
@media (prefers-reduced-motion: reduce) {
  .mnav-sheet-body { animation: none; }
  .mnav-sheet-backdrop { animation: none; }
}

/* ==========================================================================
   Shopify-style page chrome (`.sp-*` primitives).
   Used by Orders first, then Customers / Inventory / AWB / Settings.
   ========================================================================== */
.sp-page {
  max-width: none;
  margin: 0;
  padding: 24px;
  background: var(--bg);
}

/* Page header row */
.sp-page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.sp-page-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 22px;
  font-weight: 600;
  color: var(--ink-1);
  letter-spacing: -0.01em;
  position: relative;
}
.sp-channel-pick {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 0;
  font-family: inherit;
  font-size: 22px;
  font-weight: 600;
  color: var(--ink-1);
  padding: 4px 8px;
  border-radius: 8px;
  cursor: pointer;
}
.sp-channel-pick:hover { background: rgba(0,0,0,0.04); }
.sp-channel-pick svg { width: 12px; height: 12px; opacity: 0.6; }
.sp-page-date {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-3);
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 4px 10px;
  border-radius: 999px;
  margin-left: 8px;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.sp-page-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  position: relative;
}
.sp-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  background: var(--surface);
  color: var(--ink-1);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
  transition: background .12s, border-color .12s, transform .05s;
}
.sp-btn:hover { background: #f7f8fa; }
.sp-btn:active { transform: translateY(0.5px); }
.sp-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.sp-btn svg { width: 12px; height: 12px; opacity: 0.7; }
.sp-btn-primary {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}
.sp-btn-primary:hover { background: var(--brand-hover); }
.sp-btn-primary svg { opacity: 0.9; }

/* Popovers (used by channel, range, sort, more-actions) */
.sp-pop {
  position: absolute;
  top: calc(100% + 6px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px;
  min-width: 200px;
  box-shadow: 0 10px 32px rgba(0,0,0,0.12);
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sp-pop[hidden] { display: none; }
.sp-pop button {
  background: transparent;
  border: 0;
  font-family: inherit;
  font-size: 13px;
  color: var(--ink-1);
  text-align: left;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
}
.sp-pop button:hover { background: var(--surface-alt); }
.sp-pop button:disabled { color: var(--ink-3); cursor: not-allowed; }
.sp-pop button:disabled:hover { background: transparent; }
.sp-page-title .sp-pop { top: calc(100% + 4px); left: 0; }
#orders-channel-pop { left: 60px; }
#orders-more-pop { right: 110px; }
#orders-range-pop { left: 0; top: calc(100% + 4px); }
#orders-sort-pop { right: 0; top: calc(100% + 4px); }

/* Stats row */
.sp-stats {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 8px;
  display: flex;
  align-items: stretch;
  margin-bottom: 16px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
  position: relative;
}
.sp-stats-range {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-right: 1px solid var(--border);
  margin-right: 6px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-2);
  min-width: 130px;
  border-radius: 6px;
  user-select: none;
}
.sp-stats-range:hover { background: var(--surface-alt); }
.sp-stats-range svg { width: 10px; height: 10px; opacity: 0.5; }
.sp-stat {
  flex: 1;
  min-width: 0;
  padding: 6px 14px;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  transition: background .15s;
  border-radius: 6px;
}
.sp-stat:last-child { border-right: 0; }
.sp-stat:hover { background: var(--surface-alt); }
.sp-stat-label {
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 500;
}
.sp-stat-main {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}
.sp-stat-value {
  font-size: 24px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.5px;
  color: var(--ink-1);
}
.sp-stat-delta {
  font-size: 12px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 3px;
  margin-top: 4px;
  min-height: 16px;
}
.sp-stat-delta.up { color: var(--success); }
.sp-stat-delta.down { color: var(--danger); }
.sp-stat-delta.flat { color: var(--ink-3); }
.sp-spark {
  width: 70px;
  height: 26px;
  flex-shrink: 0;
  align-self: center;
}

/* Card containing tabs + table */
.sp-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.sp-table-card { /* alias for clarity */ }

/* Tabs */
.sp-tabs {
  display: flex;
  align-items: center;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  gap: 2px;
  position: relative;
}
.sp-tab {
  background: transparent;
  border: 0;
  font-family: inherit;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
  cursor: pointer;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.sp-tab:hover { background: var(--surface-alt); color: var(--ink-1); }
.sp-tab.active {
  color: var(--ink-1);
  background: #eef0f3;
  font-weight: 600;
}
.sp-tab-count {
  background: #e3e6ea;
  color: var(--ink-2);
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 999px;
  font-weight: 600;
  min-width: 18px;
  text-align: center;
}
.sp-tab.active .sp-tab-count {
  background: var(--accent);
  color: #fff;
}
.sp-tab-count:empty { display: none; }
.sp-tabs-spacer { flex: 1; }
.sp-tabs-tools {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  position: relative;
}
.sp-tool-btn {
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .12s;
  font-family: inherit;
  font-size: 13px;
}
.sp-tool-btn:hover { background: var(--surface-alt); color: var(--ink-1); }
.sp-tool-btn:disabled,
.sp-tool-btn.disabled { opacity: 0.4; cursor: not-allowed; }
.sp-tool-btn svg { width: 16px; height: 16px; stroke-width: 1.7; }

/* Search-toggle row */
.sp-search-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-alt);
}
.sp-search-row[hidden] { display: none; }
.sp-search-row input[type="search"] {
  flex: 1;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: inherit;
  font-size: 13px;
  background: var(--surface);
  outline: 0;
}
.sp-search-row input[type="search"]:focus { border-color: var(--accent); }
.sp-search-summary { color: var(--ink-3); font-size: 12px; }

/* Table */
.sp-table-wrap { overflow-x: auto; }
.sp-orders-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
}
.sp-orders-table thead th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 10px 14px;
  background: var(--surface-alt);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.sp-orders-table thead th.num { text-align: right; }
.sp-orders-table thead th.sp-col-sel { width: 36px; padding-right: 0; }
.sp-orders-table tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid #eef0f3;
  font-size: 13px;
  vertical-align: middle;
}
.sp-orders-table tbody tr { cursor: pointer; transition: background .1s; }
.sp-orders-table tbody tr:hover { background: #fafbfc; }
.sp-orders-table tbody tr:last-child td { border-bottom: 0; }
.sp-orders-table tbody tr.sp-row-selected { background: var(--accent-soft); }
.sp-orders-table tbody tr.sp-row-selected:hover { background: rgba(14,124,134,0.14); }
.sp-orders-table tbody td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ============================================================
   Inventory page — premium overview panel + product table
   ============================================================ */
/* Overview stat cells (reuses .sp-stats / .sp-stat shell, tuned for inventory) */
.inv-stats { padding: 4px 6px; }
.inv-stat { padding: 14px 18px; cursor: default; gap: 5px; }
.inv-stat:hover { background: transparent; }
.inv-stat .sp-stat-value { font-size: 26px; }
.inv-stat-sub { font-size: 12px; font-weight: 500; color: var(--ink-3); }
.inv-stat-unit { font-size: 14px; font-weight: 600; color: var(--ink-3); margin-left: 1px; }
.inv-stat.att-out .sp-stat-value, .inv-stat.att-out .inv-stat-sub { color: var(--danger); }
.inv-stat.att-low .sp-stat-value, .inv-stat.att-low .inv-stat-sub { color: var(--warning); }
.inv-stat.att-ok  .sp-stat-value { color: var(--success); }

/* Search toolbar */
.inv-toolbar { justify-content: space-between; }
.inv-search {
  display: flex; align-items: center; gap: 8px;
  flex: 1; max-width: 360px;
  height: 34px; padding: 0 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  transition: border-color .12s, box-shadow .12s;
}
.inv-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.inv-search svg { width: 15px; height: 15px; color: var(--ink-3); flex-shrink: 0; }
.inv-search input {
  border: 0; outline: 0; background: transparent;
  font-family: inherit; font-size: 13px; color: var(--ink-1); width: 100%;
}

/* Table cells */
.inv-table td.col-img { width: 68px; }
.inv-table .thumb { width: 52px; height: 52px; border-radius: 8px; }
.inv-prod-name { font-weight: 600; color: var(--ink-1); font-size: 13.5px; }
.inv-c-stock { white-space: nowrap; }
.inv-qty {
  font-variant-numeric: tabular-nums; font-weight: 700; font-size: 14px;
  color: var(--ink-1); margin-right: 9px;
}
.inv-qty-out { color: var(--danger); }
.inv-qty-low { color: var(--warning); }
.inv-pill {
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 600; line-height: 1;
  padding: 3px 9px; border-radius: 999px;
  border: 1px solid transparent; vertical-align: middle;
}
.inv-pill-in  { background: var(--pill-green-bg); color: var(--pill-green-text); border-color: var(--pill-green-bd); }
.inv-pill-low { background: var(--pill-amber-bg); color: var(--pill-amber-text); border-color: var(--pill-amber-bd); }
.inv-pill-out { background: var(--pill-red-bg);   color: var(--pill-red-text);   border-color: var(--pill-red-bd); }
.inv-pill-backorder { background: var(--pill-blue-bg); color: var(--pill-blue-text); border-color: var(--pill-blue-bd); }
.inv-qty-backorder { color: var(--pill-blue-text); }

/* Product detail (Shopify-style) — #inv-detail */
.inv-detail[hidden] { display: none; }
.inv-detail .ord-detail-grid { margin-top: 16px; }
.inv-detail .ord-detail-actions { margin-left: auto; }
.invd-title { font-size: 22px; font-weight: 700; color: var(--ink-1); margin: 0; letter-spacing: -0.01em; }
.invd-head-pill { margin-left: 2px; }
.invd-del-btn:hover { color: var(--danger); border-color: var(--pill-red-bd); }
.invd-media-card { display: flex; align-items: center; justify-content: center; padding: 0; overflow: hidden; background: var(--surface-alt); min-height: 280px; }
.invd-media { border: 0; background: transparent; padding: 0; cursor: zoom-in; width: 100%; display: flex; align-items: center; justify-content: center; }
.invd-media img { width: 100%; max-height: 440px; object-fit: contain; display: block; }
.invd-media-empty { color: var(--ink-4); width: 100%; min-height: 280px; display: flex; align-items: center; justify-content: center; }
.invd-media-empty svg { width: 64px; height: 64px; }
.invd-sz-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 10px; }
.invd-sz { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 6px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.invd-sz-num { font-size: 12px; font-weight: 600; color: var(--ink-3); }
.invd-sz-qty { font-size: 20px; font-weight: 700; color: var(--ink-1); font-variant-numeric: tabular-nums; }
.invd-nosizes { text-align: center; }
.invd-nosizes-msg { color: var(--ink-3); font-size: 13px; margin: 0 0 12px; }
.invd-hero { text-align: center; }
.invd-hero-num { font-size: 40px; font-weight: 700; line-height: 1; letter-spacing: -1px; color: var(--ink-1); font-variant-numeric: tabular-nums; }
.invd-hero-sub { margin-top: 8px; font-size: 12.5px; color: var(--ink-3); display: flex; align-items: center; justify-content: center; gap: 6px; }
.invd-oversell { margin-top: 12px; display: inline-block; font-size: 11.5px; font-weight: 600; color: var(--pill-blue-text); background: var(--pill-blue-bg); border: 1px solid var(--pill-blue-bd); padding: 3px 10px; border-radius: 999px; }
.invd-kv { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: 13px; color: var(--ink-2); border-bottom: 1px solid #f0f1f3; }
.invd-kv:last-child { border-bottom: 0; }
.invd-kv strong { color: var(--ink-1); font-weight: 600; font-variant-numeric: tabular-nums; }
.invd-kv-total { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 10px; border-bottom: 0; }
.invd-kv-total strong { font-size: 15px; }
.invd-unit { font-size: 11px; color: var(--ink-3); font-weight: 500; }
@media (max-width: 860px) { .invd-media img { max-height: 300px; } }

/* ============================================================
   Product EDITOR (Shopify-style) — #inv-detail
   ============================================================ */
.invd-savebar {
  position: sticky; top: 0; z-index: 30;
  display: none; align-items: center; justify-content: space-between; gap: 16px;
  background: #1a1d24; color: #fff;
  border-radius: 10px; padding: 10px 12px 10px 18px; margin-bottom: 14px;
  box-shadow: 0 6px 20px rgba(0,0,0,.16);
}
.invd-savebar.show { display: flex; }
.invd-savebar-msg { font-size: 13.5px; font-weight: 600; }
.invd-savebar-actions { display: flex; gap: 8px; }
.invd-savebar-discard, .invd-savebar-save {
  height: 34px; padding: 0 16px; border-radius: 8px; font-family: inherit;
  font-size: 13px; font-weight: 600; cursor: pointer; border: 1px solid transparent;
}
.invd-savebar-discard { background: transparent; color: #d6d8dc; border-color: #3a3f49; }
.invd-savebar-discard:hover { background: #272b34; color: #fff; }
.invd-savebar-save { background: #2bbf76; color: #06281a; border: 0; }
.invd-savebar-save:hover { background: #25a868; }
.invd-savebar-save:disabled { opacity: .6; cursor: not-allowed; }

.invd-head-name { font-size: 21px; font-weight: 700; color: var(--ink-1); margin: 0; letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 52ch; }

.invd-label { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
.invd-label-mt { margin-top: 14px; }
.invd-input, .invd-textarea, .invd-select {
  width: 100%; border: 1px solid var(--border); border-radius: 8px;
  padding: 9px 12px; font-family: inherit; font-size: 14px; color: var(--ink-1);
  background: var(--surface); outline: 0;
}
.invd-input:focus, .invd-textarea:focus, .invd-select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.invd-input:disabled, .invd-textarea:disabled, .invd-select:disabled { background: var(--surface-alt); color: var(--ink-3); }
.invd-textarea { resize: vertical; min-height: 96px; line-height: 1.5; }
.invd-select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%236c727a' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; cursor: pointer; }

.invd-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.invd-cardtitle { margin: 0; }
.invd-kv-mt { margin-top: 10px; }

.invd-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.invd-g-item { position: relative; aspect-ratio: 1 / 1; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--surface-alt); cursor: pointer; }
.invd-g-item:first-child { grid-column: span 2; grid-row: span 2; }
.invd-g-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.invd-g-item .invd-g-check { position: absolute; top: 7px; left: 7px; width: 20px; height: 20px; border-radius: 6px; border: 2px solid #fff; background: rgba(0,0,0,.25); box-shadow: 0 0 0 1px rgba(0,0,0,.15); opacity: 0; transition: opacity .1s; }
.invd-g-item:hover .invd-g-check { opacity: 1; }
.invd-g-item.sel { outline: 2px solid var(--accent); outline-offset: -2px; }
.invd-g-item.sel .invd-g-check { opacity: 1; background: var(--accent); border-color: var(--accent); }
.invd-g-item.sel .invd-g-check::after { content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.invd-g-del { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border: 0; border-radius: 50%; background: rgba(26,29,36,.78); color: #fff; font-size: 15px; line-height: 1; cursor: pointer; display: none; align-items: center; justify-content: center; padding: 0; }
.invd-g-item:hover .invd-g-del { display: flex; }
.invd-g-del:hover { background: var(--danger); }
.invd-g-primary-tag { position: absolute; left: 0; bottom: 0; right: 0; background: linear-gradient(transparent, rgba(0,0,0,.55)); color: #fff; font-size: 11px; font-weight: 600; padding: 14px 8px 6px; pointer-events: none; }
.invd-g-add { aspect-ratio: 1 / 1; border: 1.5px dashed var(--border-strong); border-radius: 10px; background: transparent; color: var(--ink-3); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 600; }
.invd-g-add:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.invd-g-add svg { width: 22px; height: 22px; }
.invd-g-empty { aspect-ratio: 1 / 1; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-alt); color: var(--ink-4); display: flex; align-items: center; justify-content: center; }
.invd-g-empty svg { width: 40px; height: 40px; }
.invd-media-selbar { display: flex; align-items: center; }
.invd-sel-del { height: 30px; padding: 0 12px; border: 1px solid var(--pill-red-bd); border-radius: 8px; background: var(--pill-red-bg); color: var(--danger); font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: inherit; }
.invd-sel-del:hover { background: var(--danger); color: #fff; border-color: var(--danger); }

.invd-presets { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 14px; }
.invd-preset { height: 30px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface); color: var(--ink-1); font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; font-variant-numeric: tabular-nums; }
.invd-preset:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.invd-presets-sep { font-size: 12px; color: var(--ink-3); margin-left: 4px; }
.invd-range-in { width: 52px; height: 32px; text-align: center; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; font-weight: 700; font-family: inherit; background: var(--surface); padding: 0; color: var(--ink-1); }
.invd-range-in:focus { outline: 0; border-color: var(--accent); }
.invd-range-dash { color: var(--ink-4); font-weight: 700; }
.invd-range-gen { height: 32px; padding: 0 12px; border: 0; border-radius: 8px; background: var(--brand); color: #fff; font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: inherit; }
.invd-range-gen:hover { background: var(--brand-hover); }
.invd-var-table { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.invd-var-thead { display: grid; grid-template-columns: 1fr 150px 36px; gap: 12px; align-items: center; padding: 9px 14px; background: var(--surface-alt); border-bottom: 1px solid var(--border); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); }
.invd-var { display: grid; grid-template-columns: 1fr 150px 36px; gap: 12px; align-items: center; padding: 8px 14px; border-bottom: 1px solid #eef0f3; }
.invd-var:last-child { border-bottom: 0; }
.invd-var-size { height: 38px; border: 1px solid var(--border); border-radius: 8px; padding: 0 12px; font-size: 14px; font-weight: 700; font-family: inherit; background: var(--surface); color: var(--ink-1); max-width: 120px; }
.invd-var-size:focus { outline: 0; border-color: var(--accent); }
.invd-var-stepper { display: grid; grid-template-columns: 32px 1fr 32px; align-items: stretch; height: 38px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--surface); }
.invd-var-stepper:focus-within { border-color: var(--accent); }
.invd-var-step { border: 0; background: var(--surface-alt); color: var(--ink-1); font-size: 18px; font-weight: 700; cursor: pointer; line-height: 1; padding: 0; }
.invd-var-step:hover { background: #ececec; }
.invd-var-qty { width: 100%; min-width: 0; height: 100%; border: 0; border-left: 1px solid var(--border); border-right: 1px solid var(--border); text-align: center; font-size: 15px; font-weight: 700; font-family: inherit; background: transparent; color: var(--ink-1); -moz-appearance: textfield; padding: 0; }
.invd-var-qty:focus { outline: 0; }
.invd-var-qty::-webkit-outer-spin-button, .invd-var-qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.invd-var-rm { width: 30px; height: 30px; border: 0; border-radius: 7px; background: transparent; color: var(--ink-3); font-size: 18px; line-height: 1; cursor: pointer; padding: 0; }
.invd-var-rm:hover { background: var(--pill-red-bg); color: var(--danger); }
.invd-var-empty { padding: 18px 14px; text-align: center; color: var(--ink-3); font-size: 13px; }
.invd-var-add { margin-top: 12px; width: 100%; height: 38px; border: 1px dashed var(--border-strong); border-radius: 8px; background: transparent; font-size: 13px; font-weight: 600; color: var(--ink-2); cursor: pointer; font-family: inherit; }
.invd-var-add:hover { background: var(--surface-alt); color: var(--ink-1); }
.invd-var-total { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.invd-oversell-row { margin-top: 0; }
@media (max-width: 620px) {
  .invd-var-thead, .invd-var { grid-template-columns: 1fr 130px 32px; gap: 8px; }
  .invd-g-item:first-child { grid-column: auto; grid-row: auto; }
}
.inv-c-price { font-weight: 600; color: var(--ink-1); }
.inv-cur { font-size: 11px; color: var(--ink-3); font-weight: 500; margin-left: 3px; }
.inv-c-value { font-weight: 600; color: var(--ink-2); }

/* Row action buttons — quiet at rest, revealed on hover (pointer devices only) */
.inv-actions { white-space: nowrap; text-align: right; width: 84px; }
.inv-act {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: 7px;
  background: transparent; color: var(--ink-3);
  cursor: pointer; transition: background .12s, color .12s, border-color .12s;
}
.inv-act + .inv-act { margin-left: 2px; }
.inv-act svg { width: 15px; height: 15px; }
.inv-act:hover { background: var(--surface-alt); color: var(--ink-1); border-color: var(--border); }
.inv-act-danger:hover { background: var(--pill-red-bg); color: var(--danger); border-color: var(--pill-red-bd); }
@media (hover: hover) {
  .inv-table tbody tr .inv-actions { opacity: 0; transition: opacity .12s; }
  .inv-table tbody tr:hover .inv-actions,
  .inv-table tbody tr:focus-within .inv-actions { opacity: 1; }
}

.sp-row-checkbox {
  width: 16px; height: 16px;
  border-radius: 4px;
  border: 1.5px solid var(--border-strong);
  background: #fff;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
}
.sp-row-checkbox.checked {
  background: var(--brand);
  border-color: var(--brand);
}
.sp-row-checkbox.checked::after {
  content: "";
  position: absolute;
  left: 3px; top: 1px;
  width: 5px; height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.sp-row-checkbox.indeterminate {
  background: var(--brand);
  border-color: var(--brand);
}
.sp-row-checkbox.indeterminate::after {
  content: "";
  position: absolute;
  left: 3px; right: 3px; top: 50%;
  height: 2px;
  background: #fff;
  transform: translateY(-50%);
}

.sp-ord-id { font-weight: 700; color: var(--ink-1); font-size: 13px; }
.sp-ord-note {
  display: inline-flex; align-items: center;
  width: 14px; height: 14px;
  color: var(--ink-3);
  margin-left: 6px;
  vertical-align: -2px;
}
.sp-ord-note svg { width: 14px; height: 14px; }
.sp-ord-cust { font-weight: 500; color: var(--ink-1); font-size: 13px; }
.sp-ord-sub { color: var(--ink-3); font-size: 11.5px; margin-top: 1px; }

/* Pills */
.sp-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 500;
  border: 1px solid transparent;
  white-space: nowrap;
  line-height: 1.4;
}
.sp-pill .sp-pill-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.85;
}
.sp-pill.amber  { background: var(--pill-amber-bg);  color: var(--pill-amber-text);  border-color: var(--pill-amber-bd); }
.sp-pill.green  { background: var(--pill-green-bg);  color: var(--pill-green-text);  border-color: var(--pill-green-bd); }
.sp-pill.gray   { background: var(--pill-gray-bg);   color: var(--pill-gray-text); }
.sp-pill.orange { background: var(--pill-orange-bg); color: var(--pill-orange-text); border-color: var(--pill-orange-bd); }
.sp-pill.red    { background: var(--pill-red-bg);    color: var(--pill-red-text);    border-color: var(--pill-red-bd); }
.sp-pill.blue   { background: var(--pill-blue-bg);   color: var(--pill-blue-text);   border-color: var(--pill-blue-bd); }
/* ready_to_ship — packed & queued, waiting for the courier. Indigo reads as
   "staged/in-progress", distinct from new (amber) and shipped (blue). */
.sp-pill.purple { background: #eef0fb; color: #4338ca; border-color: #c7ccf5; }

/* Row hover actions */
.sp-ord-items-cell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.sp-row-actions {
  display: inline-flex;
  gap: 6px;
  opacity: 1;
  pointer-events: auto;
  transition: opacity .12s;
}
.sp-row-action {
  width: 30px; height: 30px;
  padding: 0;
  border-radius: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--ink-1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.sp-row-action:hover {
  background: var(--surface-alt);
  border-color: var(--ink-3);
}
.sp-row-action:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  color: var(--ink-3);
}
.sp-row-action svg { width: 16px; height: 16px; stroke-width: 1.7; }
/* "AWB issued" state — green document-with-check so it reads as done at a
   glance and invites a click to open the label PDF. */
.sp-row-action-awb-done {
  color: #15803d;
  border-color: #bbf7d0;
  background: #f0fdf4;
}
.sp-row-action-awb-done:hover {
  background: #dcfce7;
  border-color: #15803d;
}

/* Bulk action bar */
.sp-bulk-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--bar-bg);
  color: #fff;
  position: sticky;
  bottom: 0;
  z-index: 5;
}
/* Top-of-table variant: appears just above the rows when any selection is
   active, so the operator can hit Delete / Export without scrolling. */
.sp-bulk-bar--top {
  bottom: auto;
  top: 0;
  border-bottom: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}
.sp-bulk-bar[hidden] { display: none; }
.sp-bulk-count { font-size: 13px; font-weight: 500; }
.sp-bulk-btn {
  background: transparent;
  border: 1px solid #3a3e47;
  color: #fff;
  padding: 6px 12px;
  border-radius: 6px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.sp-bulk-btn:hover { background: var(--bar-bg-2); }
.sp-bulk-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.sp-bulk-btn:disabled:hover { background: transparent; }
.sp-bulk-danger {
  border-color: #c0413a;
  color: #ffb4ae;
}
.sp-bulk-danger:hover {
  background: #c0413a;
  color: #fff;
  border-color: #c0413a;
}
.sp-bulk-danger:disabled:hover { background: transparent; color: #ffb4ae; }
.sp-bulk-clear { margin-left: auto; }

/* Empty state */
.sp-orders-table tbody td.sp-empty {
  text-align: center;
  color: var(--ink-3);
  padding: 36px 14px;
  font-size: 13px;
}

/* Mobile: stack page header, hide stats sparklines on tiny screens,
   convert table rows to cards (reuses the existing #orders-table mobile
   pattern, applied to the new .sp-orders-table class too). */
@media (max-width: 980px) {
  .sp-page { padding: 16px; }
  .sp-page-head { flex-direction: column; align-items: stretch; gap: 12px; }
  .sp-page-actions { width: 100%; justify-content: flex-start; }
  .sp-btn-primary { margin-left: auto; }
  .sp-stats {
    overflow-x: auto;
    padding: 8px;
  }
  .sp-stats-range {
    flex-shrink: 0;
    min-width: 110px;
  }
  .sp-stat {
    flex-shrink: 0;
    min-width: 180px;
  }
  .sp-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .sp-tabs::-webkit-scrollbar { display: none; }
  .sp-tabs-spacer { display: none; }
}
@media (max-width: 700px) {
  /* Orders-only mobile-card layout; scoped via #orders-table so the
     customers table (which also uses .sp-orders-table) keeps its own
     responsive behavior. */
  #orders-table.sp-orders-table { display: block; background: transparent; }
  #orders-table.sp-orders-table thead { display: none; }
  #orders-table.sp-orders-table tbody { display: block; padding: 12px; }
  #orders-table.sp-orders-table tbody tr {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "sel id    total"
      "sel cust  actions"
      "sel date  date"
      "sel pay   pay"
      "sel ful   ful";
    column-gap: 12px;
    row-gap: 4px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 10px;
    align-items: center;
  }
  #orders-table.sp-orders-table tbody tr td { padding: 0 !important; border: 0 !important; }
  #orders-table.sp-orders-table tbody tr td.sp-col-sel    { grid-area: sel; padding-right: 6px !important; align-self: start; }
  #orders-table.sp-orders-table tbody tr td.sp-col-id     { grid-area: id;     font-size: 16px; font-weight: 700; color: var(--ink-1); }
  #orders-table.sp-orders-table tbody tr td.sp-col-date   { grid-area: date;   font-size: 12px; color: var(--ink-3); }
  #orders-table.sp-orders-table tbody tr td.sp-col-cust   { grid-area: cust; }
  #orders-table.sp-orders-table tbody tr td.sp-col-total  { grid-area: total;  text-align: right; font-weight: 600; }
  #orders-table.sp-orders-table tbody tr td.sp-col-pay    { grid-area: pay; padding-top: 6px !important; }
  #orders-table.sp-orders-table tbody tr td.sp-col-ful    { grid-area: ful; padding-top: 2px !important; padding-bottom: 4px !important; }
  #orders-table.sp-orders-table tbody tr td.sp-col-items  { grid-area: actions; align-self: start; text-align: right; }
  #orders-table .sp-row-actions { opacity: 1; pointer-events: auto; }
  .sp-bulk-bar { flex-wrap: wrap; gap: 6px; padding: 10px; }
  .sp-bulk-clear { margin-left: 0; }
}
@media (max-width: 480px) {
  .sp-spark { display: none; }
}

/* ======================================================================
   New Order modal v2 — Shopify-style two-column layout
   ====================================================================== */

.order-modal-body--v2 {
  width: min(1200px, 96vw);
  max-width: 96vw;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  padding: 20px 24px;
}

.order-v2-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 20px;
  flex: 1;
  min-height: 0;
  overflow: auto;
}

.order-v2-main {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}

.order-v2-sidebar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  background: #f7f8fa;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  align-self: start;
}

.order-v2-sidebar h4 {
  margin: 0 0 6px;
  font-size: 14px;
  color: #4b5563;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.order-v2-sidebar h4.order-v2-sidebar-section {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #e5e7eb;
}

.order-v2-sidebar label {
  display: block;
  margin: 0;
  font-size: 13px;
  color: #374151;
}

.order-v2-sidebar label > span {
  display: block;
  margin-bottom: 4px;
}

.order-customer-block,
.order-products-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.order-customer-block h4,
.order-products-block h4 {
  margin: 0 0 4px;
  font-size: 14px;
  color: #4b5563;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.order-customer-combo {
  position: relative;
}

.order-customer-combo > input {
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #fff;
}

.order-customer-combo > input:focus {
  outline: 2px solid #4f46e5;
  outline-offset: -1px;
}

.order-customer-suggestions {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
  z-index: 10;
  max-height: 280px;
  overflow-y: auto;
}

.order-customer-suggestion {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 4px 12px;
  padding: 10px 12px;
  cursor: pointer;
  border-bottom: 1px solid #f3f4f6;
}

.order-customer-suggestion:last-child {
  border-bottom: none;
}

.order-customer-suggestion:hover,
.order-customer-suggestion.active {
  background: #f5f3ff;
}

.order-customer-suggestion-name {
  font-weight: 600;
  font-size: 14px;
  color: #111827;
}

.order-customer-suggestion-phone {
  font-size: 12px;
  color: #6b7280;
  grid-column: 1;
}

.order-customer-suggestion-meta {
  grid-row: 1 / span 2;
  grid-column: 2;
  font-size: 12px;
  color: #6b7280;
  text-align: right;
  white-space: nowrap;
}

.order-customer-suggestion-meta .neg {
  color: #b91c1c;
  font-weight: 600;
}

.order-customer-suggestion--add {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #fff;
  font-weight: 600;
  color: #4f46e5;
  border-bottom: 1px solid #e5e7eb;
}

.order-customer-suggestion--add:hover,
.order-customer-suggestion--add.active {
  background: #eef2ff;
}

.order-customer-suggestion--empty {
  color: #6b7280;
  font-style: italic;
  cursor: default;
}

.order-customer-newform {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  margin-top: 6px;
}

.order-customer-newform label {
  display: block;
  font-size: 13px;
  color: #374151;
  margin: 0;
}

.order-customer-newform label > span {
  display: block;
  margin-bottom: 4px;
}

.order-customer-address {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  color: #374151;
}

.order-customer-address > span {
  display: block;
  margin-bottom: 4px;
}

.order-customer-address textarea {
  width: 100%;
  padding: 8px 10px;
  font-size: 14px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  resize: vertical;
  font-family: inherit;
}

.order-customer-card {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: #f5f3ff;
  border: 1px solid #ddd6fe;
  border-radius: 8px;
}

/* `display: flex` above overrides the HTML `hidden` attribute's default
   `display: none`. Restore correct hiding behaviour explicitly. */
.order-customer-combo[hidden],
.order-customer-newform[hidden],
.order-customer-card[hidden] {
  display: none !important;
}

.ord-cust-card-main { min-width: 0; flex: 1; }
.ord-cust-card-name { font-weight: 600; font-size: 15px; color: #111827; }
.ord-cust-card-meta { font-size: 13px; color: #4b5563; margin-top: 2px; }
.ord-cust-card-stats { font-size: 12px; color: #6b7280; margin-top: 2px; }
.ord-cust-card-stats .neg { color: #b91c1c; font-weight: 600; }

.ord-cust-card-change {
  background: none;
  border: none;
  color: #4f46e5;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}

.ord-cust-card-change:hover { text-decoration: underline; }

.order-products-search input {
  width: 100%;
  padding: 8px 12px;
  font-size: 14px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
}

.order-product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
  max-height: 460px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fafafa;
}

.order-product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 6px;
  cursor: pointer;
  transition: transform .08s ease, border-color .08s ease, box-shadow .08s ease;
}

.order-product-card:hover {
  border-color: #a5b4fc;
  box-shadow: 0 2px 8px rgba(79, 70, 229, .12);
  transform: translateY(-1px);
}

.order-product-card.is-oos { opacity: .55; }

.order-product-card-thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: #f3f4f6;
  border-radius: 6px;
}

.order-product-card-thumb-empty {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #f3f4f6;
  border-radius: 6px;
  display: block;
}

.order-product-card-name {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 600;
  color: #111827;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.order-product-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 2px;
  font-size: 11px;
  color: #6b7280;
  gap: 4px;
}

.order-product-card-price {
  font-weight: 600;
  color: #111827;
}

.order-product-card-incart {
  position: absolute;
  top: 6px;
  right: 6px;
  background: #4f46e5;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 10px;
}

.order-cart {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.order-cart-empty {
  padding: 14px;
  text-align: center;
  font-size: 13px;
  color: #6b7280;
  font-style: italic;
}

.order-cart-line {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 8px;
  row-gap: 4px;
  padding: 8px 10px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}

.order-cart-line-thumb {
  grid-row: 1 / span 2;
  width: 32px;
  height: 32px;
  object-fit: cover;
  background: #f3f4f6;
  border-radius: 6px;
}

.order-cart-line-head {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.order-cart-line-name {
  flex: 1 1 auto;
  font-size: 13px;
  font-weight: 600;
  color: #111827;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-cart-line-del {
  flex: 0 0 auto;
  background: none;
  border: none;
  color: #b91c1c;
  font-size: 18px;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
  margin: 0;
  font-family: inherit;
}

.order-cart-line-del:hover { color: #7f1d1d; }

.order-cart-line-row {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  min-width: 0;
}

.order-cart-line-row > * { flex-shrink: 0; }

.order-cart-line-row .order-cart-line-total {
  margin-left: auto;
  font-size: 13px;
  font-weight: 700;
  color: #111827;
  white-space: nowrap;
}

.order-cart-qty {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid #9ca3af;
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
  height: 30px;
}

.order-cart-qty button {
  border: none;
  background: #eef2ff;
  color: #1e293b;
  width: 28px;
  height: 28px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
  padding: 0;
  margin: 0;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
}

.order-cart-qty button:hover { background: #c7d2fe; }
.order-cart-qty button:active { background: #a5b4fc; }
.order-cart-qty button:disabled { opacity: .5; cursor: not-allowed; }

.order-cart-qty input {
  width: 40px;
  border: none;
  border-left: 1px solid #d1d5db;
  border-right: 1px solid #d1d5db;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  padding: 0;
  margin: 0;
  height: 28px;
  line-height: 28px;
  background: #fff;
  box-sizing: border-box;
  vertical-align: middle;
  font-family: inherit;
}

/* Kill the native number-input spinners — we provide our own − / + buttons. */
.order-cart-qty input::-webkit-inner-spin-button,
.order-cart-qty input::-webkit-outer-spin-button,
.order-cart-price::-webkit-inner-spin-button,
.order-cart-price::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.order-cart-qty input,
.order-cart-price {
  -moz-appearance: textfield;
}

.order-cart-line .order-cart-price {
  width: 58px;
  min-width: 58px;
  max-width: 58px;
  font-size: 13px;
  text-align: right;
  padding: 0 6px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  height: 30px;
  background: #fff;
  color: #111827;
  box-sizing: border-box;
  font-family: inherit;
  margin: 0;
}

.order-cart-line-total {
  margin-left: auto;
  font-size: 13px;
  font-weight: 700;
  color: #111827;
}

.order-totals-panel {
  padding-top: 8px;
  border-top: 1px solid #e5e7eb;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.order-modal-body--v2 .ord-tot-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: #374151;
}

.order-modal-body--v2 .ord-tot-row.total {
  font-size: 15px;
  font-weight: 700;
  color: #111827;
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px solid #e5e7eb;
}

.order-modal-body--v2 .ord-tot-row.free {
  color: #047857;
  font-weight: 600;
}

.order-modal-body--v2 .ord-tot-row.discount {
  color: #047857;
  font-weight: 600;
}

/* Inline manual-discount control, living in the cart totals between Subtotal
   and Total. The whole field is one clickable box (label "Discount" on the
   left, a single bordered input on the right) that turns green once an amount
   is set. We hard-reset the inner <input> because the global `input` /
   `input:focus` rules (border, 4px radius, 17px font, blue focus border) would
   otherwise paint a second ring inside our box and shove the "RON" suffix off
   the edge — exactly the doubled-ring / overflow seen before. */
.ord-tot-discount-row { align-items: center; min-height: 32px; }
.ord-discount-control { display: inline-flex; align-items: center; gap: 8px; }
.ord-discount-add {
  border: 0; cursor: pointer;
  background: #111827; color: #fff;
  font-family: inherit; font-size: 12.5px; font-weight: 600;
  padding: 8px 13px; border-radius: 9px; line-height: 1;
  white-space: nowrap; min-width: 56px; text-align: center;
  transition: background 130ms ease, transform 70ms ease;
}
.ord-discount-add:hover { background: #000; }
.ord-discount-add:active { transform: translateY(1px); }
.ord-discount-add.applied { background: #047857; }
.ord-discount-field {
  display: inline-flex; align-items: center; gap: 6px;
  width: 124px;
  border: 1px solid #d8dce3; border-radius: 9px;
  padding: 6px 12px; background: #fff;
  cursor: text;
  transition: border-color 130ms ease, box-shadow 130ms ease, background 130ms ease;
}
.ord-discount-field:hover { border-color: #c2c7d0; }
.ord-discount-field:focus-within {
  border-color: #7c3aed; box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.14);
}
.ord-discount-minus { color: #9aa1ab; font-weight: 600; font-size: 14px; line-height: 1; flex-shrink: 0; }
.ord-discount-field input,
.ord-discount-field input:focus {
  flex: 1; min-width: 0;
  border: 0 !important; outline: 0 !important; box-shadow: none !important;
  border-radius: 0 !important; background: transparent !important;
  padding: 0 !important; margin: 0;
  font-family: inherit; font-size: 15px; font-weight: 700;
  text-align: right; color: #111827;
  -moz-appearance: textfield; appearance: textfield;
}
.ord-discount-field input::-webkit-outer-spin-button,
.ord-discount-field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ord-discount-suffix { color: #6b7280; font-size: 12.5px; font-weight: 600; flex-shrink: 0; }
.ord-tot-discount-row.has-value .ord-discount-minus,
.ord-tot-discount-row.has-value .ord-discount-field input { color: #047857; }
.ord-tot-discount-row.has-value .ord-discount-suffix { color: #059669; }
.ord-tot-discount-row.has-value .ord-discount-field {
  border-color: #a7f3d0; background: #f0fdf4;
}

/* `display:flex` on .ord-tot-row outranks the UA's [hidden]{display:none}, so
   the free-shipping row would render as an empty green bar when not applicable.
   Same fix the codebase already uses for .awb-pagination[hidden] etc. */
#ord-totals .ord-tot-row[hidden] { display: none; }

@media (max-width: 900px) {
  .order-v2-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .order-v2-sidebar {
    position: static;
  }
  .order-product-grid {
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  }
}

/* ======================================================================
   Shopify-style Order DETAIL panel
   ====================================================================== */

.ord-detail {
  padding: 18px 24px 32px;
  background: #f5f6f7;
}

.ord-detail-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
}

.ord-detail-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #fff;
  color: #374151;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
}
.ord-detail-back:hover { background: #f3f4f6; }
.ord-detail-back svg { width: 16px; height: 16px; }

.ord-detail-id {
  font-size: 22px;
  font-weight: 700;
  color: #111827;
  margin: 0;
  letter-spacing: -.01em;
}

.ord-detail-pills {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ord-detail-nav {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding-right: 8px;
  border-right: 1px solid #e5e7eb;
}
.ord-detail-nav[hidden] { display: none; }
.ord-detail-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #fff;
  color: #374151;
  cursor: pointer;
}
.ord-detail-nav-btn:hover:not(:disabled) { background: #f3f4f6; }
.ord-detail-nav-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.ord-detail-nav-btn svg { width: 14px; height: 14px; }
.ord-detail-nav-count {
  font-size: 12px;
  color: #6b7280;
  font-variant-numeric: tabular-nums;
  padding: 0 4px;
  min-width: 56px;
  text-align: center;
}

.ord-detail-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
}

.ord-detail-actions .sp-pop {
  top: calc(100% + 4px);
  right: 0;
  min-width: 220px;
}

.ord-detail-meta {
  font-size: 13px;
  color: #6b7280;
  margin: 4px 0 18px 44px;
}

.ord-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 20px;
}

.ord-detail-main, .ord-detail-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.ord-detail-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 16px 18px;
  box-shadow: 0 1px 2px rgba(0,0,0,.03);
}

.ord-detail-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.ord-detail-card-title {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 600;
  color: #111827;
}

.ord-detail-channel {
  font-size: 12px;
  color: #6b7280;
}

/* ===== Order-detail shipping & tracking panel ===== */
.ord-ship { display: flex; flex-direction: column; gap: 14px; }
.ord-ship-block { display: flex; flex-direction: column; gap: 10px; }
.ord-ship-block + .ord-ship-block { padding-top: 14px; border-top: 1px solid #f1f3f5; }

.ord-ship-head { display: flex; align-items: center; gap: 8px; }
.ord-ship-courier { font-size: 13.5px; font-weight: 700; color: #111827; }
.ord-ship-variant { font-size: 11.5px; color: #9aa3af; }
.ord-ship-state {
  margin-left: auto; font-size: 10.5px; font-weight: 600; letter-spacing: .02em;
  padding: 3px 9px; border-radius: 999px; white-space: nowrap;
}
.ord-ship-state.is-delivered { background: #e7f6ec; color: #1c7c43; }
.ord-ship-state.is-transit  { background: #eef2ff; color: #4338ca; }

/* AWB number — copyable chip */
.ord-ship-awb {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 9px 12px; border: 1px solid #e6e8eb; border-radius: 9px;
  background: #f9fafb; cursor: pointer; text-align: left;
  transition: background .15s, border-color .15s;
}
.ord-ship-awb:hover { background: #f1f5f9; border-color: #cbd5e1; }
.ord-ship-awb-label {
  font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #9aa3af;
}
.ord-ship-awb-num {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px; font-weight: 700; color: #111827; letter-spacing: .02em;
  word-break: break-all;
}
.ord-ship-awb-ic { color: #9aa3af; margin-left: auto; flex-shrink: 0; }
.ord-ship-awb:hover .ord-ship-awb-ic { color: #4f46e5; }
.ord-ship-copied { margin-left: auto; font-size: 11px; font-weight: 600; color: #1c7c43; }

/* Two-step timeline: sent → delivered */
.ord-ship-timeline { display: flex; flex-direction: column; gap: 2px; }
.ord-ship-step {
  display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 8px;
  min-height: 26px; position: relative;
}
.ord-ship-step + .ord-ship-step .ord-ship-tick::before {
  content: ""; position: absolute; left: 9px; top: -13px; width: 2px; height: 13px; background: #e5e7eb;
}
.ord-ship-step.done + .ord-ship-step.done .ord-ship-tick::before { background: #34c759; }
.ord-ship-tick { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 999px; position: relative; }
.ord-ship-step.done .ord-ship-tick { background: #34c759; color: #fff; }
.ord-ship-step.pending .ord-ship-tick { color: #cbd5e1; }
.ord-ship-step-label { font-size: 12.5px; font-weight: 600; color: #374151; }
.ord-ship-step.pending .ord-ship-step-label { color: #9aa3af; font-weight: 500; }
.ord-ship-step-date { font-size: 11.5px; color: #6b7280; white-space: nowrap; }
.ord-ship-muted { color: #b6bcc6; }

/* Action buttons */
.ord-ship-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.ord-ship-btn {
  flex: 1 1 auto; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  height: 32px; padding: 0 10px; border: 1px solid #e6e8eb; border-radius: 8px;
  background: #fff; color: #374151; font-size: 12px; font-weight: 600; cursor: pointer;
  text-decoration: none; transition: background .15s, border-color .15s, color .15s;
}
.ord-ship-btn:hover { background: #f7f8fa; border-color: #cbd5e1; }
.ord-ship-btn.primary { background: #4f46e5; border-color: #4f46e5; color: #fff; }
.ord-ship-btn.primary:hover { background: #4338ca; }
.ord-ship-btn.danger { color: #b42318; }
.ord-ship-btn.danger:hover { background: #fef3f2; border-color: #f0a89c; }

/* Invoice sub-block */
.ord-ship-inv-head { display: flex; align-items: center; gap: 7px; color: #111827; }
.ord-ship-inv-head svg { color: #6b7280; flex-shrink: 0; }
.ord-ship-inv-num { font-size: 13px; font-weight: 600; }
.ord-ship-inv-date { font-size: 11.5px; color: #6b7280; }

/* Empty states */
.ord-ship-empty { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ord-ship-empty-txt { font-size: 12.5px; color: #9aa3af; }
.ord-ship-empty .ord-ship-btn { flex: 0 0 auto; }

.ord-detail-items {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ord-detail-item {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid #f3f4f6;
}
.ord-detail-item:first-child { border-top: none; }

.ord-detail-item-thumb {
  width: 48px;
  height: 48px;
  object-fit: cover;
  background: #f3f4f6;
  border-radius: 8px;
  display: block;
}

.ord-detail-item-name {
  font-size: 14px;
  color: #111827;
  font-weight: 500;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ord-detail-item-qtyprice {
  font-size: 13px;
  color: #6b7280;
  white-space: nowrap;
}

.ord-detail-item-total {
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  min-width: 80px;
  text-align: right;
}

.ord-detail-fulfillment-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #f3f4f6;
}
.ord-detail-fulfillment-actions:empty {
  margin: 0;
  padding: 0;
  border: none;
}

.ord-detail-btn-primary {
  background: #1f2937;
  color: #fff;
  border-color: #1f2937;
}
.ord-detail-btn-primary:hover { background: #111827; }

.ord-detail-totals {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ord-detail-totals-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: #374151;
}
.ord-detail-totals-row.total {
  font-size: 15px;
  font-weight: 700;
  color: #111827;
  border-top: 1px solid #e5e7eb;
  padding-top: 8px;
  margin-top: 4px;
}
.ord-detail-totals-row.discount { color: #047857; }
.ord-detail-totals-row.discount strong { color: #047857; }

.ord-detail-comment-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e5e7eb;
}
.ord-detail-comment-form textarea {
  width: 100%;
  resize: vertical;
  min-height: 56px;
  padding: 8px 10px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-family: inherit;
  font-size: 13px;
  color: #111827;
  background: #fff;
  box-sizing: border-box;
}
.ord-detail-comment-form textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 2px var(--accent-soft);
}
.ord-detail-comment-actions {
  display: flex;
  justify-content: flex-end;
}

.ord-detail-timeline {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ord-detail-timeline-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: #4b5563;
  padding: 6px 0;
  border-top: 1px solid #f3f4f6;
}
.ord-detail-timeline-row:first-child { border-top: none; }
.ord-detail-timeline-row .when { color: #6b7280; font-size: 12px; }

.ord-detail-tl-comment {
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  background: var(--accent-soft, #f0fdfa);
  border-radius: 6px;
  border-top: none;
  margin: 4px 0;
}
.ord-detail-tl-comment .ord-detail-tl-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.ord-detail-tl-comment .who {
  font-weight: 600;
  font-size: 12px;
  color: #111827;
}
.ord-detail-tl-comment .ord-detail-tl-text {
  font-size: 13px;
  color: #1f2937;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.ord-detail-empty,
.ord-detail-muted {
  color: #6b7280;
  font-size: 13px;
  font-style: italic;
}

.ord-detail-notes,
.ord-detail-address {
  font-size: 13px;
  color: #374151;
  line-height: 1.5;
  white-space: pre-wrap;
}

.ord-detail-customer { font-size: 13px; color: #374151; }
.ord-detail-cust-name { font-weight: 600; color: #111827; margin-bottom: 4px; }
/* Clickable customer name → opens the customer overlay (back returns to order) */
button.ord-detail-cust-link {
  display: inline-flex; align-items: center; gap: 3px;
  background: none; border: none; padding: 0; margin: 0 0 4px;
  font: inherit; font-weight: 600; color: #0b6b3a; cursor: pointer;
  border-radius: 6px; transition: color .12s ease;
}
button.ord-detail-cust-link:hover { color: #15803d; text-decoration: underline; }
.ord-detail-cust-arrow { opacity: .55; transition: transform .12s ease, opacity .12s ease; }
button.ord-detail-cust-link:hover .ord-detail-cust-arrow { opacity: 1; transform: translateX(2px); }
.ord-detail-cust-count {
  color: var(--brand);
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 6px;
}
.ord-detail-cust-row { color: #4b5563; line-height: 1.5; }

.ord-detail-meta-list { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.ord-detail-meta-row { display: flex; justify-content: space-between; color: #4b5563; }
.ord-detail-meta-row strong { color: #111827; font-weight: 600; }

#ord-detail-more-pop button.danger { color: #b91c1c; }

@media (max-width: 960px) {
  .ord-detail-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ===== Ecolet payouts sub-tab =========================================== */

#awb-payouts.awb-view { padding: 16px 18px 28px; }
.awb-payouts-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 14px;
}
.awb-payouts-head h3 { margin: 0; font-size: 18px; color: #111827; }
.awb-payouts-head-actions { display: flex; gap: 8px; align-items: center; }
.awb-payouts-export { text-decoration: none; display: inline-flex; align-items: center; }

.awb-payouts-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}
.awb-payouts-tile {
  background: #fff; border: 1px solid #e5e7eb; border-radius: 8px;
  padding: 12px 14px;
}
.awb-payouts-tile-label {
  font-size: 12px; color: #6b7280; text-transform: uppercase;
  letter-spacing: 0.03em; margin-bottom: 6px; font-weight: 600;
}
.awb-payouts-tile-value {
  font-size: 18px; font-weight: 600; color: #111827; line-height: 1.2;
}
.awb-payouts-tile-sub { font-size: 12px; color: #6b7280; margin-top: 4px; }
.awb-payouts-tile--last    { border-left: 3px solid #10b981; background: #ecfdf5; }
.awb-payouts-tile--last    .awb-payouts-tile-value { color: #065f46; }
.awb-payouts-tile--pending { border-left: 3px solid #f59e0b; background: #fffbeb; }
.awb-payouts-tile--pending .awb-payouts-tile-value { color: #92400e; }
.awb-payouts-tile--transit { border-left: 3px solid #3b82f6; background: #eff6ff; }
.awb-payouts-tile--transit .awb-payouts-tile-value { color: #1e3a8a; }

.awb-payouts-empty {
  padding: 28px 14px; color: #6b7280; text-align: center; font-size: 14px;
  background: #fff; border: 1px dashed #e5e7eb; border-radius: 8px;
}

.awb-payouts-table {
  width: 100%; border-collapse: collapse; background: #fff;
  border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden;
}
.awb-payouts-table thead th {
  text-align: left; padding: 10px 14px; font-size: 12px;
  color: #6b7280; text-transform: uppercase; letter-spacing: 0.03em;
  background: #f9fafb; border-bottom: 1px solid #e5e7eb; font-weight: 600;
}
.awb-payouts-table tbody td {
  padding: 11px 14px; border-bottom: 1px solid #f1f5f9;
  font-size: 14px; color: #1f2937;
}
.awb-payouts-table tbody tr:last-child td { border-bottom: none; }
.awb-payouts-num { text-align: right; font-variant-numeric: tabular-nums; }
.awb-payouts-total { font-weight: 600; color: #065f46; }
.awb-payouts-actions { text-align: right; width: 1%; white-space: nowrap; }
.awb-payouts-actions .sp-btn-link {
  background: transparent; color: var(--brand, #2563eb); border: none;
  padding: 4px 8px; font-size: 13px; cursor: pointer; border-radius: 4px;
}
.awb-payouts-actions .sp-btn-link:hover { background: rgba(37, 99, 235, 0.08); }

.awb-payouts-detail-row > td { padding: 0 !important; background: #f9fafb; }
.awb-payouts-detail { width: 100%; border-collapse: collapse; margin: 0; }
.awb-payouts-detail thead th {
  background: transparent; padding: 8px 16px 6px;
  font-size: 11px; color: #6b7280; text-transform: uppercase;
  letter-spacing: 0.03em; font-weight: 600;
  border-bottom: 1px solid #e5e7eb;
}
.awb-payouts-detail tbody td {
  padding: 7px 16px; font-size: 13px; color: #374151;
  border-bottom: 1px solid #eef2f7;
}
.awb-payouts-detail tbody tr:last-child td { border-bottom: none; }

/* === DPD direct integration === */
/* Provider picker — two big logo cards. */
.awb-picker-body { max-width: 560px; }
.awb-picker-help { color: #475569; font-size: 13px; margin: 4px 0 16px; line-height: 1.45; }
.awb-picker-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.awb-picker-card {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 22px 12px; border: 1.5px solid #e5e7eb; border-radius: 12px;
  background: #fff; cursor: pointer; transition: border-color .15s, transform .05s;
}
.awb-picker-card:hover { border-color: #6366f1; }
.awb-picker-card:active { transform: scale(0.985); }
.awb-picker-card[disabled] { opacity: 0.45; cursor: not-allowed; }
.awb-picker-logo {
  font-weight: 800; font-size: 22px; letter-spacing: 0.5px;
  padding: 10px 18px; border-radius: 6px; min-width: 120px; text-align: center;
}
.awb-picker-logo-dpd { background: #dc2626; color: #fff; }
.awb-picker-logo-ecolet { background: #16a34a; color: #fff; text-transform: lowercase; }
.awb-picker-label { font-weight: 600; font-size: 14px; color: #1f2937; }
.awb-picker-meta { font-size: 11px; color: #6b7280; }

/* ----- DPD AWB modal -----
   Owns its full layout (no .modal-body / .awb-cols inheritance) so the dense
   grid + sticky head/foot pattern is robust against changes to the Ecolet
   form's CSS. .modal flexbox-centers the inner element; we constrain height
   so the body scrolls internally and the action bar is always visible. */
#dpd-awb-modal { padding: 0; }
.dpd-modal {
  background: #fff; border-radius: 12px;
  width: min(1180px, 96vw); max-height: 92vh;
  display: flex; flex-direction: column;
  box-shadow: 0 24px 64px rgba(15, 23, 42, .28), 0 2px 8px rgba(15, 23, 42, .12);
  overflow: hidden;
}
.dpd-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 16px 22px;
  border-bottom: 1px solid #e5e7eb;
  background: #fff;
  flex-shrink: 0;
}
.dpd-modal-title { display: flex; align-items: center; gap: 14px; min-width: 0; }
.dpd-modal-title h3 {
  margin: 0; font-size: 18px; font-weight: 600; color: #0f172a;
  line-height: 1.2;
}
.dpd-modal-sub {
  margin: 2px 0 0; font-size: 12px; color: #64748b;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60ch;
}
.dpd-modal-badge {
  background: #dc2626; color: #fff;
  font-weight: 800; font-size: 13px; letter-spacing: 0.5px;
  padding: 6px 12px; border-radius: 6px; line-height: 1;
}
.dpd-modal-close {
  background: transparent; border: none; padding: 4px 10px;
  font-size: 24px; color: #64748b; cursor: pointer; border-radius: 6px;
  line-height: 1;
}
.dpd-modal-close:hover { background: #f1f5f9; color: #0f172a; }

.dpd-modal-scroll {
  padding: 18px 22px 22px;
  overflow-y: auto; overflow-x: hidden;
  flex: 1 1 auto; min-height: 0;
  background: #f8fafc;
}

/* Two columns: expeditor | destinatar. Below ~960px wrap to single column. */
.dpd-cols {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
@media (max-width: 960px) { .dpd-cols { grid-template-columns: 1fr; } }

.dpd-col, .dpd-shipment {
  background: #fff; border: 1px solid #e5e7eb; border-radius: 10px;
  padding: 14px 16px 16px;
}
.dpd-shipment { margin-top: 16px; }
.dpd-col-head {
  display: flex; align-items: baseline; gap: 10px;
  margin: 0 0 12px;
  border-bottom: 1px solid #f1f5f9;
  padding-bottom: 10px;
}
.dpd-col-head h4 {
  margin: 0; font-size: 13px; font-weight: 700; color: #0f172a;
  letter-spacing: 0.05em; text-transform: uppercase;
}
.dpd-col-tag {
  font-size: 11px; color: #94a3b8; font-style: italic;
}

/* 6-col field grid: 1of3 = 2 cols, 2of3 = 4 cols, full = 6 cols. */
.dpd-grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px 12px;
}
.dpd-grid label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 11px; font-weight: 500; color: #64748b;
  letter-spacing: 0.02em;
  margin: 0;  /* override .modal-body label */
}
.dpd-grid label > span {
  text-transform: uppercase; font-size: 10.5px; letter-spacing: 0.06em;
}
.dpd-grid input,
.dpd-shipment-grid input,
.dpd-shipment-grid select,
.dpd-modal select {
  width: 100%;
  padding: 8px 10px;
  font-size: 13.5px; font-family: inherit; color: #0f172a;
  border: 1px solid #d1d5db; border-radius: 6px;
  background: #fff;
  margin-top: 0;  /* override .modal-body input */
  box-sizing: border-box;
}
.dpd-grid input:focus,
.dpd-shipment-grid input:focus,
.dpd-shipment-grid select:focus,
.dpd-modal select:focus {
  outline: none;
  border-color: #dc2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}
.dpd-grid input::placeholder,
.dpd-shipment-grid input::placeholder { color: #cbd5e1; }

.dpd-full  { grid-column: 1 / -1; }
.dpd-2of3  { grid-column: span 4; }
.dpd-1of3  { grid-column: span 2; }

/* Required-field asterisk on the label span. */
.dpd-req > span::after {
  content: " *"; color: #dc2626; font-weight: 700;
}

/* Locality / street typeahead — anchored to the label so the dropdown
   floats just below the input. */
.dpd-typeahead { position: relative; }
.dpd-suggest {
  position: absolute; top: 100%; left: 0; right: 0; margin-top: 2px;
  max-height: 260px; overflow-y: auto;
  background: #fff; border: 1px solid #d1d5db; border-radius: 6px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
  z-index: 20;
}
.dpd-suggest div {
  padding: 8px 10px; cursor: pointer; font-size: 13px; color: #0f172a;
  border-bottom: 1px solid #f1f5f9;
}
.dpd-suggest div:last-child { border-bottom: none; }
.dpd-suggest div:hover { background: #fef2f2; }
.dpd-suggest .muted { color: #94a3b8; font-size: 11px; margin-left: 6px; }

/* Shipment row: 6-col grid where most fields are 1 col wide but service +
   contents/ref get more room. */
.dpd-shipment-grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px 12px;
}
.dpd-shipment-grid label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 11px; font-weight: 500; color: #64748b;
  margin: 0;
}
.dpd-shipment-grid label > span {
  text-transform: uppercase; font-size: 10.5px; letter-spacing: 0.06em;
}
.dpd-fld-2 { grid-column: span 2; }
.dpd-fld-3 { grid-column: span 3; }

/* Helper text under fields (e.g. payer-mode explainer). */
.dpd-fld-hint {
  font-size: 11px; color: #94a3b8; font-style: italic;
  text-transform: none; letter-spacing: 0; line-height: 1.35;
  margin-top: 2px;
}
.dpd-fld-hint.warn { color: #b45309; font-style: normal; font-weight: 500; }

/* Live shipping-cost preview block. */
.dpd-quote {
  margin-top: 14px;
  padding: 12px 14px;
  background: #f0f9ff; border: 1px solid #bae6fd; border-radius: 8px;
}
.dpd-quote-row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px;
}
.dpd-quote-label {
  font-size: 12px; font-weight: 600; color: #0369a1;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.dpd-quote-value {
  font-size: 22px; font-weight: 700; color: #0c4a6e; font-variant-numeric: tabular-nums;
}
.dpd-quote-meta {
  margin-top: 4px;
  font-size: 11.5px; color: #475569; line-height: 1.45;
}
.dpd-quote-pending {
  background: #f8fafc; border-color: #e2e8f0; color: #64748b;
  font-size: 12px; font-style: italic;
}
.dpd-quote-error {
  background: #fef2f2; border-color: #fecaca; color: #b91c1c;
  font-size: 12.5px;
}

/* Sticky footer. */
.dpd-modal-foot {
  border-top: 1px solid #e5e7eb;
  padding: 12px 22px;
  background: #fff;
  flex-shrink: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.dpd-modal-foot-actions {
  display: flex; justify-content: flex-end; gap: 10px;
}
.dpd-modal-err {
  background: #fef2f2; color: #b91c1c;
  border: 1px solid #fecaca; border-radius: 6px;
  padding: 8px 10px; font-size: 13px;
}
.dpd-btn {
  padding: 10px 18px; border-radius: 8px; cursor: pointer;
  font-size: 13.5px; font-weight: 600; font-family: inherit;
  border: 1px solid transparent; transition: background .12s, transform .06s;
}
.dpd-btn:active { transform: translateY(1px); }
.dpd-btn-ghost {
  background: #fff; color: #475569; border-color: #d1d5db;
}
.dpd-btn-ghost:hover { background: #f8fafc; }
.dpd-btn-primary {
  background: #dc2626; color: #fff;
}
.dpd-btn-primary:hover:not(:disabled) { background: #b91c1c; }
.dpd-btn-primary:disabled { opacity: 0.65; cursor: progress; }

/* Provider chip in the AWB orders table. */
.awb-provider-chip {
  display: inline-block; padding: 2px 7px; border-radius: 4px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.3px;
}
.awb-provider-chip-dpd { background: #fee2e2; color: #b91c1c; }
.awb-provider-chip-ecolet { background: #dcfce7; color: #166534; }

/* ============================================================
   Invoice confirmation modal — premium review step
   ============================================================ */
.inv-confirm-modal {
  background: rgba(18, 20, 26, 0.55);
  -webkit-backdrop-filter: blur(6px) saturate(115%);
  backdrop-filter: blur(6px) saturate(115%);
}
.inv-confirm-card {
  position: relative;
  width: min(460px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.6);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.8) inset,
    0 18px 50px -12px rgba(16, 24, 40, 0.45),
    0 6px 18px -8px rgba(16, 24, 40, 0.35);
  overflow: hidden;
  animation: invConfirmIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes invConfirmIn {
  from { opacity: 0; transform: translateY(8px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.inv-confirm-x {
  position: absolute;
  top: 16px; right: 16px;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border: none; border-radius: 9px;
  background: transparent; color: var(--ink-4, #9aa0a6);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.inv-confirm-x:hover { background: #f1f3f5; color: var(--ink-2, #3c4043); }

.inv-confirm-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 24px 24px 18px;
}
.inv-confirm-mark {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 13px;
  color: #fff;
  background: linear-gradient(140deg, var(--accent-2, #14a0ac), var(--accent, #0e7c86));
  box-shadow: 0 6px 14px -4px rgba(14, 124, 134, 0.5);
}
.inv-confirm-titles { min-width: 0; }
.inv-confirm-title {
  margin: 0;
  font-size: 19px;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--ink-1, #1a1d24);
}
.inv-confirm-subtitle {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--ink-4, #80868b);
}

.inv-confirm-body {
  padding: 0 24px 4px;
  overflow-y: auto;
}
.inv-confirm-order {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  background: linear-gradient(180deg, #f8fafb, #f3f5f7);
  border: 1px solid var(--border, #e6e8eb);
}
.inv-confirm-client-name {
  font-size: 16px;
  font-weight: 620;
  color: var(--ink-1, #1a1d24);
  line-height: 1.25;
}
.inv-confirm-client-sub {
  margin-top: 3px;
  font-size: 12.5px;
  color: var(--ink-4, #80868b);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.inv-confirm-pay {
  display: inline-flex; align-items: center;
  padding: 1px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 600;
  background: var(--pill-amber-bg, #fde9c0); color: var(--pill-amber-text, #7a5300);
}
.inv-confirm-ordno {
  flex: 0 0 auto;
  font-size: 14px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--accent, #0e7c86);
  background: var(--accent-soft, rgba(14,124,134,0.10));
  padding: 6px 11px; border-radius: 10px;
}

.inv-confirm-section-label {
  margin: 18px 2px 8px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-4, #9aa0a6);
}
.inv-confirm-items {
  display: flex; flex-direction: column;
  border: 1px solid var(--border, #e6e8eb);
  border-radius: 14px;
  overflow: hidden;
}
.inv-confirm-item {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px;
}
.inv-confirm-item + .inv-confirm-item { border-top: 1px solid var(--border, #eef0f2); }
.inv-confirm-thumb {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  border-radius: 9px; object-fit: cover;
  background: #f1f3f5;
  border: 1px solid var(--border, #e6e8eb);
}
.inv-confirm-thumb-empty {
  display: grid; place-items: center;
  color: var(--ink-5, #b9bec4);
}
.inv-confirm-item-main { flex: 1 1 auto; min-width: 0; }
.inv-confirm-item-name {
  font-size: 14px; font-weight: 560;
  color: var(--ink-1, #2a2f38);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.inv-confirm-item-qty {
  margin-top: 2px;
  font-size: 12px; color: var(--ink-4, #80868b);
  font-variant-numeric: tabular-nums;
}
.inv-confirm-item-total {
  flex: 0 0 auto;
  font-size: 14px; font-weight: 620;
  font-variant-numeric: tabular-nums;
  color: var(--ink-1, #1a1d24);
}

.inv-confirm-totals {
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 14px;
  background: #f8fafb;
  border: 1px solid var(--border, #e6e8eb);
}
.inv-confirm-totals-row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 13.5px; color: var(--ink-3, #5f6368);
  padding: 3px 0;
}
.inv-confirm-totals-row span:last-child { font-variant-numeric: tabular-nums; }
.inv-confirm-totals-row.grand {
  margin-top: 6px; padding-top: 10px;
  border-top: 1px dashed var(--border-strong, #d4d8dd);
  font-size: 16px; font-weight: 700; color: var(--ink-1, #1a1d24);
}
.inv-confirm-note {
  display: flex; align-items: center; gap: 8px;
  margin: 14px 2px 2px;
  font-size: 12px; color: var(--ink-4, #80868b);
  line-height: 1.4;
}

.inv-confirm-foot {
  display: flex; gap: 12px;
  padding: 18px 24px 22px;
  margin-top: 6px;
  border-top: 1px solid var(--border, #eef0f2);
  background: linear-gradient(180deg, rgba(248,250,251,0), #f8fafb);
}
.inv-confirm-btn {
  flex: 1 1 0;
  height: 46px;
  border-radius: 12px;
  font-size: 14.5px; font-weight: 620;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: transform 0.12s ease, box-shadow 0.15s ease, background 0.15s ease, filter 0.15s;
}
.inv-confirm-btn:active { transform: translateY(1px); }
.inv-confirm-cancel {
  flex: 0 0 38%;
  border: 1px solid var(--pill-red-bd, #f0a89c);
  background: #fff;
  color: var(--danger, #8a1b04);
}
.inv-confirm-cancel:hover { background: var(--pill-red-bg, #fbd5cd); }
.inv-confirm-go {
  border: none;
  color: #fff;
  background: linear-gradient(135deg, #1aa86a, var(--success, #0c5132));
  box-shadow: 0 8px 18px -6px rgba(12, 81, 50, 0.6);
}
.inv-confirm-go:hover { filter: brightness(1.05); box-shadow: 0 10px 22px -6px rgba(12, 81, 50, 0.7); }
.inv-confirm-go:disabled { filter: grayscale(0.3) brightness(0.95); cursor: progress; box-shadow: none; }
.inv-confirm-go-spin {
  width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,0.45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: invSpin 0.7s linear infinite;
}
@keyframes invSpin { to { transform: rotate(360deg); } }

/* Invoice actions modal — preview / download / print / delete */
.inv-act-views { padding: 6px 22px 22px; }
.inv-act-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.inv-act-tile {
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  padding: 18px 8px 14px;
  border: 1px solid var(--border, #e6e8eb);
  border-radius: 14px;
  background: #fff;
  color: var(--ink-2, #2a2f38);
  font-size: 13px; font-weight: 560;
  cursor: pointer;
  transition: transform 0.12s, border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.inv-act-tile:hover {
  border-color: var(--accent, #0e7c86);
  background: var(--accent-soft, rgba(14,124,134,0.08));
  box-shadow: 0 6px 16px -8px rgba(14,124,134,0.5);
  transform: translateY(-1px);
}
.inv-act-tile:active { transform: translateY(0); }
.inv-act-ico {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 11px;
  color: var(--accent, #0e7c86);
  background: var(--accent-soft, rgba(14,124,134,0.10));
}
.inv-act-ico svg { width: 20px; height: 20px; }

.inv-act-delete {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%;
  margin-top: 12px;
  height: 44px;
  border: 1px solid var(--pill-red-bd, #f0a89c);
  border-radius: 12px;
  background: #fff;
  color: var(--danger, #8a1b04);
  font-size: 14px; font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s;
}
.inv-act-delete:hover { background: var(--pill-red-bg, #fbd5cd); }

/* AWB actions modal: Preview + Tracking tiles side by side. When tracking is
   unavailable the track tile is [hidden] and the lone Preview spans the row. */
.awb-actions-modal .inv-act-grid { grid-template-columns: 1fr 1fr; }
.awb-actions-modal .inv-act-grid:has(.inv-act-tile[hidden]) { grid-template-columns: 1fr; }
.awb-actions-modal .inv-act-tile { flex-direction: row; justify-content: center; padding: 14px 12px; }
.awb-actions-modal .inv-act-ico { width: 32px; height: 32px; }

/* AWB code card — the tracking number, courier-branded, with a copy button. */
.awb-act-code {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 16px 0 4px;
  padding: 12px 14px;
  border: 1px solid var(--border, #e6e8eb);
  border-radius: 12px;
  background: var(--accent-soft, rgba(14,124,134,0.06));
}
.awb-act-code-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.awb-act-code-label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink-3, #6b7280);
}
.awb-act-code-num {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 17px; font-weight: 700; color: var(--ink-1, #111827);
  letter-spacing: 0.02em; word-break: break-all;
}
.awb-act-copy {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  height: 34px; padding: 0 12px;
  border: 1px solid var(--border, #e6e8eb); border-radius: 9px;
  background: #fff; color: var(--accent, #0e7c86);
  font-size: 12.5px; font-weight: 600; cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.awb-act-copy:hover { background: var(--accent-soft, rgba(14,124,134,0.10)); border-color: var(--accent, #0e7c86); }
.awb-act-copy-done { color: var(--accent, #0e7c86); }

/* Delete-confirm sub-view: hidden until the modal gets .confirming */
.inv-act-confirm { display: none; padding: 4px 0 0; }
.inv-actions-modal.confirming .inv-act-views { display: none; }
.inv-actions-modal.confirming .inv-act-confirm { display: block; }
.inv-act-confirm-warn {
  display: flex; gap: 12px; align-items: flex-start;
  margin: 6px 22px 4px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--pill-red-bg, #fbd5cd);
  border: 1px solid var(--pill-red-bd, #f0a89c);
}
.inv-act-warn-ico { flex: 0 0 auto; color: var(--danger, #8a1b04); margin-top: 1px; }
.inv-act-confirm-warn p {
  margin: 0;
  font-size: 13.5px; line-height: 1.45;
  color: #6b1303;
}
.inv-act-del-go {
  border: none; color: #fff;
  background: linear-gradient(135deg, #c0392b, var(--danger, #8a1b04));
  box-shadow: 0 8px 18px -6px rgba(138, 27, 4, 0.55);
}
.inv-act-del-go:hover { filter: brightness(1.06); }
.inv-act-del-go:disabled { filter: grayscale(0.2) brightness(0.96); cursor: progress; box-shadow: none; }
.inv-act-spin {
  width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,0.45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: invSpin 0.7s linear infinite;
}

/* ============================================================
   Bulk "Issue AWB + Invoices" wizard
   ============================================================ */
.bulk-modal { z-index: 120; }
.bulk-card {
  background: #fff;
  border-radius: 18px;
  width: min(960px, 96vw);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 70px rgba(16, 24, 40, .28);
  position: relative;
  overflow: hidden;
}
.bulk-head {
  padding: 22px 26px 14px;
  border-bottom: 1px solid #eef0f3;
}
.bulk-title {
  margin: 0 0 14px;
  font-size: 19px;
  font-weight: 650;
  letter-spacing: -.01em;
  color: #1a1c1e;
}
.bulk-steps { display: flex; gap: 8px; flex-wrap: wrap; }
.bulk-step {
  font-size: 12.5px;
  font-weight: 550;
  color: #8a9099;
  padding: 5px 12px;
  border-radius: 999px;
  background: #f4f6f8;
  transition: all .15s ease;
}
.bulk-step.active { color: #0b6b3a; background: #e7f6ec; }

.bulk-view { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.bulk-toolbar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 14px 26px; border-bottom: 1px solid #f1f3f5;
}
.bulk-setall-label { font-size: 13px; color: #6b7280; font-weight: 550; }
.bulk-mini {
  border: 1px solid #d7dbe0; background: #fff; color: #374151;
  border-radius: 9px; padding: 6px 12px; font-size: 12.5px; font-weight: 550;
  cursor: pointer; transition: all .12s ease;
}
.bulk-mini:hover { background: #f3f4f6; border-color: #c2c8cf; }
.bulk-mini-ghost { margin-left: auto; color: #0b6b3a; border-color: #cdeed8; }
.bulk-mini-ghost:hover { background: #eafaf0; }

.bulk-table-wrap { overflow: auto; flex: 1; padding: 4px 0; }
.bulk-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.bulk-table thead th {
  position: sticky; top: 0; background: #fbfcfd; z-index: 1;
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: #9098a1; font-weight: 600; padding: 10px 16px; border-bottom: 1px solid #eef0f3;
}
.bulk-table .bulk-th-kg { width: 64px; }
.bulk-table tbody td { padding: 11px 16px; border-bottom: 1px solid #f3f5f7; vertical-align: top; }
.bulk-table tbody tr:hover { background: #fcfdfe; }
.bulk-loading { padding: 36px 16px; text-align: center; color: #8a9099; font-size: 13.5px; }
.bulk-td-order { font-weight: 650; color: #1a1c1e; white-space: nowrap; }
.bulk-td-client { color: #374151; }
.bulk-td-phone { font-size: 11.5px; color: #9aa0a8; margin-top: 2px; }
.bulk-td-kg { width: 64px; }
.bulk-kg-input {
  width: 52px; border: 1px solid #d7dbe0; border-radius: 8px;
  padding: 5px 6px; font-size: 13px; text-align: center;
}

.bulk-addr-ok { display: flex; align-items: center; gap: 6px; color: #1a1c1e; }
.bulk-addr-street { font-size: 11.5px; color: #9aa0a8; margin-top: 2px; padding-left: 24px; }
.bulk-addr-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%; font-size: 11px; font-weight: 700; flex: none;
}
.bulk-addr-badge.ok { background: #e7f6ec; color: #0b8a44; }
.bulk-addr-badge.warn { background: #fff1e6; color: #c2410c; }
.bulk-addr-fix { display: flex; align-items: center; gap: 6px; position: relative; }
.bulk-loc-input {
  flex: 1; min-width: 150px; border: 1px solid #f0b58a; border-radius: 8px;
  padding: 6px 9px; font-size: 12.5px; background: #fffaf6;
}
.bulk-addr-hint { font-size: 11px; color: #c2410c; margin-top: 3px; padding-left: 24px; }
.bulk-loc-sug {
  position: absolute; top: 100%; left: 24px; right: 0; z-index: 5;
  background: #fff; border: 1px solid #e3e6ea; border-radius: 10px; margin-top: 4px;
  max-height: 220px; overflow: auto; box-shadow: 0 12px 30px rgba(16, 24, 40, .14);
}
.bulk-loc-sug div { padding: 8px 11px; font-size: 12.5px; cursor: pointer; }
.bulk-loc-sug div:hover { background: #f3f9f5; }
.bulk-loc-sug .muted { color: #9aa0a8; font-size: 11px; }

.bulk-courier-set { display: flex; gap: 8px; flex-wrap: wrap; }
.bulk-courier {
  display: flex; flex-direction: column; gap: 1px; align-items: flex-start;
  border: 1.5px solid #e1e4e8; background: #fff; border-radius: 10px;
  padding: 6px 12px; cursor: pointer; transition: all .12s ease; min-width: 92px;
}
.bulk-courier:hover { border-color: #b9c7bd; }
.bulk-courier.selected { border-color: #16a34a; background: #f0fdf4; box-shadow: 0 0 0 2px #dcfce7; }
.bulk-courier-name { font-size: 11.5px; font-weight: 600; color: #4b5563; }
.bulk-courier-price { font-size: 13.5px; font-weight: 650; color: #1a1c1e; }
.bulk-courier.selected .bulk-courier-price { color: #0b6b3a; }
.bulk-cheap { color: #f59e0b; }
.bulk-courier-na {
  color: #b0b6bd; border-style: dashed; cursor: default; background: #fafbfc;
  flex-direction: row; align-items: center; font-size: 12px; font-weight: 550;
}
.bulk-courier-na:hover { border-color: #e1e4e8; }

.bulk-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 16px 26px; border-top: 1px solid #eef0f3; background: #fbfcfd;
}
.bulk-total { font-size: 13.5px; color: #6b7280; }
.bulk-total strong { color: #1a1c1e; font-size: 15px; }
.bulk-foot-btns { display: flex; gap: 10px; }
.bulk-confirm-go {
  background: #16a34a; color: #fff; border: none;
}
.bulk-confirm-go:hover { background: #15803d; }

/* Step 2 */
.bulk-opts, .bulk-print-opts { display: flex; gap: 22px; padding: 18px 26px 6px; }
.bulk-opt { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 550; color: #374151; cursor: pointer; }
.bulk-opt input { width: 17px; height: 17px; accent-color: #16a34a; }
.bulk-issue-summary { padding: 6px 26px 0; color: #6b7280; font-size: 13px; }
.bulk-issue-list { overflow: auto; flex: 1; padding: 10px 26px; display: flex; flex-direction: column; gap: 6px; }
.bulk-issue-row, .bulk-result-row {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 13px; border: 1px solid #f0f2f4; border-radius: 11px; background: #fff;
}
.bulk-issue-ord, .bulk-result-ord { font-size: 13px; font-weight: 550; color: #1a1c1e; flex: 1; min-width: 0; }
.bulk-issue-chips, .bulk-result-docs, .bulk-result-status { display: flex; gap: 6px; flex-wrap: wrap; }
.bulk-chip {
  font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px;
  background: #eef2f6; color: #475569;
}
.bulk-chip.ok { background: #e7f6ec; color: #0b8a44; }
.bulk-chip.err { background: #fdecec; color: #c0392b; }
.bulk-chip.warn { background: #fff1e6; color: #c2410c; }
.bulk-chip.muted { background: #f4f5f7; color: #9aa0a8; }
.bulk-issue-status { display: flex; gap: 6px; }

.bulk-progress { padding: 4px 26px 12px; display: flex; align-items: center; gap: 12px; }
.bulk-progress-bar { flex: 1; height: 7px; background: #eef0f3; border-radius: 999px; overflow: hidden; }
.bulk-progress-bar span { display: block; height: 100%; width: 0; background: #16a34a; transition: width .4s ease; }
.bulk-progress-txt { font-size: 12.5px; color: #6b7280; white-space: nowrap; }

/* Step 3 */
.bulk-done-banner {
  margin: 18px 26px 4px; padding: 12px 16px; border-radius: 12px;
  background: #e7f6ec; color: #0b6b3a; font-weight: 600; font-size: 14px;
}
.bulk-done-banner.has-errors { background: #fff6ed; color: #b45309; }
.bulk-print-note { padding: 0 26px; font-size: 12px; color: #9aa0a8; margin: 2px 0 8px; }
.bulk-result-list { overflow: auto; flex: 1; padding: 6px 26px 12px; display: flex; flex-direction: column; gap: 6px; }
.bulk-doc {
  border: 1px solid #dbe7e0; background: #f4fbf6; color: #0b6b3a;
  border-radius: 8px; padding: 5px 11px; font-size: 12px; font-weight: 600; cursor: pointer;
}
.bulk-doc:hover { background: #e7f6ec; }

@media (max-width: 640px) {
  .bulk-table .bulk-td-phone, .bulk-addr-street { display: none; }
  .bulk-courier-set { flex-direction: column; }
  .bulk-foot { flex-direction: column; align-items: stretch; }
}

/* Underlying courier (logo + name) shown beneath the Ecolet aggregator price */
.bulk-courier { min-width: 116px; }
.bulk-courier-via {
  display: flex; align-items: center; gap: 5px; margin-top: 3px;
  padding-top: 3px; border-top: 1px dashed #e5e7eb; width: 100%;
}
.bulk-via-logo { height: 13px; width: auto; max-width: 40px; object-fit: contain; }
.bulk-via-name { font-size: 10.5px; font-weight: 600; color: #6b7280; letter-spacing: .01em; }
.bulk-courier.selected .bulk-via-name { color: #0b6b3a; }
.bulk-courier.selected .bulk-courier-via { border-top-color: #bbf7d0; }

/* ============================================================
   Premium customer modal (view + edit)
   ============================================================ */
.cust-modal { z-index: 130; }
.cust-modal-card {
  background: #fff; border-radius: 20px; width: min(560px, 95vw);
  max-height: 90vh; overflow: auto; position: relative;
  box-shadow: 0 24px 70px rgba(16, 24, 40, .3);
  padding: 0 0 8px;
}
.cust-modal-x {
  position: absolute; top: 18px; right: 18px; z-index: 3;
  width: 36px; height: 36px; border-radius: 50%; border: none;
  background: rgba(255,255,255,.18); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .12s ease, transform .12s ease;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.28);
}
.cust-modal-x:hover { background: rgba(255,255,255,.34); transform: scale(1.06); }
.cust-modal-x:active { transform: scale(.96); }
.cust-modal-x svg { width: 19px; height: 19px; }

.cust-hero {
  display: flex; align-items: center; gap: 15px;
  /* extra right padding so the Editează button clears the corner X */
  padding: 26px 64px 20px 26px;
  background: linear-gradient(135deg, #0f2e22 0%, #14532d 55%, #166534 100%);
  color: #fff; border-radius: 20px 20px 0 0;
}
.cust-avatar {
  width: 56px; height: 56px; border-radius: 16px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.16); color: #fff;
  font-size: 20px; font-weight: 650; letter-spacing: .02em;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}
.cust-hero-info { flex: 1; min-width: 0; }
.cust-hero-name { margin: 0; font-size: 20px; font-weight: 650; letter-spacing: -.01em; color: #fff; }
.cust-hero-sub { font-size: 12.5px; color: rgba(255,255,255,.72); margin-top: 3px; }
.cust-edit-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.16); color: #fff; border: none;
  border-radius: 10px; padding: 8px 14px; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: background .12s ease; flex: none;
}
.cust-edit-btn:hover { background: rgba(255,255,255,.28); }

.cust-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  padding: 18px 26px 6px;
}
.cust-stat {
  display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
  padding: 12px 14px; border-radius: 13px; background: #f7f9fa; border: 1px solid #eef1f4;
}
.cust-stat-val { font-size: 18px; font-weight: 680; color: #111827; }
.cust-stat-val small { font-size: 11px; font-weight: 600; color: #9aa0a8; }
.cust-stat-lbl { font-size: 11px; color: #8a9099; text-transform: capitalize; }
.cust-stat.neg .cust-stat-val { color: #dc2626; }

.cust-section { padding: 14px 26px; }
.cust-section-title {
  font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  color: #9aa0a8; font-weight: 650; margin-bottom: 10px;
}
.cust-contact { display: flex; flex-direction: column; gap: 2px; }
.cust-contact-row {
  display: flex; align-items: center; gap: 11px; padding: 9px 12px;
  border-radius: 11px; transition: background .12s ease;
}
.cust-contact-row:hover { background: #f7f9fa; }
.cust-contact-ico {
  width: 30px; height: 30px; border-radius: 9px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: #eafaf0; color: #0b6b3a;
}
.cust-contact-val { font-size: 13.5px; color: #1f2937; word-break: break-word; }

.cust-orders-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cust-orders-table thead th {
  text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em;
  color: #9aa0a8; font-weight: 650; padding: 6px 10px; border-bottom: 1px solid #eef0f3;
}
.cust-orders-table thead th.num, .cust-orders-table td.num { text-align: right; }
.cust-orders-table tbody td { padding: 10px; border-bottom: 1px solid #f4f6f7; }
.cust-orders-table tbody tr { cursor: pointer; transition: background .1s ease; }
.cust-orders-table tbody tr:hover { background: #f4fbf6; }
.cust-empty { padding: 22px; text-align: center; color: #9aa0a8; font-size: 13px; }

/* Edit mode */
.cust-hero-edit { background: linear-gradient(135deg, #1e293b 0%, #334155 100%); }
.cust-edit-form { padding: 20px 26px 6px; display: flex; flex-direction: column; gap: 14px; }
.cust-field { display: flex; flex-direction: column; gap: 6px; }
.cust-field-lbl { font-size: 12px; font-weight: 600; color: #6b7280; }
.cust-field input {
  border: 1px solid #d7dbe0; border-radius: 11px; padding: 11px 13px;
  font-size: 14px; color: #111827; transition: border-color .12s ease, box-shadow .12s ease;
}
.cust-field input:focus {
  outline: none; border-color: #16a34a; box-shadow: 0 0 0 3px #dcfce7;
}
.cust-edit-note { font-size: 12px; color: #9aa0a8; margin: 2px 0 0; }
.cust-edit-err {
  background: #fdecec; color: #c0392b; border-radius: 10px;
  padding: 9px 13px; font-size: 12.5px;
}
.cust-edit-actions {
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 16px 26px 22px;
}
.cust-edit-save { background: #16a34a; color: #fff; border: none; }
.cust-edit-save:hover { background: #15803d; }

@media (max-width: 520px) {
  .cust-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ── FOI pickup ("left the warehouse") tick ─────────────────────────── */
.col-pickup { width: 1%; text-align: center; padding-left: 8px; padding-right: 16px; }
th.col-pickup { font-size: 10px; letter-spacing: .04em; color: #94a3b8; font-weight: 600; }
.tx-pickup {
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; position: relative; vertical-align: middle;
}
/* Thin, refined checkbox — 1px ring, soft emerald fill, subtle lift. */
.tx-pickup-box {
  appearance: none; -webkit-appearance: none; margin: 0;
  width: 18px; height: 18px; border-radius: 6px;
  border: 1px solid #d3d8e0; background: #fff;
  cursor: pointer; flex: 0 0 auto; position: relative;
  transition: border-color .14s ease, background-color .14s ease, box-shadow .14s ease;
}
.tx-pickup-box:hover { border-color: #34d399; box-shadow: 0 0 0 3px rgba(16,185,129,.10); }
.tx-pickup-box:checked {
  background: #059669; border-color: #059669;
  box-shadow: 0 1px 2px rgba(5,150,105,.35);
}
.tx-pickup-box:checked::after {
  content: ""; position: absolute; left: 6.2px; top: 3px;
  width: 3.4px; height: 8px; border: solid #fff;
  border-width: 0 1.5px 1.5px 0; border-radius: .5px; transform: rotate(43deg);
}
.tx-pickup-box:focus-visible { outline: none; border-color: #059669; box-shadow: 0 0 0 3px rgba(5,150,105,.18); }
.tx-pickup-box:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }

/* ── FOI sales table layout — tight numeric cluster, roomy name/product ── */
/* Order, the numeric trio and the tick shrink to content; customer & product
   absorb the rest of the now full-width panel. */
#daily-sales .col-order,
#daily-sales .col-tight, #daily-sales .col-pickup,
#daily-entries .col-tight, #daily-exits .col-tight {
  width: 1%; white-space: nowrap;
}
/* Qty · Price · Total glued into a compact right-aligned trio. */
#daily-sales .col-tight, #daily-entries .col-tight, #daily-exits .col-tight {
  text-align: right; padding-left: 6px; padding-right: 6px;
  font-variant-numeric: tabular-nums;
}
#daily-sales .col-tight-first, #daily-entries .col-tight-first, #daily-exits .col-tight-first { padding-left: 12px; }
#daily-sales .col-tight-last, #daily-entries .col-tight-last, #daily-exits .col-tight-last { padding-right: 12px; }
/* Customer + product absorb the space freed by tucking AWB under the order #. */
#daily-sales .col-customer { padding-left: 14px; padding-right: 14px; }
#daily-sales .col-prod, #daily-entries .col-prod, #daily-exits .col-prod {
  padding-left: 14px; padding-right: 14px;
}
#daily-sales td, #daily-sales th { vertical-align: middle; }
#daily-sales td { padding-top: 12px; padding-bottom: 12px; }
#daily-sales .col-order { padding-left: 14px; padding-right: 8px; vertical-align: top; }
/* Order # with the AWB tucked beneath it. */
.tx-order-stack { display: inline-flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.tx-order-stack .tx-orderid { font-weight: 700; color: #0f766e; }
.tx-awb-sub {
  font-size: 11px; color: #97a1ad; white-space: nowrap; letter-spacing: .2px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
/* Customer name with the awaiting-pickup note stacked under it. */
#daily-sales .col-customer { vertical-align: top; }
.tx-cust-stack { display: inline-flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.tx-cust-stack .tx-ordername-cell { font-weight: 600; color: #1f2937; }

/* Awaiting-pickup rows: muted + amber accent so they read as "not done yet". */
.tx-row.pending-pickup { background: #fffdf5; }
.tx-row.pending-pickup td { color: #92760a; }
.tx-row.order-group-start td { border-top: 1px solid #eef1f5; }
.pickup-pending-badge {
  display: inline-block; font-size: 10px; line-height: 1.1;
  color: #b45309; background: #fef3c7; border-radius: 6px;
  padding: 3px 7px; white-space: nowrap; font-weight: 600;
}
.pickup-pending-note { color: #b45309; font-weight: 600; }
.submit-pending-row .val { color: #b45309; font-size: 12.5px; }

/* Order detail pickup chip. */
.ord-pickup-chip {
  display: inline-block; margin-left: 8px; font-size: 11px; font-weight: 600;
  padding: 2px 8px; border-radius: 999px; vertical-align: middle;
}
.ord-pickup-chip.is-done { background: #dcfce7; color: #15803d; }
.ord-pickup-chip.is-pending { background: #fef3c7; color: #b45309; }

/* ── Size exchange (Schimb de mărime) modal ─────────────────────────── */
.exch-body { width: min(560px, 94vw); padding: 24px 26px 20px; }
/* The editable address makes this modal tall — let the OVERLAY scroll (not the
   body), so the typeahead dropdowns inside aren't clipped by an overflow box. */
#exchange-modal.open { align-items: flex-start; overflow-y: auto; padding: 20px 0; }
#exchange-modal .exch-body { margin: auto; }
.exch-body h3 { margin: 0 0 6px; font-size: 18px; font-weight: 700; color: #0f172a; }
.exch-intro { margin: 0 0 16px; font-size: 12.5px; line-height: 1.45; color: #64748b; }
.exch-line {
  display: flex; flex-direction: column; gap: 3px;
  background: #f8fafc; border: 1px solid #eef1f5; border-radius: 10px;
  padding: 11px 14px; margin-bottom: 16px;
}
.exch-line-prod { font-weight: 700; color: #1f2937; font-size: 14px; }
.exch-line-meta { font-size: 12px; color: #94a3b8; }
.exch-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px 14px; }
.exch-field { display: flex; flex-direction: column; gap: 5px; }
.exch-field > span { font-size: 12px; font-weight: 600; color: #475569; }
.exch-field input, .exch-field select {
  border: 1px solid #d6dbe2; border-radius: 9px; padding: 9px 11px;
  font-size: 14px; background: #fff; width: 100%;
}
.exch-field input:focus, .exch-field select:focus {
  outline: none; border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,.14);
}
.exch-hint { font-size: 10.5px; color: #94a3b8; }
.exch-field-full { margin-top: 13px; }
.exch-err {
  margin-top: 14px; background: #fdecec; color: #c0392b;
  border-radius: 9px; padding: 9px 12px; font-size: 12.5px;
  white-space: pre-line;   /* render Ecolet's per-field "•\n•" lists */
}

/* Editable destination address */
.exch-addr {
  margin-top: 16px; padding-top: 15px; border-top: 1px solid #eef1f5;
}
.exch-addr-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 11px; }
.exch-addr-title { font-size: 12.5px; font-weight: 700; color: #334155; }
.exch-addr-hint { font-size: 11px; color: #94a3b8; }
.exch-addr-hint.warn { color: #b45309; font-weight: 600; }
.exch-addr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px 12px; }
.exch-addr-grid label { display: flex; flex-direction: column; gap: 4px; position: static; }
.exch-addr-grid label.awb-typeahead { position: relative; }
.exch-addr-grid label > span { font-size: 11.5px; font-weight: 600; color: #475569; }
.exch-addr-grid input {
  border: 1px solid #d6dbe2; border-radius: 9px; padding: 8px 10px;
  font-size: 13.5px; background: #fff; width: 100%;
}
.exch-addr-grid input:focus {
  outline: none; border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,.14);
}
.exch-addr-grid input:disabled { background: #f3f4f6; color: #6b7280; }
/* A field that still blocks booking (no locality pick / missing postal / street /
   number) — amber outline so the operator sees exactly what to complete. */
.exch-addr-grid input.warn { border-color: #f1be7a; background: #fffaf2; }
.exch-addr-grid input.warn:focus { border-color: #e0a23e; box-shadow: 0 0 0 3px rgba(241,190,122,.28); }
.exch-addr-full { grid-column: 1 / -1; }
.exch-addr-span2 { grid-column: span 2; }
@media (max-width: 480px) {
  .exch-addr-grid { grid-template-columns: 1fr 1fr; }
  .exch-addr-span2 { grid-column: 1 / -1; }
}
.exch-dest {
  margin-top: 14px; background: #eef2ff; color: #4338ca;
  border-radius: 9px; padding: 9px 12px; font-size: 12.5px; font-weight: 600;
}
.exch-body .modal-actions { margin-top: 18px; display: flex; justify-content: flex-end; gap: 10px; }
.exch-body #exch-confirm { background: #4f46e5; color: #fff; border: none; }
.exch-body #exch-confirm:hover { background: #4338ca; }
@media (max-width: 480px) { .exch-grid { grid-template-columns: 1fr; } }

/* FOI Intrări/Ieșiri exchange note + row tint. */
.tx-entry-note { font-size: 10.5px; color: #94a3b8; margin-top: 3px; line-height: 1.2; }
.tx-entry-note.is-exchange { color: #4f46e5; }
.tx-row.is-exchange { background: #f5f5ff; }


/* ---- Online shop per-size stock editor (admin modal) ---- */
.ssz-card{background:#fff;border-radius:16px;width:min(440px,94vw);max-height:90vh;overflow:auto;padding:22px;position:relative;box-shadow:0 20px 60px -20px rgba(0,0,0,.5)}
.ssz-x{position:absolute;top:12px;right:12px;width:38px;height:38px;border:0;background:#f1efec;border-radius:10px;font-size:16px;cursor:pointer}
.ssz-h{margin:0 0 2px;font-size:18px}
.ssz-prod{font-weight:800;font-size:20px;color:var(--accent,#0e7c86);margin-bottom:6px}
.ssz-sub{margin:0 0 14px;color:#6b6b6b;font-size:13.5px;line-height:1.45}
.ssz-headrow{display:grid;grid-template-columns:1fr 1fr 44px;gap:10px;font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:#9a948c;font-weight:700;padding:0 2px 6px}
.ssz-rows{display:flex;flex-direction:column;gap:8px}
.ssz-row{display:grid;grid-template-columns:1fr 1fr 44px;gap:10px;align-items:center}
.ssz-size,.ssz-qty{height:48px;border:1.5px solid #e3ddd4;border-radius:10px;padding:0 12px;font-size:16px;width:100%;font-weight:600;font-family:inherit}
.ssz-size:focus,.ssz-qty:focus{outline:0;border-color:var(--accent,#0e7c86)}
.ssz-rm{height:44px;width:44px;border:0;background:#fbe3e0;color:#c0271a;border-radius:10px;font-size:20px;font-weight:800;cursor:pointer}
.ssz-empty{color:#9a948c;padding:18px 4px;text-align:center;font-size:14px}
.ssz-add{margin-top:12px;width:100%;height:48px;border:1.5px dashed #cfc7bb;background:#fff;border-radius:10px;font-size:15px;font-weight:700;cursor:pointer;color:#444}
.ssz-totalrow{display:flex;justify-content:space-between;align-items:center;margin-top:16px;padding-top:12px;border-top:1px solid #eee;font-size:15px}
.ssz-totalrow strong{font-size:22px}
.ssz-foot{display:flex;gap:10px;margin-top:18px}
.ssz-cancel,.ssz-save{flex:1;height:52px;border-radius:12px;font-size:16px;font-weight:800;cursor:pointer;border:0;font-family:inherit}
.ssz-cancel{background:#f1efec;color:#333}
.ssz-save{background:var(--accent,#0e7c86);color:#fff}
.ssz-save:disabled{opacity:.6;cursor:not-allowed}

/* Quick size-range generator */
.ssz-range{margin:0 0 16px;background:#faf9f7;border:1px solid #eee7dd;border-radius:12px;padding:12px 14px}
.ssz-range-label{display:block;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#9a948c;margin-bottom:8px}
.ssz-range-controls{display:flex;align-items:center;gap:8px}
.ssz-range-in{width:64px;height:44px;text-align:center;border:1.5px solid #e3ddd4;border-radius:10px;font-size:16px;font-weight:700;font-family:inherit;background:#fff}
.ssz-range-in:focus{outline:0;border-color:var(--accent,#0e7c86)}
.ssz-range-dash{color:#b5aea4;font-weight:700}
.ssz-range-btn{flex:1;height:44px;border:0;border-radius:10px;background:#1a1d24;color:#fff;font-size:14px;font-weight:700;cursor:pointer;font-family:inherit}
.ssz-range-btn:hover{background:#2a2f38}

/* Per-size row: − [qty] + stepper */
.ssz-stepper{display:flex;align-items:center;height:48px;border:1.5px solid #e3ddd4;border-radius:10px;overflow:hidden;background:#fff}
.ssz-stepper:focus-within{border-color:var(--accent,#0e7c86)}
.ssz-step{width:42px;height:100%;border:0;background:#f6f4f1;color:#1a1d24;font-size:22px;font-weight:700;cursor:pointer;line-height:1;flex-shrink:0}
.ssz-step:hover{background:#ece8e2}
.ssz-step:active{background:#e2ddd5}
.ssz-stepper .ssz-qty{height:100%;border:0;border-radius:0;text-align:center;font-size:17px;font-weight:700;width:100%;min-width:0;padding:0;font-family:inherit;-moz-appearance:textfield}
.ssz-stepper .ssz-qty:focus{outline:0}
.ssz-stepper .ssz-qty::-webkit-outer-spin-button,
.ssz-stepper .ssz-qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* Continue-selling-when-out-of-stock toggle */
.ssz-oversell{display:flex;align-items:flex-start;gap:12px;margin-top:16px;padding:12px 14px;border:1px solid #eee7dd;border-radius:12px;cursor:pointer}
.ssz-oversell-input{position:absolute;opacity:0;width:0;height:0}
.ssz-oversell-track{flex-shrink:0;width:42px;height:24px;border-radius:999px;background:#d6d1c8;position:relative;transition:background .15s;margin-top:1px}
.ssz-oversell-thumb{position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .15s}
.ssz-oversell-input:checked + .ssz-oversell-track{background:var(--accent,#0e7c86)}
.ssz-oversell-input:checked + .ssz-oversell-track .ssz-oversell-thumb{transform:translateX(18px)}
.ssz-oversell-input:focus-visible + .ssz-oversell-track{box-shadow:0 0 0 3px var(--accent-soft,rgba(14,124,134,.2))}
.ssz-oversell-text{display:flex;flex-direction:column;gap:2px}
.ssz-oversell-title{font-size:14px;font-weight:700;color:#1a1d24}
.ssz-oversell-hint{font-size:12px;color:#8a857d;line-height:1.35}

@media (max-width:600px){.ssz-card{width:100%;height:100%;max-height:100vh;border-radius:0;padding:18px 16px calc(18px + env(safe-area-inset-bottom))}}

/* ============================================================
   Product modal — per-size stock (Sizes section)
   ============================================================ */
.prod-sizes{margin:4px 0;padding:14px;border:1px solid var(--border);border-radius:12px;background:var(--surface-alt)}
.prod-sizes-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:10px}
.prod-sizes-title{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3)}
.prod-sizes-total{font-size:12.5px;font-weight:600;color:var(--ink-2)}
.prod-sizes-total[hidden]{display:none}
.prod-sizes-quick{margin-bottom:12px}
.prod-sizes-range-lbl{font-size:11px;color:var(--ink-3);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.prod-sizes-presets{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.prod-sz-preset{height:34px;padding:0 14px;border:1px solid var(--border-strong);border-radius:999px;background:var(--surface);color:var(--ink-1);font-size:13.5px;font-weight:700;cursor:pointer;font-family:inherit;font-variant-numeric:tabular-nums;transition:background .12s,border-color .12s,color .12s}
.prod-sz-preset:hover{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.prod-sz-preset:active{transform:translateY(0.5px)}
.prod-sizes-range{display:flex;align-items:center;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.prod-sizes-range-custom{font-size:12px;color:var(--ink-3);font-weight:500;width:100%}
#prod-sizes .prod-sizes-in{width:60px;height:38px;text-align:center;border:1px solid var(--border);border-radius:8px;padding:0;font-size:15px;font-weight:700;font-family:inherit;background:var(--surface);color:var(--ink-1)}
#prod-sizes .prod-sizes-in:focus{outline:0;border-color:var(--accent)}
.prod-sizes-dash{color:var(--ink-4);font-weight:700}
.prod-sizes-gen{height:38px;padding:0 14px;border:0;border-radius:8px;background:var(--brand);color:#fff;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit}
.prod-sizes-gen:hover{background:var(--brand-hover)}
.prod-sizes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px}
.prod-sizes-grid:empty{display:none}
.prod-sz-cell{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:8px;display:flex;flex-direction:column;gap:6px;align-items:center}
.prod-sz-size{width:100%;height:28px;text-align:center;border:0;border-bottom:1.5px solid transparent;font-size:15px;font-weight:700;font-family:inherit;background:transparent;color:var(--ink-1)}
.prod-sz-size:focus{outline:0;border-bottom-color:var(--accent)}
/* Grid layout (− | qty | +) so the + can never be clipped by a wide number input. */
.prod-sz-step{display:grid;grid-template-columns:30px 1fr 30px;align-items:stretch;width:100%;height:34px;border:1px solid var(--border);border-radius:8px;overflow:hidden;background:var(--surface)}
.prod-sz-step:focus-within{border-color:var(--accent)}
.prod-sz-btn{border:0;background:var(--surface-alt);color:var(--ink-1);font-size:18px;font-weight:700;cursor:pointer;line-height:1;padding:0;display:flex;align-items:center;justify-content:center}
.prod-sz-btn:hover{background:#ececec}
.prod-sz-btn:active{background:#e2ddd5}
.prod-sz-qty{width:100%;min-width:0;height:100%;border:0;border-left:1px solid var(--border);border-right:1px solid var(--border);text-align:center;font-size:15px;font-weight:700;font-family:inherit;background:transparent;color:var(--ink-1);-moz-appearance:textfield;padding:0}
.prod-sz-qty:focus{outline:0}
.prod-sz-qty::-webkit-outer-spin-button,.prod-sz-qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.prod-sz-rm{position:absolute;top:-7px;right:-7px;width:20px;height:20px;border:0;border-radius:50%;background:var(--ink-3);color:#fff;font-size:13px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.prod-sz-rm:hover{background:var(--danger)}
.prod-sizes-add{margin-top:10px;width:100%;height:38px;border:1px dashed var(--border-strong);border-radius:8px;background:transparent;font-size:13px;font-weight:600;color:var(--ink-2);cursor:pointer;font-family:inherit}
.prod-sizes-add:hover{background:var(--surface);color:var(--ink-1)}
.prod-oversell{display:flex;align-items:flex-start;gap:10px;margin-top:14px;cursor:pointer}
.prod-oversell-input{position:absolute;opacity:0;width:0;height:0}
.prod-oversell-track{flex-shrink:0;width:38px;height:22px;border-radius:999px;background:var(--border-strong);position:relative;transition:background .15s;margin-top:1px}
.prod-oversell-thumb{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.3);transition:transform .15s}
.prod-oversell-input:checked + .prod-oversell-track{background:var(--accent)}
.prod-oversell-input:checked + .prod-oversell-track .prod-oversell-thumb{transform:translateX(16px)}
.prod-oversell-input:focus-visible + .prod-oversell-track{box-shadow:0 0 0 3px var(--accent-soft)}
.prod-oversell-text{display:flex;flex-direction:column;gap:1px}
.prod-oversell-title{font-size:13px;font-weight:600;color:var(--ink-1)}
.prod-oversell-hint{font-size:11.5px;color:var(--ink-3);line-height:1.35}
#prod-qty.is-derived{background:var(--surface-alt);color:var(--ink-2);font-weight:700;cursor:not-allowed}