/* ==========================================================================
   Portal UI polish (additive)
   - Sidebar: grouped look, consistent spacing
   - Emoji hidden, modern icons via CSS mask (no CDN)
   - Tabulator: readable dark skin
   ========================================================================== */

:root{
  --p-panel: rgba(255,255,255,.04);
  --p-border: rgba(255,255,255,.10);
  --p-text: rgba(255,255,255,.92);
  --p-muted: rgba(255,255,255,.65);
  --p-accent-2: rgba(47,107,255,.16);
}

/* ===== Sidebar layout ===== */
.sidebar__nav{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.nav-group, .nav-section{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.nav-group__title, .nav-section__title{
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color: var(--p-muted);
  padding: 0 10px;
  margin-top: 8px;
  opacity:.95;
}
.nav-item{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  padding:8px 10px;
  border-radius:12px;
}
.nav-item:hover{ background: var(--p-panel); }
.nav-item.is-active{
  background: var(--p-accent-2);
  outline: 1px solid rgba(47,107,255,.35);
}

/* Hide emoji spans if template uses them */
.nav-item > span:first-child{ display:none !important; }

/* Add icon via ::before using CSS mask */
.nav-item::before{
  content:"";
  width:18px;
  height:18px;
  flex:0 0 18px;
  background: currentColor;
  opacity:.95;
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-position:center;
  -webkit-mask-size:contain;
  mask-repeat:no-repeat;
  mask-position:center;
  mask-size:contain;
}

/* Minimal icon set as inline SVG masks (no CDN) */
:root{
  --ico-dashboard: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 4h7v7H4V4zm9 0h7v4h-7V4zM4 13h4v7H4v-7zm6 0h10v7H10v-7z'/%3E%3C/svg%3E");
  --ico-inbound: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 7h16v2H4V7zm2 2h12v10H6V9zm5-6h2v4h-2V3zm-2 9 3-3 3 3-1.4 1.4L12 11.3l-1.6 1.6L9 12z'/%3E%3C/svg%3E");
  --ico-outbound: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 7h16v2H4V7zm2 2h12v10H6V9zm5 12h2v-4h-2v4zm-2-5 3 3 3-3-1.4-1.4L12 16.7l-1.6-1.6L9 16z'/%3E%3C/svg%3E");
  --ico-trips: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M5 6h14l2 6v6h-2a3 3 0 1 1-6 0H11a3 3 0 1 1-6 0H3v-6l2-6zm1.4 2-1.1 3H18.7l-1.1-3H6.4zM8 19a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm8 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2z'/%3E%3C/svg%3E");
  --ico-inventory: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M5 5h14v2H5V5zm0 4h14v10H5V9zm3 3h4v2H8v-2zm6-1 4 4-1.4 1.4-2.6-2.6-1.6 1.6L11 14l3-3z'/%3E%3C/svg%3E");
  --ico-sku: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2 4 6v12l8 4 8-4V6l-8-4zm0 2.2 6 3.2-6 3.2-6-3.2 6-3.2zm-6 5.6 6 3.2v6.5L6 16.3V9.8zm12 6.5-6 3.2v-6.5l6-3.2v6.5z'/%3E%3C/svg%3E");
  --ico-items: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 3h10l2 4H5l2-4zm-2 6h14v10H5V9zm3 3h3v2H8v-2zm5 0h3v2h-3v-2z'/%3E%3C/svg%3E");
  --ico-report: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 4h10l4 4v12H4V4zm9 1.5V9h3.5L13 5.5zM7 12h10v2H7v-2zm0 4h10v2H7v-2z'/%3E%3C/svg%3E");
}

/* Map icons to routes by href substring */
.nav-item[href*="/app/receivings"]::before{ -webkit-mask-image: var(--ico-inbound); mask-image: var(--ico-inbound); }
.nav-item[href*="/app/shipments"]::before{ -webkit-mask-image: var(--ico-outbound); mask-image: var(--ico-outbound); }
.nav-item[href*="/app/trips"]::before{ -webkit-mask-image: var(--ico-trips); mask-image: var(--ico-trips); }
.nav-item[href*="/app/cycle-counts"]::before{ -webkit-mask-image: var(--ico-inventory); mask-image: var(--ico-inventory); }
.nav-item[href*="/app/sku"]::before{ -webkit-mask-image: var(--ico-sku); mask-image: var(--ico-sku); }
.nav-item[href*="/app/items"]::before{ -webkit-mask-image: var(--ico-items); mask-image: var(--ico-items); }
.nav-item[href*="/app/reports"]::before{ -webkit-mask-image: var(--ico-report); mask-image: var(--ico-report); }
.nav-item[href="/app/"]::before, .nav-item[href*="dashboard"]::before{ -webkit-mask-image: var(--ico-dashboard); mask-image: var(--ico-dashboard); }

/* ===== Tabulator dark skin ===== */
.tabulator{
  background: rgba(10, 18, 32, .75) !important;
  border: 1px solid var(--p-border) !important;
  border-radius: 14px !important;
  overflow:hidden !important;
  color: var(--p-text) !important;
}
.tabulator .tabulator-header{
  background: rgba(255,255,255,.06) !important;
  border-bottom: 1px solid var(--p-border) !important;
}
.tabulator .tabulator-header .tabulator-col{
  background: transparent !important;
  color: var(--p-muted) !important;
  border-right: 1px solid rgba(255,255,255,.06) !important;
}
.tabulator .tabulator-header .tabulator-col .tabulator-header-filter{
  padding:6px 8px 8px 8px !important;
}
.tabulator .tabulator-header .tabulator-col input,
.tabulator .tabulator-header .tabulator-col select{
  width:100%;
  height:32px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  color: var(--p-text);
  padding: 6px 10px;
  outline:none;
}
.tabulator .tabulator-row{
  background: transparent !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
}
.tabulator .tabulator-row:nth-child(2n){
  background: rgba(255,255,255,.02) !important;
}
.tabulator .tabulator-row.tabulator-selectable:hover{
  background: rgba(47,107,255,.10) !important;
}
.tabulator .tabulator-cell{
  border-right: 1px solid rgba(255,255,255,.04) !important;
  color: var(--p-text) !important;
}
.tabulator .tabulator-footer{
  background: rgba(255,255,255,.04) !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
  color: var(--p-muted) !important;
}

/* ==========================================================================
   Enterprise WMS design code
   Dense, high-contrast operational UI for back-office warehouse work.
   ========================================================================== */

:root{
  --bg: #080b10;
  --panel: #10151d;
  --panel-2: #151b25;
  --surface-raised: #18202b;
  --text: #f1f5f9;
  --muted: #9aa6b2;
  --border: #2a3544;
  --ring: rgba(37, 99, 235, .38);
  --primary: #2f6bff;
  --primary-600: #2457d6;
  --danger: #dc2626;
  --warning: #d97706;
  --success: #059669;
  --radius: 8px;
  --shadow: 0 1px 0 rgba(255,255,255,.03), 0 16px 34px rgba(0,0,0,.28);
}

html{ background: var(--bg); }
body{
  background: var(--bg) !important;
  color: var(--text);
  font-size: 13px;
  letter-spacing: 0;
}

.sidebar{
  background: #0c1118;
  border-right-color: #263140;
  backdrop-filter: none;
}
.sidebar__brand{
  min-height: 52px;
  padding: 12px 14px;
  border-bottom-color: #263140;
}
.brand-badge{
  border-radius: 6px;
  background: #1b2636;
  border-color: #334155;
  box-shadow: none;
}
.brand-title strong{ font-size: 12px; letter-spacing: .05em; }
.brand-title span{ color: #8b98a7; }
.nav-group__title, .nav-section__title{
  color: #7f8b99;
  letter-spacing: .10em;
}
.nav-item{
  min-height: 34px;
  border-radius: 6px;
  color: #d7dee8;
}
.nav-item:hover{
  background: #151c27;
  border-color: #2d3848;
}
.nav-item.is-active{
  background: #17243a;
  border-color: #2f6bff;
  outline: 0;
  box-shadow: inset 3px 0 0 #2f6bff;
}

.topbar{
  min-height: 56px;
  background: #0b1017;
  border-bottom-color: #263140;
  backdrop-filter: none;
  padding: 10px 18px;
}
.content{ padding: 18px; }
.crumbs{ color: #8b98a7; }
.crumbs a{ color: #d7dee8; }
.user-pill{
  border-radius: 8px;
  background: #111821;
  border-color: #2a3544;
  padding: 6px 8px;
}
.avatar{ border-radius: 6px; background: #1d2735; }
.icon-btn{
  border-radius: 6px;
  background: #111821;
  border-color: #2a3544;
}

.card{
  background: var(--panel);
  border-color: var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow);
}
.card__header{
  min-height: 44px;
  padding: 11px 14px;
  background: #121923;
  border-bottom-color: #2a3544;
}
.card__body{ padding: 12px 14px; }
.card__title, .title{
  font-weight: 800;
  letter-spacing: 0;
  color: #f8fafc;
}
.subtitle, .subtle, .muted{ color: var(--muted); }
.h1{ font-size: 22px; letter-spacing: 0; }

.btn{
  min-height: 34px;
  border-radius: 6px;
  border-color: #334155;
  background: #151d28;
  color: #eef3f8;
  padding: 7px 11px;
  font-weight: 700;
  line-height: 1.15;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
.btn:hover{
  background: #1a2431;
  border-color: #4b5f78;
  color: #fff;
}
.btn-primary{
  background: #2457d6;
  border-color: #3670ff;
  color: #fff;
}
.btn-primary:hover{ background: #2f6bff; }
.btn-danger{
  background: #3a1518;
  border-color: #b91c1c;
  color: #fee2e2;
}
.btn-success{
  background: #0f2d24;
  border-color: #059669;
  color: #d1fae5;
}
.btn-warning{
  background: #352511;
  border-color: #d97706;
  color: #ffedd5;
}
.btn-sm{ min-height: 30px; border-radius: 6px; padding: 6px 9px; }
.btn-xs{ min-height: 26px; border-radius: 5px; padding: 4px 7px; }

.input,
.tabulator .tabulator-header .tabulator-col input,
.tabulator .tabulator-header .tabulator-col select{
  border-radius: 6px;
  border-color: #334155;
  background: #0b1119;
  color: #f1f5f9;
}
.input:focus{
  border-color: #2f6bff;
  box-shadow: 0 0 0 3px var(--ring);
}

.badge{
  border-radius: 5px;
  padding: 3px 7px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .01em;
}
.badge-danger, .badge.danger{
  background: rgba(220,38,38,.18);
  border-color: rgba(248,113,113,.55);
  color: #fecaca;
}
.badge-warning, .badge.warn{
  background: rgba(217,119,6,.18);
  border-color: rgba(251,191,36,.55);
  color: #fde68a;
}
.badge-success, .badge.ok{
  background: rgba(5,150,105,.18);
  border-color: rgba(52,211,153,.48);
  color: #bbf7d0;
}
.badge-blue, .badge.blue{
  background: rgba(47,107,255,.18);
  border-color: rgba(96,165,250,.50);
  color: #bfdbfe;
}

.table-wrapper{
  width: 100%;
  overflow: auto;
  border: 1px solid #2a3544;
  border-radius: 8px;
  background: #0c1118;
}
.content table{
  border: 0;
  border-radius: 0;
  font-size: 12px;
}
.content table thead th{
  background: #121923;
  color: #aeb8c5;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.content table th,
.content table td{
  padding: 8px 10px;
  border-bottom-color: #253142;
}
.content table tbody tr td{ background: #0f151e; }
.content table tbody tr:nth-child(2n) td{ background: #111923; }
.content table tbody tr:hover td{ background: #162235; }

.tabulator{
  border-color: #2a3544 !important;
  border-radius: 8px !important;
  background: #0c1118 !important;
}
.tabulator .tabulator-header{
  background: #121923 !important;
  border-bottom-color: #2a3544 !important;
}
.tabulator .tabulator-row,
.tabulator .tabulator-row.tabulator-row-even{
  background: #0f151e !important;
  border-bottom-color: #253142 !important;
}
.tabulator .tabulator-row.tabulator-row-even{ background: #111923 !important; }
.tabulator .tabulator-row:hover{ background: #162235 !important; }
.tabulator .tabulator-cell{
  color: #edf2f7 !important;
  border-right-color: #253142 !important;
}
.tabulator .tabulator-footer{
  background: #121923 !important;
  border-top-color: #2a3544 !important;
}

/* ===== Theme toggle ===== */
.theme-toggle {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid #334155;
  border-radius: 6px;
  background: #151d28;
  color: #eef3f8;
  padding: 5px 9px;
  cursor: pointer;
  font-weight: 800;
  font-size: 12px;
}
.theme-toggle:hover { border-color: #4b5f78; background: #1a2431; }
.theme-toggle__icon {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: linear-gradient(90deg, #f8fafc 0 50%, #111827 50% 100%);
  border: 1px solid currentColor;
}

/* ===== Light theme ===== */
html[data-theme="light"] {
  --bg: #eef2f7;
  --panel: #ffffff;
  --panel-2: #f8fafc;
  --surface-raised: #ffffff;
  --text: #111827;
  --muted: #64748b;
  --border: #cbd5e1;
  --ring: rgba(37, 99, 235, .20);
  --primary: #1d4ed8;
  --primary-600: #1e40af;
  --danger: #b91c1c;
  --warning: #b45309;
  --success: #047857;
  --shadow: 0 1px 2px rgba(15,23,42,.05), 0 14px 28px rgba(15,23,42,.10);
  --p-panel: rgba(15,23,42,.04);
  --p-border: rgba(15,23,42,.12);
  --p-text: #111827;
  --p-muted: #64748b;
  --p-accent-2: rgba(37,99,235,.10);
}

html[data-theme="light"],
html[data-theme="light"] body {
  background: #eef2f7 !important;
  color: #111827;
}

html[data-theme="light"] .sidebar {
  background: #ffffff;
  border-right-color: #cbd5e1;
}
html[data-theme="light"] .sidebar__brand {
  border-bottom-color: #d8e0ea;
}
html[data-theme="light"] .brand-badge {
  background: #e8eef7;
  border-color: #cbd5e1;
  color: #0f172a;
}
html[data-theme="light"] .brand-title strong,
html[data-theme="light"] .crumbs a,
html[data-theme="light"] .nav-item {
  color: #1f2937;
}
html[data-theme="light"] .brand-title span,
html[data-theme="light"] .nav-group__title,
html[data-theme="light"] .nav-section__title,
html[data-theme="light"] .crumbs,
html[data-theme="light"] .subtitle,
html[data-theme="light"] .subtle,
html[data-theme="light"] .muted {
  color: #64748b;
}
html[data-theme="light"] .nav-item:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}
html[data-theme="light"] .nav-item.is-active {
  background: #e8f0ff;
  border-color: #2563eb;
  box-shadow: inset 3px 0 0 #2563eb;
  color: #0f172a;
}
html[data-theme="light"] .topbar {
  background: #ffffff;
  border-bottom-color: #cbd5e1;
}
html[data-theme="light"] .user-pill,
html[data-theme="light"] .icon-btn,
html[data-theme="light"] .theme-toggle {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #1f2937;
}
html[data-theme="light"] .theme-toggle:hover,
html[data-theme="light"] .icon-btn:hover {
  background: #eef2f7;
  border-color: #94a3b8;
}
html[data-theme="light"] .avatar {
  background: #e2e8f0;
  border-color: #cbd5e1;
  color: #0f172a;
}
html[data-theme="light"] .card {
  background: #ffffff;
  border-color: #cbd5e1;
}
html[data-theme="light"] .card__header {
  background: #f8fafc;
  border-bottom-color: #d8e0ea;
}
html[data-theme="light"] .card__title,
html[data-theme="light"] .title,
html[data-theme="light"] .h1 {
  color: #0f172a;
}
html[data-theme="light"] .btn {
  background: #ffffff;
  border-color: #cbd5e1;
  color: #1f2937;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65);
}
html[data-theme="light"] .btn:hover {
  background: #f8fafc;
  border-color: #94a3b8;
  color: #0f172a;
}
html[data-theme="light"] .btn-primary {
  background: #2563eb;
  border-color: #1d4ed8;
  color: #ffffff;
}
html[data-theme="light"] .btn-primary:hover { background: #1d4ed8; color:#fff; }
html[data-theme="light"] .btn-success {
  background: #ecfdf5;
  border-color: #10b981;
  color: #065f46;
}
html[data-theme="light"] .btn-warning {
  background: #fffbeb;
  border-color: #f59e0b;
  color: #92400e;
}
html[data-theme="light"] .btn-danger {
  background: #fef2f2;
  border-color: #ef4444;
  color: #991b1b;
}
html[data-theme="light"] .input,
html[data-theme="light"] .tabulator .tabulator-header .tabulator-col input,
html[data-theme="light"] .tabulator .tabulator-header .tabulator-col select {
  background: #ffffff;
  border-color: #cbd5e1;
  color: #111827;
}
html[data-theme="light"] .input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px var(--ring);
}
html[data-theme="light"] .table-wrapper {
  background: #ffffff;
  border-color: #cbd5e1;
}
html[data-theme="light"] .content table {
  color: #111827;
}
html[data-theme="light"] .content table thead th {
  background: #f1f5f9;
  color: #475569;
}
html[data-theme="light"] .content table th,
html[data-theme="light"] .content table td {
  border-bottom-color: #e2e8f0;
}
html[data-theme="light"] .content table tbody tr td { background: #ffffff; }
html[data-theme="light"] .content table tbody tr:nth-child(2n) td { background: #f8fafc; }
html[data-theme="light"] .content table tbody tr:hover td { background: #eff6ff; }
html[data-theme="light"] .tabulator {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #111827 !important;
}
html[data-theme="light"] .tabulator .tabulator-header,
html[data-theme="light"] .tabulator .tabulator-footer {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #475569 !important;
}
html[data-theme="light"] .tabulator .tabulator-header .tabulator-col {
  border-right-color: #e2e8f0 !important;
}
html[data-theme="light"] .tabulator .tabulator-header .tabulator-col .tabulator-col-title {
  color: #475569 !important;
}
html[data-theme="light"] .tabulator .tabulator-row,
html[data-theme="light"] .tabulator .tabulator-row.tabulator-row-even {
  background: #ffffff !important;
  border-bottom-color: #e2e8f0 !important;
}
html[data-theme="light"] .tabulator .tabulator-row.tabulator-row-even { background: #f8fafc !important; }
html[data-theme="light"] .tabulator .tabulator-row:hover { background: #eff6ff !important; }
html[data-theme="light"] .tabulator .tabulator-cell {
  color: #111827 !important;
  border-right-color: #e2e8f0 !important;
}
html[data-theme="light"] .tabulator-menu,
html[data-theme="light"] .toast {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #111827 !important;
}
html[data-theme="light"] .badge {
  color: #1f2937;
  border-color: #cbd5e1;
}
html[data-theme="light"] .badge-danger,
html[data-theme="light"] .badge.danger {
  background: #fef2f2;
  border-color: #fca5a5;
  color: #991b1b;
}
html[data-theme="light"] .badge-warning,
html[data-theme="light"] .badge.warn {
  background: #fffbeb;
  border-color: #fcd34d;
  color: #92400e;
}
html[data-theme="light"] .badge-success,
html[data-theme="light"] .badge.ok {
  background: #ecfdf5;
  border-color: #6ee7b7;
  color: #065f46;
}
html[data-theme="light"] .badge-blue,
html[data-theme="light"] .badge.blue {
  background: #eff6ff;
  border-color: #93c5fd;
  color: #1e40af;
}

/* ==========================================================================
   Enterprise spread layer
   Makes the billing-grade visual language the default for the whole app.
   ========================================================================== */

:root {
  --ops-bg: #070a0f;
  --ops-shell: #0b1017;
  --ops-panel: #101720;
  --ops-panel-soft: #131b26;
  --ops-panel-strong: #182231;
  --ops-border: #2a3544;
  --ops-border-soft: #223044;
  --ops-text: #f6f8fb;
  --ops-muted: #8b98a7;
  --ops-muted-2: #b3bfcc;
  --ops-blue: #2f6bff;
  --ops-blue-dark: #1e4fc7;
  --ops-green: #059669;
  --ops-amber: #d97706;
  --ops-red: #dc2626;
  --ops-radius: 7px;
  --ops-radius-sm: 5px;
  --ops-shadow: 0 1px 0 rgba(255,255,255,.03), 0 18px 42px rgba(0,0,0,.34);
}

html,
body {
  background:
    linear-gradient(180deg, #090d13 0%, #070a0f 100%) !important;
}

.content {
  padding: 18px 18px 26px;
}

.stack {
  gap: 14px;
}

.page-header {
  position: relative;
  align-items: stretch;
  min-height: 66px;
  padding: 13px 14px;
  border: 1px solid var(--ops-border);
  border-left: 4px solid var(--ops-blue);
  border-radius: var(--ops-radius);
  background:
    linear-gradient(180deg, rgba(24,34,49,.96), rgba(15,23,34,.96));
  box-shadow: var(--ops-shadow);
}

.page-header__left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}

.page-header__title,
.page-header .h1,
.h1 {
  font-size: 21px;
  line-height: 1.12;
  font-weight: 900;
  letter-spacing: 0;
  color: var(--ops-text);
}

.page-header .subtle,
.page-header__meta {
  font-size: 12px;
  color: var(--ops-muted-2);
}

.page-header__actions {
  align-self: center;
  gap: 8px;
}

.page-header__actions .btn {
  white-space: nowrap;
}

.toolbar {
  gap: 8px;
}

.toolbar__left,
.toolbar__right,
.btn-row {
  gap: 8px;
}

.card > .card__header .toolbar {
  min-height: 32px;
}

.card__header .label,
.info-label,
.label,
label > span.subtle {
  color: var(--ops-muted);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.card {
  border-radius: var(--ops-radius);
  background: var(--ops-panel);
  border-color: var(--ops-border);
  box-shadow: var(--ops-shadow);
}

.card__header {
  min-height: 46px;
  background:
    linear-gradient(180deg, #151e2a 0%, #111923 100%);
  border-bottom-color: var(--ops-border);
  padding: 10px 13px;
}

.card__body {
  padding: 13px;
}

.card__body--flush {
  padding: 0;
}

.card__title {
  font-size: 14px;
  font-weight: 900;
  color: var(--ops-text);
}

.grid-2,
.grid-3,
.grid-4,
.kpi-grid {
  gap: 10px;
}

.grid-4 > .card,
.kpi-grid > .card,
.billing-metric,
.card-grid > .card {
  position: relative;
  border-top: 3px solid #334155;
}

.grid-4 > .card:nth-child(4n+1),
.kpi-grid > .card:nth-child(4n+1) {
  border-top-color: var(--ops-blue);
}

.grid-4 > .card:nth-child(4n+2),
.kpi-grid > .card:nth-child(4n+2) {
  border-top-color: var(--ops-green);
}

.grid-4 > .card:nth-child(4n+3),
.kpi-grid > .card:nth-child(4n+3) {
  border-top-color: var(--ops-amber);
}

.grid-4 > .card:nth-child(4n+4),
.kpi-grid > .card:nth-child(4n+4) {
  border-top-color: #64748b;
}

.kpi-title,
.grid-4 .subtle:first-child,
.kpi-grid .subtle:first-child {
  color: var(--ops-muted);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.kpi-value {
  margin-top: 5px;
  color: var(--ops-text);
  font-size: 25px;
  line-height: 1;
  font-weight: 950;
  font-variant-numeric: tabular-nums;
}

.kpi-actions {
  margin-top: 11px;
}

.btn {
  min-height: 32px;
  border-radius: var(--ops-radius-sm);
  border-color: #334155;
  background: #151d28;
  color: #eef3f8;
  padding: 7px 10px;
  font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}

.btn:hover {
  background: #1a2431;
  border-color: #52647c;
}

.btn-primary {
  background: var(--ops-blue-dark);
  border-color: #3974ff;
  color: #fff;
}

.btn-primary:hover {
  background: var(--ops-blue);
}

.btn-sm {
  min-height: 28px;
  padding: 5px 8px;
  border-radius: var(--ops-radius-sm);
}

.btn-xs {
  min-height: 24px;
  padding: 3px 7px;
  border-radius: var(--ops-radius-sm);
}

.btn-link {
  color: #9cc2ff;
}

.input,
select.input,
textarea.input,
input[type="text"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
input[type="search"],
input[type="email"],
input[type="password"],
select,
textarea {
  border-radius: var(--ops-radius-sm);
  border-color: #334155;
  background: #0b1119;
  color: var(--ops-text);
}

textarea {
  min-height: 82px;
}

.input::placeholder,
input::placeholder,
textarea::placeholder {
  color: #6f7d8e;
}

.input:focus,
input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--ops-blue);
  box-shadow: 0 0 0 3px rgba(47,107,255,.28);
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--ops-blue);
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px;
  border: 1px solid var(--ops-border);
  border-radius: var(--ops-radius);
  background: #0b1119;
}

.tab-btn {
  min-height: 32px;
  border: 1px solid transparent;
  border-radius: var(--ops-radius-sm);
  background: transparent;
  color: #cbd5e1;
  padding: 7px 10px;
  font-weight: 850;
  cursor: pointer;
}

.tab-btn:hover {
  background: #151d28;
  border-color: #334155;
}

.tab-btn.is-active {
  background: #1e4fc7;
  border-color: #3974ff;
  color: #fff;
  box-shadow: none;
}

.tab-panel {
  margin-top: 12px;
}

.table-wrapper,
.billing-table-wrap {
  border-radius: var(--ops-radius);
  border-color: var(--ops-border);
  background: #0b1119;
}

.content table {
  font-size: 12px;
}

.content table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #111923;
  color: #9aa6b2;
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: .06em;
}

.content table th,
.content table td {
  padding: 7px 9px;
  border-bottom-color: #253142;
}

.content table tbody tr td {
  background: #0f151e;
}

.content table tbody tr:nth-child(2n) td {
  background: #111923;
}

.content table tbody tr:hover td {
  background: #17243a;
}

.badge,
.ship-task-badge,
.ship-cal-item,
.tb-menu-check,
.alloc-a,
.alloc-r {
  border-radius: var(--ops-radius-sm);
}

.badge {
  min-height: 22px;
  padding: 2px 7px;
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.messages {
  margin: 0 0 14px;
}

.alert {
  border-radius: var(--ops-radius);
  border-color: var(--ops-border);
  padding: 10px 12px;
  font-weight: 750;
}

details.card > summary.card__header,
details.card > summary {
  list-style: none;
  user-select: none;
}

details.card > summary::-webkit-details-marker {
  display: none;
}

details.card > summary::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  opacity: .7;
  margin-left: auto;
}

details.card[open] > summary::after {
  transform: rotate(225deg);
}

dialog {
  border-radius: var(--ops-radius);
  border: 1px solid var(--ops-border);
  background: var(--ops-panel);
  color: var(--ops-text);
  box-shadow: 0 28px 90px rgba(0,0,0,.72);
}

dialog::backdrop {
  background: rgba(2,6,23,.64);
  backdrop-filter: blur(2px);
}

.ship-view-switch,
.ship-cal-scale-switch {
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--ops-border);
  border-radius: var(--ops-radius);
  background: #0b1119;
}

.ship-view-switch .btn,
.ship-cal-scale-switch .btn {
  border-color: transparent;
  background: transparent;
}

.ship-view-switch__btn.is-active,
.ship-cal-scale-switch__btn.is-active {
  background: #1e4fc7;
  border-color: #3974ff;
  color: #fff;
}

.ship-kanban-col,
.ship-calendar-grid,
.ship-cal-week-col,
.ship-unscheduled-box {
  border-radius: var(--ops-radius);
  border-color: var(--ops-border);
  background: #0b1119;
}

.ship-card,
.ship-cal-item {
  border-radius: var(--ops-radius);
  background: #101720;
  border-color: #2a3544;
}

.ship-card:hover,
.ship-cal-item:hover {
  border-color: var(--ops-blue);
  background: #162235;
}

.ship-cal-controls {
  border-bottom-color: var(--ops-border);
  background: #0f151e;
}

.tabulator,
.grid-host .tabulator {
  border-radius: 0 !important;
}

.card:not(.billing-command) .grid-host:first-child .tabulator,
.card__body--flush > .grid-host .tabulator {
  border: 0 !important;
}

.tabulator .tabulator-header .tabulator-col .tabulator-col-title {
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.tabulator .tabulator-row {
  min-height: 34px;
}

.tabulator .tabulator-cell {
  padding-top: 7px !important;
  padding-bottom: 7px !important;
}

.tabulator .tabulator-footer .tabulator-page,
.tabulator .tabulator-footer .tabulator-page-size {
  border-radius: var(--ops-radius-sm) !important;
}

.sku-suggest,
.tabulator-menu,
.toast {
  border-radius: var(--ops-radius) !important;
  border-color: var(--ops-border) !important;
  background: #101720 !important;
}

.card-grid > .card {
  min-height: 88px;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}

.card-grid > .card:hover {
  border-color: var(--ops-blue);
  background: #162235;
  transform: translateY(-1px);
}

.theme-toggle__text {
  display: none;
}

.user-pill {
  border-radius: var(--ops-radius);
}

.avatar {
  border-radius: var(--ops-radius-sm);
}

/* Extra nav icons for routes that were still falling back to a square. */
:root {
  --ico-billing: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6 3h12v18H6V3zm2 2v3h8V5H8zm0 5v2h2v-2H8zm4 0v2h2v-2h-2zm-4 4v2h2v-2H8zm4 0v2h2v-2h-2zm4-4v6h-2v-6h2zM8 18h8v1H8v-1z'/%3E%3C/svg%3E");
  --ico-market: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M5 5h14l1 5v9H4v-9l1-5zm2 2-.4 2h10.8L17 7H7zm-1 4v6h12v-6H6zm2 1h3v3H8v-3z'/%3E%3C/svg%3E");
  --ico-service: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M19.4 13.5a7.8 7.8 0 0 0 0-3l2-1.5-2-3.5-2.4 1a8 8 0 0 0-2.6-1.5L14 2h-4l-.4 3a8 8 0 0 0-2.6 1.5l-2.4-1-2 3.5 2 1.5a7.8 7.8 0 0 0 0 3l-2 1.5 2 3.5 2.4-1a8 8 0 0 0 2.6 1.5l.4 3h4l.4-3a8 8 0 0 0 2.6-1.5l2.4 1 2-3.5-2-1.5zM12 15a3 3 0 1 1 0-6 3 3 0 0 1 0 6z'/%3E%3C/svg%3E");
}
.nav-item[href*="/app/billing"]::before{ -webkit-mask-image: var(--ico-billing); mask-image: var(--ico-billing); }
.nav-item[href*="/app/wb-fbs-orders"]::before,
.nav-item[href*="/app/ozon-fbo-supplies"]::before{ -webkit-mask-image: var(--ico-market); mask-image: var(--ico-market); }
.nav-item[href*="/app/service"]::before{ -webkit-mask-image: var(--ico-service); mask-image: var(--ico-service); }

@media (max-width: 900px) {
  .content {
    padding: 12px;
  }
  .page-header {
    padding: 12px;
  }
  .page-header__actions {
    align-self: stretch;
  }
  .page-header__actions .btn {
    flex: 1 1 160px;
    justify-content: center;
  }
  .tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
  }
  .tab-btn {
    white-space: nowrap;
  }
}

html[data-theme="light"] {
  --ops-bg: #eef2f7;
  --ops-shell: #ffffff;
  --ops-panel: #ffffff;
  --ops-panel-soft: #f8fafc;
  --ops-panel-strong: #eef2f7;
  --ops-border: #cbd5e1;
  --ops-border-soft: #e2e8f0;
  --ops-text: #0f172a;
  --ops-muted: #64748b;
  --ops-muted-2: #475569;
  --ops-shadow: 0 1px 2px rgba(15,23,42,.05), 0 14px 28px rgba(15,23,42,.10);
}

html[data-theme="light"] .page-header {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border-color: #cbd5e1;
  border-left-color: #2563eb;
}

html[data-theme="light"] .page-header__title,
html[data-theme="light"] .page-header .h1,
html[data-theme="light"] .h1,
html[data-theme="light"] .card__title,
html[data-theme="light"] .kpi-value {
  color: #0f172a;
}

html[data-theme="light"] .card__header {
  background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
  border-bottom-color: #d8e0ea;
}

html[data-theme="light"] .grid-4 > .card,
html[data-theme="light"] .kpi-grid > .card,
html[data-theme="light"] .billing-metric,
html[data-theme="light"] .card-grid > .card {
  background: #ffffff;
}

html[data-theme="light"] .tabs,
html[data-theme="light"] .ship-view-switch,
html[data-theme="light"] .ship-cal-scale-switch,
html[data-theme="light"] .ship-kanban-col,
html[data-theme="light"] .ship-calendar-grid,
html[data-theme="light"] .ship-cal-week-col,
html[data-theme="light"] .ship-unscheduled-box,
html[data-theme="light"] .table-wrapper,
html[data-theme="light"] .billing-table-wrap {
  background: #ffffff;
  border-color: #cbd5e1;
}

html[data-theme="light"] .tab-btn {
  color: #334155;
}

html[data-theme="light"] .tab-btn:hover,
html[data-theme="light"] .ship-card:hover,
html[data-theme="light"] .ship-cal-item:hover,
html[data-theme="light"] .card-grid > .card:hover {
  background: #eff6ff;
}

html[data-theme="light"] .tab-btn.is-active,
html[data-theme="light"] .ship-view-switch__btn.is-active,
html[data-theme="light"] .ship-cal-scale-switch__btn.is-active {
  background: #2563eb;
  border-color: #1d4ed8;
  color: #fff;
}

html[data-theme="light"] .ship-card,
html[data-theme="light"] .ship-cal-item,
html[data-theme="light"] .ship-cal-controls {
  background: #f8fafc;
  border-color: #cbd5e1;
}

html[data-theme="light"] dialog,
html[data-theme="light"] .sku-suggest,
html[data-theme="light"] .tabulator-menu,
html[data-theme="light"] .toast {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

/* ==========================================================================
   Premium light theme
   A first-class operational theme, not a pale inversion of dark UI.
   Keep this at the end: it intentionally wins over page-specific dark CSS.
   ========================================================================== */

html[data-theme="light"] {
  color-scheme: light;
  --bg: #f3f6fb;
  --panel: #ffffff;
  --panel-2: #f8fafc;
  --surface-raised: #ffffff;
  --text: #101828;
  --muted: #475467;
  --border: #b9c4d4;
  --ring: rgba(29,78,216,.20);
  --primary: #1d4ed8;
  --primary-600: #1e40af;
  --danger: #b42318;
  --warning: #b54708;
  --success: #067647;
  --shadow: 0 1px 2px rgba(16,24,40,.06), 0 14px 34px rgba(16,24,40,.10);
  --ops-bg: #f3f6fb;
  --ops-shell: #ffffff;
  --ops-panel: #ffffff;
  --ops-panel-soft: #f8fafc;
  --ops-panel-strong: #eef4ff;
  --ops-border: #b9c4d4;
  --ops-border-soft: #d6deea;
  --ops-text: #101828;
  --ops-muted: #526174;
  --ops-muted-2: #344054;
  --ops-blue: #1d4ed8;
  --ops-blue-dark: #1e40af;
  --ops-green: #067647;
  --ops-amber: #b54708;
  --ops-red: #b42318;
  --ops-shadow: 0 1px 2px rgba(16,24,40,.06), 0 16px 34px rgba(16,24,40,.10);
}

html[data-theme="light"],
html[data-theme="light"] body {
  background: linear-gradient(180deg, #f8fbff 0%, #edf2f8 100%) !important;
  color: #101828 !important;
}

html[data-theme="light"] .content {
  background: transparent;
}

html[data-theme="light"] .sidebar,
html[data-theme="light"] .topbar {
  background: #ffffff !important;
  border-color: #b9c4d4 !important;
  color: #101828 !important;
  box-shadow: 0 1px 0 rgba(16,24,40,.04);
}

html[data-theme="light"] .sidebar__brand,
html[data-theme="light"] .card__header,
html[data-theme="light"] .ship-kanban-col__head,
html[data-theme="light"] .ship-cal-week-col__head,
html[data-theme="light"] .ship-unscheduled-box__title,
html[data-theme="light"] .ship-cal-controls,
html[data-theme="light"] .row-drawer-head {
  background: linear-gradient(180deg, #f8fafc 0%, #eef3f8 100%) !important;
  border-color: #cbd5e1 !important;
  color: #101828 !important;
}

html[data-theme="light"] .brand-badge,
html[data-theme="light"] .avatar,
html[data-theme="light"] .icon-btn,
html[data-theme="light"] .theme-toggle,
html[data-theme="light"] .user-pill {
  background: #f2f6fb !important;
  border-color: #b9c4d4 !important;
  color: #101828 !important;
}

html[data-theme="light"] .nav-group__title,
html[data-theme="light"] .nav-section__title,
html[data-theme="light"] .crumbs,
html[data-theme="light"] .brand-title span {
  color: #526174 !important;
}

html[data-theme="light"] .nav-item {
  color: #1d2735 !important;
}

html[data-theme="light"] .nav-item:hover {
  background: #eef4ff !important;
  border-color: #9fb3d1 !important;
  color: #0f172a !important;
}

html[data-theme="light"] .nav-item.is-active {
  background: #dbeafe !important;
  border-color: #1d4ed8 !important;
  color: #0f172a !important;
  box-shadow: inset 3px 0 0 #1d4ed8 !important;
}

html[data-theme="light"] .page-header,
html[data-theme="light"] .billing-command {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
  border-color: #b9c4d4 !important;
  border-left-color: #1d4ed8 !important;
  box-shadow: var(--ops-shadow) !important;
}

html[data-theme="light"] .card,
html[data-theme="light"] details.card,
html[data-theme="light"] .billing-metric,
html[data-theme="light"] .billing-invoice-card,
html[data-theme="light"] .billing-period-status,
html[data-theme="light"] .billing-quality-item,
html[data-theme="light"] .billing-proof,
html[data-theme="light"] .billing-service-category,
html[data-theme="light"] .ship-card,
html[data-theme="light"] .ship-kanban-col,
html[data-theme="light"] .ship-calendar-grid,
html[data-theme="light"] .ship-cal-week-col,
html[data-theme="light"] .ship-unscheduled-box,
html[data-theme="light"] .ship-cal-item,
html[data-theme="light"] .zone-tree__zone,
html[data-theme="light"] .zone-tree__rack,
html[data-theme="light"] .zone-tree__row,
html[data-theme="light"] .zone-tree__level,
html[data-theme="light"] .receiving-page .sku-suggest,
html[data-theme="light"] .shipment-page .sku-suggest {
  background: #ffffff !important;
  border-color: #b9c4d4 !important;
  color: #101828 !important;
  box-shadow: var(--ops-shadow);
}

html[data-theme="light"] .card__title,
html[data-theme="light"] .title,
html[data-theme="light"] .h1,
html[data-theme="light"] .page-header__title,
html[data-theme="light"] .page-header .h1,
html[data-theme="light"] .billing-title,
html[data-theme="light"] .billing-pay-amount,
html[data-theme="light"] .billing-metric__value,
html[data-theme="light"] .billing-quality-item__value,
html[data-theme="light"] .billing-proof__num,
html[data-theme="light"] .billing-period-status__title,
html[data-theme="light"] .billing-service-category__amount,
html[data-theme="light"] .kpi-value,
html[data-theme="light"] .drawer-title,
html[data-theme="light"] .warn-title,
html[data-theme="light"] .ship-card__code,
html[data-theme="light"] .zone-tree__title,
html[data-theme="light"] b,
html[data-theme="light"] strong {
  color: #101828 !important;
}

html[data-theme="light"] .subtle,
html[data-theme="light"] .muted,
html[data-theme="light"] .subtitle,
html[data-theme="light"] .page-header__meta,
html[data-theme="light"] .page-header .subtle,
html[data-theme="light"] .billing-eyebrow,
html[data-theme="light"] .billing-pay-label,
html[data-theme="light"] .billing-pay-note,
html[data-theme="light"] .billing-metric__label,
html[data-theme="light"] .billing-metric__note,
html[data-theme="light"] .billing-quality-item__label,
html[data-theme="light"] .billing-proof__label,
html[data-theme="light"] .billing-section-kicker,
html[data-theme="light"] .billing-service-category__label,
html[data-theme="light"] .billing-service-category__meta,
html[data-theme="light"] .kpi-title,
html[data-theme="light"] .ship-card__meta,
html[data-theme="light"] .ship-card__meta span,
html[data-theme="light"] .ship-card__meta-grid,
html[data-theme="light"] .ship-card__meta-grid span,
html[data-theme="light"] .ship-card__comment,
html[data-theme="light"] .ship-cal-day__num,
html[data-theme="light"] .ship-cal-item__time,
html[data-theme="light"] .ship-unscheduled-item__meta,
html[data-theme="light"] .shipment-page .mode-select label,
html[data-theme="light"] .shipment-page .units-hint,
html[data-theme="light"] .shipment-page .uom-hint,
html[data-theme="light"] .receiving-page .sku-suggest__barcode {
  color: #475467 !important;
}

html[data-theme="light"] .info-label,
html[data-theme="light"] .label,
html[data-theme="light"] .card__header .label,
html[data-theme="light"] label > span.subtle {
  color: #344054 !important;
}

html[data-theme="light"] a:not(.btn):not(.nav-item) {
  color: #175cd3;
}

html[data-theme="light"] a:not(.btn):not(.nav-item):hover {
  color: #1849a9;
}

html[data-theme="light"] .btn {
  background: #ffffff !important;
  border-color: #98a8bd !important;
  color: #182230 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 1px 1px rgba(16,24,40,.04);
}

html[data-theme="light"] .btn:hover {
  background: #eef4ff !important;
  border-color: #667f9f !important;
  color: #101828 !important;
}

html[data-theme="light"] .btn-primary {
  background: #1d4ed8 !important;
  border-color: #1849a9 !important;
  color: #ffffff !important;
}

html[data-theme="light"] .btn-primary:hover {
  background: #1849a9 !important;
  color: #ffffff !important;
}

html[data-theme="light"] .btn-success {
  background: #dcfae6 !important;
  border-color: #17b26a !important;
  color: #074d31 !important;
}

html[data-theme="light"] .btn-warning {
  background: #fef0c7 !important;
  border-color: #f79009 !important;
  color: #7a2e0e !important;
}

html[data-theme="light"] .btn-danger {
  background: #fee4e2 !important;
  border-color: #f04438 !important;
  color: #7a271a !important;
}

html[data-theme="light"] .input,
html[data-theme="light"] select.input,
html[data-theme="light"] textarea.input,
html[data-theme="light"] input[type="text"],
html[data-theme="light"] input[type="number"],
html[data-theme="light"] input[type="date"],
html[data-theme="light"] input[type="datetime-local"],
html[data-theme="light"] input[type="search"],
html[data-theme="light"] input[type="email"],
html[data-theme="light"] input[type="password"],
html[data-theme="light"] select,
html[data-theme="light"] textarea,
html[data-theme="light"] .tabulator .tabulator-header-filter input,
html[data-theme="light"] .tabulator .tabulator-header-filter select {
  background: #ffffff !important;
  border-color: #98a8bd !important;
  color: #101828 !important;
  box-shadow: inset 0 1px 2px rgba(16,24,40,.04);
}

html[data-theme="light"] .input::placeholder,
html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder,
html[data-theme="light"] .tabulator .tabulator-header-filter input::placeholder {
  color: #667085 !important;
}

html[data-theme="light"] .input:focus,
html[data-theme="light"] input:focus,
html[data-theme="light"] select:focus,
html[data-theme="light"] textarea:focus,
html[data-theme="light"] .tabulator .tabulator-header-filter input:focus,
html[data-theme="light"] .tabulator .tabulator-header-filter select:focus {
  border-color: #1d4ed8 !important;
  box-shadow: 0 0 0 3px rgba(29,78,216,.18) !important;
}

html[data-theme="light"] .tabs,
html[data-theme="light"] .billing-tabs__nav,
html[data-theme="light"] .ship-view-switch,
html[data-theme="light"] .ship-cal-scale-switch {
  background: #eaf0f7 !important;
  border-color: #b9c4d4 !important;
}

html[data-theme="light"] .tab-btn,
html[data-theme="light"] .billing-tabs__label,
html[data-theme="light"] .ship-view-switch .btn,
html[data-theme="light"] .ship-cal-scale-switch .btn {
  background: transparent !important;
  border-color: transparent !important;
  color: #344054 !important;
}

html[data-theme="light"] .tab-btn:hover,
html[data-theme="light"] .billing-tabs__label:hover,
html[data-theme="light"] .ship-view-switch .btn:hover,
html[data-theme="light"] .ship-cal-scale-switch .btn:hover {
  background: #ffffff !important;
  border-color: #b9c4d4 !important;
  color: #101828 !important;
}

html[data-theme="light"] .tab-btn.is-active,
html[data-theme="light"] #billing-tab-docs:checked ~ .billing-tabs__nav label[for="billing-tab-docs"],
html[data-theme="light"] #billing-tab-services:checked ~ .billing-tabs__nav label[for="billing-tab-services"],
html[data-theme="light"] .ship-view-switch__btn.is-active,
html[data-theme="light"] .ship-cal-scale-switch__btn.is-active {
  background: #1d4ed8 !important;
  border-color: #1849a9 !important;
  color: #ffffff !important;
}

html[data-theme="light"] .table-wrapper,
html[data-theme="light"] .billing-table-wrap,
html[data-theme="light"] .receiving-page .tabulator-host,
html[data-theme="light"] .wms-grid {
  background: #ffffff !important;
  border-color: #b9c4d4 !important;
}

html[data-theme="light"] .content table,
html[data-theme="light"] .billing-table,
html[data-theme="light"] .shipment-page table {
  color: #101828 !important;
  border-color: #b9c4d4 !important;
}

html[data-theme="light"] .content table thead th,
html[data-theme="light"] .billing-table th,
html[data-theme="light"] .shipment-page table th {
  background: #eaf0f7 !important;
  color: #344054 !important;
  border-color: #cbd5e1 !important;
}

html[data-theme="light"] .content table td,
html[data-theme="light"] .content table th,
html[data-theme="light"] .billing-table td,
html[data-theme="light"] .billing-table th,
html[data-theme="light"] .shipment-page table td,
html[data-theme="light"] .shipment-page table th {
  border-bottom-color: #d6deea !important;
}

html[data-theme="light"] .content table tbody tr td,
html[data-theme="light"] .billing-table tbody tr td,
html[data-theme="light"] .shipment-page table tbody tr td {
  background: #ffffff !important;
  color: #101828 !important;
}

html[data-theme="light"] .content table tbody tr:nth-child(2n) td,
html[data-theme="light"] .billing-table tbody tr:nth-child(2n) td,
html[data-theme="light"] .shipment-page table tbody tr:nth-child(2n) td {
  background: #f8fafc !important;
}

html[data-theme="light"] .content table tbody tr:hover td,
html[data-theme="light"] .billing-table tbody tr:hover td,
html[data-theme="light"] .shipment-page table tbody tr:hover td {
  background: #eef4ff !important;
}

html[data-theme="light"] .tabulator,
html[data-theme="light"] .wms-grid .tabulator {
  background: #ffffff !important;
  border-color: #b9c4d4 !important;
  color: #101828 !important;
}

html[data-theme="light"] .tabulator .tabulator-tableholder,
html[data-theme="light"] .tabulator .tabulator-tableholder .tabulator-table,
html[data-theme="light"] .tabulator .tabulator-table {
  background: #ffffff !important;
  color: #101828 !important;
}

html[data-theme="light"] .tabulator .tabulator-header,
html[data-theme="light"] .wms-grid .tabulator-header,
html[data-theme="light"] .tabulator .tabulator-footer {
  background: #eaf0f7 !important;
  border-color: #b9c4d4 !important;
  color: #344054 !important;
}

html[data-theme="light"] .tabulator .tabulator-header .tabulator-col,
html[data-theme="light"] .wms-grid .tabulator-header .tabulator-col {
  background: transparent !important;
  border-color: #cbd5e1 !important;
}

html[data-theme="light"] .tabulator .tabulator-header .tabulator-col .tabulator-col-title,
html[data-theme="light"] .wms-grid .tabulator-header .tabulator-col .tabulator-col-title,
html[data-theme="light"] .tabulator .tabulator-footer label {
  color: #344054 !important;
}

html[data-theme="light"] .tabulator .tabulator-row,
html[data-theme="light"] .wms-grid .tabulator-row {
  background: #ffffff !important;
  border-color: #d6deea !important;
}

html[data-theme="light"] .tabulator .tabulator-row.tabulator-row-even,
html[data-theme="light"] .wms-grid .tabulator-row.tabulator-row-even {
  background: #f8fafc !important;
}

html[data-theme="light"] .tabulator .tabulator-row:hover,
html[data-theme="light"] .wms-grid .tabulator-row:hover {
  background: #eef4ff !important;
}

html[data-theme="light"] .tabulator .tabulator-row.tabulator-selected,
html[data-theme="light"] .wms-grid .tabulator-row.tabulator-selected {
  background: #dbeafe !important;
  color: #0f172a !important;
}

html[data-theme="light"] .tabulator .tabulator-cell,
html[data-theme="light"] .wms-grid .tabulator-cell {
  color: #101828 !important;
  border-color: #d6deea !important;
}

html[data-theme="light"] .tabulator .tabulator-placeholder {
  color: #475467 !important;
}

html[data-theme="light"] .tabulator .tabulator-footer .tabulator-page,
html[data-theme="light"] .tabulator .tabulator-footer .tabulator-page-size {
  background: #ffffff !important;
  border-color: #98a8bd !important;
  color: #101828 !important;
}

html[data-theme="light"] .tabulator .tabulator-footer .tabulator-page.active {
  background: #1d4ed8 !important;
  border-color: #1849a9 !important;
  color: #ffffff !important;
}

html[data-theme="light"] .tabulator-menu,
html[data-theme="light"] .tabulator-menu .tabulator-menu-item,
html[data-theme="light"] .toast,
html[data-theme="light"] .sku-suggest,
html[data-theme="light"] .tb-menu-check {
  background: #ffffff !important;
  border-color: #b9c4d4 !important;
  color: #101828 !important;
}

html[data-theme="light"] .tabulator-menu .tabulator-menu-item:hover,
html[data-theme="light"] .sku-suggest__item:hover,
html[data-theme="light"] .receiving-page .sku-suggest__item:hover {
  background: #eef4ff !important;
}

html[data-theme="light"] .tb-menu-check.is-on {
  background: #dbeafe !important;
  border-color: #1d4ed8 !important;
  color: #1e40af !important;
}

html[data-theme="light"] .badge,
html[data-theme="light"] .ship-task-badge,
html[data-theme="light"] .billing-doc-type,
html[data-theme="light"] .billing-client-chip,
html[data-theme="light"] .billing-share,
html[data-theme="light"] .doc-status,
html[data-theme="light"] .alloc-a,
html[data-theme="light"] .alloc-r {
  background: #f2f6fb !important;
  border-color: #b9c4d4 !important;
  color: #1d2735 !important;
}

html[data-theme="light"] .badge-danger,
html[data-theme="light"] .badge.danger,
html[data-theme="light"] .doc-status.status-missing {
  background: #fee4e2 !important;
  border-color: #f04438 !important;
  color: #7a271a !important;
}

html[data-theme="light"] .badge-warning,
html[data-theme="light"] .badge.warn,
html[data-theme="light"] .doc-status.status-draft {
  background: #fef0c7 !important;
  border-color: #f79009 !important;
  color: #7a2e0e !important;
}

html[data-theme="light"] .badge-success,
html[data-theme="light"] .badge.ok,
html[data-theme="light"] .doc-status.status-approved,
html[data-theme="light"] .alloc-a {
  background: #dcfae6 !important;
  border-color: #17b26a !important;
  color: #074d31 !important;
}

html[data-theme="light"] .badge-blue,
html[data-theme="light"] .badge.blue,
html[data-theme="light"] .doc-status.status-partial,
html[data-theme="light"] .ship-task-badge.is-blue {
  background: #dbeafe !important;
  border-color: #60a5fa !important;
  color: #1849a9 !important;
}

html[data-theme="light"] .ship-task-badge.is-danger {
  background: #fee4e2 !important;
  border-color: #f04438 !important;
  color: #7a271a !important;
}

html[data-theme="light"] .billing-readiness.is-ok,
html[data-theme="light"] .billing-quality-item.is-ok,
html[data-theme="light"] .billing-proof.is-ok {
  background: #ecfdf3 !important;
  border-color: #17b26a !important;
  color: #074d31 !important;
}

html[data-theme="light"] .billing-readiness.is-warning,
html[data-theme="light"] .billing-quality-item.is-warning,
html[data-theme="light"] .billing-proof.is-warning {
  background: #fffaeb !important;
  border-color: #f79009 !important;
  color: #7a2e0e !important;
}

html[data-theme="light"] .billing-readiness.is-critical,
html[data-theme="light"] .billing-quality-item.is-danger,
html[data-theme="light"] .billing-proof.is-danger {
  background: #fef3f2 !important;
  border-color: #f04438 !important;
  color: #7a271a !important;
}

html[data-theme="light"] .billing-command__top,
html[data-theme="light"] .billing-command__filters,
html[data-theme="light"] .billing-invoice-card__head,
html[data-theme="light"] .billing-tabs__nav,
html[data-theme="light"] .billing-doc-dialog__head,
html[data-theme="light"] .billing-table-note {
  background: #f2f6fb !important;
  border-color: #cbd5e1 !important;
  color: #344054 !important;
}

html[data-theme="light"] .billing-doc-dialog {
  background: #ffffff !important;
  border-color: #98a8bd !important;
  color: #101828 !important;
}

html[data-theme="light"] .billing-doc-dialog::backdrop,
html[data-theme="light"] dialog::backdrop {
  background: rgba(16,24,40,.30) !important;
  backdrop-filter: blur(2px);
}

html[data-theme="light"] .billing-doc-row.status-missing td { box-shadow: inset 3px 0 0 #d92d20 !important; }
html[data-theme="light"] .billing-doc-row.status-draft td { box-shadow: inset 3px 0 0 #dc6803 !important; }
html[data-theme="light"] .billing-doc-row.status-partial td { box-shadow: inset 3px 0 0 #2563eb !important; }
html[data-theme="light"] .billing-doc-row.status-approved td { box-shadow: inset 3px 0 0 #079455 !important; }
html[data-theme="light"] .billing-doc-row.status-closed td { box-shadow: inset 3px 0 0 #667085 !important; }

html[data-theme="light"] .alert,
html[data-theme="light"] .toast {
  color: #101828 !important;
  background: #ffffff !important;
  border-color: #b9c4d4 !important;
}

html[data-theme="light"] .alert-success,
html[data-theme="light"] .toast.ok {
  background: #ecfdf3 !important;
  border-color: #17b26a !important;
  color: #074d31 !important;
}

html[data-theme="light"] .alert-warning,
html[data-theme="light"] .toast.warn {
  background: #fffaeb !important;
  border-color: #f79009 !important;
  color: #7a2e0e !important;
}

html[data-theme="light"] .alert-error,
html[data-theme="light"] .alert-danger,
html[data-theme="light"] .toast.danger {
  background: #fef3f2 !important;
  border-color: #f04438 !important;
  color: #7a271a !important;
}

html[data-theme="light"] .alert-info {
  background: #eff8ff !important;
  border-color: #2e90fa !important;
  color: #1849a9 !important;
}

html[data-theme="light"] .backdrop {
  background: rgba(16,24,40,.28) !important;
}

html[data-theme="light"] .pallet-drawer,
html[data-theme="light"] .shipment-page .pallet-card,
html[data-theme="light"] .shipment-page .pallet-summary,
html[data-theme="light"] .shipment-page .billing-panel,
html[data-theme="light"] .shipment-page .billing-empty,
html[data-theme="light"] .receiving-page .media-card,
html[data-theme="light"] .media-gallery,
html[data-theme="light"] .media-modal,
html[data-theme="light"] .service-express-inventory-runs .card {
  background: #ffffff !important;
  border-color: #b9c4d4 !important;
  color: #101828 !important;
}

html[data-theme="light"] .wms-grid .tabulator-cell.is-editable {
  background-color: #fff7e6 !important;
  box-shadow: inset 0 -1px 0 #f59e0b !important;
}

html[data-theme="light"] .wms-grid .tabulator .editable-head,
html[data-theme="light"] .wms-grid .tabulator .editable-head__icon {
  color: #92400e !important;
}

html[data-theme="light"] ::selection {
  background: rgba(29,78,216,.24);
  color: #101828;
}

/* Light theme hardening for legacy screens and vendor widgets. */
html[data-theme="light"] .toolbar,
html[data-theme="light"] .tab-toolbar,
html[data-theme="light"] .tasks-toolbar,
html[data-theme="light"] .zone-tree__filters,
html[data-theme="light"] .report-movement-page .mov-filter,
html[data-theme="light"] .billing-price-summary,
html[data-theme="light"] .ozon-workspace,
html[data-theme="light"] .ozon-control-panel,
html[data-theme="light"] .ozon-draft-panel {
  background: #ffffff !important;
  border-color: #b9c4d4 !important;
  color: #101828 !important;
}

html[data-theme="light"] .toolbar,
html[data-theme="light"] .tab-toolbar,
html[data-theme="light"] .tasks-toolbar {
  box-shadow: 0 1px 2px rgba(16,24,40,.04);
}

html[data-theme="light"] .field,
html[data-theme="light"] .tasks-filter,
html[data-theme="light"] .zone-filter,
html[data-theme="light"] .mode-select,
html[data-theme="light"] .shipment-page .units-row,
html[data-theme="light"] .shipment-page .alloc-row,
html[data-theme="light"] .receiving-page .media-chip,
html[data-theme="light"] .sku-suggest__item,
html[data-theme="light"] .ship-unscheduled-item,
html[data-theme="light"] .ship-cal-day,
html[data-theme="light"] .ship-cal-day-list__empty,
html[data-theme="light"] .ship-kanban-col__empty,
html[data-theme="light"] .ship-cal-week-col__empty,
html[data-theme="light"] .ozon-control-tile,
html[data-theme="light"] .ozon-import-card,
html[data-theme="light"] .ozon-selected-import,
html[data-theme="light"] .ozon-mode-card {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
  color: #101828 !important;
}

html[data-theme="light"] .ship-cal-day.is-empty {
  background: #eef3f8 !important;
}

html[data-theme="light"] .ship-kanban-col__count,
html[data-theme="light"] .badge-muted,
html[data-theme="light"] .pill,
html[data-theme="light"] .chip,
html[data-theme="light"] .impact-pill,
html[data-theme="light"] .status-pill,
html[data-theme="light"] .kpi-breakdown summary,
html[data-theme="light"] .dashboard-shipment summary,
html[data-theme="light"] .tab-panel[data-panel="trip"] .trip-details > summary,
html[data-theme="light"] .tab-panel[data-panel="trip"] .trip-advanced > summary {
  background: #f2f6fb !important;
  border-color: #b9c4d4 !important;
  color: #1d2735 !important;
}

html[data-theme="light"] .card.warning,
html[data-theme="light"] .ozon-control-tile--warn {
  background: #fffaeb !important;
  border-color: #f79009 !important;
  color: #7a2e0e !important;
}

html[data-theme="light"] .ozon-control-tile--bad {
  background: #fef3f2 !important;
  border-color: #f04438 !important;
  color: #7a271a !important;
}

html[data-theme="light"] .ozon-control-tile--ok {
  background: #ecfdf3 !important;
  border-color: #17b26a !important;
  color: #074d31 !important;
}

html[data-theme="light"] .modal,
html[data-theme="light"] .wms-modal,
html[data-theme="light"] .ozon-modal-backdrop,
html[data-theme="light"] .trip-drawer-backdrop,
html[data-theme="light"] .wms-modal-backdrop {
  background: rgba(16,24,40,.28) !important;
  backdrop-filter: blur(2px);
}

html[data-theme="light"] .modal-card,
html[data-theme="light"] .wms-modal__card,
html[data-theme="light"] .wms-modal .card,
html[data-theme="light"] .ozon-modal,
html[data-theme="light"] .trip-drawer {
  background: #ffffff !important;
  border-color: #98a8bd !important;
  color: #101828 !important;
  box-shadow: 0 18px 50px rgba(16,24,40,.22) !important;
}

html[data-theme="light"] .modal-title,
html[data-theme="light"] .wms-modal__title,
html[data-theme="light"] .wms-modal .card__title,
html[data-theme="light"] .ozon-modal__head,
html[data-theme="light"] .trip-drawer__title,
html[data-theme="light"] .trip-details__summary-title {
  color: #101828 !important;
}

html[data-theme="light"] .wms-modal .card__header,
html[data-theme="light"] .ozon-modal__head,
html[data-theme="light"] .trip-drawer__header {
  background: #f2f6fb !important;
  border-color: #cbd5e1 !important;
}

html[data-theme="light"] .btn-link {
  background: transparent !important;
  border-color: transparent !important;
  color: #175cd3 !important;
  box-shadow: none !important;
}

html[data-theme="light"] .theme-toggle__icon {
  background: linear-gradient(135deg, #facc15 0 46%, #ffffff 47% 100%) !important;
  border-color: #b54708 !important;
}

html[data-theme="light"] .flatpickr-calendar {
  background: #ffffff !important;
  border: 1px solid #98a8bd !important;
  box-shadow: 0 18px 50px rgba(16,24,40,.22) !important;
  color: #101828 !important;
}

html[data-theme="light"] .flatpickr-months,
html[data-theme="light"] .flatpickr-month,
html[data-theme="light"] .flatpickr-current-month,
html[data-theme="light"] .flatpickr-weekdays,
html[data-theme="light"] .flatpickr-weekday {
  background: #f2f6fb !important;
  color: #344054 !important;
  fill: #344054 !important;
}

html[data-theme="light"] .flatpickr-day {
  color: #101828 !important;
  border-color: transparent !important;
}

html[data-theme="light"] .flatpickr-day:hover,
html[data-theme="light"] .flatpickr-day:focus {
  background: #eef4ff !important;
  border-color: #9fb3d1 !important;
}

html[data-theme="light"] .flatpickr-day.today {
  border-color: #1d4ed8 !important;
}

html[data-theme="light"] .flatpickr-day.selected,
html[data-theme="light"] .flatpickr-day.startRange,
html[data-theme="light"] .flatpickr-day.endRange {
  background: #1d4ed8 !important;
  border-color: #1849a9 !important;
  color: #ffffff !important;
}

html[data-theme="light"] .flatpickr-day.prevMonthDay,
html[data-theme="light"] .flatpickr-day.nextMonthDay,
html[data-theme="light"] .flatpickr-day.flatpickr-disabled {
  color: #98a2b3 !important;
}

html[data-theme="light"] * {
  scrollbar-color: #98a8bd #eef3f8;
}

html[data-theme="light"] ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

html[data-theme="light"] ::-webkit-scrollbar-track {
  background: #eef3f8;
}

html[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: #98a8bd;
  border: 2px solid #eef3f8;
  border-radius: 999px;
}

html[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
  background: #667f9f;
}