/* assets/theme.css — UI shell tokens for the Dash layout.
   Chart tokens live in src/theme.py — keep both in sync when editing colors. */

/* ── Suppress Android Chrome force-dark ──────────────────────────────────── */
:root {
  color-scheme: dark light;
}

/* ── Reset browser defaults ──────────────────────────────────────────────── */
html, body {
  margin: 0;
  padding: 0;
}

/* ── Dark theme (default) ────────────────────────────────────────────────── */
.theme-dark {
  --bg:          #131622;
  --card:        #1e2130;
  --grid:        #2a2f45;
  --text:        #f0f4ff;
  --muted:       #8b93a7;
  --accent:      #7c8ffc;
  --violet:      #c084fc;
  --warn:        #f59e0b;

  /* Tabs */
  --tab-color:          #8b93a7;
  --tab-selected-color: #7c8ffc;
  --tab-selected-bg:    #1a1d2e;
  --tab-selected-border:#7c8ffc;

  /* Buttons */
  --btn-bg:           #2a3060;
  --btn-color:        #a0aaff;
  --btn-border:       #3a4080;
  --btn-active-bg:    #7c8ffc;
  --btn-active-color: #131622;

  /* Sample data button */
  --sample-btn-bg:     #1e2d1e;
  --sample-btn-color:  #6ee76e;
  --sample-btn-border: #2e5c2e;

  /* Header */
  --header-bg:     #1a1d2e;
  --header-text:   #f0f4ff;
  --header-border: #2a2f45;

  /* Tabs */
  --tab-strip-bg: #131622;
  --tab-border:   #2a2f45;

  /* DataTable */
  --table-header-bg:    #2a2f45;
  --table-row-bg:       #1e2130;
  --row-selected-bg:    #252a3e;

  /* Eco-phase pills */
  --pill-boom-bg:        #0d2e1a;
  --pill-boom-border:    #1a5c30;
  --pill-boom-color:     #2ecc71;
  --pill-normal-bg:      #0d1a30;
  --pill-normal-border:  #1a3a70;
  --pill-normal-color:   #5ba3e8;
  --pill-recession-bg:   #2a0d0d;
  --pill-recession-border:#6b1a1a;
  --pill-recession-color: #e74c3c;
  --pill-grey-bg:        #1a1d2a;
  --pill-grey-border:    #2a2f45;
  --pill-grey-color:     #454d60;

  /* Sparkline */
  --sparkline-color: #7c8ffc;

  /* Cards */
  --card-border: none;
  --card-shadow: none;

  /* Input / Button */
  --input-shadow: none;
  --btn-shadow:   none;
}

/* ── Light theme ─────────────────────────────────────────────────────────── */
.theme-light {
  --bg:          #e2e8f0;
  --card:        #ffffff;
  --grid:        #d0d4e8;
  --text:        #1e2130;
  --muted:       #6b7280;
  --accent:      #4c63f5;
  --violet:      #9333ea;
  --warn:        #d97706;

  /* Tabs — kept identical to dark mode so the strip stays dark */
  --tab-color:          #8b93a7;
  --tab-selected-color: #7c8ffc;
  --tab-selected-bg:    #1a1d2e;
  --tab-selected-border:#7c8ffc;
  --tab-strip-bg: #131622;
  --tab-border:   #2a2f45;

  /* Buttons */
  --btn-bg:           #ffffff;
  --btn-color:        #4c63f5;
  --btn-border:       #CBD5E1;
  --btn-shadow:       0 1px 3px rgba(0, 0, 0, 0.08);
  --btn-active-bg:    #4c63f5;
  --btn-active-color: #f5f6fb;

  /* Sample data button */
  --sample-btn-bg:     #edfaf3;
  --sample-btn-color:  #16a34a;
  --sample-btn-border: #a7f3d0;

  /* Header — dark, same as dark mode */
  --header-bg:     #1a1d2e;
  --header-text:   #f0f4ff;
  --header-border: #2a2f45;

  /* DataTable */
  --table-header-bg:    #e2e5f5;
  --table-row-bg:       #f5f6fb;
  --row-selected-bg:    #eef0fb;

  /* Eco-phase pills */
  --pill-boom-bg:        #edfaf3;
  --pill-boom-border:    #a7f3d0;
  --pill-boom-color:     #15803d;
  --pill-normal-bg:      #eaf2ff;
  --pill-normal-border:  #bfdbfe;
  --pill-normal-color:   #1d4ed8;
  --pill-recession-bg:   #fef2f2;
  --pill-recession-border:#fecaca;
  --pill-recession-color: #b91c1c;
  --pill-grey-bg:        #eeeff4;
  --pill-grey-border:    #d0d4e8;
  --pill-grey-color:     #9ca3af;

  /* Sparkline */
  --sparkline-color: #4c63f5;

  /* Cards */
  --card-border: 1px solid #CBD5E1;
  --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);

  /* Input / Button */
  --input-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  --btn-shadow:   0 1px 3px rgba(0, 0, 0, 0.08);
}

