/**
 * UI Fixes - Compact Dropdowns, Cards, Spacing & Layout Improvements
 * Fixes for: dropdowns, cards, spacing, livestream vehicle selection
 * Applied after professional.css
 */

/* ==================== SIDEBAR NAVIGATION - WHITE TEXT ==================== */

/* Force white color on all sidebar nav items and their text */
.sidebar .nav-item,
.sidebar .nav-item a,
.sidebar a.nav-item,
nav .nav-item,
.nav-section .nav-item,
.sidebar-nav .nav-item,
a.nav-item {
    color: #ffffff !important;
}

/* Target the span text inside nav items - AGGRESSIVE OVERRIDE */
.sidebar .nav-item span,
.sidebar .nav-item > span,
.sidebar a.nav-item span,
.nav-section .nav-item span,
.sidebar-nav .nav-item span,
a.nav-item span,
.nav-item span {
    color: #ffffff !important;
    opacity: 1 !important;
}

/* Ensure all text elements inside nav-item are white */
.sidebar .nav-item *,
.nav-section .nav-item *,
a.nav-item * {
    color: inherit !important;
}

.sidebar .nav-item:hover,
.sidebar .nav-item.active,
.sidebar .nav-item:hover span,
.sidebar .nav-item.active span,
a.nav-item:hover span,
a.nav-item.active span {
    color: #ffffff !important;
}

/* Icons */
.sidebar .nav-item i,
.sidebar a.nav-item i,
.nav-section .nav-item i,
a.nav-item i {
    color: #ffffff !important;
    opacity: 0.85 !important;
}

.sidebar .nav-item:hover i,
.sidebar .nav-item.active i,
a.nav-item:hover i,
a.nav-item.active i {
    color: #a78bfa !important;
    opacity: 1 !important;
}

/* Nav section titles */
.sidebar .nav-section-title,
.nav-section .nav-section-title {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* ==================== COMPACT DROPDOWNS & FORM CONTROLS ==================== */

/* Make all filter dropdowns smaller and more compact */
.filters-bar .form-control,
.filters-form .form-control,
.filter-row .form-control,
.filter-group .form-control,
.filter-panel .form-control,
.report-filters .form-control {
    min-height: 36px !important;
    height: 36px !important;
    padding: 6px 12px !important;
    font-size: 13px !important;
}

/* Adjust select dropdown arrow position for smaller controls */
.filters-bar select.form-control,
.filters-form select.form-control,
.filter-row select.form-control,
.filter-group select.form-control,
.filter-panel select.form-control,
.report-filters select.form-control {
    padding-right: 32px !important;
    background-position: right 10px center !important;
}

/* Filter group label styling - more compact */
.filter-group label,
.filters-bar label,
.filters-form label {
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: var(--gray-600) !important;
    margin-bottom: 4px !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.filter-group label i,
.filters-bar label i,
.filters-form label i {
    font-size: 10px !important;
    opacity: 0.7 !important;
}

/* ==================== FILTERS BAR LAYOUT ==================== */

.filters-bar {
    background: var(--bg-card) !important;
    border-radius: var(--radius-lg) !important;
    padding: 16px 20px !important;
    margin-bottom: 20px !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow-xs) !important;
}

.filters-form {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-end !important;
    gap: 12px !important;
}

.filter-group {
    display: flex !important;
    flex-direction: column !important;
    min-width: 140px !important;
    flex: 1 !important;
    max-width: 200px !important;
}

.filter-actions {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
    margin-left: auto !important;
}

.filter-actions .btn {
    height: 36px !important;
    padding: 0 14px !important;
    font-size: 13px !important;
}

/* ==================== PLAYBACK FILTER PANEL ==================== */

.filter-panel {
    background: var(--bg-card) !important;
    border-radius: var(--radius-lg) !important;
    border: 1px solid var(--border) !important;
    margin-bottom: 20px !important;
    overflow: hidden !important;
}

.filter-panel-header {
    padding: 12px 16px !important;
    background: var(--gray-50) !important;
    border-bottom: 1px solid var(--border) !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    cursor: pointer !important;
}

.filter-panel-header h3 {
    font-size: 14px !important;
    font-weight: 600 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.filter-panel-header h3 i {
    color: var(--primary) !important;
    font-size: 14px !important;
}

.filter-panel-body {
    padding: 16px !important;
}

.filter-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    align-items: flex-end !important;
}

.filter-row .filter-group {
    flex: 1 1 150px !important;
    max-width: 180px !important;
}

/* Filter summary tags */
.filter-summary {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    flex: 1 !important;
}

.filter-tag {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 4px 10px !important;
    background: var(--primary-light) !important;
    color: var(--primary) !important;
    border-radius: var(--radius-full) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
}

.filter-tag.muted {
    background: var(--gray-100) !important;
    color: var(--gray-500) !important;
}

.filter-tag i {
    font-size: 10px !important;
}

.filter-toggle-btn {
    background: none !important;
    border: none !important;
    padding: 4px 8px !important;
    color: var(--gray-500) !important;
    cursor: pointer !important;
    transition: all var(--transition) !important;
}

.filter-toggle-btn:hover {
    color: var(--primary) !important;
}

/* ==================== REPORT FILTERS ==================== */

.report-filters {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    align-items: flex-end !important;
}

.report-filters .form-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    align-items: flex-end !important;
    width: 100% !important;
}

.report-filters .form-group {
    flex: 1 1 180px !important;
    margin-bottom: 0 !important;
}

.report-filters .form-label {
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 4px !important;
}

/* ==================== CARDS - PROPER SIZING & ALIGNMENT ==================== */

/* Dashboard Cards */
.dashboard-card,
.card {
    background: var(--bg-card) !important;
    border-radius: var(--radius-lg) !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow-xs) !important;
    overflow: hidden !important;
    margin-bottom: 16px !important;
}

.card-header,
.dashboard-card .card-header {
    padding: 12px 16px !important;
    background: var(--gray-50) !important;
    border-bottom: 1px solid var(--border) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    min-height: 48px !important;
}

