/* ============================================================
   Scratch Tracker — themeable stylesheet
   Two themes via CSS custom properties on :root[data-theme].
   Default theme: dark (neon / cyberpunk).
   ============================================================ */

/* ---------- DARK (default) ---------- */
:root,
:root[data-theme="dark"] {
    --bg-deep: #06030d;
    --body-bg-image:
        linear-gradient(rgba(6, 3, 13, 0.72), rgba(6, 3, 13, 0.85)),
        url('/static/img/black_theme_background.png');
    --body-bg-size: cover;
    --body-bg-attachment: fixed;

    --panel-bg: rgba(15, 8, 30, 0.72);
    --panel-inner-bg: rgba(6, 3, 13, 0.55);
    --panel-border: rgba(255, 60, 200, 0.35);
    --panel-border-strong: rgba(255, 60, 200, 0.6);
    --panel-shadow:
        0 0 24px rgba(255, 43, 214, 0.18),
        0 0 60px rgba(34, 230, 255, 0.10),
        inset 0 0 40px rgba(0, 0, 0, 0.45);
    --panel-blur: blur(6px);
    --container-radius: 14px;

    --neon-magenta: #ff2bd6;
    --neon-magenta-glow: rgba(255, 43, 214, 0.75);
    --neon-cyan: #22e6ff;
    --neon-cyan-glow: rgba(34, 230, 255, 0.6);
    --neon-green: #22ff9c;

    --text-primary: #eaf6ff;
    --text-secondary: #a9b6cf;
    --text-muted: #6f7d97;

    --input-bg: rgba(10, 5, 22, 0.7);
    --input-border: rgba(255, 60, 200, 0.35);

    --heading-color: var(--neon-magenta);
    --heading-shadow:
        0 0 6px var(--neon-magenta-glow),
        0 0 14px rgba(255, 43, 214, 0.45);
    --heading-transform: uppercase;
    --heading-letter-spacing: 1.5px;

    --scratch-btn-bg: var(--neon-green);
    --scratch-btn-color: #04120a;
    --scratch-btn-shadow: 0 0 12px rgba(34, 255, 156, 0.55);
    --scratch-btn-hover-shadow: 0 0 20px rgba(34, 255, 156, 0.9);

    --delete-btn-bg: var(--neon-magenta);
    --delete-btn-color: #ffffff;
    --delete-btn-shadow: 0 0 12px var(--neon-magenta-glow);

    --mode-btn-bg: var(--neon-magenta);
    --mode-btn-color: #ffffff;
    --mode-btn-shadow: 0 0 14px var(--neon-magenta-glow);
    --mode-btn-active-bg: var(--neon-cyan);
    --mode-btn-active-color: #04121a;

    --auth-btn-bg: var(--neon-magenta);
    --auth-btn-color: #ffffff;
    --auth-btn-shadow: 0 0 14px var(--neon-magenta-glow);

    --spot-bg: #ffffff;
    --spot-border: 1.5px solid var(--neon-magenta);
    --spot-shadow:
        0 0 6px var(--neon-magenta),
        0 0 12px var(--neon-magenta-glow);
    --spot-selected-bg: var(--neon-cyan);
    --spot-selected-border-color: var(--neon-cyan);
    --spot-selected-shadow:
        0 0 10px var(--neon-cyan),
        0 0 22px var(--neon-cyan-glow);
    --spot-count-bg: rgba(6, 3, 13, 0.8);
    --spot-count-border: 1px solid var(--neon-magenta);
    --spot-count-color: var(--text-primary);
    --spot-count-shadow: 0 0 4px var(--neon-magenta-glow);

    --error-color: var(--neon-magenta);
    --error-shadow: 0 0 4px var(--neon-magenta-glow);

    /* body images shown per theme via CSS */
    --body-front-display: block;
    --body-front-dark-display: block;
    --body-front-light-display: none;
}

