/* Custom overrides and additions to PatternFly */

/* Management portal — ensure text is always readable in both themes */
.pf-v5-c-page__main-section .pf-v5-c-table__td,
.pf-v5-c-page__main-section .pf-v5-c-table__th,
.pf-v5-c-page__main-section .pf-v5-c-content,
.pf-v5-c-page__main-section .pf-v5-c-form__label-text {
    color: var(--pf-v5-global--Color--100);
}
.pf-v5-c-page__main-section .pf-v5-c-breadcrumb__link {
    color: var(--pf-v5-global--link--Color);
}
.pf-v5-c-page__main-section .pf-v5-c-breadcrumb__link.pf-m-current {
    color: var(--pf-v5-global--Color--100);
}

/* Horizontal nav used as a sub-nav inside a light page section (not in the masthead).
   pf-m-horizontal defaults to white links (for dark backgrounds); override for light context. */
.pf-v5-c-page__main-section .pf-v5-c-nav.pf-m-horizontal .pf-v5-c-nav__link {
    --pf-v5-c-nav__link--Color: var(--pf-v5-global--Color--100);
    --pf-v5-c-nav__link--hover--Color: var(--pf-v5-global--Color--100);
    --pf-v5-c-nav__link--m-current--Color: var(--pf-v5-global--Color--100);
    --pf-v5-c-nav__link--after--BorderColor: var(--pf-v5-global--primary-color--100);
}

/* Alpine.js cloak */
[x-cloak] { display: none !important; }

/* Hours display emphasis */
.hours-display {
    font-size: 2rem;
    font-weight: 700;
    color: var(--pf-v5-global--primary-color--100);
}

/* Component status badges */
.status-serviceable {
    --pf-v5-c-label--m-green--BackgroundColor: var(--pf-v5-global--success-color--100);
}

.status-due {
    --pf-v5-c-label--m-orange--BackgroundColor: var(--pf-v5-global--warning-color--100);
}

.status-overdue {
    --pf-v5-c-label--m-red--BackgroundColor: var(--pf-v5-global--danger-color--100);
}

/* Card styling */
.pf-v5-c-card {
    height: 100%;
}

.pf-v5-c-card__body dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.5rem 1rem;
    margin: 0;
}

.pf-v5-c-card__body dt {
    font-weight: 600;
}

.pf-v5-c-card__body dd {
    margin: 0;
}

/* Modal backdrop styling */
.pf-v5-c-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

/* Gallery layout for cards */
.pf-l-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
}

.pf-l-gallery.pf-m-gutter {
    gap: 1.5rem;
}

/* Loading spinner */
.loading-spinner {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(0, 0, 0, 0.1);
    border-left-color: var(--pf-v5-global--primary-color--100);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Alert positioning */
.alert-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
}

/* Aircraft image container */
.aircraft-info-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: center;
}

.aircraft-image {
    flex-shrink: 0;
}

.aircraft-image img {
    max-width: 250px;
    max-height: 250px;
    width: auto;
    height: auto;
    border-radius: 4px;
    object-fit: cover;
}

.aircraft-details {
    width: 100%;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .pf-l-gallery {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   Document Grid and Viewer Styles
   ======================================== */

/* Document Grid */
.document-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1rem;
}

.document-item {
    cursor: pointer;
    border: 1px solid var(--pf-v5-global--BorderColor--100);
    border-radius: var(--pf-v5-global--BorderRadius--sm);
    overflow: hidden;
    transition: box-shadow 0.2s, transform 0.2s;
    background: var(--pf-v5-global--BackgroundColor--100);
}

.document-item:hover {
    box-shadow: var(--pf-v5-global--BoxShadow--md);
    transform: translateY(-2px);
}

.document-thumbnail {
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--pf-v5-global--BackgroundColor--200);
    display: flex;
    align-items: center;
    justify-content: center;
}

.document-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.document-placeholder {
    color: var(--pf-v5-global--disabled-color--100);
    font-size: 3rem;
}

