/* AUTO-GENERATED from vanilla/src/styles/tokens.css — @theme→:root, tailwind import dropped, font paths → _shared/fonts/. DO NOT hand-edit values. */
/* Design tokens extracted from Figma — IGA Digital Twin Command Center */
/* All dimensional values use vw units for proportional scaling across resolutions */
/* Reference: 1920px = 100vw → 1px = 0.05208vw */
/* (tailwind import kaldırıldı — statik handoff için gerekmez) */

/* --- Global resets --- */
*, *::before, *::after {
  box-sizing: border-box;
  font-variant-numeric: tabular-nums;
}

/* --- Font Scale (A-/A+ control) ---
   --font-scale is set via JS in tokens.ts. Applied via vf() in inline styles.
   Fallback: 1 (no scaling). */
:root { --font-scale: 1; }
:root { --notif-card-h: 3.333vw; } /* kaynak: tokens.css:19 */

/* Leaflet tiles: undo Tailwind preflight img reset that breaks tile rendering */
.leaflet-tile-pane img {
  max-width: none;
  height: auto;
}

/* --- Mosafin font-face (tab labels) --- */
@font-face {
  font-family: 'Mosafin';
  src: url('./fonts/Mosafin-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Mosafin';
  src: url('./fonts/Mosafin-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Mosafin';
  src: url('./fonts/Mosafin-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Mosafin';
  src: url('./fonts/Mosafin-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Mosafin';
  src: url('./fonts/Mosafin-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* --- Nexa font-face (labels, small text) --- */
@font-face {
  font-family: 'Nexa';
  src: url('./fonts/Nexa Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Nexa';
  src: url('./fonts/Nexa Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Nexa';
  src: url('./fonts/Nexa-Book.ttf') format('truetype');
  font-weight: 450;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Nexa';
  src: url('./fonts/Nexa Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Nexa';
  src: url('./fonts/Nexa-Heavy.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Nexa';
  src: url('./fonts/Nexa-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* --- Tomorrow font-face (numbers / data display, replaces Automate OT) --- */
@font-face {
  font-family: 'Tomorrow';
  src: url('./fonts/Tomorrow-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Tomorrow';
  src: url('./fonts/Tomorrow-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Tomorrow';
  src: url('./fonts/Tomorrow-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Tomorrow';
  src: url('./fonts/Tomorrow-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Tomorrow';
  src: url('./fonts/Tomorrow-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/*
 * TomorrowNum — numeric-only override font.
 * Covers digits 0-9, punctuation .:,/%-+ and time/date separators.
 * Place first in any font-family stack so all numbers render in Tomorrow.
 */
@font-face {
  font-family: 'TomorrowNum';
  src: url('./fonts/Tomorrow-Regular.ttf') format('truetype');
  font-weight: 100 499;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0030-0039, U+002E, U+003A, U+002C, U+002F, U+0025, U+002B, U+002D;
}
@font-face {
  font-family: 'TomorrowNum';
  src: url('./fonts/Tomorrow-Bold.ttf') format('truetype');
  font-weight: 500 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0030-0039, U+002E, U+003A, U+002C, U+002F, U+0025, U+002B, U+002D;
}

:root {
  /* --- Glass-morphism Backgrounds (white with opacity — shell chrome) --- */
  --color-glass:            rgba(255, 255, 255, 0.08);
  --color-glass-hover:      rgba(255, 255, 255, 0.12);
  --color-glass-active:     rgba(255, 255, 255, 0.16);

  /* --- Widget Glassmorphism (black with opacity — map overlays) --- */
  --color-widget-bg:        rgba(0, 0, 0, 0.30);
  --color-widget-bg-inner:  rgba(0, 0, 0, 0.30);

  /* --- Backdrop Opacity Scale (black overlays) --- */
  --color-backdrop-light:   rgba(0, 0, 0, 0.30);
  --color-backdrop-medium:  rgba(0, 0, 0, 0.60);
  --color-backdrop-heavy:   rgba(0, 0, 0, 0.85);
  --color-backdrop-solid:   rgba(0, 0, 0, 0.95);

  /* --- Canvas/Base --- */
  --color-bg-base:          #000000;

  /* --- Status Colors --- */
  --color-status-on-time:   #22c55e;
  --color-status-delayed:   #D50000;
  --color-status-landing:   #00A8E8;
  --color-status-cancelled: #6b7280;
  --color-status-taxiing:   #8b5cf6;

  /* --- Accent --- */
  --color-accent-gold:      #ffb300;
  --color-accent-blue:      #00A8E8;
  --color-accent-purple:    #8b5cf6;

  /* --- Semantic / Destructive --- */
  --color-danger:           #D50000;

  /* --- Text --- */
  --color-text-primary:     #ffffff;
  --color-text-secondary:   rgba(255, 255, 255, 0.56);
  --color-text-muted:       rgba(255, 255, 255, 0.28);

  /* --- Borders --- */
  --color-border:           rgba(255, 255, 255, 0.08);
  --color-border-active:    rgba(255, 255, 255, 0.12);

  /* --- Z-Index Tiers (FOUND-02) --- */
  --z-canvas:     0;
  --z-panel:      10;
  --z-panel-max:  90;
  --z-chrome:    100;
  --z-dropdown:  200;
  --z-modal:     300;
  --z-toast:     400;
  --z-context:   500;
  --z-overlay:   600;
  --z-sheet-popover: 700;
  --z-sheet-filter:  710;
  --z-sheet-ctx:     720;
  --z-action-toast:  750;
  --z-leaflet-marker: 800;

  /* --- Border Radius (8px grid) --- */
  --radius-pill:  9999px;
  --radius-xs:    0.208vw;   /* 4px  — 8/2 */
  --radius-sm:    0.417vw;   /* 8px  — 8x1 */
  --radius-md:    0.625vw;   /* 12px — 8x1.5 */
  --radius-lg:    0.833vw;   /* 16px — 8x2 */

  /* --- Shell Layout (vw) --- */
  --shell-gradient-h: 7.813vw;  /* 150px */
  --shell-bar-pad-y:  1.250vw;  /* 24px */
  --shell-bar-pad-x:  0.833vw;  /* 16px */

  /* --- Element Dimensions (vw) --- */
  --el-dropdown-h:   1.667vw;   /* 32px */
  --el-icon-btn:     1.667vw;   /* 32px */
  --el-tab-w:        6.667vw;   /* 128px */
  --el-tab-h:        2.500vw;   /* 48px */
  --el-weather-w:    6.667vw;   /* 128px */
  --el-weather-h:    2.604vw;   /* 50px */
  --popover-gap:     0.417vw;   /* 8px — standard gap between trigger and popover */

  /* --- Backdrop Blur --- */
  --blur-element:   20px;
  --blur-widget:    30px;
  --blur-heavy:     60px;

  /* --- Animation Durations --- */
  --duration-fast:   120ms;
  --duration-normal: 200ms;
  --duration-slow:   350ms;

  /* --- Typography (vw) --- */
  --font-sans:    'TomorrowNum', 'Poppins', sans-serif;
  --font-display: 'Mosafin', 'TomorrowNum', 'Poppins', sans-serif;
  --font-data:    'Tomorrow', 'TomorrowNum', 'Poppins', sans-serif;
  --font-size-xs:   0.521vw;   /* 10px */
  --font-size-sm:   0.625vw;   /* 12px */
  --font-size-base: 0.729vw;   /* 14px */
  --font-size-tab:  0.833vw;   /* 16px */
  --font-size-lg:   0.938vw;   /* 18px */

  /* --- Icon Sizes (vw) --- */
  --icon-sm: 0.833vw;          /* 16px */
  --icon-md: 1.042vw;          /* 20px */
  --icon-lg: 1.250vw;          /* 24px */

  /* --- Shadows --- */
  --shadow-panel: 1.042vw 1.042vw 2.083vw rgba(0, 0, 0, 0.3);
  --shadow-dropdown: 0 0.104vw 0.625vw rgba(0, 0, 0, 0.3);
}

html, body {
  font-size: 0.833vw; /* 16px at 1920 */
  -webkit-user-select: none;
  user-select: none;
  cursor: default;
  touch-action: pan-x pan-y;
  overflow: hidden;
  height: 100%;
  background: var(--color-bg-base);
}

/* Utility: hide scrollbar visually while keeping scroll functionality */
.hide-scrollbar::-webkit-scrollbar {
  display: none;
}
.thin-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.15) transparent;
}
.thin-scrollbar::-webkit-scrollbar {
  width: 4px;
}
.thin-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}
.thin-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.15);
  border-radius: 2px;
}
.thin-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.25);
}

/*
 * Shell icon button system — standard across all toolbar icons.
 * Icon: 16px (0.833vw) fixed size, never changes.
 * Container: 32px (1.667vw) square.
 * Spacing: icons 40px (2.083vw) center-to-center, containers 24px (1.250vw) gap.
 * States: normal=transparent, hover=glass-hover, selected=white bg + black icon.
 */
.shell-icon-group {
  display: flex;
  align-items: center;
  gap: 1.250vw; /* 24px between containers */
}

.shell-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.667vw;  /* 32px container */
  height: 1.667vw;
  border-radius: 0.417vw; /* 8px */
  border: none;
  background: transparent;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
  padding: 0;
  flex-shrink: 0;
}

.shell-icon-btn:hover {
  background: rgba(255, 255, 255, 0.12); /* glass-hover */
}

.shell-icon-btn.active {
  background: #ffffff;
}

/* Icon inside: always 16px (0.833vw), white by default, black when active */
.shell-icon-btn svg,
.shell-icon-btn img {
  width: 0.833vw;  /* 16px */
  height: 0.833vw;
  flex-shrink: 0;
}

.shell-icon-btn svg path,
.shell-icon-btn svg line,
.shell-icon-btn svg polyline,
.shell-icon-btn svg circle,
.shell-icon-btn svg rect {
  fill: white;
  stroke: white;
}

.shell-icon-btn.active svg path,
.shell-icon-btn.active svg line,
.shell-icon-btn.active svg polyline,
.shell-icon-btn.active svg circle,
.shell-icon-btn.active svg rect {
  fill: black;
  stroke: black;
}

/* ─── Filter chip reset button ─── */
.filter-reset-btn {
  color: #000000;
}

.filter-reset-btn:hover {
  background: #000000 !important;
  color: #ffffff;
}

.filter-reset-btn:hover .filter-reset-icon {
  transform: rotate(-360deg);
}

/*
 * ══════════════════════════════════════════════════════════════
 *  GLOBAL STATE SYSTEM — Normal / Hover / Selected
 * ══════════════════════════════════════════════════════════════
 *
 *  Dark-theme UI states used across ALL components.
 *  Transition: 120ms ease on all state changes.
 *
 *  ┌─────────────────────┬─────────────────────────────────────┐
 *  │ Class               │ Description                         │
 *  ├─────────────────────┼─────────────────────────────────────┤
 *  │ .s-border           │ Border: transparent → 12% on hover  │
 *  │ .s-border-solid     │ Border: transparent → white on hover│
 *  │ .s-fill             │ Fill: transparent → 8% on hover     │
 *  │ .s-ghost            │ Content 48% → 100% on hover         │
 *  │ .s-text-white       │ Text → white on hover               │
 *  │ .s-action-edit      │ Icon 48% → white on hover           │
 *  │ .s-action-delete    │ Icon 48% → red on hover             │
 *  │ .s-sort-reveal      │ Sort icon hidden → visible on hover │
 *  └─────────────────────┴─────────────────────────────────────┘
 *
 *  Selected state: inline style `background: #FFFFFF` +
 *  `color: #000000` on the element. No class needed.
 *
 *  Combine classes: `class="s-border s-ghost s-text-white"`
 */

/* ── Border: transparent → 12% white ── */
.s-border {
  border: 1px solid transparent;
  transition: border-color 120ms ease;
}
.s-border:hover {
  border-color: rgba(255, 255, 255, 0.12) !important;
}

/* ── Border: transparent → solid white ── */
.s-border-solid {
  border: 1px solid transparent;
  transition: border-color 120ms ease;
}
.s-border-solid:hover {
  border-color: #FFFFFF !important;
}

/* ── Fill: transparent → 8% white bg ── */
.s-fill {
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.s-fill:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #FFFFFF !important;
}
.s-fill:hover span {
  color: #FFFFFF !important;
}
.s-fill:hover path {
  fill: #FFFFFF;
  fill-opacity: 1;
}

/* ── Ghost: content at 48% → 100% on hover ── */
.s-ghost {
  transition: background 120ms ease, border-color 120ms ease;
}
.s-ghost:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}
.s-ghost:hover path {
  fill: #FFFFFF;
}
.s-ghost:hover span {
  color: #FFFFFF !important;
}

/* ── Text white on hover ── */
.s-text-white:hover span {
  color: #FFFFFF !important;
}

/* ── Action: edit icon → white ── */
.s-action-edit {
  transition: opacity 120ms ease;
}
.s-action-edit:hover path {
  fill: #FFFFFF;
  fill-opacity: 1;
}

/* ── Action: delete icon → red ── */
.s-action-delete {
  transition: opacity 120ms ease;
}
.s-action-delete:hover path {
  fill: var(--color-danger);
  fill-opacity: 1;
}

/* ── Sort icon reveal on parent hover ── */
.s-sort-reveal:hover .col-sort-icon {
  opacity: 0.56 !important;
}


/* ─── Eye toggle button animation ─── */
.eye-toggle-btn {
  position: relative;
  overflow: hidden;
}

.eye-toggle-btn svg {
  transition: transform 300ms ease, opacity 300ms ease;
}

/* Closed state: icon scales down vertically (eye closing) + diagonal strike line */
.eye-toggle-btn.eye-closed svg {
  transform: scaleY(0.7);
}

.eye-toggle-btn.eye-closed::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 15%;
  width: 70%;
  height: 0.104vw; /* 2px */
  background: #000000;
  transform: translateY(-50%) rotate(-45deg);
  animation: eye-strike 250ms ease forwards;
  border-radius: 1px;
}

@keyframes eye-strike {
  from {
    width: 0;
    left: 50%;
  }
  to {
    width: 70%;
    left: 15%;
  }
}

/* When opening (not closed), reverse the strike */
.eye-toggle-btn:not(.eye-closed) svg {
  transform: scaleY(1);
}

/* ─── Flight progress bar hover ─── */
.flight-progress-bar:hover {
  /* no scale — only color changes on hover */
}

.flight-progress-bar:hover .flight-progress-border {
  border-color: rgba(255, 255, 255, 0.48) !important;
}

.flight-progress-bar:hover .flight-progress-fill {
  background: rgba(255, 255, 255, 0.48) !important;
}

/* Bottom accent bar — slow breathing animation */
@keyframes bar-breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.75; }
}

.bar-accent-blue {
  animation: bar-breathe 4s ease-in-out infinite;
}

/*
 * ══════════════════════════════════════════════════════════════
 *  PANEL ITEM STATE SYSTEM (light theme — white panels)
 * ══════════════════════════════════════════════════════════════
 *
 *  Normal:   8% border, transparent bg
 *  Hover:    8% fill
 *  Selected: 100% filled (#000 bg, #fff text)
 *
 *  Usage: className="panel-item" + add "active" for selected
 */
.panel-item {
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: transparent;
  transition: background 120ms ease, border-color 120ms ease;
}
.panel-item:hover {
  background: rgba(0, 0, 0, 0.08);
}
.panel-item.active {
  background: #000000;
  border-color: #000000;
  color: #FFFFFF;
}
.panel-item.active:hover {
  background: #000000;
}

/* Close button inside panels — same state rules */
.panel-close {
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: transparent;
  transition: background 120ms ease;
}
.panel-close:hover {
  background: rgba(0, 0, 0, 0.08);
}

/*
 * ══════════════════════════════════════════════════════════════
 *  GLASS DESIGN SYSTEM — IGA liquid glass standard
 * ══════════════════════════════════════════════════════════════
 *
 *  Shared visual language for all floating UI: popovers, panels,
 *  toasts, dropdowns, and their trigger buttons.
 *
 *  ┌─────────────────────┬─────────────────────────────────────┐
 *  │ Class               │ Usage                               │
 *  ├─────────────────────┼─────────────────────────────────────┤
 *  │ .glass-trigger      │ Button/icon that opens a popover    │
 *  │   + .active         │ Trigger stays lit while panel open  │
 *  │ .glass-popover      │ The floating panel container        │
 *  │ .glass-item         │ Interactive row inside popover      │
 *  │   + .muted          │ Inactive/disabled item              │
 *  │ .glass-sep          │ 1px separator line                  │
 *  │ .glass-close        │ Close/dismiss button                │
 *  └─────────────────────┴─────────────────────────────────────┘
 *
 *  Glass surface:
 *    bg:     linear-gradient 135deg, rgba dark 0.45–0.60
 *    blur:   120px, saturate 2.2, brightness 0.9
 *    border: 0.5px solid rgba(255,255,255,0.12)
 *    shadow: outer depth + inset top light + inset bottom dark
 *    radius: 0.625vw (12px)
 *    text:   rgba(255,255,255,0.90)
 *
 *  Hover accent: rgba(0,168,232,0.22) — IGA aviation blue
 */

/* ── Trigger: button that opens glass popover ── */
.glass-trigger {
  border: 0.5px solid transparent !important;
  transition: background 120ms ease, border-color 120ms ease,
              backdrop-filter 120ms ease, box-shadow 120ms ease;
}
.glass-trigger.bordered {
  border: 1px solid rgba(255,255,255,0.12) !important;
}
.glass-trigger:hover,
.glass-trigger.active {
  background: linear-gradient(135deg, rgba(20,20,28,0.50), rgba(12,12,18,0.60), rgba(24,24,32,0.45)) !important;
  backdrop-filter: blur(120px) saturate(2.2) brightness(0.9) !important;
  -webkit-backdrop-filter: blur(120px) saturate(2.2) brightness(0.9) !important;
  border-color: rgba(255,255,255,0.12) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.20),
              inset 0 1px 0 rgba(255,255,255,0.10),
              inset 0 -1px 0 rgba(0,0,0,0.15) !important;
}

/* ── Popover: the floating panel itself ── */
/* --glass-breath: extra right-side space after content (default 32px) */
/* --map-lum: 0.0 (dark map) → 1.0 (bright satellite). Set by AirportMap via JS. */
:root { --map-lum: 0; }

.glass-popover {
  pointer-events: auto;
  z-index: var(--z-panel);
  --glass-breath: 2.500vw; /* 48px */
  transition: border-color 150ms ease, box-shadow 150ms ease;
  /* Adaptive: base opacity 0.50-0.60, boosted up to +0.30 when map is bright */
  --_boost: calc(var(--map-lum, 0) * 0.30);
  background: linear-gradient(135deg,
    rgba(14,14,20, calc(0.50 + var(--_boost))),
    rgba(8,8,14,   calc(0.60 + var(--_boost))),
    rgba(18,18,24, calc(0.45 + var(--_boost))));
  backdrop-filter: blur(120px) saturate(2.2) brightness(calc(0.9 - var(--map-lum, 0) * 0.15));
  -webkit-backdrop-filter: blur(120px) saturate(2.2) brightness(calc(0.9 - var(--map-lum, 0) * 0.15));
  box-shadow: 0 0.052vw 0.104vw rgba(0,0,0,0.15),
              0 0.521vw 2.500vw rgba(0,0,0, calc(0.35 + var(--map-lum, 0) * 0.20)),
              inset 0 1px 0 rgba(255,255,255, calc(0.10 - var(--map-lum, 0) * 0.04)),
              inset 0 -1px 0 rgba(0,0,0,0.15);
  border: 0.5px solid rgba(255,255,255, calc(0.12 - var(--map-lum, 0) * 0.04));
  border-radius: 0.625vw; /* 12px */
  color: rgba(255,255,255,0.90);
}

/* ── Item: interactive row inside popover ── */
/* Inherits --glass-breath from .glass-popover for right-side spacing */
.glass-item {
  transition: background 80ms ease, color 80ms ease;
  color: rgba(255,255,255,0.90);
  border: none;
  background: transparent;
  margin-right: var(--glass-breath, 1.667vw);
}
.glass-item:hover {
  background: rgba(0,168,232,0.22) !important;
  color: #ffffff !important;
}
.glass-item.muted {
  color: rgba(255,255,255,0.40);
}
.glass-item.muted:hover {
  color: #ffffff !important;
}

/* ── Separator ── */
.glass-sep {
  height: 1px;
  background: rgba(255,255,255,0.08);
}

/* ── Close / dismiss button ── */
.glass-close {
  border: none;
  background: transparent;
  transition: background 80ms ease;
}
.glass-close:hover {
  background: rgba(255,255,255,0.12) !important;
}

/* ── Backward compat aliases (→ migrate to glass-*) ── */
.glass-icon-hover   { border: 0.5px solid transparent !important; transition: background 120ms ease, border-color 120ms ease; }
.glass-icon-hover:hover, .glass-icon-active { background: linear-gradient(135deg, rgba(20,20,28,0.50), rgba(12,12,18,0.60), rgba(24,24,32,0.45)) !important; backdrop-filter: blur(120px) saturate(2.2) brightness(0.9) !important; -webkit-backdrop-filter: blur(120px) saturate(2.2) brightness(0.9) !important; border-color: rgba(255,255,255,0.12) !important; box-shadow: 0 1px 3px rgba(0,0,0,0.20), inset 0 1px 0 rgba(255,255,255,0.10), inset 0 -1px 0 rgba(0,0,0,0.15) !important; }
.macos-menu-item    { transition: background 80ms ease, color 80ms ease; }
.macos-menu-item:hover { background: rgba(0,168,232,0.22) !important; color: #ffffff !important; }

/* ─── View Settings dropdown items ─── */
.view-dropdown-item:hover {
  background: rgba(0, 0, 0, 0.08) !important;
}

.view-dropdown-item.selected:hover {
  background: #000000 !important;
}

/* ─── Filter clear button spin on hover ─── */
.filter-clear-btn:hover .filter-clear-icon {
  transform: rotate(-360deg);
  transition: transform 0.6s ease;
}
.filter-clear-icon {
  transition: transform 0.6s ease;
}

/* ─── Live pulse dot ─── */
.live-dot {
  width: 0.417vw;  /* 8px */
  height: 0.417vw;
  background: var(--color-status-on-time);
  border-radius: 50%;
  animation: pulse-dot 2s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.7); }
}

/* ─── Weather icon — sun rays rotate slowly ─── */
.weather-sun-spin {
  animation: sun-rotate 30s linear infinite;
}

/* ─── Severe weather pulse ─── */
/* ── Critical toast pulse ── */
@keyframes toast-critical-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(213,0,0,0.30), 0 0.052vw 0.104vw rgba(0,0,0,0.15), 0 0.521vw 2.500vw rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.10), inset 0 -1px 0 rgba(0,0,0,0.15); }
  50% { box-shadow: 0 0 0 4px rgba(213,0,0,0.20), 0 0.052vw 0.104vw rgba(0,0,0,0.15), 0 0.521vw 2.500vw rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.10), inset 0 -1px 0 rgba(0,0,0,0.15); }
}
.toast-critical-pulse {
  animation: toast-critical-pulse 1.5s ease-in-out infinite;
}

