/* static/css/portal_components.css
   Premium reusable components for the Manual Portal.
   Load order:
   base.css -> portal_components.css -> page CSS -> mobile_override.css
*/

/* =========================================================
   Common Page Shell
========================================================= */

body.home-page .app-main,
body.detail-page .app-main,
body.aircraft-manual-detail-page .app-main,
body.form-page .app-main,
body.list-page .app-main,
body.chapter-page .app-main,
body.delete-confirm-page .app-main,
body.dispatch-search-page .app-main,
body.dispatch-detail-page .app-main,
body.dispatch-form-page .app-main,
body.dispatch-csv-upload-page .app-main,
body.manual-search-page .app-main,
body.calculator-page .app-main {
    min-height: auto;
}

body.home-page .app-container,
body.detail-page .app-container,
body.aircraft-manual-detail-page .app-container,
body.form-page .app-container,
body.list-page .app-container,
body.chapter-page .app-container,
body.delete-confirm-page .app-container,
body.dispatch-search-page .app-container,
body.dispatch-detail-page .app-container,
body.dispatch-form-page .app-container,
body.dispatch-csv-upload-page .app-container,
body.manual-search-page .app-container,
body.calculator-page .app-container {
    padding-bottom: var(--page-edge-gap);
}

/* =========================================================
   Premium Card Foundation
========================================================= */

.portal-card,
.portal-detail-card,
.manual-group-card,
.candidate-card,
.portal-list-card,
.delete-card,
.dispatch-ref-card,
.mel-result-card,
.dispatch-search-card,
.dispatch-detail-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.985),
            rgba(248, 250, 252, 0.92)
        );

    border: 1px solid rgba(148, 163, 184, 0.34);
    border-radius: var(--card-radius);

    box-shadow:
        0 0.875rem 2rem rgba(15, 23, 42, 0.10),
        0 0.125rem 0.375rem rgba(15, 23, 42, 0.05),
        inset 0 0.0625rem 0 rgba(255, 255, 255, 0.98);

    backdrop-filter: blur(1.5rem) saturate(180%);
    -webkit-backdrop-filter: blur(1.5rem) saturate(180%);

    transition:
        transform 170ms ease,
        box-shadow 170ms ease,
        border-color 170ms ease;
}

.portal-card::after,
.portal-detail-card::after,
.manual-group-card::after,
.candidate-card::after,
.portal-list-card::after,
.delete-card::after,
.dispatch-ref-card::after,
.mel-result-card::after,
.dispatch-search-card::after,
.dispatch-detail-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;

    background:
        radial-gradient(
            circle at 8% 0%,
            rgba(255, 255, 255, 0.78),
            transparent 34%
        );
}

.portal-card:hover,
.portal-detail-card:not(.portal-detail-empty-card):hover,
.manual-group-card:hover,
.candidate-card:hover,
.portal-list-card:hover,
.dispatch-ref-card:hover,
.mel-result-card:hover,
.dispatch-search-card:hover {
    transform: translateY(-0.125rem);
    border-color: rgba(96, 165, 250, 0.42);
    box-shadow:
        0 1.25rem 3rem rgba(15, 23, 42, 0.14),
        0 0.25rem 0.75rem rgba(15, 23, 42, 0.06),
        inset 0 0.0625rem 0 rgba(255, 255, 255, 0.98);
}

.portal-card .card-body,
.portal-detail-card .card-body,
.manual-group-card .card-body,
.candidate-card .card-body,
.portal-list-card .card-body,
.dispatch-search-card .card-body,
.dispatch-detail-card .card-body,
.delete-card .card-body {
    position: relative;
    z-index: 1;
    padding: var(--card-padding);
}

/* Default top accent */

.portal-card::before,
.portal-detail-card::before,
.manual-group-card::before,
.candidate-card::before,
.portal-list-card::before,
.dispatch-ref-card::before,
.mel-result-card::before,
.dispatch-search-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    z-index: 2;
    height: 0.25rem;
    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            var(--app-primary),
            #6ea8fe 58%,
            rgba(110, 168, 254, 0.18)
        );
}

/* Semantic accents */

.portal-detail-card::before {
    background:
        linear-gradient(
            90deg,
            var(--app-success),
            #8ee6a6 58%,
            rgba(142, 230, 166, 0.18)
        );
}

.candidate-card::before,
.dispatch-ref-card::before,
.mel-result-card::before {
    background:
        linear-gradient(
            90deg,
            var(--app-warning),
            #ffe680 58%,
            rgba(255, 230, 128, 0.18)
        );
}

.delete-card::before {
    background:
        linear-gradient(
            90deg,
            var(--app-danger),
            #ff7a72 58%,
            rgba(255, 122, 114, 0.18)
        );
}

