/* ============================== DASHBOARD GRID LAYOUT ============================== */
/* 
   4-Column Layout System:
   Col 1: Sidebar (Navigation)
   Col 2: Main Content (Fluid)
   Col 3: Assistant (Chats)
   Col 4: Notifications
*/

:root {
    --sidebar-width: 280px;
    --assistant-width: 320px;
    --notifications-width: 320px;
}

.dashboard-layout {
    display: grid;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr) var(--assistant-width) var(--notifications-width);
    grid-template-areas: "sidebar main assistant notifications";
    width: 100%;
    /* Use min-height to allow scrolling, or fixed height for app-like feel. 
       User said "dashboard ui", often fixed height with internal scrolling is preferred, 
       but standard web pages scroll. Given the "parallax" and "hero" elements, stick to standard scroll for Main. */
    min-height: calc(100vh - var(--header-height) - var(--topbar-height));
    padding-bottom: var(--safe-bottom);
    transition: grid-template-columns 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}


/* Panel Width Controls via State Classes */
.dashboard-layout.sidebar-collapsed {
    --sidebar-width: 64px;
}

.dashboard-layout.sidebar-hidden {
    --sidebar-width: 0px;
}

.dashboard-layout.sidebar-hidden .sidebar-panel {
    border-right: none;
}

/* Collapsed Sidebar Styles */
.dashboard-layout.sidebar-collapsed .sidebar-panel .sidebar-user-info,
.dashboard-layout.sidebar-collapsed .sidebar-panel .settings-btn,
.dashboard-layout.sidebar-collapsed .sidebar-panel .menu-item span {
    display: none;
}

.dashboard-layout.sidebar-collapsed .sidebar-panel .sidebar-header {
    justify-content: center;
    padding-left: var(--space-sm);
    padding-right: var(--space-sm);
}

.dashboard-layout.sidebar-collapsed .sidebar-panel .sidebar-header div:first-child {
    justify-content: center;
    flex: none;
    width: auto;
}

.dashboard-layout.sidebar-collapsed .sidebar-panel .menu-item {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}

.dashboard-layout.sidebar-collapsed .sidebar-panel>* {
    min-width: 0 !important;
}

.custom-tooltip {
    position: fixed;
    --tooltip-bg: #ffffff;
    --tooltip-color: #1c1c1e;
    background: var(--tooltip-bg);
    color: var(--tooltip-color);
    padding: var(--space-sm) var(--space-base);
    border-radius: var(--radius-lg);
    font-size: 13px;
    font-weight: var(--font-weight-semibold);
    z-index: 10000;
    pointer-events: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    white-space: nowrap;
    line-height: 1.4;
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
}

/* Tooltip Tail - rotated square, one rounded corner at the tip */
.custom-tooltip::after {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    background: var(--tooltip-bg);
    transform: rotate(45deg);
}

/* Placement-specific tail positioning and tip rounding.
   When rotated 45deg CW: TL corner→LEFT tip, TR→UP, BR→RIGHT, BL→DOWN */
.custom-tooltip[data-placement="top"]::after {
    bottom: -4px;
    left: 50%;
    margin-left: -7px;
    border-radius: 0 0 0 var(--radius-xsm);
    /* BL = down-pointing tip */
}

.custom-tooltip[data-placement="bottom"]::after {
    top: -4px;
    left: 50%;
    margin-left: -7px;
    border-radius: 0 var(--radius-xsm) 0 0;
    /* TR = up-pointing tip */
}

.custom-tooltip[data-placement="left"]::after {
    right: -4px;
    top: 50%;
    margin-top: -7px;
    border-radius: 0 0 var(--radius-xsm) 0;
    /* BR = right-pointing tip */
}

.custom-tooltip[data-placement="right"]::after {
    left: -4px;
    top: 50%;
    margin-top: -7px;
    border-radius: var(--radius-sm) 0 0 0;
    /* TL = left-pointing tip */
}

[data-theme="dark"] .custom-tooltip {
    --tooltip-bg: #ffffff;
    --tooltip-color: #1c1c1e;
}

[data-theme="light"] .custom-tooltip {
    --tooltip-bg: #1c1c1e;
    --tooltip-color: #ffffff;
    border-color: rgba(255, 255, 255, 0.1);
}

