/**
 * TMI Publisher Styles
 *
 * @package PERTI
 * @version 1.7.0
 *
 * v1.7.0 Changes:
 *   - Added cancelled indicator visibility improvements
 *   - Cancelled rows use readable gray background
 *   - Cancelled advisory cards have proper contrast
 */

/* ===========================================
   CSS Variables (Local overrides - reference global tokens)
   =========================================== */
:root {
    --ntml-green: #00ff00;              /* Terminal green - keep as-is (specific NTML aesthetic) */
    --ntml-dark: #1a1a2e;               /* NTML terminal dark - keep as-is */
    --ntml-darker: #0d0d1a;             /* NTML terminal darker - keep as-is */
    --discord-purple: var(--gradient-discord-start); /* Use global Discord purple */
    --border-purple: #6f42c1;           /* Bootstrap purple - keep as-is */
    --text-orange: #fd7e14;             /* Bootstrap warning orange - keep as-is */
    --tmi-mono: 'Inconsolata', 'Consolas', 'Monaco', 'Courier New', monospace;
}

/* ===========================================
   Compact Global Overrides (TMI Publisher)
   =========================================== */

/* Monospace base for the entire publisher */
#publisherTabs,
#publisherTabContent,
.perti-info-bar {
    font-family: var(--tmi-mono);
}

/* Tighter cards throughout */
#publisherTabContent .card-body {
    padding: 0.5rem 0.75rem;
}

#publisherTabContent .card-header {
    padding: 0.35rem 0.75rem;
}

/* Compact form groups */
#publisherTabContent .form-group {
    margin-bottom: 0.4rem;
}

#publisherTabContent .form-row {
    margin-bottom: 0;
}

#publisherTabContent .form-control {
    font-family: var(--tmi-mono);
    font-size: 0.8rem;
    padding: 0.25rem 0.5rem;
    height: auto;
}

#publisherTabContent textarea.form-control {
    font-size: 0.8rem;
}

#publisherTabContent label,
#publisherTabContent .tmi-label {
    font-family: var(--tmi-mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Compact margins on card stacks */
#publisherTabContent .card.shadow-sm.mb-3 {
    margin-bottom: 0.5rem !important;
}

/* Badges monospace */
#publisherTabContent .badge,
.nav-tabs-publisher .badge {
    font-family: var(--tmi-mono);
}

/* ===========================================
   Tab Navigation
   =========================================== */
.nav-tabs-publisher {
    border-bottom: 2px solid var(--gray-300);
}

.nav-tabs-publisher .nav-link {
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--gray-600);
    padding: 0.4rem 0.75rem;
    font-weight: 500;
    font-family: var(--tmi-mono);
    font-size: 0.8rem;
    transition: all 0.2s ease;
}

.nav-tabs-publisher .nav-link:hover {
    border-bottom-color: var(--gray-300);
    color: var(--gray-700);
    background: transparent;
}

.nav-tabs-publisher .nav-link.active {
    border-bottom-color: var(--discord-purple);
    color: var(--discord-purple);
    background: transparent;
}

.nav-tabs-publisher .badge {
    font-size: 0.7rem;
    vertical-align: middle;
}

/* ===========================================
   NTML Type Cards
   =========================================== */
.ntml-type-card {
    cursor: pointer;
    border: 2px solid var(--gray-300);
    transition: all 0.2s ease;
    background: #fff;
    padding: 0.35rem !important;
}

.ntml-type-card:hover {
    border-color: var(--discord-purple);
    box-shadow: 0 2px 8px rgba(var(--discord-purple-rgb), 0.2);
    transform: translateY(-2px);
}

.ntml-type-card.selected {
    border-color: var(--discord-purple);
    background: rgba(var(--discord-purple-rgb), 0.1);
}

.ntml-type-card .small.font-weight-bold,
.ntml-type-card .text-muted {
    font-family: var(--tmi-mono);
}

.ntml-type-icon {
    font-size: 1.1rem;
    margin-bottom: 0.1rem;
}

/* ===========================================
   NTML Form Compact Layout
   =========================================== */
#ntmlFormContainer .form-group,
#ntmlFormContainer .mb-3 {
    margin-bottom: 0.4rem !important;
}

#ntmlFormContainer .form-control {
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
    height: auto;
}

