/*
 * Canonical form system.
 * Labels live above fields. Mud internals are normalized only enough to obey
 * the app field geometry; page files should not invent alternate input systems.
 */

.app-form,
.config-dialog-form,
.profile-dialog-shell,
.contact-edit-dialog-shell,
.event-edit-dialog-shell,
.dayplan-edit-section,
.maintenance-form-grid,
.shopping-edit-dialog-shell {
    --omni-form-field-h: var(--app-control-h);
    --omni-form-field-h-mobile: var(--app-control-h-mobile);
    --omni-form-radius: var(--app-control-radius);
    --omni-form-pad-x: var(--app-control-pad-x);
    --omni-form-label-color: var(--app-label-color);
    --omni-form-label-inset: 8px;
    --omni-form-label-weight: 680;
    --omni-form-fill: var(--app-control-bg);
    --omni-form-fill-hover: var(--app-control-bg-hover);
    --omni-form-border: var(--app-control-border);
    --omni-form-border-hover: var(--app-control-border-hover);
    --omni-form-border-focus: var(--app-control-border-focus);
    --omni-form-text: rgba(248, 248, 250, 0.95);
    --omni-form-placeholder: rgba(220, 225, 235, 0.52);
}

.app-form-grid,
.config-dialog-grid,
.config-dialog-grid-two,
.profile-dialog-shell .config-dialog-grid,
.profile-dialog-shell .config-dialog-grid-two,
.maintenance-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(24px, 3vw, 32px);
    row-gap: 20px;
    min-width: 0;
    max-width: 100%;
}

.app-field,
.profile-field,
.maintenance-field,
.config-dialog-field,
.form-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

.app-field > label,
.profile-field > label,
.maintenance-field > label,
.config-dialog-field > label,
.form-field > label {
    margin: 0;
    padding-left: var(--omni-form-label-inset);
    color: var(--app-label-color);
    font-size: var(--app-label-size);
    font-weight: var(--omni-form-label-weight);
    letter-spacing: var(--app-label-tracking);
    line-height: 1;
    text-transform: uppercase;
}

.app-span-full,
.profile-span-full,
.span-full {
    grid-column: 1 / -1;
}

