/**
 * SAW Admin - Sidebar Wrapper
 * @package SAW_Visitors
 * @version 4.2.0
 * 
 * NOTE: Responsive overrides are in _sidebar-responsive.css (loaded later)
 */

/* Overlay for RIGHT detail sidebar (not navigation menu) */
.sa-detail-sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--saw-transition-base),
        visibility var(--saw-transition-base);
    z-index: 9997;
    /* Below bottom-nav (10001) and sidebar-nav overlay (9998) */
}

.sa-detail-sidebar-overlay--active {
    opacity: 1;
    visibility: visible;
}

/* ============================================
   SIDEBAR CONTAINER - DESKTOP DEFAULT
   ============================================ */
.sa-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 720px;
    max-width: 100%;

    /* Flexbox layout for header/content/footer */
    display: flex !important;
    flex-direction: column !important;

    background: var(--saw-bg-primary);
    box-shadow: var(--saw-shadow-xl);
    transform: translateX(100%);
    transition: transform var(--saw-transition-base);
    z-index: 10000;
    /* Above overlay (9997), below bottom-nav (10001) */

    /* Use dvh for better mobile support, fallback to vh */
    height: 100vh;
    height: 100dvh;
}

.sa-sidebar--active {
    transform: translateX(0);
}

/* Dark header variant */
.sa-sidebar--dark-header .sa-sidebar-header {
    background: #0f172a;
    color: #f1f5f9;
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

/* Nested sidebar */
.sa-sidebar--nested {
    z-index: 100001;
    width: 680px;
}

/* When nested is open, dim parent */
.sa-sidebar--has-nested {
    opacity: 0.7;
    pointer-events: none;
}

/* ============================================
   SIDEBAR FAB CONTAINER (inside sidebar)
   For detail mode - edit/delete buttons
   ============================================ */
.sa-sidebar-fab-container {
    position: absolute;
    right: 16px;
    bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 100;
}

.sa-sidebar-fab {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    text-decoration: none;
}

.sa-sidebar-fab svg {
    width: 20px;
    height: 20px;
}

/* Edit button - brand blue */
.sa-sidebar-fab--edit {
    background: var(--saw-brand-600, #005A8C);
    color: #ffffff;
}

.sa-sidebar-fab--edit:hover {
    background: var(--saw-brand-700, #004466);
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(0, 90, 140, 0.3);
}

/* Delete button - danger red */
.sa-sidebar-fab--delete {
    background: var(--saw-danger, #dc2626);
    color: #ffffff;
}

.sa-sidebar-fab--delete:hover {
    background: var(--saw-danger-dark, #b91c1c);
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(220, 38, 38, 0.3);
}

/* Loading state */
.sa-sidebar-fab.is-loading {
    pointer-events: none;
    opacity: 0.7;
}

/* Responsive - tablet */
@media (max-width: 1024px) and (min-width: 769px) {
    .sa-sidebar-fab-container {
        right: 12px;
        bottom: 80px;
        /* Above bottom-nav */
    }

    .sa-sidebar-fab {
        width: 44px;
        height: 44px;
    }

    .sa-sidebar-fab svg {
        width: 18px;
        height: 18px;
    }
}

/* Responsive - mobile */
@media (max-width: 768px) {
    .sa-sidebar-fab-container {
        right: 12px;
        bottom: 70px;
        /* Above bottom-nav */
    }

    .sa-sidebar-fab {
        width: 44px;
        height: 44px;
    }
}

/* ============================================
   SIDEBAR FAB - FORM MODE (Save button)
   ============================================ */
.sa-sidebar-fab-container--form {
    position: absolute;
    right: 16px;
    bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 100;
}

/* Save button - green/success color */
.sa-sidebar-fab--save {
    background: var(--saw-success, #10b981);
    color: #ffffff;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.3);
}

.sa-sidebar-fab--save:hover {
    background: var(--saw-success-dark, #059669);
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
}

.sa-sidebar-fab--save:active {
    transform: scale(1.05);
}

.sa-sidebar-fab--save svg {
    width: 24px;
    height: 24px;
}

/* Loading state for save */
.sa-sidebar-fab--save.is-loading {
    pointer-events: none;
    opacity: 0.7;
}

.sa-sidebar-fab--save.is-loading svg {
    animation: saw-fab-spin 1s linear infinite;
}

@keyframes saw-fab-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Responsive - tablet */
@media (max-width: 1024px) and (min-width: 769px) {
    .sa-sidebar-fab-container--form {
        right: 12px;
        bottom: 80px;
        /* Above bottom-nav */
    }

    .sa-sidebar-fab--save {
        width: 52px;
        height: 52px;
    }

    .sa-sidebar-fab--save svg {
        width: 22px;
        height: 22px;
    }
}

/* Responsive - mobile */
.sa-sidebar-fab-container--form {
    right: 12px;
    bottom: 70px;
    /* Above bottom-nav */
}

.sa-sidebar-fab--save {
    width: 52px;
    height: 52px;
}
}

/* ============================================
   NESTED SIDEBAR STYLING
   Layered effect for inline create forms
   ============================================ */

/* Parent sidebar when nested is open */
.saw-sidebar-wrapper.has-nested {
    pointer-events: none;
}

.saw-sidebar-wrapper.has-nested .saw-sidebar {
    opacity: 0.4;
    filter: brightness(0.7);
    transform: scale(0.98) translateX(-20px);
    transition: all 0.3s ease;
}

/* Nested sidebar wrapper */
.saw-sidebar-wrapper[data-is-nested="1"] {
    /* Same positioning as parent */
}

/* Nested sidebar - layered look */
.saw-sidebar-wrapper[data-is-nested="1"] .saw-sidebar {
    width: calc(100% - 30px);
    /* Slightly narrower */
    max-width: 700px;
    margin-left: 15px;
    box-shadow:
        -8px 0 30px rgba(0, 0, 0, 0.2),
        -2px 0 10px rgba(0, 0, 0, 0.1);
    border-left: 4px solid var(--saw-brand-500, #3b82f6);
    animation: saw-nested-slide-in 0.3s ease;
}

@keyframes saw-nested-slide-in {
    from {
        opacity: 0;
        transform: translateX(50px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Nested header special styling */
.saw-sidebar-wrapper[data-is-nested="1"] .saw-sidebar-header {
    background: linear-gradient(135deg, var(--saw-brand-600, #2563eb) 0%, var(--saw-brand-500, #3b82f6) 100%);
    border-bottom: none;
}

.saw-sidebar-wrapper[data-is-nested="1"] .saw-sidebar-header .saw-sidebar-title {
    color: #ffffff;
}

/* Nested close button */
.saw-sidebar-wrapper[data-is-nested="1"] .saw-sidebar-close {
    color: rgba(255, 255, 255, 0.9);
}

.saw-sidebar-wrapper[data-is-nested="1"] .saw-sidebar-close:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* Mobile - nested is fullscreen */
@media (max-width: 768px) {
    .saw-sidebar-wrapper.has-nested .saw-sidebar {
        transform: none;
        opacity: 0;
        pointer-events: none;
    }

    .saw-sidebar-wrapper[data-is-nested="1"] .saw-sidebar {
        width: 100%;
        max-width: none;
        margin-left: 0;
        border-left: none;
    }
}

/* Dark mode adjustments */
[data-theme="dark"] .saw-sidebar-wrapper.has-nested .saw-sidebar,
.dark-mode .saw-sidebar-wrapper.has-nested .saw-sidebar {
    filter: brightness(0.5);
}

[data-theme="dark"] .saw-sidebar-wrapper[data-is-nested="1"] .saw-sidebar,
.dark-mode .saw-sidebar-wrapper[data-is-nested="1"] .saw-sidebar {
    box-shadow:
        -8px 0 30px rgba(0, 0, 0, 0.5),
        -2px 0 10px rgba(0, 0, 0, 0.3);
}