/* CSS Variables */
:root {
    /* Colors */
    --color-primary: #4CAF50;
    --color-red: #cc0000;
    --color-blue: #0066cc;
    --color-white: #ffffff;
    --color-accent-blue: #2196F3;
    --color-accent-red: #F44336;
    
    /* Background Colors */
    --bg-dark: rgba(33, 33, 33, 0.95);
    --bg-darker: rgba(33, 33, 33, 0.98);
    --bg-darkest: rgba(0, 0, 0, 0.95);
    --bg-light: rgba(255, 255, 255, 0.1);
    --bg-lighter: rgba(255, 255, 255, 0.15);
    --bg-lightest: rgba(255, 255, 255, 0.2);
    
    /* Text Colors */
    --text-primary: var(--color-primary);
    --text-muted: rgba(255, 255, 255, 0.7);
    --text-light: rgba(255, 255, 255, 0.9);
    
    /* Border Colors */
    --border-light: rgba(255, 255, 255, 0.1);
    --border-lighter: rgba(255, 255, 255, 0.2);
    
    /* Dimensions */
    --border-radius-xs: 3px;
    --border-radius-sm: 4px;
    --border-radius-md: 6px;
    --border-radius-lg: 8px;
    
    /* Spacing */
    --spacing-xxs: 2px;
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 15px;
    --spacing-xl: 20px;
    --spacing-xxl: 24px;
    --spacing-xxxl: 32px;
    
    /* Font Sizes */
    --font-xxs: 11px;
    --font-xs: 0.8em;
    --font-sm: 0.85em;
    --font-md: 0.9em;
    --font-lg: 0.95em;
    --font-xl: 1.1em;
    --font-xxl: 1.5em;
    
    /* Component Sizes */
    --icon-sm: 8px;
    --icon-md: 12px;
    --icon-lg: 16px;
    --icon-xl: 24px;
    --button-height: 32px;
    --select-height: 36px;
    --panel-width-sm: 180px;
    --panel-width-md: 240px;
    --panel-width-lg: 280px;
    --panel-width-xl: 400px;
    
    /* Borders */
    --border-width-sm: 1px;
    --border-width-md: 2px;
    --letter-spacing-sm: 0.5px;
    
    /* Shadows */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.5);
    --shadow-glow-red: 0 0 4px rgba(255, 51, 51, 0.5);
    --shadow-glow-green: 0 0 4px rgba(51, 255, 51, 0.5);
    
    /* Transitions */
    --transition-fast: all 0.2s ease;
    --transition-normal: all 0.3s ease;
    
    /* Z-indices */
    --z-base: 1;
    --z-panel: 100;
    --z-overlay: 1000;
    --z-modal: 2000;
}

/* Base Styles */
html, body {
    margin: 0;
    height: 100%;
}

#map {
    position: absolute;
    top: 0;
    left: 44px; /* reserved for the left icon nav bar */
    bottom: 0;
    right: 36px; /* reserved for the collapsed Mission Log drawer tab */
    transition: right 0.25s ease, left 0.25s ease;
}

#map.log-expanded {
    right: 320px; /* room for the fully-open Mission Log drawer */
}

#map.nav-expanded {
    left: 364px; /* icon bar (44px) + fully-open left panel (320px) */
}

/* Common Utility Classes */
.flex {
    display: flex;
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.flex-column {
    display: flex;
    flex-direction: column;
}

.gap-sm { gap: var(--spacing-sm); }
.gap-md { gap: var(--spacing-md); }
.gap-lg { gap: var(--spacing-lg); }

.text-muted { color: var(--text-muted); }
.text-light { color: var(--text-light); }
.text-primary { color: var(--text-primary); }

.bg-dark { background: var(--bg-dark); }
.bg-darker { background: var(--bg-darker); }
.bg-light { background: var(--bg-light); }

.border-light { border: var(--border-width-sm) solid var(--border-light); }
.border-lighter { border: var(--border-width-sm) solid var(--border-lighter); }

.radius-sm { border-radius: var(--border-radius-sm); }
.radius-md { border-radius: var(--border-radius-md); }
.radius-lg { border-radius: var(--border-radius-lg); }

.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }

.transition { transition: var(--transition-normal); }

/* Left navigation: VS Code-style icon bar (always visible, fixed width) +
   a single sliding panel that swaps content per active icon, pushing #map
   over rather than floating on top of it (see #map.nav-expanded above). */
#left-nav-bar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 44px;
    background: var(--bg-darkest, #111);
    border-right: 2px solid rgba(255, 255, 255, 0.1);
    box-shadow: var(--shadow-lg);
    z-index: var(--z-panel);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) 0;
}

.nav-icon-btn {
    width: 34px;
    height: 34px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--border-radius-sm);
    color: white;
    font-size: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-fast);
    flex-shrink: 0;
}

.nav-icon-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

.nav-icon-btn.active {
    background: rgba(76, 175, 80, 0.25);
    border-color: rgba(76, 175, 80, 0.6);
}

.nav-icon-btn.locked {
    opacity: 0.5;
}

.nav-icon-btn:disabled {
    cursor: not-allowed;
}

#left-panel {
    position: fixed;
    top: 0;
    left: 44px;
    bottom: 0;
    width: 0;
    background: var(--bg-darker);
    border-right: 2px solid var(--bg-darkest);
    box-shadow: var(--shadow-lg);
    z-index: var(--z-panel);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: width 0.25s ease;
}

#left-panel.open {
    width: 320px;
}

.left-panel-section {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

/* Frequently-used camera actions, kept outside the drawer (see mapbox.html for
   why) - shifts right in lockstep with #map when the drawer opens, so it never
   sits under the panel. */
#quick-actions-bar {
    position: fixed;
    top: 10px;
    left: 54px; /* icon bar (44px) + small margin */
    z-index: var(--z-panel);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    background: var(--bg-dark);
    padding: var(--spacing-sm);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-light);
    transition: left 0.25s ease;
}

