/*
 #081016; // black
 #0080D0; // blue
 #0060D0; // dark blue
 #FD5A00; // orange
 #4CAF50; // green
 #45a049; // dark green
 #f4f4f4; // background
*/

:root {
    --primary-color: #0070a0;
    --secondary-color: #0080b0;
    --background-color: #f4f4f4;
    --darkbackground-color: #081016;
    --text-color: #333;
    --error-color: #fd5a00;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    touch-action: manipulation;
    -ms-touch-action: manipulation;
    overflow: hidden;
}

body {
    font-family: 'Inter', system-ui, sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--darkbackground-color);
}

h1, h2, h3, h4, h5, h6 {
    font-family: inherit;
    font-weight: 500;
    letter-spacing: -0.02em;
}

h1 {
    font-size: 2.5rem;
    margin: 1rem 0;
    color: #e6edf3;
    display: flex;
    align-items: center;
    justify-content: center;
}

h1 i {
    margin-right: 0.75rem;
    color: #e6edf3;
}

.screen {
    min-height: 100vh;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 40px;
}

.hidden {
    display: none !important;
}

.login-container {
    width: 100%;
    max-width: 400px;
    margin-bottom: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
}

input[type="text"],
.login-container input[type="email"],
.login-container input[type="password"] {
    font-family: inherit;
    width: 100%;
    padding: 12px;
    border: 2px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
    transition: border-color 0.3s;
    background-color: rgba(255, 255, 255, 0.95);
}

.password-wrapper {
    position: relative;
    width: 100%;
}

.password-wrapper input[type="password"],
.password-wrapper input[type="text"] {
    padding-right: 44px;
}

.password-toggle {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 44px;
    background: none !important;
    border: none !important;
    border-radius: 0 4px 4px 0 !important;
    padding: 0 !important;
    color: #888 !important;
    font-size: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
}

.password-toggle:active,
.password-toggle:focus {
    outline: none;
    color: var(--primary-color) !important;
    background: none !important;
}

.login-error {
    color: #fff;
    background-color: #c62828;
    border: 1px solid #e53935;
    border-radius: 4px;
    padding: 10px 14px;
    width: 100%;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
}

button {
    background-color: var(--primary-color);
    color: white;
    padding: 12px 24px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.3s ease;
    /*width: 100%;*/
}

#map {
    width: 100%;
    height: calc(100vh - 60px); /* Account for header height */
    margin-bottom: 0;
}

.controls {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    background-color: transparent;
    pointer-events: none;
}

.controls button {
    position: absolute;
    z-index: 1001;
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.9);
    color: var(--primary-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    border-radius: 50%;
}

.controls button:disabled {
    background-color: rgba(255, 255, 255, 0.5);
    color: rgba(0, 0, 0, 0.3);
    cursor: not-allowed;
}

.controls button.disable {
    background-color: rgba(255, 255, 255, 0.5);
    color: rgba(0, 0, 0, 0.3);
    pointer-events: none;
}

/* Camera button styling */
#camera-btn {
    width: 72px;
    height: 72px;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    border: 3px solid #4CAF50; /* Green border by default when camera is available */
}

#camera-btn:disabled,
#camera-btn.disable {
    border-color: #cccccc; /* Gray border when camera is not available */
}

#camera-btn i {
    font-size: 48px;
}

/* Voice button styling */
#voice-btn {
    width: 48px;
    height: 48px;
    top: 80px; /* Account for header */
    left: 16px; /* Changed from 72px to remove gap */
}

#voice-btn i {
    font-size: 20px;
}

/* Notes button styling */
#notes-btn {
    width: 48px;
    height: 48px;
    top: 136px; /* Below the voice button (80px + 48px + 8px gap) */
    left: 16px; /* Same left position as voice button */
}

#notes-btn i {
    font-size: 20px;
}

/* Measurement button styling */
#measurement-btn {
    width: 48px;
    height: 48px;
    top: 80px; /* Account for header */
    left: 128px; /* Position it to the right of the notes button */
}

#measurement-btn i {
    font-size: 20px;
}

#camera-preview {
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    position: fixed;
    top: 0;
    left: 0;
    object-fit: cover;
}

#splash-screen {
    padding-top: 40px;
}

#splash-screen img {
    width: min(50vmin, 280px);
    height: min(50vmin, 280px);
    object-fit: contain;
    border-radius: 24%;
    margin-bottom: 1rem;
}

/*.camera-controls {
    display: flex;
    gap: 1rem;
    width: 100%;
    max-width: 600px;
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 1rem;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    pointer-events: auto;
}

.camera-controls button {
    flex: 1;
    position: relative;
    z-index: 1001;
    font-weight: bold;
}*/

#pwa-install {
    margin-top: 2rem;
}

@media (max-width: 600px) {
    .screen {
        padding: 10px;
    }

    h1 {
        font-size: 24px;
    }

    button {
        padding: 10px 20px;
    }
}

.app-header {
    width: 100%;
    padding: 0.5rem; /** 1rem*/
    background-color: var(--primary-color);
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
}

.app-header h2 {
    margin: 0;
    font-size: 1.5rem;
}

.user-avatar-btn {
    background: rgba(255,255,255,0.25);
    border: 2px solid rgba(255,255,255,0.7);
    color: white;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    min-width: 36px;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    letter-spacing: 0.5px;
    transition: background 0.15s;
    line-height: 1;
}

.user-avatar-btn:hover {
    background: rgba(255,255,255,0.4);
}

/* Profile modal sections */
.profile-section {
    padding: 0.9rem 1.25rem;
    border-bottom: 1px solid #e9ecef;
}

.profile-section:last-child {
    border-bottom: none;
}

.profile-identity {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.profile-avatar-large {
    background: var(--primary-color);
    color: white;
    border-radius: 50%;
    width: 52px;
    height: 52px;
    min-width: 52px;
    font-size: 1.1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.5px;
}

.profile-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-color);
}

.profile-email {
    font-size: 0.82rem;
    color: #666;
}

.profile-since {
    font-size: 0.78rem;
    color: #999;
    margin-top: 2px;
}

.profile-stat-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0;
    font-size: 0.88rem;
    color: var(--text-color);
}

.profile-offline {
    color: var(--error-color);
    font-weight: 500;
}

.profile-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.25rem 0;
    font-size: 0.85rem;
    color: var(--text-color);
}

.profile-info-label {
    font-weight: 500;
    color: #555;
}

.profile-zones-multi {
    align-items: flex-start;
}
.profile-zones-multi .profile-info-label {
    padding-top: 0.15rem;
}
.profile-zone-entry {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.35rem;
    line-height: 1.7;
    flex-wrap: wrap;
}
.profile-zone-badge {
    font-size: 0.68rem;
    font-weight: 500;
    background: #e9ecef;
    color: #555;
    border-radius: 3px;
    padding: 1px 5px;
    letter-spacing: 0.2px;
    white-space: nowrap;
}

.profile-password-error {
    color: var(--error-color);
    font-size: 0.8rem;
    margin-bottom: 0.4rem;
}

.menu-container {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
}

.menu-btn {
    background: none;
    border: none;
    color: white;
    font-size: 1.5rem;
    padding: 0.5rem;
    cursor: pointer;
    text-shadow: none; /* Remove any shadow if present */
}

.menu {
    position: absolute;
    top: 100%;
    right: 0;
    background-color: white;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    padding: 0.5rem;
    width: max-content;
    min-width: 168px;
}

.menu button {
    display: flex;
    align-items: center;
    width: 100%;
    text-align: left;
    padding: 0.5rem 1rem;
    background: none;
    border: none;
    color: var(--text-color);
    cursor: pointer;
    white-space: nowrap;
}

.menu button i {
    display: inline-block;
    width: 1.25em;
    margin-right: 0.5rem;
    text-align: center;
    color: var(--primary-color);
    flex-shrink: 0;
}

.menu button:hover {
    background-color: var(--background-color);
}

.menu-divider {
    border: none;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    margin: 4px 0;
}

#map-screen {
    background-color: var(--background-color);
    padding: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
}

#map-screen .app-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
}

#map-screen #map {
    margin-top: 60px; /* Height of the header */
}

/* Add padding to the bottom of the capture screen to ensure buttons don't overlap content */
#capture-screen {
    padding-bottom: 0; /* Remove extra padding since we're using fixed positioning */
    overflow: hidden; /* Prevent scrolling */
    height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Capture is inside #app; network / reconcile status bars are fixed on <body>
   at z-index 950. Without lifting the whole screen, capture/cancel (z-index
   1000 inside #app) paint underneath those bars and cannot be tapped. */
#capture-screen:not(.hidden) {
    position: fixed;
    inset: 0;
    z-index: 960;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}

.app-icon {
    width: 340px;
    height: 340px;
    object-fit: contain;
    display: block;
    margin-bottom: 2rem;
}


.button-container {
    display: flex;
    gap: 1rem;
    width: 100%;
}

.button-container button {
    flex: 1;
}

button:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
}

.disable {
    background-color: #cccccc !important;
    cursor: pointer;
}

#qr-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#qr-container button {
    width: 100%;
    max-width: 200px;
}

.close-btn {
    align-self: flex-end;
    width: 30px !important;
    height: 30px !important;
    border-radius: 50%;
    background-color: #f4f4f4;
    color: #333;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    margin: 0 !important;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.15s;
    flex: 0 0 auto !important;
    max-width: none !important;
}
.close-btn:hover  { background-color: #e0e0e0; }
.close-btn:active { background-color: #ccc; transform: scale(0.92); }

.item-window {
    position: relative;
    padding: 4px;
    max-width: 300px;
    display: flex;
    flex-direction: column;
}

.item-window img {
    width: 100%;
    height: auto;
    max-height: 256px;
    object-fit: contain;
    margin: 10px 0;
}

@media (max-width: 600px) {
    .app-icon {
        width: 300px;
        height: 300px;
    }
}
.sync-status {
    width: 32px;
    height: 32px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 10px;
    margin-right: 0;
}

.sync-indicator {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: #707070; /* Gray for default */
    transition: background-color 0.3s ease;
}

.sync-status.online .sync-indicator {
    background-color: #38d640; /* Green for online */
}

.sync-status.busy .sync-indicator {
    background-color: #FFC107; /* Yellow for busy */
    animation: pulse 0.5s infinite;
}

.sync-status.failed .sync-indicator {
    background-color: #F44336; /* Red for failed */
    animation: pulse 3s infinite;
}

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

@keyframes thinking {
    0% { background-color: rgba(255, 255, 255, 0.05); }
    50% { background-color: rgba(255, 255, 255, 0.2); }
    100% { background-color: rgba(255, 255, 255, 0.05); }
}

.status-bar {
    font-family: 'Roboto Mono', monospace;
    font-size: 0.85rem;
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    background-color: rgba(255, 255, 255, 0.05);
    margin: 0 1rem;
    letter-spacing: -0.02em;
    border: 2px solid transparent;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    white-space: nowrap;
}

.status-bar.accuracy-high {
    border-color: #4CAF50 !important;
    box-shadow: 0 0 5px #4CAF50;
    background-color: rgba(255, 255, 255, 0.1);
}

.status-bar.accuracy-medium {
    border-color: #FC8523 !important;
    box-shadow: 0 0 5px #FC8523;
    animation: thinking 3.5s ease-in-out infinite;
}

/* Stop the thinking animation when movement is detected */
.status-bar.movement-detected {
    animation: none !important;
    background-color: rgba(255, 255, 255, 0.1);
}

.status-bar.accuracy-low {
    border-color: #ee1000 !important;
    animation: borderBlinkLow 4s infinite;
    animation: thinking 2.5s ease-in-out infinite;
}

/* ── GPS Accuracy modal ─────────────────────────────────── */
.gps-modal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 480px;
    background: #fff;
    border-radius: 0.3rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5);
    padding: 0;
    z-index: 1000;
    font-family: inherit;
    overflow: hidden;
}
.gps-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #dee2e6;
}
.gps-modal-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--text-color);
    line-height: 1.5;
}
.gps-modal-body {
    padding: 1rem 1.25rem 1.25rem;
}
.gps-modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: #000;
    opacity: 0.5;
    cursor: pointer;
    padding: 0;
}
.gps-modal-close:hover {
    opacity: 0.75;
}

