/** ============= General ============ */

html {
    font-size: 15px;
}

ul.list-style
{
    list-style: disc;
    padding-inline-start: revert; /* Not sure if this is right */
}
ul.list-style li
{
    display: list-item;
}

/** ============= Allow full height components and more than full height components ============ */
html, body, .mud-layout, .mud-main-content {
    height: 100%;
}
body {
    display: flex;
    flex-direction: column;
}
#body-content {
    flex: 1 1 100%;
}

/** ============= MudBlazor Overrides ============ */
.mud-button-filled:not(.mud-button-disable-elevation):not(:disabled) {
    /* Button shadows are currently hardcoded into the mudblazor css, so need to change to use variables */
    box-shadow: var(--mud-elevation-1);
}

/* Prevent large dialogs from overflowing the screen by making the container scrollable (I double checked and it works with nested dialog where the child is larger than parent) */
.mud-dialog-container {
    overflow: auto;
    /* Note: this breaks fullscreen dialogs, and you can't fix it because the fullscreen class is on the child dialog element.
        You can't use margins on the dialog itself instead because it's using auto margins to keep itself centered. */
    padding: 15px; /* Leave a gap when the window gets too small so you can still tell it's a dialog */
}
/* Note: changing the centering to use auto-margins rather than align-items center so that it overflows correctly without being cut off */
.mud-dialog-container.mud-dialog-center
{
    align-items: flex-start;
}
.mud-dialog-container.mud-dialog-center .mud-dialog
{
    margin-top: auto;
    margin-bottom: auto;
}
/* -- End dialog scroll fix -- */

/* Basically undo this commit that was added in MudBlazor v6.1.9: https://github.com/MudBlazor/MudBlazor/pull/4132, because it causes 
    issues with nested dialogs (e.g. date picker) being cut off (see https://github.com/MudBlazor/MudBlazor/issues/6467) which cannot 
    be fixed without also removing the max-height. */
.mud-dialog {
    overflow-y: visible !important;
    max-height: unset;
}

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

.mud-treeview {
    border-radius: var(--mud-default-borderradius);
}

/* Fix vertical tabs only being the width of the content (not taking full width, meaning you have to click on the text not just anywhere on the tab) */
.mud-tabs-toolbar-wrapper.mud-tabs-vertical > div:not(.mud-tab-slider) /* (there isn't any unique class I can target, so just first div that isn't the tab marker thing) */
{
    width: auto !important; /* Need !important because there is a hardcoded inline style in MudBlazor */
}

/* Fix tabs coloured underline overflowing container when rounded */
/*.mud-tabs-toolbar
{
    THIS BREAKS VERTICAL TABS!
    overflow: hidden;
}*/

/* Make table row background color darker on hover, even if it has been overriden in Style tag to a custom color */
.mud-table-hover .mud-table-container .mud-table-root .mud-table-body .mud-table-row:hover {
    /* Backdrop-filter (rather than just filter) so it only affects background color */
    backdrop-filter: brightness(0.96) saturate(1.2); /* These settings maintain the default table row hover color for uncolored table rows */
    background-color: transparent; /* Need to reset the background color on hover, otherwise the above backdrop-filter will stack and make it twice as dark as default */
}

/* Remove the stupid hardcoded text color for table cells so you can set it from the row styles/classes */
.mud-table-root .mud-table-body .mud-table-cell
{
    color: inherit;
}

.mud-table-foot .mud-table-row:last-child .mud-table-cell {
    border-bottom: none; /* The border overlaps the table container and looks bad */
}

.mud-table-sticky-footer * .mud-table-root .mud-table-foot * .mud-table-cell {
    border-top: 1px solid var(--mud-palette-table-lines); /* Add a top border to sticky footer otherwise it blends in with content behind */
}

.mud-list-item-dense .mud-list-item-icon {
    min-width: 40px; /* Reduce gap next to checkbox in Dense="true" multiselects */
}

/* Stop the drawer header shrinking/removing padding when not enough space */
.mud-drawer-header
{
    flex-shrink: 0;
}

/** == MudBlazor Overrides to fix stuff after changing root font size == */
.mud-table-cell {
    padding: 1rem;
}

.mud-icon-size-small {
    font-size: 1.35rem;
}
.mud-icon-size-medium {
    font-size: 1.6rem;
}
.mud-icon-size-large {
    font-size: 2.35rem;
}
/** == End font size fixes == */

/*.mud-input-label-outlined.mud-input-label-margin-dense {
    transform: translate(1rem,0.8rem) scale(1);
}*/

/* Fix horizontal dividers growing vertically when in a MudStack (or other flex column container). This is needed as of updating to MudBlazor 6.7.0 (that may not be the exact version, but somewhere close) */
.mud-divider-fullwidth {
    flex-grow: 0;
}

