/* =============================================================
 * Admin Panel · Theme polish (2026-05-16)
 * Light mode: warm off-white statt harsh pure white.
 * Dark mode: deep slate statt pitch black, smooth contrast.
 * Modern shadows, softer borders, sharper typography.
 * ============================================================= */

/* ---------- Light Mode polish ---------- */
:root,
html[data-bs-theme="light"] {
    --ccd-bg-app:        #f5f3ef;   /* warmer off-white statt #f5f6f8 */
    --ccd-bg-surface:    #ffffff;   /* card bg bleibt weiss, aber mit warmem app-bg drumherum */
    --ccd-bg-surface-2:  #faf8f4;   /* subtle alt rows */
    --ccd-bg-topbar:     #ffffff;
    --ccd-border:        #e6e2da;
    --ccd-text-primary:  #1a2332;
    --ccd-text-muted:    #5a6878;
    --ccd-shadow-sm:     0 1px 3px rgba(20, 30, 50, 0.06), 0 1px 2px rgba(20, 30, 50, 0.04);
    --ccd-shadow-md:     0 4px 12px rgba(20, 30, 50, 0.08), 0 2px 4px rgba(20, 30, 50, 0.05);
    --ccd-shadow-lg:     0 8px 24px rgba(20, 30, 50, 0.12), 0 4px 8px rgba(20, 30, 50, 0.07);
}

html[data-bs-theme="light"] body {
    background-color: var(--ccd-bg-app) !important;
}
html[data-bs-theme="light"] .content-page,
html[data-bs-theme="light"] .wrapper {
    background-color: var(--ccd-bg-app) !important;
}
html[data-bs-theme="light"] .card {
    background-color: var(--ccd-bg-surface);
    border: 1px solid var(--ccd-border);
    border-radius: 10px;
    box-shadow: var(--ccd-shadow-sm);
}
html[data-bs-theme="light"] .topbar,
html[data-bs-theme="light"] .navbar-custom {
    background-color: var(--ccd-bg-topbar) !important;
    border-bottom: 1px solid var(--ccd-border);
    box-shadow: var(--ccd-shadow-sm);
}

/* ---------- Dark Mode (full custom palette, not BS default) ---------- */
html[data-bs-theme="dark"] {
    --ccd-bg-app:        #0f1620;   /* deep slate, nicht pitch-black */
    --ccd-bg-surface:    #1a2332;   /* card */
    --ccd-bg-surface-2:  #233044;   /* alt rows + hover */
    --ccd-bg-topbar:     #131c2a;
    --ccd-border:        #2a3548;
    --ccd-text-primary:  #e6ecf3;
    --ccd-text-muted:    #8896aa;
    --ccd-shadow-sm:     0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
    --ccd-shadow-md:     0 4px 12px rgba(0, 0, 0, 0.5);
    --ccd-shadow-lg:     0 8px 24px rgba(0, 0, 0, 0.6);

    /* Override Bootstrap CSS vars */
    --bs-body-bg:        #0f1620;
    --bs-body-color:     #e6ecf3;
    --bs-secondary-bg:   #1a2332;
    --bs-tertiary-bg:    #233044;
    --bs-border-color:   #2a3548;
    --bs-emphasis-color: #ffffff;
    --bs-secondary-color: #8896aa;
}

