@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Inter:wght@400;500;600&display=swap');

:root {
    --bg:        #0a0e14;
    --panel:     #10161f;
    --grid:      #1c2733;
    --border:    #23303d;
    --text:      #dfe6ec;
    --muted:     #6b7785;
    --accent:    #4fd1c5;   /* radar-scope teal */
    --accent-dim:#2c5c57;
    --alert:     #f5a623;   /* SOS amber */
    --danger:    #e5484d;
}

[data-theme="light"] {
    --bg:        #f3f5f7;
    --panel:     #ffffff;
    --grid:      #e2e7eb;
    --border:    #d3dae0;
    --text:      #17212b;
    --muted:     #5b6b78;
    --accent:    #0e8f83;
    --accent-dim:#d3f3ef;
    --alert:     #c2740a;
    --danger:    #cf3b40;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    height: 100%;
    background: var(--bg);
    color: var(--text);
    font-family: 'Inter', system-ui, sans-serif;
    background-image:
        linear-gradient(var(--grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid) 1px, transparent 1px);
    background-size: 28px 28px;
}

.mono { font-family: 'IBM Plex Mono', monospace; }

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

/* ---------- Auth screens ---------- */
.auth-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.auth-card {
    width: 100%;
    max-width: 380px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 32px 28px;
    position: relative;
    overflow: hidden;
}

.auth-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
}

.eyebrow {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.18em;
    color: var(--accent);
    text-transform: uppercase;
    margin: 0 0 6px;
}

.auth-card h1 {
    font-size: 22px;
    margin: 0 0 24px;
    font-weight: 600;
}

label {
    display: block;
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 6px;
    font-family: 'IBM Plex Mono', monospace;
}

input[type=text], input[type=password] {
    width: 100%;
    background: #0d1319;
    border: 1px solid var(--border);
    border-radius: 3px;
    color: var(--text);
    padding: 10px 12px;
    font-size: 14px;
    margin-bottom: 16px;
    font-family: 'IBM Plex Mono', monospace;
}
input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent);
}

button, .btn {
    width: 100%;
    background: var(--accent);
    color: #04201d;
    border: none;
    border-radius: 3px;
    padding: 11px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    letter-spacing: 0.02em;
}
button:hover, .btn:hover { background: #6fe0d5; }

.error {
    background: rgba(229, 72, 77, 0.12);
    border: 1px solid var(--danger);
    color: #ffb3b5;
    padding: 10px 12px;
    border-radius: 3px;
    font-size: 13px;
    margin-bottom: 16px;
}

.switch-link {
    text-align: center;
    margin-top: 18px;
    font-size: 13px;
    color: var(--muted);
}

/* ---------- Dashboard ---------- */
.topbar {
    min-height: 56px;
    flex-shrink: 0;
    flex-wrap: wrap;
    row-gap: 6px;
    background: var(--panel);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 20px;
}

.brand {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 600;
    letter-spacing: 0.08em;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.brand .dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 8px var(--accent);
}

.whoami {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
    color: var(--muted);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    row-gap: 6px;
}

.whoami .callsign { color: var(--text); }

.logout-link {
    color: var(--muted);
    text-decoration: none;
    border: 1px solid var(--border);
    padding: 5px 10px;
    border-radius: 3px;
    font-size: 12px;
}
.logout-link:hover { border-color: var(--accent); color: var(--accent); }

.theme-toggle-btn {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--muted);
    width: auto;
    padding: 5px 10px;
    border-radius: 3px;
    font-size: 14px;
    cursor: pointer;
    line-height: 1;
}
.theme-toggle-btn:hover { border-color: var(--accent); color: var(--accent); }

#map {
    height: 100%;
    width: 100%;
    background: #0a0e14;
}

.roster {
    position: absolute;
    top: 76px;
    right: 20px;
    width: 230px;
    background: rgba(16, 22, 31, 0.92);
    border: 1px solid var(--border);
    border-radius: 4px;
    z-index: 500;
    max-height: 60vh;
    overflow-y: auto;
}
.roster-head {
    padding: 10px 12px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--muted);
    border-bottom: 1px solid var(--border);
    text-transform: uppercase;
}
.roster-item {
    padding: 9px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    border-bottom: 1px solid var(--grid);
}
.roster-item:last-child { border-bottom: none; }
.roster-item .blip {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
    animation: pulse 1.6s infinite;
}
.roster-item .meta { color: var(--muted); font-size: 11px; margin-left: auto; font-family: 'IBM Plex Mono', monospace; }

@keyframes pulse {
    0%   { box-shadow: 0 0 0 0 rgba(79, 209, 197, 0.6); }
    70%  { box-shadow: 0 0 0 7px rgba(79, 209, 197, 0); }
    100% { box-shadow: 0 0 0 0 rgba(79, 209, 197, 0); }
}

.leaflet-popup-content-wrapper {
    background: var(--panel);
    color: var(--text);
    border: 1px solid var(--border);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
}
.leaflet-popup-tip { background: var(--panel); }

