/* ─── Yekan Bakh Font ───────────────────────────────────────────────────── */
@font-face {
    font-family: "Yekan Bakh FaNum";
    font-style: normal;
    font-weight: normal;
    font-stretch: normal;
    src: url('assets/font/woff/YekanBakhFaNum-Regular.woff') format('woff'),
         url('assets/font/woff2/YekanBakhFaNum-Regular.woff2') format('woff2');
}

@font-face {
    font-family: "Yekan Bakh FaNum";
    font-style: normal;
    font-weight: bold;
    font-stretch: normal;
    src: url('assets/font/woff/YekanBakhFaNum-Bold.woff') format('woff'),
         url('assets/font/woff2/YekanBakhFaNum-Bold.woff2') format('woff2');
}

@font-face {
    font-family: "Yekan Bakh FaNum";
    font-style: normal;
    font-weight: 800;
    font-stretch: normal;
    src: url('assets/font/woff/YekanBakhFaNum-ExtraBold.woff') format('woff'),
         url('assets/font/woff2/YekanBakhFaNum-ExtraBold.woff2') format('woff2');
}

@font-face {
    font-family: "Yekan Bakh FaNum";
    font-style: normal;
    font-weight: 600;
    font-stretch: normal;
    src: url('assets/font/woff/YekanBakhFaNum-SemiBold.woff') format('woff'),
         url('assets/font/woff2/YekanBakhFaNum-SemiBold.woff2') format('woff2');
}

/* ─── Base ─────────────────────────────────────────────────────────────── */
* { font-family: 'Yekan Bakh FaNum', 'Inter', Tahoma, Arial, sans-serif; }
.font-display { font-family: 'Yekan Bakh FaNum', 'Inter', Tahoma, Arial, sans-serif; }

body {
    background:
        radial-gradient(1200px 500px at 90% -10%, rgba(14,165,233,0.06), transparent),
        #eef1f6;
}

