/*
 * ══════════════════════════════════════════════════════════════════
 * THEME BRIDGE — Soft UI Dashboard 3 Complete Override
 * Neutralizes ALL legacy styles and makes every element match theme
 * This file MUST be loaded LAST to override everything
 * ══════════════════════════════════════════════════════════════════
 */

/* ─── NEUTRALIZE app-main.js injected .az-navbar styles ─── */
.az-navbar .nav-link,
.az-navbar .nav-link:hover,
.az-navbar .nav-link.active,
.az-navbar .nav-item,
.az-navbar .nav-link i,
.az-navbar .az-menu-sub .nav-link,
.az-navbar .az-menu-sub .nav-link.active,
.az-navbar .az-menu-sub .nav-link:hover { all: revert !important; }

/* ─── BODY & LAYOUT ─── */
body { font-family: 'Inter', sans-serif !important; background-color: #f8f9fa !important; -webkit-font-smoothing: antialiased; }
#mainApp { min-height: 100vh; }

/* ─── TENANT WELCOME GREETING ─── */
#tenantNameDisplay::before { content: 'Welcome, '; font-weight: 400; }

/* ─── BUTTONS — Orange Primary (theme color) ─── */
.btn { border-radius: 0.5rem; font-weight: 600; font-size: 0.75rem; padding: 0.625rem 1.5rem; letter-spacing: -0.025rem; transition: all 0.15s ease-in; box-shadow: 0 3px 5px -1px rgba(0,0,0,.09), 0 2px 3px -1px rgba(0,0,0,.07); }
.btn:hover { transform: translateY(-1px); box-shadow: 0 7px 14px rgba(50,50,93,.1), 0 3px 6px rgba(0,0,0,.08); }
.btn-primary { background-color: var(--theme-color, #f97316) !important; border-color: var(--theme-color, #f97316) !important; color: #fff !important; background-image: none !important; }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active { background-color: var(--theme-color-hover, #ea580c) !important; border-color: var(--theme-color-hover, #ea580c) !important; color: #fff !important; }
.btn-az-primary { background-color: var(--theme-color, #f97316) !important; border-color: var(--theme-color, #f97316) !important; color: #fff !important; }
.bg-gradient-primary, .btn.bg-gradient-primary, a.btn.bg-gradient-primary, a.bg-gradient-primary { background-color: var(--theme-color, #f97316) !important; background-image: none !important; border: none !important; color: #fff !important; }
.btn-outline-primary { border: 1px solid var(--theme-color, #f97316) !important; color: var(--theme-color, #f97316) !important; background: transparent !important; box-shadow: none !important; }
.btn-outline-primary:hover { background-color: var(--theme-color, #f97316) !important; color: #fff !important; }
.btn-success { background-color: #22c55e !important; border-color: #22c55e !important; color: #fff !important; }
.btn-danger { background-color: #ef4444 !important; border-color: #ef4444 !important; color: #fff !important; }
.btn-warning { background-color: #eab308 !important; border-color: #eab308 !important; color: #000 !important; }
.btn-info { background-color: #0ea5e9 !important; border-color: #0ea5e9 !important; color: #fff !important; }
.btn-secondary { background-color: #71717a !important; border-color: #71717a !important; color: #fff !important; }
.btn-dark { background-color: #27272a !important; border-color: #27272a !important; color: #fff !important; }
.btn-sm { font-size: 0.7rem; padding: 0.4rem 1rem; }
.btn-xs { font-size: 0.65rem; padding: 0.3rem 0.75rem; }

/* ─── CARDS ─── */
.card { border: 0 !important; border-radius: 1rem !important; box-shadow: 0 20px 27px 0 rgba(0,0,0,.05) !important; background: #fff !important; overflow: hidden; }
.card-header { background: transparent !important; border-bottom: none !important; padding: 1.5rem 1.5rem 0 !important; }
.card-header h5, .card-header h6 { font-weight: 700 !important; color: #344767 !important; font-size: 1rem !important; }
.card-body { padding: 1.5rem !important; }
.card-footer { background: transparent !important; border-top: 1px solid #e9ecef !important; }

/* ─── FORMS ─── */
.form-control { border: 1px solid #d2d6da !important; border-radius: 0.5rem !important; padding: 0.5rem 0.75rem !important; font-size: 0.875rem !important; color: #495057 !important; background-color: #fff !important; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important; }
.form-control:focus { border-color: var(--theme-color, #f97316) !important; box-shadow: 0 0 0 2px rgba(249,115,22,.1) !important; outline: none !important; }
.form-control::placeholder { color: #adb5bd !important; }
select.form-control { appearance: auto !important; }
textarea.form-control { min-height: 80px; }
label { font-size: 0.75rem !important; font-weight: 700 !important; color: #344767 !important; margin-bottom: 0.5rem !important; }
.form-group { margin-bottom: 1rem; }
.input-group .input-group-text { border: 1px solid #d2d6da; border-radius: 0.5rem 0 0 0.5rem; background: #fff; color: #67748e; }
.input-group .form-control { border-radius: 0 0.5rem 0.5rem 0 !important; }

/* ─── TABLES ─── */
.table { width: 100% !important; border-collapse: collapse !important; }
.table th { font-size: 0.65rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; color: #8392ab !important; padding: 0.75rem 1.5rem !important; border-bottom: 1px solid #e9ecef !important; background: transparent !important; white-space: nowrap; }
.table td { font-size: 0.875rem !important; padding: 0.75rem 1.5rem !important; vertical-align: middle !important; border-bottom: 1px solid #e9ecef !important; color: #67748e !important; }
.table-hover tbody tr:hover { background-color: #f8f9fa !important; }
.table-responsive { border-radius: 0.5rem; overflow-x: auto; }

/* ─── BADGES ─── */
.badge { font-size: 0.65rem !important; font-weight: 700 !important; border-radius: 0.375rem !important; padding: 0.35em 0.65em !important; }
.badge-success, .badge.bg-success, .bg-success:not(.btn) { background-color: #22c55e !important; color: #fff !important; }
.badge-danger, .badge.bg-danger, .bg-danger:not(.btn) { background-color: #ef4444 !important; color: #fff !important; }
.badge-warning, .badge.bg-warning, .bg-warning:not(.btn) { background-color: #eab308 !important; color: #000 !important; }
.badge-info, .badge.bg-info, .bg-info:not(.btn) { background-color: #0ea5e9 !important; color: #fff !important; }
.badge-primary, .badge.bg-primary, .bg-primary:not(.btn) { background-color: var(--theme-color, #f97316) !important; color: #fff !important; }
.badge-secondary, .badge.bg-secondary { background-color: #71717a !important; color: #fff !important; }

/* ─── MODALS ─── */
.modal-content { border-radius: 1rem !important; border: none !important; box-shadow: 0 27px 68px 0 rgba(0,0,0,.13) !important; overflow: hidden; background: #fff !important; color: #344767 !important; }
.modal-header { border-bottom: 1px solid #e9ecef !important; padding: 1.25rem 1.5rem !important; background: #fff !important; }
.modal-header .modal-title, .modal-header h5, .modal-header h4 { font-weight: 700 !important; font-size: 1.1rem !important; color: #344767 !important; }
.modal-header .close, .modal-header .btn-close, .modal-header button[class*="close"] { opacity: 0.5; font-size: 1.25rem; }
.modal-body { padding: 1.5rem !important; background: #fff !important; color: #344767 !important; }
.modal-body label, .modal-body p, .modal-body span, .modal-body div { color: #344767 !important; }
.modal-body .text-muted, .modal-body small { color: #67748e !important; }
.modal-footer { border-top: 1px solid #e9ecef !important; padding: 1rem 1.5rem !important; background: #f8f9fa !important; }

/* Force light theme on cards and card bodies */
.card { background: #fff !important; }
.card-body { color: #344767 !important; background: transparent !important; }
.card-header { background: #fff !important; color: #344767 !important; }
.card-header h5, .card-header h6 { color: #344767 !important; }

/* ─── CUSTOM MODAL POPUPS (position:fixed overlays) ─── */
div[style*="position: fixed"][style*="z-index: 9999"] {
    backdrop-filter: blur(4px);
}
div[style*="position: fixed"][style*="z-index: 9999"] > .card,
div[style*="position: fixed"][style*="z-index: 9999"] > div > .card {
    border-radius: 1rem !important;
    border: none !important;
    box-shadow: 0 27px 68px 0 rgba(0,0,0,.13) !important;
    overflow: hidden;
}
div[style*="position: fixed"][style*="z-index: 9999"] .card-header {
    border-bottom: 1px solid #e9ecef !important;
    padding: 1.25rem 1.5rem !important;
    background: #fff !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
div[style*="position: fixed"][style*="z-index: 9999"] .card-header h5,
div[style*="position: fixed"][style*="z-index: 9999"] .card-header h6,
div[style*="position: fixed"][style*="z-index: 9999"] .card-header .card-title {
    font-weight: 700 !important;
    font-size: 1rem !important;
    color: #344767 !important;
    margin: 0 !important;
}
div[style*="position: fixed"][style*="z-index: 9999"] .card-body {
    padding: 1.5rem !important;
}
div[style*="position: fixed"][style*="z-index: 9999"] .card-body .form-group {
    margin-bottom: 1rem;
}
div[style*="position: fixed"][style*="z-index: 9999"] .card-body label {
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    color: #344767 !important;
    margin-bottom: 0.5rem !important;
}
/* Modal footer button alignment */
div[style*="position: fixed"][style*="z-index: 9999"] div[style*="text-align: right"],
div[style*="position: fixed"][style*="z-index: 9999"] div[style*="text-align:right"] {
    border-top: 1px solid #e9ecef;
    padding-top: 1rem !important;
    margin-top: 1.5rem !important;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}
/* Modal close buttons */
div[style*="position: fixed"][style*="z-index: 9999"] .btn-secondary {
    background-color: #f8f9fa !important;
    border: 1px solid #e9ecef !important;
    color: #344767 !important;
    box-shadow: none !important;
}
div[style*="position: fixed"][style*="z-index: 9999"] .btn-secondary:hover {
    background-color: #e9ecef !important;
}
/* Modal primary action buttons use theme color */
div[style*="position: fixed"][style*="z-index: 9999"] .btn-primary {
    background-color: var(--theme-color, #f97316) !important;
    border-color: var(--theme-color, #f97316) !important;
    color: #fff !important;
}
div[style*="position: fixed"][style*="z-index: 9999"] .btn-primary:hover {
    background-color: var(--theme-color-hover, #ea580c) !important;
    border-color: var(--theme-color-hover, #ea580c) !important;
}
.modal-backdrop { background-color: #000; }
.modal-backdrop.show { opacity: 0.5; }

/* ─── CONTENT LIST / MEDIA GALLERY ─── */
.media-gallery { display: block; }
.media-gallery > .nova-media-grid { display: grid !important; }
.media-gallery .card, .media-card { border-radius: 0.75rem !important; overflow: hidden; transition: transform 0.2s, box-shadow 0.2s; }
.media-gallery .card:hover, .media-card:hover { transform: translateY(-3px); box-shadow: 0 12px 24px rgba(0,0,0,.1) !important; }
.media-gallery .card img, .media-card img { width: 100%; height: 140px; object-fit: cover; border-radius: 0.75rem 0.75rem 0 0; }
.media-gallery .card-body, .media-card .card-body { padding: 0.75rem !important; }
.media-gallery .card-body h6, .media-card .card-body h6 { font-size: 0.8rem; font-weight: 600; color: #344767; margin: 0 0 0.25rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.media-gallery .card-body p, .media-card .card-body p { font-size: 0.7rem; color: #67748e; margin: 0; }

/* ─── CHANNEL CARDS ─── */
.channel-card, [class*="channel-card"], .channels-grid > div { border-radius: 0.75rem !important; border: 1px solid #e9ecef !important; padding: 1rem; transition: all 0.2s; background: transparent !important; }
.channel-card:hover, .channels-grid > div:hover { border-color: var(--theme-color, #f97316) !important; box-shadow: 0 8px 20px rgba(0,0,0,.08) !important; transform: translateY(-2px); }

/* ─── DEVICE CARDS ─── */
.device-card, [class*="device-card"] { border-radius: 0.75rem !important; border: 1px solid #e9ecef !important; background: transparent !important; }

/* ─── PAGINATION ─── */
.pagination { gap: 6px; }
.pagination .page-link { border-radius: 0.5rem !important; border: none !important; color: #8392ab !important; font-size: 0.8rem !important; font-weight: 600 !important; padding: 0.4rem 0.75rem !important; background: transparent !important; min-width: 32px; text-align: center; }
.pagination .page-item.active .page-link { background-color: var(--theme-color, #f97316) !important; color: #fff !important; box-shadow: 0 3px 5px -1px rgba(249,115,22,.3) !important; }
.pagination .page-link:hover { background: #f8f9fa !important; color: #344767 !important; }
.pagination .page-item.disabled .page-link { opacity: 0.5; }

/* Pagination containers - align inside card area */
[id$="Pagination"].d-flex {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 0.75rem;
    padding: 0.75rem 1.25rem !important;
    margin-top: 1rem !important;
    box-shadow: 0 20px 27px 0 rgba(0,0,0,.05);
}

/* ─── PROGRESS BARS (Solid Colors - NO Gradients) ─── */
.progress { 
    height: 6px !important; 
    border-radius: 0.5rem !important; 
    background-color: #e9ecef !important; 
    background-image: none !important;
    overflow: visible !important; 
    box-shadow: inset 0 1px 2px rgba(0,0,0,.1) !important; 
}
.progress-bar { 
    border-radius: 0.5rem !important; 
    transition: width 0.6s ease !important; 
    box-shadow: 0 3px 5px -1px rgba(0,0,0,.2), 0 2px 3px -1px rgba(0,0,0,.14) !important; 
    background-image: none !important;
}
.progress-bar.bg-gradient-primary, .bg-gradient-primary.progress-bar { 
    background-color: var(--theme-color, #f97316) !important; 
    background-image: none !important; 
}
.progress-bar.bg-gradient-info, .bg-gradient-info.progress-bar { 
    background-color: #0ea5e9 !important; 
    background-image: none !important; 
}
.progress-bar.bg-gradient-success, .bg-gradient-success.progress-bar { 
    background-color: #22c55e !important; 
    background-image: none !important; 
}
.progress-bar.bg-gradient-warning, .bg-gradient-warning.progress-bar { 
    background-color: #eab308 !important; 
    background-image: none !important; 
}
.progress-bar.bg-gradient-danger, .bg-gradient-danger.progress-bar { 
    background-color: #ef4444 !important; 
    background-image: none !important; 
}
/* Remove ALL gradients globally — except configurator badge swatches */
[class*="bg-gradient"]:not(.badge-colors .badge) { background-image: none !important; }
.bg-gradient-primary:not(.progress-bar):not(.badge-colors .badge) { background-color: var(--theme-color, #f97316) !important; background-image: none !important; }
.bg-gradient-success:not(.progress-bar):not(.badge-colors .badge) { background-color: #22c55e !important; background-image: none !important; }
.bg-gradient-info:not(.progress-bar):not(.badge-colors .badge) { background-color: #0ea5e9 !important; background-image: none !important; }
.bg-gradient-warning:not(.progress-bar):not(.badge-colors .badge) { background-color: #eab308 !important; background-image: none !important; }
.bg-gradient-danger:not(.progress-bar):not(.badge-colors .badge) { background-color: #ef4444 !important; background-image: none !important; }
.bg-gradient-dark:not(.badge-colors .badge) { background-color: #27272a !important; background-image: none !important; }
/* Ensure configurator color swatches keep their gradients */
.badge-colors .badge.bg-gradient-dark { background: #27272a !important; }
.badge-colors .badge.bg-gradient-info { background: #0ea5e9 !important; }
.badge-colors .badge.bg-gradient-success { background: #22c55e !important; }
.badge-colors .badge.bg-gradient-warning { background: #eab308 !important; }
.badge-colors .badge.bg-gradient-danger { background: #ef4444 !important; }

/* ─── ALERTS ─── */
.alert { border: 0 !important; border-radius: 0.75rem !important; padding: 1rem 1.25rem !important; font-size: 0.875rem; }

/* ─── DROPDOWNS ─── */
.dropdown-menu {
    border: 0 !important;
    border-radius: 0.75rem !important;
    box-shadow: 0 8px 26px -4px rgba(20,20,20,.15), 0 8px 9px -5px rgba(20,20,20,.06) !important;
    padding: 0.5rem !important;
    background: #fff !important;
    background-color: #fff !important;
    background-image: none !important;
}
.dropdown-item {
    border-radius: 0.5rem !important;
    font-size: 0.875rem !important;
    padding: 0.5rem 1rem !important;
    color: #67748e !important;
    background: transparent !important;
    background-color: transparent !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    text-decoration: none !important;
    border: none !important;
    width: 100% !important;
    text-align: left !important;
    cursor: pointer !important;
}
.dropdown-item:hover, .dropdown-item:focus { background: #f8f9fa !important; background-color: #f8f9fa !important; color: #344767 !important; }
.dropdown-item.active, .dropdown-item:active { background-color: var(--theme-color, #f97316) !important; color: #fff !important; }

/* ─── SELECT2 ─── */
.select2-container--default .select2-selection--single { border-radius: 0.5rem !important; border: 1px solid #d2d6da !important; height: 38px !important; background-color: #fff !important; }
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 38px !important; color: #495057 !important; }
.select2-container--default.select2-container--open .select2-selection--single { border-color: var(--theme-color, #f97316) !important; box-shadow: 0 0 0 2px rgba(249,115,22,.1) !important; }
.select2-dropdown { border-radius: 0.5rem !important; border: none !important; box-shadow: 0 8px 26px -4px rgba(20,20,20,.15) !important; background-color: #fff !important; }
.select2-results__option { color: #344767 !important; background-color: #fff !important; }
.select2-results__option--highlighted { background-color: var(--theme-color, #f97316) !important; color: #fff !important; }
.select2-search--dropdown .select2-search__field { background-color: #fff !important; color: #344767 !important; border: 1px solid #d2d6da !important; }

/* ─── UPLOAD ZONE ─── */
.upload-zone, #uploadArea { border: 2px dashed #d2d6da !important; border-radius: 1rem !important; background: #fafbfc !important; padding: 2.5rem !important; text-align: center; transition: all 0.3s; cursor: pointer; }
.upload-zone:hover, #uploadArea:hover { border-color: var(--theme-color, #f97316) !important; background: rgba(0,0,0,.02) !important; }
.upload-zone i, #uploadArea i { color: var(--theme-color, #f97316) !important; font-size: 2.5rem; }
.upload-zone h5, #uploadArea h5 { color: #344767; font-weight: 600; }

/* ─── TOAST NOTIFICATIONS ─── */
#toastContainer > div, .toast { border-radius: 0.75rem !important; box-shadow: 0 8px 26px -4px rgba(20,20,20,.15) !important; border: none !important; font-size: 0.875rem; }

/* ─── SECTION HEADERS ─── */
.az-dashboard-title, .content-section h2 { font-size: 1.125rem !important; font-weight: 700 !important; color: #344767 !important; }
.content-section > .d-flex { margin-bottom: 1.5rem; }

/* ─── DATA LISTS (channel list, device list, etc) ─── */
#channelsList, #devicesList, #filesList, #wallsList, #locationsList, #squadsList, #schedulesList, #wallChannelsList { }
#channelsList .card, #channelsList > div,
#devicesList .card, #devicesList > div,
#wallsList .card, #wallsList > div { border-radius: 0.75rem; margin-bottom: 0.75rem; border: 1px solid #e9ecef; background: #fff; transition: all 0.2s; }
#channelsList .card:hover, #channelsList > div:hover,
#devicesList .card:hover, #devicesList > div:hover { box-shadow: 0 8px 20px rgba(0,0,0,.06); transform: translateY(-1px); }



/* ─── TABS ─── */
.nav-tabs { border-bottom: 1px solid #e9ecef; }
.nav-tabs .nav-link { border: none !important; color: #67748e; font-weight: 600; font-size: 0.875rem; padding: 0.75rem 1.25rem; }
.nav-tabs .nav-link.active { color: #344767; border-bottom: 2px solid var(--theme-color, #f97316) !important; background: transparent; }
.nav-pills .nav-link { border-radius: 0.5rem; font-weight: 600; font-size: 0.8rem; color: #67748e; }
.nav-pills .nav-link.active { background-color: var(--theme-color, #f97316) !important; color: #fff !important; }

/* ─── SUBSCRIPTION / PLAN CARDS ─── */
.plan-card, .pricing-card, [class*="plan-card"] { border-radius: 1rem !important; border: 1px solid #e9ecef !important; transition: all 0.3s; }
.plan-card:hover, .pricing-card:hover { transform: translateY(-5px); box-shadow: 0 20px 27px 0 rgba(0,0,0,.08) !important; }
.plan-card.active, .plan-card.current, .pricing-card.active { border-color: var(--theme-color, #f97316) !important; box-shadow: 0 0 0 2px rgba(249,115,22,.2) !important; }

/* Subscription section stats cards */
#currentPlanSection .bg-light {
    background: #f8f9fa !important;
    border: 1px solid #e9ecef;
    border-radius: 0.75rem !important;
    transition: all 0.2s;
}
#currentPlanSection .bg-light:hover {
    border-color: var(--theme-color, #f97316);
    box-shadow: 0 4px 12px rgba(249,115,22,0.1);
}
#currentPlanSection .bg-light h5 {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
}
#currentPlanSection .text-primary {
    color: var(--theme-color, #f97316) !important;
}
#subscriptionSection .bg-gradient-primary {
    background: var(--theme-gradient, linear-gradient(135deg, #f97316, #ea580c)) !important;
}
#subscriptionSection .card-header {
    padding: 1.25rem 1.5rem !important;
    border-bottom: 1px solid #e9ecef !important;
}
#subscriptionSection .card-header h6 {
    font-weight: 700 !important;
    color: #344767 !important;
    font-size: 0.9rem !important;
}
#usageSection .progress {
    height: 8px;
    border-radius: 4px;
    background: #e9ecef;
}
#usageSection .progress-bar {
    border-radius: 4px;
}
#usageSection .progress-bar.bg-success { background-color: #22c55e !important; }
#usageSection .progress-bar.bg-warning { background-color: #eab308 !important; }
#usageSection .progress-bar.bg-info { background-color: #0ea5e9 !important; }
#addonsSection .border {
    border-color: #e9ecef !important;
    border-radius: 0.75rem !important;
    transition: all 0.2s;
}
#addonsSection .border:hover {
    border-color: var(--theme-color, #f97316) !important;
    box-shadow: 0 4px 12px rgba(249,115,22,0.08);
}
#historySection .table th {
    border-top: none !important;
}
#subscriptionSection .alert-info {
    background: rgba(14, 165, 233, 0.05) !important;
    border: 1px solid rgba(14, 165, 233, 0.15) !important;
    color: #0284c7 !important;
    border-radius: 0.75rem !important;
}

/* ─── SCROLLBAR GLOBAL ─── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: #d2d6da; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #adb5bd; }
::-webkit-scrollbar-track { background: transparent; }

/* ─── TYPOGRAPHY ─── */
h1, h2, h3, h4, h5, h6 { font-family: 'Inter', sans-serif; color: #344767; }
p { color: #67748e; }
.text-muted { color: #8392ab !important; }
.text-sm { font-size: 0.875rem !important; }
.text-xs { font-size: 0.75rem !important; }
.font-weight-bolder { font-weight: 700 !important; }
.font-weight-bold { font-weight: 600 !important; }

/* ─── MISC UTILITIES ─── */
.shadow { box-shadow: 0 20px 27px 0 rgba(0,0,0,.05) !important; }
.border-radius-lg { border-radius: 0.75rem !important; }
.border-radius-xl { border-radius: 1rem !important; }
.border-radius-2xl { border-radius: 1.5rem !important; }
.bg-gray-100 { background-color: #f8f9fa !important; }

/* ─── CONTENT SECTION SPACING ─── */
.content-section { animation: fadeInSection 0.3s ease; }
@keyframes fadeInSection { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ─── FIX: Container-fluid padding override - consistent across all pages ─── */
.container-fluid.py-4,
.az-content .container-fluid,
.az-content-dashboard .container-fluid {
    padding-top: 1rem !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    padding-bottom: 1rem !important;
}

/* ─── FIX D-NONE for hidden sections ─── */
.d-none { display: none !important; }

/* ─── CUSTOM SWITCH/TOGGLE ─── */
.custom-switch .custom-control-label::before { border-radius: 1rem; }
.custom-switch .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--theme-color, #f97316); border-color: var(--theme-color, #f97316); }

/* Bootstrap 5 form-switch - theme color */
.form-check-input:checked {
  background-color: var(--theme-color, #f97316) !important;
  border-color: var(--theme-color, #f97316) !important;
}
.form-switch .form-check-input:checked {
  background-color: var(--theme-color, #f97316) !important;
  border-color: var(--theme-color, #f97316) !important;
}

/* ─── SIDEBAR SCROLLBAR FIX (no jump on hover) ─── */
.sidenav.ps {
    overflow: hidden !important;
}
.sidenav.ps > .ps__rail-y {
    width: 0 !important;
    right: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    display: none !important;
}
.sidenav.ps:hover > .ps__rail-y {
    opacity: 0 !important;
    display: none !important;
}
.sidenav .navbar-collapse {
    max-height: calc(100vh - 150px);
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}
.sidenav:hover .navbar-collapse {
    scrollbar-color: rgba(0,0,0,0.15) transparent;
}
.sidenav .navbar-collapse::-webkit-scrollbar {
    width: 4px;
}
.sidenav .navbar-collapse::-webkit-scrollbar-track {
    background: transparent;
}
.sidenav .navbar-collapse::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 4px;
}
.sidenav:hover .navbar-collapse::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.15);
}

/* ─── SIDEBAR ACTIVE STATE (reinforce) ─── */
.sidenav.navbar-vertical .navbar-nav > .nav-item .nav-link.active { background-color: #fff !important; box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1) !important; color: #27272a !important; font-weight: 600 !important; }
.sidenav.navbar-vertical .navbar-nav > .nav-item .nav-link.active .icon { background-color: transparent !important; }
.sidenav.navbar-vertical .navbar-nav > .nav-item .nav-link.active .icon i { color: #fff !important; }
.sidenav[data-color=primary] .navbar-nav > .nav-item .nav-link.active .icon { background-image: linear-gradient(310deg, #f97316, #f97316) !important; }
.sidenav[data-color=dark] .navbar-nav > .nav-item .nav-link.active .icon { background-image: linear-gradient(310deg, #27272a, #27272a) !important; }
.sidenav[data-color=info] .navbar-nav > .nav-item .nav-link.active .icon { background-image: linear-gradient(310deg, #0ea5e9, #0ea5e9) !important; }
.sidenav[data-color=success] .navbar-nav > .nav-item .nav-link.active .icon { background-image: linear-gradient(310deg, #22c55e, #22c55e) !important; }
.sidenav[data-color=warning] .navbar-nav > .nav-item .nav-link.active .icon { background-image: linear-gradient(310deg, #eab308, #eab308) !important; }
.sidenav[data-color=danger] .navbar-nav > .nav-item .nav-link.active .icon { background-image: linear-gradient(310deg, #ef4444, #ef4444) !important; }
.sidenav .nav-link .icon i { color: #344767 !important; font-size: 14px !important; }
.sidenav .nav-link-text { font-size: 0.875rem; color: inherit; }

/* ─── TOP NAVBAR TRANSPARENT ─── */
.navbar-main { background: transparent !important; box-shadow: none !important; }

/* ══════════════════════════════════════════════════════════════
   NOVA MEDIA GRID — Adapted for Soft UI light theme
   Used by: content list, channel list, schedules, locations, designs
   ══════════════════════════════════════════════════════════════ */
.nova-media-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 1.25rem !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}
@media (max-width: 767px) { .nova-media-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 479px) { .nova-media-grid { grid-template-columns: minmax(0, 1fr) !important; } }

.nova-media-card {
    background: #fff !important;
    border: 1px solid #e9ecef !important;
    border-radius: 0.75rem !important;
    overflow: hidden !important;
    transition: all 0.2s ease !important;
    cursor: pointer;
    position: relative;
    min-width: 0 !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
}
.nova-media-card::before { display: none !important; }
.nova-media-card:hover {
    border-color: var(--theme-color, #f97316) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 12px 24px rgba(0,0,0,.08) !important;
}

.nova-media-thumb {
    position: relative;
    width: 100% !important;
    height: 140px !important;
    min-height: 140px !important;
    background: #f0f2f5;
    display: flex !important;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}
.nova-media-thumb img,
.nova-media-thumb video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.3s ease;
    display: block !important;
}
.nova-media-card:hover .nova-media-thumb img,
.nova-media-card:hover .nova-media-thumb video {
    transform: scale(1.03);
}

.nova-type-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 0.35rem;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.nova-type-image { background: rgba(34,197,94,0.1); color: #16a34a; border: 1px solid rgba(34,197,94,0.2); }
.nova-type-video { background: rgba(239,68,68,0.1); color: #dc2626; border: 1px solid rgba(239,68,68,0.2); }
.nova-type-webpage { background: rgba(14,165,233,0.1); color: #0284c7; border: 1px solid rgba(14,165,233,0.2); }

.nova-duration {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0,0,0,0.75);
    color: #fff;
    padding: 2px 7px;
    border-radius: 0.25rem;
    font-size: 0.68rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.nova-media-info {
    padding: 0.75rem 0.85rem;
}

.nova-media-name-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}

.nova-media-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: #344767 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

.nova-media-actions {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
}

.nova-icon-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.375rem;
    border: none;
    background: transparent;
    cursor: pointer;
    transition: all 0.15s;
    font-size: 0.75rem;
}
.nova-icon-btn--blue { color: #67748e; }
.nova-icon-btn--blue:hover { background: rgba(249,115,22,0.08); color: var(--theme-color, #f97316); }
.nova-icon-btn--red { color: #ef4444; }
.nova-icon-btn--red:hover { background: rgba(239,68,68,0.08); color: #dc2626; }

.nova-media-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.nova-media-meta span {
    font-size: 0.7rem;
    color: #8392ab;
    font-weight: 500;
}

/* File size in media cards */
.nova-media-size {
    font-size: 0.68rem;
    color: #8392ab;
}

/* Preview overlay on hover */
.nova-preview-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
}
.nova-media-card:hover .nova-preview-overlay { opacity: 1; }

/* Media thumbnail placeholder icons */
.nova-media-thumb i {
    font-size: 2rem;
    color: #adb5bd;
}
.nova-media-thumb[style*="background"] i,
.nova-media-thumb[style*="gradient"] i {
    color: rgba(255,255,255,0.9) !important;
    font-size: 2rem;
}

/* ─── Force parent containers to allow grid to work ─── */
#filesList, #channelsList, #devicesList, #wallsList, #locationsList, #squadsList, #schedulesList, #wallChannelsList, #designsList, #usersList {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
}
/* Remove extra padding from card-body when it contains a grid */
.card-body:has(> .nova-media-grid),
.card-body:has(> div > .nova-media-grid) {
    padding: 1rem !important;
}
#filesList > .nova-media-grid,
#channelsList > .nova-media-grid,
#devicesList > .nova-media-grid,
#wallsList > .nova-media-grid,
#locationsList > .nova-media-grid,
#squadsList > .nova-media-grid,
#schedulesList > .nova-media-grid,
#wallChannelsList > .nova-media-grid,
#designsList > .nova-media-grid,
.card-body > .nova-media-grid,
.card-body > div > .nova-media-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
@media (max-width: 1199px) {
    #filesList > .nova-media-grid, #channelsList > .nova-media-grid,
    .card-body > .nova-media-grid, .card-body > div > .nova-media-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 767px) {
    #filesList > .nova-media-grid, #channelsList > .nova-media-grid,
    .card-body > .nova-media-grid, .card-body > div > .nova-media-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* ═══ FORCE ALL DYNAMIC MENUS/DROPDOWNS TO WHITE ═══ 
   Overrides inline background: #131829 set by app-main.js & app-inline.js */
.channel-actions-menu,
.schedule-actions-menu,
.file-actions-menu,
.device-actions-menu,
.design-actions-menu,
.location-actions-menu,
#userMenuDropdown,
#languageMenuDropdown,
#notificationDropdown,
#locationDropdown,
#wallLocationList,
#wallLocationDropdown,
.search-dropdown,
[class*="-actions-menu"],
[class*="-menu-dropdown"],
div[style*="131829"],
div[style*="background: #1"] {
    background: #fff !important;
    background-color: #fff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
}

/* Force all links/buttons inside dynamic menus to have light-theme colors */
.channel-actions-menu a,
.schedule-actions-menu a,
.file-actions-menu a,
.design-actions-menu a,
.location-actions-menu a,
[class*="-actions-menu"] a,
[class*="-menu-dropdown"] a,
#userMenuDropdown a,
#languageMenuDropdown a,
div[style*="131829"] a,
div[style*="131829"] div[style*="padding"],
div[style*="131829"] button {
    color: #344767 !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid #f1f5f9 !important;
    border-radius: 0 !important;
    padding: 0.5rem 0.75rem !important;
    display: flex !important;
    align-items: center !important;
    transition: background 0.15s !important;
}
.channel-actions-menu a:hover,
.schedule-actions-menu a:hover,
.design-actions-menu a:hover,
.location-actions-menu a:hover,
[class*="-actions-menu"] a:hover,
[class*="-menu-dropdown"] a:hover,
#userMenuDropdown a:hover,
#languageMenuDropdown a:hover,
div[style*="131829"] a:hover,
div[style*="131829"] div[style*="padding"]:hover {
    background: #f1f5f9 !important;
    background-color: #f1f5f9 !important;
}

/* Location dropdown options */
#locationDropdown div,
#wallLocationList div,
#wallLocationDropdown div,
.location-option {
    color: #344767 !important;
    background-color: #fff !important;
}
#locationDropdown div:hover,
#wallLocationList div:hover,
#wallLocationDropdown div:hover,
.location-option:hover {
    background-color: #f1f5f9 !important;
}

/* Delete buttons stay red */
.channel-actions-menu a[onclick*="delete"],
.channel-actions-menu a[style*="dc3545"],
[class*="-actions-menu"] a[onclick*="delete"],
[class*="-actions-menu"] a[style*="dc3545"],
[class*="-actions-menu"] a[onclick*="Delete"],
a[style*="color: #dc3545"],
a[style*="color: rgb(220, 53, 69)"] {
    color: #ef4444 !important;
}

/* User menu info section */
#userMenuDropdown div[style*="padding: 15px"] {
    border-bottom: 1px solid #e9ecef !important;
    background: transparent !important;
}
#userMenuDropdown div[style*="font-weight: 600"],
#userMenuDropdown div[style*="font-weight:600"] {
    color: #344767 !important;
}

/* ═══ USER MENU POPUP - MAXIMUM PRIORITY FIX ═══ */
/* Target the fixed position div that shows the user menu */
body > div[style*="position: fixed"][style*="rgba(0,0,0,0.5)"] {
    background: rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: none !important;
}

/* The card inside the fixed position div - FORCE WHITE */
body > div[style*="position: fixed"] > .card,
body > div[style*="position: fixed"] .card {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    border: 1px solid #e9ecef !important;
    box-shadow: 0 27px 68px 0 rgba(0,0,0,.13) !important;
}

/* Card header in user menu - FORCE WHITE */
body > div[style*="position: fixed"] .card-header {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    border-bottom: 1px solid #e9ecef !important;
}

/* Card title */
body > div[style*="position: fixed"] .card-title,
body > div[style*="position: fixed"] .card-header h6 {
    color: #344767 !important;
}

/* Card body - FORCE WHITE */
body > div[style*="position: fixed"] .card-body {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
}

/* All divs inside the modal - FORCE TRANSPARENT */
body > div[style*="position: fixed"] .card-body > div,
body > div[style*="position: fixed"] .card-body div[style] {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* User info text */
body > div[style*="position: fixed"] .card-body strong {
    color: #344767 !important;
}

body > div[style*="position: fixed"] .card-body .text-muted,
body > div[style*="position: fixed"] .card-body small {
    color: #8392ab !important;
}

/* Close button — popup × buttons */
div[style*="position: fixed"] .card-header button[onclick*="remove"],
div[style*="position: fixed"] .card-header button[onclick*="close"] {
    color: var(--theme-color, #f97316) !important;
    background: none !important;
    border: none !important;
    font-size: 1.3rem !important;
    cursor: pointer !important;
    width: 28px !important;
    height: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    padding: 0 !important;
    line-height: 1 !important;
    transition: background 0.2s !important;
    box-shadow: none !important;
}

div[style*="position: fixed"] .card-header button[onclick*="remove"]:hover,
div[style*="position: fixed"] .card-header button[onclick*="close"]:hover {
    background: #f0f2f5 !important;
}

/* Ensure card-header has flex layout for title + close */
div[style*="position: fixed"] .card-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

/* Buttons in user menu */
body > div[style*="position: fixed"] .btn-light {
    background: #f8f9fa !important;
    background-color: #f8f9fa !important;
    background-image: none !important;
    border: 1px solid #e9ecef !important;
    color: #344767 !important;
}

body > div[style*="position: fixed"] .btn-light:hover {
    background: #e9ecef !important;
    background-color: #e9ecef !important;
}

body > div[style*="position: fixed"] .btn-danger {
    background-color: #ef4444 !important;
    background-image: none !important;
    border-color: #ef4444 !important;
    color: #fff !important;
}

/* NUCLEAR OPTION - Override ANY background color in the modal */
body > div[style*="position: fixed"] .card *:not(.btn):not(.badge):not(.modal-close-btn):not(button) {
    background-color: transparent !important;
    background-image: none !important;
}