.card-header h3,
.card-header .card-title {
    font-size: 14px !important;
    font-weight: 600 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.card-header h3 i,
.card-header .card-title i {
    color: var(--primary) !important;
    font-size: 14px !important;
}

.card-body,
.dashboard-card .card-body {
    padding: 16px !important;
}

/* Stat Cards - Compact */
.stat-card {
    padding: 16px !important;
    gap: 12px !important;
}

.stat-card .stat-icon {
    width: 44px !important;
    height: 44px !important;
    font-size: 18px !important;
}

.stat-card .stat-value {
    font-size: 26px !important;
}

.stat-card .stat-label {
    font-size: 12px !important;
}

/* Mini stat cards for ADAS/DMS pages */
.stat-card.mini {
    padding: 12px 14px !important;
    gap: 10px !important;
}

.stat-card.mini .stat-icon {
    width: 36px !important;
    height: 36px !important;
    font-size: 14px !important;
}

.stat-card.mini .stat-value {
    font-size: 20px !important;
}

.stat-card.mini .stat-label {
    font-size: 11px !important;
}

/* Stats Grid - 6 columns for ADAS types */
.stats-grid-6 {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 12px !important;
    margin-bottom: 20px !important;
}

@media (max-width: 1400px) {
    .stats-grid-6 {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (max-width: 768px) {
    .stats-grid-6 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ==================== DASHBOARD SPECIFIC FIXES ==================== */

/* Quick Stats Grid - Compact */
.quick-stats-grid {
    gap: 12px !important;
    margin-bottom: 20px !important;
}

.quick-stat {
    padding: 14px 16px !important;
    gap: 12px !important;
}

.quick-stat-icon {
    width: 42px !important;
    height: 42px !important;
    font-size: 18px !important;
}

.quick-stat-value {
    font-size: 22px !important;
}

.quick-stat-label {
    font-size: 12px !important;
}

/* Event Cards - Compact */
.events-cards-grid {
    gap: 12px !important;
}

.event-card {
    padding: 16px !important;
}

.event-card-header {
    margin-bottom: 12px !important;
    gap: 10px !important;
}

.event-card-icon {
    width: 38px !important;
    height: 38px !important;
    font-size: 16px !important;
}

.event-card-title {
    font-size: 13px !important;
}

.event-card-value {
    font-size: 28px !important;
    margin-bottom: 6px !important;
}

.event-card-link {
    font-size: 12px !important;
}

/* Analytics Cards - Compact */
.analytics-grid {
    gap: 12px !important;
}

.analytics-card {
    padding: 14px !important;
}

.analytics-card-icon {
    width: 40px !important;
    height: 40px !important;
    font-size: 16px !important;
    margin-bottom: 8px !important;
}

.analytics-card-value {
    font-size: 20px !important;
}

.analytics-card-label {
    font-size: 11px !important;
}

/* Ranking Cards - Compact */
.ranking-card-header {
    padding: 12px 16px !important;
}

.ranking-card-header h3 {
    font-size: 14px !important;
}

.ranking-list {
    max-height: 280px !important;
}

.ranking-item {
    padding: 10px 16px !important;
    gap: 10px !important;
}

.ranking-position {
    width: 24px !important;
    height: 24px !important;
    font-size: 11px !important;
}

.ranking-name {
    font-size: 13px !important;
}

.ranking-value {
    font-size: 13px !important;
}

/* Activity Card - Compact */
.activity-card-header {
    padding: 12px 16px !important;
}

.activity-card-header h3 {
    font-size: 14px !important;
}

.activity-item {
    padding: 10px 16px !important;
    gap: 10px !important;
}

.activity-icon {
    width: 32px !important;
    height: 32px !important;
    font-size: 12px !important;
}

.activity-title {
    font-size: 13px !important;
}

.activity-meta {
    font-size: 11px !important;
}

/* Distribution Card - Compact */
.distribution-card-header {
    padding: 12px 16px !important;
}

.distribution-card-header h3 {
    font-size: 14px !important;
}

.distribution-content {
    padding: 14px 16px !important;
}

.distribution-item {
    margin-bottom: 12px !important;
}

.distribution-label {
    font-size: 12px !important;
    margin-bottom: 4px !important;
}

.distribution-bar {
    height: 6px !important;
}

/* Quick Actions - Compact */
.quick-actions {
    padding: 14px 16px !important;
}

.quick-actions h3 {
    font-size: 14px !important;
    margin-bottom: 12px !important;
}

.quick-action-grid {
    gap: 8px !important;
}

.quick-action-btn {
    padding: 12px !important;
}

.quick-action-btn i {
    font-size: 18px !important;
    margin-bottom: 6px !important;
}

.quick-action-btn span {
    font-size: 11px !important;
}

/* Dashboard Main Grid - Better spacing */
.dashboard-main-grid {
    gap: 16px !important;
    margin-bottom: 20px !important;
}

.dashboard-left {
    gap: 16px !important;
}

.dashboard-right {
    gap: 16px !important;
}

/* Dashboard Hero - Compact */
.dashboard-hero {
    padding: 24px !important;
    margin-bottom: 20px !important;
}

.hero-text h1 {
    font-size: 24px !important;
}

.hero-text p {
    font-size: 14px !important;
    margin-bottom: 12px !important;
}

.hero-stats {
    gap: 24px !important;
}

.hero-stat-value {
    font-size: 28px !important;
}

.hero-stat-label {
    font-size: 12px !important;
}

/* ==================== LIVESTREAM PAGE FIXES ==================== */

/* Vehicle Selection - Add Dropdown Option */
.device-quick-select {
    background: var(--bg-card) !important;
    border-radius: var(--radius-lg) !important;
    padding: 14px 16px !important;
    margin-bottom: 16px !important;
    border: 1px solid var(--border) !important;
}

.quick-select-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 10px !important;
}

.quick-select-header h3 {
    font-size: 14px !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
}

.quick-select-header h3 i {
    color: var(--primary) !important;
}

.quick-select-controls {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.device-count {
    font-size: 12px !important;
    color: var(--gray-500) !important;
    background: var(--gray-100) !important;
    padding: 4px 10px !important;
    border-radius: var(--radius-full) !important;
}

.view-toggle-btn {
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--gray-100) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    color: var(--gray-500) !important;
    cursor: pointer !important;
    transition: all var(--transition) !important;
}

.view-toggle-btn:hover {
    background: var(--gray-200) !important;
    color: var(--primary) !important;
}

.device-dropdown-view {
    margin-top: 10px !important;
}

.device-dropdown-view .form-control {
    max-width: 300px !important;
}

/* Device Pills - Compact */
.device-pills {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.device-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 12px !important;
    background: var(--gray-100) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-full) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--text-secondary) !important;
    text-decoration: none !important;
    transition: all var(--transition) !important;
    cursor: pointer !important;
}

.device-pill:hover {
    background: var(--gray-200) !important;
    border-color: var(--gray-300) !important;
}

.device-pill.active {
    background: var(--primary-light) !important;
    border-color: var(--primary) !important;
    color: var(--primary) !important;
}

.device-pill.online .device-status-dot {
    background: var(--success) !important;
}

.device-pill.offline .device-status-dot {
    background: var(--gray-400) !important;
}

.device-status-dot {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
}

.device-pill-name {
    max-width: 100px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.device-pill.more {
    background: var(--primary-light) !important;
    color: var(--primary) !important;
    border-color: transparent !important;
}

.device-pill.more:hover {
    background: var(--primary) !important;
    color: white !important;
}

/* Livestream Hero - Compact */
.livestream-hero,
.playback-hero {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%) !important;
    border-radius: var(--radius-lg) !important;
    padding: 20px 24px !important;
    margin-bottom: 16px !important;
    color: white !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
}

.livestream-hero .hero-content,
.playback-hero .hero-content {
    display: flex !important;
    align-items: center !important;
    gap: 24px !important;
    flex-wrap: wrap !important;
}

.livestream-hero .hero-text h1,
.playback-hero .hero-text h1 {
    font-size: 20px !important;
    font-weight: 700 !important;
    margin-bottom: 4px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.livestream-hero .hero-text p,
.playback-hero .hero-text p {
    font-size: 13px !important;
    opacity: 0.9 !important;
    margin: 0 !important;
}

.livestream-hero .hero-stats,
.playback-hero .hero-stats {
    display: flex !important;
    gap: 20px !important;
}

.livestream-hero .hero-stat,
.playback-hero .hero-stat {
    text-align: center !important;
}

.livestream-hero .hero-stat-value,
.playback-hero .hero-stat-value {
    font-size: 22px !important;
    font-weight: 700 !important;
    display: block !important;
}

.livestream-hero .hero-stat-label,
.playback-hero .hero-stat-label {
    font-size: 11px !important;
    opacity: 0.85 !important;
}

.hero-actions {
    display: flex !important;
    gap: 8px !important;
}

.btn-glass {
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    color: white !important;
    backdrop-filter: blur(10px) !important;
    padding: 8px 14px !important;
    font-size: 13px !important;
}

.btn-glass:hover {
    background: rgba(255, 255, 255, 0.25) !important;
}

/* Demo Banner - Compact */
.demo-banner {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%) !important;
    border: 1px solid #f59e0b !important;
    border-radius: var(--radius) !important;
    padding: 10px 16px !important;
    margin-bottom: 16px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 13px !important;
    color: #92400e !important;
}

.demo-banner i {
    font-size: 16px !important;
    color: #f59e0b !important;
}

/* ==================== ACTIVE SAFETY PAGE ==================== */

.stats-row {
    margin-bottom: 16px !important;
}

.stat-box {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    background: var(--bg-card) !important;
    border-radius: var(--radius-lg) !important;
    padding: 14px 18px !important;
    border: 1px solid var(--border) !important;
}

.stat-box .stat-icon {
    width: 44px !important;
    height: 44px !important;
    border-radius: var(--radius) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
}

.stat-box.primary .stat-icon {
    background: var(--primary-light) !important;
    color: var(--primary) !important;
}

.stat-box .stat-info {
    display: flex !important;
    flex-direction: column !important;
}

.stat-box .stat-number {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: var(--text-primary) !important;
}

.stat-box .stat-label {
    font-size: 12px !important;
    color: var(--text-muted) !important;
}

/* Event Tabs - Compact */
.event-tabs {
    display: flex !important;
    gap: 8px !important;
    margin-bottom: 16px !important;
    flex-wrap: wrap !important;
}

.tab-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 16px !important;
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--text-secondary) !important;
    text-decoration: none !important;
    transition: all var(--transition) !important;
}

