/* Shared dark mode overrides for public-html and public-html.sub pages */
body.dark-mode {
    background-color: #090a10 !important;
    color: #e8ebff !important;
}

body.dark-mode a,
body.dark-mode a:visited {
    color: #8ab4f8 !important;
}

body.dark-mode a:hover,
body.dark-mode a:focus {
    color: #c8d9ff !important;
}

body.dark-mode header,
body.dark-mode nav,
body.dark-mode .top,
body.dark-mode .row,
body.dark-mode .container,
body.dark-mode .card,
body.dark-mode .card-body,
body.dark-mode .gallery-block,
body.dark-mode section,
body.dark-mode .search,
body.dark-mode .controls,
body.dark-mode .hub-top,
body.dark-mode .info-panel,
body.dark-mode .sidebar,
body.dark-mode .settings-panel,
body.dark-mode .notification,
body.dark-mode .status,
body.dark-mode .profile,
body.dark-mode .title,
body.dark-mode .footer,
body.dark-mode .modal,
body.dark-mode .content,
body.dark-mode .info-panel,
body.dark-mode .card-inner {
    background-color: rgba(15, 18, 28, 0.96) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: none !important;
    color: #e8ebff !important;
}

body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select,
body.dark-mode button,
body.dark-mode .search input,
body.dark-mode .search,
body.dark-mode .switch-label,
body.dark-mode .dark-mode-toggle,
body.dark-mode .profile-photo,
body.dark-mode .card-img-top {
    background-color: rgba(255, 255, 255, 0.06) !important;
    color: #e8ebff !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
}

body.dark-mode ::placeholder {
    color: rgba(232, 235, 255, 0.55) !important;
}

body.dark-mode img,
body.dark-mode video,
body.dark-mode picture,
body.dark-mode svg {
    filter: none !important;
}

body.dark-mode section::after {
    background-color: rgba(0, 0, 0, 0.72) !important;
}

body.dark-mode .dark-mode-toggle {
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.08);
}

.dark-mode-toggle {
    width: 46px;
    min-width: 46px;
    height: 26px;
    padding: 0;
    margin-left: auto;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.18);
    position: relative;
    cursor: pointer;
    transition: background 0.25s ease, border-color 0.25s ease;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
}

.dark-mode-toggle::before {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.15);
}

.dark-mode-toggle::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    top: 3px;
    left: 3px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease, background 0.2s ease;
}

.dark-mode-toggle[aria-pressed="true"] {
    background: rgba(79, 117, 255, 0.9);
    border-color: rgba(79, 117, 255, 0.9);
}

.dark-mode-toggle[aria-pressed="true"]::after {
    transform: translateX(20px);
}

.dark-mode-toggle:hover {
    background: rgba(255, 255, 255, 0.26);
}

header nav {
    align-items: center;
    position: fixed;
}

.dark-mode-toggle {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 0;
}

.theme-starry-night {
    --color-background: #0b1b3f;
    --color-white: #eef5ff;
    --color-dark: #f5f9ff;
    --color-dark-variant: #b6c8f2;
    --color-primary: #98ddff;
    --color-info-dark: #9ba9dc;
    --color-light: rgba(168, 204, 255, 0.18);
    background-image: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.35), transparent 18%),
        radial-gradient(circle at 80% 15%, rgba(255, 255, 255, 0.2), transparent 15%),
        linear-gradient(180deg, #08112f 0%, #111e4c 50%, #152656 100%);
}