#ntmlFormContainer .form-label,
#ntmlFormContainer label {
    margin-bottom: 0.1rem;
    font-size: 0.72rem;
}

#ntmlFormContainer .card-body {
    padding: 0.6rem;
}

#ntmlFormContainer .row.mb-3 {
    margin-bottom: 0.35rem !important;
}

#ntmlFormContainer .qualifier-btn {
    padding: 0.15rem 0.4rem;
    font-size: 0.7rem;
}

#ntmlFormContainer .qualifier-group {
    margin-bottom: 0.25rem !important;
}

.ntml-preview {
    font-family: var(--tmi-mono, 'Courier New', monospace);
    font-size: 0.75rem;
    white-space: pre-wrap;
    word-break: break-word;
    background: #1a1a2e;
    color: #e0e0e0;
    border-radius: 4px;
    padding: 0.5rem;
    margin: 0;
    min-height: 80px;
    max-height: 250px;
    overflow-y: auto;
}

/* ===========================================
   Advisory Type Cards
   =========================================== */
.advisory-type-card {
    cursor: pointer;
    border: 2px solid var(--gray-300);
    transition: all 0.2s ease;
    background: #fff;
    padding: 0.35rem !important;
}

.advisory-type-card:hover {
    border-color: var(--discord-purple);
    box-shadow: 0 2px 8px rgba(var(--discord-purple-rgb), 0.2);
    transform: translateY(-2px);
}

.advisory-type-card.selected {
    border-color: var(--discord-purple);
    background: rgba(var(--discord-purple-rgb), 0.1);
}

.advisory-type-card .small.font-weight-bold,
.advisory-type-card .text-muted {
    font-family: var(--tmi-mono);
}

.advisory-type-icon {
    font-size: 1.1rem;
    margin-bottom: 0.1rem;
}

/* ===========================================
   Section Labels
   =========================================== */
.tmi-section-title {
    font-family: var(--tmi-mono);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ===========================================
   Advisory Preview
   =========================================== */
.tmi-advisory-preview {
    font-family: var(--tmi-mono);
    font-size: 0.78rem;
    background: var(--gray-100);
    border: 1px solid var(--gray-300);
    border-radius: 4px;
    padding: 0.5rem 0.75rem;
    max-height: 400px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
    color: var(--gray-800);
    line-height: 1.4;
}

.char-count {
    font-size: 0.75rem;
    color: var(--gray-600);
}

.char-count.text-danger {
    color: var(--status-danger-text) !important;
    font-weight: bold;
}

/* ===========================================
   Mode Indicator
   =========================================== */
#modeIndicator {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
}

.production-warning {
    animation: pulse-danger 2s infinite;
}

@keyframes pulse-danger {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}

/* ===========================================
   Queue Items
   =========================================== */
.queue-item {
    transition: all 0.2s ease;
}

.queue-item:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.border-left-4 {
    border-left-width: 4px !important;
    border-left-style: solid !important;
}

.border-success {
    border-left-color: var(--status-success-bg) !important;
}

.border-purple {
    border-left-color: var(--border-purple) !important;
}

.badge-purple {
    background-color: var(--border-purple);
    color: #fff;
}

.font-monospace {
    font-family: var(--tmi-mono);
}

/* ===========================================
   Form Inputs
   =========================================== */
.form-label {
    margin-bottom: 0.25rem;
    display: block;
}

.time-input {
    font-family: var(--tmi-mono);
    text-align: center;
    letter-spacing: 1px;
}

/* Fix hover/focus text visibility */
.form-control:hover,
.form-control:focus {
    color: var(--gray-800);
    background-color: #fff;
}

.form-control:focus {
    border-color: var(--discord-purple);
    box-shadow: 0 0 0 0.2rem rgba(var(--discord-purple-rgb), 0.25);
}

/* Ensure text is always visible */
input.form-control,
select.form-control,
textarea.form-control {
    color: var(--gray-800) !important;
    background-color: #fff !important;
}

input.form-control::placeholder {
    color: var(--gray-600) !important;
}

/* Text uppercase inputs */
.text-uppercase {
    text-transform: uppercase;
}

/* ===========================================
   Custom Checkbox Styling
   =========================================== */
.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--discord-purple);
    border-color: var(--discord-purple);
}

/* ===========================================
   Staged Posts List
   =========================================== */