@keyframes tooltipFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.custom-tooltip[data-placement="right"] {
    animation: tooltipSlideRight 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.custom-tooltip[data-placement="left"] {
    animation: tooltipSlideLeft 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.custom-tooltip[data-placement="top"] {
    animation: tooltipSlideTop 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.custom-tooltip[data-placement="bottom"] {
    animation: tooltipSlideBottom 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes tooltipSlideRight {
    from {
        opacity: 0;
        transform: translateX(-12px) scale(0.95);
    }

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

@keyframes tooltipSlideLeft {
    from {
        opacity: 0;
        transform: translateX(12px) scale(0.95);
    }

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

@keyframes tooltipSlideTop {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes tooltipSlideBottom {
    from {
        opacity: 0;
        transform: translateY(-12px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.dashboard-layout.assistant-hidden {
    --assistant-width: 0px;
}

.dashboard-layout.notifications-hidden {
    --notifications-width: 0px;
}

/* Individual Panels */
.sidebar-panel {
    grid-area: sidebar;
    width: var(--sidebar-width);
    overflow-x: hidden;
    overflow-y: auto;
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
    background: var(--color-bg-elevated);
    border-right: 1px solid var(--color-border);
    /* Sticky sidebar behavior if page scrolls */
    position: sticky;
    top: calc(var(--header-height) + var(--topbar-height));
    height: calc(100vh - var(--header-height) - var(--topbar-height));
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        top 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10;
    will-change: width, top, height;
}

/* Align Nav Link Icons and Text */
.sidebar-panel .menu-item i,
.sidebar-panel .menu-item svg {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

.sidebar-panel .avatar-sm {
    flex-shrink: 0;
}

.main-content {
    grid-area: main;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    /* Prevent grid blowout */
    /* Remove the margin-top logic from old CSS if it conflicts */
    padding-top: var(--space-lg);
    padding-left: var(--space-lg);
    padding-right: var(--space-lg);
}


/* Reduced margins for mobile to use width better across the app */
@media (max-width: 768px) {
    .main-content {
        padding-top: var(--space-lg); /* Increased from space-sm to prevent header overlap */
        padding-left: 0;
        padding-right: 0;
    }
}


/* Remove padding on Home Page, POS Page, Partnership Pages, & Community details so content can be full width */
body.home-page .main-content,
body.pos-page-active .main-content,
body.partnership-page .main-content,
body.community-page-active .main-content {
    padding: 0;
}

/* Restore padding for containers on Home Page since parent padding is removed */
body.home-page .container {
    padding-left: var(--space-lg);
    padding-right: var(--space-lg);
}

@media (max-width: 768px) {
    body.home-page .container {
        padding-left: 0;
        padding-right: 0;
    }

    body.home-page .container .glass-section-wrapper {
        border-radius: 0;
        padding: var(--space-sm);
    }
}

.assistant-panel {
    grid-area: assistant;
    width: var(--assistant-width);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    -ms-overflow-style: none;
    scrollbar-width: none;
    background: var(--color-bg-elevated);
    border-left: 1px solid var(--color-border);
    border-top: 1px solid var(--color-border);
    position: sticky;
    top: calc(var(--header-height) + var(--topbar-height));
    height: calc(100vh - var(--header-height) - var(--topbar-height));
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        top 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 9;
    will-change: width, top, height;
}

.notifications-panel {
    grid-area: notifications;
    width: var(--notifications-width);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    -ms-overflow-style: none;
    scrollbar-width: none;
    background: var(--color-bg-elevated);
    border-left: 1px solid var(--color-border);
    border-top: 1px solid var(--color-border);
    position: sticky;
    top: calc(var(--header-height) + var(--topbar-height));
    height: calc(100vh - var(--header-height) - var(--topbar-height));
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        top 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 9;
    will-change: width, top, height;
}


/* Adjust panels when topbar is hidden on scroll */
.header-stack.topbar-hidden~.dashboard-layout .sidebar-panel,
.header-stack.topbar-hidden~.dashboard-layout .assistant-panel,
.header-stack.topbar-hidden~.dashboard-layout .notifications-panel {
    top: var(--header-height);
    height: calc(100vh - var(--header-height));
}

@media (max-width: 1024px) {

    .header-stack.topbar-hidden~.dashboard-layout .sidebar-panel,
    .header-stack.topbar-hidden~.dashboard-layout .assistant-panel,
    .header-stack.topbar-hidden~.dashboard-layout .notifications-panel {
        top: var(--header-height);
    }
}

/* Hide scrollbars globally for layout panels and containers */
.sidebar-panel::-webkit-scrollbar,
.assistant-panel::-webkit-scrollbar,
.notifications-panel::-webkit-scrollbar,
.chat-container::-webkit-scrollbar,
#chats-list::-webkit-scrollbar,
#ai-chat-bubbles::-webkit-scrollbar,
#waves-list::-webkit-scrollbar,
#thread-bubbles::-webkit-scrollbar,
#notifications-list::-webkit-scrollbar {
    display: none;
}

/* Ensure inner content of panels doesn't squash during transition */
.sidebar-panel>*,
.assistant-panel>*,
.notifications-panel>* {
    min-width: 280px;
    /* Ensure content stays wide enough */
}

/* Mobile / Responsive Overrides */
@media (max-width: 1024px) {
    .dashboard-layout {
        /* On tablet/mobile, panels become overlays or standard blocks? 
           User said "Flexible", but 4 cols on mobile is impossible. 
           Let's fallback to specific behaviors or standard stacking for safety. */
        display: block;
    }

    .sidebar-panel,
    .assistant-panel,
    .notifications-panel {
        position: fixed;
        top: 0;
        bottom: 0;
        transition: transform 0.3s ease, top 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: var(--shadow-xl);
        z-index: 5001;
        padding-top: var(--safe-top);
        padding-bottom: var(--safe-bottom);
    }


    /* Sidebar on mobile: 90% width + off-screen by default */
    .sidebar-panel {
        left: 0;
        width: 90%;
        max-width: 400px;
        transform: translateX(0);
    }

    .dashboard-layout.sidebar-collapsed .sidebar-panel,
    .dashboard-layout.sidebar-hidden .sidebar-panel {
        transform: translateX(-100%);
    }

    /* Assistant & Notifications on mobile: Full width or capped + off-screen by default */
    .assistant-panel,
    .notifications-panel {
        right: 0;
        width: 100%;
        max-width: 400px;
        transform: translateX(0);
    }

    .dashboard-layout.assistant-hidden .assistant-panel,
    .dashboard-layout.notifications-hidden .notifications-panel {
        transform: translateX(100%);
    }

    /* Panel Overlay for Mobile */
    .panel-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.4);
        backdrop-filter: var(--blur-glass);
        z-index: 5000;
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--transition-normal);
    }

    .dashboard-layout:not(.sidebar-collapsed):not(.sidebar-hidden) .panel-overlay,
    .dashboard-layout:not(.assistant-hidden) .panel-overlay,
    .dashboard-layout:not(.notifications-hidden) .panel-overlay {
        display: block;
        opacity: 1;
        pointer-events: auto;
    }
}