/* ─── Scrollbar ─────────────────────────────────────────────────────────── */
.scrollbar-thin::-webkit-scrollbar { height: 4px; width: 4px; }
.scrollbar-thin::-webkit-scrollbar-track { background: transparent; }
.scrollbar-thin::-webkit-scrollbar-thumb { background: #dbe1e8; border-radius: 999px; }
.scrollbar-thin::-webkit-scrollbar-thumb:hover { background: #c1c9d4; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: #dbe1e8; border-radius: 9999px; }

/* ─── Card ──────────────────────────────────────────────────────────────── */
.card {
    background: #fff;
    border-radius: 20px;
    border: 1px solid rgba(15,23,42,0.04);
    box-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 12px 24px -18px rgba(15,23,42,0.12);
    transition: box-shadow .35s ease, transform .35s ease;
}
.card:hover {
    box-shadow: 0 4px 8px rgba(15,23,42,0.05), 0 20px 40px -20px rgba(15,23,42,0.18);
}

/* ─── Entrance animation ────────────────────────────────────────────────── */
@keyframes riseIn {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}
.rise { animation: riseIn .6s cubic-bezier(.22,.68,0,1.01) both; }
.d1 { animation-delay: .03s; }
.d2 { animation-delay: .08s; }
.d3 { animation-delay: .13s; }
.d4 { animation-delay: .18s; }
.d5 { animation-delay: .10s; }
.d6 { animation-delay: .16s; }
.d7 { animation-delay: .22s; }
.d8 { animation-delay: .28s; }

/* ─── Sidebar nav ───────────────────────────────────────────────────────── */
.nav-item { position: relative; transition: background .25s ease, color .25s ease; }
.nav-item:hover { background: #f8fafc; color: #1e293b; }
.nav-item.active {
    background: linear-gradient(270deg, rgba(14,165,233,.12), rgba(14,165,233,.03));
    color: #0369a1; font-weight: 700;
}
.nav-item.active::before {
    content: '';
    position: absolute;
    right: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 4px;
    background: linear-gradient(180deg, #0ea5e9, #0284c7);
}

/* ─── KPI icon ──────────────────────────────────────────────────────────── */
.kpi-icon {
    width: 40px; height: 40px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px;
}

/* ─── Badge ─────────────────────────────────────────────────────────────── */
.badge { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; letter-spacing: .02em; }

/* ─── Button ghost ──────────────────────────────────────────────────────── */
.btn-ghost { transition: background .2s ease, color .2s ease, transform .15s ease; }
.btn-ghost:hover { background: #f1f5f9; }
.btn-ghost:active { transform: scale(.94); }

/* ─── Glow ──────────────────────────────────────────────────────────────── */
.glow-sky { box-shadow: 0 10px 25px -8px rgba(14,165,233,.55); }

/* ─── Row hover ─────────────────────────────────────────────────────────── */
.row-hover { transition: background .2s ease; }
.row-hover:hover { background: #f8fafc; }

/* ─── Pulse dot ─────────────────────────────────────────────────────────── */
.pulse-dot { position: relative; }
.pulse-dot::after {
    content: ''; position: absolute; inset: 0; border-radius: 9999px;
    background: currentColor; opacity: .6;
    animation: pulse 1.8s cubic-bezier(0,0,.2,1) infinite;
}
@keyframes pulse { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(2.4); opacity: 0; } }

/* ─── Status colors ─────────────────────────────────────────────────────── */
.status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.status-dot.sky { background: #0ea5e9; }
.status-dot.green { background: #10b981; }
.status-dot.red { background: #ef4444; animation: pulse-red 2s infinite; }
.status-dot.amber { background: #f59e0b; }
.status-dot.slate { background: #94a3b8; }

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

/* ─── Type badge ────────────────────────────────────────────────────────── */
.type-domestic {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px; border-radius: 6px; font-size: 10px; font-weight: 700;
    background: #eef2ff; color: #4f46e5;
}
.type-international {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px; border-radius: 6px; font-size: 10px; font-weight: 700;
    background: #f0f9ff; color: #0284c7;
}

/* ─── Tab active ────────────────────────────────────────────────────────── */
.tab-active {
    background: white !important;
    border-color: #6366f1 !important;
    color: #1e293b !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* ─── Flight table row ──────────────────────────────────────────────────── */
.flight-row { animation: fadeInUp .4s ease forwards; opacity: 0; }
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.flight-row:nth-child(1) { animation-delay: 0.02s; }
.flight-row:nth-child(2) { animation-delay: 0.04s; }
.flight-row:nth-child(3) { animation-delay: 0.06s; }
.flight-row:nth-child(4) { animation-delay: 0.08s; }
.flight-row:nth-child(5) { animation-delay: 0.10s; }
.flight-row:nth-child(6) { animation-delay: 0.12s; }
.flight-row:nth-child(7) { animation-delay: 0.14s; }
.flight-row:nth-child(8) { animation-delay: 0.16s; }
.flight-row:nth-child(9) { animation-delay: 0.18s; }
.flight-row:nth-child(10) { animation-delay: 0.20s; }

/* ─── Live card ─────────────────────────────────────────────────────────── */
.live-card {
    border: 1px solid #e2e8f0; border-radius: 14px; padding: 14px;
    background: #fff;
    transition: all .2s ease;
}
.live-card:hover {
    border-color: #bae6fd; background: #f0f9ff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
.live-card.delayed:hover {
    border-color: #fecaca; background: #fef2f2;
}

/* ─── Alert item ────────────────────────────────────────────────────────── */
.alert-icon {
    width: 36px; height: 36px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; font-size: 14px;
}

/* ─── Airport select ────────────────────────────────────────────────────── */
#airportSelect {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 12px center;
    padding-left: 32px;
}

/* ─── Mobile sidebar toggle ─────────────────────────────────────────────── */
@media (max-width: 1024px) {
    aside { display: none !important; }
}

/* ─── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .kpi-icon { width: 32px; height: 32px; font-size: 0.8rem; border-radius: 10px; }
    .card { border-radius: 16px; }
}

/* ─── Refresh spinner ───────────────────────────────────────────────────── */
@keyframes spin { to { transform: rotate(360deg); } }
.spinning { animation: spin 1s linear infinite; }

/* ─── Stale data warning ────────────────────────────────────────────────── */
.stale-banner {
    background: #fef3c7; border: 1px solid #fcd34d; border-radius: 12px;
    padding: 10px 16px; display: flex; align-items: center; gap: 8px;
    font-size: 13px; color: #92400e; margin-bottom: 12px;
}

/* ─── Modal animation ──────────────────────────────────────────────────── */
@keyframes modalFadeIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}
#delayModal:not(.hidden) > div:last-child {
    animation: modalFadeIn .25s ease forwards;
}