:root {
    --side-nav-width: 300px;
    --side-nav-gap: 10px;
    --app-bg-start: #f5f7fa;
    --app-bg-end: #c3cfe2;
    --shell-panel: #ecf0f1;
    --shell-border: #bdc3c7;
    --text-primary: #1f3245;
    --text-muted: #60788e;
    --panel-bg: #ffffff;
    --panel-border: #d9e2ea;
    --panel-shadow: 0 8px 20px rgba(26, 50, 74, 0.12);
    --map-border: #9cb2c6;
    --zone-event: #b56a15;
    --zone-road: #194f7d;
    --mission-active: #1f8a58;
    --sev-low: #2f9e44;
    --sev-medium: #d49408;
    --sev-high: #d95c00;
    --sev-critical: #bd2f2f;
}

html {
    height: 100%;
    overflow: hidden;
}

body {
    margin: 0;
    height: 100%;
    background: linear-gradient(135deg, var(--app-bg-start) 0%, var(--app-bg-end) 100%);
    font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    color: #2c3e50;
    overflow: hidden;
}

body.with-side-navbar {
    padding-left: calc(var(--side-nav-width) + var(--side-nav-gap));
    transition: padding-left 0.48s ease;
}

body.with-side-navbar.side-navbar-collapsed {
    padding-left: 0;
}

body.layout-map-viewer {
    padding-left: 0;
    background: #0f1a24;
}

.side-nav-handle {
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1085;
    width: 0.9rem;
    height: 4rem;
    background: rgba(46, 67, 87, 0.6);
    border-radius: 0 0.4rem 0.4rem 0;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    transition: width 0.18s ease, background 0.18s ease;
    touch-action: none;
}

.side-nav-handle:hover,
.side-nav-handle:active {
    width: 1.4rem;
    background: rgba(46, 67, 87, 0.92);
}

.side-nav-handle.side-nav-handle-expanded {
    width: 0.6rem;
    border-radius: 0 0.25rem 0.25rem 0;
    background: rgba(46, 67, 87, 0.45);
}

.side-nav-handle.side-nav-handle-expanded:hover {
    width: 0.9rem;
    background: rgba(46, 67, 87, 0.75);
}

.side-nav-handle-grip {
    width: 60%;
    height: 0.125rem;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 1px;
}

.side-nav-handle:hover .side-nav-handle-grip,
.side-nav-handle.side-nav-handle-expanded .side-nav-handle-grip {
    background: rgba(255, 255, 255, 0.85);
}

.side-navbar {
    position: fixed;
    top: 8px;
    left: 8px;
    bottom: 8px;
    width: var(--side-nav-width);
    display: flex;
    flex-direction: column;
    border-radius: 14px;
    border: 1px solid #233649;
    background: linear-gradient(180deg, #2e4357 0%, #223344 100%);
    color: #f5f8fb;
    box-shadow: 0 12px 28px rgba(23, 38, 53, 0.34);
    transform: translateX(0);
    transition: transform 0.6s ease;
    z-index: 1080;
}

body.side-navbar-collapsed .side-navbar {
    transform: translateX(calc(-100% - 8px));
}

.side-navbar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(208, 224, 236, 0.18);
}

.side-navbar-header .btn {
    --bs-btn-font-size: 0.68rem;
    --bs-btn-padding-y: 0.18rem;
    --bs-btn-padding-x: 0.42rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.side-navbar-brand {
    color: #eef4f9;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.side-navbar-brand:hover {
    color: #ffffff;
}

.side-brand-title {
    font-size: 0.96rem;
    font-weight: 800;
    letter-spacing: 0.03em;
}

.side-brand-subtitle {
    font-size: 0.69rem;
    color: #c8d7e4;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.side-navbar-user {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(208, 224, 236, 0.16);
}

.side-navbar-user-name {
    font-size: 0.84rem;
    font-weight: 700;
}

.side-navbar-user-role {
    margin-top: 2px;
    font-size: 0.73rem;
    color: #c7d5e1;
}

.side-navbar-menu {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 8px;
}

.side-nav-link {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 5px;
    padding: 7px 9px;
    border-radius: 9px;
    border: 1px solid transparent;
    background: #1a2332;
    color: #ffffff;
    text-decoration: none;
    font-size: 0.83rem;
    font-weight: 600;
}

.side-nav-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: rgba(198, 219, 235, 0.65);
    flex-shrink: 0;
}

.side-nav-link:hover {
    color: #ffffff;
    border-color: #b2c8da;
    background: #2a3446;
}

.side-nav-link.active {
    color: #ffffff;
    border-color: rgba(201, 221, 237, 0.45);
    background: linear-gradient(
        90deg,
        rgba(90, 122, 150, 0.55),
        rgba(54, 82, 106, 0.68)
    );
}

