/* =========================================================
   WorldFlight CDM — Consolidated Styles
   Replaces legacy 1000+ line stylesheet with a clean baseline.
   ========================================================= */

/* =========================
   Design tokens / variables
   ========================= */
:root{
  --bg0:#020617;
  --bg1:#0f172a;
  --panel:#020617;
  --panel2:#0b1220;

  --text:#e5e7eb;
  --muted:#94a3b8;
  --muted2:#64748b;

  --border:#1e293b;

  --accent:#38bdf8;
  --accent2:#2563eb;

  --danger:#ef4444;
  --warning:#f59e0b;
  --success:#22c55e;

  --shadow:0 20px 40px rgba(0,0,0,.5);

  --radius:16px;

  --sidebar-expanded:220px;
  --sidebar-collapsed:72px;

  --topbar-h:120px;

  --wf-green: #0F3D2E;
  --wf-green-dark: #13a86a;
  --wf-green-glow: rgba(24,199,126,0.5);
}

/* ===== Reset / base ===== */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: "Segoe UI", Arial, sans-serif;
  background: var(--panel);
  color: var(--text);
}

/* Simple accessibility */
:focus-visible{ outline:2px solid rgba(56,189,248,.85); outline-offset:2px; }

/* Links */
a{ color: var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* Disabled */
button:disabled, input:disabled, select:disabled{
  opacity:.55;
  cursor:not-allowed;
}

/* =========================
   Layout: sidebar + content
   ========================= */

/* Sidebar container (you toggle .collapsed on .sidebar, and body.sidebar-collapsed) */
.sidebar{
  position:fixed;
  top:0; left:0;
  z-index:60;
  width:var(--sidebar-expanded);
  height:100vh;
  padding:16px;
  background: linear-gradient(180deg, var(--panel), var(--panel));
  border-right:1px solid var(--border);
  overflow:hidden;
  transition: width .25s ease;
}
.sidebar.collapsed{ width: var(--sidebar-collapsed); }

.sidebar-brand{
  height: var(--topbar-h);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:12px;
  box-shadow:
    inset -1px 0 0 rgba(255,255,255,0.06),
    inset 0 -1px 0 rgba(255,255,255,0.08);
}
.sidebar-logo{
  max-width:72px;
  max-height:72px;
  object-fit:contain;
  transition: transform .25s ease, opacity .25s ease, max-width .25s ease, max-height .25s ease;
}
.sidebar.collapsed .sidebar-logo{
  max-width:40px;
  max-height:40px;
  opacity:.85;
}

/* Optional header row if you use it (toggle button etc.) */
.sidebar-header{
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  margin: 0 0 16px;
}
.sidebar-toggle { margin: 0 auto 12px; }
.sidebar.collapsed .sidebar-header{
  gap: 10px;
}

#sidebarToggle, .sidebar-toggle{
  background:none;
  border:none;
  color: var(--muted);
  font-size:18px;
  cursor:pointer;
  padding:8px 10px;
  border-radius:10px;
}
#sidebarToggle:hover, .sidebar-toggle:hover{
  background: rgba(255,255,255,0.06);
  color: var(--text);
}

/* Section titles (Pilots / Controllers / Admin) */
.sidebar-section-title,
.nav-title{
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
  color: var(--muted2);
  margin: 18px 10px 8px;
  white-space:nowrap;
}
.sidebar.collapsed .sidebar-section-title,
.sidebar.collapsed .nav-title{
  display:none;
}

/* Nav items */
.sidebar-nav{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.nav-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 14px;
  border-radius:12px;
  font-size:14px;
  font-weight:500;
  color: #cbd5f5;
  text-decoration:none;
  transition: background .2s ease, color .2s ease, transform .15s ease;
}
.nav-item:hover{
  background: rgba(255,255,255,0.06);
  color: var(--text);
  transform: translateX(2px);
}
.nav-item.active{
  background: linear-gradient(135deg, rgba(56,189,248,0.22), rgba(37,99,235,0.30));
  color: var(--text);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.10),
    0 6px 16px rgba(37,99,235,0.30);
}
.icon{
  width:20px;
  text-align:center;
  font-size:16px;
  flex-shrink:0;
}
.label, .nav-label{
  white-space:nowrap;
}

/* Collapsed: icon-only */
.sidebar.collapsed .nav-item{
  justify-content:center;
  padding: 12px 0;
}
.sidebar.collapsed .label,
.sidebar.collapsed .nav-label{
  display:none;
}

/* Body offset (your JS toggles body.sidebar-collapsed) */
body{ padding-left: var(--sidebar-expanded); transition: padding-left .25s ease; }
body.sidebar-collapsed{ padding-left: var(--sidebar-collapsed); }

/* Mobile default collapsed */
@media (max-width: 900px){
  .sidebar{ width: var(--sidebar-collapsed); }
  body{ padding-left: var(--sidebar-collapsed); }
}

/* =========================
   Topbar
   ========================= */
.topbar {
  position: relative;
  height: var(--topbar-h);
  padding-left: var(--sidebar-expanded);
  padding-right: 24px;
  z-index: 50;

  background:
    linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.15)),
    var(--panel);

  display: flex;
  align-items: center;
  justify-content: center; /* keep center for title */

  box-shadow:
    inset 0 -1px 0 rgba(255,255,255,0.06),
    0 6px 18px rgba(0,0,0,0.45);

  transition: padding-left .25s ease;
}

.utc-clock {
  margin-right: 16px;

  font-family: 'JetBrains Mono', monospace;
  font-size: 15px;
  font-weight: 600;

  color: var(--accent);
  letter-spacing: 1px;

  white-space: nowrap;
  opacity: 0.9;
}

@media (max-width: 900px) {

  .topbar {
    height: auto;
    padding: 16px 16px 20px;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .header-center,
  .header-right {
    position: static;
    transform: none;
  }

  .header-center {
    order: 1;
    text-align: center;
    font-size: 22px;
  }

  .header-right {
    order: 2;
    justify-content: center;
    gap: 12px;
  }

  .utc-clock {
    margin-right: 0;
    font-size: 14px;
  }
}



body.sidebar-collapsed .topbar{ padding-left: var(--sidebar-collapsed); }

.header-left{ display:flex; align-items:center; justify-content:flex-start; }
.logo-large{
  height:78px; width:auto;
  filter: drop-shadow(0 0 14px rgba(56,189,248,.45));
}
.header-center{
  position:absolute;
  left:50%;
  transform: translateX(-50%);
  font-size:28px;
  font-weight:700;
  letter-spacing:.6px;
  color: var(--accent);
  text-shadow: 0 0 12px rgba(56,189,248,0.45);
  pointer-events:none;
}
.header-right {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
}

.user-dropdown {
  right: 0;
  left: auto;
  top: 100%;
  backdrop-filter: blur(10px);
}


/* =========================
   Dashboard layouts
   ========================= */
.dashboard{
  padding:48px;
  display:grid;
  grid-template-columns: repeat(2, minmax(420px, 1fr));
  gap:40px;

  max-width:960px;
  margin:0 auto;
}
@media (max-width: 980px){
  .dashboard{
    grid-template-columns: 1fr;
    max-width: 720px;
  }
}

.dashboard-wide{
  grid-template-columns: minmax(900px, 1200px);
  justify-content:center;
  max-width:none;
}
.dashboard-wide .card{ max-width:1200px; width:100%; }

.dashboard-full{
  max-width: none;
  width: 100%;
  box-sizing: border-box;
  margin:0;
  grid-template-columns: 1fr;
}
.dashboard-full .card{ max-width:none; width:100%; }

.dashboard-actions{
  grid-column: 1 / -1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  max-width:920px;
  margin:20px auto 0;
  gap:18px;
}
.dashboard-footer{
  grid-column: 1 / -1;
  text-align:center;
  margin-top:40px;
}

/* =========================
   Cards
   ========================= */
.card{
  background: linear-gradient(160deg, var(--panel), var(--panel));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
  box-shadow: var(--shadow);
}
.card h2{
  margin:0 0 24px 0;
  font-size:18px;
  color:#93c5fd;
}
.card-full{ width:100%; max-width:100%; }

/* Session stats */
.stat{
  display:flex;
  justify-content:space-between;
  margin-bottom:18px;
  font-size:16px;
}
.stat span{ color: var(--muted); }
.stat strong{ color:#fff; }

/* Status pill */
.status{
  margin-top:20px;
  padding:18px;
  border-radius:14px;
  font-weight:600;
  font-size:20px;
  text-align:center;
  letter-spacing:.5px;
}
.status.online{
  background: linear-gradient(160deg, #064e3b, #022c22);
  color:#6ee7b7;
  box-shadow: 0 0 20px rgba(16,185,129,.45);
}
.status.offline{
  background: linear-gradient(160deg, #450a0a, #1f0505);
  color:#fca5a5;
  box-shadow: 0 0 20px rgba(239,68,68,.35);
}

/* Footer */
footer{ text-align:center; padding:36px; }
footer a{ color:#60a5fa; font-weight:600; text-decoration:none; }
footer a:hover{ text-decoration:underline; }

/* =========================
   Forms / inputs
   ========================= */
input, select{
  background: var(--panel2);
  color: var(--text);
  border:1px solid var(--border);
  border-radius: 10px;
  padding:10px 12px;
  font-size:14px;
}
input::placeholder{ color: rgba(148,163,184,.85); }
select{ cursor:pointer; }

/* ICAO search */
.icao-search{
  display:flex;
  justify-content:center;
  gap:12px;
  margin-bottom:20px;
}
.icao-search input{
  width:200px;
  text-transform:uppercase;
}
.icao-search button{
  padding:10px 16px;
  border-radius:10px;
  border:none;
  background: linear-gradient(160deg, var(--accent2), #1d4ed8);
  color:#fff;
  font-weight:700;
  cursor:pointer;
  box-shadow: 0 0 16px rgba(37,99,235,.35);
}
.icao-search button:hover{
  background: linear-gradient(160deg, #1e40af, #1d4ed8);
  box-shadow: 0 0 22px rgba(37,99,235,.55);
}

/* Back button */
.back-btn{
  display:inline-block;
  padding:10px 18px;
  border-radius:10px;
  background: linear-gradient(160deg, #1d4ed8, #2563eb);
  color:#fff;
  font-weight:800;
  font-size:14px;
  letter-spacing:.4px;
  box-shadow: 0 0 16px rgba(37,99,235,.45);
  transition: all .2s ease;
}
.back-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 0 22px rgba(37,99,235,.7);
}

/* =========================
   Tables
   ========================= */
.tsat-col .table-scroll {
  flex: 1;               /* 🔑 fills column */
  overflow-y: auto;
  overflow-x: hidden;
}
#recentlyStartedTable th:last-child,
#recentlyStartedTable td:last-child {
  width: 130px;
  max-width: 130px;
  text-align: center;
}

/* ===== My Slots table column sizing ===== */




/* Main operations table */
.departures-table{
  width:100%;
  min-width:0;          /* VERY important */
  table-layout:fixed;
}

.departures-table th,
.departures-table td{
  padding:2px;
  text-align:left;
  border-top:1px solid var(--border);
}
.departures-table thead th{
  font-size:14px;
  font-weight:600;
  color: var(--text);
  letter-spacing:.4px;
}

#mainDeparturesTable tbody td:nth-child(2) {
  font-weight: 600;
  color: var(--accent); /* or your cyan/blue variable */
  letter-spacing: 0.4px;
}


/* Column sizing helpers (used in Admin/Departures) */
.col-wf-sector{ width:90px; }
.col-from,.col-to{ width:90px; }
.col-date{ width:130px; }
.col-time{ width:120px; }

.col-wf-sector,.col-from,.col-to,.col-date,.col-time{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Route column */
.col-route{
  width:auto;
  min-width:500px;     /* ↓ was 700px */
  max-width:520px;     /* 🔑 hard cap */
  white-space:normal;
  overflow-wrap:anywhere;
  line-height:1.65;
  font-size:12px;
  padding-right:36px; /* ↑ stronger separation */
}

.departures-table thead th.col-route{
  font-size:15px;
  color:#fff;
}

/* WF column */
.col-wf{
  width:70px;
  min-width:70px;
  text-align:center;
  vertical-align:middle;
  white-space:nowrap;
  font-size:16px;
}
.departures-table td.col-wf{
  display:flex;
  align-items:center;
  justify-content:center;
}
.wf-icons{
  display:inline-flex;
  align-items:center;
  gap:6px;
  line-height:1;
}
.col-wf-warning{
  color:#facc15;
  text-shadow: 0 0 8px rgba(250,204,21,.6);
  cursor:help;
}

/* Collapsible route text */
.route-collapsed{
  color:#60a5fa;
  cursor:pointer;
  font-size:13px;
  font-weight:700;
  user-select:none;
}
.route-collapsed:hover{ text-decoration:underline; }
.route-expanded{ display:none; margin-top:6px; }

/* Callsign search */
#callsignSearch{
  margin-bottom:16px;
  width:260px;
}

/* User toggle buttons */
.col-toggle{ width:70px; text-align:center; }
.toggle-btn{
  background:transparent;
  border:1px solid var(--border);
  color: var(--text);
  border-radius:10px;
  padding:6px 10px;
  cursor:pointer;
  font-size:14px;
}
.toggle-btn.active{
  background: var(--wf-green);
  border-color:var(--wf-green);
   box-shadow: 0 0 5px var(--wf-green-glow);
}

/* Dep flow input */
.dep-flow-input{
  width:70px;
  padding:6px 8px;
  border-radius:10px;
  border:1px solid var(--border);
  background: var(--panel2);
  color:#fff;
  font-weight:700;
  text-align:center;
  transition: all .25s ease;
}
.dep-flow-low{
  background: linear-gradient(160deg, #450a0a, #1f0505);
  border-color: var(--danger);
  color:#fecaca;
  box-shadow: 0 0 12px rgba(239,68,68,.35);
}
.dep-flow-mid{
  background: linear-gradient(160deg, #7c2d12, #431407);
  border-color:#f97316;
  color:#fed7aa;
  box-shadow: 0 0 12px rgba(249,115,22,.35);
}
.dep-flow-high{
  background: linear-gradient(160deg, #064e3b, #022c22);
  border-color: var(--success);
  color:#bbf7d0;
  box-shadow: 0 0 12px rgba(34,197,94,.35);
}

/* Connected users footer */
.connected-users-footer{
  margin-top:40px;
  padding-top:20px;
  border-top:1px solid var(--border);
  font-size:14px;
  color:#cbd5f5;
}
#connectedUsersList{
  margin-top:8px;
  color:#60a5fa;
  line-height:1.6;
}

/* =========================
   TSAT controls / tables
   ========================= */
.tsat-refresh{
  margin-left:10px;
  border:none;
  cursor:pointer;
  font-size:16px;
  background: linear-gradient(
    180deg,
    var(--wf-green),
    var(--wf-green-dark)
  );
  color:#fff;
  border-radius:8px;
  padding:6px 10px;
  box-shadow: 0 0 8px var(--wf-green-glow);
  transition: transform .15s ease, box-shadow .15s ease;
}
.tsat-refresh:hover{
  transform: rotate(90deg) scale(1.05);
  box-shadow: 0 0 14px rgba(24,199,126,0.9);
}
.tsat-refresh:active{ transform: scale(.95); }
.tsat-refresh.hidden{ display:none; }

/* Started checkbox */
.tsat-started-check{
  appearance:none;
  width:22px; height:22px;
  border-radius:6px;
  border:2px solid rgba(255,255,255,0.25);
  background: linear-gradient(145deg, #0b0f1a, #070a14);
  cursor:pointer;
  position:relative;
  transition: all .18s ease;
}
.tsat-started-check:hover{
  border-color:#3ba4ff;
  box-shadow: 0 0 6px rgba(59,164,255,0.45);
}
.tsat-started-check:checked{
  background: linear-gradient(145deg, #2cff88, #18b96a);
  border-color:#2cff88;
  box-shadow: 0 0 10px rgba(44,255,136,0.6);
}
.tsat-started-check:checked::after{
  content:'✔';
  color:#04150c;
  font-size:14px;
  font-weight:900;
  position:absolute;
  top:50%; left:50%;
  transform: translate(-50%,-52%);
}

/* TSAT layout */
.tsat-layout-card{ display:block; }
.tsat-top-row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:24px;
  align-items:start;
  margin-bottom:24px;
}
.tsat-top-row > div{ min-width:0; }
@media (max-width:900px){
  .tsat-top-row{ grid-template-columns: 1fr; }
  .tsat-top-right{ display:none; }
}

/* TSAT tables should not inherit large min-width */
#tsatQueueTable, #recentlyStartedTable, #unassignedTobtTable{
  min-width:0 !important;
  width:100% !important;
  table-layout:fixed;
}


/* Compact TSAT tables: slightly looser padding for readability */
#tsatQueueTable th, #tsatQueueTable td,
#recentlyStartedTable th, #recentlyStartedTable td,
#unassignedTobtTable th, #unassignedTobtTable td{
  padding: 0px 8px;
}
/* Action buttons */
.action-btn{
  background:#0b0f1a;
  border:1px solid #1a2333;
  border-radius:10px;
  height:32px;
  padding:0 12px;
  cursor:pointer;
  color:#cbd5e1;
  font-size:.85rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  line-height:1;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, color .15s ease;
}
.action-btn:hover{ transform: scale(1.05); }

/* Reduce vertical size of action buttons */
.action-btn,
.book-slot-btn,
.plan-btn {
  height: 36px;              /* was effectively ~44–48px */
  padding: 0 14px;           /* removes vertical padding inflation */
  line-height: 1;
  font-size: 14px;
}

.action-btn,
.book-slot-btn,
.plan-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}


/* Actions column alignment */
#recentlyStartedTable td:last-child {
  text-align: center;
  white-space: nowrap;
}
.send-back-btn,
.delete-started-btn {
  height: 28px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Ensure Callsign column absorbs remaining width */
#recentlyStartedTable th:nth-child(1),
#recentlyStartedTable td:nth-child(1) {
  width: auto;
}


#recentlyStartedTable th:nth-child(2),
#recentlyStartedTable td:nth-child(2) {
  width: 72px;              /* Started At (HH:MM) */
  text-align: center;
  white-space: nowrap;
}

/* Actions column must remain a table cell */
#recentlyStartedTable th:nth-child(3),
#recentlyStartedTable td:nth-child(3) {
  width: 130px;
  white-space: nowrap;
  text-align: center;
  display: table-cell;   /* ✅ critical */
}
/* Flex layout INSIDE the actions cell */
#recentlyStartedTable td:nth-child(3) .action-btn,
#recentlyStartedTable td:nth-child(3) .send-back-btn,
#recentlyStartedTable td:nth-child(3) .delete-started-btn {
  display: inline-flex;
}

#recentlyStartedTable td:nth-child(3) {
  padding-left: 6px;
  padding-right: 6px;
}

