/* Offcanvas Sidebar Component - Modern Industry Standard Approach */

/* ==================== */
/* Base Overlay Styles */
/* ==================== */

.offcanvas-overlay-from-right,
.offcanvas-overlay-from-left {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: none;
}

/* Right slide positioning */
.offcanvas-overlay-from-right {
    justify-content: flex-end;
}

/* Left slide positioning */
.offcanvas-overlay-from-left {
    justify-content: flex-start;
}

/* Opening animations */
.offcanvas-overlay-from-right.is-visible,
.offcanvas-overlay-from-left.is-visible {
    display: flex;
    animation: fadeIn 0.3s ease-out;
}

/* Closing animations */
.offcanvas-overlay-from-right.is-closing,
.offcanvas-overlay-from-left.is-closing {
    display: flex;
    animation: fadeOut 0.3s ease-out forwards;
    /* During the 300ms fade-out the overlay still covers the page. Without
     * pointer-events:none here, any scroll/click in that window hits the
     * closing overlay instead of the page underneath, so the page feels
     * "stuck" if the user closes the drawer and immediately tries to scroll. */
    pointer-events: none;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* ==================== */
/* Sidebar Base Styles */
/* ==================== */

.offcanvas-sidebar {
    background: var(--color-bg-white);
    width: 100vw; /* Mobile: < 768px */
    height: 100%;
    max-height: 100vh;
    display: flex;
    flex-direction: column;
    transform: translateZ(0);
    will-change: auto;
    overflow: hidden; /* Prevent sidebar itself from scrolling */
}

/* Right slide shadow */
.offcanvas-overlay-from-right .offcanvas-sidebar {
    box-shadow: -0.125rem 0 1rem rgba(0, 0, 0, 0.15);
}

/* Left slide shadow */
.offcanvas-overlay-from-left .offcanvas-sidebar {
    box-shadow: 0.125rem 0 1rem rgba(0, 0, 0, 0.15);
}

/* ==================== */
/* Slide Animations - Right */
/* ==================== */

/* Slide-in animation when opening from right */
.offcanvas-overlay-from-right.is-visible .offcanvas-sidebar {
    animation: slideInFromRight 0.3s ease-out;
}

/* Slide-out animation when closing to right */
.offcanvas-overlay-from-right.is-closing .offcanvas-sidebar {
    animation: slideOutToRight 0.3s ease-out forwards;
}

@keyframes slideInFromRight {
    from {
        transform: translateX(100%) translateZ(0);
    }
    to {
        transform: translateX(0) translateZ(0);
    }
}

@keyframes slideOutToRight {
    from {
        transform: translateX(0) translateZ(0);
    }
    to {
        transform: translateX(100%) translateZ(0);
    }
}

/* ==================== */
/* Slide Animations - Left */
/* ==================== */

/* Slide-in animation when opening from left */
.offcanvas-overlay-from-left.is-visible .offcanvas-sidebar {
    animation: slideInFromLeft 0.3s ease-out;
}

/* Slide-out animation when closing to left */
.offcanvas-overlay-from-left.is-closing .offcanvas-sidebar {
    animation: slideOutToLeft 0.3s ease-out forwards;
}

@keyframes slideInFromLeft {
    from {
        transform: translateX(-100%) translateZ(0);
    }
    to {
        transform: translateX(0) translateZ(0);
    }
}

@keyframes slideOutToLeft {
    from {
        transform: translateX(0) translateZ(0);
    }
    to {
        transform: translateX(-100%) translateZ(0);
    }
}

/* ==================== */
/* Header, Body, Footer */
/* ==================== */

.offcanvas-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 58px;
    box-sizing: border-box;
    padding: 0 1.5rem;
    border-bottom: 0.0625rem solid var(--color-border-neutral);
    background: var(--color-bg-white);
    flex-shrink: 0;
    /* Add shadow to header for visual separation */
    box-shadow: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.05);
    z-index: 1;
}

.offcanvas-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-text-default);
}

.offcanvas-close {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    color: var(--color-text-muted);
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.25rem;
    transition: all 0.15s ease;
}

.offcanvas-close:hover {
    color: var(--color-text-default);
    background: var(--color-bg-light-gray);
}

.offcanvas-body {
    flex: 1 1 auto;
    overflow-y: auto; /* Only shows scrollbar when content exceeds height */
    overflow-x: hidden;
    padding: 1.5rem;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    /* Minimum height to allow scrolling */
    min-height: 0;
    /* Hide scrollbar for cleaner look but keep functionality */
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent; /* Firefox */
}

/* Webkit scrollbar styling for Chrome/Safari */
.offcanvas-body::-webkit-scrollbar {
    width: 0.375rem;
}

.offcanvas-body::-webkit-scrollbar-track {
    background: transparent;
}

.offcanvas-body::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 0.1875rem;
}

.offcanvas-body::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
}

.offcanvas-footer {
    padding: 1rem 1.5rem;
    border-top: 0.0625rem solid var(--color-border-neutral);
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    background: var(--color-bg-white);
    flex-shrink: 0;
    flex-grow: 0;
    /* Add shadow to make footer stand out when scrolling */
    box-shadow: 0 -0.125rem 0.25rem rgba(0, 0, 0, 0.05);
    /* Ensure footer stays at bottom */
    position: relative;
    z-index: 2;
}

