/**
 * Theme Switcher CSS
 * Light (default), Dark themes
 */

/* Prevent horizontal overflow from breaking position:fixed on mobile */
html, body {
    overflow-x: hidden;
}

/* Prevent long text from overflowing container on mobile */
.form-check-label,
.hero-section {
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
}

/* ========================================
   MOBILE NAVBAR CENTERING
   ======================================== */
@media only screen and (max-width: 626px) {
    .navbar {
        justify-content: space-between !important;
    }
    .site-logo {
        flex: 1 !important;
        justify-content: center !important;
    }
}

/* ========================================
   SIZE SWITCHER
   ======================================== */
[data-size="small"] {
    font-size: 85% !important;
}

[data-size="normal"] {
    font-size: 100% !important;
}

[data-size="large"] {
    font-size: 115% !important;
}

[data-size="xlarge"] {
    font-size: 130% !important;
}

/* ========================================
   LIGHT THEME (default) overrides
   ======================================== */
.text-muted {
    color: inherit !important;
}

/* Fix: Accordion-Header Text schwarz statt Link-blau */
.card-toggle {
    color: inherit;
    text-decoration: none;
}

.card-toggle:hover {
    color: inherit;
    text-decoration: none;
}

/* Fix: Select-Dropdowns Schriftfarbe schwarz statt grau */
select.form-control,
select {
    color: #000000 !important;
}

select.form-control option,
select option {
    color: #000000 !important;
}

/* ========================================
   DARK THEME
   ======================================== */
[data-theme="dark"] {
    /* Background colors */
    background-color: #1a1a2e !important;
}

[data-theme="dark"] body {
    background-color: #1a1a2e !important;
    color: #e4e4e4 !important;
}

[data-theme="dark"] .header,
[data-theme="dark"] header {
    background-color: #16213e !important;
    border-bottom: 1px solid #0f3460 !important;
}

[data-theme="dark"] .navbar {
    background-color: #16213e !important;
}

[data-theme="dark"] .branding {
    background-color: #16213e !important;
}

[data-theme="dark"] .nav-item {
    background-color: transparent !important;
}

/* Menu icon holders - dark background for visibility */
[data-theme="dark"] .theme-icon-holder {
    background-color: #0a1628 !important;
    border-radius: 4px;
    padding: 4px 6px !important;
}

[data-theme="dark"] .theme-icon-holder i {
    color: #00d4ff !important;
}

[data-theme="dark"] .nav-link:hover .theme-icon-holder,
[data-theme="dark"] .dropdown-item:hover .theme-icon-holder {
    background-color: #6f42c1 !important;
}

[data-theme="dark"] .nav-link:hover .theme-icon-holder i,
[data-theme="dark"] .dropdown-item:hover .theme-icon-holder i {
    color: #ffffff !important;
}

[data-theme="dark"] .nav-link,
[data-theme="dark"] .navbar-nav .nav-link,
[data-theme="dark"] .navbar-nav .nav-item .nav-link {
    color: #e4e4e4 !important;
    background-color: transparent !important;
}

[data-theme="dark"] .dropdown-item {
    color: #e4e4e4 !important;
    background-color: transparent !important;
}

[data-theme="dark"] .nav-link:hover,
[data-theme="dark"] .dropdown-item:hover {
    color: #ffffff !important;
    background-color: #6f42c1 !important;
}

[data-theme="dark"] .dropdown-menu {
    background-color: #16213e !important;
    border: 1px solid #0f3460 !important;
}

[data-theme="dark"] .hero-section,
[data-theme="dark"] section {
    background-color: #1a1a2e !important;
}

[data-theme="dark"] .card {
    background-color: #16213e !important;
    border-color: #0f3460 !important;
    color: #e4e4e4 !important;
}

[data-theme="dark"] .card-header {
    background-color: #0f3460 !important;
    border-color: #0f3460 !important;
    color: #fff !important;
}

