/*
 * Decopak Europ - Dark Luxe Theme
 * Based on design reference: docs/new-design/decopak_restyling.html
 * Colors: black base + gold accents (luxury perfumery aesthetic)
 */

/* ── Force dark mode & override Tabler/Backpack variables ── */
[data-bs-theme=dark] {
    /* Base backgrounds */
    --tblr-body-bg: #0B0D16;
    --tblr-bg-surface: #11141F;
    --tblr-bg-surface-secondary: #161A28;
    --tblr-bg-surface-tertiary: #0D1020;

    /* Card */
    --tblr-card-bg: #11141F;
    --tblr-card-border-color: rgba(196, 164, 107, 0.22);
    --tblr-card-cap-bg: #11141F;

    /* Text */
    --tblr-body-color: #F0EAE0;
    --tblr-secondary-color: #A99D8F;
    --tblr-muted-color: #5C5A6A;

    /* Primary → Gold */
    --tblr-primary: #C4A46B;
    --tblr-primary-rgb: 196, 164, 107;
    --tblr-primary-fg: #0B0D16;
    --tblr-primary-darken: #8B6840;
    --tblr-primary-lighten: #DFC08A;

    /* Links */
    --tblr-link-color: #DFC08A;
    --tblr-link-hover-color: #C4A46B;

    /* Navbar / Topbar */
    --tblr-navbar-bg: #0D1020;
    --tblr-navbar-border-color: rgba(196, 164, 107, 0.10);
    --tblr-navbar-color: #A99D8F;
    --tblr-navbar-brand-color: #DFC08A;
    --tblr-navbar-active-color: #DFC08A;
    --tblr-navbar-hover-color: #F0EAE0;

    /* Borders & Dividers */
    --tblr-border-color: rgba(196, 164, 107, 0.10);
    --tblr-border-color-translucent: rgba(196, 164, 107, 0.10);

    /* Tables */
    --tblr-table-bg: transparent;
    --tblr-table-striped-bg: rgba(196, 164, 107, 0.04);
    --tblr-table-hover-bg: rgba(196, 164, 107, 0.08);
    --tblr-table-border-color: rgba(196, 164, 107, 0.10);

    /* Inputs */
    --tblr-input-bg: #161A28;
    --tblr-input-border-color: rgba(196, 164, 107, 0.22);
    --tblr-input-color: #F0EAE0;
    --tblr-input-placeholder-color: #5C5A6A;

    /* Dropdown */
    --tblr-dropdown-bg: #11141F;
    --tblr-dropdown-border-color: rgba(196, 164, 107, 0.22);
    --tblr-dropdown-link-color: #A99D8F;
    --tblr-dropdown-link-hover-bg: rgba(196, 164, 107, 0.15);
    --tblr-dropdown-link-hover-color: #F0EAE0;

    /* Badges & Status Colors */
    --tblr-success: #7A9E8E;
    --tblr-success-rgb: 122, 158, 142;
    --tblr-warning: #C4956B;
    --tblr-warning-rgb: 196, 149, 107;
    --tblr-danger: #B87070;
    --tblr-danger-rgb: 184, 112, 112;
    --tblr-info: #7B9DBF;
    --tblr-info-rgb: 123, 157, 191;

    /* Footer */
    --tblr-footer-bg: #0B0D16;
    --tblr-footer-color: #5C5A6A;
}

/* ── Navbar / Topbar ── */
[data-bs-theme=dark] .navbar,
[data-bs-theme=dark] .navbar.navbar-expand-lg {
    background: #0D1020 !important;
    border-bottom: 1px solid rgba(196, 164, 107, 0.10);
}

[data-bs-theme=dark] .navbar-brand {
    color: #DFC08A !important;
    font-weight: 600;
    letter-spacing: 0.08em;
}

[data-bs-theme=dark] .navbar .nav-link {
    color: #A99D8F !important;
    transition: color 0.2s;
}

[data-bs-theme=dark] .navbar .nav-link:hover,
[data-bs-theme=dark] .navbar .nav-link.active {
    color: #DFC08A !important;
}

/* ── Cards ── */
[data-bs-theme=dark] .card {
    background: #11141F;
    border: 1px solid rgba(196, 164, 107, 0.22);
}