#quick-actions-bar.nav-expanded {
    left: 374px; /* icon bar + open panel (320px) + small margin */
}

/* Collapsible, same header+content split as #mission-log-panel: header (title +
   toggle) always visible in both states, .quick-actions-content hidden when
   collapsed. Reuses the existing global .collapse-btn/.collapse-icon classes
   rather than duplicating them. */
.quick-actions-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
}

.quick-actions-title {
    font-size: var(--font-xs);
    font-weight: 600;
    color: var(--text-light);
    white-space: nowrap;
}

#quick-actions-bar.collapsed .quick-actions-content {
    display: none;
}

#quick-actions-bar.collapsed .collapse-icon {
    transform: rotate(180deg);
}

/* Row 1: "what to look at" (asset picker + jump-to-overview shots).
   Row 2: "how to look at it" (view modes for whatever's selected in row 1). */
.quick-actions-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

#quick-actions-bar #soldier-select {
    height: 34px;
    padding: 0 var(--spacing-xxxl) 0 var(--spacing-md);
    border-radius: var(--border-radius-sm);
    border: var(--border-width-sm) solid var(--border-light);
    background: var(--bg-dark);
    color: var(--color-white);
    font-size: var(--font-xs);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath fill='rgba(255,255,255,0.5)' d='M0 2l4 4 4-4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--spacing-md) center;
    background-size: var(--icon-sm);
    min-width: 160px;
}

/* Manual piloting indicator - a row per entity currently under manual control,
   nested inside #quick-actions-bar so it inherits the panel's positioning and
   drawer-shift behavior for free instead of duplicating that logic. */
#pilot-status-banner {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xxs);
    padding-top: var(--spacing-xs);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    color: #ff8a65;
    font-size: 12px;
    font-weight: 600;
}

.status-group {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    margin-bottom: 5px;
}

.status-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ff3333;
    display: inline-block;
    margin-right: 5px;
}

.status-indicator.connected {
    background: #4CAF50;
}

#soldier-count {
    color: rgba(255, 255, 255, 0.9);
    font-size: 13px;
}

/* Top-right HUD placement (like a typical FPV telemetry overlay), not
   bottom-left - clear of #quick-actions-bar on the left, offset from the
   right edge enough to clear the Mission Log drawer's collapsed tab (36px).
   Compact by design: no coordinates (see .position-info below), tight
   padding/gaps, small min-width, transition so the shift below animates
   in step with the drawer's own 0.25s width transition instead of jumping. */
.movement-info {
    position: fixed;
    top: 10px;
    right: 46px;
    background: var(--bg-dark);
    color: var(--color-white);
    padding: var(--spacing-xxs) var(--spacing-sm);
    border-radius: var(--border-radius-md);
    font-family: Arial, sans-serif;
    font-size: var(--font-xxs);
    z-index: var(--z-panel);
    min-width: 140px;
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xxs);
    transition: right 0.25s ease;
}

/* Mission Log's expanded width (320px) would otherwise sit directly on top
   of this - toggled by the same setDrawerExpanded() that drives
   #map.log-expanded, applied here explicitly (not a CSS sibling selector)
   to match the established nav-expanded pattern already used for
   #map/#quick-actions-bar elsewhere in this file. */
.movement-info.log-expanded {
    right: 366px;
}

.soldier-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: var(--border-width-sm) solid var(--border-light);
    padding-bottom: var(--spacing-xxs);
    margin-bottom: var(--spacing-xxs);
}

.soldier-name {
    color: var(--text-primary);
    font-weight: bold;
}

.view-mode {
    color: var(--text-muted);
    font-size: var(--font-xxs);
}

.position-info {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--spacing-sm);
    align-items: center;
    font-family: monospace;
    font-size: var(--font-xxs);
}

.position-label {
    color: var(--text-muted);
}

.position-value {
    text-align: right;
    background: var(--bg-lighter);
    padding: var(--spacing-xxs) var(--spacing-xs);
    border-radius: var(--border-radius-xs);
}

.animation-type {
    display: inline-block;
    padding: var(--spacing-xxs) var(--spacing-xs);
    border-radius: var(--border-radius-xs);
    font-size: var(--font-xxs);
    margin-left: var(--spacing-sm);
}

.animation-walk {
    background: var(--color-accent-blue);
}

.animation-run {
    background: var(--color-accent-red);
}

/* Soldier Label */
.soldier-label {
    background: linear-gradient(
        180deg,
        rgba(25, 25, 25, 0.96),
        rgba(10, 10, 10, 0.96)
    );
    color: var(--color-white);
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: var(--border-radius-sm);
    font-family: Arial, sans-serif;
    font-size: var(--font-xxs);
    pointer-events: none;
    white-space: nowrap;
    text-align: center;
    transition: var(--transition-normal);
    position: relative;
    transform: translateY(-50%);
    /* Subtle depth */
    box-shadow:
        0 4px 10px rgba(0, 0, 0, 0.6),
        inset 0 0 0 1px rgba(255, 255, 255, 0.08);   
}

.soldier-label::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: calc(-1 * var(--spacing-xs));
    transform: translateX(-50%);
    border-left: var(--spacing-xs) solid transparent;
    border-right: var(--spacing-xs) solid transparent;
    border-top: var(--spacing-xs) solid var(--bg-darkest);
    pointer-events: none;
}

.soldier-label.top-view {
    background-color: var(--color-accent-blue);
}

.soldier-label.top-view::after {
    border-top-color: var(--color-accent-blue);
}

/* Target Marker */
.target-marker {
    width: var(--icon-md);
    height: var(--icon-md);
    background-color: var(--color-red);
    border: var(--border-width-md) solid var(--color-red);
    border-radius: 50%;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.5);
        opacity: 0.5;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Status Strip */
.status-strip {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0);
    color: white;
    padding: 8px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: Arial, sans-serif;
    font-size: 13px;
    z-index: 1000;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.status-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

