/*
 * Admin Sidebar Visibility Override - Phase 7.1 (SRP Approach)
 * Sidebar visibility fix for ALL viewport sizes - SINGLE RESPONSIBILITY
 * This file contains ONLY the sidebar visibility override rules.
 * Base sidebar functionality remains in nav_sidebar.css (SRP compliance).
 * 
 * Phase 7: Added display: block !important to override display: none rules that hide sidebar content.
 * The visibility: visible !important override was insufficient because display: none removes
 * elements from the document flow entirely. Both display and visibility properties are now overridden.
 * 
 * Phase 7.1: Removed visibility: visible !important from non-shifted state to allow toggle functionality.
 * The toggle works by adding/removing the 'shifted' class on .main, which controls visibility via
 * base CSS. Forcing visibility: visible on non-shifted state broke the toggle. Now display: block
 * ensures sidebar stays in DOM (overriding display: none), while visibility is controlled by toggle.
 * 
 * v11.5.1: Mobile content width fix added - content expands to full width when sidebar collapsed on mobile
 * 
 * Related: SOP-CSS_v1.md, SOP-SRP.md, Production/docs/v11/v11.5/v11.5.1_AdminMobilePage.md
 */

/* Ensure sidebar is in document flow at ALL viewport sizes */
/* Using !important to override CSS specificity conflicts with other admin CSS files */
/* Per SOP-CSS_v1.md: Acceptable for critical fixes that must override conflicting styles */

/* Base selector - override display: none, but don't force visibility */
/* Phase 7: Added display: block !important to override display: none from media queries */
/* This ensures sidebar stays in DOM, allowing toggle to work */
#nav-sidebar {
    display: block !important;  /* Override display: none - keep sidebar in DOM flow */
    left: 0 !important;
    margin-left: 0 !important;
    /* visibility controlled by .main > #nav-sidebar and .main.shifted > #nav-sidebar */
}

/* Non-shifted state - allow base CSS to hide sidebar via visibility */
/* Phase 7.1: Removed visibility: visible !important to allow toggle to hide sidebar */
/* Phase 7: Added display: block !important to override display: none from media queries */
.main > #nav-sidebar {
    display: block !important;  /* Override display: none */
    /* Don't force visibility here - base CSS uses visibility: hidden to hide sidebar */
    left: 0 !important;
    margin-left: 0 !important;
}


/* Ensure toggle button remains visible */
.toggle-nav-sidebar,
#toggle-nav-sidebar {
    display: flex !important;
    visibility: visible !important;
}

/* Adjust content area to account for visible sidebar */
.main > #nav-sidebar + .content {
    max-width: calc(100% - 275px);
}

/* Shifted state - sidebar visible when toggled open */
/* Phase 7: Added display: block !important to override display: none in shifted state */
/* Phase 7.1: Keep visibility: visible !important to ensure sidebar is visible when shifted */
.main.shifted > #nav-sidebar {
    display: block !important;  /* Override display: none */
    margin-left: 0 !important;
    visibility: visible !important;  /* Force visible when shifted */
}

.main.shifted > #nav-sidebar + .content {
    max-width: calc(100% - 275px);
}

/* RTL support */
/* Phase 7: Added display: block !important to override display: none for RTL */
/* Phase 7.1: Removed visibility: visible !important from non-shifted state to allow toggle */
[dir="rtl"] .main > #nav-sidebar,
[dir="rtl"] #nav-sidebar {
    display: block !important;  /* Override display: none - keep sidebar in DOM flow */
    right: 0 !important;
    margin-right: 0 !important;
    /* Don't force visibility here - allow toggle to work */
}

/* RTL shifted state - sidebar visible when toggled open */
/* Phase 7: Added display: block !important to override display: none for RTL shifted state */
/* Phase 7.1: Keep visibility: visible !important to ensure sidebar is visible when shifted */
[dir="rtl"] .main.shifted > #nav-sidebar {
    display: block !important;  /* Override display: none */
    margin-right: 0 !important;
    visibility: visible !important;  /* Force visible when shifted */
}

/* v11.5.1: Mobile-specific override for nav sidebar mobile behavior */
/* When sidebar is collapsed (not shifted) on mobile, content should take full width */
@media (max-width: 767px) {
    /* On mobile, when sidebar is collapsed (not shifted), content takes full width */
    .main > #nav-sidebar + .content {
        max-width: 100% !important;
    }

    /* On mobile, when sidebar is expanded (shifted), content is constrained */
    .main.shifted > #nav-sidebar + .content {
        max-width: calc(100% - 275px) !important;
    }
}