/* =========================================================
   Page Hero
========================================================= */

.page-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.25rem;

    margin-top: var(--page-edge-gap);
    padding: clamp(1.25rem, 2.6vw, 2rem);

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.985),
            rgba(247, 250, 255, 0.90)
        );

    border: 1px solid rgba(148, 163, 184, 0.34);
    border-radius: var(--radius-xl);

    box-shadow:
        0 1.25rem 3.25rem rgba(15, 23, 42, 0.13),
        0 0.125rem 0.5rem rgba(15, 23, 42, 0.05),
        inset 0 0.0625rem 0 rgba(255, 255, 255, 0.98);

    backdrop-filter: blur(1.75rem) saturate(190%);
    -webkit-backdrop-filter: blur(1.75rem) saturate(190%);
}

.page-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;

    background:
        radial-gradient(
            circle at 8% 0%,
            rgba(0, 122, 255, 0.16),
            transparent 34%
        ),
        radial-gradient(
            circle at 92% 10%,
            rgba(175, 82, 222, 0.10),
            transparent 31%
        );
}

.page-hero::after {
    content: "";
    position: absolute;
    top: -4rem;
    right: -3rem;
    z-index: -1;

    width: 11rem;
    height: 11rem;
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.52);
    filter: blur(0.25rem);
    pointer-events: none;
}

.page-hero > div:first-child {
    min-width: 0;
}

.page-eyebrow {
    margin: 0 0 0.25rem;

    color: var(--app-primary);

    font-size: var(--font-xs);
    font-weight: 900;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.page-title {
    margin: 0;

    color: var(--app-text);

    font-size: clamp(var(--title-md), 2.2vw, 1.75rem);
    font-weight: 900;
    letter-spacing: -0.025em;
    line-height: 1.15;
}

.page-subtitle {
    max-width: 48rem;
    margin: 0.4rem 0 0;

    color: var(--app-muted);

    font-size: 0.84rem;
    line-height: 1.55;
}

.page-actions {
    flex-shrink: 0;
    margin-left: auto;

    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.page-actions:empty {
    display: none;
}

/* =========================================================
   Common Page Sections
========================================================= */

.manual-section,
.portal-section,
.dispatch-section,
.search-section,
.result-section,
.calculator-section {
    position: relative;
    overflow: hidden;

    padding: clamp(0.875rem, 2vw, 1.125rem);
    margin-bottom: 1rem;

    background:
        linear-gradient(
            180deg,
            rgba(248, 250, 252, 0.90),
            rgba(241, 245, 249, 0.76)
        );

    border: 1px solid rgba(203, 213, 225, 0.74);
    border-radius: var(--radius-xl);

    box-shadow:
        inset 0 0.0625rem 0 rgba(255, 255, 255, 0.92),
        0 0.625rem 1.5rem rgba(15, 23, 42, 0.055);
}

.manual-section::before,
.portal-section::before,
.dispatch-section::before,
.search-section::before,
.result-section::before,
.calculator-section::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.95),
            transparent
        );
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;

    padding-bottom: 0.75rem;
    margin-bottom: 1rem;

    border-bottom: 1px solid rgba(203, 213, 225, 0.72);
}

.section-title {
    margin: 0;

    color: var(--app-text);

    font-size: var(--title-sm);
    font-weight: 900;
    letter-spacing: -0.015em;
    line-height: 1.25;
}

.section-description {
    margin: 0.25rem 0 0;

    color: var(--app-muted);

    font-size: var(--font-base);
    line-height: 1.5;
}

/* =========================================================
   Badges / Pills
========================================================= */

.manual-badge,
.portal-list-badge,
.portal-detail-pill,
.dispatch-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;

    min-height: 1.75rem;
    padding: 0.3125rem 0.625rem;

    color: #334155;
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.96),
            rgba(241, 245, 249, 0.90)
        );

    border: 1px solid rgba(148, 163, 184, 0.34);
    border-radius: 999rem;

    font-size: 0.68rem;
    font-weight: 850;
    line-height: 1.15;

    box-shadow:
        0 0.25rem 0.625rem rgba(15, 23, 42, 0.055),
        inset 0 0.0625rem 0 rgba(255, 255, 255, 0.96);
}

/* =========================================================
   Common Information Boxes
========================================================= */

.dispatch-mini-grid div,
.manual-group-info div,
.dispatch-info-item,
.dispatch-reference-item,
.portal-detail-info > div,
.delete-info div {
    position: relative;

    background:
        linear-gradient(
            180deg,
            rgba(248, 250, 252, 0.98),
            rgba(241, 245, 249, 0.90)
        );

    border: 1px solid rgba(203, 213, 225, 0.78);
    border-radius: var(--radius-sm);

    box-shadow:
        inset 0 0.0625rem 0 rgba(255, 255, 255, 0.94),
        0 0.25rem 0.625rem rgba(15, 23, 42, 0.04);
}

