/* =====================================================================
   polish.css — COSMETIC-ONLY refinement layer. Loaded last so it wins.
   Purely visual: no markup, JS, or backend dependencies. To fully revert,
   delete this file and its <link> in index.html.
   Themed modules keep their own look (B&Q .bnq-*, Products #products dark
   theme, Warehouse) because they use higher-specificity selectors — this
   only refines the shared chrome and generic components.
   ===================================================================== */

:root{
  --rms-radius: 12px;
  --rms-radius-sm: 9px;
  --rms-shadow-sm: 0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  --rms-shadow-md: 0 6px 18px rgba(15,23,42,.08);
  --rms-line: #e6edf4;
  --rms-primary: #0369a1;
  --rms-primary-d: #075985;
}

/* ---- base typography & rendering ---- */
body{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
}

/* ---- cards / panels: tame the oversized radius + heavy shadow ---- */
.card,.hero-card{
  border-radius: 16px;
  box-shadow: var(--rms-shadow-md);
  border-color: rgba(226,232,240,.9);
}
.stat{ border-radius: 14px; box-shadow: var(--rms-shadow-sm); }
.section-head h2{ letter-spacing: -.2px; }

/* ---- topbar ---- */
.topbar{ border-radius: 16px; box-shadow: var(--rms-shadow-md); }
.page-title{ font-weight: 800; letter-spacing: -.3px; }

/* ---- buttons: lighter weight, consistent radius, smooth, real focus ---- */
button,.toolbar button,.form-grid button{
  border-radius: var(--rms-radius);
  font-weight: 700;
  box-shadow: var(--rms-shadow-sm);
  transition: background .15s ease, transform .12s ease, box-shadow .15s ease;
}
button:hover{ transform: translateY(-1px); box-shadow: var(--rms-shadow-md); }
button:active{ transform: translateY(0); box-shadow: var(--rms-shadow-sm); }

/* clear, consistent keyboard focus on all interactive elements */
button:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible,
a:focus-visible{
  outline: 2px solid #0ea5e9;
  outline-offset: 2px;
}

/* ---- inputs ---- */
input,select,textarea,
.toolbar input,.toolbar select,.form-grid input,.form-grid select{
  border-radius: var(--rms-radius);
  border-color: #d5dee8;
}

/* ---- sidebar nav: cleaner items + a real active state ---- */
.nav button, .nav a{
  border-radius: 8px;
  font-weight: 600;
  font-size: 13px;
  padding: 9px 12px;
  margin: 3px 0;
  box-shadow: none;
}
.nav button:hover, .nav a:hover{ transform: translateX(2px); }
/* Items nested under a sub-group (Platform Orders / Amazon Orders) sit a touch
   smaller + indented, so the hierarchy reads section > sub-group > item. */
/* Sub-groups (Platform Orders / Fulfilment / Amazon Orders) sit at the SAME
   level as the "Orders" item — direct sub-sections of Orders & Channels, not
   nested under Orders. So no extra indent/border on the sub-group itself; the
   indentation lives on the items inside it instead. */
.nav-subgroup{ margin: 2px 0; padding-left: 0; border-left: none; }
.nav-subgroup button, .nav-subgroup a{ font-size: 12.5px; padding: 8px 12px 8px 26px; }
.nav-subgroup .nav-ico{ width: 20px; height: 20px; }
.nav button.active, .nav a.active{
  background: rgba(255,255,255,.96);
  color: #06314f;
  box-shadow: 0 6px 16px rgba(2,8,23,.20);
}
.nav button.active:hover, .nav a.active:hover{ transform: none; }

