/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

@keyframes highlight-flash {
  0%, 30% { outline: 2px solid var(--ctp-blue); outline-offset: 2px; }
  100% { outline: 2px solid transparent; outline-offset: 2px; }
}

.highlight-flash {
  animation: highlight-flash 2s ease-out forwards;
}

/* Inventory forecast: show day vs week columns based on parent period attr */
[data-period="day"] .period-week { display: none; }
[data-period="week"] .period-day { display: none; }

/* Tabulator theme overrides for the forecast page (Catppuccin).
   Tabulator's default CDN CSS sets hard-coded light colors on .tabulator-*
   classes that win against our `var(--ctp-base)` overrides unless we use
   !important. Border / hover / alternation colors bumped so they read on
   the dark base. */
.tabulator {
  background: var(--ctp-base) !important;
  border: 0 !important;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 12px;
  color: var(--ctp-text) !important;
}
.tabulator .tabulator-header,
.tabulator .tabulator-headers {
  background: var(--ctp-mantle) !important;
  border-bottom: 2px solid var(--ctp-surface2) !important;
  color: var(--ctp-subtext0) !important;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
}
.tabulator .tabulator-header .tabulator-col {
  background: var(--ctp-mantle) !important;
  border-right: 1px solid var(--ctp-surface2) !important;
  color: var(--ctp-subtext0) !important;
  padding: 6px 8px;
}
.tabulator .tabulator-header .tabulator-col.tabulator-sortable.tabulator-col-sorter-element:hover {
  background: var(--ctp-surface1) !important;
}
.tabulator .tabulator-tableholder,
.tabulator .tabulator-table {
  background: var(--ctp-base) !important;
  color: var(--ctp-text) !important;
}
.tabulator .tabulator-row {
  background: var(--ctp-base) !important;
  border-bottom: 1px solid var(--ctp-surface1) !important;
  color: var(--ctp-text) !important;
}
/* Use surface0 for even rows in dark mode -- mantle was too close to base.
   In light mode surface0 is also more visible than mantle vs base. */
.tabulator .tabulator-row.tabulator-row-even {
  background: var(--ctp-surface0) !important;
}
.tabulator .tabulator-row:hover {
  background: var(--ctp-surface2) !important;
}
.tabulator .tabulator-row .tabulator-cell {
  color: var(--ctp-text) !important;
}
.tabulator .tabulator-row .tabulator-cell {
  border-right: 0;
  padding: 6px 10px;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 12px;
}
/* Numeric and date cells use monospace for column alignment */
.tabulator .tabulator-row .tabulator-cell.fc-num,
.tabulator .tabulator-row .tabulator-cell.fc-day,
.tabulator .tabulator-row .tabulator-cell.fc-week {
  font-family: ui-monospace, SFMono-Regular, monospace;
}
.tabulator .tabulator-row .tabulator-cell.fc-day,
.tabulator .tabulator-row .tabulator-cell.fc-week {
  font-size: 11px;
  padding: 6px 6px;
}
/* Day/week cell value coloring (set via formatter span class) */
.fc-v-r { color: var(--ctp-red); }
.fc-v-p { color: var(--ctp-peach); }
.fc-v-s { color: var(--ctp-subtext1); }
.fc-v-r.fc-v-bold { font-weight: 700; }

/* Inventory-arrival indicator: a purple-bordered box wraps the cell
   value on days/weeks where an SO or in-transit IF is expected to
   land. The number itself keeps its red/peach/subtext color. */
.fc-arrival {
  display: inline-block;
  border: 1px solid transparent;
  padding: 0 4px;
  border-radius: 2px;
}
.tabulator-row:hover .fc-arrival {
  border-color: var(--ctp-mauve);
}

/* Color tokens used inside Tabulator formatter HTML (Tailwind JIT doesn't
   scan JS strings, so define here to guarantee compiled output) */
.tabulator .text-ctp-blue { color: var(--ctp-blue); }
.tabulator .text-ctp-mauve { color: var(--ctp-mauve); }
.tabulator .text-ctp-red { color: var(--ctp-red); }
.tabulator .text-ctp-peach { color: var(--ctp-peach); }
.tabulator .text-ctp-subtext1 { color: var(--ctp-subtext1); }
.tabulator .text-ctp-overlay0 { color: var(--ctp-overlay0); }

