/* ════════════════════════════════════════════════════════════════════════════════
   THEME UTILITIES  -  PrimaPlaas
   ────────────────────────────────────────────────────────────────────────────────
   Semantic helper classes that adapt automatically to light and dark mode.
   All colours are resolved from Bootstrap 5.3 CSS custom properties set by
   [data-bs-theme] so nothing here needs to be duplicated per-theme.

   APPROVED REPLACEMENTS — use these instead of hardcoded colours:
   ─────────────────────────────────────────────────────────────────
   DON'T                       DO INSTEAD
   color:white                 class="text-body"
   color:gray                  class="text-secondary"
   text-light                  class="text-body"
   text-dark / text-black      class="text-body"
   text-white                  class="text-body"
   table-dark (thead)          class="table-secondary"    (or pp-thead)
   btn-close-white             class="btn-close"
   bg-white / bg-light         class="bg-body" / "bg-body-secondary"
   style="background:..."      use a bg-* Bootstrap class or CSS var
   ════════════════════════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────────────────────
   PAGE BREADCRUMB HEADER  (replaces style="color:gray" h6 pattern)
   Usage: <h6 class="pp-breadcrumb">Area | <span class="pp-page-title">Screen</span></h6>
   ────────────────────────────────────────────────────────────────────────────── */
.pp-breadcrumb {
    color: var(--bs-secondary-color);
    padding-top: 5px;
    font-size: .85rem;
    margin-bottom: 0;
}

.pp-page-title {
    color: var(--bs-body-color);
    font-weight: 600;
}

/* ──────────────────────────────────────────────────────────────────────────────
   TABLE HEAD  (replaces table-dark, which forces black regardless of theme)
   Usage: <thead class="pp-thead">
   ────────────────────────────────────────────────────────────────────────────── */
.pp-thead {
    background-color: var(--bs-secondary-bg);
    color: var(--bs-body-color);
}

.pp-thead th {
    background-color: var(--bs-secondary-bg);
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
}

/* ──────────────────────────────────────────────────────────────────────────────
   CARD HEADER  (neutral - no tint, adapts to theme)
   Usage: <div class="card-header pp-card-header">
   ────────────────────────────────────────────────────────────────────────────── */
.pp-card-header {
    background-color: var(--bs-secondary-bg);
    color: var(--bs-body-color);
    border-bottom-color: var(--bs-border-color);
}

/* ──────────────────────────────────────────────────────────────────────────────
   TAB CONTENT PANEL  (ensures the area below the tabs has a body background)
   Usage: add class="pp-tab-content" to the .tab-content div
   ────────────────────────────────────────────────────────────────────────────── */
.pp-tab-content {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
}

/* ──────────────────────────────────────────────────────────────────────────────
   MUTED SMALL TEXT  (replaces style="font-size:.7rem" text-secondary combos)
   Usage: class="pp-muted-small"
   ────────────────────────────────────────────────────────────────────────────── */
.pp-muted-small {
    font-size: .75rem;
    color: var(--bs-secondary-color);
}

/* ──────────────────────────────────────────────────────────────────────────────
   CODE BLOCKS  (inline code that is readable in both modes)
   Usage: <code class="pp-code">value</code>
   ────────────────────────────────────────────────────────────────────────────── */
.pp-code {
    color: var(--bs-info);
    background-color: var(--bs-tertiary-bg);
    padding: 0 .25em;
    border-radius: .2em;
    font-size: .875em;
}

/* ──────────────────────────────────────────────────────────────────────────────
   CATCH-ALLS  -  Fix common hardcoded colour mistakes at render time.
   These selectors catch inline styles and non-adaptive classes that slip
   through in both light and dark mode.
   ────────────────────────────────────────────────────────────────────────────── */

