/* Resizable Drawer Styles
 * =======================
 * CSS Grid layout with drag-to-resize drawer support.
 * Works with MudBlazor's drawer system by overriding default behaviors.
 * Shared across all JadedSoftware Blazor applications.
 */

/* CSS Custom Properties for drawer sizing */
:root {
    --drawer-width: 300px;
    --drawer-min-width: 200px;
    --drawer-max-width: 500px;
    --drawer-resize-handle-width: 6px;
    --mud-drawer-width-left: var(--drawer-width);
    --appbar-height: 64px;
}

/* ===========================================
   Grid-based Layout
   =========================================== */

.app-layout {
    display: grid;
    grid-template-rows: auto 1fr;
    grid-template-columns: var(--drawer-width) 1fr;
    height: 100vh;
    overflow: hidden;
}

/* AppBar spans full width at top */
.app-layout .mud-appbar {
    grid-column: 1 / -1;
    grid-row: 1;
    position: relative !important;
    width: 100% !important;
}

/* Drawer in left column, below AppBar */
.app-layout .mud-drawer {
    grid-column: 1;
    grid-row: 2;
    position: relative !important;
    height: 100% !important;
    top: 0 !important;
}

/* Main content in right column, below AppBar */
.app-layout .mud-main-content {
    grid-column: 2;
    grid-row: 2;
    overflow-y: auto;
    overflow-x: hidden;
    margin-left: 0 !important;
    padding-top: 0 !important;
}

/* When drawer is closed, main content spans both columns */
.app-layout:has(.mud-drawer--closed) .mud-main-content {
    grid-column: 1 / -1;
}

/* ===========================================
   Drawer Width Override
   =========================================== */

.mud-drawer {
    width: var(--drawer-width) !important;
    min-width: var(--drawer-min-width);
    max-width: var(--drawer-max-width);
    transition: none;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.mud-drawer .mud-drawer-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.mud-drawer.mud-drawer-pos-left {
    --mud-drawer-width: var(--drawer-width) !important;
}

.mud-drawer-header {
    flex-shrink: 0;
}

/* ===========================================
   Resize Handle
   =========================================== */

.drawer-resize-handle {
    position: absolute;
    right: calc(var(--drawer-resize-handle-width) / -2);
    top: 0;
    bottom: 0;
    width: var(--drawer-resize-handle-width);
    cursor: col-resize;
    z-index: 1030;
    background: transparent;
    touch-action: none;
}

.drawer-resize-handle::before {
    content: '';
    position: absolute;
    left: -4px;
    right: -4px;
    top: 0;
    bottom: 0;
}

.drawer-resize-handle:hover,
.drawer-resize-handle.active {
    background: var(--mud-palette-primary, #0071c1);
    opacity: 0.4;
}

.drawer-resize-handle.active {
    opacity: 0.6;
}

/* Body state during resize */
body.drawer-resizing {
    cursor: col-resize !important;
    user-select: none !important;
}

body.drawer-resizing iframe,
body.drawer-resizing embed,
body.drawer-resizing object {
    pointer-events: none;
}

/* ===========================================
   Transitions (when not resizing)
   =========================================== */

body:not(.drawer-resizing) .mud-drawer {
    transition: transform 225ms cubic-bezier(0, 0, 0.2, 1);
}

/* ===========================================
   Mobile / Responsive
   =========================================== */

@media (max-width: 767px) {
    :root {
        --mud-drawer-width-left: 0;
    }

    .app-layout {
        grid-template-columns: 1fr;
    }

    .app-layout .mud-drawer {
        position: fixed !important;
        top: var(--appbar-height) !important;
        left: 0;
        bottom: 0;
        width: 100% !important;
        max-width: none;
        z-index: 1030;
        transform: translateX(-100%);
        transition: transform 225ms cubic-bezier(0, 0, 0.2, 1);
    }

    .app-layout .mud-drawer:not(.mud-drawer--closed) {
        transform: translateX(0);
    }

    .app-layout .mud-main-content {
        grid-column: 1;
    }

    .drawer-resize-handle {
        display: none;
    }
}