/* ---- generic tables: lighter, modern header (themed tables override) ---- */
table{ border-radius: 14px; box-shadow: var(--rms-shadow-sm); }
th{
  background: #f4f7fb;
  color: #5a6b7e;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  border-bottom: 1px solid var(--rms-line);
}
td{ border-bottom-color: #eef2f7; }
tr:hover td{ background: #f6f9fc; }

/* ---- badges / pills ---- */
.badge{ font-weight: 700; letter-spacing: .2px; }
.user-pill{ font-weight: 700; }

/* ---- empty / notice states ---- */
.empty-state{ border-radius: 14px; }

/* ---- login card refinement ---- */
.login-card{ border-radius: 20px; box-shadow: 0 20px 60px rgba(2,20,40,.28); }
.brand-mark{ border-radius: 16px; }

/* =====================================================================
   Stock & Orders pages: convert from the dark navy theme to the same LIGHT
   card look as the rest of the app, and add the missing padding (the title
   was hugging the edge). Scoped to #stockInventory / #ordersHub only, so the
   intentionally-dark Product Catalogue page is untouched.
   ===================================================================== */

/* container -> white padded card, consistent with .card elsewhere */
#stockInventory.cat-page,#ordersHub.cat-page{
  background:#fff !important;
  border:1px solid rgba(226,232,240,.9) !important;
  border-radius:16px !important;
  padding:24px !important;
  box-shadow:var(--rms-shadow-md) !important;
}
#stockInventory .cat-page-title,#ordersHub .cat-page-title{ color:#0f172a; }
#stockInventory .cat-page-sub,#ordersHub .cat-page-sub{ color:#64748b; }
#stockInventory .stk-section-title,#ordersHub .stk-section-title{ color:#5a6b7e; }

/* tables -> light */
#stockInventory .stk-table th{ background:#f4f7fb !important; color:#5a6b7e !important; border-bottom:1px solid #e6edf4 !important; }
#stockInventory .stk-table td{ color:#0f172a !important; background:#fff !important; border-bottom:1px solid #eef2f7 !important; }
#stockInventory .stk-table tr:hover td,
#stockInventory .stk-variant-row:hover td{ background:#f6f9fc !important; }
#stockInventory .stk-variant-row.open td{ background:#eef6ff !important; }
#stockInventory .stk-ean-row td{ background:#f8fafc !important; color:#475569 !important; }
#stockInventory .stk-total{ color:#0f172a !important; }
#stockInventory .stk-code,#ordersHub .stk-code,
#stockInventory .ord-id,#ordersHub .ord-id{ color:#475569 !important; }
#stockInventory .stk-muted,#ordersHub .stk-muted{ color:#64748b !important; }
#stockInventory .stk-empty,#ordersHub .stk-empty{ color:#64748b !important; }
#stockInventory .stk-check,#ordersHub .stk-check{ color:#475569 !important; }
#stockInventory .stk-arrow,#ordersHub .stk-arrow{ color:#94a3b8; }

/* status pills / tags -> readable on light */
#stockInventory .stk-ok,#ordersHub .stk-ok{ background:#dcfce7 !important; color:#166534 !important; }
#stockInventory .stk-low,#ordersHub .stk-low{ background:#fee2e2 !important; color:#991b1b !important; }
#stockInventory .stk-itemno{ background:#fef3c7 !important; color:#92400e !important; }
#stockInventory .stk-tag{ background:#eef2f7 !important; color:#475569 !important; }
#stockInventory .stk-mtype{ background:#dbeafe !important; color:#1d4ed8 !important; }
#ordersHub .ord-chan.ord-sc{ background:#fff3e0 !important; color:#b45309 !important; }
#ordersHub .ord-chan.ord-vc{ background:#ede9fe !important; color:#6d28d9 !important; }

/* bars / cards / buttons -> light */
#stockInventory .stk-scan-bar,#ordersHub .stk-scan-bar,
#stockInventory .stk-test-bar,#ordersHub .stk-test-bar,
#stockInventory .stk-fulfil,#ordersHub .stk-fulfil{ background:#f8fafc !important; border:1px solid #e2e8f0 !important; }
#stockInventory .stk-fulfil-head,#ordersHub .stk-fulfil-head{ color:#0f172a !important; }
#ordersHub .ord-card{ background:#fff !important; border:1px solid #e2e8f0 !important; box-shadow:var(--rms-shadow-sm); }
#ordersHub .ord-prod{ color:#0f172a !important; }
#ordersHub .ord-meta{ color:#64748b !important; }
#ordersHub .ord-card.done{ background:#f0fdf4 !important; border-color:#bbf7d0 !important; }
#ordersHub .ord-progress{ background:#e2e8f0 !important; }
#stockInventory .stk-mini,#ordersHub .stk-mini{ background:#eef2f7 !important; color:#334155 !important; border:1px solid #d8e0ea !important; }
#stockInventory .stk-mini:hover,#ordersHub .stk-mini:hover{ background:#e2e8f0 !important; }
#stockInventory .stk-pick,#ordersHub .stk-pick{ background:#eef2f7 !important; border:1px solid #d8e0ea !important; color:#334155 !important; }

/* inputs -> light */
#stockInventory .toolbar input,#stockInventory .toolbar select,
#ordersHub .toolbar input,#ordersHub .toolbar select,
#stockInventory .stk-scan-input,#ordersHub .stk-scan-input,
#stockInventory .stk-scan-order,#ordersHub .stk-scan-order{
  background:#fff !important; border:1px solid #d5dee8 !important; color:#0f172a !important;
}
#stockInventory .toolbar input::placeholder,#ordersHub .toolbar input::placeholder{ color:#94a3b8 !important; }

/* sub-tabs -> light */
#stockInventory .stock-subtabs,#ordersHub .stock-subtabs{ border-bottom-color:#e2e8f0 !important; }
#stockInventory .stock-subtab,#ordersHub .stock-subtab{ color:#64748b !important; }
#stockInventory .stock-subtab.active,#ordersHub .stock-subtab.active{ color:#0284c7 !important; border-bottom-color:#0284c7 !important; }

/* stock adjustment modal (body-level overlay) -> light */
#stockModal .stk-modal{ background:#fff !important; border:1px solid #e2e8f0 !important; }
#stockModal .stk-modal-head{ color:#0f172a !important; border-bottom-color:#eef2f7 !important; }
#stockModal .stk-modal-body label{ color:#64748b !important; }
#stockModal .stk-modal-body input,#stockModal .stk-modal-body select{ background:#fff !important; border:1px solid #d5dee8 !important; color:#0f172a !important; }