/* Light mode: white text is invisible on a white background */
[data-bs-theme="light"] span[style*="color:white"],
[data-bs-theme="light"] span[style*="color: white"],
[data-bs-theme="light"] div[style*="color:white"],
[data-bs-theme="light"] div[style*="color: white"],
[data-bs-theme="light"] h1[style*="color:white"],
[data-bs-theme="light"] h2[style*="color:white"],
[data-bs-theme="light"] h3[style*="color:white"],
[data-bs-theme="light"] h4[style*="color:white"],
[data-bs-theme="light"] h5[style*="color:white"],
[data-bs-theme="light"] h6[style*="color:white"] {
    color: var(--bs-body-color) !important;
}

/* Light mode: text-light = Bootstrap's light gray ~#f8f9fa, unreadable on white */
[data-bs-theme="light"] .text-light:not(.badge):not(.btn):not(.nav-link):not(.navbar *) {
    color: var(--bs-secondary-color) !important;
}

/* text-white on plain elements only — preserve on buttons, badges, navbar, colored backgrounds */
[data-bs-theme="light"] .text-white:not(.badge):not(.btn):not(.nav-link):not(.navbar-brand):not(.alert):not(.card-header):not(.dropdown-item):not(.navbar *),
body:not([data-bs-theme="dark"]) .text-white:not(.badge):not(.btn):not(.nav-link):not(.navbar-brand):not(.alert):not(.card-header):not(.dropdown-item):not(.navbar *) {
    color: var(--bs-body-color) !important;
}

/* Dark solid fills keep white text; bg-secondary is EXCLUDED because this
   theme's secondary (#e9ecef) is a LIGHT fill — white text is unreadable on it. */
[data-bs-theme="light"] .bg-primary.text-white,
[data-bs-theme="light"] .bg-success.text-white,
[data-bs-theme="light"] .bg-danger.text-white,
[data-bs-theme="light"] .bg-warning.text-white,
[data-bs-theme="light"] .bg-info.text-white,
[data-bs-theme="light"] .bg-dark.text-white,
[data-bs-theme="light"] .badge.text-white:not(.bg-secondary):not(.bg-light),
[data-bs-theme="light"] .btn.text-white,
[data-bs-theme="light"] .navbar .text-white {
    color: #fff !important;
}

/* Light fills always get dark text, even when text-white is (wrongly) applied */
[data-bs-theme="light"] .bg-secondary.text-white,
[data-bs-theme="light"] .bg-light.text-white,
[data-bs-theme="light"] .bg-white.text-white,
[data-bs-theme="light"] .badge.bg-secondary.text-white,
[data-bs-theme="light"] .badge.bg-light.text-white,
[data-bs-theme="light"] .summary-chip.bg-secondary.text-white,
[data-bs-theme="light"] .card-header.bg-secondary.text-white,
[data-bs-theme="light"] .modal-header.bg-secondary.text-white,
[data-bs-theme="light"] .card.bg-secondary.text-white {
    color: #212529 !important;
}

[data-bs-theme="light"] [style*="color:gray"],
[data-bs-theme="light"] [style*="color: gray"],
[data-bs-theme="light"] [style*="color:#8a95a0"],
[data-bs-theme="light"] [style*="color: #8a95a0"] {
    color: var(--bs-secondary-color) !important;
}

/* btn-close: should never need -white variant; let Bootstrap handle it */
.btn-close-white {
    filter: none; /* remove any leftover reference — Bootstrap handles inversion */
}

/* table-dark thead: was forcing pitch-black header regardless of theme.
   In light mode this is fine; in dark mode the black disappears into the bg.
   table-secondary is the safe replacement, but this softens any remaining table-dark: */
[data-bs-theme="dark"] thead.table-dark {
    background-color: var(--bs-secondary-bg) !important;
    color: var(--bs-body-color) !important;
}

/* Ensure all plain table text is readable */
table.table {
    color: var(--bs-body-color);
}

/* ──────────────────────────────────────────────────────────────────────────────
   TABLE TEXT  -  All plain text inside tables uses body color (white/black).
   Badges, buttons and icons keep their own colors.
   This covers text-info, text-success, text-warning, text-secondary, text-light,
   text-white, text-dark and inline color styles on td/th/code/span inside tables.
   ────────────────────────────────────────────────────────────────────────────── */
