/* ==========================================
   FRMS Bulk Import Styles
   Extracted from frms-system/bulk-import.html inline <style> (FRMS-062);
   white card backgrounds tokenized to var(--bg-card) so they flip in dark
   mode (FRMS-031). css/v905-theme.css is linked BEFORE this sheet.
   ========================================== */
/* FRMS token layer (FRMS-049 / Structural D) — see frms-session.css. */
:root {
    --glass-bg: var(--bg-card, #ffffff);
    --glass-border: var(--warm-border, #e2e8f0);
    --glass-highlight: var(--warm-subtle, #f8fafc);
    --text-secondary: #586576;
    --text-muted: #586576;
    --accent-blue: #2c5282;
    --accent-green: #047857;
    --accent-yellow: #8a6d1f;
    --accent-red: #c0392b;
    --gold-accent: #8a6d1f;
    --warning: #b45309;
}
        /* Quiet page header (Phase 3h): ink title + subtitle, actions right.
           The navy hero band and its inline styles are gone, so the !important
           patches this block used to need are gone with them. */
        .page-header {
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            gap: var(--spacing-md);
            flex-wrap: wrap;
            padding: 0 0 var(--spacing-md) 0;
            margin-bottom: var(--spacing-lg);
            border-bottom: 1px solid var(--warm-border);
            background: none;
        }

        .page-header-text { min-width: 0; }

        .page-header-title {
            margin: 0;
            font-size: 22px;
            font-weight: 700;
            line-height: 1.25;
            color: var(--text-heading);
        }

        .page-header-subtitle {
            margin: var(--spacing-xs) 0 0 0;
            font-size: 0.875rem;
            color: var(--text-secondary);
        }

        .page-header-actions {
            display: flex;
            gap: var(--spacing-sm);
            flex-wrap: wrap;
        }

        .formats-section { margin-bottom: var(--spacing-2xl); }

        .formats-section-title {
            margin: 0 0 var(--spacing-lg) 0;
            font-size: 1.125rem;
            font-weight: 700;
            color: var(--text-heading);
        }

        body .preview-section,
        body .results-section {
            padding: var(--spacing-lg);
            margin-bottom: var(--spacing-lg);
        }

        /* Back Button Styles */
        .page-nav {
            padding: var(--spacing-md) 0;
        }

        .back-btn {
            display: inline-flex;
            align-items: center;
            gap: var(--spacing-sm);
            padding: var(--spacing-sm) var(--spacing-md);
            background: var(--bg-secondary, #f5f0eb);
            border: 1px solid var(--warm-border, #e2e8f0);
            border-radius: var(--radius-md);
            color: var(--warm-accent, #2c5282);
            font-size: 0.875rem;
            font-weight: 500;
            text-decoration: none;
            transition: all 0.2s ease;
        }

        .back-btn:hover {
            background: var(--warm-border, #e2e8f0);
            border-color: var(--warm-accent, #2c5282);
        }

        .back-btn:focus-visible {
            outline: 2px solid var(--warm-accent, #2c5282);
            outline-offset: 2px;
        }

        /* Two-Column Import Layout */
        .import-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: var(--spacing-lg);
            margin-bottom: var(--spacing-2xl);
            align-items: stretch;
        }

        /* Compact Upload Zone — keyboard-operable role="button" (Phase 3h).
           Flat token fills replaced the brown/gold gradients. */
        .upload-zone {
            background: var(--bg-card, #ffffff);
            border: 2px dashed var(--warm-accent, #2c5282);
            border-radius: var(--radius-lg);
            padding: var(--spacing-lg) var(--spacing-xl);
            text-align: center;
            cursor: pointer;
            transition: background-color 0.2s ease, border-color 0.2s ease;
            margin-bottom: 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            min-height: 180px;
        }

        .upload-zone:hover {
            background: rgba(44, 82, 130, 0.06);
            border-color: var(--warm-accent-dark, #1e3a6e);
        }

        .upload-zone:focus-visible {
            outline: 2px solid var(--warm-accent, #2c5282);
            outline-offset: 3px;
        }

        .upload-zone.drag-over {
            background: rgba(44, 82, 130, 0.10);
            border-color: var(--warm-accent-dark, #1e3a6e);
            border-width: 3px;
        }

        /* The visual "Choose File" affordance. Not a control — the whole zone
           is the button — so it is a <span> with no tab stop of its own. */
        .upload-zone-cta {
            display: inline-block;
            align-self: center;
            padding: var(--spacing-sm) var(--spacing-lg);
            background: var(--warm-accent, #2c5282);
            color: var(--text-inverse, #ffffff);
            border-radius: var(--radius-md);
            font-size: 0.875rem;
            font-weight: 600;
        }

        .upload-zone-input { display: none; }

        .upload-zone-icon {
            color: var(--warm-accent, #2c5282);
            margin-bottom: var(--spacing-sm);
        }

        .upload-zone-title {
            font-size: 1rem;
            font-weight: 600;
            color: var(--warm-accent, #2c5282);
            margin-bottom: var(--spacing-xs);
        }

        .upload-zone-description {
            font-size: 0.8125rem;
            color: var(--text-secondary, #55627a);
            margin-bottom: var(--spacing-sm);
        }

        .upload-zone-formats {
            display: inline-block;
            align-self: center;
            padding: var(--spacing-xs) var(--spacing-md);
            background: var(--bg-tertiary, #f1f4f8);
            border-radius: var(--radius-sm);
            font-size: 0.6875rem;
            color: var(--text-secondary, #55627a);
            margin-top: var(--spacing-sm);
        }

        /* Aircraft Assignment Card (matches upload zone height) */
        .aircraft-assignment-card {
            background: var(--bg-card, #ffffff);
            border: 1px solid var(--warm-border, #e2e8f0);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-card);
            padding: var(--spacing-lg) var(--spacing-xl);
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .aircraft-assignment-card h3 {
            font-size: 1rem;
            font-weight: 600;
            color: var(--text-primary, #2c2c2c);
            margin: 0 0 var(--spacing-md) 0;
        }

        .aircraft-assignment-card .form-group {
            margin: 0;
        }

        /* The seat for the import sits under the aircraft (F-5). */
        .aircraft-assignment-card .form-group + .form-group {
            margin-top: var(--spacing-md);
        }

        .aircraft-assignment-card label {
            font-size: 0.8125rem;
            color: var(--text-secondary, #55627a);
            margin-bottom: var(--spacing-sm);
            display: block;
        }

        .aircraft-assignment-card select {
            width: 100%;
            padding: var(--spacing-sm) var(--spacing-md);
            border: 2px solid var(--warm-border, #e2e8f0);
            border-radius: var(--radius-md);
            font-size: 0.875rem;
            color: var(--text-primary, #2c2c2c);
            background: var(--bg-card, #ffffff);
            transition: border-color 0.2s ease;
        }

        .aircraft-assignment-card select:focus {
            outline: none;
            border-color: var(--warm-accent, #2c5282);
        }

        .aircraft-assignment-card small {
            font-size: 0.75rem;
            color: var(--text-muted, #9a8a7a);
            display: block;
            margin-top: var(--spacing-xs);
        }

        .format-cards {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: var(--spacing-lg);
            margin-bottom: var(--spacing-2xl);
        }

        .format-card {
            background: var(--bg-card, #ffffff);
            border-radius: var(--radius-lg);
            padding: var(--spacing-xl);
            border: 1px solid var(--warm-border, #e2e8f0);
            box-shadow: var(--shadow-card);
            transition: border-color 0.2s ease, box-shadow 0.2s ease;
            display: flex;
            flex-direction: column;
        }

        /* Template button sits flush at the card foot regardless of copy length
           (was a layout-only inline style on each of the three cards). */
        .format-card-action {
            margin-top: auto;
            padding-top: var(--spacing-md);
            width: 100%;
        }

        .format-card:hover {
            border-color: var(--warm-accent, #2c5282);
            box-shadow: var(--shadow-md, 0 4px 12px rgba(44, 82, 130, 0.1));
        }

        .format-card-header {
            display: flex;
            align-items: center;
            gap: var(--spacing-md);
            margin-bottom: var(--spacing-md);
        }

        .format-card-icon {
            font-size: 2rem;
        }

        .format-card-title {
            font-size: 1.125rem;
            font-weight: 700;
            color: var(--warm-accent, #2c5282);
            margin: 0;
        }

        .format-card-description {
            font-size: 0.875rem;
            color: var(--text-secondary, #55627a);
            margin-bottom: var(--spacing-md);
        }

        .format-card-example {
            background: var(--bg-secondary, #f5f0eb);
            padding: var(--spacing-sm);
            border-radius: var(--radius-sm);
            font-size: 0.75rem;
            font-family: var(--font-mono);
            color: var(--text-primary, #2c2c2c);
            overflow-x: auto;
            white-space: pre;
        }

        .preview-section {
            display: none;
            background: var(--bg-card, #ffffff);
            border-radius: var(--radius-lg);
            padding: var(--spacing-xl);
            margin-bottom: var(--spacing-2xl);
            border: 1px solid var(--warm-border, #e2e8f0);
            box-shadow: var(--shadow-card);
        }

        .preview-subtitle {
            color: var(--text-secondary);
            font-size: 0.875rem;
            margin: var(--spacing-xs) 0 0 0;
        }

        .preview-section.visible {
            display: block;
        }

        .preview-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: var(--spacing-md);
            flex-wrap: wrap;
            margin-bottom: var(--spacing-lg);
            padding-bottom: var(--spacing-md);
            border-bottom: 1px solid var(--warm-border, #e2e8f0);
        }

        .preview-title {
            font-size: 1.25rem;
            font-weight: 700;
            color: var(--text-primary, #2c2c2c);
            margin: 0;
        }

        .format-badge {
            display: inline-block;
            padding: 0.5rem 1rem;
            background: var(--warm-accent, #2c5282);
            color: white;
            border-radius: var(--radius-md);
            font-size: 0.875rem;
            font-weight: 600;
        }

        .preview-stats {
            display: flex;
            gap: var(--spacing-xl);
            margin-bottom: var(--spacing-lg);
        }

        .preview-stat {
            display: flex;
            flex-direction: column;
        }

        .preview-stat-value {
            font-size: 2rem;
            font-weight: 700;
            color: var(--text-heading);
            font-family: var(--font-mono);
            font-feature-settings: 'tnum';
        }

        .preview-stat-label {
            font-size: 11px;
            font-weight: 600;
            color: var(--ink-label);
            text-transform: uppercase;
            letter-spacing: 0.09em;
        }

        .preview-table-container {
            max-height: 400px;
            overflow-y: auto;
            overflow-x: auto;
            border: 1px solid var(--warm-border, #e2e8f0);
            border-radius: var(--radius-md);
        }

        .preview-table {
            width: 100%;
            border-collapse: collapse;
        }

        .preview-table {
            min-width: 620px;
        }

        .preview-table th {
            position: sticky;
            top: 0;
            background: var(--warm-subtle, #f8fafc);
            padding: var(--spacing-sm) var(--spacing-md);
            text-align: left;
            font-size: 0.75rem;
            font-weight: 600;
            color: var(--text-primary, #2c2c2c);
            text-transform: uppercase;
            letter-spacing: 0.05em;
            border-bottom: 1px solid var(--warm-border, #e2e8f0);
        }

        .preview-table td {
            padding: var(--spacing-sm) var(--spacing-md);
            font-size: 0.875rem;
            border-bottom: 1px solid var(--warm-border, #e2e8f0);
        }

        .preview-table tr:hover {
            background: var(--bg-secondary, #f5f0eb);
        }

        .error-section {
            display: none;
            background: var(--bad-bg);
            border-left: 3px solid var(--bad-ink);
            border-radius: var(--radius-md);
            padding: var(--spacing-lg);
            margin-bottom: var(--spacing-2xl);
        }

        .error-section.visible {
            display: block;
        }

        .error-title {
            font-size: 1rem;
            font-weight: 700;
            color: var(--bad-ink);
            margin-bottom: var(--spacing-sm);
        }

        .error-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .error-list li {
            padding: var(--spacing-xs) 0;
            color: var(--text-primary, #2c2c2c);
            font-size: 0.875rem;
        }

        .results-section {
            display: none;
            background: var(--ok-bg);
            border-left: 3px solid var(--ok-ink);
            border-radius: var(--radius-md);
            padding: var(--spacing-lg);
            margin-bottom: var(--spacing-2xl);
        }

        .results-section.visible {
            display: block;
        }

        .results-title {
            font-size: 1.125rem;
            font-weight: 700;
            color: var(--ok-ink);
            margin-bottom: var(--spacing-md);
        }

        .results-note {
            color: var(--text-primary, #2c2c2c);
            font-size: 0.875rem;
            margin-bottom: var(--spacing-lg);
        }

        .results-summary {
            display: flex;
            gap: var(--spacing-xl);
            margin-bottom: var(--spacing-md);
        }

        .results-stat {
            display: flex;
            flex-direction: column;
        }

        .results-stat-value {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--text-heading);
            font-family: var(--font-mono);
            font-feature-settings: 'tnum';
        }

        .results-stat-label {
            font-size: 0.875rem;
            color: var(--text-primary, #2c2c2c);
        }

        .action-buttons {
            display: flex;
            gap: var(--spacing-md);
            justify-content: center;
            margin-top: var(--spacing-xl);
        }

        /* Mobile Responsive */
        @media (max-width: 768px) {
            .import-row {
                grid-template-columns: 1fr;
            }

            .upload-zone {
                padding: var(--spacing-md) var(--spacing-lg);
                min-height: 140px;
            }

            .aircraft-assignment-card {
                padding: var(--spacing-md) var(--spacing-lg);
            }

            .format-cards {
                grid-template-columns: 1fr;
            }

            .preview-stats,
            .results-summary {
                flex-direction: column;
                gap: var(--spacing-md);
            }

            .action-buttons {
                flex-direction: column;
            }

            .page-header {
                align-items: flex-start;
            }

            .format-card,
            .preview-section {
                padding: var(--spacing-lg);
            }

            .upload-zone {
                padding-left: var(--spacing-md);
                padding-right: var(--spacing-md);
            }
        }

/* FRMS-051: honour prefers-reduced-motion for ALL FRMS animation/transition
   (pulse-critical, fadeIn, spinner, transform hovers) — not just the
   skeleton. Blanket override, scoped to this FRMS sheet. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}