/* ==========================================================================
   REFINE — Warm Studio polish layer.  Loaded AFTER app.css + editorial.css.
   Purely additive overrides: crisper depth, snappier motion, better buttons,
   tables, inputs, modals and chart.  Removing this <link> restores the prior
   look exactly.  All motion is gated behind prefers-reduced-motion.
   ========================================================================== */

:root {
  /* Crisper, tighter depth than the original soft shadows. */
  --shadow-xs:     0 1px 1px rgba(33,30,26,.05);
  --shadow-card:   0 1px 2px rgba(33,30,26,.05), 0 1px 1px rgba(33,30,26,.03);
  --shadow-raise:  0 2px 4px rgba(33,30,26,.05), 0 10px 24px rgba(33,30,26,.07);
  --shadow-pop:    0 10px 30px rgba(33,30,26,.16);
  --shadow-modal:  0 28px 70px rgba(33,30,26,.26);
  /* Motion */
  --ease: cubic-bezier(.2,.7,.2,1);
  --dur:  .16s;
  /* Soft terracotta focus ring */
  --ring: 0 0 0 3px color-mix(in srgb, var(--color-primary) 22%, transparent);
}
[data-theme="dark"] {
  --shadow-card:  0 1px 2px rgba(0,0,0,.4);
  --shadow-raise: 0 2px 6px rgba(0,0,0,.45), 0 12px 30px rgba(0,0,0,.4);
  --shadow-pop:   0 12px 32px rgba(0,0,0,.55);
}

/* Crisper type + smooth scroll anchoring */
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }

/* Thin, unobtrusive scrollbars (warm-tinted) */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 11px; height: 11px; }
*::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--text-muted); background-clip: padding-box; border: 3px solid transparent; }
*::-webkit-scrollbar-track { background: transparent; }

/* ---------- Consistent focus-visible ring (replaces the old hard outlines) ---------- */
a:focus-visible, button:focus-visible, .btn:focus-visible, [tabindex]:focus-visible,
.sidebar nav a:focus-visible, .sb-tile:focus-visible, .stat-card:focus-visible {
  outline: none; box-shadow: var(--ring);
}
.search-input:focus, .input:focus, select:focus, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none !important; box-shadow: var(--ring); border-color: var(--color-primary);
}

/* ---------- Buttons ---------- */
.btn {
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease), transform .06s var(--ease), color var(--dur), filter var(--dur);
  letter-spacing: -.005em;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--color-primary) 90%, #fff), var(--color-primary));
  box-shadow: var(--shadow-xs), inset 0 1px 0 rgba(255,255,255,.2);
  border-color: color-mix(in srgb, var(--color-primary) 70%, #000 8%);
}
.btn-primary:hover { background-image: none; background-color: var(--color-primary-hover); box-shadow: var(--shadow-raise); }
.btn-secondary { box-shadow: var(--shadow-xs); }
.btn-secondary:hover { background: var(--color-primary-soft); border-color: var(--color-primary); }
.btn-danger { background: var(--status-danger); color: #fff; border-color: color-mix(in srgb, var(--status-danger) 70%, #000 8%); }
.btn-danger:hover { filter: brightness(.93); box-shadow: var(--shadow-raise); }
.btn:disabled, .btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; filter: none; }

/* ---------- Sidebar nav ---------- */
.sidebar { box-shadow: 1px 0 0 var(--border); }
.sidebar nav a { transition: background var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur); }
.sidebar nav a:hover { color: var(--text-primary); }
.sidebar nav a.active { box-shadow: var(--shadow-xs); }
.nav-section-label { transition: opacity var(--dur); }

/* ---------- Cards, stat tiles, P&L tiles ---------- */
.stat-card, .sb-tile, .chart-card, .pl-card, .detail-card {
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.stat-card:hover, .chart-card:hover { box-shadow: var(--shadow-raise); }
.sb-tile { transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.sb-tile:hover { box-shadow: var(--shadow-raise); transform: translateY(-2px); }
.sb-tile.active { transform: none; }
/* P&L tiles collapse-on-scroll: longer, eased, transform-aware so they glide up + fade instead of snapping */
.sb-tiles { transition: max-height .5s var(--ease), opacity .4s var(--ease), margin-bottom .5s var(--ease), transform .5s var(--ease); will-change: max-height, opacity, transform; }

/* ---------- Data tables ---------- */
.data-table-wrap { box-shadow: var(--shadow-card); }
.data-table thead th {
  border-bottom: 1px solid var(--border-strong);
  letter-spacing: .04em; text-transform: uppercase;
  transition: color var(--dur), background var(--dur);
}
.data-table thead th:first-child { letter-spacing: -.005em; text-transform: none; }
.data-table td { border-bottom: 1px solid color-mix(in srgb, var(--border) 72%, transparent); }
.data-table tbody tr { transition: background .12s var(--ease); }
.data-table tbody tr:last-child td { border-bottom: none; }
/* sort + resize affordances feel intentional */
.data-table th .sort { transition: color var(--dur); }
.col-grip::after { transition: background .12s var(--ease), width .12s var(--ease); }
.col-grip:hover::after, .col-grip:active::after { width: 3px; }
/* tabular figures everywhere numbers live */
.data-table td, .mini-table td, .stat-card .big, .sb-tile .sales, .pl-row b { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1, "cv01" 1; }

/* ---------- Pills & tags ---------- */
.pill, .tag-supplier, .tag-more, .metric-pill { transition: background var(--dur), color var(--dur), box-shadow var(--dur), outline-color var(--dur); }
.pill { box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 12%, transparent); }

/* ---------- Inputs & search ---------- */
.search-input, .input, select.input, .fld input, .fld select {
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur);
}
.search-input:hover, .input:hover { border-color: var(--text-muted); }

