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

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: #1a1a1a;
    color: #fff;
    overflow: hidden;
}

.container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    width: 100vw;
    height: calc(100vh - 64px); /* account for fixed topbar */
    gap: 2px;
    padding: 10px;
}

/* Map Section (Top Left) */
.map-section {
    background: #2a2a2a;
    border: 2px solid #00ff00;
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    overflow: hidden;
}

.map-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background: #1a1a1a;
    border-bottom: 2px solid #00ff00;
}

.map-header h2 {
    font-size: 18px;
}

.zoom-controls {
    display: flex;
    gap: 5px;
}

.zoom-controls button {
    padding: 5px 12px;
    background: #00ff00;
    color: #000;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    font-size: 14px;
}

.zoom-controls button:hover {
    background: #00dd00;
}

#mapCanvas {
    flex: 1;
    background: #0a0a0a;
}

/* Flights Section (Top Right) */
.flights-section {
    background: #2a2a2a;
    border: 2px solid #00ff00;
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    overflow: hidden;
}

.flights-section h2 {
    padding: 10px;
    border-bottom: 2px solid #00ff00;
    font-size: 18px;
}

.flights-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    flex: 1;
    overflow: hidden;
    gap: 2px;
}

.flights-subsection {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #1a1a1a;
}

.flights-subsection h3 {
    padding: 8px;
    background: #003300;
    color: #00ff00;
    font-size: 13px;
    margin: 0;
    border-bottom: 1px solid #00ff00;
}

.flights-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

.flight-item {
    background: #1a1a1a;
    padding: 12px;
    margin-bottom: 8px;
    border: 2px solid #333;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.flight-item:hover {
    background: #333;
    border: 2px solid #00ff00;
    box-shadow: 0 0 8px rgba(0, 255, 0, 0.3);
}

.flight-item.selected {
    background: #003300;
    border: 2px solid #00ff00;
    box-shadow: 0 0 12px rgba(0, 255, 0, 0.5);
}

.flight-callsign {
    font-weight: bold;
    color: #00ff00;
    font-size: 14px;
}

.flight-info {
    font-size: 12px;
    color: #aaa;
    margin-top: 4px;
}

.flight-type {
    display: inline-block;
    padding: 2px 6px;
    background: #004400;
    border-radius: 3px;
    font-size: 11px;
    margin-right: 5px;
}

.flight-status {
    display: inline-block;
    padding: 2px 6px;
    background: #440000;
    border-radius: 3px;
    font-size: 11px;
    margin-right: 5px;
}

.flight-location {
    display: block;
    padding: 2px 0;
    color: #00ffff;
    font-size: 11px;
    margin-top: 3px;
    font-weight: bold;
}

.emergency-badge {
    display: inline-block;
    padding: 3px 6px;
    background: #ff0000;
    color: #fff;
    border-radius: 3px;
    font-size: 10px;
    margin-top: 5px;
    font-weight: bold;
    animation: blink 0.7s infinite;
}

.emergency-badge.fire {
    background: #ff4400;
}

.emergency-badge.engine-out {
    background: #ff0000;
}

.emergency-badge.bird-hit {
    background: #ff8800;
}

.emergency-badge.hydraulic-failure {
    background: #ff0088;
}

.emergency-badge.electrical-failure {
    background: #0088ff;
}

@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0.5; }
}

/* Details Section (Bottom Left) */
.details-section {
    background: #2a2a2a;
    border: 2px solid #00ff00;
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    overflow: hidden;
}

.details-header {
    background: #1a1a1a;
    padding: 10px;
    border-bottom: 2px solid #00ff00;
}

.details-header h2 {
    font-size: 18px;
}

.aircraft-info {
    padding: 15px;
    border-bottom: 2px solid #00ff00;
    flex-shrink: 0;
}

.aircraft-info .placeholder {
    color: #666;
    font-style: italic;
}

.aircraft-detail {
    margin: 8px 0;
    font-size: 13px;
}

.aircraft-detail label {
    color: #00ff00;
    font-weight: bold;
    display: block;
}