#recentPostsList .list-group-item {
    border-left: none;
    border-right: none;
    border-radius: 0;
}

#recentPostsList .list-group-item:first-child {
    border-top: none;
}

/* ===========================================
   Active TMI Table
   =========================================== */
#activeTmiTable th {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

#activeTmiTable td {
    vertical-align: middle;
}

/* ===========================================
   Color Utilities
   =========================================== */
.text-orange {
    color: var(--text-orange) !important;
}

.text-purple {
    color: var(--border-purple) !important;
}

.bg-purple {
    background-color: var(--border-purple) !important;
}

/* ===========================================
   Badge Sizes
   =========================================== */
.badge-sm {
    font-size: 0.65rem;
    padding: 0.15rem 0.4rem;
}

/* ===========================================
   Card Header Colors
   =========================================== */
.card-header.bg-purple {
    background-color: var(--border-purple) !important;
    color: #fff;
}

/* ===========================================
   Submit Button States
   =========================================== */
#submitAllBtn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

#submitAllBtn.submitting {
    pointer-events: none;
}

#submitAllBtn.submitting i {
    animation: spin 1s linear infinite;
}

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

/* ===========================================
   Responsive Adjustments
   =========================================== */
@media (max-width: 768px) {
    .ntml-type-card,
    .advisory-type-card {
        margin-bottom: 0.25rem;
    }

    .nav-tabs-publisher .nav-link {
        padding: 0.3rem 0.5rem;
        font-size: 0.72rem;
    }

    .tmi-advisory-preview {
        font-size: 0.7rem;
        max-height: 250px;
    }
}

/* ===========================================
   SweetAlert Customizations
   =========================================== */
.swal2-popup {
    font-size: 0.9rem;
}

.swal2-title {
    font-size: 1.25rem;
}

/* ===========================================
   Modal Styling
   =========================================== */
#previewModal .modal-body {
    background-color: #1a1a2e;
    color: #00ff00;
    font-size: 0.85rem;
    max-height: 60vh;
    overflow-y: auto;
}

/* ===========================================
   Info Cards
   =========================================== */
.perti-info-card {
    border: none;
    border-radius: 8px;
}

.perti-card-utc {
    background: linear-gradient(135deg, var(--gradient-utc-start) 0%, var(--gradient-utc-end) 100%);
    color: #fff;
}

.perti-card-utc .perti-info-label {
    color: rgba(255, 255, 255, 0.8);
}

.perti-clock-display-lg {
    font-size: 1.25rem;
    font-weight: 700;
    font-family: var(--tmi-mono);
}

/* ===========================================
   Link Styling in Cards
   =========================================== */
.card-body a {
    color: var(--discord-purple);
}

.card-body a:hover {
    color: var(--link-purple-hover);
    text-decoration: underline;
}

/* ===========================================
   Alert Info Styling
   =========================================== */
.alert-info {
    background-color: var(--alert-info-bg);
    border-color: var(--alert-info-border);
    color: var(--alert-info-text);
}

.alert-info a {
    color: var(--alert-info-link);
    font-weight: 500;
}

/* ===========================================
   Qualifier Buttons (v1.8.3)
   =========================================== */
.qualifier-btn {
    border-radius: 20px;
    padding: 0.15rem 0.6rem;
    font-family: var(--tmi-mono);
    font-size: 0.7rem;
    font-weight: 500;
    margin: 0.125rem;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
    text-overflow: unset;
    overflow: visible;
    min-width: fit-content;
}

.qualifier-btn:hover {
    transform: translateY(-1px);
}

.qualifier-btn.active {
    background-color: var(--status-info-base) !important;
    border-color: var(--status-info-base) !important;
    color: #fff !important;
}

.qualifier-btn:not(.active):hover {
    background-color: var(--gray-200);
}

/* Qualifier Groups */
.qualifier-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
}

.qualifier-group > span.small {
    min-width: 70px;
    flex-shrink: 0;
}

.qualifier-sections {
    max-width: 100%;
    overflow-x: auto;
}

/* Responsive qualifier sizing */
@media (max-width: 576px) {
    .qualifier-btn {
        font-size: 0.7rem;
        padding: 0.2rem 0.6rem;
    }
    
    .qualifier-group > span.small {
        min-width: 60px;
        font-size: 0.7rem;
    }
    
    .qualifier-group {
        gap: 0.125rem;
    }
}

