/**
 * Know.Travel — Flight Tracker
 * KT Redesign: design system variables, 2-column layout
 * Page: /flight-tracker/ and /flight-tracker/{number}/
 */

/* ==========================================================================
   LAYOUT: Page wrapper + 2-column grid
   ========================================================================== */

.ft-v2 { max-width: 1400px; margin: 0 auto; padding: 0 20px; }

/* Breadcrumbs (reuse airports pattern) */
.ft-v2 .aps-v2-breadcrumb {
    display: flex; align-items: center; gap: 6px;
    padding: 14px 0 8px; font-size: 13px; color: var(--text-tertiary);
}
.ft-v2 .aps-v2-breadcrumb a {
    color: var(--text-secondary); text-decoration: none; transition: color 0.15s;
}
.ft-v2 .aps-v2-breadcrumb a:hover { color: var(--accent-blue); }
.ft-v2 .aps-v2-bc-sep { opacity: 0.4; }

/* Wrapper for emergency/diversion data */
.kt-flight-content {
    /* ft-body is now inside — full width for map bleed */
}

/* 2-column grid: info LEFT (aligned with header), map RIGHT (bleeds to edge) */
.ft-body {
    display: grid;
    grid-template-columns: minmax(420px, 560px) 0px 1fr;
    gap: 0;
    padding: 24px 0 60px;
    /* Match .header-inner { padding: 0 40px } */
    padding-left: 40px;
    padding-right: 0;
}

/* Map in right column, sticky, bleeds to right edge */
.ft-body > .kt-flight-map-container {
    grid-column: 3;
    grid-row: 1 / span 2;
    border-radius: 12px 0 0 12px;
    overflow: hidden;
    position: sticky;
    top: 80px;
    height: calc(100vh - 120px);
    align-self: start;
}

/* Sidebar (info panel) in left column, row 1 */
.ft-sidebar {
    grid-column: 1;
    grid-row: 1;
    padding-right: 24px;
}

.ft-sidebar .kt-flight-info {
    position: static;
}

/* Main content in left column, row 2 (below info panel) */
.ft-main {
    grid-column: 1;
    grid-row: 2;
    min-width: 0;
    padding-right: 24px;
}

/* Resize handle — middle column */
.ft-resize-handle {
    grid-column: 2;
    grid-row: 1 / span 2;
    width: 20px;
    margin-left: -10px;
    cursor: col-resize;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    position: sticky;
    top: 80px;
    height: calc(100vh - 120px);
    align-self: start;
}

.ft-resize-line {
    width: 3px;
    height: 48px;
    border-radius: 3px;
    background: var(--border-default);
    transition: background 0.2s, height 0.2s, width 0.2s;
}

.ft-resize-handle:hover .ft-resize-line,
.ft-resize-handle.active .ft-resize-line {
    background: var(--accent-blue, #4fc3f7);
    height: 72px;
    width: 4px;
}

.ft-resize-handle.active .ft-resize-line {
    box-shadow: 0 0 8px rgba(79, 195, 247, 0.4);
}

@media (max-width: 1024px) {
    .ft-body {
        grid-template-columns: 1fr;
        padding: 0 0 16px;
    }
    .ft-resize-handle {
        display: none;
    }
    .ft-body > .kt-flight-map-container {
        grid-column: 1;
        grid-row: 1;
        position: relative;
        top: 0;
        height: 350px;
        border-radius: 0;
        overflow: hidden;
    }
    .ft-body > .kt-flight-map-container .kt-flight-map {
        min-height: unset;
    }
    .ft-sidebar {
        grid-column: 1;
        grid-row: 2;
        padding-right: 0;
    }
    .ft-main {
        grid-column: 1;
        grid-row: 3;
        padding-right: 0;
    }
    .ft-header-search {
        display: none;
    }
    .ft-breadcrumb-bar {
        padding: 12px 16px 0;
    }
    .kt-flight-header-inner {
        padding: 12px 16px;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    .kt-flight-search {
        width: 100%;
    }
    .kt-fs-input {
        min-width: 0;
        width: 100%;
    }
    .kt-fs-field {
        flex: 1;
    }
}


/* ==========================================================================
   ORIGINAL FLIGHT STYLES (migrated to CSS variables)
   ========================================================================== */


/* Flight page styles */
.kt-flight-page {
    min-height: 100vh;
    background: var(--bg-base);
    color: var(--text-primary);
    padding-top: 0 !important;
}

/* Landing notification overlay */
#kt-landing-notification {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s ease;
}

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

.kt-landing-content {
    background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-elevated) 100%);
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: 16px;
    padding: 40px;
    text-align: center;
    max-width: 400px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.kt-landing-icon {
    font-size: 64px;
    margin-bottom: 16px;
    animation: bounce 1s ease infinite;
}

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

.kt-landing-title {
    font-size: 28px;
    font-weight: 700;
    color: #22c55e;
    margin-bottom: 12px;
}

.kt-landing-text {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 24px;
}

.kt-landing-text span {
    color: #f59e0b;
    font-weight: 600;
}

.kt-landing-btn {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    border: none;
    color: var(--text-primary);
    padding: 12px 32px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.kt-landing-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 20px rgba(34, 197, 94, 0.4);
}

/* Header */
.kt-flight-header {
    background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-base) 100%);
    border-bottom: 1px solid var(--border-default);
}