.aircraft-detail value {
    color: #fff;
    display: block;
    padding-left: 10px;
    margin-top: 2px;
}

.aircraft-detail.emergency-alert {
    background: #ff0000;
    color: #fff;
    padding: 8px;
    border-radius: 4px;
    margin: 10px 0;
    border-left: 4px solid #ff00ff;
    animation: pulse-red 1s infinite;
}

@keyframes pulse-red {
    0%, 100% { background: #ff0000; }
    50% { background: #ff4444; }
}

.commands-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.commands-section h3 {
    padding: 10px;
    background: #1a1a1a;
    border-top: 2px solid #00ff00;
    font-size: 14px;
}

.commands-panel {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
}

.command-group {
    margin-bottom: 15px;
}

.command-group label {
    display: block;
    color: #00ff00;
    font-weight: bold;
    margin-bottom: 8px;
    font-size: 12px;
}

.command-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    margin-bottom: 10px;
}

.runway-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    margin-bottom: 10px;
}

.cmd-btn {
    padding: 8px;
    background: #003300;
    color: #00ff00;
    border: 1px solid #00ff00;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    font-weight: bold;
    transition: all 0.2s ease;
}

.cmd-btn:hover {
    background: #005500;
    border-color: #00dd00;
    box-shadow: 0 0 5px #00ff00;
}

.cmd-btn:active {
    background: #00ff00;
    color: #000;
}

.cmd-btn:disabled {
    background: #1a1a1a;
    color: #555;
    border-color: #555;
    cursor: not-allowed;
}

/* Logs Section (Bottom Right) */
.logs-section {
    background: #2a2a2a;
    border: 2px solid #00ff00;
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    overflow: hidden;
}

.logs-section h2 {
    padding: 10px;
    border-bottom: 2px solid #00ff00;
    font-size: 18px;
}

#activityLog {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    font-size: 12px;
}

.log-entry {
    padding: 8px;
    border-left: 3px solid #00ff00;
    margin-bottom: 5px;
    background: #1a1a1a;
    border-radius: 3px;
}

.log-entry.success {
    border-left-color: #00ff00;
    color: #00ff00;
}

.log-entry.warning {
    border-left-color: #ffff00;
    color: #ffff00;
}

.log-entry.error {
    border-left-color: #ff0000;
    color: #ff0000;
}

/* Topbar */
body {
    padding-top: 64px; /* reserve space for fixed topbar */
}

.topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 64px;
    background: rgba(10,10,10,0.95);
    border-bottom: 1px solid rgba(255,255,255,0.05);
    z-index: 60;
    display: flex;
    align-items: center;
}

.topbar-inner {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
}

.topbar-center {
    color: #fff;
    font-weight: 700;
    font-size: 18px;
    text-transform: uppercase;
}

.topbar-right {
    display: flex;
    gap: 8px;
    align-items: center;
}

.topbar-btn {
    background: #222;
    color: #fff;
    border: 1px solid #444;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
}

.topbar-btn:hover { background: #333; }

/* Modal */
.modal { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; z-index: 100; }
.modal.active { display: flex; }
.modal-content { background: #0f0f0f; color: #fff; padding: 18px; width: 340px; border-radius: 10px; box-shadow: 0 8px 40px rgba(0,0,0,0.6); }
.modal-content h3 { margin-bottom: 12px; }
.modal-content input { width: 100%; padding: 10px; margin-bottom: 8px; border-radius: 6px; border: 1px solid #333; background: #121212; color: #fff; }
.modal-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:8px; }
.modal-btn { padding: 8px 12px; border-radius:6px; border: none; cursor:pointer; background:#1a73e8; color:#fff; }
.modal-msg { margin-top:8px; color:#ffcc00; font-size:13px; }

/* Pause overlay removed */

@media (max-width: 900px) {
    .topbar-center { font-size: 14px; }
    .modal-content { width: 92%; }
}

.topbar-logo {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    object-fit: contain;
}

.log-time {
    color: #666;
    font-size: 11px;
    margin-right: 5px;
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #1a1a1a;
}

::-webkit-scrollbar-thumb {
    background: #00ff00;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #00dd00;
}