.side-nav-link.active .side-nav-dot {
    background: #f3c566;
}

.side-navbar-footer {
    padding: 10px;
    border-top: 1px solid rgba(208, 224, 236, 0.16);
}

.page-shell {
    width: auto;
    max-width: none;
    height: calc(100% - 16px);
    margin: 8px;
    box-sizing: border-box;
    background: var(--shell-panel);
    border: 1px solid var(--shell-border);
    border-radius: 12px;
    box-shadow: 0 0.25rem 0.6rem rgba(0, 0, 0, 0.1);
    padding: 10px;
    overflow-y: auto;
    overflow-x: hidden;
}

.page-shell-viewer {
    margin: 0;
    height: 100%;
    border: 0;
    border-radius: 0;
    padding: 0;
    background: #0f1a24;
    box-shadow: none;
    overflow: hidden;
}

.ops-header h2 {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.2rem;
}

.ops-header p {
    margin: 0.2rem 0 0;
    color: var(--text-muted);
    font-size: 0.84rem;
}

.ops-panel {
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: 11px;
    box-shadow: var(--panel-shadow);
    padding: 12px;
}

.ops-panel h3 {
    margin: 0 0 0.55rem;
    color: var(--text-primary);
    font-size: 0.93rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.stack-form .form-label {
    margin-bottom: 0.2rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: #2a3f52;
}

.stack-form .form-control,
.stack-form .form-select,
.stack-form textarea {
    border: 1px solid #b8c8d5;
    border-radius: 8px;
    font-size: 0.84rem;
}

.stack-form .form-control:focus,
.stack-form .form-select:focus,
.stack-form textarea:focus {
    border-color: #4f7091;
    box-shadow: 0 0 0 0.17rem rgba(79, 112, 145, 0.2);
}

.stat-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.ds-stat-item {
    min-width: 84px;
    padding: 6px 8px;
    border: 1px solid #d6e0e8;
    border-radius: 8px;
    background: #f8fbfd;
    display: flex;
    flex-direction: column;
}

.ds-stat-value {
    color: #15334c;
    font-size: 1.05rem;
    font-weight: 800;
}

.ds-stat-label {
    color: #5f7890;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.ds-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: 0.69rem;
    font-weight: 700;
    border: 1px solid transparent;
}

.ds-badge-open {
    background: #d8f6e4;
    border-color: #8ad9a8;
    color: #17613c;
}

.ds-badge-closed {
    background: #fde1e1;
    border-color: #f0aaaa;
    color: #8d1f1f;
}

.ds-badge-pending {
    background: #fff3ce;
    border-color: #efd37a;
    color: #7e5b00;
}

.ds-badge-dispatched,
.ds-badge-info {
    background: #dce8ff;
    border-color: #abc2f8;
    color: #26478e;
}

.ds-badge-active {
    background: #d6f6e3;
    border-color: #82d7a8;
    color: #1d7046;
}

.ds-badge-inactive {
    background: #e9edf2;
    border-color: #c8d0d9;
    color: #4e5e6d;
}

.ds-badge-sev-low {
    background: #d9f8e3;
    color: #17653a;
}

.ds-badge-sev-medium {
    background: #fff4cf;
    color: #7a5a00;
}

.ds-badge-sev-high {
    background: #ffe7d7;
    color: #8b3a00;
}

.ds-badge-sev-critical {
    background: #ffdada;
    color: #8d1f1f;
}

.table thead th {
    background: #e7edf2;
    color: #30485f;
    font-size: 0.71rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.table td {
    font-size: 0.79rem;
    color: #2f4559;
}

.module-layout {
    display: grid;
    grid-template-columns: 390px 1fr;
    gap: 10px;
    align-items: stretch;
    min-height: 100%;
}

.module-side {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
    overflow-y: auto;
    padding-right: 2px;
}

.module-main {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    min-height: 0;
}

.toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    padding: 0.42rem 0.58rem;
    border: 1px solid #aeb9c3;
    border-radius: 9px;
    background: #dfe6eb;
}

.toolbar-label {
    margin-right: 0.2rem;
    color: #1f3245;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.module-map {
    width: 100%;
    height: calc(100vh - 95px);
    min-height: 430px;
    border: 1px solid var(--map-border);
    border-radius: 11px;
    box-shadow: var(--panel-shadow);
    background: #cfdbe5;
}

.dashboard-live {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 100%;
}

.dashboard-live-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid #c4d2de;
    border-radius: 10px;
    background: linear-gradient(90deg, #eef4f8 0%, #dee8f1 100%);
}

.dashboard-live-title h2 {
    margin: 0;
    color: #16344b;
    font-size: 1.18rem;
}

.dashboard-live-title p {
    margin: 0.2rem 0 0;
    color: #4f6a80;
    font-size: 0.8rem;
    max-width: 48rem;
}

.dashboard-live-actions {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.dashboard-live-grid {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 10px;
    flex: 1 1 auto;
    min-height: 0;
}

.dashboard-side {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
    overflow-y: auto;
    padding-right: 2px;
}

.dashboard-map-wrap {
    min-height: 0;
    border-radius: 11px;
    overflow: hidden;
    border: 1px solid var(--map-border);
    background: #cfdbe5;
    box-shadow: var(--panel-shadow);
}

.dashboard-map {
    width: 100%;
    height: 100%;
    min-height: 520px;
}

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}

.kpi-item {
    border: 1px solid #d5e0e9;
    border-radius: 8px;
    background: #f8fbfd;
    padding: 0.45rem 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.kpi-label {
    font-size: 0.67rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #5b7690;
    font-weight: 700;
}

.kpi-value {
    font-size: 1.03rem;
    font-weight: 800;
    color: #16344b;
}

.quick-module-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
}

.quick-module-link {
    text-decoration: none;
    color: #143a5f;
    border: 1px solid #c9d8e5;
    border-radius: 8px;
    padding: 0.4rem 0.48rem;
    font-size: 0.77rem;
    font-weight: 700;
    background: #f4f8fb;
}

.quick-module-link:hover {
    background: #ffffff;
    border-color: #8fafcc;
    color: #0f4b80;
}

.map-layer-toggle-group {
    display: grid;
    gap: 0.45rem;
}

.map-layer-toggle-item {
    display: flex;
    align-items: center;
    gap: 0.52rem;
    font-size: 0.77rem;
    color: #254660;
    padding: 0.28rem 0.32rem;
    border: 1px solid #d5e0e9;
    border-radius: 8px;
    background: #f8fbfd;
}

.map-layer-toggle-item .form-check-input {
    margin: 0;
}

.feed-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.5rem;
}