.kt-flight-header-inner {
    padding: 16px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.kt-flight-title {
    font-size: 24px;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.kt-flight-icon {
    font-size: 28px;
}

.kt-flight-live-badge {
    background: #22c55e;
    color: #000;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
    animation: pulse 2s infinite;
}

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

/* Search field — standardized with airports v7-hs-field */
.kt-flight-search {
    display: flex;
    align-items: center;
    gap: 0;
}

.kt-fs-field {
    position: relative;
    display: flex;
    align-items: center;
    border: 1px solid var(--border-default);
    border-radius: 8px;
    background: var(--bg-input);
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.kt-fs-field:focus-within {
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px var(--accent-blue-muted, rgba(79,195,247,0.12));
}

.kt-fs-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 15px;
    height: 15px;
    color: var(--text-tertiary);
    pointer-events: none;
}

.kt-fs-input {
    flex: 1;
    padding: 7px 8px 7px 32px;
    min-width: 220px;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 13px;
    font-family: inherit;
    outline: none;
}

.kt-fs-input::placeholder {
    color: var(--text-tertiary);
}

/* Track button — inside the field, like airports country dropdown */
.kt-flight-search-btn {
    padding: 5px 14px;
    margin: 4px 4px 4px 0;
    flex-shrink: 0;
    border: none;
    border-radius: 5px;
    background: var(--gradient-brand, linear-gradient(135deg, #4fc3f7, #7c4dff));
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: filter 0.2s, box-shadow 0.2s;
    white-space: nowrap;
}

.kt-flight-search-btn:hover {
    filter: brightness(1.1);
    box-shadow: 0 2px 8px rgba(79, 195, 247, 0.3);
}

/* Breadcrumbs */
.ft-breadcrumb-bar {
    padding: 16px 24px 0;
}

.ft-breadcrumb-bar .ap-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-tertiary);
    flex-wrap: wrap;
}

.ft-breadcrumb-bar .ap-breadcrumb a {
    color: var(--accent-blue);
    text-decoration: none;
    transition: color 0.15s;
}

.ft-breadcrumb-bar .ap-breadcrumb a:hover {
    color: var(--accent-blue);
    text-decoration: underline;
}

.ft-breadcrumb-bar .ap-breadcrumb .sep {
    opacity: 0.5;
}

/* Sticky header search (appears on scroll) */
.ft-header-search {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 64px;
    z-index: 101;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.ft-header-search.visible {
    opacity: 1;
}

.ft-header-search.visible .ft-hs-inner {
    pointer-events: auto;
}

.ft-hs-inner {
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 40px;
    /* Center between logo and nav */
    padding-left: 220px;
    padding-right: 320px;
}

.ft-hs-inner .kt-fs-field {
    max-width: 420px;
    width: 100%;
}

/* Intro */
.kt-flight-intro {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: 40px 20px;
}

.kt-flight-intro-inner {
    text-align: center;
    max-width: 500px;
}

.kt-flight-intro h2 {
    font-size: 28px;
    margin: 0 0 16px;
}

.kt-flight-intro p {
    color: var(--text-secondary);
    font-size: 16px;
    line-height: 1.6;
    margin: 0 0 24px;
}

.kt-flight-examples {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.kt-flight-examples span {
    color: var(--text-tertiary);
}

.kt-flight-examples a {
    background: var(--bg-elevated);
    color: var(--text-primary);
    padding: 6px 14px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 500;
    transition: background 0.2s;
}

.kt-flight-examples a:hover {
    background: var(--bg-elevated);
}

/* Error */
.kt-flight-error {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: 40px 20px;
}

.kt-flight-error-inner {
    text-align: center;
    max-width: 400px;
}

.kt-flight-error-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.kt-flight-error h2 {
    font-size: 24px;
    margin: 0 0 12px;
}

.kt-flight-error p {
    color: var(--text-secondary);
    margin: 0 0 8px;
}

.kt-flight-error-hint {
    font-size: 14px;
    color: var(--text-tertiary);
}

/* Content layout — map is now a direct child of .ft-body grid */
/* Grid layout in .ft-body (see top of file) */

/* Map */
.kt-flight-map-container {
    position: relative;
    background: var(--bg-card);
}

/* Leaflet tile fix for dark backgrounds */
.leaflet-tile-pane { will-change: transform; }
.leaflet-tile { outline: 1px solid transparent; }

/* Emergency mode - NO border on map, keep it clean */
/* Emergency indicators are in ETA block and squawk row */

/* Emergency route styling */
.kt-route-emergency {
    background: rgba(239, 68, 68, 0.1);
    border-radius: 8px;
    padding: 12px;
    margin: -12px;
    margin-bottom: 12px;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

/* Diverted destination display */
.kt-original-dest {
    text-decoration: line-through;
    opacity: 0.5;
    font-size: 24px !important;
}

.kt-divert-arrow {
    color: #ef4444;
    font-size: 18px;
    margin: 0 6px;
    animation: pulse-red 1.5s ease-in-out infinite;
}

.kt-diverted-dest {
    color: #ef4444 !important;
    animation: pulse-red 1.5s ease-in-out infinite;
}

@keyframes pulse-red {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* Diverted flight (without emergency) - no map border */

.kt-diverted-flight:not(.kt-emergency-mode) .kt-route-emergency {
    background: rgba(245, 158, 11, 0.1);
    border-color: rgba(245, 158, 11, 0.3);
}

.kt-diverted-flight:not(.kt-emergency-mode) .kt-divert-arrow,
.kt-diverted-flight:not(.kt-emergency-mode) .kt-diverted-dest {
    color: #f59e0b !important;
    animation: pulse-amber 1.5s ease-in-out infinite;
}

@keyframes pulse-amber {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.kt-flight-map {
    width: 100%;
    height: 100%;
    min-height: 500px;
}

.kt-flight-map-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
}

.kt-flight-map-overlay-text {
    background: var(--bg-elevated);
    padding: 16px 24px;
    border-radius: 8px;
    font-size: 16px;
}

/* Historical track badge */
.kt-flight-map-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 800;
    background: rgba(12, 12, 20, 0.82);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.07);
    padding: 8px 14px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.kt-map-badge-icon {
    font-size: 14px;
}

.kt-map-badge-text {
    font-size: 12px;
    color: rgba(255,255,255,0.85);
    font-weight: 500;
}

/* Map style switcher (unified: airports / routes / visa-check) */
.ft-map-styles {
    position: absolute;
    top: 12px;
    right: 12px;
    left: auto;
    z-index: 800;
    display: flex;
    gap: 4px;
    padding: 3px;
    background: rgba(12, 12, 20, 0.82);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 8px;
}

.ft-ms-btn {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.55);
    cursor: pointer;
    transition: all 0.15s;
}

.ft-ms-btn:hover {
    color: #eaeaf0;
    background: rgba(255,255,255,0.08);
}

.ft-ms-btn.active {
    background: rgba(59,130,246,0.25);
    color: #93bbfc;
}

/* Not tracking info - right panel */
.kt-not-tracking-info {
    background: rgba(30, 30, 40, 0.6);
    border: 1px solid var(--border-default);
    padding: 10px 14px;
    border-radius: 8px;
}

.kt-not-tracking-text {
    font-size: 12px;
    color: var(--text-tertiary);
    line-height: 1.5;
}

/* Playback controls */
.kt-playback-controls {
    position: absolute;
    bottom: 12px;
    left: 12px;
    right: 12px;
    z-index: 1000;
    background: rgba(30, 30, 40, 0.92);
    border: 1px solid var(--border-default);
    padding: 6px 10px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    backdrop-filter: blur(6px);
}

.kt-playback-btn {
    background: rgba(245, 158, 11, 0.2);
    border: 1px solid rgba(245, 158, 11, 0.4);
    color: #f59e0b;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

.kt-playback-btn svg { width: 14px; height: 14px; }

.kt-playback-btn:hover {
    background: rgba(245, 158, 11, 0.3);
    transform: scale(1.05);
}

.kt-playback-btn.playing {
    background: rgba(34, 197, 94, 0.2);
    border-color: rgba(34, 197, 94, 0.4);
    color: #22c55e;
}

.kt-playback-progress {
    flex: 1;
    height: 6px;
    background: var(--bg-elevated);
    border-radius: 3px;
    cursor: pointer;
    position: relative;
    touch-action: none;
    user-select: none;
}

.kt-playback-progress:hover,
.kt-playback-progress.scrubbing {
    height: 8px;
}

.kt-playback-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #22c55e, #3b82f6);
    border-radius: 3px;
    pointer-events: none;
}

.kt-playback-thumb {
    position: absolute;
    top: 50%;
    left: 0%;
    width: 14px;
    height: 14px;
    margin-left: -7px;
    margin-top: -7px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(0,0,0,0.5);
    opacity: 0;
    transition: opacity 0.15s;
    pointer-events: none;
}

.kt-playback-progress:hover .kt-playback-thumb,
.kt-playback-progress.scrubbing .kt-playback-thumb {
    opacity: 1;
}

.kt-playback-speed {
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    color: var(--text-primary);
    padding: 3px 6px;
    border-radius: 4px;
    font-size: 11px;
    cursor: pointer;
    flex-shrink: 0;
}

.kt-playback-speed option {
    background: var(--bg-elevated);
    color: var(--text-primary);
}

.kt-playback-speed:focus {
    outline: none;
    border-color: rgba(59, 130, 246, 0.5);
}

/* Live Debug Panel (Admin Only) */
.kt-live-debug {
    position: absolute;
    top: 60px;
    right: 16px;
    z-index: 1000;
    background: rgba(20, 20, 30, 0.9);
    border: 1px solid rgba(245, 158, 11, 0.3);
    padding: 10px 14px;
    border-radius: 8px;
    font-family: monospace;
    font-size: 11px;
    min-width: 180px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
.kt-live-debug-title {
    color: #f59e0b;
    font-weight: bold;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border-default);
    font-size: 12px;
}
.kt-live-debug-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin: 4px 0;
    color: var(--text-tertiary);
}
.kt-live-debug-row span:last-child {
    color: var(--text-primary);
    font-weight: 500;
}
.kt-live-debug-row span:last-child.kt-dbg-true {
    color: #22c55e;
}
.kt-live-debug-row span:last-child.kt-dbg-false {
    color: #ef4444;
}
.kt-live-debug-row span:last-child.kt-dbg-low {
    color: #f59e0b;
}

/* Landed icon styling */
.kt-landed-icon {
    background: transparent !important;
    border: none !important;
}

/* Info panel — now inside .ft-sidebar as a card */
.kt-flight-info {
    background: var(--bg-card);
    padding: 24px;
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Route */
.kt-flight-route {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border-default);
}

.kt-flight-route-airport {
    flex: 1;
    text-align: center;
}

.kt-flight-airport-code {
    display: block;
    font-size: 32px;
    font-weight: 700;
    letter-spacing: 1px;
}
a.kt-flight-airport-code {
    text-decoration: none;
    color: inherit;
    transition: opacity 0.15s;
}
a.kt-flight-airport-code:hover {
    opacity: 0.75;
}


.kt-flight-route-line {
    flex-shrink: 0;
}

.kt-flight-route-arrow {
    font-size: 24px;
    color: var(--text-tertiary);
}

/* Stats grid */
.kt-flight-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.kt-flight-stat {
    background: var(--bg-elevated);
    padding: 16px;
    border-radius: 8px;
}

.kt-flight-stat-label {
    display: block;
    font-size: 12px;
    color: var(--text-tertiary);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.kt-flight-stat-value {
    display: block;
    font-size: 20px;
    font-weight: 600;
}

/* Details */
.kt-flight-details h3 {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-tertiary);
    margin: 0 0 12px;
}

.kt-flight-details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.kt-flight-detail {
    background: var(--bg-elevated);
    padding: 12px;
    border-radius: 6px;
}

.kt-flight-detail-label {
    display: block;
    font-size: 11px;
    color: var(--text-tertiary);
    margin-bottom: 4px;
}

.kt-flight-detail-value {
    display: block;
    font-size: 14px;
    font-weight: 500;
}

/* ETA */
/* Departure Times */
.kt-flight-departure-times {
    margin-bottom: 16px;
}

.kt-departure-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.kt-departure-cell {
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    padding: 12px;
    border-radius: 6px;
    text-align: center;
}

.kt-departure-label {
    display: block;
    color: var(--text-tertiary);
    font-size: 11px;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.kt-departure-value {
    display: block;
    color: var(--text-primary);
    font-size: 18px;
    font-weight: 600;
}

.kt-departure-value.kt-delayed {
    color: #f97316;
}

.kt-departure-delay {
    display: inline-block;
    font-size: 11px;
    font-weight: 500;
    color: #f97316;
    background: rgba(249, 115, 22, 0.2);
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 6px;
    vertical-align: middle;
}

/* ETA Block - default neutral gray */
.kt-flight-eta {
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    padding: 16px;
    border-radius: 8px;
}

/* Delayed - orange (any delay > 0) */
.kt-flight-eta.kt-eta-delayed {
    background: rgba(249, 115, 22, 0.1);
    border-color: rgba(249, 115, 22, 0.3);
}

.kt-flight-eta.kt-eta-delayed .kt-flight-eta-value {
    color: #f97316;
}

/* On time or early - green */
.kt-flight-eta.kt-eta-on-time,
.kt-flight-eta.kt-eta-early {
    background: rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.3);
}

.kt-flight-eta.kt-eta-on-time .kt-flight-eta-value,
.kt-flight-eta.kt-eta-early .kt-flight-eta-value {
    color: #22c55e;
}

/* Landed - green */
.kt-flight-eta.kt-eta-landed {
    background: rgba(34, 197, 94, 0.2);
    border-color: rgba(34, 197, 94, 0.5);
}

.kt-flight-eta.kt-eta-landed .kt-flight-eta-label {
    color: #22c55e;
    font-weight: 600;
}

.kt-flight-eta.kt-eta-landed .kt-flight-eta-value {
    color: #22c55e;
}

/* Emergency / Diverted - dark red (not too aggressive) */
.kt-flight-eta.kt-eta-emergency {
    background: rgba(220, 80, 60, 0.12);
    border-color: rgba(220, 80, 60, 0.45);
    animation: pulse-emergency-block 2.5s ease-in-out infinite;
}

@keyframes pulse-emergency-block {
    0%, 100% { border-color: rgba(220, 80, 60, 0.45); box-shadow: 0 0 0 rgba(220, 80, 60, 0); }
    50% { border-color: rgba(220, 80, 60, 0.7); box-shadow: 0 0 10px rgba(220, 80, 60, 0.15); }
}

.kt-flight-eta.kt-eta-emergency .kt-flight-eta-value {
    color: #dc5040;
}

.kt-eta-emergency-label {
    color: #dc5040 !important;
    font-weight: 600 !important;
    font-size: 14px !important;
}

.kt-emergency-squawk-badge {
    background: rgba(220, 80, 60, 0.2);
    color: #dc5040;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
    font-family: monospace;
    letter-spacing: 1px;
}

.kt-eta-diversion-info {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    padding: 6px 10px;
    background: rgba(220, 80, 60, 0.08);
    border-radius: 6px;
    border: 1px solid rgba(220, 80, 60, 0.2);
}

.kt-eta-diversion-label {
    font-size: 12px;
    color: var(--text-tertiary);
}

.kt-eta-diversion-dest {
    font-size: 18px;
    font-weight: 700;
    color: #dc5040;
    letter-spacing: 1px;
}

.kt-scheduled-dest-note {
    font-size: 11px;
    color: var(--text-tertiary);
    font-family: monospace;
    margin-left: 2px;
}

/* Possible diversion warning */
.kt-eta-possible-diversion {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    padding: 5px 10px;
    background: rgba(220, 80, 60, 0.08);
    border-radius: 6px;
    border: 1px dashed rgba(220, 80, 60, 0.3);
    font-size: 12px;
    color: var(--text-secondary);
}

.kt-eta-possible-diversion .kt-possible-label {
    color: #dc5040;
    font-weight: 600;
}

/* Original time crossed out in emergency */
.kt-eta-scheduled-crossed {
    text-decoration: line-through;
    opacity: 0.5;
}

.kt-eta-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.kt-flight-eta-label {
    color: var(--text-secondary);
    font-size: 13px;
}

.kt-delay-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 4px;
}

.kt-delay-badge.delayed {
    background: rgba(249, 115, 22, 0.2);
    color: #f97316;
}

.kt-delay-badge.early {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
}

.kt-eta-main {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 6px;
}

.kt-flight-eta-value {
    font-size: 28px;
    font-weight: 600;
    color: #22c55e;
}

.kt-eta-tz {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-tertiary);
}

.kt-eta-scheduled {
    display: flex;
    align-items: center;
    gap: 6px;
}

.kt-scheduled-label {
    font-size: 12px;
    color: var(--text-tertiary);
}

.kt-scheduled-time {
    font-size: 12px;
    color: var(--text-tertiary);
    font-family: monospace;
}

/* Altitude Legend */
.kt-flight-legend {
    background: var(--bg-elevated);
    padding: 16px;
    border-radius: 8px;
}

.kt-flight-legend h3 {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-tertiary);
    margin: 0 0 12px;
}