/* ---------- LIGHT ---------- */
:root[data-theme="light"] {
    --bg-deep: #f5f5f5;
    --body-bg-image: none;
    --body-bg-size: auto;
    --body-bg-attachment: scroll;

    --panel-bg: #ffffff;
    --panel-inner-bg: #f9f9f9;
    --panel-border: #dddddd;
    --panel-border-strong: #cccccc;
    --panel-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    --panel-blur: none;
    --container-radius: 8px;

    --neon-magenta: #007BFF;
    --neon-magenta-glow: rgba(0, 123, 255, 0.15);
    --neon-cyan: #6C63FF;
    --neon-cyan-glow: rgba(108, 99, 255, 0.2);
    --neon-green: #28A745;

    --text-primary: #333333;
    --text-secondary: #555555;
    --text-muted: #666666;

    --input-bg: #ffffff;
    --input-border: #cccccc;

    --heading-color: #333333;
    --heading-shadow: none;
    --heading-transform: none;
    --heading-letter-spacing: normal;

    --scratch-btn-bg: #28A745;
    --scratch-btn-color: #ffffff;
    --scratch-btn-shadow: none;
    --scratch-btn-hover-shadow: none;

    --delete-btn-bg: #dc3545;
    --delete-btn-color: #ffffff;
    --delete-btn-shadow: none;

    --mode-btn-bg: #6C63FF;
    --mode-btn-color: #ffffff;
    --mode-btn-shadow: none;
    --mode-btn-active-bg: #FF6B6B;
    --mode-btn-active-color: #ffffff;

    --auth-btn-bg: #28A745;
    --auth-btn-color: #ffffff;
    --auth-btn-shadow: none;

    --spot-bg: #FF6B6B;
    --spot-border: none;
    --spot-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3);
    --spot-selected-bg: #0066FF;
    --spot-selected-border-color: transparent;
    --spot-selected-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3);
    --spot-count-bg: rgba(255, 255, 255, 0.85);
    --spot-count-border: none;
    --spot-count-color: #333333;
    --spot-count-shadow: none;

    --error-color: #dc3545;
    --error-shadow: none;

    --body-front-dark-display: none;
    --body-front-light-display: block;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    min-height: 100vh;
}

body {
    font-family: "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    background-color: var(--bg-deep);
    background-image: var(--body-bg-image);
    background-size: var(--body-bg-size);
    background-position: center center;
    background-attachment: var(--body-bg-attachment);
    background-repeat: no-repeat;
    color: var(--text-primary);
    min-height: 100vh;
}

.container {
    max-width: 1080px;
    margin: 24px auto;
    padding: 26px;
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: var(--container-radius);
    box-shadow: var(--panel-shadow);
    backdrop-filter: var(--panel-blur);
    -webkit-backdrop-filter: var(--panel-blur);
}

h1, h2, h3 {
    text-transform: var(--heading-transform);
    letter-spacing: var(--heading-letter-spacing);
    color: var(--heading-color);
    text-shadow: var(--heading-shadow);
    font-weight: 700;
}

h1 {
    font-size: 26px;
    margin-bottom: 22px;
    line-height: 1.15;
}

h2 {
    font-size: 17px;
    margin-bottom: 18px;
}

/* Main layout */
.main-layout {
    display: flex;
    align-items: stretch;
    gap: 20px;
    margin-bottom: 22px;
    flex-wrap: wrap;
}

.svg-container {
    display: flex;
    gap: 14px;
    border: 1px solid var(--panel-border);
    border-radius: 10px;
    padding: 14px;
    background: var(--panel-inner-bg);
    flex: 1 1 auto;
}

.body-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1 1 0;
}

.body-view-label {
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: var(--heading-transform);
    letter-spacing: 3px;
    text-shadow: none;
}

.body-wrapper {
    position: relative;
    width: 100%;
    max-width: 300px;
    display: block;
    user-select: none;
}

.body-image {
    width: 100%;
    height: auto;
    display: block;
    -webkit-user-drag: none;
    border-radius: 6px;
}

/* Two body-images per side; toggled by theme via CSS. */
.body-image.body-image-dark { display: var(--body-front-dark-display); }
.body-image.body-image-light { display: var(--body-front-light-display); }

/* Dark theme: aligned images share the light-theme silhouette aspect ratio
   (298:740) and have a transparent background. Give the wrapper a matching
   dark background so the figure sits on the panel colour, not blank space. */
html[data-theme="dark"] .body-wrapper {
}

.spots-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Point markers */
.body-spot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--spot-bg);
    border: var(--spot-border);
    box-shadow: var(--spot-shadow);
    opacity: 0.95;
    cursor: pointer;
    transition: all 0.2s ease;
}

.body-spot:hover {
    opacity: 1;
    transform: scale(1.25);
}

