/* WorkClock - minimal resets (MudBlazor handles the design system) */

h1:focus {
    outline: none;
}

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem;
    color: white;
    border-radius: 4px;
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

@keyframes workclock-autofill-start {
    from { opacity: 1; }
    to { opacity: 1; }
}

[data-auth-autofill-sync] input:-webkit-autofill {
    animation-name: workclock-autofill-start;
    animation-duration: 0.01s;
}

[data-auth-autofill-sync] input:autofill {
    animation-name: workclock-autofill-start;
    animation-duration: 0.01s;
}

[data-auth-autofill-sync] .mud-input.mud-input-outlined:has(> input:-webkit-autofill) > .mud-input-outlined-border legend {
    width: auto;
    padding: 0 5px;
}

[data-auth-autofill-sync] .mud-input.mud-input-outlined:has(> input:autofill) > .mud-input-outlined-border legend {
    width: auto;
    padding: 0 5px;
}

[data-auth-autofill-sync] .mud-input:has(> input:-webkit-autofill) ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined {
    transform: translate(14px, -6px) scale(0.75);
    max-width: calc((100% - 14px) / .75);
    color: var(--mud-palette-text-primary);
}

[data-auth-autofill-sync] .mud-input:has(> input:autofill) ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined {
    transform: translate(14px, -6px) scale(0.75);
    max-width: calc((100% - 14px) / .75);
    color: var(--mud-palette-text-primary);
}

/* Compact time picker for WorkDay start/end in TodaySummary */
.compact-timepicker.mud-input-control.mud-input-input-control {
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-shrink: 0;
}

.compact-timepicker .mud-input-control-input-container {
    width: auto !important;
    min-width: unset !important;
    max-width: unset !important;
    margin-left: auto;
    justify-content: flex-end;
}

.compact-timepicker .mud-input {
    width: auto !important;
    min-width: unset !important;
}

.compact-timepicker .mud-input-slot,
.compact-timepicker .mud-input-input {
    width: auto !important;
    min-width: 3ch;
    text-align: right;
    padding: 0 !important;
}

/* Underline matches text width */
.compact-timepicker .mud-input-underline::before {
    border-bottom-style: solid;
}
.compact-timepicker .mud-input-underline::after,
.compact-timepicker .mud-input-underline::before {
    /* inherit width from parent — no forced width */
}