/* Ensure TSAT tables fill available vertical space */
.tsat-col .table-scroll table {
  height: 100%;
}

.send-back-btn:hover{
  border-color:#18c77e;
  color:#fff;
  box-shadow: 0 0 10px rgba(24,199,126,0.45);
}
.delete-started-btn{
  padding:0 8px !important;
  height:28px !important;
  border-radius:8px;
}
.delete-started-btn:hover{
  border-color:#ff6b6b;
  color:#ff6b6b;
  box-shadow: 0 0 10px rgba(255,107,107,0.45);
}
.delete-started-btn .trash-icon{
  stroke: currentColor;
  display:block;
  pointer-events:none;
}

/* TSAT row colouring */
.row-green{ background-color:#0F3D2E !important; color:#C6F6D5 !important; }
.row-amber{ background-color:#4A3A12 !important; color:#F3E7B3 !important; }
.row-red{ background-color:#4A1515 !important; color:#F6C6C6 !important; }

/* ICAO warning banner */
.tsat-wrapper {
  width: 100%;
  overflow: visible;   /* 🔑 critical */
}
.tsat-top-row.three-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;

  align-items: stretch;   /* 🔑 */
}
.tsat-col {
  display: flex;
  height: 320px; /* pick the height that matches the other panels */
  flex-direction: column;
  min-height: 0;   /* 🔑 allow shrink/grow */
}



.tsat-wrapper{ position:relative; padding-top:56px; }
.icao-warning{
  position:absolute;
  top:0; left:0; right:0;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;

  background: linear-gradient(160deg, #450a0a, #1f0505);
  border:1px solid #7f1d1d;
  border-radius:12px;

  color:#fecaca;
  font-weight:700;
  font-size:14px;

  box-shadow: 0 0 18px rgba(239,68,68,.35);
  z-index:5;
}

/* =========================
   TOBT booking table
   ========================= */
.tobt-card{ display:flex; flex-direction:column; gap:1.2rem; }

.tobt-controls{
  display:flex;
  flex-direction:column;
  max-width:520px;
  gap:.4rem;
}
.tobt-controls label{
  font-size:.85rem;
  color:#9fb4cc;
}
.tobt-select{
  width:100%;
  background: var(--panel2);
  color:#fff;
  border:1px solid #1f2b3c;
  border-radius:12px;
  padding:12px 14px;
  font-size:15px;
}
.tobt-select:focus{ border-color:#4aa3ff; outline:none; }

.tobt-table{
  width:100%;
  border-collapse:collapse;
  margin-top: 4px;
}
.tobt-table th{
  font-size:.85rem;
  font-weight:600;
  color:#9fb4cc;
  padding:10px 10px;
  border-bottom:1px solid #1f2b3c;
}
.tobt-table td{
  padding:10px 10px;
  border-bottom:1px solid #141f2e;
  font-size: .98rem;
}

/* TOBT time columns left; action columns centered */
.tobt-table td:nth-child(1),
.tobt-table td:nth-child(3),
.tobt-table th:nth-child(1),
.tobt-table th:nth-child(3){
  text-align:left;
  font-weight:700;
  color:#fff;
  width:20%;
}
.tobt-table td:nth-child(2),
.tobt-table td:nth-child(4),
.tobt-table th:nth-child(2),
.tobt-table th:nth-child(4){
  text-align:center;
  width:30%;
}

/* TOBT buttons */
.tobt-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 30px;

  line-height: 1;
  text-decoration: none; /* ensures <a> matches <button> */
  min-width:90px;
  padding:6px 14px;
  border-radius:10px;
  font-weight:600;
  font-size:14px;
  cursor:pointer;
  border:none;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.tobt-btn.book{
  background: linear-gradient(160deg, #2563eb, #1d4ed8);
  color:#fff;
  box-shadow: 0 0 10px rgba(37,99,235,.45);
}
.tobt-btn.book:hover{ filter: brightness(1.05); transform: translateY(-1px); }

.tobt-btn.cancel{
  background: linear-gradient(160deg, #7f1d1d, #991b1b);
  color:#fee2e2;
  box-shadow: 0 0 10px rgba(239,68,68,.35);
}
.tobt-btn.cancel:hover{ filter: brightness(1.06); transform: translateY(-1px); }

.tobt-table button:disabled{
  background:#2a3547 !important;
  color:#7f8fa4 !important;
  box-shadow:none !important;
}

/* No-flow message row */
.tobt-message{
  text-align:center;
  padding:18px;
  color:#9fb4cc;
  font-style:italic;
  background: rgba(255,255,255,0.02);
  border-radius: 12px;
}
/* === Sidebar toggle visibility === */

.sidebar-toggle {
  margin: 12px auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(56,189,248,.5);
  color: #38bdf8;
  font-size: 20px;
  background: rgba(2,6,23,.6);
  cursor: pointer;
  transition: all .2s ease;
}

.sidebar-toggle:hover {
  background: rgba(56,189,248,.15);
  box-shadow: 0 0 14px rgba(56,189,248,.45);
}

/* Center toggle when collapsed */
.sidebar.collapsed .sidebar-toggle {
  margin: 16px auto;
}

/* Optional: slightly pulse when collapsed so users notice it */
@keyframes pulse {
  0% { box-shadow: 0 0 0 rgba(56,189,248,0); }
  50% { box-shadow: 0 0 14px rgba(56,189,248,.45); }
  100% { box-shadow: 0 0 0 rgba(56,189,248,0); }
}

.sidebar.collapsed .sidebar-toggle {
  animation: pulse 2.5s infinite;
}
/* ===== LOGIN PAGE ===== */

.login-page { 
  min-height: 100vh; 
  background: url('/background.jpg') center center / cover no-repeat fixed; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  position: relative; 
  font-family: 'Inter', system-ui, sans-serif; }


/* Dark overlay for readability */
.login-overlay {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 23, 0.75);
  backdrop-filter: blur(4px);
}

/* Card */
.login-container {
  position: relative;
  z-index: 1;
  background: rgba(3, 7, 18, 0.75);
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: 18px;
  padding: 48px 56px;
  text-align: center;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
  max-width: 420px;
  width: 100%;
}

/* Logo */
.login-logo {
  width: 96px;
  height: auto;
  margin-bottom: 20px;
}

/* Headings */
.login-container h1 {
  color: #38bdf8;
  font-size: 28px;
  margin: 0;
}

.login-container h2 {
  color: #e5e7eb;
  font-size: 18px;
  font-weight: 500;
  margin: 6px 0 18px;
}

.login-subtitle {
  color: #94a3b8;
  font-size: 14px;
  margin-bottom: 28px;
}

/* Button */
.login-btn {
  display: inline-block;
  padding: 14px 28px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 12px;
  background: linear-gradient(135deg, #2563eb, #38bdf8);
  color: #fff;
  text-decoration: none;
  transition: all 0.25s ease;
  box-shadow: 0 7px 15px rgba(56,189,248,0.4);
}

.tsat-top-row.three-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}

.tsat-col {
  display: flex;
  flex-direction: column;
  min-height: 0;   /* 🔑 allow shrink/grow */
}


.tsat-col .table-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  max-height: none;
}
.login-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 40px rgba(56,189,248,0.55);
}
/* ===== LOGOUT BUTTON ===== */
.logout-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  margin-top: 0;
  padding: 10px 18px;

  color: #7fd3ff;
  font-weight: 500;
  text-decoration: none;

  border-radius: 10px;
  border: 1px solid rgba(127, 211, 255, 0.25);
  background: rgba(15, 30, 55, 0.55);
  backdrop-filter: blur(6px);

  transition: all 0.2s ease;
}
.user-trigger {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.2px;
  line-height: 1;
}
.user-trigger .caret {
  font-size: 0.75em;
}
/* Headers only */
.tobt-table th {
  font-weight: 700;
}

/* Table body text normal */
.tobt-table td {
  font-weight: 400;
}
.tobt-table td:nth-child(1),
.tobt-table td:nth-child(3) {
  font-weight: 600;
}


.logout-btn:hover {
  color: #ffffff;
  background: rgba(255, 80, 80, 0.15);
  border-color: rgba(255, 80, 80, 0.45);
  box-shadow: 0 0 18px rgba(255, 80, 80, 0.25);
}

.logout-btn:active {
  transform: scale(0.97);
}

.logout-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;

  stroke: currentColor;
  opacity: 0.9;

  transition: transform 0.25s ease, opacity 0.25s ease;
}

.logout-btn:hover .logout-icon {
  opacity: 1;
  transform: rotate(-12deg);
}

/* ===== USER MENU (TOPBAR) ===== */

.user-menu {
  position: relative;
}

.user-trigger {
  background: transparent;
  border: 1px solid rgba(0,180,255,0.35);
  color: #7fd3ff;
  padding: 8px 14px;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.user-trigger:hover {
  background: rgba(0,180,255,0.08);
}

.user-dropdown {
  position: absolute;
  right: 0;
  top: 100%;
  min-width: 180px;

  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.05),
    rgba(0,0,0,0.4)
  );

  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  padding: 10px;

  box-shadow: 0 20px 40px rgba(0,0,0,0.6);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: all 0.2s ease;
  z-index: 200;
}