.kt-legend-items {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.kt-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.kt-legend-color {
    width: 16px;
    height: 4px;
    border-radius: 2px;
    flex-shrink: 0;
}

.kt-legend-label {
    font-size: 11px;
    color: var(--text-secondary);
}

/* Update indicator */
.kt-flight-update {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--border-default);
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12px;
    color: var(--text-tertiary);
}

.kt-flight-update-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.kt-flight-next-update {
    color: var(--text-secondary);
    font-weight: 500;
}

.kt-flight-update-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
}

.kt-flight-update-indicator.updating {
    animation: blink 0.5s infinite;
}

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

/* Completed flight - Last Landed info */
.kt-flight-landed-info {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: var(--bg-elevated);
    border-radius: 12px;
    margin: 16px 0;
}

.kt-landed-icon {
    font-size: 32px;
    opacity: 0.8;
}

.kt-landed-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.kt-landed-label {
    font-size: 14px;
    color: var(--text-secondary);
}

.kt-landed-time {
    font-size: 13px;
    color: var(--text-tertiary);
}

/* Landed block for completed flights */
.kt-flight-landed-block {
    background: rgba(34, 197, 94, 0.08);
    border: 1px solid rgba(34, 197, 94, 0.25);
    border-radius: 12px;
    padding: 16px;
}