.compact-feed {
    max-height: 210px;
    overflow-y: auto;
}

.feed-list li {
    border: 1px solid #d9e2ea;
    border-radius: 9px;
    background: #f8fbfd;
    padding: 0.45rem 0.52rem;
}

.feed-title {
    display: block;
    color: #16344b;
    font-size: 0.78rem;
    font-weight: 800;
}

.feed-meta {
    display: block;
    margin-top: 0.16rem;
    color: #5f7890;
    font-size: 0.7rem;
}

.empty-state {
    color: #2f4d68;
    font-size: 0.76rem;
    border: 1px dashed #c8d5e1;
    border-radius: 8px;
    background: #f7fafd;
    padding: 0.45rem 0.52rem;
}

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

.legend-list li {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    color: #2c4358;
    font-size: 0.77rem;
}

.legend-swatch {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.22);
    display: inline-block;
    flex-shrink: 0;
}

.legend-swatch.sev-critical {
    background: var(--sev-critical);
}

.legend-swatch.sev-high {
    background: var(--sev-high);
}

.legend-swatch.mission-active {
    background: var(--mission-active);
}

.legend-swatch.zone-event {
    background: rgba(181, 106, 21, 0.4);
}

.legend-swatch.zone-road {
    background: rgba(25, 79, 125, 0.35);
}

.mission-map-icon {
    width: 16px;
    height: 16px;
    border-radius: 999px;
    border: 2px solid #ffffff;
    box-shadow: 0 0 0 1px rgba(21, 43, 61, 0.55);
}

.mission-map-icon.status-assigned {
    background: #3a7dd8;
}

.mission-map-icon.status-en_route,
.mission-map-icon.status-on_site {
    background: var(--mission-active);
}

.mission-map-icon.status-blocked {
    background: #d59f0b;
}

.mission-map-icon.status-completed,
.mission-map-icon.status-cancelled {
    background: #7f8d98;
}

.map-viewer-shell {
    position: relative;
    width: 100%;
    height: 100%;
}

.map-viewer-map {
    width: 100%;
    height: 100%;
}

.map-viewer-overlay {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 800;
    background: rgba(17, 31, 43, 0.74);
    border: 1px solid rgba(210, 224, 235, 0.22);
    border-radius: 10px;
    color: #eff6fb;
    padding: 0.55rem 0.62rem;
    backdrop-filter: blur(2px);
    max-width: min(92vw, 420px);
}

.map-viewer-overlay h1 {
    margin: 0;
    font-size: 1rem;
    letter-spacing: 0.02em;
}