.user-dropdown.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* Compact version of your existing logout button */
.logout-btn.compact {
  width: 100%;
  justify-content: center;
  padding: 10px 14px;
}

/* =========================================================
   Compact TSAT tables (Upcoming / Recently Started)
   Targets the actual table IDs used in ATC Slot Management
   ========================================================= */
/* Compact TSAT tables – allow content to define height */
#tsatQueueTable th,
#tsatQueueTable td,
#recentlyStartedTable th,
#recentlyStartedTable td {
  padding: 0px 10px;
  vertical-align: middle;
  white-space: nowrap;
  box-sizing: border-box;
}

/* Do NOT hard-limit row height */
#recentlyStartedTable td,
#recentlyStartedTable tr {
  height: auto;
  max-height: none;
  overflow: visible;
}



#tsatQueueTable thead th,
#recentlyStartedTable thead th{
  padding: 8px 10px;
  font-weight: 600;
}

/* Keep row-colour blocks crisp but not tall */
#tsatQueueTable tr,
#recentlyStartedTable tr{
  max-height: 36px;
  height: 36px;
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
}

/* TSAT started checkbox (smaller, aligned) */
.tsat-started-check {
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.35);
  background: #0b0f1a;
  cursor: pointer;
  position: relative;
}

.tsat-started-check:checked {
  background: #22c55e;
  border-color: #22c55e;
  box-shadow: none;
}

.tsat-started-check:checked::after {
  content: '';
  width: 6px;
  height: 3px;
  border-left: 2px solid #022c22;
  border-bottom: 2px solid #022c22;
  position: absolute;
  top: 4px;
  left: 3px;
  transform: rotate(-45deg);
}


/* Ensure row-colour does not force bold */
.row-green, .row-amber, .row-red{
  font-weight: 400 !important;
}

/* Hover overlay for coloured rows */
#tsatQueueTable tbody tr.row-green:hover {
  background-color: rgba(34, 197, 94, 0.15);
}

#tsatQueueTable tbody tr.row-amber:hover {
  background-color: rgba(245, 158, 11, 0.18);
}

#tsatQueueTable tbody tr.row-red:hover {
  background-color: rgba(239, 68, 68, 0.18);
}


/* Subtle row hover highlight (no layout shift) */
#tsatQueueTable tbody tr:hover,
#recentlyStartedTable tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.035);
}
/* Main departures table hover (correct ID) */
#mainDeparturesTable tbody tr:hover > td{
  background-color: rgba(255, 255, 255, 0.035);
}

.action-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* Hover effect for ALL rows, including coloured ones */
#tsatQueueTable tbody tr:hover {
  box-shadow: inset 0 0 0 9999px rgba(255,255,255,0.04);
}



/* Unassigned TOBTs table column sizing */
#unassignedTobtTable th:first-child,
#unassignedTobtTable td:first-child{ width: 90px; white-space: nowrap; }

/* =========================================================
   FINAL TSAT TABLE OVERRIDES (AUTHORITATIVE)
   Do not place rules after this block.
   ========================================================= */

/* --- Top row layout: remove visual gaps --- */
.tsat-top-row.three-cols {
  gap: 16px;                 /* tighter, consistent spacing */
  margin-bottom: 20px;
}

/* --- Columns must size to content, not force height --- */

/* --- Scroll container defines height, not the table --- */


/* --- TSAT tables must NEVER inherit large-table constraints --- */
#tsatQueueTable,
#recentlyStartedTable,
#unassignedTobtTable {
  min-width: 0 !important;
  width: 100% !important;
  table-layout: fixed;
}

/* --- Row density: compact but visible --- */
#tsatQueueTable tr,
#recentlyStartedTable tr,
#unassignedTobtTable tr {
  height: 34px;
}

/* --- Cell padding: removes “air gaps” --- */
#tsatQueueTable td,
#recentlyStartedTable td,
#unassignedTobtTable td {
  padding: 0px 8px;
}

/* --- Recently Started column sizing (final) --- */
#recentlyStartedTable th:nth-child(1),
#recentlyStartedTable td:nth-child(1) {
  width: auto;
}

#recentlyStartedTable th:nth-child(2),
#recentlyStartedTable td:nth-child(2) {
  width: 72px;               /* HH:MM only */
  text-align: center;
  white-space: nowrap;
}

#recentlyStartedTable th:nth-child(3),
#recentlyStartedTable td:nth-child(3) {
  width: 130px;
  white-space: nowrap;
}

/* --- Actions buttons: aligned, no layout side-effects --- */
#recentlyStartedTable td:nth-child(3) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* --- Unassigned TOBTs compact columns --- */
#unassignedTobtTable th:first-child,
#unassignedTobtTable td:first-child {
  width: 80px;
  white-space: nowrap;
}

/* --- Prevent empty filler rows from looking like gaps --- */
#tsatQueueTable tbody tr:empty,
#recentlyStartedTable tbody tr:empty,
#unassignedTobtTable tbody tr:empty {
  display: none;
}
/* Center empty states vertically */
#recentlyStartedTable tbody:empty::after,
#unassignedTobtTable tbody:empty::after {
  content: "—";
  display: block;
  height: 100%;
  text-align: center;
  opacity: 0.15;
}
/* Prevent TSAT scrollbars from overlapping adjacent columns */
.tsat-col .table-scroll {
  scrollbar-gutter: stable both-edges;
}

#recentlyStartedTable th:nth-child(3),
#recentlyStartedTable td:nth-child(3) {
  display: table-cell !important;
  width: 130px;
  text-align: center;
  white-space: nowrap;
}
/* Actions cell inner alignment */
#recentlyStartedTable td:nth-child(3) .actions {
  display: flex;
  align-items: center;     /* 🔑 vertical alignment */
  justify-content: center; /* horizontal centering */
  gap: 6px;                /* small, clean spacing */
}

.delete-started-btn {
  width: 28px;
  padding: 0;
}
/* Optical alignment fix for trash icon */
.delete-started-btn .trash-icon {
  position: relative;
}
.delete-started-btn .trash-icon {
  width: 14px;
  height: 14px;
  margin-top: -1px;
}
/* Normalize action button box model */
#recentlyStartedTable .send-back-btn,
#recentlyStartedTable .delete-started-btn {
  height: 28px;
  line-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.success-banner {
  background: rgba(47, 191, 113, 0.08); /* MUCH lighter tint */
  border: 1px solid rgba(47, 191, 113, 0.35);
  color: #9fe3c2; /* readable green on dark bg */

  padding: 16px 18px;
  border-radius: 10px;
  margin-bottom: 20px;

  display: flex;
  align-items: center;
  gap: 18px;
  animation: slideDown 220ms ease-out;
}


.success-banner.hidden {
  display: none;
}

.success-action {
  background: var(--wf-green);
  color: #a1b9ad;
  font-weight: 800;

  padding: 10px 22px;
  border-radius: 999px;
  border: none;
  cursor: pointer;

  box-shadow:
    0 0 0 1px rgba(47, 191, 113, 0.55),
    0 6px 16px rgba(47, 191, 113, 0.25);
}

.success-action:hover {
  filter: brightness(1.15);
}


.success-action:hover {
  filter: brightness(1.1);
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.success-label {
  color: var(--wf-green);
  font-weight: 800;
  letter-spacing: 0.2px;
}
.success-text {
  color: #c9f2de; /* brighter, still green-tinted */
}

.tobt-primary {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0.4px;

  color: #bff5dc;               /* lighter, readable green */
  text-shadow: 0 0 8px rgba(47, 191, 113, 0.25);
}


.wf-sector {
  font-weight: 700;
}

.simbrief-link {
  font-weight: 600;
  text-decoration: none;
}

.simbrief-link:hover {
  text-decoration: underline;
  filter: brightness(1.1);
}
.departures-table tbody tr:hover .tobt-primary {
  color: #d6fff0;
}
.departures-table td.atc-route-col {
  padding: 6px 40px 6px 6px;
  max-width: 520px;
  white-space: normal;
  word-break: break-word;
}



.departures-table td.simbrief-col {
  min-width: 220px;
}

.departures-table th.simbrief-col,
.departures-table td.simbrief-col {
  text-align: left;
}


.hidden {
  display: none !important;
}

/* Shared */
.booking-banner {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 18px 22px;
  border-radius: 14px;
  margin-bottom: 24px;
  font-weight: 600;
}

/* Success */
.booking-banner.success {
  background: linear-gradient(
    90deg,
    rgba(15, 61, 46, 0.8),
    rgba(15, 61, 46, 0.4)
  );
  border: 1px solid var(--wf-green-dark);
  color: #c6f6d5;
}

/* Cancel */
.booking-banner.cancel {
  background: linear-gradient(
    90deg,
    rgba(127, 29, 29, 0.75),
    rgba(127, 29, 29, 0.4)
  );
  border: 1px solid var(--danger);
  color: #fecaca;
}

.banner-action {
  margin-left: auto;
  border: none;
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 700;
  cursor: pointer;
}

.banner-action.success {
  background: linear-gradient(160deg, var(--wf-green-dark), #0f766e);
  color: #04150c;
}

.banner-action.cancel {
  background: linear-gradient(160deg, #dc2626, #b91c1c);
  color: #fff;
}
.no-layout .sidebar,
.no-layout .content-wrapper {
  display: none;
}

.no-layout {
  margin: 0;
  padding: 0;
}
/* ===== Modal ===== */
.modal.hidden {
  display: none;
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 23, 0.75);
}

.modal-card {
  position: relative;
  width: 100%;
  max-width: auto;
  z-index: 1;
  text-align: center;
  border-radius: 2px;
  box-shadow: none;
}

.modal-card h3 {
  margin: 0 0 10px;
  font-size: 18px;
  color: #93c5fd;
}

.modal-help {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 16px;
}

.modal-card input {
  width: 100%;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 1px;
  margin-bottom: 18px;
  text-transform: uppercase;
}

.modal-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.modal-actions .primary {
  background: linear-gradient(160deg, var(--accent2), #1d4ed8);
  color: #fff;
  font-weight: 700;
}
.delete-slot-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}

.delete-slot-btn .trash-icon {
  width: 18px;
  height: 18px;
  stroke: #c0392b;
}

.delete-slot-btn:hover .trash-icon {
  stroke: #e74c3c;
}
.btn-danger {
  background: #c0392b;
  color: #fff;
}

.btn-danger:hover {
  background: #e74c3c;
}
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(3, 8, 20, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  pointer-events: none;
}

.modal,
.modal * {
  pointer-events: auto;
}

.modal-card {
  background: radial-gradient(
    120% 120% at top,
    #0e1630 0%,
    #050915 100%
  );
  border-radius: 16px;
  padding: 28px 32px;
  width: auto;
  max-width: 90%;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.08),
    0 20px 60px rgba(0,0,0,0.6);
}
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 24px;
}

.modal-btn {
  padding: 8px 18px;
  border-radius: 10px;
  font-weight: 500;
}

.modal-btn.secondary {
  background: rgba(255,255,255,0.08);
  color: #fff;
}

.modal-btn.primary {
  background: #3b82f6;
  color: #fff;
}

.modal-btn.danger {
  background: #b91c1c;
  color: #fff;
}
.tobt-btn.simbrief {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #fff;
  border: none;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: 10px;
  text-decoration: none;
  white-space: nowrap;
}

.tobt-btn.simbrief:hover {
  filter: brightness(1.1);
}
/* Actions column must never collapse */
.actions-cell {
  min-width: 220px;
  text-align: right;       /* 🔑 */
  padding-right: 16px;     /* visual breathing room */
}

.actions-wrap {
  display: inline-flex;    /* 🔑 prevents full-width flex */
  align-items: center;
  gap: 10px;
}


/* Ensure buttons have predictable size */
.actions-wrap .tobt-btn {
  white-space: nowrap;
  flex-shrink: 0;
}