/* App name/brand label - first item in the status strip's info group. Distinct styling
   (bold, accent color, right border to separate it from the live status readouts that
   follow) so it reads as a persistent title, not just another status value. */
.app-name-label {
    font-weight: 700;
    letter-spacing: 0.3px;
    color: var(--color-primary, #4caf50);
    padding-right: var(--spacing-md);
    border-right: 1px solid rgba(255, 255, 255, 0.2);
}

/* Groups items within the status strip so space-between separates the two
   clusters (info vs. actions), not all 8 individual items scattered evenly
   across the full width regardless of what they actually are. */
.strip-group {
    display: flex;
    align-items: center;
}

.status-info-group {
    gap: var(--spacing-xl);
}

.status-actions-group {
    gap: var(--spacing-sm);
}

.coordinates-label, .time-label, .location-label {
    color: var(--text-muted);
}

.coordinates-value, .time-value, .location-value {
    font-family: 'Consolas', monospace;
    color: #4CAF50;
    font-size: 13px;
}

.location-value {
    min-width: 240px;
}

/* Modal */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
    z-index: var(--z-modal);
}

.strip-button {
    background: var(--bg-darker);
    border: 1px solid var(--border-lighter);
    border-radius: var(--border-radius-sm);
    color: var(--text-light);
    cursor: pointer;
    padding: var(--spacing-xs) var(--spacing-md);
    font-size: 13px;
    font-family: Arial, sans-serif;
    height: 28px;
    min-width: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-fast);
    box-shadow: var(--shadow-sm);
}

.strip-button:hover {
    background: var(--bg-lighter);
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
}

.strip-button:active {
    transform: translateY(1px);
    box-shadow: var(--shadow-sm);
}

/* Mission Log - edge-anchored side drawer, not a floating overlay. Collapsed
   is a slim always-visible tab (map gets the space back); expanded pushes
   the map container itself via #map.log-expanded, it doesn't sit on top of
   map content. Needs to be monitored continuously, so the tab (with its
   badge) is always on screen even collapsed - only the full body hides. */
#mission-log-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 36px;
    background: var(--bg-darker);
    border-left: 2px solid var(--bg-darkest);
    box-shadow: var(--shadow-lg);
    z-index: var(--z-panel);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: width 0.25s ease;
}

#mission-log-panel.expanded {
    width: 320px;
}

#mission-log-panel.collapsed .ml-panel-content {
    display: none;
}

#mission-log-panel.collapsed .panel-header {
    flex-direction: column;
    height: 100%;
    padding: 10px 4px;
    gap: var(--spacing-sm);
}

#mission-log-panel.collapsed .header-left,
#mission-log-panel.collapsed #mission-log-popout-btn {
    display: none;
}

#mission-log-panel.collapsed .ml-header-actions {
    flex-direction: column;
    gap: var(--spacing-sm);
}

#mission-log-panel.collapsed .collapse-icon {
    transform: rotate(180deg);
}

#mission-log-panel .panel-header {
    padding: 10px 12px;
    flex-shrink: 0;
}

.ml-header-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.ml-icon-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    font-size: 13px;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.ml-icon-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
}

.ml-badge {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    font-size: 11px;
    font-weight: 700;
    font-family: Arial, sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.ml-badge-pending {
    background: #d32f2f;
}

.ml-badge-new {
    background: var(--bg-lighter);
    color: var(--text-light);
}

.ml-panel-content {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--bg-darker);
    font-family: Arial, sans-serif;
}

/* Pinned above the timeline - never scrolls, never gets buried */
.mission-log-pending:not(:empty) {
    flex-shrink: 0;
    padding: var(--spacing-xs) var(--spacing-sm) 0;
    border-bottom: 1px solid rgba(255, 165, 0, 0.3);
}

.mission-log-pending,
.mission-log-timeline {
    color: var(--text-light); /* explicit default - don't let text silently fall back to browser black */
}

.mission-log-timeline {
    flex: 1;
    min-height: 100px;
    overflow-y: auto;
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: 13px;
    line-height: 1.4;
}

.mission-log-timeline::-webkit-scrollbar {
    width: 6px;
}

.mission-log-timeline::-webkit-scrollbar-track {
    background: var(--bg-darker);
}

.mission-log-timeline::-webkit-scrollbar-thumb {
    background: var(--bg-lighter);
    border-radius: 3px;
}

.mission-log-timeline::-webkit-scrollbar-thumb:hover {
    background: var(--bg-lightest);
}

.icon-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--text-light);
    cursor: pointer;
    width: 22px;
    height: 22px;
    border-radius: 4px;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-fast);
}

.icon-btn.approve:hover {
    background: rgba(76, 175, 80, 0.4);
    border-color: #4caf50;
}

.icon-btn.reject:hover {
    background: rgba(244, 67, 54, 0.4);
    border-color: #f44336;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: var(--spacing-md);
    border-bottom: var(--border-width-sm) solid var(--border-light);
}

.modal-header h2 {
    margin: 0;
    font-size: var(--font-xxl);
}

.modal-body {
    padding: var(--spacing-md);
}

.close-modal {
    font-size: var(--icon-xl);
    cursor: pointer;
    color: var(--text-muted);
    transition: var(--transition-fast);
}

.close-modal:hover {
    color: var(--color-white);
}

.status-text {
    color: var(--text-muted);
}

.status-text.connected {
    color: var(--color-primary);
}

#soldier-count {
    font-size: var(--font-xs);
    color: var(--text-light);
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--bg-dark);
    border-radius: var(--border-radius-sm);
    display: inline-block;
}

.metrics-info {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-xs);
    font-size: var(--font-sm);
}

.metrics-info > div {
    background: var(--bg-darker);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.asset-type {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm);
    background: rgba(32, 32, 32, 0.95);
    border-radius: var(--border-radius-sm);
    margin-bottom: var(--spacing-xs);
    border: var(--border-width-sm) solid var(--border-light);
}