[data-theme="dark"] .card-header h1,
[data-theme="dark"] .card-header h2,
[data-theme="dark"] .card-header h3,
[data-theme="dark"] .card-header h4,
[data-theme="dark"] .card-header h5,
[data-theme="dark"] .card-header h6,
[data-theme="dark"] .card-header span,
[data-theme="dark"] .card-header:hover,
[data-theme="dark"] .card-header:hover h1,
[data-theme="dark"] .card-header:hover h2,
[data-theme="dark"] .card-header:hover h3,
[data-theme="dark"] .card-header:hover h4,
[data-theme="dark"] .card-header:hover h5,
[data-theme="dark"] .card-header:hover h6,
[data-theme="dark"] .card-header:hover span {
    color: #fff !important;
}

/* Preserve colors for bg-primary, bg-info, bg-secondary headers */
[data-theme="dark"] .card-header.bg-primary,
[data-theme="dark"] .card-header.bg-primary h1,
[data-theme="dark"] .card-header.bg-primary h2,
[data-theme="dark"] .card-header.bg-primary h3,
[data-theme="dark"] .card-header.bg-primary h4,
[data-theme="dark"] .card-header.bg-primary h5,
[data-theme="dark"] .card-header.bg-primary h6,
[data-theme="dark"] .card-header.bg-primary span,
[data-theme="dark"] .card-header.bg-primary:hover,
[data-theme="dark"] .card-header.bg-primary:hover *,
[data-theme="dark"] .card-header.bg-info,
[data-theme="dark"] .card-header.bg-info *,
[data-theme="dark"] .card-header.bg-info:hover,
[data-theme="dark"] .card-header.bg-info:hover *,
[data-theme="dark"] .card-header.bg-secondary,
[data-theme="dark"] .card-header.bg-secondary *,
[data-theme="dark"] .card-header.bg-secondary:hover,
[data-theme="dark"] .card-header.bg-secondary:hover * {
    color: #fff !important;
}

[data-theme="dark"] .card-body {
    background-color: #16213e !important;
    color: #e4e4e4 !important;
}

[data-theme="dark"] .card-footer {
    background-color: #0f3460 !important;
    border-color: #0f3460 !important;
}

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6,
[data-theme="dark"] .site-headline {
    color: #ffffff !important;
}

[data-theme="dark"] p,
[data-theme="dark"] span,
[data-theme="dark"] li {
    color: #c4c4c4 !important;
}

[data-theme="dark"] a {
    color: #00d4ff !important;
}

[data-theme="dark"] a:hover {
    color: #66e5ff !important;
}

/* Card body links - extra bright */
[data-theme="dark"] .card-body a {
    color: #00d4ff !important;
    font-weight: 500;
}

[data-theme="dark"] .card-body a:hover {
    color: #66e5ff !important;
    text-decoration: underline !important;
}

[data-theme="dark"] .footer {
    background-color: #0f0f1a !important;
    color: #c4c4c4 !important;
}

[data-theme="dark"] .footer a {
    color: #00d4ff !important;
}

[data-theme="dark"] .table {
    color: #e4e4e4 !important;
    background-color: #16213e !important;
}

[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) {
    background-color: #1a1a2e !important;
}

[data-theme="dark"] .table-hover tbody tr:hover {
    background-color: #0f3460 !important;
}

[data-theme="dark"] .table-hover tbody tr:hover td,
[data-theme="dark"] .table-hover tbody tr:hover th {
    color: #ffffff !important;
}

[data-theme="dark"] .thead-dark th {
    background-color: #0f3460 !important;
}

[data-theme="dark"] .thead-light th {
    background-color: #0f3460 !important;
    color: #e4e4e4 !important;
    border-color: #1a1a2e !important;
}

/* Unstyled thead in dark theme */
[data-theme="dark"] thead th {
    background-color: #0f3460 !important;
    color: #e4e4e4 !important;
    border-color: #1a1a2e !important;
}

[data-theme="dark"] .table td,
[data-theme="dark"] .table th {
    border-color: #1a1a2e !important;
    color: #e4e4e4 !important;
}

[data-theme="dark"] .table-bordered {
    border-color: #1a1a2e !important;
}

[data-theme="dark"] .table-bordered td,
[data-theme="dark"] .table-bordered th {
    border-color: #1a1a2e !important;
}