.document-info {
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.document-name {
    font-weight: 600;
    font-size: 0.875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.document-type {
    font-size: 0.75rem;
    color: var(--pf-v5-global--Color--200);
}

/* Document Viewer Modal */
.document-viewer-modal {
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.document-viewer-body {
    flex: 1;
    overflow: auto;
    display: flex;
    flex-direction: column;
}

.document-viewer-images {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.image-counter {
    font-size: 0.875rem;
    color: var(--pf-v5-global--Color--200);
}

.viewer-image-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-height: 60vh;
}

.viewer-image {
    max-width: 100%;
    max-height: 60vh;
    object-fit: contain;
    border-radius: var(--pf-v5-global--BorderRadius--sm);
    box-shadow: var(--pf-v5-global--BoxShadow--sm);
}

.nav-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.nav-button:hover {
    background: rgba(0, 0, 0, 0.7);
}

.nav-prev {
    left: 1rem;
}

.nav-next {
    right: 1rem;
}

.image-notes {
    font-size: 0.875rem;
    color: var(--pf-v5-global--Color--200);
    font-style: italic;
    text-align: center;
    max-width: 600px;
}

/* Thumbnail Strip */
.thumbnail-strip {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding: 0.5rem;
    max-width: 100%;
}

.thumbnail {
    flex-shrink: 0;
    width: 60px;
    height: 80px;
    border: 2px solid transparent;
    border-radius: var(--pf-v5-global--BorderRadius--sm);
    overflow: hidden;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s, border-color 0.2s;
}

.thumbnail:hover {
    opacity: 0.8;
}

.thumbnail.active {
    border-color: var(--pf-v5-global--primary-color--100);
    opacity: 1;
}

.thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Stack layout for logbook */
.pf-v5-l-stack {
    display: flex;
    flex-direction: column;
}

.pf-v5-l-stack.pf-m-gutter {
    gap: 1rem;
}

/* Responsive document grid */
@media (max-width: 576px) {
    .document-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .nav-button {
        width: 32px;
        height: 32px;
    }

    .thumbnail {
        width: 50px;
        height: 66px;
    }
}

/* ========================================
   Airworthiness Status Styles
   ======================================== */

/* Card border colors for status */
.card-border-red {
    border-left: 4px solid var(--pf-v5-global--danger-color--100) !important;
}

.card-border-orange {
    border-left: 4px solid var(--pf-v5-global--warning-color--100) !important;
}

.card-border-blue {
    border-left: 4px solid var(--pf-v5-global--primary-color--100) !important;
}

.card-border-grey {
    border-left: 4px solid var(--pf-v5-global--BorderColor--100) !important;
}

/* Airworthiness Badge */
.airworthiness-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.75rem;
    border-radius: var(--pf-v5-global--BorderRadius--sm);
    font-size: 0.875rem;
    font-weight: 600;
}

.airworthiness-green {
    background-color: var(--pf-v5-global--success-color--100);
    color: white;
}

.airworthiness-orange {
    background-color: var(--pf-v5-global--warning-color--100);
    color: var(--pf-v5-global--Color--dark-100);
}

.airworthiness-red {
    background-color: var(--pf-v5-global--danger-color--100);
    color: white;
}

.airworthiness-badge .status-icon {
    display: flex;
    align-items: center;
}

/* Issue Summary */
.issue-summary {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--pf-v5-global--BorderColor--100);
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.issue-count {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.875rem;
    font-weight: 500;
}

.issue-count.issue-red {
    color: var(--pf-v5-global--danger-color--100);
}

.issue-count.issue-orange {
    color: var(--pf-v5-global--warning-color--200);
}

/* Airworthiness Issues List */
.airworthiness-issues {
    margin-top: 1rem;
}

.issue-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    border-radius: var(--pf-v5-global--BorderRadius--sm);
    background-color: var(--pf-v5-global--BackgroundColor--200);
}

.issue-item.issue-severity-red {
    border-left: 3px solid var(--pf-v5-global--danger-color--100);
}

.issue-item.issue-severity-orange {
    border-left: 3px solid var(--pf-v5-global--warning-color--100);
}

.issue-icon {
    flex-shrink: 0;
    width: 1.5rem;
    text-align: center;
}

.issue-icon.icon-red {
    color: var(--pf-v5-global--danger-color--100);
}

.issue-icon.icon-orange {
    color: var(--pf-v5-global--warning-color--200);
}

.issue-content {
    flex: 1;
}

.issue-title {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.issue-description {
    font-size: 0.875rem;
    color: var(--pf-v5-global--Color--200);
}

.issue-category {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--pf-v5-global--Color--200);
    margin-bottom: 0.25rem;
}

/* ========================================
   Squawk Card Styles
   ======================================== */

.squawk-card {
    transition: box-shadow 0.2s;
}

.squawk-card:hover {
    box-shadow: var(--pf-v5-global--BoxShadow--md);
}

.squawk-card .pf-v5-c-card__actions {
    display: flex;
    gap: 0.25rem;
}

.squawk-card .pf-v5-c-card__actions .pf-v5-c-button {
    transition: color 0.2s;
}

.squawk-card .pf-v5-c-card__actions .pf-v5-c-button:hover {
    color: var(--pf-v5-global--primary-color--100);
}

.squawk-card .pf-v5-c-card__actions .pf-m-success:hover {
    color: var(--pf-v5-global--success-color--100);
}

.squawk-resolve-btn {
    background-color: var(--pf-v5-global--success-color--100) !important;
    border-color: var(--pf-v5-global--success-color--100) !important;
}

/* Breadcrumb styling */
.pf-v5-c-breadcrumb {
    margin-bottom: 0.5rem;
}

.pf-v5-c-breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
}

.pf-v5-c-breadcrumb__item {
    display: flex;
    align-items: center;
}

.pf-v5-c-breadcrumb__item-divider {
    margin: 0 0.5rem;
    color: var(--pf-v5-global--Color--200);
}

.pf-v5-c-breadcrumb__link {
    color: var(--pf-v5-global--link--Color);
    text-decoration: none;
}

.pf-v5-c-breadcrumb__link:hover {
    text-decoration: underline;
}

.pf-v5-c-breadcrumb__link.pf-m-current {
    color: var(--pf-v5-global--Color--100);
}

/* Badge for tab counts */
.pf-v5-c-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 0.375rem;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 10rem;
    background-color: var(--pf-v5-global--BackgroundColor--200);
    color: var(--pf-v5-global--Color--100);
}

.pf-v5-c-badge.pf-m-unread {
    background-color: var(--pf-v5-global--primary-color--100);
    color: white;
}

/* ========================================
   Notes Styles
   ======================================== */

.notes-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.note-item {
    padding: 0.75rem;
    background-color: var(--pf-v5-global--BackgroundColor--200);
    border-radius: var(--pf-v5-global--BorderRadius--sm);
    cursor: pointer;
    transition: background-color 0.2s, box-shadow 0.2s;
    border-left: 3px solid var(--pf-v5-global--primary-color--100);
}

.note-item:hover {
    background-color: var(--pf-v5-global--BackgroundColor--100);
    box-shadow: var(--pf-v5-global--BoxShadow--sm);
}

.note-text {
    margin: 0 0 0.5rem 0;
    white-space: pre-wrap;
    word-break: break-word;
}

.notes-list:not(.notes-list-full) .note-text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.note-meta {
    font-size: 0.75rem;
    color: var(--pf-v5-global--Color--200);
}

.note-edited {
    font-style: italic;
    margin-left: 0.25rem;
}

.notes-list-full {
    max-height: 60vh;
    overflow-y: auto;
}