[data-bs-theme=dark] .card-header {
    background: #11141F;
    border-bottom: 1px solid rgba(196, 164, 107, 0.10);
}

/* ── Gold accent line on top of KPI cards ── */
[data-bs-theme=dark] .kpi-row .card::before,
[data-bs-theme=dark] .kpi-card .card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #C4A46B, transparent);
    opacity: 0.6;
    border-radius: 6px 6px 0 0;
}

[data-bs-theme=dark] .kpi-row .card,
[data-bs-theme=dark] .kpi-card .card {
    position: relative;
    overflow: hidden;
}

/* ── Subheaders & Labels ── */
[data-bs-theme=dark] .subheader,
[data-bs-theme=dark] .card-title {
    color: #C4A46B !important;
    letter-spacing: 0.08em;
}

/* Card-headers with bg color: keep text white */
[data-bs-theme=dark] .card-header.bg-primary .card-title,
[data-bs-theme=dark] .card-header.bg-info .card-title,
[data-bs-theme=dark] .card-header.bg-success .card-title,
[data-bs-theme=dark] .card-header.bg-danger .card-title,
[data-bs-theme=dark] .card-header.bg-warning .card-title,
[data-bs-theme=dark] .card-header.bg-secondary .card-title,
[data-bs-theme=dark] .card-header.text-white .card-title {
    color: #FFFFFF !important;
}

/* Page headings (h1 in header sections) */
[data-bs-theme=dark] .header-operation h1,
[data-bs-theme=dark] [bp-section="page-heading"] {
    color: #F0EAE0 !important;
}

[data-bs-theme=dark] .text-muted {
    color: #A99D8F !important;
}

/* ── Buttons ── */
[data-bs-theme=dark] .btn-primary {
    background: #C4A46B;
    border-color: #C4A46B;
    color: #0B0D16;
}

[data-bs-theme=dark] .btn-primary:hover {
    background: #DFC08A;
    border-color: #DFC08A;
    color: #0B0D16;
}

[data-bs-theme=dark] .btn-secondary {
    background: #161A28;
    border-color: rgba(196, 164, 107, 0.22);
    color: #A99D8F;
}

[data-bs-theme=dark] .btn-secondary:hover {
    background: rgba(196, 164, 107, 0.15);
    color: #F0EAE0;
}