/* Days to Stockout < 7: red + bold so it pops against the small font
   size of the body cells. Tabulator's cell font-weight is normal by
   default; we override directly here. */
.tabulator .fc-dts-critical {
  color: var(--ctp-red);
  font-weight: 800;
}
/* Frozen columns: keep their own bg so they don't dissolve into the body.
   Heavier right border (overlay0) so the freeze boundary is obvious as
   you scroll horizontally. Even-row banding still applies to frozens. */
.tabulator .tabulator-frozen {
  background: var(--ctp-base) !important;
  border-right: 2px solid var(--ctp-overlay0) !important;
}
.tabulator .tabulator-row.tabulator-row-even .tabulator-frozen {
  background: var(--ctp-surface0) !important;
}
.tabulator .tabulator-row:hover .tabulator-frozen {
  background: var(--ctp-surface2) !important;
}
.tabulator .tabulator-placeholder {
  color: var(--ctp-overlay0);
}
.tabulator .fc-stale { color: var(--ctp-peach); }
.tabulator .fc-fresh { color: var(--ctp-overlay0); }

/* Tilt long-name column headers 45° so narrow columns (sized to data
   content) don't truncate their multi-word labels. Applied via a
   titleFormatter wrapping the title in <div class="fc-tilt"><span>...</span></div>. */
.tabulator .tabulator-header .tabulator-col,
.tabulator .tabulator-header .tabulator-col .tabulator-col-content,
.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title-holder,
.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title {
  overflow: visible !important;
}
.fc-tilt {
  position: relative;
  height: 100%;
  min-height: 130px;
  width: 100%;
  display: flex;
  align-items: flex-end;          /* anchor rotated text to the bottom */
  justify-content: center;
  padding-bottom: 6px;
  padding-top: 6px;
}
.fc-tilt > span {
  /* writing-mode + rotate(180deg) is the standard pattern for vertical text
     that reads bottom-to-top with the first character anchored at the bottom.
     Equivalent to rotate(-90deg) on the visual but lets normal flex/flow
     handle alignment. Multi-line blocks stack along the (now horizontal)
     block axis, producing parallel vertical strips. */
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  font-size: 10px;
  letter-spacing: 0.04em;
  line-height: 1;
}
.fc-tilt > span .fc-sub {
  display: block;
  font-size: 9px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ctp-overlay0);
}
.fc-tilt > span .fc-line {
  display: block;
  font-size: 10px;
  letter-spacing: 0.04em;
}

/* === Full-viewport data-grid layout ===
   Activated by `body.data-grid-mode` (set when a controller calls
   data_grid_layout!). The page becomes a fixed-height flex column so the
   only scrolling element is the .data-grid-shell wrapping the table.
   Without this, horizontal scrubbing on a wide table triggers browser-level
   scroll/rubber-band, which feels awful. */
