/**
 * DESKTOP LAYOUT MASTER - THE ONLY DESKTOP LAYOUT CSS YOU NEED
 * This replaces ALL other layout fix files for desktop
 * 
 * RULES:
 * 1. Sidebar: ALWAYS 280px wide (80px when collapsed)
 * 2. Main content: ALWAYS fills remaining space
 * 3. NO GAPS between sidebar and main content
 * 4. Works on ALL desktop resolutions (1024px+)
 */

/* ===============================================
   DESKTOP LAYOUT - GRID SYSTEM
   =============================================== */

/* Desktop container with sidebar */
@media (min-width: 1024px) {
    .app-container {
        display: grid !important;
        grid-template-columns: 280px 1fr !important; /* Fixed width, no CSS variable */
        gap: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        position: relative !important;
    }
    
    /* Sidebar - Fixed width, sticky position */
    .bankdash-sidebar {
        grid-column: 1 !important;
        width: 280px !important;
        min-width: 280px !important;
        max-width: 280px !important;
        height: 100vh !important;
        position: sticky !important;
        top: 0 !important;
        left: 0 !important; /* Always at left edge */
        transform: translateX(0) !important; /* Force visible */
        overflow-y: auto !important;
        overflow-x: hidden !important;
        background: var(--sidebar-bg, #ffffff) !important;
        border-right: 1px solid var(--border-color, #e2e8f0) !important; /* Clean border */
        margin: 0 !important;
        padding: 0 !important;
        z-index: auto !important;
        display: block !important; /* Force display */
        visibility: visible !important; /* Force visibility */
        opacity: 1 !important; /* Force opacity */
    }
    
    /* Main content - Fills remaining space */
    .main-content {
        grid-column: 2 !important;
        width: 100% !important;
        height: 100vh !important;
        overflow-y: auto !important; /* Changed to auto for dynamic scrollbar */
        overflow-x: hidden !important;
        background: var(--bg-primary, #f8f9fa) !important;
        color: var(--text-primary, #333333) !important;
        margin: 0 !important;
        padding: 0 !important;
        z-index: auto !important;
        /* Dynamic scrollbar settings */
        scrollbar-width: thin !important; /* Firefox - thin scrollbar */
        scrollbar-gutter: auto !important; /* NO reserved space - content goes to edge */
        -ms-overflow-style: scrollbar !important; /* IE/Edge */
    }
    
    /* Dynamic scrollbar styling - WebKit browsers */
    .main-content::-webkit-scrollbar {
        width: 12px !important;
        height: 12px !important;
    }
    
    .main-content::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.05) !important;
        border-radius: 6px !important;
        margin: 4px 0 !important;
    }
    
    .main-content::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.2) !important;
        border-radius: 6px !important;
        border: 2px solid transparent !important;
        background-clip: padding-box !important;
        min-height: 40px !important; /* Minimum thumb size */
    }
    
    .main-content::-webkit-scrollbar-thumb:hover {
        background: rgba(0, 0, 0, 0.3) !important;
        background-clip: padding-box !important;
    }
    
    .main-content::-webkit-scrollbar-thumb:active {
        background: rgba(0, 0, 0, 0.4) !important;
        background-clip: padding-box !important;
    }
    
    /* Firefox scrollbar styling */
    .main-content {
        scrollbar-color: rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.05) !important;
    }
    
    /* Main container inside main-content */
    .main-content .main-container {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 30px 0px 30px 0px !important; /* Top Right Bottom Left - KLOSS mot sidebar (LEFT=0) */
        box-sizing: border-box !important;
        background: var(--bg-primary, #ffffff) !important;
        color: var(--text-primary, #333333) !important;
        /* CRITICAL: Allow content to grow naturally */
        height: auto !important;
        min-height: calc(100vh - 60px) !important;
        max-height: none !important;
        overflow: visible !important;
    }
    
    
    /* Apply theme colors to ALL main content elements */
    .main-content h1,
    .main-content h2,
    .main-content h3,
    .main-content h4,
    .main-content h5,
    .main-content h6 {
        color: var(--text-primary, #333333) !important;
    }
    
    .main-content p,
    .main-content div,
    .main-content span,
    .main-content label,
    .main-content li {
        color: var(--text-primary, #333333) !important;
    }
    
    .main-content .card,
    .main-content .modal-content,
    .main-content .bg-white {
        background: var(--bg-card, #ffffff) !important;
        border-color: var(--border-primary, #e2e8f0) !important;
    }
    
    .main-content input,
    .main-content textarea,
    .main-content select {
        background: var(--input-bg, #ffffff) !important;
        color: var(--text-primary, #333333) !important;
        border-color: var(--border-primary, #e2e8f0) !important;
    }
    
    .main-content .btn-primary {
        background: var(--button-primary, #6366f1) !important;
        border-color: var(--button-primary, #6366f1) !important;
    }
    
    .main-content .btn-secondary {
        background: var(--button-secondary, #ffffff) !important;
        border-color: var(--border-primary, #e2e8f0) !important;
        color: var(--text-primary, #333333) !important;
    }
    
    /* Collapsed sidebar state */
    .bankdash-sidebar[data-collapsed="true"],
    .bankdash-sidebar.collapsed {
        width: 80px !important;
        min-width: 80px !important;
        max-width: 80px !important;
    }
    
    /* Adjust grid when sidebar is collapsed */
    .app-container:has(.bankdash-sidebar[data-collapsed="true"]),
    .app-container:has(.bankdash-sidebar.collapsed) {
        grid-template-columns: 80px 1fr !important;
    }
    
    /* CRITICAL FIX: Prevent sidebar from hiding on resize */
    .bankdash-sidebar[data-device="desktop"] {
        left: 0 !important;
        transform: translateX(0) !important;
        display: block !important;
        visibility: visible !important;
    }
}

/* ===============================================
   REMOVE ALL CONFLICTING STYLES
   =============================================== */

/* Kill all margins and paddings that create gaps */
@media (min-width: 1024px) {
    .app-container * {
        box-sizing: border-box !important;
    }
    
    /* Remove Bootstrap container margins */
    .app-container .container,
    .app-container .container-fluid {
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: 100% !important;
    }
    
    /* Remove Bootstrap row margins */
    .app-container .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Ensure no floating elements break layout */
    .app-container::after {
        content: "" !important;
        display: table !important;
        clear: both !important;
    }
}

/* ===============================================
   RESPONSIVE BREAKPOINTS (DESKTOP ONLY)
   =============================================== */

/* Standard Desktop (1024px - 1439px) */
@media (min-width: 1024px) and (max-width: 1439px) {
    .main-content .main-container {
        padding: 20px 0px 20px 0px !important; /* Top Right Bottom Left - KLOSS mot sidebar */
    }
}

/* Large Desktop (1440px - 1919px) */
@media (min-width: 1440px) and (max-width: 1919px) {
    .main-content .main-container {
        padding: 30px 0px 30px 0px !important; /* Top Right Bottom Left - KLOSS mot sidebar */
    }
}

/* Extra Large Desktop (1920px+) */
@media (min-width: 1920px) {
    .main-content .main-container {
        padding: 40px 0px 40px 0px !important; /* Top Right Bottom Left - KLOSS mot sidebar */
    }
}

/* ===============================================
   FALLBACK FOR BROWSERS WITHOUT :has()
   =============================================== */
@supports not selector(:has(*)) {
    @media (min-width: 1024px) {
        .app-container.with-sidebar {
            display: grid !important;
            grid-template-columns: 280px 1fr !important;
        }
        
        .app-container.sidebar-collapsed {
            grid-template-columns: 80px 1fr !important;
        }
    }
}

/* ===============================================
   OVERRIDE ALL OTHER CSS FILES
   =============================================== */
body .app-container,
html body .app-container,
html body div.app-container {
    /* Use !important to override all other rules */
}

/* ===============================================
   FIX RESIZE BUG - FORCE SIDEBAR VISIBLE
   =============================================== */
@media (min-width: 1024px) {
    /* Override any JavaScript that tries to hide sidebar */
    .bankdash-sidebar {
        left: 0 !important;
        transform: none !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Prevent mobile styles from applying on desktop */
    body.sidebar-open .bankdash-sidebar,
    body:not(.sidebar-open) .bankdash-sidebar {
        left: 0 !important;
        transform: translateX(0) !important;
    }
    
    /* Override responsive handler that might hide sidebar */
    .bankdash-sidebar.hidden,
    .bankdash-sidebar.mobile-hidden,
    .bankdash-sidebar[style*="display: none"],
    .bankdash-sidebar[style*="left: -"] {
        left: 0 !important;
        display: block !important;
        transform: translateX(0) !important;
    }
}

/* ===============================================
   DEBUG MODE - REMOVE IN PRODUCTION
   =============================================== */
.debug-mode .bankdash-sidebar {
    border-right: 3px solid #00ff00 !important;
}

.debug-mode .main-content {
    border-left: 3px solid #ff0000 !important;
}

/* ===============================================
   SCROLLBAR FIX - FORCE DYNAMIC BEHAVIOR
   =============================================== */
@media (min-width: 1024px) {
    /* Force main content to use dynamic scrollbar */
    .main-content,
    .main-content.scroll,
    .main-content[style*="overflow"],
    body .main-content,
    html body .main-content,
    .app-container .main-content {
        overflow-y: auto !important; /* Auto = dynamic scrollbar */
        overflow-x: hidden !important;
        height: 100vh !important;
        position: relative !important;
        max-height: 100vh !important;
        display: block !important;
    }
    
    /* Remove any forced scroll from child elements */
    .main-content > * {
        overflow-y: visible !important;
        overflow-x: visible !important;
    }
    
    /* Special handling for main-container to allow natural growth */
    .main-content .main-container,
    .main-container {
        overflow: visible !important;
        height: auto !important;
        min-height: calc(100vh - 60px) !important;
        max-height: none !important;
        padding-bottom: 60px !important;
    }
    
    /* Force height auto with highest specificity */
    body .app-container .main-content .main-container {
        height: auto !important;
    }
    
    /* Ensure all sections inside can grow */
    .main-content .main-container > * {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
    
    /* Override any overflow-y: scroll that might be set inline or by JS */
    body .main-content[style*="overflow-y: scroll"],
    body .main-content[style*="overflow-y:scroll"],
    .main-content[style*="overflow: scroll"],
    .main-content[style*="overflow:scroll"] {
        overflow-y: auto !important;
    }
    
    /* Ensure scrollbar appears only when needed */
    .main-content {
        overflow-y: auto !important;
        scrollbar-gutter: stable both-edges !important; /* Reserve space but only show when needed */
    }
}

/* ===============================================
   THEME BUTTON VISIBILITY FIX (2024-09-12)
   Ensures theme palette button is always visible
   =============================================== */

.bankdash-sidebar #sidebar-theme-toggle,
.bankdash-sidebar .theme-toggle-btn {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.bankdash-sidebar .user-actions {
    display: flex !important;
    visibility: visible !important;
}

/* ===============================================
   PROFILER IMPORT WIZARD FIX (2024-09-15)
   Fixes Import Wizard scrolling and navigation issues
   =============================================== */

/* Fix Import Wizard when loaded as external HTML */
@media (min-width: 1024px) {
    /* Override the restrictive height on content-area in profiler-import-enterprise.html */
    body .content-area,
    html body .content-area,
    .content-area,
    div.content-area {
        height: auto !important;
        min-height: calc(100vh - 140px) !important;
        max-height: none !important;
        overflow: visible !important;
        overflow-y: auto !important;
        padding-bottom: 120px !important; /* Space for navigation buttons */
    }
    
    /* Fix wizard container to be fully scrollable */
    body[class*="profiler"] .wizard-container,
    .wizard-container {
        max-width: 900px !important;
        margin: 0 auto !important;
        background: #2a2a2a !important;
        border-radius: 8px !important;
        padding: 30px !important;
        min-height: auto !important;
        height: auto !important;
        overflow: visible !important;
    }
    
    /* Ensure wizard content area can grow */
    body[class*="profiler"] .wizard-content,
    .wizard-content {
        min-height: 400px !important;
        height: auto !important;
        max-height: none !important;
        padding: 20px !important;
        background: #1a1a1a !important;
        border-radius: 4px !important;
        border: 1px solid #444 !important;
        overflow: visible !important;
        margin-bottom: 30px !important;
    }
    
    /* Fix navigation buttons to be sticky at bottom */
    body .wizard-buttons,
    html body .wizard-buttons,
    .wizard-buttons,
    div.wizard-buttons {
        position: sticky !important;
        bottom: 20px !important;
        background: #2a2a2a !important;
        padding: 20px !important;
        margin: 30px -30px -30px -30px !important;
        border-top: 1px solid #444 !important;
        border-radius: 0 0 8px 8px !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        z-index: 100 !important;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3) !important;
    }
    
    /* Ensure buttons are always visible and clickable */
    body[class*="profiler"] .wizard-buttons .btn,
    .wizard-buttons .btn {
        padding: 12px 24px !important;
        border: none !important;
        border-radius: 6px !important;
        font-weight: bold !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
        text-transform: uppercase !important;
        font-size: 0.9rem !important;
        min-width: 120px !important;
        z-index: 101 !important;
    }
    
    /* Fix for consultants preview area scrolling */
    body[class*="profiler"] #consultantPreviewArea,
    #consultantPreviewArea {
        max-height: 500px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding-right: 10px !important;
        margin-bottom: 20px !important;
    }
    
    /* Scrollbar styling for wizard content */
    body[class*="profiler"] #consultantPreviewArea::-webkit-scrollbar,
    #consultantPreviewArea::-webkit-scrollbar {
        width: 8px !important;
    }
    
    body[class*="profiler"] #consultantPreviewArea::-webkit-scrollbar-track,
    #consultantPreviewArea::-webkit-scrollbar-track {
        background: #333 !important;
        border-radius: 4px !important;
    }
    
    body[class*="profiler"] #consultantPreviewArea::-webkit-scrollbar-thumb,
    #consultantPreviewArea::-webkit-scrollbar-thumb {
        background: #4a90e2 !important;
        border-radius: 4px !important;
    }
    
    body[class*="profiler"] #consultantPreviewArea::-webkit-scrollbar-thumb:hover,
    #consultantPreviewArea::-webkit-scrollbar-thumb:hover {
        background: #357abd !important;
    }
    
    /* Fix for when Import Wizard is loaded inside authenticated-app */
    .main-content iframe[src*="profiler-import"],
    .main-content [src*="profiler-import"] {
        width: 100% !important;
        height: calc(100vh - 60px) !important;
        border: none !important;
        overflow-y: auto !important;
    }
    
    /* Override any body overflow hidden from profiler-import-enterprise.html */
    body {
        overflow: auto !important;
    }
    
    /* Ensure progress bars and modals work correctly */
    body[class*="profiler"] .progress-bar,
    .progress-bar {
        background: #333 !important;
        border-radius: 4px !important;
        height: 30px !important;
        overflow: hidden !important;
        margin: 20px 0 !important;
        width: 100% !important;
    }
    
    body[class*="profiler"] .modal,
    .modal {
        z-index: 1000 !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: rgba(0, 0, 0, 0.8) !important;
    }
    
    body[class*="profiler"] .modal.active,
    .modal.active {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

/* Mobile responsive fixes for Import Wizard */
@media (max-width: 1023px) {
    body[class*="profiler"] .wizard-container,
    .wizard-container {
        margin: 0 10px !important;
        padding: 20px !important;
        max-width: none !important;
    }
    
    body[class*="profiler"] .wizard-buttons,
    .wizard-buttons {
        flex-direction: column !important;
        gap: 10px !important;
        padding: 15px !important;
    }
    
    body[class*="profiler"] .wizard-buttons .btn,
    .wizard-buttons .btn {
        width: 100% !important;
        min-width: auto !important;
    }
    
    body[class*="profiler"] .dual-panel,
    .dual-panel {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
}

/* ===============================================
   END OF DESKTOP LAYOUT MASTER
   =============================================== */