/* Delayed version - orange border */
.kt-flight-landed-block.kt-landed-delayed {
    background: rgba(249, 115, 22, 0.08);
    border-color: rgba(249, 115, 22, 0.25);
}

.kt-flight-landed-block.kt-landed-delayed .kt-landed-title {
    color: #f97316;
}

/* Diverted version - red border */
.kt-flight-landed-block.kt-landed-diverted {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.4);
}

.kt-flight-landed-block.kt-landed-diverted .kt-landed-title {
    color: #ef4444;
}

/* Diverted destination display */
.kt-diverted-dest {
    display: flex;
    align-items: center;
    gap: 4px;
}

.kt-dest-planned {
    text-decoration: line-through;
    opacity: 0.5;
    font-size: 12px;
}

.kt-dest-arrow {
    color: #ef4444;
    font-size: 10px;
}

.kt-dest-actual {
    color: #ef4444;
    font-weight: 600;
}

.kt-landed-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-default);
}

.kt-landed-icon-small {
    font-size: 18px;
}

.kt-landed-title {
    font-size: 15px;
    font-weight: 600;
    color: #22c55e;
}

.kt-landed-date {
    margin-left: auto;
    font-size: 13px;
    color: var(--text-tertiary);
}

/* Flight times grid */
.kt-flight-times-grid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

/* Landed block overrides the live grid styles */
.kt-flight-landed-block .kt-flight-times-grid {
    display: flex !important;
    grid-template-columns: unset !important;
    border: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
    margin-bottom: 0 !important;
}

.kt-times-column {
    text-align: center;
    flex: 1;
}