/* ==================== */
/* Responsive - Using standardized breakpoints from _breakpoints.css */
/* ==================== */

/* Tablet: >= 768px and < 1200px */
@media (min-width: 768px) and (max-width: 1199px) {
    .offcanvas-sidebar {
        width: 85vw;
    }
}

/* Desktop: >= 1200px */
@media (min-width: 1200px) {
    .offcanvas-sidebar {
        width: 800px;
    }
}

/* ==================== */
/* Narrow Sidebar Variant - For nested/secondary panels */
/* ==================== */

/* Mobile: < 768px - Full width */
.offcanvas-sidebar-narrow {
    width: 95vw;
}

/* Tablet: >= 768px and < 1200px - 75% width */
@media (min-width: 768px) and (max-width: 1199px) {
    .offcanvas-sidebar-narrow {
        width: 75vw;
    }
}

/* Desktop: >= 1200px - Fixed 700px */
@media (min-width: 1200px) {
    .offcanvas-sidebar-narrow {
        width: 700px;
    }
}

/* ==================== */
/* Transfer Sidebar Secondary Panel */
/* ==================== */

.group-transfer-sidebar-panels {
    display: flex;
    height: 100%;
    align-items: stretch;
    --transfer-sidebar-secondary-width: 28rem;
}

/* Subtle backdrop so transfer panel reads as an overlay. */
#transferSidebar.offcanvas-overlay-from-right {
    background: rgba(15, 23, 42, 0.28);
}

@media (min-width: 768px) and (max-width: 1199px) {
    .group-transfer-sidebar-panels {
        width: calc(100vw - 2.5rem);
        max-width: calc(100vw - 2.5rem);
        overflow: hidden;
        --transfer-sidebar-secondary-width: min(26rem, 44vw);
    }

    .group-transfer-sidebar-panels .panel-transfer-sidebar-main {
        width: auto;
        min-width: 0;
        flex: 1 1 auto;
    }

    .panel-transfer-sidebar-secondary.is-visible {
        width: var(--transfer-sidebar-secondary-width);
        max-width: 100vw;
        min-width: 20rem;
    }
}

@media (min-width: 1200px) {
    .group-transfer-sidebar-panels {
        /* Keep a visible left gutter so transfer panels read as an overlay. */
        max-width: calc(100vw - 4rem);
        margin-left: auto;
    }
}

.offcanvas-overlay-from-right.is-visible .group-transfer-sidebar-panels {
    animation: slideInFromRight 0.3s ease-out;
}

.offcanvas-overlay-from-right.is-closing .group-transfer-sidebar-panels {
    animation: slideOutToRight 0.3s ease-out forwards;
}

.offcanvas-overlay-from-right.is-visible .panel-transfer-sidebar-main,
.offcanvas-overlay-from-right.is-closing .panel-transfer-sidebar-main {
    animation: none;
}

.panel-transfer-sidebar-main {
    display: flex;
    flex-direction: column;
    position: relative;
}

.btn-transfer-sidebar-tab {
    display: inline-flex;
    align-self: center;
    width: 2.25rem;
    height: 6rem;
    margin: 0;
    border: 0.0625rem solid var(--color-border-neutral);
    border-radius: 0.5rem;
    background: var(--color-bg-light-gray);
    color: var(--color-text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    writing-mode: vertical-rl;
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%) rotate(180deg);
    text-decoration: none;
    line-height: 1;
    z-index: 2;
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.btn-transfer-sidebar-tab:hover {
    color: var(--color-text-default);
    background: var(--color-bg-light-gray);
}

.btn-transfer-sidebar-tab.is-active {
    color: var(--color-text-default);
    border-color: var(--color-border-subtle);
}

.panel-transfer-sidebar-secondary {
    display: flex;
    width: 0;
    opacity: 0;
    overflow: hidden;
    background: var(--color-bg-white);
    border-left: 0.0625rem solid var(--color-border-neutral);
    flex-direction: column;
    transition: width 0.3s ease, opacity 0.2s ease;
    pointer-events: none;
}

.panel-transfer-sidebar-secondary.is-visible {
    width: var(--transfer-sidebar-secondary-width);
    opacity: 1;
    pointer-events: auto;
}

@media (min-width: 1200px) {
    .panel-transfer-sidebar-secondary.is-visible {
        width: min(
            var(--transfer-sidebar-secondary-width),
            max(0px, calc(100vw - 800px))
        );
    }
}

.panel-transfer-sidebar-secondary-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 3.25rem;
    padding: 0 1rem;
    border-bottom: 0.0625rem solid var(--color-border-neutral);
    flex-shrink: 0;
}

.panel-transfer-sidebar-secondary-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-default);
}

.btn-transfer-sidebar-secondary-close {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    color: var(--color-text-muted);
    text-decoration: none;
    line-height: 1;
    border-radius: 0.25rem;
    transition: color 0.2s ease, background 0.2s ease;
}

.btn-transfer-sidebar-secondary-close:hover {
    color: var(--color-text-default);
    background: var(--color-bg-light-gray);
}

.panel-transfer-sidebar-secondary-body {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1rem;
    min-height: 0;
}

.btn-transfer-sidebar-tab {
    align-items: center;
    justify-content: center;
}