/* 100km-map-game/static/css/styles.css
   Basic layout and dark-mode adjustments for the 100km Map Game
*/

/* Page & Map layout */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family:
        system-ui,
        -apple-system,
        "Segoe UI",
        Roboto,
        "Helvetica Neue",
        Arial;
    color: #212529;
}

#map {
    width: 100%;
    height: calc(
        100vh - 56px
    ); /* leave space for top navbar/header in the page */
    min-height: 320px;
    display: block;
    position: relative;
}

/* Game panel that overlays the map (for alternate layouts) */
.game-panel {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 1400; /* above Leaflet controls */
    width: 360px;
    max-width: calc(100% - 24px);
    pointer-events: auto;
}

/* Card tweaks for compactness */
.game-panel .card {
    border-radius: 6px;
}
.game-panel .card-body {
    padding: 12px;
}

/* Small text helpers */
.small-note,
.i18n-note,
.footer-note {
    font-size: 0.85rem;
    color: #6c757d;
}

/* Score badge */
.score-badge {
    font-size: 1.05rem;
    padding: 0.35rem 0.6rem;
}

/* Leaflet container styling */
.leaflet-container {
    background: #ffffff;
}

/* Make Leaflet attribution and scale readable in the UI */
.leaflet-control-attribution,
.leaflet-control-scale-line {
    color: rgba(0, 0, 0, 0.6);
    font-size: 0.75rem;
}

/* Form controls adjustments for consistent look */
.form-control,
.form-select {
    border-radius: 4px;
}

/* Buttons spacing for compact UI */
.btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.85rem;
}

/* Result box */
#resultBox .alert {
    margin: 0;
    line-height: 1.25;
}

/* Winner card */
#winnerCard {
    margin-top: 0.4rem;
}

/* Responsive: on narrow viewports move the panel to the bottom and make it full-width */
@media (max-width: 767.98px) {
    .game-panel {
        position: fixed;
        left: 12px;
        right: 12px;
        bottom: 12px;
        top: auto;
        width: auto;
        max-width: calc(100% - 24px);
    }
    #map {
        height: calc(100vh - 160px); /* leave room for bottom panel */
    }
}

/* Dark mode overrides */
body.dark-mode {
    background-color: #0f1720;
    color: #e6eef6;
}

/* In dark mode, tone down card and form backgrounds */
body.dark-mode .card {
    background-color: #0b1320;
    border-color: rgba(255, 255, 255, 0.06);
    color: #dbe9ff;
}
body.dark-mode .card .card-title,
body.dark-mode .card .card-text,
body.dark-mode .card .small-note {
    color: #cfe3ff;
}
body.dark-mode .form-control,
body.dark-mode .form-select,
body.dark-mode .input-group-text {
    background-color: #071022;
    color: #dbe9ff;
    border-color: rgba(255, 255, 255, 0.06);
}
body.dark-mode .form-control::placeholder {
    color: rgba(255, 255, 255, 0.35);
}
body.dark-mode .btn-outline-secondary {
    color: #dbe9ff;
    border-color: rgba(255, 255, 255, 0.06);
}
body.dark-mode .btn-outline-secondary:hover {
    background-color: rgba(255, 255, 255, 0.02);
}

/* Leaflet map slight darkening tweak in dark mode (keeps tiles readable) */
body.dark-mode .leaflet-container {
    filter: brightness(0.92) saturate(0.9);
}

/* Leaflet controls color in dark mode */
body.dark-mode .leaflet-control-attribution,
body.dark-mode .leaflet-control-scale-line,
body.dark-mode .leaflet-control-zoom,
body.dark-mode .leaflet-control-container {
    color: rgba(255, 255, 255, 0.75);
}

/* make popups look nicer in both modes */
.leaflet-popup-content-wrapper {
    border-radius: 6px;
    font-size: 0.9rem;
}

/* small utility helpers */
.text-muted-compact {
    color: rgba(0, 0, 0, 0.55);
    font-size: 0.85rem;
}
body.dark-mode .text-muted-compact {
    color: rgba(255, 255, 255, 0.55);
}

/* Accessibility: focus outlines */
:focus {
    outline: 3px solid rgba(0, 123, 255, 0.18);
    outline-offset: 2px;
}

/* Minor helper for very small screens */
@media (max-width: 420px) {
    .game-panel {
        padding: 6px;
    }
    .game-panel .card-body {
        padding: 8px;
    }
    .score-badge {
        font-size: 0.95rem;
        padding: 0.25rem 0.45rem;
    }
}