/* ============================================================
   SecureWMS — дизайн-система
   Светлая и тёмная темы через нативный Bootstrap 5.3 (data-bs-theme).
   Дополнительно подменяем --bs-* на наши «брендовые» цвета и
   объявляем кастомные переменные для своих компонентов.
   ============================================================ */

/* ---------- Брендовая палитра, не зависит от темы ---------- */
:root {
    --brand-primary: #1e3a5f;
    --brand-accent:  #3182ce;
    --brand-success: #16a34a;
    --brand-warning: #d97706;
    --brand-danger:  #dc2626;

    --kpi-1: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --kpi-2: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    --kpi-3: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    --kpi-4: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);

    --gradient-hero: linear-gradient(135deg, #1e3a5f 0%, #2c5282 50%, #3182ce 100%);
}

/* ---------- Светлая тема (наши доп. переменные) ---------- */
:root, [data-bs-theme="light"] {
    --app-bg:           #f4f6fb;
    --app-surface:      #ffffff;
    --app-surface-2:    #f8fafc;
    --app-text:         #1a202c;
    --app-text-muted:   #64748b;
    --app-border:       #e2e8f0;
    --app-border-soft:  #edf2f7;
    --app-code-bg:      #f1f5f9;
    --app-shadow-sm:    0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.08);
    --app-shadow-md:    0 4px 6px rgba(15,23,42,.07), 0 2px 4px rgba(15,23,42,.06);
    --app-shadow-lg:    0 20px 25px -5px rgba(15,23,42,.1), 0 10px 10px -5px rgba(15,23,42,.04);

    /* Подменяем Bootstrap-переменные на наши брендовые */
    --bs-primary: var(--brand-accent);
    --bs-primary-rgb: 49, 130, 206;
    --bs-body-bg: var(--app-bg);
    --bs-body-color: var(--app-text);
    --bs-secondary-color: var(--app-text-muted);
    --bs-border-color: var(--app-border);
    --bs-tertiary-bg: var(--app-surface-2);
}

