/* ==========================================================
   SKYOPS APPLICATION SHELL
   ========================================================== */

.app-header {

    height: 72px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 0 24px;

    background:
        radial-gradient(circle at 18% -80%, #214a79 0, transparent 42%),
        linear-gradient(105deg, #0b1930 0%, #111f38 62%, #172a48 100%);

    border-bottom: 1px solid #335173;

    box-shadow: 0 8px 24px #07142629;

    color: #f8fafc;

    position: sticky;

    top: 0;

    z-index: 100;

    margin-top: 0;

}

/* ---------- Left ---------- */

.header-left {

    display: flex;

    align-items: center;

    gap: 20px;

    min-width: 0;

}

.sidebar-toggle {

    width: 42px;

    height: 42px;

    font-size: 20px;

    border: none;

    background: transparent;

    color: #dbeafe;

    cursor: pointer;

    transition: background-color 160ms ease, color 160ms ease;

}

.sidebar-toggle:hover,
.notification-button:hover {

    background: #ffffff14;

    color: #ffffff;

}

.airline-brand {

    display: flex;

    align-items: center;

    gap: 12px;

    min-width: 0;

}

.airline-logo {

    width: 40px;

    height: 40px;

    border-radius: 8px;

    display: grid;

    place-items: center;

    border: 1px solid #70a7ff66;

    background: #173858;

    color: #dbeafe;

    box-shadow: inset 0 1px #ffffff14;

}

.airline-brand-text {

    display: flex;

    flex-direction: column;

    min-width: 0;

}

.va-switcher {
    position: relative;
    margin-left: 18px;
}

.va-switcher summary {
    cursor: pointer;
    list-style: none;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 10px;
}

.va-switcher summary::-webkit-details-marker { display: none; }

.va-switcher__chevron { font-size: 1.1rem; transition: transform 0.15s ease; }
.va-switcher[open] .va-switcher__chevron { transform: rotate(180deg); }

.va-switcher__context,
.va-switcher__menu a {
    display: grid;
    gap: 2px;
}

.va-switcher small,
.va-switcher__menu p,
.va-switcher__label {
    color: #aebed1;
    font-size: 0.75rem;
}

.va-switcher__menu {
    position: absolute;
    z-index: 20;
    top: calc(100% + 10px);
    min-width: 250px;
    padding: 12px;
    border: 1px solid #335173;
    border-radius: 10px;
    background: #10233f;
    box-shadow: 0 16px 32px #02061755;
}

.va-switcher__menu a {
    padding: 9px;
    color: #ffffff;
    text-decoration: none;
}

.va-switcher__menu a:hover {
    background: #1b365a;
}

.va-switcher__menu a[aria-current="page"] { background: #172e4d; }

.va-switcher__divider { margin: 8px 0; border-top: 1px solid #335173; }

.sidebar-context-label {
    padding: 18px 20px 7px;
    color: #aebed1;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.sidebar-section-label {
    margin: 12px 16px 4px;
    padding-top: 10px;
    border-top: 1px solid #335173;
    color: #c7d3e1;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.sidebar-section-label--admin { margin-top: 20px; }

.sidebar-va-identity {
    display: grid;
    gap: 4px;
    margin: 12px;
    padding: 14px;
    border: 1px solid #335173;
    border-radius: 10px;
    color: #ffffff;
}

.sidebar-va-identity span { color: #aebed1; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.sidebar-va-identity strong { font-size: 1.05rem; }
.sidebar-va-identity small { color: #c7d3e1; line-height: 1.4; }

.sidebar-link__badge {
    min-width: 1.5rem;
    margin-left: auto;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    background: #fbbf24;
    color: #172033;
    font-size: 0.72rem;
    font-weight: 800;
    text-align: center;
}

.airline-name {

    color: #ffffff;

    font-weight: 700;

    font-size: 16px;

}

.airline-subtitle {

    font-size: 12px;

    color: #aebed1;

}

/* ---------- Centre ---------- */

.header-centre {

    flex: 1;

    display: flex;

    justify-content: center;

    min-width: 0;

}

.context-bar {

    color: #dbe7f5;

    font-size: 18px;

    font-weight: 600;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

}

/* ---------- Right ---------- */

.header-right {

    display: flex;

    align-items: center;

    gap: 20px;

    min-width: 0;

}

.notification-button {

    border: none;

    background: transparent;

    color: #dbeafe;

    font-size: 20px;

    cursor: pointer;

    transition: background-color 160ms ease, color 160ms ease;

}

.user-menu {

    display: flex;

    align-items: center;

    gap: 8px;

    color: #dbe7f5;

    min-width: 0;

    max-width: min(28vw, 320px);

}

.user-menu__identity {

    color: #f8fafc;

    font-weight: 650;

    text-decoration: none;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

}

.user-menu__identity:hover {
    color: #ffffff;
    text-decoration: underline;
}

.user-menu__identity:focus-visible {
    outline: 3px solid #93c5fd;
    outline-offset: 3px;
}

/* ==========================================================
   APPLICATION LAYOUT
   ========================================================== */

.app-shell {
    --app-workspace-background:
        radial-gradient(circle at 100% 0%, #dbeafe80 0, transparent 26%),
        linear-gradient(145deg, #f1f5f9 0%, #f6f8fb 46%, #eef3f8 100%);
    --app-surface-background: #ffffff;
    --app-surface-muted: #f4f7fb;
    --app-surface-border: #d9e3ee;
    --app-surface-shadow:
        0 1px 2px #1720330d,
        0 10px 28px #1720330d,
        inset 0 1px var(--app-surface-background);
    --app-surface-shadow-hover:
        0 2px 4px #1720330d,
        0 14px 32px #1720330d,
        inset 0 1px var(--app-surface-background);
    --app-motion-fast: 140ms;
    --app-motion-standard: 180ms;
    --app-motion-easing: cubic-bezier(0.2, 0, 0, 1);

    display: flex;
    min-height: calc(100vh - 72px);
    background: #0b1930;
}

.app-sidebar {
    flex-shrink: 0;
    background:
        linear-gradient(180deg, #0b1930 0%, #101f36 58%, #0b1729 100%);
    border-right: 1px solid #294663;
    padding: 24px 16px;
    box-shadow: 10px 0 30px #07142614;
}

.app-shell--sidebar-collapsed .app-sidebar {
    display: none;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 10px 14px;
    border: 1px solid transparent;
    color: #c7d4e4;
    text-decoration: none;
    border-radius: 8px;
    line-height: 1.2;
    transition:
        background-color var(--app-motion-standard) var(--app-motion-easing),
        border-color var(--app-motion-standard) var(--app-motion-easing),
        color var(--app-motion-fast) var(--app-motion-easing),
        box-shadow var(--app-motion-standard) var(--app-motion-easing),
        transform var(--app-motion-standard) var(--app-motion-easing);
}

.sidebar-link:hover:not([aria-current="page"]) {
    border-color: #335173;
    background: #173858;
    color: #ffffff;
    transform: translateX(2px);
}

.sidebar-link[aria-current="page"] {
    border-color: #4b78a6;
    background: #1a3b5e;
    color: #ffffff;
    box-shadow:
        inset 3px 0 #70a7ff,
        inset 0 1px #ffffff14;
    font-weight: 700;
}

.sidebar-link__icon {
    display: inline-grid;
    width: 20px;
    flex: 0 0 20px;
    place-items: center;
    line-height: 1;
}

.sidebar-link--session {
    margin-top: 6px;
}

.sidebar-link:focus-visible,
.sidebar-toggle:focus-visible,
.notification-button:focus-visible {
    outline: 3px solid #93c5fd;
    outline-offset: 3px;
}

.app-main {
    flex: 1;
    min-width: 0;
    padding: 32px;
    background: var(--app-workspace-background);
}

.app-main a {
    transition:
        color var(--app-motion-fast) var(--app-motion-easing),
        background-color var(--app-motion-standard) var(--app-motion-easing),
        border-color var(--app-motion-standard) var(--app-motion-easing),
        box-shadow var(--app-motion-standard) var(--app-motion-easing);
}

.app-main
    :is(
        .management-card,
        .dashboard-section,
        .pilot-identity,
        .va-admin-section,
        .va-admin-hero__context
    ) {
    transition: box-shadow var(--app-motion-standard) var(--app-motion-easing);
}

.app-main
    :is(
        .management-card,
        .dashboard-section,
        .pilot-identity,
        .va-admin-section,
        .va-admin-hero__context
    ):hover {
    box-shadow: var(--app-surface-shadow-hover);
}

.app-main :is(.management-page-header, .pilot-welcome, .va-admin-hero) h1 {
    font-weight: 750;
    letter-spacing: -0.045em;
    line-height: 1.02;
    text-wrap: balance;
}

.app-main
    :is(
        .management-card__header,
        .management-dashboard-section__header,
        .dashboard-section__heading,
        .va-admin-section__heading
    )
    h2 {
    font-weight: 720;
    letter-spacing: -0.025em;
    line-height: 1.2;
    text-wrap: balance;
}

.app-main
    :is(
        .management-page-header__description,
        .pilot-welcome__summary,
        .va-admin-hero__summary
    ) {
    font-weight: 450;
    line-height: 1.55;
    text-wrap: pretty;
}

@media (max-width: 760px) {
    .app-header {
        padding: 0 16px;
    }

    .header-left,
    .header-right {
        gap: 10px;
    }

    .header-centre,
    .notification-button,
    .airline-subtitle {
        display: none;
    }

    .user-menu {
        max-width: 38vw;
    }

    .app-main {
        padding: 24px 16px;
    }

    .app-sidebar {
        position: fixed;
        z-index: 90;
        inset: 72px auto 0 0;
        width: min(88vw, 320px);
        overflow-y: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-shell *,
    .app-shell *::before,
    .app-shell *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }

    .sidebar-link,
    .sidebar-toggle,
    .notification-button {
        transition: none;
    }

    .sidebar-link:hover:not([aria-current="page"]) {
        transform: none;
    }
}

.status-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: capitalize;
}

.status-pending {
    background: #fef3c7;
    color: #92400e;
}

.status-active {
    background: #dcfce7;
    color: #166534;
}

.status-inactive {
    background: #fee2e2;
    color: #991b1b;
}