/* ============================================================
   theme.css — Global palette, fonts, Bootstrap dark overrides
   ============================================================ */

/* Vue apps stay hidden until mounted, so raw [[ ]] templates never flash. */
[v-cloak] { display: none !important; }

:root {
    --bg-deep:       #101820;
    --bg-main:       #1A2332;
    --bg-surface:    #223044;
    --bg-surface-hi: #2A3A50;
    --accent:        #5EB5F7;
    --accent-hover:  #7CC4F9;
    --accent-muted:  #2E5A82;
    --text-primary:  #E8ECF1;
    --text-secondary:#8A9BB0;
    --border:        #2D3D50;
    --success:       #5AC85A;
    --danger:        #E8555A;
}

/* ── Base ───────────────────────────────────────────────── */

body {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    background-color: var(--bg-deep);
    color: var(--text-primary);
    min-height: 100vh;
}

/* Animated floating wallpaper — 5 independent layers drifting different directions */
.wallpaper {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}
.wallpaper-layer {
    position: absolute;
    inset: -60%;
    width: 220%;
    height: 220%;
}

/* Layer 1 — circles & arcs, drifts SE */
.wl-1 {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cdefs%3E%3Cstyle%3E.s%7Bfill:none;stroke:%232D3D50;stroke-width:1;opacity:.35%7D%3C/style%3E%3C/defs%3E%3Ccircle class='s' cx='30' cy='45' r='8'/%3E%3Ccircle class='s' cx='250' cy='190' r='5'/%3E%3Ccircle class='s' cx='140' cy='270' r='10'/%3E%3Cpath class='s' d='M70 15q10 15 20 0'/%3E%3Cpath class='s' d='M200 60q12-18 24 0'/%3E%3Cpath class='s' d='M55 180q8 12 16 0q8-12 16 0'/%3E%3Ccircle cx='15' cy='140' r='2' fill='%232D3D50' opacity='.35'/%3E%3Ccircle cx='120' cy='50' r='2' fill='%232D3D50' opacity='.35'/%3E%3Ccircle cx='200' cy='110' r='2.5' fill='%232D3D50' opacity='.35'/%3E%3C/svg%3E") repeat;
    animation: drift-se 100s linear infinite;
}

/* Layer 2 — diamonds & triangles, drifts NW */
.wl-2 {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cdefs%3E%3Cstyle%3E.s%7Bfill:none;stroke:%232D3D50;stroke-width:1;opacity:.28%7D%3C/style%3E%3C/defs%3E%3Crect class='s' x='170' y='25' width='10' height='10' rx='2' transform='rotate(45 175 30)'/%3E%3Crect class='s' x='85' y='210' width='8' height='8' rx='1' transform='rotate(30 89 214)'/%3E%3Cpath class='s' d='M10 85l6-10 6 10'/%3E%3Cpath class='s' d='M280 300l7-11 7 11'/%3E%3Cpath class='s' d='M320 120l5-8 5 8'/%3E%3Crect class='s' x='260' y='230' width='9' height='9' rx='2' transform='rotate(15 264 234)'/%3E%3C/svg%3E") repeat;
    animation: drift-nw 130s linear infinite;
}

/* Layer 3 — squiggles & waves, drifts NE */
.wl-3 {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='450' height='450'%3E%3Cdefs%3E%3Cstyle%3E.s%7Bfill:none;stroke:%232D3D50;stroke-width:1;opacity:.22%7D%3C/style%3E%3C/defs%3E%3Cpath class='s' d='M40 210q15-5 15 10t15-10'/%3E%3Cpath class='s' d='M220 60q10 14 20 0q10-14 20 0'/%3E%3Cpath class='s' d='M160 350q12-8 12 5t12-8'/%3E%3Cpath class='s' d='M350 180q8 12 16 0q8-12 16 0'/%3E%3Cpath class='s' d='M80 120q10-6 10 4t10-6'/%3E%3C/svg%3E") repeat;
    animation: drift-ne 150s linear infinite;
}