/* =========================================================
   Common Buttons
========================================================= */

.app-action-btn,
.app-card-btn {
    min-height: var(--button-height);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;

    padding-inline: 1rem;
    border-radius: 999rem;

    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;

    box-shadow:
        0 0.375rem 0.875rem rgba(15, 23, 42, 0.07),
        inset 0 0.0625rem 0 rgba(255, 255, 255, 0.74);

    transition:
        transform 150ms ease,
        box-shadow 150ms ease,
        filter 150ms ease;
}

.app-action-btn:hover,
.app-card-btn:hover {
    transform: translateY(-0.0625rem);
    box-shadow:
        0 0.625rem 1.25rem rgba(15, 23, 42, 0.11),
        inset 0 0.0625rem 0 rgba(255, 255, 255, 0.78);
}

.app-action-btn:active,
.app-card-btn:active {
    transform: translateY(0);
    box-shadow:
        0 0.25rem 0.625rem rgba(15, 23, 42, 0.08),
        inset 0 0.0625rem 0 rgba(255, 255, 255, 0.65);
}

/* =========================================================
   Alerts
========================================================= */

.app-alert {
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: var(--radius-md);

    box-shadow:
        0 0.625rem 1.5rem rgba(15, 23, 42, 0.075),
        inset 0 0.0625rem 0 rgba(255, 255, 255, 0.92);

    backdrop-filter: blur(1rem) saturate(170%);
    -webkit-backdrop-filter: blur(1rem) saturate(170%);
}

/* =========================================================
   Keyboard Focus
========================================================= */

.app-action-btn:focus-visible,
.app-card-btn:focus-visible,
.portal-card a:focus-visible,
.portal-card button:focus-visible {
    outline: 0.1875rem solid rgba(0, 122, 255, 0.24);
    outline-offset: 0.1875rem;
}

/* =========================================================
   Responsive
========================================================= */

@media (max-width: 48rem) {
    .page-hero {
        align-items: stretch;
        flex-direction: column;
        padding: 1.125rem;
    }

    .page-actions {
        width: 100%;
        margin-left: 0;
        justify-content: stretch;
    }

    .page-actions .btn,
    .page-actions .app-action-btn {
        flex: 1 1 auto;
        min-height: var(--touch-min);
    }

    .section-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.5rem;
    }

    .portal-card:hover,
    .portal-detail-card:not(.portal-detail-empty-card):hover,
    .manual-group-card:hover,
    .candidate-card:hover,
    .portal-list-card:hover,
    .dispatch-ref-card:hover,
    .mel-result-card:hover,
    .dispatch-search-card:hover {
        transform: none;
    }
}

/* =========================================================
   Reduced Motion
========================================================= */

@media (prefers-reduced-motion: reduce) {
    .portal-card,
    .portal-detail-card,
    .manual-group-card,
    .candidate-card,
    .portal-list-card,
    .delete-card,
    .dispatch-ref-card,
    .mel-result-card,
    .dispatch-search-card,
    .dispatch-detail-card,
    .app-action-btn,
    .app-card-btn {
        transition: none;
    }
}
/* ==========================================================================
   Modern Aviation Theme Enhancement
   Source concept: deep aviation blue, restrained emerald/crimson accents,
   clean panel shadows, structured status badges and compact controls.
   ========================================================================== */