.asset-type-name {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--text-light);
}

.asset-type-count {
    font-weight: bold;
    color: var(--text-light);
    background: rgba(0, 0, 0, 0.3);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    min-width: 2em;
    text-align: center;
}
/* Asset Overview modal layout */
/* Asset Overview modal overlay */
#assets-modal {
    display: none;                 /* default hidden */
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: var(--z-modal);

    align-items: center;
    justify-content: center;
}

/* Open state */
#assets-modal.open {
    display: flex;
}


#assets-modal .modal-content {
    max-width: 90vw;
    max-height: 70vh;

    display: flex;
    flex-direction: column;

    background: var(--bg-darker);
    border: 2px solid var(--bg-darkest);
    border-radius: 10px;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}


#assets-modal .modal-body {
    overflow-y: auto;
}
/* Asset Overview – match Mission Log look */
#assets-modal .modal-header {
    padding: 12px 15px;
    background: linear-gradient(
        to bottom,
        rgba(76, 175, 80, 0.3),
        rgba(76, 175, 80, 0.1)
    );
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 8px 8px 0 0;
}

#assets-modal .modal-header h2 {
    margin: 0;
    font-size: 16px;
    font-family: Arial, sans-serif;
    font-weight: 600;
    color: white;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

#assets-modal .close-modal {
    cursor: pointer;
    padding: 4px;
    color: var(--text-muted);
    transition: var(--transition-fast);
}

#assets-modal .close-modal:hover {
    color: var(--text-light);
}
#assets-modal .modal-body {
    background: var(--bg-darker);
    padding: var(--spacing-md);
    display: flex;
    gap: var(--spacing-md);
}

/* Team Sections */
/* Asset Types */

.asset-icon {
    width: var(--icon-lg);
    height: var(--icon-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-xs);
    background: var(--bg-lighter);
    border-radius: var(--border-radius-sm);
}

/* Assets Section */
.assets-section {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 10px 12px;
    margin-bottom: var(--spacing-lg);

    background: var(--bg-dark);
    border-radius: var(--border-radius-sm);
}

.assets-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;                 /* IMPORTANT */
}



.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    background: linear-gradient(to bottom, rgba(76, 175, 80, 0.3), rgba(76, 175, 80, 0.1));
    border-radius: 8px 8px 0 0;
}
/* Panel Header – Logo + Title layout */
.panel-header .header-left {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

/* Logo container */
.panel-header .app-logo {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Logo image (when available) */
.panel-header .app-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Placeholder logo (until image is added) */
.panel-header .logo-placeholder {
    width: 100%;
    height: 100%;
    border-radius: var(--border-radius-sm);
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
}

.title {
    font-size: 16px;
    font-weight: 600;
    color: white;
    letter-spacing: 0.5px;
    margin: 0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.panel-content {
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.collapse-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.collapse-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
}

.collapse-icon {
    display: inline-block;
    font-size: 16px;
    line-height: 1;
    transform: rotate(0deg);
    transition: transform 0.3s ease;
}

/* Control Items */
.control-item {
    margin: 0;
    margin-bottom: var(--spacing-md);
    width: 100%;
}

.control-item label {
    display: block;
    margin-bottom: var(--spacing-xs);
    font-size: var(--font-xs);
    font-weight: 500;
    color: var(--text-muted);
}

.control-item select {
    width: 100%;
    height: var(--select-height);
    padding: 0 var(--spacing-xxxl) 0 var(--spacing-md);
    border-radius: var(--border-radius-sm);
    border: var(--border-width-sm) solid var(--border-light);
    background: var(--bg-dark);
    color: var(--color-white);
    font-size: var(--font-xs);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath fill='rgba(255,255,255,0.5)' d='M0 2l4 4 4-4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--spacing-md) center;
    background-size: var(--icon-sm);
    transition: var(--transition-fast);
    box-sizing: border-box;
}

.control-item select:hover {
    border-color: var(--border-lighter);
    background: var(--bg-darker);
}

.control-item select:focus {
    outline: none;
    border-color: var(--color-primary);
}

.control-item select option {
    background-color: var(--bg-dark);
    color: var(--color-white);
    padding: var(--spacing-sm) var(--spacing-md);
}

/* Button Group */
.button-group {
    display: grid;
    gap: var(--spacing-md);
    grid-template-areas: 
        "perspective topview"
        "firstperson zoomout";
    margin-top: var(--spacing-lg);
}

.button-group button {
    padding: 0 var(--spacing-md);
    border-radius: var(--border-radius-sm);
    border: var(--border-width-sm) solid var(--border-light);
    background: var(--bg-dark);
    color: var(--color-white);
    font-size: var(--font-xs);
    cursor: pointer;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    height: var(--select-height);
    transition: var(--transition-fast);
}

.grid-btn-1 { grid-area: perspective; }
.grid-btn-2 { grid-area: topview; }
.grid-btn-3 { grid-area: firstperson; }
.grid-btn-4 { 
    grid-area: zoomout;
    background: rgba(0, 0, 0, 0.2);
}

.button-group button:hover:not(:disabled) {
    border-color: var(--border-lighter);
    background: var(--bg-darker);
}

.button-group button:active:not(:disabled) {
    background: var(--bg-light);
}

.button-group button.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

.button-group button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--bg-darker);
}

/* Movement Info - base layout/position rules live with the panel's other
   styles above; this duplicate block (identical property set, just a stale
   bottom-left position) was silently overriding it via cascade order. Kept
   only the team-color variants, which aren't defined elsewhere. */
.movement-info.team-red {
    background: var(--color-red);
}

.movement-info.team-blue {
    background: var(--color-blue);
}

.soldier-info {
    margin-bottom: var(--spacing-sm);
    padding-bottom: var(--spacing-xs);
    border-bottom: var(--border-width-sm) solid var(--border-lighter);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.soldier-name {
    font-weight: bold;
    font-size: var(--font-lg);
}

.view-mode {
    font-size: var(--font-xs);
    opacity: 0.8;
    padding: var(--spacing-xs) var(--spacing-xs);
    background: var(--bg-lighter);
    border-radius: var(--border-radius-sm);
}

/* Hidden per user request - the raw lat/lon coordinates were more debug-level
   noise than useful for a pilot HUD. Kept in the DOM rather than removed:
   moveSoldier()'s altitude-display update is (unfortunately) nested inside a
   null-check on the .current-pos element, so deleting the element outright
   would have silently broken the altitude readout too. This rule (later in
   the cascade than the other .position-info definition above) is what
   actually wins today, so overriding display here is sufficient. */
.position-info {
    display: none;
}

.position-label {
    color: var(--text-muted);
}

.metrics-info {
    font-size: var(--font-sm);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-xs);
}

.metrics-info > div {
    background: var(--bg-darker);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    display: flex;
    justify-content: space-between;
}

/* Location Search */
#location-search {
    width: 100%;
    height: var(--select-height);
    padding: 0 var(--spacing-md);
    border-radius: var(--border-radius-sm);
    border: var(--border-width-sm) solid var(--border-light);
    background: var(--bg-dark);
    color: var(--color-white);
    font-size: var(--font-xs);
    transition: var(--transition-fast);
    box-sizing: border-box;
}