/* ── Tables ── */
[data-bs-theme=dark] .table thead th {
    color: #5C5A6A;
    border-bottom-color: rgba(196, 164, 107, 0.10);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

[data-bs-theme=dark] .table td {
    color: #A99D8F;
    border-bottom-color: rgba(196, 164, 107, 0.10);
}

[data-bs-theme=dark] .table tbody tr:hover td {
    background: rgba(196, 164, 107, 0.08);
    color: #F0EAE0;
}

/* ── Risk banners ── */
[data-bs-theme=dark] .risk-banner-low {
    background: linear-gradient(135deg, rgba(122, 158, 142, 0.15), rgba(122, 158, 142, 0.08));
    color: #7A9E8E;
    border-color: rgba(122, 158, 142, 0.3);
}

[data-bs-theme=dark] .risk-banner-medium {
    background: linear-gradient(135deg, rgba(196, 149, 107, 0.15), rgba(196, 149, 107, 0.08));
    color: #C4956B;
    border-color: rgba(196, 149, 107, 0.3);
}

[data-bs-theme=dark] .risk-banner-high {
    background: linear-gradient(135deg, rgba(184, 112, 112, 0.15), rgba(184, 112, 112, 0.08));
    color: #B87070;
    border-color: rgba(184, 112, 112, 0.3);
}

/* ── Alerts ── */
[data-bs-theme=dark] .badge.alto {
    background: rgba(184, 112, 112, 0.14);
    color: #B87070;
    border: 1px solid rgba(184, 112, 112, 0.3);
}

[data-bs-theme=dark] .badge.medio {
    background: rgba(196, 149, 107, 0.14);
    color: #C4956B;
    border: 1px solid rgba(196, 149, 107, 0.3);
}

/* ── Form Controls ── */
[data-bs-theme=dark] .form-control,
[data-bs-theme=dark] .form-select {
    background-color: #161A28;
    border-color: rgba(196, 164, 107, 0.22);
    color: #F0EAE0;
}

[data-bs-theme=dark] .form-control:focus,
[data-bs-theme=dark] .form-select:focus {
    border-color: #C4A46B;
    box-shadow: 0 0 0 0.25rem rgba(196, 164, 107, 0.15);
}

/* ── Scrollbar ── */
[data-bs-theme=dark] ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

[data-bs-theme=dark] ::-webkit-scrollbar-track {
    background: #0B0D16;
}

[data-bs-theme=dark] ::-webkit-scrollbar-thumb {
    background: rgba(196, 164, 107, 0.22);
    border-radius: 4px;
}

[data-bs-theme=dark] ::-webkit-scrollbar-thumb:hover {
    background: rgba(196, 164, 107, 0.4);
}

/* ── Page body background ── */
[data-bs-theme=dark] .page-body {
    background: #0B0D16;
}

/* ── Subtle grain texture (from design) ── */
[data-bs-theme=dark] body {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.018'/%3E%3C/svg%3E");
}

/* ── Pagination ── */
[data-bs-theme=dark] .page-link {
    background: #161A28;
    border-color: rgba(196, 164, 107, 0.22);
    color: #A99D8F;
}

[data-bs-theme=dark] .page-link:hover {
    background: rgba(196, 164, 107, 0.15);
    color: #F0EAE0;
}

[data-bs-theme=dark] .page-item.active .page-link {
    background: #C4A46B;
    border-color: #C4A46B;
    color: #0B0D16;
}

/* ── Watermark / Footer ── */
[data-bs-theme=dark] .footer {
    background: #0B0D16;
    border-top: 1px solid rgba(196, 164, 107, 0.10);
    color: #5C5A6A;
}

/* ── Avatar ── */
[data-bs-theme=dark] .avatar {
    background: linear-gradient(135deg, #C4A46B 0%, #8B6840 100%);
    color: #0B0D16;
}

/* ── Comparison bars (prediction result) ── */
[data-bs-theme=dark] .comparison-bar {
    background: #161A28;
}

/* ── Stat items ── */
[data-bs-theme=dark] .stat-item {
    border-bottom-color: rgba(196, 164, 107, 0.10);
}

/* ── Chat / Assistant ── */
[data-bs-theme=dark] #chat-messages {
    background: #0B0D16 !important;
}

[data-bs-theme=dark] .chat-bubble.bg-white,
[data-bs-theme=dark] .chat-bubble.shadow-sm {
    background: #161A28 !important;
    color: #F0EAE0 !important;
    border: 1px solid rgba(196, 164, 107, 0.15);
    box-shadow: none !important;
}

[data-bs-theme=dark] .chat-bubble.bg-white p,
[data-bs-theme=dark] .chat-bubble.bg-white li,
[data-bs-theme=dark] .chat-bubble.shadow-sm .chat-content {
    color: #F0EAE0 !important;
}

[data-bs-theme=dark] .typing-dots span {
    background: #5C5A6A;
}

[data-bs-theme=dark] .suggested-q:hover {
    background-color: rgba(196, 164, 107, 0.15) !important;
}

/* ── List group items (sidebar links) ── */
[data-bs-theme=dark] .list-group-item {
    background: #11141F;
    border-color: rgba(196, 164, 107, 0.10);
    color: #A99D8F;
}

[data-bs-theme=dark] .list-group-item:hover,
[data-bs-theme=dark] .list-group-item-action:hover {
    background: rgba(196, 164, 107, 0.15);
    color: #F0EAE0;
}

/* ── Outline buttons ── */
[data-bs-theme=dark] .btn-outline-primary {
    color: #C4A46B;
    border-color: rgba(196, 164, 107, 0.4);
}

[data-bs-theme=dark] .btn-outline-primary:hover {
    background: #C4A46B;
    color: #0B0D16;
}

/* ── Select2 / Dropdowns ── */
[data-bs-theme=dark] .select2-container--default .select2-selection--single {
    background-color: #161A28;
    border-color: rgba(196, 164, 107, 0.22);
    color: #F0EAE0;
}

[data-bs-theme=dark] .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #F0EAE0;
}

[data-bs-theme=dark] .select2-dropdown {
    background-color: #161A28;
    border-color: rgba(196, 164, 107, 0.22);
}

