/* =========================
   OnPoint (locate) — Styles
   ========================= */

/* ---------- Theme tokens ---------- */
:root {
    --panel-bg: rgba(255,255,255,.95);
    --panel-shadow: 0 10px 30px rgba(0,0,0,.12);
    --muted: #64748b;
    --ok: #16a34a;
    --warn: #f59e0b;
    --err: #ef4444;
    --brand: #2563eb;
}

/* ---------- Base ---------- */
html, body {
    height: 100%;
    margin: 0;
    font: 14px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif;
    color: #111827;
    background: #0b1220;
}

/* App container (revealed after auth) */
#app {
    display: none;
    position: fixed;
    inset: 0;
}

/* Map fills app */
#map {
    height: 100%;
}

/* ---------- Panel ---------- */
.panel {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 1000;
    background: var(--panel-bg);
    backdrop-filter: saturate(140%) blur(3px);
    padding: 12px 14px;
    border-radius: 14px;
    box-shadow: var(--panel-shadow);
    border: 1px solid rgba(0,0,0,.06);
    max-width: 520px;
}

    .panel h1 {
        margin: 0 0 8px 0;
        font-size: 16px;
        font-weight: 700;
    }

/* Tiny UI bits */
.row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.tiny {
    font-size: 12px;
    color: var(--muted);
}

.pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 999px;
    background: #f3f4f6;
}

/* Status dot */
.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--warn);
    box-shadow: 0 0 0 2px #fff inset;
}

    .dot.ok {
        background: var(--ok);
    }

    .dot.err {
        background: var(--err);
    }

/* Log panel */
#log {
    margin-top: 8px;
    max-height: 160px;
    overflow: auto;
    font-size: 12px;
    background: #f8fafc;
    padding: 8px;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
}

/* ---------- Controls (2 columns, buttons under checkboxes) ---------- */
.controls {
    margin-top: 8px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.control-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.controls label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

/* Base button */
.btn {
    border: 1px solid #e5e7eb;
    background: #fff;
    padding: 6px 10px;
    border-radius: 10px;
    cursor: pointer;
    transition: box-shadow .15s ease, transform .05s ease;
}

    .btn:hover {
        box-shadow: 0 6px 16px rgba(0,0,0,.08);
    }

    .btn:active {
        transform: translateY(1px);
    }

/* Green action buttons */
.btn-green {
    width: 100%;
    background: linear-gradient(90deg, #16a34a, #22c55e);
    border: none;
    color: #fff;
    font-weight: 600;
    box-shadow: 0 6px 16px rgba(34,197,94,.3);
    transition: transform .05s ease, box-shadow .15s ease;
    padding: 8px 0;
    border-radius: 10px;
}

    .btn-green:hover {
        box-shadow: 0 8px 20px rgba(34,197,94,.45);
    }

    .btn-green:active {
        transform: translateY(1px);
    }

/* Logout full width */
.logout-btn {
    grid-column: span 2;
    width: 100%;
    background: linear-gradient(90deg, #ef4444, #dc2626);
    color: #fff;
    border: none;
    margin-top: 6px;
    font-weight: 600;
    transition: transform .05s ease, box-shadow .15s ease;
    box-shadow: 0 6px 16px rgba(239,68,68,.3);
    padding: 8px 0;
    border-radius: 10px;
}

    .logout-btn:hover {
        box-shadow: 0 8px 20px rgba(239,68,68,.45);
    }

    .logout-btn:active {
        transform: translateY(1px);
    }

/* ---------- Login overlay ---------- */
.card, .card * {
    box-sizing: border-box;
}

.gate {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    z-index: 2000;
    background: radial-gradient(60vw 60vw at 20% 10%, rgba(37,99,235,.25), transparent 60%), radial-gradient(60vw 60vw at 80% 90%, rgba(99,102,241,.18), transparent 60%), #0b1220;
}

.card {
    width: min(94vw, 420px);
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.2);
    box-shadow: 0 20px 60px rgba(0,0,0,.35);
    backdrop-filter: blur(14px) saturate(140%);
    color: #e5e7eb;
    padding: 22px;
    border-radius: 16px;
}

/* Centered logo (image only, no box) */
.brand.centered-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 12px;
}

.plain-logo {
    max-width: 120px;
    height: auto;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
}

/* “Please sign in” text */
.signin-subtitle {
    text-align: center;
    font-size: 13px;
    color: #cbd5e1;
    margin: 0 0 18px 0;
    letter-spacing: .2px;
}

/* Form fields */
.field {
    display: grid;
    gap: 6px;
    margin-top: 14px;
}

.label {
    font-size: 12px;
    color: #cbd5e1;
}

.input {
    width: 100%;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.25);
    background: rgba(255,255,255,.08);
    color: #fff;
    outline: none;
}

    .input::placeholder {
        color: #94a3b8;
    }