#location-search:hover {
    border-color: var(--border-lighter);
    background: var(--bg-darker);
}

#location-search:focus {
    outline: none;
    border-color: var(--color-primary);
}

.location-suggestions {
    position: absolute;
    top: var(--select-height);
    left: 0;
    right: 0;
    background: var(--bg-darker);
    border: var(--border-width-sm) solid var(--border-light);
    border-top: none;
    border-radius: 0 0 var(--border-radius-sm) var(--border-radius-sm);
    max-height: 160px;
    overflow-y: auto;
    display: none;
    z-index: var(--z-overlay);
    box-shadow: var(--shadow-md);
}

.location-suggestions.active {
    display: block;
}

.location-suggestion {
    padding: var(--spacing-sm) var(--spacing-md);
    cursor: pointer;
    border-bottom: var(--border-width-sm) solid var(--border-light);
    transition: var(--transition-fast);
}

.location-suggestion:last-child {
    border-bottom: none;
}

.location-suggestion:hover {
    background: var(--bg-light);
}

.location-suggestion .suggestion-main {
    color: var(--text-light);
    font-size: var(--font-xs);
}

.location-suggestion .suggestion-secondary {
    color: var(--text-muted);
    font-size: var(--font-xs);
    margin-top: var(--spacing-xxs);
}
.soldier-label.red { background: rgba(204,0,0,0.9); }
.soldier-label.blue { background: rgba(0,102,204,0.9); }
.asset-overview {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
}
/* Asset Overview / Details buttons */
.asset-action-btn {
    /* Layout */
    height: 34px;
    min-width: 90px;
    padding: 0 12px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    /* Typography */
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;

    /* Visuals */
    background: var(--bg-dark);
    color: var(--text-light);

    border: 1px solid var(--border-light);
    border-radius: var(--border-radius-sm);

    /* Interaction */
    cursor: pointer;
    transition: var(--transition-fast);
}

.asset-action-btn:hover {
    background: var(--bg-lighter);
}

/* Spec 04 — Query Log modal tab toggle (Graded Captures / All Queries) */
.query-log-tab[data-active="true"] {
    background: var(--bg-lighter);
    border-color: var(--text-light);
}

  
.team-card {
    background: var(--bg-light);
    border: 1px solid var(--border-light);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    box-shadow: var(--shadow-sm);
}
  
.team-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: var(--spacing-xs);
    border-bottom: 1px solid var(--border-light);
}

.team-header h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-light);
}
  
  .team-red { border-left: 4px solid #cc0000; }
  .team-blue { border-left: 4px solid #0066cc; }
  
  .asset-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  .asset-row {
    display: grid;
    grid-template-columns: 24px 1fr auto;
    gap: 8px;
    padding: 6px 4px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  
  .asset-row:last-child {
    border-bottom: none;
  }
  
  .asset-count {
    font-weight: 600;
  }
  /* Asset Overview modal – aligned with Mission Log */
.asset-modal {
    background: var(--bg-darker);
    border: 2px solid var(--bg-darkest);
    border-radius: 8px;
    box-shadow: var(--shadow-lg);
    padding: 0;
    overflow: hidden;
}
.asset-modal .modal-body {
    padding: var(--spacing-md);
    background: var(--bg-darker);
}

.asset-modal .modal-header {
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.12),
        rgba(255, 255, 255, 0.04)
    );
    padding: 12px 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.asset-modal .modal-header h2 {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-white);
    letter-spacing: 0.5px;
}
.asset-modal .modal-header {
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.12),
        rgba(255, 255, 255, 0.04)
    );
    padding: 12px 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.asset-modal .modal-header h2 {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-white);
    letter-spacing: 0.5px;
}
.asset-overview {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
}

/* UAS Catalog + Scenarios modals - docked flyout, matches #mission-log-modal treatment */
#catalog-modal, #scenarios-modal {
    display: none;
    position: fixed;
    bottom: 40px;
    width: 480px;
    height: 560px;
    background: var(--bg-darker);
    border: 2px solid var(--bg-darkest);
    border-radius: 8px 8px 0 0;
    box-shadow: var(--shadow-lg);
    z-index: var(--z-modal);
    overflow: hidden;
}

#catalog-modal { right: 10px; }
#scenarios-modal { left: 10px; }

#catalog-modal .modal-content, #scenarios-modal .modal-content {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    background: var(--bg-darker);
}

#catalog-modal .modal-header, #scenarios-modal .modal-header {
    padding: 12px 15px;
    background: linear-gradient(to bottom, rgba(76, 175, 80, 0.3), rgba(76, 175, 80, 0.1));
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 8px 8px 0 0;
}

