/* ────────────────────────────────────────
   Shared app-shell design system: the .sk-list list shell, the .cd-page
   detail shell and their pills/chips. Extracted from storekeeper.css so
   EVERY theme gets them - they only read base --sk-* tokens, which each
   theme defines, so dark mode and theme accents follow automatically.
   Loaded from base.html.twig BEFORE the theme stylesheet: a theme can
   still override any rule here by redefining it.
   ──────────────────────────────────────── */
/* ────────────────────────────────────────
   Customer detail page (Option A)
   Scoped to .cd-page; tokens mirror the design's --orange-x / --neutral-x
   scale but resolve to the existing --sk-* theme so dark mode follows.
   WCAG fixes from design chat: btn-primary = black-on-orange, fg-3 = #737373.
   ──────────────────────────────────────── */
.cd-page {
  /* Local token scope */
  --cd-orange-50:  #FFF5E5;
  --cd-orange-100: #FFEBCC;
  --cd-orange-200: #FFD899;
  --cd-orange-500: var(--sk-primary);
  --cd-orange-600: var(--sk-primary-hover);
  --cd-orange-700: #B36E00;

  --cd-bg:         var(--sk-bg);
  --cd-surface:    var(--sk-card-bg);
  --cd-fg-1:       var(--sk-text);
  --cd-fg-2:       var(--sk-text-muted);
  --cd-fg-3:       #737373;
  --cd-fg-4:       #9CA3AF;
  --cd-border:     var(--sk-border);
  --cd-border-strong: var(--sk-border-strong);
  --cd-success:    #0F8A50;
  --cd-danger:     var(--sk-danger);

  background: var(--cd-bg);
  color: var(--cd-fg-1);
  min-height: 100%;
}
html[data-scheme="dark"] .cd-page {
  --cd-orange-50:  #2A1F0A;
  --cd-orange-100: #3D2C0E;
  --cd-orange-700: #FFB020;
  --cd-fg-3:       #A0A3AA;
  --cd-fg-4:       #6B6E75;
}

/* Left-aligned, gutter inherited from .sk-content (no centering / no extra
   horizontal padding) so detail pages line up with list/overview pages. */
.cd-page .cd-inner { margin: 0; padding: 0 0 64px; }

/* Sticky frosted header */
.cd-page .cd-head {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 10px;
  background: color-mix(in srgb, var(--cd-bg) 88%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  margin: 0 0 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--cd-border);
  min-width: 0;
}
.cd-page .cd-back {
  width: 32px; height: 32px; border-radius: 8px;
  border: 1px solid var(--cd-border); background: var(--cd-surface);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--cd-fg-2); text-decoration: none; flex: none;
}
.cd-page .cd-back:hover { color: var(--cd-fg-1); border-color: var(--sk-border-strong); }
.cd-page .cd-title {
  font-size: 15px; font-weight: 600; margin: 0;
  min-width: 0; flex: 0 1 auto;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  letter-spacing: -0.01em;
}
.cd-page .cd-id {
  font-family: var(--sk-font-data); font-size: 12px; color: var(--cd-fg-3);
  padding: 3px 8px; border: 1px solid var(--cd-border); border-radius: 999px;
  background: var(--cd-surface); flex: none;
}
.cd-page .head-actions { margin-left: auto; display: flex; gap: 6px; flex: none; }