.tobt-book-btn.disabled,
.tobt-book-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  filter: grayscale(1);
}
.tobt-btn.disabled {
  opacity: 0.35;
  cursor: not-allowed;
  filter: grayscale(1);
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
  margin-bottom: 16px;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-field label {
  font-size: 0.8rem;
  color: #9fb4cc;
}

.checkbox-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  font-size: 0.9rem;
  color: #cbd5e1;
}
.wf-check {
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 2px solid rgba(255,255,255,.25);
  background: linear-gradient(145deg, #0b0f1a, #070a14);
  cursor: pointer;

  /* 🔑 critical */
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  transition: all .18s ease;
}


.wf-check:hover {
  border-color: var(--accent);
  box-shadow: 0 0 6px rgba(56,189,248,.45);
}

.wf-check:checked {
  background: linear-gradient(145deg, #2cff88, #18b96a);
  border-color: #2cff88;
  box-shadow: 0 0 10px rgba(44,255,136,.6);
}

.wf-check:checked::after {
  content: '✔';
  position: absolute;

  /* 🔑 dead-center */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -52%);

  color: #04150c;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
}

.col-cid {
  font-family: 'JetBrains Mono', monospace;
}

.col-center { text-align: center; }
.col-right  { text-align: right; }

/* Action buttons de-emphasis */
.row-actions {
  opacity: .55;
  transition: opacity .15s ease;
}

tr:hover .row-actions {
  opacity: 1;
}

/* Page header */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.page-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.section-title {
  margin-top: 22px;
}
/* WF26 column */
.col-wf26 {
  width: 70px;
  text-align: center;
}

.departures-table td.col-wf26 {
  display: table-cell;
}
.departures-table .tobt-btn.cancel {
  opacity: 0.65;
  transform: none;
}

.departures-table tr:hover .tobt-btn.cancel {
  opacity: 1;
}
.col-callsign,
.col-country {
  letter-spacing: .05em;
}
.card h3 {
  margin: 24px 0 12px;
  font-size: 16px;
  font-weight: 700;
  color: #93c5fd;
}
.col-country {
  text-transform: uppercase;
  font-weight: 600;
  color: #e5e7eb;
}
.departures-table td.col-wf26,
.departures-table th.col-wf26 {
  text-align: center;
  vertical-align: middle;
}
.departures-table td.col-wf26 input {
  margin: 0;
}
.departures-table th.col-actions,
.departures-table td.col-actions {
  width: 110px;            /* 👈 pulls it left */
  padding-right: 12px;
  text-align: right;
}
.departures-table .tobt-btn.cancel {
  min-width: 95px;
  padding: 6px 12px;
}
.departures-table tr:hover .wf-check {
  box-shadow: 0 0 8px rgba(24,199,126,0.6);
}
/* WF26 column – force true table-cell centering */
.departures-table th.col-wf26,
.departures-table td.col-wf26 {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
.wf-check {
  vertical-align: middle;
}
.section-divider {
  height: 1px;
  margin: 26px 0 18px;
  background: linear-gradient(
    to right,
    transparent,
    rgba(255,255,255,0.18),
    transparent
  );
}

.section-title {
  font-size: 16px;
  font-weight: 700;
  color: #93c5fd;
  margin: 0 0 10px;
}
.sub-card {
  margin-top: 32px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.14);
}
/* WF26 column – consistent across admin tables */
.departures-table .col-wf26 {
  width: 72px;
  min-width: 72px;
  max-width: 72px;
  text-align: center;
  vertical-align: middle;
}
.departures-table td.col-wf26 {
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Actions column */
.col-actions {
  width: 110px;
  min-width: 110px;
  max-width: 110px;
  text-align: center;
  vertical-align: middle;
}
/* Sub-section container inside cards */
.sub-card {
  margin-top: 32px;
  padding: 24px;
  border-radius: 14px;

  background: linear-gradient(
    160deg,
    rgba(255,255,255,0.02),
    rgba(0,0,0,0.15)
  );

  border: 1px solid rgba(255,255,255,0.08);
}
.sub-card .section-title {
  margin: 0 0 12px;
  font-size: 15px;
  color: var(--accent);
}
.sub-card::before {
  content: '';
  display: block;
  height: 1px;
  margin-bottom: 20px;

  background: linear-gradient(
    to right,
    transparent,
    rgba(255,255,255,0.18),
    transparent
  );
}
/* Uppercase DATA only (not headers) */
.departures-table.official-teams tbody td,
.departures-table.affiliates tbody td {
  text-transform: uppercase;
}
.departures-table tbody td {
  letter-spacing: 0.04em;
}
.departures-table thead th {
  letter-spacing: 0.02em;
}
/* Affiliate sim type dropdown */
.affiliate-simtype {
  width: 100%;
  max-width: 220px;

  background: var(--panel2);
  color: var(--text);

  border: 1px solid var(--border);
  border-radius: 10px;

  padding: 6px 10px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;

  cursor: pointer;
}

.affiliate-simtype:hover {
  border-color: var(--accent);
}

.affiliate-simtype:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(56,189,248,0.25);
}
.modal-card select {
  width: 100%;
  padding: 10px 12px;
  background: var(--panel2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-weight: 600;
  text-transform: uppercase;
}

.hidden {
  display: none !important;
}
.status-pill {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .4px;
  display: inline-block;
}

.status-pill.booked {
  background: linear-gradient(160deg, #064e3b, #022c22);
  color: #6ee7b7;
  box-shadow: 0 0 8px rgba(34,197,94,.35);
}

.status-pill.non-booked {
  background: linear-gradient(160deg, #450a0a, #1f0505);
  color: #fca5a5;
  box-shadow: 0 0 8px rgba(239,68,68,.35);
}

.status-pill.route-warning {
  margin-left: 6px;
  background: linear-gradient(160deg, #7c2d12, #431407);
  color: #fde68a;
  box-shadow: 0 0 8px rgba(245,158,11,.45);
}
.status-pill.non-event {
  background: linear-gradient(160deg, #1f2937, #111827);
  color: #9ca3af;
  box-shadow: 0 0 6px rgba(156,163,175,.25);
}
.col-tobt { width: 110px; text-align: center; }
.tobt-select {
  height: 26px;                 /* 🔑 controls row height */
  min-height: 26px;
  padding: 2px 26px 2px 8px;    /* compact vertical padding */
  font-size: 13px;
  line-height: 1.2;
  border-radius: 6px;
  background-color: #0e1624;
  color: #ffffff;
  border: 1px solid #1f2a3a;
  appearance: none;             /* remove native tall select */
  -webkit-appearance: none;
  -moz-appearance: none;
}

/* Keep dropdown arrow aligned */
.tobt-select-wrapper {
  position: relative;
}

.tobt-select-wrapper::after {
  content: "▾";
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  pointer-events: none;
  color: #9fb3c8;
}
.tobt-remove-btn {
  all: unset;                 /* 🔑 removes browser defaults */
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 22px;
  height: 22px;

  margin-left: 6px;
  border-radius: 50%;

  color: #ff6b6b;
  cursor: pointer;
}

.tobt-remove-btn:hover {
  background: rgba(255, 107, 107, 0.18);
  color: #ff9a9a;
}
.tobt-assigned {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.status-pill.manual {
  background: rgba(255, 176, 46, 0.18);
  color: #ffb02e;
  border: 1px solid rgba(255, 176, 46, 0.35);
}

.status-pill.manual .status-icon {
  font-weight: 700;
  margin-right: 4px;
}
/* ===== Collapsible ATC route (Schedule page) ===== */
.route-text {
  display: block;
  max-width: 520px;
  white-space: normal;
}

.route-text.collapsed {
  max-height: 1.4em;           /* single-line height */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.route-toggle {
  margin-top: 4px;
  background: none;
  border: none;
  padding: 0;
  color: var(--accent);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
}
/* =========================
   Schedule page overrides
   ========================= */

/* =========================
   SimBrief button
   ========================= */

.simbrief-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 8px 14px;
  border-radius: 999px;

  background: linear-gradient(
    135deg,
    #2f80ed,
    #1c63c7
  );

  color: #ffffff;
  font-weight: 600;
  font-size: 13px;
  line-height: 1;

  text-decoration: none;
  white-space: nowrap;

  box-shadow:
    0 0 0 1px rgba(255,255,255,0.12),
    0 6px 10px rgba(47,128,237,0.35);

  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    filter 0.15s ease;
}

.simbrief-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.18),
    0 10px 15px rgba(47,128,237,0.55);
}

.simbrief-btn:active {
  transform: translateY(0);
}

/* Optional logo bubble */
.simbrief-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 22px;
  height: 22px;

  border-radius: 50%;
  background: rgba(255,255,255,0.18);

  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
}
/* =========================
   Schedule page – tighter columns
   ========================= */

/* =========================
   My Slots table (isolated)
   ========================= */

/* Wrapper: controls width + scroll */
.my-slots-table-wrapper {
  overflow-x: auto;
  overflow-y: hidden;

  padding-bottom: 6px; /* space so scrollbar doesn’t crowd content */
}

/* Table base */
.my-slots-table {
  width: 100%;
  min-width: 1200px; /* 🔑 THIS FIXES IT */
  border-collapse: collapse;
  table-layout: fixed;
}

/* Header + cell base */
.my-slots-table th,
.my-slots-table td {
  padding: 10px 12px;
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}

/* Header styling */
.my-slots-table thead th {
  font-size: 13px;
  font-weight: 600;
  color: #94a3b8;
  letter-spacing: 0.4px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* =========================
   Column sizing
   ========================= */
/* =========================
   Column sizing (balanced)
   ========================= */

   .my-slots-table .col-plan,
.my-slots-table .col-actions {
  vertical-align: middle;
}

.my-slots-table .col-wf-sector   { width: 90px;  }
.my-slots-table .col-callsign    { width: 140px; padding-right: 8px; white-space: normal;}
.my-slots-table .col-departure   { width: 95px;  }
.my-slots-table .col-destination { width: 105px; }
.my-slots-table .col-tobt        { width: 90px;  }
.my-slots-table .col-connect     { width: 105px; }

.callsign-input:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59,130,246,0.25);
}


/* Route absorbs remaining space */
.my-slots-table .col-route {
   width: auto;
  min-width: 300px;
  white-space: normal;
  font-size: 12px;
  line-height: 1.5;
}


/* ATC Route — contained, readable */
.my-slots-table .col-route {
  width: auto;
  min-width: 320px;
  white-space: normal;
  font-size: 12px;
  line-height: 1.5;
  color: #cbd5f5;
}

.my-slots-table .route-box {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 8px 10px;
}

.my-slots-table .col-plan        {
  width: 220px;          /* 🔑 extra room */
  text-align: center;
}

.my-slots-table .col-actions     {
  width: 140px;
  text-align: center;
}

/* =========================
   Action buttons
   ========================= */

.actions-stack {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

/* SimBrief button */
.simbrief-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  height: 30px;
  padding: 0 14px;
  border-radius: 18px;

  background: linear-gradient(160deg, #2563eb, #1d4ed8);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;

  white-space: nowrap;
  flex-shrink: 0;

  box-shadow: 0 0 10px rgba(37,99,235,0.35);
}

.simbrief-btn:hover {
  filter: brightness(1.06);
}

/* Cancel slot button */
.cancel-slot-btn {
  height: 34px;
  padding: 0 14px;
  border-radius: 18px;

  background: linear-gradient(160deg, #7f1d1d, #991b1b);
  color: #fee2e2;
  border: none;

  font-size: 13px;
  font-weight: 600;
  cursor: pointer;

  white-space: nowrap;
  
}

.cancel-slot-btn:hover {
  filter: brightness(1.08);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.18),
    0 10px 10px #9a2f2f;
}
.callsign-input {
  width: 100%;
  max-width: 100%;

  box-sizing: border-box; /* 🔑 critical */

  padding: 6px 10px;
  height: 34px;

  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);

  background: rgba(255,255,255,0.04);
  color: #fff;

  font-size: 13px;
  font-weight: 600;
  text-align: center;

  outline: none;
}


/* =========================
   Row separation
   ========================= */

.my-slots-table tbody tr:not(:last-child) td {
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
/* WebKit (Chrome, Edge, Safari) */
.my-slots-table-wrapper::-webkit-scrollbar {
  height: 8px;
}

.my-slots-table-wrapper::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.05);
  border-radius: 10px;
}

.my-slots-table-wrapper::-webkit-scrollbar-thumb {
  background: rgba(148,163,184,0.6);
  border-radius: 10px;
}

.my-slots-table-wrapper::-webkit-scrollbar-thumb:hover {
  background: rgba(148,163,184,0.85);
}

/* Firefox */
.my-slots-table-wrapper {
  scrollbar-width: thin;
  scrollbar-color: rgba(148,163,184,0.6) rgba(255,255,255,0.05);
}
@media (pointer: fine) {
  .my-slots-table-wrapper {
    scrollbar-gutter: stable both-edges;
  }
}
.upcoming-deps {
  max-height: 240px;
  overflow-y: auto;
}
.icao-top-row {
  display: grid;
  grid-template-columns: 1fr 0.5fr; /* 👈 half-width map */
  gap: 24px;
  align-items: stretch;
}


.icao-map iframe {
  width: 100%;
  aspect-ratio: 1 / 1;   /* square */
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #000;
}

@media (max-width: 900px) {
  .icao-top-row {
    grid-template-columns: 1fr;
  }
}
/* ===== ICAO MAP ===== */
/* Map column */
.icao-map {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  position: relative;
  z-index: 0;
}

/* Leaflet map itself */
#icaoMap {
  height: 320px;        /* or whatever height you chose */
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
}

/* Footer below map */
.icao-map-footer {
  margin-top: 8px;
  text-align: center;
  font-size: 13px;
  opacity: 0.85;
}

/* Footer link styling */
.icao-map-footer a {
  color: var(--accent);
  font-weight: 500;
  text-decoration: none;
}

.icao-map-footer a:hover {
  text-decoration: underline;
}

.map-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
}

.map-modal.hidden {
  display: none;
}

.map-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 23, 0.85);
  backdrop-filter: blur(6px);
}