.mud-input-control,
.mud-input-control > .mud-input-control-input-container,
.mud-select,
.mud-picker,
.mud-field,
.mud-input {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.mud-input-control {
    margin: 0 !important;
}

.mud-dialog .mud-input-control:has(.mud-input-label),
.config-dialog-section .mud-input-control:has(.mud-input-label),
.app-form .mud-input-control:has(.mud-input-label) {
    position: relative !important;
    padding-top: 24px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.mud-dialog .mud-input-control,
.config-dialog-section .mud-input-control,
.app-form .mud-input-control {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.mud-input-control > .mud-input-control-input-container {
    margin-top: 0 !important;
    align-items: stretch !important;
}

.mud-dialog .mud-input-control > .mud-input-control-input-container,
.config-dialog-section .mud-input-control > .mud-input-control-input-container,
.app-form .mud-input-control > .mud-input-control-input-container {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.mud-dialog .mud-input-control .mud-input-label,
.mud-dialog .mud-input-control .mud-input-label.mud-shrink,
.mud-dialog .mud-input-control .mud-input-label.mud-input-label-animate,
.mud-dialog .event-edit-dialog-shell .mud-input-control .mud-input-label,
.mud-dialog .event-edit-dialog-shell .mud-input-control .mud-input-label.mud-shrink,
.mud-dialog .event-edit-dialog-shell .mud-input-control .mud-input-label.mud-input-label-animate,
.config-dialog-section .mud-input-control .mud-input-label,
.config-dialog-section .mud-input-control .mud-input-label.mud-shrink,
.config-dialog-section .mud-input-control .mud-input-label.mud-input-label-animate,
.app-form .mud-input-control .mud-input-label,
.app-form .mud-input-control .mud-input-label.mud-shrink,
.app-form .mud-input-control .mud-input-label.mud-input-label-animate {
    position: absolute !important;
    top: 0 !important;
    left: var(--omni-form-label-inset) !important;
    right: auto !important;
    transform: none !important;
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    height: 14px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--app-label-color) !important;
    font-size: var(--app-label-size) !important;
    font-weight: var(--omni-form-label-weight) !important;
    letter-spacing: var(--app-label-tracking) !important;
    line-height: 14px !important;
    text-transform: uppercase !important;
    pointer-events: none !important;
    opacity: 1 !important;
}

.app-field .mud-input-label,
.profile-field .mud-input-label,
.config-dialog-field .mud-input-label,
.form-field .mud-input-label {
    display: none !important;
}

.mud-input.mud-input-outlined,
.mud-input.mud-input-outlined.mud-select-input,
.mud-field {
    min-height: var(--app-control-h) !important;
    height: var(--app-control-h) !important;
    display: flex !important;
    align-items: center !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    overflow: hidden !important;
    border-radius: var(--app-control-radius) !important;
    background: var(--omni-form-fill) !important;
    background-image: none !important;
    box-shadow: none !important;
    color: rgba(248, 248, 250, 0.95) !important;
}

html body .mud-dialog .mud-input-control .mud-input.mud-input-outlined,
html body .mud-dialog .mud-input-control .mud-input.mud-input-outlined.mud-select-input,
html body .mud-dialog .mud-input-control .mud-field,
html body .config-dialog-section .mud-input-control .mud-input.mud-input-outlined,
html body .config-dialog-section .mud-input-control .mud-input.mud-input-outlined.mud-select-input,
html body .config-dialog-section .mud-input-control .mud-field {
    min-height: var(--app-control-h) !important;
    height: var(--app-control-h) !important;
    display: flex !important;
    align-items: center !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    overflow: hidden !important;
    border-radius: var(--app-control-radius) !important;
    background: var(--omni-form-fill) !important;
    background-image: none !important;
    box-shadow: none !important;
    color: rgba(248, 248, 250, 0.95) !important;
}

html body .mud-dialog .mud-input-control .mud-input-outlined .mud-input-outlined-border,
html body .config-dialog-section .mud-input-control .mud-input-outlined .mud-input-outlined-border {
    border-width: 1px !important;
    border-color: var(--app-control-border) !important;
    border-radius: var(--app-control-radius) !important;
}

.mud-input.mud-input-outlined:hover,
.mud-field:hover {
    background: var(--omni-form-fill-hover) !important;
}

.mud-input-outlined .mud-input-outlined-border,
.mud-field .mud-input-outlined-border {
    border-width: 1px !important;
    border-color: var(--app-control-border) !important;
    border-radius: var(--app-control-radius) !important;
}

.mud-input:hover .mud-input-outlined-border,
.mud-field:hover .mud-input-outlined-border {
    border-color: var(--app-control-border-hover) !important;
}

.mud-input:focus-within .mud-input-outlined-border,
.mud-field:focus-within .mud-input-outlined-border,
.mud-input-control:focus-within .mud-input-outlined-border {
    border-color: var(--app-control-border-focus) !important;
    box-shadow: 0 0 0 1px rgba(170, 183, 236, 0.12) !important;
}

.mud-input > input.mud-input-slot,
.mud-input > div.mud-input-slot.mud-select-input,
input.mud-input-root,
.mud-select-input {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: var(--app-control-h) !important;
    height: var(--app-control-h) !important;
    max-height: var(--app-control-h) !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 var(--app-control-pad-x) !important;
    color: rgba(248, 248, 250, 0.95) !important;
    background: transparent !important;
    font-size: 0.94rem !important;
    font-weight: 560 !important;
    line-height: 1.2 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

@media (min-width: 1024px) {
    .mud-picker,
    .mud-picker .mud-input-control,
    .mud-picker .mud-input-control-input-container,
    .mud-picker .mud-input.mud-input-outlined {
        min-width: 176px !important;
    }

    .mud-picker .mud-input > input.mud-input-slot,
    .mud-picker input.mud-input-root,
    .mud-picker .mud-input-slot {
        min-width: 112px !important;
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: nowrap !important;
    }

    .mud-picker .mud-input.mud-input-adorned-end > input.mud-input-slot,
    .mud-picker .mud-input.mud-input-adorned-end > div.mud-input-slot.mud-select-input {
        padding-inline-end: calc(var(--app-control-icon-w) + 12px) !important;
    }
}

.mud-input > input.mud-input-slot,
input.mud-input-root {
    line-height: var(--app-control-h) !important;
}

.mud-input.mud-input-adorned-end > input.mud-input-slot,
.mud-input.mud-input-adorned-end > div.mud-input-slot.mud-select-input {
    padding-right: calc(var(--app-control-pad-x) + var(--app-control-icon-w)) !important;
}

/* Mud sometimes renders a hidden/empty div slot before the actual input. Keep it from stealing width. */
.mud-input.mud-input-outlined:not(.mud-select-input) > div.mud-input-slot.mud-input-root:empty {
    display: none !important;
    flex: 0 0 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    padding: 0 !important;
}

.mud-input.mud-input-multiline,
.mud-input-control:has(textarea) .mud-input,
.mud-input-control:has(textarea) .mud-field {
    height: auto !important;
    min-height: 108px !important;
    align-items: stretch !important;
}

.mud-input > textarea.mud-input-slot,
textarea.mud-input-root {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 108px !important;
    height: auto !important;
    padding: 13px var(--app-control-pad-x) !important;
    color: rgba(248, 248, 250, 0.95) !important;
    background: transparent !important;
    line-height: 1.36 !important;
    resize: vertical !important;
    white-space: pre-wrap !important;
}

.mud-input-control:has(textarea) .mud-input-outlined-border,
.mud-input.mud-input-multiline .mud-input-outlined-border {
    border-radius: var(--app-control-radius) !important;
}

.mud-input ::placeholder,
.mud-input-slot::placeholder,
input::placeholder,
textarea::placeholder {
    color: rgba(220, 225, 235, 0.52) !important;
    font-weight: 520 !important;
    opacity: 1 !important;
}

.mud-input-adornment,
.mud-input-adornment-end,
.mud-input-adornment-start {
    align-self: stretch !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: var(--app-control-icon-w) !important;
    min-width: var(--app-control-icon-w) !important;
    margin: 0 !important;
    padding: 0 !important;
    border-left: 0 !important;
    background: transparent !important;
    color: rgba(214, 220, 240, 0.72) !important;
}

.mud-picker .mud-input-adornment-end,
.mud-picker-input .mud-input-adornment-end {
    border-left: 1px solid rgba(255, 255, 255, 0.055) !important;
}

.mud-select .mud-input-adornment,
.mud-select-input + .mud-input-adornment,
.mud-input.mud-select-input .mud-input-adornment {
    position: absolute !important;
    inset-block: 0 !important;
    inset-inline-end: 0 !important;
    align-self: stretch !important;
    height: auto !important;
    min-height: 0 !important;
    border-radius: 0 var(--app-control-radius) var(--app-control-radius) 0 !important;
    border-left-color: transparent !important;
    background: transparent !important;
}

.mud-input.mud-input-adorned-end .mud-input-adornment-end {
    border-radius: 0 var(--app-control-radius) var(--app-control-radius) 0 !important;
    background: transparent !important;
}

.mud-input.mud-input-adorned-end {
    position: relative !important;
}

.mud-input.mud-input-adorned-end > input.mud-input-slot,
.mud-input.mud-input-adorned-end > div.mud-input-slot.mud-select-input {
    padding-inline-end: calc(var(--app-control-icon-w) + 14px) !important;
}

.mud-input-adornment .mud-icon-root,
.mud-input-adornment-end .mud-icon-root,
.mud-select .mud-input-adornment .mud-icon-root {
    margin: 0 !important;
    display: block !important;
}

.mud-select .mud-input-adornment::before,
.mud-select-input + .mud-input-adornment::before,
.mud-input-adornment-end::before {
    display: none !important;
}

.mud-input-adornment .mud-icon-button,
.mud-input-adornment .mud-icon-button-root,
.mud-picker-input-button {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: rgba(214, 220, 240, 0.74) !important;
}

.app-flag-row,
.profile-flag-row,
.config-dialog-checkbox-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.profile-flag-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    width: 100% !important;
    gap: 10px !important;
}

.config-dialog-checkbox,
.profile-dialog-shell .config-dialog-checkbox,
.contact-edit-dialog-shell .config-dialog-checkbox,
.maintenance-inline-switch,
.app-flag {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    min-height: 42px !important;
    width: auto !important;
    max-width: 100% !important;
    padding: 0 12px 0 8px !important;
    border: 1px solid var(--app-control-border) !important;
    border-radius: var(--app-radius-md) !important;
    background: rgba(255, 255, 255, 0.04) !important;
    box-shadow: none !important;
}

.profile-flag-row .config-dialog-checkbox {
    width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
}

.config-dialog-checkbox .mud-input-control-input-container,
.config-dialog-checkbox .mud-checkbox,
.app-flag .mud-checkbox {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    width: auto !important;
    min-height: 0 !important;
}

.config-dialog-checkbox .mud-icon-button,
.config-dialog-checkbox button.mud-icon-button,
.config-dialog-checkbox span.mud-icon-button {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    padding: 2px !important;
    border-radius: 7px !important;
}

.config-dialog-checkbox .mud-typography,
.app-flag .mud-typography {
    color: rgba(224, 229, 246, 0.82);
    font-size: 0.84rem;
    font-weight: 740;
    line-height: 1.15;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mud-dialog:not(.mud-dialog-fullscreen) .maintenance-inline-switch,
.mud-dialog:not(.mud-dialog-fullscreen) .contact-edit-toggle-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 12px !important;
    min-height: 44px !important;
    padding: 9px 12px !important;
    border-radius: 13px !important;
    border: 1px solid rgba(255, 255, 255, 0.075) !important;
    background: rgba(255, 255, 255, 0.032) !important;
}

.mud-dialog:not(.mud-dialog-fullscreen) .maintenance-inline-switch span,
.mud-dialog:not(.mud-dialog-fullscreen) .contact-edit-toggle-row span {
    min-width: 0 !important;
    overflow: visible !important;
    white-space: normal !important;
    color: rgba(238, 241, 250, 0.86) !important;
    font-size: 0.86rem !important;
    line-height: 1.18 !important;
}

.mud-dialog:not(.mud-dialog-fullscreen) .maintenance-inline-switch .mud-switch,
.mud-dialog:not(.mud-dialog-fullscreen) .contact-edit-toggle-row .mud-checkbox {
    justify-self: end !important;
    width: auto !important;
    min-width: 0 !important;
}

.mud-dialog:not(.mud-dialog-fullscreen) .contact-edit-toggle-row .mud-checkbox .mud-button-root,
.mud-dialog:not(.mud-dialog-fullscreen) .contact-edit-toggle-row .mud-checkbox button.mud-icon-button {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: transparent !important;
    box-shadow: none !important;
}

.mud-dialog:not(.mud-dialog-fullscreen) .contact-edit-toggle-row .mud-checkbox .mud-icon-root {
    width: 20px !important;
    height: 20px !important;
    font-size: 20px !important;
}

.mud-dialog:not(.mud-dialog-fullscreen) textarea.mud-input-slot,
.mud-dialog:not(.mud-dialog-fullscreen) textarea.mud-input-root {
    min-height: 96px !important;
}

@media (max-width: 768px) {
    .mud-dialog:not(.mud-dialog-fullscreen) .contact-edit-toggle-row {
        min-height: 54px !important;
        padding: 11px 14px !important;
        grid-template-columns: minmax(0, 1fr) 36px !important;
    }
}

@media (max-width: 700px) {
    .app-form-grid,
    .config-dialog-grid,
    .config-dialog-grid-two,
    .profile-dialog-shell .config-dialog-grid,
    .profile-dialog-shell .config-dialog-grid-two,
    .maintenance-form-grid {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 16px;
    }

    .mud-input.mud-input-outlined,
    .mud-input.mud-input-outlined.mud-select-input,
    .mud-field,
    .mud-input > input.mud-input-slot,
    .mud-input > div.mud-input-slot.mud-select-input,
    input.mud-input-root,
    .mud-select-input {
        min-height: var(--app-control-h-mobile) !important;
        height: var(--app-control-h-mobile) !important;
        max-height: var(--app-control-h-mobile) !important;
        line-height: var(--app-control-h-mobile) !important;
    }
}

html body .mud-dialog .event-edit-dialog-shell .event-schedule-picker .mud-input-label,
html body .mud-dialog .event-edit-dialog-shell .event-schedule-picker .mud-input-label.mud-shrink,
html body .mud-dialog .event-edit-dialog-shell .event-schedule-picker .mud-input-label.mud-input-label-animate,
html body .mud-dialog .event-edit-dialog-shell .mud-picker .mud-input-label,
html body .mud-dialog .event-edit-dialog-shell .mud-picker .mud-input-label.mud-shrink,
html body .mud-dialog .event-edit-dialog-shell .mud-picker .mud-input-label.mud-input-label-animate {
    position: absolute !important;
    top: 0 !important;
    left: var(--omni-form-label-inset) !important;
    transform: none !important;
    display: block !important;
    height: 14px !important;
    padding: 0 !important;
    background: transparent !important;
    color: var(--app-label-color) !important;
    font-size: var(--app-label-size) !important;
    font-weight: var(--omni-form-label-weight) !important;
    letter-spacing: var(--app-label-tracking) !important;
    line-height: 14px !important;
    text-transform: uppercase !important;
}

/*
 * Toolbar/date rails are compact controls, not form fields. Older MudBlazor
 * field-normalization rules reserve vertical label space whenever a label is
 * present, which drops the Today/Schedule person selector below its sibling
 * buttons. Keep labels hidden and the rail input anatomy vertically centered.
 */
.dayplan-toolbar-row {
    --omni-rail-control-h: 46px;
}

.ios-calendar-toolbar.schedule-control-surface,
.ios-calendar-page .ios-calendar-toolbar.schedule-control-surface {
    --omni-rail-control-h: var(--omni-schedule-control-h, 42px);
}

html body .dayplan-toolbar-row .mud-input-control:has(.mud-input-label),
html body .dayplan-toolbar-row .dayplan-user-wrap .mud-input-control:has(.mud-input-label),
html body .dayplan-toolbar-row .dayplan-user-picker .mud-input-control:has(.mud-input-label),
html body .ios-calendar-toolbar.schedule-control-surface .mud-input-control:has(.mud-input-label),
html body .ios-calendar-toolbar.schedule-control-surface .ios-calendar-viewing-row .mud-input-control:has(.mud-input-label),
html body .ios-calendar-toolbar.schedule-control-surface .ios-calendar-user-picker .mud-input-control:has(.mud-input-label) {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: var(--omni-rail-control-h) !important;
    min-height: var(--omni-rail-control-h) !important;
    max-height: var(--omni-rail-control-h) !important;
    margin: 0 !important;
    padding-top: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html body .dayplan-toolbar-row .mud-input-label,
html body .dayplan-toolbar-row .mud-input-label.mud-shrink,
html body .dayplan-toolbar-row .mud-input-label.mud-input-label-animate,
html body .ios-calendar-toolbar.schedule-control-surface .mud-input-label,
html body .ios-calendar-toolbar.schedule-control-surface .mud-input-label.mud-shrink,
html body .ios-calendar-toolbar.schedule-control-surface .mud-input-label.mud-input-label-animate {
    display: none !important;
}

html body .dayplan-toolbar-row .mud-input-control-input-container,
html body .dayplan-toolbar-row .mud-select,
html body .dayplan-toolbar-row .mud-input,
html body .ios-calendar-toolbar.schedule-control-surface .mud-input-control-input-container,
html body .ios-calendar-toolbar.schedule-control-surface .mud-select,
html body .ios-calendar-toolbar.schedule-control-surface .mud-input {
    align-items: center !important;
    height: var(--omni-rail-control-h) !important;
    min-height: var(--omni-rail-control-h) !important;
    max-height: var(--omni-rail-control-h) !important;
    margin-top: 0 !important;
}

html body .dayplan-toolbar-row .mud-input-slot,
html body .dayplan-toolbar-row .mud-select-input,
html body .ios-calendar-toolbar.schedule-control-surface .mud-input-slot,
html body .ios-calendar-toolbar.schedule-control-surface .mud-select-input {
    height: var(--omni-rail-control-h) !important;
    min-height: var(--omni-rail-control-h) !important;
    max-height: var(--omni-rail-control-h) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: var(--omni-rail-control-h) !important;
    align-items: center !important;
}

html body .ios-calendar-page .ios-calendar-toolbar.schedule-control-surface .ios-calendar-viewing-row .mud-input.mud-input-outlined,
html body .ios-calendar-page .ios-calendar-toolbar.schedule-control-surface .ios-calendar-viewing-row .mud-input.mud-select-input,
html body .ios-calendar-page .ios-calendar-toolbar.schedule-control-surface .ios-calendar-user-picker .mud-input.mud-input-outlined,
html body .ios-calendar-page .ios-calendar-toolbar.schedule-control-surface .ios-calendar-user-picker .mud-input.mud-select-input {
    height: var(--omni-rail-control-h) !important;
    min-height: var(--omni-rail-control-h) !important;
    max-height: var(--omni-rail-control-h) !important;
}

/*
 * Legacy form neutralizers.
 * Older page-level CSS may still define dialog layout, but it must not own
 * field anatomy. Keep every Mud input/select/picker on the canonical system.
 */
html body .mud-dialog .dayplan-edit-section .mud-input-control,
html body .mud-dialog .event-edit-dialog-shell .mud-input-control,
html body .mud-dialog .profile-dialog-shell .mud-input-control,
html body .mud-dialog .maintenance-field .mud-input-control,
html body .mud-dialog .contact-edit-dialog-shell .mud-input-control,
html body .mud-dialog .shopping-edit-dialog-shell .mud-input-control,
html body .mud-dialog .config-dialog-section .mud-input-control,
html body .mud-dialog .config-dialog-field .mud-input-control {
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html body .mud-dialog .dayplan-edit-section .mud-input-control:has(.mud-input-label),
html body .mud-dialog .event-edit-dialog-shell .mud-input-control:has(.mud-input-label),
html body .mud-dialog .profile-dialog-shell .mud-input-control:has(.mud-input-label),
html body .mud-dialog .maintenance-field .mud-input-control:has(.mud-input-label),
html body .mud-dialog .contact-edit-dialog-shell .mud-input-control:has(.mud-input-label),
html body .mud-dialog .shopping-edit-dialog-shell .mud-input-control:has(.mud-input-label),
html body .mud-dialog .config-dialog-section .mud-input-control:has(.mud-input-label),
html body .mud-dialog .config-dialog-field .mud-input-control:has(.mud-input-label) {
    position: relative !important;
    padding-top: 24px !important;
}

html body .mud-dialog .dayplan-edit-section .mud-input-label,
html body .mud-dialog .event-edit-dialog-shell .mud-input-label,
html body .mud-dialog .profile-dialog-shell .mud-input-label,
html body .mud-dialog .maintenance-field .mud-input-label,
html body .mud-dialog .contact-edit-dialog-shell .mud-input-label,
html body .mud-dialog .shopping-edit-dialog-shell .mud-input-label,
html body .mud-dialog .config-dialog-section .mud-input-label,
html body .mud-dialog .config-dialog-field .mud-input-label {
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: var(--omni-form-label-inset) !important;
    right: auto !important;
    transform: none !important;
    width: auto !important;
    max-width: calc(100% - 18px) !important;
    height: 14px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: rgba(218, 224, 246, 0.82) !important;
    font-size: var(--app-label-size) !important;
    font-weight: var(--omni-form-label-weight) !important;
    letter-spacing: var(--app-label-tracking) !important;
    line-height: 14px !important;
    text-transform: uppercase !important;
    pointer-events: none !important;
    z-index: 3 !important;
    opacity: 1 !important;
}

html body .mud-dialog .dayplan-edit-section .mud-input.mud-input-outlined,
html body .mud-dialog .dayplan-edit-section .mud-input.mud-input-outlined.mud-select-input,
html body .mud-dialog .event-edit-dialog-shell .mud-input.mud-input-outlined,
html body .mud-dialog .event-edit-dialog-shell .mud-input.mud-input-outlined.mud-select-input,
html body .mud-dialog .profile-dialog-shell .mud-input.mud-input-outlined,
html body .mud-dialog .profile-dialog-shell .mud-input.mud-input-outlined.mud-select-input,
html body .mud-dialog .maintenance-field .mud-input.mud-input-outlined,
html body .mud-dialog .maintenance-field .mud-input.mud-input-outlined.mud-select-input,
html body .mud-dialog .contact-edit-dialog-shell .mud-input.mud-input-outlined,
html body .mud-dialog .contact-edit-dialog-shell .mud-input.mud-input-outlined.mud-select-input,
html body .mud-dialog .shopping-edit-dialog-shell .mud-input.mud-input-outlined,
html body .mud-dialog .shopping-edit-dialog-shell .mud-input.mud-input-outlined.mud-select-input,
html body .mud-dialog .config-dialog-section .mud-input.mud-input-outlined,
html body .mud-dialog .config-dialog-section .mud-input.mud-input-outlined.mud-select-input,
html body .mud-dialog .config-dialog-field .mud-input.mud-input-outlined,
html body .mud-dialog .config-dialog-field .mud-input.mud-input-outlined.mud-select-input {
    min-height: var(--app-control-h) !important;
    height: var(--app-control-h) !important;
    max-height: var(--app-control-h) !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: var(--app-control-radius) !important;
    background: var(--omni-form-fill) !important;
    background-image: none !important;
    box-shadow: none !important;
}

html body .mud-dialog .dayplan-edit-section .mud-input-slot,
html body .mud-dialog .event-edit-dialog-shell .mud-input-slot,
html body .mud-dialog .profile-dialog-shell .mud-input-slot,
html body .mud-dialog .maintenance-field .mud-input-slot,
html body .mud-dialog .contact-edit-dialog-shell .mud-input-slot,
html body .mud-dialog .shopping-edit-dialog-shell .mud-input-slot,
html body .mud-dialog .config-dialog-section .mud-input-slot,
html body .mud-dialog .config-dialog-field .mud-input-slot,
html body .mud-dialog .dayplan-edit-section .mud-select-input,
html body .mud-dialog .event-edit-dialog-shell .mud-select-input,
html body .mud-dialog .profile-dialog-shell .mud-select-input,
html body .mud-dialog .maintenance-field .mud-select-input,
html body .mud-dialog .contact-edit-dialog-shell .mud-select-input,
html body .mud-dialog .shopping-edit-dialog-shell .mud-select-input,
html body .mud-dialog .config-dialog-section .mud-select-input,
html body .mud-dialog .config-dialog-field .mud-select-input {
    min-height: var(--app-control-h) !important;
    height: var(--app-control-h) !important;
    max-height: var(--app-control-h) !important;
    padding: 0 var(--app-control-pad-x) !important;
    color: var(--omni-form-text) !important;
    background: transparent !important;
    font-weight: 560 !important;
    line-height: var(--app-control-h) !important;
}

html body .mud-dialog .dayplan-edit-section textarea.mud-input-slot,
html body .mud-dialog .event-edit-dialog-shell textarea.mud-input-slot,
html body .mud-dialog .profile-dialog-shell textarea.mud-input-slot,
html body .mud-dialog .maintenance-field textarea.mud-input-slot,
html body .mud-dialog .contact-edit-dialog-shell textarea.mud-input-slot,
html body .mud-dialog .shopping-edit-dialog-shell textarea.mud-input-slot,
html body .mud-dialog .config-dialog-section textarea.mud-input-slot,
html body .mud-dialog .config-dialog-field textarea.mud-input-slot,
html body .mud-dialog .dayplan-edit-section textarea.mud-input-root,
html body .mud-dialog .event-edit-dialog-shell textarea.mud-input-root,
html body .mud-dialog .profile-dialog-shell textarea.mud-input-root,
html body .mud-dialog .maintenance-field textarea.mud-input-root,
html body .mud-dialog .contact-edit-dialog-shell textarea.mud-input-root,
html body .mud-dialog .shopping-edit-dialog-shell textarea.mud-input-root,
html body .mud-dialog .config-dialog-section textarea.mud-input-root,
html body .mud-dialog .config-dialog-field textarea.mud-input-root {
    min-height: 108px !important;
    height: auto !important;
    max-height: none !important;
    padding: 13px var(--app-control-pad-x) !important;
    line-height: 1.36 !important;
    white-space: pre-wrap !important;
}

html body .mud-dialog .mud-input-adornment,
html body .mud-dialog .mud-input-adornment-end,
html body .mud-dialog .mud-input-adornment-start {
    width: var(--app-control-icon-w) !important;
    min-width: var(--app-control-icon-w) !important;
    max-width: var(--app-control-icon-w) !important;
    align-self: stretch !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

html body .mud-dialog .mud-select .mud-input-adornment,
html body .mud-dialog .mud-select-input + .mud-input-adornment {
    position: absolute !important;
    inset-block: 0 !important;
    inset-inline-end: 0 !important;
}

html body .mud-dialog .mud-input-control:has(textarea) .mud-input,
html body .mud-dialog .mud-input-control:has(textarea) .mud-field {
    height: auto !important;
    min-height: 108px !important;
    max-height: none !important;
    align-items: stretch !important;
}

/*
 * Control contract, final layer.
 * A few older page files still reach into MudBlazor fields. This block keeps
 * selects, date pickers, and time pickers on one anatomy: label rail above,
 * one visible field shell, one integrated trailing action zone.
 */
html body .mud-input-control {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

html body .mud-input-control > .mud-input-control-input-container {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html body .mud-input-control:has(.mud-input-label) {
    padding-top: 0 !important;
}

html body .mud-input-control:has(.mud-input-label) > .mud-input-control-input-container {
    position: relative !important;
    height: auto !important;
    min-height: calc(var(--app-control-h) + 24px) !important;
    padding-top: 24px !important;
}

html body .dayplan-toolbar-row .mud-input-control:has(.mud-input-label),
html body .ios-calendar-toolbar.schedule-control-surface .mud-input-control:has(.mud-input-label),
html body .notes-command-select .mud-input-control:has(.mud-input-label) {
    padding-top: 0 !important;
}

html body .dayplan-toolbar-row .mud-input-control:has(.mud-input-label) > .mud-input-control-input-container,
html body .ios-calendar-toolbar.schedule-control-surface .mud-input-control:has(.mud-input-label) > .mud-input-control-input-container,
html body .notes-command-select .mud-input-control:has(.mud-input-label) > .mud-input-control-input-container {
    min-height: 0 !important;
    padding-top: 0 !important;
}

html body .mud-input-control .mud-input-label,
html body .mud-input-control .mud-input-label.mud-shrink,
html body .mud-input-control .mud-input-label.mud-input-label-animate {
    transform: none !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    line-height: 14px !important;
}

html body .mud-input-control .mud-input-outlined-border legend {
    width: 0 !important;
    max-width: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
}

html body .mud-input-control .mud-input,
html body .mud-input-control .mud-field,
html body .mud-input-control .mud-picker-input {
    position: relative !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html body .mud-input-control .mud-input.mud-input-outlined,
html body .mud-input-control .mud-input.mud-input-outlined.mud-select-input,
html body .mud-input-control .mud-field {
    height: var(--app-control-h) !important;
    min-height: var(--app-control-h) !important;
    max-height: var(--app-control-h) !important;
    display: flex !important;
    align-items: center !important;
    overflow: hidden !important;
    border-radius: var(--app-control-radius) !important;
    background: var(--app-control-bg) !important;
    background-image: none !important;
}

html body .mud-input-control .mud-picker,
html body .mud-input-control .mud-select {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html body .mud-input-control .mud-input-outlined .mud-input-outlined-border,
html body .mud-input-control .mud-field .mud-input-outlined-border {
    inset: 0 !important;
    border-width: 1px !important;
    border-color: var(--app-control-border) !important;
    border-radius: var(--app-control-radius) !important;
    background: transparent !important;
    box-shadow: none !important;
}

html body .mud-input-control:hover .mud-input-outlined .mud-input-outlined-border,
html body .mud-input-control:hover .mud-field .mud-input-outlined-border {
    border-color: var(--app-control-border-hover) !important;
}

html body .mud-input-control:focus-within .mud-input-outlined .mud-input-outlined-border,
html body .mud-input-control:focus-within .mud-field .mud-input-outlined-border {
    border-color: var(--app-control-border-focus) !important;
    box-shadow: 0 0 0 1px rgba(170, 183, 236, 0.12) !important;
}

html body .mud-input-control .mud-input > input.mud-input-slot,
html body .mud-input-control .mud-input > div.mud-input-slot.mud-select-input,
html body .mud-input-control .mud-input > input.mud-select-input,
html body .mud-input-control .mud-select-input {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
    height: var(--app-control-h) !important;
    min-height: var(--app-control-h) !important;
    max-height: var(--app-control-h) !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 12px !important;
    color: var(--omni-form-text) !important;
    -webkit-text-fill-color: var(--omni-form-text) !important;
    background: transparent !important;
    font-size: 0.94rem !important;
    font-weight: 520 !important;
    line-height: var(--app-control-h) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

html body .mud-input-control .mud-input.mud-input-adorned-end > input.mud-input-slot,
html body .mud-input-control .mud-input.mud-input-adorned-end > div.mud-input-slot.mud-select-input,
html body .mud-input-control .mud-input.mud-input-adorned-end > input.mud-select-input {
    padding-inline-end: calc(var(--app-control-icon-w) + 12px) !important;
}

html body .mud-input-control .mud-input:has(> .mud-input-clear-button) > input.mud-input-slot,
html body .mud-input-control .mud-input:has(> .mud-input-clear-button) > div.mud-input-slot.mud-select-input,
html body .mud-input-control .mud-input:has(> .mud-input-clear-button) > input.mud-select-input {
    padding-inline-end: calc((var(--app-control-icon-w) * 2) + 8px) !important;
}

html body .mud-input-control .mud-input .mud-input-clear-button,
html body .mud-input-control .mud-input .mud-input-clear-button.mud-icon-button,
html body .mud-input-control .mud-input .mud-input-clear-button.mud-button-root {
    position: absolute !important;
    inset-inline-end: var(--app-control-icon-w) !important;
    top: 50% !important;
    z-index: 2 !important;
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: rgba(214, 220, 240, 0.66) !important;
    opacity: 0.86 !important;
    transform: translateY(-50%) !important;
}

html body .mud-input-control .mud-input .mud-input-clear-button:hover,
html body .mud-input-control .mud-input .mud-input-clear-button.mud-button-root:hover {
    background: rgba(255, 255, 255, 0.045) !important;
    color: rgba(238, 241, 250, 0.88) !important;
}

html body .mud-input-control .mud-input .mud-input-clear-button .mud-icon-root {
    width: 18px !important;
    height: 18px !important;
}

html body .mud-input-control .mud-input > div.mud-input-slot.mud-input-root:empty {
    display: none !important;
    flex: 0 0 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    padding: 0 !important;
}

html body .mud-input-control .mud-input-adornment,
html body .mud-input-control .mud-input-adornment-end,
html body .mud-input-control .mud-select .mud-input-adornment,
html body .mud-input-control .mud-select .mud-input-adornment-end {
    position: absolute !important;
    inset-block: 0 !important;
    inset-inline-end: 0 !important;
    z-index: 1 !important;
    width: var(--app-control-icon-w) !important;
    min-width: var(--app-control-icon-w) !important;
    max-width: var(--app-control-icon-w) !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-left: 1px solid rgba(255, 255, 255, 0.055) !important;
    border-radius: 0 var(--app-control-radius) var(--app-control-radius) 0 !important;
    background: rgba(255, 255, 255, 0.012) !important;
    color: rgba(214, 220, 240, 0.72) !important;
    transform: none !important;
}

html body .mud-input-control .mud-select .mud-input-adornment,
html body .mud-input-control .mud-select .mud-input-adornment-end {
    border-left-color: rgba(255, 255, 255, 0.035) !important;
    background: transparent !important;
}

html body .mud-input-control .mud-input-adornment .mud-icon-button,
html body .mud-input-control .mud-input-adornment .mud-icon-button-root,
html body .mud-input-control .mud-picker-input-button {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 9px !important;
    background: transparent !important;
    color: rgba(214, 220, 240, 0.78) !important;
    transform: none !important;
}

html body .mud-input-control .mud-input-adornment .mud-icon-root,
html body .mud-input-control .mud-input-adornment-end .mud-icon-root,
html body .mud-input-control .mud-select .mud-input-adornment .mud-icon-root {
    width: 22px !important;
    height: 22px !important;
    margin: 0 !important;
    color: currentColor !important;
    fill: currentColor !important;
    opacity: 1 !important;
    transform: none !important;
}

html body .mud-input-control .mud-input.mud-input-multiline,
html body .mud-input-control:has(textarea) .mud-input,
html body .mud-input-control:has(textarea) .mud-field {
    height: auto !important;
    min-height: 108px !important;
    max-height: none !important;
    align-items: stretch !important;
}

html body .mud-input-control textarea.mud-input-slot,
html body .mud-input-control textarea.mud-input-root {
    height: auto !important;
    min-height: 108px !important;
    max-height: none !important;
    padding: 13px 14px !important;
    line-height: 1.36 !important;
    white-space: pre-wrap !important;
}

html body .dayplan-toolbar-row .mud-input-control .mud-input,
html body .ios-calendar-toolbar.schedule-control-surface .mud-input-control .mud-input {
    height: var(--omni-rail-control-h, var(--app-control-h-compact)) !important;
    min-height: var(--omni-rail-control-h, var(--app-control-h-compact)) !important;
    max-height: var(--omni-rail-control-h, var(--app-control-h-compact)) !important;
}

html body .dayplan-toolbar-row .mud-input-control .mud-input > input.mud-input-slot,
html body .dayplan-toolbar-row .mud-input-control .mud-input > div.mud-input-slot.mud-select-input,
html body .ios-calendar-toolbar.schedule-control-surface .mud-input-control .mud-input > input.mud-input-slot,
html body .ios-calendar-toolbar.schedule-control-surface .mud-input-control .mud-input > div.mud-input-slot.mud-select-input {
    height: var(--omni-rail-control-h, var(--app-control-h-compact)) !important;
    min-height: var(--omni-rail-control-h, var(--app-control-h-compact)) !important;
    max-height: var(--omni-rail-control-h, var(--app-control-h-compact)) !important;
    line-height: var(--omni-rail-control-h, var(--app-control-h-compact)) !important;
}

html body .ios-calendar-toolbar.schedule-control-surface .ios-calendar-generate-button,
html body .ios-calendar-toolbar.schedule-control-surface .ios-calendar-generate-button.mud-button-filled-primary,
html body .ios-calendar-toolbar.schedule-control-surface .ios-calendar-mode-row .ios-calendar-generate-button.mud-button-root {
    min-height: 36px !important;
    opacity: 0.76 !important;
    background: rgba(255, 255, 255, 0.018) !important;
    border: 1px solid rgba(160, 170, 220, 0.105) !important;
    color: rgba(235, 238, 250, 0.62) !important;
    box-shadow: none !important;
    font-size: 0.8rem !important;
    font-weight: 740 !important;
    padding-inline: 12px !important;
}

/*
 * Dialog labels must paint in their reserved label lane. Mud input slot rules
 * can otherwise donate a control-height line box to labels and clip the text.
 */
html body .mud-dialog .mud-input-control .mud-input-label,
html body .mud-dialog .mud-input-control .mud-input-label.mud-shrink,
html body .mud-dialog .mud-input-control .mud-input-label.mud-input-label-animate {
    height: 14px !important;
    min-height: 14px !important;
    max-height: 14px !important;
    line-height: 14px !important;
    color: rgba(218, 224, 246, 0.82) !important;
    overflow: visible !important;
}

@media (max-width: 700px) {
    html body .mud-input-control .mud-input.mud-input-outlined,
    html body .mud-input-control .mud-input.mud-input-outlined.mud-select-input,
    html body .mud-input-control .mud-field,
    html body .mud-input-control .mud-input > input.mud-input-slot,
    html body .mud-input-control .mud-input > div.mud-input-slot.mud-select-input,
    html body .mud-input-control .mud-select-input {
        height: var(--app-control-h-mobile) !important;
        min-height: var(--app-control-h-mobile) !important;
        max-height: var(--app-control-h-mobile) !important;
        line-height: var(--app-control-h-mobile) !important;
    }
}

/* Legacy Schedule/Today control rail geometry promoted from audit layer. */

:root {
    --omni-rail-control-h: 42px;
    --omni-mobile-control-h: 48px;
    --omni-rail-panel-border: rgba(198, 210, 255, 0.105);
    --omni-rail-surface: rgba(18, 21, 30, 0.72);
    --omni-rail-surface-soft: rgba(255, 255, 255, 0.04);
}

/* Schedule page: stable desktop control tray. */
@media (min-width: 769px) {
    html body .ios-calendar-page .ios-calendar-toolbar.schedule-control-surface {
        display: grid !important;
        grid-template-columns: max-content minmax(250px, 310px) !important;
        grid-template-areas:
            "date person"
            "mode mode" !important;
        gap: 10px 14px !important;
        padding: 14px !important;
        max-width: min(100%, 760px) !important;
        margin-left: auto !important;
        overflow: visible !important;
    }

    html body .ios-calendar-page .ios-calendar-date-nav-row {
        grid-area: date !important;
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: 9px !important;
        width: max-content !important;
        min-width: 0 !important;
        overflow: visible !important;
    }

    html body .ios-calendar-page .ios-calendar-date-nav-row > .ios-calendar-nav-button,
    html body .ios-calendar-page .ios-calendar-date-nav-row > .ios-calendar-nav-button.mud-icon-button {
        flex: 0 0 var(--omni-rail-control-h) !important;
        width: var(--omni-rail-control-h) !important;
        min-width: var(--omni-rail-control-h) !important;
        height: var(--omni-rail-control-h) !important;
        min-height: var(--omni-rail-control-h) !important;
    }

    html body .ios-calendar-page .ios-calendar-date-picker-shell {
        flex: 0 0 226px !important;
        width: 226px !important;
        min-width: 226px !important;
        max-width: 226px !important;
        height: var(--omni-rail-control-h) !important;
        overflow: visible !important;
    }

    html body .ios-calendar-page .ios-calendar-date-picker-shell .mud-input,
    html body .ios-calendar-page .ios-calendar-date-picker-shell .mud-picker,
    html body .ios-calendar-page .ios-calendar-date-picker-shell .mud-input-control,
    html body .ios-calendar-page .ios-calendar-date-picker-shell .mud-input-control-input-container {
        height: var(--omni-rail-control-h) !important;
        min-height: var(--omni-rail-control-h) !important;
        width: 100% !important;
    }

    html body .ios-calendar-page .ios-calendar-date-picker-shell input,
    html body .ios-calendar-page .ios-calendar-date-picker-shell .mud-input-slot {
        height: var(--omni-rail-control-h) !important;
        min-height: var(--omni-rail-control-h) !important;
        line-height: var(--omni-rail-control-h) !important;
        padding: 0 58px 0 16px !important;
        color: rgba(248, 248, 250, 0.96) !important;
        -webkit-text-fill-color: rgba(248, 248, 250, 0.96) !important;
        font-size: 0.95rem !important;
        font-weight: 760 !important;
        overflow: hidden !important;
    }

    html body .ios-calendar-page .ios-calendar-date-picker-shell .mud-input-adornment,
    html body .ios-calendar-page .ios-calendar-date-picker-shell .mud-input-adornment-end,
    html body .ios-calendar-page .ios-calendar-date-picker-shell .mud-picker-input-button {
        flex: 0 0 48px !important;
        width: 48px !important;
        min-width: 48px !important;
        height: var(--omni-rail-control-h) !important;
        min-height: var(--omni-rail-control-h) !important;
        position: static !important;
        transform: none !important;
    }

    html body .ios-calendar-page .ios-calendar-date-nav-row > .ios-calendar-today-button {
        flex: 0 0 auto !important;
        height: var(--omni-rail-control-h) !important;
        min-height: var(--omni-rail-control-h) !important;
        padding-inline: 18px !important;
    }

    html body .ios-calendar-page .ios-calendar-viewing-row {
        grid-area: person !important;
        width: 100% !important;
        max-width: 310px !important;
        justify-self: end !important;
    }

    html body .ios-calendar-page .ios-calendar-mode-row {
        grid-area: mode !important;
        display: grid !important;
        grid-template-columns: minmax(0, 390px) minmax(0, 1fr) !important;
        gap: 14px !important;
        align-items: center !important;
        width: 100% !important;
        min-width: 0 !important;
        margin-top: 10px !important;
    }

    html body .ios-calendar-page .ios-calendar-view-switch {
        width: 100% !important;
        max-width: 390px !important;
        min-width: 0 !important;
    }

    html body .ios-calendar-page .ios-calendar-generate-button {
        justify-self: end !important;
        min-height: 42px !important;
        height: 42px !important;
        padding-inline: 22px !important;
        box-shadow: none !important;
    }
}

/* Mobile rails: do not compress desktop controls into one row. */
@media (max-width: 768px) {
    html body .ios-calendar-page .ios-calendar-toolbar.schedule-control-surface {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        padding: 12px !important;
        border-radius: 22px !important;
        overflow: visible !important;
    }

    html body .ios-calendar-page .ios-calendar-date-nav-row {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 9px !important;
        align-items: center !important;
        width: 100% !important;
        min-width: 0 !important;
        overflow: visible !important;
    }

    html body .ios-calendar-page .ios-calendar-date-picker-shell {
        order: 1 !important;
        flex: 0 0 100% !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: var(--omni-mobile-control-h) !important;
        overflow: visible !important;
    }

    html body .ios-calendar-page .ios-calendar-date-nav-row > .ios-calendar-nav-button:first-child {
        order: 2 !important;
    }

    html body .ios-calendar-page .ios-calendar-date-picker-shell + .ios-calendar-nav-button {
        order: 4 !important;
    }

    html body .ios-calendar-page .ios-calendar-date-nav-row > .ios-calendar-today-button {
        order: 3 !important;
        flex: 1 1 0 !important;
        width: auto !important;
        min-width: 0 !important;
        height: var(--omni-mobile-control-h) !important;
        min-height: var(--omni-mobile-control-h) !important;
    }

    html body .ios-calendar-page .ios-calendar-date-nav-row > .ios-calendar-nav-button,
    html body .ios-calendar-page .ios-calendar-date-nav-row > .ios-calendar-nav-button.mud-icon-button {
        flex: 0 0 56px !important;
        width: 56px !important;
        min-width: 56px !important;
        height: var(--omni-mobile-control-h) !important;
        min-height: var(--omni-mobile-control-h) !important;
    }

    html body .ios-calendar-page .ios-calendar-date-picker-shell .mud-input,
    html body .ios-calendar-page .ios-calendar-date-picker-shell .mud-picker,
    html body .ios-calendar-page .ios-calendar-date-picker-shell .mud-input-control,
    html body .ios-calendar-page .ios-calendar-date-picker-shell .mud-input-control-input-container {
        width: 100% !important;
        max-width: 100% !important;
        height: var(--omni-mobile-control-h) !important;
        min-height: var(--omni-mobile-control-h) !important;
    }

    html body .ios-calendar-page .ios-calendar-date-picker-shell .mud-input-slot,
    html body .ios-calendar-page .ios-calendar-date-picker-shell input,
    html body .ios-calendar-page .ios-calendar-date-picker-shell .mud-input > input {
        height: var(--omni-mobile-control-h) !important;
        min-height: var(--omni-mobile-control-h) !important;
        line-height: var(--omni-mobile-control-h) !important;
        padding: 0 58px 0 18px !important;
        color: rgba(248, 248, 250, 0.96) !important;
        -webkit-text-fill-color: rgba(248, 248, 250, 0.96) !important;
        caret-color: transparent !important;
        text-shadow: none !important;
        font-size: 1rem !important;
        font-weight: 760 !important;
        overflow: hidden !important;
        text-overflow: clip !important;
        white-space: nowrap !important;
    }

    html body .ios-calendar-page .ios-calendar-date-picker-shell .ios-calendar-date-display {
        display: none !important;
    }

    html body .ios-calendar-page .ios-calendar-date-picker-shell .mud-input-adornment,
    html body .ios-calendar-page .ios-calendar-date-picker-shell .mud-input-adornment-end,
    html body .ios-calendar-page .ios-calendar-date-picker-shell .mud-picker-input-button {
        position: static !important;
        flex: 0 0 52px !important;
        width: 52px !important;
        min-width: 52px !important;
        height: var(--omni-mobile-control-h) !important;
        min-height: var(--omni-mobile-control-h) !important;
        margin: 0 !important;
        transform: none !important;
    }

    html body .ios-calendar-page .ios-calendar-viewing-row {
        width: 100% !important;
        max-width: 100% !important;
    }

    html body .ios-calendar-page .ios-calendar-mode-row {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    html body .ios-calendar-page .ios-calendar-generate-button {
        height: 46px !important;
        min-height: 46px !important;
        opacity: 0.82 !important;
        box-shadow: none !important;
    }

    html body .ios-calendar-empty,
    html body .ios-calendar-page .app-empty-state-card {
        padding: 28px 22px !important;
        min-height: 0 !important;
    }

    html body .ios-calendar-empty .app-empty-title,
    html body .app-empty-state-card .app-empty-title {
        font-size: clamp(1rem, 6vw, 1.35rem) !important;
        line-height: 1.12 !important;
    }
}

/* Today control rail: native date input needs room on mobile. */
@media (max-width: 768px) {
    html body .dayplan-toolbar-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        padding: 12px !important;
        overflow: visible !important;
    }

    html body .dayplan-date-wrap {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 9px !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    html body .dayplan-date-control {
        order: 1 !important;
        flex: 0 0 100% !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: var(--omni-mobile-control-h) !important;
    }

    html body .dayplan-date-native {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: var(--omni-mobile-control-h) !important;
        min-height: var(--omni-mobile-control-h) !important;
        padding: 0 54px 0 16px !important;
        font-size: 1rem !important;
        font-weight: 760 !important;
        letter-spacing: 0 !important;
    }

    html body .dayplan-date-icon {
        right: 15px !important;
    }

    html body .dayplan-date-nav-button,
    html body .dayplan-date-nav-button.mud-icon-button {
        order: 2 !important;
        flex: 0 0 54px !important;
        width: 54px !important;
        min-width: 54px !important;
        height: var(--omni-mobile-control-h) !important;
        min-height: var(--omni-mobile-control-h) !important;
    }

    html body .dayplan-date-control + .dayplan-date-nav-button {
        order: 4 !important;
    }

    html body .dayplan-today-button {
        order: 3 !important;
        flex: 1 1 0 !important;
        width: auto !important;
        height: var(--omni-mobile-control-h) !important;
        min-height: var(--omni-mobile-control-h) !important;
    }

    html body .dayplan-user-wrap {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }
}

/* Final control-rail separation: MudBlazor puts mud-picker-input-button on the picker root too.
   These rules keep picker roots full width while only sizing the actual trailing icon button. */
@media (max-width: 768px) {
    html body .ios-calendar-page .ios-calendar-toolbar.schedule-control-surface {
        width: min(100%, calc(100vw - 32px)) !important;
        max-width: calc(100vw - 32px) !important;
        margin-inline: auto !important;
        padding: 12px !important;
        box-sizing: border-box !important;
    }

    html body .ios-calendar-page .ios-calendar-toolbar.schedule-control-surface .ios-calendar-date-nav-row {
        display: grid !important;
        grid-template-columns: 56px minmax(0, 1fr) 56px !important;
        grid-template-areas:
            "date date date"
            "prev today next" !important;
        gap: 9px !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        box-sizing: border-box !important;
    }

    html body .ios-calendar-page .ios-calendar-toolbar.schedule-control-surface .ios-calendar-date-picker-shell {
        grid-area: date !important;
        order: 0 !important;
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: 50px !important;
        box-sizing: border-box !important;
    }

    html body .ios-calendar-page .ios-calendar-toolbar.schedule-control-surface .ios-calendar-date-picker-shell > .mud-picker.ios-calendar-picker,
    html body .ios-calendar-page .ios-calendar-toolbar.schedule-control-surface .ios-calendar-date-picker-shell > .mud-picker.ios-calendar-date-control {
        display: flex !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: 50px !important;
        min-height: 50px !important;
        flex: 1 1 auto !important;
        box-sizing: border-box !important;
    }

    html body .ios-calendar-page .ios-calendar-toolbar.schedule-control-surface .ios-calendar-date-picker-shell .mud-input-control,
    html body .ios-calendar-page .ios-calendar-toolbar.schedule-control-surface .ios-calendar-date-picker-shell .mud-input-control-input-container,
    html body .ios-calendar-page .ios-calendar-toolbar.schedule-control-surface .ios-calendar-date-picker-shell .mud-input {
        display: flex !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: 50px !important;
        min-height: 50px !important;
        flex: 1 1 auto !important;
        box-sizing: border-box !important;
    }

    html body .ios-calendar-page .ios-calendar-toolbar.schedule-control-surface .ios-calendar-date-picker-shell .mud-input-slot,
    html body .ios-calendar-page .ios-calendar-toolbar.schedule-control-surface .ios-calendar-date-picker-shell input.mud-input-slot {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 50px !important;
        min-height: 50px !important;
        line-height: 50px !important;
        padding: 0 58px 0 16px !important;
        overflow: hidden !important;
        text-overflow: clip !important;
        white-space: nowrap !important;
    }

    html body .ios-calendar-page .ios-calendar-toolbar.schedule-control-surface .ios-calendar-date-picker-shell .mud-input-adornment-end {
        flex: 0 0 52px !important;
        width: 52px !important;
        min-width: 52px !important;
        max-width: 52px !important;
        height: 50px !important;
        min-height: 50px !important;
        position: static !important;
        transform: none !important;
        margin: 0 !important;
    }

    html body .ios-calendar-page .ios-calendar-toolbar.schedule-control-surface .ios-calendar-date-picker-shell .mud-input-adornment-end button.mud-icon-button {
        width: 38px !important;
        min-width: 38px !important;
        height: 38px !important;
        min-height: 38px !important;
        margin: 0 auto !important;
    }

    html body .ios-calendar-page .ios-calendar-toolbar.schedule-control-surface .ios-calendar-date-nav-row > .ios-calendar-nav-button:first-child {
        grid-area: prev !important;
        order: 0 !important;
    }

    html body .ios-calendar-page .ios-calendar-toolbar.schedule-control-surface .ios-calendar-date-nav-row > .ios-calendar-nav-button:nth-child(3) {
        grid-area: next !important;
        order: 0 !important;
    }

    html body .ios-calendar-page .ios-calendar-toolbar.schedule-control-surface .ios-calendar-date-nav-row > .ios-calendar-today-button {
        grid-area: today !important;
        order: 0 !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 50px !important;
        min-height: 50px !important;
    }

    html body .ios-calendar-page .ios-calendar-toolbar.schedule-control-surface .ios-calendar-date-nav-row > .ios-calendar-nav-button,
    html body .ios-calendar-page .ios-calendar-toolbar.schedule-control-surface .ios-calendar-date-nav-row > .ios-calendar-nav-button.mud-icon-button {
        width: 56px !important;
        min-width: 56px !important;
        max-width: 56px !important;
        height: 50px !important;
        min-height: 50px !important;
        flex: none !important;
    }

    html body .ios-calendar-page .ios-calendar-toolbar.schedule-control-surface .ios-calendar-mode-row {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-areas:
            "mode"
            "action" !important;
        gap: 10px !important;
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        align-items: stretch !important;
        overflow: visible !important;
    }

    html body .ios-calendar-page .ios-calendar-toolbar.schedule-control-surface .ios-calendar-mode-row > .ios-calendar-view-switch {
        grid-area: mode !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        justify-self: stretch !important;
        position: static !important;
        transform: none !important;
    }

    html body .ios-calendar-page .ios-calendar-toolbar.schedule-control-surface .ios-calendar-mode-row > .ios-calendar-generate-button.mud-button-root {
        grid-area: action !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: 46px !important;
        min-height: 46px !important;
        justify-self: stretch !important;
        position: static !important;
        transform: none !important;
    }

    html body .dayplan-page .dayplan-toolbar-row,
    html body .dayplan-toolbar-card .dayplan-toolbar-row,
    html body .dayplan-toolbar-row {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-areas:
            "date"
            "today"
            "user" !important;
        gap: 10px !important;
        width: min(100%, calc(100vw - 32px)) !important;
        max-width: calc(100vw - 32px) !important;
        margin-inline: auto !important;
        padding: 12px !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }

    html body .dayplan-page .dayplan-date-wrap,
    html body .dayplan-toolbar-card .dayplan-date-wrap,
    html body .dayplan-date-wrap {
        grid-area: date !important;
        display: grid !important;
        grid-template-columns: 54px minmax(0, 1fr) 54px !important;
        grid-template-rows: 50px 50px !important;
        gap: 9px !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
    }

    html body .dayplan-page .dayplan-date-control,
    html body .dayplan-toolbar-card .dayplan-date-control,
    html body .dayplan-date-control {
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;
        order: 0 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: 50px !important;
        min-height: 50px !important;
        flex: none !important;
        box-sizing: border-box !important;
    }

    html body .dayplan-page .dayplan-date-native,
    html body .dayplan-toolbar-card .dayplan-date-native,
    html body .dayplan-date-native {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: 50px !important;
        min-height: 50px !important;
        line-height: 50px !important;
        padding: 0 58px 0 16px !important;
        box-sizing: border-box !important;
    }

    html body .dayplan-page .dayplan-date-wrap > .dayplan-date-nav-button,
    html body .dayplan-toolbar-card .dayplan-date-wrap > .dayplan-date-nav-button,
    html body .dayplan-date-wrap > .dayplan-date-nav-button {
        width: 54px !important;
        min-width: 54px !important;
        max-width: 54px !important;
        height: 50px !important;
        min-height: 50px !important;
        flex: none !important;
        order: 0 !important;
    }

    html body .dayplan-page .dayplan-date-wrap > .dayplan-date-nav-button:first-child,
    html body .dayplan-toolbar-card .dayplan-date-wrap > .dayplan-date-nav-button:first-child,
    html body .dayplan-date-wrap > .dayplan-date-nav-button:first-child {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }

    html body .dayplan-page .dayplan-date-wrap > .dayplan-date-nav-button:last-child,
    html body .dayplan-toolbar-card .dayplan-date-wrap > .dayplan-date-nav-button:last-child,
    html body .dayplan-date-wrap > .dayplan-date-nav-button:last-child {
        grid-column: 3 !important;
        grid-row: 2 !important;
    }

    html body .dayplan-page .dayplan-today-wrap,
    html body .dayplan-toolbar-card .dayplan-today-wrap,
    html body .dayplan-today-wrap {
        grid-area: today !important;
        display: block !important;
        width: 100% !important;
        inline-size: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    html body .dayplan-page .dayplan-today-button.mud-button-root,
    html body .dayplan-toolbar-card .dayplan-today-button.mud-button-root,
    html body .dayplan-today-button.mud-button-root {
        width: 100% !important;
        min-width: 0 !important;
        height: 50px !important;
        min-height: 50px !important;
        flex: none !important;
        order: 0 !important;
    }

    html body .dayplan-page .dayplan-user-wrap,
    html body .dayplan-toolbar-card .dayplan-user-wrap,
    html body .dayplan-user-wrap {
        grid-area: user !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    html body .dayplan-page .dayplan-today-wrap .dayplan-today-button.mud-button-root,
    html body .dayplan-toolbar-card .dayplan-today-wrap .dayplan-today-button.mud-button-root,
    html body .dayplan-toolbar-row .dayplan-today-wrap .dayplan-today-button.mud-button-root {
        width: 100% !important;
        inline-size: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        justify-self: stretch !important;
        box-sizing: border-box !important;
    }

    html body .dayplan-page .dayplan-today-wrap .dayplan-today-button.mud-button-root .mud-button-label,
    html body .dayplan-toolbar-card .dayplan-today-wrap .dayplan-today-button.mud-button-root .mud-button-label,
    html body .dayplan-toolbar-row .dayplan-today-wrap .dayplan-today-button.mud-button-root .mud-button-label {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        justify-content: center !important;
    }

    html body .dayplan-toolbar-row .dayplan-user-wrap .mud-input-control,
    html body .dayplan-toolbar-row .ios-calendar-viewing-row .mud-input-control,
    html body .ios-calendar-toolbar.schedule-control-surface .ios-calendar-viewing-row .mud-input-control {
        padding-top: 0 !important;
        height: 50px !important;
        min-height: 50px !important;
    }

    html body .dayplan-toolbar-row .dayplan-user-wrap .mud-input-label,
    html body .dayplan-toolbar-row .dayplan-user-wrap .mud-input-label.mud-shrink,
    html body .ios-calendar-toolbar.schedule-control-surface .ios-calendar-viewing-row .mud-input-label,
    html body .ios-calendar-toolbar.schedule-control-surface .ios-calendar-viewing-row .mud-input-label.mud-shrink {
        display: none !important;
    }

    html body .dayplan-toolbar-row .dayplan-user-wrap .mud-input,
    html body .ios-calendar-toolbar.schedule-control-surface .ios-calendar-viewing-row .mud-input {
        height: 50px !important;
        min-height: 50px !important;
        margin-top: 0 !important;
        top: auto !important;
    }

    html body .dayplan-toolbar-row .dayplan-user-wrap .mud-input-slot,
    html body .ios-calendar-toolbar.schedule-control-surface .ios-calendar-viewing-row .mud-input-slot {
        height: 50px !important;
        min-height: 50px !important;
        line-height: 50px !important;
        align-items: center !important;
    }
}