/* ---------- Range tabs (chart period switch) ---------- */
.range-tabs button { transition: background var(--dur) var(--ease), color var(--dur), box-shadow var(--dur); }
.range-tabs button:hover { color: var(--text-primary); }

/* ---------- Modals: soft backdrop blur + entrance ---------- */
.modal-overlay { background: color-mix(in srgb, var(--text-primary) 38%, transparent); backdrop-filter: blur(3px) saturate(1.05); -webkit-backdrop-filter: blur(3px) saturate(1.05); }
.modal { box-shadow: var(--shadow-modal); animation: modal-in .2s var(--ease); }
.modal header .x { transition: color var(--dur), transform var(--dur); }
.modal header .x:hover { transform: rotate(90deg); }
@keyframes modal-in { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }

/* ---------- Toast ---------- */
.toast { box-shadow: var(--shadow-modal); }

/* ---------- Route enter (subtle content fade on each navigation) ---------- */
@keyframes route-in { from { opacity: 0; } to { opacity: 1; } }
.main.route-enter { animation: route-in .26s var(--ease); }

/* ---------- Chart polish (drawDailyChart / editorial SVG) ---------- */
.ed-bar { rx: 2px; transition: opacity .15s; }
.ed-chart .ed-line {
  stroke-width: 2.25;
  filter: drop-shadow(0 2px 4px color-mix(in srgb, var(--chart-inventory) 30%, transparent));
}
.ed-chart .ed-line[pathLength] { stroke-dasharray: 1; stroke-dashoffset: 1; animation: ed-draw 1.05s var(--ease) forwards; }
@keyframes ed-draw { to { stroke-dashoffset: 0; } }
.ed-chart .ed-area { opacity: 0; animation: ed-fade .95s ease .1s forwards; }
@keyframes ed-fade { to { opacity: 1; } }
.ed-focus { filter: drop-shadow(0 0 4px color-mix(in srgb, var(--chart-inventory) 55%, transparent)); }

/* ---------- Dropzone ---------- */
.dropzone { transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur); }

/* ---------- Theme switch (Light / Dark / System) in the sidebar foot ---------- */
.theme-seg { display: inline-flex; gap: 2px; background: var(--status-neutral-bg); border-radius: var(--radius-sm); padding: 2px; margin-bottom: 10px; }
.theme-seg button { font: inherit; font-size: 14px; line-height: 1; border: 0; background: transparent; padding: 5px 11px; border-radius: 6px; cursor: pointer; color: var(--text-secondary); transition: background var(--dur) var(--ease), color var(--dur), box-shadow var(--dur); }
.theme-seg button:hover { color: var(--text-primary); }
.theme-seg button.active { background: var(--surface-card); color: var(--color-primary); box-shadow: var(--shadow-xs); }

/* dark-mode shell coverage: tokens cascade from html[data-theme=dark], these fix the few rgba() borders */
html[data-theme="dark"] body { background: var(--surface-page); color: var(--text-primary); }
html[data-theme="dark"] .user-menu { border-top-color: var(--border); }
html[data-theme="dark"] .sidebar { box-shadow: 1px 0 0 var(--border); }
html[data-theme="dark"] .bulk-bar, html[data-theme="dark"] .toast, html[data-theme="dark"] .chart-tooltip { background: var(--surface-card); color: var(--text-primary); border: 1px solid var(--border); }
/* the P&L chart uses editorial-skin vars (--gold loss bars, --rule gridlines, --ink-3 zero line/axis); in
   dark mode the editorial skin is off, so define them here or the chart loses its gridlines + loss-bar color */
html[data-theme="dark"] { --gold: #e0a64e; --rule: var(--border); --ink-3: var(--text-muted); }
html[data-theme="dark"] .ed-axis, html[data-theme="dark"] .ed-tip { fill: var(--text-muted); }
html[data-theme="dark"] .ed-tip { background: var(--surface-card); border-color: var(--border); color: var(--text-primary); }

/* ==========================================================================
   Respect reduced-motion: kill all transitions/animations.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .sb-tile:hover { transform: none; }
}