/* ---------- Тёмная тема ---------- */
[data-bs-theme="dark"] {
    --app-bg:           #0f172a;
    --app-surface:      #1e293b;
    --app-surface-2:    #0f172a;
    --app-text:         #e2e8f0;
    --app-text-muted:   #94a3b8;
    --app-border:       #334155;
    --app-border-soft:  #1e293b;
    --app-code-bg:      #0b1220;
    --app-shadow-sm:    0 1px 2px rgba(0,0,0,.3);
    --app-shadow-md:    0 4px 6px rgba(0,0,0,.35);
    --app-shadow-lg:    0 20px 25px -5px rgba(0,0,0,.5);

    --bs-primary: #63b3ed;
    --bs-primary-rgb: 99, 179, 237;
    --bs-body-bg: var(--app-bg);
    --bs-body-color: var(--app-text);
    --bs-secondary-color: var(--app-text-muted);
    --bs-border-color: var(--app-border);
    --bs-tertiary-bg: var(--app-surface-2);
    --bs-emphasis-color: var(--app-text);
    --bs-emphasis-color-rgb: 226, 232, 240;
    --bs-link-color: #63b3ed;
    --bs-link-hover-color: #90cdf4;
    --gradient-hero: linear-gradient(135deg, #1e293b 0%, #334155 50%, #475569 100%);
}

/* ============================================================
   БАЗОВЫЕ
   ============================================================ */
html { scroll-behavior: smooth; }
body {
    background: var(--app-bg);
    color: var(--app-text);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    line-height: 1.6;
    transition: background-color .25s ease, color .25s ease;
}

.min-vh-100 { min-height: 100vh; }

/* Заголовки наследуют цвет body — НЕ переопределяем глобально, чтобы
   секции с особым фоном (login-brand, kpi-card) могли задать свой цвет */
h1, h2, h3, h4, h5, h6 { font-weight: 700; }

.display-6 {
    color: var(--brand-primary);
    font-weight: 800;
    letter-spacing: -.02em;
}
[data-bs-theme="dark"] .display-6 { color: #90cdf4; }

.text-muted { color: var(--app-text-muted) !important; }
.border-bottom { border-bottom: 1px solid var(--app-border) !important; }

code, pre {
    background: var(--app-code-bg);
    color: var(--app-text);
    padding: .15rem .4rem;
    border-radius: .25rem;
    font-family: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
    font-size: .875em;
}
pre {
    padding: 1rem;
    border-radius: .5rem;
    overflow-x: auto;
}
pre code { padding: 0; background: transparent; }

/* ============================================================
   НАВИГАЦИЯ
   ============================================================ */
.navbar {
    background: var(--app-surface) !important;
    border-bottom: 1px solid var(--app-border);
    box-shadow: var(--app-shadow-sm);
    padding: .65rem 0;
}
.navbar-brand {
    color: var(--brand-primary) !important;
    font-weight: 800;
    font-size: 1.15rem;
    letter-spacing: .3px;
}
[data-bs-theme="dark"] .navbar-brand { color: #90cdf4 !important; }
.navbar-brand i { color: var(--brand-accent); }
[data-bs-theme="dark"] .navbar-brand i { color: #63b3ed; }

.navbar .nav-link {
    color: var(--app-text-muted) !important;
    font-weight: 500;
    padding: .5rem .9rem !important;
    border-radius: .4rem;
    margin: 0 .15rem;
    transition: all .15s ease;
}
.navbar .nav-link:hover {
    background: var(--app-border-soft);
    color: var(--brand-accent) !important;
}
[data-bs-theme="dark"] .navbar .nav-link:hover { color: #63b3ed !important; }

.navbar-toggler { border-color: var(--app-border); }

.dropdown-menu {
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    box-shadow: var(--app-shadow-md);
    border-radius: .5rem;
    padding: .35rem;
}
.dropdown-item { color: var(--app-text); border-radius: .35rem; padding: .5rem .75rem; }
.dropdown-item:hover, .dropdown-item:focus {
    background: var(--app-border-soft);
    color: var(--brand-accent);
}
[data-bs-theme="dark"] .dropdown-item:hover { color: #63b3ed; }
.dropdown-divider { border-color: var(--app-border); }

/* ============================================================
   КАРТОЧКИ
   ============================================================ */
.card {
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: .65rem;
    box-shadow: var(--app-shadow-sm);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    color: var(--app-text);
}
.card:hover {
    transform: translateY(-2px);
    box-shadow: var(--app-shadow-md);
}
.card-header {
    background: var(--app-surface);
    border-bottom: 1px solid var(--app-border);
    color: var(--app-text);
    font-weight: 600;
    padding: .9rem 1.15rem;
    text-transform: none;
    font-size: .95rem;
    letter-spacing: 0;
}
/* Сбрасываем устаревшие bg-классы на нашей поверхности */
.card-header.bg-dark, .card-header.bg-light, .card-header.bg-warning-subtle {
    background: var(--app-surface) !important;
    color: var(--app-text) !important;
}
.card-body { padding: 1.25rem; }
.card-footer { background: var(--app-surface-2); border-top: 1px solid var(--app-border); }

/* ============================================================
   KPI-карточки (градиент) — белый текст всегда
   ============================================================ */
.kpi-card {
    border: none;
    border-radius: .85rem;
    color: #fff !important;
    overflow: hidden;
    position: relative;
    box-shadow: var(--app-shadow-md);
    transition: transform .15s ease, box-shadow .15s ease;
}
.kpi-card:hover { transform: translateY(-3px); box-shadow: var(--app-shadow-lg); }
.kpi-card .kpi-bg { position: absolute; inset: 0; opacity: .92; }
.kpi-card .kpi-content { position: relative; padding: 1.4rem 1.5rem; z-index: 1; }
.kpi-card .kpi-label,
.kpi-card .kpi-value,
.kpi-card a {
    color: #fff !important;
}
.kpi-card .kpi-label {
    font-size: .75rem; font-weight: 700; letter-spacing: 1px;
    text-transform: uppercase; opacity: .9;
}
.kpi-card .kpi-value {
    font-size: 2.4rem; font-weight: 800; line-height: 1.1; margin: .25rem 0;
}
.kpi-card .kpi-icon {
    position: absolute; right: 1rem; top: 1rem;
    font-size: 2.5rem; opacity: .3; color: #fff;
}
.kpi-card a { text-decoration: none; font-weight: 600; font-size: .8rem; opacity: .9; }
.kpi-card a:hover { opacity: 1; color: #fff !important; }

.kpi-1 .kpi-bg { background: var(--kpi-1); }
.kpi-2 .kpi-bg { background: var(--kpi-2); }
.kpi-3 .kpi-bg { background: var(--kpi-3); }
.kpi-4 .kpi-bg { background: var(--kpi-4); }

/* KPI без градиента — для аналитики/бенчмарка */
.kpi-stat {
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: .65rem;
    padding: 1.25rem;
    box-shadow: var(--app-shadow-sm);
    color: var(--app-text);
}
.kpi-stat .kpi-stat-label {
    font-size: .7rem; text-transform: uppercase; letter-spacing: .8px;
    color: var(--app-text-muted); font-weight: 600;
}
.kpi-stat .kpi-stat-value {
    font-size: 2rem; font-weight: 800; color: var(--brand-primary);
    line-height: 1.1; margin-top: .35rem;
}
[data-bs-theme="dark"] .kpi-stat .kpi-stat-value { color: #90cdf4; }
.kpi-stat .kpi-stat-trend { font-size: .8rem; color: var(--app-text-muted); margin-top: .25rem; }
.kpi-stat .kpi-stat-trend.up   { color: var(--brand-success); }
.kpi-stat .kpi-stat-trend.down { color: var(--brand-danger); }

/* ============================================================
   ТАБЛИЦЫ
   ============================================================ */
.table {
    --bs-table-bg: var(--app-surface);
    --bs-table-color: var(--app-text);
    --bs-table-border-color: var(--app-border-soft);
    --bs-table-striped-bg: var(--app-surface-2);
    --bs-table-hover-bg: var(--app-border-soft);
    --bs-table-striped-color: var(--app-text);
    --bs-table-hover-color: var(--app-text);
    background: var(--app-surface);
    color: var(--app-text);
    margin-bottom: 0;
}
.table thead th {
    background: var(--app-surface-2);
    color: var(--app-text-muted);
    border-bottom: 1px solid var(--app-border);
    border-top: 0;
    text-transform: uppercase;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .8px;
    padding: .85rem .8rem;
}
.table tbody td {
    padding: .8rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--app-border-soft);
    color: var(--app-text);
}
.table tbody tr:last-child td { border-bottom: 0; }

/* ============================================================
   АВАТАРЫ
   ============================================================ */
.avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center; justify-content: center;
    font-weight: 700; font-size: .8rem;
    color: #fff;
    flex-shrink: 0;
    background: #94a3b8;
}
.avatar-lg { width: 56px; height: 56px; font-size: 1.1rem; }
.avatar-xl { width: 84px; height: 84px; font-size: 1.6rem; }

/* ============================================================
   БЕЙДЖИ И РОЛИ
   ============================================================ */
.badge { font-size: .7rem; font-weight: 600; padding: .35em .6em; letter-spacing: .3px; border-radius: .35rem; }

.role-badge {
    display: inline-flex; align-items: center; gap: .35rem;
    font-size: .72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .5px; padding: .3em .65em; border-radius: .35rem;
    color: #fff;
}
.role-badge.role-admin       { background: #dc2626; }
.role-badge.role-manager     { background: #2563eb; }
.role-badge.role-warehouse   { background: #0891b2; }
.role-badge.role-accountant  { background: #16a34a; }
.role-badge.role-auditor     { background: #d97706; }
.role-dot {
    display: inline-block; width: 8px; height: 8px;
    border-radius: 50%; margin-right: .4rem;
}

/* Уровни маскирования */
.lvl-pill {
    display: inline-block; padding: .15em .55em; border-radius: .3rem;
    font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
}
.lvl-full    { background: rgba(22,163,74,.15);  color: #16a34a; }
.lvl-partial { background: rgba(217,119,6,.18);  color: #d97706; }
.lvl-hidden  { background: rgba(220,38,38,.15);  color: #dc2626; }
[data-bs-theme="dark"] .lvl-full    { background: rgba(74,222,128,.15); color: #4ade80; }
[data-bs-theme="dark"] .lvl-partial { background: rgba(251,191,36,.18); color: #fbbf24; }
[data-bs-theme="dark"] .lvl-hidden  { background: rgba(248,113,113,.18); color: #f87171; }

/* ============================================================
   КНОПКИ
   ============================================================ */
.btn { border-radius: .45rem; font-weight: 500; padding: .45rem .85rem; transition: transform .12s, box-shadow .12s, background-color .12s; }
.btn:hover { transform: translateY(-1px); box-shadow: var(--app-shadow-sm); }
.btn:active { transform: translateY(0); }

.btn-primary {
    --bs-btn-bg: var(--brand-accent);
    --bs-btn-border-color: var(--brand-accent);
    --bs-btn-hover-bg: #2563eb;
    --bs-btn-hover-border-color: #2563eb;
    --bs-btn-active-bg: #1d4ed8;
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
}

[data-bs-theme="dark"] .btn-outline-secondary {
    --bs-btn-color: var(--app-text);
    --bs-btn-border-color: var(--app-border);
}

/* ============================================================
   ФОРМЫ
   ============================================================ */
.form-control, .form-select {
    background: var(--app-surface);
    color: var(--app-text);
    border: 1px solid var(--app-border);
    border-radius: .45rem;
    transition: border-color .15s, box-shadow .15s;
}
.form-control:focus, .form-select:focus {
    background: var(--app-surface);
    color: var(--app-text);
    border-color: var(--brand-accent);
    box-shadow: 0 0 0 .2rem rgba(49,130,206,.2);
}
.form-control::placeholder { color: var(--app-text-muted); }
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
    border-color: #63b3ed;
    box-shadow: 0 0 0 .2rem rgba(99,179,237,.25);
}
.form-label { color: var(--app-text); font-weight: 600; font-size: .85rem; }
.input-group-text {
    background: var(--app-surface-2);
    border-color: var(--app-border);
    color: var(--app-text-muted);
}

/* ============================================================
   АЛЕРТЫ
   ============================================================ */
.alert {
    border: 1px solid var(--app-border);
    border-left: 4px solid;
    border-radius: .55rem;
    background: var(--app-surface);
    color: var(--app-text);
}
.alert-info     { border-left-color: #0ea5e9; }
.alert-warning  { border-left-color: #f59e0b; }
.alert-danger   { border-left-color: #dc2626; color: var(--app-text); }
.alert-success  { border-left-color: #16a34a; }

/* ============================================================
   МОДАЛКИ
   ============================================================ */
.modal-content {
    background: var(--app-surface);
    color: var(--app-text);
    border: 1px solid var(--app-border);
    border-radius: .7rem;
    box-shadow: var(--app-shadow-lg);
}
.modal-header { border-bottom: 1px solid var(--app-border); }
.modal-footer { border-top: 1px solid var(--app-border); }

/* ============================================================
   FOOTER
   ============================================================ */
footer.app-footer {
    background: var(--app-surface);
    color: var(--app-text-muted);
    border-top: 1px solid var(--app-border);
    padding: 1.5rem 0;
    margin-top: 4rem;
}
footer.app-footer h6 {
    color: var(--app-text);
    font-size: .8rem;
    letter-spacing: .8px;
    text-transform: uppercase;
}

/* ============================================================
   LOGIN — split screen
   ============================================================ */
.login-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 100vh;
}
.login-brand {
    background: var(--gradient-hero);
    color: #fff;
    padding: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}
/* Принудительно белый текст внутри брендинга независимо от темы */
.login-brand,
.login-brand h1, .login-brand h2, .login-brand h3,
.login-brand h4, .login-brand h5, .login-brand h6,
.login-brand p, .login-brand li, .login-brand a {
    color: #fff !important;
}
.login-brand::before {
    content: ""; position: absolute;
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(255,255,255,.08), transparent 70%);
    border-radius: 50%; top: -200px; right: -200px;
}
.login-brand .brand-title {
    font-size: 2rem; font-weight: 800; line-height: 1.15;
    letter-spacing: -.02em; margin-bottom: 1rem;
}
.login-brand .brand-sub  { font-size: 1rem; opacity: .85; line-height: 1.5; max-width: 480px; }
.login-brand .brand-features { list-style: none; padding: 0; margin-top: 2rem; }
.login-brand .brand-features li { padding: .5rem 0; font-size: .95rem; opacity: .92; }
.login-brand .brand-features i { margin-right: .65rem; opacity: .85; }

.login-form-side {
    display: flex; align-items: center; justify-content: center;
    padding: 3rem;
    background: var(--app-bg);
}
.login-form-card {
    width: 100%; max-width: 420px;
    background: var(--app-surface);
    color: var(--app-text);
    border-radius: .85rem;
    padding: 2.5rem;
    box-shadow: var(--app-shadow-lg);
    border: 1px solid var(--app-border);
    animation: fadeUp .4s ease;
}
.login-form-card h2 { color: var(--app-text); }

.role-chip {
    display: inline-block;
    padding: .35rem .8rem; margin: .15rem;
    background: var(--app-surface-2);
    border: 1px solid var(--app-border);
    border-radius: 999px;
    font-size: .8rem; color: var(--app-text);
    cursor: pointer; transition: all .15s;
}
.role-chip:hover {
    background: var(--brand-accent);
    color: #fff;
    border-color: var(--brand-accent);
    transform: translateY(-1px);
}
@media (max-width: 920px) {
    .login-wrapper { grid-template-columns: 1fr; }
    .login-brand { display: none; }
}

/* ============================================================
   ВИТРИНА «до/после»
   ============================================================ */
.passport-card {
    background: var(--app-surface);
    color: var(--app-text);
    border: 1px solid var(--app-border);
    border-radius: .8rem;
    padding: 1.5rem;
    box-shadow: var(--app-shadow-sm);
    position: relative;
    overflow: hidden;
}
.passport-card.is-raw { border: 2px dashed var(--brand-danger); }
.passport-card .pc-role { position: absolute; top: 1rem; right: 1rem; }
.passport-card .pc-header {
    display: flex; align-items: center; gap: .9rem;
    padding-bottom: 1rem; margin-bottom: 1rem;
    border-bottom: 1px solid var(--app-border);
}
.passport-card .pc-name { font-size: 1.05rem; font-weight: 700; color: var(--app-text); }
.passport-card .pc-sub  { color: var(--app-text-muted); font-size: .82rem; }
.passport-card .pc-row {
    display: flex; justify-content: space-between;
    padding: .5rem 0;
    border-bottom: 1px dashed var(--app-border-soft);
}
.passport-card .pc-row:last-child { border-bottom: 0; }
.passport-card .pc-key {
    font-size: .78rem; color: var(--app-text-muted);
    text-transform: uppercase; letter-spacing: .5px; font-weight: 600;
}
.passport-card .pc-val {
    font-family: 'JetBrains Mono', Consolas, monospace;
    font-size: .9rem; color: var(--app-text);
    text-align: right; max-width: 60%; word-break: break-all;
}
.passport-card .pc-val.is-masked { color: var(--brand-warning); }
.passport-card .pc-val.is-hidden { color: var(--app-text-muted); font-style: italic; }
.passport-card .pc-val.is-raw    { color: var(--brand-danger); font-weight: 700; }
[data-bs-theme="dark"] .passport-card .pc-val.is-masked { color: #fbbf24; }
[data-bs-theme="dark"] .passport-card .pc-val.is-raw    { color: #f87171; }

.mask-chunk {
    background: rgba(217,119,6,.18); color: #d97706;
    padding: .05em .35em; border-radius: .25rem; margin: 0 .05em; font-weight: 700;
}
[data-bs-theme="dark"] .mask-chunk { background: rgba(251,191,36,.18); color: #fbbf24; }

/* ============================================================
   EMPTY STATE
   ============================================================ */
.empty-state {
    text-align: center;
    padding: 3rem 1.5rem;
    color: var(--app-text-muted);
}
.empty-state .es-icon {
    font-size: 3.5rem; color: var(--app-border);
    margin-bottom: 1rem; display: block;
}
.empty-state .es-title { font-size: 1.1rem; color: var(--app-text); font-weight: 600; }
.empty-state .es-text  { font-size: .9rem; margin-top: .5rem; }

/* ============================================================
   ЛЕНТА СОБЫТИЙ
   ============================================================ */
.event-feed { list-style: none; padding: 0; margin: 0; }
.event-feed .event-item {
    display: flex; align-items: flex-start; gap: .8rem;
    padding: .75rem 0;
    border-bottom: 1px dashed var(--app-border-soft);
}
.event-feed .event-item:last-child { border-bottom: 0; }
.event-feed .ev-icon {
    width: 32px; height: 32px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .85rem; color: #fff;
    flex-shrink: 0;
}
.ev-select { background: #4facfe; }
.ev-insert { background: #43e97b; }
.ev-update { background: #d69e2e; }
.ev-delete { background: #e53e3e; }
.event-feed .ev-text { color: var(--app-text); font-size: .88rem; line-height: 1.35; }
.event-feed .ev-meta { color: var(--app-text-muted); font-size: .75rem; margin-top: .15rem; }

/* ============================================================
   THEME TOGGLE
   ============================================================ */
.theme-toggle {
    background: transparent;
    border: 1px solid var(--app-border);
    color: var(--app-text);
    padding: .35rem .6rem;
    border-radius: .45rem;
    cursor: pointer;
    transition: all .15s;
}
.theme-toggle:hover {
    background: var(--app-border-soft);
    color: var(--brand-accent);
}

/* ============================================================
   АНИМАЦИИ
   ============================================================ */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.05); }
}
.card { animation: fadeUp .3s ease; }
.pulse-warning { animation: pulse 2s ease-in-out infinite; color: var(--brand-danger); }

/* ============================================================
   highlight.js
   ============================================================ */
.hljs {
    background: var(--app-code-bg) !important;
    color: var(--app-text) !important;
    border-radius: .5rem;
    padding: 1rem !important;
}

/* ============================================================
   АДАПТИВНОСТЬ
   ============================================================ */
.container-fluid { padding-left: 1.5rem; padding-right: 1.5rem; }
@media (max-width: 768px) {
    .container-fluid { padding-left: 1rem; padding-right: 1rem; }
    .display-6 { font-size: 1.5rem; }
    .kpi-card .kpi-value { font-size: 1.8rem; }
}

/* ============================================================
   ПЕЧАТЬ
   ============================================================ */
@media print {
    body { background: #fff; color: #000; }
    .navbar, footer.app-footer, .btn, .theme-toggle, .dropdown { display: none !important; }
    .card, .kpi-stat, .passport-card { box-shadow: none !important; border: 1px solid #aaa; break-inside: avoid; }
    .table thead th { background: #eee !important; color: #000 !important; }
    a { color: #000; text-decoration: none; }
    canvas { max-height: 240px !important; }
    .container-fluid { padding: 0 !important; }
    h1, h2, h3, .display-6 { color: #000 !important; }
    .kpi-card { background: #f0f0f0 !important; color: #000 !important; }
    .kpi-card .kpi-bg { display: none; }
    .kpi-card .kpi-value, .kpi-card .kpi-label { color: #000 !important; }
}