:root {
    /* Existing --app-* tokens remain the source of truth. */
    --premium-primary: #1e40af;
    --premium-primary-hover: #1d4ed8;
    --premium-primary-light: #eff6ff;

    --premium-success: #0d9488;
    --premium-success-light: #f0fdfa;

    --premium-danger: #e11d48;
    --premium-danger-light: #fff1f2;

    --premium-dark: #0f172a;
    --premium-muted: #64748b;
    --premium-line: #e2e8f0;
    --premium-line-strong: #cbd5e1;

    --premium-radius-control: 0.5rem;
    --premium-radius-panel: 1rem;

    --premium-shadow-subtle:
        0 0.0625rem 0.125rem rgba(15, 23, 42, 0.05);

    --premium-shadow-card:
        0 0.25rem 1.25rem -0.125rem rgba(15, 23, 42, 0.06),
        0 0.125rem 0.5rem -0.0625rem rgba(15, 23, 42, 0.04);

    --premium-shadow-hover:
        0 1.25rem 1.5625rem -0.3125rem rgba(15, 23, 42, 0.10),
        0 0.625rem 0.625rem -0.3125rem rgba(15, 23, 42, 0.04);

    --premium-transition:
        180ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* =========================================================
   Navbar Refinement
========================================================= */

.app-navbar {
    background: rgba(15, 23, 42, 0.95) !important;
    border-bottom-color: rgba(255, 255, 255, 0.08);
    box-shadow: var(--premium-shadow-subtle);
    backdrop-filter: blur(0.75rem) saturate(150%);
    -webkit-backdrop-filter: blur(0.75rem) saturate(150%);
}

.app-brand {
    background: linear-gradient(135deg, #ffffff 0%, #93c5fd 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.app-revision-pill {
    color: #94a3b8;
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: none;
}

.app-revision-date {
    color: #cbd5e1;
}

.app-created-date {
    color: #38bdf8;
}

.app-user-name {
    color: #38bdf8 !important;
    background: rgba(56, 189, 248, 0.06) !important;
    border-color: rgba(56, 189, 248, 0.30) !important;
}

/* =========================================================
   Cleaner Hero
========================================================= */

.page-hero {
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.99),
            rgba(248, 250, 252, 0.96)
        );

    border-color: var(--premium-line);
    border-radius: var(--premium-radius-panel);
    box-shadow: var(--premium-shadow-subtle);
}

.page-hero::before {
    background:
        radial-gradient(
            circle at 4% 0%,
            rgba(30, 64, 175, 0.075),
            transparent 33%
        ),
        radial-gradient(
            circle at 96% 12%,
            rgba(13, 148, 136, 0.055),
            transparent 30%
        );
}

.page-hero::after {
    opacity: 0.42;
}

.page-eyebrow {
    color: #2563eb;
    letter-spacing: 0.08em;
}

.page-title {
    color: var(--premium-dark);
    letter-spacing: -0.025em;
}

.page-subtitle {
    color: var(--premium-muted) !important;
}

/* =========================================================
   Section Header with Aviation Accent
========================================================= */

.section-header {
    position: relative;
    align-items: center;

    padding: 0.125rem 0 0.125rem 0.875rem;
    margin-bottom: 1.25rem;

    border-bottom: 0;
    border-left: 0.25rem solid var(--premium-primary);
}

.section-title {
    color: var(--premium-dark);
    font-size: clamp(1.05rem, 1.7vw, 1.2rem);
    font-weight: 800;
}

.section-description {
    color: var(--premium-muted);
    font-size: 0.85rem;
}

/* Keep centered home section headings while retaining the accent. */
body.home-page .section-header {
    justify-content: center;
    padding-left: 0;
    text-align: center;
    border-left: 0;
}

body.home-page .section-header::after {
    content: "";
    position: absolute;
    bottom: -0.5rem;
    left: 50%;
    width: 2.75rem;
    height: 0.1875rem;
    border-radius: 999rem;
    background: var(--premium-primary);
    transform: translateX(-50%);
}

/* =========================================================
   Clean Premium Cards
========================================================= */

.portal-card,
.portal-detail-card,
.manual-group-card,
.candidate-card,
.portal-list-card,
.delete-card,
.dispatch-ref-card,
.mel-result-card,
.dispatch-search-card,
.dispatch-detail-card {
    background: #ffffff;
    border-color: var(--premium-line);
    border-radius: var(--premium-radius-panel);
    box-shadow: var(--premium-shadow-card);

    transition:
        transform var(--premium-transition),
        box-shadow var(--premium-transition),
        border-color var(--premium-transition);
}

.portal-card::after,
.portal-detail-card::after,
.manual-group-card::after,
.candidate-card::after,
.portal-list-card::after,
.delete-card::after,
.dispatch-ref-card::after,
.mel-result-card::after,
.dispatch-search-card::after,
.dispatch-detail-card::after {
    display: none;
}

.portal-card:hover,
.portal-detail-card:not(.portal-detail-empty-card):hover,
.manual-group-card:hover,
.candidate-card:hover,
.portal-list-card:hover,
.dispatch-ref-card:hover,
.mel-result-card:hover,
.dispatch-search-card:hover {
    transform: translateY(-0.25rem);
    border-color: var(--premium-line-strong);
    box-shadow: var(--premium-shadow-hover);
}

/* Home aircraft cards */
body.home-page .boeing-card,
body.home-page .airbus-card {
    background: #ffffff;
    border-color: var(--premium-line);
    border-radius: var(--premium-radius-panel);
    box-shadow: var(--premium-shadow-card);
}

body.home-page .boeing-card:hover,
body.home-page .airbus-card:hover {
    transform: translateY(-0.25rem);
    border-color: var(--premium-line-strong);
    box-shadow: var(--premium-shadow-hover);
}