.kt-times-label {
    font-size: 11px;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.kt-times-airport {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.kt-times-value {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
}

.kt-times-scheduled {
    font-size: 13px;
    color: var(--text-tertiary);
    text-decoration: line-through;
    margin-bottom: 2px;
}

.kt-times-value.kt-time-delayed {
    color: #f59e0b;
}

.kt-times-value.kt-time-early {
    color: #22c55e;
}

.kt-times-value.kt-time-diverted {
    color: #ef4444;
}

.kt-delay-badge {
    font-size: 10px;
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
    padding: 2px 5px;
    border-radius: 4px;
    margin-left: 4px;
    font-weight: 500;
}

.kt-early-badge {
    font-size: 10px;
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
    padding: 2px 5px;
    border-radius: 4px;
    margin-left: 4px;
    font-weight: 500;
}

.kt-diverted-badge {
    font-size: 10px;
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
    padding: 2px 5px;
    border-radius: 4px;
    margin-left: 4px;
    font-weight: 600;
}

.kt-times-arrival {
    color: #22c55e;
}

.kt-times-duration {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: var(--text-tertiary);
    padding: 0 8px;
}

.kt-duration-line {
    font-size: 14px;
}

.kt-duration-value {
    font-size: 12px;
    white-space: nowrap;
}

.kt-distance-value {
    font-size: 11px;
    color: var(--text-tertiary);
    white-space: nowrap;
    margin-top: 2px;
}

/* Diverted flight - duration/distance tooltip indicator */
.kt-landed-diverted .kt-times-duration {
    cursor: help;
    position: relative;
}

.kt-landed-diverted .kt-times-duration::after {
    content: 'ⓘ';
    font-size: 10px;
    color: #f59e0b;
    margin-left: 4px;
    vertical-align: super;
}

.kt-times-note {
    text-align: center;
    font-size: 11px;
    color: var(--text-tertiary);
    margin-top: 12px;
}

/* Legacy styles kept for compatibility */
.kt-landed-times {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.kt-landed-scheduled,
.kt-landed-actual {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.kt-time-label {
    font-size: 13px;
    color: var(--text-secondary);
}

.kt-time-value {
    font-size: 15px;
    font-weight: 500;
}

.kt-time-actual {
    color: #22c55e;
    font-weight: 600;
}

.kt-time-actual.kt-delayed {
    color: #f59e0b;
}

.kt-time-actual.kt-early {
    color: #22c55e;
}

.kt-arrival-delay,
.kt-arrival-early {
    font-size: 12px;
    margin-left: 6px;
    padding: 2px 6px;
    border-radius: 4px;
}

.kt-arrival-delay {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

.kt-arrival-early {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
}

.kt-departure-early {
    font-size: 11px;
    color: #22c55e;
    margin-left: 4px;
}

.kt-landed-location {
    margin-top: 12px;
    font-size: 12px;
    color: var(--text-tertiary);
    text-align: center;
}

/* Data source indicator */
.kt-data-source {
    margin-top: 16px;
    text-align: center;
}

.kt-source-badge {
    display: inline-block;
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 12px;
    background: var(--bg-elevated);
    color: var(--text-tertiary);
}

.kt-source-tracked {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.kt-source-api {
    background: rgba(59, 130, 246, 0.15);
    color: var(--accent-blue);
}

/* Custom plane marker */
.kt-plane-marker {
    background: none !important;
    border: none !important;
}

.kt-plane-marker svg {
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.8));
    transform-origin: center center;
}

/* Airport markers */
.kt-airport-marker-wrapper {
    background: none !important;
    border: none !important;
}

.kt-airport-marker {
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-primary);
    text-align: center;
    white-space: nowrap;
    box-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

/* Leaflet overrides for dark theme */
.leaflet-container {
    background: var(--bg-card);
}

.leaflet-control-attribution {
    background: transparent !important;
    color: rgba(255,255,255,0.15) !important;
    font-size: 9px !important;
    line-height: 1 !important;
    padding: 1px 4px !important;
}

.leaflet-control-attribution a {
    color: rgba(255,255,255,0.2) !important;
    text-decoration: none !important;
}

[data-theme="light"] .leaflet-control-attribution {
    color: rgba(0,0,0,0.12) !important;
}

[data-theme="light"] .leaflet-control-attribution a {
    color: rgba(0,0,0,0.15) !important;
}

.leaflet-control-zoom {
    box-shadow: 0 2px 8px rgba(0,0,0,0.18) !important;
    border-radius: 8px !important;
    overflow: hidden;
}

.leaflet-control-zoom a {
    background: var(--bg-elevated) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-default) !important;
    font-weight: 600 !important;
    font-size: 18px !important;
    line-height: 30px !important;
    width: 30px !important;
    height: 30px !important;
}

.leaflet-control-zoom a:hover {
    background: var(--bg-card) !important;
    color: var(--accent-blue) !important;
}

/* Light theme: stronger border for visibility */
[data-theme="light"] .leaflet-control-zoom {
    box-shadow: 0 2px 8px rgba(0,0,0,0.22), 0 0 0 1px rgba(0,0,0,0.08) !important;
}

[data-theme="light"] .leaflet-control-zoom a {
    border-color: rgba(0,0,0,0.15) !important;
}

/* Schedule & History Section — inside ft-main */
.kt-flight-secondary {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 24px;
}

.kt-flight-schedule-section,
.kt-flight-history-section {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 24px;
    border: 1px solid var(--border-default);
    overflow-x: auto;
}

.kt-flight-schedule-section h3,
.kt-flight-history-section h3 {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 16px;
    color: var(--text-primary);
}

.kt-flight-schedule-table,
.kt-flight-history-table {
    width: 100%;
    min-width: 400px;
    border-collapse: collapse;
    font-size: 14px;
}

.kt-flight-schedule-table th,
.kt-flight-history-table th {
    text-align: left;
    font-size: 11px;
    text-transform: uppercase;
    color: var(--text-tertiary);
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-default);
}

.kt-flight-schedule-table td,
.kt-flight-history-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-primary);
    white-space: nowrap;
}

.kt-flight-history-table {
    min-width: 640px;
}

.kt-flight-schedule-table tr.is-today {
    background: rgba(59, 130, 246, 0.1);
}

.kt-schedule-date,
.kt-history-date {
    font-weight: 500;
}

.kt-schedule-time {
    font-family: monospace;
}

.kt-arrival-eta {
    display: block;
    font-weight: 600;
    color: #22c55e;
}

.kt-arrival-eta.delayed {
    color: #f97316;
}

.kt-arrival-eta.diverted {
    color: #ef4444;
}

.kt-arrival-eta.early {
    color: #22c55e;
}

.kt-arrival-scheduled {
    display: block;
    font-size: 11px;
    color: var(--text-tertiary);
}

.kt-arrival-scheduled.strikethrough {
    text-decoration: line-through;
}

/* Departure in schedule table */
.kt-departure-actual {
    display: block;
    font-weight: 600;
    color: #22c55e;
}

.kt-departure-actual.delayed {
    color: #f97316;
}

.kt-departure-scheduled {
    display: block;
    font-size: 11px;
    color: var(--text-tertiary);
}

.kt-departure-scheduled.strikethrough {
    text-decoration: line-through;
}

.kt-next-day {
    font-size: 10px;
    color: var(--text-tertiary);
    margin-left: 4px;
}

.kt-schedule-status span,
.kt-history-status span {
    font-size: 12px;
}

