/* ==========================================================================
   EDITORIAL SKIN — Profitability module only.  Swiss/luxury financial broadsheet.
   Scoped entirely to [data-skin="editorial"] so the other four modules are untouched.
   Strategy: (1) remap the shared design tokens to a warm-paper palette — this also
   re-skins the SVG chart, which reads --chart-* vars; (2) layer typographic and
   structural overrides (Fraunces display serif, hairline rules, sharp corners,
   uppercase eyebrows) on top of the shared component classes.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,650&family=Inter+Tight:wght@400;450;500;600;700&display=swap');

[data-skin="editorial"] {
  /* ---- editorial palette ---- */
  --paper:        #f4f1ea;   /* warm newsprint */
  --paper-2:      #efeae0;   /* sunken / header bands */
  --paper-card:   #fbf9f3;   /* raised card stock */
  --ink:          #19150f;   /* near-black, warm */
  --ink-2:        #6c6456;   /* secondary, sepia-grey */
  --ink-3:        #a39b89;   /* muted, captions */
  --rule:         #ddd6c7;   /* hairline */
  --rule-strong:  #19150f;   /* masthead rule */
  --red:          #b22d22;   /* editorial vermilion — losses & accents */
  --red-soft:     #f0e2dd;
  --green:        #2f6b4f;   /* deep ledger green — gains */
  --green-soft:   #e2ebe3;
  --gold:         #9a7b2e;   /* warnings / caret */
  --gold-soft:    #efe7d2;

  /* ---- remap shared tokens so unchanged component CSS adopts the palette ---- */
  --surface-page:          var(--paper);
  --surface-card:          var(--paper-card);
  --surface-table-header:  var(--paper-2);
  --surface-row-hover:     #efe9dc;
  --border:                var(--rule);
  --border-strong:         #c7bfac;
  --text-primary:          var(--ink);
  --text-secondary:        var(--ink-2);
  --text-muted:            var(--ink-3);
  --text-on-dark:          var(--paper);
  --color-primary:         var(--red);
  --color-primary-hover:   #8f221a;
  --color-primary-soft:    var(--red-soft);
  --status-ok:             var(--green);
  --status-ok-bg:          var(--green-soft);
  --status-danger:         var(--red);
  --status-danger-bg:      var(--red-soft);
  --status-warn:           var(--gold);
  --status-warn-bg:        var(--gold-soft);
  --status-overstock:      #355e7a;
  --status-overstock-bg:   #e3e9ee;
  --status-neutral:        var(--ink-2);
  --status-neutral-bg:     var(--paper-2);

  /* chart picks these up directly */
  --chart-inventory:       #19150f;
  --chart-sales:           #b22d22;

  /* sharp corners, flat surfaces */
  --radius-sm: 0px; --radius-md: 2px; --radius-lg: 3px; --radius-pill: 2px;
  --shadow-card: none;
  --shadow-modal: 0 24px 60px -12px rgba(25,21,15,.38), 0 0 0 1px var(--rule);

  --font-family: 'Inter Tight', -apple-system, sans-serif;
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;

  color: var(--ink);
  font-family: var(--font-family);
  font-feature-settings: "ss01", "cv05";
  letter-spacing: -0.005em;
}

/* paper texture + atmosphere on the main canvas */
.main[data-skin="editorial"] {
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(178,45,34,.035), transparent 60%),
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(25,21,15,.012) 3px 4px),
    var(--paper);
  padding: var(--sp-6) clamp(24px, 4vw, 56px);
}

/* ============================ MASTHEAD ============================ */
.main[data-skin="editorial"] .page-title {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: clamp(40px, 5.4vw, 68px);
  line-height: .94;
  letter-spacing: -0.025em;
  margin: 0;
  color: var(--ink);
  animation: ed-rise .5s cubic-bezier(.2,.7,.2,1) both;
}
.main[data-skin="editorial"] .page-title::before {
  content: "FVF Trading — Ledger & Statement";
  display: block;
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 14px;
}
.main[data-skin="editorial"] .page-sub {
  font-family: var(--font-family);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--ink-2);
  margin: 14px 0 0;
  padding: 10px 0 0;
  border-top: 3px double var(--rule-strong);
  animation: ed-fade .6s ease .08s both;
}
.main[data-skin="editorial"] .page-sub::first-line { color: var(--ink-2); }