.body-spot.selected {
    background: var(--spot-selected-bg);
    border-color: var(--spot-selected-border-color);
    box-shadow: var(--spot-selected-shadow);
    opacity: 1;
}

.spot-count {
    position: absolute;
    top: -4px;
    left: 20px;
    font-size: 11px;
    font-weight: 700;
    color: var(--spot-count-color);
    background: var(--spot-count-bg);
    border: var(--spot-count-border);
    border-radius: 10px;
    padding: 1px 6px;
    pointer-events: none;
    white-space: nowrap;
    text-shadow: var(--spot-count-shadow);
}

.spot-container {
    position: absolute;
    transform: translate(-50%, -50%);
    pointer-events: auto;
}

.body-wrapper.add-mode .body-image {
    cursor: crosshair;
}

/* Controls row */
.controls {
    display: flex;
    gap: 14px;
    align-items: center;
    margin-bottom: 22px;
    padding: 14px 18px;
    background: var(--panel-inner-bg);
    border: 1px solid var(--panel-border);
    border-radius: 10px;
    flex-wrap: wrap;
}

.controls label {
    font-size: 12px;
    text-transform: var(--heading-transform);
    letter-spacing: 2px;
    color: var(--text-secondary);
}

.controls #selected-spot-name {
    color: var(--text-primary);
    text-transform: none;
    letter-spacing: normal;
    font-weight: 600;
}

/* Buttons */
.scratch-button {
    padding: 10px 24px;
    background: var(--scratch-btn-bg);
    color: var(--scratch-btn-color);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    text-transform: var(--heading-transform);
    letter-spacing: 2px;
    box-shadow: var(--scratch-btn-shadow);
    transition: all 0.15s;
}
.scratch-button:hover:not(:disabled) {
    box-shadow: var(--scratch-btn-hover-shadow);
    transform: translateY(-1px);
}
.scratch-button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    box-shadow: none;
}

.delete-button {
    padding: 10px 22px;
    background: var(--delete-btn-bg);
    color: var(--delete-btn-color);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    text-transform: var(--heading-transform);
    letter-spacing: 2px;
    box-shadow: var(--delete-btn-shadow);
    transition: all 0.15s;
}
.delete-button:hover:not(:disabled) {
    transform: translateY(-1px);
}
.delete-button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    box-shadow: none;
}

/* Chart */
.chart-section {
    margin-top: 26px;
    padding: 20px;
    border: 1px solid var(--panel-border);
    border-radius: 10px;
    background: var(--panel-inner-bg);
}

.period-switcher {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 15px;
}
.period-switcher label {
    font-size: 12px;
    text-transform: var(--heading-transform);
    letter-spacing: 2px;
    color: var(--text-secondary);
}

#period-select {
    padding: 6px 12px;
    border: 1px solid var(--panel-border);
    border-radius: 4px;
    background: var(--input-bg);
    color: var(--text-primary);
    font-size: 13px;
}

#scratch-chart {
    max-height: 300px;
    margin-bottom: 10px;
}

/* Add-spot panel */
.add-spot-section {
    background: var(--panel-inner-bg);
    border: 1px solid var(--panel-border);
    border-radius: 10px;
    padding: 22px;
    flex: 1 1 300px;
    min-width: 280px;
}

.add-spot-section h2 {
    margin-top: 0;
}

#add-spot-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.form-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-row > label:first-child {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: var(--heading-transform);
    letter-spacing: 2px;
}

.radio-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-weight: 400;
    color: var(--text-primary);
    text-transform: none;
    letter-spacing: normal;
    font-size: 14px;
}

.radio-label input[type="radio"] {
    cursor: pointer;
    accent-color: var(--neon-magenta);
    width: 16px;
    height: 16px;
}

/* Text inputs */
#spot-name,
.auth-form input[type="email"],
.auth-form input[type="password"] {
    padding: 12px 14px;
    border: 1px solid var(--input-border);
    border-radius: 4px;
    background: var(--input-bg);
    color: var(--text-primary);
    font-size: 14px;
    font-family: inherit;
    width: 100%;
    transition: all 0.15s;
}

#spot-name::placeholder,
.auth-form input::placeholder {
    color: var(--text-muted);
}

#spot-name:focus,
.auth-form input:focus {
    outline: none;
    border-color: var(--neon-magenta);
    box-shadow: 0 0 0 3px var(--neon-magenta-glow);
}