body.data-grid-mode,
body.data-grid-mode html {
  height: 100dvh;
  overflow: hidden;
}
body.data-grid-mode {
  display: flex;
  flex-direction: column;
}
body.data-grid-mode > :not(main) {
  flex: 0 0 auto;             /* navbar + banners stay at natural height */
}
body.data-grid-mode > main.data-grid-main {
  flex: 1 1 auto;
  min-height: 0;              /* lets the inner shell shrink/scroll properly */
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
body.data-grid-mode > main.data-grid-main > * {
  flex: 0 0 auto;             /* default: report header/filter rows take natural height */
  min-height: 0;
}
body.data-grid-mode > main.data-grid-main > .data-grid-page {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  /* Spacing between rows comes from the existing space-y-6 utility on the
     same div -- don't double-add via flex gap. */
}
body.data-grid-mode .data-grid-page > * {
  flex: 0 0 auto;
  min-height: 0;
}
body.data-grid-mode .data-grid-shell {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;             /* THE one scrolling element */
  overscroll-behavior: contain;
}
/* Drop the old viewport-relative caps that .po-matrix-wrap used to set --
   the flex parent now controls height. Keeping max-height: calc(100vh - 300px)
   would clip the matrix smaller than its flex slot. */
body.data-grid-mode .po-matrix-wrap {
  max-height: none;
  min-height: 0;
}

/* === Purchase Order Planner matrix === */
/* Full-bleed: escape the parent's max-w-7xl so the matrix can use the whole
   viewport width. Negative-margin trick keeps it visually centered. */
.po-fullbleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
/* The matrix wrap holds both axes of scroll and shrinks/grows with the
   viewport. The max-height offset reserves room for the page chrome above
   it (navbar + heading + description + filter strip ~= 300px). Sticky
   headers and frozen columns now stick to the wrap, not the viewport. */
.po-matrix-wrap {
  max-height: calc(100vh - 300px);
  min-height: 300px;
  overflow: auto;
}
.po-matrix {
  border-collapse: separate;
  border-spacing: 0;
  /* width: max-content with no min-width: 100% means the table sizes to
     its content. When the data is narrower than the wrapper, dead space
     opens up on the right instead of every column getting stretched. */
  width: max-content;
}
/* Every cell carries a 1px bottom + right separator so the grid is
   uniformly bordered. Heavier separators (2px / 3px) override below on
   the structural boundaries (frozen/scrollable, metadata/SKU,
   Depletions/Balances, end-of-header, end-of-week). */
.po-matrix th, .po-matrix td {
  white-space: nowrap;
  border-bottom: 1px solid var(--ctp-surface1);
  border-right: 1px solid var(--ctp-surface1);
  padding: 4px 8px;
}
.po-matrix thead th {
  /* Sticky against the viewport (page-level scroll). Works because the wrap
     has overflow-x: auto only -- vertical content flows out of it. */
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--ctp-base);
  color: var(--ctp-subtext0);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 10px;
  border-bottom: 2px solid var(--ctp-surface2);
}
.po-matrix .po-frozen {
  position: sticky;
  background: var(--ctp-base);
  z-index: 2;
}
.po-matrix tbody tr:hover .po-frozen { background: var(--ctp-mantle); }

/* Row + column hover crosshair -- highlight only the corresponding HEADERS,
   not every cell in the row/column. For rows that means the frozen-left
   metadata cells (Ship Day / Number / Customer); for columns it means the
   vertical SKU header in the THEAD (both Depletions and Inventory Balances
   sides, since they share data-sku-id). background-image is used so the
   underlying cell tint stays visible. Alpha bumped to 0.40 since the
   previous 0.22 disappeared into the dark base. */
.po-matrix tbody tr.po-row:hover > td.po-frozen {
  background-image: linear-gradient(rgba(127, 132, 156, 0.40), rgba(127, 132, 156, 0.40));
}
.po-matrix th.po-sku-header.po-col-hovered {
  background-image: linear-gradient(rgba(127, 132, 156, 0.40), rgba(127, 132, 156, 0.40));
}
/* Frozen thead cells (rowspan=2 metadata column titles) need to stack ABOVE
   the Depletions/Inventory-Balances band (z 4) and the SKU column titles
   (z 3). Otherwise, when the user scrolls horizontally, those bands slide
   leftward under the frozen columns and visually bleed into them. */
.po-matrix thead .po-frozen { z-index: 6; }
/* Ship Day + Number + Customer/Destination stay frozen. Memo / In Full /
   Volume scroll with the SKU matrices. The 1px separators between metadata
   columns come from the base rule above; only the heavy structural
   boundaries are overridden here: Customer right edge (frozen/scrollable
   boundary) and Volume right edge (metadata/SKU-matrix boundary). */
/* Ship Day widened to fit "<Weekday> <m/d>" (worst case "Wednesday 5/19" at
   ~14 mono chars). Number and Customer's sticky-left offsets shift to match. */
.po-matrix .po-col-date     { left: 0;     min-width: 120px; }
.po-matrix .po-col-number   { left: 120px; min-width: 110px; }
/* Variable-content columns: no max-width, no overflow clip -- cells size
   to their full content (each row's white-space: nowrap means each cell
   gets exactly the width its text needs, and the column adopts the widest
   row). Customer keeps the heavier right border because it's the boundary
   between frozen and scrollable bands. */