/* ── Fonts ───────────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'Outfit';
  src: url('/assets/fonts/Outfit-variable.ttf') format('truetype');
  font-weight: 100 900;
  font-display: swap;
}

/* ── Component styles (theme-agnostic, use variables) ────────────────────── */

.simco-root {
  min-height: 100vh;
  font-family: Inter, sans-serif;
  background: var(--bg);
  color: var(--text);
}

.simco-header {
  background: var(--header-bg);
  border-bottom: 1px solid var(--header-border);
  color: var(--header-text);
  padding: 10px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Logo visibility: swap based on theme accent color */
.theme-dark  .logo-light { display: none; }
.theme-light .logo-dark  { display: none; }

/* In light mode the header is dark — cascade dark-mode tokens into its scope
   so the company label and theme toggle inherit the right colors. */
.theme-light .simco-header {
  --muted:          #8b93a7;
  --btn-bg:         #2a3060;
  --btn-color:      #a0aaff;
  --btn-border:     #3a4080;
  --btn-active-bg:  #7c8ffc;
  --btn-active-color: #131622;
}

.theme-dark  .simco-card { --card-muted: rgba(255,255,255,0.65); }
.theme-light .simco-card { --card-muted: rgba(0,0,0,0.45); }

.simco-card {
  background: var(--card);
  border-radius: 8px;
  padding: 16px 24px;
  flex: 1;
  min-width: 180px;
  border: var(--card-border);
  box-shadow: var(--card-shadow);
}

.simco-label {
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 4px;
  margin: 0;
}

.simco-value {
  color: var(--text);
  font-size: 22px;
  font-weight: 700;
  margin: 0;
}

.simco-btn {
  background: var(--btn-bg);
  color: var(--btn-color);
  border: 1px solid var(--btn-border);
  border-radius: 6px;
  padding: 8px 16px;
  cursor: pointer;
  font-size: 14px;
  height: 38px;
  white-space: nowrap;
  box-shadow: var(--btn-shadow);
}

.simco-btn.active,
.simco-btn-active {
  background: var(--btn-active-bg);
  color: var(--btn-active-color);
  font-weight: 700;
}

.simco-btn-sm {
  background: var(--btn-bg);
  color: var(--btn-color);
  border: 1px solid var(--btn-border);
  border-radius: 6px;
  padding: 4px 12px;
  cursor: pointer;
  font-size: 12px;
  height: 28px;
}

.simco-btn-sm.active {
  background: var(--btn-active-bg);
  color: var(--btn-active-color);
  font-weight: 700;
}

.simco-btn-sample {
  background: var(--sample-btn-bg);
  color: var(--sample-btn-color);
  border: 1px solid var(--sample-btn-border);
  border-radius: 6px;
  padding: 6px 14px;
  cursor: pointer;
  font-size: 13px;
  height: 34px;
}

.simco-btn-realm {
  background: var(--card);
  color: var(--text);
  border: 2px solid var(--grid);
  border-radius: 8px;
  padding: 8px 16px;
  cursor: pointer;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  transition: border-color 0.15s, color 0.15s;
}

.simco-btn-realm:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.simco-upload {
  border: 2px dashed var(--grid);
  border-radius: 8px;
  cursor: pointer;
  background: var(--card);
  color: var(--text);
  height: 100px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  margin-bottom: 8px;
}

.simco-input {
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--grid);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 14px;
  width: 100%;
  height: 38px;
  box-sizing: border-box;
  box-shadow: var(--input-shadow);
}

/* ── Dash tab overrides (theme-aware, overrides Dash's inline white defaults) ── */

