/*
 #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', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--darkbackground-color);
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: 500;
    letter-spacing: -0.02em;
}

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

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

.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: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    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 #15be0f; /* 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-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);
}

#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;
}

.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-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    margin: 0 !important;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s;
    flex: 0 0 auto !important;
    max-width: none !important;
}

.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: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    padding: 20px;
    z-index: 1000;
    font-family: inherit;
}
.gps-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    font-size: 1.1rem;
    font-weight: 600;
    color: #1a1a2e;
}
.gps-modal-close {
    background: none;
    border: none;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    color: #666;
    padding: 0 2px;
}

/* 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: #1a1a2e;
    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 #1a1a2e;
}

/* 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%;
}

/* 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: 'Inter', sans-serif;
    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 svg {
    width: 22px;
    height: 22px;
}

.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: 'JetBrains Mono', 'SF Mono', Menlo, 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: 'Inter', -apple-system, sans-serif;
}
.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 {
    overflow-y: auto;
}
.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);
}
.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;
}

/* --- 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 {
    /* Slight green wash on the basemap canvas. */
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse at center,
        rgba(0, 255, 156, 0.06) 0%,
        rgba(0, 255, 156, 0.02) 40%,
        rgba(8, 16, 22, 0.45) 100%);
    mix-blend-mode: screen;
    z-index: 1;
}
.radar-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    overflow: hidden;
}
.radar-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(0, 255, 156, 0.18);
    border-radius: 50%;
    box-shadow: inset 0 0 8px rgba(0, 255, 156, 0.08);
}
.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.12);
}
.radar-crosshair--h {
    top: 50%; left: 0; right: 0; height: 1px;
}
.radar-crosshair--v {
    top: 0; bottom: 0; left: 50%; width: 1px;
}
.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. */
    background: conic-gradient(
        from 0deg,
        rgba(0, 255, 156, 0.45) 0deg,
        rgba(0, 255, 156, 0.18) 20deg,
        rgba(0, 255, 156, 0)    60deg,
        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.55;
    mix-blend-mode: screen;
}
@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; }
}

/* Status pill (bottom-left) shown while network layers are visible. Shows the
   zone name and PON filter that's currently loaded. Tapping it opens a
   full-screen takeover panel where the user can toggle object types,
   return to the map ("Show network"), or close the network from the header. */
.network-status-pill {
    position: fixed;
    left: 12px;
    bottom: calc(env(safe-area-inset-bottom, 0) + 18px);
    z-index: 3100;
    background: rgba(13, 27, 34, 0.92);
    color: #e6f7ef;
    border: 1px solid rgba(0, 255, 156, 0.5);
    border-radius: 999px;
    padding: 4px;
    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: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: calc(100vw - 24px);
    min-width: 0;
}
.network-status-main {
    background: transparent;
    border: none;
    color: inherit;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px 6px 10px;
    cursor: pointer;
    min-width: 0;
    border-radius: 999px;
    transition: background 0.15s;
}
.network-status-main:hover { background: rgba(0, 255, 156, 0.08); }
.network-status-main:active { transform: scale(0.98); }
.network-status-caret { font-size: 12px; color: #00ff9c; opacity: 0.8; flex-shrink: 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.15;
    min-width: 0;
    text-align: left;
}
.network-status-title {
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60vw;
}
.network-status-sub {
    font-size: 11px;
    color: #97b8a9;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60vw;
}

/* 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-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; }

/* 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);
}

/* --- 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-pill (3100), 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;
}
.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;
}

/* ============================================================================
   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) + 18px);
    z-index: 3100;
    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 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); }

/* Exit gets a softer red so it reads as "destructive" without
   shouting; the other two stay teal so the eye groups them as
   navigation, not termination. */
.reconcile-status-action-exit {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.5);
    color: #fee2e2;
}
.reconcile-status-action-exit i      { color: #fca5a5; }
.reconcile-status-action-exit:hover  { background: rgba(239, 68, 68, 0.22); }

/* 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: 50%;
    transform: translateX(-50%);
    z-index: 3200;
    max-width: min(560px, calc(100vw - 24px));
    padding: 12px 18px 14px;
    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;
    pointer-events: none; /* never blocks taps on the map below */
}
.reconcile-authoring-banner-eyebrow {
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fbbf24;
    font-weight: 700;
    margin-bottom: 4px;
}
.reconcile-authoring-banner-headline {
    font-size: 17px;
    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: 12.5px;
    color: #cbd5e1;
    margin-top: 6px;
    line-height: 1.3;
}
.reconcile-authoring-banner-helper strong {
    color: #fde68a;
    font-weight: 600;
}
/* "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);
}

/* Anchor highlight on the capture marker that is currently the chain
   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%);
    max-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;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(20, 184, 166, 0.25);
}
.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-close {
    background: none;
    border: none;
    color: #9ec9c2;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 8px;
}
.reconcile-pass-picker-close:hover { color: #fff; }

.reconcile-pass-picker-hint {
    padding: 10px 16px;
    font-size: 12px;
    color: #7fd6c7;
    border-bottom: 1px solid rgba(20, 184, 166, 0.12);
    background: rgba(20, 184, 166, 0.04);
}
.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: column;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 10px;
    background: #ecfdf5;            /* faint emerald to match planned-side */
    border: 1px solid #a7f3d0;
}
.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; }

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

.reconcile-linked-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    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; }

/* 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: 10px 12px;
    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;
}

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

/* "Generate PON report" button in the reconcile pass picker. Sits between the
   scope hint and the pass cards; styled as a primary call-to-action so it
   reads as the headline action of the menu. */
.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; }

/* 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;
    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; }
.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); } }

.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;
}
.report-btn:hover { background: rgba(20, 184, 166, 0.16); }
.report-btn-primary { background: #14b8a6; color: #042027; border-color: #14b8a6; }
.report-btn-primary:hover { filter: brightness(1.08); }

.report-list {
    padding: 8px; overflow-y: auto;
    display: flex; flex-direction: column; gap: 8px;
}
.report-item {
    display: flex; align-items: center; 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;
}
.report-item-meta { font-size: 11px; color: #7f9aa3; margin-top: 2px; }
.report-item-actions { display: flex; gap: 6px; flex-shrink: 0; }
.report-icon-btn {
    width: 32px; height: 32px; 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: 13px;
}
.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-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; }