/* ========================================
   MOBILE DETECTION & DEVICE OPTIMIZATION
   Enhanced Mobile Experience v2.0
   ======================================== */

/* ========================================
   SPLASH SCREEN PROTECTION
   Ensure splash page always has correct background
   ======================================== */
html[lang="ar"] body,
body.splash-page,
.splash-container {
    background: linear-gradient(160deg, #2a6169 0%, #1e4a50 50%, #163a3f 100%) !important;
    background-color: #1e4a50 !important;
}

/* Ensure particles and splash container have correct z-index */
.particles {
    background: transparent !important;
}

.splash-container {
    background: transparent !important;
}

/* ===== Device Detection CSS Variables ===== */
:root {
    --mobile-header-height: 60px;
    --mobile-bottom-nav-height: 70px;
    --mobile-safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --mobile-safe-area-top: env(safe-area-inset-top, 0px);
}

/* ========================================
   TABLET PORTRAIT MODE (768px - 1024px)
   ======================================== */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
    /* Sidebar adjustments for tablet */
    .sidebar {
        width: 200px !important;
    }
    
    .main-content {
        margin-left: 200px !important;
    }
    
    [dir="rtl"] .main-content {
        margin-left: 0 !important;
        margin-right: 200px !important;
    }
    
    /* KPI Grid for tablet */
    .kpi-grid, .stats-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 15px !important;
    }
    
    /* Table adjustments */
    table {
        font-size: 13px !important;
    }
}

/* ========================================
   SMARTPHONE LANDSCAPE (480px - 767px height < 500px)
   ======================================== */
@media only screen and (max-width: 767px) and (orientation: landscape) {
    .main-content {
        padding-top: 55px !important;
        padding-bottom: 60px !important;
    }
    
    .header, .page-header {
        padding: 8px 12px !important;
    }
    
    .mobile-bottom-nav {
        padding: 6px !important;
        bottom: 8px !important;
    }
    
    .mobile-bottom-nav a {
        padding: 6px 4px !important;
        font-size: 8px !important;
    }
    
    .mobile-bottom-nav a i {
        font-size: 16px !important;
        margin-bottom: 2px !important;
    }
    
    .kpi-grid, .stats-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    
    .kpi-card, .stat-card {
        padding: 10px !important;
    }
    
    .kpi-value, .stat-value {
        font-size: 20px !important;
    }
}

/* ========================================
   SMARTPHONE PORTRAIT (up to 480px)
   ======================================== */
