/*
 * LightBlue Theme – helles Blau/Indigo-Farbschema
 * Inspiriert vom NiceAdmin-Dashboard-Design
 */

/* ===== Farb-Variablen ===== */
html[data-theme="lightblue"] {
    --lb-primary:       #4361EE;
    --lb-primary-dark:  #3A56D4;
    --lb-primary-light: #D6DCFC;
    --lb-primary-rgb:   67, 97, 238;
    --lb-accent:        #4361EE;
    --lb-accent-rgb:    67, 97, 238;
    --lb-body-bg:       #F0F4FB;
    --lb-sidebar-bg:    #E8EEF8;
    --lb-card-bg:       #FFFFFF;
    --lb-header-bg:     #FFFFFF;
    --lb-border:        #D5DFF0;
    --lb-text:          #2C3E6B;
    --lb-text-muted:    #6B7A99;
    --lb-sidebar-active:#4361EE;
    --lb-sidebar-hover: #DCE4F5;
    --lb-sidebar-active-bg: rgba(67, 97, 238, 0.12);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ===== Karten ===== */
html[data-theme="lightblue"] .card {
    background: var(--lb-card-bg);
    border: 1px solid var(--lb-border);
    box-shadow: 0 2px 8px rgba(67, 97, 238, 0.06);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ===== Dropdowns ===== */
html[data-theme="lightblue"] .dropdown-menu {
    border: 1px solid var(--lb-border);
    box-shadow: 0 4px 16px rgba(67, 97, 238, 0.10);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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