/*Fix to prevent native "Pull To Refresh"*/
html {
    overscroll-behavior-y: none;
}

/*Fix main page scroll */
.layout-padding {
    padding-bottom: var(--mud-appbar-height);
    padding-top: var(--mud-appbar-height);
}

    .layout-padding .mud-main-content {
        padding-bottom: 10px;
        padding-top: 0px;
        height: 100%;
        overflow-y: auto;
    }

/*Fix expansion panels having height when collapsed*/
.mud-expand-panel .mud-expand-panel-header.invisible-expansion-panel-header {
    padding: 0px;
    min-height: 0px;
}

/*Fix scroll on expansion panels*/
.scroll .mud-expand-panel-content.mud-expand-panel-gutters.mud-expand-panel-dense {
    overflow-x: scroll;
}

/***************** DATE-TIME PICKER FIXES**************/
/*Fix DateTimePicker on IOS Safari
This problem is happenning as of today 08/04/2025 on input[type:datetime-local] elements.

Webkit user agent stylesheet: https://github.com/WebKit/WebKit/blob/main/Source/WebCore/css/html.css    
Problem: Webkit on Safari IOS applies a fixed padding 8px which doesnt seem to be overrideable
on input[type:datetime-local] elements.
Solution: Accept and use those 8px in my benefit on every platform.
*/
#customDateTimePicker {
    padding-block: 0px; /*Remove any padding*/
    padding-inline: 0px; /*Remove any padding*/
    margin: 18.5px 0px; /*Apply the same sizes but in margin*/
    padding-left: 8px; /*This "should not" have effect on IOS safari*/
    margin-left: 6px; /*8px+6px=14px the total margin we initially wanted*/

    flex-grow: 1;
    height: 19px;
    color: rgb(66,66,66);
    background-color: transparent !important;
    outline: none;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
}

    #customDateTimePicker::-webkit-date-and-time-value {
        text-align: left;
    }

    /*Fix to hide native "DateTime Picker" icon from Webkit browsers*/
    #customDateTimePicker::-webkit-calendar-picker-indicator {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: unset;
        cursor: pointer;
    }

.fix-safari-padding .mud-input-slot.mud-input-root.mud-input-root-outlined {
    padding: 0px
}
/**************** END DATETIME PICKERS ****************/

/*Reduce overlay transparency*/
.mud-overlay.less-transparent .mud-overlay-scrim.mud-overlay-light {
    background-color: rgba(255, 255, 255, 0.8);
}

.mud-overlay.less-transparent .mud-overlay-scrim.mud-overlay-dark {
    background-color: rgba(0, 0, 0, 0.8);
}

/*Fix to correct padding on required outlined labels*/
.mud-input-required .mud-input.mud-input-outlined.mud-shrink > .mud-input-outlined-border legend {
    padding: 0 8px;
}

/*Fix to prevent table from expanding with attachment previews*/
.fixed-size-table table {
    table-layout: fixed;
}

@media (max-width: 600px) {
    .fixed-size-table col:first-child {
        width: 100% !important;
    }
}

@media (min-width: 600px) {
    .fixed-size-table col.icon-column {
        width: 80px;
    }
}

/*Fix to remove underline from MudDatePicker*/
.mud-input-outlined .mud-picker.mud-shrink .mud-input.mud-input-underline:before {
    border-bottom: none;
}

.mud-input-label-outlined {
    background-color: inherit;
}

/*Centering SafetyCheck table headers*/
#scTable th{
    text-align: center;
}

/*Colors for new tasks*/
#scTable tr.mud-table-row.new-task {
    background: linear-gradient(90deg, transparent 0%, rgba(128, 255, 31, 0.3) 20%, transparent 40%);
    background-size: 150% 100%;
    background-repeat: repeat-x;
    animation: wave-animation 3s ease infinite;
}

    #scTable tr.mud-table-row.new-task td {
        background-color: var(--mud-palette-table-striped);
    }

    #scTable tr.mud-table-row.new-task:hover td {
        background-color: var(--mud-palette-table-hover);
    }

#scTable tr.new-task td[data-label='Task'] {
    font-weight: 700;
}

/*Colors for disabled button in Bottom Navbar*/
.mud-navmenu button.mud-button-filled:disabled {
    color: rgb(113 113 113) !important;
    background-color: rgb(223 220 220) !important;
}

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

.entering {
    animation: show 500ms ease-in-out forwards;
    opacity: 0;
    transform: rotateX(-89deg);
    transform-origin: 50% 50%;
}

.removing {
    transform-origin: 50% 50%;
    animation: remove 300ms linear forwards;
}

/*Fix counter alignment*/
.attachment-counter {
    display: inline-block;
    width: 100%;
    text-align: center;
}

@media (max-width: 600px) {
    .attachment-counter {
        text-align: right;
    }
}

@keyframes wave-animation {
    0% {
        background-position: 100% 0;
    }

    100% {
        background-position: -200% 0;
    }
}


@keyframes show {
    100% {
        opacity: 1;
        transform: rotateX(0);
    }
}

@keyframes remove {
    100% {
        opacity: 0;
        transform: rotateX(89deg);
    }
}