html[data-bs-theme="dark"] body {
    background-color: var(--ccd-bg-app) !important;
    color: var(--ccd-text-primary) !important;
}
html[data-bs-theme="dark"] .content-page,
html[data-bs-theme="dark"] .wrapper {
    background-color: var(--ccd-bg-app) !important;
}
html[data-bs-theme="dark"] .card {
    background-color: var(--ccd-bg-surface) !important;
    border: 1px solid var(--ccd-border) !important;
    border-radius: 10px;
    box-shadow: var(--ccd-shadow-md);
    color: var(--ccd-text-primary);
}
html[data-bs-theme="dark"] .card-header,
html[data-bs-theme="dark"] .card-footer {
    background-color: var(--ccd-bg-surface-2) !important;
    border-color: var(--ccd-border) !important;
    color: var(--ccd-text-primary);
}
html[data-bs-theme="dark"] .topbar,
html[data-bs-theme="dark"] .navbar-custom {
    background-color: var(--ccd-bg-topbar) !important;
    border-bottom: 1px solid var(--ccd-border) !important;
}
html[data-bs-theme="dark"] .leftside-menu,
html[data-bs-theme="dark"] .left-side-menu,
html[data-bs-theme="dark"] .sidebar-menu,
html[data-bs-theme="dark"] #sidebar-menu {
    background-color: var(--ccd-bg-topbar) !important;
    border-right: 1px solid var(--ccd-border);
}
html[data-bs-theme="dark"] .table {
    --bs-table-bg: var(--ccd-bg-surface);
    --bs-table-color: var(--ccd-text-primary);
    --bs-table-border-color: var(--ccd-border);
    --bs-table-striped-bg: var(--ccd-bg-surface-2);
    --bs-table-hover-bg: rgba(255,255,255,0.04);
}
html[data-bs-theme="dark"] .text-muted,
html[data-bs-theme="dark"] .text-secondary {
    color: var(--ccd-text-muted) !important;
}
html[data-bs-theme="dark"] .form-control,
html[data-bs-theme="dark"] .form-select {
    background-color: var(--ccd-bg-surface-2) !important;
    border-color: var(--ccd-border) !important;
    color: var(--ccd-text-primary) !important;
}
html[data-bs-theme="dark"] .form-control:focus,
html[data-bs-theme="dark"] .form-select:focus {
    border-color: #4a90c9 !important;
    box-shadow: 0 0 0 0.2rem rgba(74,144,201,0.25) !important;
}
html[data-bs-theme="dark"] .modal-content,
html[data-bs-theme="dark"] .dropdown-menu,
html[data-bs-theme="dark"] .offcanvas {
    background-color: var(--ccd-bg-surface) !important;
    border-color: var(--ccd-border) !important;
    color: var(--ccd-text-primary);
}
html[data-bs-theme="dark"] .dropdown-item {
    color: var(--ccd-text-primary);
}
html[data-bs-theme="dark"] .dropdown-item:hover,
html[data-bs-theme="dark"] .dropdown-item:focus {
    background-color: var(--ccd-bg-surface-2) !important;
    color: var(--ccd-text-primary) !important;
}
html[data-bs-theme="dark"] .alert-info {
    background-color: rgba(74,144,201,0.15);
    border-color: rgba(74,144,201,0.3);
    color: #b8d4ed;
}
html[data-bs-theme="dark"] .alert-warning {
    background-color: rgba(237,199,85,0.12);
    border-color: rgba(237,199,85,0.3);
    color: #ffd97a;
}
html[data-bs-theme="dark"] .alert-danger {
    background-color: rgba(208,63,63,0.15);
    border-color: rgba(208,63,63,0.3);
    color: #ff9a9a;
}
html[data-bs-theme="dark"] hr,
html[data-bs-theme="dark"] .border,
html[data-bs-theme="dark"] .border-top,
html[data-bs-theme="dark"] .border-bottom {
    border-color: var(--ccd-border) !important;
}
html[data-bs-theme="dark"] code {
    background-color: var(--ccd-bg-surface-2);
    color: #ffb86c;
}

/* Dashboard cards (widget-flat) bleiben in beiden Modi farbig, da semantische Akzent-Farben. */
/* Aber im Dark Mode: leicht reduzierte Sattheit fuer weniger Augenstrain */
html[data-bs-theme="dark"] .widget-flat {
    filter: saturate(0.92) brightness(0.95);
}

/* ---------- Theme Toggle Button im Topbar ---------- */
.ccd-theme-toggle {
    background: transparent;
    border: 0;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    color: inherit;
    transition: background-color 0.15s ease;
    border-radius: 6px;
}
.ccd-theme-toggle:hover {
    background-color: rgba(127,127,127,0.12);
}
.ccd-theme-toggle i { font-size: 1.25rem; vertical-align: middle; }
html[data-bs-theme="dark"] .ccd-theme-toggle .ri-moon-line { display: none; }
html[data-bs-theme="dark"] .ccd-theme-toggle .ri-sun-line  { display: inline-block; }
html[data-bs-theme="light"] .ccd-theme-toggle .ri-moon-line { display: inline-block; }
html[data-bs-theme="light"] .ccd-theme-toggle .ri-sun-line  { display: none; }

/* Smooth theme switch fuer Card/Background-Wechsel */
body, .card, .topbar, .navbar-custom, .leftside-menu, .modal-content, .dropdown-menu {
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}