/* Tab strip background */
.theme-dark .tab-container, .theme-dark .rc-tabs,
.theme-light .tab-container, .theme-light .rc-tabs {
  background: var(--tab-strip-bg) !important;
}

/* Strip any Dash-default padding from tab-content — simco-tab-body provides all padding */
.theme-dark .tab-content,
.theme-light .tab-content {
  padding: 0 !important;
}

/* Individual tabs — unselected */
.theme-dark .tab, .theme-dark [data-dash-is-loading] .tab,
.theme-light .tab, .theme-light [data-dash-is-loading] .tab {
  background: var(--tab-strip-bg) !important;
  color: var(--tab-color) !important;
  border-color: var(--tab-border) !important;
}

/* Selected tab — this is what was showing white */
.theme-dark .tab--selected,
.theme-light .tab--selected {
  background: var(--tab-selected-bg) !important;
  color: var(--tab-selected-color) !important;
  border-top: 2px solid var(--tab-selected-border) !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: none !important;
}

/* Tab content panel background */
.theme-dark .tab-content,
.theme-light .tab-content {
  background: var(--bg) !important;
}

/* Raw Data tab — title-only dropdowns.
   ::before injects the fixed label; first-child (value/chips area) is hidden. */
.rawdata-titled .dash-dropdown-grid-container {
  position: relative !important;
  overflow: hidden !important;
  max-height: 38px !important;
}
/* Hide the value/chips area without affecting layout */
.rawdata-titled .dash-dropdown-grid-container > :first-child {
  opacity: 0 !important;
  pointer-events: none !important;
}
/* Fixed label text via CSS pseudo-element */
#rawdata-cat-filter .dash-dropdown-grid-container::before {
  content: "Category selection";
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: 14px;
  pointer-events: none;
  white-space: nowrap;
}
#rawdata-col-toggle .dash-dropdown-grid-container::before {
  content: "Columns";
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: 14px;
  pointer-events: none;
  white-space: nowrap;
}

/* Raw Data tab — Highlight Profit checklist */
#rawdata-highlight,
#rawdata-highlight label,
#rawdata-highlight span,
#rawdata-highlight div {
  color: var(--muted) !important;
  font-size: 13px !important;
  font-family: Inter, sans-serif !important;
  cursor: pointer !important;
}
#rawdata-highlight input[type="checkbox"] {
  accent-color: var(--accent) !important;
  width: 14px !important;
  height: 14px !important;
  cursor: pointer !important;
}

/* ── Responsive two-panel splits ─────────────────────────────────────────── */
.simco-split-equal,
.simco-split-6040,
.simco-split-4060,
.simco-split-1-2 {
  display: grid;
  gap: 20px;
}
.simco-split-equal { grid-template-columns: 1fr 1fr; }
.simco-split-6040  { grid-template-columns: 60fr 40fr; align-items: flex-start; }
.simco-split-4060  { grid-template-columns: 40fr 60fr; }
.simco-split-1-2   { grid-template-columns: 1fr 2fr; }

.simco-overview-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.simco-chart-btns {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20px;
}

.title-short { display: none; }

/* ── Disclaimer card ─────────────────────────────────────────────────────── */
/* Desktop: hide the disclosure marker and block toggling — content always visible */
@media (min-width: 769px) {
  #disclaimer-details > summary {
    pointer-events: none;
    list-style: none;
  }
  #disclaimer-details > summary::marker,
  #disclaimer-details > summary::-webkit-details-marker {
    display: none;
  }
}