table.table td,
table.table th,
table.table td span:not(.badge):not(.btn),
table.table th span:not(.badge):not(.btn),
table.table td code,
table.table th code,
table.table td small,
table.table th small,
table.table td div:not(.badge),
table.table td a:not(.btn) {
    color: var(--bs-body-color) !important;
}

/* Contextual rows (table-warning, table-danger etc.) use Bootstrap's own
   --bs-table-color so text contrasts correctly against the tinted background */
table.table tr.table-warning td,
table.table tr.table-warning th,
table.table tr.table-warning td span:not(.badge):not(.btn),
table.table tr.table-warning td small,
table.table tr.table-warning td code,
table.table tr.table-warning td div,
table.table tr.table-warning td .text-secondary,
table.table tr.table-warning td .text-muted,
table.table tr.table-danger td,
table.table tr.table-danger th,
table.table tr.table-danger td span:not(.badge):not(.btn),
table.table tr.table-danger td small,
table.table tr.table-danger td code,
table.table tr.table-danger td div,
table.table tr.table-danger td .text-secondary,
table.table tr.table-danger td .text-muted,
table.table tr.table-success td,
table.table tr.table-success th,
table.table tr.table-info td,
table.table tr.table-info th,
table.table tr.table-primary td,
table.table tr.table-primary th {
    color: var(--bs-table-color) !important;
}

/* Keep links inside tables readable but body-colored */
table.table td a:not(.btn) {
    text-decoration: underline;
}

/* Restore badge colors inside tables */
table.table td .badge,
table.table th .badge {
    color: inherit !important; /* badge sets its own color via bg-* classes */
}

/* ──────────────────────────────────────────────────────────────────────────────
   STAT CARDS  (the small number-summary cards used across YieldCalculator)
   Usage: <div class="card pp-stat-card">
   ────────────────────────────────────────────────────────────────────────────── */
.pp-stat-card .card-body {
    background-color: var(--bs-body-bg);
}

.pp-stat-card .pp-stat-label {
    font-size: .75rem;
    color: var(--bs-secondary-color);
}

.pp-stat-card .pp-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--bs-body-color);
}

.pp-stat-card .pp-stat-sub {
    font-size: .7rem;
    color: var(--bs-secondary-color);
}

/* ──────────────────────────────────────────────────────────────────────────────
   GLASS / PANEL CARDS  -  Bidirectional overrides for page-local panel classes.
   Views define dark-glass rgba styles inline; light mode needs visible panels.
   ────────────────────────────────────────────────────────────────────────────── */

[data-bs-theme="light"] .filter-card,
[data-bs-theme="light"] .filter-row,
[data-bs-theme="light"] .form-card,
[data-bs-theme="light"] .detail-card,
[data-bs-theme="light"] .section-card,
[data-bs-theme="light"] .summary-card,
[data-bs-theme="light"] .audit-card,
[data-bs-theme="light"] .history-card,
[data-bs-theme="light"] .print-card,
[data-bs-theme="light"] .test-card,
[data-bs-theme="light"] .kg-display,
[data-bs-theme="light"] .preview-card,
[data-bs-theme="light"] .preview-order-card,
[data-bs-theme="light"] .line-header,
[data-bs-theme="light"] .line-panel,
[data-bs-theme="light"] .capture-card,
[data-bs-theme="light"] .chart-card,
[data-bs-theme="light"] .dispatch-panel,
[data-bs-theme="light"] .order-section-card,
[data-bs-theme="light"] .wp-card,
[data-bs-theme="light"] .pk-card,
[data-bs-theme="light"] .wp-order-box {
    background: #eef0f3 !important;
    border-color: var(--bs-border-color) !important;
    color: #1a1d21 !important;
}