/* Fix alert message content overflowing even with text-wrap-break class applied */
.mud-alert-position {
    max-width: 100%;
}
.mud-alert-message {
    min-width: 0;
}

/** ============= Sizing Helpers ============ */
.w-100 { width: 100%; }
.w-auto { width: auto; }

.h-100 { height: 100%; }
.h-auto { height: auto; }

.fill-and-center {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.flex-grow-0 { flex-grow: 0; }
.flex-grow-1 { flex-grow: 1; }
.flex-grow-2 { flex-grow: 2; }
.flex-grow-3 { flex-grow: 3; }
.flex-grow-4 { flex-grow: 4; }
.flex-grow-5 { flex-grow: 5; }

.flex-basis-0 { flex-basis: 0; }


.flex-shrink-0 { flex-shrink: 0; }
.flex-shrink-1 { flex-shrink: 1; }
.flex-shrink-2 { flex-shrink: 2; }
.flex-shrink-3 { flex-shrink: 3; }
.flex-shrink-4 { flex-shrink: 4; }
.flex-shrink-5 { flex-shrink: 5; }

/** ============= Position and Transform Helpers ============ */
.transition-transform {
    transition: transform 100ms;
}

.rotate-180 {
    transform: rotate(180deg);
}

/** ============= Text Helpers ============ */
.text-nowrap {
    white-space: nowrap;
}

.text-wrap {
    white-space: normal !important;
}

.text-wrap-break {
    word-wrap: break-word;
}

.truncate-line {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.newlines {
    white-space: pre-line;
}

.text-underline-dotted {
    text-decoration: underline 1px dotted;
}

.text-left {
    text-align: left !important;
}
.text-right {
    text-align: right !important;
}
.text-center {
    text-align: center !important;
}
.text-justify {
    text-align: justify !important;
}

.bold {
    font-weight: bold;
}

/** ============= General Helpers ============ */
.scroll-shadows {
    /* Note if this isn't working, make sure child elements don't have a solid background colour that is blocking it */
    background: /* Shadow covers */ linear-gradient(var(--mud-palette-surface) 30%, transparent), linear-gradient(transparent, var(--mud-palette-surface) 70%) 0 100%, /* Shadows */ radial-gradient(50% 0, farthest-side, rgba(0,0,0,.2), transparent), radial-gradient(50% 100%,farthest-side, rgba(0,0,0,.2), transparent) 0 99.9%;
    background: /* Shadow covers */ linear-gradient(var(--mud-palette-surface) 30%, transparent), linear-gradient(transparent, var(--mud-palette-surface) 70%) 0 100%, /* Shadows */ radial-gradient(farthest-side at 50% 0, rgba(0,0,0,.2), transparent), radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.2), transparent) 0 99.9%;
    background-repeat: no-repeat;
    background-color: var(--mud-palette-surface);
    background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
    background-attachment: local, local, scroll, scroll;
}
/* Separate scroll shadows for use in a MudDrawer (which has a different background colour in dark mode) */
.scroll-shadows-for-drawer {
    /* Note if this isn't working, make sure child elements don't have a solid background colour that is blocking it */
    background: /* Shadow covers */ linear-gradient(var(--mud-palette-drawer-background) 30%, transparent), linear-gradient(transparent, var(--mud-palette-drawer-background) 70%) 0 100%, /* Shadows */ radial-gradient(50% 0, farthest-side, rgba(0,0,0,.2), transparent), radial-gradient(50% 100%,farthest-side, rgba(0,0,0,.2), transparent) 0 99.9%;
    background: /* Shadow covers */ linear-gradient(var(--mud-palette-drawer-background) 30%, transparent), linear-gradient(transparent, var(--mud-palette-drawer-background) 70%) 0 100%, /* Shadows */ radial-gradient(farthest-side at 50% 0, rgba(0,0,0,.2), transparent), radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.2), transparent) 0 99.9%;
    background-repeat: no-repeat;
    background-color: var(--mud-palette-drawer-background); /* Note: using "-drawer-background" instead of "-surface" so it works for drawers as well in dark mode */
    background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
    background-attachment: local, local, scroll, scroll;
}

.click-to-edit:hover {
    border: 1px solid var(--mud-palette-lines-inputs);
    padding: 1px 2px;
    margin: -2px -3px;
    /*background-color: var(--mud-palette-background-grey);
    margin: -2px;
    padding: 2px;*/
    cursor: text;
    border-radius: 5px;
}

/** ============= Grids ============ */
.label-value-grid {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr); /* The minmax gives the second column a min-width of 0 so large content won't overflow the grid */
}

/** ============= Icons ============ */
.icon-xl {
    font-size: 3rem;
}

.icon-xxl {
    font-size: 4rem;
}

/** ============= Inputs/Forms ============ */
.input-size-small .mud-input {
    font-size: 0.8rem;
}
.input-size-small.mud-input-control > .mud-input-control-input-container > .mud-input-label-inputcontrol {
    font-size: 0.85rem;
    line-height: 1;
}
.input-size-small .mud-input-helper-text {
    font-size: 0.7rem;
}