/* Reading card */
.gps-reading-card {
    border-radius: 10px;
    padding: 18px 16px 14px;
    text-align: center;
    margin-bottom: 22px;
    transition: background .35s, color .35s;
}
.gps-card-good    { background: #e8f5e9; }
.gps-card-warn    { background: #fff3e0; }
.gps-card-fail    { background: #ffebee; }
.gps-card-unknown { background: #f5f7fa; }

.gps-reading-val {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 4px;
    transition: color .35s;
}
.gps-card-good    .gps-reading-val { color: #2e7d32; }
.gps-card-warn    .gps-reading-val { color: #e65100; }
.gps-card-fail    .gps-reading-val { color: #c62828; }
.gps-card-unknown .gps-reading-val { color: #999; }

.gps-reading-unit {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #888;
    margin-bottom: 10px;
}
.gps-reading-status {
    display: inline-block;
    padding: 4px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .04em;
    transition: background .35s, color .35s;
}
.gps-card-good    .gps-reading-status { background: #c8e6c9; color: #1b5e20; }
.gps-card-warn    .gps-reading-status { background: #ffe0b2; color: #bf360c; }
.gps-card-fail    .gps-reading-status { background: #ffcdd2; color: #b71c1c; }
.gps-card-unknown .gps-reading-status { background: #e0e0e0; color: #666; }

/* Gauge */
.gps-gauge-wrap {
    position: relative;
    margin-bottom: 8px;
}
.gps-gauge-track {
    display: flex;
    height: 20px;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}
.gps-gauge-zone  { height: 100%; }
.gps-gzone-good  { flex: 12; background: linear-gradient(90deg,#43a047,#66bb6a); }
.gps-gzone-warn  { flex: 8;  background: linear-gradient(90deg,#fb8c00,#ffa726); }
.gps-gzone-fail  { flex: 15; background: linear-gradient(90deg,#e53935,#ef5350); }

/* Needle */
.gps-gauge-needle {
    position: absolute;
    top: -7px;
    width: 4px;
    height: 34px;
    background: var(--darkbackground-color);
    border-radius: 2px;
    transform: translateX(-50%);
    transition: left .4s cubic-bezier(.4,0,.2,1);
    pointer-events: none;
    z-index: 2;
}
.gps-gauge-needle::before {
    content: '';
    position: absolute;
    top: -7px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 8px solid var(--darkbackground-color);
}

/* Tick marks */
.gps-gauge-ticks {
    position: relative;
    margin-top: 5px;
    height: 16px;
    font-size: 11px;
    color: #888;
}
.gps-gauge-ticks > span:first-child { position: absolute; left: 0; }
.gps-gauge-ticks > span:last-child  { position: absolute; right: 0; }
.gps-tick-abs { position: absolute; transform: translateX(-50%); }

/* Zone labels under ticks */
.gps-gauge-zone-labels {
    display: flex;
    margin-top: 3px;
}
.gps-zlbl {
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.gps-zlbl-good { flex: 12; color: #2e7d32; }
.gps-zlbl-warn { flex: 8;  color: #e65100; }
.gps-zlbl-fail { flex: 15; color: #c62828; }

/* Info note */
.gps-info-note {
    margin-top: 18px;
    padding: 10px 12px;
    background: #f5f7fa;
    border-left: 3px solid #0070a0;
    border-radius: 4px;
    font-size: 13px;
    color: #555;
    line-height: 1.5;
}
.gps-info-note i { color: #0070a0; margin-right: 6px; }

.status-bar.accuracy-moving {
    border-color: #3bd8ff !important; 
}

.status-bar.location-unavailable {
    border-color: #c0c0c0 !important; /* Grey for unavailable location */
}

@keyframes borderBlinkLow {
    0% { border-color: #ee1000; }
    50% { border-color: transparent; }
    100% { border-color: #ee1000; }
}

@keyframes borderBlinkMedium {
    0% { border-color: #FC8523; }
    50% { border-color: transparent; }
    100% { border-color: #FC8523; }
}

.message-container {
    color: var(--primary-color);
    text-align: center;
    margin: 1rem 0;
    line-height: 1.4;
    padding: 1rem;
    border-radius: 4px;
    max-width: 400px;
    width: 100%;
}

/* Global Bootstrap button overrides — keep Bootstrap classes aligned with the
   app's design-system tokens instead of Bootstrap's defaults. */
.btn-primary {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}
.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--secondary-color) !important;
    border-color: var(--secondary-color) !important;
}
.btn-secondary {
    background-color: #e4e4e4 !important;
    border-color: #ccc !important;
    color: var(--text-color) !important;
}
.btn-secondary:hover,
.btn-secondary:focus {
    background-color: #d4d4d4 !important;
    border-color: #bbb !important;
}
.btn-danger {
    background-color: var(--error-color) !important;
    border-color: var(--error-color) !important;
}
.btn-danger:hover,
.btn-danger:focus {
    filter: brightness(0.9);
}

/* Mapbox Controls Styling */
.mapboxgl-ctrl-group {
    background-color: #fff !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

.mapboxgl-ctrl-group button {
    width: 38px !important;
    height: 38px !important;
    margin: 0 !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Style for all control buttons including zoom and compass */
.mapboxgl-ctrl-group button.mapboxgl-ctrl-zoom-in .mapboxgl-ctrl-icon,
.mapboxgl-ctrl-group button.mapboxgl-ctrl-zoom-out .mapboxgl-ctrl-icon,
.mapboxgl-ctrl-group button.mapboxgl-ctrl-compass .mapboxgl-ctrl-icon,
.mapboxgl-ctrl-group button .mapboxgl-ctrl-icon {
    width: 38px !important;
    height: 38px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: white !important;
    color: var(--primary-color) !important;
}

/* Style for our custom satellite toggle and all other icons */
.mapboxgl-ctrl-icon i,
.mapboxgl-ctrl-icon {
    font-size: 24px !important;
    color: var(--primary-color) !important;
}

/* Hover state for all control buttons */
.mapboxgl-ctrl-group button:hover {
    background-color: #f0f0f0 !important;
}

/* Active/focused state for all control buttons */
.mapboxgl-ctrl-group button:active,
.mapboxgl-ctrl-group button:focus {
    background-color: #e6e6e6 !important;
}

/* Style for the compass arrow */
.mapboxgl-ctrl-compass-arrow {
    width: 26px !important;
    height: 26px !important;
    margin: 6px !important;
    background-color: var(--primary-color) !important;
}

.custom-popup {
    z-index: 200 !important;  /* Ensure popup appears above markers */
}

/* Specific styling for capture screen controls */
#capture-screen .controls {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding-bottom: 32px;
    gap: 16px;
    height: 100%;
    background-color: transparent;
    pointer-events: none;
}
#capture-screen .controls button {
    position: relative;
    width: 120px;
    height: 48px;
    border-radius: 24px;
    pointer-events: auto;
}

#capture-btn {
    background-color: var(--primary-color) !important;
    color: white !important;
}

#cancel-btn {
    background-color: rgba(255, 255, 255, 0.9) !important;
    color: var(--text-color) !important;
}

/* Delete Confirmation Modal Styling */
#delete-confirm-modal .modal-content {
    background-color: white;
    border-radius: 8px;
    border: none;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

#delete-confirm-modal .modal-header {
    border-bottom: 1px solid #eee;
    padding: 1rem 1.5rem;
}

#delete-confirm-modal .modal-title {
    color: var(--text-color);
    font-family: inherit;
    font-size: 1.25rem;
}

#delete-confirm-modal .modal-body {
    padding: 1.5rem;
    color: var(--text-color);
}

#delete-confirm-modal .modal-footer {
    border-top: 1px solid #eee;
    padding: 1rem 1.5rem;
}

#delete-confirm-modal .btn-secondary {
    background-color: #f4f4f4;
    border: none;
    color: var(--text-color);
}

#delete-confirm-modal .btn-danger {
    background-color: var(--error-color);
    border: none;
}

#delete-confirm-modal .close {
    color: var(--text-color);
    opacity: 0.5;
    transition: opacity 0.3s;
}

#delete-confirm-modal .close:hover {
    opacity: 1;
}

.recording-dialog {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.recording-dialog.hidden {
    display: none;
}

.recording-dialog-content {
    background-color: white;
    border-radius: 8px;
    padding: 20px;
    width: 300px;
    max-width: 90%;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    text-align: center;
}

.recording-title {
    font-size: 18px;
    margin-bottom: 15px;
    color: #333;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
}

.recording-title i {
    color: #ff4444;
    margin-right: 10px;
    animation: pulse 1.5s infinite;
}

.recording-timer-container {
    position: relative;
    width: 150px;
    height: 150px;
    margin: 0 auto 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.recording-timer {
    font-size: 48px;
    font-weight: bold;
    color: #333;
    font-family: 'Roboto Mono', monospace;
    position: absolute;
    z-index: 2;
}

.recording-progress-circle {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
    position: absolute;
    z-index: 1;
    visibility: visible !important;
    opacity: 1 !important;
}

.progress-circle-bg {
    fill: none;
    stroke: #e0e0e0;
    stroke-width: 5;
    visibility: visible !important;
    opacity: 1 !important;
}

.progress-circle {
    fill: none;
    stroke: #ff4444;
    stroke-width: 5;
    stroke-linecap: round;
    transition: stroke-dashoffset 1s linear;
    visibility: visible !important;
    opacity: 1 !important;
    transform-origin: center;
}

/* Delete the old linear progress styles */
.recording-progress-bar {
    display: none;
}

.recording-progress {
    display: none;
}

.recording-waveform-container {
    width: 100%;
    height: 60px;
    margin-bottom: 15px;
    border-radius: 4px;
    overflow: hidden;
    background-color: #f5f5f5;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

.recording-waveform {
    display: block;
    width: 100%;
    height: 100%;
    background-color: transparent;
}

.recording-buttons {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
}

#save-recording-btn,
#cancel-recording-btn {
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.2s ease;
    flex: 1;
}

#save-recording-btn:hover,
#cancel-recording-btn:hover {
    transform: scale(1.05);
}

/* Override existing styling for cancel button to match new layout */
#cancel-recording-btn {
    /* Existing styling kept */
}

/* Keep Still Progress Bar */
.keep-still-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 4px;
    width: 0;
    background-color: #3bd8ff;
    /* transition duration is now set dynamically in JavaScript */
}

/* Add styling for disabled state */
.status-bar.location-disabled {
    background-color: rgba(200, 200, 200, 0.15);  /* Lighter background */
    border-color: #aaa !important;  /* Lighter border */
    color: #e0e0e0;  /* Much lighter text for better contrast */
    animation: none !important;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);  /* Subtle text shadow for better readability */
    white-space: normal;  /* Allow this state to wrap so the full "tap to enable" hint stays visible */
    text-align: center;
    line-height: 1.1;
}

.status-bar.location-disabled:hover {
    background-color: rgba(200, 200, 200, 0.25);  /* Slightly lighter on hover */
    color: #ffffff;  /* Full white text on hover */
}

/* Upload Dialog Styles */
.upload-dialog {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 200000;
}

.upload-dialog.hidden {
    display: none;
}

.upload-dialog-content {
    background-color: white;
    border-radius: 8px;
    padding: 20px;
    width: 300px;
    max-width: 90%;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    text-align: center;
}

.upload-spinner {
    margin-bottom: 15px;
}

.upload-spinner i {
    font-size: 48px;
    color: var(--primary-color);
}

.upload-message {
    color: var(--text-color);
    font-size: 16px;
}

/* About modal — full-screen hero */
.about-fullscreen {
    padding: 0 !important;
}

.about-fs-dialog {
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    height: 100vh;
    height: 100dvh;
    display: flex;
}

.about-fs-content {
    position: relative;
    flex: 1;
    width: 100%;
    height: 100%;
    border: 0 !important;
    border-radius: 0 !important;
    background: radial-gradient(ellipse at 50% 35%, #0a3550 0%, #081016 65%, #050a0f 100%) !important;
    color: #e6edf3;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 24px;
    animation: aboutFsFade 0.35s ease-out;
}

@keyframes aboutFsFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.about-fs-close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 3;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #e6edf3 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.about-fs-close:hover,
.about-fs-close:focus {
    background: rgba(255, 255, 255, 0.12);
    outline: none;
}

.about-fs-close:active {
    transform: scale(0.92);
}

.about-fs-close i {
    font-size: 18px;
    color: #e6edf3;
}

.about-fs-stage {
    position: relative;
    flex: 1;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
}

.about-fs-logo {
    position: relative;
    z-index: 1;
    width: min(70vmin, 420px);
    height: min(70vmin, 420px);
    object-fit: contain;
    border-radius: 24%;
    box-shadow:
        0 30px 90px rgba(0, 128, 208, 0.45),
        0 10px 30px rgba(0, 0, 0, 0.4);
    animation: aboutFsFloat 5s ease-in-out infinite;
}

.about-fs-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(90vmin, 560px);
    height: min(90vmin, 560px);
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 128, 208, 0.55) 0%, rgba(0, 128, 208, 0.0) 65%);
    filter: blur(40px);
    opacity: 0.85;
    animation: aboutFsPulse 4s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

@keyframes aboutFsFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-14px); }
}

@keyframes aboutFsPulse {
    0%, 100% {
        opacity: 0.7;
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.08);
    }
}

.about-fs-bottom {
    width: 100%;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding-bottom: env(safe-area-inset-bottom, 0);
    z-index: 2;
}

.about-fs-version {
    font-family: 'Roboto Mono', monospace;
    font-size: 12px;
    color: rgba(230, 237, 243, 0.5);
    margin: 0;
    letter-spacing: 0.08em;
}

/* Dictionary-style entry (over dark hero) */
.about-dict {
    width: 100%;
    text-align: left;
    padding: 18px 20px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    font-family: Georgia, 'Times New Roman', 'Source Serif Pro', serif;
}

.about-dict-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.about-dict-word {
    font-size: 30px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.01em;
}

.about-dict-speak {
    background: transparent;
    border: 0;
    padding: 4px;
    margin: 0;
    color: #4ec3ff;
    cursor: pointer;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, transform 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.about-dict-speak svg {
    width: 20px;
    height: 20px;
}

.about-dict-speak:hover,
.about-dict-speak:focus {
    background: rgba(78, 195, 255, 0.15);
    outline: none;
}

.about-dict-speak:active {
    transform: scale(0.92);
}

.about-dict-meta {
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}

.about-dict-phon {
    font-family: 'Charis SIL', 'Doulos SIL', 'Lucida Sans Unicode', 'DejaVu Sans', Georgia, serif;
    color: rgba(230, 237, 243, 0.85);
    font-size: 16px;
}

.about-dict-pos {
    font-style: italic;
    color: rgba(230, 237, 243, 0.55);
    font-size: 13px;
}

.about-dict-def {
    margin: 10px 0 0;
    color: rgba(230, 237, 243, 0.9);
    font-size: 14px;
    line-height: 1.55;
}

.about-dict-def em {
    font-style: italic;
    color: #4ec3ff;
    font-weight: 600;
}

/* ============================================================================
   NETWORK / RADAR MODE
   - Picker modal (mode selection + zone/PON multi-select)
   - Radar overlay (concentric rings, sweep arm, crosshair) on top of the map
   - Read-only attribute sheet (no edit/delete/move affordances)
   ============================================================================ */

/* --- Picker backdrop + card --- */
.network-picker-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(8, 16, 22, 0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.network-picker-backdrop.hidden {
    display: none !important;
}
.network-picker {
    background: #0d1b22;
    color: #e6f7ef;
    border-radius: 14px;
    border: 1px solid rgba(0, 255, 156, 0.25);
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.6),
                0 0 30px rgba(0, 255, 156, 0.12);
    width: 100%;
    max-width: 380px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-family: inherit;
}
.network-picker--wide {
    max-width: 500px;
}
.network-picker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(0, 255, 156, 0.15);
    background: linear-gradient(180deg, rgba(0, 255, 156, 0.08), transparent);
}
.network-picker-title {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #00ff9c;
    text-shadow: 0 0 8px rgba(0, 255, 156, 0.35);
}
.network-picker-title i {
    margin-right: 8px;
}
.network-picker-close {
    background: none;
    border: none;
    color: #b8d9c8;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    padding: 0 6px;
}
.network-picker-close:hover {
    color: #fff;
}
.network-picker-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.network-picker-body--scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.network-picker-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    background: rgba(0, 255, 156, 0.06);
    border: 1px solid rgba(0, 255, 156, 0.2);
    border-radius: 10px;
    color: #e6f7ef;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.05s;
    font-family: inherit;
}
.network-picker-card:hover,
.network-picker-card:focus {
    background: rgba(0, 255, 156, 0.12);
    border-color: rgba(0, 255, 156, 0.45);
    outline: none;
}
.network-picker-card:active {
    transform: scale(0.985);
}
/* Selected state — used by single-select reuses of the picker (e.g. the
   Admin View zone/PON scope picker) to mark the current choice. */
.network-picker-card-active {
    background: rgba(0, 255, 156, 0.12);
    border-color: rgba(0, 255, 156, 0.55);
}
.network-picker-card-check {
    margin-left: auto;
    color: #00ff9c;
    font-size: 16px;
    flex-shrink: 0;
}
.network-picker-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 255, 156, 0.15);
    color: #00ff9c;
    font-size: 18px;
    flex-shrink: 0;
}
.network-picker-card-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.network-picker-card-title {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
}
.network-picker-card-sub {
    font-size: 12px;
    color: #97b8a9;
}
.network-picker-divider {
    height: 1px;
    background: rgba(0, 255, 156, 0.15);
    margin: 4px 0;
}
.network-picker-section-label {
    font-size: 11px;
    color: #b8d9c8;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 2px 2px 0;
}
.network-picker-hint {
    background: rgba(0, 255, 156, 0.05);
    border: 1px dashed rgba(0, 255, 156, 0.3);
    color: #b8d9c8;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 12px;
    line-height: 1.4;
}
.network-picker-hint i {
    color: #00ff9c;
    margin-right: 6px;
}
.network-picker-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid rgba(0, 255, 156, 0.15);
    background: rgba(0, 0, 0, 0.2);
}
.network-picker-footer .btn-primary {
    background-color: #00b86b;
    border-color: #00b86b;
}
.network-picker-footer .btn-primary:disabled {
    background-color: #305848;
    border-color: #305848;
    cursor: not-allowed;
}
.network-picker-back {
    background: rgba(0, 255, 156, 0.12);
    color: #00ff9c;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
}
.network-picker-back:hover { background: rgba(0, 255, 156, 0.22); }
.network-picker-back:active { transform: scale(0.94); }
.network-picker-back i { font-size: 15px; }

/* --- Filter section (zone/PON chips) --- */
.network-filter-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.network-filter-label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 13px;
    color: #b8d9c8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.network-filter-count {
    font-size: 11px;
    color: #00ff9c;
    text-transform: none;
    letter-spacing: 0;
}
.network-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-height: 28vh;
    overflow-y: auto;
    padding: 4px 2px;
}
.network-chip {
    background: rgba(0, 255, 156, 0.05);
    color: #e6f7ef;
    border: 1px solid rgba(0, 255, 156, 0.2);
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
    font-family: 'Roboto Mono', monospace;
}
.network-chip:hover {
    background: rgba(0, 255, 156, 0.12);
}
.network-chip.selected {
    background: #00ff9c;
    color: #052016;
    border-color: #00ff9c;
    font-weight: 600;
    box-shadow: 0 0 10px rgba(0, 255, 156, 0.45);
}
.network-chip-empty {
    color: #6f8a7e;
    font-size: 12px;
    font-style: italic;
    padding: 4px 2px;
}
.network-filter-error {
    background: rgba(253, 90, 0, 0.12);
    border: 1px solid rgba(253, 90, 0, 0.4);
    color: #ffb791;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 12px;
}
.network-filter-error.hidden {
    display: none !important;
}

/* --- Radar overlay on top of the map --- */
body.radar-mode #map {
    position: relative; /* anchor the overlay we append to #map */
}
body.radar-mode #map::after {
    /* Green wash on the basemap canvas — dims the map so the radar reads clearly. */
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse at center,
        rgba(0, 255, 156, 0.12) 0%,
        rgba(0, 255, 156, 0.05) 40%,
        rgba(8, 16, 22, 0.58) 100%);
    mix-blend-mode: screen;
    z-index: 1;
}
.radar-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    overflow: hidden;
    /* Form an isolated stacking/paint context so the radar's animation is not
       chained to the map canvas repaint cycle (keeps the sweep smooth while
       the map pans/zooms/loads). */
    isolation: isolate;
    contain: layout paint;
}
.radar-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1.5px solid rgba(0, 255, 156, 0.38);
    border-radius: 50%;
    box-shadow: inset 0 0 14px rgba(0, 255, 156, 0.14),
                0 0 18px rgba(0, 255, 156, 0.12);
}
.radar-ring--1 { width: 30vmin; height: 30vmin; }
.radar-ring--2 { width: 55vmin; height: 55vmin; }
.radar-ring--3 { width: 85vmin; height: 85vmin; }

