/*
 * CubeERP — Dark Mode Override Rules
 * Forrás: base.html inline <style> blokk
 * Migráció: F4 Foundation lépés (2026-05-30)
 *
 * Ez a fájl csak html[data-theme="dark"] Bootstrap és inline-stílus felülírásokat tartalmaz.
 * A sidebar/topbar komponens-specifikus dark rule-ok helyben maradnak a base.html-ben.
 * A CSS változók forrása: projects/static/css/base/variables.css
 */

/* ================================================================
   WRAPPER ELEMEK
   ================================================================ */
/* Dark mode — wrapper elemek explicit háttere */
html[data-theme="dark"] .main-wrapper,
html[data-theme="dark"] .content-area {
    background-color: #0f172a !important;
    color: #e2e8f0;
}

/* ================================================================
   BOOTSTRAP COMPONENT OVERRIDE-OK
   ================================================================ */

/* Bootstrap override sötét módhoz */
html[data-theme="dark"] .card,
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-light {
    background-color: var(--card-bg) !important;
    border-color: var(--card-border) !important;
    color: var(--content-text) !important;
}
html[data-theme="dark"] .card-body,
html[data-theme="dark"] .card-body * {
    color: var(--content-text);
}
html[data-theme="dark"] .card-body .text-muted {
    color: var(--muted-text) !important;
}
html[data-theme="dark"] .card-body .badge {
    color: inherit;
}
html[data-theme="dark"] .card-body .btn,
html[data-theme="dark"] .card-body a.btn {
    color: inherit;
}
html[data-theme="dark"] .table {
    color: var(--table-text) !important;
    --bs-table-bg: transparent;
    --bs-table-color: var(--table-text);
    --bs-table-border-color: var(--card-border);
}
html[data-theme="dark"] .table th,
html[data-theme="dark"] .table td {
    border-color: var(--card-border) !important;
    color: var(--table-text) !important;
}
html[data-theme="dark"] .table-light {
    background-color: #334155 !important;
    color: var(--content-text) !important;
}
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select {
    background-color: var(--input-bg);
    border-color: var(--input-border);
    color: var(--input-text);
}
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus {
    background-color: var(--input-bg);
    color: var(--input-text);
}
html[data-theme="dark"] .modal-content {
    background-color: var(--card-bg);
    border-color: var(--card-border);
    color: var(--content-text);
}
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer {
    border-color: var(--card-border);
}
html[data-theme="dark"] .list-group-item {
    background-color: var(--card-bg);
    border-color: var(--card-border);
    color: var(--content-text);
}
html[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}
html[data-theme="dark"] .dropdown-menu {
    background-color: var(--card-bg);
    border-color: var(--card-border);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
}
html[data-theme="dark"] .dropdown-item {
    color: var(--content-text);
}
html[data-theme="dark"] .dropdown-item:hover {
    background-color: #334155;
    color: #fff;
}
html[data-theme="dark"] .nav-tabs .nav-link {
    color: var(--muted-text);
    border-color: var(--card-border);
}
html[data-theme="dark"] .nav-tabs .nav-link.active {
    background-color: var(--card-bg);
    color: #fff;
    border-color: var(--card-border) var(--card-border) var(--card-bg);
}
html[data-theme="dark"] .pagination .page-link {
    background-color: var(--card-bg);
    border-color: var(--card-border);
    color: var(--content-text);
}
html[data-theme="dark"] .pagination .page-item.active .page-link {
    background-color: var(--primary);
    border-color: var(--primary);
}
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6 {
    color: var(--content-text);
}
html[data-theme="dark"] .text-muted {
    color: var(--muted-text) !important;
}
html[data-theme="dark"] .card-header {
    background-color: rgba(255,255,255,0.04) !important;
    border-bottom-color: var(--card-border) !important;
    color: var(--content-text) !important;
}
html[data-theme="dark"] .form-label,
html[data-theme="dark"] label {
    color: var(--content-text) !important;
}
html[data-theme="dark"] .btn-outline-secondary {
    color: var(--content-text);
    border-color: var(--card-border);
}
html[data-theme="dark"] .btn-outline-secondary:hover {
    background-color: rgba(255,255,255,0.1);
    color: #fff;
}
html[data-theme="dark"] .btn-outline-dark {
    color: var(--content-text);
    border-color: var(--card-border);
}
html[data-theme="dark"] .btn-outline-dark:hover {
    background-color: rgba(255,255,255,0.1);
    color: #fff;
}
html[data-theme="dark"] .btn-outline-info {
    color: #67e8f9;
    border-color: #67e8f9;
}
html[data-theme="dark"] .alert-danger {
    background-color: rgba(220,53,69,0.15);
    border-color: rgba(220,53,69,0.3);
    color: #fca5a5;
}
html[data-theme="dark"] .container-fluid h2,
html[data-theme="dark"] .container-fluid p {
    color: var(--content-text);
}
html[data-theme="dark"] input[disabled],
html[data-theme="dark"] input:disabled {
    background-color: rgba(255,255,255,0.05) !important;
    color: var(--muted-text) !important;
}