#catalog-modal .modal-header h2, #scenarios-modal .modal-header h2 {
    margin: 0;
    font-size: 16px;
    font-family: Arial, sans-serif;
    font-weight: 600;
    color: white;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

#catalog-modal .close-modal, #scenarios-modal .close-modal {
    cursor: pointer;
    padding: 4px;
    color: var(--text-muted);
    transition: var(--transition-fast);
}

#catalog-modal .close-modal:hover, #scenarios-modal .close-modal:hover {
    color: var(--text-light);
}

#catalog-modal .modal-body, #scenarios-modal .modal-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: var(--spacing-md);
    background: var(--bg-darker);
    font-family: Arial, sans-serif;
}

.catalog-controls {
    display: flex;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.catalog-controls input,
.catalog-controls select {
    background: var(--bg-dark);
    border: var(--border-width-sm) solid var(--border-light);
    border-radius: var(--border-radius-sm);
    color: var(--text-light);
    padding: var(--spacing-sm);
    font-size: var(--font-xs);
    font-family: Arial, sans-serif;
}

.catalog-controls input {
    flex: 1;
}

.catalog-status {
    color: var(--text-muted);
    font-size: var(--font-xs);
    margin-bottom: var(--spacing-sm);
}

.catalog-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.catalog-card {
    background: var(--bg-light);
    border: var(--border-width-sm) solid var(--border-light);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-md);
}

.catalog-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-xs);
}

/* Groups name+role badge together so .catalog-card-header's space-between puts this group on
   the left and the collapse button on the right, rather than spreading all three evenly. */
.catalog-card-title-group {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    min-width: 0; /* lets the h3 below actually truncate instead of pushing the button off */
}

.catalog-card-header h3 {
    font-size: var(--font-xs);
    font-weight: 600;
    color: var(--text-light);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Collapsible catalog card - same header+content split as #mission-log-panel/#quick-actions-bar,
   reusing the global .collapse-btn/.collapse-icon classes. Collapsed hides everything except
   the header (name/role/toggle); the footer (source link + Deploy button) is deliberately
   OUTSIDE .catalog-card-body so it's still one click away even collapsed - Deploy is the
   primary action on this card, not something worth forcing an extra expand click for. */
.catalog-card.collapsed .catalog-card-body {
    display: none;
}

.catalog-card.collapsed .catalog-card-collapse-btn .collapse-icon {
    transform: rotate(180deg);
}

.catalog-role-badge {
    text-transform: uppercase;
    font-size: var(--font-xxs);
    letter-spacing: 0.5px;
    padding: var(--spacing-xxs) var(--spacing-xs);
    border-radius: var(--border-radius-xs);
    background: var(--bg-lighter);
    color: var(--text-light);
    white-space: nowrap;
}

.catalog-role-badge.role-weapon { background: rgba(204, 0, 0, 0.35); }
.catalog-role-badge.role-interceptor { background: rgba(0, 102, 204, 0.35); }
.catalog-role-badge.role-threat { background: rgba(230, 160, 0, 0.35); }

.catalog-card-class {
    color: var(--text-muted);
    font-size: var(--font-xxs);
    margin-bottom: var(--spacing-sm);
}

/* Replaces the old middot-separated .catalog-card-stats text - a proper two-column table,
   label left (muted) / value right (light, bold), one row per stat. For dronehunter-f700,
   buildStatsRows() appends frame/surrogate/accuracy rows onto the same table (see
   mapbox.html), since both performance/sensor and frame now genuinely come from DE Catalog -
   one table, not two disjoint blocks. */
.catalog-stats-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-xxs);
    margin-bottom: var(--spacing-sm);
}

.catalog-stats-table td {
    padding: 2px 0;
    border-bottom: var(--border-width-sm) solid var(--border-light);
}

.catalog-stats-table tr:last-child td {
    border-bottom: none;
}

.catalog-stats-label {
    color: var(--text-muted);
}

.catalog-stats-value {
    color: var(--text-light);
    font-weight: 600;
    text-align: right;
}

/* dronehunter-f700 only - badge + refresh button share one row, badge left / button right.
   Marks the whole card's stats table as DE-Catalog-sourced (or explicitly flags the local
   fallback), instead of a per-row source indicator, since for this one asset essentially
   everything in the table now comes from the bridge. */
.catalog-card-de-catalog {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
    flex-wrap: wrap;
}

.catalog-de-catalog-badge {
    text-transform: uppercase;
    font-size: var(--font-xxs);
    font-weight: 600;
    letter-spacing: 0.5px;
    padding: var(--spacing-xxs) var(--spacing-xs);
    border-radius: var(--border-radius-xs);
    white-space: nowrap;
}

/* Live: same green-signals-good convention as the rest of the app (mission-log success
   lines, etc.) - a real fetch actually succeeded. */
.catalog-de-catalog-badge.live {
    background: rgba(0, 200, 83, 0.25);
    color: #6fe6a3;
}

/* Fallback: amber, not red - this isn't a failure state the app can't handle (spec 01's
   whole point is a clean fallback), just worth flagging as "not live right now." */
.catalog-de-catalog-badge.fallback {
    background: rgba(230, 160, 0, 0.25);
    color: #f0c05a;
}

.catalog-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-xs);
}

.catalog-refresh-de-catalog-btn {
    background: rgba(255, 255, 255, 0.08);
    border: var(--border-width-sm) solid var(--border-light);
    border-radius: var(--border-radius-sm);
    color: var(--text-light);
    cursor: pointer;
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-xxs);
    font-family: Arial, sans-serif;
    font-weight: 600;
    white-space: nowrap;
}

.catalog-refresh-de-catalog-btn:hover {
    background: rgba(255, 255, 255, 0.18);
}

.catalog-refresh-de-catalog-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

.catalog-source-link {
    font-size: var(--font-xxs);
    color: var(--text-muted);
}