.hint-text {
    font-size: 12px;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.5;
}

.mode-button {
    padding: 12px 18px;
    background: var(--mode-btn-bg);
    color: var(--mode-btn-color);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    text-transform: var(--heading-transform);
    letter-spacing: 2px;
    box-shadow: var(--mode-btn-shadow);
    transition: all 0.15s;
}
.mode-button:hover {
    transform: translateY(-1px);
}
.mode-button.active {
    background: var(--mode-btn-active-bg);
    color: var(--mode-btn-active-color);
}

.coordinates-display {
    font-size: 13px;
    color: var(--text-secondary);
    text-transform: var(--heading-transform);
    letter-spacing: 2px;
    padding: 10px 14px;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 4px;
    display: inline-block;
}

.add-button {
    padding: 12px 20px;
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--panel-border);
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    text-transform: var(--heading-transform);
    letter-spacing: 2px;
    transition: all 0.15s;
}
.add-button:hover:not(:disabled) {
    color: var(--neon-magenta);
    border-color: var(--neon-magenta);
}
.add-button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* ================= AUTH ================= */

.auth-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    position: relative;
}

.auth-box {
    width: 100%;
    max-width: 400px;
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: var(--container-radius);
    box-shadow: var(--panel-shadow);
    backdrop-filter: var(--panel-blur);
    -webkit-backdrop-filter: var(--panel-blur);
    padding: 32px;
    text-align: center;
}

.auth-box h1 {
    font-size: 22px;
    margin-bottom: 22px;
}

.auth-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 22px;
}

.auth-tab-button {
    flex: 1;
    padding: 10px;
    background: transparent;
    border: 1px solid var(--panel-border);
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: var(--heading-transform);
    letter-spacing: 2px;
    transition: all 0.15s;
}
.auth-tab-button:hover {
    color: var(--neon-magenta);
    border-color: var(--neon-magenta);
}
.auth-tab-button.active {
    background: var(--neon-magenta);
    color: #ffffff;
    border-color: var(--neon-magenta);
    box-shadow: 0 0 14px var(--neon-magenta-glow);
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    text-align: left;
}

.auth-form .form-row label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: var(--heading-transform);
    letter-spacing: 2px;
    margin-bottom: 4px;
    display: block;
}

.field-error {
    display: block;
    color: var(--error-color);
    font-size: 12px;
    margin-top: 4px;
    min-height: 14px;
    text-shadow: var(--error-shadow);
}

.auth-button {
    padding: 12px 20px;
    background: var(--auth-btn-bg);
    color: var(--auth-btn-color);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    text-transform: var(--heading-transform);
    letter-spacing: 2px;
    box-shadow: var(--auth-btn-shadow);
    transition: all 0.15s;
}
.auth-button:hover {
    transform: translateY(-1px);
}

.auth-error {
    color: var(--error-color);
    font-size: 13px;
    min-height: 16px;
    text-align: center;
    text-shadow: var(--error-shadow);
}

/* User bar */
.user-bar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}

.user-email {
    font-size: 13px;
    color: var(--text-secondary);
    letter-spacing: 0.5px;
}

.logout-button {
    padding: 7px 18px;
    background: transparent;
    color: var(--neon-magenta);
    border: 1px solid var(--neon-magenta);
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    text-transform: var(--heading-transform);
    letter-spacing: 2px;
    transition: all 0.15s;
}
.logout-button:hover {
    background: var(--neon-magenta);
    color: #ffffff;
}

/* Theme toggle button */
.theme-toggle {
    padding: 7px 12px;
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--panel-border);
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    transition: all 0.15s;
}
.theme-toggle:hover {
    border-color: var(--neon-magenta);
    color: var(--neon-magenta);
}

/* Theme toggle floating on auth screen (top-right) */
.auth-theme-toggle {
    position: absolute;
    top: 20px;
    right: 20px;
}

/* Responsive */
@media (max-width: 991px) {
    .body-wrapper {
        max-width: 200px;
    }
    .svg-container {
        gap: 10px;
        padding: 10px;
    }
    .add-spot-section {
        flex-basis: 240px;
        min-width: 240px;
    }
}

@media (max-width: 600px) {
    .svg-container {
        flex-direction: column;
        align-items: center;
    }
    .body-wrapper {
        max-width: 240px;
    }
    h1 { font-size: 20px; }
}