/* Layer 4 — dashed circles & dots, drifts SW */
.wl-4 {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='500' height='500'%3E%3Cdefs%3E%3Cstyle%3E.s%7Bfill:none;stroke:%232D3D50;stroke-width:1;opacity:.18%7D%3C/style%3E%3C/defs%3E%3Ccircle class='s' cx='190' cy='240' r='3' stroke-dasharray='2 2'/%3E%3Ccircle class='s' cx='70' cy='65' r='4' stroke-dasharray='2 3'/%3E%3Ccircle class='s' cx='400' cy='380' r='6' stroke-dasharray='3 2'/%3E%3Ccircle cx='250' cy='450' r='2.5' fill='%232D3D50' opacity='.18'/%3E%3Ccircle cx='50' cy='150' r='2' fill='%232D3D50' opacity='.18'/%3E%3Ccircle cx='350' cy='100' r='2' fill='%232D3D50' opacity='.18'/%3E%3Ccircle cx='150' cy='350' r='1.5' fill='%232D3D50' opacity='.18'/%3E%3C/svg%3E") repeat;
    animation: drift-sw 170s linear infinite;
}

/* Layer 5 — large sparse shapes, slow orbit */
.wl-5 {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cdefs%3E%3Cstyle%3E.s%7Bfill:none;stroke:%232D3D50;stroke-width:1;opacity:.14%7D%3C/style%3E%3C/defs%3E%3Ccircle class='s' cx='100' cy='200' r='12'/%3E%3Ccircle class='s' cx='450' cy='120' r='7'/%3E%3Crect class='s' x='350' y='400' width='12' height='12' rx='2' transform='rotate(20 356 406)'/%3E%3Cpath class='s' d='M300 350q15-10 15 8t15-10'/%3E%3Cpath class='s' d='M150 500l8-14 8 14'/%3E%3Ccircle class='s' cx='500' cy='500' r='9'/%3E%3C/svg%3E") repeat;
    animation: drift-orbit 200s linear infinite;
}

@keyframes drift-se {
    0%   { transform: translate(0, 0); }
    25%  { transform: translate(3%, 2%); }
    50%  { transform: translate(5%, 4%); }
    75%  { transform: translate(2%, 5%); }
    100% { transform: translate(0, 0); }
}
@keyframes drift-nw {
    0%   { transform: translate(0, 0); }
    25%  { transform: translate(-3%, -4%); }
    50%  { transform: translate(-5%, -2%); }
    75%  { transform: translate(-4%, -5%); }
    100% { transform: translate(0, 0); }
}
@keyframes drift-ne {
    0%   { transform: translate(0, 0); }
    25%  { transform: translate(4%, -3%); }
    50%  { transform: translate(2%, -5%); }
    75%  { transform: translate(5%, -2%); }
    100% { transform: translate(0, 0); }
}
@keyframes drift-sw {
    0%   { transform: translate(0, 0); }
    25%  { transform: translate(-2%, 4%); }
    50%  { transform: translate(-4%, 2%); }
    75%  { transform: translate(-3%, 5%); }
    100% { transform: translate(0, 0); }
}
@keyframes drift-orbit {
    0%   { transform: translate(0, 0); }
    25%  { transform: translate(3%, -3%); }
    50%  { transform: translate(-2%, 3%); }
    75%  { transform: translate(-4%, -2%); }
    100% { transform: translate(0, 0); }
}

a {
    color: var(--accent);
}
a:hover {
    color: var(--accent-hover);
}

::selection {
    background: var(--accent-muted);
    color: var(--text-primary);
}

/* ── Scrollbar ──────────────────────────────────────────── */

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-deep); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--bg-surface-hi); }

/* ── Bootstrap: Navbar ──────────────────────────────────── */

.navbar {
    background-color: transparent !important;
    border-bottom: none;
    padding: .75rem 0;
}
.navbar-brand {
    display: none;
}
.navbar .navbar-collapse {
    justify-content: center;
}
.navbar-nav {
    margin: 0 auto !important;
}
.navbar .nav-link {
    color: var(--text-secondary) !important;
    font-weight: 500;
    font-size: .9rem;
    padding: .4rem .8rem !important;
    border-radius: .375rem;
    transition: color .15s, background-color .15s;
}
.navbar .nav-link:hover,
.navbar .nav-link.active {
    color: var(--text-primary) !important;
    background-color: var(--bg-surface);
}
.navbar .nav-settings {
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    padding: .4rem;
    border-radius: .375rem;
    transition: color .15s, background-color .15s;
}
/* Log out is a POST form; make its button look like the links beside it. */
.navbar .nav-logout-form {
    display: flex;
    margin: 0;
}
.navbar button.nav-settings {
    background: none;
    border: 0;
    font: inherit;
    cursor: pointer;
}
.navbar .nav-settings-label {
    margin-left: .35rem;
    font-size: .875rem;
}
.navbar .nav-settings:hover {
    color: var(--text-primary);
    background-color: var(--bg-surface);
}
.navbar-toggler {
    border-color: var(--border) !important;
}
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%238A9BB0' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* ── Bootstrap: Cards ───────────────────────────────────── */