@media (max-width: 768px) {
  /* Upload + Try Demo row: stack vertically on mobile */
  .upload-demo-row {
    flex-direction: column;
    grid-template-columns: 1fr !important;
  }
  .upload-demo-row .simco-btn-sample {
    flex: none !important;
    width: 100% !important;
    height: 42px !important;
  }

  /* Realm picker buttons: stack vertically so text stays on one line */
  #realm-picker-container > div {
    flex-direction: column;
  }
  .simco-btn-realm {
    width: 100%;
  }

  /* Header: tighter padding, truncate company name, shrink theme button */
  .simco-header {
    padding: 6px 12px;
  }
  .title-full  { display: none; }
  .title-short { display: inline; }
  #header-company {
    display: none;
  }
  #btn-theme-toggle {
    font-size: 13px;
    padding: 4px 8px;
    height: 28px;
    white-space: nowrap;
  }

  /* Reduce tab body padding on mobile — all four sides */
  .simco-tab-body {
    padding: 8px !important;
    overflow-x: hidden; /* clips the Plotly dead-zone shifted off-screen */
  }

  /* Tabs 4/5: fit treemap/sunburst in viewport without scrolling */
  #fig-incoming-goods, #fig-outgoing-goods {
    height: calc(100vh - 210px) !important;
    min-height: unset !important;
  }

  /* Reclaim Plotly's forced 23px left-margin dead zone on charts with axes.
     Shift each chart 23px left and make it 23px wider so Plotly renders
     the plot area across the full parent width. overflow-x: hidden above clips
     the dead zone that lands off-screen. Treemaps/sunbursts excluded (no axes). */
  #fig-daily-profit,
  #fig-cashflow-daily,
  #fig-cashflow-drilldown,
  #fig-exec-daily,
  #fig-product-scatter,
  #fig-product-daily,
  #fig-partners-in,
  #fig-partners-out,
  #fig-exec-expenses,
  #fig-production-monthly,
  #fig-production-daily {
    margin-left: -23px !important;
    width: calc(100% + 23px) !important;
  }

  /* Daily production has a right y-axis — reclaim its dead zone too */
  #fig-production-daily {
    width: calc(100% + 46px) !important;
  }


  /* Cap partners chart height — overrides inline minHeight: 280px */
  #fig-partners-in,
  #fig-partners-out {
    height: 160px !important;
    min-height: 0 !important;
  }

  /* Switch partners split from grid to block on mobile — the only way to
     fully isolate the chart column from the detail panel. In CSS Grid, a
     sibling item growing (detail panel → DataTable) expands the shared grid
     container, changing the chart column's clientWidth and triggering Plotly's
     ResizeObserver. In block layout siblings are independent; no shared axis. */
  .simco-split-4060 {
    display: block !important;
  }
  .simco-split-4060 > div:first-child {
    margin-bottom: 20px;
  }
  #partners-detail-panel {
    overflow-x: auto;
  }
  #fig-exec-expenses {
    height: 300px !important;
    min-height: 300px !important;
  }

  /* Supplier Prices: force single-column stacking (inline gridTemplateColumns overrides class) */
  .suppliers-split {
    grid-template-columns: 1fr !important;
  }
  /* Cap accordion to ~4 rows so the chart below is visible immediately */
  #suppliers-selector-col {
    height: auto !important;
    min-height: unset !important;
  }
  #suppliers-accordion {
    max-height: 220px;
    overflow-y: auto;
  }
  /* Apply Plotly dead-zone shift to suppliers chart */
  #suppliers-chart {
    margin-left: -23px !important;
    width: calc(100% + 23px) !important;
    height: calc(100vh - 340px) !important;
    min-height: 300px !important;
  }

  /* Contract Timing: single-column stacking (inline gridTemplateColumns overrides class) */
  .timing-split {
    grid-template-columns: 1fr !important;
  }
  /* Cap accordion so the charts below are visible immediately */
  #timing-selector-col {
    height: auto !important;
    min-height: unset !important;
  }
  #timing-accordion {
    max-height: 220px;
    overflow-y: auto;
  }
  /* Plotly dead-zone shift — hourly only; the heatmap needs its left margin
     for the Mon–Sun tick labels */
  #fig-timing-hourly {
    margin-left: -23px !important;
    width: calc(100% + 23px) !important;
    height: 300px !important;
    min-height: 0 !important;
  }
  #fig-timing-heatmap {
    height: 220px !important;
    min-height: 0 !important;
  }

}