.tab-item:hover {
    background: var(--gray-100) !important;
    border-color: var(--gray-300) !important;
}

.tab-item.active {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: white !important;
}

.tab-item .badge {
    padding: 2px 8px !important;
    font-size: 11px !important;
    background: rgba(0, 0, 0, 0.1) !important;
    border-radius: var(--radius-full) !important;
}

.tab-item.active .badge {
    background: rgba(255, 255, 255, 0.2) !important;
}

/* Safety Grid Layout */
.safety-grid {
    display: grid !important;
    grid-template-columns: 350px 1fr !important;
    gap: 16px !important;
}

.left-panel {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}

@media (max-width: 1200px) {
    .safety-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Violators Chart - Compact */
.violators-chart {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.violator-item {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

.violator-info {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    font-size: 12px !important;
}

.violator-info .device-name {
    color: var(--text-secondary) !important;
    font-weight: 500 !important;
}

.violator-info .violation-count {
    color: var(--danger) !important;
    font-weight: 600 !important;
}

.violator-bar {
    height: 6px !important;
    background: var(--gray-100) !important;
    border-radius: 3px !important;
    overflow: hidden !important;
}

.violator-bar .bar-fill {
    height: 100% !important;
    background: linear-gradient(90deg, var(--danger), #f97316) !important;
    border-radius: 3px !important;
    transition: width 0.5s ease !important;
}

/* Device Events List */
.device-events-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    max-height: 200px !important;
    overflow-y: auto !important;
}

.device-event-item {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 8px 10px !important;
    background: var(--gray-50) !important;
    border-radius: var(--radius) !important;
    font-size: 12px !important;
}

.device-event-item .device-name {
    color: var(--text-secondary) !important;
}

.device-event-item .event-count {
    background: var(--primary-light) !important;
    color: var(--primary) !important;
    padding: 2px 8px !important;
    border-radius: var(--radius-full) !important;
    font-weight: 600 !important;
    font-size: 11px !important;
}

/* ==================== REPORT TABS ==================== */

.report-tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
}

.report-tab {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 8px 14px !important;
    background: var(--gray-100) !important;
    border-radius: var(--radius) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--text-secondary) !important;
    text-decoration: none !important;
    transition: all var(--transition) !important;
}

.report-tab:hover {
    background: var(--gray-200) !important;
}

.report-tab.active {
    background: var(--primary) !important;
    color: white !important;
}

.report-tab i {
    font-size: 12px !important;
}

/* ==================== GENERAL SPACING FIXES ==================== */

/* Reduce margins between sections */
.mb-3 {
    margin-bottom: 16px !important;
}

.mb-4 {
    margin-bottom: 20px !important;
}

/* Alert Demo - Compact */
.alert-demo {
    background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%) !important;
    border: 1px solid var(--primary) !important;
    border-radius: var(--radius) !important;
    padding: 10px 16px !important;
    margin-bottom: 16px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 13px !important;
    color: var(--primary-dark) !important;
}

.alert-demo i {
    font-size: 16px !important;
    color: var(--primary) !important;
}

/* Empty State - Compact */
.empty-state {
    text-align: center !important;
    padding: 30px 20px !important;
    color: var(--text-muted) !important;
}

.empty-state i {
    font-size: 36px !important;
    margin-bottom: 12px !important;
    opacity: 0.4 !important;
}

.empty-state h3 {
    font-size: 16px !important;
    font-weight: 600 !important;
    margin-bottom: 6px !important;
    color: var(--text-secondary) !important;
}

.empty-state p {
    font-size: 13px !important;
    margin: 0 !important;
}

/* ==================== TABLE FIXES ==================== */

.table-responsive {
    overflow-x: auto !important;
    border-radius: var(--radius) !important;
}

.data-table th,
.data-table td {
    padding: 10px 14px !important;
    font-size: 13px !important;
}

.data-table th {
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    font-weight: 600 !important;
    background: var(--gray-50) !important;
}

/* ==================== BUTTON SIZES ==================== */

.btn-xs {
    padding: 4px 10px !important;
    font-size: 11px !important;
    height: 28px !important;
}

.btn-sm {
    padding: 6px 12px !important;
    font-size: 12px !important;
    height: 32px !important;
}

/* ==================== VIDEO PANEL FIXES ==================== */

.video-panel,
.side-panel {
    background: var(--bg-card) !important;
    border-radius: var(--radius-lg) !important;
    border: 1px solid var(--border) !important;
    overflow: hidden !important;
}

