/* index.html */
html, body, #app {
    margin: 0;
    padding: 0;
    height: 100vh;
    max-height: 100vh;
    width: 100vw;
    max-width: 100vw;
    font-family: var(--body-font);
    font-size: var(--type-ramp-base-font-size);
    line-height: var(--type-ramp-base-line-height);
    font-weight: var(--font-weight);
    color: var(--neutral-foreground-rest);
    background: var(--neutral-fill-layer-rest);
    overflow: hidden;
}

/* MainLayout.razor */

/* Root fills the viewport */
.app-shell {
    width: 100vw;
    height: 100dvh; /* better with mobile chrome */
    overflow: hidden;
    /* Default nav width; can be overridden by inline style on MainLayout */
    --nav-w: 230px;
}

/* Column layout: header (50), footer (40), middle flexes */
.shell {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 0; /* allow children to shrink for scrolling */
}

/* Fixed header/footer heights */
.header {
    flex: 0 0 50px;
    height: 50px;
    width: 100%;
    text-wrap: nowrap;
}

    .header .header-gutters {
        margin: 0 5px !important;
    }

.footer {
    margin: 0;
    padding: 0;
    flex: 0 0 20px;
    height: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-wrap: nowrap;
    padding-right: 10px;
}

/* Middle area consumes remaining height between header & footer */
.main {
    display: flex; /* horizontal row */
    flex: 1 1 auto; /* <-- this is the key */
    min-height: 0; /* allow internal scrolling */
    overflow: hidden; /* keep scrollbars in children */
}

/* Default (expanded) */
.nav {
    /* Use the variable from ancestors; fallback to 230px */
    flex: 0 0 var(--nav-w, 230px);
    width: var(--nav-w, 230px);
    min-width: var(--nav-w, 230px);
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    transition: width .2s ease, flex-basis .2s ease, min-width .2s ease;
    /* Remove unconditional padding; will be added only when needed */
    /* padding-inline-end: 8px; */
    box-sizing: content-box;
}

    /* Add padding only when vertical scrollbar actually present */
    .nav.has-v-scrollbar {
        margin-inline-end: 8px;
    }

    /* When nav is collapsed – support common patterns */
    .nav.collapsed { /* if the component adds 'collapsed' on itself */
        --nav-w: 50px;
    }

/* Right content pane: fills the rest, scrolls vertically */
.content {
    flex: 1 1 auto;
    width: 100%; /* prevent overflow from long content */
    min-height: 100%; /* enable scrolling correctly inside flex */
    height: 100%;
    overflow: hidden;
}

fluent-number-field::part(control) {
    text-align: right;
}

.filter-search-input::part(clear-button) {
    min-width: 20px;
    width: 20px;
    padding: 3px;
    margin: 0;
}

.filter-search-input::part(control) {
    padding-inline-end: 0px;
}

.wbj-round-button {
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: rgba(0,0,0,0.4);
    transition: all 0.2s ease;
}

    /* Hover effect – invert shading */
    .wbj-round-button:hover {
        background: rgba(0,0,0,0.8);
    }

.wbj-button-medium {
    height: 25px;
    width: 25px;
}


#TableMaster tr.row-hover:hover td {
    background: var(--neutral-layer-3) !important;
}

td {
    background: var(--neutral-layer-1);
}

    td.selected {
        background: var(--neutral-layer-2) !important;
    }

    td.menu-open {
        background: var(--neutral-layer-3) !important;
    }

    td.delivered {
        color: var(--neutral-base-color) !important;
    }

    td.approved {
        color: var(--accent-fill-rest) !important;
    }