/* bg-light rows in dark tables */
[data-theme="dark"] .table tr.bg-light,
[data-theme="dark"] .table tr.bg-light td,
[data-theme="dark"] .table tr.bg-light th {
    background-color: #0f3460 !important;
    color: #e4e4e4 !important;
}

/* list-group in dark theme */
[data-theme="dark"] .list-group-item {
    background-color: #16213e !important;
    border-color: #1a1a2e !important;
    color: #e4e4e4 !important;
}

[data-theme="dark"] .list-group-item.active {
    background-color: #0f3460 !important;
    border-color: #00d4ff !important;
}

[data-theme="dark"] .form-control {
    background-color: #0f3460 !important;
    border-color: #1a1a2e !important;
    color: #e4e4e4 !important;
}

[data-theme="dark"] .form-control:focus {
    background-color: #16213e !important;
    border-color: #00d4ff !important;
    color: #ffffff !important;
}

[data-theme="dark"] .btn-primary {
    background-color: #0f3460 !important;
    border-color: #00d4ff !important;
}

[data-theme="dark"] .btn-primary:hover {
    background-color: #00d4ff !important;
    border-color: #00d4ff !important;
}

[data-theme="dark"] .alert {
    background-color: #16213e !important;
    border-color: #0f3460 !important;
    color: #e4e4e4 !important;
}

[data-theme="dark"] .alert-info {
    background-color: #0f3460 !important;
    border-color: #00d4ff !important;
}

[data-theme="dark"] .alert-success {
    background-color: #1a4d2e !important;
    border-color: #28a745 !important;
}

[data-theme="dark"] .alert-warning {
    background-color: #4d3a1a !important;
    border-color: #ffc107 !important;
}

[data-theme="dark"] .alert-danger {
    background-color: #4d1a1a !important;
    border-color: #dc3545 !important;
}

[data-theme="dark"] .bg-light {
    background-color: #1a1a2e !important;
}

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

[data-theme="dark"] hr {
    border-color: #0f3460 !important;
}

[data-theme="dark"] code {
    background-color: #0f3460 !important;
    color: #00d4ff !important;
}

[data-theme="dark"] .badge {
    color: #fff !important;
}

/* Badge-light needs dark background in dark theme */
[data-theme="dark"] .badge-light {
    background-color: #0f3460 !important;
    color: #e4e4e4 !important;
}

/* Table-light header in dark theme */
[data-theme="dark"] .table-light,
[data-theme="dark"] .table-light th,
[data-theme="dark"] .table-light td,
[data-theme="dark"] thead.table-light,
[data-theme="dark"] thead.table-light th {
    background-color: #0f3460 !important;
    color: #e4e4e4 !important;
}

/* theme-bg-light for collapsible sections */
[data-theme="dark"] .theme-bg-light {
    background-color: #0f3460 !important;
    color: #e4e4e4 !important;
}

[data-theme="dark"] .theme-bg-light h4,
[data-theme="dark"] .theme-bg-light .card-title {
    color: #ffffff !important;
}

/* bg-white areas in dark theme */
[data-theme="dark"] .bg-white {
    background-color: #16213e !important;
}

/* Override inline styles with background-color #e9ecef */
[data-theme="dark"] .badge[style*="background-color: #e9ecef"],
[data-theme="dark"] .badge[style*="background-color:#e9ecef"] {
    background-color: #0f3460 !important;
    color: #e4e4e4 !important;
}

/* FAQ accordion buttons - btn-link styling */
[data-theme="dark"] .btn-link {
    color: #00d4ff !important;
}

[data-theme="dark"] .btn-link:hover {
    color: #66e5ff !important;
}

/* Card header bg-light in dark theme */
[data-theme="dark"] .card-header.bg-light {
    background-color: #0f3460 !important;
}

[data-theme="dark"] .card-header.bg-light .btn-link {
    color: #00d4ff !important;
}

[data-theme="dark"] .card-header.bg-light .btn-link:hover {
    color: #66e5ff !important;
    text-decoration: none !important;
}

/* Plain input, textarea, select elements (without .form-control class) */
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background-color: #e8e8e8 !important;
    border: 1px solid #ccc !important;
    color: #333333 !important;
}