/* =====================================================================
   Supplier Products (#products) -> light, consistent with the app.
   ===================================================================== */
#products,#products.card{ background:#fff !important; border:1px solid rgba(226,232,240,.9) !important; box-shadow:var(--rms-shadow-md) !important; }
#products .section-head h2{ color:#0f172a !important; }
#products .section-head p,#products .muted{ color:#64748b !important; }
#products .toolbar input,#products .toolbar select,
#products .form-grid input,#products .form-grid select,#products .form-grid textarea{
  background:#fff !important; border:1px solid #d5dee8 !important; color:#0f172a !important;
}
#products .toolbar input::placeholder,#products .form-grid input::placeholder{ color:#94a3b8 !important; }
#products .import-panel{ background:linear-gradient(135deg,#f8fcff,#eef8ff) !important; border:1px solid #d7e7f1 !important; color:#475569 !important; }
#products .import-panel b{ color:#0369a1 !important; }
#products th{ background:#f4f7fb !important; color:#5a6b7e !important; border-bottom:1px solid #e6edf4 !important; }
#products td{ background:#fff !important; border-bottom:1px solid #eef2f7 !important; color:#0f172a !important; }
#products tr:hover td{ background:#f6f9fc !important; }
#products .badge-way,#products .badge-pending{ background:#dbeafe !important; color:#1d4ed8 !important; }
#products .badge-rec,#products .badge-accepted,#products .badge-good{ background:#dcfce7 !important; color:#166534 !important; }
#products .badge-low,#products .badge-rejected{ background:#fee2e2 !important; color:#991b1b !important; }
#products .product-photo{ background:#f8fafc !important; }
#products .temp-box{ background:#f8fafc !important; border:1px dashed #94a3b8 !important; color:#334155 !important; }
#products .temp-box h3{ color:#0369a1 !important; }
#products .menu-box{ background:#fff !important; border:1px solid #dbe5ee !important; box-shadow:0 18px 45px rgba(0,0,0,.16) !important; }
#products .menu-box button{ background:#fff !important; color:#0f172a !important; }
#products .menu-box button:hover{ background:#f1f5f9 !important; }
#products .menu-box .danger{ background:#fee2e2 !important; color:#991b1b !important; }

/* =====================================================================
   Product Catalogue (#productCatalogue + catalogue-only .cat-* classes) -> light.
   The slide-out panel/editor are catalogue-exclusive classes, styled globally
   so they convert even though the panel renders at body level.
   ===================================================================== */
#productCatalogue,#productCatalogue.cat-page{
  background:#fff !important; border:1px solid rgba(226,232,240,.9) !important;
  border-radius:16px !important; padding:24px !important; box-shadow:var(--rms-shadow-md) !important;
}
#productCatalogue .section-head h2{ color:#0f172a !important; }
#productCatalogue .section-head p{ color:#64748b !important; }
#productCatalogue .stat{ background:linear-gradient(135deg,#fff,#e0f2fe) !important; border:1px solid #dbeafe !important; box-shadow:var(--rms-shadow-sm) !important; }
#productCatalogue .stat .num{ color:#075985 !important; }
#productCatalogue .stat .label{ color:#64748b !important; }
#productCatalogue .toolbar input,#productCatalogue .toolbar select{ background:#fff !important; border:1px solid #d5dee8 !important; color:#0f172a !important; }
#productCatalogue .toolbar input::placeholder{ color:#94a3b8 !important; }
#productCatalogue #catChannelLegend{ background:#f8fafc !important; border:1px solid #e6edf4 !important; }