/* ── System status dot pulse — always visible ── */
@keyframes status-dot-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: 0.7; }
}

/* ── Bell critical pulse ── */
@keyframes bell-critical-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(213,0,0,0.30); }
  50% { box-shadow: 0 0 0 4px rgba(213,0,0,0.20); }
}
.bell-critical-pulse {
  animation: bell-critical-pulse 1.5s ease-in-out infinite;
}

@keyframes weather-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(213,0,0,0.30); }
  50% { box-shadow: 0 0 0 4px rgba(213,0,0,0.15); }
}
.weather-pulse {
  animation: weather-pulse 2s ease-in-out infinite;
}

@keyframes sun-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Map tile brightness — lifts CartoDB dark_all from black to anthracite */
.map-tiles-bright {
  filter: brightness(2.0) contrast(0.9);
}

/* ─── Heatmap light mode (scoped: only while heatmap view + light toggle) ─── */
/* Neutralise the dark-tile brightening so light_all reads naturally. */
.heatmap-light .map-tiles-bright {
  filter: brightness(1.02) contrast(1.02) saturate(1.05);
}
/* Flight-marker planes: white silhouette → dark ink on the light basemap.
 * Thin white halo keeps it legible over dark red/orange heat clusters too. */
.heatmap-light .flight-marker-plane svg path { fill: #16232f !important; }
.heatmap-light .flight-marker-plane svg { filter: drop-shadow(0 0 1px rgba(255,255,255,0.9)); }
/* Anchor dot: swap the dark separator ring for a light one to match the theme. */
.heatmap-light .flight-marker-anchor { border-color: rgba(255,255,255,0.92); }
/* Dark-default foreground palette for the heatmap widget (two-class specificity so
 * .heat-light — declared after — overrides it when both classes are present). */
.glass-popover.heat-widget {
  --hm-fg: #ffffff;
  --hm-fg-70: rgba(255,255,255,0.70);
  --hm-fg-45: rgba(255,255,255,0.45);
  --hm-fg-40: rgba(255,255,255,0.40);
  --hm-fg-30: rgba(255,255,255,0.30);
  --hm-line: rgba(255,255,255,0.08);
  --hm-line-strong: rgba(255,255,255,0.20);
  --hm-active: rgba(255,255,255,0.14);
  --hm-track: rgba(255,255,255,0.08);
}
/* Light glass for the heatmap widget only (class applied to its popover). */
.glass-popover.heat-light {
  background: linear-gradient(135deg,
    rgba(248,250,252,0.82),
    rgba(238,242,247,0.86),
    rgba(244,247,250,0.80));
  border: 0.5px solid rgba(10,37,55,0.14);
  box-shadow: 0 0.052vw 0.104vw rgba(0,0,0,0.06),
              0 0.521vw 2.500vw rgba(20,40,60,0.14),
              inset 0 1px 0 rgba(255,255,255,0.70),
              inset 0 -1px 0 rgba(10,37,55,0.05);
  color: #0a2537;
  /* Foreground palette flip — inline styles read these vars. */
  --hm-fg: #0a2537;
  --hm-fg-70: rgba(10,37,55,0.72);
  --hm-fg-45: rgba(10,37,55,0.55);
  --hm-fg-40: rgba(10,37,55,0.50);
  --hm-fg-30: rgba(10,37,55,0.42);
  --hm-line: rgba(10,37,55,0.14);
  --hm-line-strong: rgba(10,37,55,0.28);
  --hm-active: rgba(10,37,55,0.10);
  --hm-track: rgba(10,37,55,0.12);
}
/* Header gradient/borders inside the light widget. */
.glass-popover.heat-light > div:first-child {
  background: linear-gradient(180deg,rgba(10,37,55,0.06) 0%,rgba(10,37,55,0.02) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.60),0 1px 2px rgba(20,40,60,0.08);
  border-bottom-color: rgba(10,37,55,0.08) !important;
}
/* Force the shared WidgetHeader's inline-white text/icons dark in light mode. */
.glass-popover.heat-light > div:first-child span { color: var(--hm-fg) !important; }
.glass-popover.heat-light > div:first-child svg line { stroke: var(--hm-fg) !important; }

/* ─── Map marker hover-to-front system ─── */
/* Applied to Leaflet .leaflet-marker-icon wrappers via JS */
.map-marker-front {
  z-index: 9999 !important;
}

/* ─── Flight Marker — gold label + detail + airplane + connector + anchor ─── */
.flight-marker {
  position: relative;
  width: 0;
  height: 0;
  cursor: pointer;
  isolation: isolate;
}

.flight-marker-label {
  position: absolute;
  left: -4.762vw;   /* -91.44px */
  top: -2.904vw;    /* -55.75px */
  width: 3.125vw;   /* 60px */
  height: 1.250vw;  /* 24px */
  background: var(--color-accent-gold);
  border: 0.104vw solid var(--color-bg-base);  /* 2px */
  border-radius: 0.208vw;  /* 4px */
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 150ms ease, transform 150ms ease;
  z-index: 10 !important;
  pointer-events: none;
}

.flight-marker:hover .flight-marker-label,
.flight-marker.info-visible .flight-marker-label {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Connector line also hidden by default */
.flight-marker-connector {
  opacity: 0;
  transition: opacity 150ms ease;
}
.flight-marker:hover .flight-marker-connector,
.flight-marker.info-visible .flight-marker-connector {
  opacity: 1;
}

.flight-marker-label-text {
  font-family: 'Nexa', sans-serif;
  font-weight: 700;
  font-size: 0.625vw;  /* 12px */
  line-height: 1;
  padding-top: 0.104vw;  /* 2px */
  color: #000000;
  letter-spacing: -0.025em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.flight-marker-detail {
  position: absolute;
  left: -4.762vw;   /* -91.44px */
  top: -1.888vw;    /* -36.25px */
  width: 3.125vw;   /* 60px */
  background: #000000;
  border: 0.104vw solid #000000;  /* 2px */
  border-radius: 0.208vw;  /* 4px */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: 0.417vw;  /* 8px */
  z-index: 2;
  overflow: hidden;
}

.flight-marker-detail span {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 0.417vw;   /* 8px */
  line-height: 0.833vw; /* 16px */
  letter-spacing: -0.016em;
  color: #FFFFFF;
}

.flight-marker-detail .tabular {
  font-variant-numeric: tabular-nums;
}

/* Flight marker color variants — label bg + anchor fill */
/* Default: gold (#FFB300) — defined in base classes above */

/* Red — delayed / cancelled */
.flight-marker--red .flight-marker-label { background: var(--color-danger); }
.flight-marker--red .flight-marker-label-text { color: var(--color-text-primary); }
.flight-marker--red .flight-marker-anchor { background: var(--color-danger); }

/* Blue — landing / approach */
.flight-marker--blue .flight-marker-label { background: var(--color-accent-blue); }
.flight-marker--blue .flight-marker-label-text { color: var(--color-text-primary); }
.flight-marker--blue .flight-marker-anchor { background: var(--color-accent-blue); }

/* Teal — taxiing */
.flight-marker--teal .flight-marker-label { background: var(--color-status-taxiing); }
.flight-marker--teal .flight-marker-label-text { color: var(--color-text-primary); }
.flight-marker--teal .flight-marker-anchor { background: var(--color-status-taxiing); }

/* Black — departed / inactive */
.flight-marker--black .flight-marker-label { background: #000000; border-color: #FFFFFF; }
.flight-marker--black .flight-marker-label-text { color: #FFFFFF; }
.flight-marker--black .flight-marker-anchor { background: #000000; border-color: #FFFFFF; }

.flight-marker-connector {
  position: absolute;
  left: -1.927vw;   /* -37px */
  top: -1.862vw;    /* -35.75px */
  width: 2.188vw;   /* 42px */
  height: 2.135vw;  /* 41px */
  pointer-events: none;
  z-index: -1 !important;
}

.flight-marker-plane {
  position: absolute;
  left: -0.208vw;   /* -4px */
  top: -0.313vw;    /* -6px */
  width: 1.667vw;   /* 32px */
  height: 1.667vw;  /* 32px */
  display: flex;
  align-items: center;
  justify-content: center;
}

.flight-marker-plane svg {
  width: 0.938vw;   /* 18px */
  height: 0.833vw;  /* 16px */
}

/* Moving aircraft — subtle drift animation */
.flight-marker-moving {
  animation: flight-drift 4s ease-in-out infinite;
}

@keyframes flight-drift {
  0%, 100% { translate: 0 0; }
  25% { translate: 0.15vw -0.1vw; }
  50% { translate: 0.3vw 0; }
  75% { translate: 0.15vw 0.1vw; }
}

.flight-marker-anchor {
  position: absolute;
  left: -0.286vw;   /* -5.5px */
  top: -0.286vw;    /* -5.5px */
  width: 0.573vw;   /* 11px */
  height: 0.573vw;  /* 11px */
  background: var(--color-accent-gold);
  border: 0.104vw solid var(--color-bg-base);  /* 2px */
  border-radius: 50%;
  box-sizing: border-box;
  z-index: 10 !important;
}

/* ─── Runway Label ─── */
.runway-label {
  position: relative;
  cursor: pointer;
}

.runway-label-box {
  width: 3.021vw;   /* 58px */
  height: 2.240vw;  /* 43px */
  background: #000000;
  border: 0.104vw solid #FFFFFF;  /* 2px */
  border-radius: 0.208vw;  /* 4px */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 0.208vw;  /* 0 4px */
  gap: 0.156vw;  /* 3px */
}

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

.runway-label-number {
  font-family: 'Nexa', sans-serif;
  font-weight: 700;
  font-size: 0.729vw;  /* 14px */
  line-height: 1;
  color: #FFFFFF;
  font-variant-numeric: tabular-nums;
}

.runway-label-icon {
  width: 0.833vw;   /* 16px */
  height: 0.833vw;  /* 16px */
  background: #FFFFFF;
  border-radius: 0.104vw;  /* 2px */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.runway-label-icon svg {
  width: 0.417vw;   /* 8px */
  height: 0.417vw;  /* 8px */
}

.runway-label-line {
  position: absolute;
  left: 2.917vw;    /* 56px */
  top: 2.135vw;     /* 41px */
  width: 1.667vw;   /* 32px */
  height: 0;
  border-top: 0.104vw solid #FFFFFF;  /* 2px */
  transform-origin: 0 0;
  transform: rotate(45deg);
}

.runway-label-dot {
  position: absolute;
  left: calc(2.917vw + 1.667vw * 0.707 - 0.286vw);
  top: calc(2.135vw + 1.667vw * 0.707 - 0.286vw);
  width: 0.573vw;   /* 11px */
  height: 0.573vw;  /* 11px */
  background: #000000;
  border: 0.104vw solid #FFFFFF;  /* 2px */
  border-radius: 50%;
  box-sizing: border-box;
}

/* ─── Radar sweep pulse — only affects aircraft icon, not labels ─── */
@keyframes radar-plane-pulse {
  0%   { filter: brightness(2.2) drop-shadow(0 0 16px rgba(120,255,200,0.70)); transform: scale(1.25); }
  15%  { filter: brightness(1.6) drop-shadow(0 0 10px rgba(120,255,200,0.40)); transform: scale(1.1); }
  50%  { filter: brightness(1.1) drop-shadow(0 0 4px rgba(120,255,200,0.10)); transform: scale(1.0); }
  100% { filter: brightness(1.0) drop-shadow(0 0 0 transparent); transform: scale(1.0); }
}
.radar-swept .flight-marker-plane {
  animation: radar-plane-pulse 4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ─── Radar zone colors on flight markers (ATC standard) ─── */
[data-radar-zone="runway"] .flight-marker-plane svg path { fill: #A8D84E !important; }
[data-radar-zone="landing"] .flight-marker-plane svg path { fill: #00D4FF !important; }
[data-radar-zone="radar"] .flight-marker-plane svg path { fill: #4A7BF7 !important; }
[data-radar-zone="approach"] .flight-marker-plane svg path { fill: #F7A84A !important; }
[data-radar-zone="holding"] .flight-marker-plane svg path { fill: #B44AE6 !important; }

/* ═══════════════════════════════════════════════════════════════════
 * Satır aksiyon ikonu — hover TAMAMEN CSS
 *
 * Sahip 2026-08-21 (iki kez bildirdi): JS `mouseenter/mouseleave` ile
 * yönetilen hover takılı kalıyordu — satır yeniden çizilirken, modal
 * açılırken ya da fare hızlı hareket ederken `mouseleave` gelmiyor.
 * CSS `:hover` böyle bir durum tanımaz; imleç üzerinden ayrıldığı anda
 * kural düşer. JS listener'ları kaldırıldı.
 * ═══════════════════════════════════════════════════════════════════ */
.row-action-btn {
  border: 1px solid transparent;
  background: transparent;
  opacity: 0.56;
  transition: border-color 0.12s ease, background 0.12s ease, opacity 0.12s ease;
}
.row-action-btn:hover {
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.08);
  opacity: 1;
}
.row-action-btn:disabled {
  opacity: 0.22;
  cursor: default;
  pointer-events: none; /* hover kuralı pasifken devreye girmesin */
}

/* ═══════════════════════════════════════════════════════════════════
 * Sheet/modal ikon düğmesi — FlightDetailSheet'in buton hissiyatı
 *
 * Sahip 2026-08-21: "bu modaldaki buton hissiyatı daha iyi, diğer tablesheet
 * panel ve modalları için güncelleme yapalım buna benzesin." Cam zemin +
 * hover'da aydınlanma. Hover saf CSS — JS ile yönetilirse modal açılışında
 * takılı kalıyor (bkz. .row-action-btn notu).
 * ═══════════════════════════════════════════════════════════════════ */
.sheet-icon-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid transparent;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.sheet-icon-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.20);
}

/* Tıklanınca değerini kopyalayan metin — flight number, PNR, kapı vb. */
.copyable {
  cursor: pointer;
  border-radius: 0.208vw;
  transition: background 0.12s ease;
}
.copyable:hover {
  background: rgba(255, 255, 255, 0.10);
  box-shadow: 0 0 0 0.208vw rgba(255, 255, 255, 0.10);
}

/* SYNC 2026-08-24 — vanilla/src/styles/tokens.css:201-211 sonradan eklenen
   CockpitFrame (drawn-cabin) token'ları; üreteç çalıştığında yoktu. Değerler
   kaynaktan birebir — elle değer uydurma yok. */
:root {
  --cockpit-shell:        #232a33;
  --cockpit-shell-deep:   #12161c;
  --cockpit-shell-dark:   #0a0d11;
  --cockpit-seam:         rgba(255, 255, 255, 0.10);
  --cockpit-edge:         rgba(255, 255, 255, 0.16);
  --cockpit-glass-tint:   rgba(10, 16, 24, 0.35);
  --cockpit-glare:        rgba(255, 255, 255, 0.07);
  --cockpit-glass-edge:   rgba(190, 215, 235, 0.12);
  --cockpit-glass-shade:  rgba(0, 0, 0, 0.22);
  --cockpit-lamp-cyan:    rgba(0, 168, 232, 0.75);
  --cockpit-lamp-amber:   rgba(255, 179, 0, 0.65);
  --cockpit-lamp-green:   rgba(34, 197, 94, 0.60);
}