/* ================================================================
   FORM VALIDATION DARK MODE
   ================================================================ */

/* Kitöltött / valid mezők dark mode */
html[data-theme="dark"] .form-control:valid,
html[data-theme="dark"] .form-select:valid,
html[data-theme="dark"] .was-validated .form-control:valid,
html[data-theme="dark"] .was-validated .form-select:valid {
    background-color: rgba(22, 163, 74, 0.15) !important;
    border-color: #166534 !important;
    color: var(--content-text) !important;
}
html[data-theme="dark"] .form-control.is-valid,
html[data-theme="dark"] .form-select.is-valid {
    background-color: rgba(22, 163, 74, 0.15) !important;
    border-color: #166534 !important;
    color: var(--content-text) !important;
}
/* Dark mode: is-invalid mezők láthatóvá tétele (QW5) */
html[data-theme="dark"] .form-control.is-invalid,
html[data-theme="dark"] .form-select.is-invalid,
html[data-theme="dark"] .form-check-input.is-invalid {
    background-color: rgba(220, 53, 69, 0.15) !important;
    border-color: #dc3545 !important;
    color: var(--content-text) !important;
}
html[data-theme="dark"] .invalid-feedback {
    color: #f87171 !important;
}
/* Böngésző autofill felülírás dark mode-ban */
html[data-theme="dark"] input:-webkit-autofill,
html[data-theme="dark"] input:-webkit-autofill:hover,
html[data-theme="dark"] input:-webkit-autofill:focus,
html[data-theme="dark"] textarea:-webkit-autofill,
html[data-theme="dark"] select:-webkit-autofill {
    -webkit-text-fill-color: var(--content-text) !important;
    -webkit-box-shadow: 0 0 0 1000px #1e293b inset !important;
    box-shadow: 0 0 0 1000px #1e293b inset !important;
    border-color: var(--input-border) !important;
}

/* ================================================================
   NAVIGÁCIÓ, ACCORDION, BREADCRUMB
   ================================================================ */

html[data-theme="dark"] .breadcrumb-item.active {
    color: var(--muted-text);
}
html[data-theme="dark"] .breadcrumb-item + .breadcrumb-item::before {
    color: var(--muted-text);
}
html[data-theme="dark"] .accordion-item {
    background-color: var(--card-bg);
    border-color: var(--card-border);
    color: var(--content-text);
}
html[data-theme="dark"] .accordion-button {
    background-color: var(--card-bg);
    color: var(--content-text);
}
html[data-theme="dark"] .accordion-button::after {
    filter: invert(1);
}
html[data-theme="dark"] .accordion-button:not(.collapsed) {
    background-color: #334155;
    color: #fff;
}

/* ================================================================
   GLOBÁLIS DARK MODE: INLINE BACKGROUND FELÜLÍRÁSOK
   ================================================================ */