.radar-crosshair {
    position: absolute;
    background: rgba(0, 255, 156, 0.28);
    box-shadow: 0 0 6px rgba(0, 255, 156, 0.35);
}
.radar-crosshair--h {
    top: 50%; left: 0; right: 0; height: 1.5px;
}
.radar-crosshair--v {
    top: 0; bottom: 0; left: 50%; width: 1.5px;
}
.radar-sweep {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 170vmax;
    height: 170vmax;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    /* Sweep arm — a conic gradient with a soft trailing fade.
       Opacities bumped slightly to compensate for dropping mix-blend-mode. */
    background: conic-gradient(
        from 0deg,
        rgba(0, 255, 156, 0.85) 0deg,
        rgba(0, 255, 156, 0.40) 24deg,
        rgba(0, 255, 156, 0)    70deg,
        rgba(0, 255, 156, 0)    360deg
    );
    -webkit-mask-image: radial-gradient(circle at center,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,1) 25%,
        rgba(0,0,0,1) 100%);
    mask-image: radial-gradient(circle at center,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,1) 25%,
        rgba(0,0,0,1) 100%);
    animation: radar-sweep 4s linear infinite;
    opacity: 0.78;
    /* Promote to a dedicated GPU layer so the rotation runs on the compositor
       thread, staying smooth regardless of main-thread / map activity.
       (mix-blend-mode removed — it forced per-frame recompositing with the
       map beneath, which was the main source of the stutter.) */
    will-change: transform;
    backface-visibility: hidden;
}
@keyframes radar-sweep {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(360deg); }
}
/* Caption shown beneath the radar (e.g. "Loading your network access…"
   when opening the picker, "Scanning network…" while data is loading).
   Sits low on the screen so it never overlaps the rings/sweep. */
.radar-label {
    position: absolute;
    left: 50%;
    bottom: 18%;
    transform: translateX(-50%);
    color: #00ff9c;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-shadow: 0 0 12px rgba(0, 255, 156, 0.55),
                 0 2px 6px rgba(0, 0, 0, 0.7);
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(0, 255, 156, 0.35);
    pointer-events: none;
    white-space: nowrap;
    animation: radar-label-pulse 1.6s ease-in-out infinite;
}
@keyframes radar-label-pulse {
    0%, 100% { opacity: 0.85; }
    50%      { opacity: 1; }
}

/* Bottom status bar shown while network layers are visible. Two-row card:
   read-only scope strip on top, explicit [Close] [Types] [Scope] actions
   below — same layout as reconcile-status-pill so the mode reads clearly. */
.network-status-bar {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(env(safe-area-inset-bottom, 0) + 18px);
    /* Below bottom sheets (z-index 1000) so capture detail slides over it. */
    z-index: 950;
    background: rgba(13, 27, 34, 0.94);
    color: #e6f7ef;
    border: 1px solid rgba(0, 255, 156, 0.55);
    border-radius: 14px;
    padding: 10px 12px 12px;
    font-size: 13px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4),
                0 0 14px rgba(0, 255, 156, 0.25);
    font-family: inherit;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 480px;
    margin: 0 auto;
    box-sizing: border-box;
}

/* ---------------------------------------------------------------------------
   LIGHT FLOW — control bar + moving-dot mode
   Sits where the network status bar lives; the status bar is hidden while the
   animation runs (exit returns to it).
--------------------------------------------------------------------------- */
body.lightflow-mode .network-status-bar { display: none; }

/* Replace the app header (user / location / burger) with the light-flow
   distance bar while light is flowing. */
body.lightflow-mode #app-header { display: none; }

.lightflow-topbar {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0) + 10px);
    left: 12px;
    right: 12px;
    z-index: 951;
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(13, 27, 34, 0.95);
    color: #fff7d6;
    border: 1px solid rgba(253, 224, 71, 0.55);
    border-radius: 14px;
    padding: 8px 10px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45),
                0 0 16px rgba(253, 224, 71, 0.22);
    font-family: inherit;
    max-width: 480px;
    margin: 0 auto;
    box-sizing: border-box;
}
.lightflow-progress {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.lightflow-progress-track {
    display: flex;
    align-items: center;
    gap: 8px;
}
.lightflow-progress-track input[type="range"] {
    flex: 1;
    min-width: 0;
    accent-color: #fde047;
    margin: 0;
    cursor: pointer;
}
.lightflow-progress-end {
    font-size: 11px;
    color: #cbd5d1;
    white-space: nowrap;
}
.lightflow-progress-cur {
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    color: #fde047;
    line-height: 1;
}

/* Hide all floating capture/voice/measure/notes buttons while the light-flow
   bar is on screen so they don't overlap the animation. The lightflow bar
   provides its own exit and the user can re-open them after closing light. */
body.lightflow-mode #map-screen .controls { display: none; }

.lightflow-bar {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(env(safe-area-inset-bottom, 0) + 18px);
    z-index: 951;
    background: rgba(13, 27, 34, 0.95);
    color: #fff7d6;
    border: 1px solid rgba(253, 224, 71, 0.55);
    border-radius: 14px;
    padding: 10px 12px 12px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45),
                0 0 16px rgba(253, 224, 71, 0.22);
    font-family: inherit;
    font-size: 13px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 480px;
    margin: 0 auto;
    box-sizing: border-box;
}
.lightflow-bar-row { display: flex; align-items: center; gap: 10px; }
.lightflow-bar-top { justify-content: space-between; }
.lightflow-bar-info { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lightflow-bar-dir { font-weight: 700; color: #fde047; font-size: 13px; }
.lightflow-bar-sub {
    font-size: 11px; color: #cbd5d1;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lightflow-btn {
    appearance: none;
    background: rgba(255, 255, 255, 0.06);
    color: #fff7d6;
    border: 1px solid rgba(253, 224, 71, 0.35);
    border-radius: 10px;
    min-width: 40px;
    height: 36px;
    padding: 0 10px;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
}
.lightflow-btn span { font-size: 12px; }
.lightflow-btn:active { transform: scale(0.96); }
.lightflow-btn-exit { border-color: rgba(255, 255, 255, 0.25); color: #e6f7ef; }
.lightflow-bar-controls { flex-wrap: nowrap; }
/* Nudge buttons (−5m / +5m) use a slightly smaller font to fit the text */
[data-act="nudge-back"], [data-act="nudge-fwd"] { font-size: 11px; min-width: 36px; padding: 0 7px; }
.lightflow-speed { display: flex; flex-direction: column; align-items: stretch; gap: 1px; flex: 1; min-width: 80px; color: #cbd5d1; }
.lightflow-speed input[type="range"] { width: 100%; accent-color: #fde047; margin: 0; }
.lightflow-speed-val { font-size: 10px; text-align: center; color: #fff7d6; line-height: 1; }
.lightflow-bar-foot { flex-wrap: wrap; gap: 8px; }
.lightflow-chip {
    appearance: none;
    background: rgba(255, 255, 255, 0.06);
    color: #e6f7ef;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}
/* Active state for toggle chips (Follow, Reverse) */
.lightflow-chip.active {
    background: rgba(253, 224, 71, 0.18);
    border-color: #fde047;
    color: #fde047;
}
.lightflow-chip-problem {
    border-color: rgba(239, 68, 68, 0.6);
    color: #fecaca;
    background: rgba(239, 68, 68, 0.12);
}
.lightflow-chip.hidden { display: none; }

.network-status-info {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 2px;
    min-width: 0;
}
.network-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #00ff9c;
    box-shadow: 0 0 8px rgba(0, 255, 156, 0.7);
    flex-shrink: 0;
}
.network-status-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
    text-align: left;
    flex: 1;
}
.network-status-title {
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.network-status-sub {
    font-size: 11px;
    color: #97b8a9;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
}
.network-status-actions {
    display: flex;
    gap: 8px;
}
.network-status-action {
    flex: 1 1 0;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 40px;
    padding: 0 8px;
    border-radius: 10px;
    background: rgba(0, 255, 156, 0.10);
    border: 1px solid rgba(0, 255, 156, 0.45);
    color: #e6f7ef;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, transform 0.05s;
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
    overflow: hidden;
}
.network-status-action i {
    font-size: 14px;
    color: #00ff9c;
    flex-shrink: 0;
}
.network-status-action span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.network-status-action:hover  { background: rgba(0, 255, 156, 0.22); }
.network-status-action:active { transform: scale(0.97); }
.network-status-action-close {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.5);
    color: #fee2e2;
}
.network-status-action-close i      { color: #fca5a5; }
.network-status-action-close:hover  { background: rgba(239, 68, 68, 0.22); }
@media (max-width: 360px) {
    .network-status-action { font-size: 12px; padding: 0 6px; gap: 5px; }
}

/* Icon-only pill buttons — shared base for zoom (blue) and light (yellow). */
.network-status-light-btn,
.network-status-zoom-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 15px;
    cursor: pointer;
    transition: background 0.15s, transform 0.05s;
    -webkit-tap-highlight-color: transparent;
}
/* Push the first icon button to the far right of the info row,
   subsequent buttons sit flush beside it. */
.network-status-info .network-status-zoom-btn:first-of-type,
.network-status-info .network-status-light-btn:first-of-type,
.reconcile-status-info .network-status-zoom-btn { margin-left: auto; }

/* Yellow — light-flow trigger */
.network-status-light-btn {
    background: rgba(253, 224, 71, 0.12);
    border: 1px solid rgba(253, 224, 71, 0.55);
    color: #fde047;
}
.network-status-light-btn:hover  { background: rgba(253, 224, 71, 0.25); }
.network-status-light-btn:active { transform: scale(0.93); }

/* Blue — zoom-to-PON / zoom-to-area */
.network-status-zoom-btn {
    background: rgba(56, 189, 248, 0.12);
    border: 1px solid rgba(56, 189, 248, 0.55);
    color: #38bdf8;
}
.network-status-zoom-btn:hover  { background: rgba(56, 189, 248, 0.25); }
.network-status-zoom-btn:active { transform: scale(0.93); }

/* Full-screen category visibility panel. Replaces the dropdown popover —
   takes over the whole viewport so users can comfortably toggle each
   object type (poles, splitters 1:8 / 1:16, drop/feeder/distribution
   cables, etc.) and then close the network or dismiss the panel. */
.network-cat-panel {
    position: fixed;
    inset: 0;
    z-index: 3200;
    background: #0d1b22;
    color: #e6f7ef;
    font-family: inherit;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-top: env(safe-area-inset-top, 0);
    padding-bottom: env(safe-area-inset-bottom, 0);
}
.network-cat-panel-header {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(0, 255, 156, 0.18);
    background: linear-gradient(180deg, rgba(0, 255, 156, 0.10), transparent);
    flex-shrink: 0;
    gap: 12px;
}
.network-cat-panel-title {
    font-size: 16px;
    font-weight: 600;
    color: #00ff9c;
    text-shadow: 0 0 8px rgba(0, 255, 156, 0.35);
    letter-spacing: 0.02em;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.network-cat-panel-back {
    background: rgba(0, 255, 156, 0.12);
    color: #00ff9c;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
    justify-self: start;
}
.network-cat-panel-back:hover { background: rgba(0, 255, 156, 0.22); }
.network-cat-panel-back:active { transform: scale(0.94); }
.network-cat-panel-back i { font-size: 15px; }
.network-cat-panel-close-network {
    background: rgba(220, 38, 38, 0.18);
    color: #fda4af;
    border: 1px solid rgba(220, 38, 38, 0.55);
    border-radius: 999px;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-shrink: 0;
    justify-self: end;
    white-space: nowrap;
}
.network-cat-panel-close-network:hover { background: rgba(220, 38, 38, 0.30); color: #fff; }
.network-cat-panel-close-network:active { transform: scale(0.98); }
.network-cat-panel-close-network i { font-size: 12px; }

.network-cat-panel-actions {
    display: flex;
    gap: 8px;
    padding: 10px 16px;
    border-bottom: 1px solid rgba(0, 255, 156, 0.12);
    flex-shrink: 0;
}
.network-cat-panel-body {
    padding: 6px 8px;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
}
.network-cat-section-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #6f8a7e;
    font-weight: 600;
    padding: 12px 12px 4px;
}
.network-cat-section-label:first-child { padding-top: 4px; }
.network-cat-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 12px;
    cursor: pointer;
    border-radius: 10px;
    user-select: none;
    border: 1px solid transparent;
}
.network-cat-row:hover,
.network-cat-row:active { background: rgba(0, 255, 156, 0.06); border-color: rgba(0, 255, 156, 0.18); }
.network-cat-row input[type="checkbox"] {
    accent-color: #00ff9c;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}
.network-cat-swatch {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #00ff9c;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.45),
                inset 0 0 0 1px rgba(255, 255, 255, 0.15);
    flex-shrink: 0;
}
.network-cat-name {
    font-size: 15px;
    color: #e6f7ef;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}
.network-cat-panel-footer {
    display: flex;
    gap: 8px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0));
    border-top: 1px solid rgba(0, 255, 156, 0.18);
    background: rgba(0, 0, 0, 0.25);
    flex-shrink: 0;
}
.network-cat-panel-action {
    flex: 1;
    background: rgba(0, 255, 156, 0.10);
    color: #00ff9c;
    border: 1px solid rgba(0, 255, 156, 0.35);
    border-radius: 8px;
    padding: 12px 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.network-cat-panel-action:hover { background: rgba(0, 255, 156, 0.20); }
.network-cat-panel-action:active { transform: scale(0.98); }
.network-cat-panel-action--danger {
    background: rgba(220, 38, 38, 0.18);
    color: #fda4af;
    border-color: rgba(220, 38, 38, 0.55);
}
.network-cat-panel-action--danger:hover { background: rgba(220, 38, 38, 0.30); color: #fff; }
.network-cat-panel-action--danger i { font-size: 14px; }

/* Planned vs As-built table in reconcile Map Layers panel */
.network-cat-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}
.network-cat-th-type,
.network-cat-th-col {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #0d1b22;
    border-bottom: 1px solid rgba(0, 255, 156, 0.22);
    box-shadow: 0 1px 0 rgba(0, 255, 156, 0.10);
}
.network-cat-th-type {
    padding: 8px 12px 6px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #6f8a7e;
    font-weight: 600;
    text-align: left;
}
.network-cat-th-col {
    width: 64px;
    padding: 8px 4px 6px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #6f8a7e;
    font-weight: 600;
    text-align: center;
}
.network-cat-tr {
    border-bottom: 1px solid rgba(0, 255, 156, 0.08);
    transition: background 0.1s;
}
.network-cat-tr:last-child { border-bottom: none; }
.network-cat-tr:hover { background: rgba(0, 255, 156, 0.05); }
.network-cat-section-row { border-bottom: none; }
.network-cat-section-cell {
    padding: 14px 12px 4px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #6f8a7e;
    font-weight: 600;
    pointer-events: none;
    user-select: none;
}
.network-cat-section-row:first-child .network-cat-section-cell { padding-top: 6px; }
.network-cat-td-type {
    padding: 10px 12px;
    vertical-align: middle;
}
.network-cat-td-type .network-cat-swatch {
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
    flex-shrink: 0;
}
.network-cat-td-type .network-cat-name {
    display: inline;
    vertical-align: middle;
    font-size: 14px;
}
.network-cat-td-col {
    width: 64px;
    text-align: center;
    vertical-align: middle;
    padding: 8px 4px;
}
.network-cat-td-na {
    color: #6f8a7e;
}
.network-cat-na {
    font-size: 16px;
    line-height: 1;
    cursor: default;
    user-select: none;
}
.network-cat-cb-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    min-height: 36px;
}
.network-cat-cb-wrap input[type="checkbox"] {
    accent-color: #00ff9c;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    cursor: pointer;
}

/* While in radar mode, mute the user's status bar/controls a touch so the
   radar feels primary. */
body.radar-mode .app-header {
    background: rgba(13, 27, 34, 0.85);
}

/* Network viewing mode — tint the header so the app reads as "in network"
   rather than a stray overlay on the normal map. */
body.network-mode .app-header {
    background: rgba(13, 27, 34, 0.92);
    border-bottom: 1px solid rgba(0, 255, 156, 0.35);
}
body.network-mode .status-bar {
    border-color: rgba(0, 255, 156, 0.45) !important;
    box-shadow: 0 0 6px rgba(0, 255, 156, 0.35);
}
/* Lift the camera above the network status bar (bar inset 18px + 104px min
   height + 16px gap). Without this the camera (z-index 1001) sits on top of
   the bar (z-index 950) and blocks its action buttons. */
body.network-mode #camera-btn {
    bottom: calc(env(safe-area-inset-bottom, 0) + 138px);
    transition: bottom 0.2s ease;
}
/* --- Read-only attribute sheet --- */
.network-attr-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 60vh;
    background: #0d1b22;
    color: #e6f7ef;
    border-top: 1px solid rgba(0, 255, 156, 0.35);
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
    box-shadow: 0 -6px 30px rgba(0, 0, 0, 0.5),
                0 -0 16px rgba(0, 255, 156, 0.15);
    z-index: 3150; /* Above network-status-bar (950), below cat panel (3200) */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(0);
    transition: transform 0.25s ease;
    padding-bottom: env(safe-area-inset-bottom, 0);
}
.network-attr-sheet.hidden {
    transform: translateY(110%);
    pointer-events: none;
}
.network-attr-handle {
    width: 36px;
    height: 4px;
    background: rgba(0, 255, 156, 0.35);
    border-radius: 4px;
    margin: 8px auto 4px;
}
.network-attr-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 4px 16px 8px;
    border-bottom: 1px solid rgba(0, 255, 156, 0.15);
}
.network-attr-title {
    flex: 1;
    min-width: 0;
}
.network-attr-title-main {
    font-size: 16px;
    font-weight: 600;
    color: #00ff9c;
    text-shadow: 0 0 8px rgba(0, 255, 156, 0.25);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.network-attr-title-sub {
    font-size: 12px;
    color: #97b8a9;
    margin-top: 2px;
}
.network-attr-close {
    background: none;
    border: none;
    color: #b8d9c8;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    padding: 0 6px;
    margin-left: 8px;
}
.network-attr-close:hover { color: #fff; }
.network-attr-body {
    padding: 8px 12px 16px;
    overflow-y: auto;
    flex: 1;
    font-family: 'Roboto Mono', monospace;
    font-size: 12.5px;
}
.network-attr-row {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 10px;
    padding: 6px 4px;
    border-bottom: 1px solid rgba(0, 255, 156, 0.08);
}
.network-attr-row:last-child { border-bottom: none; }
.network-attr-key {
    color: #97b8a9;
    text-transform: lowercase;
    word-break: break-word;
}
.network-attr-val {
    color: #e6f7ef;
    word-break: break-word;
}
.network-attr-empty {
    padding: 16px;
    color: #6f8a7e;
    text-align: center;
    font-style: italic;
}

/* ============================================================================
   ZOOM-SCALED CAPTURE MARKERS

   Each capture/group marker is two DOMs deep:
     .marker-wrap   — Mapbox writes `transform: translate(...)` here every
                      frame to track the GPS point.
     .marker-inner  — we write `transform: scale(...)` here from the map's
                      zoom listener (see map.js#updateAllMarkerScales).
   Splitting the transforms across two nodes is what stops the markers from
   jumping around during a pan: writing scale on the wrapper would clobber
   Mapbox's position transform, and the CSS transition would then animate
   Mapbox's per-frame position writes (visible as marker drag-behind).

   The transition lives on .marker-inner so it ONLY smooths our scale
   changes, never Mapbox's positioning. The location dot has no
   marker-inner / marker-wrap structure, so it's naturally excluded.
   ============================================================================ */
/* Wrapper exists only so Mapbox has its own node to write `transform:
   translate(...)` on every frame. inline-block shrinks the wrapper to fit
   its single child, so Mapbox's anchor: 'center' translates by `-50%, -50%`
   of the inner's size — putting the marker exactly on the GPS point. We
   never write to .marker-wrap's `style.transform`. */
.marker-wrap {
    display: inline-block;
    line-height: 0;
}
/* "Captures" toggle (network Types panel) — hide every capture / group marker
   without touching the GPS location dot, which is not wrapped in .marker-wrap. */
body.captures-hidden .marker-wrap { display: none !important; }
.marker-inner {
    transform-origin: center center;
    /* No transition: zoom events fire many times per second during a pinch
       gesture, so any transition longer than ~one frame just makes the
       markers feel like they're chasing the map. Instant scale per event
       reads as smooth because the per-event delta is tiny. */
    will-change: transform;
}

/* Temporary highlight ring applied while the detail bottom-sheet is open for
   a tapped capture marker. White inner ring + blue outer ring so it reads on
   both light and dark map styles. Sits on .marker-inner so it scales with the
   zoom transform and doesn't bleed onto Mapbox's positioning wrapper. */
.marker-inner.marker-highlighted {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.95),
                0 0 0 6px rgba(0, 112, 160, 0.85),
                0 0 18px 5px rgba(0, 112, 160, 0.45);
    animation: marker-highlight-pulse 1.5s ease-in-out infinite;
}
/* Brief, self-clearing pulse used by the review "Flash on map" button. Same
   look as the persistent highlight but a finite run, then it stops on its own
   (no box-shadow afterward since fill-mode stays default). */
.marker-inner.marker-flash {
    animation: marker-highlight-pulse 0.55s ease-in-out 3;
}
@keyframes marker-highlight-pulse {
    0%, 100% {
        box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.95),
                    0 0 0 6px rgba(0, 112, 160, 0.85),
                    0 0 14px 4px rgba(0, 112, 160, 0.4);
    }
    50% {
        box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.95),
                    0 0 0 8px rgba(0, 112, 160, 0.9),
                    0 0 22px 8px rgba(0, 112, 160, 0.6);
    }
}

/* Pulsing ring overlay placed at the tap coordinates when a Mapbox-layer
   feature (planned object, as-built segment/node) is tapped. pointer-events
   none keeps the ring from intercepting subsequent taps. */
.map-selection-ring {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 3px solid rgba(0, 112, 160, 0.9);
    background: rgba(0, 112, 160, 0.15);
    pointer-events: none;
    animation: selection-ring-pulse 1.5s ease-in-out infinite;
}
@keyframes selection-ring-pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(0, 112, 160, 0.35);
    }
    50% {
        transform: scale(1.2);
        box-shadow: 0 0 14px 5px rgba(0, 112, 160, 0.25);
    }
}

