/* Small custom layer on top of Pico.css (loaded from a CDN in the HTML
   files) - just enough to lay out the dashboard header and make the map
   fill the remaining viewport, plus the login page's centering. Pico
   handles all typography/form/button styling on its own. */

.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-card {
    width: 100%;
    max-width: 24rem;
}

.error-text {
    color: var(--pico-form-element-invalid-active-border-color, #d32f2f);
}

/* The dashboard page uses the full viewport height, with the header
   taking whatever space it needs and the map filling the rest - this is
   what lets the map be usably large on a phone without a fixed pixel
   height that's wrong for every screen size. */
html, body {
    height: 100%;
    margin: 0;
}

body:has(#map) {
    display: flex;
    flex-direction: column;
}

.dashboard-header {
    padding: 0.75rem 1rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.5rem;
}

.dashboard-header h1 {
    margin: 0;
    font-size: 1.25rem;
    flex: 1 1 auto;
}

.header-controls {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.header-controls select,
.header-controls button {
    margin: 0;
    width: auto;
}

.status-line {
    margin: 0;
    flex-basis: 100%;
    font-size: 0.9rem;
    opacity: 0.8;
}

#map {
    flex: 1 1 auto;
    min-height: 60vh;
}

/* On narrow screens, stack the header controls under the title instead
   of letting them get cramped onto one line. */
@media (max-width: 600px) {
    .dashboard-header {
        padding: 0.5rem 0.75rem;
    }

    .header-controls {
        flex-basis: 100%;
        justify-content: space-between;
    }
}