/* ============================ TOOLBAR ============================ */
.main[data-skin="editorial"] .toolbar {
  margin: var(--sp-5) 0 var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--rule);
  gap: var(--sp-4);
  animation: ed-fade .6s ease .12s both;
}

/* segmented control → editorial tab strip with underline */
.main[data-skin="editorial"] .range-tabs {
  background: transparent;
  padding: 0;
  gap: var(--sp-4);
  border-radius: 0;
}
.main[data-skin="editorial"] .range-tabs button {
  background: transparent;
  border-radius: 0;
  color: var(--ink-2);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
}
.main[data-skin="editorial"] .range-tabs button:hover { color: var(--ink); }
.main[data-skin="editorial"] .range-tabs button.active {
  background: transparent;
  box-shadow: none;
  color: var(--ink);
  border-bottom-color: var(--red);
}

/* underline-style inputs (Swiss form aesthetic) */
.main[data-skin="editorial"] .search-input,
.main[data-skin="editorial"] .input,
.main[data-skin="editorial"] select.input {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border-strong);
  border-radius: 0;
  padding: 6px 4px;
  font-size: 12px;
  color: var(--ink);
}
.main[data-skin="editorial"] .search-input::placeholder { color: var(--ink-3); font-style: italic; }
.main[data-skin="editorial"] .search-input:focus,
.main[data-skin="editorial"] .input:focus,
.main[data-skin="editorial"] select.input:focus {
  outline: 0;
  border-bottom: 2px solid var(--red);
}

[data-skin="editorial"] .date-range { display: inline-flex; align-items: center; gap: 6px; }
[data-skin="editorial"] .date-input { width: 136px; font-size: 11px; }
[data-skin="editorial"] .range-dash { color: var(--ink-3); font-size: 12px; }
[data-skin="editorial"] .date-range.active .date-input { border-bottom: 2px solid var(--red); }

/* buttons — flat, squared, letter-spaced */
[data-skin="editorial"] .btn {
  border-radius: 0;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 10.5px;
  font-weight: 600;
}
[data-skin="editorial"] .btn-secondary {
  background: transparent;
  border: 1px solid var(--ink);
  color: var(--ink);
}
[data-skin="editorial"] .btn-secondary:hover { background: var(--ink); color: var(--paper); }
[data-skin="editorial"] .btn-primary { background: var(--red); border-color: var(--red); color: var(--paper); }
[data-skin="editorial"] .btn-primary:hover { background: var(--color-primary-hover); }

/* ============================ PERIOD TILES ============================ */
.main[data-skin="editorial"] .sb-tiles { gap: 0; border-top: 1px solid var(--rule); }
.main[data-skin="editorial"] .sb-tile {
  background: transparent;
  border: 0;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  box-shadow: none;
  padding: var(--sp-4) var(--sp-4) var(--sp-4) 0;
  margin-left: var(--sp-4);
  position: relative;
  transition: background .18s ease;
  animation: ed-rise .5s cubic-bezier(.2,.7,.2,1) both;
}
.main[data-skin="editorial"] .sb-tile:nth-child(1) { animation-delay: .10s; }
.main[data-skin="editorial"] .sb-tile:nth-child(2) { animation-delay: .15s; }
.main[data-skin="editorial"] .sb-tile:nth-child(3) { animation-delay: .20s; }
.main[data-skin="editorial"] .sb-tile:nth-child(4) { animation-delay: .25s; }
.main[data-skin="editorial"] .sb-tile:nth-child(5) { animation-delay: .30s; }
.main[data-skin="editorial"] .sb-tile:hover { background: rgba(25,21,15,.025); }
/* active period: a tab-style ink top bar + a gently raised paper fill — no red line */
.main[data-skin="editorial"] .sb-tile.active {
  background: var(--paper-card);
  box-shadow: inset 0 3px 0 0 var(--ink);
  outline: 0;
}
.main[data-skin="editorial"] .sb-tile.active h4 { color: var(--ink); font-weight: 700; }
.main[data-skin="editorial"] .sb-tile.active .sales { color: var(--ink); }
.main[data-skin="editorial"] .sb-tile.forecast { border-style: dashed; opacity: .7; }
.main[data-skin="editorial"] .sb-tile h4 {
  font-size: 10px; letter-spacing: .2em; color: var(--ink-2); margin-bottom: 10px;
}
.main[data-skin="editorial"] .sb-tile .sales {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 30px;
  letter-spacing: -.02em;
  color: var(--ink);
  margin-bottom: 10px;
}
.main[data-skin="editorial"] .sb-tile .kv { padding: 2px 0; color: var(--ink-2); }
.main[data-skin="editorial"] .sb-tile .kv b { color: var(--ink); }
.main[data-skin="editorial"] .sb-tile .tile-more {
  margin-top: 12px !important; width: auto !important;
  background: transparent; border: 0; border-top: 1px solid var(--rule); padding: 8px 0 0;
  color: var(--ink-2);
}
.main[data-skin="editorial"] .sb-tile .tile-more:hover { color: var(--red); background: transparent; }