.kt-status-airborne { color: #22c55e; }
.kt-status-landed { color: var(--accent-blue); }
.kt-status-delayed { color: #f59e0b; }
.kt-status-cancelled { color: #ef4444; }
.kt-status-on-time { color: #22c55e; }
.kt-status-scheduled { color: var(--text-tertiary); }
.kt-status-diverted { color: #f59e0b; }
.kt-status-emergency { color: #ef4444; font-weight: 700; }
.kt-status-departed { color: var(--accent-blue); }
.kt-status-boarding { color: #22c55e; }
.kt-status-gateclosed { color: #f59e0b; }
.kt-status-unknown { color: var(--text-tertiary); }

.kt-schedule-updated {
    display: block;
    margin-top: 12px;
    font-size: 11px;
    color: var(--text-tertiary);
}

.kt-no-data {
    color: var(--text-tertiary);
    font-size: 14px;
    text-align: center;
    padding: 20px;
}

/* History table extras */
.kt-history-table-wrapper {
    overflow-x: auto;
}

.kt-history-time {
    font-family: monospace;
    font-size: 13px;
}

/* Delay display in history table */
.kt-hist-actual {
    display: block;
    font-weight: 600;
}

.kt-hist-actual.delayed {
    color: #f97316;
}

.kt-hist-actual.early {
    color: #22c55e;
}

.kt-hist-actual.diverted {
    color: #ef4444;
}

.kt-hist-scheduled {
    display: block;
    font-size: 10px;
    color: var(--text-tertiary);
    text-decoration: line-through;
    margin-top: 1px;
}

.kt-aircraft-reg {
    font-weight: 500;
    display: block;
}

.kt-aircraft-type {
    display: block;
    font-size: 11px;
    color: var(--text-tertiary);
    margin-top: 2px;
}

.kt-history-status span {
    cursor: help;
}

@media (max-width: 600px) {
    .kt-flight-history-table th:nth-child(3),
    .kt-flight-history-table td:nth-child(3),
    .kt-flight-history-table th:nth-child(4),
    .kt-flight-history-table td:nth-child(4) {
        display: none;
    }
}

/* Statistics Section — card inside ft-main */
.kt-flight-stats-section {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 28px 24px;
    margin-bottom: 24px;
}

.kt-flight-stats-inner {
    /* Inside left column, no max-width needed */
}

.kt-flight-stats-section h2 {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 20px 0;
    color: var(--text-primary);
}

.kt-flight-stats-text {
    color: var(--text-secondary);
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 30px;
    max-width: 900px;
}

.kt-flight-stats-text p {
    margin: 0;
}

.kt-flight-stats-text strong {
    color: var(--text-primary);
}

.kt-flight-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.kt-stat-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
}

.kt-stat-value {
    display: block;
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.kt-stat-label {
    font-size: 12px;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

@media (max-width: 900px) {
    .kt-flight-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 500px) {
    .kt-flight-stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
    .kt-stat-card {
        padding: 15px 10px;
    }
    .kt-stat-value {
        font-size: 18px;
    }
}

/* Technical Data Section — card inside ft-main */
.kt-flight-technical-section {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 24px;
}

/* Flight Not Live */
.kt-flight-not-live {
    text-align: center;
    padding: 20px;
    background: var(--bg-hover, rgba(255,255,255,0.02));
    border-radius: 12px;
    margin: 16px 0;
}

.kt-not-live-icon {
    font-size: 36px;
    margin-bottom: 12px;
}

.kt-not-live-text {
    font-size: 16px;
    color: var(--text-secondary);
    margin: 0 0 6px 0;
}

.kt-not-live-subtext {
    font-size: 13px;
    color: var(--text-tertiary);
    margin: 0;
}

.kt-flight-technical-inner {
    /* Inside left column, no max-width needed */
}

.kt-flight-technical-section h3 {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 20px 0;
    color: var(--text-primary);
}

.kt-technical-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}

.kt-tech-item {
    background: var(--bg-hover, rgba(255,255,255,0.02));
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.kt-tech-label {
    font-size: 11px;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.kt-tech-value {
    font-size: 14px;
    color: var(--text-primary);
    font-weight: 500;
}

.kt-tech-mono {
    font-family: 'Monaco', 'Consolas', monospace;
    letter-spacing: 0.5px;
}

/* History table improvements */
.kt-history-runway {
    font-family: monospace;
    font-size: 11px;
    color: var(--text-secondary);
}

.kt-history-distance {
    font-size: 12px;
    color: var(--text-secondary);
}

.kt-status-landed {
    color: #22c55e;
    font-size: 16px;
}

.kt-status-cancelled {
    color: #ef4444;
}

.kt-status-airborne {
    color: var(--accent-blue);
}

.kt-status-unknown {
    color: var(--text-tertiary);
}

@media (max-width: 700px) {
    .kt-flight-history-table th:nth-child(6),
    .kt-flight-history-table td:nth-child(6),
    .kt-flight-history-table th:nth-child(7),
    .kt-flight-history-table td:nth-child(7) {
        display: none;
    }
}

/* Equipment List - compact rows */
.kt-equipment-list {
    margin-top: 16px;
    border-top: 1px solid var(--border-default);
    padding-top: 12px;
}

.kt-equipment-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-subtle);
}

.kt-equipment-row:last-child {
    border-bottom: none;
}

.kt-equipment-label {
    font-size: 12px;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.kt-equipment-value {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    text-align: right;
}

/* Emergency Squawk Styles */
.kt-equipment-row.kt-emergency-squawk {
    background: rgba(220, 38, 38, 0.15);
    border-radius: 6px;
    padding: 8px 10px;
    margin: 4px -10px;
    border: 1px solid rgba(220, 38, 38, 0.6);
    animation: kt-emergency-pulse 1.5s ease-in-out infinite;
}

.kt-equipment-row.kt-emergency-squawk .kt-equipment-value {
    color: #fca5a5;
}

.kt-squawk-alert {
    display: inline-block;
    background: #dc2626;
    color: var(--text-primary);
    font-size: 9px;
    font-weight: 700;
    padding: 2px 5px;
    border-radius: 3px;
    margin-left: 6px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    vertical-align: middle;
    animation: kt-alert-blink 1s ease-in-out infinite;
}

@keyframes kt-emergency-pulse {
    0%, 100% {
        background: rgba(220, 38, 38, 0.15);
        box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4);
        border-color: rgba(220, 38, 38, 0.6);
    }
    50% {
        background: rgba(220, 38, 38, 0.3);
        box-shadow: 0 0 12px 4px rgba(220, 38, 38, 0.5);
        border-color: rgba(220, 38, 38, 1);
    }
}

@keyframes kt-alert-blink {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.6;
    }
}


/* ===========================================================================
   LIGHT THEME OVERRIDES
   =========================================================================== */

/* Cards & sections — visible separation on white background */
[data-theme="light"] .kt-flight-info,
[data-theme="light"] .kt-flight-stats-section,
[data-theme="light"] .kt-flight-schedule-section,
[data-theme="light"] .kt-flight-history-section,
[data-theme="light"] .kt-flight-technical-section {
    border: 1px solid var(--border-strong);
    box-shadow: var(--shadow-md);
}

/* Stats chips */
[data-theme="light"] .kt-flight-stat {
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    box-shadow: var(--shadow-sm);
}

/* Detail rows */
[data-theme="light"] .kt-flight-detail-row:nth-child(even) {
    background: var(--bg-elevated);
}

/* Tables */
[data-theme="light"] .kt-flight-schedule-table th,
[data-theme="light"] .kt-flight-history-table th {
    background: var(--bg-elevated);
    border-bottom: 2px solid var(--border-strong);
}

[data-theme="light"] .kt-flight-schedule-table tr:hover,
[data-theme="light"] .kt-flight-history-table tr:hover {
    background: var(--bg-hover);
}

[data-theme="light"] .kt-flight-schedule-table td,
[data-theme="light"] .kt-flight-history-table td {
    border-bottom: 1px solid var(--border-default);
}

/* Progress bar */
[data-theme="light"] .kt-flight-progress-bar {
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
}

/* Technical grid */
[data-theme="light"] .kt-technical-grid-row {
    border-color: var(--border-strong);
}

[data-theme="light"] .kt-technical-grid-row:nth-child(even) {
    background: var(--bg-elevated);
}

/* Intro & error pages */
[data-theme="light"] .kt-flight-intro-inner,
[data-theme="light"] .kt-flight-error-inner {
    background: var(--bg-card);
    border: 1px solid var(--border-strong);
    box-shadow: var(--shadow-lg);
}

/* Flight examples */
[data-theme="light"] .kt-flight-examples a {
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    box-shadow: var(--shadow-sm);
}

/* Header */
[data-theme="light"] .kt-flight-header {
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-strong);
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

/* Not-live block */
[data-theme="light"] .kt-flight-not-live {
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
}

/* Altitude chart */
[data-theme="light"] .kt-altitude-section {
    background: var(--bg-card);
    border: 1px solid var(--border-strong);
    box-shadow: var(--shadow-md);
}

/* On-map overlays — white glass on light map */
[data-theme="light"] .kt-flight-map-badge,
[data-theme="light"] .kt-playback-controls {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--border-strong);
    box-shadow: var(--shadow-md);
    color: var(--text-primary);
    backdrop-filter: blur(6px);
}

[data-theme="light"] .kt-map-badge-text,
[data-theme="light"] .kt-playback-btn {
    color: var(--text-primary);
}

[data-theme="light"] .kt-playback-thumb {
    background: var(--text-primary);
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}

[data-theme="light"] .ft-map-styles {
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid var(--border-default);
    box-shadow: var(--shadow-sm);
}

[data-theme="light"] .ft-ms-btn {
    color: var(--text-secondary);
}

[data-theme="light"] .ft-ms-btn:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

[data-theme="light"] .ft-ms-btn.active {
    background: var(--accent-blue-muted);
    color: var(--accent-blue);
}

[data-theme="light"] .kt-not-tracking-info {
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid var(--border-default);
    box-shadow: var(--shadow-sm);
}

[data-theme="light"] .kt-live-debug {
    background: rgba(255, 248, 230, 0.95);
    border: 1px solid rgba(230, 81, 0, 0.2);
    box-shadow: var(--shadow-md);
}

[data-theme="light"] .kt-flight-map-overlay {
    background: rgba(255, 255, 255, 0.75);
}

/* Resize handle */
[data-theme="light"] .ft-resize-line {
    background: var(--border-strong);
}

/* Breadcrumbs */
[data-theme="light"] .ft-breadcrumb-bar {
    border-bottom: 1px solid var(--border-default);
}

/* ===========================================================================
   SUNSET THEME OVERRIDES
   =========================================================================== */

[data-theme="sunset"] .kt-flight-info,
[data-theme="sunset"] .kt-flight-stats-section,
[data-theme="sunset"] .kt-flight-schedule-section,
[data-theme="sunset"] .kt-flight-history-section,
[data-theme="sunset"] .kt-flight-technical-section {
    border-color: var(--border-default);
    box-shadow: var(--shadow-sm);
}

[data-theme="sunset"] .kt-flight-stat {
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
}

[data-theme="sunset"] .kt-flight-intro-inner,
[data-theme="sunset"] .kt-flight-error-inner {
    background: var(--bg-card);
    border: 1px solid var(--border-default);
    box-shadow: var(--shadow-md);
}

[data-theme="sunset"] .kt-flight-map-badge,
[data-theme="sunset"] .kt-playback-controls {
    background: rgba(255, 248, 242, 0.92);
    border: 1px solid var(--border-default);
    box-shadow: var(--shadow-md);
    color: var(--text-primary);
}

[data-theme="sunset"] .ft-map-styles {
    background: rgba(255, 248, 242, 0.88);
    border: 1px solid var(--border-default);
    box-shadow: var(--shadow-sm);
}

[data-theme="sunset"] .ft-ms-btn {
    color: var(--text-secondary);
}

[data-theme="sunset"] .ft-ms-btn:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}
/* ==========================================================================
   2x2 TIMES GRID (Sched Dep / Actual Dep / Sched Arr / Estimated Arr)
   ========================================================================== */

.kt-flight-times-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid var(--border-default);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 8px;
}

.kt-times-cell {
    padding: 12px 14px;
    border-right: 1px solid var(--border-default);
    border-bottom: 1px solid var(--border-default);
}

/* Right column cells — no right border */
.kt-times-cell:nth-child(2n) {
    border-right: none;
}

/* Bottom row cells — no bottom border */
.kt-times-cell:nth-last-child(-n+2) {
    border-bottom: none;
}

.kt-times-label {
    display: block;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 5px;
}

.kt-times-value {
    display: block;
    font-size: 22px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1;
}

.kt-times-value.kt-times-delayed {
    color: #f97316;
}

/* Delayed departure cell */
.kt-times-cell-delayed .kt-times-value {
    color: #f97316;
}

/* Early departure cell */
.kt-times-cell-early .kt-times-value {
    color: #22c55e;
}

.kt-times-delay-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 4px;
    vertical-align: middle;
}

.kt-times-delay-badge.delayed {
    color: #f97316;
    background: rgba(249, 115, 22, 0.15);
}

.kt-times-delay-badge.early {
    color: #22c55e;
    background: rgba(34, 197, 94, 0.15);
}

/* ETA cell — colored background based on state (classes from $eta_class) */
.kt-times-cell-eta {
    background: transparent;
    transition: background 0.2s;
}

.kt-times-cell-eta.kt-eta-on-time,
.kt-times-cell-eta.kt-eta-early,
.kt-flight-times-grid.kt-eta-on-time .kt-times-cell-eta,
.kt-flight-times-grid.kt-eta-early .kt-times-cell-eta {
    background: rgba(34, 197, 94, 0.08);
}

.kt-times-cell-eta.kt-eta-on-time .kt-times-eta-value,
.kt-times-cell-eta.kt-eta-early .kt-times-eta-value,
.kt-flight-times-grid.kt-eta-on-time .kt-times-cell-eta .kt-times-eta-value,
.kt-flight-times-grid.kt-eta-early .kt-times-cell-eta .kt-times-eta-value {
    color: #22c55e;
}

.kt-times-cell-eta.kt-eta-landed,
.kt-flight-times-grid.kt-eta-landed .kt-times-cell-eta {
    background: rgba(34, 197, 94, 0.12);
}

.kt-times-cell-eta.kt-eta-landed .kt-times-eta-value,
.kt-flight-times-grid.kt-eta-landed .kt-times-cell-eta .kt-times-eta-value {
    color: #22c55e;
}

.kt-times-cell-eta.kt-eta-delayed,
.kt-flight-times-grid.kt-eta-delayed .kt-times-cell-eta {
    background: rgba(249, 115, 22, 0.08);
}

.kt-times-cell-eta.kt-eta-delayed .kt-times-eta-value,
.kt-flight-times-grid.kt-eta-delayed .kt-times-cell-eta .kt-times-eta-value {
    color: #f97316;
}

.kt-times-cell-eta.kt-eta-emergency,
.kt-flight-times-grid.kt-eta-emergency .kt-times-cell-eta {
    background: rgba(220, 80, 60, 0.08);
    animation: pulse-emergency-block 2.5s ease-in-out infinite;
}

.kt-times-cell-eta.kt-eta-emergency .kt-times-eta-value,
.kt-flight-times-grid.kt-eta-emergency .kt-times-cell-eta .kt-times-eta-value {
    color: #dc5040;
}

/* ETA value: time + timezone */
.kt-times-eta-value {
    display: flex;
    align-items: baseline;
    gap: 5px;
    font-size: 22px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1;
    margin-bottom: 4px;
}

.kt-times-eta-value .kt-eta-tz {
    font-size: 13px;
    font-weight: 400;
    color: var(--text-tertiary);
}

.kt-times-eta-value .kt-delay-badge {
    vertical-align: middle;
    font-size: 11px;
}
    font-size: 13px;
    font-weight: 700;
    color: #dc5040;
    letter-spacing: 0.5px;
    margin-top: 2px;
    display: block;
}

/* ==========================================================================
   STATUS ROW styles — kept for JS compatibility but no longer rendered
   ========================================================================== */

.kt-flight-eta.kt-status-row {
    display: none;
}

/* ==========================================================================
   EQUIPMENT 2x2 GRID (Airline / Call sign / Equipment / Aircraft)
   ========================================================================== */

.kt-equipment-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid var(--border-default);
    border-radius: 8px;
    overflow: hidden;
    margin-top: 8px;
}

.kt-equip-cell {
    padding: 10px 14px;
    border-right: 1px solid var(--border-default);
    border-bottom: 1px solid var(--border-default);
}

/* Right column — no right border */
.kt-equip-cell:nth-child(2n) {
    border-right: none;
}

/* Bottom row — no bottom border */
.kt-equip-cell:nth-last-child(-n+2) {
    border-bottom: none;
}

.kt-equip-label {
    display: block;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.kt-equip-value {
    display: block;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-primary);
}

.kt-equip-link {
    display: block;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-primary);
    text-decoration: none;
    transition: color 0.15s;
}