.panel-header {
    padding: 12px 16px !important;
    background: var(--gray-50) !important;
    border-bottom: 1px solid var(--border) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.panel-title {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.panel-title h3 {
    font-size: 14px !important;
    font-weight: 600 !important;
    margin: 0 !important;
}

.panel-title i {
    color: var(--primary) !important;
}

.live-indicator,
.playback-indicator {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 4px 10px !important;
    background: var(--danger) !important;
    color: white !important;
    border-radius: var(--radius-full) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.playback-indicator {
    background: var(--info) !important;
}

.live-dot,
.playback-dot {
    width: 6px !important;
    height: 6px !important;
    background: white !important;
    border-radius: 50% !important;
    animation: pulse 1.5s infinite !important;
}

/* ==================== INFO CARDS ==================== */

.info-card {
    background: var(--bg-card) !important;
    border-radius: var(--radius-lg) !important;
    border: 1px solid var(--border) !important;
    overflow: hidden !important;
    margin-bottom: 12px !important;
}

.info-card .card-header {
    padding: 10px 14px !important;
}

.info-card .card-header h3 {
    font-size: 13px !important;
}

.info-card .card-body {
    padding: 12px 14px !important;
}

/* ==================== PLAYBACK INFO BAR ==================== */

.playback-info-bar {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
    padding: 10px 16px !important;
    background: var(--gray-50) !important;
    border-top: 1px solid var(--border) !important;
}

.playback-info-bar .info-item {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 12px !important;
}

.playback-info-bar .info-item i {
    color: var(--primary) !important;
    font-size: 12px !important;
}

.playback-info-bar .info-label {
    color: var(--text-muted) !important;
}

.playback-info-bar .info-value {
    font-weight: 600 !important;
    color: var(--text-primary) !important;
}

/* ==================== RESPONSIVE ADJUSTMENTS ==================== */

@media (max-width: 1200px) {
    .filter-group {
        max-width: none !important;
    }
    
    .filter-row .filter-group {
        max-width: none !important;
    }
}

@media (max-width: 768px) {
    .filters-form {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    
    .filter-group {
        max-width: none !important;
        width: 100% !important;
    }
    
    .filter-actions {
        margin-left: 0 !important;
        width: 100% !important;
        justify-content: flex-end !important;
    }
    
    .quick-stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .events-cards-grid {
        grid-template-columns: 1fr !important;
    }
    
    .analytics-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .dashboard-main-grid {
        grid-template-columns: 1fr !important;
    }
    
    .livestream-hero,
    .playback-hero {
        flex-direction: column !important;
        text-align: center !important;
    }
    
    .livestream-hero .hero-content,
    .playback-hero .hero-content {
        flex-direction: column !important;
    }
    
    .hero-actions {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* ==================== QUICK DATE BUTTONS ==================== */

.quick-date-btns {
    display: flex !important;
    gap: 6px !important;
}

.btn-ghost {
    background: transparent !important;
    border: 1px solid var(--border) !important;
    color: var(--text-secondary) !important;
}

.btn-ghost:hover {
    background: var(--gray-100) !important;
    border-color: var(--gray-300) !important;
}

/* ==================== TOTAL BADGE ==================== */

.total-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 28px !important;
    height: 24px !important;
    padding: 0 8px !important;
    background: var(--primary) !important;
    color: white !important;
    border-radius: var(--radius-full) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}

/* ==================== GENERAL ALARM PAGE ==================== */

.general-alarm-page {
    padding: 0 !important;
}

/* Stats Grid - 3 columns for alarm types */
.stats-grid-3 {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 16px !important;
    margin-bottom: 16px !important;
}

@media (max-width: 992px) {
    .stats-grid-3 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 576px) {
    .stats-grid-3 {
        grid-template-columns: 1fr !important;
    }
}

/* Stat Cards - Clickable Alarm Type Cards */
.stat-card {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    background: var(--bg-card) !important;
    border-radius: var(--radius-lg) !important;
    padding: 20px !important;
    border: 2px solid var(--border) !important;
    box-shadow: var(--shadow-sm) !important;
    transition: all 0.2s ease !important;
}

.stat-card.clickable {
    cursor: pointer !important;
}

.stat-card.clickable:hover {
    border-color: var(--primary) !important;
    box-shadow: var(--shadow-md) !important;
    transform: translateY(-2px) !important;
}

.stat-card.active {
    border-color: var(--primary) !important;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.05) 0%, rgba(124, 58, 237, 0.1) 100%) !important;
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.15) !important;
}

.stat-card .stat-icon {
    width: 56px !important;
    height: 56px !important;
    border-radius: var(--radius-lg) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 22px !important;
    flex-shrink: 0 !important;
}

/* Icon color variants */
.stat-card .stat-icon.danger,
.stat-card .stat-icon.red {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%) !important;
    color: #dc2626 !important;
}

.stat-card .stat-icon.warning,
.stat-card .stat-icon.orange {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%) !important;
    color: #f59e0b !important;
}

.stat-card .stat-icon.success,
.stat-card .stat-icon.green {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%) !important;
    color: #16a34a !important;
}

.stat-card .stat-icon.info,
.stat-card .stat-icon.blue {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%) !important;
    color: #2563eb !important;
}

.stat-card .stat-icon.primary,
.stat-card .stat-icon.purple {
    background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%) !important;
    color: var(--primary) !important;
}

.stat-card .stat-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    min-width: 0 !important;
}

.stat-card .stat-value {
    font-size: 28px !important;
    font-weight: 700 !important;
    color: var(--text-primary) !important;
    line-height: 1.2 !important;
}

.stat-card .stat-label {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--text-secondary) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Dashboard Card - Table Container */
.dashboard-card {
    background: var(--bg-card) !important;
    border-radius: var(--radius-lg) !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow-sm) !important;
    overflow: hidden !important;
    margin-bottom: 20px !important;
}

.dashboard-card .card-header {
    padding: 16px 20px !important;
    background: linear-gradient(135deg, var(--gray-50) 0%, var(--gray-100) 100%) !important;
    border-bottom: 1px solid var(--border) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
}

.dashboard-card .card-header h3 {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--text-primary) !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.dashboard-card .card-header h3 i {
    color: var(--primary) !important;
    font-size: 16px !important;
}

.dashboard-card .card-body {
    padding: 0 !important;
}

.header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

/* Data Table Styling */
.table-responsive {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

.data-table {
    width: 100% !important;
    border-collapse: collapse !important;
    font-size: 13px !important;
}

.data-table thead {
    background: linear-gradient(135deg, var(--gray-50) 0%, var(--gray-100) 100%) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
}

.data-table th {
    padding: 14px 16px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: var(--text-secondary) !important;
    text-align: left !important;
    border-bottom: 2px solid var(--border) !important;
    white-space: nowrap !important;
}

.data-table td {
    padding: 14px 16px !important;
    color: var(--text-primary) !important;
    border-bottom: 1px solid var(--border) !important;
    vertical-align: middle !important;
}

.data-table tbody tr {
    transition: background 0.15s ease !important;
}

.data-table tbody tr:hover {
    background: var(--gray-50) !important;
}

.data-table tbody tr:last-child td {
    border-bottom: none !important;
}

/* Checkbox styling */
.data-table input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    cursor: pointer !important;
    accent-color: var(--primary) !important;
}

/* Badge Styling */
.badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 5px 12px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    border-radius: var(--radius-full) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    white-space: nowrap !important;
}

.badge-danger {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%) !important;
    color: #dc2626 !important;
    border: 1px solid #fecaca !important;
}

.badge-warning {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%) !important;
    color: #d97706 !important;
    border: 1px solid #fde68a !important;
}

.badge-success {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%) !important;
    color: #16a34a !important;
    border: 1px solid #bbf7d0 !important;
}

.badge-info {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%) !important;
    color: #2563eb !important;
    border: 1px solid #bfdbfe !important;
}

.badge-primary {
    background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%) !important;
    color: var(--primary) !important;
    border: 1px solid #ddd6fe !important;
}

/* Table Footer & Pagination */
.table-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 14px 20px !important;
    background: var(--gray-50) !important;
    border-top: 1px solid var(--border) !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
}

.total-records {
    font-size: 13px !important;
    color: var(--text-secondary) !important;
    font-weight: 500 !important;
}