[data-bs-theme=dark] .select2-container--default .select2-search--dropdown .select2-search__field {
    background: #11141F;
    border-color: rgba(196, 164, 107, 0.22);
    color: #F0EAE0;
}

[data-bs-theme=dark] .select2-container--default .select2-results__option {
    color: #F0EAE0;
    background-color: #161A28;
}

[data-bs-theme=dark] .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #C4A46B;
    color: #0B0D16;
}

[data-bs-theme=dark] .select2-container--default .select2-results__option[aria-selected=true] {
    background-color: rgba(196, 164, 107, 0.25);
    color: #DFC08A;
}

/* Native select/option */
[data-bs-theme=dark] select option {
    background: #161A28;
    color: #F0EAE0;
}

/* Select2 Bootstrap 5 theme overrides */
[data-bs-theme=dark] .select2-container--bootstrap-5 .select2-selection {
    background-color: #161A28 !important;
    border-color: rgba(196, 164, 107, 0.22) !important;
    color: #F0EAE0 !important;
}

[data-bs-theme=dark] .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
    color: #F0EAE0 !important;
}

[data-bs-theme=dark] .select2-container--bootstrap-5 .select2-dropdown {
    background-color: #161A28 !important;
    border-color: rgba(196, 164, 107, 0.22) !important;
}

[data-bs-theme=dark] .select2-container--bootstrap-5 .select2-search .select2-search__field {
    background-color: #11141F !important;
    border-color: rgba(196, 164, 107, 0.22) !important;
    color: #F0EAE0 !important;
}

[data-bs-theme=dark] .select2-container--bootstrap-5 .select2-results__option {
    color: #F0EAE0 !important;
    background-color: #161A28 !important;
}

[data-bs-theme=dark] .select2-container--bootstrap-5 .select2-results__option--highlighted {
    background-color: #C4A46B !important;
    color: #0B0D16 !important;
}

[data-bs-theme=dark] .select2-container--bootstrap-5 .select2-results__option--selected {
    background-color: rgba(196, 164, 107, 0.25) !important;
    color: #DFC08A !important;
}

[data-bs-theme=dark] .select2-container--bootstrap-5 .select2-selection__clear {
    color: #A99D8F !important;
}

[data-bs-theme=dark] .select2-container--bootstrap-5 .select2-selection__placeholder {
    color: #5C5A6A !important;
}

/* ── Loading overlay / spinner ── */
[data-bs-theme=dark] .prediction-spinner-box {
    background: #11141F !important;
    border: 1px solid rgba(196, 164, 107, 0.22);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
    color: #F0EAE0;
}

[data-bs-theme=dark] .prediction-spinner-box .text-muted {
    color: #A99D8F !important;
}

[data-bs-theme=dark] .prediction-spinner {
    border-color: #161A28 !important;
    border-top-color: #C4A46B !important;
}

/* What-If loading overlay */
[data-bs-theme=dark] .loading-overlay {
    background: rgba(11, 13, 22, 0.85) !important;
}

[data-bs-theme=dark] .loading-overlay .spinner-ring {
    border-color: #161A28;
    border-top-color: #C4A46B;
}

[data-bs-theme=dark] .loading-overlay .loading-text {
    color: #F0EAE0;
}

/* What-If light backgrounds */
[data-bs-theme=dark] .comparison-table th,
[data-bs-theme=dark] .comparison-table .bg-light,
[data-bs-theme=dark] tr.bg-light {
    background: #161A28 !important;
    color: #A99D8F;
}

[data-bs-theme=dark] .insight-card .card-header {
    background: #11141F !important;
    border-bottom-color: rgba(196, 164, 107, 0.10) !important;
}

[data-bs-theme=dark] .range-value-badge {
    background: rgba(196, 164, 107, 0.15) !important;
    color: #DFC08A !important;
}

[data-bs-theme=dark] .bg-primary-lt {
    background: rgba(196, 164, 107, 0.10) !important;
}

/* What-If help sidebar (inline style override) */
[data-bs-theme=dark] .card[style*="background:#f8fafc"],
[data-bs-theme=dark] .card[style*="background: #f8fafc"] {
    background: #11141F !important;
}