[data-bs-theme="light"] .wp-card h6,
[data-bs-theme="light"] .pk-card h6,
[data-bs-theme="light"] .wp-card strong,
[data-bs-theme="light"] .pk-card strong,
[data-bs-theme="light"] .wp-order-box strong,
[data-bs-theme="light"] .wp-card td,
[data-bs-theme="light"] .pk-card td,
[data-bs-theme="light"] .wp-card th,
[data-bs-theme="light"] .pk-card th {
    color: #1a1d21 !important;
}

[data-bs-theme="light"] .wp-card .text-secondary,
[data-bs-theme="light"] .pk-card .text-secondary,
[data-bs-theme="light"] .wp-card .text-muted,
[data-bs-theme="light"] .pk-card .text-muted {
    color: #4b5563 !important;
}

[data-bs-theme="light"] .line-header:hover {
    background: var(--bs-tertiary-bg) !important;
}

[data-bs-theme="light"] .section-header {
    background: var(--bs-tertiary-bg) !important;
    border-left-color: var(--bs-border-color) !important;
    color: var(--bs-secondary-color) !important;
}

[data-bs-theme="light"] .info-label,
[data-bs-theme="light"] .generated-text,
[data-bs-theme="light"] .dispatch-sub,
[data-bs-theme="light"] .kpi-label {
    color: var(--bs-secondary-color) !important;
}

[data-bs-theme="light"] .stock-bar {
    background: var(--bs-border-color) !important;
}

/* ──────────────────────────────────────────────────────────────────────────────
   RAPI REPORT ELEMENTS  -  Light-mode defaults in views; dark overrides here.
   ────────────────────────────────────────────────────────────────────────────── */
[data-bs-theme="dark"] .stat-card {
    background: var(--bs-secondary-bg) !important;
    color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .stat-card .stat-value {
    color: var(--bs-primary) !important;
}

[data-bs-theme="dark"] .stat-card .stat-label {
    color: var(--bs-secondary-color) !important;
}

[data-bs-theme="dark"] .data-table {
    background: var(--bs-body-bg) !important;
    color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .data-table .table thead th {
    background-color: var(--bs-primary) !important;
    color: #fff !important;
}

[data-bs-theme="dark"] .data-table .table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--bs-tertiary-bg) !important;
}

[data-bs-theme="dark"] .section-title {
    color: var(--bs-body-color) !important;
    border-bottom-color: var(--bs-primary) !important;
}

[data-bs-theme="light"] .section-title,
[data-bs-theme="light"] .kv-label,
[data-bs-theme="light"] .lines-table th,
[data-bs-theme="light"] .asgn-table th {
    color: var(--bs-secondary-color) !important;
}

[data-bs-theme="dark"] tfoot.table-dark,
[data-bs-theme="dark"] tfoot.table-dark th,
[data-bs-theme="dark"] tfoot.table-dark td {
    background-color: var(--bs-secondary-bg) !important;
    color: var(--bs-body-color) !important;
}

/* ──────────────────────────────────────────────────────────────────────────────
   RESPONSIVE PAGE UTILITIES  (tablet-first, 576–992px)
   ────────────────────────────────────────────────────────────────────────────── */

.pp-page-shell {
    width: 100%;
}

.pp-detail-back {
    width: 100%;
}

.pp-page-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.pp-page-toolbar .pp-page-toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

.pp-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}

.pp-form-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.5rem;
}

.pp-form-row > [class*="col-"],
.pp-form-row > .pp-form-field {
    flex: 1 1 auto;
    min-width: 0;
}

@media (max-width: 767.98px) {
    .pp-form-row > .pp-form-field-sm {
        flex: 1 1 calc(50% - 0.5rem);
        min-width: 8rem;
    }

    .pp-form-row > .pp-form-field-full {
        flex: 1 1 100%;
    }
}

.pp-split-pane {
    display: flex;
    gap: 0;
    overflow: hidden;
}

.pp-stat-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.pp-stat-row > .pp-stat-col {
    flex: 1 1 calc(50% - 0.75rem);
    min-width: 0;
}