.po-matrix .po-col-customer { left: 230px; min-width: 180px; border-right: 2px solid var(--ctp-surface2) !important; }
.po-matrix .po-col-ship     { min-width: 130px; }
.po-matrix .po-col-memo     { min-width: 120px; }
.po-matrix .po-col-pct      { min-width: 50px; }
.po-matrix .po-col-pot      { min-width: 60px; border-right: 2px solid var(--ctp-surface2) !important; }

/* Tilted metadata column headers (In Full Percentage, Volume (BBLs)). Same
   vertical rotation as the SKU titles but the underlying column keeps its
   ~50-60px width so the body cells (numeric values like 100%, 132.49)
   still fit comfortably. */
.po-matrix .po-tilted-th {
  height: 160px;
  vertical-align: bottom;
  padding: 4px 2px;
  overflow: hidden;
  text-align: center;
}
.po-matrix .po-tilted-th > div {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1;
  text-transform: none;
  color: var(--ctp-text);
  display: inline-block;
}
.po-matrix .po-sku-header {
  height: 160px;
  width: 28px;
  min-width: 28px;
  max-width: 28px;
  vertical-align: bottom;
  padding: 4px 2px;
  /* Long rotated SKU titles (e.g. "HenHouse Conservatory Rotating West Coast
     IPA (Case 6x4x16oz Cans)") exceed the cell height when rotated 90deg.
     overflow: hidden clips them to the cell bounds so they don't bleed
     upward into the Depletions / Inventory Balances band above. */
  overflow: hidden;
  /* Row 2 of thead -- stick BELOW the Depletions/Inventory-Balances band
     (row 1, 30px tall). Without this offset, both rows tried to stick at
     top: 0 and the section-header row got hidden behind the column-title
     row during vertical scroll. */
  position: sticky;
  top: 30px;
  z-index: 3;
  background: var(--ctp-base);
}
.po-matrix .po-sku-header > div {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--ctp-text);
  font-weight: 500;
}
.po-matrix .po-cell {
  text-align: right;
  font-size: 11px;
  padding: 4px 6px;
  min-width: 28px;
}
/* Use a dim color directly rather than opacity. opacity on the cell would
   also dim any inset box-shadows on that cell, which made the week-end
   horizontal rule look lighter on empty/zero cells than on populated ones.
   Dim colors bumped from surface2/overlay0 to overlay1/subtext0 so the
   dots/zeros are actually legible against the dark base. */
.po-matrix .po-cell-empty   { color: var(--ctp-overlay0); }
.po-matrix .po-cell-zero    { color: var(--ctp-subtext0); }
.po-matrix .po-cell-bal     { color: var(--ctp-text); }
.po-matrix .po-cell-dep     { color: var(--ctp-text); font-weight: 500; }
/* Negative / short cell tints bumped from 0.08-0.10 to 0.22-0.25 so the
   coloured background is visible against the dark base, and bumped to
   ~0.16 for the depletion-side "short" peach which sat next to plenty
   of normal numbers and got lost. */
/* Depletion-side highlights for unfulfillable SO/TO lines.
   po-cell-short: orange/peach -- partial fulfillment (some inventory, not enough)
   po-cell-noinv: red -- no inventory at all available for that SKU that week
   po-cell-neg matches the red treatment, but is applied on the Balances side
   to mark cumulative overcommitment. */
.po-matrix .po-cell-short   { color: var(--ctp-peach); font-weight: 700; background: rgba(250, 179, 135, 0.18); }
.po-matrix .po-cell-noinv   { color: var(--ctp-red); font-weight: 700; background: rgba(243, 139, 168, 0.24); }
.po-matrix .po-cell-neg     { color: var(--ctp-red); font-weight: 700; background: rgba(243, 139, 168, 0.24); }
.po-matrix .po-cell-start   { color: var(--ctp-blue); font-weight: 600; }
.po-matrix .po-row-start td { background: var(--ctp-mantle); border-bottom: 2px solid var(--ctp-surface1); }
.po-matrix .po-detail-row td { padding-left: 0; padding-right: 0; }

/* Section headers spanning the SKU columns: "Depletions" | "Inventory Balances".
   Explicit height pins this band's size so the .po-sku-header `top: 30px`
   offset below lines up exactly. Higher z-index than .po-sku-header (3) so
   the band stays on top if the sticky positions ever overlap. */