.aircraft-card-header {
    padding-bottom: 1rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px dashed var(--premium-line);
}

.aircraft-maker {
    color: var(--premium-primary);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
}

.airbus-maker {
    color: var(--premium-success);
}

.aircraft-title {
    color: var(--premium-dark);
    font-size: clamp(1.12rem, 1.8vw, 1.35rem);
    font-weight: 850;
}

/* =========================================================
   Aircraft Pills and Manual Badge Grid
========================================================= */

.aircraft-type-pill {
    color: var(--premium-primary);
    background: var(--premium-primary-light);
    border-color: rgba(30, 64, 175, 0.12);
    border-radius: 999rem;
}

.airbus-pill {
    color: var(--premium-success);
    background: var(--premium-success-light);
    border-color: rgba(13, 148, 136, 0.12);
}

.manual-badge-wrap {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.375rem;
    margin-bottom: 1.25rem;
}

.manual-badge-wrap .manual-badge {
    width: 100%;
    min-height: 2.125rem;
    padding: 0.5rem 0.25rem !important;

    border: 1px solid transparent !important;
    border-radius: var(--premium-radius-control) !important;

    font-size: 0.72rem !important;
    font-weight: 750 !important;

    box-shadow: none;
}

.bg-primary.manual-badge {
    color: #2563eb !important;
    background: var(--premium-primary-light) !important;
    border-color: rgba(37, 99, 235, 0.12) !important;
}

.bg-success.manual-badge {
    color: var(--premium-success) !important;
    background: var(--premium-success-light) !important;
    border-color: rgba(13, 148, 136, 0.12) !important;
}

.bg-danger.manual-badge {
    color: var(--premium-danger) !important;
    background: var(--premium-danger-light) !important;
    border-color: rgba(225, 29, 72, 0.12) !important;
}

.bg-dark.manual-badge {
    color: #334155 !important;
    background: #f1f5f9 !important;
    border-color: var(--premium-line-strong) !important;
}

.bg-info.manual-badge {
    color: #065f46 !important;
    background: #ecfdf5 !important;
    border-color: rgba(6, 95, 70, 0.10) !important;
}

.bg-secondary.manual-badge {
    color: #94a3b8 !important;
    background: #f8fafc !important;
    border-color: var(--premium-line) !important;
    font-weight: 600 !important;
}

.manual-card-note {
    min-height: 3.625rem;
    padding: 0.625rem 0.75rem;
    margin-bottom: 1.5rem;

    color: var(--premium-muted);
    background: #f8fafc;
    border: 1px solid rgba(226, 232, 240, 0.78);
    border-radius: var(--premium-radius-control);

    font-size: 0.8rem;
    line-height: 1.5;
}

/* =========================================================
   Compact Modern Buttons
========================================================= */

.app-action-btn,
.app-card-btn {
    border-radius: var(--premium-radius-control);
    box-shadow: none;

    font-size: 0.84rem;
    font-weight: 700;

    transition:
        transform var(--premium-transition),
        background-color var(--premium-transition),
        border-color var(--premium-transition),
        color var(--premium-transition),
        box-shadow var(--premium-transition);
}

.app-action-btn:hover,
.app-card-btn:hover {
    transform: translateY(-0.0625rem);
    box-shadow: 0 0.375rem 0.875rem rgba(15, 23, 42, 0.08);
}

.btn-primary.app-action-btn,
.btn-primary.app-card-btn {
    background: var(--premium-primary);
    border-color: var(--premium-primary);
}

.btn-primary.app-action-btn:hover,
.btn-primary.app-card-btn:hover {
    background: var(--premium-primary-hover);
    border-color: var(--premium-primary-hover);
}

.btn-info.app-action-btn,
.btn-info.app-card-btn {
    color: #475569;
    background: #f1f5f9;
    border-color: var(--premium-line);
}

.btn-info.app-action-btn:hover,
.btn-info.app-card-btn:hover {
    color: #1e293b;
    background: #e2e8f0;
    border-color: var(--premium-line-strong);
}