.map-modal-panel {
  position: relative;
  width: 100%;
  max-width: none;     /* 🔑 remove card constraint */
  height: calc(100vh - 48px);
  margin: 0 auto;
  background: #020617;
  border-radius: 16px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.map-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  background: linear-gradient(to bottom, rgba(15, 23, 42, 0.9), rgba(2, 6, 23, 0.9));
  color: #e5e7eb;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.map-modal-header button {
  background: none;
  border: none;
  color: #94a3b8;
  font-size: 20px;
  cursor: pointer;
}

.map-modal-header button:hover {
  color: #e5e7eb;
}

#mapModalMap {
  flex: 1;
}
.map-expand-btn {
  background: none;
  border: none;
  color: #60a5fa;
  font-size: 13px;
  cursor: pointer;
  padding: 6px 0;
}

.map-expand-btn:hover {
  text-decoration: underline;
}
.runway-label {
  pointer-events: none;
}

.runway-label > div {
  transform-origin: center center;
  transform:
    translate(-50%, -50%)
    rotate(var(--rwy-rot));
  font-weight: 600;
  font-size: 12px;
  color: #2aff9e;
}
/* Runway labels – light map */
html[data-map-theme="light"] .runway-label > div {
  color: #14532d; /* dark aviation green */
}

.icao-top-row.three-cols {
 display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* 33% each */
  gap: 24px;
  align-items: stretch;
}


/* Critical: allow grid children to shrink */
.icao-top-row.three-cols > div {
  min-width: 0;
}

/* Prevent departures table from breaking the grid */
.icao-top-row.three-cols .icao-deps .departures-table {
  min-width: 0;
  width: 100%;
  table-layout: fixed;
}

/* Wrap long ATC routes instead of stretching */
.icao-top-row.three-cols .icao-deps td:last-child {
  white-space: normal;
  overflow-wrap: anywhere;
  font-size: 12px;
  line-height: 1.5;
}
/* ICAO page – ATC route collapse */
.icao-top-row.three-cols .route-collapsible {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.icao-top-row.three-cols .route-text {
  line-height: 1.6;
  font-size: 12px;
  color: #cbd5f5;
}

.icao-top-row.three-cols .route-text.collapsed {
  display: -webkit-box;
  align-self: start;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.icao-top-row.three-cols .route-toggle {
  align-self: flex-start;
  background: none;
  border: none;
  color: var(--accent);
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  padding: 0;
}

.icao-top-row.three-cols .route-toggle:hover {
  text-decoration: underline;
}
/* ICAO page – limit departures list height */
.icao-top-row.three-cols .deps-scroll {
  max-height: 364px;          /* ≈ 5 rows */
  overflow-y: auto;
  overflow-x: hidden;
  border-top: 1px solid var(--border);
}

/* Keep header visible while scrolling */
.icao-top-row.three-cols .departures-table thead th {
  position: sticky;
  top: 0;
  background: var(--panel);
  z-index: 2;
}

/* Optional: nicer scrollbar (WebKit) */
.icao-top-row.three-cols .deps-scroll::-webkit-scrollbar {
  width: 8px;
}

.icao-top-row.three-cols .deps-scroll::-webkit-scrollbar-thumb {
  background: rgba(148,163,184,0.35);
  border-radius: 6px;
}

.icao-top-row.three-cols .deps-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(148,163,184,0.55);
}
.icao-top-row.three-cols .deps-scroll {
  mask-image: linear-gradient(
    to bottom,
    black 85%,
    transparent 100%
  );
}
/* ICAO page – STS column */
.icao-top-row.three-cols .col-sts {
  width: 48px;
  text-align: center;
  white-space: nowrap;
}

/* Status icons */
.icao-top-row.three-cols .sts-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 700;
}

/* At Gate */
.icao-top-row.three-cols .sts-gate {
  background: linear-gradient(160deg, #064e3b, #022c22);
  color: #6ee7b7;
  box-shadow: 0 0 8px rgba(16,185,129,0.35);
}

/* Taxiing */
.icao-top-row.three-cols .sts-taxi {
  background: linear-gradient(160deg, #7c2d12, #431407);
  color: #fed7aa;
  box-shadow: 0 0 8px rgba(249,115,22,0.35);
}

/* ICAO – Online Controllers panel */
.icao-top-row.three-cols .atc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Individual controller row */
.icao-top-row.three-cols .atc-item {
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 10px 12px;
  border-radius: 10px;

  background: linear-gradient(160deg, #020617, #020617);
  border: 1px solid var(--border);

  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03);
}

/* Callsign */
.icao-top-row.three-cols .atc-callsign {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.4px;
  color: #e5e7eb;
}

/* Frequency */
.icao-top-row.three-cols .atc-freq {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: var(--accent);
  letter-spacing: 0.6px;
}

/* Empty state */
.icao-top-row.three-cols .atc-empty {
  color: var(--muted);
  font-style: italic;
  padding: 8px 4px;
}
.icao-top-row.three-cols .icao-atc h2::after {
  content: 'LIVE';
  margin-left: 10px;
  font-size: 11px;
  font-weight: 700;
  color: #22c55e;
  letter-spacing: 1px;
}
.icao-top-row.three-cols .icao-atc {
  max-height: 260px;
  overflow-y: auto;
}
/* ICAO – Airport Docs table */
.docs-table {
  width: 100%;
  border-collapse: collapse;
}

.docs-table th,
.docs-table td {
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  text-align: left;
}

.docs-table th {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--muted);
}

.docs-table td a {
  color: var(--accent);
  font-weight: 600;
}

.docs-table td a:hover {
  text-decoration: underline;
}

.docs-table .empty {
  text-align: center;
  font-style: italic;
  color: var(--muted2);
}
.scenery-platform {
  margin: 16px 0 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
}

.scenery-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 12px;
}

.scenery-table th,
.scenery-table td {
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  text-align: left;
}

.scenery-table th {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--muted2);
}

.scenery-table a {
  color: var(--accent);
  font-weight: 600;
}

.scenery-table a:hover {
  text-decoration: underline;
}

.empty {
  padding: 16px;
  font-style: italic;
  color: var(--muted2);
}
.modal.hidden {
  display: none;
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.65);
}

.modal-dialog {
  position: relative;
  max-width: 460px;
  margin: 10vh auto;
  background: #0b1220;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}

.modal-dialog h3 {
  margin-bottom: 12px;
}

.modal-dialog label {
  display: block;
  font-size: 13px;
  margin-top: 10px;
}

.modal-dialog input,
.modal-dialog select {
  width: 100%;
  margin-top: 4px;
  padding: 8px;
  background: #0f172a;
  border: 1px solid #1e293b;
  border-radius: 6px;
  color: #e5e7eb;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
}
.modal-message {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
}

.modal-message.success {
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.35);
  color: #4ade80;
}

.modal-message.error {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: #f87171;
}

.modal-message.hidden {
  display: none;
}
.btn-approve {
  background: #16a34a;
  color: white;
  border: none;
  padding: 6px 10px;
  border-radius: 6px;
}

.btn-reject {
  background: #dc2626;
  color: white;
  border: none;
  padding: 6px 10px;
  border-radius: 6px;
}

.admin-table td.actions {
  white-space: nowrap;
}
/* Limit width for readability */
.card-narrow {
  max-width: 1200px;
}

/* Table container */
.table-wrap {
  overflow-x: auto;
}

/* Base admin table */
.admin-scenery-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14px;
}

/* Header */
.admin-scenery-table thead th {
  text-align: left;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #9ca3af;
  padding: 12px 14px;
  border-bottom: 1px solid #1f2937;
}

/* Rows */
.admin-scenery-table tbody tr {
  background: rgba(255,255,255,0.02);
  transition: background 0.15s ease;
}

.admin-scenery-table tbody tr:hover {
  background: rgba(255,255,255,0.05);
}

/* Cells */
.admin-scenery-table td {
  padding: 12px 14px;
  vertical-align: middle;
  border-bottom: 1px solid #1f2937;
  white-space: nowrap;
}

/* Product link */
.admin-scenery-table td a {
  color: #60a5fa;
  font-weight: 600;
}

.admin-scenery-table td a:hover {
  text-decoration: underline;
}

/* Simulator badge */
.sim-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  background: #0f172a;
  border: 1px solid #1e293b;
}

/* Actions column */
.admin-scenery-table td.actions {
  text-align: right;
}

/* Buttons */
.btn-approve,
.btn-reject {
  border: none;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  margin-left: 6px;
}

.btn-approve {
  background: #16a34a;
  color: #ecfdf5;
}

.btn-approve:hover {
  background: #22c55e;
}

.btn-reject {
  background: #dc2626;
  color: #fef2f2;
}

.btn-reject:hover {
  background: #ef4444;
}
.route-collapsible {
  max-width: 420px;
}

.route-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.route-text:not(.collapsed) {
  white-space: normal;
}


/* Collapsed state */
.route-collapsible {
  display: flex;
  align-items: center;
  gap: 10px;
}


/* Toggle button */
.route-toggle {
  background: none;
  border: none;
  padding: 0;
  font-size: 0.75rem;
  color: #4fc3ff;
  cursor: pointer;
  white-space: nowrap;
}

.route-toggle:hover {
  text-decoration: underline;
}

.atis-container {
  display: flex;
  gap: 14px;
  width: 100%;
}


.atis-letter {
  width: 44px;
  height: 44px;
  flex-shrink: 0;

  border-radius: 12px;
  font-size: 18px;
  font-weight: 700;

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

  background: linear-gradient(
    135deg,
    var(--accent),
    var(--accent2)
  );

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.25),
    0 6px 16px rgba(0,0,0,0.35);
}


.atis-body {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.atis-header {
  font-size: 12px;
  opacity: 0.7;
  margin-bottom: 8px;
}

.atis-text {
  margin-top: 8px;

  font-size: 13px;
  line-height: 1.55;            /* ⬅ key change */
  letter-spacing: 0.02em;

  color: #d1d5db;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.faa-atis .atis-container {
  opacity: 0.85;
}

.faa-atis .atis-letter {
  background: linear-gradient(
    135deg,
    #334155,
    #1f2937
  );
}


.atis-letter.arrival {
  background: linear-gradient(160deg, #312e81, #1e1b4b);
  color: #c7d2fe;
  box-shadow: 0 0 14px rgba(99,102,241,.45);
}

.atis-letter.departure {
  background: linear-gradient(160deg, #064e3b, #022c22);
  color: #6ee7b7;
  box-shadow: 0 0 14px rgba(16,185,129,.45);
}

#airportAtisCard > .card:not(:last-child) {
  margin-bottom: 12px;
}
#airportAtisCard {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tobt-trash {
  background: none;
  border: none;
  color: #b33;
  cursor: pointer;
  margin-left: 6px;
}

.tobt-trash:hover {
  color: #e00;
}

.callsign-edit-btn {
  all: unset;                 /* 🔑 removes browser button junk */
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 18px;
  height: 18px;

  color: rgba(255,255,255,0.45);
  cursor: pointer;

  transition: color 0.15s ease, transform 0.15s ease;
}

/* Hover state */
.callsign-edit-btn:hover {
  color: var(--accent);       /* your cyan */
  transform: translateY(-0.5px);
}
.icao-map {
  position: relative;
}

.map-overlay-controls {
  position: absolute;
  top: 8px;
  right: 8px;

  display: flex;
  flex-direction: column;
  gap: 6px;

  z-index: 600;
}

.map-overlay-btn {
  width: 32px;
  height: 32px;

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

  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.6);

  color: rgba(255,255,255,0.85);
  cursor: pointer;
}

.map-overlay-btn:hover {
  background: rgba(255,255,255,0.08);
  color: #fff;
}

.map-overlay-btn svg {
  pointer-events: none;
}

.map-overlay-btn .sun,
.map-overlay-btn .moon {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

/* Sun / moon visibility */
.map-overlay-btn .moon {
  display: none;
}

html[data-map-theme="light"] .map-overlay-btn .sun {
  display: none;
}

html[data-map-theme="light"] .map-overlay-btn .moon {
  display: block;
}

.departures-table--compact th:nth-child(2),
.departures-table--compact td:nth-child(2) {
  width: 90px;
  font-size: 13px;
}

.departures-table--compact th:nth-child(3),
.departures-table--compact td:nth-child(3) {
  width: 60px;
  font-size: 12px;
  text-align: center;
}

.departures-table--compact th:nth-child(4),
.departures-table--compact td:nth-child(4) {
  width: 70px;
  font-size: 12px;
  text-align: center;
}
.map-modal-panel {
  display: flex;
  flex-direction: column;
  height: 90vh;
}

.map-modal-panel .icao-map {
  position: relative;
  flex: 1;
  min-height: 0;
  position: relative;
  z-index: 0;
}

#mapModalMap {
  width: 100%;
  height: 100%;
}
/* Aircraft markers – dark map default */
.ac-icon,
.ac-label {
  color: rgba(255, 255, 255, 0.9);
}
/* Aircraft markers – light map */
html[data-map-theme="light"] .ac-icon,
html[data-map-theme="light"] .ac-label {
  color: rgba(0, 0, 0, 0.85);
}
.callsign-link {
  cursor: pointer;
  font-weight: 600;
}

.callsign-link:hover {
  text-decoration: underline;
}
.fp-strip {
  background: #0b1220;
  color: #e6ebf2;
  font-family: "JetBrains Mono", Consolas, monospace;
  border: 1px solid #23304d;
  padding: 14px;
  width: 520px;
}


.fp-status {
  margin-left: auto;
  font-weight: 600;
  text-align: right;
  color: #9aa4b2; /* neutral default */
}

