* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Segoe UI, Arial, sans-serif;
}

.layout {
    display: grid;
    grid-template-columns: 360px 1fr 420px;
    height: 100vh;
}

.panel {
    padding: 1rem;
    border-right: 1px solid #ddd;
    overflow: auto;
}

.muted {
    color: #555;
    margin-top: 0;
}

.auth-form {
    display: grid;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.auth-form input,
.auth-form button {
    padding: 0.5rem;
    font-size: 0.95rem;
}

.status-row {
    margin-bottom: 0.5rem;
}

.map-section {
    min-width: 0;
}

.flight-panel {
    border-left: 1px solid #ddd;
    padding: 1rem;
    overflow: auto;
    display: grid;
    gap: 1rem;
    align-content: start;
}

.flight-section h2 {
    margin: 0 0 0.5rem 0;
    font-size: 1rem;
}

.flight-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 0.85rem;
}

.flight-table th,
.flight-table td {
    border: 1px solid #ddd;
    padding: 0.35rem 0.45rem;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.flight-table thead {
    background: #f3f4f6;
}

.flight-row-airborne td {
    background: #dcfce7;
}

#map {
    width: 100%;
    height: 100%;
}

#details-panel {
    white-space: pre-wrap;
    background: #f5f5f5;
    border: 1px solid #ddd;
    padding: 0.75rem;
    min-height: 180px;
}