/* ========================================
   Component Hours Remaining Styles
   ======================================== */

.hours-overdue {
    color: var(--pf-v5-global--danger-color--100);
    font-weight: 700;
}

.hours-critical {
    color: var(--pf-v5-global--danger-color--200);
    font-weight: 600;
}

.hours-warning {
    color: var(--pf-v5-global--warning-color--200);
    font-weight: 500;
}

/* On-condition TBO: inverted/positive coloring (blue approaching TBO, teal at TBO, green past 150%) */
.hours-on-condition {
    color: var(--pf-v5-global--info-color--100);
    font-weight: 500;
}

.hours-on-condition-over {
    color: #009596;
    font-weight: 600;
}

.hours-on-condition-extended {
    color: var(--pf-v5-global--success-color--100);
    font-weight: 600;
}

/* ========================================
   Theme Toggle
   ======================================== */

/* Public page cycling button icons */
.theme-icon { display: none; }
html[data-theme-pref="light"] .theme-icon-light { display: inline-flex; }
html[data-theme-pref="dark"] .theme-icon-dark { display: inline-flex; }
html[data-theme-pref="system"] .theme-icon-system { display: inline-flex; }

/* Dropdown theme option layout */
.theme-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}

.theme-option-icon {
    display: inline-flex;
    flex-shrink: 0;
}

.theme-option-check {
    display: none;
    margin-left: auto;
    flex-shrink: 0;
}

html[data-theme-pref="light"] .theme-check-light { display: inline-flex; }
html[data-theme-pref="dark"] .theme-check-dark { display: inline-flex; }
html[data-theme-pref="system"] .theme-check-system { display: inline-flex; }

/* Dark mode: loading spinner track */
html.pf-v5-theme-dark .loading-spinner {
    border-color: rgba(255, 255, 255, 0.2);
    border-left-color: var(--pf-v5-global--primary-color--100);
}

/* Dark mode: PF5 collapses all label backgrounds to one dark shade, relying on
   the inner __content span for text color. Since this app uses x-text directly
   on the label element (no __content span), we restore color via the element's
   own color property. */
html.pf-v5-theme-dark .pf-v5-c-label.pf-m-green  { color: var(--pf-v5-global--success-color--100); }
html.pf-v5-theme-dark .pf-v5-c-label.pf-m-red    { color: var(--pf-v5-global--danger-color--100); }
html.pf-v5-theme-dark .pf-v5-c-label.pf-m-orange { color: var(--pf-v5-global--warning-color--100); }
html.pf-v5-theme-dark .pf-v5-c-label.pf-m-blue   { color: var(--pf-v5-global--primary-color--100); }
html.pf-v5-theme-dark .pf-v5-c-label.pf-m-purple { color: var(--pf-v5-global--palette--purple-300); }
html.pf-v5-theme-dark .pf-v5-c-label.pf-m-cyan   { color: var(--pf-v5-global--custom-color--200); }
html.pf-v5-theme-dark .pf-v5-c-label.pf-m-gold   { color: var(--pf-v5-global--palette--gold-300); }

/* Plain danger buttons (icon-only delete/remove actions) — PF5's combined
   pf-m-plain + pf-m-danger selector is unreliable across versions; set explicitly. */
.pf-v5-c-button.pf-m-plain.pf-m-danger {
    color: var(--pf-v5-global--danger-color--100);
}

/* Logbook picker dropdown results */
.logbook-picker-result:hover {
    background: var(--pf-v5-global--BackgroundColor--200);
}

/* Bulletin search result rows */
.bulletin-search-result:hover {
    background: var(--pf-v5-global--BackgroundColor--200);
}

/* AD name subtitle (short_description) — hidden on desktop where Description column exists */
.ad-name-subtitle {
    display: none;
}

/* AD Next Due N/A — shown on desktop (column needs a value), hidden on mobile (status badge suffices) */
.ad-next-due-na {
    color: var(--pf-v5-global--Color--200);
}

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

/* Tab section header helper — use on flex rows containing a heading + action button */
.tab-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

/* Hamburger button: hidden on desktop, shown on mobile */
#nav-mobile-toggle {
    display: none;
    background: none;
    border: none;
    color: white;
    font-size: 1.25rem;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    line-height: 1;
}

/* ---- Tab bar: horizontally scrollable, no visible scrollbar --------- */
.pf-v5-c-tabs__list {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* prevent active tab underline from clipping */
    padding-bottom: 2px;
}

.pf-v5-c-tabs__list::-webkit-scrollbar {
    display: none;
}

.pf-v5-c-tabs__item {
    flex-shrink: 0;
}