.po-matrix .po-section-header {
  height: 30px;
  text-align: center;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0 8px;
  border-bottom: 1px solid var(--ctp-surface1);
  z-index: 4 !important;
}
/* Section header backgrounds tint the bands so they read against the
   dark base. The Inventory Balances band gets a matching 3px left border
   (same as .po-section-start below) so the section divider is a single
   continuous vertical line from the section header band all the way down
   through the column titles and every body row. Placing the line on the
   LEFT of the bal side keeps the x-coordinate identical across all rows. */
/* IMPORTANT: keep the band fully opaque so body cells scrolling underneath
   don't show through. The tint is layered as a background-image on top of
   the opaque base color. A plain `background: rgba(...)` here would clobber
   the opaque base inherited from `.po-matrix thead th` and let cells bleed
   through during vertical scroll. */
.po-matrix .po-section-dep {
  color: var(--ctp-peach);
  background-color: var(--ctp-base);
  background-image: linear-gradient(rgba(250, 179, 135, 0.12), rgba(250, 179, 135, 0.12));
}
.po-matrix .po-section-bal {
  color: var(--ctp-blue);
  background-color: var(--ctp-base);
  background-image: linear-gradient(rgba(137, 180, 250, 0.12), rgba(137, 180, 250, 0.12));
  border-left: 3px solid var(--ctp-overlay1) !important;
}
/* Body + column-title row Depletions/Balances divider. */
.po-matrix .po-section-start { border-left: 3px solid var(--ctp-overlay1) !important; }

/* Client-side filter: hide SKU columns whose projected balance never goes
   to zero/negative. Applied to every TH / TD with data-impacted="false".
   Section-header colspan is recomputed in JS so the labels stay aligned. */
.po-matrix.po-hide-unimpacted [data-impacted="false"] { display: none; }

/* Client-side window filter: hides rows whose ship date is outside the
   selected N-week window. Applied to both the SO row and its detail row. */
.po-matrix tr.po-window-hidden { display: none; }

/* Client-side Shipping From filter: hides rows whose source warehouse
   isn't in the Shipping From multiselect's current selection. */
.po-matrix tr.po-shipfrom-hidden { display: none; }

/* Client-side Unimpacted Orders filter: hides rows whose pct_ready is at
   100% (fully fulfillable as-is, nothing for the user to act on). */
.po-matrix tr.po-complete-hidden { display: none; }

/* Past-due ship date indicator: orange/peach text + background tint on the
   Ship Day cell, mirroring the po-cell-short impacted-inventory treatment.
   Lives on a frozen column, so the peach goes on background-image to layer
   over the opaque ctp-base set by .po-frozen -- otherwise horizontally-
   scrolling SKU content shows through the semi-transparent tint.
   Tooltip ("Past due ship date") lives on the <td>'s title attribute. */
.po-matrix td.po-past-due {
  color: var(--ctp-peach);
  font-weight: 700;
  background-image: linear-gradient(rgba(250, 179, 135, 0.18), rgba(250, 179, 135, 0.18));
}

/* ISO-week grouping. Every other week's rows get a subtle dim overlay so
   the weekly bands read clearly while every row keeps the same 1px bottom
   separator weight. JS toggles po-week-stripe on every row whose ISO week
   index (counted from the top of the visible window) is odd.
   background-image is used so the cell's existing background color
   (red for negative balance, peach for shortfall, etc.) stays visible
   underneath the stripe overlay. */
.po-matrix tr.po-week-stripe > td {
  background-image: linear-gradient(rgba(127, 132, 156, 0.07), rgba(127, 132, 156, 0.07));
}

/* === Planned Packaging table === */
.pp-table tr.pp-hidden { display: none; }
.pp-table tr.pp-week-end > td {
  box-shadow: inset 0 -2px 0 0 var(--ctp-overlay0);
}