.card-button-group {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

/* =========================================================
   Mobile Bottom Navigation
========================================================= */

.mobile-bottom-nav {
    background: rgba(255, 255, 255, 0.88) !important;
    border-top-color: rgba(226, 232, 240, 0.88);
    box-shadow: 0 -0.25rem 0.75rem rgba(15, 23, 42, 0.035);
    backdrop-filter: blur(1rem) saturate(165%);
    -webkit-backdrop-filter: blur(1rem) saturate(165%);
}

.mobile-nav-item {
    color: #94a3b8;
    font-size: 0.68rem;
    font-weight: 600;
    text-decoration: none;
}

.mobile-nav-item.active {
    color: #2563eb !important;
    font-weight: 800;
}

.mobile-nav-icon {
    font-size: 1.3rem;
}

/* =========================================================
   Responsive Adjustments
========================================================= */

@media (max-width: 48rem) {
    .manual-badge-wrap {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .portal-card:hover,
    .portal-detail-card:not(.portal-detail-empty-card):hover,
    .manual-group-card:hover,
    .candidate-card:hover,
    .portal-list-card:hover,
    .dispatch-ref-card:hover,
    .mel-result-card:hover,
    .dispatch-search-card:hover,
    body.home-page .boeing-card:hover,
    body.home-page .airbus-card:hover {
        transform: none;
    }
}

@media (max-width: 23rem) {
    .manual-badge-wrap {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (prefers-reduced-motion: reduce) {
    .portal-card,
    .portal-detail-card,
    .manual-group-card,
    .candidate-card,
    .portal-list-card,
    .delete-card,
    .dispatch-ref-card,
    .mel-result-card,
    .dispatch-search-card,
    .dispatch-detail-card,
    .boeing-card,
    .airbus-card,
    .app-action-btn,
    .app-card-btn {
        transition: none;
    }
}
/* ==========================================================================
   Aviation Manual Layout System
   ========================================================================== */

.app-container {
    width: min(calc(100% - 2rem), 90rem);
    margin-inline: auto;
}

body.pdf-viewer-page .app-container,
body.manual-pdf-viewer-page .app-container {
    width: min(calc(100% - 1rem), 112.5rem);
}

/* Typography hierarchy */

.page-title {
    color: var(--text-primary);
    font-size: clamp(1.45rem, 2.5vw, 1.9rem);
    font-weight: 850;
    line-height: var(--line-tight);
    letter-spacing: -0.035em;
}

.page-subtitle {
    max-width: 48rem;
    color: var(--text-muted);
    font-size: var(--text-base);
    line-height: 1.6;
}

.page-eyebrow {
    color: var(--aviation-blue);
    font-size: var(--text-xs);
    font-weight: 800;
    letter-spacing: 0.09em;
}

.section-title {
    color: var(--text-primary);
    font-size: var(--text-lg);
    font-weight: 800;
    letter-spacing: -0.02em;
}

.card-title,
.aircraft-title {
    color: #172033;
    font-size: 1.05rem;
    font-weight: 800;
}

.card-description,
.section-description,
.manual-card-note {
    color: var(--text-muted);
    line-height: 1.6;
}

/* Technical metadata */

.technical-meta,
.manual-meta,
.dispatch-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.75rem;
    color: var(--text-muted);
    font-size: var(--text-sm);
}

.technical-code,
.ata-code,
.fault-code,
.manual-reference,
.part-number,
.page-number,
.task-number {
    display: inline-flex;
    align-items: center;
    min-height: 1.75rem;
    padding: 0.3rem 0.55rem;
    color: var(--aviation-navy);
    background: #f1f5f9;
    border: 1px solid var(--border-soft);
    border-radius: 0.4rem;
    font-size: 0.78rem;
    font-weight: 700;
}

/* Hero */

.page-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(1rem, 2vw, 1.5rem);
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.99),
            rgba(241, 245, 249, 0.96)
        );
    border: 1px solid var(--border-soft);
    border-radius: 1rem;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 12px 30px rgba(15, 23, 42, 0.06);
}

.page-hero::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 0.3125rem;
    background:
        linear-gradient(
            180deg,
            var(--aviation-blue),
            var(--aviation-sky)
        );
}

.page-hero::after {
    content: "";
    position: absolute;
    right: -3rem;
    top: -4rem;
    width: 12rem;
    height: 12rem;
    border-radius: 50%;
    background: rgba(30, 64, 175, 0.045);
    pointer-events: none;
}

/* Cards */

.portal-card,
.portal-detail-card,
.manual-group-card,
.candidate-card,
.portal-list-card,
.dispatch-ref-card,
.mel-result-card,
.dispatch-search-card,
.dispatch-detail-card,
.delete-card {
    background: var(--surface-card);
    border: 1px solid var(--border-soft);
    border-radius: 0.875rem;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 6px 18px rgba(15, 23, 42, 0.055);
}

.portal-card::before,
.portal-detail-card::before,
.manual-group-card::before,
.candidate-card::before,
.portal-list-card::before,
.dispatch-ref-card::before,
.mel-result-card::before,
.dispatch-search-card::before {
    height: 0.1875rem;
    background: var(--aviation-blue);
}