.catalog-source-link a {
    color: inherit;
}

.catalog-deploy-btn {
    background: var(--color-primary);
    border: none;
    border-radius: var(--border-radius-sm);
    color: var(--color-white);
    cursor: pointer;
    padding: var(--spacing-xs) var(--spacing-md);
    font-size: var(--font-xxs);
    font-family: Arial, sans-serif;
    font-weight: 600;
}

.catalog-deploy-btn:hover {
    filter: brightness(1.1);
}

.catalog-deploy-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

/* Scenario cards - collapsible: header (name + role badges) and the Run row stay visible
   collapsed, description/deploy breakdown only render once expanded. See renderScenarios()
   in mapbox.html. */
.scenario-card-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    cursor: pointer;
}

.scenario-caret {
    color: var(--text-muted);
    font-size: var(--font-xxs);
    flex-shrink: 0;
    transition: transform 0.15s ease;
}

.scenario-card.expanded .scenario-caret {
    transform: rotate(90deg);
}

.scenario-card-header h3 {
    flex: 1;
    min-width: 0;
    font-size: var(--font-xs);
    font-weight: 600;
    color: var(--text-light);
    margin: 0;
}

.scenario-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--spacing-xxs);
}

.scenario-card-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-sm);
}

.scenario-card-details {
    display: none;
    margin-top: var(--spacing-sm);
    padding-top: var(--spacing-sm);
    border-top: var(--border-width-sm) solid var(--border-light);
}

.scenario-card.expanded .scenario-card-details {
    display: block;
}

.scenario-deploy-list {
    list-style: none;
    margin: var(--spacing-xs) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.scenario-deploy-list li {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-xxs);
}

.scenario-deploy-name {
    color: var(--text-light);
}

.scenario-delay {
    color: var(--text-muted);
    margin-left: auto;
}

/* Was missing padding/border/border-radius/cursor/hover entirely - just a background
   color with no other button affordance, which is why both Save Scenario and Cancel
   (the only two callers) looked flat and hard to read rather than like clickable
   buttons. .primary-btn added alongside it so a confirming action (Save Scenario) can
   be visually distinct from a neutral one (Cancel) instead of both sharing one style. */
.secondary-btn {
    background: var(--bg-lighter);
    border: var(--border-width-sm) solid var(--border-lighter);
    border-radius: var(--border-radius-sm);
    color: var(--color-white);
    cursor: pointer;
    padding: var(--spacing-xs) var(--spacing-md);
    font-family: Arial, sans-serif;
    font-weight: 600;
    transition: var(--transition-fast);
}

.secondary-btn:hover {
    background: var(--bg-lightest);
}

.primary-btn {
    background: var(--color-primary);
    border: none;
    border-radius: var(--border-radius-sm);
    color: var(--color-white);
    cursor: pointer;
    padding: var(--spacing-xs) var(--spacing-md);
    font-family: Arial, sans-serif;
    font-weight: 600;
    transition: var(--transition-fast);
}

.primary-btn:hover {
    filter: brightness(1.1);
}
.view-modes {
    display: grid;
    grid-template-columns: 1fr 1fr;   /* two equal columns */
    gap: var(--spacing-sm);
}


.view-mode-btn {
    flex: 1;                          /* equal width */
    min-width: 0;                    /* prevents text-based expansion */
    height: var(--button-height);

    display: flex;                   /* ensures text is centered */
    align-items: center;
    justify-content: center;

    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;

    background: var(--bg-dark);
    color: #FFFFFF;
    border: var(--border-width-sm) solid var(--border-light);
    border-radius: var(--border-radius-sm);
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition-fast);
}


.view-mode-btn:hover:not(:disabled) {
    background: var(--bg-lighter);
}

.view-mode-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Was previously untoggled entirely on this button family - the .active class was
   applied by JS but had no visual effect, so there was no way to tell which view mode
   (if any) was actually engaged just by looking at the toolbar. */
.view-mode-btn.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

/* Pilot mode gets its own distinct (red, not green) active color - it's a materially
   different kind of "active" than the other view buttons: those just change what camera
   angle you're looking through, this one hands you live manual control of the asset,
   so it's deliberately made to stand out rather than blend in with Focus/Top View/First
   Person's shared green highlight. */
#pilot-btn.active {
    background: var(--color-accent-red);
    border-color: var(--color-accent-red);
    color: var(--color-white);
}

.asset-modal .team-card {
    background: var(--bg-light);
    border: 1px solid var(--border-light);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-md);
}
.asset-modal .team-red {
    border-left: 3px solid var(--color-red);
}

.asset-modal .team-blue {
    border-left: 3px solid var(--color-blue);
}
.asset-modal .team-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-sm);
}

.asset-modal .team-header h3 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-light);
}

.asset-modal .team-total {
    font-size: var(--font-xxs);
    color: var(--text-muted);
}
.asset-modal .asset-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.asset-modal .asset-row {
    display: grid;
    grid-template-columns: 22px 1fr auto;
    gap: var(--spacing-sm);
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--bg-darker);
    border: 1px solid var(--border-light);
    border-radius: var(--border-radius-sm);
    margin-bottom: var(--spacing-xs);
    font-size: var(--font-sm);
}

.asset-modal .asset-row:last-child {
    margin-bottom: 0;
}

.asset-modal .asset-icon {
    opacity: 0.85;
}

.asset-modal .asset-count {
    font-weight: 600;
    color: var(--text-light);
}

.asset-modal .team-section,
.asset-modal .asset-type,
.asset-modal .asset-types {
    all: unset;
}
#assets-modal {
    font-family: Arial, sans-serif;
    font-size: 13px;
    color: var(--text-light);
}

/* ===== Modal Shell (reusable) ===== */
.modal-shell {
    background: var(--bg-darker);
    border: 2px solid var(--bg-darkest);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    color: var(--text-light);
}

.modal-shell .modal-header {
    padding: 12px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-light);
}