@media (max-width: 768px) {
    /* ---- Navbar: hamburger + collapsible nav ----------------------- */
    #nav-mobile-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .pf-v5-c-page__header {
        flex-wrap: wrap;
    }

    .pf-v5-c-page__header-brand {
        flex: 1;
    }

    /* Truncate long brand name on very narrow screens */
    .pf-v5-c-page__header-brand-link span {
        font-size: 1rem !important;
    }

    /* Nav hidden by default; revealed by JS toggle */
    .pf-v5-c-page__header-nav {
        display: none;
        width: 100%;
        order: 10;
        background: #151515;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
    }

    .pf-v5-c-page__header-nav.nav-open {
        display: block;
    }

    /* Stack nav links vertically when open */
    .pf-v5-c-page__header-nav .pf-v5-c-nav__list {
        flex-direction: column;
        padding: 0.25rem 0;
    }

    .pf-v5-c-page__header-nav .pf-v5-c-nav__link {
        padding: 0.85rem 1.5rem;
        display: block;
        border-inline-start: none;
    }

    /* ---- Tab section headers: wrap when space is tight ------------ */
    .tab-section-header {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    /* ---- Dashboard header actions: wrap buttons ------------------- */
    .dashboard-header-actions {
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 0.5rem;
    }

    /* ---- Component expand detail grids: single column ------------- */
    .component-detail-grid {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
    }

    /* ---- Touch targets: minimum 44px for icon buttons ------------- */
    .pf-v5-c-button.pf-m-plain {
        min-width: 2.75rem;
        min-height: 2.75rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* ---- Alert container: full-width banner at top ---------------- */
    .alert-container {
        top: 0;
        right: 0;
        left: 0;
        width: 100%;
        padding: 0;
    }

    .alert-container .pf-v5-c-alert {
        border-radius: 0;
    }
}

/* Desktop: hide mobile-only hierarchy breadcrumb */
.component-parent-breadcrumb { display: none; }

/* ---- Components tab: card layout on mobile ------------------------ */
/*
 * At ≤768px each <tbody class="component-row-group"> becomes a card.
 * The main <tr> is a 2-column grid: content (left) | toggle (right).
 * Secondary columns (Mfr/Model, In Service, Since OH/SVC) are hidden —
 * they're already visible in the expandable detail row.
 * pf-m-grid-md is removed from the table; we own the mobile layout.
 */
@media (max-width: 768px) {
    .components-table thead {
        display: none;
    }

    /* Each component's <tbody> becomes a bordered card */
    .component-row-group {
        display: block;
        border: 1px solid var(--pf-v5-global--BorderColor--100);
        border-radius: var(--pf-v5-global--BorderRadius--sm);
        margin-bottom: 0.75rem;
        overflow: hidden;
        /* Indent child cards to visually represent hierarchy */
        margin-left: calc(var(--component-depth, 0) * 1.25rem);
    }

    /* Left border accent on child components */
    .component-row-group.component-child {
        border-left: 3px solid var(--pf-v5-global--Color--200);
    }

    /* Parent breadcrumb — visible only on mobile */
    .component-parent-breadcrumb {
        display: block;
        font-size: 0.75rem;
        color: var(--pf-v5-global--Color--200);
        margin-top: 0.2rem;
    }

    /* Suppress the inline text-indent on mobile — the card itself is indented */
    .component-type-indent {
        padding-left: 0 !important;
    }

    /* Main row: compact card grid */
    .component-row-group tr:not(.pf-v5-c-table__expandable-row) {
        display: grid;
        grid-template-columns: 1fr auto;
        padding: 0.75rem;
        gap: 0.3rem 0.5rem;
    }

    /* Toggle chevron: right column, vertically centered */
    .component-row-group td.pf-v5-c-table__toggle {
        grid-column: 2;
        grid-row: 1 / 4;
        display: flex;
        align-items: center;
        padding: 0;
    }

    /* Type: component name + install location + service badges */
    .component-row-group td[data-label="Type"] {
        grid-column: 1;
        grid-row: 1;
        display: block;
        padding: 0;
        font-weight: 600;
    }

    /* Status badge */
    .component-row-group td[data-label="Status"] {
        grid-column: 1;
        grid-row: 2;
        display: block;
        padding: 0;
    }

    /* Hours/days remaining — most actionable info */
    .component-row-group td[data-label="Remaining"] {
        grid-column: 1;
        grid-row: 3;
        display: block;
        padding: 0;
        font-size: 0.875rem;
    }

    /* Secondary columns hidden on mobile — detail in the expand row */
    .component-row-group td[data-label="Manufacturer/Model"],
    .component-row-group td[data-label="In Service"],
    .component-row-group td[data-label="Since OH/SVC"] {
        display: none;
    }

    /* Actions: footer strip below the main content */
    .component-row-group td[data-label="Actions"] {
        grid-column: 1 / span 2;
        grid-row: 4;
        display: block;
        padding: 0.4rem 0 0 0;
        margin-top: 0.25rem;
        border-top: 1px solid var(--pf-v5-global--BorderColor--100);
    }

    /* Expandable detail row — display managed by Alpine x-show,
       so we set display: block here WITHOUT !important so that
       Alpine's inline display: none can still override it */
    .component-row-group tr.pf-v5-c-table__expandable-row {
        display: block;
        border-top: 1px solid var(--pf-v5-global--BorderColor--100);
        background: var(--pf-v5-global--BackgroundColor--200);
    }

    /* First td in expand row is the empty toggle placeholder — hide it */
    .component-row-group tr.pf-v5-c-table__expandable-row > td:first-child {
        display: none;
    }

    /* Second td holds the actual expand content */
    .component-row-group tr.pf-v5-c-table__expandable-row > td:last-child {
        display: block;
        padding: 0.75rem !important;
    }
}

/* ---- Component card: desktop/mobile remaining display toggle ------ */

/* Desktop: show classic "remaining" cell, hide mobile fraction */
.component-remaining-mobile { display: none; }


@media (max-width: 768px) {
    /* Mobile: hide classic remaining, show fraction + progress bar */
    .component-remaining-desktop { display: none; }
    .component-remaining-mobile  { display: block; }

    .component-fraction {
        font-size: 0.9rem;
        font-weight: 600;
        margin-bottom: 0.35rem;
        /* color inherits from .hours-* on the parent <td> */
    }

    .component-progress-track {
        height: 6px;
        background: var(--pf-v5-global--palette--black-400, #6a6e73);
        border-radius: 3px;
        overflow: hidden;
        margin-bottom: 0.3rem;
    }

    .component-progress-fill {
        height: 100%;
        border-radius: 3px;
        background-color: var(--pf-v5-global--success-color--100, #3e8635);
    }

    .component-progress-fill.hours-warning {
        background-color: var(--pf-v5-global--warning-color--100, #f0ab00);
    }

    .component-progress-fill.hours-critical,
    .component-progress-fill.hours-overdue {
        background-color: var(--pf-v5-global--danger-color--100, #c9190b);
    }

    .component-progress-fill.hours-on-condition {
        background-color: var(--pf-v5-global--info-color--100, #06c);
    }

    .component-progress-fill.hours-on-condition-over {
        background-color: #009596;
    }

    .component-progress-fill.hours-on-condition-extended {
        background-color: var(--pf-v5-global--success-color--100, #3e8635);
    }

    .component-fraction-sublabel {
        font-size: 0.78rem;
        opacity: 0.75;
    }
}

/* ---- ADs & Bulletins tab: card layout on mobile ------------------- */
@media (max-width: 768px) {
    .ads-table thead {
        display: none;
    }

    /* Each <tbody class="ad-row-group"> = one AD entry card */
    .ad-row-group {
        display: block;
        border: 1px solid var(--pf-v5-global--BorderColor--100);
        border-radius: var(--pf-v5-global--BorderRadius--sm);
        margin-bottom: 0.75rem;
        /* overflow:hidden omitted — would clip absolutely-positioned action overflow menus */
    }

    .ad-row-group tr:not(.pf-v5-c-table__expandable-row) {
        display: grid;
        grid-template-columns: 1fr auto;
        padding: 0.75rem;
        gap: 0.3rem 0.5rem;
    }

    .ad-row-group td.pf-v5-c-table__toggle {
        grid-column: 2;
        grid-row: 1 / span 4;
        display: flex;
        align-items: flex-start;
        padding: 0;
    }

    /* Name: AD number / bulletin ID — primary identifier */
    .ad-row-group td[data-label="Name"] {
        grid-column: 1; grid-row: 1;
        display: block; padding: 0; font-weight: 600;
    }

    /* N/A for permanent compliance — hidden on mobile, status badge already communicates this */
    .ad-row-group .ad-next-due-na {
        display: none;
    }

    /* Subtitle: short_description shown below the AD number on mobile */
    .ad-row-group .ad-name-subtitle {
        display: block;
        font-weight: 400;
        font-size: 0.8125rem;
        color: var(--pf-v5-global--Color--200);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 220px;
        margin-top: 0.125rem;
    }

    /* Type badge: AD / SB / SIL etc. */
    .ad-row-group td[data-label="Type"] {
        grid-column: 1; grid-row: 2;
        display: block; padding: 0;
    }

    .ad-row-group td[data-label="Status"] {
        grid-column: 1; grid-row: 3;
        display: block; padding: 0;
    }

    .ad-row-group td[data-label="Next Due"] {
        grid-column: 1; grid-row: 4;
        display: block; padding: 0; font-size: 0.875rem;
    }

    /* Secondary — in expand detail */
    .ad-row-group td[data-label="Description"],
    .ad-row-group td[data-label="Recurring"],
    .ad-row-group td[data-label="Last Complied"] {
        display: none;
    }

    .ad-row-group td[data-label="Actions"] {
        grid-column: 1 / span 2; grid-row: 5;
        display: block; padding: 0.4rem 0 0 0;
        margin-top: 0.25rem;
        border-top: 1px solid var(--pf-v5-global--BorderColor--100);
    }

    .ad-row-group tr.pf-v5-c-table__expandable-row {
        display: block;
        border-top: 1px solid var(--pf-v5-global--BorderColor--100);
        background: var(--pf-v5-global--BackgroundColor--200);
        border-radius: 0 0 var(--pf-v5-global--BorderRadius--sm) var(--pf-v5-global--BorderRadius--sm);
    }

    .ad-row-group tr.pf-v5-c-table__expandable-row > td:first-child {
        display: none;
    }

    .ad-row-group tr.pf-v5-c-table__expandable-row > td:last-child {
        display: block;
        padding: 0.75rem !important;
    }
}

/* ---- Major Records tab: card layout on mobile --------------------- */
@media (max-width: 768px) {
    .major-records-table thead {
        display: none;
    }

    /* Shared by both repairs and alterations tbody loops */
    .major-record-row-group {
        display: block;
        border: 1px solid var(--pf-v5-global--BorderColor--100);
        border-radius: var(--pf-v5-global--BorderRadius--sm);
        margin-bottom: 0.75rem;
        /* overflow:hidden omitted — would clip absolutely-positioned action overflow menus */
    }

    .major-record-row-group tr:not(.pf-v5-c-table__expandable-row) {
        display: grid;
        grid-template-columns: 1fr auto;
        padding: 0.75rem;
        gap: 0.3rem 0.5rem;
    }

    .major-record-row-group td.pf-v5-c-table__toggle {
        grid-column: 2;
        grid-row: 1 / span 5;
        display: flex;
        align-items: flex-start;
        padding: 0;
    }

    .major-record-row-group td[data-label="Title"] {
        grid-column: 1; grid-row: 1;
        display: block; padding: 0; font-weight: 600;
    }

    .major-record-row-group td[data-label="Date"] {
        grid-column: 1; grid-row: 2;
        display: block; padding: 0;
        font-size: 0.875rem; color: var(--pf-v5-global--Color--200);
    }

    .major-record-row-group td[data-label="Component"] {
        grid-column: 1; grid-row: 3;
        display: block; padding: 0; font-size: 0.875rem;
    }

    /* Alterations only — silently ignored on repairs (no matching td) */
    .major-record-row-group td[data-label="STC #"] {
        grid-column: 1; grid-row: 4;
        display: block; padding: 0; font-size: 0.875rem;
    }

    .major-record-row-group td[data-label="STC Holder"] {
        grid-column: 1; grid-row: 5;
        display: block; padding: 0;
        font-size: 0.875rem; color: var(--pf-v5-global--Color--200);
    }

    .major-record-row-group td[data-label="Actions"] {
        grid-column: 1 / span 2; grid-row: 6;
        display: block; padding: 0.4rem 0 0 0;
        margin-top: 0.25rem;
        border-top: 1px solid var(--pf-v5-global--BorderColor--100);
    }

    .major-record-row-group tr.pf-v5-c-table__expandable-row {
        display: block;
        border-top: 1px solid var(--pf-v5-global--BorderColor--100);
        background: var(--pf-v5-global--BackgroundColor--200);
        border-radius: 0 0 var(--pf-v5-global--BorderRadius--sm) var(--pf-v5-global--BorderRadius--sm);
    }

    .major-record-row-group tr.pf-v5-c-table__expandable-row > td:first-child {
        display: none;
    }

    .major-record-row-group tr.pf-v5-c-table__expandable-row > td:last-child {
        display: block;
        padding: 0.75rem !important;
    }
}

/* ---- Oil & Fuel: inline field labels (hidden on desktop, visible on mobile) ---- */
/*
 * consumable-field-label spans sit before the value in each cell.
 * On desktop the column headers provide context, so labels are hidden.
 * On mobile the headers are hidden, so labels are revealed.
 */
.consumable-field-label {
    display: none;
}

/* ---- Oil & Fuel tabs: card layout on mobile ----------------------- */
/*
 * Flat tables (no expandable rows) — each <tr> becomes its own card.
 * 3-column grid: [main info left] [qty right] [action buttons far right]
 * with Hours/Level After/Type/Notes stacking below.
 */
@media (max-width: 768px) {
    .consumable-table thead {
        display: none;
    }

    .consumable-table tbody {
        display: block;
    }

    .consumable-table tbody tr {
        display: grid;
        grid-template-columns: 1fr 1fr auto;
        padding: 0.75rem;
        gap: 0.35rem 0.75rem;
        border: 1px solid var(--pf-v5-global--BorderColor--100);
        border-radius: var(--pf-v5-global--BorderRadius--sm);
        margin-bottom: 0.75rem;
    }

    /* Date: full-width top row, bold */
    .consumable-table td[data-label="Date"] {
        grid-column: 1 / span 2; grid-row: 1;
        display: block; padding: 0; font-weight: 600;
    }

    /* Action buttons: right column, spanning top 3 rows, side by side */
    .consumable-table td[data-label="Actions"] {
        grid-column: 3; grid-row: 1 / span 3;
        display: flex; flex-direction: row;
        align-items: flex-start; justify-content: flex-start;
        gap: 0.1rem; padding: 0;
    }

    /* Hours | Qty side by side */
    .consumable-table td[data-label="Hours"] {
        grid-column: 1; grid-row: 2;
        display: block; padding: 0; font-size: 0.875rem;
    }

    /* Matches "Qty (qt)" and "Qty (gal)" */
    .consumable-table td[data-label^="Qty"] {
        grid-column: 2; grid-row: 2;
        display: block; padding: 0; font-size: 0.875rem; font-weight: 600;
    }

    /* Level After | Type side by side */
    .consumable-table td[data-label="Level After"] {
        grid-column: 1; grid-row: 3;
        display: block; padding: 0; font-size: 0.875rem;
        color: var(--pf-v5-global--Color--200);
    }

    .consumable-table td[data-label="Type"] {
        grid-column: 2; grid-row: 3;
        display: block; padding: 0; font-size: 0.875rem;
        color: var(--pf-v5-global--Color--200);
    }

    /* Notes: full width, only shown when non-empty */
    .consumable-table td[data-label="Notes"] {
        grid-column: 1 / span 2; grid-row: 4;
        display: block; padding: 0; font-size: 0.875rem;
        color: var(--pf-v5-global--Color--200);
    }

    /* Show inline field labels on mobile (desktop uses column headers) */
    .consumable-field-label {
        display: inline;
        color: var(--pf-v5-global--Color--200);
        font-size: 0.8em;
        font-weight: 400;
    }

    /* Hide empty optional table cells on mobile; desktop shows blank for column alignment */
    td.optional-empty {
        display: none;
    }

    /* Hide empty optional fields on mobile (desktop keeps '-' for column alignment) */
    .consumable-table td.consumable-empty-field {
        display: none;
    }
}

/* ---- Resolved Squawks (public view): card layout on mobile -------- */
@media (max-width: 768px) {
    .resolved-squawks-table thead {
        display: none;
    }

    .resolved-squawks-table tbody tr {
        display: grid;
        grid-template-columns: 1fr auto;
        padding: 0.75rem;
        gap: 0.3rem 0.5rem;
        border: 1px solid var(--pf-v5-global--BorderColor--100);
        border-radius: var(--pf-v5-global--BorderRadius--sm);
        margin-bottom: 0.75rem;
    }

    /* Issue — full width, primary identifier */
    .resolved-squawks-table td[data-label="Issue"] {
        grid-column: 1; grid-row: 1;
        display: block; padding: 0; font-weight: 600;
    }

    /* Priority badge — right column, aligns with Issue row */
    .resolved-squawks-table td[data-label="Priority"] {
        grid-column: 2; grid-row: 1;
        display: block; padding: 0;
    }

    /* Component — full width, secondary */
    .resolved-squawks-table td[data-label="Component"] {
        grid-column: 1 / span 2; grid-row: 2;
        display: block; padding: 0; font-size: 0.875rem;
        color: var(--pf-v5-global--Color--200);
    }

    /* Date Reported — full width, small */
    .resolved-squawks-table td[data-label="Date Reported"] {
        grid-column: 1 / span 2; grid-row: 3;
        display: block; padding: 0; font-size: 0.8rem;
        color: var(--pf-v5-global--Color--200);
    }
}

/* ---- AD Compliance History modal: card layout on mobile ----------- */
@media (max-width: 768px) {
    .compliance-history-table thead {
        display: none;
    }

    .compliance-history-table tbody tr {
        display: grid;
        grid-template-columns: 1fr 1fr;
        padding: 0.75rem;
        gap: 0.3rem 0.5rem;
        border: 1px solid var(--pf-v5-global--BorderColor--100);
        border-radius: var(--pf-v5-global--BorderRadius--sm);
        margin-bottom: 0.75rem;
    }

    /* Date Complied — full width, bold */
    .compliance-history-table td[data-label="Date Complied"] {
        grid-column: 1 / span 2; grid-row: 1;
        display: block; padding: 0; font-weight: 600;
    }

    /* Aircraft Hours — left */
    .compliance-history-table td[data-label="Aircraft Hours"] {
        grid-column: 1; grid-row: 2;
        display: block; padding: 0; font-size: 0.875rem;
    }

    /* Compliance badge — right */
    .compliance-history-table td[data-label="Compliance"] {
        grid-column: 2; grid-row: 2;
        display: block; padding: 0; font-size: 0.875rem;
        text-align: right;
    }

    /* Next Due (hrs) — left */
    .compliance-history-table td[data-label="Next Due (hrs)"] {
        grid-column: 1; grid-row: 3;
        display: block; padding: 0; font-size: 0.875rem;
    }

    /* Logbook Entry — right */
    .compliance-history-table td[data-label="Logbook Entry"] {
        grid-column: 2; grid-row: 3;
        display: block; padding: 0; font-size: 0.875rem;
        text-align: right;
    }

    /* Notes — full width */
    .compliance-history-table td[data-label="Notes"] {
        grid-column: 1 / span 2; grid-row: 4;
        display: block; padding: 0; font-size: 0.875rem;
        color: var(--pf-v5-global--Color--200);
    }

    /* Actions footer */
    .compliance-history-table td[data-label="Actions"] {
        grid-column: 1 / span 2; grid-row: 5;
        display: block; padding: 0.4rem 0 0 0;
        margin-top: 0.25rem;
        border-top: 1px solid var(--pf-v5-global--BorderColor--100);
    }
}

/* ---- Inspections tab: card layout on mobile ----------------------- */
@media (max-width: 768px) {
    .inspections-table thead {
        display: none;
    }

    .inspections-table tbody tr {
        display: grid;
        grid-template-columns: 1fr 1fr;
        padding: 0.75rem;
        gap: 0.3rem 0.5rem;
        border: 1px solid var(--pf-v5-global--BorderColor--100);
        border-radius: var(--pf-v5-global--BorderRadius--sm);
        margin-bottom: 0.75rem;
    }

    /* Name — primary identifier, full width */
    .inspections-table td[data-label="Name"] {
        grid-column: 1 / span 2; grid-row: 1;
        display: block; padding: 0; font-weight: 600;
    }

    /* Status badge — left of row 2 */
    .inspections-table td[data-label="Status"] {
        grid-column: 1; grid-row: 2;
        display: block; padding: 0;
    }

    /* Recurring — right of row 2 */
    .inspections-table td[data-label="Recurring"] {
        grid-column: 2; grid-row: 2;
        display: block; padding: 0; font-size: 0.875rem;
        color: var(--pf-v5-global--Color--200); text-align: right;
    }

    /* Last Completed — left of row 3 */
    .inspections-table td[data-label="Last Completed"] {
        grid-column: 1; grid-row: 3;
        display: block; padding: 0; font-size: 0.875rem;
    }

    /* Next Due — right of row 3 */
    .inspections-table td[data-label="Next Due"] {
        grid-column: 2; grid-row: 3;
        display: block; padding: 0; font-size: 0.875rem;
        text-align: right;
    }

    /* Actions footer */
    .inspections-table td[data-label="Actions"] {
        grid-column: 1 / span 2; grid-row: 4;
        display: block; padding: 0.4rem 0 0 0;
        margin-top: 0.25rem;
        border-top: 1px solid var(--pf-v5-global--BorderColor--100);
    }
}

/* ---- Inspection History modal: card layout on mobile -------------- */
@media (max-width: 768px) {
    .inspection-history-table thead {
        display: none;
    }

    .inspection-history-table tbody tr {
        display: grid;
        grid-template-columns: 1fr 1fr;
        padding: 0.75rem;
        gap: 0.3rem 0.5rem;
        border: 1px solid var(--pf-v5-global--BorderColor--100);
        border-radius: var(--pf-v5-global--BorderRadius--sm);
        margin-bottom: 0.75rem;
    }

    /* Date — full width, bold */
    .inspection-history-table td[data-label="Date"] {
        grid-column: 1 / span 2; grid-row: 1;
        display: block; padding: 0; font-weight: 600;
    }

    /* Aircraft Hours — left */
    .inspection-history-table td[data-label="Aircraft Hours"] {
        grid-column: 1; grid-row: 2;
        display: block; padding: 0; font-size: 0.875rem;
    }

    /* Logbook Entry — right */
    .inspection-history-table td[data-label="Logbook Entry"] {
        grid-column: 2; grid-row: 2;
        display: block; padding: 0; font-size: 0.875rem;
        text-align: right;
    }

    /* Actions footer */
    .inspection-history-table td[data-label="Actions"] {
        grid-column: 1 / span 2; grid-row: 3;
        display: block; padding: 0.4rem 0 0 0;
        margin-top: 0.25rem;
        border-top: 1px solid var(--pf-v5-global--BorderColor--100);
    }
}

/* ---- Inspection cards: inline date labels (mobile only) ----------- */
/*
 * Small muted label rendered above the date value in the Last/Due cells.
 * Hidden on desktop where column headers provide context.
 */
.insp-mobile-label {
    display: none;
}

@media (max-width: 768px) {
    .insp-mobile-label {
        display: block;
        font-size: 0.7rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--pf-v5-global--Color--200);
        margin-bottom: 0.1rem;
    }
}

/* ---- Inspection cards: overflow menu ------------------------------ */
.insp-overflow {
    position: relative;
}

/* ---- Major records: inline component label (mobile only) ---------- */
.major-record-mobile-label {
    display: none;
}

@media (max-width: 768px) {
    .major-record-mobile-label {
        display: inline;
        color: var(--pf-v5-global--Color--200);
        font-size: 0.8em;
        font-weight: 400;
        margin-right: 0.25rem;
    }
}

/* ---- Modals: full-width on phones --------------------------------- */
@media (max-width: 600px) {
    .pf-v5-c-backdrop {
        align-items: flex-end;
        padding: 0;
    }

    .pf-v5-c-modal-box {
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: unset !important;
        max-height: 88vh;
        overflow-y: auto;
        border-radius: 0.75rem 0.75rem 0 0;
        margin: 0 !important;
    }
}

/* Striped table rows (pf-m-striped not defined in loaded PF5 bundle) */
.pf-v5-c-table.pf-m-striped tbody tr:nth-child(odd) {
    background-color: var(--pf-v5-global--BackgroundColor--200);
}

/* Related links hover popup */
.related-popup-trigger {
    position: relative;
    display: inline-flex;
}

.related-popup {
    display: flex;
    flex-direction: column;
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--pf-v5-global--BackgroundColor--100);
    border: 1px solid var(--pf-v5-global--BorderColor--100);
    border-radius: var(--pf-v5-global--BorderRadius--sm);
    box-shadow: var(--pf-v5-global--BoxShadow--md);
    padding: 0.5rem 0.75rem;
    white-space: nowrap;
    z-index: 300;
    gap: 0.4rem;
    min-width: 8rem;
}

/* ---- Logbook card: text truncation --------------------------------- */
.logbook-text-clamped {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---- Logbook card: attachment badge -------------------------------- */
.logbook-attachment-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.8rem;
    color: var(--pf-v5-global--Color--200);
    margin-left: 0.5rem;
}

/* ---- Logbook card: overflow menu ----------------------------------- */
.logbook-overflow {
    position: relative;
}

.logbook-overflow-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--pf-v5-global--BackgroundColor--100);
    border: 1px solid var(--pf-v5-global--BorderColor--100);
    border-radius: var(--pf-v5-global--BorderRadius--sm);
    box-shadow: var(--pf-v5-global--BoxShadow--md);
    z-index: 200;
    min-width: 13rem;
    padding: 0.25rem 0;
}

.logbook-overflow-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-size: 0.875rem;
    color: var(--pf-v5-global--Color--100);
    white-space: nowrap;
}

.logbook-overflow-item:hover {
    background: var(--pf-v5-global--BackgroundColor--200);
}

.logbook-overflow-item.logbook-overflow-danger {
    color: var(--pf-v5-global--danger-color--100);
}

/* ---- Document collection: overflow menu ---------------------------- */
.doc-coll-overflow {
    position: relative;
}

.doc-coll-overflow-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--pf-v5-global--BackgroundColor--100);
    border: 1px solid var(--pf-v5-global--BorderColor--100);
    border-radius: var(--pf-v5-global--BorderRadius--sm);
    box-shadow: var(--pf-v5-global--BoxShadow--md);
    z-index: 200;
    min-width: 14rem;
    padding: 0.25rem 0;
}