@media (min-width: 768px) {
    .pp-stat-row > .pp-stat-col {
        flex: 1 1 calc(33.333% - 0.75rem);
    }
}

@media (min-width: 992px) {
    .pp-stat-row > .pp-stat-col {
        flex: 1 1 calc(25% - 0.75rem);
    }
}

/* KPI card — replaces bg-dark text-white stat cards */
.pp-kpi-card {
    background-color: var(--bs-secondary-bg);
    color: var(--bs-body-color);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
}

.pp-kpi-card .pp-kpi-label {
    color: var(--bs-secondary-color);
    font-size: 0.875rem;
    margin-bottom: 0.25rem;
}

.pp-kpi-card .pp-kpi-value {
    color: var(--bs-body-color);
    font-weight: 700;
}

/* Theme-aware tab buttons (PackMaterialAdmin etc.) */
.pp-tab-btn {
    padding: 8px 20px;
    border: 1px solid var(--bs-border-color);
    background: var(--bs-secondary-bg);
    color: var(--bs-body-color);
    border-radius: 6px 6px 0 0;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    transition: all 0.15s;
}

.pp-tab-btn.active {
    background: rgba(var(--bs-primary-rgb), 0.12);
    border-color: var(--bs-primary);
    color: var(--bs-primary);
}

.pp-tab-btn:hover:not(.active) {
    background: var(--bs-tertiary-bg);
}

/* Line cards (Proforma etc.) */
.pp-line-card {
    border: 1px solid var(--bs-border-color);
    border-radius: 6px;
    padding: 12px;
    margin-bottom: 8px;
    background: var(--bs-body-bg);
}

.pp-line-card.alt-line {
    background: rgba(var(--bs-info-rgb), 0.08);
}

[data-bs-theme="light"] .line-card,
[data-bs-theme="light"] .pp-line-card {
    border-color: var(--bs-border-color);
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
}

[data-bs-theme="light"] .link-row {
    border-bottom-color: var(--bs-border-color);
}

[data-bs-theme="light"] .tab-btn,
[data-bs-theme="light"] .card-section,
[data-bs-theme="light"] .kpi-card:not(.bg-primary):not(.bg-success):not(.bg-info):not(.bg-warning):not(.bg-danger):not(.bg-secondary):not(.bg-dark),
[data-bs-theme="light"] .report-shell,
[data-bs-theme="light"] .panel,
[data-bs-theme="light"] .report-card {
    background: var(--bs-secondary-bg) !important;
    border-color: var(--bs-border-color) !important;
    color: var(--bs-body-color);
}

[data-bs-theme="light"] .kpi-card:not(.bg-primary):not(.bg-success):not(.bg-info):not(.bg-warning):not(.bg-danger):not(.bg-secondary):not(.bg-dark) .kpi-label,
[data-bs-theme="light"] .kpi-card:not(.bg-primary):not(.bg-success):not(.bg-info):not(.bg-warning):not(.bg-danger):not(.bg-secondary):not(.bg-dark) .kpi-sub,
[data-bs-theme="light"] .muted-note {
    color: var(--bs-secondary-color) !important;
}

[data-bs-theme="light"] .kpi-card:not(.bg-primary):not(.bg-success):not(.bg-info):not(.bg-warning):not(.bg-danger):not(.bg-secondary):not(.bg-dark) .kpi-value,
[data-bs-theme="light"] .report-card-title {
    color: var(--bs-body-color) !important;
}

/* Colored KPI cards keep fill + light text in BOTH modes.
   Theme palette: info = dark navy #033c73, warning = burnt orange #dd5600,
   primary/success/danger are also dark fills → text must be light (never black).
   bg-secondary (#e9ecef, light gray) keeps dark text; bg-dark is remapped to a
   light panel in light mode elsewhere. */
