/* EpochOS Layout Styles */

/* Layout variables - shared between components */
:root {
    --sidenav-width: 250px;
    --sidenav-collapsed-width: 64px;
    --header-height: 57px;
    --footer-height: 72px; /* Height for the sticky footer */
}

/* Main Layout Styles */
.mainlayout {
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
}

/* Main Content Layout */
.mainlayout-body {
    display: flex;
    flex-grow: 1;
    margin-left: var(--sidenav-width);
    margin-top: var(--header-height);
    transition: all 0.2s ease;
    width: calc(100% - var(--sidenav-width));
    overflow-y: auto;
}

/* Apply padding to the body only when a sticky footer is present on the page */
.mainlayout-body:has(.sticky-footer) {
    padding-bottom: 450px;
}

/* Adjust content area when sidebar is collapsed (using class on .mainlayout) */
.mainlayout.sidenav-collapsed .mainlayout-body {
    margin-left: var(--sidenav-collapsed-width);
    width: calc(100% - var(--sidenav-collapsed-width));
    /* transition: all 0.2s ease; */ /* Already on .mainlayout-body */
}

/* Adjust content area when collapsed sidebar is being hovered (using classes on .mainlayout) */
.mainlayout.sidenav-collapsed.sidenav-hovered .mainlayout-body {
    margin-left: var(--sidenav-width);
    width: calc(100% - var(--sidenav-width));
}

.mainlayout-content-container {
    flex-grow: 1;
    padding: 24px;
    width: 100%;
}


/* Sticky Footer Styles (globally available) */
.sticky-footer {
    position: fixed;
    right: 0;
    bottom: 0;
    width: calc(100vw - var(--sidenav-width)); /* Default width */
    background: var(--rz-background, #fff); /* Assuming --rz-background is globally defined or fallback to #fff */
    border-top: 1px solid #e5e7eb;
    z-index: 100;
    padding: 1rem 2rem;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    transition: width 0.2s ease, left 0.2s ease;
    /* left: var(--sidenav-width); */ /* Default left if not pushed by main content margin, or set to 0 if using margin */
}

.mainlayout.sidenav-collapsed .sticky-footer {
    width: calc(100vw - var(--sidenav-collapsed-width));
    /* left: var(--sidenav-collapsed-width); */
}

.mainlayout.sidenav-collapsed.sidenav-hovered .sticky-footer {
    width: calc(100vw - var(--sidenav-width));
    /* left: var(--sidenav-width); */
}

.sticky-footer .rz-button + .rz-button {
    margin-left: 0.5rem; /* This rule can also live here if it's a general behavior for sticky footers */
}

/* Mobile overlay for sidebar */
.sidenav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 39;
    display: none;
}

.sidenav-overlay.show {
    display: block;
}

/* Mobile Responsive Styles */
@media (max-width: 768px) {
    .mainlayout-body,
    .mainlayout.sidenav-collapsed .mainlayout-body,
    .mainlayout.sidenav-collapsed.sidenav-hovered .mainlayout-body {
        margin-left: 0;
        width: 100%;
        margin-top: var(--header-height); /* Ensure header height is still respected */
    }

    /* Ensure header also adapts on mobile if it's not already handled by its own media queries */
    .mainlayout-header,
    .mainlayout.sidenav-collapsed .mainlayout-header,
    .mainlayout.sidenav-collapsed.sidenav-hovered .mainlayout-header {
        width: 100%;
        margin-left: 0;
    }

    /* Footer adjustments for mobile if necessary, assuming it might also go full width */
    .sticky-footer,
    .mainlayout.sidenav-collapsed .sticky-footer,
    .mainlayout.sidenav-collapsed.sidenav-hovered .sticky-footer {
        width: 100vw; /* Full viewport width */
        left: 0; /* Align to the left edge */
        padding-left: 1rem; /* Adjust padding as needed */
        padding-right: 1rem; /* Adjust padding as needed */
    }
}