/* Gap utility for flexbox */
.gap-2 {
    gap: 0.5rem;
}

/* ===========================================
   Time Input Styling
   =========================================== */
input[type="time"] {
    font-family: var(--tmi-mono);
}

/* ===========================================
   XS Button Size
   =========================================== */
.btn-xs {
    padding: 0.1rem 0.4rem;
    font-size: 0.75rem;
    line-height: 1.5;
    border-radius: 0.2rem;
}

/* ===========================================
   Active TMI Display (FAA-style)
   =========================================== */

/* Restrictions Table */
#restrictionsTable {
    font-family: var(--tmi-mono);
    font-size: 0.78rem;
}

#restrictionsTable thead th {
    background-color: var(--table-header-bg);
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.68rem;
    letter-spacing: 0.5px;
    padding: 0.3rem 0.5rem;
    border: none;
}

#restrictionsTable tbody td {
    padding: 0.3rem 0.5rem;
}

#restrictionsTable tbody tr {
    border-bottom: 1px solid var(--gray-300);
}

#restrictionsTable tbody tr:hover {
    background-color: rgba(26, 82, 118, 0.05);
}

#restrictionsTable .restriction-text {
    font-family: var(--tmi-mono);
    font-size: 0.75rem;
    white-space: normal;
    word-break: break-word;
}

/* Advisory Cards */
.advisory-card {
    border-radius: 4px;
    overflow: hidden;
    border: none;
}

.advisory-card .card-header {
    border-radius: 0;
    margin: 0;
    border: none;
}

/* Card corner alignment is now handled globally in perti_theme.css */

.advisory-card .card-header {
    font-family: var(--tmi-mono);
    font-size: 0.78rem;
    padding: 0.3rem 0.75rem;
}

.advisory-card .advisory-body {
    background-color: var(--gray-100);
}

.advisory-text {
    font-family: var(--tmi-mono);
    font-size: 0.75rem;
    background-color: #fff;
    border: 1px solid var(--gray-300);
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    white-space: pre-wrap;
    word-wrap: break-word;
    max-height: 300px;
    overflow-y: auto;
    line-height: 1.4;
}

/* Status Header */
.tmi-status-header {
    background: linear-gradient(135deg, var(--gradient-table-header-start) 0%, var(--gradient-table-header-end) 100%);
    color: #fff;
    padding: 0.5rem 0.75rem;
    border-radius: 4px 4px 0 0;
}

.tmi-status-count {
    font-family: var(--tmi-mono);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
}

.tmi-status-label {
    font-family: var(--tmi-mono);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.9;
}

/* Refresh Timer */
.refresh-timer {
    background-color: rgba(0, 0, 0, 0.1);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
}

.refresh-timer .countdown {
    font-family: var(--tmi-mono);
    font-weight: 600;
}

/* Filter Controls */
#activeTmiFilters {
    background-color: var(--gray-100);
    padding: 0.75rem;
    border-radius: 4px;
    margin-bottom: 1rem;
}

#activeTmiFilters label {
    font-weight: 500;
}

#activeTmiFilters .form-control-sm {
    font-size: 0.8rem;
}

/* Section Tabs */
.tmi-section-tabs .nav-link {
    font-size: 0.8rem;
    padding: 0.5rem 1rem;
    border-radius: 0;
}

.tmi-section-tabs .nav-link.active {
    background-color: var(--table-header-bg);
    color: #fff;
    border-color: var(--table-header-bg);
}

/* Empty State */
.tmi-empty-state {
    padding: 1.5rem;
    text-align: center;
    color: var(--gray-600);
    font-family: var(--tmi-mono);
    font-size: 0.8rem;
}

.tmi-empty-state i {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    opacity: 0.5;
}

/* Status Badges in Table */
#restrictionsTable .badge {
    font-size: 0.65rem;
    vertical-align: middle;
}

/* Queue Item Button Fixes - ensure buttons display correctly even without FontAwesome */
.queue-item .btn {
    min-width: 32px;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.5rem;
}

.queue-item .btn i.fas,
.queue-item .btn i.far,
.queue-item .btn i.fab {
    font-size: 0.875rem;
}

/* Button text always visible as fallback */
.queue-item .btn span {
    font-size: 0.75rem;
}

