/*
 * Dash Theme – warmes Creme/Karamell/Gold-Farbschema
 * Inspiriert vom RAGFlow-Studio-Design
 */

/* ===== Farb-Variablen ===== */
html[data-theme="dash"] {
    --dash-primary:       #C49A6C;
    --dash-primary-dark:  #A67C52;
    --dash-primary-light: #E6CBA8;
    --dash-primary-rgb:   196, 154, 108;
    --dash-accent:        #3D8B7A;
    --dash-accent-rgb:    61, 139, 122;
    --dash-body-bg:       #FDF8F0;
    --dash-sidebar-bg:    #FAF5EE;
    --dash-card-bg:       #FFFFFF;
    --dash-header-bg:     #FAF5EE;
    --dash-border:        #EDE5D8;
    --dash-text:          #4A3728;
    --dash-text-muted:    #8B7355;
    --dash-sidebar-active:#3D8B7A;
    --dash-sidebar-hover: #F3EBE0;
    --dash-gold:          #D4A76A;
}

/* ===== Body ===== */
html[data-theme="dash"] body {
    background-color: var(--dash-body-bg) !important;
    color: var(--dash-text);
}

html[data-theme="dash"] ::selection {
    background: var(--dash-primary);
    color: #FFF;
}

/* ===== Typografie ===== */
html[data-theme="dash"] h1,
html[data-theme="dash"] h2,
html[data-theme="dash"] h3,
html[data-theme="dash"] h4,
html[data-theme="dash"] h5,
html[data-theme="dash"] h6,
html[data-theme="dash"] .h1,
html[data-theme="dash"] .h2,
html[data-theme="dash"] .h3,
html[data-theme="dash"] .h4,
html[data-theme="dash"] .h5,
html[data-theme="dash"] .h6 {
    color: var(--dash-text);
}

/* ===== Header ===== */
html[data-theme="dash"] .header {
    background: var(--dash-header-bg) !important;
    border-bottom: 1px solid var(--dash-border);
}

html[data-theme="dash"] .header .header-left {
    background: var(--dash-header-bg) !important;
    border-color: var(--dash-border) !important;
}

/* ===== Sidebar ===== */
html[data-theme="dash"] .sidebar {
    background-color: var(--dash-sidebar-bg) !important;
    border-right: 1px solid var(--dash-border);
}

html[data-theme="dash"] .sidebar .sidebar-menu > ul > li .submenu-hdr {
    color: var(--dash-text-muted);
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.5px;
}

html[data-theme="dash"] .sidebar .sidebar-menu > ul > li .submenu-hdr::after {
    background: var(--dash-border);
}

html[data-theme="dash"] .sidebar .sidebar-menu > ul > li ul li a {
    color: var(--dash-text);
}

html[data-theme="dash"] .sidebar .sidebar-menu > ul > li ul li a i {
    background: var(--dash-primary-light);
    color: var(--dash-primary-dark);
}

html[data-theme="dash"] .sidebar .sidebar-menu > ul > li ul li a:hover,
html[data-theme="dash"] .sidebar .sidebar-menu > ul > li ul li a:hover span {
    color: var(--dash-primary-dark) !important;
    background: var(--dash-sidebar-hover);
}

html[data-theme="dash"] .sidebar .sidebar-menu > ul > li ul li a.active,
html[data-theme="dash"] .sidebar .sidebar-menu > ul > li ul li a.active span {
    color: var(--dash-sidebar-active) !important;
}

html[data-theme="dash"] .sidebar .sidebar-menu > ul > li ul li.active a {
    background: var(--dash-sidebar-hover);
    border-left: 3px solid var(--dash-sidebar-active);
}

html[data-theme="dash"] .sidebar .sidebar-menu > ul > li ul li.active a i {
    background: rgba(var(--dash-accent-rgb), 0.15);
    color: var(--dash-sidebar-active);
}

html[data-theme="dash"] .sidebar .sidebar-menu > ul > li.active a span {
    color: var(--dash-sidebar-active) !important;
}