/* Buttons */
.cd-page .btn {
  font-family: inherit; font-size: 13px; height: 36px; padding: 0 14px;
  border: 1px solid var(--cd-border); border-radius: 8px;
  background: var(--cd-surface); color: var(--cd-fg-1);
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
}
.cd-page .btn:hover { background: var(--cd-bg); }
.cd-page .btn-primary {
  background: var(--cd-orange-500); border-color: var(--cd-orange-500);
  color: #000; font-weight: 600;
}
.cd-page .btn-primary:hover { background: var(--cd-orange-600); border-color: var(--cd-orange-600); }
.cd-page .btn-danger { color: var(--cd-danger); border-color: var(--cd-border); background: var(--cd-surface); }
.cd-page .btn-danger:hover { background: #FCE6E8; }
.cd-page .btn-iconbtn { width: 32px; height: 32px; padding: 0; justify-content: center; }

/* Hero band */
.cd-page .vA-hero {
  background: var(--cd-surface); border: 1px solid var(--cd-border-strong);
  box-shadow: 0 1px 3px rgba(17, 24, 39, 0.08);
  border-radius: 12px; padding: 16px 22px; margin-bottom: 16px;
  display: flex; flex-direction: column; gap: 14px;
}
.cd-page .vA-hero-segs { display: flex; flex-wrap: wrap; gap: 4px; }
.cd-page .vA-hero-row2 {
  display: grid; grid-template-columns: 1fr auto; gap: 24px;
  align-items: center; padding-top: 12px; border-top: 1px solid var(--cd-border);
}
.cd-page .vA-hero-meta {
  display: grid; grid-template-columns: auto 1fr; gap: 6px 12px;
  font-size: 13px; align-items: center; min-width: 0;
}
.cd-page .vA-hero-meta .ico { color: var(--cd-fg-3); display: inline-flex; }
.cd-page .vA-hero-meta .v { color: var(--cd-fg-1); word-break: break-word; min-width: 0; }
.cd-page .vA-hero-meta .v.mono { font-family: var(--sk-font-data); font-size: 12px; }
.cd-page .vA-hero-kpis { display: flex; gap: 12px; }
.cd-page .vA-hero-kpi {
  padding: 10px 14px; border-left: 1px solid var(--cd-border);
  display: flex; flex-direction: column; gap: 2px;
}
.cd-page .vA-hero-kpi:first-child { border-left: 0; padding-left: 4px; }
.cd-page .vA-hero-kpi .lbl { font-size: 11px; color: var(--cd-fg-3); white-space: nowrap; }
.cd-page .vA-hero-kpi .val { font-family: var(--sk-font-data); font-size: 18px; font-weight: 500; white-space: nowrap; }
.cd-page .vA-hero-kpi .delta { font-size: 11px; color: var(--cd-success); font-family: var(--sk-font-data); white-space: nowrap; }
.cd-page .vA-hero-kpi .delta.warn { color: var(--cd-orange-700); }

/* Chips */
.cd-page .chip {
  font-size: 11px; padding: 3px 8px; border-radius: 999px;
  background: var(--cd-surface); border: 1px solid var(--cd-border-strong); color: var(--cd-fg-2);
}
.cd-page .chip.brand { background: var(--cd-orange-50); border-color: var(--cd-orange-100); color: var(--cd-orange-700); }
.cd-page .chip.more { background: transparent; color: var(--cd-fg-3); border-style: dashed; }

/* Tabs + content grid */
.cd-page .vA-grid { display: grid; grid-template-columns: 220px 1fr; gap: 16px; align-items: start; }
.cd-page .vA-grid.is-collapsed { grid-template-columns: 56px 1fr; }

.cd-page .cd-tabs {
  position: sticky; top: 72px;
  background: var(--cd-surface); border: 1px solid var(--cd-border);
  border-radius: 12px; padding: 8px;
}
.cd-page .cd-tabs-toggle {
  display: flex; align-items: center; gap: 6px; width: 100%;
  padding: 6px 8px 8px; border: 0; background: transparent;
  color: var(--cd-fg-3); font-size: 11px; font-weight: 500;
  letter-spacing: 0.04em; cursor: pointer;
  border-bottom: 1px solid var(--cd-border); margin-bottom: 4px;
}
.cd-page .cd-tabs-toggle:hover { color: var(--cd-fg-1); }
.cd-page .cd-tabs-toggle .lbl { text-transform: uppercase; letter-spacing: 0.06em; }
.cd-page .cd-tabs-toggle .chev { margin-left: auto; color: var(--cd-fg-3); display: inline-flex; }

.cd-page .cd-tabs-group {
  padding: 12px 10px 4px; font-size: 10px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--cd-fg-3);
}
.cd-page .cd-tab {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border-radius: 6px; font-size: 13px; color: var(--cd-fg-1);
  cursor: pointer; transition: background 0.18s; line-height: 1.2;
  width: 100%; border: 0; background: transparent; text-align: left;
  font-family: inherit;
}
.cd-page .cd-tab:hover { background: var(--cd-bg); }
.cd-page .cd-tab.active { background: var(--cd-orange-50); color: var(--cd-orange-700); font-weight: 500; }
.cd-page .cd-tab .ico { color: var(--cd-fg-3); display: inline-flex; flex: none; }
.cd-page .cd-tab.active .ico { color: var(--cd-orange-500); }
.cd-page .cd-tab .count {
  margin-left: auto; font-family: var(--sk-font-data); font-size: 11px;
  color: var(--cd-fg-3); padding: 1px 6px; border-radius: 999px;
  background: var(--cd-bg); border: 1px solid var(--cd-border);
}
.cd-page .cd-tab.active .count { background: var(--cd-surface); color: var(--cd-orange-700); border-color: var(--cd-orange-100); }

/* Collapsed rail */
.cd-page .cd-tabs.collapsed { padding: 6px; }
.cd-page .cd-tabs.collapsed .cd-tabs-toggle { justify-content: center; padding: 6px 0 8px; }
.cd-page .cd-tabs.collapsed .cd-tabs-toggle .lbl { display: none; }
.cd-page .cd-tabs.collapsed .cd-tab { justify-content: center; padding: 9px 0; gap: 0; position: relative; }
.cd-page .cd-tabs.collapsed .cd-tab > span:not(.ico) { display: none; }
.cd-page .cd-tabs.collapsed .cd-tabs-group { display: none; }
.cd-page .cd-tabs.collapsed .cd-tab[data-has-count="true"]::after {
  content: ''; position: absolute; top: 6px; right: 8px;
  width: 6px; height: 6px; border-radius: 999px; background: var(--cd-orange-500);
}