@media only screen and (max-width: 480px) {
    /* Improve touch targets */
    .btn, button {
        min-height: 44px !important;
        min-width: 44px !important;
    }
    
    /* CRITICAL: Override inline grid styles for KPI cards */
    .kpi-grid, .stats-grid,
    [id^="kpiGrid"], 
    #kpiGridQuickStats, 
    #kpiGridFinancial, 
    #kpiGridMonthly,
    .kpi-summary-row {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        padding: 0 5px !important;
    }
    
    /* Override all inline minmax styles */
    .kpi-grid[style*="minmax"],
    .stats-grid[style*="minmax"],
    div[style*="grid-template-columns"][style*="minmax"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .kpi-card, .stat-card, .kpi-detail-card {
        padding: 10px !important;
        min-height: 85px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        overflow: hidden !important;
    }
    
    /* KPI Card header - more compact */
    .kpi-header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: flex-start !important;
        margin-bottom: 4px !important;
    }
    
    .kpi-value, .kpi-card-value {
        font-size: 18px !important;
        line-height: 1.2 !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
    }
    
    /* Values with SAR - smaller to fit */
    .kpi-value[id*="amount"], 
    .kpi-value[id*="Amount"],
    .kpi-value[id*="Value"],
    .kpi-value[id*="value"],
    .kpi-card-value {
        font-size: 14px !important;
    }
    
    .kpi-title, .kpi-header .kpi-title, .kpi-card-label {
        font-size: 9px !important;
        line-height: 1.2 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        max-width: 85% !important;
    }
    
    /* Fix overlapping icon */
    .kpi-icon, .kpi-header .kpi-icon {
        font-size: 14px !important;
        opacity: 0.7 !important;
        flex-shrink: 0 !important;
        margin-left: 4px !important;
    }
    
    [dir="rtl"] .kpi-icon, [dir="rtl"] .kpi-header .kpi-icon {
        margin-left: 0 !important;
        margin-right: 4px !important;
    }
    
    /* Fix trend text */
    .kpi-trend, .kpi-card-sublabel {
        font-size: 8px !important;
        margin-top: 2px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    /* Header title size */
    .header-title, .page-title {
        font-size: 14px !important;
        max-width: 150px !important;
    }
    
    /* Table improvements */
    table {
        font-size: 10px !important;
    }
    
    table th, table td {
        padding: 8px 6px !important;
    }
    
    /* Action buttons */
    .btn-action, .action-btn {
        padding: 6px 8px !important;
        font-size: 10px !important;
    }
    
    /* KPI detail page fixes */
    .kpi-detail-container {
        padding: 10px !important;
    }
    
    .kpi-detail-header {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    
    .kpi-detail-title {
        font-size: 16px !important;
    }
    
    .chart-wrapper {
        height: 180px !important;
    }
    
    .modal-body {
        max-height: 50vh !important;
    }
}

/* ========================================
   VERY SMALL PHONES (up to 360px)
   ======================================== */
@media only screen and (max-width: 360px) {
    /* Even smaller - single column for very small phones */
    .kpi-grid, .stats-grid,
    [id^="kpiGrid"],
    #kpiGridQuickStats, 
    #kpiGridFinancial, 
    #kpiGridMonthly,
    .kpi-summary-row {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
    
    .kpi-card, .stat-card, .kpi-detail-card {
        padding: 12px !important;
    }
    
    .kpi-value, .kpi-card-value {
        font-size: 20px !important;
    }
    
    .kpi-title, .kpi-card-label {
        font-size: 11px !important;
        max-width: 75% !important;
    }
    
    .header-title {
        font-size: 12px !important;
        max-width: 120px !important;
    }
    
    .mobile-bottom-nav {
        bottom: 5px !important;
        left: 5px !important;
        right: 5px !important;
        padding: 5px 3px !important;
    }
    
    .mobile-bottom-nav a {
        font-size: 7px !important;
        padding: 6px 3px !important;
    }
    
    .mobile-bottom-nav a i {
        font-size: 15px !important;
    }
    
    .sidebar {
        width: 200px !important;
    }
}

/* ========================================
   iOS SPECIFIC FIXES
   ======================================== */
@supports (-webkit-touch-callout: none) {
    /* iOS safe area for bottom nav */
    .mobile-bottom-nav {
        padding-bottom: calc(8px + var(--mobile-safe-area-bottom)) !important;
    }
    
    .main-content {
        padding-bottom: calc(90px + var(--mobile-safe-area-bottom)) !important;
    }
    
    /* Fix iOS input zoom */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    select,
    textarea {
        font-size: 16px !important;
    }
    
    /* iOS momentum scrolling */
    .sidebar-menu,
    .table-container,
    .modal-body,
    .content {
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* Fix iOS position fixed issues */
    .header, .page-header {
        transform: translateZ(0);
    }
    
    .mobile-bottom-nav {
        transform: translateZ(0);
    }
}

/* ========================================
   NOTCH/PUNCH HOLE DEVICE SUPPORT
   Only apply on mobile screens (<=768px) to avoid breaking desktop layout
   ======================================== */
@supports (padding-top: env(safe-area-inset-top)) {
    @media (max-width: 768px) {
        .header, .page-header {
            padding-top: calc(12px + env(safe-area-inset-top, 0px)) !important;
        }
        
        .main-content {
            padding-top: calc(70px + env(safe-area-inset-top, 0px)) !important;
        }
        
        .sidebar {
            padding-top: env(safe-area-inset-top, 0px) !important;
        }
    }
}

/* ========================================
   TOUCH INTERACTION ENHANCEMENTS
   ======================================== */
@media (hover: none) and (pointer: coarse) {
    /* Touch-specific styles */
    .btn:hover, .kpi-card:hover, .menu-item:hover {
        transform: none !important;
    }
    
    .btn:active, .kpi-card:active, .menu-item:active {
        transform: scale(0.97) !important;
        opacity: 0.9 !important;
    }
    
    /* Larger touch targets */
    .menu-item {
        min-height: 48px !important;
    }
    
    /* Remove hover effects that don't work on touch */
    .kpi-clickable:hover::after {
        display: none !important;
    }
    
    /* Touch feedback */
    .touch-feedback {
        transition: transform 0.1s ease, opacity 0.1s ease !important;
    }
    
    .touch-feedback:active {
        transform: scale(0.96) !important;
        opacity: 0.85 !important;
    }
}

/* ========================================
   HIGH DPI / RETINA DISPLAY FIXES
   ======================================== */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Crisp borders on retina */
    .card, .kpi-card, .modal-content {
        border-width: 0.5px !important;
    }
    
    /* Sharper text */
    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

/* ========================================
   DARK MODE ADJUSTMENTS
   ======================================== */
@media (prefers-color-scheme: dark) {
    /* System already dark themed, just ensure consistency */
    .modal-content {
        background: linear-gradient(135deg, #1a3a40 0%, #0d2529 100%) !important;
    }
}

/* ========================================
   REDUCED MOTION PREFERENCE
   ======================================== */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .splash-container, .logo-icon, .particle {
        animation: none !important;
    }
}

/* ========================================
   LOGIN PAGE MOBILE OPTIMIZATION
   ======================================== */
@media only screen and (max-width: 480px) {
    .login-container {
        padding: 15px !important;
        min-height: 100vh !important;
        min-height: -webkit-fill-available !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }
    
    .login-box {
        width: 100% !important;
        max-width: 100% !important;
        padding: 30px 20px !important;
        margin: 0 !important;
        border-radius: 15px !important;
        min-height: auto !important;
        position: relative !important;
    }
    
    .login-header {
        margin-bottom: 25px !important;
    }
    
    .login-logo {
        margin-bottom: 15px !important;
    }
    
    .login-logo img {
        width: 100px !important;
        max-height: 70px !important;
    }
    
    .login-title {
        font-size: 22px !important;
        margin-bottom: 8px !important;
    }
    
    .login-subtitle {
        font-size: 11px !important;
        line-height: 1.4 !important;
        padding: 0 10px !important;
    }
    
    .login-box .form-group {
        margin-bottom: 18px !important;
    }
    
    .login-box .form-label {
        font-size: 13px !important;
        margin-bottom: 6px !important;
    }
    
    .login-box .form-control {
        padding: 12px 14px !important;
        font-size: 14px !important;
        border-radius: 8px !important;
    }
    
    .login-box .btn-primary {
        width: 100% !important;
        padding: 14px !important;
        font-size: 15px !important;
        margin-top: 10px !important;
        border-radius: 8px !important;
    }
    
    /* Register link */
    .login-box form > div[style*="text-align: center"] {
        margin-top: 15px !important;
    }
    
    .login-box form > div[style*="text-align: center"] a {
        font-size: 13px !important;
    }
    
    /* Signature/Footer */
    .login-signature {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        transform: none !important;
        margin-top: 20px !important;
        padding-top: 15px !important;
        border-top: 1px solid rgba(255,255,255,0.1) !important;
        text-align: center !important;
    }
    
    .login-signature-copyright,
    .login-signature-engineer {
        font-size: 10px !important;
        line-height: 1.5 !important;
    }
}

@media only screen and (max-width: 360px) {
    .login-container {
        padding: 10px !important;
    }
    
    .login-box {
        padding: 25px 15px !important;
    }
    
    .login-logo img {
        width: 80px !important;
        max-height: 60px !important;
    }
    
    .login-title {
        font-size: 20px !important;
    }
    
    .login-subtitle {
        font-size: 10px !important;
    }
    
    .login-box .form-control {
        padding: 10px 12px !important;
        font-size: 13px !important;
    }
    
    .login-box .btn-primary {
        padding: 12px !important;
        font-size: 14px !important;
    }
}

/* ========================================
   PRINT STYLES
   ======================================== */
@media print {
    .sidebar, .mobile-bottom-nav, .mobile-menu-toggle, .header-actions {
        display: none !important;
    }
    
    .main-content {
        margin: 0 !important;
        padding: 20px !important;
    }
    
    .kpi-card {
        break-inside: avoid;
    }
}

/* ========================================
   FIX: SIDEBAR MENU ITEM SPACING
   ======================================== */
@media only screen and (max-width: 768px) {
    .sidebar-menu .menu-item {
        margin-bottom: 6px !important;
    }
    
    .sidebar-menu .menu-item span:not(.menu-icon) {
        font-size: 13px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    /* Task counter badge positioning */
    .task-counter-badge {
        position: absolute !important;
        top: 8px !important;
        right: 8px !important;
        font-size: 9px !important;
        min-width: 18px !important;
        height: 18px !important;
        padding: 0 4px !important;
        border-radius: 9px !important;
    }
    
    [dir="rtl"] .task-counter-badge {
        right: auto !important;
        left: 8px !important;
    }
}

/* ========================================
   FIX: CONTENT SCROLLING ISSUES
   ======================================== */
@media only screen and (max-width: 768px) {
    html, body {
        height: 100% !important;
        overflow: hidden !important;
    }
    
    .dashboard {
        height: 100vh !important;
        overflow: hidden !important;
    }
    
    .main-content {
        height: 100vh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    .content {
        padding-bottom: 100px !important;
    }
}

/* ========================================
   FIX: HEADER ACTIONS OVERFLOW
   ======================================== */
@media only screen and (max-width: 768px) {
    .header-actions {
        gap: 6px !important;
    }
    
    .header-actions .btn {
        padding: 6px 10px !important;
        font-size: 10px !important;
        white-space: nowrap !important;
    }
    
    .header-actions .btn span {
        display: none !important;
    }
    
    .header-actions .btn i {
        margin: 0 !important;
    }
    
    /* Smart Search button */
    #smartSearchBtn {
        padding: 8px !important;
        min-width: 38px !important;
    }
    
    #smartSearchBtn span {
        display: none !important;
    }
}

/* ========================================
   FIX: NOTIFICATION WIDGET
   ======================================== */
@media only screen and (max-width: 768px) {
    .notification-widget {
        position: relative !important;
    }
    
    .notification-dropdown {
        position: fixed !important;
        top: var(--mobile-header-height) !important;
        left: 10px !important;
        right: 10px !important;
        width: auto !important;
        max-width: none !important;
        max-height: 60vh !important;
        border-radius: 16px !important;
        z-index: 99999 !important;
    }
    
    [dir="rtl"] .notification-dropdown {
        left: 10px !important;
        right: 10px !important;
    }
}

/* ========================================
   FIX: FORM LAYOUT ON MOBILE
   ======================================== */
@media only screen and (max-width: 768px) {
    .form-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }
    
    .form-group {
        width: 100% !important;
    }
}

/* ========================================
   FIX: PIPELINE/WORKFLOW CARDS
   ======================================== */
@media only screen and (max-width: 768px) {
    .pipeline-count {
        font-size: 24px !important;
    }
}

/* ========================================
   FIX: CHARTS RESPONSIVENESS
   ======================================== */
@media only screen and (max-width: 768px) {
    .chart-wrapper, .chart-container {
        height: 200px !important;
        min-height: 180px !important;
        margin-bottom: 15px !important;
        overflow: hidden !important;
    }
    
    .charts-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
    
    /* Chart cards */
    .chart-card, .stats-card {
        width: 100% !important;
        margin-bottom: 15px !important;
        padding: 15px !important;
        border-radius: 12px !important;
    }
    
    .chart-card h3, .chart-title, .card-title {
        font-size: 14px !important;
        margin-bottom: 10px !important;
    }
    
    /* Canvas charts resize */
    canvas {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* Horizontal bar charts - make labels readable */
    .legend {
        font-size: 10px !important;
        flex-wrap: wrap !important;
    }
    
    .legend-item {
        font-size: 9px !important;
        padding: 3px 6px !important;
    }
}

/* ========================================
   FIX: DASHBOARD SECTIONS MOBILE
   ======================================== */
@media only screen and (max-width: 480px) {
    /* Section headers */
    .section-header, h3.section-header {
        font-size: 14px !important;
        padding: 10px 0 !important;
        margin-bottom: 10px !important;
    }
    
    /* Data display cards */
    .info-card, .summary-card {
        padding: 12px !important;
        margin-bottom: 10px !important;
    }
    
    /* Progress bars */
    .progress, .progress-bar {
        height: 8px !important;
        border-radius: 4px !important;
    }
    
    table {
        font-size: 11px !important;
        min-width: 500px !important;
    }
    
    table th, table td {
        padding: 8px 6px !important;
        white-space: nowrap !important;
    }
    
    /* Top subcontractors list */
    .leaderboard-item {
        padding: 10px !important;
        margin-bottom: 8px !important;
        font-size: 12px !important;
    }
    
    .leaderboard-name {
        font-size: 11px !important;
        max-width: 150px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
    
}

/* ========================================
   FIX: LOGIN PAGE MOBILE
   ======================================== */
@media only screen and (max-width: 768px) {
    .login-container {
        min-height: 100vh !important;
        min-height: -webkit-fill-available !important;
        padding: 20px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .login-box {
        width: 100% !important;
        max-width: 360px !important;
        margin: 0 auto !important;
    }
}

/* ========================================
   FIX: FILE UPLOAD AREAS
   ======================================== */
@media only screen and (max-width: 768px) {
    .dropzone {
        padding: 20px !important;
        min-height: 100px !important;
    }
}

/* ========================================
   ANIMATION PERFORMANCE OPTIMIZATIONS
   ======================================== */
@media only screen and (max-width: 768px) {
    /* Use GPU acceleration for animations */
    .sidebar, .mobile-bottom-nav, .modal, .header {
        will-change: transform;
        transform: translateZ(0);
        backface-visibility: hidden;
    }
    
    /* Reduce particle count on mobile */
    .particle:nth-child(n+15) {
        display: none !important;
    }
}

/* ========================================
   FIX: KPI PAGES MOBILE OPTIMIZATION
   ======================================== */
@media only screen and (max-width: 768px) {
    .kpi-detail-card {
        padding: 12px !important;
        border-radius: 12px !important;
        min-height: auto !important;
    }
    
    .kpi-card-label {
        font-size: 10px !important;
        margin-bottom: 5px !important;
    }
    
    .kpi-card-value {
        font-size: 20px !important;
    }
    
    .kpi-card-sublabel {
        font-size: 9px !important;
    }
    
    /* Chart grids - force single column */
    [style*="grid-template-columns: repeat(auto-fit, minmax(400px"],
    [style*="grid-template-columns: repeat(auto-fit, minmax(300px"] {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
    }
    
    /* Chart containers */
    .chart-container {
        width: 100% !important;
        margin-bottom: 15px !important;
        padding: 15px !important;
        border-radius: 12px !important;
    }
    
    .chart-title {
        font-size: 13px !important;
        margin-bottom: 10px !important;
    }
    
    .chart-title i {
        font-size: 14px !important;
    }
    
    .chart-wrapper {
        height: 200px !important;
        min-height: 180px !important;
    }
    
    /* Data tables on mobile */
    .data-table {
        font-size: 11px !important;
        display: block !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
    }
    
    .data-table th, .data-table td {
        padding: 8px 10px !important;
        font-size: 11px !important;
    }
    
    .data-table th:first-child, .data-table td:first-child {
        position: sticky !important;
        left: 0 !important;
        background: rgba(31, 41, 55, 0.98) !important;
        z-index: 2 !important;
    }
}

/* Extra small screens - even more compact */
@media only screen and (max-width: 400px) {
    .chart-wrapper {
        height: 180px !important;
    }
    
    .kpi-card-value {
        font-size: 18px !important;
    }
    
    .chart-title {
        font-size: 12px !important;
    }
}

/* ========================================
   FIX: REPORTS PAGE MOBILE
   ======================================== */
@media only screen and (max-width: 768px) {
    /* Report tabs */
    .report-tabs {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        justify-content: center !important;
        margin-bottom: 15px !important;
    }
    
    .report-tab {
        font-size: 11px !important;
        padding: 8px 12px !important;
        border-radius: 20px !important;
    }
    
    .report-tab i {
        margin-right: 4px !important;
    }
    
    /* Stats grid */
    .stats-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        margin-bottom: 15px !important;
    }
    
    .stats-card, .stat-card {
        padding: 12px !important;
        border-radius: 12px !important;
    }
    
    .stat-value {
        font-size: 18px !important;
    }
    
    .stat-label {
        font-size: 10px !important;
    }
    
    /* Charts grid single column */
    .charts-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
    }
    
    .chart-card {
        width: 100% !important;
        margin-bottom: 0 !important;
    }
    
    .chart-header {
        padding: 10px !important;
    }
    
    /* Workflow pipeline */
    .workflow-pipeline {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    .pipeline-stage {
        padding: 12px !important;
        font-size: 12px !important;
    }
    
    /* Efficiency gauges */
    .efficiency-section {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 10px !important;
    }
    
    .efficiency-card {
        padding: 10px !important;
    }
    
    .efficiency-gauge {
        width: 80px !important;
        height: 80px !important;
        margin: 0 auto 8px !important;
    }
    
    .efficiency-value {
        font-size: 14px !important;
    }
    
    .efficiency-label {
        font-size: 9px !important;
    }
    
    /* Leaderboard */
    .leaderboard {
        padding: 15px !important;
    }
    
    .leaderboard-item {
        padding: 10px !important;
        margin-bottom: 8px !important;
    }
    
    .leaderboard-rank {
        width: 28px !important;
        height: 28px !important;
        font-size: 12px !important;
    }
    
    .leaderboard-name {
        font-size: 12px !important;
        max-width: 100px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
    
    .leaderboard-role {
        font-size: 10px !important;
    }
    
    .leaderboard-score {
        font-size: 14px !important;
    }
    
    /* Bottleneck list */
    .bottleneck-list {
        padding: 10px !important;
    }
    
    .bottleneck-item {
        padding: 12px !important;
        margin-bottom: 8px !important;
        font-size: 12px !important;
    }
}

@media only screen and (max-width: 400px) {
    .efficiency-section {
        grid-template-columns: 1fr !important;
    }
    
    .efficiency-gauge {
        width: 100px !important;
        height: 100px !important;
    }
    
    .stats-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ========================================
   FIX: WORKFLOW FUNNEL MOBILE
   ======================================== */
@media only screen and (max-width: 768px) {
    .workflow-funnel {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    
    .funnel-step {
        padding: 12px 8px !important;
        border-radius: 10px !important;
        min-width: 0 !important;
    }
    
    .funnel-count {
        font-size: 20px !important;
    }
    
    .funnel-label {
        font-size: 10px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    /* KPI Summary row mobile fix */
    .kpi-summary-row {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
}

@media only screen and (max-width: 400px) {
    .workflow-funnel {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .funnel-count {
        font-size: 18px !important;
    }
    
    .funnel-label {
        font-size: 9px !important;
    }
}