/* ===== Karten ===== */
html[data-theme="dash"] .card {
    background: var(--dash-card-bg);
    border: 1px solid var(--dash-border);
    border-top: 3px solid var(--dash-gold);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

html[data-theme="dash"] .card .card-header {
    background: var(--dash-card-bg);
    border-bottom: 1px solid var(--dash-border);
}

/* ===== Buttons – Primary ===== */
html[data-theme="dash"] .btn-primary {
    background-color: var(--dash-primary) !important;
    border-color: var(--dash-primary) !important;
    color: #FFF !important;
}

html[data-theme="dash"] .btn-primary:hover,
html[data-theme="dash"] .btn-primary:focus {
    background-color: var(--dash-primary-dark) !important;
    border-color: var(--dash-primary-dark) !important;
}

html[data-theme="dash"] .btn-outline-primary {
    color: var(--dash-primary) !important;
    border-color: var(--dash-primary) !important;
}

html[data-theme="dash"] .btn-outline-primary:hover {
    background-color: var(--dash-primary) !important;
    color: #FFF !important;
}

/* ===== Text- und Hintergrund-Utility ===== */
html[data-theme="dash"] .text-primary {
    color: var(--dash-primary) !important;
}

html[data-theme="dash"] .bg-primary {
    background-color: var(--dash-primary) !important;
}

/* ===== Breadcrumb ===== */
html[data-theme="dash"] .breadcrumb-item a {
    color: var(--dash-primary);
}

html[data-theme="dash"] .breadcrumb-item.active {
    color: var(--dash-text-muted);
}

/* ===== Tabellen ===== */
html[data-theme="dash"] .table {
    color: var(--dash-text);
}

html[data-theme="dash"] .table thead th {
    background: var(--dash-sidebar-bg);
    color: var(--dash-text-muted);
    border-bottom: 2px solid var(--dash-border);
}

html[data-theme="dash"] .table td {
    border-color: var(--dash-border);
}

html[data-theme="dash"] .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(var(--dash-primary-rgb), 0.04);
}

html[data-theme="dash"] .table-hover > tbody > tr:hover > * {
    background-color: rgba(var(--dash-primary-rgb), 0.08);
}

/* ===== Badges ===== */
html[data-theme="dash"] .badge.bg-primary {
    background-color: var(--dash-primary) !important;
}

/* ===== Formular-Elemente ===== */
html[data-theme="dash"] .form-control,
html[data-theme="dash"] .form-select {
    border-color: var(--dash-border);
    color: var(--dash-text);
    background-color: #FFF;
}

html[data-theme="dash"] .form-control:focus,
html[data-theme="dash"] .form-select:focus {
    border-color: var(--dash-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--dash-primary-rgb), 0.2);
}

/* ===== Dropdowns ===== */
html[data-theme="dash"] .dropdown-menu {
    border: 1px solid var(--dash-border);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

html[data-theme="dash"] .dropdown-item:hover,
html[data-theme="dash"] .dropdown-item:focus {
    background-color: var(--dash-sidebar-hover);
    color: var(--dash-primary-dark);
}

html[data-theme="dash"] .dropdown-item.active {
    background-color: var(--dash-primary);
    color: #FFF;
}

/* ===== Pagination ===== */
html[data-theme="dash"] .page-link {
    color: var(--dash-primary);
    border-color: var(--dash-border);
}

html[data-theme="dash"] .page-item.active .page-link {
    background-color: var(--dash-primary);
    border-color: var(--dash-primary);
}

/* ===== Alerts ===== */
html[data-theme="dash"] .alert-success {
    background-color: rgba(var(--dash-accent-rgb), 0.1);
    border-color: rgba(var(--dash-accent-rgb), 0.3);
    color: #2E6B5E;
}

/* ===== Page Wrapper ===== */
html[data-theme="dash"] .page-wrapper {
    background-color: var(--dash-body-bg);
}

/* ===== Nav-Tabs ===== */
html[data-theme="dash"] .nav-tabs .nav-link.active {
    color: var(--dash-primary);
    border-bottom-color: var(--dash-primary);
}

html[data-theme="dash"] .nav-tabs .nav-link:hover {
    color: var(--dash-primary-dark);
}

/* ===== Scrollbar ===== */
html[data-theme="dash"] ::-webkit-scrollbar-thumb {
    background: var(--dash-primary-light);
    border-radius: 4px;
}

html[data-theme="dash"] ::-webkit-scrollbar-track {
    background: var(--dash-sidebar-bg);
}

/* ===== Links allgemein ===== */
html[data-theme="dash"] a {
    color: var(--dash-primary);
}

html[data-theme="dash"] a:hover {
    color: var(--dash-primary-dark);
}

/* ===== Header-Icons / Toggle-Buttons ===== */
html[data-theme="dash"] .header .btn-outline-light {
    border-color: var(--dash-border) !important;
}

html[data-theme="dash"] .header .btn-outline-light.bg-white,
html[data-theme="dash"] .header .bg-white {
    background-color: var(--dash-header-bg) !important;
}

html[data-theme="dash"] .header #toggle_btn i,
html[data-theme="dash"] .header .ti {
    color: var(--dash-text-muted);
}

/* ===== Modal ===== */
html[data-theme="dash"] .modal-content {
    border: 1px solid var(--dash-border);
}

html[data-theme="dash"] .modal-header {
    border-bottom-color: var(--dash-border);
}

html[data-theme="dash"] .modal-footer {
    border-top-color: var(--dash-border);
}

/* ===== Sidebar mini / collapsed ===== */
@media (max-width: 991.98px) {
    html[data-theme="dash"] .sidebar {
        background: var(--dash-sidebar-bg) !important;
    }
}