/* The new world map page (/maps/world-v2). The site is dark (Bootstrap + Darkly); the map surface is deliberately a LIGHT card, because the shared
   renderer draws light tiles with dark labels (see wwwroot/js/maps/worldmap2.js). Controls follow the site's dark theme. */

.wm2 {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 0.5rem 2rem;
}

/* Until the index has loaded (or when it cannot be) there is nothing to control: show only the status line. */
.wm2:not(.wm2-ready) .wm2-controls,
.wm2:not(.wm2-ready) .wm2-legend,
.wm2-surface:empty {
    display: none;
}

.wm2-title {
    margin: 0.5rem 0 0.75rem;
    font-size: 1.6rem;
}

.wm2-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    align-items: flex-end;
    margin-bottom: 0.5rem;
    color-scheme: dark; /* native select popups and checkboxes follow the dark theme (TH-02) */
}

.wm2-field {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.2rem;
    min-width: 12rem;
}

.wm2-field label {
    font-size: 0.8rem;
    color: #adb5bd;
    text-align: left;
    margin: 0;
}

/* Buttons: readable in every state on the dark page (TH-03). Bootstrap's outline-secondary is dim grey on this theme. */
.wm2-zoom .btn {
    min-width: 2.4rem;
    color: #e9ecef;
    background: #2b333d;
    border: 1px solid #8a94a0;
}

.wm2-zoom .btn:hover:not(:disabled) {
    background: #3b4653;
    border-color: #c4ccd4;
}

.wm2-zoom .btn:active:not(:disabled) {
    background: #4a5764;
}

.wm2-zoom {
    flex-direction: row;
    gap: 0.35rem;
    min-width: 0;
}

.wm2-controls .form-select:focus-visible,
.wm2-controls .btn:focus-visible,
.wm2-surface:focus-visible,
.wm2-legend summary:focus-visible {
    outline: 2px solid #4da3ff;
    outline-offset: 2px;
}

.wm2-controls .btn:disabled,
.wm2-controls .form-select:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.wm2-controls .form-select {
    color: #e9ecef;
    background-color: #2b333d;
    border-color: #8a94a0;
}

.wm2-status {
    min-height: 1.5rem;
    margin: 0.25rem 0 0.5rem;
    color: #ced4da;
}

.wm2-main {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-start;
}

.wm2-surface {
    flex: 1 1 28rem;
    min-width: 0;
    min-height: 12rem;
    max-height: 70vh;
    overflow: auto; /* both directions: a large area scrolls inside the card */
    background: #f4f5f7;
    border: 1px solid #5b6470;
    border-radius: 6px;
    padding: 0.75rem;
    color: #222;
    color-scheme: light; /* a light surface gets light scrollbars (TH-01): the page is dark, the card is not */
    scrollbar-color: #8a94a0 #e3e6ea;
}

.wm2-surface svg {
    display: block;
    max-width: none;
}

.wm2-surface [data-area],
.wm2-surface [data-room] {
    cursor: pointer;
}

.wm2-surface [data-area]:hover,
.wm2-surface [data-room]:hover {
    stroke: #1f5fbf;
    stroke-width: 2;
}

.wm2-room {
    flex: 0 1 22rem;
    min-width: 14rem;
    background: #1f2731;
    border: 1px solid #5b6470;
    border-radius: 6px;
    padding: 0.75rem 1rem;
    max-height: 70vh;
    overflow: auto;
    color-scheme: dark;
    scrollbar-color: #6b7683 #1f2731;
}

.wm2-room-title {
    font-size: 1.1rem;
    margin: 0 0 0.4rem;
}

.wm2-room-desc {
    white-space: pre-line;
}

.wm2-muted {
    color: #adb5bd;
    font-size: 0.9rem;
    margin: 0.25rem 0;
}

.wm2-legend {
    margin-top: 1rem;
    color: #ced4da;
}

.wm2-legend ul {
    list-style: none;
    padding-left: 0;
    margin: 0.4rem 0 0;
    display: grid;
    gap: 0.25rem;
}

.wm2-legend svg {
    vertical-align: middle;
    background: #f4f5f7;
    border-radius: 2px;
    margin-right: 0.35rem;
}

.wm2-glyph {
    display: inline-block;
    min-width: 36px;
    text-align: center;
    margin-right: 0.35rem;
    color: #7a8190;
    font-weight: 600;
}

.wm2-credit {
    margin: 0 0 0.75rem;
    color: #adb5bd;
    font-size: 0.85rem;
}

.wm2-credit:empty {
    display: none;
}

@media (max-width: 600px) {
    .wm2-field {
        min-width: 0;
        flex: 1 1 8rem;
    }

    .wm2-surface,
    .wm2-room {
        max-height: 60vh;
    }
}

/* The terrain key: one swatch per terrain drawn on the floor (written by worldmap2-page.js), in a wrapping row above the line/mark legend. */
.wm2-legend ul.wm2-terrain-key {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    margin-bottom: 0.6rem;
}

.wm2-swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 0.35rem;
    vertical-align: middle;
    border: 1px solid #556;
    border-radius: 3px;
}

.wm2-legend ul.wm2-terrain-key[hidden] {
    display: none;
}

/* Floor controls: on-screen Up / Down buttons with the name of the floor between them, instead of a select. */
.wm2-floors .wm2-label {
    font-size: 0.8rem;
    color: #ced4da;
}

.wm2-floor-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.wm2-floor-name {
    min-width: 7rem;
    text-align: center;
    color: #f8f9fa;
}

/* The map is dragged to move: a hand over it, a closed hand while the button is down. */
.wm2-surface {
    cursor: grab;
}

.wm2-surface.wm2-dragging {
    cursor: grabbing;
    user-select: none;
}

.wm2-surface [data-room],
.wm2-surface [data-area],
.wm2-surface [data-stairs],
.wm2-surface [data-jump-to],
.wm2-surface [data-offpage-to] {
    cursor: pointer;
}

.wm2-hint {
    font-size: 0.8rem;
    color: #adb5bd;
    margin: 0 0 0.5rem;
}

.wm2-hint kbd {
    font-size: 0.75rem;
}

/* The floor buttons are easy to see when they can be used and dim when they cannot (the dark theme makes the default outline hard to read). */
.wm2-floors .btn:not(:disabled) {
    color: #f8f9fa;
    border-color: #9aa4b1;
}

.wm2-floors .btn:disabled {
    opacity: 0.35;
}