/* catalogue tables */
.cat-table-wrap{ border:1px solid #e6edf4 !important; background:#fff !important; }
.cat-products-table th{ background:#f4f7fb !important; color:#5a6b7e !important; border-bottom:1px solid #e6edf4 !important; }
.cat-products-table td{ background:#fff !important; color:#0f172a !important; border-bottom:1px solid #eef2f7 !important; }
.cat-products-table tr:hover td{ background:#f6f9fc !important; }
.cat-master-row.expanded td{ background:#eef6ff !important; }
.cat-variant-row td{ background:#f8fbff !important; }
.cat-variant-row:hover td{ background:#eef6ff !important; }
.cat-variant-last td{ border-bottom:2px solid #c7dbf5 !important; }
.cat-expand-arrow{ color:#94a3b8 !important; }
.cat-expand-arrow.expanded{ color:#2563eb !important; }
.cat-avatar{ background:#e0f2fe !important; border:1px solid #d5dee8 !important; color:#0369a1 !important; }
.cat-title{ color:#0f172a !important; }
.cat-subtitle{ color:#64748b !important; }
.cat-inline-meta{ color:#475569 !important; }
.cat-muted,.cat-num{ color:#64748b !important; }
.cat-code{ color:#64748b !important; }
.cat-variant-title{ color:#334155 !important; }
.cat-variant-thumb{ background:#fff !important; border:1px solid #e2e8f0 !important; }

/* status + channel pills */
.cat-status-active{ background:#dcfce7 !important; color:#166534 !important; border-color:#bbf7d0 !important; }
.cat-status-draft{ background:#fef3c7 !important; color:#92400e !important; border-color:#fde68a !important; }
.cat-status-discontinued{ background:#ede9fe !important; color:#5b21b6 !important; border-color:#ddd6fe !important; }
.cat-channel-pill.is-empty{ background:#f1f5f9 !important; color:#94a3b8 !important; border-color:#e2e8f0 !important; }
.cat-channel-pill.cat-pill-sc:not(.is-empty){ background:#fff3e0 !important; color:#b45309 !important; border-color:#fed7aa !important; }
.cat-channel-pill.cat-pill-vc:not(.is-empty){ background:#ede9fe !important; color:#6d28d9 !important; border-color:#ddd6fe !important; }
.cat-channel-pill.cat-pill-temu:not(.is-empty){ background:#ffe4e6 !important; color:#be123c !important; border-color:#fecdd3 !important; }
.cat-ean-tag,.cat-ean-pill-tag{ background:#eef2f7 !important; color:#475569 !important; }
.cat-ean-itemno,.cat-ean-pill-itemno{ background:#fef3c7 !important; color:#92400e !important; }
.cat-ean-more{ color:#2563eb !important; }
.cat-more-btn{ color:#64748b !important; }
.cat-more-btn:hover{ background:#f1f5f9 !important; color:#0f172a !important; }

/* slide-out listings panel */
.cat-panel-backdrop{ background:rgba(15,23,42,.5) !important; }
.cat-panel-shell{ background:#fff !important; border-left:1px solid #e2e8f0 !important; }
.cat-panel-header,.cat-panel-detail,.cat-panel-variant-bar{ background:#f8fafc !important; border-color:#e6edf4 !important; }
.cat-panel-variant-title{ color:#0f172a !important; }
.cat-panel-section-head{ color:#5a6b7e !important; }
.cat-panel-empty{ color:#64748b !important; }
.cat-panel-table th{ background:#f4f7fb !important; color:#0369a1 !important; border-bottom:1px solid #e6edf4 !important; }
.cat-panel-table td{ color:#334155 !important; border-bottom:1px solid #eef2f7 !important; }
.cat-panel-listing-row:hover td{ background:#f6f9fc !important; }
.cat-warning-mini{ background:#fef3c7 !important; color:#92400e !important; border-color:#fde68a !important; }
.cat-asin,.cat-detail-asin{ color:#b45309 !important; }
.cat-detail-title,.cat-detail-price{ color:#0f172a !important; }
.cat-detail-label{ color:#64748b !important; }
.cat-detail-head button{ color:#64748b !important; }
.cat-linked-box{ border-top:1px solid #e6edf4 !important; }
.cat-source-cn{ background:#fee2e2 !important; color:#b91c1c !important; border-color:#fecaca !important; }
.cat-source-uk{ background:#dbeafe !important; color:#1d4ed8 !important; border-color:#bfdbfe !important; }
.cat-empty-state{ background:#f8fbff !important; border-color:#aac5d8 !important; color:#64748b !important; }
.cat-variant-loading-row td{ color:#64748b !important; background:#f8fbff !important; }
.cat-listing-count{ background:#eff6ff !important; border-color:#bfdbfe !important; color:#1d4ed8 !important; }

/* link form + EAN editor inputs */
.cat-link-form label{ color:#64748b !important; }
.cat-link-form input,.cat-link-form select,
.cat-ean-pill-input,.cat-ean-pill-itemno-input{ background:#fff !important; border:1px solid #d5dee8 !important; color:#0f172a !important; }
.cat-ean-pill{ background:#f8fafc !important; border:1px solid #e2e8f0 !important; }
.cat-ean-pill-ean{ color:#0f172a !important; }
.cat-btn-ghost{ background:#fff !important; border:1px solid #d5dee8 !important; color:#475569 !important; }

/* catalogue row action menu */
#productCatalogue .menu-box{ background:#fff !important; border:1px solid #dbe5ee !important; box-shadow:0 18px 45px rgba(0,0,0,.16) !important; }
#productCatalogue .menu-box button{ background:#fff !important; color:#0f172a !important; }
#productCatalogue .menu-box button:hover{ background:#f1f5f9 !important; }
#productCatalogue .menu-box button.danger{ background:#fee2e2 !important; color:#991b1b !important; }

/* catalogue header: stat cards, filter bar, search, legend (separate cat-* classes) */
#productCatalogue .cat-stat-card{ background:linear-gradient(135deg,#fff,#f1f8ff) !important; border:1px solid #e3edf6 !important; box-shadow:var(--rms-shadow-sm) !important; }
#productCatalogue .cat-stat-label{ color:#64748b !important; }
#productCatalogue .cat-stat-value{ color:#0f172a !important; }
#productCatalogue .cat-stat-sub{ color:#94a3b8 !important; }
#productCatalogue .cat-sv-blue{ color:#2563eb !important; }
#productCatalogue .cat-sv-green{ color:#059669 !important; }
#productCatalogue .cat-sv-yellow{ color:#b45309 !important; }
#productCatalogue .cat-search-input{ background:#fff !important; border:1px solid #d5dee8 !important; color:#0f172a !important; }
#productCatalogue .cat-search-input::placeholder{ color:#94a3b8 !important; }
#productCatalogue .cat-search-input:focus{ border-color:#0284c7 !important; box-shadow:0 0 0 3px rgba(2,132,199,.15) !important; }
#productCatalogue .cat-search-icon{ color:#94a3b8 !important; }
#productCatalogue .cat-filter-select{ background:#fff !important; border:1px solid #d5dee8 !important; color:#0f172a !important; }
#productCatalogue .cat-legend{ background:#f8fafc !important; border:1px solid #e6edf4 !important; }
#productCatalogue .cat-legend-label{ color:#64748b !important; }
#productCatalogue .cat-legend-item{ color:#475569 !important; }
#productCatalogue .cat-page-title{ color:#0f172a !important; }
#productCatalogue .cat-page-sub{ color:#64748b !important; }

/* =====================================================================
   Round 2 refinements (cosmetic only).
   ===================================================================== */

/* ---- sidebar: collapsible grouped sections (<details>/<summary>) ---- */
.nav-group{ margin:0; }
.nav-group + .nav-group{ margin-top:4px; }
summary.nav-group-title,summary.nav-subgroup-title{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:8px; user-select:none; border-radius:8px; }
summary.nav-group-title::-webkit-details-marker,summary.nav-subgroup-title::-webkit-details-marker{ display:none; }
summary.nav-group-title{ font-size:12.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.9); padding:12px; margin-top:4px; background:rgba(255,255,255,.05); }
summary.nav-group-title::after{ content:"\25B8"; margin-left:auto; font-size:11px; opacity:.55; transition:transform .15s ease; }
details.nav-group[open] > summary.nav-group-title::after{ transform:rotate(90deg); }
summary.nav-group-title:hover{ background:rgba(255,255,255,.07); color:#fff; }

/* FLAT TOP-LEVEL NAV LINK (Social Media).
   It sits at the same level as the group titles, so it must LOOK like one —
   without it, a plain .nav a rendered smaller, sentence-case and on a lighter
   fill than every heading around it, which read as a mis-styled child item that
   had escaped its group. Higher specificity than `.nav a` so the item styling
   (15px, padding 14px, radius 15px, .12 fill) does not win.
   No ::after caret: there is nothing to expand — it navigates. */
.nav a.nav-flat{
  font-size:12.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:rgba(255,255,255,.9); padding:12px; margin:4px 0 0;
  background:rgba(255,255,255,.05); border-radius:8px;
}
.nav a.nav-flat:hover{ background:rgba(255,255,255,.07); color:#fff; transform:none; }

.nav-subgroup{ margin:2px 0; }
/* Sub-group titles are styled to be IDENTICAL to the "Orders" nav item — same
   pill background, white text, weight, size, padding and left alignment — so
   they read as equal sibling sections, not labels sitting over Orders. */
summary.nav-subgroup-title{ width:100%; font-size:13px; font-weight:600; color:#fff; padding:9px 12px; margin:3px 0; background:rgba(255,255,255,.12); }
summary.nav-subgroup-title::after{ content:"\25B8"; margin-left:auto; font-size:10px; opacity:.45; transition:transform .15s ease; }
details.nav-subgroup[open] > summary.nav-subgroup-title::after{ transform:rotate(90deg); }
summary.nav-subgroup-title:hover{ background:rgba(255,255,255,.25); color:#fff; }
.nav button, .nav a{ display:flex; align-items:center; gap:9px; }
/* Amazon Vendor API Logs is folded into the unified API Logs; kept in DOM (the Amazon
   menu code re-adds it if missing) but hidden so it doesn't duplicate the sidebar item. */
#amazonVendorApiLogNavBtn{ display:none !important; }
.nav-ico{ width:22px; height:22px; object-fit:contain; border-radius:5px; flex:none; background:#fff; padding:2px; }
/* Section-header icons: black-bg/white-symbol SVGs (chip baked into the file) — no white chip here. */
.nav-group-ico{ width:24px; height:24px; object-fit:contain; border-radius:7px; flex:none; }

/* ---- topbar / header refinement ---- */
.eyebrow{ font-size:10px !important; letter-spacing:1px !important; color:#7c97ad !important; font-weight:800 !important; }
.page-title{ font-size:24px !important; line-height:1.15; letter-spacing:-.3px; }
.user-pill{ border:1px solid #bae6fd; box-shadow:0 2px 8px rgba(2,132,199,.08); }
/* Logout: neutral instead of alarm-red (color only; action unchanged) */
.topbar button.danger{ background:#f1f5f9 !important; color:#475569 !important; box-shadow:none !important; }
.topbar button.danger:hover{ background:#e2e8f0 !important; }

/* ---- dashboard ---- */
.stat.glow{ box-shadow:0 0 0 1px rgba(14,165,233,.15), 0 18px 40px rgba(14,116,144,.12) !important; }
.admin-reset-panel{ background:linear-gradient(135deg,#fff7f7,#fff1f1) !important; border:1px solid #f3c9c9 !important; }
.admin-reset-panel h3{ color:#9b2c2c; }
.admin-reset-panel .muted{ color:#a05656 !important; }
.notice-item{ border-left:4px solid #dc2626; }

/* ---- Amazon Connections: was unstyled; bring into the card look ---- */
.amazon-connect-card{ background:#fff; border:1px solid rgba(226,232,240,.9); border-radius:var(--rms-radius); padding:20px; box-shadow:var(--rms-shadow-md); }
.amazon-status{ display:inline-block; padding:5px 12px; border-radius:999px; font-weight:700; font-size:12px; }
.amazon-status.ok{ background:#dcfce7; color:#166534; }
.amazon-status.warn{ background:#fee2e2; color:#991b1b; }

/* ---- unified empty / loading / error states ---- */
.empty-state{ background:#f8fbff; border:1px dashed #bcd2e2; border-radius:14px; padding:40px 18px; text-align:center; color:#64748b; }
.empty-state b{ color:#0f172a; }
.empty-state.is-loading{ border-style:solid; background:#f4f8fc; color:#52708a; }
.empty-state.is-error{ background:#fef2f2; border-color:#f3c0c0; color:#991b1b; }

/* ---- login: prominent error styling ---- */
.error-text{ font-weight:700; }
#loginMsg:not(:empty){ background:#fee2e2; color:#991b1b; padding:11px 14px; border-radius:12px; margin-top:14px; }

/* ---- radios & checkboxes: the global input rule (min-width:170px, big padding)
   was inflating them and pushing labels onto the next line. Reset to natural size. ---- */
input[type=radio],input[type=checkbox]{
  min-width:0 !important; width:auto !important; height:auto !important;
  padding:0 !important; margin:0 6px 0 0 !important; vertical-align:middle;
  box-shadow:none !important; accent-color:#0284c7;
}
label > input[type=radio],label > input[type=checkbox]{ flex:none; }
.permission-box label,.seller-filters label{ display:inline-flex; align-items:center; gap:2px; white-space:nowrap; }

/* ---- Amazon ASN API: hide the duplicate static header. The page is built with a
   stale "EDI-style" header as a direct child of the section, while the live render
   writes the real header inside #amazonAsnApiStatus — so two headers showed. Hiding
   only the direct-child stale one is purely visual; all live controls remain. ---- */
#amazonAsnApiTab > .section-head{ display:none !important; }

/* ---- form layout: even, top-aligned fields. Was ragged widths + center-aligned
   rows (tall textareas pushed short inputs to float mid-row). ---- */
.form-grid{ align-items:flex-start !important; }
.form-grid > input,.form-grid > select,.form-grid > textarea{ flex:1 1 200px; }

/* ---- Containers: hint under the empty detail sub-sections so they don't look bare ---- */
#containerItemsTable:empty::after{ content:"Select a container above to view its items."; }
#containerDocsTable:empty::after{ content:"Select a container above to view its documents."; }
#containerItemsTable:empty::after,#containerDocsTable:empty::after{ display:block; color:#94a3b8; font-size:13px; padding:6px 2px 14px; }

/* =====================================================================
   Round 3: unify brand blue, table figures, premium login.
   ===================================================================== */

/* (1)(2) One primary blue for generic + catalogue primary buttons & links, tied to
   the navy-teal sidebar family. Channel-themed (.bnq-*, .stk-*, seller, temu…) and
   semantic buttons keep their colours via higher specificity, so this only unifies
   the previously-mismatched generic blues (was #03658e vs #2563eb vs #0284c7…). */
button{ background:var(--rms-primary); }
button:hover{ background:var(--rms-primary-d); }
.cat-btn-primary{ background:var(--rms-primary) !important; }
.cat-btn-primary:hover{ background:var(--rms-primary-d) !important; }
.user-pill{ color:var(--rms-primary-d); }
/* re-assert semantic button colours so the generic rule never bleeds onto them */
button.success{ background:#15803d; } button.success:hover{ background:#136a33; }
button.warning{ background:#b45309; } button.warning:hover{ background:#92400e; }
button.danger{ background:#b42318; } button.danger:hover{ background:#991b1b; }

/* (5) Numbers line up with tabular figures; reinforce right-align on numeric cells */
table td,table th{ font-variant-numeric:tabular-nums; }
.cat-num,.stk-num{ text-align:right; }

/* (8) More premium login */
.login-shell{ background:linear-gradient(135deg,#06253f,#0a4d6e 55%,#0a6aa1) !important; }
.login-card{ padding:36px 34px; }
.login-card h1{ font-size:24px; letter-spacing:-.3px; margin-bottom:4px; }
.login-card > p{ color:#64748b; margin-top:0; }
.brand-mark{ box-shadow:0 12px 26px rgba(3,105,161,.35); }

/* ---- dashboard brand logo ---- */
.repark-brand{ margin:0 0 16px; }
.repark-logo{ height:42px; width:auto; display:block; }

/* ---- tidy custom scrollbars ---- */
*{ scrollbar-width: thin; scrollbar-color: #c2cfdb transparent; }
*::-webkit-scrollbar{ width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb{
  background: #c2cfdb;
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover{ background: #a7b6c6; }

/* =====================================================================
   Round 4: consistency cleanup (cosmetic only).
   - .qr-box / .ghost moved here out of inline <style> in index.html.
   - one canonical grid gap; the base sheet had a stray 17px.
   ===================================================================== */

/* 2FA QR code box (was inline in index.html) */
.qr-box{ display:flex; justify-content:center; align-items:center; background:#fff; border:1px solid #d7dde5; border-radius:14px; padding:12px; margin:10px auto; max-width:260px; }
.qr-box svg{ max-width:220px; height:auto; }

/* (2) .ghost = neutral secondary button. One canonical look (was a light-blue
   rule in style.css fighting a grey inline override). Grey wins here cleanly. */
.ghost{ background:#eef2f7; color:#111827; }
.ghost:hover{ background:#e2e8f0; }

/* (4) one grid gap (base sheet used 17px on .grid, 18px elsewhere) */
.grid{ gap:18px; }

/* ============================================================
   Unified marketplace order-page banner (B&Q is the reference).
   Every channel (B&Q / Temu / TikTok / eBay / Shopify) uses the
   SAME structure + sizing here, so banners are pixel-identical.
   Only colour differs, passed per page via two CSS variables set
   inline on the elements: --mp-banner-bg and --mp-accent.
   ============================================================ */
.mp-banner{ padding:22px 24px; color:#fff; background:var(--mp-banner-bg,#333); }
.mp-banner .mp-brand{ display:flex; align-items:center; gap:14px; }
.mp-banner .mp-logo{ width:44px; height:44px; border-radius:10px; background:#fff; padding:6px; object-fit:contain; flex:0 0 auto; box-shadow:0 2px 6px rgba(0,0,0,.18); }
.mp-banner .mp-titles h2{ margin:0; font-size:26px; font-weight:800; color:#fff; letter-spacing:.2px; line-height:1.1; }
.mp-banner .mp-sub{ color:rgba(255,255,255,.92); font-size:12px; margin-top:3px; }
.mp-tabs{ display:flex; gap:10px; margin-top:16px; flex-wrap:wrap; }
.mp-tabs button{ background:rgba(255,255,255,.16); color:#fff; border:0; padding:8px 14px; font-weight:700; border-radius:7px; cursor:pointer; transition:.15s; font-size:13px; line-height:1; }
.mp-tabs button:hover{ background:rgba(255,255,255,.30); }
.mp-tabs button.active{ background:#fff; color:var(--mp-accent,#333); }
.mp-tabs button .n{ opacity:.7; font-weight:800; margin-left:5px; }
/* Controls row: search left, date-range + Pull Orders + Refresh right. */
.mp-toolbar{ display:flex; gap:10px; align-items:center; justify-content:space-between; padding:14px 24px; background:#f7f7f8; border-bottom:1px solid #e6e6e9; flex-wrap:wrap; }
.mp-toolbar .left,.mp-toolbar .right{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.mp-toolbar input,.mp-toolbar select{ height:36px; border:1px solid #d9d9de; border-radius:7px; padding:0 11px; background:#fff; font-size:13px; color:#1f2328; min-width:0; }
/* Search box: one explicit width so every channel's search bar is identical
   (overrides the app-wide `input{min-width:170px}` in style.css that otherwise
   let eBay/TikTok size differently from the rest). */
.mp-toolbar input{ width:260px; max-width:100%; flex:0 1 260px; }
.mp-toolbar input:focus,.mp-toolbar select:focus{ outline:none; border-color:var(--mp-accent,#888); box-shadow:0 0 0 3px rgba(0,0,0,.08); }
.mp-toolbar button{ height:36px; border:0; background:var(--mp-accent,#333); color:#fff; font-weight:700; padding:0 16px; border-radius:7px; cursor:pointer; transition:.15s; }
.mp-toolbar button:hover{ filter:brightness(.93); }
.mp-toolbar button.ghost{ background:#fff; border:1px solid #d9d9de; color:#333; }
.mp-toolbar button.ghost:hover{ filter:none; background:#eef2f7; }
/* Connect + connected-shop chips bar (channels that support connecting). */
.mp-connbar{ display:flex; align-items:center; gap:10px; padding:10px 24px; background:#fff; border-bottom:1px solid #eee; flex-wrap:wrap; }
.mp-connbar .mp-connect{ background:var(--mp-accent,#333); color:#fff; border:0; border-radius:8px; padding:9px 16px; font-weight:800; cursor:pointer; font-size:13px; }
.mp-connbar .mp-connect:hover{ filter:brightness(.93); }
.mp-connbar .mp-cl{ font-weight:700; color:#56607a; font-size:12px; }
.mp-connbar .mp-spacer{ margin-left:auto; }

/* ============================================================
   Amazon Vendor PO API — apply-to-all date, exports, sticky
   header, toast. Scoped to the Vendor PO API detail screen so
   it never affects other tabs.
   ============================================================ */
#amazonVendorApiDetail .amz-poitems-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap; margin:14px 0 8px;
}
#amazonVendorApiDetail .amz-bulk-date{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  background:#f3f7fb; border:1px solid #d8e3ee; border-radius:10px;
  padding:7px 10px;
}
#amazonVendorApiDetail .amz-bulk-date-label{ font-weight:700; color:#33506b; font-size:13px; }
#amazonVendorApiDetail .amz-bulk-date input[type=date]{
  height:34px; border:1px solid #cdd7e2; border-radius:7px; padding:0 9px; background:#fff; font-size:13px;
}
#amazonVendorApiDetail .amz-bulk-date button{ height:34px; border-radius:7px; cursor:pointer; }
#amazonVendorApiDetail button[disabled]{ opacity:.5; cursor:not-allowed; }

/* Sticky header for long POs. */
#amazonVendorApiDetail .amz-poitems-scroll{ max-height:70vh; overflow:auto; border-radius:10px; }
#amazonVendorApiDetail .amz-poitems-table{ width:100%; }
#amazonVendorApiDetail .amz-poitems-table thead th{
  position:sticky; top:0; z-index:3;
  background:#00475f; color:#fff;
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.18);
}

/* Toast notifications. */
.amz-toast-host{
  position:fixed; right:18px; bottom:18px; z-index:9999;
  display:flex; flex-direction:column; gap:8px; pointer-events:none;
}
.amz-toast{
  min-width:200px; max-width:380px; padding:11px 15px; border-radius:10px;
  color:#fff; font-size:13.5px; font-weight:600; box-shadow:0 8px 24px rgba(0,0,0,.22);
  opacity:1; transform:translateY(0); transition:opacity .35s, transform .35s;
}
.amz-toast-success{ background:#15803d; }
.amz-toast-error{ background:#b91c1c; }
.amz-toast-out{ opacity:0; transform:translateY(8px); }

/* ============================================================
   Amazon Vendor SKU — editable combo-box cell (PO Items table
   + SKU Map tab). Every cell is an editable field, BLANK ones
   included, with a clear placeholder and a ~44px tap target.
   ============================================================ */
.amz-vsku-edit{
  width:100%; min-width:150px; max-width:200px; box-sizing:border-box;
  min-height:36px; padding:6px 9px; margin:0;
  border:1px solid #cdd7e2; border-radius:7px; background:#fff;
  font-size:13px; color:#1f2328; cursor:text;
  /* Guarantee the field is interactive and above any sticky-header / overlay. */
  pointer-events:auto; position:relative; z-index:1; display:inline-block; opacity:1;
}
.amz-vsku-edit:hover{ border-color:#9fb3c8; }
.amz-vsku-edit:focus{ outline:none; border-color:#00475f; box-shadow:0 0 0 3px rgba(0,71,95,.12); }
/* Blank cells must look obviously clickable/fillable, not like static text. */
.amz-vsku-edit.is-empty{
  border-style:dashed; border-color:#9aa7b5; background:#f7fafc;
}
.amz-vsku-edit.is-empty::placeholder{ color:#5b6b7b; opacity:1; font-weight:600; }
/* Bigger tap target on touch / small screens. */
@media (max-width: 820px){
  .amz-vsku-edit{ min-height:44px; font-size:15px; }
}

/* ============================================================
   Amazon Vendor SKU — explicit-save editable cell (PO Items
   table + SKU Map tab). Pencil affordance, Save button shown
   only after a change, "Saved ✓" confirmation. Mobile-safe.
   ============================================================ */
.amz-vsku-cell{ display:flex; flex-direction:column; gap:5px; max-width:220px; }
.amz-vsku-inputwrap{ position:relative; display:block; }
.amz-vsku-inputwrap .amz-vsku-edit{ width:100%; max-width:none; padding-right:26px; }
/* Pencil makes it obviously editable (sits inside the field, non-interactive). */
.amz-vsku-pencil{ position:absolute; right:8px; top:50%; transform:translateY(-50%); font-size:12px; opacity:.5; pointer-events:none; }
.amz-vsku-edit:focus + .amz-vsku-pencil{ opacity:0; }
.amz-vsku-actions{ display:flex; align-items:center; gap:8px; }
.amz-vsku-save{ min-height:32px; padding:5px 14px; border:0; border-radius:7px; background:#00475f; color:#fff; font-weight:700; font-size:12.5px; cursor:pointer; }
.amz-vsku-save:hover{ filter:brightness(.94); }
.amz-vsku-save:disabled{ opacity:.6; cursor:default; }
.amz-vsku-saved{ color:#15803d; font-weight:800; font-size:12.5px; }
@media (max-width: 820px){
  .amz-vsku-cell{ max-width:100%; }
  .amz-vsku-save{ min-height:44px; width:100%; font-size:15px; }
}

/* Nav items rendered as links (right-click -> open in new tab) — kill anchor defaults */
.sidebar .nav a{ text-decoration:none; }
.sidebar .nav a:hover, .sidebar .nav a:focus{ text-decoration:none; }