.card {
    background-color: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: .75rem;
    color: var(--text-primary);
    position: relative;
    overflow: hidden;
}
.card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        120deg,
        transparent 30%,
        rgba(255, 255, 255, .06) 45%,
        rgba(255, 255, 255, .12) 50%,
        rgba(255, 255, 255, .06) 55%,
        transparent 70%
    );
    transform: translateX(-100%);
    transition: none;
    pointer-events: none;
    z-index: 1;
}
.card:hover::after {
    transform: translateX(100%);
    transition: transform .6s ease;
}
.card-header {
    background-color: var(--bg-surface-hi);
    border-bottom: 1px solid var(--border);
    font-weight: 600;
}
.card-body { padding: 1.5rem; }

/* ── Bootstrap: Buttons ─────────────────────────────────── */

.btn-primary {
    background-color: var(--accent);
    border-color: var(--accent);
    color: #fff;
    font-weight: 500;
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--accent-hover);
    border-color: var(--accent-hover);
    color: #fff;
}
.btn-outline-light {
    border-color: var(--border);
    color: var(--text-secondary);
}
.btn-outline-light:hover {
    background-color: var(--bg-surface);
    border-color: var(--text-secondary);
    color: var(--text-primary);
}
.btn-outline-danger {
    color: var(--danger);
    border-color: var(--danger);
}
.btn-outline-danger:hover {
    background-color: var(--danger);
    color: #fff;
}

/* ── Bootstrap: Form Controls ───────────────────────────── */

.form-control, .form-select {
    background-color: var(--bg-main);
    border: 1px solid var(--border);
    color: var(--text-primary);
    border-radius: .5rem;
}
.form-control:focus, .form-select:focus {
    background-color: var(--bg-main);
    border-color: var(--accent);
    color: var(--text-primary);
    box-shadow: 0 0 0 .2rem rgba(94, 181, 247, .2);
}
.form-control::placeholder { color: var(--text-secondary); opacity: .6; }
.form-label {
    color: var(--text-secondary);
    font-weight: 500;
    font-size: .85rem;
    margin-bottom: .35rem;
}
textarea.form-control { min-height: 100px; resize: vertical; }

/* ── Bootstrap: Progress ────────────────────────────────── */

.progress {
    background-color: var(--bg-main);
    border-radius: .5rem;
    height: .5rem;
}
.progress-bar {
    background-color: var(--accent);
    border-radius: .5rem;
}

/* ── Bootstrap: Badges ──────────────────────────────────── */

.badge.bg-accent {
    background-color: var(--accent-muted) !important;
    color: var(--accent);
    font-weight: 500;
}

/* ── Footer ─────────────────────────────────────────────── */

.site-footer {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--text-secondary);
    font-size: .85rem;
    border-top: none;
    margin-top: 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
}
.footer-links {
    display: flex;
    gap: .75rem;
}
.footer-links a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: .8rem;
}
.footer-links a:hover {
    color: var(--accent);
}

/* ── Toast ──────────────────────────────────────────────── */

.site-toast {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%) translateY(1rem);
    padding: .75rem 1.25rem;
    border-radius: .75rem;
    font-size: .9rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: .5rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s, transform .25s;
    z-index: 9999;
    background-color: var(--bg-surface);
    border: 1px solid var(--border);
    color: var(--text-primary);
}
.site-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}
/* Outcome toasts use fixed solid colors in every theme — deep green for
   success, deep red for failure — so the two can't be mistaken for each
   other. White text is 9:1 (green) and 10:1 (red) contrast. */