.pagination {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.pagination .btn {
    min-width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.page-info {
    font-size: 13px !important;
    color: var(--text-secondary) !important;
    padding: 0 8px !important;
}

/* Empty State */
.empty-state {
    text-align: center !important;
    padding: 48px 24px !important;
    color: var(--text-muted) !important;
}

.empty-state i {
    font-size: 48px !important;
    margin-bottom: 16px !important;
    opacity: 0.3 !important;
    color: var(--success) !important;
}

.empty-state h3 {
    font-size: 18px !important;
    font-weight: 600 !important;
    margin-bottom: 8px !important;
    color: var(--text-secondary) !important;
}

.empty-state p {
    font-size: 14px !important;
    margin: 0 !important;
    color: var(--text-muted) !important;
}

/* Text Utilities for Visibility */
.text-center {
    text-align: center !important;
}

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

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

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

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

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

/* Button Variants */
.btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 10px 18px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border-radius: var(--radius) !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%) !important;
    color: white !important;
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.25) !important;
}

.btn-primary:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.35) !important;
}

.btn-secondary {
    background: var(--gray-100) !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--border) !important;
}

.btn-secondary:hover {
    background: var(--gray-200) !important;
    border-color: var(--gray-300) !important;
}

.btn-success {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important;
    color: white !important;
    box-shadow: 0 2px 8px rgba(22, 163, 74, 0.25) !important;
}

.btn-success:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(22, 163, 74, 0.35) !important;
}

.btn-danger {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
    color: white !important;
}

.btn-info {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    color: white !important;
}

.btn-sm {
    padding: 8px 14px !important;
    font-size: 12px !important;
}

.btn-xs {
    padding: 6px 10px !important;
    font-size: 11px !important;
    min-width: 32px !important;
    height: 32px !important;
}

.btn:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

/* Modal Styling */
.modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 1000 !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
}

.modal.active {
    display: flex !important;
}

.modal-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(4px) !important;
}

.modal-container {
    position: relative !important;
    background: var(--bg-card) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-xl) !important;
    max-width: 500px !important;
    width: 100% !important;
    max-height: 90vh !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

.modal-header {
    padding: 16px 20px !important;
    background: var(--gray-50) !important;
    border-bottom: 1px solid var(--border) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.modal-header h3 {
    font-size: 16px !important;
    font-weight: 600 !important;
    margin: 0 !important;
    color: var(--text-primary) !important;
}

.modal-close {
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: none !important;
    border: none !important;
    color: var(--text-muted) !important;
    cursor: pointer !important;
    border-radius: var(--radius) !important;
    transition: all 0.15s ease !important;
}

.modal-close:hover {
    background: var(--gray-200) !important;
    color: var(--text-primary) !important;
}

.modal-body {
    padding: 20px !important;
    overflow-y: auto !important;
}

.modal-footer {
    padding: 16px 20px !important;
    background: var(--gray-50) !important;
    border-top: 1px solid var(--border) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
}

/* Alarm Detail Grid */
.alarm-detail-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

.detail-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 16px !important;
    background: var(--gray-50) !important;
    border-radius: var(--radius) !important;
}

.detail-row label {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--text-secondary) !important;
}

.detail-row span {
    font-size: 13px !important;
    color: var(--text-primary) !important;
}

/* Alert Demo Banner */
.alert-demo {
    background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%) !important;
    border: 1px solid var(--primary) !important;
    border-radius: var(--radius-lg) !important;
    padding: 14px 20px !important;
    margin-bottom: 20px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    font-size: 14px !important;
    color: var(--primary-dark) !important;
}

.alert-demo i {
    font-size: 20px !important;
    color: var(--primary) !important;
}

.alert-demo strong {
    font-weight: 700 !important;
}

/* Section Headers */
.section-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 16px !important;
    padding-bottom: 12px !important;
    border-bottom: 2px solid var(--border) !important;
}

.section-header h2,
.section-header h3 {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--text-primary) !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.section-header h2 i,
.section-header h3 i {
    color: var(--primary) !important;
}