/* ============================================================================
   RECONCILE MODE — exit pill + work-pass picker.

   Reconcile shares the takeover-mode shape used by Drawing and Network. The
   palette is a cool teal/cyan so the user can tell at a glance which mode is
   live (network = neon green, drawing = amber, reconcile = teal).
   ============================================================================ */

/* Two-row card: read-only status strip on top, three explicit action
   buttons below. The old pill made the whole-pill tap fire Exit, which
   supervisors triggered by accident — the dedicated, full-width row
   below removes that ambiguity. */
.reconcile-status-pill {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(env(safe-area-inset-bottom, 0) + 10px);
    /* Sits BELOW the bottom sheet (#bottom-sheet, z-index: 1000) so
       when the supervisor opens a capture / review banner, the sheet
       slides up over the pill instead of partially burying it under
       the sheet's top edge. The pill reappears the moment the sheet
       is dismissed. */
    z-index: 950;
    background: rgba(10, 28, 28, 0.94);
    color: #c6f6f0;
    border: 1px solid rgba(20, 184, 166, 0.55);
    border-radius: 14px;
    padding: 10px 12px 12px;
    font-size: 13px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4),
                0 0 14px rgba(20, 184, 166, 0.25);
    font-family: inherit;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 480px;
    margin: 0 auto;
}

/* Row 1 — non-interactive status strip. Deliberately not a <button>
   so a stray tap on the title doesn't exit reconcile. */
.reconcile-status-info {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 2px;
    min-width: 0;
}
.reconcile-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #14b8a6;
    box-shadow: 0 0 8px rgba(20, 184, 166, 0.7);
    flex-shrink: 0;
}
.reconcile-status-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
    text-align: left;
    flex: 1;
}
.reconcile-status-title {
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.reconcile-status-sub {
    font-size: 11px;
    color: #7fd6c7;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
}

/* Row 0 — "Hide reconciled" toggle. Sits at the very top of the pill so a
   supervisor can quickly collapse the map down to just the captures still
   left to reconcile. Prominent: full-width tappable row with a clear label. */
.reconcile-status-hide-done {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(20, 184, 166, 0.12);
    border: 1px solid rgba(20, 184, 166, 0.45);
    color: #e6fffb;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}
.reconcile-status-hide-done input[type="checkbox"] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    accent-color: #14b8a6;
    cursor: pointer;
    margin: 0;
}
.reconcile-status-hide-done:hover  { background: rgba(20, 184, 166, 0.20); }
.reconcile-status-hide-done:active { transform: scale(0.99); }
.reconcile-status-hide-done + .reconcile-status-info {
    margin-top: -5px;
}

/* Row 2 — equal-width action buttons. Three on standard reconcile passes
   [Exit] [Layers] [Type]; authoring passes add a fourth [Undo last]
   button so Type stays reachable mid-chain (supervisors switch cable ↔
   drops without leaving the session). Each button is still tall enough
   to be a confident phone tap target; the label squeeze rules below
   handle 4-up layouts on narrow screens. */
.reconcile-status-actions {
    display: flex;
    gap: 8px;
}
.reconcile-status-action {
    flex: 1 1 0;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 40px;
    padding: 0 8px;
    border-radius: 10px;
    background: rgba(20, 184, 166, 0.10);
    border: 1px solid rgba(20, 184, 166, 0.45);
    color: #e6fffb;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, transform 0.05s;
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
    overflow: hidden;
}
.reconcile-status-action i {
    font-size: 14px;
    color: #5eead4;
    flex-shrink: 0;
}
.reconcile-status-action span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.reconcile-status-action:hover  { background: rgba(20, 184, 166, 0.22); }
.reconcile-status-action:active { transform: scale(0.97); }

/* Back button matches the other teal action buttons — no red. */

/* Squeeze the labels (not the icons) so the action row keeps its full
   hit target on a narrow phone (≤360px) for the standard 3-button pill. */
@media (max-width: 360px) {
    .reconcile-status-action { font-size: 12px; padding: 0 6px; gap: 5px; }
}

/* Authoring pill has FOUR buttons ([Exit] [Layers] [Type] [Undo last])
   and the labels matter — supervisors asked for "Type" specifically to
   stay visible because it's the only way out to another pass. We stack
   icon-above-label inside each button so all four labels remain
   readable even on a 360px phone, instead of hiding them on narrow
   widths. Each button becomes a small vertical chip ~22% of the row
   wide; the column layout means we trade row height for label space,
   which is a much better deal than dropping the labels. */
.reconcile-status-pill-authoring .reconcile-status-action {
    flex-direction: column;
    gap: 2px;
    height: 50px;
    padding: 4px 4px;
    font-size: 11px;
    line-height: 1.1;
    font-weight: 600;
}
.reconcile-status-pill-authoring .reconcile-status-action i {
    font-size: 15px;
}
.reconcile-status-pill-authoring .reconcile-status-action span {
    display: block;
    width: 100%;
    text-align: center;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

/* ---- Authoring pill (Cables / Home drops passes) -------------------------
   Re-uses the reconcile-status-pill chrome but signals "you are AUTHORING
   topology, not evaluating photos" with a slightly warmer (amber) accent on
   the dot + Undo button. The title / sub line render the live anchor state. */
.reconcile-status-pill-authoring {
    border-color: rgba(245, 158, 11, 0.55);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4),
                0 0 14px rgba(245, 158, 11, 0.22);
}
.reconcile-status-pill-authoring .reconcile-status-dot {
    background: #f59e0b;
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.7);
}
.reconcile-status-action-undo {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.5);
    color: #fde68a;
}
.reconcile-status-action-undo i { color: #fbbf24; }
.reconcile-status-action-undo:hover:not(:disabled) {
    background: rgba(245, 158, 11, 0.22);
}
.reconcile-status-action-undo:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* ---- Authoring banner (top of screen, primary instruction) -------------
   The bottom pill is functionally rich but visually small. This banner
   sits at the top centre during cable / drop authoring and carries the
   live "what to do next" instruction in large, readable type — it's
   what the supervisor's eye lands on first, especially on the very
   first tap of the session. We deliberately use a chip-with-shadow
   look (rather than a full-bleed bar) so it doesn't feel like a
   permanent OS chrome the user has to fight; it sits above the map
   like a HUD card.
*/
.reconcile-authoring-banner {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0) + 12px);
    left: 4px;
    right: 4px;
    z-index: 3200;
    padding: 10px 14px 12px;
    border-radius: 16px;
    background: rgba(10, 28, 28, 0.96);
    color: #f8fafc;
    border: 1px solid rgba(245, 158, 11, 0.55);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45),
                0 0 18px rgba(245, 158, 11, 0.28);
    font-family: inherit;
    text-align: center;
    display: flex;
    align-items: center;
    gap: 10px;
    pointer-events: auto;
}
.reconcile-authoring-banner-body {
    flex: 1;
    min-width: 0;
    pointer-events: none;
}
.reconcile-authoring-banner-eyebrow {
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fbbf24;
    font-weight: 700;
    margin-bottom: 2px;
}
.reconcile-authoring-banner-headline {
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.25;
}
.reconcile-authoring-banner-headline strong {
    color: #fde68a;
    font-weight: 700;
}
.reconcile-authoring-banner-helper {
    font-size: 11.5px;
    color: #cbd5e1;
    margin-top: 4px;
    line-height: 1.3;
}
.reconcile-authoring-banner-helper--hidden {
    display: none;
}
.reconcile-authoring-banner-helper strong {
    color: #fde68a;
    font-weight: 600;
}
.reconcile-authoring-banner-info {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(251, 191, 36, 0.14);
    border: 1px solid rgba(251, 191, 36, 0.4);
    color: #fcd34d;
    font-size: 13px;
    cursor: pointer;
    padding: 0;
    pointer-events: auto;
    touch-action: manipulation;
    transition: background 0.15s, color 0.15s, transform 0.05s;
    -webkit-tap-highlight-color: transparent;
}
.reconcile-authoring-banner-info:hover  { background: rgba(251, 191, 36, 0.26); }
.reconcile-authoring-banner-info:active { transform: scale(0.93); }
.reconcile-authoring-banner-info.is-active {
    background: rgba(251, 191, 36, 0.30);
    color: #fef3c7;
    border-color: rgba(251, 191, 36, 0.7);
}
.reconcile-authoring-banner-cancel {
    flex-shrink: 0;
    background: rgba(0, 255, 156, 0.12);
    border: none;
    border-radius: 50%;
    color: #00ff9c;
    font-size: 15px;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    pointer-events: auto;
    touch-action: manipulation;
}
.reconcile-authoring-banner-cancel:hover  { background: rgba(0, 255, 156, 0.22); }
.reconcile-authoring-banner-cancel:active { transform: scale(0.94); }
/* Hide the burger menu and user-avatar buttons while cable/duct/drop
   authoring is active so they don't clutter the top-bar during tapping. */
body.reconcile-authoring #menu-btn,
body.reconcile-authoring #user-avatar-btn {
    visibility: hidden;
    pointer-events: none;
}

/* "Pick" stage = no anchor yet — the supervisor needs the strongest pull
   ("Tap a reconciled pole to start"). A soft amber pulse fades in/out
   on the border so it reads as an active prompt without being a strobe. */
.reconcile-authoring-banner.is-pick {
    animation: reconcile-banner-pick-pulse 2.2s ease-in-out infinite;
}
@keyframes reconcile-banner-pick-pulse {
    0%, 100% {
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45),
                    0 0 14px rgba(245, 158, 11, 0.28);
        border-color: rgba(245, 158, 11, 0.55);
    }
    50% {
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45),
                    0 0 26px rgba(245, 158, 11, 0.55);
        border-color: rgba(245, 158, 11, 0.85);
    }
}
/* "Chain" stage = anchor set, supervisor is mid-flow. Same chrome but
   no pulse — it should be prominent but not attention-grabbing now
   that the supervisor is in rhythm. */
.reconcile-authoring-banner.is-chain {
    border-color: rgba(20, 184, 166, 0.55);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45),
                0 0 16px rgba(20, 184, 166, 0.28);
}
.reconcile-authoring-banner.is-chain .reconcile-authoring-banner-eyebrow {
    color: #5eead4;
}

/* ---- Authoring toast (transient, top-centre, validation only) -----------
   Replaces showNotification (a Bootstrap modal) during authoring. We
   ONLY ever surface validation feedback through it — "reconcile this
   pole first", "already strung", server save errors. Successful state
   changes are reflected by the banner. Auto-dismisses after ~2.4s and
   never blocks the map. */
.reconcile-authoring-toast {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0) + 110px);
    left: 50%;
    transform: translate(-50%, -10px);
    z-index: 3250;
    /* ~90vw wide so longer validation lines ("Reconcile this pole first,
       then come back to string a cable to it.") fit on one line on a
       phone screen instead of wrapping awkwardly mid-sentence. Capped
       at 720px on tablets so it doesn't span an absurd line length. */
    width: min(720px, 90vw);
    box-sizing: border-box;
    padding: 10px 18px;
    border-radius: 16px;
    background: rgba(127, 29, 29, 0.95);
    color: #fee2e2;
    border: 1px solid rgba(248, 113, 113, 0.55);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    opacity: 0;
    transition: opacity 0.18s ease, transform 0.18s ease;
    pointer-events: none;
}
.reconcile-authoring-toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}
.reconcile-authoring-toast--success {
    background: rgba(6, 78, 59, 0.95);
    color: #d1fae5;
    border-color: rgba(52, 211, 153, 0.55);
}

/* ---- Evaluation pass banner (top of screen — static per-pass instruction)
   Shown when the supervisor enters a non-authoring pass (poles, manholes,
   splitters, etc.). Same HUD-card chrome as the authoring banner but uses a
   blue/teal palette to distinguish evaluation from authoring, and the border
   pulses once on entry then settles — the instruction is static, so constant
   animation would be distracting. */