.map-viewer-overlay p {
    margin: 0.2rem 0 0.45rem;
    color: #d4e4ef;
    font-size: 0.73rem;
}

.map-viewer-kpis {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.35rem;
}

.map-viewer-kpi {
    border: 1px solid rgba(191, 211, 226, 0.3);
    border-radius: 7px;
    background: rgba(12, 26, 38, 0.56);
    padding: 0.3rem 0.4rem;
}

.map-viewer-kpi-label {
    display: block;
    font-size: 0.6rem;
    text-transform: uppercase;
    color: #bad0df;
    letter-spacing: 0.06em;
}

.map-viewer-kpi-value {
    display: block;
    margin-top: 0.05rem;
    color: #f3f8fb;
    font-size: 0.86rem;
    font-weight: 800;
}

.module-page {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ds-panel-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.mobile-board {
    max-width: 860px;
    margin: 0 auto;
}

.mobile-ops-shell {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 980px;
    margin: 0 auto;
}

.mobile-ops-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    border: 1px solid #c4d2de;
    border-radius: 10px;
    background: linear-gradient(90deg, #eef4f8 0%, #dee8f1 100%);
    padding: 10px;
}

.mobile-ops-heading h2 {
    margin: 0;
    color: #15334c;
    font-size: 1.1rem;
}

.mobile-ops-heading p {
    margin: 0.26rem 0 0;
    color: #456781;
    font-size: 0.8rem;
}

.mobile-ops-badges {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 160px;
}

.mobile-ops-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mobile-map-panel,
.mobile-survey-panel {
    grid-column: 1 / -1;
}

.mobile-map-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
}

.mobile-map {
    width: 100%;
    height: 300px;
    border: 1px solid var(--map-border);
    border-radius: 10px;
    background: #cfdbe5;
    box-shadow: var(--panel-shadow);
}

.mobile-location-readout {
    margin: 0.45rem 0 0;
    color: #3d607b;
    font-size: 0.75rem;
    font-weight: 600;
}

.water-level-button-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.water-level-fieldset {
    margin: 0;
    padding: 0;
    border: 0;
}

.water-level-btn {
    min-width: 74px;
    font-weight: 700;
}

.water-level-btn.active {
    color: #ffffff;
    background: #1f5f95;
    border-color: #1f5f95;
}

.water-level-help {
    margin: 0.4rem 0 0.45rem;
    color: #3f607b;
    font-size: 0.74rem;
    font-weight: 600;
}

.mobile-task-feed {
    max-height: 240px;
    overflow-y: auto;
}

.login-page {
    min-height: calc(100vh - 36px);
    display: grid;
    place-items: center;
    padding: 1rem;
}

.login-card {
    width: min(460px, 94vw);
    border: 1px solid #d2dee8;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 16px 36px rgba(17, 37, 55, 0.18);
    padding: 1.3rem;
}

.login-title {
    margin: 0;
    color: #17374e;
    font-weight: 800;
}

.login-subtitle {
    margin-top: 0.25rem;
    color: #5f7890;
    font-size: 0.84rem;
}

.leaflet-popup-content-wrapper {
    border-radius: 9px;
}

.leaflet-popup-content {
    margin: 0.5rem 0.65rem;
    font-size: 0.79rem;
    color: #15334c;
}

@media (max-width: 1200px) {
    .dashboard-live-grid {
        grid-template-columns: 320px 1fr;
    }

    .module-layout {
        grid-template-columns: 350px 1fr;
    }
}

@media (max-width: 992px) {
    html,
    body {
        height: auto;
        min-height: 100%;
        overflow: auto;
    }

    body.with-side-navbar {
        padding-left: 0;
    }

    .side-navbar {
        top: 0;
        left: 0;
        bottom: 0;
        width: min(88vw, var(--side-nav-width));
        border-radius: 0;
    }

    body.side-navbar-collapsed .side-navbar {
        transform: translateX(calc(-100% - 2px));
    }

    .page-shell {
        margin: 0;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
        height: auto;
        min-height: 100vh;
        padding: 0.65rem;
    }

    .dashboard-live-grid,
    .module-layout,
    .ds-panel-grid,
    .quick-module-links {
        grid-template-columns: 1fr;
    }

    .mobile-ops-header {
        flex-direction: column;
    }

    .mobile-ops-badges {
        min-width: 0;
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .mobile-ops-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-map {
        min-height: 58vh;
    }

    .module-map {
        height: 56vh;
        min-height: 320px;
    }

    .mobile-map {
        height: 48vh;
        min-height: 280px;
    }

    .map-viewer-overlay {
        max-width: calc(100vw - 20px);
    }

    .map-viewer-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}