/* Mailbox: topbar + 3-pane (folders | list | reader). */

.mf-mailbox {
    display: grid;
    grid-template-rows: var(--mf-topbar-h) 1fr;
    grid-template-columns: var(--mf-folders-w) var(--mf-list-w) 1fr;
    height: 100vh;
    background: var(--mf-bg);
}

.mf-mailbox__topbar {
    grid-column: 1 / -1;
    grid-row: 1;
    display: flex;
    align-items: center;
    gap: var(--mf-space-4);
    padding: 0 var(--mf-space-5);
    background: var(--mf-bg);
    border-bottom: 1px solid var(--mf-border);
    z-index: 50;
}

.mf-mailbox__folders {
    grid-column: 1;
    grid-row: 2;
    background: var(--mf-surface);
    border-right: 1px solid var(--mf-border);
    overflow-y: auto;
    padding: var(--mf-space-4);
    display: flex;
    flex-direction: column;
    gap: var(--mf-space-4);
}

.mf-mailbox__list {
    grid-column: 2;
    grid-row: 2;
    background: var(--mf-bg);
    border-right: 1px solid var(--mf-border);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.mf-mailbox__list-header {
    padding: var(--mf-space-4) var(--mf-space-5);
    border-bottom: 1px solid var(--mf-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mf-space-3);
    background: var(--mf-bg);
    position: sticky;
    top: 0;
    z-index: 10;
}

.mf-mailbox__list-body {
    flex: 1;
    overflow-y: auto;
}

.mf-mailbox__reader {
    grid-column: 3;
    grid-row: 2;
    background: var(--mf-bg);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Tablet — collapse folders into icon rail, reader hides until selected */
@media (max-width: 991.98px) {
    .mf-mailbox {
        grid-template-columns: var(--mf-folders-w) 1fr;
    }
    .mf-mailbox__reader {
        display: none;
    }
    .mf-mailbox--reading .mf-mailbox__list {
        display: none;
    }
    .mf-mailbox--reading .mf-mailbox__reader {
        display: flex;
        grid-column: 2;
    }
}

/* Mobile — stacked pages */
@media (max-width: 575.98px) {
    .mf-mailbox {
        grid-template-columns: 1fr;
    }
    .mf-mailbox__folders { display: none; }
    .mf-mailbox--folders .mf-mailbox__folders {
        display: flex;
        grid-column: 1;
    }
    .mf-mailbox--folders .mf-mailbox__list,
    .mf-mailbox--reading .mf-mailbox__list { display: none; }
    .mf-mailbox--folders .mf-mailbox__reader,
    .mf-mailbox__reader { display: none; }
    .mf-mailbox--reading .mf-mailbox__reader {
        display: flex;
        grid-column: 1;
    }
}