.reconcile-eval-banner {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0) + 12px);
    left: 4px;
    right: 4px;
    z-index: 3200;
    padding: 10px 14px 12px;
    border-radius: 16px;
    background: rgba(8, 25, 45, 0.96);
    color: #f8fafc;
    border: 1px solid rgba(56, 189, 248, 0.55);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45),
                0 0 18px rgba(56, 189, 248, 0.22);
    font-family: inherit;
    text-align: center;
    pointer-events: auto;
    animation: reconcile-eval-banner-in 0.25s ease-out;
}
@keyframes reconcile-eval-banner-in {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* Top row: back button left-aligned, headline centred next to it */
.reconcile-eval-banner-top {
    display: flex;
    align-items: center;
    gap: 8px;
}
.reconcile-eval-banner-eyebrow {
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #38bdf8;
    font-weight: 700;
    margin-bottom: 2px;
}
.reconcile-eval-banner-headline {
    flex: 1;
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.25;
    text-align: center;
}
/* Progress row: chip + flash button centred */
.reconcile-eval-banner-progress-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 6px;
}
.reconcile-eval-banner-progress {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 20px;
    background: rgba(20, 184, 166, 0.18);
    border: 1px solid rgba(20, 184, 166, 0.45);
    font-size: 12.5px;
    font-weight: 600;
    color: #a7f3d0;
    line-height: 1.2;
}
.reconcile-eval-banner-progress strong {
    color: #fff;
    font-size: 14px;
}
.reconcile-eval-banner-progress-done {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 6px;
    margin-left: auto;
    margin-right: auto;
    padding: 3px 9px;
    border-radius: 20px;
    background: rgba(16, 185, 129, 0.22);
    border: 1px solid rgba(16, 185, 129, 0.55);
    font-size: 12.5px;
    font-weight: 600;
    color: #6ee7b7;
    line-height: 1.2;
}
.reconcile-eval-banner-progress-done i {
    color: #34d399;
}
/* Flash button — yellow bolt, sits right of the progress chip */
.reconcile-eval-banner-flash {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(250, 204, 21, 0.18);
    border: 1px solid rgba(250, 204, 21, 0.55);
    color: #fde68a;
    font-size: 13px;
    cursor: pointer;
    padding: 0;
    transition: background 0.15s, transform 0.05s;
    -webkit-tap-highlight-color: transparent;
}
.reconcile-eval-banner-flash:hover  { background: rgba(250, 204, 21, 0.32); }
.reconcile-eval-banner-flash:active { transform: scale(0.93); }
.reconcile-eval-banner-helper {
    font-size: 11.5px;
    color: #cbd5e1;
    margin-top: 6px;
    line-height: 1.3;
    text-align: center;
}
.reconcile-eval-banner-helper--hidden {
    display: none;
}
.reconcile-eval-banner-info {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(56, 189, 248, 0.14);
    border: 1px solid rgba(56, 189, 248, 0.4);
    color: #7dd3fc;
    font-size: 13px;
    cursor: pointer;
    padding: 0;
    transition: background 0.15s, color 0.15s, transform 0.05s;
    -webkit-tap-highlight-color: transparent;
}
.reconcile-eval-banner-info:hover  { background: rgba(56, 189, 248, 0.26); }
.reconcile-eval-banner-info:active { transform: scale(0.93); }
.reconcile-eval-banner-info.is-active {
    background: rgba(56, 189, 248, 0.30);
    color: #e0f2fe;
    border-color: rgba(56, 189, 248, 0.7);
}
.reconcile-eval-banner-cancel {
    flex-shrink: 0;
    background: rgba(0, 255, 156, 0.12);
    border: 1px solid rgba(0, 255, 156, 0.35);
    border-radius: 50%;
    color: #00ff9c;
    font-size: 13px;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    pointer-events: auto;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.reconcile-eval-banner-cancel:hover  { background: rgba(0, 255, 156, 0.22); }
.reconcile-eval-banner-cancel:active { transform: scale(0.94); }


/* anchor. The class lives on `.marker-inner` (the visible 32×32 chip
   inside Mapbox's positioning wrapper) so:
     - the box-shadow halo paints exactly around the icon at every zoom
       level (the inner is the element that carries the zoom-scale
       transform from applyMarkerScale, so the ring scales with it);
     - we don't touch Mapbox's inline `position: absolute` on the wrap,
       which is what keeps the marker pinned at its lng/lat.
   Pole anchors pulse amber (the supervisor's "you are stringing FROM
   this pole" colour). The endpoint variant exists for future use but
   currently never paints because drop passes keep the anchor on the
   pole. */
.marker-inner.reconcile-anchor {
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.9),
                0 0 16px 4px rgba(245, 158, 11, 0.55);
    animation: reconcile-anchor-pulse 1.4s ease-in-out infinite;
}
.marker-inner.reconcile-anchor-endpoint {
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.9),
                0 0 16px 4px rgba(20, 184, 166, 0.55);
}
@keyframes reconcile-anchor-pulse {
    0%, 100% {
        box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.9),
                    0 0 12px 3px rgba(245, 158, 11, 0.45);
    }
    50% {
        box-shadow: 0 0 0 6px rgba(245, 158, 11, 0.85),
                    0 0 22px 8px rgba(245, 158, 11, 0.65);
    }
}

/* Hide "Close network" inside the category panel while reconcile is active.
   Closing the planned layers mid-reconcile would orphan the pill and strand
   the supervisor with no map context; they exit reconcile via the pill's
   main button (the X), not via the layers panel. */
body.reconcile-mode .network-cat-panel-close-network { display: none; }

/* ---- Pass picker (full-screen card list) ---------------------------------- */

.reconcile-pass-picker-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(2, 10, 12, 0.78);
    z-index: 3200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    backdrop-filter: blur(2px);
}
.reconcile-pass-picker-backdrop.hidden { display: none; }