.modal-shell .modal-header h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.4px;
}

.modal-shell .modal-body {
    padding: var(--spacing-md);
}

/* Query Log modal (spec 03/04) — bug fix: this modal only ever inherited the generic .modal
   base rule (display:none, no .open variant, no centering) - clicking "Query Log" added the
   "open" class to the div exactly as intended, but nothing in the stylesheet ever made an
   #after-action-modal.open element visible, so it silently never opened. Mirrors
   #assets-modal's self-contained overlay pattern (that one DOES have its own #assets-modal.open
   rule) instead of relying on the generic .modal class. */
#after-action-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: var(--z-modal);
    align-items: center;
    justify-content: center;
}

#after-action-modal.open {
    display: flex;
}

#after-action-modal .modal-content {
    max-width: 90vw;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}

#after-action-modal .modal-body {
    overflow-y: auto;
}
.mission-log-row-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 8px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    font-size: 13px;
  }
  
  .mission-log-row-inner.approval-required {
    background: rgba(255, 165, 0, 0.08);
    border-left: 3px solid #ff9800;
  }

  /* Spec 04 follow-up — visually distinguishes a real DE Catalog network call (query attempt
     or result, success or failure) from routine movement/mission-event log lines, so it doesn't
     blend in. Same highlight pattern as .approval-required above, different color so the two
     never get confused with each other. */
  .mission-log-row-inner.de-catalog-call {
    background: rgba(33, 150, 243, 0.08);
    border-left: 3px solid #2196f3;
  }
  
  .log-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
  }
  
  .log-time {
    font-size: 11px;
    color: var(--text-light);
    opacity: 0.7;
    white-space: nowrap;
  }

  .log-message {
    color: var(--text-light);
    font-weight: 500;
  }
  
  .log-right {
    display: flex;
    align-items: center;
  }
  
  .approve-btn {
    padding: 4px 10px;
    font-size: 12px;
    cursor: pointer;
  }
  
  .log-approved {
    font-size: 12px;
    color: #4caf50;
    font-weight: 600;
  }
  .approval-actions {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  
  .reject-btn {
    background: transparent;
    border: none;
    color: #ff6b6b;
    font-size: 14px;
    cursor: pointer;
    padding: 2px 4px;
  }
  
  .reject-btn:hover {
    color: #ff3b3b;
  }
  
  .log-rejected {
    color: #ff6b6b;
    font-weight: 600;
    font-size: 12px;
  }

/* Mission-event markers: transient pulse rings for impact / intercept outcomes */
.mission-event-marker {
    width: 40px;
    height: 40px;
    pointer-events: none;
}

.mission-event-marker::before,
.mission-event-marker::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    animation: mission-event-pulse 1.2s ease-out infinite;
}

.mission-event-marker::after {
    animation-delay: 0.4s;
}

.mission-event-impact::before,
.mission-event-impact::after {
    background: rgba(220, 50, 20, 0.55);
    box-shadow: 0 0 14px rgba(255, 100, 0, 0.85);
}

.mission-event-intercept-success::before,
.mission-event-intercept-success::after {
    background: rgba(40, 180, 90, 0.55);
    box-shadow: 0 0 14px rgba(60, 220, 110, 0.85);
}

.mission-event-intercept-miss::before,
.mission-event-intercept-miss::after {
    background: rgba(230, 170, 20, 0.5);
    box-shadow: 0 0 12px rgba(255, 200, 40, 0.75);
}

@keyframes mission-event-pulse {
    0% { transform: scale(0.3); opacity: 1; }
    100% { transform: scale(2.4); opacity: 0; }
}

/* Persistent weapon-target reticle: static (not animated), stays visible until the
   weapon resolves, so a viewer can see where it's headed before it gets there. */
.weapon-target-marker {
    font-size: 28px;
    line-height: 1;
    pointer-events: none;
    filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.8)) drop-shadow(0 0 8px rgba(255, 60, 0, 0.6));
}

/* Build Mode: unmistakable, can't-miss-it banner - the whole point is that there's
   never ambiguity about whether you're staging placements or watching a live run. */
#build-mode-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-modal);
    background: repeating-linear-gradient(
        45deg,
        #b8860b, #b8860b 20px,
        #8b6508 20px, #8b6508 40px
    );
    color: #fff;
    font-family: Arial, sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 1px;
    text-align: center;
    padding: 6px 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    gap: var(--spacing-md);
}

#build-mode-builder-label {
    font-weight: 400;
    opacity: 0.9;
}

/* Staging panel - visible only to the active builder */
#build-mode-panel {
    position: fixed;
    top: 46px;
    right: 10px;
    width: 260px;
    background: var(--bg-darker);
    border: 2px solid var(--bg-darkest);
    border-radius: 8px;
    box-shadow: var(--shadow-lg);
    z-index: var(--z-modal);
    font-family: Arial, sans-serif;
    color: var(--text-light);
    overflow: hidden;
}

.build-mode-panel-header {
    padding: 10px 12px;
    background: linear-gradient(to bottom, rgba(184, 134, 11, 0.4), rgba(184, 134, 11, 0.15));
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    font-weight: 600;
    font-size: 13px;
}

.build-mode-staged-list {
    max-height: 220px;
    overflow-y: auto;
    padding: var(--spacing-sm);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.build-mode-staged-row {
    background: var(--bg-light);
    border: var(--border-width-sm) solid var(--border-light);
    border-radius: var(--border-radius-sm);
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-xxs);
}

.build-mode-panel-actions {
    display: flex;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.build-mode-panel-actions button {
    flex: 1;
    font-size: var(--font-xxs);
}

/* Staged (not-yet-live) placement marker - visually distinct from the live pulse/target
   markers, since it represents a planned position, not something actually happening. */
.staged-placement-marker {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(184, 134, 11, 0.85);
    border: 2px dashed #fff;
    color: #fff;
    font-family: Arial, sans-serif;
    font-weight: 700;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}