:root {
    color-scheme: light;
    font-family: Tahoma, "Segoe UI", sans-serif;
    color: #19363c;
    background: #eef5f4;
}

* {
    box-sizing: border-box;
}

html,
body {
    min-height: 100%;
    margin: 0;
}

body {
    min-height: 100dvh;
}

button,
input {
    font: inherit;
}

.login-page {
    display: grid;
    min-height: 100dvh;
    place-items: center;
    padding: 22px;
    background:
        radial-gradient(circle at 15% 15%, rgba(42, 157, 143, .18), transparent 34%),
        linear-gradient(145deg, #eef8f5, #e7eff4);
}

.login-shell {
    width: min(100%, 430px);
}

.login-card {
    padding: 36px 34px;
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: 24px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 22px 60px rgba(24, 64, 75, .15);
    text-align: right;
}

.brand-mark {
    display: grid;
    width: 54px;
    height: 54px;
    place-items: center;
    border-radius: 16px;
    background: linear-gradient(145deg, #0f766e, #115e59);
    color: #fff;
    font-size: 25px;
    font-weight: 800;
    box-shadow: 0 8px 17px rgba(15, 118, 110, .23);
}

.brand-mark.small {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    font-size: 17px;
    box-shadow: none;
}

.eyebrow {
    margin: 21px 0 4px;
    color: #0f766e;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .06em;
    direction: ltr;
    text-align: right;
}

.login-card h1 {
    margin: 0;
    color: #17363d;
    font-size: 25px;
    line-height: 1.7;
}

.login-description {
    margin: 7px 0 25px;
    color: #70868b;
    font-size: 13px;
    line-height: 1.9;
}

.login-form {
    display: grid;
    gap: 17px;
}

.field {
    display: grid;
    gap: 7px;
}

.field label {
    color: #3d5b62;
    font-size: 13px;
    font-weight: 700;
}

.field input {
    width: 100%;
    border: 1px solid #d3e1e0;
    border-radius: 11px;
    outline: 0;
    padding: 12px 13px;
    background: #fbfdfd;
    color: #19363c;
    direction: ltr;
    text-align: left;
    transition: border-color .18s, box-shadow .18s;
}

.field input:focus {
    border-color: #2a9d8f;
    box-shadow: 0 0 0 4px rgba(42, 157, 143, .12);
}

.primary-button,
.logout-button {
    cursor: pointer;
    border: 0;
    border-radius: 11px;
    font-weight: 800;
    transition: transform .18s, box-shadow .18s, background .18s;
}

.primary-button {
    margin-top: 4px;
    padding: 13px 16px;
    background: #0f766e;
    color: #fff;
    box-shadow: 0 9px 20px rgba(15, 118, 110, .2);
}

.primary-button:hover {
    background: #0b625c;
    box-shadow: 0 12px 24px rgba(15, 118, 110, .28);
    transform: translateY(-1px);
}

.form-alert,
.field-error {
    color: #b42318;
}

.form-alert {
    margin: 0 0 17px;
    border: 1px solid #f3c5c1;
    border-radius: 10px;
    padding: 10px 12px;
    background: #fff5f4;
    font-size: 12px;
    line-height: 1.8;
}

.form-alert ul {
    padding: 0 18px 0 0;
}

.field-error {
    font-size: 11px;
}

.dashboard-page {
    overflow: hidden;
    background: #dce8e8;
}

.topbar {
    position: relative;
    z-index: 20;
    display: flex;
    height: 68px;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 10px max(18px, env(safe-area-inset-right)) 10px max(18px, env(safe-area-inset-left));
    border-bottom: 1px solid #d6e5e3;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 5px 17px rgba(21, 57, 65, .1);
}

.topbar-brand,
.topbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.topbar-brand > div {
    display: grid;
    gap: 2px;
}

.topbar-brand strong {
    color: #17363d;
    font-size: 14px;
    direction: ltr;
    text-align: right;
}

.topbar-brand span:not(.brand-mark) {
    color: #789096;
    font-size: 10px;
}

.user-label {
    color: #637a80;
    font-size: 11px;
}

.logout-button {
    padding: 8px 13px;
    background: #edf5f4;
    color: #0f766e;
    font-size: 11px;
}

.logout-button:hover {
    background: #dff0ed;
}

.dashboard-main {
    position: relative;
    height: calc(100dvh - 68px);
    min-height: 0;
}

#map {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: #dce8e8;
}

.map-info-card {
    position: absolute;
    z-index: 5;
    top: 15px;
    right: 15px;
    display: grid;
    gap: 9px;
    min-width: 245px;
    border: 1px solid rgba(255, 255, 255, .84);
    border-radius: 14px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, .91);
    box-shadow: 0 8px 22px rgba(20, 57, 64, .16);
    backdrop-filter: blur(8px);
    pointer-events: none;
}

.map-info-heading {
    display: flex;
    align-items: center;
    gap: 9px;
}

.map-pin {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 9px;
    background: #dff3ef;
    color: #0f766e;
    font-size: 20px;
}

.map-info-heading div {
    display: grid;
    gap: 3px;
}

.map-info-heading strong {
    color: #17363d;
    font-size: 12px;
}

.map-info-heading span {
    color: #6d858a;
    font-size: 10px;
}

#map-status[data-state="ready"] {
    color: #17745e;
}

#map-status[data-state="error"] {
    color: #b42318;
}

.cache-badge {
    width: max-content;
    border-radius: 999px;
    padding: 5px 8px;
    background: #edf7f2;
    color: #287055;
    font-size: 9px;
    font-weight: 800;
}

.maplibregl-ctrl-top-left {
    top: 15px;
    left: 15px;
    right: auto;
}

.maplibregl-ctrl-group {
    overflow: hidden;
    border: 1px solid rgba(24, 65, 71, .14);
    border-radius: 11px;
    box-shadow: 0 7px 18px rgba(18, 52, 59, .16);
}

.maplibregl-ctrl-group button {
    width: 34px;
    height: 34px;
}

.maplibregl-ctrl-attrib {
    direction: ltr;
    font-size: 10px;
}

@media (max-width: 600px) {
    .topbar {
        height: 62px;
        padding-right: 11px;
        padding-left: 11px;
    }

    .dashboard-main {
        height: calc(100dvh - 62px);
    }

    .topbar-brand span:not(.brand-mark),
    .user-label {
        display: none;
    }

    .map-info-card {
        top: 11px;
        right: 11px;
        min-width: 0;
        max-width: calc(100vw - 80px);
        padding: 9px 10px;
    }

    .map-info-heading strong {
        font-size: 11px;
    }

    .maplibregl-ctrl-top-left {
        top: auto;
        bottom: max(13px, env(safe-area-inset-bottom));
        left: 10px;
    }

    .login-card {
        padding: 29px 23px;
    }
}