/* Facility selector wrapper */
.facility-selector-wrapper {
    position: relative;
}

.facility-selector-wrapper select {
    font-size: 0.8rem;
    height: auto;
}

.facility-selector-wrapper select option {
    padding: 2px 6px;
}

.facility-selector-wrapper small {
    font-size: 0.7rem;
}

/* Restriction Detail Modal */
.restriction-detail table th {
    color: var(--gray-600);
    font-weight: 500;
    font-size: 0.85rem;
}

.restriction-detail table td {
    font-size: 0.9rem;
}

/* Scheduled Row Styling */
#restrictionsTable tr.table-info {
    background-color: rgba(23, 162, 184, 0.1);
}

/* Cancelled Row Styling */
#restrictionsTable tr.table-secondary {
    background-color: rgba(220, 53, 69, 0.08) !important;
    color: var(--gray-800) !important;
}

#restrictionsTable tr.table-secondary td {
    color: var(--gray-800) !important;
}

#restrictionsTable tr.table-secondary .restriction-text {
    text-decoration: line-through;
    color: var(--gray-600) !important;
}

#restrictionsTable tr.table-secondary .badge-secondary {
    background-color: var(--status-danger-text) !important;
    color: #fff !important;
    font-weight: 600;
}

/* Cancelled Advisory Card Styling */
.advisory-card.border-secondary {
    background-color: #fff5f5 !important;
    border: none !important;
    box-shadow: 0 0 0 1px var(--status-danger-text);
}

.advisory-card.border-secondary .card-header {
    background-color: var(--status-danger-text) !important;
    color: #fff !important;
}

.advisory-card.border-secondary .advisory-body {
    background-color: #fff5f5;
}

.advisory-card.border-secondary .advisory-text {
    text-decoration: line-through;
    color: var(--gray-600);
}

/* ===========================================
   Cancelled Status Card (red-ish indicator)
   =========================================== */
#cancelledCount {
    color: #fff;
}

/* Target the card containing the cancelled count */
#activePanel .row.mb-3 .col-md-3:nth-child(3) .card {
    background-color: #c0392b !important;
    border-color: #a93226 !important;
}

#activePanel .row.mb-3 .col-md-3:nth-child(3) .card:hover {
    background-color: #a93226 !important;
}

/* ===========================================
   Facility Filter Select2 Styling (v1.8.0)
   =========================================== */

/* Container styling for facility filters */
.facility-filter-select + .select2-container {
    min-width: 100%;
}

/* Selection container */
.facility-filter-select + .select2-container .select2-selection--multiple {
    min-height: 31px;
    padding: 2px 4px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    background-color: #fff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.facility-filter-select + .select2-container .select2-selection--multiple:hover {
    border-color: #adb5bd;
}

.facility-filter-select + .select2-container.select2-container--focus .select2-selection--multiple {
    border-color: var(--discord-purple);
    box-shadow: 0 0 0 0.2rem rgba(var(--discord-purple-rgb), 0.25);
}

/* Selected tags (pills) */
.facility-filter-select + .select2-container .select2-selection__choice {
    border-radius: 12px;
    padding: 2px 8px 2px 6px;
    margin: 2px;
    font-size: 0.72rem;
    font-weight: 600;
    border: none;
    background-color: var(--gray-600);
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Remove button on tags */
.facility-filter-select + .select2-container .select2-selection__choice__remove {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1rem;
    font-weight: normal;
    margin-right: 0;
    margin-left: 0;
    padding: 0 2px;
    border: none;
    background: transparent;
    order: 1;
}

.facility-filter-select + .select2-container .select2-selection__choice__remove:hover {
    color: #fff;
    background: transparent;
}

/* Placeholder text */
.facility-filter-select + .select2-container .select2-search__field::placeholder {
    color: var(--gray-600);
    font-size: 0.8rem;
}

/* Empty state placeholder */
.facility-filter-select + .select2-container .select2-selection__placeholder {
    color: var(--gray-600);
    font-size: 0.8rem;
}

/* Dropdown styling */
.select2-container--default .select2-results__option--group {
    padding: 0;
}

.select2-container--default .select2-results__group {
    font-weight: 700;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--table-header-bg);
    padding: 8px 8px 4px;
    background-color: var(--gray-100);
    border-top: 1px solid var(--gray-300);
}

