/* ==========================================================================
   Aviation Manual Typography & Global Design System
   ========================================================================== */

:root {
    --font-sans:
        "Pretendard Variable",
        Pretendard,
        "Noto Sans KR",
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    --font-mono:
        "JetBrains Mono",
        "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        monospace;

    --aviation-navy: #0f172a;
    --aviation-blue: #1e40af;
    --aviation-blue-hover: #1d4ed8;
    --aviation-sky: #0ea5e9;

    --aviation-teal: #0f766e;
    --aviation-green: #15803d;
    --aviation-amber: #b45309;
    --aviation-red: #be123c;

    --surface-page: #f4f7fb;
    --surface-card: #ffffff;
    --surface-soft: #f8fafc;
    --surface-blue: #eff6ff;

    --text-primary: #0f172a;
    --text-body: #334155;
    --text-muted: #64748b;
    --text-soft: #94a3b8;

    --border-soft: #e2e8f0;
    --border-strong: #cbd5e1;

    --text-xs: 0.72rem;
    --text-sm: 0.8rem;
    --text-base: 0.9rem;
    --text-md: 1rem;
    --text-lg: 1.15rem;
    --text-xl: 1.45rem;
    --text-2xl: 1.8rem;

    --line-tight: 1.25;
    --line-normal: 1.55;
    --line-relaxed: 1.7;

    /* Structural aliases used by page-specific styles. */
    --app-primary: var(--aviation-blue);
    --app-danger: var(--aviation-red);
    --app-success: var(--aviation-green);
    --app-warning: var(--aviation-amber);
    --app-text: var(--text-primary);
    --app-muted: var(--text-muted);
    --app-border: var(--border-soft);

    --safe-area-top: env(safe-area-inset-top, 0px);
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --app-viewport-height: 100dvh;

    --navbar-height: 4.25rem;
    --bottom-nav-height: 4.25rem;
    --page-edge-gap: 1rem;
    --container-x: var(--page-gutter, 1rem);

    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.25rem;
    --card-radius: var(--radius-md);
    --card-padding: clamp(1rem, 2vw, 1.5rem);

    --font-base: var(--text-base);
    --font-small: var(--text-sm);
    --font-xs: var(--text-xs);
    --title-sm: var(--text-md);
    --title-md: var(--text-lg);
    --mobile-font: var(--font-base);
    --mobile-small: var(--font-small);
    --mobile-title: var(--title-sm);

    --button-height: 2.75rem;
    --input-height: 2.75rem;
    --touch-min: 2.75rem;
    --search-page-edge-gap: var(--page-edge-gap);

    --app-shadow-lg: 0 1.25rem 3.5rem rgba(15, 23, 42, 0.17);
    --app-inset-highlight: inset 0 0.0625rem 0.0625rem rgba(255, 255, 255, 0.96);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    font-family: var(--font-sans);
    font-size: 16px;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    min-height: 100vh;
    min-height: var(--app-viewport-height);
    margin: 0;
    padding-top: calc(var(--navbar-height) + var(--safe-area-top));
    color: var(--text-body);
    background:
        linear-gradient(
            180deg,
            #e2e8f0 0%,
            #cbd5e1 55%,
            #b8c3d1 100%
        );
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--line-normal);
    letter-spacing: -0.012em;
    overflow-x: hidden;
}

img,
svg,
canvas,
video,
iframe {
    max-width: 100%;
}

button,
input,
select,
textarea {
    font: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--text-primary);
    font-weight: 800;
    letter-spacing: -0.025em;
}

p,
li,
td,
th,
label,
.form-text,
.text-muted {
    line-height: var(--line-normal);
}

