/* ============================================================
   Airlines Index v2 ("alx") — built 2026-06-12 from the design
   brief Andreas supplied (prompt-design.md). Shares the apx
   token language (#2563eb accent, slate neutrals, hero gradient).
   ============================================================ */

.alx { background: #f8fafc; }
.alx, .alx * { box-sizing: border-box; }

/* ---------- Hero band ---------- */
.alx-hero {
  background: linear-gradient(135deg, #0f2744 0%, #1a4480 50%, #2563eb 100%);
  background-blend-mode: overlay;
  padding: 44px 20px 38px;
  color: #fff;
}
.alx-hero__wrap { max-width: 1120px; margin: 0 auto; }
.alx-crumbs { font-size: 13px; color: #93c5fd; margin-bottom: 14px; }
.alx-crumbs a { color: #93c5fd; text-decoration: none; }
.alx-crumbs a:hover { text-decoration: underline; }
.alx-crumbs span { color: rgba(255,255,255,.85); }
.alx-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: .05em; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); border-radius: 999px; padding: 6px 14px; margin-bottom: 16px; }
.alx-h1 { font-size: 38px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 6px; color: #fff; }
.alx-sub { font-size: 15.5px; color: rgba(255,255,255,.85); margin: 0 0 22px; }

.alx-search { position: relative; max-width: 580px; margin-bottom: 22px; }
.alx-search i { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: #64748b; font-size: 15px; }
.alx-search input { width: 100%; font-size: 15.5px; padding: 15px 44px 15px 46px; border: none; border-radius: 12px; background: #fff; color: #1e293b; box-shadow: 0 10px 30px rgba(15,39,68,.35); }
.alx-search input:focus { outline: none; box-shadow: 0 10px 30px rgba(15,39,68,.35), 0 0 0 3px rgba(37,99,235,.3); }
.alx-search button { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); border: none; background: #e2e8f0; color: #64748b; width: 26px; height: 26px; border-radius: 999px; font-size: 15px; line-height: 1; cursor: pointer; }
.alx-search button:hover { background: #cbd5e1; color: #1e293b; }

.alx-kpis { display: flex; gap: 10px; flex-wrap: wrap; }
.alx-kpi { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); border-radius: 10px; padding: 9px 16px; backdrop-filter: blur(4px); }
.alx-kpi b { display: block; font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }
.alx-kpi span { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: rgba(255,255,255,.75); font-weight: 600; }

/* ---------- Body grid ---------- */
.alx-body { max-width: 1120px; margin: 0 auto; padding: 26px 20px 50px; display: grid; grid-template-columns: 1fr 320px; gap: 24px; align-items: start; }
.alx-main { min-width: 0; }

/* ---------- Toolbar ---------- */
.alx-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.alx-count { font-size: 13px; color: #64748b; }
.alx-perpage { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #64748b; }
.alx-pp { display: inline-block; font-size: 12.5px; font-weight: 600; color: #2563eb; text-decoration: none; border: 1px solid #e2e8f0; border-radius: 8px; padding: 4px 10px; background: #fff; transition: all .2s ease; }
.alx-pp:hover { background: #eff6ff; border-color: #2563eb; color: #1d4ed8; }
.alx-pp.is-active { background: #2563eb; border-color: #2563eb; color: #fff; }

/* ---------- Sortable list header ---------- */
.alx-lhead { position: sticky; top: 60px; z-index: 5; display: grid; grid-template-columns: 30px 1fr 78px 78px 90px 78px 126px; gap: 14px; align-items: center; padding: 8px 16px; background: #f8fafc; border-bottom: 1px solid #e2e8f0; margin-bottom: 9px; }
.alx-lhead__rank { font-size: 11px; font-weight: 700; color: #64748b; }
.alx-lhead__c { display: inline-flex; align-items: center; gap: 5px; justify-content: flex-end; border: none; background: none; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #64748b; cursor: pointer; padding: 4px 0; transition: color .2s ease; }
.alx-lhead__c--name { justify-content: flex-start; }
.alx-lhead__c i { font-size: 10px; opacity: .6; }
.alx-lhead__c:hover { color: #2563eb; }
.alx-lhead__c.is-active { color: #2563eb; }
.alx-lhead__c.is-active i { opacity: 1; }
.alx-lhead__c:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(37,99,235,.15); border-radius: 6px; }

/* ---------- Airline rows ---------- */
.alx-list { display: flex; flex-direction: column; gap: 9px; }
.alx-row { position: relative; display: grid; grid-template-columns: 30px 1fr 78px 78px 90px 78px 126px; gap: 14px; align-items: center; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 12px 16px; overflow: hidden; transition: border-color .2s ease; }
.alx-row:hover { border-color: #cbd5e1; }
.alx-row__rank { font-family: 'Courier New', monospace; font-size: 12.5px; font-weight: 700; color: #94a3b8; }
.alx-row__id { display: flex; align-items: center; gap: 12px; min-width: 0; text-decoration: none; border-radius: 9px; margin: -4px; padding: 4px; transition: background .2s ease; }
.alx-row__id:hover { background: #eff6ff; }
.alx-row__id:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(37,99,235,.15); }
.alx-row__tile { flex-shrink: 0; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: #eff6ff; color: #2563eb; font-family: 'Courier New', monospace; font-weight: 700; font-size: 14px; border-radius: 10px; transition: all .2s ease; }
.alx-row__id:hover .alx-row__tile { background: #2563eb; color: #fff; }
.alx-row__idtxt { min-width: 0; }
.alx-row__name { display: block; font-size: 14.5px; font-weight: 600; color: #1e293b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .2s ease; }
.alx-row__id:hover .alx-row__name { color: #2563eb; text-decoration: underline; }
.alx-row__codes { display: block; font-family: 'Courier New', monospace; font-size: 11.5px; color: #64748b; margin-top: 1px; }
.alx-row__m { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; color: #1e293b; text-align: right; }
.alx-row__m--strong { color: #0f2744; }
.alx-row__m--dim { font-weight: 400; color: #64748b; }
.alx-row__btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: #2563eb; background: #fff; border: 1px solid #e2e8f0; border-radius: 9px; padding: 8px 12px; text-decoration: none; white-space: nowrap; cursor: pointer; transition: all .2s ease; }
.alx-row__btn i { font-size: 11px; transition: transform .2s ease; }
.alx-row__btn:hover { background: #eff6ff; border-color: #2563eb; color: #1d4ed8; }
.alx-row__btn:hover i { transform: translateX(2px); }
.alx-row__btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(37,99,235,.15); }
.alx-row__bar { position: absolute; left: 0; bottom: 0; height: 2px; background: #2563eb; opacity: .55; border-radius: 0 2px 2px 0; }

/* ---------- Pagination ---------- */
.alx-pages { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-top: 20px; }
.alx-page { display: inline-block; font-size: 13px; font-weight: 600; color: #2563eb; background: #fff; border: 1px solid #e2e8f0; border-radius: 9px; padding: 8px 13px; text-decoration: none; transition: all .2s ease; }
.alx-page:hover { background: #eff6ff; border-color: #2563eb; }
.alx-page.is-active { background: #2563eb; border-color: #2563eb; color: #fff; }

/* ---------- Empty state ---------- */
.alx-empty { border: 2px dashed #e2e8f0; border-radius: 12px; background: #fff; text-align: center; padding: 36px 20px; margin-top: 9px; }
.alx-empty p { font-size: 15px; font-weight: 600; color: #1e293b; margin: 0 0 6px; }
.alx-empty__hint { font-size: 13px !important; font-weight: 400 !important; color: #64748b !important; margin-bottom: 16px !important; }
.alx-empty .alx-row__btn { margin: 0 4px; }

/* ---------- Sidebar ---------- */
.alx-aside { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.alx-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 16px; }
.alx-card__t { display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #1e293b; margin: 0 0 10px; }
.alx-card__t i { color: #2563eb; font-size: 12px; }

.alx-track { text-align: left; }
.alx-track__bell { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: #e0f2fe; color: #0284c7; border-radius: 10px; font-size: 16px; margin-bottom: 10px; }
.alx-track h3 { font-size: 16px; font-weight: 700; color: #1e293b; margin: 0 0 4px; }
.alx-track p { font-size: 13px; color: #64748b; margin: 0 0 12px; }
.alx-track__input { width: 100%; font-size: 14px; border: 1px solid #e2e8f0; border-radius: 9px; padding: 9px 12px; margin-bottom: 8px; color: #1e293b; }
.alx-track__input:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.15); }
.alx-track__btn { display: block; width: 100%; text-align: center; font-size: 14px; font-weight: 700; color: #fff; background: #2563eb; border: none; border-radius: 9px; padding: 10px 14px; text-decoration: none; cursor: pointer; transition: background .2s ease; }
.alx-track__btn:hover { background: #1d4ed8; color: #fff; }
.alx-track__fine { font-size: 11.5px; color: #64748b; margin-top: 9px; }
.alx-track__fine i { color: #16a34a; margin-right: 4px; }

.alx-sr { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 9px; margin: 0 -9px; border-radius: 9px; text-decoration: none; transition: background .2s ease; }
.alx-sr:hover { background: #eff6ff; }
.alx-sr:hover .alx-sr__pair { color: #2563eb; text-decoration: underline; }
.alx-sr__txt { min-width: 0; }
.alx-sr__pair { display: block; font-family: 'Courier New', monospace; font-size: 13px; font-weight: 700; color: #1e293b; transition: color .2s ease; }
.alx-sr__sub { display: block; font-size: 11.5px; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.alx-sr__badge { flex-shrink: 0; font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.alx-sr__badge--blue { background: #dbeafe; color: #2563eb; }
.alx-sr__badge--amber { background: #fef3c7; color: #d97706; }
.alx-sr__badge--green { background: #dcfce7; color: #16a34a; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .alx-body { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .alx-lhead, .alx-row { grid-template-columns: 30px 1fr 78px 90px 126px; }
  .alx-lhead__c[data-sort="dest"], .alx-lhead__c[data-sort="avgmi"],
  .alx-row__m--dest, .alx-row__m--dim { display: none; }
}
@media (max-width: 640px) {
  .alx-h1 { font-size: 30px; }
  .alx-lhead, .alx-row { grid-template-columns: 1fr 90px 44px; }
  .alx-lhead__rank, .alx-row__rank,
  .alx-lhead__c[data-sort="routes"], .alx-row__m--routes { display: none; }
  .alx-row__btn { padding: 8px 0; font-size: 0; }
  .alx-row__btn i { font-size: 13px; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .alx * { transition: none !important; }
}
.alx-row__tile--logo { background: #fff; border: 1px solid #e2e8f0; overflow: hidden; }
.alx-row__tile--logo img { width: 100%; height: 100%; object-fit: contain; padding: 5px; box-sizing: border-box; }
.alx-row__id:hover .alx-row__tile--logo { background: #fff; border-color: #2563eb; }