/* 
    NOTE: Global styles can be added here, but consider using scoped styles instead.
    SEE: https://learn.microsoft.com/en-us/aspnet/core/blazor/components/css-isolation?view=aspnetcore-8.0
*/

/* ############################################################################################ */
/* GLOBAL STYLES */
html {
    font-size: 12px;
}

html, body, div#app {
    height: 100%;
}

@media(min-width: 600px) {
    html {
        font-size: 13px;
    }
}

@media(min-width: 960px) {
    html {
        font-size: 14px;
    }
}

@media(min-width: 1280px) {
    html {
        font-size: 16px;
    }
}

/* ############################################################################################ */
/* UTILITIES */
.text-ellipsis {
    /*    white-space: nowrap !important;*/
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}


/* ############################################################################################ */
/* MudBlazor Snackbar customizations */
.mud-snackbar {
    /* To fix zero left margin on too narrow screens */
    margin-left: 16px;
}



/* ############################################################################################ */
/* MudBlazor Tab customizations */

/*.mud-tab {
    DEFAULT TEXT TRANSFORMATION FOR TABS IS UPPERCASED, NOT SURE IF IT'S A GOOD IDEA TO CHANGE IT
    text-transform: none;
}*/



/* ############################################################################################ */
/* MudBlazor Dialog customizations */
/* To move dialog actions to the bottom of the page in full-screen mode */
.mud-dialog.mud-dialog-fullscreen .mud-dialog-title + div {
    display: flex;
    flex: 1;
}

    .mud-dialog.mud-dialog-fullscreen .mud-dialog-title + div div:has(> .mud-dialog-content) {
        display: flex;
        flex-direction: column;
        flex: 1;
    }

/* Adjust paddings and add dividers */
.mud-dialog .mud-dialog-title.cashiery-dialog-title {
    border-bottom: 1px solid var(--mud-palette-divider);
    padding: 12px 12px;
}

.mud-dialog .mud-dialog-content {
    padding: 12px 12px;
}

.mud-dialog .mud-dialog-actions.cashiery-dialog-actions {
    border-top: 1px solid var(--mud-palette-divider);
    padding: 12px 12px;
}

/* Make paddings bigger for screens larger than phones */
@media(min-width: 600px) {
    .mud-dialog .mud-dialog-title.cashiery-dialog-title {
        padding: 16px 24px;
    }

    .mud-dialog .mud-dialog-content {
        padding: 16px 24px;
    }

    .mud-dialog .mud-dialog-actions.cashiery-dialog-actions {
        padding: 16px 24px;
    }
}



/* ############################################################################################ */
/* MudBlazor Table customizations */
.mud-table {
    background-color: initial;
}

.mud-table-row {
    vertical-align: top;
}

.mud-table .mud-table-body tr td {
    /* Hack to set width based on colgroup and make ellipsis work in MudBlazor tables */
    max-width: 0;
}

    .mud-table .mud-table-body tr td.text-ellipsis,
    .mud-table .mud-table-body tr td.text-ellipsis > * {
        /*white-space: nowrap !important;*/
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

.mud-table * .mud-table-row .mud-table-cell {
    padding: 12px;
    padding-inline: 12px 10px;
}

    .mud-table * .mud-table-row .mud-table-cell:last-child {
        padding-right: 16px;
        padding-inline-end: 16px;
    }

.mud-table-dense * .mud-table-row .mud-table-cell {
    padding: 8px;
    padding-inline: 8px 6px;
}

    .mud-table-dense * .mud-table-row .mud-table-cell:last-child {
        padding-right: 12px;
        padding-inline-end: 12px;
    }

.mud-table-dense .mud-table-row-expander {
    margin: -4px;
}