/* --- GLOBÁLIS DARK MODE: inline background felülírások --- */
html[data-theme="dark"] .content-area div[style*="background:#fff"],
html[data-theme="dark"] .content-area div[style*="background: #fff"] {
    background-color: var(--card-bg) !important;
    border-color: var(--card-border) !important;
    color: var(--content-text) !important;
}
html[data-theme="dark"] .content-area div[style*="background:#eff6ff"],
html[data-theme="dark"] .content-area div[style*="background: #eff6ff"] {
    background-color: #1e3a5f !important;
    border-color: #2563eb !important;
    color: var(--content-text) !important;
}
html[data-theme="dark"] .content-area div[style*="background:#fef3c7"],
html[data-theme="dark"] .content-area div[style*="background: #fef3c7"] {
    background-color: #422006 !important;
    border-color: #92400e !important;
    color: var(--content-text) !important;
}
html[data-theme="dark"] .content-area div[style*="background:#f0f9ff"],
html[data-theme="dark"] .content-area div[style*="background: #f0f9ff"] {
    background-color: #0c2d48 !important;
    border-color: #0284c7 !important;
    color: var(--content-text) !important;
}
html[data-theme="dark"] .content-area div[style*="background:#f1f5f9"],
html[data-theme="dark"] .content-area div[style*="background: #f1f5f9"],
html[data-theme="dark"] .content-area tr[style*="background:#f1f5f9"],
html[data-theme="dark"] .content-area tr[style*="background: #f1f5f9"] {
    background-color: #334155 !important;
    color: var(--content-text) !important;
}
html[data-theme="dark"] .content-area div[style*="background:#f8fafc"],
html[data-theme="dark"] .content-area div[style*="background: #f8fafc"] {
    background-color: #283548 !important;
    color: var(--content-text) !important;
}
html[data-theme="dark"] .content-area div[style*="background:#f8f9fa"],
html[data-theme="dark"] .content-area div[style*="background: #f8f9fa"] {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: var(--content-text) !important;
}
html[data-theme="dark"] .content-area div[style*="background:white"],
html[data-theme="dark"] .content-area div[style*="background: white"] {
    background-color: var(--card-bg) !important;
    border-color: var(--card-border) !important;
    color: var(--content-text) !important;
}
/* Inline fehér háttérű div-ek gyerek elemei */
html[data-theme="dark"] .content-area div[style*="background:#fff"] h4,
html[data-theme="dark"] .content-area div[style*="background:#fff"] label,
html[data-theme="dark"] .content-area div[style*="background:#fff"] small,
html[data-theme="dark"] .content-area div[style*="background:#fff"] span,
html[data-theme="dark"] .content-area div[style*="background:#fff"] td,
html[data-theme="dark"] .content-area div[style*="background:#fff"] th,
html[data-theme="dark"] .content-area div[style*="background: #fff"] h4,
html[data-theme="dark"] .content-area div[style*="background: #fff"] label,
html[data-theme="dark"] .content-area div[style*="background: #fff"] small,
html[data-theme="dark"] .content-area div[style*="background: #fff"] span,
html[data-theme="dark"] .content-area div[style*="background: #fff"] td,
html[data-theme="dark"] .content-area div[style*="background: #fff"] th {
    color: var(--content-text) !important;
}
html[data-theme="dark"] .content-area div[style*="background:#fff"] .form-control,
html[data-theme="dark"] .content-area div[style*="background:#fff"] input,
html[data-theme="dark"] .content-area div[style*="background:#fff"] textarea,
html[data-theme="dark"] .content-area div[style*="background:#fff"] select,
html[data-theme="dark"] .content-area div[style*="background: #fff"] .form-control,
html[data-theme="dark"] .content-area div[style*="background: #fff"] input,
html[data-theme="dark"] .content-area div[style*="background: #fff"] textarea,
html[data-theme="dark"] .content-area div[style*="background: #fff"] select {
    background-color: #283548 !important;
    color: #f1f5f9 !important;
    -webkit-text-fill-color: #f1f5f9 !important;
    border-color: #475569 !important;
}
html[data-theme="dark"] .content-area div[style*="background:#fff"] input::placeholder,
html[data-theme="dark"] .content-area div[style*="background:#fff"] textarea::placeholder,
html[data-theme="dark"] .content-area div[style*="background: #fff"] input::placeholder,
html[data-theme="dark"] .content-area div[style*="background: #fff"] textarea::placeholder {
    color: #64748b !important;
    -webkit-text-fill-color: #64748b !important;
}
html[data-theme="dark"] .content-area div[style*="background:#fff"] input[readonly],
html[data-theme="dark"] .content-area div[style*="background: #fff"] input[readonly] {
    background-color: #1e2d3d !important;
}
html[data-theme="dark"] .content-area div[style*="background:#fff"] thead tr,
html[data-theme="dark"] .content-area div[style*="background: #fff"] thead tr {
    background-color: #334155 !important;
}
html[data-theme="dark"] .content-area div[style*="background:#fff"] thead th,
html[data-theme="dark"] .content-area div[style*="background: #fff"] thead th {
    background-color: #334155 !important;
    color: #e2e8f0 !important;
}
/* Info/warning/summary div-ek szövegszínei */
html[data-theme="dark"] .content-area div[style*="background:#eff6ff"] *,
html[data-theme="dark"] .content-area div[style*="background:#fef3c7"] *,
html[data-theme="dark"] .content-area div[style*="background:#f0f9ff"] * {
    color: var(--content-text) !important;
}

/* ================================================================
   WCAG AA BADGE DARK MODE — P2/P3 kontraszt fix (2026-05-30)
   ================================================================ */
/* deadline-badge: light bg-k sötét módban sötétebb bg-re váltanak
   urgent dark: #7f1d1d bg + #fca5a5 szöveg → 7.1:1 ✓
   soon dark:   #78350f bg + #fde68a szöveg → 6.8:1 ✓ */
html[data-theme="dark"] .deadline-badge.urgent {
    background: #7f1d1d;
    color: #fca5a5;
}
html[data-theme="dark"] .deadline-badge.soon {
    background: #78350f;
    color: #fde68a;
}

/* ================================================================
   KANBAN SZEPARÁCIÓ — Dark mode override (sprint 2, 2026-05-30)
   Light mode: #EEF1F5 / #F6F8FA / #FFFFFF kártyák
   Dark mode:  sötét háttérrel, slate tokenekkel
   ================================================================ */
html[data-theme="dark"] .content-area {
    background-color: #0f172a !important;
}
html[data-theme="dark"] .kanban-col {
    background: #1e293b !important;
    border-color: #334155 !important;
}
html[data-theme="dark"] a.kanban-card {
    background: #1e293b !important;
    border: 1px solid #334155 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.25) !important;
    color: #e2e8f0 !important;
}
html[data-theme="dark"] a.kanban-card:hover {
    border-color: #475569 !important;
    box-shadow: 0 4px 10px rgba(0,0,0,.45) !important;
}