/* ============================ P&L CARD + CHART ============================ */
.main[data-skin="editorial"] .sb-grid { gap: var(--sp-5); margin-top: var(--sp-5); }
[data-skin="editorial"] .pl-card,
.main[data-skin="editorial"] .chart-card {
  background: var(--paper-card);
  border: 1px solid var(--rule);
  border-radius: 0;
  box-shadow: none;
  padding: var(--sp-5);
}
[data-skin="editorial"] .pl-card h3 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -.01em;
  margin: 0 0 var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: 2px solid var(--ink);
}
[data-skin="editorial"] .pl-row {
  border-bottom: 1px dotted var(--rule);
  padding: 8px 0;
  color: var(--ink-2);
}
[data-skin="editorial"] .pl-row b { color: var(--ink); }
[data-skin="editorial"] .pl-row.total {
  border-top: 3px double var(--ink);
  border-bottom: none;
  margin-top: 6px;
  padding-top: 12px;
  font-family: var(--serif);
  font-size: 17px;
}
[data-skin="editorial"] .pl-row.total b { font-size: 22px; font-weight: 600; }
[data-skin="editorial"] .pl-card summary .caret { color: var(--red); }

/* suppress the native <details> disclosure triangle everywhere in the skin (the shared
   rule only covers .pl-card, so modals leaked a second, orphaned marker) */
[data-skin="editorial"] summary { list-style: none; cursor: pointer; }
[data-skin="editorial"] summary::-webkit-details-marker { display: none; }
[data-skin="editorial"] summary::marker { content: ""; }
[data-skin="editorial"] .caret { color: var(--red); }

/* chart legend swatches → editorial bars/keys */
.main[data-skin="editorial"] .chart-legend {
  text-transform: uppercase; letter-spacing: .1em; font-size: 10px; color: var(--ink-2);
  margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--rule);
}
.main[data-skin="editorial"] .chart-legend i { height: 2px; }

/* ============================ DATA TABLE ============================ */
[data-skin="editorial"] .data-table-wrap {
  border: 1px solid var(--rule);
  border-radius: 0;
  box-shadow: none;
  background: var(--paper-card);
  animation: ed-fade .6s ease .18s both;
}
/* One scroll, not two: the page scrolls vertically; the wide ledger scrolls only
   sideways (shift-wheel / trackpad / the bar at its foot). Kills the nested
   vertical scrollbar that fought the page scroll. */
.main[data-skin="editorial"] .data-table-wrap,
.main[data-skin="editorial"] .data-table-wrap.tall {
  max-height: none;
  overflow-x: auto;
  overflow-y: hidden;
}
.main[data-skin="editorial"] .data-table-wrap::-webkit-scrollbar { height: 12px; }
.main[data-skin="editorial"] .data-table-wrap::-webkit-scrollbar-track { background: var(--paper-2); }
.main[data-skin="editorial"] .data-table-wrap::-webkit-scrollbar-thumb {
  background: var(--border-strong); border: 3px solid var(--paper-2);
}
.main[data-skin="editorial"] .data-table-wrap::-webkit-scrollbar-thumb:hover { background: var(--ink-2); }

/* fixed-layout P&L table: cells clip cleanly so columns can shrink */
[data-skin="editorial"] .pl-table th,
[data-skin="editorial"] .pl-table td { overflow: hidden; text-overflow: ellipsis; }
[data-skin="editorial"] .pl-table th { position: sticky; top: 0; }
[data-skin="editorial"] .pl-table .th-label {
  overflow: hidden; text-overflow: ellipsis; display: inline-block;
  max-width: calc(100% - 22px); vertical-align: bottom;
}