.theme-sunset {
    --color-background: #fdebd3;
    --color-white: #fffaf6;
    --color-dark: #3b1f12;
    --color-dark-variant: #744b2e;
    --color-primary: #ff8b5c;
    --color-info-dark: #a36c4e;
    --color-light: rgba(255, 197, 150, 0.2);
    background-image: linear-gradient(180deg, #fff3ec 0%, #fdd6b0 35%, #f5a97d 100%);
}

.theme-neon {
    --color-background: #050814;
    --color-white: #f0f8ff;
    --color-dark: #b8e7ff;
    --color-dark-variant: #7cd1ff;
    --color-primary: #6c5ce7;
    --color-info-dark: #98a0d0;
    --color-light: rgba(108, 92, 231, 0.18);
    background-image: radial-gradient(circle at top left, rgba(108, 92, 231, 0.35), transparent 18%),
        radial-gradient(circle at 80% 15%, rgba(255, 52, 183, 0.22), transparent 15%),
        linear-gradient(180deg, #070c1d 0%, #141a3c 35%, #0e1230 100%);
}

.theme-ocean-glow {
    --color-background: #012d4b;
    --color-white: #eef9ff;
    --color-dark: #e2f5ff;
    --color-dark-variant: #a4d8ff;
    --color-primary: #5cd1ff;
    --color-info-dark: #7aaed5;
    --color-light: rgba(94, 206, 255, 0.18);
    background-image: radial-gradient(circle at 10% 10%, rgba(255, 255, 255, 0.18), transparent 20%),
        linear-gradient(180deg, #01345f 0%, #024a7a 40%, #01638f 100%);
}

.theme-forest-mist {
    --color-background: #142b1c;
    --color-white: #eef6ec;
    --color-dark: #d8e7d3;
    --color-dark-variant: #9bb99b;
    --color-primary: #7ec1a5;
    --color-info-dark: #8eaf99;
    --color-light: rgba(134, 182, 143, 0.2);
    background-image: linear-gradient(180deg, #172f23 0%, #1c4b33 40%, #2d6a4c 100%);
}

.theme-cyberpunk {
    --color-background: #090912;
    --color-white: #f8f7ff;
    --color-dark: #d8f7ff;
    --color-dark-variant: #a9c7ff;
    --color-primary: #ff3eb8;
    --color-info-dark: #7b7cff;
    --color-light: rgba(255, 62, 184, 0.18);
    background-image: radial-gradient(circle at 20% 20%, rgba(255, 62, 184, 0.2), transparent 20%),
        radial-gradient(circle at 75% 15%, rgba(52, 255, 255, 0.18), transparent 15%),
        linear-gradient(180deg, #07090f 0%, #11122c 40%, #120935 100%);
}

.theme-crystal-cove {
    --color-background: #061a2f;
    --color-white: #e9f5ff;
    --color-dark: #c8e4ff;
    --color-dark-variant: #9ccae3;
    --color-primary: #66c3ff;
    --color-info-dark: #7daed0;
    --color-light: rgba(102, 195, 255, 0.16);
    background-image: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.24), transparent 18%),
        linear-gradient(180deg, #04162a 0%, #0d2d4d 50%, #133b63 100%);
}

.theme-solar-flare {
    --color-background: #2b0600;
    --color-white: #fff6ea;
    --color-dark: #ffd8ab;
    --color-dark-variant: #ffba68;
    --color-primary: #ff8c42;
    --color-info-dark: #d98f73;
    --color-light: rgba(255, 140, 66, 0.16);
    background-image: radial-gradient(circle at 20% 20%, rgba(255, 183, 102, 0.22), transparent 18%),
        linear-gradient(180deg, #2b0600 0%, #531600 40%, #8f3d0b 100%);
}

.theme-lunar-lush {
    --color-background: #0b1621;
    --color-white: #eef7ff;
    --color-dark: #d7e9ff;
    --color-dark-variant: #92b3d4;
    --color-primary: #87d1ff;
    --color-info-dark: #7ba5bd;
    --color-light: rgba(135, 209, 255, 0.16);
    background-image: radial-gradient(circle at 50% 30%, rgba(135, 209, 255, 0.18), transparent 22%),
        linear-gradient(180deg, #081426 0%, #0d2c46 45%, #12365a 100%);
}

.theme-rainforest {
    --color-background: #102a18;
    --color-white: #ecf7ea;
    --color-dark: #cde9cc;
    --color-dark-variant: #86b28e;
    --color-primary: #57b76d;
    --color-info-dark: #7fa887;
    --color-light: rgba(87, 183, 109, 0.18);
    background-image: linear-gradient(180deg, #0f2917 0%, #173c26 45%, #225837 100%);
}

.theme-vintage-paper {
    --color-background: #f4ecd8;
    --color-white: #fff8ed;
    --color-dark: #5c4329;
    --color-dark-variant: #8a6b4f;
    --color-primary: #d18f46;
    --color-info-dark: #947753;
    --color-light: rgba(209, 143, 70, 0.16);
    background-image: linear-gradient(180deg, #f4ecd8 0%, #eed5ac 50%, #cfad79 100%);
}

.theme-galaxy-mist {
    --color-background: #08101e;
    --color-white: #ebf0ff;
    --color-dark: #cfd9ff;
    --color-dark-variant: #8fa5d0;
    --color-primary: #96b9ff;
    --color-info-dark: #8ba2db;
    --color-light: rgba(150, 185, 255, 0.14);
    background-image: radial-gradient(circle at 25% 20%, rgba(255, 255, 255, 0.18), transparent 20%),
        radial-gradient(circle at 80% 15%, rgba(255, 180, 255, 0.14), transparent 18%),
        linear-gradient(180deg, #05101a 0%, #0d2141 45%, #122955 100%);
}