.mud-table-cell .checkbox-table-fix .mud-checkbox 
{
    margin: unset;
}

fieldset legend 
{
    font-size: 1.1rem;
}

/* This only affects Variant.Text inputs for now */
.input-no-label.mud-input-control > .mud-input-control-input-container > div.mud-input.mud-input-text
{
    margin-top: 0;
}

/* Fix (kind of) Variant.Outlined input on non-white backgrounds */
.mud-input.mud-input-outlined {
    background-color: var(--mud-palette-surface);
    border-radius: var(--mud-default-borderradius);
}
    .mud-input.mud-input-outlined~.mud-input-label {
        border-radius: var(--mud-default-borderradius);
    }

/** ============= Buttons ============ */
.underline-btn .mud-button-label
{
    border-bottom-width: 2px;
    border-bottom-style: solid;
    border-bottom-color: inherit;
}

.btn-hoverable-indicator {
    position: relative;
}
.btn-hoverable-indicator:after {
    content: '';
    display: block;
    position: absolute;
    height: 2px;
    bottom: -1px;
    left: 0;
    right: 0;
    border-bottom: 2px dotted;
    margin-bottom: -2px;
    border-color: inherit;
}

/* Fix MudMenu in MudButtonGroup */
.mud-button-group-root .mud-menu {
    height: 100%;
}

/** ============= Links ============ */
.stretched-link::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    pointer-events: auto;
    content: "";
    background-color: rgba(0,0,0,0);
}

/** ============= Tables ============ */
.selected-row {
    color: var(--mud-palette-secondary-text) !important;
    background-color: var(--mud-palette-secondary) !important;
}
    .selected-row > td {
        color: var(--mud-palette-secondary-text) !important;
    }

.small-first-last-columns td:first-child, .small-first-last-columns td:last-child,
.small-first-column td:first-child,
.small-last-column td:last-child,
.small-column {
    width: 1px;
    white-space: nowrap;
}

.right-aligned-table th,
.right-aligned-table td
{
    text-align: right;
}

.bold-footer tfoot td
{
    font-weight: bold;
}

.mud-fixed-table table
{
    table-layout: fixed;
}

/** ============= Animations ============ */
.animate-appear {
    animation: appear 0.3s ease;
}

@keyframes appear {
    0% {
        transform: scale(0);
    }

    70% {
        transform: scale(1.1);
    }

    100% {
        transform: none;
    }
}

/** ============= Labelled Data ============ */
.labelled-data-label {
    font-size: 0.75rem;
    font-weight: bold;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

/** ============= Pinned Content ============ */
.pinned-content {
    position: sticky;
    top: var(--mud-appbar-height);
    z-index: var(--mud-zindex-drawer);
}

/** ============= Alerts ============ */
.alert-fullwidth .mud-alert-message {
    flex-grow: 1;
}

/** ============= Expansion Panels ============ */
.expansion-remove-padding .mud-expand-panel-header {
    padding: 0;
}

/** ============= Tabs ============ */
.tabs-dense .mud-tab {
    font-size: 0.95rem;
    min-height: 44px;
}
.tabs-dense .mud-tab > .mud-icon-root {
    font-size: 1.45rem;
}

/** ============= Flash ============ */
.flash-decrease {
    background: transparent;
    transition: 0.3s;
    transition-timing-function: ease-in-out;
    animation: change-color-decrease 1s linear alternate;
}

.flash-increase {
    background: transparent;
    transition: 0.3s;
    transition-timing-function: ease-in-out;
    animation: change-color-increase 1s linear alternate;
}

@keyframes change-color-decrease {
    to {
        background: var(--mud-palette-primary);
    }
}

@keyframes change-color-increase {
    to {
        background: #f8b400;
    }
}

.no-flash {
    background: transparent;
}

.input-upper-case input {
    text-transform: uppercase;
}

/** ============= Proof Sheet ============ */
.preformatted {
    white-space: pre;
}

.preformatted-wrap {
    white-space: pre-wrap;
}

.table-bordered {
    border: 1px solid #dee2e6;
}

    .table-bordered th,
    .table-bordered td {
        border: 1px solid #dee2e6;
    }

    .table-bordered thead th,
    .table-bordered thead td {
        border-bottom-width: 2px;
    }

.table-borderless th,
.table-borderless td,
.table-borderless thead th,
.table-borderless tbody + tbody {
    border: 0;
}

/* General Form Styles
-------------------------------------------------- */
.validation-summary ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.print-only {
    visibility: hidden;
    position: absolute;
    left: -9999px;
    top: 0;
}

@media print {
    @page {
        size: A4 landscape;
        margin: 10mm;
    }
    body {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    #proof-sheet-table {
        width: 100%;
        max-width: none;
    }
}