/* Content */
.cd-page .cd-content { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.cd-page .cd-panel { display: flex; flex-direction: column; gap: 16px; }
.cd-page .cd-panel[hidden] { display: none; }
.cd-page .card {
  background: var(--cd-surface); border: 1px solid var(--cd-border-strong); border-radius: 12px;
  box-shadow: 0 1px 3px rgba(17, 24, 39, 0.08);
}
.cd-page .card-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--cd-border);
}
.cd-page .card-title { font-size: 14px; font-weight: 600; margin: 0; }
.cd-page .card-body { padding: 18px; }
.cd-page .card-actions { display: flex; gap: 8px; }

/* KPI strip */
.cd-page .kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.cd-page .kpi {
  background: var(--cd-surface); border: 1px solid var(--cd-border);
  border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column;
  gap: 4px; min-width: 0;
}
.cd-page .kpi-label {
  font-size: 11px; color: var(--cd-fg-3);
  display: flex; align-items: center; gap: 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cd-page .kpi-value {
  font-family: var(--sk-font-data); font-size: 18px; font-weight: 500;
  letter-spacing: -0.01em; color: var(--cd-fg-1); white-space: nowrap;
}
.cd-page .kpi-meta {
  font-size: 11px; color: var(--cd-fg-3); font-family: var(--sk-font-data);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cd-page .kpi-meta.warn { color: var(--cd-orange-700); }
.cd-page .kpi-meta.up   { color: var(--cd-success); }

/* Field grid */
.cd-page .fg-wide { display: grid; grid-template-columns: 160px 1fr 160px 1fr; gap: 12px 20px; }
.cd-page .fg-wide .label { font-size: 12px; color: var(--cd-fg-3); padding-top: 2px; }
.cd-page .fg-wide .value { font-size: 14px; color: var(--cd-fg-1); word-break: break-word; min-width: 0; }
.cd-page .fg-wide .value.mono { font-family: var(--sk-font-data); }
.cd-page .fg-wide .value.muted { color: var(--cd-fg-3); }

/* Tables */
.cd-page .tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.cd-page .tbl th {
  text-align: left; font-size: 11px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--cd-fg-3);
  padding: 10px 14px; border-bottom: 1px solid var(--cd-border);
  background: var(--cd-bg);
}
.cd-page .tbl td { padding: 12px 14px; border-bottom: 1px solid var(--cd-border); vertical-align: middle; }
.cd-page .tbl tr:last-child td { border-bottom: 0; }
.cd-page .tbl tr:hover td { background: var(--cd-bg); }
.cd-page .tbl .mono { font-family: var(--sk-font-data); }
.cd-page .tbl .num { font-family: var(--sk-font-data); text-align: right; }
.cd-page .cell-sub { font-size: 11px; color: var(--cd-fg-3); font-family: var(--sk-font-data); margin-top: 2px; }

/* Status pills */
.cd-page .status { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 500; line-height: 1.5; }
.cd-page .status.new      { background: #E6F7EE; color: #137A4D; }
.cd-page .status.draft    { background: var(--cd-orange-50); color: var(--cd-orange-700); }
.cd-page .status.complete { background: #E6F7EE; color: #137A4D; }
.cd-page .status.warn     { background: #FCE6E8; color: var(--cd-danger); }
.cd-page .status.muted    { background: var(--cd-bg); color: var(--cd-fg-3); border: 1px solid var(--cd-border); }

/* Empty states */
.cd-page .empty { padding: 36px 16px; text-align: center; color: var(--cd-fg-3); font-size: 13px; }
.cd-page .empty .ico { display: inline-flex; color: var(--cd-fg-4); margin-bottom: 8px; }

/* Responsive: stack the hero KPIs under the meta on narrow screens */
@media (max-width: 1024px) {
  .cd-page .vA-grid { grid-template-columns: 1fr; }
  .cd-page .cd-tabs { position: static; }
  .cd-page .vA-hero-row2 { grid-template-columns: 1fr; }
  .cd-page .vA-hero-kpis { flex-wrap: wrap; }
  .cd-page .kpis { grid-template-columns: repeat(2, 1fr); }
  .cd-page .fg-wide { grid-template-columns: 1fr 1fr; }
}

/* ────────────────────────────────────────
   Customer list page (.sk-list)
   Scoped to .sk-list; tokens via existing --sk-* theme so dark mode works.
   ──────────────────────────────────────── */
.sk-list {
  --sk-list-orange-50:  #FFF5E5;
  --sk-list-orange-100: #FFEBCC;
  --sk-list-orange-200: #FFD899;
  --sk-list-orange-500: var(--sk-primary);
  --sk-list-orange-600: var(--sk-primary-hover);
  --sk-list-orange-700: #B36E00;

  --sk-list-bg:         var(--sk-bg);
  --sk-list-surface:    var(--sk-card-bg);
  --sk-list-fg-1:       var(--sk-text);
  --sk-list-fg-2:       var(--sk-text-muted);
  --sk-list-fg-3:       #737373;
  --sk-list-fg-4:       #9CA3AF;
  --sk-list-fg-450:     #2A2A2A;
  --sk-list-border:     var(--sk-border);
  --sk-list-border-strong: var(--sk-border-strong);
  --sk-list-info-100:   #E6EDFF;
  --sk-list-chip:       #ECEDEF;
  --sk-list-danger:     var(--sk-danger);

  /* Horizontal + top gutter come from .sk-content so list pages line up with
     every other page; only the extra bottom breathing room is local. */
  padding: 0 0 40px;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  font-family: var(--sk-font-body);
  color: var(--sk-list-fg-1);
}
html[data-scheme="dark"] .sk-list {
  --sk-list-orange-50:  #2A1F0A;
  --sk-list-orange-100: #3D2C0E;
  --sk-list-orange-200: #5C400F;
  --sk-list-fg-3:       #A0A3AA;
  --sk-list-fg-4:       #6B6E75;
  --sk-list-fg-450:     #C5C7CC;
  --sk-list-info-100:   #1F2A4A;
  --sk-list-chip:       #262931;
}

.sk-list .btn {
  font-family: inherit; font-size: 13px; font-weight: 500;
  height: 36px; padding: 0 14px; border-radius: 8px;
  border: 1px solid var(--sk-list-border); background: var(--sk-list-surface);
  color: var(--sk-list-fg-450); cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
  white-space: nowrap; text-decoration: none;
}
.sk-list .btn:hover:not(:disabled) { background: var(--sk-list-bg); border-color: var(--sk-list-border-strong); }
.sk-list .btn:disabled { opacity: 0.55; cursor: not-allowed; }
.sk-list .btn-primary { background: var(--sk-list-orange-500); border-color: var(--sk-list-orange-500); color: #000; font-weight: 600; }
.sk-list .btn-primary:hover:not(:disabled) { background: var(--sk-list-orange-600); border-color: var(--sk-list-orange-600); }
.sk-list .btn-ghost { border-color: transparent; background: transparent; }
.sk-list .btn-ghost:hover { background: var(--sk-list-bg); }
.sk-list .btn-sm { height: 30px; padding: 0 10px; font-size: 12px; }
.sk-list .btn-icon { width: 36px; height: 36px; padding: 0; justify-content: center; }

/* Header */
.sk-list .sk-list-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; margin-bottom: 20px;
}
.sk-list .sk-list-crumb {
  font-size: 12px; color: var(--sk-list-fg-3); letter-spacing: 0.02em;
  margin-bottom: 6px; display: flex; align-items: center; gap: 6px;
}
.sk-list .sk-list-crumb svg { opacity: 0.5; }
.sk-list .sk-list-title {
  font-size: 28px; font-weight: 700; letter-spacing: -0.02em;
  line-height: 1.15; margin: 0; color: var(--sk-list-fg-1);
}
.sk-list .sk-list-subtitle {
  font-size: 13px; color: var(--sk-list-fg-2); margin-top: 6px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.sk-list .sk-list-subtitle b {
  font-family: var(--sk-font-data); font-weight: 500;
  color: var(--sk-list-fg-1); letter-spacing: 0.01em;
}
.sk-list .sk-list-subtitle .dot {
  width: 3px; height: 3px; background: var(--sk-list-border-strong);
  border-radius: 50%; display: inline-block;
}
.sk-list .sk-list-header-actions { display: flex; align-items: center; gap: 8px; }

/* Segment tabs */
.sk-list .sk-list-segments {
  display: flex; align-items: center; gap: 2px;
  border-bottom: 1px solid var(--sk-list-border);
  margin-bottom: 20px; flex-wrap: wrap;
}
.sk-list .sk-list-segment {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px 12px; border: none; background: transparent;
  font: inherit; font-size: 13px; color: var(--sk-list-fg-2);
  cursor: pointer; border-bottom: 2px solid transparent;
  margin-bottom: -1px; white-space: nowrap; text-decoration: none;
  transition: color 0.12s, border-color 0.12s;
}
.sk-list .sk-list-segment:hover { color: var(--sk-list-fg-1); }
.sk-list .sk-list-segment.is-active {
  color: var(--sk-list-fg-1); border-bottom-color: var(--sk-list-orange-500); font-weight: 500;
}
.sk-list .sk-list-segment-add {
  margin-left: auto; color: var(--sk-list-fg-3); font-size: 12px;
  padding: 8px 10px; display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: none; cursor: pointer;
}
.sk-list .sk-list-segment-add:hover:not(:disabled) { color: var(--sk-list-fg-450); }
.sk-list .sk-list-segment-add:disabled { opacity: 0.55; cursor: not-allowed; }

/* Toolbar */
.sk-list .sk-list-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.sk-list .sk-list-search { position: relative; flex: 1; min-width: 280px; max-width: 420px; display: block; }
.sk-list .sk-list-search input {
  width: 100%; height: 36px; font: inherit; font-size: 13px;
  padding: 0 36px; border: 1px solid var(--sk-list-border); border-radius: 8px;
  background: var(--sk-list-surface); color: var(--sk-list-fg-1); outline: none;
  transition: border-color 0.12s, box-shadow 0.12s; box-sizing: border-box;
}
.sk-list .sk-list-search input::placeholder { color: var(--sk-list-fg-4); }
.sk-list .sk-list-search input:focus { border-color: var(--sk-list-orange-500); box-shadow: 0 0 0 3px rgba(255, 157, 0, 0.20); }
.sk-list .sk-list-search .lead { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--sk-list-fg-3); display: inline-flex; }
.sk-list .sk-list-search .kbd {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  font-family: var(--sk-font-data); font-size: 10.5px; color: var(--sk-list-fg-3);
  border: 1px solid var(--sk-list-border); background: var(--sk-list-bg);
  border-radius: 4px; padding: 2px 5px; line-height: 1;
}

.sk-list .sk-list-popover-wrap { position: relative; }
.sk-list .sk-list-filter-btn .badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 6px; border-radius: 999px;
  font-size: 11px; font-weight: 600; background: var(--sk-list-orange-500);
  color: #000; margin-left: 2px;
}

.sk-list .sk-list-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sk-list .sk-list-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 28px;
  padding: 0 4px 0 10px; border-radius: 999px; border: 1px solid var(--sk-list-border);
  background: var(--sk-list-surface); font-size: 12px; color: var(--sk-list-fg-450);
}
.sk-list .sk-list-chip .chip-key { color: var(--sk-list-fg-3); }
.sk-list .sk-list-chip .chip-val { font-weight: 500; color: var(--sk-list-fg-1); }
.sk-list .sk-list-chip .chip-x {
  width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; border: none; background: transparent; color: var(--sk-list-fg-3);
  cursor: pointer; text-decoration: none;
}
.sk-list .sk-list-chip .chip-x:hover { background: var(--sk-list-bg); color: var(--sk-list-fg-1); }
.sk-list .sk-list-chip-clear {
  font-size: 12px; color: var(--sk-list-fg-3); background: none; border: none;
  cursor: pointer; padding: 4px 6px; text-decoration: none;
}
.sk-list .sk-list-chip-clear:hover { color: var(--sk-list-orange-500); }

.sk-list .sk-list-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* Card
   Background matches the header/footer band colour (not the white row surface):
   with border-radius + overflow:hidden the card's own background is what peeks
   through the rounded corners above the header row and below the footer. Rows
   stay white via their own td background. */
.sk-list .sk-list-card {
  background: var(--sk-list-bg); border: 1px solid var(--sk-list-border-strong);
  border-radius: 12px; overflow: hidden;
  box-shadow: 0 1px 3px rgba(17, 24, 39, 0.08);
}

/* Bulk action bar */
.sk-list .sk-list-bulk {
  display: flex; align-items: center; gap: 14px; padding: 10px 16px;
  background: var(--sk-list-orange-50); border-bottom: 1px solid var(--sk-list-orange-200);
  font-size: 13px; color: var(--sk-list-orange-700);
}
/* The class' display:flex outranks the UA [hidden] rule, so the bar must be
   explicitly hidden until rows are selected (JS toggles the attribute). */
.sk-list .sk-list-bulk[hidden] { display: none; }
.sk-list .sk-list-bulk .bulk-count { font-weight: 600; color: var(--sk-list-fg-1); }
.sk-list .sk-list-bulk .bulk-actions { margin-left: auto; display: flex; gap: 6px; }
.sk-list .sk-list-bulk button {
  font-family: inherit; font-size: 12px; font-weight: 500; height: 28px;
  padding: 0 10px; border-radius: 6px; border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.7); color: var(--sk-list-fg-1); cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.sk-list .sk-list-bulk button:hover:not(:disabled) { background: #fff; border-color: var(--sk-list-orange-200); }
.sk-list .sk-list-bulk button:disabled { opacity: 0.55; cursor: not-allowed; }
.sk-list .sk-list-bulk button.danger { color: var(--sk-list-danger); }

/* Table */
.sk-list .sk-list-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.sk-list .sk-list-table thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--sk-list-bg);
  font-size: 11px; font-weight: 500; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--sk-list-fg-3);
  text-align: left; padding: 10px 12px;
  border-bottom: 1px solid var(--sk-list-border); white-space: nowrap;
}
.sk-list .sk-list-table thead th .th-inner {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  user-select: none; text-decoration: none; color: inherit;
}
.sk-list .sk-list-table thead th .th-inner:hover { color: var(--sk-list-fg-450); }
.sk-list .sk-list-table thead th .th-inner.is-sorted { color: var(--sk-list-fg-1); }
.sk-list .sk-list-table thead th .sort-arrow { font-family: var(--sk-font-data); font-size: 10px; opacity: 0.7; }
.sk-list .sk-list-table thead th.col-right { text-align: right; }
.sk-list .sk-list-table thead th.col-right .th-inner { justify-content: flex-end; width: 100%; }
.sk-list .sk-list-table thead th.col-center { text-align: center; }
.sk-list .sk-list-table thead th.col-center .th-inner { justify-content: center; width: 100%; }