.sos-button {
    position: absolute;
    bottom: 16px;
    right: 16px;
    z-index: 600;
    width: 64px; height: 64px;
    border-radius: 50%;
    background: var(--danger);
    color: #fff;
    border: 3px solid #fff2;
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.05em;
    box-shadow: 0 0 0 0 rgba(229, 72, 77, 0.6);
    animation: sos-pulse 2s infinite;
    cursor: pointer;
}
.sos-button:disabled { opacity: .6; cursor: default; animation: none; }
@keyframes sos-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(229, 72, 77, 0.55); }
    70%  { box-shadow: 0 0 0 16px rgba(229, 72, 77, 0); }
    100% { box-shadow: 0 0 0 0 rgba(229, 72, 77, 0); }
}

.sos-banners {
    position: absolute;
    top: 76px;
    left: 20px;
    z-index: 600;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 320px;
}
.sos-banner {
    background: rgba(229, 72, 77, 0.15);
    border: 1px solid var(--danger);
    color: #ffd9da;
    padding: 10px 12px;
    border-radius: 4px;
    font-size: 13px;
    font-family: 'IBM Plex Mono', monospace;
}
.sos-banner a { color: #fff; text-decoration: underline; }
.sos-banner button {
    display: block;
    margin-top: 6px;
    width: auto;
    background: transparent;
    border: 1px solid var(--danger);
    color: #ffd9da;
    padding: 4px 8px;
    font-size: 11px;
}
.sos-banner button:hover { background: var(--danger); color: #fff; }

.map-toggle {
    display: flex;
    border: 1px solid var(--border);
    border-radius: 4px;
    overflow: hidden;
}
.map-toggle-btn {
    width: auto;
    background: transparent;
    color: var(--muted);
    border: none;
    border-radius: 0;
    padding: 6px 12px;
    font-size: 12px;
    font-family: 'IBM Plex Mono', monospace;
    cursor: pointer;
}
.map-toggle-btn + .map-toggle-btn { border-left: 1px solid var(--border); }
.map-toggle-btn.active { background: var(--accent-dim); color: var(--accent); }
.map-toggle-btn:hover:not(.active) { color: var(--text); }

.event-map-frame {
    width: 100%;
    height: 100%;
    border: none;
}

.map-legend {
    position: absolute;
    bottom: 16px;
    left: 20px;
    z-index: 550;
    background: rgba(16, 22, 31, 0.92);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 10px 12px;
    font-size: 12px;
    max-width: 220px;
}
.legend-head {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 6px;
}
.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 0;
    color: var(--text);
}
.legend-swatch {
    width: 12px; height: 12px;
    border-radius: 3px;
    flex-shrink: 0;
    display: inline-block;
}

.icon-fab {
    position: absolute;
    z-index: 600;
    width: 48px; height: 48px;
    border-radius: 50%;
    background: var(--panel);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

.locate-me-button {
    bottom: 82px;
    right: 16px;
    border: 1px solid var(--accent);
    color: var(--accent);
}
.locate-me-button:hover { background: var(--accent-dim); }

.pin-button {
    bottom: 138px;
    right: 16px;
    border: 1px solid var(--border);
    color: var(--text);
}
.pin-button:hover { border-color: var(--accent); }

.pin-crosshair {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -100%);
    font-size: 34px;
    z-index: 650;
    pointer-events: none;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6));
}

.pin-confirm-bar {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 650;
    display: flex;
    gap: 8px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 8px;
}
.pin-confirm-bar .pin-modal-btn-secondary,
.pin-confirm-bar .pin-modal-btn-primary {
    flex: none;
    border-radius: 18px;
    padding: 8px 16px;
    font-size: 12px;
    font-family: 'IBM Plex Mono', monospace;
}
.pin-button.active { background: var(--accent); color: var(--bg); border-color: var(--accent); }

.pin-modal-backdrop {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    background: rgba(0,0,0,0.6);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.pin-modal {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 20px;
    width: 100%;
    max-width: 360px;
}
.pin-modal h3 {
    margin: 0 0 14px;
    font-size: 15px;
    color: var(--text);
    font-family: 'IBM Plex Mono', monospace;
}
.pin-category-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 14px;
}
.pin-category-btn {
    background: #0d1319;
    border: 2px solid var(--border);
    border-radius: 4px;
    color: var(--text);
    padding: 10px 6px;
    font-size: 12px;
    font-family: 'IBM Plex Mono', monospace;
    cursor: pointer;
    text-align: center;
}
.pin-category-btn.selected { background: var(--accent-dim); }
#pin-description {
    width: 100%;
    background: #0d1319;
    border: 1px solid var(--border);
    border-radius: 3px;
    color: var(--text);
    padding: 8px 10px;
    font-size: 13px;
    font-family: inherit;
    resize: vertical;
    min-height: 60px;
    margin-bottom: 14px;
    box-sizing: border-box;
}
.pin-modal-actions {
    display: flex;
    gap: 8px;
}
.pin-modal-btn-secondary, .pin-modal-btn-primary {
    flex: 1;
    padding: 10px;
    border-radius: 3px;
    font-size: 13px;
    cursor: pointer;
    border: 1px solid var(--border);
}
.pin-modal-btn-secondary { background: transparent; color: var(--muted); }
.pin-modal-btn-primary { background: var(--accent); color: var(--bg); border-color: var(--accent); font-weight: 600; }
.pin-modal-btn-primary:disabled { opacity: .4; cursor: default; }

.status-line {
    position: absolute;
    bottom: 16px;
    left: 20px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    color: var(--muted);
    z-index: 500;
    background: rgba(16, 22, 31, 0.85);
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 3px;
}
.status-line .live { color: var(--accent); }