/* What-If risk banners dark */
[data-bs-theme=dark] .risk-banner-low {
    background: rgba(122, 158, 142, 0.12) !important;
    border-color: rgba(122, 158, 142, 0.3) !important;
    color: #7A9E8E !important;
}

[data-bs-theme=dark] .risk-banner-medium {
    background: rgba(196, 149, 107, 0.12) !important;
    border-color: rgba(196, 149, 107, 0.3) !important;
    color: #C4956B !important;
}

[data-bs-theme=dark] .risk-banner-high {
    background: rgba(184, 112, 112, 0.12) !important;
    border-color: rgba(184, 112, 112, 0.3) !important;
    color: #B87070 !important;
}

/* What-If comparison table header row */
[data-bs-theme=dark] .comparison-table .input-col {
    color: #DFC08A;
}

/* Insight cards (explanation / recommendations) */
[data-bs-theme=dark] .insight-card {
    border: 1px solid rgba(196, 164, 107, 0.22) !important;
}

/* KPI stripe cards (what-if) */
[data-bs-theme=dark] .kpi-card {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3) !important;
}

/* ── Selection / Focus ── */
[data-bs-theme=dark] ::selection {
    background: rgba(196, 164, 107, 0.3);
    color: #F0EAE0;
}

/* ── Show page components (ShowHelpers trait) ── */

/* Progress bar wrapper */
[data-bs-theme=dark] .show-progress-bar {
    display: flex;
    align-items: center;
    gap: 10px;
}

[data-bs-theme=dark] .show-progress-bar > div:first-child {
    background: #161A28;
    border: 1px solid rgba(196, 164, 107, 0.12);
    border-radius: 4px;
    overflow: hidden;
}

/* KPI cards */
[data-bs-theme=dark] .show-kpi-card {
    background: #161A28;
    border: 1px solid rgba(196, 164, 107, 0.15);
    border-radius: 6px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

[data-bs-theme=dark] .show-kpi-card:hover {
    border-color: rgba(196, 164, 107, 0.3);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

/* Metric cards */
[data-bs-theme=dark] .show-metric-card {
    background: #161A28;
    border: 1px solid rgba(196, 164, 107, 0.15);
    border-radius: 6px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

[data-bs-theme=dark] .show-metric-card:hover {
    border-color: rgba(196, 164, 107, 0.3);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

/* JSON key-value table */
[data-bs-theme=dark] .show-json-table table {
    border-collapse: collapse;
    width: 100%;
}

[data-bs-theme=dark] .show-json-table td {
    padding: 6px 12px 6px 0;
    border-bottom: 1px solid rgba(196, 164, 107, 0.08);
    font-size: 0.82rem;
    color: #F0EAE0;
    vertical-align: top;
}

[data-bs-theme=dark] .show-json-table td:first-child {
    color: #C4A46B;
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    white-space: nowrap;
    padding-right: 12px;
}

[data-bs-theme=dark] .show-json-table tr:last-child td {
    border-bottom: none;
}

/* Error block */
[data-bs-theme=dark] .show-error-block {
    padding: 10px 14px;
    background: rgba(184, 112, 112, 0.08);
    border: 1px solid rgba(184, 112, 112, 0.3);
    border-left: 3px solid #B87070;
    border-radius: 4px;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 0.8rem;
    color: #B87070;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Status badges */
[data-bs-theme=dark] .show-status-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}

/* Boolean badges */
[data-bs-theme=dark] .show-bool-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 0.78rem;
    font-weight: 600;
}

/* Datagrid integration - ensure show components render well inside Backpack's show layout */
[data-bs-theme=dark] [bp-section="crud-show-datagrid"] .show-kpi-card,
[data-bs-theme=dark] [bp-section="crud-show-datagrid"] .show-metric-card {
    margin: 2px 0;
}

[data-bs-theme=dark] [bp-section="crud-show-datagrid"] .show-progress-bar {
    min-width: 150px;
}

[data-bs-theme=dark] [bp-section="crud-show-datagrid"] .show-json-table {
    max-height: 300px;
    overflow-y: auto;
}

[data-bs-theme=dark] [bp-section="crud-show-datagrid"] .show-error-block {
    max-height: 200px;
    overflow-y: auto;
}