.site-toast.success {
    background-color: #14532D;
    border-color: #166534;
    color: #FFFFFF;
    box-shadow: 0 .5rem 1.5rem rgba(20, 83, 45, .35);
}
.site-toast.success .icon { color: #BBF7D0; }
.site-toast.error {
    background-color: #7F1D1D;
    border-color: #991B1B;
    color: #FFFFFF;
    box-shadow: 0 .5rem 1.5rem rgba(127, 29, 29, .35);
}
.site-toast.error .icon { color: #FECACA; }

/* ── Utilities ──────────────────────────────────────────── */

.text-accent  { color: var(--accent) !important; }
.text-muted-custom { color: var(--text-secondary) !important; }
.bg-surface   { background-color: var(--bg-surface) !important; }
.border-custom { border-color: var(--border) !important; }
.page-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 2.5rem 1rem;
}
.page-container.wide {
    max-width: 1000px;
}

/* ============================================================
   Color Themes — override CSS variables on body
   ============================================================ */

/* ── Ember (Red/Orange) ─────────────────────────────────── */
body.theme-ember {
    --accent:        #E8754A;
    --accent-hover:  #F09070;
    --accent-muted:  #6B3525;
    --bg-deep:       #161210;
    --bg-main:       #221A16;
    --bg-surface:    #332820;
    --bg-surface-hi: #443628;
    --text-primary:  #F0E6E0;
    --text-secondary:#A8907E;
    --border:        #4A3828;
    --success:       #7AC85A;
    --danger:        #E8555A;
}

/* ── Forest (Green) ─────────────────────────────────────── */
body.theme-forest {
    --accent:        #5AC88F;
    --accent-hover:  #78D4A6;
    --accent-muted:  #264D3A;
    --bg-deep:       #0E1810;
    --bg-main:       #162318;
    --bg-surface:    #1E3022;
    --bg-surface-hi: #283D2C;
    --text-primary:  #E0F0E6;
    --text-secondary:#86A890;
    --border:        #2D4A34;
    --success:       #5AC85A;
    --danger:        #E8685A;
}

/* ── Solar (Gold/Amber) ─────────────────────────────────── */
body.theme-solar {
    --accent:        #E8B44A;
    --accent-hover:  #F0C870;
    --accent-muted:  #6B5225;
    --bg-deep:       #16140E;
    --bg-main:       #221F14;
    --bg-surface:    #332E1E;
    --bg-surface-hi: #443C26;
    --text-primary:  #F0ECE0;
    --text-secondary:#A89E7E;
    --border:        #4A4228;
    --success:       #7AC85A;
    --danger:        #E8555A;
}

/* ── Violet (Purple) ────────────────────────────────────── */
body.theme-violet {
    --accent:        #A87BF0;
    --accent-hover:  #BF9BF5;
    --accent-muted:  #3D2B6B;
    --bg-deep:       #12101A;
    --bg-main:       #1A1626;
    --bg-surface:    #252036;
    --bg-surface-hi: #302A44;
    --text-primary:  #EAE4F5;
    --text-secondary:#9488B0;
    --border:        #382D52;
    --success:       #5AC885;
    --danger:        #E8555A;
}

/* ── Paper (E-ink) ─────────────────────────────────────── */
body.theme-paper {
    --accent:        #444444;
    --accent-hover:  #222222;
    --accent-muted:  #D8D3CB;
    --bg-deep:       #F5F0E8;
    --bg-main:       #FAF8F3;
    --bg-surface:    #FFFFFF;
    --bg-surface-hi: #F0EDE6;
    --text-primary:  #1A1A1A;
    --text-secondary:#6B6B6B;
    --border:        #D8D3CB;
    --success:       #3A3A3A;
    --danger:        #8B0000;
}
body.theme-paper .wallpaper-layer { filter: grayscale(1); }

/* ── Dark Paper (E-ink Dark) ───────────────────────────── */
body.theme-dark-paper {
    --accent:        #AAAAAA;
    --accent-hover:  #CCCCCC;
    --accent-muted:  #3A3630;
    --bg-deep:       #1A1710;
    --bg-main:       #22201A;
    --bg-surface:    #2A2820;
    --bg-surface-hi: #33302A;
    --text-primary:  #E8E4DC;
    --text-secondary:#908880;
    --border:        #3A3630;
    --success:       #C0C0C0;
    --danger:        #CC8080;
}
body.theme-dark-paper .wallpaper-layer { filter: grayscale(1); }

/* ── Plain (B&W) ───────────────────────────────────────── */
body.theme-plain {
    --accent:        #888888;
    --accent-hover:  #AAAAAA;
    --accent-muted:  #333333;
    --bg-deep:       #0A0A0A;
    --bg-main:       #111111;
    --bg-surface:    #1A1A1A;
    --bg-surface-hi: #222222;
    --text-primary:  #E8E8E8;
    --text-secondary:#888888;
    --border:        #2A2A2A;
    --success:       #AAAAAA;
    --danger:        #CCCCCC;
}
body.theme-plain .wallpaper { display: none; }

/* ── Nav right group (theme + settings) ────────────────── */
.nav-right-group {
    display: flex;
    align-items: center;
    gap: .5rem;
}

/* ── Theme trigger dot ─────────────────────────────────── */
.theme-trigger {
    background: none;
    border: none;
    padding: .4rem;
    cursor: pointer;
    border-radius: .375rem;
    display: flex;
    align-items: center;
    transition: background-color .15s;
}
.theme-trigger:hover {
    background-color: var(--bg-surface);
}
.theme-trigger-dot {
    display: block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--border);
    transition: border-color .15s;
    animation: dot-pulse 2s ease-in-out infinite;
}
@keyframes dot-pulse {
    0%, 100% { transform: scale(1); opacity: .7; }
    50%      { transform: scale(1.3); opacity: 1; }
}
.theme-trigger:hover .theme-trigger-dot {
    border-color: var(--text-secondary);
}