/* WF problem states */
.fp-status.wf-route,
.fp-status.wf-not-booked {
  color: #ff9800;
}

/* Optional: WF booked (green) */
.fp-status.wf-booked {
  color: #4caf50;
}


.fp-strip-row {
  display: grid;
  grid-template-columns: 70px 1fr 70px 1fr;
  row-gap: 4px;
  column-gap: 16px;
  margin-bottom: 6px;
}


.fp-label {
  font-size: 11px;
  color: #55658a;
  letter-spacing: 0.5px;
}


.fp-value {
  font-size: 13px;
  color: #e8edff;
}


.fp-route-block {
  margin-top: 8px;
  border-top: 1px solid #2a3550;
  padding-top: 6px;
}

.fp-route-label {
  font-size: 11px;
  color: #7f8aa3;
  margin-bottom: 4px;
}

.fp-route {
  white-space: pre-wrap;        /* allow wrapping */
  word-break: normal;           /* do NOT break tokens */
  overflow-wrap: break-word;    /* only if absolutely needed */
  line-height: 1.45;
  font-size: 14px;
  letter-spacing: 0.6px;
  max-width: 100%;
}



.fp-actions {
  margin-top: 10px;
  text-align: right;
}

.fp-close {
  background: none;
  border: 1px solid #2a3550;
  color: #e6ebf2;
  font-size: 11px;
  padding: 3px 8px;
  opacity: 0.7;
  font-family: inherit;
  cursor: pointer;
}

.fp-route::selection {
  background: #2a3d7a;
}

.fp-close:hover {
  background: #162040;
  opacity: 1;
}
.fp-strip-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  margin-bottom: 12px;
}

.fp-callsign-group {
  display: inline-flex;
  align-items: center;
  gap: 4px; /* tight spacing */
}
.fp-callsign {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #e5edff; /* slightly brighter than body text */
   position: relative;
}
.fp-callsign::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 2px;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.45),
    rgba(255, 255, 255, 0)
  );
}

.fp-route-warning {
  font-size: 13px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  color: #ff9800; /* WF warning orange */
}
.fp-warning-icon {
  display: block;
  filter: drop-shadow(0 0 4px rgba(255, 152, 0, 0.45));
}
.fp-callsign-group:has(.fp-route-warning:not(.hidden)) .fp-callsign {
  letter-spacing: 0.5px;
}
.route-muted {
  color: #6b7280;        /* neutral grey */
  opacity: 0.7;
  font-weight: 400;
}
.route-error {
  color: #ef4444;           /* clear red */
  font-weight: 700;
  text-decoration: underline;
}
.fp-route-alert {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  margin-top: 14px;
  padding: 10px 14px;

  border: 1px solid rgba(255, 152, 0, 0.45);
  border-radius: 6px;

  background: rgba(255, 152, 0, 0.08);
  color: #ff9800;

  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.fp-route-alert-icon {
  font-size: 16px;
  line-height: 1;
}


.fp-status-booked {
  color: #22c55e; /* clean green */
  border: 1px solid rgba(34, 197, 94, 0.6);
  background: rgba(34, 197, 94, 0.12);
  padding: 4px 8px;
  border-radius: 6px;
}

.hidden {
  display: none;
}
.nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 8px;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: #e53935;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}

.nav-badge.hidden {
  display: none;
}
/* ===== AVAILABLE SCENERY ===== */

.scenery-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
}

.scenery-table thead th {
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  color: #9fb3c8;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.scenery-table tbody td {
  padding: 12px;
  font-size: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  color: #e6edf3;
  vertical-align: middle;
}

.scenery-table tbody tr:hover {
  background: rgba(255,255,255,0.03);
}

.scenery-table a {
  color: #6cb6ff;
  text-decoration: none;
  font-weight: 500;
}

.scenery-table a:hover {
  text-decoration: underline;
}

/* Simulator badge */
.scenery-table td:first-child {
  font-weight: 600;
  color: #7ee787;
}

/* Type badge (Freeware / Payware) */
.scenery-table td:last-child {
  font-weight: 600;
}

.scenery-table td:last-child:contains("Freeware") {
  color: #3fb950;
}

.scenery-table td:last-child:contains("Payware") {
  color: #d29922;
}
.sim-pill {
  background: rgba(126,231,135,0.15);
  color: #7ee787;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.type-pill.freeware {
  background: rgba(63,185,80,0.15);
  color: #3fb950;
}

.type-pill.payware {
  background: rgba(210,153,34,0.15);
  color: #d29922;
}
/* Disabled submit scenery button (login required) */
.btn-disabled-login {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: auto; /* allows tooltip */
}

.btn-disabled-login:hover {
  opacity: 0.65;
}
.login-hint {
  margin-top: 8px;
  font-size: 12px;
  color: #9fb3c8;
}
.doc-access-requests .admin-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 6px;
}

.doc-access-requests .admin-table thead th {
  text-align: left;
  font-size: 13px;
  font-weight: 600;
  color: #9aa4b2;
  padding: 8px 12px;
}

.doc-access-requests .admin-table tbody tr {
  background: rgba(255, 255, 255, 0.02);
  border-radius: 8px;
}

.doc-access-requests .admin-table tbody td {
  padding: 10px 12px;
  vertical-align: middle;
}

.doc-access-requests .admin-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.05);
}

/* Status badges */
.doc-access-requests .badge {
  display: inline-block;
  min-width: 72px;
  text-align: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.doc-access-requests .badge-pending {
  background: rgba(255, 193, 7, 0.15);
  color: #ffc107;
}

.doc-access-requests .badge-denied {
  background: rgba(220, 53, 69, 0.15);
  color: #dc3545;
}

/* Actions column */
.doc-access-requests .admin-table td:last-child {
  white-space: nowrap;
}

.doc-access-requests .admin-table td:last-child em {
  color: #666;
  font-style: normal;
}

/* Buttons */
.doc-access-requests .action-btn {
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
}

.doc-access-requests .btn-approve {
  background: #1faa59;
  color: #fff;
}

.doc-access-requests .btn-approve:hover {
  background: #17914c;
}

.doc-access-requests .btn-deny {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.2);
  color: #ccc;
}

.doc-access-requests .btn-deny:hover {
  border-color: #dc3545;
  color: #dc3545;
}

/* Dim denied rows */
.doc-access-requests tr[data-status="DENIED"] {
  opacity: 0.55;
}
.doc-access-requests .btn-delete {
  background: transparent;
  border: 1px solid rgba(220, 53, 69, 0.4);
  color: #dc3545;
}

.doc-access-requests .btn-delete:hover {
  background: rgba(220, 53, 69, 0.15);
}
.atis-letter.vatsim {
  font-weight: 600;
}

.atis-letter.faa {
  opacity: 0.85;
}

.atis-disclaimer {
  font-size: 12px;
  opacity: 0.8;
  margin-bottom: 6px;
}
.atis-title.faa {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #cfd6dd;
}

.atis-title {
  font-size: 13px;
  font-weight: 600;
  color: #e5e7eb;
}

.atis-meta {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}


.atis-badge {
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 0.3px;
}

.card.faa-atis {
  border: 1px dashed rgba(255, 255, 255, 0.25);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.04),
    rgba(255, 255, 255, 0.02)
  );
}
.atis-letter.faa {
  background: linear-gradient(135deg, #6b7280, #4b5563); /* slate gray */
  color: #f1f5f9;
  opacity: 0.9;
}
.vatsim-atis .atis-container,
.faa-atis .atis-container {
  display: flex;
  gap: 14px;
  
}
.atis-container {
  display: flex;
  gap: 14px;
}
.faa-atis {
  padding: 14px 16px;
  border-radius: 14px;

  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.03),
    rgba(255,255,255,0.015)
  );

  border: 1px dashed rgba(255,255,255,0.12);
}
/* =========================
   ATIS – Compact, single-layer
   ========================= */

#airportAtisCard {
  padding: 20px 22px;           /* tighter than normal cards */
}

/* One ATIS = one flat row */
.atis-entry {
  display: flex;
  gap: 14px;
  padding: 14px 16px;

  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.03),
    rgba(0,0,0,0.15)
  );

  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;

  box-shadow: none;             /* 🔑 kill card stacking */
}

/* Space between multiple ATIS entries */
.atis-entry + .atis-entry {
  margin-top: 12px;
}

/* Letter badge */
.atis-letter {
  width: 44px;
  height: 44px;
  border-radius: 10px;

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

  font-weight: 800;
  font-size: 18px;
  letter-spacing: 0.5px;

  flex-shrink: 0;
}

.atis-letter.vatsim {
  background: linear-gradient(135deg, #2563eb, #38bdf8);
  color: #fff;
}

.atis-letter.faa {
  background: linear-gradient(135deg, #374151, #1f2937);
  color: #e5e7eb;
}

/* Body */
.atis-body {
  flex: 1;
  min-width: 0;
}

/* Header line */
.atis-title {
  font-size: 13px;
  font-weight: 700;
  color: #93c5fd;
  margin-bottom: 2px;
}

.atis-title.faa {
  color: #cbd5e1;
}

/* Callsign / frequency */
.atis-meta {
  font-size: 12px;
  color: #9fb4cc;
  margin-bottom: 6px;
}

/* ATIS text – compact, readable */
.atis-text {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  line-height: 1.5;
  color: #e5e7eb;

  max-height: 4.5em;            /* ~3 lines */
  overflow: hidden;
  text-overflow: ellipsis;
}

/* FAA disclaimer – subtle */
.atis-disclaimer {
  font-size: 11px;
  color: #facc15;
  margin-bottom: 6px;
}

/* FAA badge */
.atis-badge {
  margin-left: 8px;
  padding: 2px 6px;
  font-size: 10px;
  border-radius: 999px;
  background: rgba(250,204,21,0.15);
  color: #fde68a;
}
/* ===============================
   WF World Map airport labels
   =============================== */

.wf-airport-label {
  pointer-events: auto;
}

.wf-airport-pin {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,0.85);
  background: rgba(47, 191, 113, 0.9); /* aligns with WF green styling */
  box-shadow: 0 0 14px rgba(47, 191, 113, 0.35);
  transform: translate(-50%, -50%);
  position: absolute;
  left: 0;
  top: 0;
}

.wf-airport-text {
  position: absolute;
  left: 12px;
  top: -10px;
  padding: 4px 8px;
  border-radius: 10px;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.92);
  font-weight: 700;
  letter-spacing: 0.6px;
  font-size: 12px;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.wf-airport-text:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.22);
}
.map-overlay-controls {
  pointer-events: auto;
  z-index: 100;
}

.icao-map::before,
.icao-map::after {
  pointer-events: none;
}
/* =========================
   Leaflet hard fixes
   ========================= */

.leaflet-container {
  background: #0b0f1a; /* match site background */
}


.leaflet-pane,
.leaflet-map-pane,
.leaflet-tile-pane,
.leaflet-overlay-pane,
.leaflet-shadow-pane,
.leaflet-marker-pane,
.leaflet-tooltip-pane,
.leaflet-popup-pane {
  z-index: 1;
}

/* Ensure tiles are visible */
.leaflet-tile {
  opacity: 1 !important;
  filter: none !important;
}
.leaflet-container {
  background: #111;
}
.wf-map-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(3px);
  background: rgba(0,0,0,0.35);
  z-index: 9999;
}

.wf-map-loading .panel {
  background: rgba(10,14,22,0.85);
  border: 1px solid rgba(120,160,220,0.25);
  border-radius: 12px;
  padding: 14px 16px;
  min-width: 240px;
  color: #d9e6ff;
  box-shadow: 0 10px 28px rgba(0,0,0,0.4);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.wf-map-loading .title {
  font-weight: 700;
  margin-bottom: 8px;
  letter-spacing: 0.2px;
}

.wf-map-loading .msg {
  opacity: 0.9;
  font-size: 13px;
}

.card,
.card-full {
  overflow: visible;
}
.map-overlay-controls {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1001;        /* > Leaflet’s ~600 */
  pointer-events: auto;
}
.leaflet-container {
  z-index: 0;
}
#icaoMap,
#mapModalMap {
  position: relative;
  z-index: 1;           /* explicitly low */
}
.map-overlay-controls {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 100;         /* higher than #icaoMap */
}
.icao-map {
  position: relative;  /* REQUIRED */
}
.icao-map {
  position: relative;
  z-index: 0;
}


#icaoMap,
#mapModalMap {
  position: relative;
  z-index: 1;
}

.map-overlay-controls {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 10; /* higher than #icaoMap */
  pointer-events: auto;
}

/* The map itself */


/* If inside a card/body/container */
.card-body,
.map-wrapper,
.world-map-wrapper {
  height: auto !important;
  min-height: 0 !important;
}
/* Modal panel must define vertical space */
.map-modal-panel {
  width: 96vw;
  height: 90vh;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

/* Header consumes fixed height */
.map-modal-header {
  flex: 0 0 auto;
}

/* Map wrapper fills remaining space */
.icao-map {
  flex: 1 1 auto;
  min-height: 0; /* 🔑 critical for flexbox */
}

/* Leaflet map fills wrapper */
#wfMapModalMap {
  width: 100%;
  height: 100%;
}
.wf-slot-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;

  background: linear-gradient(135deg, #0b3a6e, #114c88);
  color: #ffffff;

  padding: 18px 22px;
  border-radius: 10px;
  margin-bottom: 20px;

  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.wf-slot-banner.hidden {
  display: none;
}

/* ---------- LEFT SIDE ---------- */

.wf-slot-left {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wf-slot-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.wf-slot-badge {
  background: rgba(255, 255, 255, 0.18);
  padding: 5px 12px;
  border-radius: 999px;

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

  color: #e6f1ff;
}

.wf-slot-title {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: #ffffff;
}


/* ---------- GRID DETAILS ---------- */

.wf-slot-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(110px, auto));
  gap: 14px 22px;
}