.portal-card:hover,
.portal-detail-card:not(.portal-detail-empty-card):hover,
.manual-group-card:hover,
.candidate-card:hover,
.portal-list-card:hover,
.dispatch-ref-card:hover,
.mel-result-card:hover,
.dispatch-search-card:hover {
    transform: translateY(-0.1875rem);
    border-color: #bfdbfe;
    box-shadow:
        0 2px 5px rgba(15, 23, 42, 0.05),
        0 16px 32px rgba(15, 23, 42, 0.09);
}

/* Manual type colors */

.manual-badge--amm {
    color: #1d4ed8 !important;
    background: #eff6ff !important;
    border-color: #bfdbfe !important;
}

.manual-badge--fim {
    color: #0f766e !important;
    background: #f0fdfa !important;
    border-color: #99f6e4 !important;
}

.manual-badge--ipc {
    color: #6d28d9 !important;
    background: #f5f3ff !important;
    border-color: #ddd6fe !important;
}

.manual-badge--mel {
    color: #be123c !important;
    background: #fff1f2 !important;
    border-color: #fecdd3 !important;
}

.manual-badge--cdl {
    color: #92400e !important;
    background: #fffbeb !important;
    border-color: #fde68a !important;
}

/* Search */

.portal-search {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.625rem;
    padding: 0.625rem;
    background: #ffffff;
    border: 1px solid var(--border-soft);
    border-radius: 0.875rem;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 8px 20px rgba(15, 23, 42, 0.055);
}

.portal-search .form-control,
.portal-search .form-select {
    min-height: 2.75rem;
    border-color: transparent;
    box-shadow: none;
    font-size: 0.92rem;
}

.portal-search:focus-within {
    border-color: #93c5fd;
    box-shadow:
        0 0 0 4px rgba(37, 99, 235, 0.10),
        0 10px 24px rgba(15, 23, 42, 0.07);
}

/* Dispatch */

.dispatch-result-card {
    border-left: 0.25rem solid var(--aviation-blue);
}

.dispatch-result-card.is-primary {
    border-left-color: var(--aviation-green);
}

.dispatch-result-card.is-warning {
    border-left-color: var(--aviation-amber);
}

.dispatch-result-card.is-danger {
    border-left-color: var(--aviation-red);
}

.recommendation-score {
    color: var(--aviation-blue);
    font-family: var(--font-mono);
    font-size: 1.1rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.dispatch-reference {
    display: grid;
    grid-template-columns: 7rem minmax(0, 1fr);
    gap: 0.5rem 1rem;
    padding: 0.75rem;
    background: var(--surface-soft);
    border: 1px solid var(--border-soft);
    border-radius: 0.625rem;
}

/* Tables */

.portal-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid var(--border-soft);
    border-radius: 0.875rem;
}

