/* ===================================================================
   LedgerIQ Theme Pass — cross-module normalisation layer
   Loaded LAST, after every module stylesheet. Re-skins recurring
   patterns to the June 2026 enterprise theme (deep-pine harness,
   light neutral body, green-anchored palette) without editing all
   52 module files. Colours/borders/radii/typography only — no
   layout changes.
   =================================================================== */

/* ── 1. Module canvas ─────────────────────────────────────────── */

/* The module container itself: lift off the wash with a clean card */
#contentSectionEl.content-section {
    background: var(--liq-surface);
    border: 1px solid var(--liq-border);
    border-radius: var(--liq-card-radius, 12px);
    box-shadow: var(--liq-shadow-sm);
}

/* Module top-level headings — Fraunces mastheads (hybrid theme) */
#contentSectionEl .content-section-title,
#contentSectionEl > h2:first-child {
    font-family: var(--liq-font-display);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--liq-text);
}

/* ── 2. Cards: consistent surfaces, hairlines, radii ──────────── */

#contentSectionEl .card,
#contentSectionEl .metric-card,
#contentSectionEl [class*="-card"]:not([class*="card-"]) {
    border-color: var(--liq-border);
}

/* Soft inner panels that used warm/stone tints */
#contentSectionEl [class*="panel"],
#contentSectionEl [class*="-box"] {
    border-color: var(--liq-border);
}

/* ── 3. Dark pine bands: titles must be legible ───────────────── */

/* iq-suite-editorial.css sets `.editorial h1–h4 { color: var(--ink) }`,
   which overrides the white colour inherited inside dark module bands.
   Every dark-band container class (enumerated from the module CSS)
   gets its headings and copy forced light here. */
.editorial .margin-analysis-header h1, .editorial .margin-analysis-header h2,
.editorial .margin-analysis-header h3, .editorial .margin-analysis-header h4,
.editorial .anomaly-header h1, .editorial .anomaly-header h2,
.editorial .anomaly-header h3, .editorial .anomaly-header h4,
.editorial .anomaly-hero h1, .editorial .anomaly-hero h2,
.editorial .anomaly-hero h3, .editorial .anomaly-hero h4,
.editorial .bs-trends-hero h1, .editorial .bs-trends-hero h2,
.editorial .bs-trends-hero h3, .editorial .bs-trends-hero h4,
.editorial .bv-hero-header h1, .editorial .bv-hero-header h2,
.editorial .bv-hero-header h3, .editorial .bv-hero-header h4,
.editorial .bva-hero-header h1, .editorial .bva-hero-header h2,
.editorial .bva-hero-header h3, .editorial .bva-hero-header h4,
.editorial .cf-forecast-hero h1, .editorial .cf-forecast-hero h2,
.editorial .cf-forecast-hero h3, .editorial .cf-forecast-hero h4,
.editorial .crl-hero-header h1, .editorial .crl-hero-header h2,
.editorial .crl-hero-header h3, .editorial .crl-hero-header h4,
.editorial .cso-hero-header h1, .editorial .cso-hero-header h2,
.editorial .cso-hero-header h3, .editorial .cso-hero-header h4,
.editorial .cvp-hero h1, .editorial .cvp-hero h2,
.editorial .cvp-hero h3, .editorial .cvp-hero h4,
.editorial .dupont-hero h1, .editorial .dupont-hero h2,
.editorial .dupont-hero h3, .editorial .dupont-hero h4,
.editorial .forecast-hero h1, .editorial .forecast-hero h2,
.editorial .forecast-hero h3, .editorial .forecast-hero h4,
.editorial .kmt-hero h1, .editorial .kmt-hero h2,
.editorial .kmt-hero h3, .editorial .kmt-hero h4,
.editorial .pl-trends-hero h1, .editorial .pl-trends-hero h2,
.editorial .pl-trends-hero h3, .editorial .pl-trends-hero h4,
.editorial .ri-hero h1, .editorial .ri-hero h2,
.editorial .ri-hero h3, .editorial .ri-hero h4,
.editorial .rt-hero h1, .editorial .rt-hero h2,
.editorial .rt-hero h3, .editorial .rt-hero h4,
.editorial .seasonality-hero h1, .editorial .seasonality-hero h2,
.editorial .seasonality-hero h3, .editorial .seasonality-hero h4,
.editorial .tea-hero-header h1, .editorial .tea-hero-header h2,
.editorial .tea-hero-header h3, .editorial .tea-hero-header h4,
.editorial .fhs-hero h1, .editorial .fhs-hero h2,
.editorial .fhs-hero h3, .editorial .fhs-hero h4,
.editorial .pricing-power-header h4,
.editorial .pricing-power-header p,
#contentSectionEl [class*="hero"] h1,
#contentSectionEl [class*="hero"] h2,
#contentSectionEl [class*="hero"] h3,
#contentSectionEl [class*="hero"] h4,
#contentSectionEl [class*="-header"][style*="gradient"] h4 {
    color: #fff;
}