@media (max-width: 1200px) {
  .simco-split-equal,
  .simco-split-6040,
  .simco-split-4060,
  .simco-split-1-2 {
    grid-template-columns: 1fr;
  }

  .simco-overview-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Reorder overview cards: realm + date range on row 1, profits on row 2 */
  .overview-card-realm  { order: 1; }
  .overview-card-dates  { order: 2; }
  .overview-card-profit { order: 3; }
  .overview-card-daily  { order: 4; }

  .overview-top-products { order: 2; }
  .overview-eco          { order: 3; }

  .simco-chart-btns {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Hide eco phase inline legend (chart title) on mobile */
  .js-plotly-plot .g-gtitle { display: none; }

  .overview-sample-label {
    display: block;
    margin-bottom: 8px;
  }

  /* Tab 6 — reorder sections: scatter → daily → table.
     display:contents dissolves the split grid into the outer flex column so
     CSS order can reach scatter and table as individual items. */
  .simco-tab-body:has(.tab6-split) {
    display: flex;
    flex-direction: column;
  }
  .tab6-split {
    display: contents !important;
  }
  .tab6-scatter-col { order: 1; }
  .tab6-daily-row   { order: 2; margin-top: 0 !important; }
  .tab6-table-col   { order: 3; }

  /* Reset/Split Q group wraps to row 2 without left margin */
  .tab6-reset-group { margin-left: 0 !important; }

  /* Compact button padding on mobile so all Tab 6 buttons fit one row */
  .tab6-btn-row button { padding: 4px 7px !important; }

}

/* Hide drag & drop hint on touch devices (coarse pointer = no drag & drop support). */
@media (pointer: coarse) {
  .drag-drop-hint { display: none; }
}

/* Raw Data table — filter row inputs. */
#raw-data-table .dash-filter input {
  background-color: var(--bg) !important;
  color: var(--text) !important;
  font-size: 12px !important;
}
#raw-data-table .dash-filter input::placeholder {
  color: var(--muted) !important;
  font-style: italic !important;
  opacity: 1 !important;
}

/* Light mode: --muted is too faint on near-white backgrounds. */
.theme-light #raw-data-table .dash-header,
.theme-light #product-margin-dt .dash-header,
.theme-light #partners-detail-dt .dash-header {
  color: var(--text) !important;
}
.theme-light #raw-data-table .dash-filter input::placeholder {
  color: var(--text) !important;
}

/* Plotly charts — prevent Android/Chrome force-dark from inverting SVG grid colors. */
.js-plotly-plot {
  forced-color-adjust: none;
}

/* Remove Dash DataTable's default red focus outline and tint on selected cells. */
.dash-cell.focused {
  box-shadow: none !important;
  outline: none !important;
  background-color: inherit !important;
}

/* DataTable column header tooltips. */
.dash-tooltip,
.dash-tooltip p,
.dash-tooltip span,
.dash-tooltip div {
  background-color: #2a2f45 !important;
  color: #f0f4ff !important;
  border-color: #3a4080 !important;
  border-radius: 4px !important;
  font-size: 12px !important;
  padding: 2px 6px !important;
  margin: 0 !important;
  width: fit-content !important;
  min-width: unset !important;
  max-width: unset !important;
  white-space: nowrap !important;
}
.theme-light .dash-tooltip,
.theme-light .dash-tooltip p,
.theme-light .dash-tooltip span,
.theme-light .dash-tooltip div {
  background-color: #1e2130 !important;
  color: #f0f4ff !important;
  border-color: #d0d4e8 !important;
}

/* Scrollable + sticky tab strip on narrow screens.
   Dash default: flex-direction: column + flex: 1 1 0 on .tab — both must be overridden.
   position:fixed bypasses any ancestor overflow that blocks position:sticky. */
@media (max-width: 768px) {
  /* Magic numbers: header ~42px (10px pad × 2 + 18px font), tab strip ~38px → total ~80px.
     Adjust --hdr-h if font scaling shifts the header height. */
  :root {
    --hdr-h: 30px;
    --strip-h: 38px;
  }

  .simco-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 201;
    transition: opacity 0.25s ease;
  }
  .simco-header.header-hidden {
    opacity: 0;
    pointer-events: none;
  }

  .tab-container {
    position: fixed;
    top: var(--hdr-h);
    left: 0;
    right: 0;
    z-index: 200;
    background: var(--tab-strip-bg) !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    transition: top 0.25s ease;
  }
  .tab-container .tab {
    flex: 0 0 auto !important;
  }

  /* Push content below both fixed bars */
  .simco-root {
    padding-top: calc(var(--hdr-h) + var(--strip-h));
  }
}