.sk-list .sk-list-table tbody td {
  padding: 12px 12px; border-bottom: 1px solid var(--sk-list-border);
  font-size: 13px; color: var(--sk-list-fg-1); vertical-align: middle;
  background: var(--sk-list-surface); transition: background 0.12s;
}
.sk-list .sk-list-table tbody tr:last-child td { border-bottom: none; }
.sk-list .sk-list-table tbody tr { cursor: pointer; }
.sk-list .sk-list-table tbody tr:hover td { background: var(--sk-list-bg); }
.sk-list .sk-list-table tbody tr.is-selected td { background: var(--sk-list-orange-50); }
.sk-list .sk-list-table tbody tr.is-selected:hover td { background: var(--sk-list-orange-100); }

.sk-list .col-check    { width: 40px; }
.sk-list .col-type     { width: 100px; }
.sk-list .col-location { width: 170px; }
.sk-list .col-lang     { width: 56px; }
.sk-list .col-orders   { width: 80px; }
.sk-list .col-last     { width: 140px; }
.sk-list .col-ltv      { width: 140px; }
.sk-list .col-end      { width: 44px; }

/* Cell content */
.sk-list .c-customer { display: flex; align-items: center; gap: 12px; min-width: 0; }
.sk-list .avatar {
  width: 34px; height: 34px; border-radius: 999px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 500; font-size: 13px; text-transform: uppercase;
  letter-spacing: 0.01em; background: var(--sk-list-bg); color: var(--sk-list-fg-450);
}
.sk-list .avatar.is-business { background: var(--sk-list-orange-50); color: var(--sk-list-orange-700); }
.sk-list .c-customer .stack { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sk-list .c-customer .stack .nm {
  font-weight: 500; color: var(--sk-list-fg-1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sk-list .c-customer .stack a.nm:hover { color: var(--sk-list-orange-500); }
.sk-list .c-customer .stack .em {
  font-family: var(--sk-font-data); font-size: 11.5px; color: var(--sk-list-fg-3);
  letter-spacing: 0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.sk-list .pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 500; letter-spacing: 0.01em;
}
.sk-list .pill::before { content: ""; width: 5px; height: 5px; border-radius: 999px; background: currentColor; opacity: 0.7; }
.sk-list .pill-private { background: var(--sk-list-chip); color: var(--sk-list-fg-2); }
.sk-list .pill-business { background: var(--sk-list-info-100); color: #2960c8; }
html[data-scheme="dark"] .sk-list .pill-business { color: #8AB0FF; }

.sk-list .muted { color: var(--sk-list-fg-3); }

/* Connection column (suppliers list) - type label + status pill, both
   truncating independently instead of overflowing into the next column. */
.sk-list .connection-cell {
  display: flex; align-items: center; gap: 6px; min-width: 0;
}
.sk-list .connection-type {
  font-size: 12px; color: var(--sk-list-fg-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.sk-list .connection-cell .pill { flex: 0 0 auto; }

/* Field mapping column (suppliers list) - a tight, dot-less badge for
   explicit config, and plain text (no badge) for the "system default,
   nothing configured" case, matching the Retail OS design's mapInfo().
   Both truncate with an ellipsis rather than overflowing into the Brands
   column next to them. */
.sk-list .field-mapping-badge {
  display: inline-flex; align-items: center; gap: 4px;
  max-width: 100%; padding: 3px 8px; border-radius: 6px;
  font-size: 10.5px; font-weight: 600; white-space: nowrap;
  overflow: hidden; box-sizing: border-box;
}
.sk-list .field-mapping-badge-label { overflow: hidden; text-overflow: ellipsis; }
.sk-list .field-mapping-badge--custom { background: rgba(16, 185, 129, 0.15); color: #0F8A50; }
.sk-list .field-mapping-auto {
  display: block; max-width: 100%; font-size: 11px; color: var(--sk-list-fg-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Suppliers connectors overview - two per row, matching the Retail OS design's
   `grid-template-columns:1fr 1fr` (not auto-fit, which let a wide viewport
   pack in 3+ and lose the card's intended proportions). */
.sk-list .suppliers-connectors-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (max-width: 768px) {
  .sk-list .suppliers-connectors-grid { grid-template-columns: 1fr; }
}

/* At-risk "not linked" hint (suppliers list) - hover to reveal, same
   interaction as the Brands page's status flag: sits beside the pill, not
   nested inside it, so the pill itself stays identical to the plain "not
   linked" look. No click/JS needed - hovering doesn't fight the row's own
   click-to-navigate behavior the way a click target would. */
.sk-list .risk-hint { position: relative; display: inline-flex; flex: 0 0 auto; }
.sk-list .risk-hint-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 19px; height: 19px; border-radius: 50%;
  background: rgba(230, 57, 70, 0.35); color: var(--sk-danger);
  font-size: 12px; font-weight: 700; line-height: 1;
  cursor: default;
}
.sk-list .risk-hint:hover .risk-hint-mark { background: rgba(230, 57, 70, 0.5); }
.sk-list .risk-hint-pop {
  display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 5;
  width: 210px; padding: 9px 11px; border-radius: 8px;
  background: var(--sk-list-surface); border: 1px solid var(--sk-list-border);
  box-shadow: 0 4px 14px rgba(16, 18, 23, 0.12);
  font-size: 11.5px; font-weight: 400; line-height: 1.4; color: var(--sk-list-fg-2);
  white-space: normal;
}
.sk-list .risk-hint:hover .risk-hint-pop { display: block; }

.sk-list .c-location { display: inline-flex; align-items: baseline; gap: 6px; }
.sk-list .c-location .country {
  font-family: var(--sk-font-data); font-size: 10.5px; font-weight: 600;
  color: var(--sk-list-fg-3); background: var(--sk-list-bg);
  border-radius: 4px; padding: 1px 5px; letter-spacing: 0.04em;
}
.sk-list .lang-badge {
  display: inline-block; font-family: var(--sk-font-data);
  font-size: 10.5px; font-weight: 600; color: var(--sk-list-fg-2); letter-spacing: 0.04em;
}
.sk-list .ltv {
  font-family: var(--sk-font-data); font-size: 13px; font-weight: 500;
  color: var(--sk-list-fg-1); letter-spacing: 0;
}
.sk-list .orders-num { font-family: var(--sk-font-data); font-size: 12.5px; color: var(--sk-list-fg-450); }

/* Checkbox */
.sk-list .ck {
  appearance: none; -webkit-appearance: none;
  width: 16px; height: 16px; border: 1.5px solid var(--sk-list-border-strong);
  border-radius: 4px; background: var(--sk-list-surface); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  vertical-align: middle; transition: border-color 0.12s, background 0.12s;
  position: relative;
}
.sk-list .ck:hover { border-color: var(--sk-list-orange-500); }
.sk-list .ck:checked, .sk-list .ck:indeterminate {
  background: var(--sk-list-orange-500); border-color: var(--sk-list-orange-500);
}
.sk-list .ck:checked::after {
  content: ""; width: 9px; height: 5px;
  border-left: 2px solid #000; border-bottom: 2px solid #000;
  transform: rotate(-45deg) translate(1px, -1px);
}
.sk-list .ck:indeterminate::after {
  content: ""; width: 8px; height: 2px; background: #000;
}

/* Row end icon */
.sk-list .row-end {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 6px;
  color: var(--sk-list-fg-3); cursor: pointer; background: transparent;
  border: none; opacity: 0; transition: opacity 0.12s, background 0.12s;
  text-decoration: none;
}
.sk-list .sk-list-table tbody tr:hover .row-end { opacity: 1; }
.sk-list .row-end:hover { background: var(--sk-list-bg); color: var(--sk-list-fg-1); }

/* Footer */
.sk-list .sk-list-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-top: 1px solid var(--sk-list-border);
  background: var(--sk-list-bg); font-size: 13px; color: var(--sk-list-fg-2); gap: 16px;
}
.sk-list .sk-list-foot .left { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.sk-list .sk-list-foot .right { display: flex; align-items: center; gap: 4px; }
.sk-list .sk-list-foot .perpage { display: inline-flex; align-items: center; gap: 8px; }
.sk-list .sk-list-foot select {
  font: inherit; font-size: 12px; height: 28px;
  border: 1px solid var(--sk-list-border); border-radius: 6px;
  background: var(--sk-list-surface); padding: 0 26px 0 8px;
  color: var(--sk-list-fg-1); cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23858585' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 6px center; background-size: 14px;
}
.sk-list .sk-list-foot .count { font-family: var(--sk-font-data); letter-spacing: 0.01em; color: var(--sk-list-fg-450); }
.sk-list .page-btn {
  min-width: 30px; height: 30px; padding: 0 8px;
  border-radius: 6px; border: 1px solid transparent; background: transparent;
  font-family: var(--sk-font-data); font-size: 12px; color: var(--sk-list-fg-450);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none;
}
.sk-list .page-btn:hover:not(.is-disabled) { background: var(--sk-list-surface); border-color: var(--sk-list-border); }
.sk-list .page-btn.is-current { background: var(--sk-list-surface); border-color: var(--sk-list-border-strong); color: var(--sk-list-fg-1); font-weight: 600; }
.sk-list .page-btn.is-disabled { opacity: 0.4; cursor: default; pointer-events: none; }
.sk-list .page-ellipsis { color: var(--sk-list-fg-4); padding: 0 4px; }

/* Filter popover */
.sk-list .sk-list-pop {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 100;
  width: 540px; max-width: calc(100vw - 32px); background: var(--sk-list-surface);
  border: 1px solid var(--sk-list-border); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(17, 24, 39, 0.12), 0 2px 6px rgba(17, 24, 39, 0.06);
  padding: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px;
}
.sk-list .sk-list-pop[hidden] { display: none; }
.sk-list .sk-list-pop .field { display: flex; flex-direction: column; gap: 6px; }
.sk-list .sk-list-pop .field-row { grid-column: 1 / -1; }
.sk-list .sk-list-pop label {
  font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--sk-list-fg-3); font-weight: 500;
}
.sk-list .sk-list-pop select, .sk-list .sk-list-pop input {
  height: 34px; font: inherit; font-size: 13px;
  border: 1px solid var(--sk-list-border); border-radius: 8px; padding: 0 10px;
  background: var(--sk-list-surface); color: var(--sk-list-fg-1); outline: none;
}
.sk-list .sk-list-pop select {
  padding-right: 28px; appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23858585' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 8px center; background-size: 14px;
}
.sk-list .sk-list-pop input:focus, .sk-list .sk-list-pop select:focus {
  border-color: var(--sk-list-orange-500);
  box-shadow: 0 0 0 3px rgba(255, 157, 0, 0.20);
}
.sk-list .sk-list-pop .pop-foot {
  grid-column: 1 / -1;
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 8px; border-top: 1px solid var(--sk-list-border); margin-top: 4px;
}

/* Sort menu */
.sk-list .sk-list-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 100;
  min-width: 260px; background: var(--sk-list-surface);
  border: 1px solid var(--sk-list-border); border-radius: 10px;
  box-shadow: 0 12px 32px rgba(17, 24, 39, 0.12), 0 2px 6px rgba(17, 24, 39, 0.06);
  padding: 6px;
}
.sk-list .sk-list-menu[hidden] { display: none; }
.sk-list .sk-list-menu .mi {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 7px 10px; border: none; background: transparent;
  font: inherit; font-size: 13px; color: var(--sk-list-fg-1);
  text-align: left; border-radius: 6px; cursor: pointer; text-decoration: none;
}
.sk-list .sk-list-menu .mi:hover { background: var(--sk-list-bg); }
.sk-list .sk-list-menu .mi .check { width: 16px; height: 16px; color: var(--sk-list-orange-500); display: inline-flex; }
.sk-list .sk-list-menu .mi .check.is-hidden { visibility: hidden; }

/* Empty state */
.sk-list .sk-list-empty { text-align: center; padding: 56px 24px; color: var(--sk-list-fg-3); }
.sk-list .sk-list-empty .ttl { font-size: 15px; color: var(--sk-list-fg-450); font-weight: 500; margin-bottom: 4px; }
.sk-list .sk-list-empty .sub { font-size: 13px; }

/* Responsive */
@media (max-width: 1024px) {
  .sk-list { padding: 0 0 40px; }
  .sk-list .sk-list-header { flex-direction: column; align-items: flex-start; }
  .sk-list .sk-list-header-actions { flex-wrap: wrap; }
  .sk-list .sk-list-toolbar .sk-list-search { max-width: none; }
  .sk-list .col-location, .sk-list .col-lang, .sk-list .col-orders, .sk-list .col-last { display: none; }
  .sk-list .sk-list-table thead th:nth-child(4),
  .sk-list .sk-list-table thead th:nth-child(5),
  .sk-list .sk-list-table thead th:nth-child(6),
  .sk-list .sk-list-table thead th:nth-child(7),
  .sk-list .sk-list-table tbody td:nth-child(4),
  .sk-list .sk-list-table tbody td:nth-child(5),
  .sk-list .sk-list-table tbody td:nth-child(6),
  .sk-list .sk-list-table tbody td:nth-child(7) { display: none; }
  .sk-list .sk-list-pop { width: calc(100vw - 32px); left: 0; }
}