.wf-slot-item {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.wf-slot-item .label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: #cfe3f7;
  opacity: 0.9;
}

.wf-slot-item .value {
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
}

/* ---------- RIGHT SIDE / CTA ---------- */

.wf-slot-right {
  display: flex;
  align-items: center;
}

.wf-slot-cta {
  background: #ffffff;
  color: #0b3a6e;

  padding: 10px 18px;
  border-radius: 6px;

  font-size: 14px;
  font-weight: 600;
  text-decoration: none;

  transition:
    background 0.15s ease,
    transform 0.15s ease,
    box-shadow 0.15s ease;

  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
}

.wf-slot-cta:hover {
  background: #e6f0fb;
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
}
/* =========================================================
   WorldFlight Schedule – Departures Table ONLY
   Scoped safely to schedule page
   ========================================================= */

/* ----- Table scroll container ----- */
.schedule-page .table-scroll{
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  position: relative;
  scrollbar-gutter: stable both-edges;
}

/* ----- Table base ----- */
.schedule-page .departures-table{
  width: 100%;
  min-width: 0;              /* critical for flex + scroll */
  border-collapse: collapse;
  table-layout: fixed;
}

/* ----- Header + cells ----- */
.schedule-page .departures-table th,
.schedule-page .departures-table td{
  padding: 4px 8px;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-top: 1px solid var(--border);
}

.schedule-page .departures-table th{
  font-weight: 600;
  color: var(--text);
}

/* =========================================================
   Column sizing (efficient + readable)
   ========================================================= */

/* WF number */
.schedule-page .col-wf-sector{
  width: 72px;
}

/* Dep / Arr ICAO */
.schedule-page .col-from,
.schedule-page .col-to{
  width: 64px;
}

/* Date */
.schedule-page .col-date{
  width: 110px;
}

/* Dep / Arr windows */
.schedule-page .col-window{
  width: 130px;
}

/* Block time */
.schedule-page .col-time{
  width: 72px;
  text-align: center;
}

/* =========================================================
   ATC Route – flexible + wide
   ========================================================= */
.schedule-page .col-route{
  width: auto;               /* absorbs remaining space */
  min-width: 420px;
  max-width: 640px;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.5;
  font-size: 12px;
}

/* =========================================================
   Action columns
   ========================================================= */

/* Book Slot */
.schedule-page .col-book{
  width: 96px;
  text-align: center;
}

/* Plan */
.schedule-page .col-plan{
  width: 140px;
  text-align: center;
}

/* =========================================================
   Card width correction (sidebar aware)
   Prevents overflow when sidebar is expanded
   ========================================================= */

.schedule-page .card-full{
  max-width: calc(100vw - var(--sidebar-expanded) - 64px);
  box-sizing: border-box;
}

/* Sidebar collapsed */
body.sidebar-collapsed .schedule-page .card-full{
  max-width: calc(100vw - var(--sidebar-collapsed) - 64px);
}

/* =========================================================
   Small screens: force horizontal scroll, not squeeze
   ========================================================= */
@media (max-width: 1200px){
  .schedule-page .departures-table{
    min-width: 980px;
  }
}
/* =========================================================
   FINAL WIDTH OPTIMIZATION — Schedule table only
   ========================================================= */

/* Reduce padding slightly to free horizontal space */
.schedule-page .departures-table th,
.schedule-page .departures-table td{
  padding: 3px 6px;   /* was 4px 8px */
}

/* Date can be tighter */
.schedule-page .col-date{
  width: 96px;
}

/* Dep / Arr windows: reduce width */
.schedule-page .col-window{
  width: 118px;
}

/* Block time can be very small */
.schedule-page .col-time{
  width: 64px;
}

/* Book Slot button column */
.schedule-page .col-book{
  width: 88px;
}

/* Plan button column */
.schedule-page .col-plan{
  width: 124px;
}

/* =========================================================
   ATC Route — give it the freed space
   ========================================================= */

.schedule-page .col-route{
  min-width: 520px;   /* ↑ significantly wider */
  max-width: 820px;   /* ↑ allow long routes */
  font-size: 12px;
  line-height: 1.5;
}
/* =========================================================
   Schedule table – header & button width fixes
   ========================================================= */

/* Block Time: ensure header fits comfortably */
.schedule-page .col-time{
  width: 88px;          /* was too tight */
  min-width: 88px;
  text-align: center;
}

/* Book Slot column: enforce minimum usable button width */
.schedule-page .col-book{
  width: 104px;
  min-width: 104px;
  text-align: center;
}

/* Plan column: wider due to icon + text */
.schedule-page .col-plan{
  width: 152px;
  min-width: 152px;
  text-align: center;
}

/* Ensure buttons themselves do not shrink */
.schedule-page .col-book .book-slot-btn,
.schedule-page .col-plan .plan-btn{
  min-width: 88px;
  white-space: nowrap;
}

/* =========================================================
   FINAL column reservation – Schedule departures table
   ========================================================= */

/* --- Block Time: reserve header + data space --- */
.schedule-page .col-time{
  width: 96px;          /* guarantees "Block Time" fits */
  min-width: 96px;
  max-width: 96px;
  text-align: center;
}

/* --- Book Slot column --- */
.schedule-page .col-book{
  width: 112px;
  min-width: 112px;
  max-width: 112px;
  text-align: center;
}

/* --- Plan column (SB icon + text) --- */
.schedule-page .col-plan{
  width: 168px;
  min-width: 168px;
  max-width: 168px;
  text-align: center;
}

/* --- Ensure buttons NEVER shrink --- */
.schedule-page .col-book button,
.schedule-page .col-plan button{
  min-width: 96px;
  white-space: nowrap;
}

/* --- Let ATC Route yield first when space is tight --- */
.schedule-page .col-route{
  min-width: 460px;   /* still wide */
  max-width: none;    /* allow it to give up space */
}
/* =========================================================
   Schedule page – final column rebalance
   Fixes SimBrief overflow, trims Arr Window
   ========================================================= */

/* --- Arrival Window does NOT need this much space --- */
.schedule-page .col-window.arr-window,
.schedule-page th:nth-child(6),
.schedule-page td:nth-child(6){
  width: 104px;          /* was too wide */
  min-width: 104px;
  max-width: 104px;
}

/* --- Departure Window can stay slightly wider --- */
.schedule-page th:nth-child(5),
.schedule-page td:nth-child(5){
  width: 120px;
  min-width: 120px;
}

/* --- Plan column MUST be protected --- */
.schedule-page .col-plan{
  width: 190px;          /* enough for full label */
  min-width: 190px;
  max-width: 190px;
  text-align: center;
}

/* --- SimBrief button must never clip --- */
.schedule-page .col-plan .simbrief-btn,
.schedule-page .col-plan button,
.schedule-page .col-plan a{
  white-space: nowrap;
  min-width: 160px;
  flex-shrink: 0;
}

/* --- Book Slot also protected --- */
.schedule-page .col-book{
  width: 112px;
  min-width: 112px;
  max-width: 112px;
}

/* --- ATC Route yields FIRST when space is tight --- */
.schedule-page .col-route{
  min-width: 420px;      /* still very readable */
  max-width: none;       /* allow shrink */
}

/* ======================================================
   WF WORLD MAP — FULL PAGE LAYOUT
   ====================================================== */

/* ---- CSS variables (adjust if your sidebar sizes differ) */
:root {
  --wf-sidebar-expanded: 220px;
  --wf-sidebar-collapsed: 72px;
  --wf-topbar-height: 64px;
}

/* ---- Main page wrapper */
.wf-map-page {
  position: relative;
  width: 100%;
  height: calc(100vh - var(--wf-topbar-height));
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #0b0f1a;
}

/* ---- Body offset for sidebar */
body {
  padding-left: var(--wf-sidebar-expanded);
  transition: padding-left 0.25s ease;
}

body.sidebar-collapsed {
  padding-left: var(--wf-sidebar-collapsed);
}

/* ---- Leaflet map container */
#wfWorldMap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* ======================================================
   LEAFLET OVERRIDES
   ====================================================== */

.leaflet-container {
  background: #1b1b1b;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, sans-serif;
}

/* Zoom controls */
.leaflet-control-zoom {
  margin-top: 20px;
  margin-left: 20px;
}

.leaflet-control-zoom a {
  background: #ffffff;
  color: #000;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

/* Remove attribution clutter if desired */
.leaflet-control-attribution {
  background: rgba(0,0,0,0.6);
  color: #aaa;
  font-size: 11px;
}

/* ======================================================
   MAP OVERLAYS
   ====================================================== */

.wf-map-overlay {
  position: absolute;
  z-index: 5;
  pointer-events: none;
}

.wf-map-title {
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 20px;
  font-weight: 600;
  color: #6bd6ff;
  text-shadow: 0 2px 6px rgba(0,0,0,0.7);
}

/* ======================================================
   AIRPORT LABELS
   ====================================================== */

.wf-airport-label {
  pointer-events: none;
}

.wf-airport-pin {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #1aff9c;
  border: 2px solid #0b0f1a;
  box-shadow: 0 0 6px rgba(26,255,156,0.9);
  margin: 0 auto;
}

.wf-airport-text {
  margin-top: 4px;
  padding: 2px 6px;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  background: rgba(0,0,0,0.75);
  border-radius: 6px;
  white-space: nowrap;
  text-align: center;
}

/* ======================================================
   AIRPORT HOVER TOOLTIP
   ====================================================== */

.wf-airport-hover {
  min-width: 240px;
  padding: 12px;
  background: #ffffff;
  color: #111;
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.35);
}

.wf-airport-hover-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 8px;
}

.wf-airport-hover-section {
  padding: 8px;
  border-radius: 8px;
  margin-bottom: 8px;
}

.wf-airport-hover-section.inbound {
  border-left: 4px solid #00c896;
  background: #f4f6f7;
}

.wf-airport-hover-section.outbound {
  border-left: 4px solid #4da3ff;
  background: #f4f6f7;
}

.wf-airport-hover-subtitle {
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 4px;
  letter-spacing: 0.04em;
}

.wf-airport-hover-leg {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 2px;
}

.wf-airport-hover-date {
  font-size: 12px;
  color: #555;
  margin-bottom: 4px;
}

.wf-airport-hover-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
}

.wf-airport-hover-cta {
  margin-top: 8px;
  font-size: 12px;
  color: #2a7fff;
  cursor: pointer;
}

/* ======================================================
   RESPONSIVE SAFETY
   ====================================================== */

@media (max-width: 900px) {
  :root {
    --wf-sidebar-expanded: 0px;
    --wf-sidebar-collapsed: 0px;
  }

  body {
    padding-left: 0;
  }
}
/* ======================================================
   WF WORLD MAP — DEFINITIVE FULL-HEIGHT FIX
   ====================================================== */

/* 1) Ensure root layout fills viewport */
html, body {
  height: 100%;
}

/* 2) Main content must fill viewport minus topbar */
main.dashboard.map-layout {
  position: relative;
  height: calc(100vh - var(--topbar-h));
  margin: 0;
  padding: 0;
  overflow: hidden;
}

/* 3) Map page fills main entirely */
main.dashboard.map-layout .wf-map-page {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

/* 4) Leaflet map fills map page */
main.dashboard.map-layout #wfWorldMap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}


/* 7) Leaflet controls below topbar */
.leaflet-top {
  top: var(--topbar-h);
}
.leaflet-container {
  background: #0b0f1a; /* match site background */
}
.wf-map-page::before,
.wf-map-page::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100px;
  pointer-events: none;
  z-index: 4;
  backdrop-filter: blur(6px);
  background: rgba(11,15,26,0.25);
}

.wf-map-page::before { left: 0; }
.wf-map-page::after  { right: 0; }
header.topbar {
  background: linear-gradient(
    to bottom,
    rgba(11,15,26,0.95),
    rgba(11,15,26,0.6)
  );
}
main.dashboard.map-layout {
  position: absolute;
  top: var(--topbar-height);
  left: 0;
  right: 0;
  bottom: 0;

  display: flex;
  overflow: hidden;
}
.wf-map-page {
  position: relative;
  flex: 1;
  height: 100%;
  overflow: hidden;
  background: #0b0f1a;
}
#wfWorldMap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #0b0f1a;
}

.leaflet-container {
  background: #0b0f1a;
}
.wf-map-page::before,
.wf-map-page::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 120px;
  pointer-events: none;
  z-index: 5;
}