.portal-table thead th {
    padding: 0.75rem 1rem;
    color: #475569;
    background: #f8fafc;
    border-bottom: 1px solid var(--border-soft);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.portal-table tbody td {
    padding: 0.8rem 1rem;
    border-bottom: 1px solid #eef2f7;
    vertical-align: middle;
}

.portal-table tbody tr:last-child td {
    border-bottom: 0;
}

.portal-table tbody tr:hover {
    background: #f8fbff;
}

/* Buttons */

.app-action-btn,
.app-card-btn {
    min-height: 2.5rem;
    padding: 0.55rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.82rem;
    font-weight: 700;
}

.btn-primary.app-action-btn,
.btn-primary.app-card-btn {
    color: #fff;
    background: var(--aviation-blue);
    border-color: var(--aviation-blue);
}

.btn-primary.app-action-btn:hover,
.btn-primary.app-card-btn:hover {
    background: var(--aviation-blue-hover);
    border-color: var(--aviation-blue-hover);
}

.btn-outline-secondary.app-action-btn,
.btn-outline-secondary.app-card-btn {
    color: #475569;
    background: #ffffff;
    border-color: var(--border-strong);
}

.btn-outline-secondary.app-action-btn:hover,
.btn-outline-secondary.app-card-btn:hover {
    color: #1e293b;
    background: #f1f5f9;
}

/* Responsive */

@media (max-width: 48rem) {
    .app-container {
        width: min(calc(100% - 1rem), 90rem);
    }

    .portal-search {
        grid-template-columns: 1fr;
    }

    .dispatch-reference {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }

    .portal-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}
/* ==========================================================================
   Responsive Aviation Layout
   ========================================================================== */

/* Hero and actions */

@media (max-width: 62rem) {
    .page-hero {
        align-items: flex-start;
        flex-direction: column;
    }

    .page-actions {
        width: 100%;
        justify-content: flex-start;
    }
}

@media (max-width: 48rem) {
    :root {
        --page-gutter: 0.75rem;
        --section-gap: 1.25rem;
        --card-gap: 0.875rem;
    }

    .app-main {
        padding-top: 4.5rem;
        padding-bottom: calc(5.25rem + env(safe-area-inset-bottom, 0px));
    }

    .app-container,
    body.home-page .app-container,
    body.dispatch-search-page .app-container,
    body.dispatch-detail-page .app-container,
    body.manual-search-page .app-container,
    body.list-page .app-container,
    body.detail-page .app-container,
    body.aircraft-manual-detail-page .app-container,
    body.chapter-page .app-container,
    body.form-page .app-container,
    body.dispatch-form-page .app-container,
    body.dispatch-csv-upload-page .app-container,
    body.delete-confirm-page .app-container,
    body.login-page .app-container {
        width: min(calc(100% - 1rem), 100%);
    }

    .page-hero {
        gap: var(--space-4);
        padding: 1.125rem;
        border-radius: 0.875rem;
    }

    .page-title {
        font-size: clamp(1.3rem, 7vw, 1.6rem);
    }

    .page-subtitle {
        font-size: 0.84rem;
    }

    .page-actions {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .page-actions .btn,
    .page-actions .app-action-btn,
    .form-actions .btn,
    .form-actions .app-action-btn {
        width: 100%;
        min-height: 2.75rem;
    }

    .section-header {
        align-items: flex-start;
        flex-direction: column;
        gap: var(--space-2);
        padding-left: 0.75rem;
    }

    .portal-card .card-body,
    .portal-detail-card .card-body,
    .manual-group-card .card-body,
    .candidate-card .card-body,
    .portal-list-card .card-body,
    .dispatch-search-card .card-body,
    .dispatch-detail-card .card-body,
    .delete-card .card-body {
        padding: 1rem;
    }

    .card-button-group {
        display: grid;
        grid-template-columns: 1fr;
    }

    .card-button-group .btn,
    .card-button-group .app-card-btn {
        width: 100%;
        min-height: 2.75rem;
    }

    .manual-badge-wrap {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem;
    }

    .manual-badge-wrap .manual-badge {
        min-height: 2.5rem;
    }

    .portal-search {
        grid-template-columns: 1fr;
        padding: 0.5rem;
    }

    .portal-search .btn {
        width: 100%;
        min-height: 2.75rem;
    }

    .dispatch-reference,
    .dispatch-mini-grid,
    .manual-group-info,
    .portal-detail-info {
        grid-template-columns: 1fr !important;
    }

    .dispatch-result-card {
        border-left-width: 0.22rem;
    }

    .technical-meta,
    .manual-meta,
    .dispatch-meta {
        align-items: stretch;
        flex-direction: column;
    }

    .technical-code,
    .ata-code,
    .fault-code,
    .manual-reference,
    .part-number,
    .page-number,
    .task-number {
        width: 100%;
        justify-content: flex-start;
    }
}

/* Very small screens */

@media (max-width: 23rem) {
    :root {
        --page-gutter: 0.5rem;
    }

    .page-hero {
        padding: 1rem;
    }

    .manual-badge-wrap {
        grid-template-columns: 1fr;
    }
}

/* Mobile table transformation */

@media (max-width: 48rem) {
    .portal-table--responsive {
        display: block;
        border: 0;
        background: transparent;
        overflow: visible;
    }

    .portal-table--responsive thead {
        display: none;
    }

    .portal-table--responsive tbody,
    .portal-table--responsive tr,
    .portal-table--responsive td {
        display: block;
        width: 100%;
    }

    .portal-table--responsive tr {
        margin-bottom: 0.875rem;
        padding: 0.875rem;
        background: #fff;
        border: 1px solid var(--border-soft);
        border-radius: 0.75rem;
        box-shadow: 0 0.25rem 0.875rem rgba(15, 23, 42, 0.05);
    }

    .portal-table--responsive td {
        display: grid;
        grid-template-columns: minmax(5.5rem, 36%) minmax(0, 1fr);
        gap: 0.75rem;
        padding: 0.5rem 0;
        border-bottom: 1px solid #eef2f7;
        white-space: normal;
    }

    .portal-table--responsive td:last-child {
        border-bottom: 0;
    }

    .portal-table--responsive td::before {
        content: attr(data-label);
        color: var(--text-muted);
        font-size: 0.72rem;
        font-weight: 800;
        letter-spacing: 0.03em;
        text-transform: uppercase;
    }
}

/* Landscape mobile */

@media (max-width: 56rem) and (orientation: landscape) {
    .app-main {
        padding-top: 4.25rem;
    }

    .page-hero {
        padding: 1rem 1.25rem;
    }

}