/* Var-based dark bands (gradients via CSS vars, missed by the hex scan).
   .oe-header is ALSO reused as a light header by Revenue Insights, hence
   the :not(.ri-header) guard. The .expense-header rule must outrank the
   section-1 `#contentSectionEl .content-section-title` masthead colour. */
#contentSectionEl .expense-header .content-section-title,
.editorial .expense-header h2, .editorial .expense-header h3,
.editorial .oe-header:not(.ri-header) h2, .editorial .oe-header:not(.ri-header) h3,
.editorial .what-if-cvp-header h2, .editorial .what-if-cvp-header h3,
.editorial .what-if-cvp-header h4,
.editorial .fhs-header h2, .editorial .fhs-header h3,
.editorial .expense-hero h2, .editorial .expense-hero h3,
.editorial .expense-comparison-summary h3,
.editorial .oe-calculator-header h3, .editorial .oe-calculator-header h4,
.editorial .correlation-header h1, .editorial .correlation-header h2 {
    color: #fff;
}

/* ── 4. Form controls ─────────────────────────────────────────── */

#contentSectionEl input[type="checkbox"],
#contentSectionEl input[type="radio"],
#contentSectionEl input[type="range"],
#enrichmentManagementPage input[type="checkbox"],
#promptModal input[type="checkbox"],
#promptModal input[type="radio"] {
    accent-color: var(--liq-accent);
}

#contentSectionEl select,
#contentSectionEl input[type="text"],
#contentSectionEl input[type="number"],
#contentSectionEl input[type="date"] {
    border-color: var(--liq-border);
    border-radius: var(--liq-radius-tight, 8px);
    font-family: var(--liq-font-body);
    color: var(--liq-text);
    background-color: var(--liq-surface);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#contentSectionEl select:focus,
#contentSectionEl input[type="text"]:focus,
#contentSectionEl input[type="number"]:focus,
#contentSectionEl input[type="date"]:focus {
    outline: none;
    border-color: var(--liq-accent);
    box-shadow: 0 0 0 3px rgba(74, 144, 128, 0.12);
}

/* ── 5. Tables: enterprise data-grid feel ─────────────────────── */

#contentSectionEl table thead th {
    font-family: var(--liq-font-mono);
    font-size: 0.66rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--liq-text-muted);
    border-bottom: 1px solid var(--liq-border-strong);
}

#contentSectionEl table tbody td {
    border-color: var(--liq-border-light);
    font-variant-numeric: tabular-nums;
}

/* ── 6. Numerals: tabular everywhere they matter ──────────────── */

#contentSectionEl [class*="value"],
#contentSectionEl [class*="amount"],
#contentSectionEl [class*="metric"] {
    font-variant-numeric: tabular-nums;
}

/* ── 7. Scrollbars inside the content column ──────────────────── */