[data-theme="dark"] input[type="text"]:focus,
[data-theme="dark"] input[type="password"]:focus,
[data-theme="dark"] input[type="email"]:focus,
[data-theme="dark"] input[type="number"]:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
    background-color: #ffffff !important;
    border-color: #00d4ff !important;
    color: #000000 !important;
    outline: none !important;
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: #666666 !important;
}

[data-theme="dark"] select option {
    background-color: #e8e8e8 !important;
    color: #333333 !important;
}

/* Callout blocks for dark theme */
[data-theme="dark"] .callout-block {
    background-color: #16213e !important;
    border-color: #0f3460 !important;
}

[data-theme="dark"] .callout-block-danger {
    border-left-color: #dc3545 !important;
    background-color: #2d1a1a !important;
}

[data-theme="dark"] .callout-block-info {
    border-left-color: #00d4ff !important;
    background-color: #1a2d3d !important;
}

[data-theme="dark"] .callout-block-warning {
    border-left-color: #ffc107 !important;
    background-color: #3d3a1a !important;
}

[data-theme="dark"] .callout-block .callout-title,
[data-theme="dark"] .callout-block h4 {
    color: #ffffff !important;
}

[data-theme="dark"] .callout-block p,
[data-theme="dark"] .callout-block label {
    color: #e4e4e4 !important;
}

[data-theme="dark"] .callout-icon-holder {
    color: #00d4ff !important;
}

[data-theme="dark"] .callout-block-danger .callout-icon-holder {
    color: #ff6b6b !important;
}

/* Active menu item (you are here) - dark theme */
[data-theme="dark"] #menuactive,
[data-theme="dark"] #menuactive3 {
    color: #00d4ff !important;
    background-color: #0f3460 !important;
    text-decoration: underline #00d4ff !important;
    font-weight: 700 !important;
}

[data-theme="dark"] #menuactive .theme-icon-holder,
[data-theme="dark"] #menuactive3 .theme-icon-holder {
    background-color: #00d4ff !important;
    color: #0a1628 !important;
}

[data-theme="dark"] #menuactive .theme-icon-holder i,
[data-theme="dark"] #menuactive3 .theme-icon-holder i {
    color: #0a1628 !important;
}

/* ========================================
   THEME SWITCHER COMPONENT
   ======================================== */

/* Menu icon holders - yellow background for visibility */

/* Preserve colors for bg-primary, bg-info, bg-secondary headers */

/* theme-bg-light for collapsible sections */

/* Override inline styles with background-color #e9ecef */

/* Plain input, textarea, select elements (without .form-control class) */

/* ========================================
   THEME SWITCHER COMPONENT
   ======================================== */
.theme-switcher {
    display: flex;
    align-items: center;
    gap: 8px;
}

.theme-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid #ccc;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    padding: 0;
}

.theme-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.theme-btn.active {
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0,123,255,0.3);
}

.theme-btn-light {
    background: linear-gradient(135deg, #ffffff 0%, #f0f0f0 100%);
}

.theme-btn-dark {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
}

/* Dropdown style theme switcher */
.theme-dropdown .dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.theme-dropdown .theme-icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #666;
    display: inline-block;
}

.theme-dropdown .theme-icon-light {
    background: #ffffff;
    border-color: #ccc;
}

.theme-dropdown .theme-icon-dark {
    background: #1a1a2e;
    border-color: #0f3460;
}

.theme-dropdown 

/* Dropdown header styling for dark theme */
[data-theme="dark"] .dropdown-header {
    color: #00d4ff !important;
    background-color: transparent !important;
}

[data-theme="dark"] .dropdown-divider {
    border-color: #0f3460 !important;
}

/* Prevent h4 text-white headers from changing color on hover */
.card-header h4.text-white,
.card-header h4.text-white:hover,
.card-header h4.mb-0.text-white,
.card-header h4.mb-0.text-white:hover,
[data-theme="dark"] .card-header h4.text-white,
[data-theme="dark"] .card-header h4.text-white:hover {
    color: #fff !important;
    text-decoration: none !important;
}