.reconcile-pass-picker {
    width: min(420px, 100%);
    height: calc(100vh - 40px);
    background: #0d1f1f;
    border: 1px solid rgba(20, 184, 166, 0.35);
    border-radius: 14px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.6);
    color: #e6f7f3;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.reconcile-pass-picker-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 16px 16px;
    background: rgba(20, 184, 166, 0.13);
    border-bottom: 1px solid rgba(20, 184, 166, 0.35);
}
.reconcile-pass-picker-title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
}
.reconcile-pass-picker-title i { color: #14b8a6; }
.reconcile-pass-picker-back {
    background: none;
    border: none;
    color: #9ec9c2;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 8px 4px 0;
    flex-shrink: 0;
}
.reconcile-pass-picker-back:hover { color: #fff; }

.reconcile-pass-picker-close {
    background: none;
    border: none;
    color: #9ec9c2;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    padding: 0 0 0 8px;
    margin-left: auto;
    flex-shrink: 0;
}
.reconcile-pass-picker-close:hover { color: #fff; }

.reconcile-pass-picker-hint {
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 600;
    color: #e6f7f3;
    border-bottom: 1px solid rgba(20, 184, 166, 0.22);
    background: rgba(20, 184, 166, 0.09);
}
.reconcile-pass-picker-hint i { margin-right: 6px; color: #14b8a6; }

.reconcile-pass-picker-body {
    padding: 10px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Section label between groups of pass cards (Infrastructure /
   Customer endpoints / Sweep). Faint, uppercased, small — visual
   separator only, not interactive. The first label sits flush; later
   ones get a bit of top margin so groups breathe apart. */
.reconcile-pass-section-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(20, 184, 166, 0.7);
    padding: 0 4px;
    margin: 6px 0 -2px 0;
}
.reconcile-pass-section-label:first-child {
    margin-top: 0;
}

.reconcile-pass-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    background: rgba(20, 184, 166, 0.06);
    border: 1px solid rgba(20, 184, 166, 0.20);
    color: inherit;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.12s, border-color 0.12s, transform 0.08s;
}
.reconcile-pass-card:hover {
    background: rgba(20, 184, 166, 0.12);
    border-color: rgba(20, 184, 166, 0.4);
}
.reconcile-pass-card:active { transform: scale(0.98); }
.reconcile-pass-card.is-active {
    background: rgba(20, 184, 166, 0.18);
    border-color: rgba(20, 184, 166, 0.7);
}
.reconcile-pass-card-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(20, 184, 166, 0.18);
    color: #14b8a6;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}
.reconcile-pass-card-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}
.reconcile-pass-card-title {
    font-weight: 600;
    color: #fff;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.reconcile-pass-card-sub {
    font-size: 12px;
    color: #9ec9c2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.reconcile-pass-card-caret {
    color: #14b8a6;
    opacity: 0.7;
    flex-shrink: 0;
    font-size: 12px;
}

/* While reconcile is active, hide the capture controls (camera / voice /
   notes / measurement) — the user is in a supervisor flow, not a capture
   flow, and showing those buttons invites misclicks. */
body.reconcile-mode #camera-btn,
body.reconcile-mode #voice-btn,
body.reconcile-mode #notes-btn,
body.reconcile-mode #measurement-btn { display: none; }

/* ---------------------------------------------------------------------------
   Reconcile bottom-sheet section (plan-first review banner + linked chip)
   ---------------------------------------------------------------------------
   Two display states, both rendered by map.js#renderReconcileBlock:
     1. Review banner — supervisor opened this capture via a planned-tap.
        Sticky strip at the top of the sheet with Match / Next / Unlink.
     2. Linked-to chip — supervisor tapped a capture marker directly.
        Read-only "Linked to: …" line; no buttons.
   In both cases the standard capture detail UI renders below. */

.reconcile-bottom-section {
    margin: 0 0 12px 0;
    padding: 0 0 12px 0;
    border-bottom: 1px solid #e5e7eb;
}

/* --- Review banner (plan-first; opened via planned-tap) ---------------- */

.reconcile-review-banner {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
}
.reconcile-review-thumb {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    align-self: center;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    background: #e0e0e0;
}
.reconcile-review-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.reconcile-review-text {
    min-width: 0;
}
.reconcile-review-title {
    font-size: 14px;
    font-weight: 600;
    color: #065f46;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.reconcile-review-meta {
    font-size: 12px;
    color: #047857;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reconcile-review-actions {
    display: flex;
    align-items: stretch;
    gap: 8px;
    /* Three children: [<]  [Match | Unlink]  [>]
       Match/Unlink stretches; Prev/Next are fixed-width icon buttons. */
}
.reconcile-review-action {
    appearance: none;
    flex: 1;
    min-width: 0;
    padding: 9px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid transparent;
    transition: background 0.12s, border-color 0.12s, color 0.12s, opacity 0.12s;
    color: #1f2937;
}
.reconcile-review-action:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.reconcile-review-action-match {
    background: #10b981;
    color: #fff;
}
.reconcile-review-action-match:hover:not(:disabled)  { background: #059669; }
.reconcile-review-action-match:active:not(:disabled) { background: #047857; }

.reconcile-review-action-unlink {
    background: #fff;
    color: #b91c1c;
    border-color: #fecaca;
}
.reconcile-review-action-unlink:hover:not(:disabled)  { background: #fef2f2; border-color: #fca5a5; }
.reconcile-review-action-unlink:active:not(:disabled) { background: #fee2e2; }

/* Prev / Next walk between candidate locations. Icon-only so the
   stretching primary button (Match/Unlink) keeps a readable label even
   on narrow phones; same neutral chrome as a secondary action. */
.reconcile-review-action-prev,
.reconcile-review-action-next {
    flex: 0 0 auto;
    width: 40px;
    padding: 9px 0;
    background: #fff;
    color: #1f2937;
    border-color: #d1d5db;
}
.reconcile-review-action-prev:hover:not(:disabled),
.reconcile-review-action-next:hover:not(:disabled)  { background: #f9fafb; border-color: #9ca3af; }
.reconcile-review-action-prev:active:not(:disabled),
.reconcile-review-action-next:active:not(:disabled) { background: #f3f4f6; }

/* --- "Mark not built" secondary button inside the review banner --------- */

.reconcile-review-not-built {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin-top: 8px;
    padding: 7px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    background: none;
    border: 1px solid #d1d5db;
    color: #6b7280;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.reconcile-review-not-built:hover  { background: #f3f4f6; border-color: #9ca3af; color: #374151; }
.reconcile-review-not-built:active { background: #e5e7eb; }

.reconcile-review-not-built-restore {
    border-color: #a7f3d0;
    color: #065f46;
    background: #ecfdf5;
}
.reconcile-review-not-built-restore:hover  { background: #d1fae5; border-color: #6ee7b7; color: #064e3b; }
.reconcile-review-not-built-restore:active { background: #a7f3d0; }

.reconcile-review-not-built-blocked,
.reconcile-review-not-built:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.reconcile-review-not-built-blocked:hover,
.reconcile-review-not-built:disabled:hover { background: none; border-color: #d1d5db; color: #6b7280; }

/* --- Linked-to chip (direct capture tap; read-only) -------------------- */

.reconcile-linked-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 999px;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #065f46;
    font-size: 13px;
    max-width: 100%;
}
.reconcile-linked-chip i {
    color: #10b981;
    font-size: 12px;
    flex-shrink: 0;
}
.reconcile-linked-chip-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.reconcile-linked-chip-text strong {
    font-weight: 600;
    color: #064e3b;
}
.reconcile-linked-chip-empty {
    background: #f9fafb;
    border-color: #e5e7eb;
    color: #6b7280;
}
.reconcile-linked-chip-empty i { color: #9ca3af; }

/* Shown when a capture is only visible due to the 15 m boundary buffer —
   outside the zone polygon but close enough to include. Amber tone to
   distinguish from the green informational chips without alarming. */
.reconcile-outside-boundary-note {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 5px 10px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 8px;
    font-size: 12px;
    color: #9a3412;
}
.reconcile-outside-boundary-note i {
    color: #ea580c;
    font-size: 11px;
    flex-shrink: 0;
}

/* Multi-link variant: the pill shape becomes a soft card so two or
   three planned-object names stack legibly. Drops the nowrap from the
   single-link pill — those rules still apply via .reconcile-linked-chip
   above, this just relaxes them for the multi case. */
.reconcile-linked-chip.reconcile-linked-chip-multi {
    display: flex;
    align-items: flex-start;
    border-radius: 12px;
    padding: 6px 10px;
    width: 100%;
}
.reconcile-linked-chip-multi i {
    margin-top: 3px;
}
.reconcile-linked-chip-multi .reconcile-linked-chip-text {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.4;
    flex: 1;
    min-width: 0;
}
.reconcile-linked-chip-header {
    font-weight: 600;
    color: #064e3b;
    margin-bottom: 4px;
}
.reconcile-linked-chip-row {
    color: #065f46;
}
.reconcile-linked-chip-row + .reconcile-linked-chip-row {
    margin-top: 2px;
}
.reconcile-linked-chip-row strong {
    font-weight: 600;
    color: #064e3b;
}

/* --- Off-plan as-built object (confirm + confirmed chip) --------------- */

/* Action button to confirm a capture as an off-plan object. Violet to
   match the marker treatment in iconForItem (extra / not on plan). */
.reconcile-asbuilt-confirm-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 10px 14px;
    border: 1px solid #ddd6fe;
    border-radius: 10px;
    background: #f5f3ff;
    color: #6d28d9;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.reconcile-asbuilt-confirm-btn:hover {
    background: #ede9fe;
}

/* Wrapper that stacks match-from-capture buttons + the as-built fallback. */
.reconcile-capture-actions {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* "Match to E176 (3m)" — emerald-toned to match the matched-marker colour.
   Sits above the as-built fallback so the primary action is first. */
.reconcile-match-from-capture-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 10px 14px;
    border: 1px solid #6ee7b7;
    border-radius: 10px;
    background: #ecfdf5;
    color: #065f46;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    text-align: left;
}
.reconcile-match-from-capture-btn:hover {
    background: #d1fae5;
}
.reconcile-match-from-capture-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.reconcile-match-dist {
    margin-left: auto;
    font-size: 12px;
    font-weight: 500;
    color: #059669;
    white-space: nowrap;
}

/* Capture-side review navigator: [<] [Match to X] [>] in one row, mirroring
   the planned-object review banner. The match button stretches; the arrows
   stay fixed-width icon buttons. */
.reconcile-capture-nav {
    margin-top: 10px;
    align-items: center;
}
.reconcile-capture-nav .reconcile-match-from-capture-btn {
    flex: 1;
    min-width: 0;
    margin-top: 0;
}
.reconcile-capture-nav .reconcile-review-action-prev,
.reconcile-capture-nav .reconcile-review-action-next {
    flex: 0 0 auto;
}

/* The confirmed-as-built chip: violet card listing each off-plan object. */
.reconcile-asbuilt-chip {
    width: 100%;
    border: 1px solid #ddd6fe;
    border-radius: 12px;
    padding: 10px 12px;
    background: #f5f3ff;
}
.reconcile-asbuilt-chip-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: #6d28d9;
    font-size: 13px;
    margin-bottom: 8px;
}
.reconcile-asbuilt-chip-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 0;
    color: #4c1d95;
    font-size: 14px;
}
.reconcile-asbuilt-chip-row + .reconcile-asbuilt-chip-row {
    border-top: 1px solid #ede9fe;
}
.reconcile-asbuilt-chip-row strong {
    font-weight: 600;
    color: #4c1d95;
}
.reconcile-asbuilt-remove-btn {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 8px;
    background: #ede9fe;
    color: #7c3aed;
    cursor: pointer;
    font-size: 13px;
}
.reconcile-asbuilt-remove-btn:hover {
    background: #ddd6fe;
}
.reconcile-asbuilt-remove-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

/* =========================================================================
   PON REPORTS
   ========================================================================= */

/* Legacy standalone report button — superseded by the admin bar tiles below.
   Kept so any cached page version doesn't break; no longer rendered. */
.reconcile-pass-report-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 10px 12px 0;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid rgba(20, 184, 166, 0.5);
    background: linear-gradient(135deg, #0aa6c9, #14b8a6);
    color: #042027;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: filter 0.12s, transform 0.08s;
}
.reconcile-pass-report-btn:hover { filter: brightness(1.08); }
.reconcile-pass-report-btn:active { transform: scale(0.98); }
.reconcile-pass-report-btn i { font-size: 15px; }

/* =========================================================================
   PASS PICKER REDESIGN — admin bar, infra grid, section divider
   ========================================================================= */

/* ---- Admin bar: Network state + Generate PON report, 2-up neutral tiles -- */
.reconcile-admin-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 0;
    padding: 14px 10px;
    background: rgba(20, 184, 166, 0.07);
    border-top: 1px solid rgba(20, 184, 166, 0.22);
    border-bottom: 1px solid rgba(20, 184, 166, 0.22);
}
/* Hide individual admin tiles when toggled away (e.g. Network state tile
   hidden while the network state sub-view is active). */
.reconcile-admin-tile.is-hidden {
    display: none;
}
/* When only one tile remains visible, collapse the grid to a single column
   so the surviving tile stretches to full width. */
.reconcile-admin-bar.is-single {
    grid-template-columns: 1fr;
}
.reconcile-admin-tile {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    border-radius: 11px;
    background: rgba(148, 163, 184, 0.09);
    border: 1px solid rgba(148, 163, 184, 0.28);
    color: #cbd5e1;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, transform 0.08s;
}
.reconcile-admin-tile:hover {
    background: rgba(148, 163, 184, 0.17);
    border-color: rgba(148, 163, 184, 0.48);
}
.reconcile-admin-tile:active { transform: scale(0.98); }
.reconcile-admin-tile-icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(148, 163, 184, 0.18);
    color: #e2e8f0;
    font-size: 15px;
}
.reconcile-admin-tile-label {
    min-width: 0;
    line-height: 1.2;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* ---- Infrastructure vCard grid: wide-than-tall tiles, icon-left, 2-per-row */
.reconcile-pass-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.reconcile-pass-tile {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 56px;
    padding: 10px 12px;
    border-radius: 11px;
    background: rgba(20, 184, 166, 0.06);
    border: 1px solid rgba(20, 184, 166, 0.22);
    color: #fff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, transform 0.08s;
}
.reconcile-pass-tile:hover {
    background: rgba(20, 184, 166, 0.13);
    border-color: rgba(20, 184, 166, 0.45);
}
.reconcile-pass-tile:active { transform: scale(0.97); }
.reconcile-pass-tile.is-active {
    background: rgba(20, 184, 166, 0.18);
    border-color: rgba(20, 184, 166, 0.7);
}
.reconcile-pass-tile-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: rgba(20, 184, 166, 0.18);
    color: #14b8a6;
    font-size: 16px;
}
.reconcile-pass-tile-title {
    min-width: 0;
    line-height: 1.2;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
/* Sweep tile sits in the last infra grid slot; muted/ghost look */
.reconcile-pass-tile.is-sweep {
    background: rgba(148, 163, 184, 0.06);
    border-color: rgba(148, 163, 184, 0.22);
    border-style: dashed;
    color: #94a3b8;
}
.reconcile-pass-tile.is-sweep .reconcile-pass-tile-icon {
    background: rgba(148, 163, 184, 0.16);
    color: #64748b;
}

/* Customer endpoints featured card: amber accent, full-width row */
.reconcile-pass-card.is-endpoint {
    background: rgba(245, 158, 11, 0.10);
    border-color: rgba(245, 158, 11, 0.38);
}
.reconcile-pass-card.is-endpoint:hover {
    background: rgba(245, 158, 11, 0.17);
    border-color: rgba(245, 158, 11, 0.58);
}
.reconcile-pass-card.is-endpoint .reconcile-pass-card-icon {
    background: rgba(245, 158, 11, 0.20);
    color: #f59e0b;
}

/* Strong section divider — used for Infrastructure, Customer endpoints,
   and Stringing. All three sections get equal visual weight. */
.reconcile-section-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 20px 2px 8px;
}
.reconcile-section-divider:first-child,
.reconcile-pass-picker-body > .reconcile-section-divider:first-child {
    margin-top: 6px;
}
.reconcile-section-divider::before,
.reconcile-section-divider::after {
    content: '';
    flex: 1;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, rgba(20, 184, 166, 0.5), transparent);
}
.reconcile-section-divider span {
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #14b8a6;
    white-space: nowrap;
}

/* ---- Network state entry card (in pass picker body, top) ---- */
.reconcile-net-state-card {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 13px 14px;
    border-radius: 10px;
    background: rgba(99, 102, 241, 0.10);
    border: 1px solid rgba(99, 102, 241, 0.32);
    color: inherit;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    margin-bottom: 4px;
    transition: background 0.12s, border-color 0.12s, transform 0.08s;
}
.reconcile-net-state-card:hover {
    background: rgba(99, 102, 241, 0.18);
    border-color: rgba(99, 102, 241, 0.55);
}
.reconcile-net-state-card:active { transform: scale(0.98); }
.reconcile-net-state-card-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(99, 102, 241, 0.20);
    color: #a5b4fc;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}
.reconcile-net-state-card-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}
.reconcile-net-state-card-title {
    font-weight: 600;
    color: #c7d2fe;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.reconcile-net-state-card-sub {
    font-size: 12px;
    color: #a5b4fc;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: 0.85;
}
.reconcile-net-state-card-caret {
    color: #818cf8;
    opacity: 0.8;
    flex-shrink: 0;
}

/* ---- Divider between overview card and work passes ---- */
.reconcile-passes-divider {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0 4px;
}
.reconcile-passes-divider::before,
.reconcile-passes-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(20, 184, 166, 0.18);
}
.reconcile-passes-divider span {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(20, 184, 166, 0.55);
    white-space: nowrap;
}

/* ---- Network state stats panel ---- */
.reconcile-net-state {
    display: flex;
    flex-direction: column;
    gap: 0;
}


.reconcile-net-state-loading,
.reconcile-net-state-error {
    text-align: center;
    font-size: 14px;
    padding: 32px 16px;
}
.reconcile-net-state-loading { color: #9ec9c2; }
.reconcile-net-state-loading i { margin-right: 6px; }
.reconcile-net-state-error { color: #f87171; }
.reconcile-net-state-error i { margin-right: 6px; }

.reconcile-net-state-block {
    background: rgba(20, 184, 166, 0.04);
    border: 1px solid rgba(20, 184, 166, 0.14);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 10px;
}

.reconcile-net-state-block-title {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(20, 184, 166, 0.7);
    margin-bottom: 10px;
}

.reconcile-net-state-hero { margin-bottom: 10px; }

.reconcile-net-state-hero-bar-wrap {
    height: 7px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 6px;
}
.reconcile-net-state-hero-bar {
    height: 100%;
    background: #14b8a6;
    border-radius: 4px;
    transition: width 0.45s ease;
    max-width: 100%;
}
.reconcile-net-state-hero-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 13px;
    color: #c8e8e4;
    gap: 8px;
}
.reconcile-net-state-hero-line strong { color: #fff; }
.reconcile-net-state-hero-pct {
    font-size: 15px;
    font-weight: 700;
    color: #14b8a6;
    flex-shrink: 0;
}

.reconcile-net-state-rows {
    display: flex;
    flex-direction: column;
    gap: 7px;
    border-top: 1px solid rgba(20, 184, 166, 0.10);
    padding-top: 10px;
}

.reconcile-net-state-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}
.reconcile-net-state-row-label {
    flex: 0 0 38%;
    color: #9ec9c2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.reconcile-net-state-row-bar-wrap {
    flex: 1;
    height: 4px;
    background: rgba(255, 255, 255, 0.07);
    border-radius: 2px;
    overflow: hidden;
}
.reconcile-net-state-row-bar {
    height: 100%;
    background: #10b981;
    border-radius: 2px;
    max-width: 100%;
}
.reconcile-net-state-row-nums {
    flex: 0 0 auto;
    color: #e6f7f3;
    text-align: right;
    min-width: 56px;
    white-space: nowrap;
}
.reconcile-net-state-row-pct {
    color: #14b8a6;
    font-weight: 600;
    margin-left: 2px;
}

/* Report overlay (progress / share link / repository). Shares one backdrop. */
.report-overlay {
    position: fixed;
    inset: 0;
    background: rgba(2, 10, 12, 0.8);
    z-index: 3300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    backdrop-filter: blur(2px);
}
.report-overlay.hidden { display: none; }

.report-modal {
    width: min(460px, 100%);
    max-height: calc(100vh - 40px);
    background: #0d1f24;
    border: 1px solid rgba(20, 184, 166, 0.35);
    border-radius: 14px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.6);
    color: #e6f3f7;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.report-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(20, 184, 166, 0.22);
}
.report-modal-header h3 { margin: 0; font-size: 16px; font-weight: 600; color: #fff; flex: 1; }
.report-modal-close {
    background: none; border: none; color: #9ec9c2;
    font-size: 24px; line-height: 1; cursor: pointer; padding: 0 6px;
}
.report-modal-close:hover { color: #fff; }

.report-sub { padding: 12px 16px 0; margin: 0; font-size: 13px; color: #9ec9c2; }
.report-hint { padding: 0 16px; margin: 8px 0 0; font-size: 12px; color: #7f9aa3; }

.report-progress {
    display: flex; flex-direction: column; align-items: center;
    gap: 14px; padding: 32px 20px; text-align: center; color: #c5dde2;
}
.report-spinner {
    width: 34px; height: 34px; border-radius: 50%;
    border: 3px solid rgba(20, 184, 166, 0.25);
    border-top-color: #14b8a6;
    animation: report-spin 0.8s linear infinite;
}
@keyframes report-spin { to { transform: rotate(360deg); } }

/* Determinate build progress bar (replaces the spinner while compiling). */
.report-progress-bar {
    align-items: stretch;
    gap: 10px;
    padding: 28px 24px;
    text-align: left;
}
.report-bar {
    width: 100%; height: 10px; border-radius: 6px;
    background: rgba(20, 184, 166, 0.16);
    overflow: hidden;
}
.report-bar-fill {
    height: 100%; width: 0;
    border-radius: 6px;
    background: #14b8a6;
    transition: width 0.6s ease;
}
.report-stage { margin: 0; font-size: 14px; color: #c5dde2; }
.report-elapsed { margin: 0; font-size: 12px; color: #7f9aa3; }

.report-error {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 18px 16px; color: #ffd0c4;
}
.report-error i { font-size: 20px; color: #ff7a5c; margin-top: 2px; }
.report-error p { margin: 0; font-size: 14px; }

.report-link-row {
    display: flex; gap: 8px; padding: 12px 16px 0;
}
.report-link-anchor {
    flex: 1; min-width: 0;
    color: #14b8a6; font-size: 13px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    text-decoration: underline; align-self: center;
}
.report-link-anchor:hover { color: #5eead4; }
.report-stat-strip {
    display: flex; flex-wrap: wrap; gap: 14px;
    padding: 14px 16px; margin-top: 10px;
    border-top: 1px solid rgba(20, 184, 166, 0.12);
    font-size: 12px; color: #9ec9c2;
}
.report-stat-strip b { color: #fff; font-size: 15px; }

.report-modal-actions {
    display: flex; gap: 10px; justify-content: flex-end;
    padding: 14px 16px; border-top: 1px solid rgba(20, 184, 166, 0.12);
}
.report-btn {
    padding: 9px 16px; border-radius: 8px; cursor: pointer;
    border: 1px solid rgba(20, 184, 166, 0.4);
    background: rgba(20, 184, 166, 0.08); color: #e6f3f7;
    font-family: inherit; font-size: 13px; font-weight: 600; text-decoration: none;
    display: inline-flex; align-items: center;
    transition: filter 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}
.report-btn:not(.report-btn-primary):hover { background: rgba(20, 184, 166, 0.16); }
.report-btn-primary { background: #14b8a6; color: #042027; border-color: #14b8a6; }
.report-btn-primary:hover,
.report-btn-primary:focus,
.report-btn-primary:active {
    background: #14b8a6; color: #042027; border-color: #14b8a6;
    filter: brightness(1.08);
}

.report-list {
    padding: 8px; overflow-y: auto;
    display: flex; flex-direction: column; gap: 8px;
}
.report-group {
    border-radius: 10px;
    background: rgba(20, 184, 166, 0.05);
    border: 1px solid rgba(20, 184, 166, 0.18);
    overflow: hidden;
}
.report-group > .report-item {
    background: none;
    border: none;
    border-radius: 0;
}
.report-archive {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0 8px 8px;
    border-top: 1px solid rgba(20, 184, 166, 0.12);
}
.report-archive.hidden { display: none; }
.report-archive-label {
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.05em; color: #7f9aa3;
    padding: 8px 4px 4px;
}
.report-archive-title {
    font-size: 13px; font-weight: 600; color: #7f9aa3;
    padding: 4px 12px 10px;
    border-bottom: 1px solid rgba(20, 184, 166, 0.12);
    margin-bottom: 4px;
}
.report-archive-toggle.is-open i { transform: rotate(180deg); }
.report-archive-toggle i { transition: transform 0.15s ease; }
.report-zone-filter {
    display: flex; flex-wrap: wrap; gap: 6px;
    padding: 0 12px 10px;
}
.report-zone-pill {
    padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 600;
    border: 1px solid rgba(20, 184, 166, 0.3);
    background: rgba(20, 184, 166, 0.06); color: #7f9aa3;
    cursor: pointer;
}
.report-zone-pill:hover { background: rgba(20, 184, 166, 0.14); color: #cdeae5; }
.report-zone-pill.is-active { background: rgba(20, 184, 166, 0.22); color: #6ee7d4; border-color: rgba(20, 184, 166, 0.5); }
.report-modal-back {
    width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid rgba(20, 184, 166, 0.3);
    background: rgba(20, 184, 166, 0.08); color: #cdeae5;
    cursor: pointer; font-size: 14px;
}
.report-modal-back:hover { background: rgba(20, 184, 166, 0.18); color: #fff; }
.report-item.is-nested {
    background: rgba(2, 10, 12, 0.35);
    border-color: rgba(20, 184, 166, 0.12);
}
.report-item {
    display: flex; flex-direction: column; gap: 10px;
    padding: 10px 12px; border-radius: 10px;
    background: rgba(20, 184, 166, 0.05);
    border: 1px solid rgba(20, 184, 166, 0.18);
}
.report-item-main { flex: 1; min-width: 0; }
.report-item-title {
    font-size: 14px; font-weight: 600; color: #fff;
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    line-height: 1.3;
}
.report-item-badge-row { margin-top: 5px; }
.report-item-actions { display: flex; gap: 10px; flex-shrink: 0; padding-top: 1px; }
.report-icon-btn {
    width: 36px; height: 36px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid rgba(20, 184, 166, 0.3);
    background: rgba(20, 184, 166, 0.08); color: #cdeae5;
    cursor: pointer; text-decoration: none; font-size: 14px;
}
.report-icon-btn:hover { background: rgba(20, 184, 166, 0.18); color: #fff; }
.report-icon-danger { border-color: rgba(255, 122, 92, 0.4); color: #ff9c83; }
.report-icon-danger:hover { background: rgba(255, 122, 92, 0.18); color: #fff; }

.report-pick-row {
    width: 100%;
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; padding: 12px 14px; margin-bottom: 8px;
    border-radius: 10px; cursor: pointer; text-align: left;
    border: 1px solid rgba(20, 184, 166, 0.3);
    background: rgba(20, 184, 166, 0.08); color: #e7f5f2; font-size: 14px;
}
.report-pick-row:hover { background: rgba(20, 184, 166, 0.18); color: #fff; }
.report-pick-name { display: inline-flex; align-items: center; gap: 9px; }
.report-pick-hint { font-size: 12px; color: #9fb8be; margin: 2px 2px 10px; }
.report-new-btn { color: #6ee7d4; }

.report-badge {
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.04em; padding: 2px 7px; border-radius: 999px;
    background: rgba(127, 154, 163, 0.25); color: #b9ccd3;
}
.report-badge.is-current { background: rgba(20, 184, 166, 0.25); color: #6ee7d4; }
.report-badge.is-building { background: rgba(245, 167, 43, 0.22); color: #f3c37a; }
.report-badge.is-failed { background: rgba(255, 122, 92, 0.22); color: #ff9c83; }

/* =====================================================================
   ADMIN VIEW — cross-user stats dashboard (dark overlay, teal accent)
   ===================================================================== */
.admin-overlay {
    position: fixed;
    inset: 0;
    background: rgba(2, 10, 12, 0.8);
    z-index: 3300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    backdrop-filter: blur(2px);
}
/* Reviews badge on burger-menu button */
.reviews-badge {
    position: absolute;
    top: 6px;
    right: 8px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9px;
    background: #e53935;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    pointer-events: none;
}
.reviews-badge.hidden { display: none; }

/* Review-queue overlay — no backdrop so map stays visible and interactive */
.review-overlay {
    position: fixed; bottom: 0; left: 0; right: 0;
    z-index: 3100;
    display: flex; align-items: flex-end; justify-content: center;
    pointer-events: none; /* pass map events through the empty space */
}
.review-overlay.hidden { display: none; }
.review-modal {
    width: min(560px, 100%);
    height: 50vh;
    background: #fff;
    border-radius: 16px 16px 0 0;
    display: flex; flex-direction: column;
    overflow: hidden;
    box-shadow: 0 -4px 24px rgba(0,0,0,0.22);
    pointer-events: all;   /* modal itself is fully interactive */
}
.review-modal-header {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid #eee;
    flex-shrink: 0;
}
.review-modal-title { font-size: 15px; font-weight: 600; color: #1a1a1a; }
.review-modal-title i { color: #e53935; margin-right: 8px; }
.review-modal-nav {
    display: flex; align-items: center; gap: 4px;
    margin-left: auto;
}
.review-nav-btn {
    background: none; border: 2px solid #dadce0; border-radius: 8px;
    width: 42px; height: 42px;
    display: flex; align-items: center; justify-content: center;
    font-size: 28px; line-height: 1; font-weight: 700;
    cursor: pointer; color: #333;
    transition: background 0.13s, border-color 0.13s;
    padding: 0;
}
.review-nav-btn:hover:not(:disabled) { background: #f0f4ff; border-color: #1a73e8; color: #1a73e8; }
.review-nav-btn:disabled { opacity: 0.35; cursor: default; }
.review-nav-counter {
    font-size: 15px; font-weight: 600; color: #444;
    min-width: 48px; text-align: center;
}
.review-modal-close {
    background: none; border: none; font-size: 22px; line-height: 1;
    cursor: pointer; color: #666; padding: 0 4px; flex-shrink: 0;
}
.review-modal-close:hover { color: #1a1a1a; }
.review-modal-body {
    flex: 1; overflow-y: auto;
    display: flex; flex-direction: column;
}

/* Single-card carousel layout */
.review-card {
    display: flex; flex-direction: column;
    flex: 1; min-height: 0;
}
.review-card-media {
    flex-shrink: 0;
    height: 40%;
    background: #f0f0f0;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.review-card-img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.review-card-img-clickable { cursor: zoom-in; }
.review-card-img-clickable:hover { opacity: 0.9; }
.review-card-img-fallback {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%;
    font-size: 40px; color: #bbb;
}
.review-card-body {
    flex: 1; min-height: 0;
    padding: 7px 12px 4px;
    display: flex; flex-direction: column; gap: 2px;
    overflow-y: hidden;
}
.review-card-class {
    font-size: 14px; font-weight: 700; color: #1a1a1a;
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.review-card-was {
    font-size: 11px; font-weight: 400; color: #888;
}
.review-card-note { font-size: 12px; color: #b06000; }
.review-card-note i { margin-right: 4px; }
.review-card-suggested { font-size: 12px; color: #1a73e8; }
.review-card-suggested i { margin-right: 4px; }
.review-card-meta {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    font-size: 11px; color: #666; margin-top: 1px;
}
.review-card-meta i { color: #999; margin-right: 2px; }
.review-item-map-btn i { color: #1a73e8; }
.review-item-map-btn {
    flex-shrink: 0;
    margin-left: auto;
    background: #f0f4ff; border-radius: 50%; border: none;
    width: 26px; height: 26px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: #1a73e8; font-size: 13px;
    transition: background 0.15s;
}
.review-item-map-btn:hover { background: #dce8fd; }
.review-card-actions {
    flex-shrink: 0;
    display: flex; gap: 8px;
    padding: 6px 12px 8px;
    border-top: 1px solid #f0f0f0;
    background: #fff;
}
.review-action-btn {
    flex: 1;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 5px 4px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    border: 1.5px solid;
    transition: opacity 0.15s;
}
.review-action-btn i {
    font-size: 13px;
    line-height: 1;
}
.review-action-btn:hover { opacity: 0.82; }
.review-action-accept {
    background: #e6f4ea; color: #1e7e34; border-color: #a8d5b5;
}
.review-action-keep {
    background: #f5f5f5; color: #444; border-color: #d0d0d0;
}
.review-action-reclassify {
    background: #e8f0fe; color: #1a73e8; border-color: #b0c8f9;
}
.review-action-btn:disabled { opacity: 0.45; cursor: default; }

/* Compact capture info popup shown while the review queue is open */
.rnp-wrap .mapboxgl-popup-content {
    padding: 10px 14px;
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.18);
    font-family: inherit;
    min-width: 140px;
}
.rnp-class {
    font-size: 14px; font-weight: 700; color: #1a1a1a;
    margin-bottom: 5px;
}
.rnp-meta {
    font-size: 12px; color: #666; margin-top: 2px;
}
.rnp-meta i { color: #999; margin-right: 5px; }

/* Neighbor "peek" card — a top-pinned preview of a nearby capture tapped
   while the review queue is open. Sits above the map but never overlaps the
   bottom-anchored review sheet, so the admin can glance at a neighbor's photo
   without losing the object they're reviewing. */
.review-peek {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 12px);
    left: 50%;
    transform: translateX(-50%);
    width: min(420px, calc(100% - 24px));
    z-index: 3200; /* above markers/overlay (3100), below lightbox (5000) */
    display: flex;
    align-items: stretch;
    gap: 10px;
    padding: 8px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.24);
    animation: review-peek-in 0.16s ease-out;
}
@keyframes review-peek-in {
    from { opacity: 0; transform: translate(-50%, -8px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}
.review-peek-media {
    flex-shrink: 0;
    width: 84px; height: 84px;
    border-radius: 10px;
    overflow: hidden;
    background: #f0f0f0;
    display: flex; align-items: center; justify-content: center;
}
.review-peek-img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.review-peek-img-clickable { cursor: zoom-in; }
.review-peek-img-clickable:active { opacity: 0.85; }
.review-peek-fallback {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%;
    font-size: 30px; color: #bbb;
}
.review-peek-body {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; gap: 4px;
    padding: 2px 24px 2px 0; /* right pad clears the close button */
}
.review-peek-class {
    font-size: 15px; font-weight: 700; color: #1a1a1a;
    line-height: 1.2;
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.review-peek-was {
    font-size: 11px; font-weight: 600; color: #b26a00;
    background: #fff3e0; border-radius: 6px; padding: 1px 6px;
}
.review-peek-meta {
    display: flex; flex-wrap: wrap; gap: 4px 10px;
    font-size: 12px; color: #666;
}
.review-peek-meta i { color: #999; margin-right: 4px; }
.review-peek-flash {
    margin-top: auto;
    align-self: flex-start;
    background: #f1f3f4; border: none; border-radius: 18px;
    padding: 6px 12px;
    font-size: 12px; font-weight: 600; color: #1a73e8;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
    transition: background 0.13s;
}
.review-peek-flash:hover { background: #e3eafc; }
.review-peek-flash:active { background: #d4e0fb; }
.review-peek-nav {
    position: absolute;
    bottom: 6px; right: 10px;
    display: flex; align-items: center; gap: 4px;
}
.review-peek-counter { font-size: 11px; color: #888; min-width: 34px; text-align: center; }
.review-peek-prev, .review-peek-next {
    background: #f1f3f4; border: none; border-radius: 8px;
    width: 26px; height: 26px;
    font-size: 18px; line-height: 1; color: #333;
    cursor: pointer; padding: 0;
    display: flex; align-items: center; justify-content: center;
}
.review-peek-prev:disabled, .review-peek-next:disabled { opacity: 0.35; cursor: default; }
.review-peek-close {
    position: absolute;
    top: 6px; right: 8px;
    background: none; border: none;
    font-size: 20px; line-height: 1; color: #888;
    cursor: pointer; padding: 2px 4px;
}
.review-peek-close:hover { color: #1a1a1a; }

/* Clickable placeholder for notes/audio in review peek */
.review-peek-fallback-action {
    cursor: pointer;
    flex-direction: column;
    gap: 4px;
    background: #f1f3f4;
    border-radius: 10px;
    transition: background 0.15s, color 0.15s;
}
.review-peek-fallback-action:hover { background: #e3eafc; color: #1a73e8; }
.review-peek-fallback-action:active { background: #d4e0fb; }
.review-peek-fallback-label {
    font-size: 10px;
    font-weight: 600;
    color: #666;
    letter-spacing: 0.3px;
}
.review-peek-fallback-action:hover .review-peek-fallback-label { color: #1a73e8; }

/* Clickable placeholder for notes/audio in review card (admin queue) */
.review-card-fallback-action {
    cursor: pointer;
    flex-direction: column;
    gap: 6px;
    background: #f1f3f4;
    border-radius: 10px;
    transition: background 0.15s, color 0.15s;
}
.review-card-fallback-action:hover { background: #e3eafc; color: #1a73e8; }
.review-card-fallback-action:active { background: #d4e0fb; }
.review-card-fallback-label {
    font-size: 11px;
    font-weight: 600;
    color: #666;
}
.review-card-fallback-action:hover .review-card-fallback-label { color: #1a73e8; }

/* Content modal — full-screen overlay used for note viewer and audio player */
.peek-content-modal {
    position: fixed;
    inset: 0;
    z-index: 5000;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.peek-content-modal-inner {
    background: #1e1e1e;
    border-radius: 14px;
    overflow: hidden;
    width: 100%;
    max-width: 480px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
}
.peek-content-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: #2a2a2a;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    gap: 8px;
    flex-shrink: 0;
}
.peek-content-modal-header i { color: #aaa; margin-right: 6px; }
.peek-content-modal-close {
    background: none;
    border: none;
    color: #999;
    font-size: 18px;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 6px;
    line-height: 1;
    transition: color 0.15s, background 0.15s;
}
.peek-content-modal-close:hover { color: #fff; background: rgba(255, 255, 255, 0.1); }
.peek-content-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.peek-note-text {
    color: #e8e8e8;
    font-size: 15px;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0;
}
.peek-note-empty {
    color: #666;
    font-style: italic;
    font-size: 14px;
    margin: 0;
    text-align: center;
    padding: 20px 0;
}
.peek-audio-player-wrap {
    background: #2a2a2a;
    border-radius: 10px;
    padding: 14px;
}
.peek-audio-player-wrap audio { width: 100%; display: block; }
.peek-transcription-label {
    font-size: 11px;
    font-weight: 700;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 6px;
}
.peek-transcription-text {
    color: #e0e0e0;
    font-size: 14px;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0;
}

/* Inline category chip picker that expands below a review card */
.review-cat-picker {
    padding: 10px 16px 12px;
    border-top: 1px solid #e0e0e0;
    background: #f8f9ff;
}
.review-cat-chips {
    display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px;
}
.review-cat-chip {
    padding: 6px 12px; border: 1.5px solid #dadce0; border-radius: 18px;
    background: #fff; font-size: 12px; color: #333; cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}
.review-cat-chip.selected {
    background: #e8f0fe; border-color: #1a73e8; color: #1a73e8; font-weight: 600;
}
.review-cat-confirm {
    padding: 7px 18px; border-radius: 18px; border: none;
    background: #1a73e8; color: #fff; font-size: 13px; font-weight: 600;
    cursor: pointer;
}
.review-cat-confirm:disabled { background: #a8c7fa; cursor: default; }
.review-cat-cancel {
    padding: 7px 14px; border-radius: 18px;
    border: 1.5px solid #dadce0; background: #fff;
    color: #555; font-size: 13px; cursor: pointer; margin-left: 6px;
}

.review-empty {
    text-align: center; padding: 32px 16px;
    color: #888; font-size: 14px;
}
.review-empty i { font-size: 28px; color: #ccc; display: block; margin-bottom: 8px; }

.admin-overlay.hidden { display: none; }

.admin-modal {
    width: min(560px, 100%);
    max-height: calc(100vh - 40px);
    background: #0d1f24;
    border: 1px solid rgba(20, 184, 166, 0.35);
    border-radius: 14px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.6);
    color: #e6f3f7;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.admin-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(20, 184, 166, 0.22);
}
.admin-modal-title { font-size: 16px; font-weight: 600; color: #fff; }
.admin-modal-title i { color: #14b8a6; margin-right: 6px; }
.admin-modal-close {
    background: none; border: none; color: #9ec9c2;
    font-size: 24px; line-height: 1; cursor: pointer; padding: 0 6px;
}
.admin-modal-close:hover { color: #fff; }

.admin-jumper {
    display: flex;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(20, 184, 166, 0.12);
}
.admin-field { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.admin-field span { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: #7f9aa3; }
.admin-picker-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: rgba(20, 184, 166, 0.08);
    border: 1px solid rgba(20, 184, 166, 0.35);
    color: #e6f3f7;
    border-radius: 8px;
    padding: 8px 10px;
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
    text-align: left;
    gap: 6px;
}
.admin-picker-btn:hover:not(:disabled) { background: rgba(20, 184, 166, 0.15); }
.admin-picker-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.admin-picker-btn-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-picker-btn-icon { font-size: 10px; color: #7f9aa3; flex-shrink: 0; }

/* The zone/PON scope picker reuses the .network-picker component (see the
   "View Network" flow). Overrides retheme it from neon-green to admin teal
   and bump the z-index above the Admin modal (3300). */
.admin-scope-picker { z-index: 3400; }

.admin-scope-picker .network-picker {
    border-color: rgba(20, 184, 166, 0.35);
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.6), 0 0 30px rgba(20, 184, 166, 0.12);
}
.admin-scope-picker .network-picker-header {
    border-bottom-color: rgba(20, 184, 166, 0.2);
    background: linear-gradient(180deg, rgba(20, 184, 166, 0.08), transparent);
}
.admin-scope-picker .network-picker-title {
    color: #14b8a6;
    text-shadow: 0 0 8px rgba(20, 184, 166, 0.35);
}
.admin-scope-picker .network-picker-card {
    background: rgba(20, 184, 166, 0.06);
    border-color: rgba(20, 184, 166, 0.2);
}
.admin-scope-picker .network-picker-card:hover,
.admin-scope-picker .network-picker-card:focus {
    background: rgba(20, 184, 166, 0.12);
    border-color: rgba(20, 184, 166, 0.45);
}
.admin-scope-picker .network-picker-card-icon {
    background: rgba(20, 184, 166, 0.15);
    color: #14b8a6;
}
.admin-scope-picker .network-picker-card-active {
    background: rgba(20, 184, 166, 0.15);
    border-color: rgba(20, 184, 166, 0.6);
}
.admin-scope-picker .network-picker-card-check { color: #14b8a6; }

/* Compact searchable PON list (used when PON count is large) */
.admin-pon-search-wrap {
    position: relative;
    margin-bottom: 10px;
}
.admin-pon-search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #7f9aa3;
    font-size: 13px;
    pointer-events: none;
}
.admin-pon-search {
    width: 100%;
    box-sizing: border-box;
    background: rgba(20, 184, 166, 0.08);
    border: 1px solid rgba(20, 184, 166, 0.35);
    border-radius: 8px;
    padding: 8px 10px 8px 32px;
    color: #e6f3f7;
    font-family: inherit;
    font-size: 14px;
    outline: none;
}
.admin-pon-search::placeholder { color: #7f9aa3; }
.admin-pon-search:focus { border-color: #14b8a6; }
.admin-pon-divider {
    height: 1px;
    background: rgba(20, 184, 166, 0.15);
    margin: 0 0 8px;
}
/* Pinned "All PONs" row */
.admin-pon-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 9px 12px;
    background: rgba(20, 184, 166, 0.06);
    border: 1px solid rgba(20, 184, 166, 0.2);
    border-radius: 8px;
    color: #c8dfe6;
    font-size: 14px;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
    margin-bottom: 4px;
}
.admin-pon-item:hover { background: rgba(20, 184, 166, 0.12); border-color: rgba(20, 184, 166, 0.4); }
.admin-pon-item-active { color: #14b8a6; font-weight: 600; border-color: rgba(20, 184, 166, 0.5); }
.admin-pon-item-check { color: #14b8a6; font-size: 13px; flex-shrink: 0; }
/* Chip grid — mirrors .network-chip-list / .network-chip but in teal */
.admin-pon-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 2px 0;
}
.admin-pon-chip {
    background: rgba(20, 184, 166, 0.06);
    color: #c8dfe6;
    border: 1px solid rgba(20, 184, 166, 0.25);
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-family: 'Roboto Mono', monospace;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}
.admin-pon-chip:hover { background: rgba(20, 184, 166, 0.14); border-color: rgba(20, 184, 166, 0.5); }
.admin-pon-chip.selected {
    background: #14b8a6;
    color: #021a18;
    border-color: #14b8a6;
    font-weight: 600;
    box-shadow: 0 0 10px rgba(20, 184, 166, 0.45);
}
.admin-pon-empty { padding: 12px 4px; font-size: 13px; color: #7f9aa3; font-style: italic; }

.admin-body {
    flex: 1;
    min-height: 0;
    padding: 8px 16px 18px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.admin-loading, .admin-error {
    padding: 28px 8px; text-align: center; color: #9ec9c2; font-size: 14px;
}
.admin-error { color: #ff9c83; }

.admin-section { margin-top: 16px; }
.admin-section-title {
    display: flex; align-items: center; gap: 8px;
    margin: 0 0 10px; font-size: 13px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.04em; color: #9ec9c2;
}
.admin-section-title i { color: #14b8a6; }
.admin-scope-pill {
    margin-left: auto;
    font-size: 11px; font-weight: 600; letter-spacing: 0;
    text-transform: none;
    background: rgba(20, 184, 166, 0.18); color: #6ee7d4;
    padding: 2px 10px; border-radius: 999px;
}

.admin-card-row { display: flex; gap: 10px; }
.admin-stat-card {
    flex: 1;
    background: rgba(20, 184, 166, 0.08);
    border: 1px solid rgba(20, 184, 166, 0.22);
    border-radius: 10px;
    padding: 14px 10px;
    text-align: center;
}
.admin-stat-value { font-size: 28px; font-weight: 700; color: #fff; font-family: 'Roboto Mono', monospace; }
.admin-stat-label { margin-top: 4px; font-size: 11px; color: #9ec9c2; }

.admin-window-grid { display: flex; gap: 10px; }
.admin-window-col {
    flex: 1;
    background: rgba(20, 184, 166, 0.05);
    border: 1px solid rgba(20, 184, 166, 0.15);
    border-radius: 10px;
    padding: 10px;
    min-width: 0;
}
.admin-window-head {
    font-size: 11px; color: #7f9aa3; text-align: center;
    margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.03em;
}

.admin-rank-list { list-style: none; margin: 0; padding: 0; }
.admin-rank-item {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 0; font-size: 13px;
}
.admin-rank-pos {
    flex: 0 0 18px; height: 18px; line-height: 18px; text-align: center;
    background: rgba(20, 184, 166, 0.2); color: #6ee7d4;
    border-radius: 50%; font-size: 11px; font-weight: 700;
}
.admin-rank-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-rank-count { font-family: 'Roboto Mono', monospace; font-weight: 700; color: #fff; }
.admin-rank-empty { color: #7f9aa3; font-size: 12px; font-style: italic; text-align: center; padding: 6px 0; }

.admin-linked-total {
    text-align: center; font-size: 24px; font-weight: 700; color: #fff;
    font-family: 'Roboto Mono', monospace;
}
.admin-linked-total span {
    display: block; font-size: 10px; font-weight: 400; color: #7f9aa3;
    font-family: inherit; text-transform: uppercase; letter-spacing: 0.05em;
}
.admin-cat-list { list-style: none; margin: 8px 0 0; padding: 0; }
.admin-cat-item {
    display: flex; justify-content: space-between; gap: 6px;
    padding: 3px 0; font-size: 12px; color: #c5dde2;
}
.admin-cat-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-cat-count { font-family: 'Roboto Mono', monospace; color: #fff; }

/* ---- Build Conformance section ----------------------------------------- */
.admin-conformance {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

/* Headline dials — Progress + Quality side by side */
.admin-gauge-pair {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Circular conic-gradient gauge */
.admin-gauge {
    flex: 0 0 auto;
    width: 108px; height: 108px;
    border-radius: 50%;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    /* background set inline via conic-gradient */
    box-shadow: inset 0 0 0 10px rgba(13, 31, 36, 0.85);
}
.admin-gauge-value {
    font-size: 26px; font-weight: 700; color: #fff;
    font-family: 'Roboto Mono', monospace; line-height: 1;
}
.admin-gauge-label {
    margin-top: 3px; font-size: 10px; color: #9ec9c2;
    text-transform: uppercase; letter-spacing: 0.05em;
}

/* Labelled sub-axis bars */
.admin-axis-list {
    flex: 1 1 180px; list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 10px;
}
.admin-axis-row {
    display: grid;
    grid-template-columns: 72px 1fr 38px;
    align-items: center; gap: 10px;
    font-size: 13px;
}
.admin-axis-name { color: #c8dfe6; }
.admin-axis-bar {
    height: 7px; border-radius: 4px;
    background: rgba(255,255,255,0.08); overflow: hidden;
}
.admin-axis-bar > span {
    display: block; height: 100%; border-radius: 4px;
    transition: width 0.4s ease;
}
.admin-axis-pct {
    text-align: right; font-variant-numeric: tabular-nums;
    color: #e6f3f7; font-size: 12px;
}

/* Deviation notes */
.admin-deviation-note {
    margin-top: 10px; font-size: 13px; color: #e0a458;
    display: flex; align-items: center; gap: 6px;
}
.admin-deviation-note i { flex-shrink: 0; }
.admin-deviation-ok {
    margin-top: 10px; font-size: 13px; color: #2ecc71;
    display: flex; align-items: center; gap: 6px;
}
.admin-deviation-ok i { flex-shrink: 0; }

/* Empty conformance state (no captures yet) */
.admin-conf-empty {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 4px; font-size: 13px; color: #7f9aa3;
}
.admin-conf-empty i { font-size: 18px; color: #5b6472; flex-shrink: 0; }

/* Completion note — "X of Y objects built · Z% complete" */
.admin-completion-note {
    display: flex; align-items: center; gap: 6px;
    margin-top: 10px; font-size: 13px; color: #9ec9c2;
}
.admin-completion-note i { color: #14b8a6; font-size: 12px; }
.admin-completion-pct {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
    color: #6ee7d4; font-weight: 600;
}

/* As-built strung block — kind breakdown with matched/total counts */
.admin-strung-block {
    margin-top: 10px;
}
.admin-strung-title {
    display: flex; align-items: center; gap: 6px;
    font-size: 13px; color: #9ec9c2; margin-bottom: 6px;
}
.admin-strung-title i { color: #14b8a6; font-size: 12px; flex-shrink: 0; }
.admin-strung-hint {
    margin-left: auto; font-size: 10px; color: #5b6472;
    text-transform: uppercase; letter-spacing: 0.05em;
}
.admin-strung-grid {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 4px 14px;
    padding-left: 18px;
}
.admin-strung-kind {
    font-size: 12px; color: #c8dfe6;
}
.admin-strung-count {
    font-size: 12px; color: #9ec9c2;
    font-variant-numeric: tabular-nums;
}
.admin-strung-count strong { color: #e6f3f7; }

/* ---- PON completion ranking ------------------------------------------- */
.admin-pon-rank-list {
    display: flex; flex-direction: column; gap: 3px;
}
.admin-pon-rank-header {
    display: grid;
    grid-template-columns: 22px 60px 1fr 38px 44px 48px;
    gap: 8px; align-items: center;
    padding: 0 6px 4px;
    font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em;
    color: #5b6472; border-bottom: 1px solid rgba(20,184,166,0.12);
}
.admin-pon-rank-row {
    display: grid;
    grid-template-columns: 22px 60px 1fr 38px 44px 48px;
    gap: 8px; align-items: center;
    padding: 7px 6px; border-radius: 8px;
    cursor: pointer; transition: background 0.12s;
    font-size: 13px;
}
.admin-pon-rank-row:hover { background: rgba(20,184,166,0.08); }
.admin-pon-rank-row.admin-pon-rank-hidden { display: none; }

.admin-pon-rank-num {
    font-size: 11px; color: #5b6472;
    font-variant-numeric: tabular-nums; text-align: right;
}
.admin-pon-rank-pon {
    font-family: 'Roboto Mono', monospace; font-size: 12px;
    color: #14b8a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.admin-pon-rank-bar {
    height: 7px; border-radius: 4px;
    background: rgba(255,255,255,0.07); overflow: hidden;
}
.admin-pon-rank-bar > span {
    display: block; height: 100%; border-radius: 4px;
}
.admin-pon-rank-pct {
    text-align: right; font-variant-numeric: tabular-nums;
    font-size: 12px; color: #e6f3f7; font-weight: 600;
}
.admin-pon-rank-score {
    text-align: right; font-variant-numeric: tabular-nums;
    font-size: 12px; color: #9ec9c2;
}
.admin-pon-rank-frac {
    text-align: right; font-variant-numeric: tabular-nums;
    font-size: 11px; color: #5b6472;
}

.admin-pon-rank-toggle {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    width: 100%; margin-top: 8px; padding: 8px;
    background: none; border: 1px solid rgba(20,184,166,0.2);
    border-radius: 8px; color: #7f9aa3; font-size: 12px;
    cursor: pointer; transition: background 0.12s, color 0.12s;
    font-family: inherit;
}
.admin-pon-rank-toggle:hover { background: rgba(20,184,166,0.08); color: #14b8a6; }

/* ---- Dot-whisker accuracy chart --------------------------------------- */
.admin-acc-chart {
    display: flex; flex-direction: column; gap: 12px;
}

/* Tiny axis label above the rows */
.admin-acc-axis {
    display: flex; justify-content: space-between;
    font-size: 10px; color: #5b6472;
    padding: 0 90px 0 74px; /* aligns with the track column */
}
.admin-acc-axis-tol { color: #7f9aa3; }

.admin-acc-row {
    display: grid;
    grid-template-columns: 72px 1fr 90px;
    align-items: center; gap: 10px;
    font-size: 13px;
}
.admin-acc-name { color: #c8dfe6; }

/* The horizontal track */
.admin-acc-track {
    position: relative; height: 18px;
    background: rgba(255,255,255,0.05); border-radius: 9px;
}

/* Green "in tolerance" zone: 0 → --limit */
.admin-acc-zone {
    position: absolute; left: 0; width: var(--limit);
    top: 0; bottom: 0;
    background: rgba(46, 204, 113, 0.10);
    border-radius: 9px 0 0 9px;
}

/* Tolerance boundary line */
.admin-acc-limit {
    position: absolute; left: var(--limit);
    top: -2px; bottom: -2px; width: 2px;
    background: rgba(255,255,255,0.18);
}

/* ±σ whisker bar */
.admin-acc-whisker {
    position: absolute; top: 50%;
    left: var(--lo); width: calc(var(--hi) - var(--lo));
    height: 4px; transform: translateY(-50%);
    background: rgba(255,255,255,0.18); border-radius: 2px;
}

/* Mean dot */
.admin-acc-dot {
    position: absolute; top: 50%; left: var(--mean);
    width: 13px; height: 13px; border-radius: 50%;
    transform: translate(-50%, -50%);
    border: 2px solid #0d1f24;
}
.admin-acc-ok   { background: #2ecc71; }
.admin-acc-warn { background: #e0a458; }
.admin-acc-bad  { background: #e35b5b; }

/* Right-side value label */
.admin-acc-val {
    text-align: right; font-variant-numeric: tabular-nums;
    color: #e6f3f7; font-size: 12px; white-space: nowrap;
}
.admin-acc-val em {
    color: #7f9aa3; font-style: normal; margin-left: 5px;
}

@media (max-width: 480px) {
    .admin-card-row, .admin-window-grid { flex-direction: column; }
    .admin-acc-axis { padding: 0 84px 0 68px; }
}

/* ---------------------------------------------------------------------------
   Capture bottom-sheet collapsible details toggle
   (user / date / accuracy / category — hidden by default to maximise
   the map real-estate while the supervisor is reconciling)
   --------------------------------------------------------------------------- */

.capture-info-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    background: none;
    border: none;
    border-top: 1px solid #f0f0f0;
    padding: 5px 0 3px;
    margin-top: 4px;
    text-align: left;
    cursor: pointer;
    color: #555;
    font-size: 13px;
}
.capture-info-toggle:active { opacity: 0.75; }

.capture-info-toggle-icon {
    color: #888;
    font-size: 13px;
    flex-shrink: 0;
}
.capture-info-toggle-label {
    flex: 1;
    font-weight: 500;
    color: #333;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.capture-info-caret {
    color: #999;
    font-size: 12px;
    flex-shrink: 0;
    transition: transform 0.2s;
}

.capture-info-section {
    padding: 4px 0 0;
}
.capture-info-section .capture-category-block {
    margin-top: 4px;
}

/* ---------------------------------------------------------------------------
   Planned-object "not built" sheet
   Shown when a supervisor taps a planned point with no nearby field captures.
   Fixed to the bottom of the screen, slides up like the bottom sheet.
   --------------------------------------------------------------------------- */

.planned-only-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2200;
    background: #fff;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -4px 24px rgba(0,0,0,0.18);
    transform: translateY(100%);
    transition: transform 0.25s cubic-bezier(0.32, 0, 0.67, 0);
    pointer-events: all;
}
.planned-only-sheet.is-visible {
    transform: translateY(0);
    transition: transform 0.28s cubic-bezier(0.33, 1, 0.68, 1);
}
.planned-only-sheet-inner {
    padding: 20px 16px 28px;
    max-width: 480px;
    margin: 0 auto;
}
.planned-only-header {
    margin-bottom: 14px;
}
.planned-only-title {
    font-size: 17px;
    font-weight: 700;
    color: #07202e;
    line-height: 1.3;
}
.planned-only-category {
    font-size: 13px;
    color: #6b7280;
    margin-top: 3px;
}
.planned-only-notice {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: #fef9ec;
    border: 1px solid #fcd34d;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 13px;
    color: #78350f;
    line-height: 1.4;
    margin-bottom: 16px;
}
.planned-only-notice i {
    color: #f59e0b;
    font-size: 14px;
    flex-shrink: 0;
    margin-top: 1px;
}
.planned-only-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.planned-only-mark,
.planned-only-restore {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: background 0.15s;
}
.planned-only-mark {
    background: #374151;
    color: #fff;
}
.planned-only-mark:hover   { background: #1f2937; }
.planned-only-mark:active  { background: #111827; }
.planned-only-restore {
    background: #ecfdf5;
    color: #065f46;
    border: 1.5px solid #a7f3d0;
}
.planned-only-restore:hover  { background: #d1fae5; }
.planned-only-restore:active { background: #a7f3d0; }
.planned-only-cancel {
    width: 100%;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    background: none;
    border: 1px solid #e5e7eb;
    color: #6b7280;
    transition: background 0.15s;
}
.planned-only-cancel:hover  { background: #f9fafb; }
.planned-only-cancel:active { background: #f3f4f6; }

/* ============================================================
   Superuser user-picker
   ============================================================ */
.user-picker {
    width: 100%;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    gap: 0;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.user-picker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.user-picker-title {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.5);
}

.user-picker-logout-btn {
    background: none;
    border: none;
    color: rgba(255,255,255,0.45);
    font-size: 16px;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 6px;
    transition: color 0.15s, background 0.15s;
    line-height: 1;
}
.user-picker-logout-btn:hover {
    color: #e74c3c;
    background: rgba(231,76,60,0.12);
}

.user-picker-search {
    width: 100%;
    padding: 10px 16px;
    background: rgba(255,255,255,0.05);
    border: none;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    color: #e6edf3;
    font-size: 14px;
    outline: none;
}
.user-picker-search::placeholder { color: rgba(255,255,255,0.3); }

.user-picker-list {
    max-height: 54vh;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.user-picker-loading {
    padding: 20px 16px;
    text-align: center;
    color: rgba(255,255,255,0.4);
    font-size: 14px;
}

.user-picker-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    transition: background 0.12s;
}
.user-picker-item:last-child { border-bottom: none; }
.user-picker-item:hover { background: rgba(0,112,160,0.25); }
.user-picker-item:active { background: rgba(0,112,160,0.4); }

.user-picker-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--primary-color);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    flex-shrink: 0;
}

.user-picker-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.user-picker-name {
    font-size: 14px;
    font-weight: 500;
    color: #e6edf3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-picker-email {
    font-size: 12px;
    color: rgba(255,255,255,0.45);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}