.main-content-area::-webkit-scrollbar { width: 10px; }
.main-content-area::-webkit-scrollbar-track { background: transparent; }
.main-content-area::-webkit-scrollbar-thumb {
    background: var(--liq-border-strong);
    border-radius: 99px;
    border: 2px solid var(--liq-bg);
}
.main-content-area::-webkit-scrollbar-thumb:hover { background: var(--liq-green-300); }

/* ── 8. Badges & pills: quieten saturated fills ───────────────── */

#contentSectionEl [class*="badge"]:not([class*="anomaly"]) {
    border-radius: 5px;
}

/* ── 9. ApexCharts chrome ─────────────────────────────────────── */

.apexcharts-tooltip {
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 8px 24px rgba(16, 42, 36, 0.25) !important;
    border-radius: 8px !important;
}

.apexcharts-legend-text {
    font-family: var(--liq-font-body) !important;
    color: var(--liq-text-secondary) !important;
}

.apexcharts-gridline { stroke: rgba(23, 33, 29, 0.05); }

.apexcharts-xaxis-label,
.apexcharts-yaxis-label {
    font-family: var(--liq-font-mono) !important;
    fill: var(--liq-text-muted) !important;
}

/* OE-pattern modules render Apex into a host div swapped in for a
   legacy <canvas>. The host inherits the canvas's default 150px
   computed height as an inline style, collapsing charts inside
   fixed-height .oe-chart-container wrappers. Force the host to fill
   its intentionally-sized container. */
.oe-chart-container > .liq-apex-host {
    height: 100% !important;
    min-height: 0 !important;
}

/* Range sliders in calculator/simulator panels: track was nearly
   invisible (border-tint on grey surface) */
#contentSectionEl .oe-slider {
    background: var(--liq-border-strong);
}

/* ── 9b. Preferred chart heights per viewport bucket ──────────── */
/* Charts get intentional heights, not container-fill. JS twin:
   LedgerIQApex.preferredHeight(kind) / sizeVizContainer(el, kind). */

.liq-viz--hero     { height: 420px !important; min-height: 0 !important; }
.liq-viz--standard { height: 360px !important; min-height: 0 !important; }
.liq-viz--compact  { height: 280px !important; min-height: 0 !important; }
.liq-viz--micro    { height: 175px !important; min-height: 0 !important; }

@media (min-width: 1600px) {
    .liq-viz--hero     { height: 460px !important; }
    .liq-viz--standard { height: 400px !important; }
    .liq-viz--compact  { height: 300px !important; }
    .liq-viz--micro    { height: 190px !important; }
}

@media (max-width: 1199px) {
    .liq-viz--hero     { height: 380px !important; }
    .liq-viz--standard { height: 330px !important; }
    .liq-viz--compact  { height: 260px !important; }
    .liq-viz--micro    { height: 165px !important; }
}

@media (max-width: 899px) {
    .liq-viz--hero     { height: 340px !important; }
    .liq-viz--standard { height: 300px !important; }
    .liq-viz--compact  { height: 240px !important; }
    .liq-viz--micro    { height: 155px !important; }
}

@media (max-width: 599px) {
    .liq-viz--hero     { height: 300px !important; }
    .liq-viz--standard { height: 260px !important; }
    .liq-viz--compact  { height: 220px !important; }
    .liq-viz--micro    { height: 145px !important; }
}

/* ── 10. Module hero bands (shared pattern) ───────────────────── */

/* Many modules open with a dark band: unify the pine treatment */
#contentSectionEl [class*="module-hero"],
#contentSectionEl [class*="-hero-band"] {
    border-radius: var(--liq-card-radius, 12px);
}

/* ── 11. Buttons: kill any remaining bootstrap blue ───────────── */

#contentSectionEl .btn-info,
#contentSectionEl .btn-primary {
    background-color: var(--liq-green-600);
    border-color: var(--liq-green-600);
    color: #fff;
}

#contentSectionEl .btn-info:hover,
#contentSectionEl .btn-primary:hover {
    background-color: var(--liq-green-700);
    border-color: var(--liq-green-700);
}