/* On mobile, override dropdown-menu-end so the menu opens rightward (stays on screen) */
@media (max-width: 767.98px) {
    .theme-dropdown-menu.dropdown-menu-end {
        --bs-position: static;
        right: auto;
        left: 0;
    }
}

/* ── Theme dropdown menu ───────────────────────────────── */
.theme-dropdown-menu {
    background-color: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: .5rem;
    padding: .35rem;
    min-width: 130px;
}
.theme-dropdown-menu .dropdown-item {
    color: var(--text-secondary);
    font-size: .85rem;
    font-weight: 500;
    padding: .4rem .6rem;
    border-radius: .375rem;
    display: flex;
    align-items: center;
    gap: .5rem;
    transition: color .15s, background-color .15s;
}
.theme-dropdown-menu .dropdown-item:hover,
.theme-dropdown-menu .dropdown-item:focus {
    color: var(--text-primary);
    background-color: var(--bg-surface-hi);
}
.theme-dropdown-menu .dropdown-item.active {
    color: var(--text-primary);
    background-color: var(--bg-surface-hi);
}

/* Theme dot inside dropdown items */
.theme-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}
.theme-dot[data-theme="default"]  { background-color: #5EB5F7; }
.theme-dot[data-theme="ember"]    { background-color: #E8754A; }
.theme-dot[data-theme="forest"]   { background-color: #5AC88F; }
.theme-dot[data-theme="solar"]    { background-color: #E8B44A; }
.theme-dot[data-theme="violet"]   { background-color: #A87BF0; }
.theme-dot[data-theme="paper"]    { background-color: #F5F0E8; border: 1px solid #D8D3CB; }
.theme-dot[data-theme="dark-paper"] { background-color: #2A2820; border: 1px solid #3A3630; }
.theme-dot[data-theme="plain"]    { background-color: #888888; }

/* ── Cookie Banner ─────────────────────────────────────── */

.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--bg-surface);
    border-top: 1px solid var(--border);
    padding: .75rem 1rem;
    z-index: 9998;
    display: none;
}
.cookie-banner.show { display: block; }
.cookie-banner-inner {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: center;
}
.cookie-banner-inner p {
    margin: 0;
    font-size: .85rem;
    color: var(--text-secondary);
}
.cookie-banner-inner .btn {
    flex-shrink: 0;
    white-space: nowrap;
}
@media (max-width: 575.98px) {
    .cookie-banner-inner {
        flex-direction: column;
        text-align: center;
        gap: .5rem;
    }
}