/* Page Title Enhancement */
.page-title {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: var(--text-primary) !important;
    margin-bottom: 24px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.page-title i {
    color: var(--primary) !important;
}

/* ==================== GLOBAL TEXT VISIBILITY IMPROVEMENTS ==================== */
/* Section 95: Ensure all text is readable across all pages */

/* Base text improvements - ensure proper contrast */
body {
    color: var(--text-primary, #1f2937) !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility !important;
}

/* All headings - ensure visibility */
h1, h2, h3, h4, h5, h6 {
    color: var(--text-primary, #1f2937) !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
}

h1 { font-size: 28px !important; }
h2 { font-size: 22px !important; }
h3 { font-size: 18px !important; }
h4 { font-size: 16px !important; }
h5 { font-size: 14px !important; }
h6 { font-size: 13px !important; }

/* Paragraph text - readable size */
p {
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: var(--text-secondary, #4b5563) !important;
}

/* Links - visible and accessible */
a:not(.btn):not(.nav-link):not(.sidebar-link) {
    color: var(--primary, #6366f1) !important;
}

a:not(.btn):not(.nav-link):not(.sidebar-link):hover {
    color: var(--primary-dark, #4f46e5) !important;
}

/* ==================== GLOBAL CARD IMPROVEMENTS ==================== */
/* Section 96: Make all cards proper and clearly visible */

/* Universal card styling */
.card,
.data-card,
.info-card,
.panel,
.box,
.widget {
    background: #ffffff !important;
    border: 1px solid var(--border, #e5e7eb) !important;
    border-radius: var(--radius-lg, 12px) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.03) !important;
    overflow: hidden !important;
    margin-bottom: 20px !important;
}

/* Card headers - clear distinction */
.card-header,
.card-title-bar,
.panel-header,
.widget-header {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
    border-bottom: 1px solid var(--border, #e5e7eb) !important;
    padding: 16px 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.card-header h3,
.card-header h4,
.card-header .title,
.panel-header h3,
.widget-header h3 {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--text-primary, #1f2937) !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.card-header h3 i,
.card-header h4 i,
.panel-header h3 i,
.widget-header h3 i {
    color: var(--primary, #6366f1) !important;
    font-size: 18px !important;
}

/* Card body - proper padding and spacing */
.card-body,
.card-content,
.panel-body,
.widget-body {
    padding: 20px !important;
    background: #ffffff !important;
}

/* Card footer */
.card-footer,
.panel-footer,
.widget-footer {
    background: var(--gray-50, #f9fafb) !important;
    border-top: 1px solid var(--border, #e5e7eb) !important;
    padding: 12px 20px !important;
}

/* ==================== SECTION VISIBILITY ==================== */
/* Section 97: Clear section separation */

/* Section containers */
section,
.section,
.content-section {
    margin-bottom: 24px !important;
}

/* Section titles */
.section-title,
.content-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--text-primary, #1f2937) !important;
    margin-bottom: 16px !important;
    padding-bottom: 12px !important;
    border-bottom: 2px solid var(--border, #e5e7eb) !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.section-title i,
.content-title i {
    color: var(--primary, #6366f1) !important;
}

/* ==================== FORM FIELD VISIBILITY ==================== */
/* Section 98: Form elements clearly visible */

/* Form labels - always visible */
label:not(.toggle-label),
.form-label,
.field-label {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--text-primary, #1f2937) !important;
    margin-bottom: 6px !important;
}

/* Form inputs - clear borders and text */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="search"],
input[type="tel"],
input[type="url"],
textarea,
select {
    font-size: 14px !important;
    color: var(--text-primary, #1f2937) !important;
    background: #ffffff !important;
    border: 1px solid var(--border, #e5e7eb) !important;
    border-radius: var(--radius, 8px) !important;
    transition: all 0.2s ease !important;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--primary, #6366f1) !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15) !important;
    outline: none !important;
}

/* Placeholder text - visible but subtle */
::placeholder {
    color: var(--gray-400, #9ca3af) !important;
    opacity: 1 !important;
}

/* Form groups - proper spacing */
.form-group,
.field-group {
    margin-bottom: 16px !important;
}

/* ==================== TABLE TEXT VISIBILITY ==================== */
/* Section 99: Tables clearly readable */

/* Table headers - bold and visible */
table th,
.table th {
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: var(--text-secondary, #4b5563) !important;
    background: var(--gray-50, #f9fafb) !important;
    padding: 14px 16px !important;
    border-bottom: 2px solid var(--border, #e5e7eb) !important;
    white-space: nowrap !important;
}

/* Table cells - readable text */
table td,
.table td {
    font-size: 13px !important;
    color: var(--text-primary, #1f2937) !important;
    padding: 14px 16px !important;
    border-bottom: 1px solid var(--border, #e5e7eb) !important;
    vertical-align: middle !important;
}

/* Alternating row colors for readability */
table tbody tr:nth-child(even),
.table tbody tr:nth-child(even) {
    background: var(--gray-50, #f9fafb) !important;
}

/* Table row hover */
table tbody tr:hover,
.table tbody tr:hover {
    background: rgba(99, 102, 241, 0.04) !important;
}

/* ==================== BADGE & STATUS VISIBILITY ==================== */
/* Section 100: Status indicators clearly visible */

/* Status badges - universal */
.badge,
.status,
.tag,
.label:not(label) {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 4px 10px !important;
    border-radius: 20px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
}

/* Success/Online/Active */
.badge-success,
.badge.success,
.status-online,
.status-active,
.badge-green {
    background: rgba(16, 185, 129, 0.12) !important;
    color: #059669 !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
}

/* Danger/Error/Offline */
.badge-danger,
.badge.danger,
.status-offline,
.status-error,
.badge-red {
    background: rgba(239, 68, 68, 0.12) !important;
    color: #dc2626 !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
}

/* Warning/Pending */
.badge-warning,
.badge.warning,
.status-pending,
.status-warning,
.badge-yellow,
.badge-orange {
    background: rgba(245, 158, 11, 0.12) !important;
    color: #d97706 !important;
    border: 1px solid rgba(245, 158, 11, 0.3) !important;
}

/* Info/Default */
.badge-info,
.badge.info,
.status-info,
.badge-blue {
    background: rgba(59, 130, 246, 0.12) !important;
    color: #2563eb !important;
    border: 1px solid rgba(59, 130, 246, 0.3) !important;
}

/* ==================== EMPTY STATE VISIBILITY ==================== */
/* Section 101: Empty states clearly visible */

.empty-state,
.no-data,
.no-results {
    text-align: center !important;
    padding: 60px 40px !important;
    color: var(--text-secondary, #4b5563) !important;
}

.empty-state i,
.no-data i,
.no-results i {
    font-size: 64px !important;
    color: var(--gray-300, #d1d5db) !important;
    margin-bottom: 20px !important;
    display: block !important;
}

.empty-state h3,
.no-data h3,
.no-results h3 {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: var(--text-primary, #1f2937) !important;
    margin-bottom: 8px !important;
}

.empty-state p,
.no-data p,
.no-results p {
    font-size: 14px !important;
    color: var(--text-secondary, #4b5563) !important;
    max-width: 400px !important;
    margin: 0 auto !important;
}

/* ==================== ALERT & NOTIFICATION VISIBILITY ==================== */
/* Section 102: Alerts clearly visible */

.alert,
.notification,
.message-box {
    padding: 16px 20px !important;
    border-radius: var(--radius-lg, 12px) !important;
    margin-bottom: 16px !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    font-size: 14px !important;
}

.alert-success,
.notification-success {
    background: rgba(16, 185, 129, 0.1) !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
    color: #065f46 !important;
}

.alert-danger,
.alert-error,
.notification-error {
    background: rgba(239, 68, 68, 0.1) !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
    color: #991b1b !important;
}

.alert-warning,
.notification-warning {
    background: rgba(245, 158, 11, 0.1) !important;
    border: 1px solid rgba(245, 158, 11, 0.3) !important;
    color: #92400e !important;
}

.alert-info,
.notification-info {
    background: rgba(59, 130, 246, 0.1) !important;
    border: 1px solid rgba(59, 130, 246, 0.3) !important;
    color: #1e40af !important;
}

/* ==================== RESPONSIVE TEXT SCALING ==================== */
/* Section 103: Text remains readable on all screen sizes */

@media (max-width: 1200px) {
    h1 { font-size: 24px !important; }
    h2 { font-size: 20px !important; }
    h3 { font-size: 16px !important; }
    
    .page-title {
        font-size: 22px !important;
    }
}

@media (max-width: 768px) {
    h1 { font-size: 22px !important; }
    h2 { font-size: 18px !important; }
    h3 { font-size: 15px !important; }
    
    .page-title {
        font-size: 20px !important;
    }
    
    /* Ensure table text doesn't get too small */
    table th,
    .table th {
        font-size: 11px !important;
        padding: 10px 12px !important;
    }
    
    table td,
    .table td {
        font-size: 12px !important;
        padding: 10px 12px !important;
    }
    
    /* Card padding adjustments */
    .card-body,
    .card-content,
    .panel-body {
        padding: 16px !important;
    }
    
    .card-header,
    .panel-header {
        padding: 12px 16px !important;
    }
}

@media (max-width: 576px) {
    h1 { font-size: 20px !important; }
    h2 { font-size: 16px !important; }
    h3 { font-size: 14px !important; }
    
    .page-title {
        font-size: 18px !important;
    }
    
    /* Buttons remain tappable */
    .btn,
    button {
        min-height: 44px !important;
    }
    
    /* Form inputs remain usable - 16px prevents iOS zoom */
    input,
    select,
    textarea {
        min-height: 44px !important;
        font-size: 16px !important;
    }
}

/* ==================== PRINT VISIBILITY ==================== */
/* Section 104: Ensure text is visible when printing */

@media print {
    body {
        color: #000000 !important;
        background: #ffffff !important;
    }
    
    .card,
    .data-card,
    .stat-card {
        border: 1px solid #000000 !important;
        box-shadow: none !important;
    }
    
    .badge,
    .status {
        border: 1px solid currentColor !important;
        background: transparent !important;
    }
}

/* ============================================
   SECTION 105: Hero Section Text Visibility Fixes
   - WHITE TEXT for hero sections (livestream, playback)
   - Dark gradient backgrounds for proper contrast
   ============================================ */

/* Livestream Hero Section - DARK BACKGROUND + WHITE TEXT */
.livestream-hero {
    background: linear-gradient(135deg, #1e293b 0%, #334155 50%, #1e1b4b 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.livestream-hero::before {
    background: radial-gradient(circle, rgba(239, 68, 68, 0.2) 0%, transparent 70%) !important;
}

.livestream-hero .hero-text h1 {
    color: #ffffff !important;
    font-weight: 700 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

.livestream-hero .hero-text h1 i {
    color: #ef4444 !important;
}

.livestream-hero .hero-text p {
    color: rgba(255, 255, 255, 0.9) !important;
    font-weight: 500 !important;
}

.livestream-hero .hero-stat-value {
    color: #ffffff !important;
    font-weight: 700 !important;
}

.livestream-hero .hero-stat-label {
    color: rgba(255, 255, 255, 0.8) !important;
    font-weight: 500 !important;
}

.livestream-hero .hero-stat {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.livestream-hero .hero-stat.success .hero-stat-value {
    color: #4ade80 !important;
}

.livestream-hero .btn-glass {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

.livestream-hero .btn-glass:hover {
    background: rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
}

/* Playback Hero Section - DARK BACKGROUND + WHITE TEXT */
.playback-hero {
    background: linear-gradient(135deg, #1e293b 0%, #334155 50%, #312e81 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.playback-hero::before {
    background: radial-gradient(circle, rgba(59, 130, 246, 0.2) 0%, transparent 70%) !important;
}

.playback-hero .hero-text h1 {
    color: #ffffff !important;
    font-weight: 700 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

.playback-hero .hero-text h1 i {
    color: #8b5cf6 !important;
}

.playback-hero .hero-text p {
    color: rgba(255, 255, 255, 0.9) !important;
    font-weight: 500 !important;
}

.playback-hero .hero-stat-value {
    color: #ffffff !important;
    font-weight: 700 !important;
}

.playback-hero .hero-stat-label {
    color: rgba(255, 255, 255, 0.8) !important;
    font-weight: 500 !important;
}

.playback-hero .hero-stat {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.playback-hero .hero-stat.info .hero-stat-value {
    color: #60a5fa !important;
}

.playback-hero .btn-glass {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

.playback-hero .btn-glass:hover {
    background: rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
}

/* Dashboard Hero Section - White text */
.dashboard-hero .hero-text h1 {
    color: #ffffff !important;
    font-weight: 700 !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

.dashboard-hero .hero-text p {
    color: rgba(255, 255, 255, 0.85) !important;
    font-weight: 500 !important;
}

.dashboard-hero .hero-stat-value {
    color: #ffffff !important;
    font-weight: 700 !important;
}

.dashboard-hero .hero-stat-label {
    color: rgba(255, 255, 255, 0.7) !important;
    font-weight: 500 !important;
}

/* Monitoring Hero Section - DARK BACKGROUND + WHITE TEXT (matching livestream) */
.monitoring-hero {
    background: linear-gradient(135deg, #1e293b 0%, #334155 50%, #312e81 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 16px !important;
    padding: 24px 32px !important;
}

.monitoring-hero::before {
    background: radial-gradient(circle, rgba(139, 92, 246, 0.25) 0%, transparent 70%) !important;
}

.monitoring-hero .hero-text h1 {
    color: #ffffff !important;
    font-weight: 700 !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
    font-size: 1.75rem !important;
}

.monitoring-hero .hero-text h1 i {
    color: #a78bfa !important;
    opacity: 1 !important;
}

.monitoring-hero .hero-text p {
    color: #ffffff !important;
    font-weight: 500 !important;
    opacity: 0.95 !important;
    font-size: 1rem !important;
}

.monitoring-hero .hero-stat-value {
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 1.75rem !important;
}

.monitoring-hero .hero-stat-label {
    color: #ffffff !important;
    font-weight: 500 !important;
    opacity: 0.9 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    font-size: 0.75rem !important;
}

.monitoring-hero .hero-stat {
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 12px !important;
    padding: 12px 20px !important;
}

.monitoring-hero .hero-stat.online .hero-stat-value {
    color: #4ade80 !important;
}

.monitoring-hero .hero-stat.moving .hero-stat-value {
    color: #60a5fa !important;
}

.monitoring-hero .btn-glass {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    font-weight: 600 !important;
    padding: 10px 20px !important;
}

.monitoring-hero .btn-glass:hover {
    background: rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
}

.monitoring-hero .btn-glass i {
    color: #ffffff !important;
}

/* Auto-refresh toggle label */
.monitoring-hero .auto-refresh-toggle,
.monitoring-hero .toggle-label {
    color: #ffffff !important;
    font-weight: 500 !important;
}

/* Action buttons in monitoring panel - Enhanced visibility */
.monitoring-page .action-btn,
.action-buttons .action-btn {
    color: #ffffff !important;
    font-weight: 600 !important;
    padding: 14px 16px !important;
    border-radius: 10px !important;
    text-decoration: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 90px !important;
    transition: all 0.2s ease !important;
}

.monitoring-page .action-btn span,
.action-buttons .action-btn span {
    color: #ffffff !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
}

.monitoring-page .action-btn i,
.action-buttons .action-btn i {
    color: #ffffff !important;
    font-size: 1.25rem !important;
}

/* Action button variants with better contrast */
.action-btn.primary {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%) !important;
    border: 1px solid rgba(139, 92, 246, 0.5) !important;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3) !important;
}

.action-btn.primary:hover {
    background: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(139, 92, 246, 0.4) !important;
}

.action-btn.info {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
    border: 1px solid rgba(59, 130, 246, 0.5) !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3) !important;
}

.action-btn.info:hover {
    background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4) !important;
}

.action-btn.secondary {
    background: linear-gradient(135deg, #475569 0%, #334155 100%) !important;
    border: 1px solid rgba(71, 85, 105, 0.5) !important;
    box-shadow: 0 4px 12px rgba(71, 85, 105, 0.3) !important;
}

.action-btn.secondary:hover {
    background: linear-gradient(135deg, #64748b 0%, #475569 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(71, 85, 105, 0.4) !important;
}

.action-btn.warning {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    border: 1px solid rgba(245, 158, 11, 0.5) !important;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3) !important;
}

.action-btn.warning:hover {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(245, 158, 11, 0.4) !important;
}

/* Action buttons container - 2x2 grid layout */
.action-buttons {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    padding: 16px !important;
    background: rgba(15, 23, 42, 0.6) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Panel footer styling */
.panel-footer {
    background: rgba(15, 23, 42, 0.4) !important;
    border-radius: 0 0 12px 12px !important;
}

/* Monitoring Stats Pills - Enhanced visibility */
.monitoring-stats {
    display: flex !important;
    gap: 12px !important;
    margin-bottom: 20px !important;
    flex-wrap: wrap !important;
}

.monitoring-stats .stat-pill {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 12px 20px !important;
    background: rgba(30, 41, 59, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 50px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.monitoring-stats .stat-pill:hover {
    background: rgba(30, 41, 59, 0.95) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
    transform: translateY(-1px) !important;
}

.monitoring-stats .stat-pill.active {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%) !important;
    border-color: rgba(139, 92, 246, 0.5) !important;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3) !important;
}

.monitoring-stats .stat-pill i {
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 1rem !important;
}

.monitoring-stats .stat-pill.active i {
    color: #ffffff !important;
}

.monitoring-stats .stat-pill-value {
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 1.1rem !important;
}

.monitoring-stats .stat-pill-label {
    color: rgba(255, 255, 255, 0.8) !important;
    font-weight: 500 !important;
    font-size: 0.85rem !important;
}

.monitoring-stats .stat-pill.active .stat-pill-value,
.monitoring-stats .stat-pill.active .stat-pill-label {
    color: #ffffff !important;
}

/* Stat pill color variants */
.monitoring-stats .stat-pill.success {
    border-color: rgba(74, 222, 128, 0.3) !important;
}

.monitoring-stats .stat-pill.success i {
    color: #4ade80 !important;
}

.monitoring-stats .stat-pill.warning {
    border-color: rgba(251, 191, 36, 0.3) !important;
}

.monitoring-stats .stat-pill.warning i {
    color: #fbbf24 !important;
}

.monitoring-stats .stat-pill.danger {
    border-color: rgba(248, 113, 113, 0.3) !important;
}

.monitoring-stats .stat-pill.danger i {
    color: #f87171 !important;
}

.monitoring-stats .stat-pill.alarm {
    border-color: rgba(251, 146, 60, 0.3) !important;
}

.monitoring-stats .stat-pill.alarm i {
    color: #fb923c !important;
}

/* ============================================
   SECTION 106: Modal Display & Z-Index Fixes
   ============================================ */

/* Ensure modal has highest z-index */
.modal {
    z-index: 10000 !important;
}

/* Modal overlay should not block clicks on modal content */
.modal-overlay {
    z-index: 10001 !important;
    pointer-events: auto !important;
}

/* Modal container must be above overlay */
.modal-container {
    z-index: 10002 !important;
    position: relative !important;
    pointer-events: auto !important;
}

/* Device selection modal specific fixes */
#deviceModal,
#vehicleModal,
.device-modal,
.vehicle-modal {
    z-index: 10000 !important;
}

#deviceModal .modal-container,
#vehicleModal .modal-container,
.device-modal .modal-container,
.vehicle-modal .modal-container {
    z-index: 10002 !important;
    background: #ffffff !important;
}

/* Ensure modal body content is interactive */
.modal-body {
    position: relative !important;
    z-index: 10003 !important;
    pointer-events: auto !important;
}

/* Device list inside modal */
.modal .device-list,
.modal .vehicle-list {
    position: relative !important;
    z-index: 10004 !important;
}

.modal .device-list .device-item,
.modal .vehicle-list .vehicle-item {
    cursor: pointer !important;
    pointer-events: auto !important;
}

/* Fix for any nested modals or dropdowns within modals */
.modal select,
.modal input,
.modal button,
.modal a {
    position: relative !important;
    z-index: 10005 !important;
    pointer-events: auto !important;
}

/* ============================================
   SECTION 107: Reports Page Text Visibility
   ============================================ */

/* Report Tabs - Enhanced visibility */
.report-tabs {
    display: flex !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}

.report-tab {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 12px 20px !important;
    background: rgba(30, 41, 59, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 10px !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.report-tab i {
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 1rem !important;
}

.report-tab span {
    color: #ffffff !important;
}

.report-tab:hover {
    background: rgba(30, 41, 59, 0.95) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
    transform: translateY(-1px) !important;
    color: #ffffff !important;
}

.report-tab:hover i,
.report-tab:hover span {
    color: #ffffff !important;
}

.report-tab.active {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%) !important;
    border-color: rgba(139, 92, 246, 0.5) !important;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3) !important;
    color: #ffffff !important;
}

.report-tab.active i,
.report-tab.active span {
    color: #ffffff !important;
}

/* Report Card Headers */
.card-header .card-title {
    color: #ffffff !important;
    font-weight: 600 !important;
}

.card-header .card-title i {
    color: #a78bfa !important;
}

/* Report Filters */
.report-filters .form-label {
    color: #ffffff !important;
    font-weight: 500 !important;
    margin-bottom: 8px !important;
}

.report-filters .form-control {
    background: rgba(30, 41, 59, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}

.report-filters .form-control::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
}

.report-filters .form-control:focus {
    border-color: #8b5cf6 !important;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2) !important;
}

.report-filters select.form-control option {
    background: #1e293b !important;
    color: #ffffff !important;
}

/* Report Summary */
.report-summary {
    background: rgba(30, 41, 59, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    padding: 20px !important;
}

.report-summary .summary-item {
    text-align: center !important;
}

.report-summary .summary-label {
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 4px !important;
}

.report-summary .summary-value {
    color: #ffffff !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
}

/* Report Table */
.report-table,
#reportTable {
    width: 100% !important;
}

.report-table th,
#reportTable th {
    background: rgba(30, 41, 59, 0.9) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    padding: 14px 16px !important;
    text-align: left !important;
    border-bottom: 2px solid rgba(139, 92, 246, 0.3) !important;
}

.report-table td,
#reportTable td {
    background: rgba(15, 23, 42, 0.6) !important;
    color: #ffffff !important;
    padding: 12px 16px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.report-table tr:hover td,
#reportTable tr:hover td {
    background: rgba(30, 41, 59, 0.8) !important;
}

/* Report empty state */
.report-empty,
.no-data,
.empty-state {
    color: rgba(255, 255, 255, 0.7) !important;
    text-align: center !important;
    padding: 40px !important;
}

.report-empty i,
.no-data i,
.empty-state i {
    color: rgba(255, 255, 255, 0.4) !important;
    font-size: 3rem !important;
    margin-bottom: 16px !important;
}

/* Alert demo mode */
.alert-demo {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(139, 92, 246, 0.05)) !important;
    border: 1px solid rgba(139, 92, 246, 0.3) !important;
    color: #a78bfa !important;
    border-radius: 10px !important;
}

.alert-demo strong {
    color: #c4b5fd !important;
}

/* Export button */
.btn-export,
button[onclick="exportReport()"] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: #ffffff !important;
    border: none !important;
    padding: 10px 20px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
}

.btn-export:hover,
button[onclick="exportReport()"]:hover {
    background: linear-gradient(135deg, #34d399 0%, #10b981 100%) !important;
    transform: translateY(-1px) !important;
}

/* Card body text on Reports page */
.card .card-body {
    color: #ffffff !important;
}

.card .card-body label,
.card .card-body .form-label {
    color: #ffffff !important;
}

/* Generate Report button */
.btn-primary,
button[type="submit"].btn-primary {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%) !important;
    color: #ffffff !important;
    border: none !important;
    font-weight: 600 !important;
}

.btn-primary:hover,
button[type="submit"].btn-primary:hover {
    background: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 100%) !important;
}

/* ==================== PAGE FOOTER ==================== */
.page-footer {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    padding: 20px 30px;
    margin-top: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px 12px 0 0;
}

.footer-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 15px;
}

.footer-logo {
    display: flex;
    align-items: center;
}

.footer-logo img {
    max-height: 30px;
    max-width: 150px;
    object-fit: contain;
    filter: brightness(1.2);
}

.footer-text {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
}

.footer-text p {
    margin: 0;
    color: rgba(255, 255, 255, 0.7);
}

/* Responsive footer */
@media (max-width: 768px) {
    .footer-content {
        flex-direction: column;
        text-align: center;
    }
    
    .footer-logo {
        justify-content: center;
    }
}

/* Logo image styling for sidebar */
.sidebar .logo-image {
    display: flex;
    align-items: center;
    padding: 5px 0;
}

.sidebar .logo-image img {
    max-height: 40px;
    max-width: 150px;
    object-fit: contain;
    filter: brightness(1.2);
}

/* Ensure logo displays properly when sidebar is collapsed */
body.sidebar-collapsed .sidebar .logo-image img {
    max-width: 40px;
}