/**
 * Smart Sidebar System - Professional ERP Sidebar
 * نظام السايدبار الذكي - احترافي لأنظمة ERP
 * 
 * Features:
 * - Hide completely when unpinned
 * - Show on hover when hidden
 * - Pin/Unpin functionality
 * - localStorage state persistence
 * - RTL/LTR support
 * - Smooth animations
 */

/* ========== CSS Variables ========== */
:root {
    --sidebar-width: 260px;
    --sidebar-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --sidebar-z-index: 1040;
    --sidebar-overlay-z-index: 1035;
}

/* ========== Toggle Button (Hidden) ========== */
.sidebar-toggle-btn {
    display: none !important;
}

/* ========== Pin Button ========== */
.sidebar-pin-btn {
    position: absolute;
    top: 10px;
    width: 28px;
    height: 28px;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1060;
    transition: all 0.2s ease;
    color: rgba(255,255,255,0.5);
    border-radius: 6px;
}

[dir="rtl"] .sidebar-pin-btn {
    left: 10px;
    right: auto;
}

[dir="ltr"] .sidebar-pin-btn {
    right: 10px;
    left: auto;
}

.sidebar-pin-btn:hover {
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.9);
}

.sidebar-pin-btn.pinned {
    color: var(--theme-primary, #714B67);
}

.sidebar-pin-btn.pinned i {
    transform: rotate(45deg);
}

/* ========== Mobile Overlay ========== */
.sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: var(--sidebar-overlay-z-index);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.sidebar-overlay.show {
    opacity: 1;
    visibility: visible;
}

/* ========== Flyout Container (for future use) ========== */
.sidebar-flyout {
    display: none;
}

/* ========== Tooltip (for future use) ========== */
.sidebar-tooltip {
    display: none;
}

/* ========== Main Content Adjustment ========== */
.main-content {
    transition: margin var(--sidebar-transition);
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

[dir="rtl"] body.sidebar-pinned .main-content {
    width: calc(100% - var(--sidebar-width)) !important;
    max-width: calc(100% - var(--sidebar-width)) !important;
    margin-right: var(--sidebar-width) !important;
    margin-left: 0 !important;
}

[dir="ltr"] body.sidebar-pinned .main-content {
    width: calc(100% - var(--sidebar-width)) !important;
    max-width: calc(100% - var(--sidebar-width)) !important;
    margin-left: var(--sidebar-width) !important;
    margin-right: 0 !important;
}

[dir="rtl"] body:not(.sidebar-pinned) .main-content,
[dir="rtl"] body.sidebar-collapsed .main-content,
[dir="ltr"] body:not(.sidebar-pinned) .main-content,
[dir="ltr"] body.sidebar-collapsed .main-content {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* ========== Mobile Styles ========== */
@media (max-width: 991.98px) {
    #sidebar.sidebar {
        transform: translateX(100%);
    }
    
    [dir="ltr"] #sidebar.sidebar {
        transform: translateX(-100%);
    }
    
    #sidebar.sidebar.mobile-open {
        transform: translateX(0) !important;
        width: 260px !important;
        min-width: 260px !important;
        max-width: 260px !important;
    }
    
    /* Hide toggle button on mobile */
    .sidebar-toggle-btn {
        display: none !important;
    }
    
    /* Main content full width on mobile */
    [dir="rtl"] .main-content,
    [dir="ltr"] .main-content,
    [dir="rtl"] body.sidebar-collapsed .main-content,
    [dir="ltr"] body.sidebar-collapsed .main-content {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }
}

/* ========== Accessibility ========== */
.sidebar-toggle-btn:focus,
.sidebar-pin-btn:focus {
    outline: 2px solid var(--theme-primary, #714B67);
    outline-offset: 2px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    #sidebar.sidebar,
    .main-content,
    .sidebar-toggle-btn,
    .sidebar-pin-btn,
    .sidebar-overlay {
        transition: none !important;
    }
}

/* ========== Desktop Toggle Button in Navbar ========== */
.sidebar-desktop-toggle {
    display: none !important;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.15) !important;
    border: 1px solid rgba(255,255,255,0.3) !important;
    color: #fff !important;
    padding: 0.4rem 0.75rem !important;
    font-size: 0.935rem !important;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 6px !important;
    margin-inline-end: 10px;
    min-width: 40px;
    height: 36px;
}

.sidebar-desktop-toggle:hover {
    background: rgba(255,255,255,0.25) !important;
    color: #fff !important;
    transform: scale(1.05);
}

.sidebar-desktop-toggle:focus {
    outline: 2px solid rgba(255,255,255,0.5);
    outline-offset: 2px;
}

.sidebar-desktop-toggle i {
    font-size: 0.85rem;
}

/* Show desktop toggle button when sidebar is collapsed/unpinned */
body.sidebar-collapsed .sidebar-desktop-toggle,
body:not(.sidebar-pinned) .sidebar-desktop-toggle {
    display: flex !important;
}

/* Hide when sidebar is visible and pinned */
body.sidebar-pinned:not(.sidebar-collapsed) .sidebar-desktop-toggle {
    display: none !important;
}

/* ========== Edge Hover Zone (to reveal sidebar) ========== */
.sidebar-edge-zone {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 8px;
    z-index: 1039;
    background: transparent;
    cursor: pointer;
    display: none;
}

[dir="rtl"] .sidebar-edge-zone {
    right: 0;
    left: auto;
}

[dir="ltr"] .sidebar-edge-zone {
    left: 0;
    right: auto;
}

/* Show edge zone when sidebar is hidden */
body.sidebar-collapsed .sidebar-edge-zone,
body:not(.sidebar-pinned) .sidebar-edge-zone {
    display: block;
}

/* Hide edge zone when sidebar is visible */
body.sidebar-pinned:not(.sidebar-collapsed) .sidebar-edge-zone {
    display: none;
}

.sidebar-edge-zone:hover {
    background: linear-gradient(to left, transparent, rgba(113, 75, 103, 0.1));
}

[dir="ltr"] .sidebar-edge-zone:hover {
    background: linear-gradient(to right, transparent, rgba(113, 75, 103, 0.1));
}

/* Mobile: Always hide desktop toggle and edge zone */
@media (max-width: 991.98px) {
    .sidebar-desktop-toggle,
    .sidebar-edge-zone {
        display: none !important;
    }
}

/* ========== Print Styles ========== */
@media print {
    #sidebar.sidebar,
    .sidebar-toggle-btn,
    .sidebar-pin-btn,
    .sidebar-overlay,
    .sidebar-desktop-toggle,
    .sidebar-edge-zone {
        display: none !important;
    }
    
    .main-content {
        margin: 0 !important;
    }
}