.kpi-card.bg-primary,
.kpi-card.bg-success,
.kpi-card.bg-danger,
.kpi-card.bg-info,
.kpi-card.bg-warning,
.kpi-card.bg-info.text-dark,
.kpi-card.bg-warning.text-dark {
    color: #fff !important;
}
.kpi-card.bg-primary .kpi-value, .kpi-card.bg-primary .kpi-label, .kpi-card.bg-primary .kpi-sub,
.kpi-card.bg-success .kpi-value, .kpi-card.bg-success .kpi-label, .kpi-card.bg-success .kpi-sub,
.kpi-card.bg-danger .kpi-value, .kpi-card.bg-danger .kpi-label, .kpi-card.bg-danger .kpi-sub,
.kpi-card.bg-info .kpi-value, .kpi-card.bg-info .kpi-label, .kpi-card.bg-info .kpi-sub,
.kpi-card.bg-warning .kpi-value, .kpi-card.bg-warning .kpi-label, .kpi-card.bg-warning .kpi-sub {
    color: #fff !important;
}
[data-bs-theme="dark"] .kpi-card.bg-dark,
[data-bs-theme="dark"] .kpi-card.bg-dark .kpi-value,
[data-bs-theme="dark"] .kpi-card.bg-dark .kpi-label,
[data-bs-theme="dark"] .kpi-card.bg-dark .kpi-sub {
    color: #fff !important;
}

/* ──────────────────────────────────────────────────────────────────────────────
   DARK SOLID FILLS ALWAYS GET LIGHT TEXT (both themes).
   This Bootstrap theme's info (#033c73 navy) and warning (#dd5600 burnt orange)
   are DARK fills — `.text-dark` on them is unreadable everywhere.
   ────────────────────────────────────────────────────────────────────────────── */
.badge.bg-info, .badge.bg-info.text-dark,
.badge.bg-warning, .badge.bg-warning.text-dark,
.summary-chip.bg-info, .summary-chip.bg-info.text-dark,
.summary-chip.bg-warning, .summary-chip.bg-warning.text-dark,
.card.bg-info, .card.bg-info.text-dark,
.card.bg-warning, .card.bg-warning.text-dark,
.card-header.bg-info, .card-header.bg-info.text-dark,
.card-header.bg-warning, .card-header.bg-warning.text-dark,
.modal-header.bg-info, .modal-header.bg-info.text-dark,
.modal-header.bg-warning, .modal-header.bg-warning.text-dark {
    color: #fff !important;
}

.card.bg-info .card-body, .card.bg-warning .card-body,
.card.bg-info .card-title, .card.bg-warning .card-title,
.modal-header.bg-info .modal-title, .modal-header.bg-warning .modal-title,
.progress-bar.bg-warning, .progress-bar.bg-warning.text-dark,
.progress-bar.bg-info, .progress-bar.bg-info.text-dark {
    color: #fff !important;
}

[data-bs-theme="light"] thead.table-dark,
[data-bs-theme="light"] thead.bg-dark,
[data-bs-theme="light"] .sticky-top.bg-dark {
    background-color: var(--bs-secondary-bg) !important;
    color: var(--bs-body-color) !important;
}

[data-bs-theme="light"] .bg-dark:not(.badge):not(.btn) {
    background-color: var(--bs-secondary-bg) !important;
    color: var(--bs-body-color) !important;
}

/* Light mode: never leave pure-white utility panels on the shaded canvas */
[data-bs-theme="light"] .bg-white:not(.badge):not(.btn):not(.label-paper):not(.label-preview-inner):not(.qc-form):not(.sb-form):not(.doc-sheet) {
    background-color: var(--bs-secondary-bg) !important;
    color: var(--bs-body-color) !important;
}

[data-bs-theme="light"] .bg-light:not(.badge):not(.btn) {
    background-color: var(--bs-tertiary-bg) !important;
    color: var(--bs-body-color) !important;
}

/* Edit User ? screen access module boxes */
.pp-access-module {
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    padding: 0.75rem 1rem;
    height: 100%;
}
.pp-access-module-screens {
    padding-left: 1.25rem;
    margin-top: 0.35rem;
}