/* drag-to-resize grip on the right edge of each header cell */
[data-skin="editorial"] .col-grip {
  position: absolute; top: 0; right: 0; width: 9px; height: 100%;
  cursor: col-resize; user-select: none; z-index: 7;
}
[data-skin="editorial"] .col-grip::after {
  content: ""; position: absolute; top: 25%; right: 3px; height: 50%; width: 2px;
  background: var(--rule); transition: background .12s;
}
[data-skin="editorial"] .col-grip:hover::after,
[data-skin="editorial"] .col-grip:active::after { background: var(--red); }

/* bar directly above the ledger — holds the column picker so its dropdown
   opens over the table, not over the period tiles */
.main[data-skin="editorial"] .table-bar {
  display: flex; align-items: baseline; gap: 12px;
  margin: var(--sp-5) 0 var(--sp-2);
}
.main[data-skin="editorial"] .table-title {
  font-family: var(--serif); font-size: 18px; font-weight: 600; color: var(--ink);
}
.main[data-skin="editorial"] .table-bar .col-menu { left: auto; right: 0; }

/* column show/hide menu */
[data-skin="editorial"] .col-menu-wrap { position: relative; display: inline-flex; }
[data-skin="editorial"] .col-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 40;
  background: var(--paper-card); border: 1px solid var(--ink);
  box-shadow: var(--shadow-modal); padding: 10px 0; min-width: 200px;
}
[data-skin="editorial"] .col-menu[hidden] { display: none; }
[data-skin="editorial"] .col-menu-head {
  font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-3); padding: 0 14px 8px; border-bottom: 1px solid var(--rule); margin-bottom: 6px;
}
[data-skin="editorial"] .col-opt {
  display: flex; align-items: center; gap: 9px; padding: 5px 14px;
  font-size: 12px; color: var(--ink); cursor: pointer;
}
[data-skin="editorial"] .col-opt:hover { background: var(--surface-row-hover); }
[data-skin="editorial"] .col-opt input { accent-color: var(--red); }
[data-skin="editorial"] .col-opt input:disabled + span { color: var(--ink-3); }
[data-skin="editorial"] .col-menu-foot {
  display: flex; gap: 14px; padding: 8px 14px 2px; margin-top: 6px; border-top: 1px solid var(--rule);
}
[data-skin="editorial"] .col-menu-foot button {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 600; color: var(--ink-2);
}
[data-skin="editorial"] .col-menu-foot button:hover { color: var(--red); }

/* freeze the Product column so titles stay readable while scrolling sideways */
.main[data-skin="editorial"] .data-table thead th:first-child,
.main[data-skin="editorial"] .data-table tbody td:first-child {
  position: sticky; left: 0; z-index: 4;
  background: var(--paper-card);
  box-shadow: 1px 0 0 var(--rule);
}
.main[data-skin="editorial"] .data-table thead th:first-child {
  z-index: 6; background: var(--paper-2);
}
.main[data-skin="editorial"] .data-table tbody tr:hover td:first-child { background: var(--surface-row-hover); }

/* chart */
[data-skin="editorial"] .ed-chart { display: block; }
[data-skin="editorial"] .ed-axis {
  font-family: var(--font-family); font-size: 9px; font-weight: 500;
  letter-spacing: .06em; fill: var(--ink-3);
}
[data-skin="editorial"] .ed-bar { transition: opacity .15s ease; }
[data-skin="editorial"] .ed-hot { cursor: crosshair; }
[data-skin="editorial"] .ed-hot:hover { fill: rgba(25,21,15,.045); }
[data-skin="editorial"] .data-table { font-size: 12.5px; }
[data-skin="editorial"] .data-table th {
  background: var(--paper-2);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 9.5px;
  font-weight: 700;
  color: var(--ink-2);
  border-bottom: 1.5px solid var(--ink);
  padding: 11px 12px;
}
[data-skin="editorial"] .data-table th.sorted { color: var(--red); }
[data-skin="editorial"] .data-table th .sort { color: var(--ink-3); }
[data-skin="editorial"] .data-table th.sorted .sort { color: var(--red); }
[data-skin="editorial"] .data-table td { border-bottom: 1px solid var(--rule); padding: 10px 12px; }
[data-skin="editorial"] .data-table tbody tr:hover { background: var(--surface-row-hover); }
[data-skin="editorial"] .data-table tbody tr.selected { background: var(--red-soft); }
[data-skin="editorial"] .product-thumb {
  border-radius: 0; background: var(--paper-2); border: 1px solid var(--rule);
}
[data-skin="editorial"] .product-title { font-weight: 600; }
[data-skin="editorial"] .product-sub { color: var(--ink-3); }