.kt-equip-link:hover {
    color: var(--accent-blue);
    text-decoration: underline;
}

.kt-equip-reg {
    font-size: 12px;
    font-weight: 400;
    color: var(--text-tertiary);
    margin-left: 4px;
}

/* ==========================================================================
   SQUAWK ROW (below equipment grid, shown only when squawk is set)
   ========================================================================== */

.kt-squawk-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
    margin-top: 4px;
    border: 1px solid var(--border-default);
    border-radius: 6px;
    font-size: 13px;
}

.kt-squawk-row .kt-equip-label {
    margin-bottom: 0;
}

.kt-squawk-row.kt-emergency-squawk {
    background: rgba(220, 38, 38, 0.15);
    border-color: rgba(220, 38, 38, 0.6);
    animation: kt-emergency-pulse 1.5s ease-in-out infinite;
}

/* ==========================================================================
   LIGHT THEME — new blocks
   ========================================================================== */

[data-theme="light"] .kt-flight-times-grid,
[data-theme="light"] .kt-equipment-grid {
    background: var(--bg-card);
    box-shadow: var(--shadow-sm);
}

[data-theme="light"] .kt-squawk-row {
    background: var(--bg-card);
    box-shadow: var(--shadow-sm);
    border-color: var(--border-strong);
}