.wf-map-page::before {
  left: 0;
  background: linear-gradient(to right, #0b0f1a, transparent);
}

.wf-map-page::after {
  right: 0;
  background: linear-gradient(to left, #0b0f1a, transparent);
}
/* ===============================
   WF Airport Hover Popup
================================ */

.wf-airport-popup {
  min-width: 280px;
  max-width: 320px;
  background: linear-gradient(
    180deg,
    rgba(14, 22, 40, 0.92),
    rgba(8, 14, 28, 0.92)
  );
  border-radius: 14px;

  /* ✅ Clean glass shadow only */
  box-shadow:
    0 24px 50px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(0, 0, 0, 0.25);

  border: none;
}


/* Header */
.wf-airport-popup-header {
  padding: 12px 14px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #7fd0ff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* Sections */
.wf-airport-section {
  padding: 10px 14px;
  margin: 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  position: relative;
}

/* Accent bars */
.wf-airport-section.inbound {
  border-left: 3px solid #3cffc2;
}

.wf-airport-section.outbound {
  border-left: 3px solid #4da6ff;
}

/* Section titles */
.wf-airport-section-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9bb6d9;
  margin-bottom: 4px;
}

/* Flight line */
.wf-airport-leg {
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 2px;
}

/* Meta row */
.wf-airport-meta {
  font-size: 12px;
  color: #b9c9e6;
  display: flex;
  align-items: center;
  gap: 6px;
}

.wf-airport-meta .dot {
  opacity: 0.6;
}
.wf-airport-cta {
  margin-top: 8px;
  font-size: 12px;
  color: #2a7fff;
  cursor: pointer;
  text-align: center;
}

/* =========================================================
   SLOT BANNERS (Arrival / Departure)
   ========================================================= */

/* Grid container for the two banners */
.slot-banners {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

/* Stack on smaller screens */
@media (max-width: 900px) {
  .slot-banners {
    grid-template-columns: 1fr;
  }
}

/* Individual banner card */
.slot-banner {
  background: linear-gradient(160deg, var(--panel), var(--panel2));
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px 28px;

  display: flex;
  flex-direction: column;
  gap: 18px;

  box-shadow: var(--shadow);
  width: 100%;
  min-width: 0;
}

/* Arrival / Departure accent bars */
.slot-banner.arrival {
  border-left: 4px solid var(--accent);
}

.slot-banner.departure {
  border-left: 4px solid var(--wf-green);
}

/* Header label */
.slot-type {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--muted);
}

/* Info container */
.slot-info {
  width: 100%;
}

/* Grid of details */
.slot-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(90px, 1fr));
  gap: 14px 24px;
}

/* ATC route spans full width */
.slot-grid .wide {
  grid-column: span 4;
}

/* Labels */
.slot-grid label {
  font-size: 11px;
  color: var(--muted2);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Values */
.slot-grid strong {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

/* =========================================================
   BOOK SLOT BUTTONS
   ========================================================= */

.book-slot-btn {
  align-self: flex-end;
  height: 38px;
  padding: 0 22px;

  border-radius: 999px;
  border: none;
  cursor: pointer;

  font-size: 14px;
  font-weight: 700;
  color: #fff;

  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* Arrival button */
.book-slot-btn.arrival {
  background: linear-gradient(160deg, #38bdf8, #0ea5e9);
}

/* Departure button */
.book-slot-btn.departure {
  background: linear-gradient(160deg, var(--wf-green), var(--wf-green-dark));
}

/* Hover effect */
.book-slot-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.25);
}
/* Container that matches .card width WITHOUT background */
.portal-width {
  width: 100%;
  box-sizing: border-box;
}
.slot-banner {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 22px 26px;
}
.slot-route {
  display: grid;
  grid-template-columns: auto 20px auto 1fr;
  align-items: center;
  column-gap: 10px;
}

.slot-route .airport {
  font-size: 22px;
  font-weight: 700;
}

.slot-route .arrow {
  font-size: 18px;
  opacity: 0.6;
}

.slot-route .slot-date {
  justify-self: end;
  font-size: 14px;
  color: var(--muted);
}
.slot-window {
  background: rgba(255,255,255,0.04);
  border-radius: 12px;
  padding: 14px 18px;
}

.slot-window label {
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.window-time {
  margin-top: 4px;
  font-size: 20px;
  font-weight: 700;
}
.arrival-window {
  border-left: 4px solid #39c6ff;
}

.departure-window {
  border-left: 4px solid #38d98c;
}
.slot-atc label {
  font-size: 11px;
  color: var(--muted);
}

.route-text {
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.4;
  opacity: 0.9;
  word-break: break-word;
}
.slot-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: auto;
}
.wf-book-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 22px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.wf-book-btn.arrival {
  background: linear-gradient(135deg, #2cc8ff, #1aa8e8);
  color: #fff;
  box-shadow: 0 0 0 1px rgba(44,200,255,.35);
}

.wf-book-btn.departure {
  background: linear-gradient(135deg, #28c76f, #1ea85c);
  color: #fff;
  box-shadow: 0 0 0 1px rgba(40,199,111,.35);
}

.wf-book-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0,0,0,.35);
}
.wf-book-btn.disabled {
  background: #2a2a2a;
  color: #9a9a9a;
  cursor: not-allowed;
  box-shadow: none;
  opacity: 0.65;
  pointer-events: none;
}
.wf-book-btn.disabled::after {
  content: '✓';
  margin-left: 8px;
  font-weight: bold;
  color: #6fcf97;
}
/* ATC Route container */
.slot-atc {
  margin-top: 12px;
}

/* Label */
.slot-atc-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.6);
  margin-bottom: 6px;
}

/* Route pill */
.slot-atc-route {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 10px 14px;

  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 0.02em;

  color: #eaf6ff;

  /* wrapping for long routes */
  word-break: break-word;
  white-space: normal;
}
.slot-atc {
  margin-top: 18px;
  display: flex;
  flex-direction: column;   /* 👈 forces label above route */
  gap: 8px;                 /* 👈 spacing between them */
}

.slot-atc-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.55);
}

.slot-atc-route {
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.08),
    rgba(255,255,255,0.04)
  );
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 14px;
  padding: 12px 16px;

  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  line-height: 1.45;
  color: #eaf6ff;

  white-space: normal;
  word-break: break-word;
}
/* Shared vertical stack */
.slot-window,
.slot-atc {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Labels */
.slot-window-label,
.slot-atc-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.55);
}

/* Wrapped pill values */
.slot-window-value,
.slot-atc-route {
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.08),
    rgba(255,255,255,0.04)
  );
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 14px;
  padding: 12px 16px;

  font-size: 14px;
  font-weight: 600;
  color: #eaf6ff;
}

/* Route keeps monospace */
.slot-atc-route {
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  line-height: 1.45;
}
/* REMOVE any background / border from the container */
.slot-window {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: none;
  border: none;
  padding: 0;
}

/* Keep the pill styling ONLY on the value */
.slot-window-value {
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.08),
    rgba(255,255,255,0.04)
  );
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 14px;
  padding: 12px 16px;

  font-size: 14px;
  font-weight: 600;
  color: #eaf6ff;
}
.wf-book-btn.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.wf-book-btn.disabled::after {
  content: none; /* removes tick if you had one */
}

.wf-book-btn.disabled {
  background: #2a2f3a;
  color: #b0b6c3;
}
.controllers-card {
  display: flex;
  flex-direction: column;
  height: 340px;          /* match other panels */
}

.controllers-scroll {
  flex: 1;                /* fills remaining space */
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;          /* 🔑 allows scrolling */
}
/* Match departures-style scrollbar */
.controllers-scroll::-webkit-scrollbar {
  width: 6px;
}

.controllers-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.controllers-scroll::-webkit-scrollbar-thumb {
  background-color: rgba(148, 163, 184, 0.35); /* muted slate */
  border-radius: 6px;
}

.controllers-scroll::-webkit-scrollbar-thumb:hover {
  background-color: rgba(148, 163, 184, 0.6);
}
.controllers-scroll {
  scrollbar-width: thin;
  scrollbar-color: rgba(148,163,184,.5) transparent;
}
.controllers-card {
  position: relative; /* anchor the fade */
}

.controllers-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
}

/* Bottom fade overlay */
.controllers-card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;

  height: 36px; /* match deps fade height */
  pointer-events: none;

  background: linear-gradient(
    to bottom,
    rgba(2, 6, 23, 0),
    rgba(2, 6, 23, 0.85)
  );
}
/* ATIS root must fill the grid cell */
#airportAtisCard {
  width: 100%;
  max-width: 100%;
}

.wf-airport-action-btn {
  width: 100%;
  padding: 12px 14px;
  margin-top: 12px;

  font-size: 15px;
  font-weight: 600;

  border-radius: 8px;
  border: none;

  background: #2d7cff;
  color: #fff;

  cursor: pointer;          /* 👈 THIS is key */
  transition:
    background-color 0.15s ease,
    transform 0.05s ease,
    box-shadow 0.05s ease;
}

/* Remove Leaflet popup chrome */
.leaflet-popup-content-wrapper {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
}

.leaflet-popup-content {
  margin: 0;
}

.leaflet-popup-tip {
  display: none;
}
.wf-airport-action-btn:hover {
  background: #1f6ae1;
}

.wf-airport-action-btn:active {
  transform: translateY(1px);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.25);
}
.wf-airport-popup {
  pointer-events: auto;
}
/* Override Leaflet popup chrome */
.leaflet-container .leaflet-popup-content-wrapper {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

.leaflet-container .leaflet-popup-content {
  margin: 0 !important;
}

.leaflet-container .leaflet-popup-tip {
  display: none !important;
}
.flowtype-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  background:
    linear-gradient(180deg, #141a25, #0f1420);
  color: #e6ecff;

  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;

  padding: 6px 34px 6px 12px;
  font-size: 13px;
  font-weight: 500;

  cursor: pointer;
  min-width: 140px;

  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.02),
    0 2px 8px rgba(0, 0, 0, 0.4);

  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease;
}

/* ▼ caret */
.flowtype-select {
  background-image:
    url("data:image/svg+xml;utf8,\
    <svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.65)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>\
    <polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px;
}

/* Hover */
.flowtype-select:hover {
  border-color: rgba(110, 170, 255, 0.55);
}

/* Focus */
.flowtype-select:focus {
  outline: none;
  border-color: #5ea2ff;
  box-shadow:
    0 0 0 2px rgba(94, 162, 255, 0.25),
    0 6px 18px rgba(0, 0, 0, 0.6);
}

/* Disabled (if you ever need it) */
.flowtype-select:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Dropdown options (limited support but helps) */
.flowtype-select option {
  background: #0f1420;
  color: #e6ecff;
}
.flowtype-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  margin-right: 8px;
  padding: 3px 8px;

  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;

  border-radius: 999px;
  text-transform: uppercase;
  white-space: nowrap;

  background: rgba(255, 255, 255, 0.08);
  color: #e6ecff;

  border: 1px solid rgba(255, 255, 255, 0.15);
}

/* Booking Only → blue */
.flowtype-booking_only {
  background: rgba(90, 160, 255, 0.18);
  border-color: rgba(90, 160, 255, 0.45);
  color: #b9d7ff;
}

/* Slotted → amber */
.flowtype-slotted {
  background: rgba(255, 180, 90, 0.18);
  border-color: rgba(255, 180, 90, 0.5);
  color: #ffd8a3;
}
/* Flow type column */
.col-flowtype{
  width: 130px;
  min-width: 130px;
  text-align: center;
}

.flowtype-pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  font-size: 12px;
  font-weight: 700;
  color: #cbd5f5;
}
/* ===== FLOW TYPE DROPDOWN COLOURS ===== */

.flowtype-select {
  transition: 
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease;
}

/* NONE → GREEN */
.flowtype-select[data-flowtype="NONE"] {
  background: rgba(60, 200, 120, 0.15);
  border-color: rgba(60, 200, 120, 0.6);
  color: #b9f5cf;
}

/* BOOKING ONLY → AMBER */
.flowtype-select[data-flowtype="BOOKING_ONLY"] {
  background: rgba(255, 180, 90, 0.18);
  border-color: rgba(255, 180, 90, 0.7);
  color: #ffe0b0;
}

/* SLOTTED → RED */
.flowtype-select[data-flowtype="SLOTTED"] {
  background: rgba(255, 90, 90, 0.18);
  border-color: rgba(255, 90, 90, 0.7);
  color: #ffc4c4;
}
/* ===== FLOW TYPE PILLS (PUBLIC) ===== */

.flowtype-pill {
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid transparent;
}

/* NONE → GREEN */
.flowtype-none {
  background: rgba(60, 200, 120, 0.18);
  border-color: rgba(60, 200, 120, 0.6);
  color: #b9f5cf;
}

/* BOOKING ONLY → AMBER */
.flowtype-booking_only {
  background: rgba(255, 180, 90, 0.2);
  border-color: rgba(255, 180, 90, 0.7);
  color: #ffe0b0;
}

/* SLOTTED → RED */
.flowtype-slotted {
  background: rgba(255, 90, 90, 0.2);
  border-color: rgba(255, 90, 90, 0.7);
  color: #ffc4c4;
}
/* ===== FLOW TYPE INFO BADGE ===== */

.flowtype-pill {
  display: inline-block;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 999px;

  /* key differences from buttons */
  cursor: default;
  user-select: none;
  pointer-events: none;
  box-shadow: none;
}
/* NONE → GREEN */
.flowtype-none {
  color: #7fe0a7;
  background: rgba(60, 200, 120, 0.15);
  border: 1px solid rgba(60, 200, 120, 0.35);
}

/* BOOKING ONLY → AMBER */
.flowtype-booking_only {
  color: #ffd28a;
  background: rgba(255, 180, 90, 0.18);
  border: 1px solid rgba(255, 180, 90, 0.45);
}

/* SLOTTED → RED */
.flowtype-slotted {
  color: #ffb3b3;
  background: rgba(255, 90, 90, 0.18);
  border: 1px solid rgba(255, 90, 90, 0.45);
}
/* ===== FLOW TYPE INFO BADGE (SQUARE) ===== */

.flowtype-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 4px 8px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;

  border-radius: 4px;   /* 👈 key change (was 999px) */
  cursor: default;
  user-select: none;
  pointer-events: none;
  box-shadow: none;
}