/* Primary login button */
.primary {
    margin-top: 16px;
    width: 100%;
    background: linear-gradient(90deg, #2563eb, #3b82f6);
    border: none;
    color: #fff;
    padding: 10px 12px;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: transform .05s ease, box-shadow .15s ease;
    box-shadow: 0 10px 24px rgba(37,99,235,.35);
}

    .primary:active {
        transform: translateY(1px);
    }

/* Messages + hint (centered copyright in card) */
.error {
    margin-top: 10px;
    font-size: 12px;
    color: #fecaca;
    display: none;
}

.success {
    margin-top: 10px;
    font-size: 12px;
    color: #bbf7d0;
    display: none;
}

#loginForm .hint {
    text-align: center;
    font-size: 11px;
    color: #94a3b8;
    margin-top: 14px;
}

/* ---------- Map footer (shown after login) ---------- */
footer {
    position: fixed;
    bottom: 10px;
    right: 16px;
    z-index: 1000;
    font-size: 12px;
    color: #94a3b8;
    background: rgba(255,255,255,.85);
    backdrop-filter: blur(6px);
    padding: 4px 10px;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
    border: 1px solid rgba(0,0,0,.05);
    text-align: right;
    display: none; /* revealed by JS after auth */
}

/* ---------- (Optional) Responsive: stack controls on narrow panels ---------- */
@media (max-width: 380px) {
    .controls {
        grid-template-columns: 1fr;
    }

    .logout-btn {
        grid-column: span 1;
    }
}

/* --- Log toggle button row --- */
.log-section {
    display: flex;
    justify-content: flex-end;
    margin: .25rem 0;
}

/* Reuse your icon button look if you added it; otherwise: */
.icon-btn {
    border: none;
    background: transparent;
    font: inherit;
    cursor: pointer;
    line-height: 1;
    padding: .25rem .5rem;
    border-radius: .5rem;
}

    .icon-btn:focus-visible {
        outline: 2px solid #2563eb;
        outline-offset: 2px;
    }

/* --- Collapsible shell around the log --- */
/* Grid 1fr→0fr trick gives reliable height animation */
#logWrap.collapsible {
    display: grid;
    /* When expanded, let the log take up to ~24vh (tweak as you like) */
    grid-template-rows: minmax(0, 24vh);
    transition: grid-template-rows .25s ease, opacity .2s ease;
    opacity: 1;
}

    /* Fully collapsed */
    #logWrap.collapsible.is-collapsed {
        grid-template-rows: 0fr;
        opacity: 0;
        pointer-events: none;
    }

/* The actual log area scrolls, but can shrink to 0 during collapse */
#log {
    overflow: auto;
    min-height: 0; /* important inside CSS grid for collapsing */
}

/* Optional: small visual tweak so collapsed header is tight */
#logWrap.collapsible.is-collapsed + .controls {
    margin-top: .25rem;
}

/* ---------- Log toggle bar ---------- */
.log-toggle-bar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 0.5rem;
}

/* Styled toggle button */
.log-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: linear-gradient(180deg, #2563eb, #1d4ed8);
    color: white;
    font-weight: 500;
    font-size: 0.85rem;
    border: none;
    border-radius: 9999px; /* pill shape */
    padding: 0.35rem 0.9rem;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.1s ease;
}

    .log-toggle-btn:hover {
        background: linear-gradient(180deg, #1d4ed8, #1e40af);
    }

    .log-toggle-btn:active {
        transform: translateY(1px);
    }

    .log-toggle-btn:focus-visible {
        outline: 2px solid #60a5fa;
        outline-offset: 2px;
    }

    /* Small icon spacing */
    .log-toggle-btn .icon {
        font-size: 0.9rem;
        line-height: 1;
    }

/* ---------- Collapsible log container ---------- */
#logWrap.collapsible {
    display: grid;
    grid-template-rows: minmax(0, 20vh); /* tweak height as desired */
    transition: grid-template-rows 0.25s ease, opacity 0.2s ease;
    opacity: 1;
}

    #logWrap.collapsible.is-collapsed {
        grid-template-rows: 0fr;
        opacity: 0;
        pointer-events: none;
    }

#log {
    overflow: auto;
    min-height: 0;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 0.5rem;
}

/* ---------- Panel Header Layout ---------- */
.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

    .panel-header h1 {
        font-size: 1.25rem;
        margin: 0;
        flex: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

/* ---------- Log Toggle Button Styling ---------- */
.log-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: linear-gradient(180deg, #2563eb, #1d4ed8);
    color: #fff;
    font-weight: 500;
    font-size: 0.8rem;
    border: none;
    border-radius: 9999px;
    padding: 0.3rem 0.75rem;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.1s ease;
}

    .log-toggle-btn:hover {
        background: linear-gradient(180deg, #1d4ed8, #1e40af);
    }

    .log-toggle-btn:active {
        transform: translateY(1px);
    }

    .log-toggle-btn:focus-visible {
        outline: 2px solid #60a5fa;
        outline-offset: 2px;
    }

    .log-toggle-btn .icon {
        font-size: 0.9rem;
        line-height: 1;
    }

/* ---------- Collapsible Log Section ---------- */
#logWrap.collapsible {
    display: grid;
    grid-template-rows: minmax(0, 20vh);
    transition: grid-template-rows 0.25s ease, opacity 0.2s ease;
    opacity: 1;
}

    #logWrap.collapsible.is-collapsed {
        grid-template-rows: 0fr;
        opacity: 0;
        pointer-events: none;
    }

#log {
    overflow: auto;
    min-height: 0;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 0.5rem;
}