/* HTML email body styling */
.email-html-body {
  overflow-wrap: anywhere;
  word-break: break-word;
}
.email-html-body table {
  max-width: 100%;
  table-layout: fixed;
}
.email-html-body pre {
  overflow-x: auto;
  max-width: 100%;
}
.email-html-body ol,
.email-html-body ul {
  padding-left: 1.5em !important;
}
.email-html-body li {
  white-space: normal !important;
}
.email-html-body a {
  color: var(--ctp-blue);
  text-decoration: none;
}
.email-html-body a:hover {
  text-decoration: underline;
}
.email-html-body img {
  max-width: 100%;
  height: auto;
}
.email-html-body blockquote {
  border-left: 2px solid var(--ctp-surface0);
  padding-left: 0.75rem;
  color: var(--ctp-overlay0);
}

/* --- Print styles for reports --- */
.print-only { display: none; }

@media print {
  @page {
    size: letter;
    margin: 0;
  }

  /* --- Reset: strip app shell completely --- */
  .print-only { display: block !important; }
  .no-print,
  nav,
  header.navbar,
  aside,
  form,
  [data-controller="sidebar"],
  [data-controller="geolocation"] > [data-geolocation-target="banner"],
  [data-controller="notification-dropdown"],
  turbo-frame[src] .border-dashed { display: none !important; }

  html { font-size: 11pt; }
  body {
    background: white !important;
    color: #1e1e2e !important;
    font-size: 11pt;
    line-height: 1.5;
    /* Bake margins into the body so they work regardless of browser margin setting */
    margin: 0 !important;
    padding: 0.6in 0.65in !important;
  }

  /* Strip all layout wrappers: max-width, padding, margin */
  main,
  main.mx-auto {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Nuke all Tailwind padding/margin on layout containers */
  .px-4, .px-6, .sm\:px-6, .lg\:px-8 { padding-left: 0 !important; padding-right: 0 !important; }
  .py-6 { padding-top: 0 !important; padding-bottom: 0 !important; }
  .max-w-7xl { max-width: 100% !important; }
  .lg\:pl-64, .lg\:pl-16 { padding-left: 0 !important; }

  /* --- Typography --- */
  .text-2xl { font-size: 14pt !important; }
  .text-3xl { font-size: 16pt !important; }
  .text-lg { font-size: 12pt !important; }
  .text-sm { font-size: 9pt !important; }
  .text-xs { font-size: 8pt !important; }
  .text-\[10px\] { font-size: 7pt !important; }
  .text-\[9px\] { font-size: 6.5pt !important; }

  /* --- Borders: visible but light --- */
  .border-2 { border-width: 1px !important; }
  .border-ctp-surface0 { border-color: #d0d0d0 !important; }
  .border-ctp-blue\/30 { border-color: #a0b8e8 !important; }
  .border-ctp-surface1 { border-color: #d0d0d0 !important; }
  .divide-ctp-surface0 > :not([hidden]) ~ :not([hidden]) { border-color: #e0e0e0 !important; }

  /* --- Tables: clean and readable --- */
  table { font-size: 8.5pt; width: 100%; border-collapse: collapse; }
  th { font-size: 7pt !important; }
  th, td { padding: 4px 6px !important; }

  /* Show all responsive columns */
  .hidden.sm\:table-cell,
  .hidden.md\:table-cell,
  .hidden.lg\:table-cell { display: table-cell !important; }

  /* --- Spacing: tighten for print --- */
  .space-y-6 > :not([hidden]) ~ :not([hidden]) { margin-top: 12px !important; }
  .space-y-3 > :not([hidden]) ~ :not([hidden]) { margin-top: 6px !important; }
  .mb-6 { margin-bottom: 10px !important; }
  .mb-4 { margin-bottom: 8px !important; }
  .p-4 { padding: 10px !important; }
  .p-3 { padding: 8px !important; }
  .gap-4, .gap-3 { gap: 8px !important; }

  /* --- Grid: always multi-col in print --- */
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }

  /* --- Charts --- */
  canvas { max-height: 220px !important; }

  /* --- Page flow --- */
  .print-break-before { page-break-before: always; }
  .print-break-inside-avoid { page-break-inside: avoid; }

  /* --- Colors: force for badges and indicators --- */
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  /* --- Links: readable in print --- */
  a { text-decoration: none !important; }

  /* --- Bar chart fills: visible --- */
  .bg-ctp-blue { background-color: #1e66f5 !important; }
  .bg-ctp-surface0 { background-color: #e8e8e8 !important; }
}