.select2-container--default .select2-results__option {
    font-size: 0.8rem;
    padding: 6px 10px;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--discord-purple);
    color: #fff;
}

.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: rgba(114, 137, 218, 0.15);
    color: #333;
}

/* Dropdown container */
.select2-dropdown {
    border-color: var(--discord-purple);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-radius: 4px;
}

/* Search box in dropdown */
.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid #ced4da;
    border-radius: 4px;
    padding: 6px 8px;
    font-size: 0.8rem;
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--discord-purple);
    outline: none;
}

/* DCC Region color-coded tags */
.facility-filter-select + .select2-container .select2-selection__choice[title*="ZDC"],
.facility-filter-select + .select2-container .select2-selection__choice[title*="ZNY"],
.facility-filter-select + .select2-container .select2-selection__choice[title*="ZBW"],
.facility-filter-select + .select2-container .select2-selection__choice[title*="ZOB"] {
    background-color: #e74c3c;
}

.facility-filter-select + .select2-container .select2-selection__choice[title*="ZTL"],
.facility-filter-select + .select2-container .select2-selection__choice[title*="ZJX"],
.facility-filter-select + .select2-container .select2-selection__choice[title*="ZMA"] {
    background-color: #27ae60;
}

.facility-filter-select + .select2-container .select2-selection__choice[title*="ZID"],
.facility-filter-select + .select2-container .select2-selection__choice[title*="ZAU"],
.facility-filter-select + .select2-container .select2-selection__choice[title*="ZMP"],
.facility-filter-select + .select2-container .select2-selection__choice[title*="ZKC"] {
    background-color: #3498db;
}

.facility-filter-select + .select2-container .select2-selection__choice[title*="ZFW"],
.facility-filter-select + .select2-container .select2-selection__choice[title*="ZHU"],
.facility-filter-select + .select2-container .select2-selection__choice[title*="ZME"] {
    background-color: #9b59b6;
}

.facility-filter-select + .select2-container .select2-selection__choice[title*="ZLA"],
.facility-filter-select + .select2-container .select2-selection__choice[title*="ZLC"],
.facility-filter-select + .select2-container .select2-selection__choice[title*="ZOA"],
.facility-filter-select + .select2-container .select2-selection__choice[title*="ZSE"],
.facility-filter-select + .select2-container .select2-selection__choice[title*="ZAB"],
.facility-filter-select + .select2-container .select2-selection__choice[title*="ZDV"] {
    background-color: #f39c12;
}

/* Clear all button styling */
.facility-filter-select + .select2-container .select2-selection__clear {
    color: var(--status-danger-text);
    font-size: 1rem;
    font-weight: bold;
    margin-right: 4px;
}

.facility-filter-select + .select2-container .select2-selection__clear:hover {
    color: #a71d2a;
}

/* Filter label styling */
#activeTmiFilters label.small {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--gray-700);
    font-weight: 600;
}

/* ===========================================
   Unified Filter Styling (All Select2 + Regular Selects)
   =========================================== */

/* Make all filters in the filter bar have consistent height and font */
#activeTmiFilters .form-control,
#activeTmiFilters .form-control-sm {
    height: 31px;
    font-size: 0.8rem;
    border: 1px solid #ced4da;
    border-radius: 4px;
}

/* Date filter input styling */
#activeTmiFilters #filterDate {
    height: 31px;
    font-size: 0.8rem;
    padding: 2px 8px;
}

/* All Select2 containers in filter area - consistent sizing */
#activeTmiFilters .select2-container {
    min-width: 100%;
}

#activeTmiFilters .select2-container .select2-selection--multiple,
#activeTmiFilters .select2-container .select2-selection--single {
    min-height: 31px;
    height: auto;
    padding: 2px 4px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    background-color: #fff;
    font-size: 0.8rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#activeTmiFilters .select2-container .select2-selection--single {
    display: flex;
    align-items: center;
}

#activeTmiFilters .select2-container .select2-selection--single .select2-selection__rendered {
    padding: 0 4px;
    line-height: 27px;
    color: var(--gray-800);
}

#activeTmiFilters .select2-container .select2-selection--single .select2-selection__arrow {
    height: 29px;
}