code,
pre,
kbd,
samp,
.fault-code,
.ata-code,
.manual-reference,
.part-number,
.page-number,
.task-number,
.mel-number,
.fim-reference,
.amm-reference,
.ipc-reference,
.dispatch-code,
.revision-number {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

code,
.fault-code,
.ata-code,
.manual-reference,
.part-number,
.page-number,
.task-number,
.mel-number,
.dispatch-code {
    overflow-wrap: anywhere;
}
/* ==========================================================================
   Global Spacing System
   ========================================================================== */

:root {
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;

    --page-gutter: clamp(1rem, 2.5vw, 2rem);
    --section-gap: clamp(1.5rem, 3vw, 2.5rem);
    --card-gap: clamp(0.875rem, 2vw, 1.25rem);
    --content-gap: clamp(0.75rem, 1.5vw, 1rem);

    --container-home: 87.5rem;
    --container-workspace: 80rem;
    --container-detail: 76rem;
    --container-viewer: 112.5rem;
    --container-form: 48rem;
    --container-login: 31.25rem;
}

.app-main {
    min-height: calc(
        var(--app-viewport-height) -
            var(--navbar-height) -
            var(--safe-area-top)
    );
    padding-top: var(--page-edge-gap);
    padding-bottom: var(--page-edge-gap);
}

.app-container {
    width: min(calc(100% - (var(--page-gutter) * 2)), var(--container-workspace));
    margin-inline: auto;
}

/* ==========================================================================
   Application shell
   ========================================================================== */

.app-navbar {
    position: fixed;
    inset: 0 0 auto;
    z-index: 1050;
    width: 100%;
    height: calc(var(--navbar-height) + var(--safe-area-top));
    display: flex;
    align-items: flex-end;
    padding: var(--safe-area-top) 0 0;
}

.app-navbar-container {
    width: 100%;
    height: var(--navbar-height);
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.5rem;
    padding-inline: clamp(0.75rem, 2.5vw, 1.5rem);
}

.app-brand {
    flex: 0 0 auto;
    font-size: clamp(0.9rem, 1.6vw, 1.1rem);
    font-weight: 900;
    text-decoration: none;
    white-space: nowrap;
}

.app-revision-pill {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin-right: auto;
    overflow: hidden;
    white-space: nowrap;
}

.app-navbar-container > .d-flex {
    min-width: 0;
    flex: 0 1 auto;
    flex-wrap: nowrap;
}

.app-user-name {
    max-width: clamp(5.5rem, 14vw, 10rem);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-bottom-nav {
    display: none !important;
    position: fixed;
    inset: auto 0 0;
    z-index: 1040;
    width: 100%;
    height: calc(var(--bottom-nav-height) + var(--safe-area-bottom));
    margin: 0;
    padding: 0 0 var(--safe-area-bottom);
}

.mobile-nav-item {
    min-width: 0;
    height: var(--bottom-nav-height);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.125rem;
    text-align: center;
    text-decoration: none;
}

.mobile-nav-icon {
    font-size: 1.25rem;
    line-height: 1;
}

.mobile-nav-text {
    font-size: 0.72rem;
    line-height: 1;
}

/* ==========================================================================
   Global loading overlay
   ========================================================================== */

.global-loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    padding: 1rem;
    background: rgba(248, 250, 252, 0.78);
    backdrop-filter: blur(0.875rem) saturate(170%);
    -webkit-backdrop-filter: blur(0.875rem) saturate(170%);
}

.global-loading-overlay.d-none {
    display: none !important;
}

.loading-box {
    width: min(88vw, 18rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    text-align: center;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-xl);
    box-shadow: var(--app-shadow-lg);
}

.loading-title {
    margin-top: 0.875rem;
    color: var(--text-primary);
    font-size: 0.96rem;
    font-weight: 900;
}

.loading-message {
    margin-top: 0.25rem;
    color: var(--text-muted);
    font-size: var(--text-sm);
    line-height: 1.45;
}

@media (max-width: 48rem) {
    :root {
        --navbar-height: 4rem;
        --bottom-nav-height: 4rem;
        --page-gutter: 0.75rem;
        --page-edge-gap: 0.75rem;
    }

    body:not(.pdf-viewer-page) {
        padding-bottom: calc(
            var(--bottom-nav-height) + var(--safe-area-bottom)
        );
    }

    .app-main {
        min-height: calc(
            var(--app-viewport-height) -
                var(--navbar-height) -
                var(--safe-area-top) -
                var(--bottom-nav-height) -
                var(--safe-area-bottom)
        );
        padding-top: var(--page-edge-gap);
        padding-bottom: var(--page-edge-gap);
    }

    .app-navbar-container {
        gap: 0.375rem;
        padding-inline: 0.75rem;
    }

    .app-brand {
        font-size: 0.9rem;
    }

    .app-revision-pill {
        max-width: 7.5rem;
    }

    .app-revision-date,
    .app-created-date,
    .app-admin-btn,
    .app-logout-btn {
        display: none !important;
    }

    .app-navbar-container > .d-flex {
        margin-left: auto;
        gap: 0.375rem !important;
    }

    .app-user-name {
        max-width: 5.5rem;
        min-height: 2rem;
        height: 2rem;
        padding-inline: 0.625rem;
        font-size: 0.75rem;
    }

    .mobile-bottom-nav {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    body:not(.pdf-viewer-page) .app-main > .app-container {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
}

@media (min-width: 48.0625rem) {
    .mobile-bottom-nav {
        display: none !important;
    }
}

body.home-page .app-container {
    width: min(calc(100% - (var(--page-gutter) * 2)), var(--container-home));
}

body.dispatch-search-page .app-container,
body.dispatch-detail-page .app-container,
body.manual-search-page .app-container,
body.list-page .app-container {
    width: min(calc(100% - (var(--page-gutter) * 2)), var(--container-workspace));
}

body.detail-page .app-container,
body.aircraft-manual-detail-page .app-container,
body.chapter-page .app-container {
    width: min(calc(100% - (var(--page-gutter) * 2)), var(--container-detail));
}

body.form-page .app-container,
body.dispatch-form-page .app-container,
body.dispatch-csv-upload-page .app-container,
body.delete-confirm-page .app-container {
    width: min(calc(100% - (var(--page-gutter) * 2)), var(--container-form));
}

body.login-page .app-container {
    width: min(calc(100% - (var(--page-gutter) * 2)), var(--container-login));
}

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

.page-hero {
    margin-bottom: var(--section-gap);
}

.manual-section,
.portal-section,
.dispatch-section,
.search-section,
.result-section,
.calculator-section {
    margin-bottom: var(--section-gap);
}

.row,
.portal-grid,
.manual-grid,
.dispatch-grid,
.result-grid {
    --bs-gutter-x: var(--card-gap);
    --bs-gutter-y: var(--card-gap);
}

.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: clamp(1rem, 2vw, 1.5rem);
}

.card-button-group,
.page-actions,
.form-actions,
.viewer-actions {
    gap: var(--space-2);
}

.section-header {
    margin-bottom: var(--space-5);
}

.form-group,
.mb-section {
    margin-bottom: var(--space-5);
}