/* Tab 6 profit threshold slider — compact exec-costs style */
.tab6-profit-slider {
  width: 160px;
  flex-shrink: 0;
  overflow: visible;
}
#tab6-profit-slider [class*="rail"],
#tab6-profit-slider [class*="track"] {
  height: 6px !important;
  border-radius: 3px !important;
  background: rgba(128, 128, 128, 0.45) !important;
}
#tab6-profit-slider [class*="slider"]:not([class*="handle"]):not([class*="rail"]):not([class*="track"]) {
  height: 6px !important;
  padding: 0 !important;
}
#tab6-profit-slider [class*="handle"] {
  width: 3px !important;
  height: 14px !important;
  border-radius: 1px !important;
  margin-top: -4px !important;
  background: var(--text) !important;
  border: none !important;
  box-shadow: none !important;
  opacity: 1 !important;
}
/* ── Company link strip — Tab 4/5 ───────────────────────────────────────── */
.company-link-strip {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  min-height: 20px;
}

.company-link-anchor {
  color: var(--accent);
  text-decoration: none;
}

.company-link-anchor:hover {
  text-decoration: underline;
}

/* Hidden on touch devices — browser link not useful on mobile (dedicated app) */
@media (pointer: coarse) {
  .company-link-strip {
    display: none;
  }
}

#tab6-profit-slider [class*="handle"]:hover,
#tab6-profit-slider [class*="handle"]:active,
#tab6-profit-slider [class*="handle"]:focus {
  border: none !important;
  box-shadow: none !important;
}

/* ── Mobile scroll effects ───────────────────────────────────────────────── */
@keyframes simco-tab-pulse {
  0%   { filter: brightness(1); }
  40%  { filter: brightness(2.2); }
  100% { filter: brightness(1); }
}
.tab-strip-pulse .tab:not(.tab--selected) {
  animation: simco-tab-pulse 1s ease-out;
}

/* ── Light mode surface lifts ────────────────────────────────────────────── */
.theme-light #btn-load-new-data {
  border: 2px solid var(--accent);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.theme-light .simco-upload {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.theme-light .simco-btn-sample {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

@media (max-width: 768px) {
  .summary-subtitle { display: block; }
}

/* ── Supplier accordion ────────────────────────────────────────────────────── */
.supplier-prod-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px; cursor: pointer; font-size: 13px; border-bottom: 1px solid var(--grid); list-style: none; }
.supplier-prod-row:hover { background: var(--hover); }
.supplier-prod-name-block { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.supplier-prod-name { color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.supplier-prod-volume { color: var(--muted); font-size: 10px; margin-top: 1px; }
.supplier-prod-price { color: var(--muted); font-size: 11px; margin-left: 8px; white-space: nowrap; }
.supplier-q-section { padding: 6px 8px 8px 8px; border-bottom: 1px solid var(--grid); background: var(--bg); }
.supplier-q-section label { color: var(--text) !important; font-size: 12px; }
.supplier-q-section input[type="checkbox"] { accent-color: var(--accent); }
details summary.supplier-prod-row { list-style: none; }
details summary.supplier-prod-row::-webkit-details-marker { display: none; }
details[open] > summary.supplier-prod-row { background: var(--row-selected-bg); }

/* ── Contract Timing tab — accordion company rows ────────────────────────── */
.timing-all-row { font-weight: 600; }
.timing-comp-row { display: flex; align-items: center; gap: 6px; padding: 3px 0; font-size: 12px; }
.timing-comp-check { flex-shrink: 0; }
.timing-comp-check input[type="checkbox"] { accent-color: var(--accent); cursor: pointer; margin: 0; }
.timing-comp-name { color: var(--text); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.timing-comp-name:hover { color: var(--accent); text-decoration: underline; }

/* ── Privacy tooltip ────────────────────────────────────────────────────── */
.privacy-wrap { position: relative; display: inline; }
.privacy-wrap .privacy-tooltip {
  visibility: hidden; opacity: 0; transition: opacity 0.15s;
  position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  background: #1e2130; color: #f0f4ff; font-size: 13px; padding: 8px 12px;
  border-radius: 4px; border: 1px solid #3a4080; z-index: 9999; width: 260px;
  line-height: 1.5; box-shadow: 0 2px 8px rgba(0,0,0,0.4); pointer-events: none;
  white-space: normal; text-align: left;
}
.privacy-wrap:hover .privacy-tooltip { visibility: visible; opacity: 1; }
@media (max-width: 768px) {
  .privacy-wrap .privacy-tooltip { left: auto; right: 0; transform: none; }
}