.mf-icon-20 {
    width: 20px;
    min-width: 20px;
    height: 20px;
    margin-top: auto;
    margin-bottom: auto;
}

.mf-icon-16 {
    width: 16px;
    min-width: 16px;
    height: 16px;
    margin-top: auto;
    margin-bottom: 4px;
}

/*
 * MF Layout Component - CSS Grid Layout
 * Provides fixed header/footer, collapsible drawers, and scrollable main content
 * Compatible with DaisyUI 5
 */

/* Main layout container using CSS Grid */
.mf-layout {
    display: grid;
    grid-template-areas:
    "header header header"
    "left-drawer main right-drawer"
    "footer footer footer";
    grid-template-rows: 32px 1fr 32px;
    grid-template-columns: auto 1fr auto;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
}

/* Header - fixed at top */
.mf-layout-header {
    grid-area: header;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0 1rem;
    background-color: var(--color-base-300);
    border-bottom: 1px solid color-mix(in oklab, var(--color-base-content) 10%, #0000);
    z-index: 30;
}

/* Footer - fixed at bottom */
.mf-layout-footer {
    grid-area: footer;
    display: flex;
    align-items: center;
    padding: 0 1rem;
    background-color: var(--color-neutral);
    color: var(--color-neutral-content);
    border-top: 1px solid color-mix(in oklab, var(--color-base-content) 10%, #0000);
    z-index: 30;
}

/* Main content area - scrollable */
.mf-layout-main {
    grid-area: main;
    overflow-y: auto;
    overflow-x: auto;
    padding: 1rem;
    background-color: var(--color-base-100);
}

/* Drawer base styles */
.mf-layout-drawer {
    overflow-y: auto;
    overflow-x: hidden;
    background-color: var(--color-base-100);
    transition: width 0.3s ease-in-out, margin 0.3s ease-in-out;
    width: 250px;
    padding: 1rem;
}

/* Left drawer */
.mf-layout-left-drawer {
    grid-area: left-drawer;
    border-right: 1px solid color-mix(in oklab, var(--color-base-content) 10%, #0000);
}

/* Right drawer */
.mf-layout-right-drawer {
    grid-area: right-drawer;
    border-left: 1px solid color-mix(in oklab, var(--color-base-content) 10%, #0000);
}

/* Collapsed drawer states */
.mf-layout-drawer.collapsed {
    width: 0;
    padding: 0;
    border: none;
    overflow: hidden;
}

/* Toggle buttons positioning */
.mf-layout-toggle-left {
    margin-right: auto;
}

.mf-layout-toggle-right {
    margin-left: auto;
}

/* Smooth scrollbar styling for webkit browsers */
.mf-layout-main::-webkit-scrollbar,
.mf-layout-drawer::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.mf-layout-main::-webkit-scrollbar-track,
.mf-layout-drawer::-webkit-scrollbar-track {
    background: var(--color-base-200);
}

.mf-layout-main::-webkit-scrollbar-thumb,
.mf-layout-drawer::-webkit-scrollbar-thumb {
    background: color-mix(in oklab, var(--color-base-content) 20%, #0000);
    border-radius: 4px;
}

.mf-layout-main::-webkit-scrollbar-thumb:hover,
.mf-layout-drawer::-webkit-scrollbar-thumb:hover {
    background: color-mix(in oklab, var(--color-base-content) 30%, #0000);
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .mf-layout-drawer {
        width: 200px;
    }

    .mf-layout-header,
    .mf-layout-footer {
        padding: 0 0.5rem;
    }

    .mf-layout-main {
        padding: 0.5rem;
    }
}

/* Handle layouts with no drawers */
.mf-layout[data-left-drawer="false"] {
    grid-template-areas:
    "header header"
    "main right-drawer"
    "footer footer";
    grid-template-columns: 1fr auto;
}

.mf-layout[data-right-drawer="false"] {
    grid-template-areas:
    "header header"
    "left-drawer main"
    "footer footer";
    grid-template-columns: auto 1fr;
}

.mf-layout[data-left-drawer="false"][data-right-drawer="false"] {
    grid-template-areas:
    "header"
    "main"
    "footer";
    grid-template-columns: 1fr;
}