/* Hover and focus states for all Select2 in filters */
#activeTmiFilters .select2-container .select2-selection--multiple:hover,
#activeTmiFilters .select2-container .select2-selection--single:hover {
    border-color: #adb5bd;
}

#activeTmiFilters .select2-container.select2-container--focus .select2-selection--multiple,
#activeTmiFilters .select2-container.select2-container--focus .select2-selection--single,
#activeTmiFilters .select2-container.select2-container--open .select2-selection--multiple,
#activeTmiFilters .select2-container.select2-container--open .select2-selection--single {
    border-color: var(--discord-purple);
    box-shadow: 0 0 0 0.2rem rgba(var(--discord-purple-rgb), 0.25);
}

/* Selected tags (pills) - applies to all multiselect in filters */
#activeTmiFilters .select2-container .select2-selection__choice {
    border-radius: 12px;
    padding: 1px 8px 1px 6px;
    margin: 2px;
    font-size: 0.72rem;
    font-weight: 600;
    border: none;
    background-color: var(--gray-600);
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    line-height: 1.4;
}

/* Remove button on tags */
#activeTmiFilters .select2-container .select2-selection__choice__remove {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
    font-weight: normal;
    margin-right: 0;
    margin-left: 2px;
    padding: 0 2px;
    border: none;
    background: transparent;
    order: 1;
    position: static;
    float: none;
}

#activeTmiFilters .select2-container .select2-selection__choice__remove:hover {
    color: #fff;
    background: transparent;
}

/* Placeholder styling */
#activeTmiFilters .select2-container .select2-selection__placeholder,
#activeTmiFilters .select2-container .select2-search__field::placeholder {
    color: var(--gray-600);
    font-size: 0.8rem;
}

/* Search field inside select */
#activeTmiFilters .select2-container .select2-search__field {
    font-size: 0.8rem;
    margin-top: 2px;
}

/* Status filter color coding */
#activeTmiFilters #filterStatus + .select2-container .select2-selection__choice[title="Active"],
#activeTmiFilters #filterStatus + .select2-container .select2-selection__choice[title="ACTIVE"] {
    background-color: var(--status-success-bg);
}

#activeTmiFilters #filterStatus + .select2-container .select2-selection__choice[title="Scheduled"],
#activeTmiFilters #filterStatus + .select2-container .select2-selection__choice[title="SCHEDULED"] {
    background-color: #17a2b8;
}

#activeTmiFilters #filterStatus + .select2-container .select2-selection__choice[title="Cancelled"],
#activeTmiFilters #filterStatus + .select2-container .select2-selection__choice[title="CANCELLED"] {
    background-color: var(--status-danger-text);
}

#activeTmiFilters #filterStatus + .select2-container .select2-selection__choice[title="Expired"],
#activeTmiFilters #filterStatus + .select2-container .select2-selection__choice[title="EXPIRED"] {
    background-color: var(--gray-600);
}

/* Type filter colors */
#activeTmiFilters #filterType + .select2-container .select2-selection__choice[title="MIT"],
#activeTmiFilters #filterType + .select2-container .select2-selection__choice[title="MINIT"] {
    background-color: #fd7e14;
}

#activeTmiFilters #filterType + .select2-container .select2-selection__choice[title="STOP"],
#activeTmiFilters #filterType + .select2-container .select2-selection__choice[title="Ground Stop"],
#activeTmiFilters #filterType + .select2-container .select2-selection__choice[title="GS"] {
    background-color: var(--status-danger-text);
}

#activeTmiFilters #filterType + .select2-container .select2-selection__choice[title="GDP"],
#activeTmiFilters #filterType + .select2-container .select2-selection__choice[title="Delay"],
#activeTmiFilters #filterType + .select2-container .select2-selection__choice[title="DELAY"] {
    background-color: #6f42c1;
}

#activeTmiFilters #filterType + .select2-container .select2-selection__choice[title="Config"],
#activeTmiFilters #filterType + .select2-container .select2-selection__choice[title="CONFIG"] {
    background-color: #20c997;
}

#activeTmiFilters #filterType + .select2-container .select2-selection__choice[title="APREQ/CFR"],
#activeTmiFilters #filterType + .select2-container .select2-selection__choice[title="TBM"] {
    background-color: #0d6efd;
}

/* Ensure buttons have consistent height with filters */
#activeTmiFilters .btn {
    height: 31px;
    font-size: 0.8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}