.doc-coll-overflow-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-size: 0.875rem;
    color: var(--pf-v5-global--Color--100);
    white-space: nowrap;
}

.doc-coll-overflow-item:hover {
    background: var(--pf-v5-global--BackgroundColor--200);
}

.doc-coll-overflow-item.doc-coll-overflow-danger {
    color: var(--pf-v5-global--danger-color--100);
}

.doc-coll-overflow-check {
    margin-left: auto;
    color: var(--pf-v5-global--success-color--100);
    font-size: 0.75rem;
}

.doc-coll-overflow-section {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--pf-v5-global--Color--200);
    padding: 0.4rem 0.75rem 0.2rem;
    border-top: 1px solid var(--pf-v5-global--BorderColor--100);
    margin-top: 0.25rem;
}

.doc-coll-overflow-section:first-child {
    border-top: none;
    margin-top: 0;
}

/* ---- Sub-tab bar (toggle group + action buttons inside a consolidated tab) ---- */
.tab-subtab-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    gap: 0.75rem;
}

/* ---- Aircraft Switcher ---- */
.aircraft-switcher {
    position: relative;
    display: inline-block;
}

.aircraft-switcher__toggle {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: none;
    border: 1px solid var(--pf-v5-global--BorderColor--100);
    border-radius: var(--pf-v5-global--BorderRadius--sm);
    padding: 0.3rem 0.6rem;
    cursor: pointer;
    color: var(--pf-v5-global--Color--200);
    font-size: 0.85rem;
}

.aircraft-switcher__toggle:hover {
    color: var(--pf-v5-global--Color--100);
    border-color: var(--pf-v5-global--Color--200);
}

.aircraft-switcher__menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 500;
    min-width: 220px;
    margin-top: 0.25rem;
    background: var(--pf-v5-global--BackgroundColor--100);
    border: 1px solid var(--pf-v5-global--BorderColor--100);
    border-radius: var(--pf-v5-global--BorderRadius--sm);
    box-shadow: var(--pf-v5-global--BoxShadow--md);
    padding: 0.25rem 0;
}

.aircraft-switcher__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--pf-v5-global--Color--100);
    font-size: 0.875rem;
    text-align: left;
}

.aircraft-switcher__item:hover {
    background: var(--pf-v5-global--BackgroundColor--200);
}

.aircraft-switcher__status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.aircraft-switcher__empty {
    padding: 0.75rem;
    color: var(--pf-v5-global--Color--200);
    font-size: 0.85rem;
    text-align: center;
}

@media (max-width: 768px) {
    .tab-subtab-bar {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
}