/* ==========================================================================
   SUNSET THEME — new blocks
   ========================================================================== */

[data-theme="sunset"] .kt-flight-times-grid,
[data-theme="sunset"] .kt-equipment-grid {
    background: var(--bg-card);
    border-color: var(--border-default);
}

/* ==========================================================================
   INFO BUTTON + TOOLTIP
   ========================================================================== */

.kt-info-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid var(--border-default);
    background: transparent;
    cursor: pointer;
    font-size: 9px;
    font-weight: 600;
    font-style: normal;
    color: var(--text-tertiary);
    flex-shrink: 0;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
    user-select: none;
    line-height: 1;
    vertical-align: middle;
    margin-left: 2px;
}

.kt-info-btn:hover,
.kt-info-btn.active {
    border-color: var(--accent-blue);
    color: var(--accent-blue);
    background: rgba(79, 195, 247, 0.08);
}

.kt-tooltip-box {
    position: absolute;
    z-index: 200;
    background: var(--bg-card);
    border: 0.5px solid var(--border-strong);
    border-radius: 8px;
    padding: 10px 12px;
    width: 220px;
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.55;
    pointer-events: none;
}

.kt-tooltip-box strong {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 4px;
}

/* ==========================================================================
   CODESHARE
   ========================================================================== */

.kt-equip-codeshare {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 2px;
}

.kt-codeshare-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 500;
    padding: 1px 6px;
    border-radius: 3px;
    background: rgba(79, 195, 247, 0.12);
    color: var(--accent-blue);
    white-space: nowrap;
}

[data-theme="light"] .kt-codeshare-badge {
    background: #E6F1FB;
    color: #0C447C;
}

/* ==========================================================================
   AIRPORT MAP POPUP
   ========================================================================== */

.kt-leaflet-popup .leaflet-popup-content-wrapper {
    background: var(--bg-card);
    border: 1px solid var(--border-default);
    border-radius: 10px;
    box-shadow: var(--shadow-md);
    padding: 0;
    min-width: 280px;
}
.kt-leaflet-popup .leaflet-popup-content {
    margin: 0;
    width: auto !important;
}
.kt-leaflet-popup .leaflet-popup-tip-container {
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
}
.kt-leaflet-popup .leaflet-popup-tip {
    background: var(--bg-card);
}
.kt-leaflet-popup .leaflet-popup-close-button {
    color: var(--text-tertiary) !important;
    font-size: 18px;
    top: 6px;
    right: 8px;
}
.kt-leaflet-popup .leaflet-popup-close-button:hover {
    color: var(--text-primary) !important;
}

.kt-map-popup {
    padding: 14px 16px 12px;
}
.kt-map-popup-header {
    margin-bottom: 10px;
}
.kt-map-popup-iata {
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    display: block;
    margin-bottom: 4px;
}
.kt-map-popup-name {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.3;
    margin-bottom: 2px;
}
.kt-map-popup-city {
    font-size: 11px;
    color: var(--text-tertiary);
}
.kt-map-popup-links {
    display: flex;
    flex-direction: column;
    gap: 6px;
    border-top: 1px solid var(--border-default);
    padding-top: 10px;
}
.kt-map-popup-link {
    font-size: 12px;
    font-weight: 500;
    color: var(--accent-blue);
    text-decoration: none;
    transition: opacity 0.15s;
}
.kt-map-popup-link:hover {
    opacity: 0.75;
}
.kt-map-popup-link-routes {
    color: var(--accent-pink, #f06292);
}