/* gains/losses — the editorial colour grammar */
[data-skin="editorial"] .money-neg { color: var(--red); font-weight: 600; }
[data-skin="editorial"] .money-pos { color: var(--green); font-weight: 600; }
[data-skin="editorial"] .cell-link { color: var(--red); }

/* ============================ PILLS / TAGS ============================ */
[data-skin="editorial"] .pill {
  border-radius: 2px;
  text-transform: uppercase;
  letter-spacing: .07em;
  font-size: 9.5px;
  font-weight: 700;
  padding: 3px 8px;
  background: transparent;
  border: 1px solid currentColor;
}
[data-skin="editorial"] .pill-ok        { color: var(--green); }
[data-skin="editorial"] .pill-overstock { color: var(--status-overstock); }
[data-skin="editorial"] .pill-warn      { color: var(--gold); }
[data-skin="editorial"] .pill-danger    { color: var(--red); }
[data-skin="editorial"] .pill-neutral   { color: var(--ink-2); }
[data-skin="editorial"] .tag-supplier {
  border-radius: 0; background: transparent; border: 1px solid var(--red);
  color: var(--red); font-weight: 500;
}

/* ============================ STAT CARDS (COGS tab) ============================ */
.main[data-skin="editorial"] .card-row { gap: 0; border-top: 1px solid var(--rule); }
.main[data-skin="editorial"] .stat-card {
  background: transparent; border: 0; box-shadow: none; border-radius: 0;
  border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  border-top: 2px solid var(--ink) !important;
  padding: var(--sp-4) var(--sp-4) var(--sp-4) 0; margin-left: var(--sp-4);
}
.main[data-skin="editorial"] .stat-card.t-ok      { border-top-color: var(--green) !important; }
.main[data-skin="editorial"] .stat-card.t-warn    { border-top-color: var(--gold) !important; }
.main[data-skin="editorial"] .stat-card.t-neutral { border-top-color: var(--ink-2) !important; }
.main[data-skin="editorial"] .stat-card h4 { font-size: 9.5px; letter-spacing: .16em; }
.main[data-skin="editorial"] .stat-card .big {
  font-family: var(--serif); font-weight: 500; font-size: 30px; letter-spacing: -.02em;
}

/* ============================ MODALS ============================ */
.modal[data-skin="editorial"] {
  background: var(--paper-card);
  border: 1px solid var(--rule);
  border-radius: 2px;
  box-shadow: var(--shadow-modal);
}
.modal[data-skin="editorial"] header {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -.01em;
  background: var(--paper-2);
  border-bottom: 1.5px solid var(--ink);
}
.modal[data-skin="editorial"] header .x { color: var(--ink-3); }
.modal[data-skin="editorial"] header .x:hover { color: var(--red); }
.modal[data-skin="editorial"] footer { border-top: 1px solid var(--rule); }
[data-skin="editorial"] .mini-table th {
  background: var(--paper-2); text-transform: uppercase; letter-spacing: .08em;
  font-size: 9.5px; font-weight: 700; color: var(--ink-2); border-bottom: 1.5px solid var(--ink);
}
[data-skin="editorial"] .mini-table td { border-bottom: 1px solid var(--rule); }
[data-skin="editorial"] .detail-card {
  background: var(--paper-card); border: 1px solid var(--rule); border-radius: 0;
}
[data-skin="editorial"] .detail-card h5 {
  font-family: var(--serif); font-weight: 600; font-size: 14px;
  padding-bottom: 6px; border-bottom: 1px solid var(--ink); margin-bottom: 10px;
}
[data-skin="editorial"] .detail-card .kv.total { border-top: 1.5px solid var(--ink); }
[data-skin="editorial"] .dropzone {
  border: 1.5px dashed var(--border-strong); border-radius: 0; background: var(--paper-2);
  text-transform: uppercase; letter-spacing: .1em; font-size: 11px;
}
[data-skin="editorial"] .dropzone.drag { border-color: var(--red); background: var(--red-soft); color: var(--red); }
[data-skin="editorial"] .empty { font-style: italic; color: var(--ink-3); }
[data-skin="editorial"] code {
  background: var(--paper-2); border: 1px solid var(--rule); padding: 1px 5px; border-radius: 2px;
}

/* ============================ MOTION ============================ */
@keyframes ed-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes ed-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .main[data-skin="editorial"] *,
  .modal[data-skin="editorial"] * { animation: none !important; }
}