/* ============================================
   SDC Dashboard – dark theme
   Palette matches SDC's _17_styles_dark_mode.css:
     #1e1f22  primary background (-sdc-bg)
     #2f3640  secondary surface (panels, headers)
     #353b48  borders / dividers
     #00a8ff  accent (brand, primary buttons, toggle)
     #dcdde1  primary text
   ============================================ */

:root {
    --sdc-bg: #1e1f22;
    --sdc-surface: #2f3640;
    --sdc-border: #353b48;
    --sdc-accent: #00a8ff;
    --sdc-accent-hover: #0095e0;
    --sdc-text: #dcdde1;
}

/* --------------------------------------------
   Surfaces
   -------------------------------------------- */

body.sdc-bg {
    background-color: var(--sdc-bg);
    color: var(--sdc-text);
    min-height: 100vh;
}

.sdc-navbar {
    background-color: var(--sdc-surface);
    border-bottom: 1px solid var(--sdc-border);
}

.sdc-navbar .navbar-text {
    color: var(--sdc-text);
}

.sdc-accent {
    color: var(--sdc-accent) !important;
}

/* The card holding the dashboard sections uses Bootstrap's data-bs-theme="dark"
   default, but we tighten the surface to match SDC. */
.card {
    background-color: var(--sdc-surface);
    border-color: var(--sdc-border);
}

/* --------------------------------------------
   Primary action button
   -------------------------------------------- */

.custom-btn {
    background-color: var(--sdc-accent) !important;
    border-color: var(--sdc-accent) !important;
    color: #fff !important;
}

.custom-btn:hover,
.custom-btn:focus {
    background-color: var(--sdc-accent-hover) !important;
    border-color: var(--sdc-accent-hover) !important;
    color: #fff !important;
}

/* --------------------------------------------
   Toggle switch
   -------------------------------------------- */

.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--sdc-border);
    transition: 0.4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: #fff;
    transition: 0.4s;
}

input:checked + .slider {
    background-color: var(--sdc-accent);
}

input:focus + .slider {
    box-shadow: 0 0 1px var(--sdc-accent);
}

input:checked + .slider:before {
    transform: translateX(26px);
}

.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}