/*
 * Desktop hardening layer.
 * Loaded last, desktop-only, and intentionally system-level: forms, modals,
 * popovers, content rails, cards, empty states, and the worst page geometry.
 */

@media (min-width: 769px) {
    :root {
        --desktop-page-top: 34px;
        --desktop-page-x: clamp(28px, 3vw, 54px);
        --desktop-content-focused: 1180px;
        --desktop-content-standard: 1440px;
        --desktop-content-wide: 1640px;
        --desktop-content-full: 1760px;
        --desktop-control-h: 42px;
        --desktop-control-compact-h: 38px;
        --desktop-control-radius: 12px;
        --desktop-control-bg: rgba(18, 21, 31, 0.78);
        --desktop-control-bg-hover: rgba(25, 29, 41, 0.82);
        --desktop-control-border: rgba(198, 210, 255, 0.12);
        --desktop-control-border-hover: rgba(214, 222, 255, 0.20);
        --desktop-control-border-focus: rgba(159, 174, 232, 0.48);
        --desktop-section-bg: linear-gradient(145deg, rgba(26, 30, 42, 0.72), rgba(12, 15, 23, 0.82));
        --desktop-card-bg: linear-gradient(145deg, rgba(20, 24, 34, 0.82), rgba(10, 13, 20, 0.90));
        --desktop-card-border: rgba(198, 210, 255, 0.10);
        --desktop-shadow-card: 0 18px 52px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.045);
        --desktop-label-color: rgba(196, 203, 226, 0.72);
    }

    /* Content rails */
    .app-main-content {
        padding-top: 60px !important;
    }

    .app-content-canvas {
        width: 100% !important;
        max-width: none !important;
        padding: var(--desktop-page-top) var(--desktop-page-x) 72px !important;
        box-sizing: border-box !important;
    }

    .app-page,
    .app-page-shell,
    .page-shell,
    .content-standard,
    .shopping-ios-page,
    .maintenance-page,
    .ios-contacts-page,
    .network-page,
    .notes-page,
    .settings-page,
    .setup-page,
    .preferences-page {
        width: min(100%, var(--desktop-content-standard)) !important;
        max-width: var(--desktop-content-standard) !important;
        margin-inline: auto !important;
    }

    .dayplan-page,
    .profile-page {
        width: min(100%, var(--desktop-content-focused)) !important;
        max-width: var(--desktop-content-focused) !important;
        margin-inline: auto !important;
    }

    .ios-calendar-page,
    .schoolrunsweek-page,
    .content-wide,
    .content-full {
        width: min(100%, var(--desktop-content-wide)) !important;
        max-width: var(--desktop-content-wide) !important;
        margin-inline: auto !important;
    }

    .app-page-shell-header,
    .app-page-header,
    .ios-calendar-header,
    .shopping-ios-page .app-page-shell-header,
    .maintenance-page .app-page-shell-header,
    .notes-page .app-page-shell-header {
        margin-bottom: 22px !important;
    }

    /* Typography scale */
    .app-page-eyebrow,
    .section-eyebrow,
    .ios-section-eyebrow,
    .profile-kicker,
    .config-dialog-section-title,
    .profile-dialog-section-title,
    .mud-input-label {
        color: var(--desktop-label-color) !important;
        font-size: 0.68rem !important;
        font-weight: 760 !important;
        letter-spacing: 0.12em !important;
        line-height: 1.05 !important;
        text-transform: uppercase !important;
    }

    .app-page-title,
    .page-title,
    .ios-calendar-month-label,
    .shopping-ios-page .app-page-title,
    .notes-title,
    .maintenance-page h1,
    .ios-contacts-page h1 {
        color: rgba(244, 241, 235, 0.92) !important;
        font-size: clamp(1.9rem, 2.2vw, 2.42rem) !important;
        font-weight: 640 !important;
        letter-spacing: -0.02em !important;
        line-height: 1.08 !important;
    }

    .app-page-context,
    .ios-page-subtitle,
    .shopping-page-subtitle,
    .maintenance-page-subtitle,
    .notes-subtitle,
    .soft-muted,
    .mud-typography-body1 {
        color: rgba(196, 203, 222, 0.68) !important;
        line-height: 1.42 !important;
    }

    /* Form system */
    .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),
    .profile-dialog-shell .mud-input-control:has(.mud-input-label),
    .event-edit-dialog-shell .mud-input-control:has(.mud-input-label),
    .contact-edit-dialog-shell .mud-input-control:has(.mud-input-label) {
        position: relative !important;
        padding-top: 20px !important;
        background: transparent !important;
        border: 0 !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,
    .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;
        inset: 0 auto auto 6px !important;
        display: block !important;
        width: auto !important;
        max-width: calc(100% - 12px) !important;
        height: 14px !important;
        padding: 0 !important;
        margin: 0 !important;
        transform: none !important;
        background: transparent !important;
        color: var(--desktop-label-color) !important;
        font-size: 0.68rem !important;
        font-weight: 760 !important;
        letter-spacing: 0.11em !important;
        line-height: 14px !important;
        text-transform: uppercase !important;
        opacity: 1 !important;
        pointer-events: none !important;
    }

    .mud-input.mud-input-outlined,
    .mud-input.mud-input-outlined.mud-select-input,
    .mud-field {
        height: var(--desktop-control-h) !important;
        min-height: var(--desktop-control-h) !important;
        max-height: var(--desktop-control-h) !important;
        display: flex !important;
        align-items: center !important;
        overflow: hidden !important;
        border-radius: var(--desktop-control-radius) !important;
        background: var(--desktop-control-bg) !important;
        background-image: none !important;
        color: rgba(248, 248, 250, 0.95) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
    }

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

    .mud-input:hover .mud-input-outlined-border,
    .mud-field:hover .mud-input-outlined-border {
        border-color: var(--desktop-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(--desktop-control-border-focus) !important;
        box-shadow: 0 0 0 2px rgba(159, 174, 232, 0.11) !important;
    }

    .mud-input > input.mud-input-slot,
    .mud-input > textarea.mud-input-slot,
    .mud-input > div.mud-input-slot,
    .mud-select-input,
    input.mud-input-root,
    textarea.mud-input-root {
        min-width: 0 !important;
        width: 100% !important;
        max-width: none !important;
        padding: 0 14px !important;
        color: rgba(248, 248, 250, 0.95) !important;
        background: transparent !important;
        font-size: 0.93rem !important;
        font-weight: 560 !important;
        line-height: 1.2 !important;
        text-overflow: ellipsis !important;
    }

    .mud-input > input.mud-input-slot,
    .mud-input > div.mud-input-slot,
    .mud-select-input,
    input.mud-input-root {
        height: var(--desktop-control-h) !important;
        min-height: var(--desktop-control-h) !important;
        max-height: var(--desktop-control-h) !important;
        display: flex !important;
        align-items: center !important;
        white-space: nowrap !important;
    }

    .mud-input > textarea.mud-input-slot,
    textarea.mud-input-root,
    .mud-input.mud-input-textarea {
        height: auto !important;
        min-height: 92px !important;
        max-height: none !important;
        align-items: flex-start !important;
        white-space: normal !important;
        line-height: 1.42 !important;
    }

    .mud-input > textarea.mud-input-slot,
    textarea.mud-input-root {
        padding: 12px 14px !important;
    }

    .mud-input-adornment,
    .mud-input-adornment-end {
        width: 46px !important;
        min-width: 46px !important;
        height: var(--desktop-control-h) !important;
        min-height: var(--desktop-control-h) !important;
        margin: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: rgba(205, 212, 234, 0.82) !important;
        border-left: 1px solid rgba(198, 210, 255, 0.10) !important;
        background: rgba(255, 255, 255, 0.018) !important;
    }

    .mud-select .mud-input-adornment,
    .mud-select .mud-input-adornment-end {
        border-left-color: rgba(198, 210, 255, 0.06) !important;
        background: transparent !important;
    }

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

    .mud-input-control-helper-container {
        margin-top: 5px !important;
        padding-inline: 6px !important;
        color: rgba(196, 203, 222, 0.56) !important;
        font-size: 0.74rem !important;
    }

    .mud-checkbox,
    .mud-switch {
        color: rgba(220, 226, 244, 0.78) !important;
    }

    .mud-checkbox .mud-button-root,
    .mud-checkbox .mud-icon-button {
        width: 32px !important;
        min-width: 32px !important;
        height: 32px !important;
        min-height: 32px !important;
        border-radius: 10px !important;
    }

    /* Popovers and date pickers */
    .mud-popover,
    .mud-popover-open,
    .mud-menu,
    .mud-menu-paper {
        z-index: 1800 !important;
        max-width: min(480px, calc(100vw - 48px)) !important;
        overflow: hidden !important;
        border: 1px solid rgba(198, 210, 255, 0.14) !important;
        border-radius: 16px !important;
        background: linear-gradient(145deg, rgba(20, 24, 35, 0.99), rgba(8, 11, 18, 0.99)) !important;
        box-shadow: 0 26px 76px rgba(0, 0, 0, 0.52), inset 0 1px 0 rgba(255, 255, 255, 0.055) !important;
    }

    .mud-popover .mud-list,
    .mud-menu-paper .mud-list {
        padding: 6px !important;
        background: transparent !important;
        max-height: min(420px, calc(100dvh - 96px)) !important;
        overflow-y: auto !important;
        scrollbar-width: thin;
        scrollbar-color: rgba(190, 200, 235, 0.34) transparent;
    }

    .mud-popover.app-location-popover,
    .mud-popover-open.app-location-popover {
        width: min(680px, calc(100vw - 112px)) !important;
        max-width: min(680px, calc(100vw - 112px)) !important;
    }

    .mud-popover .mud-list-item,
    .mud-menu-paper .mud-list-item {
        min-height: 38px !important;
        padding: 8px 11px !important;
        border-radius: 10px !important;
        color: rgba(236, 239, 249, 0.88) !important;
        font-size: 0.92rem !important;
    }

    .mud-popover .mud-list-item:hover,
    .mud-menu-paper .mud-list-item:hover,
    .mud-list-item-selected {
        background: rgba(135, 150, 212, 0.16) !important;
        color: rgba(245, 247, 255, 0.96) !important;
    }

    .mud-picker-container,
    .mud-picker-popover,
    .mud-popover:has(.mud-picker),
    .mud-popover-open:has(.mud-picker) {
        z-index: 1900 !important;
        overflow: visible !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    .mud-picker,
    .mud-popover .mud-picker,
    .mud-picker-container .mud-picker {
        width: 336px !important;
        max-width: min(336px, calc(100vw - 48px)) !important;
        overflow: hidden !important;
        border: 1px solid rgba(198, 210, 255, 0.16) !important;
        border-radius: 18px !important;
        background: linear-gradient(145deg, rgba(21, 25, 37, 0.99), rgba(8, 11, 18, 0.99)) !important;
        box-shadow: 0 28px 82px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
    }

    .mud-picker-toolbar {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        min-height: 50px !important;
        height: auto !important;
        padding: 10px 14px !important;
        background: rgba(255, 255, 255, 0.035) !important;
        border-bottom: 1px solid rgba(198, 210, 255, 0.10) !important;
        overflow: visible !important;
    }

    .mud-picker-toolbar .mud-button-root,
    .mud-picker-toolbar button {
        width: auto !important;
        min-width: 0 !important;
        height: 30px !important;
        min-height: 30px !important;
        padding: 0 10px !important;
        border: 1px solid rgba(198, 210, 255, 0.12) !important;
        border-radius: 10px !important;
        background: rgba(255, 255, 255, 0.035) !important;
        box-shadow: none !important;
        color: rgba(232, 236, 248, 0.90) !important;
        font-size: 0.88rem !important;
        font-weight: 760 !important;
        line-height: 30px !important;
        letter-spacing: 0 !important;
        text-transform: none !important;
    }

    .mud-picker-calendar,
    .mud-picker-content {
        background: transparent !important;
    }

    /* Modal architecture */
    .mud-dialog:not(.mud-dialog-fullscreen) {
        width: auto !important;
        max-width: min(960px, calc(100vw - 96px)) !important;
        max-height: calc(100dvh - 72px) !important;
        overflow: hidden !important;
        border: 1px solid rgba(198, 210, 255, 0.13) !important;
        border-radius: 22px !important;
        background: linear-gradient(145deg, rgba(22, 26, 37, 0.99), rgba(9, 12, 19, 0.99)) !important;
        box-shadow: 0 30px 90px rgba(0, 0, 0, 0.56), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
    }

    .mud-dialog:not(.mud-dialog-fullscreen):has(.config-dialog-shell),
    .mud-dialog:not(.mud-dialog-fullscreen):has(.event-edit-dialog-shell),
    .mud-dialog:not(.mud-dialog-fullscreen):has(.shopping-dialog-section),
    .mud-dialog:not(.mud-dialog-fullscreen):has(.maintenance-dialog-section) {
        width: min(960px, calc(100vw - 96px)) !important;
    }

    .mud-dialog:not(.mud-dialog-fullscreen) .mud-dialog-title {
        min-height: 58px !important;
        padding: 17px 24px 15px !important;
        border-bottom: 1px solid rgba(198, 210, 255, 0.10) !important;
        background: rgba(255, 255, 255, 0.018) !important;
    }

    .mud-dialog:not(.mud-dialog-fullscreen) .mud-dialog-title .mud-typography {
        color: rgba(244, 241, 235, 0.94) !important;
        font-size: 1.12rem !important;
        font-weight: 700 !important;
        letter-spacing: -0.01em !important;
    }

    .mud-dialog:not(.mud-dialog-fullscreen) .mud-dialog-content {
        max-height: calc(100dvh - 202px) !important;
        overflow: hidden auto !important;
        padding: 18px 24px 96px !important;
    }

    .mud-dialog:not(.mud-dialog-fullscreen) .mud-dialog-actions {
        position: sticky !important;
        bottom: 0 !important;
        z-index: 3 !important;
        min-height: 64px !important;
        justify-content: flex-end !important;
        gap: 10px !important;
        padding: 12px 24px !important;
        border-top: 1px solid rgba(198, 210, 255, 0.10) !important;
        background: rgba(7, 9, 14, 0.97) !important;
        box-shadow: 0 -16px 34px rgba(0, 0, 0, 0.26) !important;
    }

    .mud-dialog:not(.mud-dialog-fullscreen) .mud-dialog-actions .mud-button-root {
        min-height: 42px !important;
        height: 42px !important;
        min-width: 92px !important;
        border-radius: 12px !important;
    }

    .config-dialog-section,
    .profile-dialog-section,
    .contact-edit-section,
    .shopping-dialog-section,
    .maintenance-dialog-section {
        padding: 18px !important;
        margin-bottom: 16px !important;
        border: 1px solid rgba(198, 210, 255, 0.10) !important;
        border-radius: 18px !important;
        background: rgba(255, 255, 255, 0.024) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
    }

    .config-dialog-grid,
    .config-dialog-grid-two,
    .profile-form-grid,
    .profile-dialog-grid,
    .contact-edit-form-grid,
    .maintenance-form-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 18px 24px !important;
        align-items: start !important;
    }

    .span-full,
    .profile-span-full,
    .app-span-full,
    .config-dialog-span-full,
    .contact-edit-section-flags {
        grid-column: 1 / -1 !important;
    }

    .shopping-bulk-item-list {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 10px !important;
        grid-column: 1 / -1 !important;
    }

    .shopping-bulk-item-row {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(150px, 220px) auto !important;
        gap: 10px !important;
        align-items: start !important;
        width: 100% !important;
    }

    .shopping-bulk-item-row > .mud-input-control:first-child {
        min-width: 0 !important;
        width: 100% !important;
    }

    /* Buttons and actions */
    .mud-button-root {
        min-height: var(--desktop-control-compact-h) !important;
        border-radius: 12px !important;
        padding-inline: 15px !important;
        font-size: 0.88rem !important;
        font-weight: 700 !important;
        letter-spacing: 0 !important;
        text-transform: none !important;
    }

    .mud-button-filled-primary,
    .mud-button-filled.mud-button-filled-primary,
    .primary-command,
    .shopping-item-bought-button {
        border: 1px solid rgba(200, 211, 255, 0.18) !important;
        background: linear-gradient(180deg, rgba(151, 163, 219, 0.95), rgba(116, 129, 196, 0.94)) !important;
        color: rgba(7, 9, 15, 0.96) !important;
        box-shadow: 0 12px 30px rgba(83, 99, 166, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
    }

    .mud-button-outlined,
    .mud-button-text,
    .secondary-command,
    .quiet-action {
        border: 1px solid rgba(198, 210, 255, 0.10) !important;
        background: rgba(255, 255, 255, 0.032) !important;
        color: rgba(230, 234, 246, 0.82) !important;
        box-shadow: none !important;
    }

    .mud-icon-button {
        width: 38px !important;
        min-width: 38px !important;
        height: 38px !important;
        min-height: 38px !important;
        border-radius: 11px !important;
    }

    .mud-button-filled-error,
    .mud-button-outlined-error,
    .mud-icon-button-color-error,
    .destructive-action {
        background: rgba(116, 54, 60, 0.22) !important;
        border-color: rgba(228, 107, 93, 0.22) !important;
        color: rgba(244, 170, 162, 0.90) !important;
        box-shadow: none !important;
    }

    /* Cards and empty states */
    .mud-paper:not(.mud-popover):not(.mud-menu-paper),
    .dayplan-card,
    .shopping-section-card,
    .shopping-item-row,
    .network-contact-card,
    .maintenance-item-card,
    .notes-editor-pane,
    .schoolrunsweek-day-card,
    .settings-card,
    .house-card,
    .kids-card,
    .stores-card,
    .vehicle-card {
        border-color: var(--desktop-card-border) !important;
        background: var(--desktop-card-bg) !important;
        box-shadow: var(--desktop-shadow-card) !important;
    }

    .dayplan-empty-card,
    .shopping-empty-card,
    .maintenance-empty-state,
    .empty-state-card,
    .ios-calendar-empty,
    .schoolrunsweek-empty {
        min-height: 92px !important;
        padding: 20px 24px !important;
        border: 1px solid rgba(198, 210, 255, 0.09) !important;
        border-radius: 16px !important;
        background: rgba(255, 255, 255, 0.022) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.032) !important;
    }

    /* Today */
    .dayplan-toolbar-row {
        width: fit-content !important;
        max-width: 100% !important;
        display: grid !important;
        grid-template-columns: auto 96px minmax(190px, 260px) !important;
        gap: 10px !important;
        align-items: center !important;
        padding: 12px !important;
        border-radius: 18px !important;
        background: rgba(13, 16, 24, 0.64) !important;
        border: 1px solid rgba(198, 210, 255, 0.10) !important;
    }

    .dayplan-date-wrap {
        display: grid !important;
        grid-template-columns: 42px 236px 42px !important;
        gap: 8px !important;
        align-items: center !important;
        min-width: 0 !important;
    }

    .dayplan-date-nav-button,
    .dayplan-date-nav-button.mud-icon-button {
        width: 42px !important;
        min-width: 42px !important;
        height: 42px !important;
        min-height: 42px !important;
    }

    .dayplan-today-wrap,
    .dayplan-user-wrap {
        min-width: 0 !important;
        width: 100% !important;
    }

    .dayplan-today-button,
    .dayplan-today-button.mud-button-root {
        width: 100% !important;
        height: var(--desktop-control-h) !important;
        min-height: var(--desktop-control-h) !important;
    }

    .dayplan-user-picker .mud-input {
        height: var(--desktop-control-h) !important;
        min-height: var(--desktop-control-h) !important;
    }

    .dayplan-date-control,
    .schoolrunsweek-date-control {
        height: var(--desktop-control-h) !important;
        min-height: var(--desktop-control-h) !important;
        width: 236px !important;
        min-width: 236px !important;
        border-radius: var(--desktop-control-radius) !important;
        background: var(--desktop-control-bg) !important;
        border: 1px solid var(--desktop-control-border) !important;
        overflow: hidden !important;
    }

    .dayplan-date-native,
    .schoolrunsweek-date-native {
        height: var(--desktop-control-h) !important;
        line-height: var(--desktop-control-h) !important;
        padding: 0 52px 0 14px !important;
        border: 0 !important;
        background: transparent !important;
        color: rgba(248, 248, 250, 0.94) !important;
        font-weight: 700 !important;
    }

    .dayplan-date-icon,
    .schoolrunsweek-date-icon {
        right: 13px !important;
        width: 20px !important;
        height: 20px !important;
        color: rgba(205, 212, 234, 0.82) !important;
    }

    .dayplan-card-timeline {
        grid-template-columns: 82px 18px minmax(0, 1fr) !important;
        min-height: 70px !important;
        margin-bottom: 12px !important;
    }

    .dayplan-card-timeline .dayplan-card-shell {
        min-height: 68px !important;
        padding: 18px 24px !important;
        border-radius: 15px !important;
    }

    .dayplan-list:has(.dayplan-card-timeline)::before {
        left: 91px !important;
        width: 1px !important;
        opacity: 0.55 !important;
    }

    .dayplan-card-timeline .dayplan-rail-time {
        padding-right: 6px !important;
        font-size: 0.94rem !important;
    }

    .dayplan-card-timeline .dayplan-rail-dot {
        transform: translateX(4px) !important;
    }

    .dayplan-section-title,
    .dayplan-page h2 {
        font-size: 1.24rem !important;
        margin-bottom: 12px !important;
    }

    .dayplan-card-anytime,
    .dayplan-done-accordion {
        border-radius: 16px !important;
    }

    .dayplan-card-anytime-inner,
    .dayplan-done-accordion .mud-expand-panel-content {
        padding: 18px 22px !important;
    }

    /* Schedule */
    .ios-calendar-control-panel,
    .ios-calendar-toolbar {
        border-radius: 18px !important;
        padding: 12px !important;
        background: rgba(13, 16, 24, 0.66) !important;
        border: 1px solid rgba(198, 210, 255, 0.10) !important;
        box-shadow: 0 18px 52px rgba(0, 0, 0, 0.24) !important;
    }

    .ios-calendar-date-nav-row {
        display: inline-flex !important;
        align-items: center !important;
        gap: 10px !important;
    }

    .ios-calendar-date-picker-shell,
    .ios-calendar-date-control,
    .ios-calendar-picker {
        width: 282px !important;
        min-width: 282px !important;
        max-width: 282px !important;
        flex: 0 0 282px !important;
    }

    .ios-calendar-date-control .mud-input,
    .ios-calendar-picker .mud-input,
    .ios-calendar-user-picker .mud-input {
        height: var(--desktop-control-h) !important;
        min-height: var(--desktop-control-h) !important;
        border-radius: var(--desktop-control-radius) !important;
        background: var(--desktop-control-bg) !important;
    }

    .ios-calendar-view-switch {
        height: 40px !important;
        min-height: 40px !important;
        padding: 4px !important;
        border-radius: 13px !important;
    }

    .ios-calendar-view-button.mud-button-root {
        height: 32px !important;
        min-height: 32px !important;
        border-radius: 10px !important;
    }

    .ios-calendar-generate-button.mud-button-root {
        height: 40px !important;
        min-height: 40px !important;
        align-self: center !important;
    }

    .ios-day-event-card,
    .ios-week-mobile-card,
    .ios-month-cell {
        border-radius: 16px !important;
        border-color: rgba(198, 210, 255, 0.10) !important;
        background: rgba(18, 22, 32, 0.76) !important;
    }

    .ios-month-event-pill,
    .ios-week-event-chip,
    .calendar-event-pill {
        height: 20px !important;
        border-radius: 7px !important;
        padding-inline: 7px !important;
        background: rgba(135, 150, 212, 0.14) !important;
        border: 1px solid rgba(135, 150, 212, 0.16) !important;
        color: rgba(224, 229, 248, 0.86) !important;
        font-size: 0.7rem !important;
    }

    /* Shopping */
    .shopping-ios-page {
        --shopping-row-bg: rgba(13, 16, 24, 0.68);
        --shopping-panel-bg: rgba(15, 18, 27, 0.70);
    }

    .shopping-section-card {
        padding: 18px 22px !important;
        border-radius: 18px !important;
    }

    .shopping-item-list {
        gap: 8px !important;
    }

    .shopping-item-row,
    .shopping-item-row.bought {
        min-height: 62px !important;
        padding: 11px 14px !important;
        border-radius: 14px !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
    }

    .shopping-item-main {
        grid-template-columns: minmax(0, 1fr) auto auto !important;
        gap: 4px 12px !important;
    }

    .shopping-item-name {
        font-size: 0.94rem !important;
        font-weight: 680 !important;
    }

    .shopping-item-bought-button.mud-button-root {
        height: 32px !important;
        min-height: 32px !important;
        min-width: 76px !important;
    }

    /* Directory */
    .network-filter-bar {
        width: fit-content !important;
        padding: 7px !important;
        border-radius: 16px !important;
    }

    .network-contact-grid,
    .network-contact-grid-emergency {
        gap: 14px !important;
        align-items: stretch !important;
    }

    .network-contact-card,
    .ios-contact-row.network-contact-card {
        min-height: 128px !important;
        padding: 15px !important;
        border-radius: 16px !important;
        grid-template-columns: 44px minmax(0, 1fr) auto !important;
        column-gap: 12px !important;
    }

    .ios-contact-avatar {
        width: 44px !important;
        height: 44px !important;
        font-size: 0.84rem !important;
    }

    .ios-contact-name {
        font-size: 0.98rem !important;
        line-height: 1.15 !important;
    }

    .ios-contact-actions {
        align-self: center !important;
        gap: 6px !important;
    }

    /* Notes */
    .notes-workspace,
    .notes-editor-pane,
    .notes-editor-canvas {
        border-radius: 18px !important;
    }

    .notes-command-bar {
        padding: 10px 12px !important;
        border-radius: 16px !important;
    }

    .notes-notepad {
        background: rgba(8, 11, 17, 0.48) !important;
        border: 1px solid rgba(198, 210, 255, 0.09) !important;
        border-radius: 14px !important;
    }

    /* Transport */
    .schoolrunsweek-toolbar {
        display: inline-grid !important;
        grid-template-columns: 42px 104px 42px minmax(230px, 300px) !important;
        gap: 10px !important;
        padding: 12px !important;
        border-radius: 18px !important;
        background: rgba(13, 16, 24, 0.66) !important;
        border: 1px solid rgba(198, 210, 255, 0.10) !important;
    }

    .schoolrunsweek-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(360px, 1fr)) !important;
        gap: 16px !important;
        align-items: start !important;
    }

    .schoolrunsweek-day-card {
        min-height: 0 !important;
        border-radius: 18px !important;
        overflow: hidden !important;
    }

    .schoolrunsweek-day-header {
        padding: 12px 16px !important;
    }

    .schoolrunsweek-slot {
        min-height: 0 !important;
        padding: 13px 14px !important;
    }

    .schoolrunsweek-slot-header {
        min-height: 34px !important;
        margin-bottom: 8px !important;
    }

    .schoolrunsweek-empty {
        width: 100% !important;
        max-width: none !important;
        min-height: 72px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 12px !important;
        text-align: left !important;
        padding: 14px !important;
    }

    .schoolrunsweek-empty .mud-icon-root {
        flex: 0 0 auto !important;
    }

    .schoolrunsweek-assignment-card {
        min-height: 78px !important;
        border-radius: 14px !important;
    }

    .schoolrunsweek-assignment-grid {
        padding: 13px !important;
        gap: 10px !important;
    }

    /* Settings/entity grids */
    .settings-grid,
    .setup-grid,
    .kids-grid,
    .users-grid,
    .vehicles-grid,
    .locations-grid,
    .stores-grid,
    .houses-grid {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
        gap: 16px !important;
        align-items: stretch !important;
    }

    .settings-card,
    .setup-card,
    .kid-card,
    .user-card,
    .vehicle-card,
    .location-card,
    .store-card,
    .house-card {
        min-height: 100% !important;
        border-radius: 17px !important;
    }
}

@media (min-width: 1500px) {
    .schoolrunsweek-grid {
        grid-template-columns: repeat(3, minmax(360px, 1fr)) !important;
    }
}

/*
 * Desktop refinement pass.
 * This block is intentionally loaded after the first hardening pass. It acts as
 * the desktop contract for shell rhythm, dense operational cards, modal chrome,
 * and MudBlazor overlay states without rewriting individual pages.
 */
@media (min-width: 769px) {
    :root {
        --desktop-page-top: 26px;
        --desktop-page-x: clamp(30px, 3.2vw, 58px);
        --desktop-control-h: 44px;
        --desktop-control-compact-h: 40px;
        --desktop-control-radius: 12px;
        --desktop-card-radius: 18px;
        --desktop-card-pad: 18px;
        --desktop-card-border: rgba(199, 211, 255, 0.105);
        --desktop-card-bg-flat: rgba(16, 20, 30, 0.74);
        --desktop-panel-bg: linear-gradient(145deg, rgba(23, 27, 39, 0.76), rgba(10, 13, 20, 0.86));
        --desktop-toolbar-bg: rgba(12, 15, 23, 0.70);
        --desktop-toolbar-border: rgba(199, 211, 255, 0.11);
        --desktop-meta: rgba(196, 203, 222, 0.66);
    }

    html,
    body,
    .mud-layout {
        overflow-x: clip !important;
    }

    .app-main-content {
        padding-top: 56px !important;
    }

    .app-content-canvas {
        padding: var(--desktop-page-top) var(--desktop-page-x) 58px !important;
    }

    .app-page,
    .app-page-shell,
    .page-shell,
    .shopping-ios-page,
    .maintenance-page,
    .ios-contacts-page,
    .notes-page,
    .settings-page,
    .setup-page,
    .preferences-page,
    .dayplan-page,
    .profile-page,
    .ios-calendar-page,
    .schoolrunsweek-page {
        margin-inline: auto !important;
        min-width: 0 !important;
    }

    .dayplan-page,
    .profile-page,
    .preferences-page {
        width: min(100%, 1260px) !important;
        max-width: 1260px !important;
    }

    .shopping-ios-page,
    .maintenance-page,
    .ios-contacts-page,
    .notes-page,
    .settings-page,
    .setup-page {
        width: min(100%, 1480px) !important;
        max-width: 1480px !important;
    }

    .ios-calendar-page,
    .schoolrunsweek-page {
        width: min(100%, 1680px) !important;
        max-width: 1680px !important;
    }

    .app-page-shell-header,
    .app-page-header,
    .ios-calendar-header,
    .dayplan-page-header,
    .shopping-ios-page .app-page-shell-header,
    .maintenance-page .app-page-shell-header,
    .notes-page .app-page-shell-header,
    .schoolrunsweek-header,
    .profile-hero {
        margin-bottom: 18px !important;
        gap: 18px !important;
    }

    .app-page-title,
    .app-page-shell-title,
    .page-title,
    .ios-calendar-month-label,
    .shopping-ios-page .app-page-title,
    .notes-title,
    .maintenance-page h1,
    .ios-contacts-page h1 {
        font-size: clamp(1.86rem, 2vw, 2.28rem) !important;
        font-weight: 660 !important;
        line-height: 1.06 !important;
        letter-spacing: 0 !important;
    }

    .app-page-context,
    .app-page-shell-subtitle,
    .page-subtitle,
    .ios-page-subtitle,
    .shopping-page-subtitle,
    .maintenance-page-subtitle,
    .notes-subtitle {
        max-width: 820px !important;
        color: var(--desktop-meta) !important;
        font-size: 0.98rem !important;
        line-height: 1.42 !important;
    }

    .app-page-eyebrow,
    .app-page-shell-kicker,
    .page-kicker,
    .section-eyebrow,
    .ios-section-eyebrow,
    .profile-kicker,
    .config-dialog-section-title,
    .profile-dialog-section-title,
    .mud-input-label {
        letter-spacing: 0.105em !important;
        font-weight: 740 !important;
    }

    /* One desktop toolbar family. */
    .dayplan-toolbar-row,
    .ios-calendar-control-panel,
    .ios-calendar-toolbar,
    .shopping-toolbar,
    .maintenance-toolbar,
    .network-filter-bar,
    .notes-command-bar,
    .notes-toolbar,
    .directory-toolbar,
    .profile-command-rail,
    .schoolrunsweek-toolbar,
    .settings-action-row,
    .settings-toolbar,
    .setup-toolbar {
        min-height: 64px !important;
        padding: 10px 12px !important;
        border: 1px solid var(--desktop-toolbar-border) !important;
        border-radius: 18px !important;
        background: var(--desktop-toolbar-bg) !important;
        box-shadow: 0 16px 42px rgba(0, 0, 0, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
    }

    .shopping-toolbar,
    .maintenance-toolbar,
    .notes-toolbar,
    .directory-toolbar,
    .profile-command-rail,
    .settings-action-row,
    .settings-toolbar,
    .setup-toolbar {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
    }

    .dayplan-toolbar-row {
        grid-template-columns: auto 100px minmax(210px, 280px) !important;
        align-items: center !important;
    }

    .ios-calendar-toolbar.schedule-control-surface,
    .ios-calendar-control-panel {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px 12px !important;
    }

    .ios-calendar-date-nav-row,
    .ios-calendar-viewing-row,
    .ios-calendar-mode-row {
        align-items: center !important;
    }

    .ios-calendar-user-picker,
    .ios-calendar-viewing-row {
        min-width: 240px !important;
        max-width: 340px !important;
    }

    .ios-calendar-view-switch {
        min-width: 250px !important;
        max-width: 330px !important;
        align-self: center !important;
    }

    .ios-calendar-generate-button.mud-button-root {
        min-width: 172px !important;
        align-self: center !important;
    }

    /* Canonical desktop controls. */
    html body .mud-input-control:has(.mud-input-label) > .mud-input-control-input-container {
        min-height: calc(var(--desktop-control-h) + 22px) !important;
        padding-top: 22px !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.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(--desktop-control-h) !important;
        min-height: var(--desktop-control-h) !important;
        max-height: var(--desktop-control-h) !important;
        border-radius: var(--desktop-control-radius) !important;
        background: rgba(255, 255, 255, 0.052) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.032) !important;
    }

    html body .mud-input-control .mud-input-outlined .mud-input-outlined-border,
    html body .mud-input-control .mud-field .mud-input-outlined-border {
        border-color: rgba(255, 255, 255, 0.125) !important;
        border-radius: var(--desktop-control-radius) !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: rgba(255, 255, 255, 0.19) !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: rgba(170, 183, 236, 0.58) !important;
        box-shadow: 0 0 0 2px rgba(170, 183, 236, 0.10) !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 {
        height: var(--desktop-control-h) !important;
        min-height: var(--desktop-control-h) !important;
        max-height: var(--desktop-control-h) !important;
        line-height: var(--desktop-control-h) !important;
        padding-left: 14px !important;
        font-weight: 520 !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 {
        width: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;
        border-left-color: rgba(255, 255, 255, 0.055) !important;
    }

    html body .mud-input-control textarea.mud-input-slot,
    html body .mud-input-control textarea.mud-input-root,
    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 {
        min-height: 104px !important;
    }

    /* Premium overlays. */
    .mud-popover,
    .mud-popover-open,
    .mud-menu,
    .mud-menu-paper {
        z-index: 2400 !important;
        border-color: rgba(199, 211, 255, 0.16) !important;
        border-radius: 16px !important;
        background: linear-gradient(145deg, rgba(22, 26, 38, 0.995), rgba(7, 10, 17, 0.995)) !important;
        box-shadow: 0 28px 86px rgba(0, 0, 0, 0.58), inset 0 1px 0 rgba(255, 255, 255, 0.055) !important;
    }

    .mud-popover .mud-list,
    .mud-menu-paper .mud-list {
        padding: 7px !important;
        max-height: min(430px, calc(100dvh - 120px)) !important;
    }

    .mud-popover .mud-list-item,
    .mud-menu-paper .mud-list-item {
        min-height: 40px !important;
        padding: 8px 12px !important;
        border-radius: 10px !important;
        color: rgba(234, 238, 249, 0.90) !important;
        font-weight: 560 !important;
    }

    .mud-popover .mud-list-item:hover,
    .mud-menu-paper .mud-list-item:hover,
    .mud-list-item-selected,
    .mud-list-item.mud-selected-item {
        background: rgba(138, 153, 218, 0.18) !important;
        color: rgba(248, 249, 255, 0.97) !important;
    }

    .mud-picker,
    .mud-popover .mud-picker,
    .mud-picker-container .mud-picker {
        width: 332px !important;
        border-radius: 18px !important;
        border-color: rgba(199, 211, 255, 0.17) !important;
        background: linear-gradient(145deg, rgba(22, 26, 38, 0.995), rgba(7, 10, 17, 0.995)) !important;
    }

    .mud-picker-toolbar {
        min-height: 68px !important;
        padding: 12px 16px !important;
    }

    .mud-picker-calendar-content,
    .mud-picker-content {
        padding: 10px !important;
    }

    /* Dialogs: one restrained shell. */
    .mud-dialog:not(.mud-dialog-fullscreen) {
        max-width: min(920px, calc(100vw - 112px)) !important;
        max-height: calc(100dvh - 64px) !important;
        border-radius: 21px !important;
    }

    .mud-dialog:not(.mud-dialog-fullscreen):has(.dayplan-edit-dialog-shell),
    .mud-dialog:not(.mud-dialog-fullscreen):has(.event-edit-dialog-shell),
    .mud-dialog:not(.mud-dialog-fullscreen):has(.shopping-edit-dialog-shell),
    .mud-dialog:not(.mud-dialog-fullscreen):has(.maintenance-form-grid),
    .mud-dialog:not(.mud-dialog-fullscreen):has(.contact-edit-dialog-shell),
    .mud-dialog:not(.mud-dialog-fullscreen):has(.config-dialog-shell) {
        width: min(920px, calc(100vw - 112px)) !important;
    }

    .mud-dialog:not(.mud-dialog-fullscreen) .mud-dialog-title {
        min-height: 56px !important;
        padding: 16px 22px 14px !important;
    }

    .mud-dialog:not(.mud-dialog-fullscreen) .mud-dialog-content {
        max-height: calc(100dvh - 184px) !important;
        padding: 16px 22px 88px !important;
        scrollbar-width: thin;
        scrollbar-color: rgba(190, 200, 235, 0.34) transparent;
    }

    .mud-dialog:not(.mud-dialog-fullscreen) .mud-dialog-actions {
        min-height: 62px !important;
        padding: 10px 22px 12px !important;
    }

    .config-dialog-section,
    .profile-dialog-section,
    .contact-edit-section,
    .shopping-dialog-section,
    .maintenance-dialog-section,
    .event-edit-section,
    .dayplan-edit-section {
        padding: 16px !important;
        margin-bottom: 14px !important;
        border-radius: 17px !important;
        background: rgba(255, 255, 255, 0.025) !important;
    }

    .config-dialog-grid,
    .config-dialog-grid-two,
    .profile-form-grid,
    .profile-dialog-grid,
    .contact-edit-form-grid,
    .maintenance-form-grid,
    .event-edit-grid,
    .shopping-edit-grid {
        gap: 16px 24px !important;
    }

    /* Cards and empty states: compact operational pattern. */
    .app-card,
    .lux-card,
    .omni-operational-card,
    .omni-surface-card,
    .dayplan-card-shell,
    .shopping-section-card,
    .shopping-store-group,
    .shopping-item-row,
    .network-contact-card,
    .maintenance-item-card,
    .maintenance-group-card,
    .notes-editor-pane,
    .notes-list-card,
    .schoolrunsweek-day-card,
    .schoolrunsweek-slot-card,
    .settings-card,
    .setup-card,
    .kid-card,
    .user-card,
    .vehicle-card,
    .location-card,
    .store-card,
    .house-card,
    .profile-memory-card,
    .profile-panel {
        border-radius: var(--desktop-card-radius) !important;
        border-color: var(--desktop-card-border) !important;
        background: var(--desktop-card-bg) !important;
        box-shadow: 0 16px 48px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
    }

    .app-empty-state-card,
    .dayplan-empty-card,
    .shopping-empty-card,
    .maintenance-empty-state,
    .empty-state-card,
    .ios-calendar-empty,
    .schoolrunsweek-empty,
    .profile-inline-empty,
    .notes-empty-state {
        min-height: 72px !important;
        padding: 16px 18px !important;
        border-radius: 15px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 12px !important;
        text-align: left !important;
        color: var(--desktop-meta) !important;
    }

    .app-empty-title,
    .empty-title {
        font-size: 0.98rem !important;
        line-height: 1.15 !important;
        margin: 0 !important;
    }

    .app-empty-copy,
    .empty-copy {
        font-size: 0.84rem !important;
        line-height: 1.32 !important;
        margin: 2px 0 0 !important;
    }

    /* Today flagship density. */
    .dayplan-card-timeline {
        grid-template-columns: 78px 16px minmax(0, 1fr) !important;
        margin-bottom: 10px !important;
    }

    .dayplan-card-timeline .dayplan-card-shell {
        min-height: 66px !important;
        padding: 16px 21px !important;
    }

    .dayplan-list:has(.dayplan-card-timeline)::before {
        left: 86px !important;
    }

    .dayplan-card-timeline .dayplan-rail-time {
        padding-right: 9px !important;
    }

    .dayplan-card-timeline .dayplan-toggle-button,
    .dayplan-card-timeline .mud-icon-button {
        align-self: center !important;
    }

    /* Schedule polish. */
    .ios-month-cell {
        min-height: 118px !important;
        padding: 10px !important;
    }

    .ios-month-event-pill,
    .ios-week-event-chip,
    .calendar-event-pill {
        max-width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .ios-day-event-card {
        min-height: 78px !important;
        padding: 16px 18px !important;
    }

    /* Procurement rows. */
    .shopping-store-group {
        padding: 18px !important;
        gap: 10px !important;
    }

    .shopping-item-list {
        gap: 8px !important;
    }

    .shopping-item-row,
    .shopping-item-row.bought {
        min-height: 58px !important;
        padding: 10px 14px !important;
        align-items: center !important;
    }

    .shopping-item-main {
        align-items: center !important;
    }

    .shopping-item-name {
        line-height: 1.18 !important;
    }

    .shopping-chip,
    .status-chip,
    .app-chip,
    .mud-chip-root {
        min-height: 22px !important;
        padding: 3px 8px !important;
        font-size: 0.72rem !important;
    }

    /* Directory cards. */
    .network-contact-grid,
    .network-contact-grid-emergency {
        gap: 13px !important;
    }

    .network-contact-card,
    .ios-contact-row.network-contact-card {
        min-height: 112px !important;
        padding: 14px !important;
    }

    .ios-contact-actions,
    .network-contact-actions {
        align-self: center !important;
    }

    /* Transport board compression. */
    .schoolrunsweek-grid {
        gap: 14px !important;
        align-items: start !important;
    }

    .schoolrunsweek-day-card {
        min-height: 0 !important;
    }

    .schoolrunsweek-day-header {
        padding: 11px 15px !important;
    }

    .schoolrunsweek-slot {
        padding: 12px !important;
    }

    .schoolrunsweek-slot-header {
        min-height: 32px !important;
    }

    .schoolrunsweek-empty {
        min-height: 56px !important;
        padding: 11px 12px !important;
    }

    .schoolrunsweek-assignment-card {
        min-height: 66px !important;
    }

    /* Settings entity pattern. */
    .settings-grid,
    .setup-grid,
    .kids-grid,
    .users-grid,
    .vehicles-grid,
    .locations-grid,
    .stores-grid,
    .houses-grid {
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
        gap: 14px !important;
    }

    .settings-card,
    .setup-card,
    .kid-card,
    .user-card,
    .vehicle-card,
    .location-card,
    .store-card,
    .house-card {
        padding: 17px !important;
        min-height: 132px !important;
    }
}

@media (min-width: 1800px) {
    .settings-grid,
    .setup-grid,
    .kids-grid,
    .users-grid,
    .vehicles-grid,
    .locations-grid,
    .stores-grid,
    .houses-grid {
        grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)) !important;
    }

    .schoolrunsweek-grid {
        grid-template-columns: repeat(3, minmax(380px, 1fr)) !important;
    }
}

/*
 * Authenticated desktop QA follow-up, 2026-05-16.
 * These rules are based on the first successful authenticated screenshot matrix:
 * tighten oversized modals, calm Settings/Preferences nested panels, compress
 * Transport empty rows, and stop long select popovers from becoming visual walls.
 */
@media (min-width: 769px) {
    :root {
        --desktop-dialog-wide: 980px;
        --desktop-section-pad-tight: 11px;
    }

    /* Popovers: keep long settings/timezone menus useful without swallowing the page. */
    html body .mud-popover:has(.mud-list),
    html body .mud-popover-open:has(.mud-list),
    html body .mud-menu-paper {
        width: min(360px, calc(100vw - 80px)) !important;
        max-width: min(360px, calc(100vw - 80px)) !important;
        max-height: min(360px, calc(100dvh - 148px)) !important;
    }

    html body .mud-popover .mud-list,
    html body .mud-menu-paper .mud-list {
        padding: 6px !important;
        max-height: inherit !important;
    }

    html body .mud-popover .mud-list-item,
    html body .mud-menu-paper .mud-list-item {
        min-height: 36px !important;
        padding: 7px 11px !important;
        font-size: 0.91rem !important;
    }

    html body .mud-popover .mud-list-item-text,
    html body .mud-popover .mud-typography {
        white-space: nowrap !important;
    }

    /* Modals: make the proving-ground forms feel like dialogs, not full documents. */
    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.dayplan-edit-dialog-shell),
    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.event-edit-dialog-shell),
    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.shopping-edit-dialog-shell),
    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.maintenance-form-grid),
    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.contact-edit-dialog-shell),
    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.config-dialog-shell) {
        width: min(var(--desktop-dialog-wide), calc(100vw - 128px)) !important;
        max-width: min(var(--desktop-dialog-wide), calc(100vw - 128px)) !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen) .mud-dialog-title {
        min-height: 48px !important;
        padding: 13px 20px 11px !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen) .mud-dialog-content {
        padding: 12px 20px 72px !important;
        max-height: calc(100dvh - 158px) !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen) .mud-dialog-actions {
        min-height: 54px !important;
        padding: 8px 20px 9px !important;
    }

    .config-dialog-section,
    .profile-dialog-section,
    .contact-edit-section,
    .shopping-dialog-section,
    .maintenance-dialog-section,
    .event-edit-section,
    .dayplan-edit-section {
        padding: var(--desktop-section-pad-tight) !important;
        margin-bottom: 9px !important;
        border-radius: 14px !important;
    }

    .config-dialog-section-header,
    .contact-edit-section .config-dialog-section-header,
    .event-edit-dialog-shell .config-dialog-section-header {
        margin-bottom: 9px !important;
    }

    .config-dialog-helper,
    .event-edit-dialog-shell .config-dialog-helper,
    .maintenance-dialog-section .config-dialog-helper,
    .dayplan-edit-section .config-dialog-helper {
        margin: 2px 0 10px !important;
        font-size: 0.84rem !important;
        line-height: 1.32 !important;
    }

    .event-edit-dialog-shell .config-dialog-grid,
    .event-edit-dialog-shell .config-dialog-grid-two,
    .maintenance-form-grid,
    .shopping-edit-grid,
    .dayplan-edit-grid,
    .contact-edit-form-grid {
        gap: 10px 18px !important;
    }

    .event-edit-dialog-shell .event-schedule-picker,
    .event-edit-dialog-shell .mud-picker,
    .maintenance-dialog-section .mud-picker,
    .dayplan-edit-section .mud-picker {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
    }

    .event-edit-dialog-shell .mud-input-control:has(.mud-input-label),
    .maintenance-dialog-section .mud-input-control:has(.mud-input-label),
    .dayplan-edit-section .mud-input-control:has(.mud-input-label) {
        padding-top: 15px !important;
    }

    .event-edit-dialog-shell .mud-input-control .mud-input-label,
    .maintenance-dialog-section .mud-input-control .mud-input-label,
    .dayplan-edit-section .mud-input-control .mud-input-label {
        left: 7px !important;
        font-size: 0.64rem !important;
        letter-spacing: 0.10em !important;
    }

    .event-edit-dialog-shell .mud-input.mud-input-outlined,
    .maintenance-dialog-section .mud-input.mud-input-outlined,
    .dayplan-edit-section .mud-input.mud-input-outlined,
    .shopping-edit-dialog-shell .mud-input.mud-input-outlined {
        height: 38px !important;
        min-height: 38px !important;
        max-height: 38px !important;
    }

    .event-edit-dialog-shell textarea.mud-input-slot,
    .maintenance-dialog-section textarea.mud-input-slot,
    .shopping-edit-dialog-shell textarea.mud-input-slot,
    .dayplan-edit-section textarea.mud-input-slot {
        min-height: 64px !important;
    }

    .event-edit-dialog-shell .mud-input-control:has(textarea) .mud-input,
    .maintenance-dialog-section .mud-input-control:has(textarea) .mud-input,
    .shopping-edit-dialog-shell .mud-input-control:has(textarea) .mud-input,
    .dayplan-edit-section .mud-input-control:has(textarea) .mud-input {
        min-height: 70px !important;
    }

    .event-edit-dialog-shell .config-dialog-section-title,
    .maintenance-dialog-section .config-dialog-section-title,
    .dayplan-edit-section .config-dialog-section-title,
    .shopping-dialog-section .config-dialog-section-title {
        letter-spacing: 0.11em !important;
        margin-bottom: 0 !important;
    }

    /* Service ticket dialog: neutralize older generated-form spacing. */
    html body .mud-dialog:has(.maintenance-form-grid) .config-dialog-section {
        padding: 10px !important;
        margin-bottom: 8px !important;
        border-radius: 14px !important;
    }

    html body .mud-dialog:has(.maintenance-form-grid) .config-dialog-section-header {
        margin-bottom: 7px !important;
    }

    html body .mud-dialog:has(.maintenance-form-grid) .maintenance-dialog-helper {
        display: none !important;
    }

    html body .mud-dialog:has(.maintenance-form-grid) .maintenance-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px 14px !important;
    }

    html body .mud-dialog:has(.maintenance-form-grid) .maintenance-field-title,
    html body .mud-dialog:has(.maintenance-form-grid) .maintenance-switch-field {
        grid-column: span 2 !important;
    }

    html body .mud-dialog:has(.maintenance-form-grid) .maintenance-field .mud-input-control,
    html body .mud-dialog:has(.maintenance-form-grid) .maintenance-field .mud-input-control:has(.mud-input-label),
    html body .mud-dialog:has(.maintenance-form-grid) .maintenance-field .mud-picker,
    html body .mud-dialog:has(.maintenance-form-grid) .maintenance-field .mud-select {
        margin: 0 !important;
        padding-top: 14px !important;
    }

    html body .mud-dialog:has(.maintenance-form-grid) .maintenance-field .mud-input-label,
    html body .mud-dialog:has(.maintenance-form-grid) .maintenance-field .mud-input-label.mud-shrink,
    html body .mud-dialog:has(.maintenance-form-grid) .maintenance-field .mud-input-label.mud-input-label-animate {
        top: 0 !important;
        left: 10px !important;
        height: 12px !important;
        color: rgba(183, 194, 232, 0.78) !important;
        font-size: 0.62rem !important;
        letter-spacing: 0.11em !important;
        line-height: 12px !important;
    }

    html body .mud-dialog:has(.maintenance-form-grid) .maintenance-field .mud-input.mud-input-outlined,
    html body .mud-dialog:has(.maintenance-form-grid) .maintenance-field .mud-input.mud-input-outlined.mud-select-input {
        height: 38px !important;
        min-height: 38px !important;
        max-height: 38px !important;
    }

    html body .mud-dialog:has(.maintenance-form-grid) .maintenance-field .mud-input-slot,
    html body .mud-dialog:has(.maintenance-form-grid) .maintenance-field .mud-select-input {
        height: 38px !important;
        min-height: 38px !important;
        max-height: 38px !important;
        line-height: 38px !important;
    }

    html body .mud-dialog:has(.maintenance-form-grid) .maintenance-inline-switch {
        min-height: 36px !important;
        padding: 6px 10px !important;
        border-radius: 12px !important;
    }

    html body .mud-dialog:has(.maintenance-form-grid) .config-dialog-toggle-stack {
        gap: 6px !important;
    }

    /* Transport: shift from stacked CRUD cards to a denser logistics board. */
    .schoolrunsweek-page {
        max-width: min(100%, 1500px) !important;
    }

    .schoolrunsweek-toolbar {
        padding: 13px 16px !important;
        gap: 10px !important;
        width: fit-content !important;
        max-width: 100% !important;
    }

    .schoolrunsweek-grid,
    html body .schoolrunsweek-page .schoolrunsweek-days {
        grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)) !important;
        gap: 10px !important;
    }

    .schoolrunsweek-day-header {
        min-height: 44px !important;
        padding: 8px 12px !important;
    }

    .schoolrunsweek-slot {
        padding: 8px 10px !important;
    }

    .schoolrunsweek-slot-header {
        min-height: 30px !important;
        gap: 8px !important;
        border-bottom-color: rgba(255, 255, 255, 0.055) !important;
    }

    .schoolrunsweek-slot-header .mud-button-root {
        height: 28px !important;
        min-height: 28px !important;
        padding-inline: 9px !important;
        font-size: 0.74rem !important;
    }

    .schoolrunsweek-empty {
        min-height: 38px !important;
        padding: 7px 9px !important;
        gap: 8px !important;
        border-style: solid !important;
        background: rgba(255, 255, 255, 0.012) !important;
    }

    .schoolrunsweek-empty .mud-icon-root {
        width: 18px !important;
        height: 18px !important;
        opacity: 0.46 !important;
    }

    .schoolrunsweek-empty .mud-typography-body1,
    .schoolrunsweek-empty-title {
        font-size: 0.86rem !important;
        line-height: 1.18 !important;
        margin: 0 !important;
    }

    .schoolrunsweek-empty .mud-typography-body2,
    .schoolrunsweek-empty-message,
    .schoolrunsweek-empty .app-empty-state-message {
        display: none !important;
    }

    .schoolrunsweek-assignment-card {
        padding: 9px 10px !important;
        min-height: 54px !important;
    }

    .schoolrunsweek-assignment-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 7px !important;
        padding: 0 !important;
    }

    .schoolrunsweek-assignment-adult,
    .schoolrunsweek-assignment-children {
        grid-column: 1 !important;
        min-width: 0 !important;
        width: 100% !important;
    }

    .schoolrunsweek-assignment-meta,
    .schoolrunsweek-chip-row {
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: visible !important;
    }

    .schoolrunsweek-assignment-actions {
        justify-content: flex-start !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        min-width: 0 !important;
        width: 100% !important;
    }

    .schoolrunsweek-assignment-card .mud-chip {
        max-width: 100% !important;
    }

    /* Shopping: reduce filter/card mass while keeping manifest readability. */
    .shopping-filter-card {
        padding: 15px 18px !important;
    }

    .shopping-section-card {
        padding: 18px 22px !important;
    }

    .shopping-store-group {
        padding: 15px 17px !important;
    }

    .shopping-item-row,
    .shopping-item-row.bought {
        grid-template-columns: minmax(0, 1fr) auto auto !important;
        gap: 12px !important;
    }

    .shopping-item-meta {
        min-width: 260px !important;
        justify-content: flex-end !important;
    }

    /* Settings and Preferences: less nested border noise, more command-center calm. */
    .settings-page,
    .preferences-page {
        max-width: min(100%, 1320px) !important;
    }

    .settings-card,
    .setup-card,
    .kid-card,
    .user-card,
    .vehicle-card,
    .location-card,
    .store-card,
    .house-card {
        min-height: 118px !important;
        padding: 15px 17px !important;
        background: linear-gradient(145deg, rgba(18, 22, 32, 0.72), rgba(8, 11, 18, 0.82)) !important;
    }

    .settings-grid,
    .setup-grid,
    .app-card-grid,
    .kids-grid,
    .users-grid,
    .vehicles-grid,
    .locations-grid,
    .stores-grid,
    .houses-grid {
        grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)) !important;
        gap: 12px !important;
    }

    .settings-card-top,
    .store-card .settings-card-top {
        display: block !important;
        min-width: 0 !important;
    }

    .store-card .settings-card-top > .mud-stack-row {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        min-width: 0 !important;
    }

    .store-card .settings-card-title {
        flex: 1 1 240px !important;
        min-width: min(240px, 100%) !important;
        max-width: 100% !important;
        line-height: 1.16 !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
        text-wrap: pretty !important;
    }

    .store-card .soft-muted,
    .store-card .mud-typography-body2 {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 8px !important;
        overflow-wrap: anywhere !important;
        line-height: 1.34 !important;
    }

    .store-card .mud-typography-caption {
        display: inline-flex !important;
        width: auto !important;
        max-width: 100% !important;
        white-space: nowrap !important;
        margin-top: 10px !important;
    }

    .store-card .mud-chip {
        flex: 0 0 auto !important;
    }

    .preferences-page .config-dialog-section,
    .preferences-page .profile-dialog-section,
    .preferences-page .settings-card,
    .preferences-page .setup-card {
        background: rgba(255, 255, 255, 0.018) !important;
        border-color: rgba(198, 210, 255, 0.08) !important;
    }

    .preferences-page .config-dialog-section {
        padding: 12px 14px !important;
        margin-bottom: 10px !important;
    }

    .preferences-page .config-dialog-section .config-dialog-section {
        border-color: rgba(198, 210, 255, 0.055) !important;
        background: rgba(255, 255, 255, 0.012) !important;
    }

    .preferences-page .app-card,
    .preferences-page .settings-card,
    .preferences-page .setup-card {
        box-shadow: none !important;
    }

    .preferences-page .mud-grid,
    .preferences-page .mud-grid-item {
        min-width: 0 !important;
    }

    .preferences-page .mud-switch,
    .preferences-page .mud-switch-label,
    .settings-page .mud-switch,
    .settings-page .mud-switch-label {
        min-height: 30px !important;
    }

    .preferences-page .mud-button-root,
    .settings-page .mud-button-root {
        min-height: 36px !important;
    }

    .ios-contacts-page .network-contact-card,
    .ios-contacts-page .network-contact-card.ios-contact-row {
        grid-template-columns: 52px minmax(0, 1fr) max-content !important;
        column-gap: 14px !important;
        align-items: center !important;
    }

    .ios-contacts-page .network-contact-card .ios-contact-avatar {
        width: 46px !important;
        min-width: 46px !important;
        max-width: 46px !important;
        height: 46px !important;
        min-height: 46px !important;
        max-height: 46px !important;
        justify-self: center !important;
        align-self: center !important;
        flex: 0 0 46px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    .ios-contacts-page .network-contact-card .ios-contact-main {
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    .ios-contacts-page .network-contact-card .ios-contact-actions {
        min-width: max-content !important;
        max-width: max-content !important;
        justify-self: end !important;
    }
}

@media (min-width: 1760px) {
    .schoolrunsweek-grid {
        grid-template-columns: repeat(5, minmax(260px, 1fr)) !important;
    }
}

/* Migrated legacy desktop hardening/final polish layers. Sources retired: omnisant.desktop.bugfix.css, ui-final-polish.css. */


/* Source: omnisant.desktop.bugfix.css */

/*
  Omnisant desktop bug-kill layer.
  Loaded last. This is not a redesign pass: it removes route-level motion,
  repairs malformed desktop control rails, modal footer clearance, and the
  highest-visibility card/button defects from screenshot QA.
*/

@media (min-width: 769px) {
    :root {
        --desktop-control-h: 44px;
        --desktop-control-radius: 12px;
        --desktop-control-bg: rgba(7, 9, 15, 0.72);
        --desktop-control-edge: rgba(188, 198, 235, 0.16);
        --desktop-control-edge-strong: rgba(194, 205, 245, 0.28);
        --desktop-panel-edge: rgba(186, 197, 232, 0.12);
        --desktop-panel-bg: rgba(15, 18, 27, 0.68);
        --desktop-action-h: 38px;
    }

    /* Route/page stability: component hover and modal motion can live elsewhere;
       the shell and page mount zone must not fade, slide, blur, or scale. */
    .mud-layout,
    .mud-main-content,
    .app-main-content,
    .app-content-canvas,
    .page-shell,
    .content-narrow,
    .content-standard,
    .content-wide,
    .content-full,
    .dayplan-page,
    .ios-calendar-page,
    .shopping-page,
    .maintenance-page,
    .contacts-page,
    .notes-page,
    .schoolrunsweek-page,
    .settings-page,
    .setup-page {
        animation: none !important;
        transition-property: none !important;
        transform: none !important;
        filter: none !important;
    }

    .app-topbar,
    .app-drawer,
    .app-drawer .mud-drawer,
    .app-drawer .mud-drawer-content {
        animation: none !important;
        transition-property: background-color, border-color, box-shadow, color !important;
    }

    .app-content-canvas {
        width: min(100%, 1680px) !important;
        max-width: 1680px !important;
        margin-inline: auto !important;
        padding-inline: clamp(32px, 3vw, 52px) !important;
    }

    .content-standard,
    .dayplan-page,
    .shopping-page,
    .maintenance-page,
    .contacts-page,
    .notes-page,
    .settings-page,
    .setup-page {
        max-width: 1480px !important;
        margin-inline: auto !important;
    }

    .ios-calendar-page,
    .schoolrunsweek-page {
        max-width: 1640px !important;
        margin-inline: auto !important;
    }

    .mud-button-root {
        min-height: var(--desktop-action-h) !important;
        border-radius: 12px !important;
        padding-inline: 16px !important;
        letter-spacing: 0 !important;
    }

    .mud-icon-button-root,
    .mud-button-root.mud-icon-button {
        width: 38px !important;
        min-width: 38px !important;
        height: 38px !important;
        min-height: 38px !important;
        padding: 0 !important;
        border-radius: 11px !important;
    }

    .mud-button-filled-primary,
    .omni-primary-command,
    .ios-calendar-generate-button {
        background: linear-gradient(180deg, rgba(150, 160, 218, 0.92), rgba(108, 119, 180, 0.9)) !important;
        color: rgba(6, 8, 14, 0.96) !important;
        box-shadow: 0 10px 24px rgba(40, 48, 90, 0.26), inset 0 1px 0 rgba(255,255,255,0.20) !important;
    }

    .mud-button-text,
    .mud-button-outlined,
    .omni-secondary-command {
        background: rgba(11, 13, 20, 0.58) !important;
        border-color: rgba(186, 197, 232, 0.13) !important;
        color: rgba(232, 235, 246, 0.82) !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.035) !important;
    }

    .mud-button-filled-error,
    .mud-button-outlined-error,
    .mud-icon-button-color-error {
        background: rgba(104, 52, 61, 0.22) !important;
        border-color: rgba(220, 112, 124, 0.18) !important;
        color: rgba(230, 150, 158, 0.82) !important;
        box-shadow: none !important;
    }

    /* Canonical desktop rail field anatomy: one shell, fixed trailing utility well. */
    .dayplan-toolbar-row,
    .ios-calendar-control-panel,
    .schoolrunsweek-toolbar {
        border-radius: 16px !important;
        padding: 14px !important;
        background: rgba(13, 16, 24, 0.58) !important;
        border: 1px solid rgba(188, 198, 235, 0.10) !important;
        box-shadow: 0 18px 46px rgba(0, 0, 0, 0.18) !important;
    }

    .dayplan-toolbar-row {
        display: grid !important;
        grid-template-columns: 220px 98px minmax(240px, 300px) !important;
        align-items: center !important;
        justify-content: start !important;
        gap: 12px !important;
        max-width: 780px !important;
    }

    .dayplan-date-wrap,
    .dayplan-today-wrap,
    .dayplan-user-wrap {
        min-width: 0 !important;
        width: 100% !important;
    }

    .dayplan-date-control,
    .schoolrunsweek-date-control {
        display: inline-flex !important;
        align-items: center !important;
        width: 100% !important;
        height: var(--desktop-control-h) !important;
        min-height: var(--desktop-control-h) !important;
        border-radius: var(--desktop-control-radius) !important;
        overflow: hidden !important;
        background: var(--desktop-control-bg) !important;
        border: 1px solid var(--desktop-control-edge) !important;
    }

    .dayplan-date-native,
    .schoolrunsweek-date-native {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        height: var(--desktop-control-h) !important;
        padding: 0 56px 0 16px !important;
        border: 0 !important;
        background: transparent !important;
        color: rgba(246, 247, 253, 0.94) !important;
        font-weight: 720 !important;
        line-height: var(--desktop-control-h) !important;
    }

    .dayplan-date-icon,
    .schoolrunsweek-date-icon {
        position: absolute !important;
        right: 15px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 22px !important;
        height: 22px !important;
        color: rgba(205, 211, 232, 0.84) !important;
        pointer-events: none !important;
    }

    .dayplan-today-button,
    .dayplan-today-button.mud-button-root {
        width: 100% !important;
        height: var(--desktop-control-h) !important;
        min-height: var(--desktop-control-h) !important;
        border-radius: var(--desktop-control-radius) !important;
    }

    .dayplan-user-picker .mud-input,
    .ios-calendar-user-picker .mud-input,
    .schoolrunsweek-toolbar .mud-input {
        height: var(--desktop-control-h) !important;
        min-height: var(--desktop-control-h) !important;
        border-radius: var(--desktop-control-radius) !important;
        background: rgba(7, 9, 15, 0.62) !important;
        border: 1px solid rgba(188, 198, 235, 0.13) !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.035) !important;
    }

    .dayplan-user-picker .mud-input-slot,
    .ios-calendar-user-picker .mud-input-slot,
    .schoolrunsweek-toolbar .mud-input-slot {
        height: var(--desktop-control-h) !important;
        min-height: var(--desktop-control-h) !important;
        line-height: var(--desktop-control-h) !important;
        padding: 0 46px 0 14px !important;
        font-weight: 680 !important;
    }

    .ios-calendar-control-panel {
        display: grid !important;
        grid-template-columns: minmax(370px, max-content) minmax(260px, 340px) minmax(160px, 220px) !important;
        grid-template-areas:
            "date viewing generate"
            "mode mode generate" !important;
        align-items: center !important;
        gap: 12px 16px !important;
        width: max-content !important;
        max-width: 100% !important;
        margin-left: auto !important;
    }

    .ios-calendar-date-nav-row {
        grid-area: date !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 10px !important;
        min-width: 0 !important;
        width: auto !important;
    }

    .ios-calendar-viewing-row {
        grid-area: viewing !important;
        width: 100% !important;
        min-width: 0 !important;
        display: flex !important;
        align-items: center !important;
    }

    .ios-calendar-mode-row {
        grid-area: mode !important;
        width: min(340px, 100%) !important;
    }

    .ios-calendar-generate-button {
        grid-area: generate !important;
        justify-self: end !important;
        width: 190px !important;
        height: var(--desktop-control-h) !important;
        min-height: var(--desktop-control-h) !important;
    }

    .ios-calendar-date-nav-row > .ios-calendar-nav-button,
    .ios-calendar-date-nav-row > .ios-calendar-nav-button.mud-icon-button {
        flex: 0 0 var(--desktop-control-h) !important;
        width: var(--desktop-control-h) !important;
        height: var(--desktop-control-h) !important;
        min-width: var(--desktop-control-h) !important;
        border-radius: var(--desktop-control-radius) !important;
    }

    .ios-calendar-date-picker-shell,
    .ios-calendar-date-control,
    .ios-calendar-picker {
        flex: 0 0 300px !important;
        width: 300px !important;
        min-width: 300px !important;
        max-width: 300px !important;
        overflow: visible !important;
    }

    .ios-calendar-date-control .mud-input,
    .ios-calendar-picker .mud-input {
        height: var(--desktop-control-h) !important;
        min-height: var(--desktop-control-h) !important;
        border-radius: var(--desktop-control-radius) !important;
        background: var(--desktop-control-bg) !important;
        border: 1px solid var(--desktop-control-edge) !important;
        overflow: hidden !important;
    }

    .ios-calendar-date-control .mud-input-slot,
    .ios-calendar-picker .mud-input-slot {
        height: var(--desktop-control-h) !important;
        min-height: var(--desktop-control-h) !important;
        line-height: var(--desktop-control-h) !important;
        padding: 0 54px 0 15px !important;
        font-weight: 720 !important;
    }

    .ios-calendar-date-control .mud-input-adornment-end,
    .ios-calendar-picker .mud-input-adornment-end {
        width: 48px !important;
        min-width: 48px !important;
        height: var(--desktop-control-h) !important;
        border-left: 1px solid rgba(188, 198, 235, 0.12) !important;
        background: rgba(255, 255, 255, 0.024) !important;
    }

    .ios-calendar-viewing-row .ios-calendar-user-picker,
    .ios-calendar-viewing-row .mud-input-control,
    .ios-calendar-viewing-row .mud-select {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    /* Modal footer must not cover fields in desktop captures. */
    .mud-dialog {
        max-height: min(90vh, 900px) !important;
    }

    .mud-dialog .mud-dialog-content {
        max-height: calc(min(90vh, 900px) - 148px) !important;
        padding: 20px 30px 138px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    .mud-dialog .mud-dialog-actions {
        min-height: 76px !important;
        padding: 14px 30px 18px !important;
        gap: 10px !important;
        background: rgba(7, 9, 14, 0.98) !important;
        border-top: 1px solid rgba(188, 198, 235, 0.12) !important;
    }

    .mud-dialog .mud-dialog-actions .mud-button-root {
        height: 40px !important;
        min-height: 40px !important;
        min-width: 92px !important;
        border-radius: 13px !important;
    }

    .config-dialog-section {
        border-radius: 18px !important;
        padding: 20px !important;
        margin-bottom: 18px !important;
    }

    .config-dialog-grid,
    .config-dialog-grid-two,
    .maintenance-form-grid {
        gap: 16px !important;
    }

    /* Today timeline: reduce slab effect and make rail intentional. */
    .dayplan-section-title,
    .dayplan-page h2,
    .dayplan-page .section-title {
        font-size: 1.22rem !important;
        line-height: 1.15 !important;
    }

    .dayplan-list:has(.dayplan-card-timeline)::before {
        left: 87px !important;
        width: 1px !important;
        background: linear-gradient(180deg, rgba(166, 177, 218, 0.0), rgba(166, 177, 218, 0.20), rgba(166, 177, 218, 0.0)) !important;
    }

    .dayplan-card-timeline {
        grid-template-columns: 74px 28px minmax(0, 1fr) !important;
        min-height: auto !important;
        margin-bottom: 14px !important;
    }

    .dayplan-card-timeline .dayplan-card-shell {
        min-height: 72px !important;
        padding: 20px 28px !important;
        border-radius: 15px !important;
        background: rgba(14, 17, 25, 0.68) !important;
    }

    .dayplan-card-timeline .dayplan-rail-time {
        padding-top: 20px !important;
    }

    .dayplan-card-timeline .dayplan-rail-dot {
        top: 23px !important;
    }

    .dayplan-empty-state,
    .empty-state,
    .shopping-empty-state,
    .maintenance-empty-state {
        min-height: auto !important;
        padding: 26px 28px !important;
        border-radius: 16px !important;
        background: rgba(15, 18, 27, 0.54) !important;
        border-color: rgba(188, 198, 235, 0.10) !important;
    }

    .dayplan-done-accordion,
    .dayplan-done-section {
        border-radius: 16px !important;
    }

    /* Transport: remove raw rectangle feel and make assignment/editor surfaces composed. */
    .schoolrunsweek-toolbar {
        display: inline-grid !important;
        grid-template-columns: 44px 118px 44px 320px !important;
        align-items: center !important;
        gap: 10px !important;
        width: auto !important;
        max-width: 720px !important;
    }

    .schoolrunsweek-day-card {
        border-radius: 18px !important;
        background: linear-gradient(180deg, rgba(18, 21, 30, 0.78), rgba(11, 13, 20, 0.88)) !important;
        border: 1px solid rgba(188, 198, 235, 0.12) !important;
        overflow: hidden !important;
    }

    .schoolrunsweek-slot {
        border-top: 1px solid rgba(188, 198, 235, 0.10) !important;
        padding: 18px 16px !important;
    }

    .schoolrunsweek-assignment-card {
        border-radius: 16px !important;
        border: 1px solid rgba(188, 198, 235, 0.10) !important;
        background: rgba(11, 14, 22, 0.54) !important;
        box-shadow: none !important;
    }

    .schoolrunsweek-assignment-grid {
        align-items: start !important;
        gap: 12px !important;
        padding: 14px !important;
    }

    .schoolrunsweek-chip {
        height: 24px !important;
        border-radius: 999px !important;
        padding-inline: 10px !important;
        font-size: 0.74rem !important;
        color: rgba(208, 215, 238, 0.78) !important;
        background: rgba(124, 137, 183, 0.12) !important;
        border-color: rgba(178, 190, 232, 0.12) !important;
    }

    .schoolrunsweek-empty {
        max-width: 280px !important;
        min-height: 172px !important;
        border-radius: 16px !important;
        background: rgba(14, 17, 25, 0.58) !important;
        border: 1px solid rgba(188, 198, 235, 0.09) !important;
        box-shadow: none !important;
    }

    .schoolrunsweek-assignment-editor {
        margin: 12px !important;
        padding: 16px !important;
        gap: 14px !important;
        border-radius: 16px !important;
        background: rgba(7, 9, 15, 0.42) !important;
        border: 1px solid rgba(188, 198, 235, 0.14) !important;
    }

    .schoolrunsweek-editor-header {
        padding-bottom: 10px !important;
        border-bottom: 1px solid rgba(188, 198, 235, 0.10) !important;
    }

    .schoolrunsweek-editor-control {
        gap: 7px !important;
    }

    .schoolrunsweek-editor-select {
        height: var(--desktop-control-h) !important;
        border-radius: var(--desktop-control-radius) !important;
        border: 1px solid var(--desktop-control-edge) !important;
        background: var(--desktop-control-bg) !important;
    }

    .schoolrunsweek-editor-child-option {
        min-height: 30px !important;
        border-radius: 999px !important;
        background: rgba(124, 137, 183, 0.10) !important;
        border-color: rgba(178, 190, 232, 0.12) !important;
    }

    .schoolrunsweek-editor-child-option.is-selected {
        background: rgba(150, 160, 218, 0.16) !important;
        border-color: rgba(178, 190, 232, 0.22) !important;
        color: rgba(232, 235, 250, 0.88) !important;
    }

    .schoolrunsweek-assignment-edit-actions {
        padding-top: 12px !important;
        border-top: 1px solid rgba(188, 198, 235, 0.10) !important;
    }

    .schoolrunsweek-assignment-save.mud-button-root {
        height: 34px !important;
        min-height: 34px !important;
        min-width: 82px !important;
    }

    .schoolrunsweek-assignment-cancel.mud-button-root {
        height: 34px !important;
        min-height: 34px !important;
        min-width: 72px !important;
    }

    /* Shopping/Service broad defect cleanup visible in desktop captures. */
    .shopping-filter-card,
    .maintenance-quick-filter-bar,
    .maintenance-section,
    .shopping-section {
        border-radius: 18px !important;
        background: rgba(15, 18, 27, 0.62) !important;
        border: 1px solid rgba(188, 198, 235, 0.11) !important;
    }

    .shopping-item-row {
        border-radius: 15px !important;
        align-items: center !important;
    }

    .shopping-item-bought-button.mud-button-root {
        height: 34px !important;
        min-height: 34px !important;
        border-radius: 11px !important;
    }

    .maintenance-quick-filter-chips {
        align-items: center !important;
        gap: 8px !important;
    }

    /* Setup/card grids: same card type, same rhythm. */
    .settings-grid,
    .setup-grid,
    .kids-grid,
    .users-grid,
    .vehicles-grid,
    .locations-grid,
    .stores-grid,
    .houses-grid {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
        gap: 18px !important;
        align-items: stretch !important;
    }

    .settings-card,
    .setup-card,
    .kid-card,
    .user-card,
    .vehicle-card,
    .location-card,
    .store-card,
    .house-card {
        min-height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        border-radius: 18px !important;
    }

    .settings-card-actions,
    .setup-card-actions,
    .kid-card-actions,
    .user-card-actions,
    .vehicle-card-actions,
    .location-card-actions,
    .store-card-actions,
    .house-card-actions {
        margin-top: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 8px !important;
    }
}

@media (min-width: 769px) {
    /* Final desktop control rail contracts. These intentionally outrank older
       schedule/mobile repair files that still carry stronger page selectors. */
    .ios-calendar-page .ios-calendar-toolbar.schedule-control-surface {
        display: grid !important;
        grid-template-columns: max-content minmax(300px, 1fr) !important;
        grid-template-areas:
            "date viewing"
            "mode mode" !important;
        align-items: center !important;
        justify-content: end !important;
        gap: 12px 16px !important;
        width: 100% !important;
        max-width: 1120px !important;
        margin-left: 0 !important;
        padding: 14px !important;
        overflow: visible !important;
    }

    .ios-calendar-page .ios-calendar-date-nav-row {
        grid-area: date !important;
        display: inline-flex !important;
        grid-template-columns: none !important;
        align-items: center !important;
        gap: 10px !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        transform: none !important;
    }

    .ios-calendar-page .ios-calendar-date-nav-row > .ios-calendar-nav-button,
    .ios-calendar-page .ios-calendar-date-nav-row > .ios-calendar-nav-button.mud-icon-button {
        position: static !important;
        flex: 0 0 var(--desktop-control-h) !important;
        width: var(--desktop-control-h) !important;
        min-width: var(--desktop-control-h) !important;
        height: var(--desktop-control-h) !important;
        min-height: var(--desktop-control-h) !important;
        margin: 0 !important;
        transform: none !important;
    }

    .ios-calendar-page .ios-calendar-date-picker-shell {
        position: relative !important;
        flex: 0 0 300px !important;
        width: 300px !important;
        min-width: 300px !important;
        max-width: 300px !important;
        height: var(--desktop-control-h) !important;
        overflow: hidden !important;
        margin: 0 !important;
        transform: none !important;
    }

    .ios-calendar-page .ios-calendar-date-picker-shell .ios-calendar-date-display {
        position: absolute !important;
        inset: 0 54px 0 16px !important;
        display: flex !important;
        align-items: center !important;
        pointer-events: none !important;
        z-index: 2 !important;
        overflow: hidden !important;
        white-space: nowrap !important;
        text-overflow: ellipsis !important;
    }

    .ios-calendar-page .ios-calendar-date-picker-shell .ios-calendar-picker,
    .ios-calendar-page .ios-calendar-date-picker-shell .ios-calendar-date-control,
    .ios-calendar-page .ios-calendar-date-picker-shell .mud-input-control {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        min-width: 0 !important;
        height: var(--desktop-control-h) !important;
        margin: 0 !important;
        transform: none !important;
    }

    html body .ios-calendar-page .ios-calendar-date-picker-shell > .mud-picker.ios-calendar-picker {
        position: absolute !important;
        inset: 0 !important;
        left: 0 !important;
        right: auto !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        height: var(--desktop-control-h) !important;
        min-height: var(--desktop-control-h) !important;
        margin: 0 !important;
        transform: none !important;
    }

    .ios-calendar-page .ios-calendar-date-picker-shell .mud-input-slot,
    .ios-calendar-page .ios-calendar-date-picker-shell input {
        color: transparent !important;
        caret-color: transparent !important;
        padding-right: 56px !important;
    }

    .ios-calendar-page .ios-calendar-date-picker-shell .mud-input-adornment,
    .ios-calendar-page .ios-calendar-date-picker-shell .mud-picker-input-button {
        position: absolute !important;
        right: 0 !important;
        top: 0 !important;
        width: 52px !important;
        height: var(--desktop-control-h) !important;
        min-height: var(--desktop-control-h) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        border-left: 1px solid rgba(188, 198, 235, 0.12) !important;
        transform: none !important;
    }

    html body .ios-calendar-page .ios-calendar-date-picker-shell .mud-input-adornment.mud-input-adornment-end {
        left: auto !important;
        right: 0 !important;
        margin: 0 !important;
        transform: none !important;
    }

    .ios-calendar-page .ios-calendar-today-button,
    .ios-calendar-page .ios-calendar-today-button.mud-button-root {
        position: static !important;
        flex: 0 0 auto !important;
        height: var(--desktop-control-h) !important;
        min-height: var(--desktop-control-h) !important;
        min-width: 88px !important;
        margin: 0 !important;
        transform: none !important;
    }

    .ios-calendar-page .ios-calendar-viewing-row {
        grid-area: viewing !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        transform: none !important;
    }

    .ios-calendar-page .ios-calendar-viewing-row .ios-calendar-user-picker,
    .ios-calendar-page .ios-calendar-viewing-row .mud-input-control,
    .ios-calendar-page .ios-calendar-viewing-row .mud-select {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

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

    .ios-calendar-page .ios-calendar-view-switch {
        grid-column: 1 !important;
        width: 100% !important;
        max-width: 390px !important;
        margin: 0 !important;
    }

    html body .ios-calendar-page .ios-calendar-mode-row > .ios-calendar-view-switch {
        grid-column: 1 !important;
        grid-area: auto !important;
        justify-self: start !important;
    }

    .ios-calendar-page .ios-calendar-generate-button {
        grid-column: 2 !important;
        justify-self: end !important;
        min-width: 190px !important;
        position: static !important;
    }

    html body .ios-calendar-page .ios-calendar-mode-row > .ios-calendar-generate-button {
        grid-column: 2 !important;
        grid-area: auto !important;
        justify-self: end !important;
        position: static !important;
    }

    /* Transport toolbar has nested groups, not four direct controls. */
    .schoolrunsweek-page .schoolrunsweek-toolbar {
        display: inline-flex !important;
        align-items: center !important;
        gap: 12px !important;
        width: auto !important;
        max-width: 720px !important;
        padding: 14px !important;
        overflow: visible !important;
    }

    .schoolrunsweek-page .schoolrunsweek-nav-wrap {
        display: inline-flex !important;
        align-items: center !important;
        gap: 10px !important;
        min-width: 0 !important;
        flex: 0 0 auto !important;
    }

    .schoolrunsweek-page .schoolrunsweek-date-wrap {
        flex: 0 0 280px !important;
        width: 280px !important;
        min-width: 280px !important;
        max-width: 280px !important;
    }

    .schoolrunsweek-page .schoolrunsweek-date-wrap .mud-input-control,
    .schoolrunsweek-page .schoolrunsweek-date-wrap .schoolrunsweek-date-picker {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .schoolrunsweek-page .schoolrunsweek-toolbar .mud-button-root,
    .schoolrunsweek-page .schoolrunsweek-toolbar .mud-icon-button {
        height: var(--desktop-control-h) !important;
        min-height: var(--desktop-control-h) !important;
        margin: 0 !important;
        transform: none !important;
    }

    .schoolrunsweek-page .schoolrunsweek-date-wrap .mud-input-slot,
    .schoolrunsweek-page .schoolrunsweek-date-wrap input {
        min-width: 0 !important;
        padding-left: 14px !important;
        padding-right: 52px !important;
        overflow: hidden !important;
        white-space: nowrap !important;
        text-overflow: ellipsis !important;
    }

    /* Dialogs should be bounded control panels: title + scroll body + visible footer. */
    body .mud-dialog:not(.mud-dialog-fullscreen) {
        display: flex !important;
        flex-direction: column !important;
        max-height: min(90dvh, 900px) !important;
        overflow: hidden !important;
    }

    body .mud-dialog:not(.mud-dialog-fullscreen) .mud-dialog-title,
    body .mud-dialog:not(.mud-dialog-fullscreen) .mud-dialog-actions {
        flex: 0 0 auto !important;
    }

    body .mud-dialog:not(.mud-dialog-fullscreen) .mud-dialog-content {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding-bottom: 112px !important;
    }

    body .mud-dialog:not(.mud-dialog-fullscreen) .mud-dialog-actions {
        position: sticky !important;
        bottom: 0 !important;
        z-index: 2 !important;
        margin-top: 0 !important;
    }
}

@media (min-width: 769px) and (max-width: 1180px) {
    .ios-calendar-control-panel {
        width: 100% !important;
        grid-template-columns: minmax(0, 1fr) minmax(220px, 300px) !important;
        grid-template-areas:
            "date viewing"
            "mode generate" !important;
        margin-left: 0 !important;
    }

    .ios-calendar-date-picker-shell,
    .ios-calendar-date-control,
    .ios-calendar-picker {
        flex-basis: 260px !important;
        width: 260px !important;
        min-width: 260px !important;
        max-width: 260px !important;
    }

    .schoolrunsweek-toolbar {
        grid-template-columns: 44px 118px 44px minmax(240px, 1fr) !important;
        width: 100% !important;
    }
}

/* Source: ui-final-polish.css */

/* Late UI polish pass for the operational app. Loaded last by design. */

:root {
    --ui-polish-border: rgba(214, 222, 247, 0.09);
    --ui-polish-border-strong: rgba(159, 174, 232, 0.24);
    --ui-polish-panel: linear-gradient(180deg, rgba(18, 22, 31, 0.78), rgba(9, 12, 18, 0.86));
    --ui-polish-field: rgba(8, 11, 17, 0.78);
}

.mud-dialog .config-dialog-section,
.shopping-section-card,
.maintenance-section-card,
.settings-card,
.settings-mobile-card,
.settings-desktop-row-card,
.schedule-empty-state,
.ios-calendar-empty,
.schoolrunsweek-day-card,
.schoolrunsweek-slot-card {
    border-radius: 18px !important;
    border-color: var(--ui-polish-border) !important;
}

body:has(.mud-dialog) .app-page-shell .mud-menu,
body:has(.mud-dialog) .shopping-ios-page .shopping-item-actions .mud-menu {
    z-index: 0 !important;
}

html body .mud-popover-open:has(.shopping-action-menu-button),
html body .mud-popover:has(.shopping-action-menu-button) {
    width: 156px !important;
    min-width: 156px !important;
    max-width: 156px !important;
    padding: 6px !important;
}

html body .mud-dialog:has(.contact-edit-dialog-shell) .contact-edit-form-grid {
    align-items: start !important;
}

html body .mud-dialog:has(.contact-edit-dialog-shell) .contact-edit-form-grid > .contact-edit-section {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

html body .mud-dialog:has(.contact-edit-dialog-shell) .contact-edit-section-location .mud-input-control:has(textarea.mud-input-slot) {
    padding-top: 24px !important;
}

html body .mud-dialog:has(.contact-edit-dialog-shell) .contact-edit-section-location .mud-input-control:has(textarea.mud-input-slot) > .mud-input-control-input-container {
    min-height: 108px !important;
}

html body .mud-dialog:has(.contact-edit-dialog-shell) .contact-edit-section-location .mud-input-control:has(textarea.mud-input-slot) .mud-input {
    height: auto !important;
    min-height: 108px !important;
    align-items: stretch !important;
    overflow: visible !important;
}

html body .mud-dialog:has(.contact-edit-dialog-shell) .contact-edit-section-location .mud-input-control:has(textarea.mud-input-slot) .mud-input-label,
html body .mud-dialog:has(.contact-edit-dialog-shell) .contact-edit-section-location .mud-input-control:has(textarea.mud-input-slot) .mud-input-label.mud-shrink,
html body .mud-dialog:has(.contact-edit-dialog-shell) .contact-edit-section-location .mud-input-control:has(textarea.mud-input-slot) .mud-input-label.mud-input-label-animate {
    top: -24px !important;
}

html body .mud-dialog:has(.contact-edit-dialog-shell) .contact-edit-section-location textarea.mud-input-slot,
html body .mud-dialog:has(.contact-edit-dialog-shell) .contact-edit-section-location textarea.mud-input-root {
    margin-top: 0 !important;
}

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

.mud-dialog textarea.mud-input-slot,
.mud-dialog textarea.mud-input-root {
    height: auto !important;
    min-height: 108px !important;
    max-height: none !important;
    padding: 13px var(--app-control-pad-x) !important;
    line-height: 1.36 !important;
    white-space: pre-wrap !important;
}

body:has(.mud-dialog) .mud-popover:has(.mud-picker-container),
body:has(.mud-dialog) .mud-popover-open:has(.mud-picker-container),
body:has(.mud-dialog) .mud-popover.mud-picker-popover,
body:has(.mud-dialog) .mud-popover-open.mud-picker-popover {
    z-index: 2600 !important;
    max-width: min(344px, calc(100vw - 48px)) !important;
    max-height: none !important;
    border-radius: 18px !important;
    overflow: visible !important;
    border: 1px solid rgba(214, 222, 247, 0.14) !important;
    background: rgba(13, 16, 25, 0.99) !important;
    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.58),
        inset 0 1px 0 rgba(255, 255, 255, 0.055) !important;
}

body:has(.mud-dialog) .mud-popover:has(.mud-picker-container) .mud-picker-container,
body:has(.mud-dialog) .mud-popover-open:has(.mud-picker-container) .mud-picker-container,
body:has(.mud-dialog) .mud-popover.mud-picker-popover .mud-picker,
body:has(.mud-dialog) .mud-popover-open.mud-picker-popover .mud-picker {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

/* Profile */
.household-profile-page .profile-add-split {
    display: inline-grid !important;
    grid-template-columns: minmax(116px, auto) 46px !important;
    align-items: stretch !important;
}

.household-profile-page .profile-add-split .mud-menu,
.household-profile-page .profile-add-split .profile-add-arrow {
    display: block !important;
    width: 46px !important;
    min-width: 46px !important;
}

.household-profile-page .profile-add-split .profile-add-arrow .mud-menu-button-root,
.household-profile-page .profile-add-split .profile-add-arrow button {
    width: 46px !important;
    min-width: 46px !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 !important;
    border-left: 1px solid rgba(8, 10, 15, 0.28) !important;
    border-radius: 0 !important;
}

.household-profile-page .profile-add-split .profile-add-arrow .mud-icon-root {
    opacity: 1 !important;
    color: rgba(8, 10, 15, 0.92) !important;
}

.household-profile-page .profile-section-heading {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: end !important;
    gap: 14px !important;
}

.household-profile-page .profile-section-heading:not(.profile-section-heading-actions) {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 5px !important;
}

.household-profile-page .profile-section-heading > div {
    display: grid !important;
    gap: 5px !important;
    min-width: 0 !important;
}

.household-profile-page .profile-section-heading span,
.household-profile-page .profile-section-heading small {
    display: block !important;
}

.household-profile-page .profile-section-heading small {
    max-width: 780px !important;
    line-height: 1.35 !important;
    margin-left: 0 !important;
    justify-self: auto !important;
}

.household-profile-page .profile-secondary-command.mud-button-root,
.household-profile-page .profile-primary-command.mud-button-root {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 16px !important;
    border-radius: 13px !important;
    white-space: nowrap !important;
}

.household-profile-page .profile-secondary-command .mud-button-label,
.household-profile-page .profile-primary-command .mud-button-label {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}

.household-profile-page .profile-secondary-command .mud-button-icon-start,
.household-profile-page .profile-primary-command .mud-button-icon-start {
    margin: 0 !important;
}

.household-profile-page .profile-card-grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
}

.household-profile-page .profile-memory-card,
.household-profile-page .profile-inline-empty,
.household-profile-page .profile-document-foundation,
.household-profile-page .profile-vendor-empty {
    min-height: 0 !important;
}

.household-profile-page .profile-memory-card {
    padding: 22px !important;
}

.household-profile-page .profile-document-foundation,
.household-profile-page .profile-inline-empty,
.household-profile-page .profile-vendor-empty {
    padding: 18px 20px !important;
}

/* Today and schedule */
.day-plan-page .dayplan-control-panel,
.day-plan-page .dayplan-toolbar,
.ios-calendar-page .schedule-control-surface {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
}

.day-plan-page .dayplan-user-wrap,
.ios-calendar-page .ios-calendar-viewing-row {
    background: transparent !important;
}

.ios-calendar-page .schedule-hero-panel {
    display: grid !important;
    grid-template-columns: minmax(280px, 0.9fr) minmax(520px, 1.1fr) !important;
    gap: 24px !important;
    align-items: start !important;
}

.ios-calendar-page .schedule-control-surface {
    justify-self: stretch !important;
    margin-top: 0 !important;
}

.ios-calendar-page .schedule-day-surface,
.ios-calendar-page .ios-week-view,
.ios-calendar-page .ios-month-view {
    margin-top: 28px !important;
}

.ios-calendar-page .ios-calendar-empty {
    width: min(760px, 100%) !important;
    margin-inline: auto !important;
    border-radius: 18px !important;
    background: var(--ui-polish-panel) !important;
}

/* Transport */
.schoolrunsweek-page {
    max-width: 1360px !important;
}

.schoolrunsweek-header {
    padding-bottom: 16px !important;
    border-bottom: 1px solid rgba(214, 222, 247, 0.075) !important;
}

.schoolrunsweek-page-context {
    color: rgba(214, 219, 236, 0.72) !important;
    font-weight: 620 !important;
}

.schoolrunsweek-toolbar {
    align-items: end !important;
    margin-top: 2px !important;
    margin-bottom: 18px !important;
    border-color: rgba(214, 222, 247, 0.10) !important;
    background: linear-gradient(180deg, rgba(18, 22, 32, 0.74), rgba(8, 11, 17, 0.84)) !important;
}

.schoolrunsweek-date-picker {
    padding-top: 14px !important;
}

.schoolrunsweek-date-picker .mud-input-label,
.schoolrunsweek-date-picker .mud-input-label.mud-shrink,
.schoolrunsweek-date-picker .mud-input-label.mud-input-label-animate {
    transform: translate(12px, -12px) scale(0.78) !important;
    padding: 0 6px !important;
    border-radius: 999px !important;
    background: rgba(12, 15, 23, 0.98) !important;
}

html body .schoolrunsweek-page .schoolrunsweek-days {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

.schoolrunsweek-day-card,
.schoolrunsweek-slot-card {
    background: linear-gradient(180deg, rgba(18, 22, 32, 0.70), rgba(8, 11, 17, 0.82)) !important;
}

.schoolrunsweek-day-card {
    border-color: rgba(214, 222, 247, 0.09) !important;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.030) !important;
}

.schoolrunsweek-day-header {
    background: linear-gradient(180deg, rgba(24, 28, 40, 0.82), rgba(13, 16, 24, 0.76)) !important;
}

.schoolrunsweek-day-name {
    letter-spacing: 0.16em !important;
}

.schoolrunsweek-day-date,
.schoolrunsweek-slot-title {
    color: rgba(196, 204, 229, 0.66) !important;
}

.schoolrunsweek-slot-card {
    border-radius: 14px !important;
}

.schoolrunsweek-assignment-card {
    border-radius: 12px !important;
}

.schoolrunsweek-empty {
    height: auto !important;
    min-height: 44px !important;
    justify-self: stretch !important;
    align-self: center !important;
    padding: 9px 12px !important;
    margin-block: auto !important;
    border: 1px solid rgba(214, 222, 247, 0.065) !important;
    border-radius: 12px !important;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.026), rgba(255, 255, 255, 0.012)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.022) !important;
    text-align: left !important;
}

.schoolrunsweek-empty .app-empty-state-icon,
.schoolrunsweek-empty .mud-icon-root {
    width: 22px !important;
    height: 22px !important;
    opacity: 0.44 !important;
}

.schoolrunsweek-empty .app-empty-state-title,
.schoolrunsweek-empty .mud-typography-body1 {
    color: rgba(237, 233, 225, 0.84) !important;
    font-size: 0.84rem !important;
    font-weight: 720 !important;
    line-height: 1.15 !important;
}

.schoolrunsweek-empty .app-empty-state-message,
.schoolrunsweek-empty .mud-typography-body2 {
    display: none !important;
}

.schoolrunsweek-slot-add-button.mud-button-root {
    border: 1px solid rgba(151, 166, 223, 0.14) !important;
    background: rgba(126, 142, 201, 0.075) !important;
}

.schoolrunsweek-slot-add-button.mud-button-root:hover {
    background: rgba(126, 142, 201, 0.14) !important;
}

.schoolrunsweek-assignment-card {
    background: rgba(255, 255, 255, 0.022) !important;
}

/* Directory */
.ios-contacts-page.network-page {
    max-width: 1420px !important;
}

.ios-contacts-page .network-contact-grid,
.ios-contacts-page .network-contact-grid-emergency {
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)) !important;
    gap: 12px !important;
}

.ios-contacts-page .network-contact-card,
.ios-contacts-page .network-contact-card.ios-contact-row {
    grid-template-columns: 42px minmax(0, 1fr) auto !important;
    min-height: 104px !important;
    align-items: start !important;
    padding: 14px !important;
    overflow: visible !important;
}

.ios-contacts-page .network-contact-card .ios-contact-main {
    padding-right: 6px !important;
}

.ios-contacts-page .network-contact-card .ios-contact-name {
    white-space: normal !important;
    line-height: 1.18 !important;
}

.ios-contacts-page .network-contact-card .ios-contact-subtitle {
    flex-wrap: wrap !important;
    white-space: normal !important;
    line-height: 1.25 !important;
}

.ios-contacts-page .network-contact-card .ios-contact-meta {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    line-height: 1.25 !important;
}

.ios-contacts-page .network-contact-card .ios-contact-meta + .ios-contact-meta {
    display: block !important;
}

.ios-contacts-page .network-contact-card .ios-contact-actions {
    align-self: start !important;
    gap: 5px !important;
}

/* Notes */
.notes-page .notes-filter-panel,
.notepad-page .notes-filter-panel {
    padding: 14px 16px !important;
}

.notes-page .notes-filter-grid,
.notepad-page .notes-filter-grid {
    grid-template-columns: minmax(180px, 0.8fr) minmax(260px, 1.6fr) minmax(180px, 0.8fr) auto !important;
    align-items: end !important;
    gap: 12px !important;
}

.notes-page .notes-filter-actions,
.notepad-page .notes-filter-actions {
    align-self: end !important;
    padding-bottom: 2px !important;
}

.notes-page .notes-filter-actions .mud-icon-button,
.notepad-page .notes-filter-actions .mud-icon-button {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
}

/* Shopping */
.shopping-section-card {
    padding: 20px 24px !important;
    border-radius: 20px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.034) !important;
}

.shopping-filter-card {
    border-radius: 18px !important;
}

/* Service and settings */
.maintenance-page .app-page-shell-header {
    grid-template-columns: minmax(0, 1fr) auto !important;
}

.maintenance-page .app-page-shell-toolbar,
.maintenance-page .app-page-context-chip-row {
    padding: 10px 14px !important;
    border-radius: 16px !important;
    background: rgba(126, 142, 201, 0.09) !important;
}

.settings-page .mud-popover,
.settings-page .mud-popover .mud-list {
    border-radius: 16px !important;
}

.settings-card,
.settings-mobile-card,
.settings-desktop-row-card {
    border-radius: 18px !important;
    background: var(--ui-polish-panel) !important;
}

@media (max-width: 1180px) {
    .ios-calendar-page .schedule-hero-panel {
        grid-template-columns: 1fr !important;
    }

    html body .schoolrunsweek-page .schoolrunsweek-days {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 767px) {
    .household-profile-page .profile-section-heading {
        grid-template-columns: 1fr !important;
        align-items: start !important;
    }

    .household-profile-page .profile-secondary-command.mud-button-root,
    .household-profile-page .profile-primary-command.mud-button-root {
        width: 100% !important;
    }

    .ios-contacts-page .network-contact-grid,
    .ios-contacts-page .network-contact-grid-emergency,
    .notes-page .notes-filter-grid,
    .notepad-page .notes-filter-grid {
        grid-template-columns: 1fr !important;
    }

    .schoolrunsweek-page {
        margin-top: -8px !important;
    }

    .schoolrunsweek-header {
        padding-bottom: 8px !important;
    }

    .schoolrunsweek-page-context {
        font-size: 0.74rem !important;
        line-height: 1.18 !important;
    }

    .schoolrunsweek-toolbar {
        margin-bottom: 12px !important;
        padding: 6px !important;
        border-radius: 16px !important;
    }

    .schoolrunsweek-nav-wrap {
        gap: 5px !important;
    }

    .schoolrunsweek-today-button.mud-button-root {
        min-width: 0 !important;
    }

    html body .schoolrunsweek-page .schoolrunsweek-days {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .schoolrunsweek-day-card {
        border-radius: 16px !important;
    }

    .schoolrunsweek-day-header {
        padding: 12px 13px 10px !important;
    }

    .schoolrunsweek-slot-content {
        gap: 8px !important;
        padding: 10px !important;
    }

    .schoolrunsweek-slot-header {
        grid-template-columns: minmax(74px, 0.62fr) minmax(0, 1fr) !important;
        gap: 8px !important;
    }

    .schoolrunsweek-slot-add-button.mud-button-root {
        width: 100% !important;
        justify-content: center !important;
    }

    .schoolrunsweek-empty {
        min-height: 36px !important;
        padding: 8px 10px !important;
    }

    .schoolrunsweek-empty .app-empty-state-icon,
    .schoolrunsweek-empty .mud-icon-root {
        display: none !important;
    }

    .mobile-bottom-nav {
        background: rgba(7, 9, 15, 0.98) !important;
        border-color: rgba(214, 222, 247, 0.12) !important;
        box-shadow: 0 -16px 42px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
    }
}

/* Collapsed bridge foundation files into desktop hardening. Sources retired: app.global-pages.css, app.global-household-polish.css. */


/* Source bridge: app.global-pages.css */

/*
 * Omnisant global page composition layer.
 *
 * Mechanical consolidation source: schedule/shopping/notes/transport/service/directory control CSS.
 * Keep new rules out of page-owned files; move shared primitives into the foundation files over time.
 */

/* ===== absorbed from schedule.control.css ===== */
/* Schedule page final control-surface layer. Loaded after app.css on purpose. */
.ios-calendar-page {
    --omni-schedule-control-bg: linear-gradient(180deg, rgba(21, 25, 35, 0.78), rgba(12, 15, 22, 0.82));
    --omni-schedule-cell-bg: linear-gradient(180deg, rgba(21, 25, 36, 0.78), rgba(10, 13, 20, 0.88));
    --omni-schedule-cell-border: rgba(255, 255, 255, 0.052);
}

.ios-calendar-page .ios-calendar-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

.ios-calendar-page .ios-calendar-header-top {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
}

.ios-calendar-page .ios-calendar-month-label {
    font-size: clamp(2rem, 2.35vw, 2.25rem) !important;
    line-height: 1.04 !important;
    font-weight: 680 !important;
    letter-spacing: -0.01em !important;
    color: var(--omni-text) !important;
}

.ios-calendar-page .ios-calendar-date-label {
    margin-top: 6px !important;
    font-size: 1rem !important;
    line-height: 1.25 !important;
    color: rgba(196, 201, 214, 0.78) !important;
    text-transform: none !important;
    letter-spacing: 0.01em !important;
}

.ios-calendar-page .app-page-context-chip-row {
    width: fit-content !important;
    min-height: 30px !important;
    margin-top: 12px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    border-color: rgba(126, 142, 201, 0.22) !important;
    background: rgba(126, 142, 201, 0.105) !important;
    box-shadow: none !important;
}

.ios-calendar-page .app-page-context-chip-label,
.ios-calendar-page .app-page-context-chip-value {
    line-height: 30px !important;
}

.ios-calendar-page .ios-calendar-toolbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: start !important;
    width: 100% !important;
    max-width: 1120px !important;
    margin: 2px 0 0 !important;
    padding: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.046) !important;
    border-radius: 22px !important;
    background:
        radial-gradient(circle at 16% 0%, rgba(126, 142, 201, 0.055), transparent 18rem),
        rgba(8, 11, 17, 0.48) !important;
    box-shadow: 0 20px 56px rgba(0, 0, 0, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.034) !important;
    backdrop-filter: blur(6px) !important;
}

.ios-calendar-page .ios-calendar-date-nav-row {
    display: grid !important;
    grid-template-columns: 42px minmax(174px, 220px) 42px auto !important;
    gap: 8px !important;
    align-items: center !important;
    width: fit-content !important;
    max-width: 100% !important;
}

.ios-calendar-page .ios-calendar-nav-button.mud-icon-button,
.ios-calendar-page .ios-calendar-today-button.mud-button-root {
    height: 42px !important;
    min-height: 42px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(255, 255, 255, 0.044) !important;
    background: rgba(255, 255, 255, 0.028) !important;
    color: rgba(237, 233, 225, 0.84) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
}

.ios-calendar-page .ios-calendar-nav-button.mud-icon-button {
    width: 42px !important;
    min-width: 42px !important;
}

.ios-calendar-page .ios-calendar-today-button.mud-button-root {
    min-width: 92px !important;
    padding: 0 18px !important;
    font-size: 0.9rem !important;
    font-weight: 680 !important;
    text-transform: none !important;
}

.ios-calendar-page .ios-calendar-picker,
.ios-calendar-page .ios-calendar-user-picker {
    width: 100% !important;
}

.ios-calendar-page .ios-calendar-picker .mud-input,
.ios-calendar-page .ios-calendar-user-picker .mud-input {
    height: 42px !important;
    min-height: 42px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(255, 255, 255, 0.052) !important;
    background: var(--omni-schedule-control-bg) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
}

.ios-calendar-page .ios-calendar-picker .mud-input-slot,
.ios-calendar-page .ios-calendar-user-picker .mud-input-slot {
    height: 42px !important;
    min-height: 42px !important;
    padding: 12px 40px 4px 14px !important;
    font-size: 0.92rem !important;
    font-weight: 680 !important;
    color: rgba(237, 233, 225, 0.92) !important;
}

.ios-calendar-page .ios-calendar-picker .mud-input-label,
.ios-calendar-page .ios-calendar-picker .mud-input-label.mud-shrink,
.ios-calendar-page .ios-calendar-user-picker .mud-input-label,
.ios-calendar-page .ios-calendar-user-picker .mud-input-label.mud-shrink,
.ios-calendar-page .ios-calendar-user-picker .mud-input-label.mud-input-label-animate {
    transform: translate(14px, 5px) scale(1) !important;
    max-width: calc(100% - 46px) !important;
    color: rgba(196, 201, 214, 0.58) !important;
    font-size: 0.56rem !important;
    font-weight: 760 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
}

.ios-calendar-page .ios-calendar-viewing-row {
    width: min(100%, 420px) !important;
    margin: 0 !important;
}

.ios-calendar-page .ios-calendar-mode-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 760px !important;
}

.ios-calendar-page .ios-calendar-view-switch {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(74px, 1fr)) !important;
    width: min(100%, 324px) !important;
    min-height: 44px !important;
    padding: 4px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    background: rgba(7, 10, 16, 0.62) !important;
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.025) !important;
}

.ios-calendar-page .ios-calendar-view-button.mud-button-root {
    min-width: 0 !important;
    min-height: 36px !important;
    height: 36px !important;
    border-radius: 14px !important;
    font-size: 0.84rem !important;
    font-weight: 760 !important;
    color: rgba(196, 201, 214, 0.66) !important;
    text-transform: none !important;
    border: 1px solid transparent !important;
}

.ios-calendar-page .ios-calendar-view-button.mud-button-filled,
.ios-calendar-page .ios-calendar-generate-button.mud-button-root {
    color: rgba(8, 10, 15, 0.96) !important;
    background: linear-gradient(135deg, rgba(145, 160, 216, 0.96), rgba(116, 129, 186, 0.92)) !important;
    border-color: rgba(205, 214, 255, 0.16) !important;
    box-shadow: 0 8px 22px rgba(92, 108, 166, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}

.ios-calendar-page .ios-calendar-generate-button.mud-button-root {
    height: 44px !important;
    min-height: 44px !important;
    border-radius: 17px !important;
    padding: 0 22px !important;
    font-size: 0.88rem !important;
    font-weight: 760 !important;
}

.ios-calendar-page .ios-calendar-empty {
    display: grid !important;
    place-items: center !important;
    gap: 4px !important;
    min-height: 126px !important;
    padding: 22px !important;
    border: 1px solid rgba(255, 255, 255, 0.036) !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, 0.014) !important;
    color: rgba(196, 201, 214, 0.62) !important;
    text-align: center !important;
}

.ios-calendar-page .ios-calendar-empty-title {
    font-size: 0.92rem !important;
    font-weight: 720 !important;
    color: rgba(237, 233, 225, 0.74) !important;
}

.ios-calendar-page .ios-calendar-empty-help {
    font-size: 0.82rem !important;
    color: rgba(196, 201, 214, 0.55) !important;
}

.ios-calendar-page .ios-day-event-card {
    display: grid !important;
    grid-template-columns: 80px 2px minmax(0, 1fr) !important;
    gap: 18px !important;
    align-items: start !important;
    padding: 20px 22px !important;
    border: 1px solid var(--omni-schedule-cell-border) !important;
    border-radius: 20px !important;
    background: var(--omni-schedule-cell-bg) !important;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.034) !important;
}

.ios-calendar-page .ios-day-event-bar {
    width: 2px !important;
    min-height: 88px !important;
    opacity: 0.18 !important;
    background: rgba(126, 142, 201, 0.74) !important;
}

.ios-calendar-page .ios-week-header,
.ios-calendar-page .ios-week-grid,
.ios-calendar-page .ios-month-weekdays,
.ios-calendar-page .ios-month-grid {
    gap: 8px !important;
}

.ios-calendar-page .ios-month-grid {
    row-gap: 12px !important;
}

.ios-calendar-page .ios-week-header-cell,
.ios-calendar-page .ios-week-column,
.ios-calendar-page .ios-month-cell {
    border: 1px solid var(--omni-schedule-cell-border) !important;
    background: var(--omni-schedule-cell-bg) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.028) !important;
}

.ios-calendar-page .ios-week-header-cell {
    min-height: 62px !important;
    padding: 10px 8px !important;
    border-radius: 15px !important;
}

.ios-calendar-page .ios-week-header-cell.active {
    color: rgba(8, 10, 15, 0.96) !important;
    border-color: rgba(205, 214, 255, 0.18) !important;
    background: linear-gradient(135deg, rgba(145, 160, 216, 0.97), rgba(116, 129, 186, 0.94)) !important;
    box-shadow: 0 14px 32px rgba(91, 107, 168, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}

.ios-calendar-page .ios-week-column {
    min-height: 118px !important;
    padding: 8px !important;
    border-radius: 15px !important;
}

.ios-calendar-page .ios-week-empty {
    display: grid !important;
    place-items: center !important;
    min-height: 78px !important;
    color: rgba(196, 201, 214, 0.44) !important;
    font-size: 0.78rem !important;
    text-align: center !important;
}

.ios-calendar-page .ios-week-event-chip {
    padding: 7px 8px !important;
    border-radius: 11px !important;
}

.ios-calendar-page .ios-week-event-chip,
.ios-calendar-page .ios-month-event-pill {
    border-color: rgba(126, 142, 201, 0.14) !important;
    background: rgba(126, 142, 201, 0.16) !important;
    box-shadow: none !important;
}

.ios-calendar-page .ios-month-cell {
    min-height: 118px !important;
    padding: 10px !important;
    border-radius: 15px !important;
}

.ios-calendar-page .ios-month-cell.muted {
    opacity: 0.42 !important;
}

.ios-calendar-page .ios-month-cell.selected {
    color: inherit !important;
    border-color: rgba(145, 160, 216, 0.66) !important;
    background: linear-gradient(180deg, rgba(23, 28, 41, 0.86), rgba(11, 14, 22, 0.90)) !important;
    box-shadow: 0 0 0 1px rgba(145, 160, 216, 0.18), 0 14px 34px rgba(83, 99, 158, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

.ios-calendar-page .ios-month-event-pill {
    min-height: 17px !important;
    height: 17px !important;
    padding: 0 7px !important;
    border-radius: 7px !important;
    color: rgba(237, 233, 225, 0.76) !important;
    font-size: 0.66rem !important;
    line-height: 15px !important;
}

.mud-dialog .config-dialog-shell .config-dialog-section {
    padding: 18px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(255, 255, 255, 0.052) !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.032), rgba(255, 255, 255, 0.012)) !important;
}

@media (max-width: 767px) {
    .ios-calendar-page .ios-calendar-month-label {
        font-size: 1.65rem !important;
    }

    .ios-calendar-page .ios-calendar-date-label {
        font-size: 0.9rem !important;
    }

    .ios-calendar-page .ios-calendar-toolbar {
        max-width: none !important;
        padding: 10px !important;
        border-radius: 18px !important;
    }

    .ios-calendar-page .ios-calendar-date-nav-row {
        grid-template-columns: 42px minmax(0, 1fr) 42px !important;
        width: 100% !important;
    }

    .ios-calendar-page .ios-calendar-today-button.mud-button-root {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        min-width: 0 !important;
    }

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

    .ios-calendar-page .ios-calendar-mode-row {
        display: grid !important;
        grid-template-columns: 1fr !important;
        max-width: none !important;
    }

    .ios-calendar-page .ios-calendar-view-switch,
    .ios-calendar-page .ios-calendar-generate-button.mud-button-root {
        width: 100% !important;
    }

    .ios-calendar-page .ios-day-event-card {
        grid-template-columns: 54px 2px minmax(0, 1fr) !important;
        gap: 12px !important;
        padding: 16px !important;
        border-radius: 17px !important;
    }

    .ios-calendar-page .ios-calendar-empty {
        min-height: 110px !important;
        padding: 18px !important;
    }
}

/* ===== absorbed from shopping.control.css ===== */
/* Shopping Queue final execution-surface layer. Loaded after app.css on purpose. */

.shopping-bulk-item-list {
    display: grid !important;
    gap: 10px !important;
}

.shopping-bulk-item-row {
    display: grid !important;
    grid-template-columns: minmax(220px, 1fr) minmax(140px, 220px) auto !important;
    align-items: start !important;
    gap: 10px !important;
}

.shopping-bulk-row-actions {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding-top: 4px !important;
}

.shopping-bulk-row-action.mud-icon-button {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    border-radius: 13px !important;
    border: 1px solid rgba(255, 255, 255, 0.075) !important;
    background: rgba(255, 255, 255, 0.035) !important;
}

@media (max-width: 767px) {
    .shopping-bulk-item-row {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .shopping-bulk-row-actions {
        justify-content: flex-end !important;
        padding-top: 0 !important;
    }
}
.shopping-ios-page {
    --shopping-panel-bg: linear-gradient(180deg, rgba(19, 23, 33, 0.82), rgba(9, 12, 18, 0.88));
    --shopping-row-bg: linear-gradient(180deg, rgba(17, 21, 30, 0.86), rgba(10, 13, 20, 0.94));
    --shopping-border: rgba(255, 255, 255, 0.055);
    --shopping-border-strong: rgba(137, 151, 205, 0.22);
    --shopping-action: linear-gradient(135deg, rgba(145, 160, 216, 0.98), rgba(118, 132, 190, 0.94));
}

.shopping-ios-page.app-page-shell {
    max-width: 1568px !important;
}

.shopping-ios-page .app-page-shell-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: start !important;
    gap: 24px !important;
    padding-bottom: 18px !important;
    margin-bottom: 20px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.052) !important;
}

.shopping-ios-page .app-page-title {
    font-size: clamp(2rem, 2.25vw, 2.25rem) !important;
    line-height: 1.05 !important;
    font-weight: 700 !important;
    color: rgba(237, 233, 225, 0.94) !important;
}

.shopping-ios-page .app-page-context:not(.app-page-context-chip-row) {
    max-width: 560px !important;
    margin-top: 8px !important;
    color: rgba(196, 201, 214, 0.48) !important;
    font-size: 0.92rem !important;
    line-height: 1.38 !important;
}

.shopping-ios-page .app-page-shell-toolbar .app-page-context-chip-row {
    border-color: rgba(126, 142, 201, 0.30) !important;
    background: rgba(126, 142, 201, 0.15) !important;
    color: rgba(237, 233, 225, 0.90) !important;
}

.shopping-filter-card {
    margin-bottom: 16px !important;
    border: 1px solid rgba(255, 255, 255, 0.046) !important;
    border-radius: 18px !important;
    background: rgba(8, 11, 17, 0.42) !important;
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.028) !important;
    backdrop-filter: blur(5px) !important;
}

.shopping-filter-shell {
    padding: 12px 14px !important;
}

.shopping-filter-header .mud-typography {
    margin-bottom: 10px !important;
    color: rgba(196, 201, 214, 0.58) !important;
    font-size: 0.68rem !important;
    font-weight: 780 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
}

.shopping-filter-chips {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 7px !important;
}

.shopping-filter-chips .mud-chip {
    height: 28px !important;
    min-height: 28px !important;
    padding-inline: 11px !important;
    border-radius: 999px !important;
    font-size: 0.78rem !important;
    font-weight: 720 !important;
}

.shopping-filter-chips .mud-chip-outlined {
    opacity: 0.62 !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
    background: rgba(255, 255, 255, 0.020) !important;
}

.shopping-filter-chips .mud-chip-filled {
    color: rgba(8, 10, 15, 0.95) !important;
    background: var(--shopping-action) !important;
    box-shadow: none !important;
}

.shopping-section-card {
    padding: 18px 22px !important;
    border: 1px solid rgba(255, 255, 255, 0.052) !important;
    border-radius: 22px !important;
    background: var(--shopping-panel-bg) !important;
    box-shadow: 0 22px 58px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.034) !important;
}

.shopping-section-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-bottom: 14px !important;
}

.shopping-section-header .mud-typography-h6 {
    color: rgba(237, 233, 225, 0.92) !important;
    font-size: 1.14rem !important;
    font-weight: 760 !important;
}

.shopping-section-header .mud-chip {
    height: 24px !important;
    min-height: 24px !important;
    opacity: 0.72 !important;
}

.shopping-store-group {
    margin-top: 16px !important;
    padding-top: 2px !important;
}

.shopping-store-group:first-of-type {
    margin-top: 0 !important;
}

.shopping-store-group-no-store {
    opacity: 0.84 !important;
}

.shopping-store-header {
    display: flex !important;
    align-items: end !important;
    justify-content: space-between !important;
    gap: 16px !important;
    padding-bottom: 8px !important;
    margin-bottom: 7px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.055) !important;
}

.shopping-store-group-no-store .shopping-store-header {
    border-bottom-style: dashed !important;
    opacity: 0.86 !important;
}

.shopping-store-header .mud-typography-h6,
.shopping-store-header .mud-typography-subtitle1 {
    color: rgba(237, 233, 225, 0.90) !important;
    font-size: 1.08rem !important;
    line-height: 1.12 !important;
    font-weight: 760 !important;
}

.shopping-store-meta {
    margin-top: 2px !important;
    color: rgba(196, 201, 214, 0.52) !important;
    font-size: 0.78rem !important;
}

.shopping-store-badges {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.shopping-store-badges .mud-chip {
    height: 22px !important;
    min-height: 22px !important;
    padding-inline: 8px !important;
    font-size: 0.67rem !important;
    opacity: 0.70 !important;
}

.shopping-item-list {
    display: grid !important;
    gap: 7px !important;
}

.shopping-item-row,
.shopping-item-row.bought {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 14px !important;
    min-height: 0 !important;
    padding: 10px 12px 10px 14px !important;
    border: 1px solid var(--shopping-border) !important;
    border-radius: 16px !important;
    background: var(--shopping-row-bg) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.028) !important;
    backdrop-filter: none !important;
}

.shopping-item-row:hover {
    border-color: rgba(126, 142, 201, 0.16) !important;
    background: linear-gradient(180deg, rgba(21, 26, 38, 0.90), rgba(12, 15, 22, 0.96)) !important;
}

.shopping-item-row[role="button"] {
    cursor: pointer !important;
}

.shopping-item-row[role="button"]:focus-visible {
    outline: 2px solid rgba(154, 169, 235, 0.55) !important;
    outline-offset: 3px !important;
}

.shopping-item-row-important {
    border-color: rgba(190, 160, 112, 0.22) !important;
    background:
        linear-gradient(90deg, rgba(190, 160, 112, 0.09), transparent 18%),
        var(--shopping-row-bg) !important;
}

.shopping-item-main {
    display: grid !important;
    grid-template-columns: minmax(180px, 1fr) auto auto !important;
    align-items: center !important;
    gap: 3px 12px !important;
    min-width: 0 !important;
}

.shopping-item-topline {
    display: block !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
}

.shopping-item-name {
    overflow: hidden !important;
    color: rgba(237, 233, 225, 0.95) !important;
    font-size: 0.9rem !important;
    font-weight: 740 !important;
    line-height: 1.14 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.shopping-item-detail {
    overflow: hidden !important;
    grid-column: 1 !important;
    grid-row: 2 !important;
    margin-top: 0 !important;
    color: rgba(196, 201, 214, 0.63) !important;
    font-size: 0.73rem !important;
    line-height: 1.18 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.shopping-item-badges {
    display: flex !important;
    flex-wrap: wrap !important;
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
    align-self: center !important;
    justify-self: end !important;
    gap: 4px !important;
    margin-top: 0 !important;
}

.shopping-pill {
    display: inline-flex !important;
    align-items: center !important;
    height: 18px !important;
    padding: 0 6px !important;
    border-radius: 999px !important;
    font-size: 0.61rem !important;
    font-weight: 720 !important;
    line-height: 1 !important;
    letter-spacing: 0.01em !important;
    box-shadow: none !important;
}

.shopping-pill-method,
.shopping-pill-bought {
    color: rgba(196, 201, 214, 0.74) !important;
    background: rgba(255, 255, 255, 0.046) !important;
}

.shopping-pill-important {
    color: rgba(237, 219, 190, 0.88) !important;
    background: rgba(190, 160, 112, 0.15) !important;
    border: 1px solid rgba(190, 160, 112, 0.16) !important;
}

.shopping-item-meta {
    grid-column: 3 !important;
    grid-row: 1 / span 2 !important;
    align-self: center !important;
    justify-self: end !important;
    margin-top: 0 !important;
    color: rgba(196, 201, 214, 0.42) !important;
    font-size: 0.66rem !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
}

.shopping-item-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    min-width: max-content !important;
    cursor: default !important;
}

.shopping-item-bought-button,
.shopping-item-bought-button.mud-button-root {
    height: 32px !important;
    min-height: 32px !important;
    min-width: 76px !important;
    padding: 0 13px !important;
    border-radius: 10px !important;
    color: rgba(8, 10, 15, 0.96) !important;
    font-size: 0.76rem !important;
    font-weight: 740 !important;
    text-transform: none !important;
    background: var(--shopping-action) !important;
    border: 1px solid rgba(205, 214, 255, 0.14) !important;
    box-shadow: none !important;
}

.shopping-item-bought-button:hover,
.shopping-item-bought-button.mud-button-root:hover {
    filter: brightness(1.06) !important;
    transform: none !important;
}

.shopping-item-actions .mud-icon-button,
.shopping-item-actions .mud-menu-button-root {
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
    border-radius: 10px !important;
}

.mud-popover-open:has(.shopping-action-menu-button),
.mud-popover:has(.shopping-action-menu-button) {
    width: 156px !important;
    min-width: 156px !important;
    max-width: 156px !important;
    padding: 6px !important;
}

.shopping-action-menu-button {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 38px !important;
    padding: 0 11px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: rgba(238, 241, 250, 0.92) !important;
    font: inherit !important;
    font-size: 0.86rem !important;
    font-weight: 680 !important;
    text-align: left !important;
    cursor: pointer !important;
}

.shopping-action-menu-button:hover,
.shopping-action-menu-button:focus-visible {
    outline: none !important;
    background: rgba(255, 255, 255, 0.055) !important;
}

.shopping-action-menu-button-danger {
    color: rgba(244, 178, 178, 0.94) !important;
}

.shopping-action-menu-button-danger:hover,
.shopping-action-menu-button-danger:focus-visible {
    background: rgba(190, 82, 82, 0.14) !important;
}

.shopping-bought-panels {
    opacity: 0.76 !important;
}

.shopping-bought-panels .mud-expand-panel {
    border: 1px solid rgba(255, 255, 255, 0.038) !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, 0.018) !important;
    box-shadow: none !important;
}

.shopping-bought-panels .mud-expand-panel-header {
    min-height: 54px !important;
    padding: 10px 16px !important;
}

.shopping-bought-panels .shopping-section-header {
    margin-bottom: 0 !important;
}

.shopping-bought-panels .shopping-section-header .mud-typography-h6 {
    font-size: 0.98rem !important;
    color: rgba(196, 201, 214, 0.72) !important;
}

.shopping-store-group-bought {
    margin-top: 16px !important;
}

.shopping-item-row.bought {
    min-height: 0 !important;
    opacity: 0.72 !important;
}

.shopping-dialog-section {
    padding: 16px !important;
    border-radius: 17px !important;
}

.shopping-dialog-shell .config-dialog-grid {
    gap: 18px 24px !important;
}

.shopping-dialog-shell .mud-input-control,
.shopping-dialog-shell .mud-select,
.shopping-dialog-shell .mud-picker {
    width: 100% !important;
    min-width: 0 !important;
}

.shopping-dialog-shell .config-dialog-grid .mud-input-control,
.shopping-dialog-shell .shopping-bulk-item-row .mud-input-control,
.shopping-dialog-shell .shopping-bulk-item-row .mud-select {
    padding: 8px 8px 0 !important;
    border-radius: 12px 12px 0 0 !important;
    background: transparent !important;
}

.shopping-dialog-shell .mud-input-control > .mud-input-control-input-container {
    margin-top: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.shopping-dialog-shell .mud-input.mud-input-outlined:not(.mud-input-multiline),
.shopping-dialog-shell .mud-select .mud-input.mud-input-outlined,
.shopping-dialog-shell .mud-picker .mud-input.mud-input-outlined {
    min-height: 42px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(210, 218, 245, 0.105) !important;
    background: rgba(6, 9, 15, 0.78) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025) !important;
}

.shopping-dialog-shell .mud-input.mud-input-outlined.mud-focused,
.shopping-dialog-shell .mud-input-control:hover .mud-input.mud-input-outlined {
    border-color: rgba(160, 172, 226, 0.28) !important;
    background: rgba(8, 11, 18, 0.86) !important;
}

.shopping-dialog-shell .mud-input-outlined .mud-input-outlined-border {
    border-color: transparent !important;
    border-radius: 12px !important;
}

.shopping-important-checkbox {
    min-height: 42px !important;
}

@media (max-width: 767px) {
    .shopping-ios-page .app-page-shell-header {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 12px !important;
        padding-bottom: 14px !important;
        margin-bottom: 16px !important;
    }

    .shopping-ios-page .app-page-title {
        font-size: 1.72rem !important;
    }

    .shopping-filter-card {
        margin-inline: 0 !important;
    }

    .shopping-filter-chips {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        padding-bottom: 2px !important;
        scrollbar-width: none !important;
    }

    .shopping-filter-chips::-webkit-scrollbar {
        display: none !important;
    }

    .shopping-section-card {
        padding: 14px 12px !important;
        border-radius: 18px !important;
    }

    .shopping-store-header {
        align-items: start !important;
    }

    .shopping-item-row,
    .shopping-item-row.bought {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 9px !important;
        padding: 10px 11px !important;
    }

    .shopping-item-main {
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 5px 8px !important;
    }

    .shopping-item-topline,
    .shopping-item-detail {
        grid-column: 1 / 2 !important;
    }

    .shopping-item-badges,
    .shopping-item-meta {
        grid-column: 1 / -1 !important;
    }

    .shopping-item-badges {
        margin-top: 1px !important;
    }

    .shopping-item-meta {
        display: none !important;
    }

    .shopping-item-actions {
        justify-content: space-between !important;
        width: 100% !important;
    }

    .shopping-item-primary-action {
        flex: 1 1 auto !important;
    }

    .shopping-item-bought-button,
    .shopping-item-bought-button.mud-button-root {
        width: 100% !important;
        min-width: 0 !important;
    }
}


/* ===== absorbed from notes.control.css ===== */
/* Notes final executive-notebook layer. Loaded after app.css on purpose. */
.notes-page {
    --notes-panel-bg: linear-gradient(180deg, rgba(19, 23, 33, 0.82), rgba(9, 12, 18, 0.90));
    --notes-editor-bg: linear-gradient(180deg, rgba(17, 20, 29, 0.94), rgba(10, 12, 18, 0.98));
    --notes-inset-bg: linear-gradient(180deg, rgba(5, 7, 11, 0.34), rgba(4, 6, 10, 0.22));
    --notes-border: rgba(255, 255, 255, 0.058);
    --notes-border-strong: rgba(137, 151, 205, 0.20);
    --notes-workspace-max: 1240px;
    max-width: 1568px !important;
}

.notes-page .app-page-shell-header {
    padding-bottom: 18px !important;
    margin-bottom: 18px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.052) !important;
}

.notes-page .app-page-title {
    color: rgba(237, 233, 225, 0.94) !important;
    font-size: clamp(2rem, 2.25vw, 2.25rem) !important;
    line-height: 1.05 !important;
    font-weight: 700 !important;
}

.notes-page .app-page-context {
    max-width: 620px !important;
    margin-top: 8px !important;
    color: rgba(196, 201, 214, 0.56) !important;
    font-size: 0.94rem !important;
}

.notes-workspace,
.notes-shell {
    display: grid !important;
    gap: 18px !important;
    width: 100% !important;
}

.notes-command-bar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: var(--notes-workspace-max) !important;
    margin-inline: auto !important;
    min-height: auto !important;
    padding: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.052) !important;
    border-radius: 20px !important;
    background: linear-gradient(180deg, rgba(15, 18, 27, 0.76), rgba(8, 11, 17, 0.64)) !important;
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
    backdrop-filter: blur(4px) !important;
}

.notes-command-left {
    display: grid !important;
    grid-template-columns: minmax(190px, 250px) minmax(260px, 1fr) minmax(190px, 250px) !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 0 !important;
}

.notes-command-select {
    width: 100% !important;
    min-width: 0 !important;
}

.notes-command-select .mud-input,
.notes-command-chip {
    height: 44px !important;
    min-height: 44px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(255, 255, 255, 0.052) !important;
    background: linear-gradient(180deg, rgba(24, 28, 38, 0.78), rgba(12, 15, 22, 0.84)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
}

.notes-command-select .mud-input-slot {
    height: 44px !important;
    min-height: 44px !important;
    padding: 14px 42px 4px 14px !important;
    overflow: hidden !important;
    color: rgba(237, 233, 225, 0.92) !important;
    font-size: 0.92rem !important;
    font-weight: 690 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.notes-command-select .mud-input-label,
.notes-command-select .mud-input-label.mud-shrink,
.notes-command-select .mud-input-label.mud-input-label-animate {
    transform: translate(14px, 5px) scale(1) !important;
    max-width: calc(100% - 46px) !important;
    color: rgba(196, 201, 214, 0.58) !important;
    font-size: 0.56rem !important;
    font-weight: 760 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
}

.notes-command-chip {
    display: inline-flex !important;
    align-items: center !important;
    padding: 0 14px !important;
    color: rgba(196, 201, 214, 0.70) !important;
    font-size: 0.84rem !important;
}

.notes-command-right {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    align-self: stretch !important;
}

.notes-command-right .mud-icon-button,
.notes-command-icon-button.mud-icon-button {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    border-radius: 15px !important;
    border: 1px solid rgba(255, 255, 255, 0.052) !important;
    background: rgba(255, 255, 255, 0.030) !important;
    color: rgba(237, 233, 225, 0.70) !important;
    transition: background 160ms ease-out, border-color 160ms ease-out, color 160ms ease-out, transform 160ms ease-out !important;
}

.notes-command-right .mud-icon-button:hover,
.notes-command-icon-button.mud-icon-button:hover {
    border-color: rgba(137, 151, 205, 0.22) !important;
    background: rgba(126, 142, 201, 0.11) !important;
    color: rgba(237, 233, 225, 0.92) !important;
    transform: translateY(-1px) !important;
}

.notes-command-right .mud-icon-button.mud-button-text-error,
.notes-command-icon-danger.mud-icon-button {
    color: rgba(229, 116, 116, 0.74) !important;
    background: rgba(229, 116, 116, 0.045) !important;
}

.notes-editor-pane.notes-editor-canvas {
    display: grid !important;
    grid-template-rows: auto auto minmax(260px, 1fr) auto !important;
    gap: 14px !important;
    width: 100% !important;
    max-width: var(--notes-workspace-max) !important;
    margin-inline: auto !important;
    min-height: min(680px, calc(100dvh - 285px)) !important;
    margin-top: 0 !important;
    padding: 22px 26px 0 !important;
    border: 1px solid var(--notes-border) !important;
    border-radius: 24px !important;
    background: var(--notes-editor-bg) !important;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
    backdrop-filter: none !important;
}

.notes-editor-toolbar {
    min-height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
}

.notes-title-input .mud-input-root,
.notes-title-input .mud-input,
.notes-title-input .mud-input-slot {
    min-height: 42px !important;
    height: 42px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.notes-title-input input,
.notes-title-input .mud-input-slot input {
    color: rgba(237, 233, 225, 0.96) !important;
    font-size: clamp(1.35rem, 1.5vw, 1.62rem) !important;
    font-weight: 760 !important;
    letter-spacing: -0.018em !important;
}

.notes-briefing-meta {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 7px 10px !important;
    margin: 0 !important;
    color: rgba(196, 201, 214, 0.50) !important;
    font-size: 0.76rem !important;
    font-weight: 650 !important;
}

.notes-briefing-chip {
    display: inline-flex !important;
    align-items: center !important;
    height: 22px !important;
    padding: 0 8px !important;
    border-radius: 999px !important;
    color: rgba(237, 233, 225, 0.78) !important;
    background: rgba(255, 255, 255, 0.050) !important;
}

.notes-notepad {
    width: 100% !important;
    min-height: 340px !important;
    height: clamp(320px, 47dvh, 540px) !important;
    padding: 20px 22px !important;
    resize: vertical !important;
    border: 1px solid rgba(255, 255, 255, 0.075) !important;
    border-radius: 18px !important;
    outline: none !important;
    background: var(--notes-inset-bg) !important;
    color: rgba(237, 233, 225, 0.91) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.032), inset 0 18px 42px rgba(0, 0, 0, 0.12) !important;
    font-family: var(--omni-font-family, Inter, Helvetica, Arial, sans-serif) !important;
    font-size: 1rem !important;
    line-height: 1.62 !important;
}

.notes-notepad:focus {
    border-color: rgba(137, 151, 205, 0.22) !important;
    box-shadow: 0 0 0 1px rgba(137, 151, 205, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.034) !important;
}

.notes-notepad::placeholder {
    color: rgba(196, 201, 214, 0.34) !important;
}

.notes-briefing-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) max-content !important;
    align-items: center !important;
    gap: 16px !important;
    min-height: 54px !important;
    margin: 2px -26px 0 !important;
    padding: 12px 26px 14px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.052) !important;
    border-radius: 0 0 23px 23px !important;
    background: linear-gradient(180deg, rgba(10, 13, 20, 0.40), rgba(5, 7, 11, 0.36)) !important;
}

.notes-status {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 12px !important;
    color: rgba(196, 201, 214, 0.48) !important;
    font-size: 0.76rem !important;
    font-weight: 650 !important;
}

.notes-action-row {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    min-width: max-content !important;
}

.notes-action-button.mud-button-root {
    height: 36px !important;
    min-height: 36px !important;
    min-width: 76px !important;
    border-radius: 999px !important;
    padding: 0 16px !important;
    font-size: 0.80rem !important;
    font-weight: 760 !important;
    line-height: 1 !important;
    text-transform: none !important;
    white-space: nowrap !important;
}

.notes-action-button.mud-button-root .mud-button-label {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
    overflow: visible !important;
    white-space: nowrap !important;
}

.notes-action-primary.mud-button-root {
    color: rgba(8, 10, 15, 0.96) !important;
    background: linear-gradient(135deg, rgba(145, 160, 216, 0.98), rgba(118, 132, 190, 0.94)) !important;
    box-shadow: none !important;
}

.notes-action-ghost.mud-button-root {
    color: rgba(196, 201, 214, 0.72) !important;
    background: rgba(255, 255, 255, 0.030) !important;
}

.notes-action-danger.mud-button-root {
    color: rgba(229, 116, 116, 0.76) !important;
    background: rgba(229, 116, 116, 0.060) !important;
}

.notes-editor-empty {
    display: grid !important;
    place-items: center !important;
    gap: 10px !important;
    min-height: 320px !important;
    color: rgba(196, 201, 214, 0.55) !important;
}

.notes-select-popover.mud-popover {
    max-width: min(430px, calc(100vw - 24px)) !important;
    border: 1px solid rgba(255, 255, 255, 0.070) !important;
    border-radius: 16px !important;
    background: linear-gradient(180deg, rgba(20, 24, 34, 0.99), rgba(10, 13, 20, 0.99)) !important;
    box-shadow: 0 24px 58px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
    overflow: hidden !important;
    z-index: 1700 !important;
}

.notes-select-popover .mud-list {
    padding: 6px !important;
}

.notes-select-popover .mud-list-item {
    min-height: 40px !important;
    border-radius: 12px !important;
    color: rgba(237, 233, 225, 0.86) !important;
}

.notes-select-popover .mud-list-item:hover {
    background: rgba(126, 142, 201, 0.10) !important;
}

.notes-share-popover .mud-list-item {
    align-items: center !important;
    min-height: 42px !important;
}

.notes-share-popover .mud-checkbox {
    align-self: center !important;
    margin-right: 8px !important;
}

.notes-share-popover .mud-list-item-text {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.mud-popover .notes-dropdown-create-option,
.mud-list-item.notes-dropdown-create-option {
    margin: 6px !important;
    border-radius: 13px !important;
    background: rgba(126, 142, 201, 0.14) !important;
}

.notes-dropdown-create-content {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 0 !important;
    color: rgba(237, 233, 225, 0.88) !important;
    font-weight: 760 !important;
}

.mud-popover:has(.notes-dropdown-create-option),
.mud-popover:has(.notes-dropdown-create-content) {
    max-width: min(430px, calc(100vw - 24px)) !important;
    border: 1px solid rgba(255, 255, 255, 0.065) !important;
    border-radius: 16px !important;
    background: linear-gradient(180deg, rgba(20, 24, 34, 0.98), rgba(10, 13, 20, 0.98)) !important;
    box-shadow: 0 24px 58px rgba(0, 0, 0, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
    overflow: hidden !important;
    z-index: 1700 !important;
}

.mud-popover:has(.notes-dropdown-create-option) .mud-list,
.mud-popover:has(.notes-dropdown-create-content) .mud-list {
    padding: 6px !important;
}

.mud-popover:has(.notes-dropdown-create-option) .mud-list-item,
.mud-popover:has(.notes-dropdown-create-content) .mud-list-item {
    min-height: 40px !important;
    border-radius: 12px !important;
    color: rgba(237, 233, 225, 0.86) !important;
}

.mud-popover:has(.notes-dropdown-create-option) .mud-checkbox,
.mud-popover:has(.notes-dropdown-create-content) .mud-checkbox {
    align-self: center !important;
}

@media (max-width: 1023px) {
    .notes-command-left {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .notes-share-select,
    .notes-command-chip {
        grid-column: 1 / -1 !important;
    }
}

@media (max-width: 767px) {
    .notes-page .app-page-shell-header {
        padding-bottom: 14px !important;
        margin-bottom: 14px !important;
    }

    .notes-page .app-page-title {
        font-size: 1.72rem !important;
    }

    .notes-page .app-page-context {
        font-size: 0.84rem !important;
        line-height: 1.35 !important;
    }

    .notes-workspace,
    .notes-shell {
        gap: 14px !important;
    }

    .notes-command-bar {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 10px !important;
        padding: 12px !important;
        border-radius: 18px !important;
    }

    .notes-command-left {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 9px !important;
    }

    .notes-share-select,
    .notes-command-chip {
        grid-column: auto !important;
    }

    .notes-command-select .mud-input,
    .notes-command-chip {
        height: 50px !important;
        min-height: 50px !important;
    }

    .notes-command-select .mud-input-slot {
        height: 50px !important;
        min-height: 50px !important;
        padding: 17px 42px 4px 14px !important;
        font-size: 0.92rem !important;
    }

    .notes-command-right {
        justify-content: flex-start !important;
    }

    .notes-command-right .mud-icon-button {
        width: 44px !important;
        height: 44px !important;
    }

    .notes-editor-pane.notes-editor-canvas {
        grid-template-rows: auto auto auto auto !important;
        min-height: auto !important;
        padding: 18px 16px 14px !important;
        border-radius: 20px !important;
    }

    .notes-title-input input,
    .notes-title-input .mud-input-slot input {
        font-size: 1.22rem !important;
    }

    .notes-notepad {
        min-height: 260px !important;
        height: clamp(260px, 42dvh, 440px) !important;
        padding: 16px !important;
        font-size: 0.96rem !important;
        line-height: 1.55 !important;
    }

    .notes-briefing-actions {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 10px !important;
    }

    .notes-action-row {
        justify-content: stretch !important;
        flex-wrap: wrap !important;
    }

    .notes-action-button.mud-button-root {
        flex: 1 1 auto !important;
        min-width: 86px !important;
    }
}


/* ===== absorbed from transport.control.css ===== */
/* Transport / School Runs final dispatch-board layer. Loaded after app.css on purpose. */
.schoolrunsweek-page {
    --transport-surface: rgba(13, 16, 24, 0.72);
    --transport-surface-strong: rgba(18, 22, 32, 0.86);
    --transport-border: rgba(255, 255, 255, 0.065);
    --transport-border-strong: rgba(137, 151, 205, 0.22);
    --transport-text: rgba(237, 233, 225, 0.93);
    --transport-muted: rgba(196, 201, 214, 0.58);
    width: min(100%, 1680px) !important;
    max-width: 1680px !important;
    margin-inline: auto !important;
    color: var(--transport-text) !important;
}

.schoolrunsweek-header {
    margin-bottom: 16px !important;
}

.schoolrunsweek-page-context {
    margin-top: 8px !important;
    color: rgba(196, 201, 214, 0.72) !important;
    font-size: clamp(1.2rem, 1.55vw, 1.55rem) !important;
    font-weight: 560 !important;
    letter-spacing: -0.012em !important;
}

.schoolrunsweek-toolbar {
    display: inline-grid !important;
    grid-template-columns: auto minmax(260px, 360px) !important;
    align-items: stretch !important;
    gap: 0 !important;
    width: auto !important;
    max-width: 100% !important;
    min-height: 48px !important;
    margin: 0 0 22px !important;
    padding: 6px !important;
    border: 1px solid var(--transport-border) !important;
    border-radius: 18px !important;
    background: linear-gradient(180deg, rgba(16, 20, 29, 0.82), rgba(8, 11, 17, 0.70)) !important;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
    backdrop-filter: blur(3px) !important;
}

.schoolrunsweek-nav-wrap {
    display: grid !important;
    grid-template-columns: 42px minmax(116px, auto) 42px !important;
    align-items: stretch !important;
    gap: 6px !important;
    padding-right: 10px !important;
    margin-right: 10px !important;
    border-right: 1px solid rgba(255, 255, 255, 0.065) !important;
}

.schoolrunsweek-date-wrap {
    display: flex !important;
    align-items: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
}

.schoolrunsweek-toolbar .mud-button-root,
.schoolrunsweek-toolbar .mud-icon-button {
    height: 42px !important;
    min-height: 42px !important;
    border-radius: 13px !important;
    border-color: rgba(255, 255, 255, 0.07) !important;
    background: rgba(255, 255, 255, 0.030) !important;
    color: rgba(237, 233, 225, 0.82) !important;
    box-shadow: none !important;
    transition: background 140ms ease-out, border-color 140ms ease-out, color 140ms ease-out, transform 140ms ease-out !important;
}

.schoolrunsweek-toolbar .mud-button-root:hover,
.schoolrunsweek-toolbar .mud-icon-button:hover {
    border-color: var(--transport-border-strong) !important;
    background: rgba(126, 142, 201, 0.12) !important;
    color: rgba(237, 233, 225, 0.96) !important;
    transform: translateY(-1px) !important;
}

.schoolrunsweek-today-button {
    width: auto !important;
    min-width: 116px !important;
    padding-inline: 18px !important;
    font-size: 0.86rem !important;
    font-weight: 780 !important;
    text-transform: none !important;
}

.schoolrunsweek-date-picker {
    width: 100% !important;
}

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

.schoolrunsweek-date-picker .mud-input,
.schoolrunsweek-date-picker .mud-input-root {
    min-height: 42px !important;
    height: 42px !important;
    border-radius: 13px !important;
    background: rgba(255, 255, 255, 0.030) !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    box-shadow: none !important;
}

.schoolrunsweek-date-picker .mud-input-slot {
    height: 42px !important;
    min-height: 42px !important;
    padding: 14px 38px 3px 14px !important;
    color: rgba(237, 233, 225, 0.90) !important;
    font-size: 0.88rem !important;
    font-weight: 760 !important;
}

.schoolrunsweek-date-picker .mud-input-label,
.schoolrunsweek-date-picker .mud-input-label.mud-shrink,
.schoolrunsweek-date-picker .mud-input-label.mud-input-label-animate {
    transform: translate(14px, 4px) scale(1) !important;
    color: rgba(196, 201, 214, 0.56) !important;
    font-size: 0.54rem !important;
    font-weight: 780 !important;
    letter-spacing: 0.13em !important;
    text-transform: uppercase !important;
}

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

.schoolrunsweek-day-card {
    display: grid !important;
    grid-template-rows: auto 1fr !important;
    min-width: 0 !important;
    min-height: 420px !important;
    padding: 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.055) !important;
    border-radius: 18px !important;
    background: linear-gradient(180deg, rgba(19, 23, 33, 0.78), rgba(9, 12, 18, 0.82)) !important;
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.030) !important;
    overflow: hidden !important;
}

.schoolrunsweek-day-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 1 !important;
    display: block !important;
    padding: 14px 14px 12px !important;
    margin: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.055) !important;
    background: linear-gradient(180deg, rgba(24, 28, 39, 0.82), rgba(14, 17, 25, 0.72)) !important;
}

.schoolrunsweek-day-heading {
    display: grid !important;
    gap: 4px !important;
}

.schoolrunsweek-day-name {
    color: rgba(237, 233, 225, 0.92) !important;
    font-size: 0.84rem !important;
    font-weight: 820 !important;
    letter-spacing: 0.15em !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
}

.schoolrunsweek-day-date {
    color: rgba(196, 201, 214, 0.55) !important;
    font-size: 0.72rem !important;
    font-weight: 680 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
}

.schoolrunsweek-slot-stack {
    display: grid !important;
    grid-template-rows: 1fr 1fr !important;
    gap: 0 !important;
    min-height: 0 !important;
}

.schoolrunsweek-slot-card {
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.schoolrunsweek-slot-card + .schoolrunsweek-slot-card {
    border-top: 1px solid rgba(255, 255, 255, 0.055) !important;
}

.schoolrunsweek-slot-content {
    display: grid !important;
    grid-template-rows: auto 1fr !important;
    gap: 10px !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 12px !important;
}

.schoolrunsweek-slot-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 32px !important;
    padding: 0 0 8px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.045) !important;
}

.schoolrunsweek-slot-title {
    min-width: 0 !important;
    color: rgba(196, 201, 214, 0.64) !important;
    font-size: 0.66rem !important;
    font-weight: 780 !important;
    letter-spacing: 0.14em !important;
    line-height: 1.1 !important;
    text-transform: uppercase !important;
}

.schoolrunsweek-slot-add-button.mud-button-root {
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 9px !important;
    border-radius: 999px !important;
    color: rgba(151, 166, 223, 0.92) !important;
    background: rgba(126, 142, 201, 0.070) !important;
    font-size: 0.70rem !important;
    font-weight: 760 !important;
    text-transform: none !important;
}

.schoolrunsweek-empty {
    align-self: center !important;
    justify-self: center !important;
    padding: 12px !important;
    color: rgba(196, 201, 214, 0.38) !important;
    font-size: 0.76rem !important;
    font-weight: 620 !important;
    text-align: center !important;
}

.schoolrunsweek-assignment-card {
    padding: 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.055) !important;
    border-radius: 14px !important;
    background: rgba(5, 7, 11, 0.23) !important;
    box-shadow: none !important;
    transition: background 140ms ease-out, border-color 140ms ease-out, transform 140ms ease-out !important;
}

.schoolrunsweek-assignment-card:hover {
    border-color: rgba(137, 151, 205, 0.18) !important;
    background: rgba(15, 18, 27, 0.48) !important;
    transform: translateY(-1px) !important;
}

.schoolrunsweek-assignment-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto !important;
    align-items: start !important;
    gap: 10px !important;
    padding: 10px !important;
}

.schoolrunsweek-assignment-delete,
.schoolrunsweek-assignment-adult,
.schoolrunsweek-assignment-children {
    grid-row: auto !important;
}

.schoolrunsweek-assignment-delete {
    grid-column: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
}

.schoolrunsweek-assignment-adult {
    grid-column: 1 !important;
    min-width: 0 !important;
}

.schoolrunsweek-assignment-blank {
    display: none !important;
}

.schoolrunsweek-assignment-children {
    grid-column: 2 !important;
    min-width: 0 !important;
}

.schoolrunsweek-assignment-display {
    display: grid !important;
    gap: 5px !important;
    min-width: 0 !important;
}

.schoolrunsweek-assignment-name {
    min-width: 0 !important;
    overflow: hidden !important;
    color: rgba(237, 233, 225, 0.94) !important;
    font-size: 0.86rem !important;
    font-weight: 760 !important;
    line-height: 1.15 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.schoolrunsweek-assignment-meta,
.schoolrunsweek-chip-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    margin: 0 !important;
}

.schoolrunsweek-chip {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 22px !important;
    padding: 0 7px !important;
    border: 1px solid rgba(137, 151, 205, 0.12) !important;
    border-radius: 999px !important;
    background: rgba(126, 142, 201, 0.075) !important;
    color: rgba(185, 197, 248, 0.76) !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}

.schoolrunsweek-assignment-actions {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 5px !important;
    min-width: max-content !important;
}

.schoolrunsweek-assignment-actions .mud-chip {
    height: 24px !important;
    min-height: 24px !important;
    padding-inline: 8px !important;
    border-radius: 999px !important;
    border-color: rgba(255, 255, 255, 0.075) !important;
    color: rgba(196, 201, 214, 0.62) !important;
    background: rgba(255, 255, 255, 0.030) !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    box-shadow: none !important;
}

.schoolrunsweek-delete-button.mud-icon-button,
.schoolrunsweek-inline-edit.mud-icon-button {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    padding: 0 !important;
    border-radius: 9px !important;
    color: rgba(196, 201, 214, 0.70) !important;
    background: rgba(255, 255, 255, 0.030) !important;
}

.schoolrunsweek-delete-button.mud-icon-button {
    color: rgba(229, 116, 116, 0.72) !important;
}

.schoolrunsweek-assignment-editor {
    display: grid !important;
    gap: 9px !important;
    margin: 8px !important;
    padding: 10px !important;
    border: 1px solid rgba(205, 177, 116, 0.14) !important;
    border-radius: 12px !important;
    background: linear-gradient(180deg, rgba(13, 16, 24, 0.72), rgba(6, 8, 12, 0.58)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 10px 26px rgba(0, 0, 0, 0.14) !important;
}

.schoolrunsweek-editor-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    min-height: 20px !important;
    color: rgba(196, 201, 214, 0.52) !important;
    font-size: 0.62rem !important;
    font-weight: 780 !important;
    letter-spacing: 0.12em !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
}

.schoolrunsweek-editor-header span:last-child {
    color: rgba(205, 177, 116, 0.58) !important;
    letter-spacing: 0.08em !important;
}

.schoolrunsweek-editor-control {
    display: grid !important;
    gap: 5px !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

.schoolrunsweek-editor-label {
    color: rgba(196, 201, 214, 0.58) !important;
    font-size: 0.56rem !important;
    font-weight: 820 !important;
    letter-spacing: 0.13em !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
}

.schoolrunsweek-editor-select {
    box-sizing: border-box !important;
    width: 100% !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 34px 0 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.075) !important;
    border-radius: 10px !important;
    background:
        linear-gradient(180deg, rgba(16, 19, 28, 0.94), rgba(8, 10, 16, 0.92)) !important;
    color: rgba(237, 233, 225, 0.90) !important;
    font: inherit !important;
    font-size: 0.84rem !important;
    font-weight: 720 !important;
    line-height: 42px !important;
    outline: none !important;
    appearance: auto !important;
}

.schoolrunsweek-editor-select:focus {
    border-color: rgba(205, 177, 116, 0.38) !important;
    box-shadow: 0 0 0 3px rgba(205, 177, 116, 0.085) !important;
}

.schoolrunsweek-editor-children {
    padding-top: 1px !important;
}

.schoolrunsweek-editor-child-options {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    min-height: 32px !important;
}

.schoolrunsweek-editor-child-option {
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 30px !important;
    padding: 0 9px !important;
    border: 1px solid rgba(137, 151, 205, 0.12) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.028) !important;
    color: rgba(196, 201, 214, 0.70) !important;
    cursor: pointer !important;
    user-select: none !important;
    transition: background 140ms ease-out, border-color 140ms ease-out, color 140ms ease-out !important;
}

.schoolrunsweek-editor-child-option input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.schoolrunsweek-editor-child-option span {
    font-size: 0.72rem !important;
    font-weight: 720 !important;
    line-height: 1 !important;
}

.schoolrunsweek-editor-child-option.is-selected {
    border-color: rgba(205, 177, 116, 0.30) !important;
    background: rgba(205, 177, 116, 0.105) !important;
    color: rgba(244, 230, 200, 0.88) !important;
}

.schoolrunsweek-editor-child-option:focus-within {
    border-color: rgba(205, 177, 116, 0.42) !important;
    box-shadow: 0 0 0 3px rgba(205, 177, 116, 0.08) !important;
}

.schoolrunsweek-assignment-edit-actions {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 6px !important;
    margin-top: 2px !important;
    padding: 8px 0 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.055) !important;
}

.schoolrunsweek-assignment-edit-actions .mud-button-root {
    height: 30px !important;
    min-height: 30px !important;
    border-radius: 9px !important;
    padding-inline: 11px !important;
    font-size: 0.72rem !important;
    font-weight: 760 !important;
    text-transform: none !important;
}

.schoolrunsweek-assignment-save.mud-button-root {
    min-width: 64px !important;
    background: rgba(126, 142, 201, 0.28) !important;
    color: rgba(244, 246, 255, 0.92) !important;
    box-shadow: none !important;
}

.schoolrunsweek-assignment-cancel.mud-button-root {
    min-width: 58px !important;
    color: rgba(196, 201, 214, 0.58) !important;
    background: transparent !important;
}

.schoolrunsweek-field .mud-input,
.schoolrunsweek-field .mud-input-root {
    min-height: 42px !important;
    height: 42px !important;
    border-radius: 14px !important;
}

.schoolrunsweek-field .mud-input-slot {
    min-height: 42px !important;
    height: 42px !important;
    padding: 12px 36px 2px 12px !important;
    font-size: 0.82rem !important;
}

.schoolrunsweek-field .mud-input-label,
.schoolrunsweek-field .mud-input-label.mud-shrink {
    transform: translate(12px, 4px) scale(1) !important;
    font-size: 0.54rem !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
}

.schoolrunsweek-blocked {
    margin: 12px !important;
    padding: 12px !important;
    border: 1px solid rgba(200, 173, 127, 0.16) !important;
    border-radius: 14px !important;
    background: rgba(200, 173, 127, 0.055) !important;
}

.schoolrunsweek-blocked-title {
    color: rgba(222, 188, 134, 0.92) !important;
    font-size: 0.86rem !important;
    font-weight: 780 !important;
}

.schoolrunsweek-blocked-notes {
    margin-top: 6px !important;
    color: rgba(222, 188, 134, 0.68) !important;
    font-size: 0.78rem !important;
    line-height: 1.35 !important;
}

@media (min-width: 1700px) {
    .schoolrunsweek-days {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

    .schoolrunsweek-day-card {
        min-height: 560px !important;
    }
}

@media (min-width: 1024px) and (max-width: 1699px) {
    .schoolrunsweek-days {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 18px !important;
    }

    .schoolrunsweek-day-card {
        min-height: 0 !important;
    }

    .schoolrunsweek-slot-stack {
        grid-template-rows: auto auto !important;
    }

    .schoolrunsweek-slot-content {
        min-height: 210px !important;
    }
}

@media (max-width: 767px) {
    .schoolrunsweek-page {
        width: 100% !important;
        max-width: 100% !important;
    }

    .schoolrunsweek-header {
        margin-bottom: 12px !important;
    }

    .schoolrunsweek-page-context {
        font-size: 1rem !important;
        line-height: 1.35 !important;
    }

    .schoolrunsweek-toolbar {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        width: 100% !important;
        padding: 8px !important;
        margin-bottom: 14px !important;
    }

    .schoolrunsweek-nav-wrap {
        grid-template-columns: 44px minmax(0, 1fr) 44px !important;
        padding-right: 0 !important;
        margin-right: 0 !important;
        border-right: 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.065) !important;
        padding-bottom: 8px !important;
    }

    .schoolrunsweek-date-wrap {
        width: 100% !important;
    }

    .schoolrunsweek-days {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        overflow: visible !important;
        padding-bottom: 0 !important;
    }

    .schoolrunsweek-day-card {
        min-height: 0 !important;
        border-radius: 18px !important;
    }

    .schoolrunsweek-day-header {
        padding: 13px 14px !important;
    }

    .schoolrunsweek-day-name {
        font-size: 0.82rem !important;
    }

    .schoolrunsweek-slot-stack {
        grid-template-rows: auto auto !important;
    }

    .schoolrunsweek-slot-content {
        padding: 12px !important;
    }

    .schoolrunsweek-slot-header {
        min-height: 34px !important;
    }

    .schoolrunsweek-assignment-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: auto auto !important;
        gap: 8px !important;
        padding: 10px !important;
    }

    .schoolrunsweek-assignment-delete {
        grid-column: auto !important;
        grid-row: auto !important;
        align-self: center !important;
        padding-top: 0 !important;
    }

    .schoolrunsweek-assignment-adult {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    .schoolrunsweek-assignment-children {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }

    .schoolrunsweek-assignment-name {
        white-space: normal !important;
    }

    .schoolrunsweek-assignment-actions {
        justify-content: flex-start !important;
        min-width: 0 !important;
    }

    .schoolrunsweek-field .mud-input,
    .schoolrunsweek-field .mud-input-root {
        min-height: 48px !important;
        height: 48px !important;
    }

    .schoolrunsweek-field .mud-input-slot {
        min-height: 48px !important;
        height: 48px !important;
        padding-top: 15px !important;
    }
}


/* ===== absorbed from service.control.css ===== */
/* Service / Asset Operations final command-dashboard layer. Loaded after app.css on purpose. */
.maintenance-page {
    --service-surface: rgba(12, 15, 22, 0.70);
    --service-surface-strong: rgba(17, 21, 31, 0.82);
    --service-border: rgba(255, 255, 255, 0.062);
    --service-border-strong: rgba(137, 151, 205, 0.22);
    --service-text: rgba(237, 233, 225, 0.93);
    --service-muted: rgba(196, 201, 214, 0.58);
    width: min(100%, 1560px) !important;
    max-width: 1560px !important;
    margin-inline: auto !important;
}

.maintenance-page .app-page-shell-header {
    align-items: center !important;
    gap: 18px !important;
    margin-bottom: 18px !important;
}

.maintenance-page .app-page-shell-title-block {
    max-width: 820px !important;
}

.maintenance-page .app-page-title {
    color: var(--service-text) !important;
    font-size: clamp(2rem, 2.25vw, 2.35rem) !important;
    font-weight: 650 !important;
}

.maintenance-page .app-page-subtitle,
.maintenance-page .app-page-context:not(.app-page-context-chip-row) {
    color: rgba(196, 201, 214, 0.64) !important;
    font-size: 0.98rem !important;
}

.maintenance-page .app-page-shell-toolbar,
.maintenance-page .app-page-context-chip-row {
    justify-self: end !important;
    align-self: center !important;
}

.maintenance-page .app-page-context-chip-row {
    height: 42px !important;
    padding-inline: 14px !important;
    border-color: rgba(137, 151, 205, 0.22) !important;
    background: rgba(126, 142, 201, 0.11) !important;
}

.maintenance-page-content {
    display: grid !important;
    gap: 14px !important;
    width: 100% !important;
    max-width: none !important;
}

.maintenance-quick-filter-bar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    margin: 0 0 4px !important;
    padding: 8px !important;
    border: 1px solid var(--service-border) !important;
    border-radius: 18px !important;
    background: linear-gradient(180deg, rgba(16, 20, 29, 0.78), rgba(8, 11, 17, 0.66)) !important;
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.19), inset 0 1px 0 rgba(255, 255, 255, 0.034) !important;
    backdrop-filter: blur(3px) !important;
}

.maintenance-quick-filter-chips,
.maintenance-quick-filter-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
}

.maintenance-quick-filter-actions {
    justify-content: flex-end !important;
}

.maintenance-quick-filter-chips .mud-chip,
.maintenance-quick-filter-actions .mud-chip,
.maintenance-quick-filter-actions .mud-button-root {
    height: 36px !important;
    min-height: 36px !important;
    border-radius: 999px !important;
    border-color: rgba(255, 255, 255, 0.065) !important;
    background: rgba(255, 255, 255, 0.034) !important;
    color: rgba(196, 201, 214, 0.76) !important;
    font-size: 0.78rem !important;
    font-weight: 760 !important;
    text-transform: none !important;
    box-shadow: none !important;
}

.maintenance-quick-filter-chips .mud-chip-filled,
.maintenance-quick-filter-chips .mud-chip-color-primary,
.maintenance-quick-filter-actions .mud-button-root:hover {
    border-color: rgba(137, 151, 205, 0.30) !important;
    background: rgba(126, 142, 201, 0.18) !important;
    color: rgba(237, 233, 225, 0.94) !important;
}

.maintenance-section-stack {
    display: grid !important;
    gap: 14px !important;
}

.maintenance-section-card {
    padding: 14px 16px !important;
    border: 1px solid var(--service-border) !important;
    border-radius: 18px !important;
    background: rgba(12, 15, 22, 0.46) !important;
    box-shadow: none !important;
}

.maintenance-section-card:first-of-type {
    min-height: 0 !important;
    padding: 13px 16px !important;
    border-color: rgba(200, 173, 127, 0.12) !important;
    background: linear-gradient(180deg, rgba(200, 173, 127, 0.045), rgba(255, 255, 255, 0.012)) !important;
}

.maintenance-section-card:first-of-type .maintenance-section-header {
    margin-bottom: 0 !important;
}

.maintenance-section-card:first-of-type .soft-muted:last-child,
.maintenance-section-card:first-of-type > .mud-typography-body2 {
    margin-top: 4px !important;
    color: rgba(196, 201, 214, 0.58) !important;
    font-size: 0.86rem !important;
}

.maintenance-section-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 0 0 12px !important;
}

.maintenance-section-title {
    color: rgba(237, 233, 225, 0.90) !important;
    font-size: 0.78rem !important;
    font-weight: 820 !important;
    letter-spacing: 0.14em !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
}

.maintenance-section-header .soft-muted {
    margin-top: 4px !important;
    color: rgba(196, 201, 214, 0.48) !important;
    font-size: 0.80rem !important;
}

.maintenance-section-header .mud-chip {
    height: 26px !important;
    min-height: 26px !important;
    padding-inline: 9px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.040) !important;
    color: rgba(237, 233, 225, 0.82) !important;
    font-size: 0.74rem !important;
    font-weight: 760 !important;
}

.maintenance-scheduled-panels {
    display: grid !important;
    gap: 12px !important;
}

.maintenance-scheduled-panels .mud-expand-panel,
.maintenance-scheduled-panels .mud-expand-panel-header,
.maintenance-scheduled-panels .mud-expand-panel-content {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.maintenance-scheduled-panels .mud-expand-panel {
    border: 1px solid var(--service-border) !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    background: rgba(12, 15, 22, 0.40) !important;
}

.maintenance-scheduled-panels .mud-expand-panel-header {
    min-height: 54px !important;
    padding: 13px 16px !important;
}

.maintenance-scheduled-panels .mud-expand-panel-content {
    padding: 0 16px 14px !important;
}

.maintenance-group-card {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.maintenance-group-card + .maintenance-group-card {
    margin-top: 16px !important;
}

.maintenance-group-header {
    margin: 0 0 8px !important;
    padding: 0 0 8px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.055) !important;
}

.maintenance-group-title {
    color: rgba(237, 233, 225, 0.88) !important;
    font-size: 0.95rem !important;
    font-weight: 760 !important;
    letter-spacing: 0.02em !important;
    line-height: 1.1 !important;
    text-transform: uppercase !important;
}

.maintenance-group-count {
    margin-top: 3px !important;
    color: rgba(196, 201, 214, 0.46) !important;
    font-size: 0.76rem !important;
}

.maintenance-item-card {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.052) !important;
    border-radius: 14px !important;
    background: rgba(5, 7, 11, 0.22) !important;
    box-shadow: none !important;
    transition: background 140ms ease-out, border-color 140ms ease-out, transform 140ms ease-out !important;
}

.maintenance-item-card + .maintenance-item-card {
    margin-top: 8px !important;
}

.maintenance-item-card:hover {
    border-color: rgba(137, 151, 205, 0.18) !important;
    background: rgba(17, 21, 31, 0.56) !important;
    transform: translateY(-1px) !important;
}

.maintenance-item-card.overdue {
    border-color: rgba(229, 116, 116, 0.20) !important;
    background: rgba(60, 24, 28, 0.20) !important;
}

.maintenance-item-card.today {
    border-color: rgba(137, 151, 205, 0.20) !important;
}

.maintenance-item-card.done {
    opacity: 0.74 !important;
}

.maintenance-item-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 10px 12px !important;
}

.maintenance-item-main {
    display: grid !important;
    gap: 5px !important;
    min-width: 0 !important;
}

.maintenance-item-top {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    min-width: 0 !important;
    margin: 0 !important;
}

.maintenance-item-title {
    min-width: 0 !important;
    overflow: hidden !important;
    color: rgba(237, 233, 225, 0.94) !important;
    font-size: 0.96rem !important;
    font-weight: 780 !important;
    line-height: 1.18 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.maintenance-item-tags {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 5px !important;
    margin: 0 !important;
}

.maintenance-item-tags .mud-chip,
.maintenance-status-chip.mud-chip,
.maintenance-item-top .mud-chip {
    height: 22px !important;
    min-height: 22px !important;
    padding-inline: 7px !important;
    border-radius: 999px !important;
    border-color: rgba(255, 255, 255, 0.070) !important;
    background: rgba(255, 255, 255, 0.042) !important;
    color: rgba(196, 201, 214, 0.76) !important;
    font-size: 0.66rem !important;
    font-weight: 760 !important;
}

.maintenance-status-chip.mud-chip {
    background: rgba(126, 142, 201, 0.11) !important;
    color: rgba(185, 197, 248, 0.92) !important;
}

.maintenance-item-main .mud-typography-body2,
.maintenance-due-text,
.maintenance-item-meta {
    color: rgba(196, 201, 214, 0.56) !important;
    font-size: 0.78rem !important;
    line-height: 1.28 !important;
}

.maintenance-item-main .location-action-button {
    min-height: 28px !important;
    width: fit-content !important;
    max-width: 100% !important;
}

.maintenance-item-actions {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    min-width: max-content !important;
}

.maintenance-item-primary-actions {
    display: flex !important;
}

.maintenance-item-primary-actions .mud-button-root,
.maintenance-item-actions > .mud-button-root {
    height: 32px !important;
    min-height: 32px !important;
    width: auto !important;
    min-width: 92px !important;
    padding-inline: 13px !important;
    border-radius: 999px !important;
    color: rgba(8, 10, 15, 0.94) !important;
    background: linear-gradient(135deg, rgba(145, 160, 216, 0.96), rgba(118, 132, 190, 0.92)) !important;
    box-shadow: none !important;
    font-size: 0.76rem !important;
    font-weight: 800 !important;
    text-transform: none !important;
}

.maintenance-item-primary-actions .mud-button-root:hover,
.maintenance-item-actions > .mud-button-root:hover {
    filter: brightness(1.06) !important;
}

.maintenance-item-secondary-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
}

.maintenance-item-secondary-actions .mud-icon-button-root,
.maintenance-item-secondary-actions .mud-menu-button-root,
.maintenance-item-secondary-actions .mud-icon-button,
.maintenance-item-secondary-actions .mud-menu-button {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    border-radius: 10px !important;
    color: rgba(196, 201, 214, 0.68) !important;
    background: rgba(255, 255, 255, 0.030) !important;
    border: 1px solid rgba(255, 255, 255, 0.055) !important;
}

.maintenance-history-block {
    margin-top: 8px !important;
    padding: 8px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.055) !important;
    background: rgba(0, 0, 0, 0.14) !important;
}

.maintenance-history-row {
    padding: 8px 10px !important;
    border-radius: 10px !important;
}

.maintenance-empty-state {
    min-height: 112px !important;
    padding: 18px !important;
    border-radius: 18px !important;
}

/* Add/Edit maintenance dialog: compact operational form. */
.mud-dialog:has(.maintenance-form-grid) {
    max-width: min(940px, calc(100vw - 32px)) !important;
}

.mud-dialog:has(.maintenance-form-grid) .mud-dialog-content {
    padding: 18px 20px 110px !important;
}

.mud-dialog:has(.maintenance-form-grid) .mud-dialog-actions {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 2 !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    padding: 12px 20px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.070) !important;
    background: linear-gradient(180deg, rgba(10, 13, 20, 0.94), rgba(5, 7, 11, 0.98)) !important;
}

.mud-dialog:has(.maintenance-form-grid) .config-dialog-shell {
    gap: 12px !important;
}

.mud-dialog:has(.maintenance-form-grid) .config-dialog-section {
    padding: 14px !important;
    border-radius: 16px !important;
}

.mud-dialog:has(.maintenance-form-grid) .config-dialog-section-header {
    margin-bottom: 10px !important;
}

.maintenance-form-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

.maintenance-field-title {
    grid-column: span 2 !important;
}

.maintenance-switch-field {
    grid-column: span 2 !important;
}

.maintenance-inline-switch {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 12px !important;
    min-height: 42px !important;
    padding: 8px 10px !important;
    border: 1px solid rgba(255, 255, 255, 0.055) !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.025) !important;
}

.maintenance-inline-switch .mud-switch {
    grid-column: 2 !important;
    grid-row: 1 !important;
}

.maintenance-inline-switch > .mud-input-control,
.maintenance-inline-switch > .mud-input-control-boolean-input {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: auto !important;
    min-width: 0 !important;
    justify-self: end !important;
}

.maintenance-inline-switch span {
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    color: rgba(237, 233, 225, 0.82) !important;
    font-size: 0.84rem !important;
    font-weight: 700 !important;
}

.config-dialog-toggle-stack {
    display: grid !important;
    gap: 8px !important;
}

@media (max-width: 900px) {
    .maintenance-page .app-page-shell-header {
        align-items: flex-start !important;
    }

    .maintenance-page .app-page-shell-toolbar,
    .maintenance-page .app-page-context-chip-row {
        justify-self: start !important;
    }

    .maintenance-quick-filter-bar {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .maintenance-quick-filter-chips {
        overflow-x: auto !important;
        padding-bottom: 2px !important;
        scrollbar-width: none !important;
    }

    .maintenance-quick-filter-chips::-webkit-scrollbar {
        display: none !important;
    }
}

@media (max-width: 767px) {
    .maintenance-page-content {
        gap: 12px !important;
    }

    .maintenance-section-card,
    .maintenance-scheduled-panels .mud-expand-panel {
        border-radius: 16px !important;
    }

    .maintenance-section-header {
        gap: 8px !important;
    }

    .maintenance-item-row {
        grid-template-columns: 1fr !important;
        gap: 9px !important;
        padding: 11px !important;
    }

    .maintenance-item-title {
        white-space: normal !important;
        font-size: 0.94rem !important;
    }

    .maintenance-item-actions {
        justify-content: space-between !important;
        min-width: 0 !important;
        width: 100% !important;
    }

    .maintenance-item-primary-actions {
        flex: 1 1 auto !important;
    }

    .maintenance-item-primary-actions .mud-button-root,
    .maintenance-item-actions > .mud-button-root {
        width: auto !important;
        min-width: 104px !important;
    }

    .mud-dialog:has(.maintenance-form-grid) {
        width: calc(100vw - 16px) !important;
        max-width: none !important;
        max-height: calc(100dvh - 24px) !important;
        margin: 8px !important;
        border-radius: 20px !important;
    }

    .mud-dialog:has(.maintenance-form-grid) .mud-dialog-content {
        max-height: calc(100dvh - 150px) !important;
        overflow-y: auto !important;
        padding: 14px 14px 118px !important;
    }

    .maintenance-form-grid {
        grid-template-columns: 1fr !important;
        gap: 9px !important;
    }

    .maintenance-field-title {
        grid-column: auto !important;
    }

    .mud-dialog:has(.maintenance-form-grid) .config-dialog-section {
        padding: 12px !important;
    }

    .maintenance-inline-switch {
        min-height: 44px !important;
    }
}


/* ===== absorbed from directory.control.css ===== */
/* OMNISANT Directory control surface.
   Loaded after app.css to turn the contacts page into a compact concierge roster. */

.ios-contacts-page.network-page {
    --directory-surface: linear-gradient(180deg, rgba(24, 28, 38, 0.9), rgba(13, 16, 24, 0.88));
    --directory-surface-hover: linear-gradient(180deg, rgba(29, 34, 47, 0.94), rgba(15, 18, 27, 0.92));
    --directory-border: rgba(255, 255, 255, 0.07);
    --directory-border-strong: rgba(127, 150, 242, 0.24);
    --directory-text: var(--omni-text, #f4f1eb);
    --directory-text-soft: var(--omni-text-soft, #c4c9d6);
    --directory-text-muted: var(--omni-text-muted, #8e97aa);
    --directory-accent: var(--omni-primary, #7f96f2);
    width: min(100%, 1280px) !important;
    max-width: 1280px !important;
}

.ios-contacts-page.network-page .app-page-header,
.ios-contacts-page.network-page .page-header,
.ios-contacts-page.network-page .dashboard-header {
    padding-bottom: 18px !important;
    margin-bottom: 16px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.045);
}

.ios-contacts-page.network-page h1 {
    margin-bottom: 8px !important;
}

.ios-contacts-page.network-page .page-subtitle,
.ios-contacts-page.network-page .app-page-subtitle {
    max-width: 720px !important;
}

.ios-contacts-page .network-filter-bar {
    width: fit-content !important;
    max-width: 100% !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 0 20px !important;
    padding: 6px !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 999px !important;
    background: rgba(18, 22, 31, 0.72) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 14px 36px rgba(0, 0, 0, 0.18) !important;
    backdrop-filter: blur(10px) !important;
}

.ios-contacts-page .network-filter-bar .mud-chip {
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 15px !important;
    border-radius: 999px !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    color: rgba(196, 201, 214, 0.78) !important;
    font-size: 0.82rem !important;
    font-weight: 760 !important;
    letter-spacing: 0.005em !important;
    transition: background 160ms ease-out, border-color 160ms ease-out, color 160ms ease-out, box-shadow 160ms ease-out;
}

.ios-contacts-page .network-filter-bar .mud-chip-filled,
.ios-contacts-page .network-filter-bar .mud-chip-color-primary {
    background: linear-gradient(180deg, rgba(127, 150, 242, 0.28), rgba(127, 150, 242, 0.14)) !important;
    border-color: rgba(127, 150, 242, 0.3) !important;
    color: rgba(244, 241, 235, 0.96) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 20px rgba(54, 70, 130, 0.16) !important;
}

.ios-contacts-page .network-filter-bar .mud-chip:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    color: rgba(244, 241, 235, 0.92) !important;
}

.ios-contacts-page .ios-contact-group {
    margin: 0 0 18px !important;
}

.ios-contacts-page .ios-contact-group-title {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 0 9px !important;
    color: rgba(196, 201, 214, 0.74) !important;
    font-size: 0.72rem !important;
    font-weight: 820 !important;
    letter-spacing: 0.17em !important;
    text-transform: uppercase !important;
}

.ios-contacts-page .ios-contact-group-title::after {
    content: "";
    min-width: 40px;
    height: 1px;
    flex: 1 1 auto;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.12), transparent);
}

.ios-contacts-page .network-contact-grid,
.ios-contacts-page .network-contact-grid-emergency {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 9px !important;
}

.ios-contacts-page .network-contact-card,
.ios-contacts-page .network-contact-card.ios-contact-row {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) auto !important;
    grid-template-areas: "avatar body actions" !important;
    align-items: center !important;
    column-gap: 10px !important;
    min-height: 82px !important;
    padding: 10px 12px !important;
    border: 1px solid var(--directory-border) !important;
    border-radius: 15px !important;
    background: var(--directory-surface) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.032), 0 10px 28px rgba(0, 0, 0, 0.2) !important;
    cursor: pointer !important;
    overflow: hidden !important;
    transition: transform 150ms ease-out, border-color 150ms ease-out, background 150ms ease-out, box-shadow 150ms ease-out;
}

.ios-contacts-page .network-contact-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at top left, rgba(127, 150, 242, 0.08), transparent 38%);
    opacity: 0.65;
}

.ios-contacts-page .network-contact-card:hover {
    transform: translateY(-1px) !important;
    border-color: var(--directory-border-strong) !important;
    background: var(--directory-surface-hover) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 14px 34px rgba(0, 0, 0, 0.26) !important;
}

.ios-contacts-page .network-contact-card-emergency {
    border-color: rgba(255, 119, 119, 0.14) !important;
}

.ios-contacts-page .network-contact-card-emergency::before {
    background: radial-gradient(circle at top left, rgba(255, 119, 119, 0.1), transparent 38%);
}

.ios-contacts-page .network-contact-card .ios-contact-avatar {
    grid-area: avatar !important;
    width: 38px !important;
    height: 38px !important;
    align-self: center !important;
    border-radius: 50% !important;
    background: linear-gradient(180deg, rgba(127, 150, 242, 0.32), rgba(58, 73, 132, 0.24)) !important;
    border: 1px solid rgba(127, 150, 242, 0.18) !important;
    color: rgba(190, 204, 255, 0.96) !important;
    font-size: 0.74rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.01em !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    z-index: 1;
}

.ios-contacts-page .network-contact-card .ios-contact-avatar-emergency {
    background: linear-gradient(180deg, rgba(255, 119, 119, 0.28), rgba(111, 45, 50, 0.24)) !important;
    border-color: rgba(255, 119, 119, 0.2) !important;
    color: rgba(255, 183, 183, 0.98) !important;
}

.ios-contacts-page .network-contact-card .ios-contact-main {
    grid-area: body !important;
    min-width: 0 !important;
    z-index: 1;
    cursor: pointer;
}

.ios-contacts-page .network-contact-card .ios-contact-avatar {
    cursor: pointer;
}

.ios-contacts-page .network-contact-card .ios-contact-name-row {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-width: 0 !important;
}

.ios-contacts-page .network-contact-card .ios-contact-name {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: var(--directory-text) !important;
    font-size: 0.92rem !important;
    font-weight: 740 !important;
    line-height: 1.08 !important;
    letter-spacing: -0.005em !important;
}

.ios-contacts-page .network-contact-card .ios-contact-badge {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    min-height: 18px !important;
    padding: 0 6px !important;
    border-radius: 999px !important;
    background: rgba(127, 150, 242, 0.095) !important;
    border: 1px solid rgba(127, 150, 242, 0.13) !important;
    color: rgba(202, 211, 255, 0.76) !important;
    font-size: 0.58rem !important;
    font-weight: 760 !important;
    line-height: 1 !important;
}

.ios-contacts-page .network-contact-card-emergency .ios-contact-badge {
    background: rgba(255, 119, 119, 0.095) !important;
    border-color: rgba(255, 119, 119, 0.13) !important;
    color: rgba(255, 190, 190, 0.78) !important;
}

.ios-contacts-page .network-contact-card .ios-contact-subtitle,
.ios-contacts-page .network-contact-card .ios-contact-meta {
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.ios-contacts-page .network-contact-card .ios-contact-subtitle {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    margin-top: 3px !important;
    color: rgba(196, 201, 214, 0.76) !important;
    font-size: 0.75rem !important;
    line-height: 1.16 !important;
}

.ios-contacts-page .network-contact-card .ios-contact-dot {
    color: rgba(142, 151, 170, 0.58) !important;
}

.ios-contacts-page .network-contact-card .ios-contact-subtitle > span:not(.ios-contact-dot) {
    color: rgba(216, 221, 234, 0.88) !important;
    font-weight: 700 !important;
}

.ios-contacts-page .network-contact-card .ios-contact-meta {
    margin-top: 2px !important;
    color: rgba(142, 151, 170, 0.82) !important;
    font-size: 0.72rem !important;
    line-height: 1.16 !important;
}

.ios-contacts-page .network-contact-card .ios-contact-meta + .ios-contact-meta {
    display: none !important;
}

.ios-contacts-page .network-contact-card .ios-contact-actions {
    grid-area: actions !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 3px !important;
    align-self: center !important;
    z-index: 2;
}

.contact-card-menu-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    min-width: 30px;
    min-height: 30px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.045);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.035);
    color: rgba(244, 241, 235, 0.82);
    cursor: pointer;
    opacity: 0.74;
    transition: background 140ms ease-out, color 140ms ease-out, opacity 140ms ease-out, border-color 140ms ease-out;
}

.contact-card-menu-trigger:hover,
.contact-card-menu-trigger:focus-visible {
    background: rgba(127, 150, 242, 0.13);
    border-color: rgba(127, 150, 242, 0.24);
    color: rgba(255, 250, 240, 0.96);
    opacity: 1;
    outline: none;
}

.contact-card-menu-trigger .mud-icon-root {
    width: 19px;
    height: 19px;
}

.contact-card-action-popover {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 8;
    width: 156px;
    padding: 6px;
    border: 1px solid rgba(214, 222, 247, 0.13);
    border-radius: 12px;
    background: rgba(18, 21, 31, 0.98);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.ios-contacts-page .network-contact-card .ios-contact-actions .mud-icon-button,
.ios-contacts-page .network-contact-card .ios-contact-actions .mud-menu-button-root {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    padding: 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.045) !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.035) !important;
    color: rgba(244, 241, 235, 0.82) !important;
    opacity: 0.74 !important;
    transition: background 140ms ease-out, color 140ms ease-out, opacity 140ms ease-out, border-color 140ms ease-out;
}

.ios-contacts-page .network-contact-card .ios-contact-actions .mud-icon-button:hover,
.ios-contacts-page .network-contact-card .ios-contact-actions .mud-menu-button-root:hover {
    background: rgba(127, 150, 242, 0.13) !important;
    border-color: rgba(127, 150, 242, 0.24) !important;
    color: rgba(255, 250, 240, 0.96) !important;
    opacity: 1 !important;
}

.contact-action-menu-button {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 42px;
    padding: 0 14px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: rgba(239, 243, 252, 0.9);
    font: inherit;
    font-size: 0.88rem;
    font-weight: 720;
    text-align: left;
    cursor: pointer;
}

.contact-action-menu-button:hover,
.contact-action-menu-button:focus-visible {
    background: rgba(127, 150, 242, 0.13);
    color: rgba(255, 250, 240, 0.98);
    outline: none;
}

.contact-action-menu-button-danger {
    color: rgba(255, 172, 172, 0.9);
}

.contact-action-menu-button-danger:hover,
.contact-action-menu-button-danger:focus-visible {
    background: rgba(255, 119, 119, 0.1);
    color: rgba(255, 203, 203, 0.98);
}

/* Contact add/edit dialog. */
.mud-dialog:has(.contact-edit-dialog-shell) {
    width: min(720px, calc(100vw - 40px)) !important;
    max-width: min(720px, calc(100vw - 40px)) !important;
    border-radius: 22px !important;
}

.mud-dialog:has(.contact-edit-dialog-shell) .mud-dialog-content {
    padding: 18px 20px 12px !important;
}

.mud-dialog:has(.contact-edit-dialog-shell) .mud-dialog-actions {
    padding: 14px 20px 18px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    justify-content: flex-end !important;
    gap: 10px !important;
}

.contact-edit-dialog-shell {
    display: grid !important;
    gap: 12px !important;
}

.contact-edit-form-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
}

.contact-edit-section {
    padding: 14px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(255, 255, 255, 0.055) !important;
    background: rgba(255, 255, 255, 0.028) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
}

.contact-edit-section-location,
.contact-edit-section-flags {
    padding: 14px !important;
}

.contact-edit-section-flags {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

.contact-edit-section-flags .config-dialog-section-header {
    grid-column: 1 / -1 !important;
}

.contact-edit-section .config-dialog-section-header {
    margin-bottom: 10px !important;
}

.contact-edit-section .config-dialog-section-kicker {
    color: rgba(196, 201, 214, 0.72) !important;
    font-size: 0.68rem !important;
    font-weight: 820 !important;
    letter-spacing: 0.15em !important;
}

.contact-edit-section .config-dialog-helper {
    margin-top: 2px !important;
    font-size: 0.78rem !important;
    line-height: 1.32 !important;
}

.contact-edit-dialog-shell .mud-input-control {
    margin-bottom: 10px !important;
}

.contact-edit-dialog-shell .mud-input-control:last-child {
    margin-bottom: 0 !important;
}

.contact-edit-toggle-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    justify-content: stretch !important;
    min-height: 42px !important;
    gap: 10px !important;
    padding: 9px 10px !important;
    border: 1px solid rgba(255, 255, 255, 0.065) !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.035) !important;
    color: rgba(244, 241, 235, 0.9) !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    min-width: 0 !important;
}

.contact-edit-toggle-row + .contact-edit-toggle-row {
    margin-top: 0 !important;
}

.contact-edit-toggle-row > span {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.contact-edit-toggle-row .mud-checkbox {
    justify-self: end !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
}

.contact-edit-toggle-row .mud-button-root {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    padding: 0 !important;
}

.contact-edit-toggle-row .mud-icon-root {
    width: 20px !important;
    height: 20px !important;
}

@media (max-width: 1023px) {
    .ios-contacts-page .network-contact-grid,
    .ios-contacts-page .network-contact-grid-emergency {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 767px) {
    .ios-contacts-page.network-page {
        width: 100% !important;
        max-width: none !important;
    }

    .ios-contacts-page .network-filter-bar {
        width: 100% !important;
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
        border-radius: 18px !important;
        margin-bottom: 16px !important;
    }

    .ios-contacts-page .network-filter-bar .mud-chip {
        flex: 0 0 auto !important;
        height: 32px !important;
        min-height: 32px !important;
        padding: 0 12px !important;
        font-size: 0.78rem !important;
    }

    .ios-contacts-page .ios-contact-group {
        margin-bottom: 16px !important;
    }

    .ios-contacts-page .network-contact-grid,
    .ios-contacts-page .network-contact-grid-emergency {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .ios-contacts-page .network-contact-card,
    .ios-contacts-page .network-contact-card.ios-contact-row {
        grid-template-columns: 36px minmax(0, 1fr) 68px !important;
        min-height: 78px !important;
        padding: 10px !important;
        column-gap: 9px !important;
        border-radius: 15px !important;
    }

    .ios-contacts-page .network-contact-card .ios-contact-avatar {
        width: 36px !important;
        height: 36px !important;
        font-size: 0.72rem !important;
    }

    .ios-contacts-page .network-contact-card .ios-contact-name {
        font-size: 0.88rem !important;
    }

    .ios-contacts-page .network-contact-card .ios-contact-subtitle {
        font-size: 0.73rem !important;
    }

    .ios-contacts-page .network-contact-card .ios-contact-meta {
        font-size: 0.7rem !important;
    }

    .ios-contacts-page .network-contact-card .ios-contact-actions {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-content: center !important;
        width: 68px !important;
        gap: 4px !important;
    }

    .ios-contacts-page .network-contact-card .ios-contact-actions .mud-icon-button,
    .ios-contacts-page .network-contact-card .ios-contact-actions .mud-menu-button-root {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        min-height: 30px !important;
    }

    .mud-dialog:has(.contact-edit-dialog-shell) {
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        max-height: calc(100dvh - 24px) !important;
        border-radius: 20px !important;
    }

    .mud-dialog:has(.contact-edit-dialog-shell) .mud-dialog-content {
        max-height: calc(100dvh - 140px) !important;
        overflow: auto !important;
        padding: 14px 14px 104px !important;
    }

    .mud-dialog:has(.contact-edit-dialog-shell) .mud-dialog-actions {
        position: sticky !important;
        bottom: 0 !important;
        padding: 12px 14px calc(12px + env(safe-area-inset-bottom)) !important;
        background: linear-gradient(180deg, rgba(15, 18, 27, 0.86), rgba(10, 12, 18, 0.98)) !important;
        backdrop-filter: blur(12px) !important;
    }

    .contact-edit-form-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .contact-edit-section {
        padding: 12px !important;
    }

    .contact-edit-section-flags {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .contact-edit-toggle-row {
        min-height: 42px !important;
        padding: 8px 10px !important;
    }
}


/* Migrated legacy desktop/page polish layers. Sources retired: omnisant.stabilization.css, omnisant.desktop.luxury.css, omnisant.finish-pass.css. */


/* Source: omnisant.stabilization.css */

/* OMNISANT epic stabilization layer.
   This file is intentionally loaded last. It corrects accumulated page drift,
   overlap, modal density, and shared component rhythm without changing routes. */

:root,
[data-theme="dark"] {
    --omni-command-bg: #070a11;
    --omni-command-surface: rgba(18, 22, 31, 0.88);
    --omni-command-surface-2: rgba(23, 28, 39, 0.82);
    --omni-command-surface-3: rgba(12, 15, 23, 0.86);
    --omni-command-border: rgba(255, 255, 255, 0.066);
    --omni-command-border-strong: rgba(127, 150, 242, 0.28);
    --omni-command-text: #f1eee8;
    --omni-command-text-soft: rgba(196, 201, 214, 0.82);
    --omni-command-text-muted: rgba(142, 151, 170, 0.74);
    --omni-command-accent: #7b8fe0;
    --omni-command-accent-soft: rgba(123, 143, 224, 0.16);
    --omni-command-danger: #e77474;
    --omni-command-danger-soft: rgba(231, 116, 116, 0.1);
    --omni-command-radius-sm: 10px;
    --omni-command-radius-md: 14px;
    --omni-command-radius-lg: 18px;
    --omni-command-radius-xl: 22px;
    --omni-command-shadow-card: 0 18px 46px rgba(0, 0, 0, 0.26);
    --omni-command-shadow-modal: 0 28px 80px rgba(0, 0, 0, 0.52);
}

html,
body {
    background:
        radial-gradient(circle at 44% 0%, rgba(57, 67, 91, 0.22), transparent 34rem),
        radial-gradient(circle at 90% 10%, rgba(49, 57, 78, 0.12), transparent 38rem),
        linear-gradient(180deg, #080b12 0%, #05070c 54%, #030409 100%) !important;
}

body,
* {
    box-sizing: border-box;
}

/* Stable page shell and vertical rhythm. */
.app-main-content,
.app-content-canvas {
    background: transparent !important;
}

.app-page,
.ios-calendar-page,
.ios-contacts-page,
.maintenance-page,
.notes-page,
.shopping-ios-page,
.schoolrunsweek-page,
.settings-page,
.preferences-page,
.stores-page,
.kids-page,
.houses-page,
.locations-page,
.vehicles-page,
.users-page,
.dashboard-page {
    width: min(100%, 1320px) !important;
    max-width: 1320px !important;
    margin-inline: auto !important;
    padding-top: 0 !important;
}

.ios-calendar-page,
.shopping-ios-page,
.maintenance-page,
.schoolrunsweek-page {
    width: min(100%, 1460px) !important;
    max-width: 1460px !important;
}

.notes-page,
.settings-page,
.preferences-page {
    width: min(100%, 1240px) !important;
    max-width: 1240px !important;
}

.app-page-shell-header,
.ios-calendar-header,
.dayplan-header,
.shopping-page-header,
.notes-briefing-header,
.schoolrunsweek-header,
.settings-page-header,
.dashboard-header {
    margin-bottom: 20px !important;
    padding-bottom: 18px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.045) !important;
}

.app-page-eyebrow,
.ios-calendar-date-label,
.notes-eyebrow,
.schoolrunsweek-eyebrow,
.settings-eyebrow,
.shopping-eyebrow {
    color: rgba(196, 201, 214, 0.62) !important;
    font-size: 0.68rem !important;
    font-weight: 820 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    line-height: 1.15 !important;
}

.app-page-title,
.ios-calendar-month-label,
.notes-title,
.schoolrunsweek-title,
.settings-title,
.shopping-title {
    color: rgba(241, 238, 232, 0.92) !important;
    font-size: clamp(1.95rem, 2.2vw, 2.35rem) !important;
    font-weight: 650 !important;
    letter-spacing: -0.026em !important;
    line-height: 1.08 !important;
    margin: 0 0 8px !important;
}

.app-page-context,
.app-page-subtitle,
.notes-subtitle,
.schoolrunsweek-subtitle,
.settings-subtitle,
.shopping-subtitle {
    color: rgba(196, 201, 214, 0.72) !important;
    font-size: clamp(0.98rem, 1vw, 1.08rem) !important;
    font-weight: 570 !important;
    line-height: 1.42 !important;
    margin: 0 !important;
}

/* Shared surface refinement. */
.app-section-card,
.ios-empty-state,
.ios-calendar-empty,
.dayplan-card,
.shopping-section-card,
.shopping-filter-card,
.network-contact-card,
.maintenance-section-card,
.maintenance-item-card,
.notes-briefing-card,
.notes-command-bar,
.schoolrunsweek-day-card,
.settings-card,
.settings-mobile-card,
.settings-desktop-row-card,
.house-card,
.kids-card,
.store-card,
.location-card,
.vehicle-card,
.user-card,
.audit-log-card {
    border: 1px solid var(--omni-command-border) !important;
    border-radius: var(--omni-command-radius-xl) !important;
    background: linear-gradient(180deg, rgba(24, 29, 40, 0.88), rgba(12, 15, 23, 0.86)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), var(--omni-command-shadow-card) !important;
}

.network-contact-card:hover,
.maintenance-item-card:hover,
.shopping-item-row:hover,
.schoolrunsweek-assignment-card:hover,
.house-card:hover,
.kids-card:hover,
.store-card:hover,
.location-card:hover,
.vehicle-card:hover,
.user-card:hover {
    border-color: var(--omni-command-border-strong) !important;
    transform: translateY(-1px) !important;
}

/* Shared buttons, icon actions, chips. */
.mud-button-root {
    border-radius: 999px !important;
    font-weight: 760 !important;
    letter-spacing: -0.01em !important;
    min-height: 36px !important;
    transition: background 150ms ease-out, border-color 150ms ease-out, color 150ms ease-out, transform 150ms ease-out, box-shadow 150ms ease-out !important;
}

.mud-button-filled-primary {
    background: linear-gradient(180deg, rgba(138, 154, 229, 0.96), rgba(105, 121, 194, 0.94)) !important;
    color: #070a11 !important;
    box-shadow: 0 10px 24px rgba(82, 98, 168, 0.2) !important;
}

.mud-button-outlined,
.mud-button-text {
    color: rgba(241, 238, 232, 0.84) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.mud-button-root:hover {
    transform: translateY(-1px);
}

.mud-icon-button,
.mud-menu-button-root {
    border-radius: 12px !important;
    transition: background 140ms ease-out, border-color 140ms ease-out, color 140ms ease-out, opacity 140ms ease-out !important;
}

.mud-chip {
    border-radius: 999px !important;
    font-weight: 760 !important;
    letter-spacing: 0 !important;
}

.mud-chip-size-small {
    height: 24px !important;
    min-height: 24px !important;
    padding-inline: 8px !important;
    font-size: 0.72rem !important;
}

/* Form/input normalization. */
.mud-input-control {
    margin-top: 0 !important;
}

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

.mud-input-root,
.mud-input-outlined,
.mud-picker-input-button,
.mud-select,
.mud-select-input {
    min-height: 44px !important;
}

.mud-input.mud-input-outlined,
.mud-input-outlined .mud-input-outlined-border {
    border-radius: 14px !important;
}

.mud-input-outlined {
    background: rgba(255, 255, 255, 0.034) !important;
}

.mud-input-label {
    color: rgba(196, 201, 214, 0.68) !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
}

.mud-input-adornment-end {
    margin-inline-end: 8px !important;
}

.mud-popover,
.mud-popover .mud-list {
    z-index: 1500 !important;
    border-radius: 16px !important;
    background: rgba(16, 20, 30, 0.98) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 22px 62px rgba(0, 0, 0, 0.48) !important;
}

/* Schedule: hard lock the toolbar into non-overlapping control rows. */
.ios-calendar-page .ios-calendar-header {
    display: grid !important;
    grid-template-columns: minmax(240px, 0.44fr) minmax(520px, 1fr) !important;
    align-items: end !important;
    gap: 24px !important;
}

.ios-calendar-page .ios-calendar-header-top,
.ios-calendar-page .ios-calendar-header-top > div {
    min-width: 0 !important;
}

.ios-calendar-page .ios-calendar-toolbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
        "date user"
        "mode mode" !important;
    align-items: center !important;
    gap: 10px 12px !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 10px !important;
    border-radius: 20px !important;
    border: 1px solid rgba(255, 255, 255, 0.055) !important;
    background: rgba(13, 16, 24, 0.58) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.032), 0 16px 42px rgba(0, 0, 0, 0.2) !important;
    backdrop-filter: blur(8px) !important;
}

.ios-calendar-page .ios-calendar-date-nav-row {
    grid-area: date !important;
    display: grid !important;
    grid-template-columns: 40px minmax(180px, 280px) 40px auto !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
}

.ios-calendar-page .ios-calendar-viewing-row {
    grid-area: user !important;
    min-width: 220px !important;
    max-width: 280px !important;
}

.ios-calendar-page .ios-calendar-mode-row {
    grid-area: mode !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    min-width: 0 !important;
}

.ios-calendar-page .ios-calendar-picker,
.ios-calendar-page .ios-calendar-user-picker {
    width: 100% !important;
    min-width: 0 !important;
}

.ios-calendar-page .ios-calendar-date-control .mud-input-root,
.ios-calendar-page .ios-calendar-user-picker .mud-input-root {
    min-height: 42px !important;
    height: 42px !important;
    border-radius: 14px !important;
}

.ios-calendar-page .ios-calendar-user-picker .mud-input-label {
    transform: translate(14px, -7px) scale(0.72) !important;
    max-width: calc(100% - 28px) !important;
    white-space: nowrap !important;
}

.ios-calendar-page .ios-calendar-nav-button {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    background: rgba(255, 255, 255, 0.035) !important;
}

.ios-calendar-page .ios-calendar-today-button,
.ios-calendar-page .ios-calendar-generate-button {
    height: 40px !important;
    min-height: 40px !important;
    white-space: nowrap !important;
    padding-inline: 16px !important;
}

.ios-calendar-page .ios-calendar-view-switch {
    display: inline-flex !important;
    align-items: center !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 4px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    background: rgba(255, 255, 255, 0.035) !important;
}

.ios-calendar-page .ios-calendar-view-button {
    height: 34px !important;
    min-height: 34px !important;
    min-width: 76px !important;
    padding-inline: 14px !important;
}

.ios-week-header,
.ios-week-grid,
.ios-month-grid {
    gap: 8px !important;
}

.ios-week-header-cell,
.ios-week-day-card,
.ios-month-cell {
    border-radius: 14px !important;
    border: 1px solid rgba(255, 255, 255, 0.052) !important;
    background: linear-gradient(180deg, rgba(21, 25, 35, 0.84), rgba(11, 14, 21, 0.8)) !important;
}

.ios-month-event-chip,
.ios-week-event-card {
    border-radius: 7px !important;
    background: rgba(123, 143, 224, 0.14) !important;
    border: 1px solid rgba(123, 143, 224, 0.12) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* Global modal system. */
.mud-dialog {
    border-radius: 22px !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: linear-gradient(180deg, rgba(22, 26, 37, 0.98), rgba(10, 13, 20, 0.98)) !important;
    box-shadow: var(--omni-command-shadow-modal) !important;
    overflow: hidden !important;
}

.mud-overlay-scrim {
    backdrop-filter: blur(10px) saturate(0.9) !important;
    background-color: rgba(0, 0, 0, 0.56) !important;
}

.mud-dialog .mud-dialog-title {
    padding: 20px 22px 10px !important;
}

.mud-dialog .mud-dialog-content {
    padding: 18px 22px 112px !important;
    max-height: min(74vh, 720px) !important;
    overflow: auto !important;
}

.mud-dialog .mud-dialog-actions {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 2 !important;
    padding: 14px 22px 18px !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
    background: linear-gradient(180deg, rgba(14, 17, 25, 0.9), rgba(8, 10, 16, 0.98)) !important;
    backdrop-filter: blur(12px) !important;
}

.config-dialog-shell {
    display: grid !important;
    gap: 14px !important;
}

.config-dialog-section {
    border-radius: 16px !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    background: rgba(255, 255, 255, 0.028) !important;
    padding: 15px !important;
}

.config-dialog-grid {
    gap: 14px !important;
}

.preferences-toggle-stack,
.config-dialog-toggle-stack {
    gap: 8px !important;
}

.event-edit-dialog-shell .config-dialog-section:first-of-type {
    display: grid !important;
    gap: 12px !important;
}

.mud-dialog:has(.event-edit-dialog-shell) {
    width: min(860px, calc(100vw - 48px)) !important;
    max-width: min(860px, calc(100vw - 48px)) !important;
}

/* Admin card action alignment. */
.house-card,
.kids-card,
.store-card,
.location-card,
.vehicle-card,
.user-card,
.settings-mobile-card {
    display: flex !important;
    flex-direction: column !important;
    min-height: 188px !important;
    padding: 20px !important;
}

.house-actions,
.kids-card-actions,
.store-card-actions,
.location-card-actions,
.vehicle-card-actions,
.user-card-actions,
.settings-mobile-card-actions {
    margin-top: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
}

/* Transport guard: ensure the dispatch board cannot collapse into unreadable slivers. */
.schoolrunsweek-page .schoolrunsweek-board,
.schoolrunsweek-page .schoolrunsweek-day-grid {
    min-width: 0 !important;
}

.schoolrunsweek-page .schoolrunsweek-day-card {
    min-width: 220px !important;
}

.schoolrunsweek-page .schoolrunsweek-assignment-card,
.schoolrunsweek-page .schoolrunsweek-assignment-row {
    overflow: hidden !important;
}

.schoolrunsweek-page .schoolrunsweek-assignment-title,
.schoolrunsweek-page .schoolrunsweek-assignment-adult {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* Audit readability guard. */
.audit-log-table,
.settings-audit-table {
    width: 100% !important;
    overflow-x: auto !important;
}

.audit-log-table td,
.audit-log-table th,
.settings-audit-table td,
.settings-audit-table th {
    vertical-align: top !important;
}

@media (max-width: 1180px) {
    .ios-calendar-page .ios-calendar-header {
        grid-template-columns: 1fr !important;
        align-items: start !important;
    }

    .ios-calendar-page .ios-calendar-toolbar {
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "date"
            "user"
            "mode" !important;
    }

    .ios-calendar-page .ios-calendar-viewing-row {
        max-width: none !important;
    }
}

@media (max-width: 767px) {
    .app-page,
    .ios-calendar-page,
    .ios-contacts-page,
    .maintenance-page,
    .notes-page,
    .shopping-ios-page,
    .schoolrunsweek-page,
    .settings-page,
    .preferences-page,
    .stores-page,
    .kids-page,
    .houses-page,
    .locations-page,
    .vehicles-page,
    .users-page,
    .dashboard-page {
        width: 100% !important;
        max-width: none !important;
        padding-inline: 0 !important;
    }

    .app-page-title,
    .ios-calendar-month-label,
    .notes-title,
    .schoolrunsweek-title,
    .settings-title,
    .shopping-title {
        font-size: clamp(1.62rem, 8vw, 1.95rem) !important;
    }

    .ios-calendar-page .ios-calendar-date-nav-row {
        grid-template-columns: 40px minmax(0, 1fr) 40px auto !important;
    }

    .ios-calendar-page .ios-calendar-mode-row {
        align-items: stretch !important;
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
    }

    .ios-calendar-page .ios-calendar-view-switch {
        width: 100% !important;
        justify-content: space-between !important;
    }

    .ios-calendar-page .ios-calendar-view-button {
        flex: 1 1 0 !important;
        min-width: 0 !important;
    }

    .ios-calendar-page .ios-calendar-generate-button {
        width: 100% !important;
    }

    .mud-dialog {
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        max-height: calc(100dvh - 24px) !important;
        border-radius: 20px !important;
    }

    .mud-dialog .mud-dialog-content {
        max-height: calc(100dvh - 138px) !important;
        padding: 14px 14px 112px !important;
    }

    .mud-dialog .mud-dialog-actions {
        padding: 12px 14px calc(12px + env(safe-area-inset-bottom)) !important;
    }

    .config-dialog-grid,
    .config-dialog-grid-two,
    .maintenance-form-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Source: omnisant.desktop.luxury.css */

/* OMNISANT desktop luxury refinement layer.
   Loaded last on purpose: this consolidates the desktop shell, surfaces,
   controls, dialogs, and Schedule into one calmer system without changing
   mobile-specific behavior or page routes. */

:root,
[data-theme="dark"] {
    --omni-lux-bg: #06070a;
    --omni-lux-bg-2: #0d1017;
    --omni-lux-bg-3: #131722;
    --omni-lux-surface: rgba(18, 22, 32, 0.9);
    --omni-lux-surface-strong: rgba(24, 29, 41, 0.94);
    --omni-lux-border: rgba(255, 255, 255, 0.064);
    --omni-lux-border-strong: rgba(162, 176, 231, 0.24);
    --omni-lux-text: rgba(244, 241, 234, 0.94);
    --omni-lux-text-soft: rgba(202, 207, 219, 0.78);
    --omni-lux-text-muted: rgba(151, 160, 178, 0.68);
    --omni-lux-accent: #8d9cdb;
    --omni-lux-accent-strong: #a8b4ec;
    --omni-lux-accent-soft: rgba(141, 156, 219, 0.15);
    --omni-lux-danger: #e37a7a;
    --omni-lux-danger-soft: rgba(227, 122, 122, 0.11);
    --omni-lux-radius: 24px;
    --omni-lux-radius-card: 26px;
    --omni-lux-radius-control: 16px;
    --omni-lux-shadow-card: 0 22px 54px rgba(0, 0, 0, 0.32);
    --omni-lux-shadow-float: 0 34px 88px rgba(0, 0, 0, 0.58);
}

html,
body {
    background:
        radial-gradient(circle at 48% -10%, rgba(66, 75, 104, 0.19), transparent 34rem),
        radial-gradient(circle at 88% 8%, rgba(48, 55, 78, 0.1), transparent 40rem),
        linear-gradient(180deg, var(--omni-lux-bg-2) 0%, var(--omni-lux-bg) 54%, #030407 100%) !important;
}

body {
    color: var(--omni-lux-text);
}

@media (min-width: 1024px) {
    :root,
    [data-theme="dark"] {
        --omni-topbar-height: 68px;
        --omni-sidebar-width-desktop: 240px;
    }

    .app-topbar,
    .app-topbar.mud-appbar,
    .app-topbar .mud-toolbar {
        height: var(--omni-topbar-height) !important;
        min-height: var(--omni-topbar-height) !important;
        background:
            linear-gradient(180deg, rgba(11, 14, 20, 0.96), rgba(6, 8, 13, 0.94)) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.058) !important;
        box-shadow: 0 14px 38px rgba(0, 0, 0, 0.24) !important;
        backdrop-filter: blur(14px) saturate(0.88) !important;
    }

    .app-topbar {
        padding-inline: 22px 24px !important;
    }

    .app-topbar-left {
        display: flex !important;
        align-items: center !important;
        gap: 18px !important;
        min-width: 0 !important;
    }

    .app-topbar-menu,
    .app-topbar .mud-icon-button,
    .app-topbar .mud-icon-button-root {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        border-radius: 14px !important;
        color: rgba(244, 241, 234, 0.9) !important;
        background: transparent !important;
    }

    .app-topbar .mud-icon-button:hover,
    .app-topbar .mud-icon-button-root:hover {
        background: rgba(255, 255, 255, 0.055) !important;
        color: var(--omni-lux-text) !important;
    }

    .app-topbar-logo,
    .app-topbar-logo[role="img"] {
        color: rgba(246, 243, 236, 0.96) !important;
        font-size: 1.54rem !important;
        line-height: 1 !important;
        font-weight: 640 !important;
        letter-spacing: 0.28em !important;
        text-shadow: 0 1px 22px rgba(255, 255, 255, 0.06) !important;
        white-space: nowrap !important;
    }

    .app-topbar-context-chip {
        height: 34px !important;
        min-height: 34px !important;
        padding: 0 12px !important;
        gap: 7px !important;
        border-radius: 999px !important;
        border: 1px solid rgba(255, 255, 255, 0.074) !important;
        background: rgba(255, 255, 255, 0.04) !important;
        color: rgba(220, 224, 234, 0.86) !important;
        font-size: 0.82rem !important;
        font-weight: 760 !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
    }

    .app-topbar-context-icon {
        font-size: 1.03rem !important;
        color: rgba(193, 202, 237, 0.9) !important;
    }

    .app-drawer {
        width: var(--omni-sidebar-width-desktop) !important;
        background:
            linear-gradient(180deg, rgba(10, 13, 20, 0.96), rgba(5, 7, 11, 0.98)) !important;
        border-right: 1px solid rgba(255, 255, 255, 0.052) !important;
        box-shadow: 18px 0 50px rgba(0, 0, 0, 0.18) !important;
    }

    .app-drawer .mud-drawer-content {
        width: var(--omni-sidebar-width-desktop) !important;
    }

    .app-drawer .mud-navmenu {
        padding: 28px 14px 18px !important;
    }

    .app-nav-section {
        display: block !important;
        margin: 20px 10px 12px !important;
        color: rgba(154, 164, 184, 0.62) !important;
        font-size: 0.72rem !important;
        font-weight: 780 !important;
        letter-spacing: 0.18em !important;
        text-transform: uppercase !important;
    }

    .app-drawer .mud-nav-link,
    .app-drawer .mud-nav-group > .mud-nav-link,
    .app-drawer .mud-nav-group .mud-nav-link {
        min-height: 56px !important;
        height: 56px !important;
        margin: 3px 4px !important;
        padding-inline: 16px !important;
        border-radius: 18px !important;
        color: rgba(206, 211, 224, 0.82) !important;
        font-size: 0.95rem !important;
        font-weight: 680 !important;
        transition: background 150ms ease-out, color 150ms ease-out, border-color 150ms ease-out, transform 150ms ease-out !important;
    }

    .app-drawer .mud-nav-link .mud-nav-link-icon {
        margin-inline-end: 14px !important;
        color: rgba(161, 170, 191, 0.72) !important;
        font-size: 1.22rem !important;
    }

    .app-drawer .mud-nav-link:hover,
    .app-drawer .mud-nav-group > .mud-nav-link:hover {
        background: rgba(255, 255, 255, 0.044) !important;
        color: rgba(244, 241, 234, 0.92) !important;
    }

    .app-drawer .mud-nav-link.active,
    .app-drawer .mud-nav-link.mud-nav-link-active,
    .app-drawer .mud-nav-link.active:not(.mud-nav-link-disabled),
    .app-drawer .mud-nav-link.mud-nav-link-active:not(.mud-nav-link-disabled) {
        background:
            linear-gradient(90deg, rgba(141, 156, 219, 0.18), rgba(255, 255, 255, 0.035)) !important;
        border: 1px solid rgba(141, 156, 219, 0.2) !important;
        color: rgba(247, 244, 237, 0.98) !important;
        box-shadow: inset 3px 0 0 rgba(168, 180, 236, 0.7), 0 14px 34px rgba(0, 0, 0, 0.22) !important;
    }

    .app-drawer .mud-nav-link.active .mud-nav-link-icon,
    .app-drawer .mud-nav-link.mud-nav-link-active .mud-nav-link-icon {
        color: rgba(204, 211, 248, 0.94) !important;
    }

    .app-drawer .mud-divider {
        margin: 18px 10px 14px !important;
        border-color: rgba(255, 255, 255, 0.055) !important;
    }

    .app-main-content {
        min-height: 100dvh !important;
        padding-top: var(--omni-topbar-height) !important;
        background: transparent !important;
    }

    .app-content-canvas {
        width: 100% !important;
        min-height: calc(100dvh - var(--omni-topbar-height)) !important;
        padding: 40px clamp(32px, 3vw, 56px) 72px !important;
        background:
            radial-gradient(circle at 42% 0%, rgba(61, 70, 96, 0.11), transparent 42rem),
            linear-gradient(90deg, rgba(255, 255, 255, 0.015), transparent 20rem) !important;
    }

    .app-page,
    .ios-calendar-page,
    .ios-contacts-page,
    .maintenance-page,
    .notes-page,
    .shopping-ios-page,
    .schoolrunsweek-page,
    .settings-page,
    .preferences-page,
    .stores-page,
    .kids-page,
    .houses-page,
    .locations-page,
    .vehicles-page,
    .users-page,
    .dashboard-page {
        width: min(100%, 1480px) !important;
        max-width: 1480px !important;
        margin-inline: auto !important;
        padding: 0 !important;
    }

    .ios-calendar-page,
    .shopping-ios-page,
    .maintenance-page,
    .schoolrunsweek-page,
    .ios-contacts-page,
    .vehicles-page,
    .locations-page,
    .stores-page {
        width: min(100%, 1600px) !important;
        max-width: 1600px !important;
    }

    .notes-page,
    .settings-page,
    .preferences-page,
    .users-page,
    .kids-page,
    .houses-page {
        width: min(100%, 1320px) !important;
        max-width: 1320px !important;
    }

    .app-page-shell-header,
    .ios-calendar-header,
    .dayplan-header,
    .shopping-page-header,
    .notes-briefing-header,
    .schoolrunsweek-header,
    .settings-page-header,
    .dashboard-header {
        margin-bottom: 28px !important;
        padding-bottom: 22px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.055) !important;
    }

    .app-page-eyebrow,
    .notes-eyebrow,
    .schoolrunsweek-eyebrow,
    .settings-eyebrow,
    .shopping-eyebrow,
    .directory-section-title,
    .maintenance-section-eyebrow {
        color: rgba(164, 172, 190, 0.68) !important;
        font-size: 0.69rem !important;
        font-weight: 800 !important;
        letter-spacing: 0.18em !important;
        line-height: 1.15 !important;
        text-transform: uppercase !important;
    }

    .app-page-title,
    .notes-title,
    .schoolrunsweek-title,
    .settings-title,
    .shopping-title {
        color: var(--omni-lux-text) !important;
        font-size: clamp(2.15rem, 2.05vw, 2.75rem) !important;
        font-weight: 650 !important;
        letter-spacing: -0.033em !important;
        line-height: 1.02 !important;
        margin: 6px 0 10px !important;
    }

    .app-page-subtitle,
    .notes-subtitle,
    .schoolrunsweek-subtitle,
    .settings-subtitle,
    .shopping-subtitle {
        max-width: 820px !important;
        color: var(--omni-lux-text-soft) !important;
        font-size: 1.02rem !important;
        font-weight: 560 !important;
        line-height: 1.48 !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }

    .app-section-card,
    .ios-empty-state,
    .ios-calendar-empty,
    .dayplan-card,
    .shopping-section-card,
    .shopping-filter-card,
    .network-contact-card,
    .maintenance-section-card,
    .maintenance-item-card,
    .notes-briefing-card,
    .notes-command-bar,
    .schoolrunsweek-day-card,
    .settings-card,
    .settings-mobile-card,
    .settings-desktop-row-card,
    .house-card,
    .kids-card,
    .store-card,
    .location-card,
    .vehicle-card,
    .user-card,
    .audit-log-card {
        position: relative !important;
        border-radius: var(--omni-lux-radius-card) !important;
        border: 1px solid var(--omni-lux-border) !important;
        background:
            linear-gradient(180deg, rgba(27, 32, 45, 0.9), rgba(12, 15, 23, 0.9)) !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.045),
            inset 0 -1px 0 rgba(0, 0, 0, 0.18),
            var(--omni-lux-shadow-card) !important;
    }

    .network-contact-card:hover,
    .maintenance-item-card:hover,
    .shopping-item-row:hover,
    .schoolrunsweek-assignment-card:hover,
    .house-card:hover,
    .kids-card:hover,
    .store-card:hover,
    .location-card:hover,
    .vehicle-card:hover,
    .user-card:hover,
    .settings-card:hover {
        border-color: var(--omni-lux-border-strong) !important;
        filter: brightness(1.035) !important;
        transform: translateY(-1px) !important;
    }

    .mud-button-root {
        min-height: 38px !important;
        padding-inline: 18px !important;
        border-radius: 999px !important;
        font-weight: 760 !important;
        letter-spacing: -0.01em !important;
    }

    .mud-button-filled-primary {
        color: #06070a !important;
        background:
            linear-gradient(180deg, var(--omni-lux-accent-strong), #7d8cd0) !important;
        box-shadow: 0 12px 28px rgba(101, 116, 184, 0.22) !important;
    }

    .mud-button-filled-primary:hover {
        background:
            linear-gradient(180deg, #bac4f4, #8b9add) !important;
    }

    .mud-button-outlined,
    .mud-button-text {
        color: rgba(240, 237, 230, 0.84) !important;
        border-color: rgba(255, 255, 255, 0.085) !important;
    }

    .mud-button-root[color="Color.Error"],
    .mud-button-root.mud-button-text-error,
    .mud-button-root.mud-button-outlined-error {
        color: var(--omni-lux-danger) !important;
        background: var(--omni-lux-danger-soft) !important;
        border-color: rgba(227, 122, 122, 0.18) !important;
    }

    .mud-icon-button,
    .mud-menu-button-root {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        border-radius: 14px !important;
        color: rgba(223, 226, 237, 0.84) !important;
    }

    .mud-icon-button:hover,
    .mud-menu-button-root:hover {
        background: rgba(255, 255, 255, 0.056) !important;
        color: var(--omni-lux-text) !important;
    }

    .mud-chip,
    .app-page-context,
    .app-page-context-chip,
    .status-chip,
    .count-chip,
    .shopping-filter-chip,
    .maintenance-filter-chip,
    .directory-filter-chip {
        min-height: 28px !important;
        border-radius: 999px !important;
        font-size: 0.78rem !important;
        font-weight: 780 !important;
        letter-spacing: 0 !important;
    }

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

    .mud-input-root,
    .mud-input-outlined,
    .mud-select,
    .mud-select-input,
    .mud-picker-input-button {
        min-height: 46px !important;
    }

    .mud-input-outlined,
    .mud-input.mud-input-outlined {
        background: rgba(255, 255, 255, 0.035) !important;
        border-radius: var(--omni-lux-radius-control) !important;
    }

    .mud-input-outlined .mud-input-outlined-border {
        border-color: rgba(255, 255, 255, 0.082) !important;
        border-radius: var(--omni-lux-radius-control) !important;
    }

    .mud-input-root:hover .mud-input-outlined-border,
    .mud-input-root.mud-focused .mud-input-outlined-border,
    .mud-input-control:hover .mud-input-outlined-border {
        border-color: rgba(168, 180, 236, 0.42) !important;
    }

    .mud-input-label {
        color: rgba(179, 187, 205, 0.74) !important;
        font-size: 0.78rem !important;
        font-weight: 760 !important;
        letter-spacing: 0.02em !important;
    }

    .mud-popover,
    .mud-popover .mud-list {
        border-radius: 18px !important;
        border: 1px solid rgba(255, 255, 255, 0.085) !important;
        background: rgba(14, 17, 25, 0.99) !important;
        box-shadow: 0 28px 80px rgba(0, 0, 0, 0.54) !important;
    }

    .mud-dialog {
        width: min(760px, calc(100vw - 96px)) !important;
        max-width: min(760px, calc(100vw - 96px)) !important;
        border-radius: 28px !important;
        border: 1px solid rgba(255, 255, 255, 0.09) !important;
        background:
            linear-gradient(180deg, rgba(29, 34, 47, 0.99), rgba(10, 13, 20, 0.99)) !important;
        box-shadow: var(--omni-lux-shadow-float) !important;
        overflow: hidden !important;
    }

    .mud-dialog:has(.event-edit-dialog-shell),
    .mud-dialog:has(.maintenance-dialog-shell),
    .mud-dialog:has(.config-dialog-grid) {
        width: min(920px, calc(100vw - 96px)) !important;
        max-width: min(920px, calc(100vw - 96px)) !important;
    }

    .mud-dialog .mud-dialog-title {
        padding: 28px 30px 12px !important;
    }

    .mud-dialog .mud-dialog-content {
        padding: 22px 30px 124px !important;
        max-height: min(76vh, 760px) !important;
        overflow: auto !important;
    }

    .mud-dialog .mud-dialog-actions {
        position: sticky !important;
        bottom: 0 !important;
        z-index: 3 !important;
        justify-content: flex-end !important;
        gap: 12px !important;
        padding: 16px 30px 22px !important;
        border-top: 1px solid rgba(255, 255, 255, 0.075) !important;
        background:
            linear-gradient(180deg, rgba(16, 19, 28, 0.9), rgba(7, 9, 14, 0.98)) !important;
        backdrop-filter: blur(12px) saturate(0.88) !important;
    }

    .config-dialog-section {
        border-radius: 20px !important;
        border: 1px solid rgba(255, 255, 255, 0.07) !important;
        background: rgba(255, 255, 255, 0.03) !important;
        padding: 18px !important;
    }

}

@media (min-width: 1024px) {
    .ios-calendar-page .ios-calendar-header {
        display: grid !important;
        grid-template-columns: minmax(260px, 0.38fr) minmax(0, 1fr) !important;
        align-items: end !important;
        gap: 32px !important;
    }

    .ios-calendar-page .ios-calendar-header-top {
        display: flex !important;
        align-items: flex-end !important;
        min-width: 0 !important;
    }

    .ios-calendar-page .ios-calendar-month-label {
        color: var(--omni-lux-text) !important;
        font-size: clamp(2.3rem, 2.35vw, 3rem) !important;
        font-weight: 640 !important;
        letter-spacing: -0.035em !important;
        line-height: 1 !important;
        margin: 0 0 10px !important;
    }

    .ios-calendar-page .ios-calendar-date-label {
        color: rgba(171, 179, 197, 0.76) !important;
        font-size: 0.72rem !important;
        font-weight: 820 !important;
        letter-spacing: 0.18em !important;
        text-transform: uppercase !important;
        margin-bottom: 14px !important;
    }

    .ios-calendar-page .app-page-context {
        display: inline-flex !important;
        height: 36px !important;
        align-items: center !important;
        gap: 9px !important;
        padding: 0 14px !important;
        border-radius: 999px !important;
        border: 1px solid rgba(141, 156, 219, 0.24) !important;
        background: rgba(141, 156, 219, 0.11) !important;
    }

    .ios-calendar-page .app-page-context-chip-label {
        color: rgba(178, 186, 205, 0.72) !important;
        font-size: 0.68rem !important;
        font-weight: 840 !important;
        letter-spacing: 0.16em !important;
        text-transform: uppercase !important;
    }

    .ios-calendar-page .app-page-context-chip-value {
        color: rgba(232, 234, 242, 0.9) !important;
        font-size: 0.9rem !important;
        font-weight: 780 !important;
    }

    .ios-calendar-page .ios-calendar-toolbar {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(220px, 300px) !important;
        grid-template-areas:
            "date user"
            "mode mode" !important;
        align-items: center !important;
        gap: 12px 14px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;
        padding: 14px !important;
        border-radius: 24px !important;
        border: 1px solid rgba(255, 255, 255, 0.065) !important;
        background:
            linear-gradient(180deg, rgba(18, 22, 32, 0.74), rgba(9, 12, 18, 0.68)) !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.038),
            0 18px 50px rgba(0, 0, 0, 0.24) !important;
        backdrop-filter: blur(5px) saturate(0.82) !important;
    }

    .ios-calendar-page .ios-calendar-date-nav-row {
        grid-area: date !important;
        display: grid !important;
        grid-template-columns: 42px minmax(190px, 1fr) 42px minmax(116px, auto) !important;
        align-items: center !important;
        gap: 10px !important;
        min-width: 0 !important;
        width: 100% !important;
    }

    .ios-calendar-page .ios-calendar-viewing-row {
        grid-area: user !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    .ios-calendar-page .ios-calendar-mode-row {
        grid-area: mode !important;
        display: grid !important;
        grid-template-columns: minmax(0, max-content) minmax(160px, auto) !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 16px !important;
        min-width: 0 !important;
        width: 100% !important;
    }

    .ios-calendar-page .ios-calendar-picker,
    .ios-calendar-page .ios-calendar-user-picker {
        width: 100% !important;
        min-width: 0 !important;
    }

    .ios-calendar-page .ios-calendar-date-control .mud-input-root,
    .ios-calendar-page .ios-calendar-user-picker .mud-input-root {
        height: 44px !important;
        min-height: 44px !important;
        border-radius: 16px !important;
    }

    .ios-calendar-page .ios-calendar-user-picker .mud-input-label {
        transform: translate(14px, -8px) scale(0.72) !important;
        max-width: calc(100% - 28px) !important;
        white-space: nowrap !important;
        background: transparent !important;
    }

    .ios-calendar-page .ios-calendar-nav-button {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        border-radius: 14px !important;
        border: 1px solid rgba(255, 255, 255, 0.07) !important;
        background: rgba(255, 255, 255, 0.042) !important;
    }

    .ios-calendar-page .ios-calendar-today-button,
    .ios-calendar-page .ios-calendar-generate-button {
        height: 42px !important;
        min-height: 42px !important;
        white-space: nowrap !important;
        padding-inline: 18px !important;
    }

    .ios-calendar-page .ios-calendar-generate-button {
        justify-self: end !important;
        max-width: 240px !important;
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        background:
            linear-gradient(180deg, rgba(168, 180, 236, 0.96), rgba(125, 140, 208, 0.94)) !important;
        color: #05070c !important;
        box-shadow: 0 14px 30px rgba(99, 113, 181, 0.24) !important;
    }

    .ios-calendar-page .ios-calendar-view-switch {
        justify-self: start !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: 44px !important;
        min-height: 44px !important;
        padding: 4px !important;
        border-radius: 999px !important;
        border: 1px solid rgba(255, 255, 255, 0.07) !important;
        background: rgba(255, 255, 255, 0.04) !important;
        box-shadow: inset 0 1px 6px rgba(0, 0, 0, 0.22) !important;
    }

    .ios-calendar-page .ios-calendar-view-button {
        height: 36px !important;
        min-height: 36px !important;
        min-width: 74px !important;
        padding-inline: 16px !important;
        color: rgba(217, 222, 235, 0.75) !important;
    }

    .ios-calendar-page .ios-calendar-view-button.mud-button-filled,
    .ios-calendar-page .ios-calendar-view-button.mud-button-filled-primary {
        color: #06070a !important;
        background:
            linear-gradient(180deg, rgba(168, 180, 236, 0.94), rgba(126, 140, 207, 0.94)) !important;
    }

    .ios-week-header,
    .ios-week-grid,
    .ios-month-grid {
        gap: 10px !important;
    }

    .ios-week-header-cell,
    .ios-week-day-card,
    .ios-month-cell {
        border-radius: 18px !important;
        border: 1px solid rgba(255, 255, 255, 0.058) !important;
        background:
            linear-gradient(180deg, rgba(22, 27, 38, 0.9), rgba(9, 12, 18, 0.9)) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 16px 34px rgba(0, 0, 0, 0.18) !important;
    }

    .ios-week-header-cell {
        min-height: 72px !important;
    }

    .ios-week-day-card {
        min-height: 150px !important;
        padding: 12px !important;
    }

    .ios-month-cell {
        min-height: 132px !important;
        padding: 11px !important;
    }

    .ios-week-header-cell.is-selected,
    .ios-month-cell.is-selected,
    .ios-month-cell.selected,
    .ios-month-cell.is-today {
        border-color: rgba(168, 180, 236, 0.48) !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.05),
            0 0 0 1px rgba(168, 180, 236, 0.12),
            0 18px 42px rgba(88, 102, 174, 0.16) !important;
    }

    .ios-month-event-chip,
    .ios-week-event-card {
        border-radius: 8px !important;
        background: rgba(141, 156, 219, 0.16) !important;
        border: 1px solid rgba(141, 156, 219, 0.14) !important;
        color: rgba(235, 238, 246, 0.92) !important;
        font-size: 0.75rem !important;
        line-height: 1.15 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .ios-calendar-empty {
        min-height: 240px !important;
        display: grid !important;
        place-items: center !important;
        text-align: center !important;
        color: var(--omni-lux-text-soft) !important;
    }
}

@media (min-width: 1024px) and (max-width: 1320px) {
    :root,
    [data-theme="dark"] {
        --omni-sidebar-width-desktop: 224px;
    }

    .app-content-canvas {
        padding-inline: 28px !important;
    }

    .ios-calendar-page .ios-calendar-header {
        grid-template-columns: 1fr !important;
        align-items: start !important;
    }

    .ios-calendar-page .ios-calendar-toolbar {
        grid-template-columns: minmax(0, 1fr) minmax(240px, 320px) !important;
    }
}

@media (max-width: 767.98px) {
    .mud-dialog .mud-dialog-content {
        padding-bottom: 112px !important;
    }
}

/* Final desktop baseline refinement pass. This intentionally sits at the end
   of the final CSS file so the desktop system has one clear winner. */
@media (min-width: 1024px) {
    :root,
    [data-theme="dark"] {
        --omni-topbar-height: 72px;
        --omni-sidebar-width-desktop: 252px;
        --omni-lux-radius-card: 24px;
        --omni-lux-shadow-card: 0 18px 48px rgba(0, 0, 0, 0.30);
    }

    body {
        background:
            radial-gradient(circle at 48% -14%, rgba(83, 90, 117, 0.16), transparent 34rem),
            radial-gradient(circle at 87% 8%, rgba(56, 62, 82, 0.08), transparent 38rem),
            linear-gradient(180deg, #0b0e15 0%, #05070a 58%, #030407 100%) !important;
    }

    .app-topbar,
    .app-topbar.mud-appbar,
    .app-topbar .mud-toolbar {
        height: var(--omni-topbar-height) !important;
        min-height: var(--omni-topbar-height) !important;
    }

    .app-topbar {
        padding-inline: 26px 30px !important;
    }

    .app-topbar-left {
        gap: 20px !important;
    }

    .app-topbar-logo,
    .app-topbar-logo[role="img"] {
        font-size: 1.45rem !important;
        font-weight: 610 !important;
        letter-spacing: 0.31em !important;
    }

    .app-topbar-context-chip {
        height: 32px !important;
        min-height: 32px !important;
        padding-inline: 12px !important;
        background: rgba(255, 255, 255, 0.034) !important;
    }

    .app-topbar .mud-icon-button,
    .app-topbar .mud-icon-button-root {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
    }

    .app-drawer,
    .app-drawer .mud-drawer-content {
        width: var(--omni-sidebar-width-desktop) !important;
    }

    .app-drawer .mud-navmenu {
        padding: 34px 16px 22px !important;
    }

    .app-nav-section {
        margin: 24px 12px 14px !important;
        font-size: 0.7rem !important;
        letter-spacing: 0.2em !important;
    }

    .app-drawer .mud-nav-link,
    .app-drawer .mud-nav-group > .mud-nav-link,
    .app-drawer .mud-nav-group .mud-nav-link {
        height: 58px !important;
        min-height: 58px !important;
        margin: 5px 2px !important;
        padding-inline: 18px !important;
        border-radius: 19px !important;
        font-size: 0.96rem !important;
        font-weight: 690 !important;
    }

    .app-drawer .mud-nav-link .mud-nav-link-icon {
        width: 22px !important;
        margin-inline-end: 16px !important;
        font-size: 1.16rem !important;
    }

    .app-drawer .mud-nav-link.active,
    .app-drawer .mud-nav-link.mud-nav-link-active,
    .app-drawer .mud-nav-link.active:not(.mud-nav-link-disabled),
    .app-drawer .mud-nav-link.mud-nav-link-active:not(.mud-nav-link-disabled) {
        background:
            linear-gradient(90deg, rgba(152, 164, 220, 0.2), rgba(255, 255, 255, 0.04)) !important;
        border-color: rgba(152, 164, 220, 0.18) !important;
        box-shadow:
            inset 3px 0 0 rgba(184, 194, 244, 0.68),
            inset 0 1px 0 rgba(255, 255, 255, 0.04),
            0 16px 38px rgba(0, 0, 0, 0.26) !important;
    }

    .app-content-canvas {
        padding: 46px clamp(34px, 3.2vw, 62px) 82px !important;
    }

    .app-page,
    .ios-calendar-page,
    .ios-contacts-page,
    .maintenance-page,
    .notes-page,
    .shopping-ios-page,
    .schoolrunsweek-page,
    .settings-page,
    .preferences-page,
    .stores-page,
    .kids-page,
    .houses-page,
    .locations-page,
    .vehicles-page,
    .users-page,
    .dashboard-page {
        max-width: 1500px !important;
    }

    .ios-calendar-page,
    .shopping-ios-page,
    .maintenance-page,
    .schoolrunsweek-page,
    .ios-contacts-page,
    .vehicles-page,
    .locations-page,
    .stores-page {
        max-width: 1620px !important;
    }

    .app-page-shell-header,
    .ios-calendar-header,
    .dayplan-header,
    .shopping-page-header,
    .notes-briefing-header,
    .schoolrunsweek-header,
    .settings-page-header,
    .dashboard-header {
        margin-bottom: 30px !important;
        padding-bottom: 24px !important;
    }

    .app-page-title,
    .notes-title,
    .schoolrunsweek-title,
    .settings-title,
    .shopping-title,
    .ios-calendar-month-label {
        font-size: clamp(2.28rem, 2.15vw, 2.95rem) !important;
        font-weight: 640 !important;
        letter-spacing: -0.035em !important;
    }

    .app-page-subtitle,
    .notes-subtitle,
    .schoolrunsweek-subtitle,
    .settings-subtitle,
    .shopping-subtitle {
        color: rgba(203, 208, 220, 0.74) !important;
        font-size: 1.04rem !important;
        line-height: 1.52 !important;
    }

    .app-section-card,
    .ios-empty-state,
    .ios-calendar-empty,
    .dayplan-card,
    .shopping-section-card,
    .shopping-filter-card,
    .network-contact-card,
    .maintenance-section-card,
    .maintenance-item-card,
    .notes-briefing-card,
    .notes-command-bar,
    .schoolrunsweek-day-card,
    .settings-card,
    .settings-mobile-card,
    .settings-desktop-row-card,
    .house-card,
    .kids-card,
    .store-card,
    .location-card,
    .vehicle-card,
    .user-card,
    .audit-log-card {
        border-radius: var(--omni-lux-radius-card) !important;
        border-color: rgba(255, 255, 255, 0.072) !important;
        background:
            linear-gradient(180deg, rgba(28, 33, 45, 0.86) 0%, rgba(17, 21, 31, 0.9) 44%, rgba(10, 13, 20, 0.91) 100%) !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.05),
            inset 0 -1px 0 rgba(0, 0, 0, 0.22),
            var(--omni-lux-shadow-card) !important;
    }

    .mud-button-root {
        min-height: 40px !important;
        border-radius: 999px !important;
        font-size: 0.9rem !important;
        font-weight: 760 !important;
        letter-spacing: -0.012em !important;
        box-shadow: none !important;
    }

    .mud-button-filled-primary {
        background:
            linear-gradient(180deg, rgba(174, 184, 235, 0.95), rgba(125, 139, 205, 0.94)) !important;
        color: #05070a !important;
        box-shadow: 0 12px 30px rgba(99, 112, 178, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.34) !important;
    }

    .mud-button-outlined {
        background: rgba(255, 255, 255, 0.028) !important;
        border-color: rgba(255, 255, 255, 0.095) !important;
    }

    .mud-button-text {
        background: rgba(255, 255, 255, 0.025) !important;
    }

    .mud-icon-button,
    .mud-menu-button-root {
        border-radius: 13px !important;
        background: rgba(255, 255, 255, 0.028) !important;
    }

    .mud-input-root,
    .mud-input-outlined,
    .mud-select,
    .mud-select-input,
    .mud-picker-input-button {
        min-height: 48px !important;
    }

    .mud-input-outlined,
    .mud-input.mud-input-outlined {
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.025)) !important;
    }

    .mud-dialog {
        border-radius: 26px !important;
    }

    .mud-dialog .mud-dialog-title {
        padding: 30px 32px 14px !important;
    }

    .mud-dialog .mud-dialog-content {
        padding: 24px 32px 126px !important;
    }

    .mud-dialog .mud-dialog-actions {
        padding: 18px 32px 24px !important;
    }

    .config-dialog-section {
        padding: 20px !important;
        border-radius: 19px !important;
    }

    /* Schedule: stable, full-width control panel. */
    .ios-calendar-page .ios-calendar-header {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 24px !important;
        align-items: start !important;
    }

    .ios-calendar-page .ios-calendar-toolbar {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(240px, 320px) !important;
        grid-template-areas:
            "date user"
            "mode action" !important;
        gap: 14px !important;
        padding: 16px !important;
        overflow: visible !important;
    }

    .ios-calendar-page .ios-calendar-date-nav-row {
        grid-area: date !important;
        grid-template-columns: 44px minmax(220px, 360px) 44px minmax(122px, auto) !important;
        width: auto !important;
        justify-content: start !important;
    }

    .ios-calendar-page .ios-calendar-viewing-row {
        grid-area: user !important;
        justify-self: end !important;
        width: min(100%, 320px) !important;
    }

    .ios-calendar-page .ios-calendar-mode-row {
        display: contents !important;
    }

    .ios-calendar-page .ios-calendar-view-switch {
        grid-area: mode !important;
        justify-self: start !important;
    }

    .ios-calendar-page .ios-calendar-generate-button {
        grid-area: action !important;
        justify-self: end !important;
        width: auto !important;
        max-width: none !important;
    }

    .ios-calendar-page .ios-calendar-view-button {
        min-width: 82px !important;
    }

    .ios-week-header,
    .ios-week-grid,
    .ios-month-grid {
        gap: 12px !important;
    }

    .ios-week-header-cell {
        min-height: 78px !important;
    }

    .ios-week-day-card {
        min-height: 172px !important;
    }

    .ios-month-cell {
        min-height: 142px !important;
    }

    .ios-calendar-empty,
    .ios-empty-state,
    .dayplan-empty,
    .maintenance-empty-state,
    .shopping-empty-state {
        background:
            linear-gradient(180deg, rgba(22, 27, 39, 0.72), rgba(9, 12, 18, 0.72)) !important;
        border: 1px solid rgba(255, 255, 255, 0.064) !important;
        color: rgba(203, 208, 220, 0.68) !important;
    }

    /* Operational lists and admin cards. */
    .shopping-item-row,
    .maintenance-item-row,
    .audit-log-row,
    .settings-feature-row,
    .feature-control-row {
        border-radius: 16px !important;
        border: 1px solid rgba(255, 255, 255, 0.056) !important;
        background: rgba(255, 255, 255, 0.026) !important;
    }

    .shopping-section-card,
    .maintenance-section-card,
    .settings-card,
    .audit-log-card {
        padding: 24px !important;
    }

    .network-contact-card,
    .house-card,
    .kids-card,
    .store-card,
    .location-card,
    .vehicle-card,
    .user-card {
        padding: 22px !important;
        min-height: 205px !important;
    }

    .house-actions,
    .kids-card-actions,
    .store-card-actions,
    .location-card-actions,
    .vehicle-card-actions,
    .user-card-actions {
        padding-top: 18px !important;
    }

    .audit-log-table,
    .audit-log-table .mud-table-root,
    .audit-log-table table {
        border-collapse: separate !important;
        border-spacing: 0 8px !important;
    }

    .audit-log-table .mud-table-head th {
        color: rgba(172, 181, 200, 0.78) !important;
        font-size: 0.72rem !important;
        font-weight: 800 !important;
        letter-spacing: 0.12em !important;
        text-transform: uppercase !important;
    }

    .audit-log-table .mud-table-body tr {
        background: rgba(255, 255, 255, 0.026) !important;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.045) !important;
    }

    /* Transport: density first. Normal desktop keeps the readable 2-across
       dispatch board; only true ultrawide gets the five-column board. */
    .schoolrunsweek-toolbar {
        min-height: 46px !important;
        margin-bottom: 20px !important;
        padding: 5px !important;
        border-radius: 17px !important;
    }

    .schoolrunsweek-toolbar .mud-button-root,
    .schoolrunsweek-toolbar .mud-icon-button {
        height: 40px !important;
        min-height: 40px !important;
    }

    .schoolrunsweek-days {
        grid-template-columns: repeat(2, minmax(360px, 0.46fr)) !important;
        gap: 16px !important;
        justify-content: start !important;
    }

    .schoolrunsweek-day-card {
        min-height: 0 !important;
        border-radius: 18px !important;
        overflow: hidden !important;
    }

    .schoolrunsweek-day-header {
        padding: 13px 16px 12px !important;
        background: linear-gradient(180deg, rgba(22, 26, 36, 0.96), rgba(14, 17, 25, 0.86)) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.052) !important;
        box-shadow: inset 0 -12px 22px rgba(0, 0, 0, 0.16) !important;
    }

    .schoolrunsweek-day-heading {
        gap: 2px !important;
    }

    .schoolrunsweek-day-name {
        font-size: 0.76rem !important;
        letter-spacing: 0.16em !important;
    }

    .schoolrunsweek-day-date {
        font-size: 0.66rem !important;
        letter-spacing: 0.12em !important;
    }

    .schoolrunsweek-slot-stack {
        grid-template-rows: auto auto !important;
    }

    .schoolrunsweek-slot-content {
        min-height: 178px !important;
        padding: 12px 14px !important;
        gap: 8px !important;
    }

    .schoolrunsweek-slot-header {
        min-height: 28px !important;
        padding-bottom: 6px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.045) !important;
    }

    .schoolrunsweek-slot-title {
        font-size: 0.62rem !important;
        letter-spacing: 0.14em !important;
        line-height: 1.08 !important;
        color: rgba(203, 208, 220, 0.68) !important;
    }

    .schoolrunsweek-slot-add-button.mud-button-root {
        height: 28px !important;
        min-height: 28px !important;
        padding-inline: 9px !important;
    }

    .schoolrunsweek-assignment-grid {
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: start !important;
        gap: 8px !important;
        padding: 8px 9px !important;
    }

    .schoolrunsweek-assignment-card {
        border-radius: 14px !important;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.034), rgba(255, 255, 255, 0.018)) !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.035),
            inset 0 -12px 24px rgba(0, 0, 0, 0.14) !important;
    }

    .schoolrunsweek-assignment-display {
        gap: 4px !important;
    }

    .schoolrunsweek-assignment-name {
        font-size: 0.84rem !important;
        line-height: 1.15 !important;
    }

    .schoolrunsweek-chip-row,
    .schoolrunsweek-assignment-meta {
        gap: 3px !important;
    }

    .schoolrunsweek-chip,
    .schoolrunsweek-assignment-actions .mud-chip {
        min-height: 20px !important;
        height: 20px !important;
        padding-inline: 7px !important;
        font-size: 0.62rem !important;
        background: rgba(255, 255, 255, 0.066) !important;
    }

    .schoolrunsweek-assignment-actions {
        min-width: max-content !important;
        gap: 4px !important;
        align-items: center !important;
    }

    .schoolrunsweek-delete-button.mud-icon-button,
    .schoolrunsweek-inline-edit.mud-icon-button {
        width: 27px !important;
        min-width: 27px !important;
        height: 27px !important;
        min-height: 27px !important;
        border-radius: 9px !important;
        background: rgba(255, 255, 255, 0.044) !important;
    }

    .schoolrunsweek-empty {
        width: 100% !important;
        max-width: 220px !important;
        padding: 14px 12px !important;
        border-radius: 14px !important;
        border: 1px solid rgba(255, 255, 255, 0.046) !important;
        background: rgba(255, 255, 255, 0.018) !important;
        box-shadow: inset 0 1px 18px rgba(255, 255, 255, 0.018) !important;
    }
}

@media (min-width: 1024px) and (max-width: 1360px) {
    :root,
    [data-theme="dark"] {
        --omni-sidebar-width-desktop: 232px;
    }

    .ios-calendar-page .ios-calendar-toolbar {
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "date"
            "user"
            "mode" !important;
    }

    .ios-calendar-page .ios-calendar-viewing-row,
    .ios-calendar-page .ios-calendar-generate-button {
        justify-self: start !important;
    }

    .ios-calendar-page .ios-calendar-mode-row {
        display: flex !important;
        grid-area: mode !important;
        justify-content: space-between !important;
        width: 100% !important;
    }
}

@media (min-width: 1700px) {
    .schoolrunsweek-days {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .schoolrunsweek-day-card {
        min-height: 510px !important;
    }

    .schoolrunsweek-slot-stack {
        grid-template-rows: 1fr 1fr !important;
    }

    .schoolrunsweek-slot-content {
        min-height: 0 !important;
        padding: 11px !important;
    }
}

/* Final desktop luxury consistency pass.
   Desktop-only: unify grid, type, density, cards, controls, and page rhythm
   without changing the OMNISANT visual identity. */
@media (min-width: 1024px) {
    :root,
    [data-theme="dark"] {
        --omni-topbar-height: 70px;
        --omni-sidebar-width-desktop: 244px;
        --omni-desktop-content-max: 1680px;
        --omni-desktop-page-pad-x: clamp(24px, 3vw, 48px);
        --omni-desktop-section-gap: 32px;
        --omni-desktop-card-pad: 24px;
        --omni-desktop-card-pad-compact: 18px;
        --omni-desktop-control-gap: 16px;
        --omni-lux-radius-card: 22px;
        --omni-lux-shadow-card: 0 18px 42px rgba(0, 0, 0, 0.26);
        --omni-lux-shadow-card-hover: 0 20px 46px rgba(0, 0, 0, 0.30);
    }

    .app-content-canvas {
        width: 100% !important;
        max-width: none !important;
        padding: 42px var(--omni-desktop-page-pad-x) 76px !important;
        box-sizing: border-box !important;
    }

    .app-page,
    .app-page-shell,
    .dayplan-page,
    .ios-calendar-page,
    .shopping-ios-page,
    .ios-contacts-page,
    .maintenance-page,
    .notes-page,
    .schoolrunsweek-page,
    .settings-page,
    .preferences-page,
    .stores-page,
    .kids-page,
    .users-page,
    .locations-page,
    .vehicles-page,
    .houses-page,
    .audit-log-page,
    .platform-audit-page,
    .settings-audit-log-page,
    .error-log-page {
        width: min(100%, var(--omni-desktop-content-max)) !important;
        max-width: var(--omni-desktop-content-max) !important;
        margin-inline: auto !important;
        box-sizing: border-box !important;
    }

    .app-page-shell-header,
    .app-page-header,
    .ios-calendar-header,
    .shopping-ios-header,
    .ios-contacts-header,
    .maintenance-header,
    .notes-header,
    .schoolrunsweek-header,
    .settings-hero-card {
        margin-bottom: 26px !important;
    }

    .app-page-shell-toolbar,
    .ios-calendar-toolbar,
    .shopping-filter-panel,
    .directory-filter-bar,
    .maintenance-filter-bar,
    .schoolrunsweek-toolbar,
    .notes-toolbar,
    .audit-log-toolbar,
    .settings-toolbar {
        margin-bottom: 28px !important;
    }

    .app-section,
    .settings-section,
    .dayplan-section,
    .shopping-needed-panel,
    .maintenance-section,
    .directory-section,
    .notes-editor-card,
    .schoolrunsweek-board,
    .ios-calendar-grid-wrap,
    .ios-calendar-week-grid,
    .ios-calendar-month-grid {
        margin-bottom: var(--omni-desktop-section-gap) !important;
    }

    .app-page-eyebrow,
    .section-eyebrow,
    .ios-section-eyebrow,
    .directory-section-label,
    .shopping-filter-header .mud-typography,
    .maintenance-section-title,
    .notes-eyebrow,
    .schoolrunsweek-page .section-eyebrow,
    .settings-section-eyebrow,
    .audit-log-matrix th {
        color: rgba(202, 207, 219, 0.62) !important;
        font-size: 11px !important;
        font-weight: 740 !important;
        letter-spacing: 0.22em !important;
        line-height: 1.15 !important;
        text-transform: uppercase !important;
        margin-bottom: 10px !important;
    }

    .app-page-title,
    .app-page h1,
    .settings-page h1,
    .ios-calendar-month-label,
    .shopping-ios-title,
    .maintenance-page h1,
    .ios-contacts-page h1,
    .notes-title,
    .schoolrunsweek-title {
        color: rgba(244, 241, 235, 0.92) !important;
        font-size: clamp(42px, 3.2vw, 56px) !important;
        font-weight: 700 !important;
        letter-spacing: -0.034em !important;
        line-height: 0.98 !important;
        text-shadow: none !important;
    }

    .app-page-context,
    .ios-page-subtitle,
    .shopping-page-subtitle,
    .maintenance-page-subtitle,
    .notes-subtitle,
    .schoolrunsweek-subtitle,
    .settings-page .mud-typography-body1,
    .preferences-page .mud-typography-body1,
    .soft-muted {
        max-width: 980px !important;
        color: rgba(202, 207, 219, 0.72) !important;
        font-size: clamp(16px, 1.15vw, 20px) !important;
        line-height: 1.42 !important;
        margin-top: 10px !important;
    }

    .app-topbar {
        min-height: var(--omni-topbar-height) !important;
        height: var(--omni-topbar-height) !important;
        box-shadow: 0 12px 34px rgba(0, 0, 0, 0.18) !important;
    }

    .app-drawer,
    .app-drawer .mud-drawer-content {
        width: var(--omni-sidebar-width-desktop) !important;
    }

    .app-drawer {
        box-shadow: 12px 0 36px rgba(0, 0, 0, 0.14) !important;
        border-right-color: rgba(255, 255, 255, 0.034) !important;
    }

    .app-drawer .mud-navmenu {
        padding: 28px 14px 20px !important;
    }

    .app-drawer .mud-nav-link,
    .app-drawer .mud-nav-group > .mud-nav-link,
    .app-drawer .mud-nav-group .mud-nav-link {
        min-height: 52px !important;
        height: 52px !important;
        margin: 4px 4px !important;
        padding-inline: 16px !important;
        border-radius: 17px !important;
        color: rgba(206, 211, 224, 0.78) !important;
        font-size: 0.94rem !important;
        font-weight: 670 !important;
    }

    .app-drawer .mud-nav-link .mud-nav-link-icon {
        width: 22px !important;
        min-width: 22px !important;
        margin-inline-end: 14px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: rgba(161, 170, 191, 0.70) !important;
    }

    .app-drawer .mud-nav-link:hover,
    .app-drawer .mud-nav-group > .mud-nav-link:hover {
        background: rgba(255, 255, 255, 0.036) !important;
        color: rgba(244, 241, 235, 0.88) !important;
        transform: none !important;
    }

    .app-drawer .mud-nav-link.active,
    .app-drawer .mud-nav-link.mud-nav-link-active,
    .app-drawer .mud-nav-link.active:not(.mud-nav-link-disabled),
    .app-drawer .mud-nav-link.mud-nav-link-active:not(.mud-nav-link-disabled) {
        background:
            linear-gradient(90deg, rgba(141, 156, 219, 0.155), rgba(255, 255, 255, 0.026)) !important;
        border-color: rgba(141, 156, 219, 0.15) !important;
        color: rgba(247, 244, 237, 0.94) !important;
        box-shadow:
            inset 2px 0 0 rgba(168, 180, 236, 0.56),
            inset 0 1px 0 rgba(255, 255, 255, 0.035),
            0 10px 26px rgba(0, 0, 0, 0.18) !important;
    }

    .app-nav-section {
        margin: 22px 12px 12px !important;
        color: rgba(154, 164, 184, 0.58) !important;
        font-size: 0.68rem !important;
        letter-spacing: 0.20em !important;
    }

    .app-card,
    .mud-card,
    .settings-card,
    .settings-tile,
    .store-card,
    .house-card,
    .kid-card,
    .user-card,
    .vehicle-card,
    .location-card,
    .directory-card,
    .contact-card,
    .shopping-item-row,
    .shopping-store-group,
    .maintenance-row,
    .maintenance-panel,
    .notes-editor-card,
    .schoolrunsweek-day-card,
    .schoolrunsweek-assignment-card,
    .ios-calendar-day-card,
    .ios-calendar-month-cell,
    .ios-calendar-empty,
    .empty-state-card {
        border-radius: var(--omni-lux-radius-card) !important;
        border-color: rgba(255, 255, 255, 0.058) !important;
        background:
            linear-gradient(180deg, rgba(22, 26, 36, 0.88), rgba(13, 16, 24, 0.90)) !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.040),
            0 16px 38px rgba(0, 0, 0, 0.24) !important;
    }

    @media (hover: hover) and (pointer: fine) {
        .app-card:hover,
        .settings-card:hover,
        .settings-tile:hover,
        .store-card:hover,
        .house-card:hover,
        .kid-card:hover,
        .user-card:hover,
        .vehicle-card:hover,
        .location-card:hover,
        .directory-card:hover,
        .contact-card:hover,
        .shopping-item-row:hover,
        .maintenance-row:hover,
        .schoolrunsweek-assignment-card:hover,
        .ios-calendar-day-card:hover,
        .ios-calendar-month-cell:hover {
            border-color: rgba(142, 158, 213, 0.14) !important;
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.045),
                0 18px 42px rgba(0, 0, 0, 0.28) !important;
            transform: translateY(-1px) !important;
        }
    }

    .settings-card,
    .settings-tile,
    .store-card,
    .house-card,
    .kid-card,
    .user-card,
    .vehicle-card,
    .location-card {
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
        min-height: 100% !important;
        padding: var(--omni-desktop-card-pad) !important;
    }

    .settings-card-grid,
    .stores-grid,
    .house-grid,
    .kids-grid,
    .users-grid,
    .vehicles-grid,
    .locations-grid {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)) !important;
        align-items: stretch !important;
        gap: 24px !important;
    }

    .settings-card .mud-card-actions,
    .settings-tile-actions,
    .store-card-actions,
    .house-card-actions,
    .kid-card-actions,
    .user-card-actions,
    .vehicle-card-actions,
    .location-card-actions,
    .admin-card-actions,
    .card-actions {
        margin-top: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 10px !important;
    }

    .mud-button-root:not(.mud-icon-button),
    .app-action-button,
    .primary-action,
    .secondary-action,
    .danger-action,
    .shopping-bought-button,
    .ios-calendar-generate-button,
    .schoolrunsweek-add-button {
        min-height: 40px !important;
        border-radius: 999px !important;
        padding-inline: 17px !important;
        font-weight: 740 !important;
        letter-spacing: -0.01em !important;
    }

    .mud-button-filled-primary,
    .primary-action,
    .ios-calendar-generate-button.mud-button-root {
        background:
            linear-gradient(180deg, rgba(139, 153, 214, 0.90), rgba(112, 127, 195, 0.90)) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 10px 24px rgba(88, 105, 175, 0.16) !important;
    }

    .mud-button-outlined,
    .mud-button-text,
    .secondary-action {
        background: rgba(255, 255, 255, 0.030) !important;
        border-color: rgba(255, 255, 255, 0.070) !important;
    }

    .danger-action,
    .mud-button-root.text-danger,
    .mud-button-root.danger,
    .delete-button {
        color: rgba(228, 107, 93, 0.84) !important;
        background: rgba(228, 107, 93, 0.065) !important;
        border-color: rgba(228, 107, 93, 0.14) !important;
    }

    .mud-icon-button,
    .action-icon,
    .icon-action,
    .directory-action,
    .contact-action,
    .schoolrunsweek-action,
    .notes-action-button {
        width: 38px !important;
        min-width: 38px !important;
        height: 38px !important;
        min-height: 38px !important;
        border-radius: 13px !important;
        background: rgba(255, 255, 255, 0.034) !important;
        border: 1px solid rgba(255, 255, 255, 0.052) !important;
    }

    .mud-chip,
    .app-chip,
    .status-chip,
    .count-chip,
    .role-chip,
    .shopping-chip,
    .directory-chip,
    .schoolrunsweek-chip,
    .app-page-context-chip {
        min-height: 26px !important;
        border-radius: 999px !important;
        padding-inline: 10px !important;
        font-size: 0.76rem !important;
        font-weight: 740 !important;
    }

    .ios-calendar-toolbar,
    .schoolrunsweek-toolbar,
    .shopping-filter-panel,
    .directory-filter-bar,
    .maintenance-filter-bar,
    .notes-toolbar {
        gap: var(--omni-desktop-control-gap) !important;
        align-items: center !important;
        border-radius: 22px !important;
        border-color: rgba(255, 255, 255, 0.060) !important;
    }

    .ios-calendar-page .ios-calendar-date-nav-row,
    .ios-calendar-page .ios-calendar-mode-row,
    .ios-calendar-page .ios-calendar-viewing-row {
        gap: 12px !important;
        align-items: center !important;
    }

    .ios-calendar-page .ios-calendar-nav-button,
    .ios-calendar-page .ios-calendar-today-button,
    .ios-calendar-page .ios-calendar-view-button,
    .ios-calendar-page .ios-calendar-generate-button,
    .ios-calendar-page .ios-calendar-picker .mud-input-root,
    .ios-calendar-page .ios-calendar-user-picker .mud-input-root {
        min-height: 42px !important;
        height: 42px !important;
    }

    .ios-calendar-page .ios-calendar-view-switch {
        padding: 4px !important;
        gap: 4px !important;
        border-radius: 999px !important;
    }

    .ios-calendar-week-grid,
    .ios-calendar-month-grid {
        gap: 14px !important;
    }

    .ios-calendar-month-cell {
        min-height: 128px !important;
        padding: 12px !important;
    }

    .ios-calendar-month-event,
    .ios-calendar-event-pill {
        border-radius: 8px !important;
        padding-inline: 8px !important;
        color: rgba(244, 241, 235, 0.84) !important;
        background: rgba(120, 136, 200, 0.13) !important;
    }

    .ios-calendar-empty,
    .dayplan-empty,
    .empty-state-card {
        min-height: 118px !important;
        padding: 22px !important;
        color: rgba(202, 207, 219, 0.66) !important;
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.028), rgba(255, 255, 255, 0.010)) !important;
    }

    .dayplan-section,
    .dayplan-timeline,
    .dayplan-flexible,
    .dayplan-done {
        gap: 18px !important;
    }

    .shopping-filter-panel {
        padding: 18px !important;
    }

    .shopping-store-group {
        padding: 24px !important;
    }

    .shopping-item-row {
        padding: 17px 18px !important;
    }

    .shopping-bought-button {
        min-height: 36px !important;
        padding-inline: 15px !important;
        opacity: 0.88 !important;
    }

    .maintenance-section,
    .maintenance-panel,
    .maintenance-summary-card {
        padding: 22px !important;
    }

    .maintenance-row {
        padding: 15px 16px !important;
    }

    .directory-card,
    .contact-card {
        padding: 18px !important;
    }

    .directory-actions,
    .contact-actions,
    .action-cluster {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 8px !important;
    }

    .notes-toolbar {
        padding: 16px !important;
    }

    .notes-editor-card {
        padding: 24px !important;
    }

    .schoolrunsweek-days {
        gap: 18px !important;
    }

    .schoolrunsweek-slot-header {
        min-height: 28px !important;
    }

    .schoolrunsweek-slot-title {
        letter-spacing: 0.13em !important;
    }

    .schoolrunsweek-assignment-grid {
        gap: 8px !important;
        padding: 9px !important;
    }

    .schoolrunsweek-delete-button.mud-icon-button,
    .schoolrunsweek-inline-edit.mud-icon-button {
        width: 28px !important;
        min-width: 28px !important;
        height: 28px !important;
        min-height: 28px !important;
        border-radius: 9px !important;
    }

    .audit-log-toolbar {
        display: flex !important;
        align-items: center !important;
        gap: 16px !important;
    }

    .audit-log-matrix td,
    .audit-log-matrix th,
    .mud-table-cell {
        padding-block: 13px !important;
        vertical-align: middle !important;
    }

    .mud-dialog {
        width: min(calc(100vw - 64px), 840px) !important;
        max-width: min(calc(100vw - 64px), 840px) !important;
        max-height: min(86vh, 900px) !important;
        border-radius: 22px !important;
        box-shadow: 0 28px 78px rgba(0, 0, 0, 0.48) !important;
    }

    .mud-dialog:has(.event-edit-dialog-shell),
    .mud-dialog:has(.maintenance-dialog-shell),
    .mud-dialog:has(.config-dialog-grid) {
        width: min(calc(100vw - 72px), 960px) !important;
        max-width: min(calc(100vw - 72px), 960px) !important;
    }

    .mud-dialog .mud-dialog-title {
        padding: 22px 28px 12px !important;
    }

    .mud-dialog .mud-dialog-content {
        padding: 8px 28px 96px !important;
    }

    .mud-dialog .mud-dialog-actions {
        gap: 12px !important;
        padding: 14px 28px 18px !important;
    }
}

/* Visual orchestration foundation + first Schedule maturity pass.
   This layer is deliberately about hierarchy, density, rails, and importance
   contrast. It should make the system more organized, not louder. */
@media (min-width: 1024px) {
    :root,
    [data-theme="dark"] {
        --omni-topbar-height: 70px;
        --omni-sidebar-width-desktop: 244px;
        --omni-lux-content-narrow: var(--omni-content-narrow, 960px);
        --omni-lux-content-form: var(--omni-content-form, 1180px);
        --omni-lux-content-readable: var(--omni-content-readable, 1480px);
        --omni-lux-content-wide: var(--omni-content-wide, 1680px);
        --omni-lux-content-full: var(--omni-content-full, 1800px);
        --omni-lux-rail-padding: var(--omni-content-rail-padding, clamp(24px, 3vw, 48px));
        --omni-lux-section-gap: var(--omni-rhythm-section-gap, 32px);
        --omni-lux-major-gap: var(--omni-rhythm-major-gap, 40px);
        --omni-lux-card-pad: var(--omni-density-card-normal, 24px);
        --omni-lux-card-pad-compact: var(--omni-density-card-compact, 18px);
        --omni-lux-card-pad-operational: var(--omni-density-card-operational, 20px);
        --omni-lux-control-height: var(--omni-button-height-standard, 40px);
        --omni-lux-control-radius: var(--omni-button-radius-machined, 14px);
        --omni-lux-card-radius: 20px;
        --omni-lux-card-radius-strong: 22px;
    }

    html,
    body {
        background:
            var(--omni-glow-background),
            radial-gradient(circle at 88% 8%, rgba(48, 55, 78, 0.08), transparent 40rem),
            linear-gradient(180deg, #0d1017 0%, #06070a 54%, #030407 100%) !important;
    }

    .app-content-canvas {
        padding-inline: var(--omni-lux-rail-padding) !important;
        padding-top: 44px !important;
        padding-bottom: 84px !important;
    }

    .content-narrow {
        width: min(100%, var(--omni-lux-content-narrow)) !important;
        max-width: var(--omni-lux-content-narrow) !important;
        margin-inline: auto !important;
    }

    .content-form {
        width: min(100%, var(--omni-lux-content-form)) !important;
        max-width: var(--omni-lux-content-form) !important;
        margin-inline: auto !important;
    }

    .content-standard,
    .content-readable {
        width: min(100%, var(--omni-lux-content-readable)) !important;
        max-width: var(--omni-lux-content-readable) !important;
        margin-inline: auto !important;
    }

    .content-wide {
        width: min(100%, var(--omni-lux-content-wide)) !important;
        max-width: var(--omni-lux-content-wide) !important;
        margin-inline: auto !important;
    }

    .content-full {
        width: min(100%, var(--omni-lux-content-full)) !important;
        max-width: var(--omni-lux-content-full) !important;
        margin-inline: auto !important;
    }

    .ios-calendar-page,
    .dayplan-page,
    .shopping-ios-page,
    .maintenance-page,
    .ios-contacts-page,
    .schoolrunsweek-page {
        width: min(100%, var(--omni-lux-content-wide)) !important;
        max-width: var(--omni-lux-content-wide) !important;
    }

    .notes-page,
    .settings-page,
    .preferences-page,
    .users-page,
    .kids-page,
    .houses-page,
    .stores-page,
    .locations-page,
    .vehicles-page {
        width: min(100%, var(--omni-lux-content-readable)) !important;
        max-width: var(--omni-lux-content-readable) !important;
    }

    .audit-log-page,
    .platform-audit-page,
    .settings-audit-log-page,
    .error-log-page {
        width: min(100%, var(--omni-lux-content-full)) !important;
        max-width: var(--omni-lux-content-full) !important;
    }

    .app-page-shell-header,
    .app-page-header,
    .ios-calendar-header,
    .dayplan-header,
    .shopping-ios-header,
    .ios-contacts-header,
    .maintenance-header,
    .notes-header,
    .schoolrunsweek-header,
    .settings-hero-card {
        margin-bottom: var(--omni-lux-major-gap) !important;
    }

    .app-section,
    .settings-section,
    .dayplan-section,
    .directory-section,
    .maintenance-section,
    .shopping-store-group,
    .notes-editor-card,
    .schoolrunsweek-board,
    .ios-calendar-grid-wrap,
    .ios-week-view,
    .ios-month-view {
        margin-bottom: var(--omni-lux-section-gap) !important;
    }

    .app-page-eyebrow,
    .section-eyebrow,
    .ios-section-eyebrow,
    .directory-section-label,
    .notes-eyebrow,
    .settings-section-eyebrow,
    .maintenance-section-title,
    .shopping-filter-header .mud-typography {
        opacity: 1 !important;
        color: rgba(202, 207, 219, var(--omni-opacity-meta, 0.62)) !important;
        font-size: 11px !important;
        font-weight: 720 !important;
        letter-spacing: 0.22em !important;
        line-height: 1.15 !important;
    }

    .app-page-title,
    .app-page h1,
    .settings-page h1,
    .ios-calendar-month-label,
    .shopping-ios-title,
    .maintenance-page h1,
    .ios-contacts-page h1,
    .notes-title,
    .schoolrunsweek-title {
        color: rgba(244, 241, 235, var(--omni-opacity-primary, 0.92)) !important;
        font-size: clamp(40px, 3vw, 52px) !important;
        font-weight: 680 !important;
        letter-spacing: -0.038em !important;
        line-height: 1.02 !important;
    }

    .app-section-title,
    .section-title,
    .dayplan-section-title,
    .shopping-section-title,
    .maintenance-group-title,
    .settings-section-title,
    .notes-card-title {
        color: rgba(244, 241, 235, 0.86) !important;
        font-size: clamp(21px, 1.45vw, 28px) !important;
        font-weight: 640 !important;
        letter-spacing: -0.024em !important;
        line-height: 1.12 !important;
    }

    .app-page-description,
    .ios-page-subtitle,
    .shopping-page-subtitle,
    .maintenance-page-subtitle,
    .notes-subtitle,
    .schoolrunsweek-subtitle,
    .settings-page .mud-typography-body1,
    .preferences-page .mud-typography-body1,
    .soft-muted {
        color: rgba(202, 207, 219, var(--omni-opacity-secondary, 0.74)) !important;
        font-weight: 520 !important;
        line-height: 1.46 !important;
    }

    .omni-surface-card,
    .settings-card,
    .settings-tile,
    .store-card,
    .house-card,
    .kid-card,
    .user-card,
    .vehicle-card,
    .location-card,
    .empty-state-card {
        border-radius: var(--omni-lux-card-radius) !important;
        border: 1px solid var(--omni-border-tier-1) !important;
        background: var(--omni-surface-tier-1) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.032), var(--omni-shadow-tier-1) !important;
    }

    .omni-operational-card,
    .shopping-item-row,
    .directory-card,
    .contact-card,
    .maintenance-row,
    .schoolrunsweek-assignment-card,
    .ios-day-event-card,
    .ios-week-column,
    .ios-month-cell {
        border-radius: var(--omni-lux-card-radius) !important;
        border: 1px solid var(--omni-border-tier-2) !important;
        background: var(--omni-surface-tier-2) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.040), var(--omni-shadow-tier-2) !important;
    }

    .omni-primary-card,
    .dayplan-timeline,
    .shopping-needed-panel,
    .maintenance-attention-panel,
    .ios-week-header-cell.active,
    .ios-month-cell.selected {
        border-radius: var(--omni-lux-card-radius-strong) !important;
        border: 1px solid var(--omni-border-tier-3) !important;
        background: var(--omni-surface-tier-3) !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.052),
            var(--omni-glow-ambient),
            var(--omni-shadow-tier-3) !important;
    }

    @media (hover: hover) and (pointer: fine) {
        .omni-surface-card,
        .omni-operational-card,
        .omni-primary-card,
        .settings-card,
        .settings-tile,
        .shopping-item-row,
        .directory-card,
        .contact-card,
        .maintenance-row,
        .schoolrunsweek-assignment-card,
        .ios-day-event-card,
        .ios-week-column,
        .ios-month-cell {
            transition:
                transform var(--omni-motion-luxury-standard),
                border-color var(--omni-motion-luxury-standard),
                background var(--omni-motion-luxury-standard),
                box-shadow var(--omni-motion-luxury-standard) !important;
        }

        .omni-operational-card:hover,
        .shopping-item-row:hover,
        .directory-card:hover,
        .contact-card:hover,
        .maintenance-row:hover,
        .schoolrunsweek-assignment-card:hover,
        .ios-day-event-card:hover,
        .ios-month-cell:hover {
            transform: translateY(var(--omni-interaction-lift, -1px)) !important;
            border-color: rgba(150, 166, 224, 0.16) !important;
        }

        .omni-primary-card:hover,
        .ios-week-header-cell.active:hover,
        .ios-month-cell.selected:hover {
            transform: translateY(var(--omni-interaction-lift-strong, -2px)) !important;
        }
    }

    .mud-button-root:not(.mud-icon-button),
    .app-action-button,
    .primary-action,
    .secondary-action,
    .danger-action,
    .shopping-bought-button,
    .ios-calendar-generate-button,
    .schoolrunsweek-add-button {
        min-height: var(--omni-button-height-standard, 40px) !important;
        border-radius: var(--omni-button-radius-machined, 14px) !important;
        padding-inline: 16px !important;
        font-size: 0.9rem !important;
        font-weight: 730 !important;
        letter-spacing: -0.012em !important;
        transition:
            transform var(--omni-motion-luxury-fast),
            background var(--omni-motion-luxury-fast),
            border-color var(--omni-motion-luxury-fast),
            box-shadow var(--omni-motion-luxury-fast) !important;
    }

    .mud-button-filled-primary,
    .primary-action,
    .ios-calendar-generate-button.mud-button-root {
        background: var(--omni-button-primary-bg) !important;
        border: 1px solid rgba(255, 255, 255, 0.10) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.13), 0 10px 24px rgba(88, 105, 175, 0.13) !important;
        color: #07090d !important;
    }

    .mud-button-outlined,
    .mud-button-text,
    .secondary-action {
        background: var(--omni-button-secondary-bg) !important;
        border: 1px solid rgba(255, 255, 255, 0.064) !important;
        color: rgba(220, 224, 234, 0.82) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.026) !important;
    }

    .shopping-bought-button,
    .edit-button,
    .reset-link-button,
    .secondary-card-action {
        min-height: var(--omni-button-height-compact, 36px) !important;
        opacity: 0.84 !important;
        box-shadow: none !important;
    }

    .danger-action,
    .delete-button,
    .deactivate-button {
        color: rgba(228, 107, 93, 0.78) !important;
        background: var(--omni-button-danger-bg) !important;
        border-color: rgba(228, 107, 93, 0.13) !important;
        box-shadow: none !important;
    }

    @media (hover: hover) and (pointer: fine) {
        .mud-button-root:not(.mud-icon-button):hover,
        .app-action-button:hover,
        .ios-calendar-generate-button:hover {
            transform: translateY(-1px) !important;
        }
    }

    .mud-chip,
    .app-chip,
    .status-chip,
    .count-chip,
    .role-chip,
    .shopping-chip,
    .directory-chip,
    .schoolrunsweek-chip,
    .app-page-context-chip {
        border-radius: 999px !important;
        min-height: 25px !important;
        padding-inline: 10px !important;
    }

    .mud-dialog {
        animation: omni-modal-enter var(--omni-motion-luxury-slow) both !important;
    }

    .mud-dialog .mud-dialog-title {
        border-bottom: 1px solid rgba(255, 255, 255, 0.046) !important;
    }

    .mud-dialog .mud-dialog-actions {
        position: sticky !important;
        bottom: 0 !important;
        z-index: 2 !important;
        border-top: 1px solid rgba(255, 255, 255, 0.060) !important;
        background: linear-gradient(180deg, rgba(16, 20, 30, 0.88), rgba(9, 11, 17, 0.97)) !important;
        backdrop-filter: blur(12px) saturate(0.86) !important;
    }

    @keyframes omni-modal-enter {
        from {
            opacity: 0;
            transform: translateY(10px) scale(0.985);
        }
        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

    /* Schedule: first hero implementation of the orchestration system. */
    .ios-calendar-page {
        --omni-schedule-control-h: 42px;
        --omni-schedule-grid-gap: 14px;
    }

    .ios-calendar-page .ios-calendar-header {
        display: grid !important;
        grid-template-columns: minmax(320px, 0.74fr) minmax(620px, 1.26fr) !important;
        align-items: start !important;
        column-gap: clamp(28px, 4vw, 72px) !important;
        row-gap: 22px !important;
        margin-bottom: 34px !important;
        padding-bottom: 0 !important;
        border-bottom: 0 !important;
    }

    .ios-calendar-page .ios-calendar-header-top {
        min-width: 0 !important;
        padding-top: 2px !important;
    }

    .ios-calendar-page .ios-calendar-month-label {
        margin-bottom: 12px !important;
    }

    .ios-calendar-page .ios-calendar-date-label {
        color: rgba(202, 207, 219, 0.66) !important;
        font-size: 0.96rem !important;
        font-weight: 760 !important;
        letter-spacing: 0.22em !important;
        text-transform: uppercase !important;
        margin-bottom: 28px !important;
    }

    .ios-calendar-page .app-page-context {
        width: fit-content !important;
        max-width: 100% !important;
        margin-top: 0 !important;
        padding: 9px 18px !important;
        border-radius: 999px !important;
        border: 1px solid rgba(150, 166, 224, 0.20) !important;
        background: rgba(141, 156, 219, 0.105) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
    }

    .ios-calendar-page .ios-calendar-toolbar {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(260px, 340px) !important;
        grid-template-areas:
            "date viewing"
            "mode action" !important;
        gap: 14px 18px !important;
        align-items: center !important;
        align-self: start !important;
        margin: 0 !important;
        padding: 18px !important;
        border-radius: 24px !important;
        border: 1px solid rgba(255, 255, 255, 0.062) !important;
        background:
            linear-gradient(180deg, rgba(18, 22, 32, 0.78), rgba(8, 11, 17, 0.84)) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 18px 44px rgba(0, 0, 0, 0.22) !important;
        backdrop-filter: blur(8px) saturate(0.82) !important;
        overflow: hidden !important;
    }

    .ios-calendar-page .ios-calendar-date-nav-row {
        grid-area: date !important;
        display: grid !important;
        grid-template-columns: var(--omni-schedule-control-h) minmax(240px, 1fr) var(--omni-schedule-control-h) minmax(92px, max-content) !important;
        gap: 12px !important;
        align-items: center !important;
        min-width: 0 !important;
    }

    .ios-calendar-page .ios-calendar-viewing-row {
        grid-area: viewing !important;
        min-width: 0 !important;
        width: 100% !important;
    }

    .ios-calendar-page .ios-calendar-mode-row {
        grid-area: mode !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        min-width: 0 !important;
    }

    .ios-calendar-page .ios-calendar-generate-button {
        grid-area: action !important;
        justify-self: end !important;
        width: auto !important;
        max-width: 100% !important;
        white-space: nowrap !important;
    }

    .ios-calendar-page .ios-calendar-picker,
    .ios-calendar-page .ios-calendar-user-picker {
        min-width: 0 !important;
        width: 100% !important;
    }

    .ios-calendar-page .ios-calendar-picker .mud-input-root,
    .ios-calendar-page .ios-calendar-user-picker .mud-input-root,
    .ios-calendar-page .ios-calendar-nav-button,
    .ios-calendar-page .ios-calendar-today-button,
    .ios-calendar-page .ios-calendar-view-button,
    .ios-calendar-page .ios-calendar-generate-button {
        min-height: var(--omni-schedule-control-h) !important;
        height: var(--omni-schedule-control-h) !important;
        border-radius: var(--omni-button-radius-machined, 14px) !important;
    }

    .ios-calendar-page .ios-calendar-nav-button {
        width: var(--omni-schedule-control-h) !important;
        min-width: var(--omni-schedule-control-h) !important;
        padding: 0 !important;
    }

    .ios-calendar-page .ios-calendar-today-button {
        min-width: 92px !important;
        padding-inline: 18px !important;
    }

    .ios-calendar-page .ios-calendar-user-picker .mud-input-label {
        font-size: 0.62rem !important;
        letter-spacing: 0.18em !important;
        color: rgba(202, 207, 219, 0.58) !important;
    }

    .ios-calendar-page .ios-calendar-view-switch {
        height: calc(var(--omni-schedule-control-h) + 6px) !important;
        padding: 4px !important;
        border-radius: 16px !important;
        background: rgba(255, 255, 255, 0.034) !important;
        border: 1px solid rgba(255, 255, 255, 0.055) !important;
        box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.32) !important;
    }

    .ios-calendar-page .ios-calendar-view-button {
        min-width: 88px !important;
        padding-inline: 18px !important;
        border-radius: 12px !important;
        color: rgba(202, 207, 219, 0.70) !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .ios-calendar-page .ios-calendar-view-button.mud-button-filled,
    .ios-calendar-page .ios-calendar-view-button.mud-button-filled-primary {
        color: #080a0f !important;
        background:
            linear-gradient(180deg, rgba(168, 180, 236, 0.94), rgba(126, 140, 207, 0.94)) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 8px 20px rgba(88, 105, 175, 0.14) !important;
    }

    .ios-day-view {
        max-width: min(100%, 1180px) !important;
    }

    .ios-day-event-card {
        display: grid !important;
        grid-template-columns: 92px 2px minmax(0, 1fr) !important;
        gap: 18px !important;
        padding: 20px !important;
        margin-bottom: 14px !important;
    }

    .ios-day-event-title {
        font-size: 1.12rem !important;
        font-weight: 720 !important;
        color: rgba(244, 241, 235, 0.92) !important;
        letter-spacing: -0.018em !important;
    }

    .ios-day-event-meta,
    .ios-day-event-notes {
        color: rgba(202, 207, 219, 0.66) !important;
        font-size: 0.9rem !important;
        line-height: 1.4 !important;
    }

    .ios-week-view-desktop {
        display: grid !important;
        gap: var(--omni-schedule-grid-gap) !important;
    }

    .ios-week-header {
        display: grid !important;
        grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
        gap: var(--omni-schedule-grid-gap) !important;
    }

    .ios-week-header-cell {
        min-height: 86px !important;
        padding: 15px 18px !important;
        border-radius: 18px !important;
        border: 1px solid rgba(255, 255, 255, 0.052) !important;
        background: var(--omni-surface-tier-1) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.030), var(--omni-shadow-tier-1) !important;
    }

    .ios-week-header-cell.active {
        color: #080a0f !important;
        background:
            linear-gradient(180deg, rgba(168, 180, 236, 0.94), rgba(128, 142, 207, 0.94)) !important;
        border-color: rgba(196, 205, 248, 0.24) !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.20),
            0 16px 34px rgba(88, 105, 175, 0.15) !important;
    }

    .ios-week-grid {
        display: grid !important;
        grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
        gap: var(--omni-schedule-grid-gap) !important;
    }

    .ios-week-column {
        min-height: 178px !important;
        padding: 14px !important;
        border-radius: 18px !important;
    }

    .ios-week-empty {
        min-height: 100% !important;
        display: grid !important;
        place-items: center !important;
        color: rgba(202, 207, 219, 0.46) !important;
        font-size: 0.9rem !important;
        font-weight: 620 !important;
    }

    .ios-week-event-chip {
        display: block !important;
        width: 100% !important;
        min-height: 54px !important;
        padding: 10px 11px !important;
        border-radius: 12px !important;
        border: 1px solid rgba(150, 166, 224, 0.11) !important;
        background: rgba(120, 136, 200, 0.12) !important;
        box-shadow: inset 3px 0 0 rgba(168, 180, 236, 0.42) !important;
        overflow: hidden !important;
    }

    .ios-week-event-time {
        color: rgba(168, 180, 236, 0.92) !important;
        font-size: 0.72rem !important;
        font-weight: 760 !important;
        line-height: 1.15 !important;
        margin-bottom: 4px !important;
    }

    .ios-week-event-title {
        color: rgba(244, 241, 235, 0.90) !important;
        font-size: 0.9rem !important;
        font-weight: 720 !important;
        line-height: 1.18 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .ios-month-view-desktop {
        display: grid !important;
        gap: 12px !important;
    }

    .ios-month-weekdays {
        display: grid !important;
        grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
        gap: 12px !important;
        padding-inline: 2px !important;
    }

    .ios-month-weekday {
        color: rgba(202, 207, 219, 0.54) !important;
        font-size: 0.76rem !important;
        font-weight: 760 !important;
        letter-spacing: 0.13em !important;
        text-transform: uppercase !important;
        padding: 0 10px 4px !important;
    }

    .ios-month-grid {
        display: grid !important;
        grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

    .ios-month-cell {
        min-height: clamp(118px, 8.2vw, 148px) !important;
        padding: 12px !important;
        border-radius: 17px !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.034), 0 10px 24px rgba(0, 0, 0, 0.18) !important;
    }

    .ios-month-cell.muted {
        opacity: 0.54 !important;
        background: linear-gradient(180deg, rgba(16, 19, 27, 0.62), rgba(8, 10, 15, 0.72)) !important;
    }

    .ios-month-cell.selected {
        outline: 1px solid rgba(168, 180, 236, 0.34) !important;
        outline-offset: -1px !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.050),
            var(--omni-glow-active),
            0 18px 38px rgba(0, 0, 0, 0.28) !important;
    }

    .ios-month-cell-number {
        color: rgba(244, 241, 235, 0.88) !important;
        font-size: 0.88rem !important;
        font-weight: 760 !important;
        margin-bottom: 8px !important;
    }

    .ios-month-event-pill {
        width: 100% !important;
        min-height: 20px !important;
        padding: 3px 7px !important;
        border-radius: 7px !important;
        color: rgba(244, 241, 235, 0.84) !important;
        background: rgba(120, 136, 200, 0.12) !important;
        border: 1px solid rgba(150, 166, 224, 0.08) !important;
        font-size: 0.72rem !important;
        font-weight: 700 !important;
        line-height: 1.1 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .ios-month-more {
        color: rgba(202, 207, 219, 0.52) !important;
        font-size: 0.72rem !important;
        font-weight: 700 !important;
        padding-inline: 4px !important;
    }

    .ios-calendar-empty {
        max-width: 860px !important;
        min-height: 136px !important;
        margin-inline: auto !important;
        padding: 24px !important;
        border-radius: 20px !important;
        border: 1px solid rgba(255, 255, 255, 0.052) !important;
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.024), rgba(255, 255, 255, 0.008)) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.026), 0 10px 26px rgba(0, 0, 0, 0.18) !important;
    }

    @media (max-width: 1320px) {
        .ios-calendar-page .ios-calendar-header {
            grid-template-columns: 1fr !important;
        }

        .ios-calendar-page .ios-calendar-toolbar {
            grid-template-columns: minmax(0, 1fr) minmax(240px, 320px) !important;
        }
    }
}

/* Foundation enforcement: shared surfaces now consume the visual system.
   This is intentionally practical and selector-heavy so older page markup is
   pulled into the hierarchy without a rewrite. */
@media (min-width: 1024px) {
    .app-page-shell,
    .app-page,
    .content-wide,
    .content-readable,
    .content-standard,
    .content-form,
    .content-narrow {
        padding-inline: 0 !important;
    }

    .app-page-shell-header,
    .app-page-header,
    .ios-calendar-header,
    .dayplan-header,
    .shopping-ios-header,
    .ios-contacts-header,
    .maintenance-header,
    .notes-header,
    .schoolrunsweek-header {
        position: relative !important;
    }

    .app-page-shell-header::after,
    .app-page-header::after,
    .shopping-ios-header::after,
    .ios-contacts-header::after,
    .maintenance-header::after,
    .notes-header::after,
    .schoolrunsweek-header::after {
        content: none !important;
        display: none !important;
    }

    .page-identity-schedule {
        --omni-page-identity-accent: rgba(168, 180, 236, 0.92);
        --omni-page-identity-soft: rgba(120, 136, 200, 0.13);
    }

    .shopping-ios-page {
        --omni-page-identity-accent: rgba(185, 162, 122, 0.92);
        --omni-page-identity-soft: rgba(185, 162, 122, 0.10);
    }

    .maintenance-page {
        --omni-page-identity-accent: rgba(129, 185, 155, 0.90);
        --omni-page-identity-soft: rgba(129, 185, 155, 0.10);
    }

    .ios-contacts-page {
        --omni-page-identity-accent: rgba(196, 201, 214, 0.88);
        --omni-page-identity-soft: rgba(255, 255, 255, 0.045);
    }

    .notes-page {
        --omni-page-identity-accent: rgba(185, 162, 122, 0.78);
        --omni-page-identity-soft: rgba(185, 162, 122, 0.075);
    }

    .settings-page,
    .preferences-page {
        --omni-page-identity-accent: rgba(151, 160, 178, 0.80);
        --omni-page-identity-soft: rgba(255, 255, 255, 0.032);
    }

    .omni-control-surface,
    .app-page-shell-toolbar,
    .shopping-filter-panel,
    .directory-filter-bar,
    .maintenance-filter-bar,
    .notes-toolbar,
    .schoolrunsweek-toolbar,
    .audit-log-toolbar,
    .settings-toolbar {
        padding: var(--omni-rhythm-card-gap, 18px) !important;
        border: 1px solid var(--omni-border-tier-1) !important;
        border-radius: 20px !important;
        background:
            linear-gradient(180deg, rgba(19, 23, 32, 0.76), rgba(9, 12, 18, 0.82)) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.032), var(--omni-shadow-tier-1) !important;
        backdrop-filter: blur(8px) saturate(0.82) !important;
    }

    .omni-primary-command,
    .mud-button-root.omni-primary-command,
    .mud-dialog-actions .mud-button-filled-primary,
    .mud-dialog-actions .primary-action {
        min-height: var(--omni-button-height-primary, 42px) !important;
        border-radius: var(--omni-button-radius-machined, 14px) !important;
        padding-inline: 18px !important;
        background: var(--omni-button-primary-bg) !important;
        border: 1px solid rgba(255, 255, 255, 0.10) !important;
        color: #07090d !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 10px 24px rgba(88, 105, 175, 0.14) !important;
    }

    .omni-secondary-command,
    .mud-button-root.omni-secondary-command,
    .mud-dialog-actions .mud-button-outlined,
    .mud-dialog-actions .mud-button-text {
        min-height: var(--omni-button-height-standard, 40px) !important;
        border-radius: var(--omni-button-radius-machined, 14px) !important;
        padding-inline: 16px !important;
        background: var(--omni-button-secondary-bg) !important;
        border: 1px solid rgba(255, 255, 255, 0.064) !important;
        color: rgba(220, 224, 234, 0.82) !important;
    }

    .omni-quiet-action,
    .edit-button,
    .reset-link-button,
    .shopping-bought-button,
    .store-card-actions .mud-button-root,
    .house-card-actions .mud-button-root,
    .kid-card-actions .mud-button-root,
    .user-card-actions .mud-button-root,
    .vehicle-card-actions .mud-button-root,
    .location-card-actions .mud-button-root,
    .settings-card-actions .mud-button-root {
        min-height: var(--omni-button-height-compact, 36px) !important;
        border-radius: var(--omni-button-radius-compact, 12px) !important;
        padding-inline: 14px !important;
        color: rgba(220, 224, 234, 0.78) !important;
        background: rgba(255, 255, 255, 0.030) !important;
        border: 1px solid rgba(255, 255, 255, 0.054) !important;
        box-shadow: none !important;
    }

    .omni-execution-action,
    .shopping-bought-button {
        color: rgba(11, 13, 18, 0.94) !important;
        background:
            linear-gradient(180deg, rgba(151, 164, 224, 0.88), rgba(119, 134, 198, 0.88)) !important;
        border-color: rgba(199, 207, 248, 0.14) !important;
    }

    .omni-destructive-action,
    .delete-button,
    .deactivate-button,
    .schoolrunsweek-delete-button,
    .schoolruns-delete-button {
        color: rgba(228, 107, 93, 0.76) !important;
        background: rgba(228, 107, 93, 0.052) !important;
        border: 1px solid rgba(228, 107, 93, 0.12) !important;
        box-shadow: none !important;
    }

    .omni-icon-utility,
    .mud-icon-button.omni-icon-utility,
    .mud-icon-button,
    .action-icon,
    .icon-action,
    .directory-action,
    .contact-action,
    .notes-action-button,
    .schoolrunsweek-action {
        border-radius: 12px !important;
        background: rgba(255, 255, 255, 0.030) !important;
        border: 1px solid rgba(255, 255, 255, 0.050) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.024) !important;
    }

    .omni-segmented-control,
    .ios-calendar-view-switch,
    .mud-button-group-root {
        border-radius: 16px !important;
        padding: 4px !important;
        background: rgba(255, 255, 255, 0.032) !important;
        border: 1px solid rgba(255, 255, 255, 0.052) !important;
        box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.30) !important;
    }

    .omni-segmented-option,
    .ios-calendar-view-button {
        border-radius: 12px !important;
    }

    .status-chip,
    .role-chip,
    .count-chip,
    .shopping-chip,
    .directory-chip,
    .schoolrunsweek-chip,
    .mud-chip {
        background: rgba(255, 255, 255, 0.045) !important;
        border: 1px solid rgba(255, 255, 255, 0.050) !important;
        color: rgba(220, 224, 234, 0.74) !important;
        box-shadow: none !important;
    }

    .count-chip,
    .mud-chip-color-primary,
    .mud-chip-filled-primary {
        background: var(--omni-page-identity-soft, rgba(120, 136, 200, 0.12)) !important;
        border-color: rgba(150, 166, 224, 0.12) !important;
        color: rgba(228, 232, 248, 0.86) !important;
    }

    .app-empty-state,
    .empty-state-card,
    .ios-calendar-empty,
    .dayplan-empty,
    .maintenance-empty,
    .shopping-empty,
    .directory-empty {
        border: 1px solid var(--omni-border-tier-1) !important;
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.020), rgba(255, 255, 255, 0.006)) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.022), var(--omni-shadow-tier-1) !important;
    }

    .mud-input-control,
    .mud-input-root,
    .mud-select,
    .mud-picker-input-button {
        transition:
            border-color var(--omni-motion-luxury-fast),
            box-shadow var(--omni-motion-luxury-fast),
            background var(--omni-motion-luxury-fast) !important;
    }

    .mud-input-root,
    .mud-input-outlined,
    .mud-select .mud-input-root {
        border-radius: var(--omni-button-radius-machined, 14px) !important;
        background: rgba(255, 255, 255, 0.034) !important;
    }

    .mud-input-control:focus-within .mud-input-root,
    .mud-input-root:focus-within {
        box-shadow: var(--omni-glow-focus) !important;
        border-color: rgba(150, 166, 224, 0.22) !important;
    }

    .mud-dialog .mud-dialog-title,
    .mud-dialog .mud-dialog-content,
    .mud-dialog .mud-dialog-actions {
        box-sizing: border-box !important;
    }

    .mud-dialog .mud-dialog-title {
        padding: 22px 28px 16px !important;
    }

    .mud-dialog .mud-dialog-content {
        padding: 18px 28px 112px !important;
    }

    .mud-dialog .mud-dialog-actions {
        min-height: 74px !important;
        align-items: center !important;
        justify-content: flex-end !important;
    }

    .event-edit-dialog-shell,
    .maintenance-dialog-shell,
    .contact-dialog-shell,
    .shopping-dialog-shell,
    .dayplan-dialog-shell {
        display: grid !important;
        gap: var(--omni-rhythm-group-gap, 24px) !important;
    }

    .dialog-section,
    .config-dialog-section,
    .event-dialog-section,
    .maintenance-dialog-section {
        border-radius: 18px !important;
        border: 1px solid var(--omni-border-tier-1) !important;
        background: var(--omni-surface-tier-1) !important;
        padding: var(--omni-density-card-compact, 18px) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.024) !important;
    }
}

@media (max-width: 1023.98px) {
    .ios-calendar-page .ios-calendar-header {
        display: block !important;
    }

    .ios-calendar-page .ios-calendar-toolbar {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        padding: 14px !important;
    }

    .ios-calendar-page .ios-calendar-date-nav-row {
        display: grid !important;
        grid-template-columns: 44px minmax(0, 1fr) 44px !important;
        gap: 10px !important;
    }

    .ios-calendar-page .ios-calendar-today-button {
        grid-column: 1 / -1 !important;
        width: 100% !important;
    }

    .ios-calendar-page .ios-calendar-viewing-row,
    .ios-calendar-page .ios-calendar-mode-row,
    .ios-calendar-page .ios-calendar-generate-button {
        width: 100% !important;
    }

    .ios-calendar-page .ios-calendar-mode-row {
        display: grid !important;
        gap: 10px !important;
    }

    .ios-calendar-page .ios-calendar-view-switch {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .ios-calendar-page .ios-calendar-generate-button {
        justify-self: stretch !important;
    }

    .ios-month-view-desktop,
    .ios-week-view-desktop {
        display: none !important;
    }

    .ios-week-view-mobile,
    .ios-month-mobile-list {
        display: block !important;
    }
}

/* Machined form-control correction.
   Keep Mud inputs as one clean control: body, readable value slot, and a
   fixed right utility well for picker/select adornments. */
.mud-input-control .mud-input-root,
.mud-input-control .mud-input.mud-input-outlined,
.mud-input-control .mud-select .mud-input-root {
    position: relative !important;
    display: flex !important;
    align-items: stretch !important;
    min-width: 0 !important;
    border-radius: var(--omni-button-radius-machined, 14px) !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.036), rgba(255, 255, 255, 0.018)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.036),
        inset 0 -1px 0 rgba(0, 0, 0, 0.24) !important;
    overflow: hidden !important;
}

.mud-input-control .mud-input-outlined .mud-input-outlined-border {
    border-color: rgba(255, 255, 255, 0.078) !important;
    border-width: 1px !important;
    border-radius: inherit !important;
    background: transparent !important;
}

.mud-input-control .mud-input-slot {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: center !important;
    padding-inline: 14px 12px !important;
    overflow: hidden !important;
}

.mud-input-control .mud-input-slot input,
.mud-input-control .mud-input-slot textarea,
.mud-input-control .mud-select-input {
    min-width: 0 !important;
    width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.mud-picker .mud-input > input.mud-input-slot {
    flex: 1 1 auto !important;
    width: auto !important;
}

.mud-picker .mud-input > div.mud-input-slot:empty {
    display: none !important;
}

.mud-select .mud-input > input.mud-input-slot.mud-select-input {
    display: none !important;
}

.mud-select .mud-input > div.mud-input-slot.mud-select-input {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 8px 0 0 !important;
    align-items: center !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
}

.mud-input-control .mud-input-adornment-end {
    align-self: stretch !important;
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 44px !important;
    height: auto !important;
    min-height: 100% !important;
    margin: 0 !important;
    padding: 0 6px 0 0 !important;
    background: transparent !important;
}

.mud-select .mud-input > .mud-input-adornment-end {
    width: 40px !important;
    min-width: 40px !important;
    height: auto !important;
    min-height: 100% !important;
    margin-left: auto !important;
    padding: 0 10px 0 0 !important;
}

.mud-select .mud-input > .mud-input-adornment-end svg {
    width: 22px !important;
    height: 22px !important;
    opacity: 0.78 !important;
}

.mud-input-control .mud-picker-input-button,
.mud-input-control .mud-input-adornment-end .mud-icon-button {
    width: 36px !important;
    min-width: 36px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 11px !important;
    border: 1px solid rgba(255, 255, 255, 0.064) !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.060), rgba(255, 255, 255, 0.026)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

.mud-input-control .mud-picker-input-button:hover,
.mud-input-control .mud-input-adornment-end .mud-icon-button:hover {
    border-color: rgba(168, 180, 236, 0.22) !important;
    background:
        linear-gradient(180deg, rgba(168, 180, 236, 0.12), rgba(255, 255, 255, 0.035)) !important;
}

.mud-input-control .mud-input-label {
    max-width: calc(100% - 56px) !important;
    pointer-events: none !important;
}

.ios-calendar-page .ios-calendar-date-control .mud-input-root,
.ios-calendar-page .ios-calendar-date-control .mud-input.mud-input-outlined {
    height: var(--omni-schedule-control-h, 42px) !important;
    min-height: var(--omni-schedule-control-h, 42px) !important;
    border-radius: var(--omni-button-radius-machined, 14px) !important;
}

.ios-calendar-page .ios-calendar-date-control .mud-input-slot {
    height: var(--omni-schedule-control-h, 42px) !important;
    min-height: var(--omni-schedule-control-h, 42px) !important;
    padding: 0 10px 0 16px !important;
    font-size: 0.94rem !important;
    font-weight: 720 !important;
    color: rgba(237, 233, 225, 0.94) !important;
}

.ios-calendar-page .ios-calendar-date-control .mud-input-adornment-end {
    min-width: 46px !important;
    padding-right: 5px !important;
}

.ios-calendar-page .ios-calendar-date-control .mud-picker-input-button {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
}

@media (max-width: 1023.98px) {
    .mud-input-control .mud-input-adornment-end {
        min-width: 42px !important;
        padding-right: 5px !important;
    }

    .mud-input-control .mud-picker-input-button,
    .mud-input-control .mud-input-adornment-end .mud-icon-button {
        width: 34px !important;
        min-width: 34px !important;
        height: 34px !important;
        min-height: 34px !important;
        border-radius: 11px !important;
    }

    .ios-calendar-page .ios-calendar-date-control .mud-input-slot {
        padding-left: 14px !important;
        padding-right: 8px !important;
    }
}

/* Mobile drawer safety override.
   This file is loaded last, so this wins over the full-screen mobile drawer
   styling whenever MudBlazor marks the drawer closed. */
@media (max-width: 1023.98px) {
    .mud-drawer.app-drawer.mud-drawer-temporary {
        position: fixed !important;
        top: var(--omni-mobile-topbar-h, 60px) !important;
        left: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        height: calc(100dvh - var(--omni-mobile-topbar-h, 60px)) !important;
    }

    .mud-drawer.app-drawer.mud-drawer-temporary.mud-drawer--closed,
    .mud-drawer.app-drawer.mud-drawer-temporary.mud-drawer--closed.mud-drawer--initial {
        visibility: hidden !important;
        pointer-events: none !important;
        transform: translateX(-105vw) !important;
    }

    .mud-drawer.app-drawer.mud-drawer-temporary.mud-drawer--open {
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translateX(0) !important;
    }
}

/* Final orchestration enforcement pass.
   Purpose: enforce hierarchy, machined controls, page identity, and Schedule
   precision without introducing route-level motion or decorative effects. */
@media (min-width: 1024px) {
    :root,
    [data-theme="dark"] {
        --omni-button-radius-machined: 12px;
        --omni-button-radius-compact: 10px;
        --omni-button-height-compact: 34px;
        --omni-button-height-standard: 38px;
        --omni-button-height-primary: 40px;
        --omni-radius-control: 12px;
        --omni-radius-card: 18px;
        --omni-radius-modal: 20px;
        --omni-density-card-compact: 16px;
        --omni-density-card-normal: 22px;
        --omni-density-card-operational: 18px;
        --omni-rhythm-section-gap: 34px;
        --omni-rhythm-major-gap: 42px;
        --omni-input-radius: 12px;
        --omni-input-height: 42px;
        --omni-lux-card-radius: 18px;
        --omni-lux-card-radius-strong: 20px;
    }

    .page-identity-schedule {
        --omni-page-identity-gap: 38px;
        --omni-page-focus-border: rgba(150, 166, 224, 0.24);
        --omni-page-focus-surface: linear-gradient(180deg, rgba(26, 31, 45, 0.92), rgba(11, 14, 22, 0.94));
    }

    .procurement-page {
        --omni-page-identity-gap: 34px;
        --omni-page-focus-border: rgba(185, 162, 122, 0.18);
        --omni-page-focus-surface: linear-gradient(180deg, rgba(25, 29, 39, 0.88), rgba(11, 14, 20, 0.92));
    }

    .maintenance-page {
        --omni-page-identity-gap: 36px;
        --omni-page-focus-border: rgba(129, 185, 155, 0.18);
        --omni-page-focus-surface: linear-gradient(180deg, rgba(22, 30, 35, 0.88), rgba(10, 15, 19, 0.92));
    }

    .network-page {
        --omni-page-identity-gap: 34px;
        --omni-page-focus-border: rgba(143, 162, 230, 0.18);
        --omni-page-focus-surface: linear-gradient(180deg, rgba(23, 28, 40, 0.88), rgba(10, 13, 20, 0.92));
    }

    .notes-page {
        --omni-page-identity-gap: 36px;
        --omni-page-focus-border: rgba(185, 162, 122, 0.14);
        --omni-page-focus-surface: linear-gradient(180deg, rgba(22, 24, 31, 0.90), rgba(9, 11, 16, 0.94));
    }

    .app-page-shell-header,
    .app-page-header,
    .ios-calendar-header,
    .dayplan-page-header,
    .shopping-ios-page .app-page-shell-header,
    .maintenance-page .app-page-shell-header,
    .network-page .app-page-shell-header,
    .notes-header {
        margin-bottom: var(--omni-page-identity-gap, var(--omni-rhythm-major-gap)) !important;
    }

    .app-empty-state-card,
    .ios-calendar-empty,
    .dayplan-empty-card,
    .shopping-empty-card,
    .maintenance-empty-state,
    .ios-empty-state {
        min-height: 112px !important;
        padding: 22px 24px !important;
        border-radius: var(--omni-lux-card-radius, 18px) !important;
        border: 1px solid rgba(255, 255, 255, 0.050) !important;
        background:
            linear-gradient(180deg, rgba(18, 22, 31, 0.62), rgba(7, 9, 14, 0.70)) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.030) !important;
    }

    .app-empty-state-icon {
        opacity: 0.58 !important;
    }

    .app-empty-state-eyebrow {
        color: rgba(202, 207, 219, 0.58) !important;
        font-size: 10px !important;
        font-weight: 760 !important;
        letter-spacing: 0.20em !important;
    }

    .app-empty-state-title {
        color: rgba(244, 241, 235, 0.80) !important;
        font-size: 0.98rem !important;
        font-weight: 680 !important;
        letter-spacing: -0.018em !important;
    }

    .app-empty-state-message {
        color: rgba(202, 207, 219, 0.58) !important;
        font-size: 0.86rem !important;
        line-height: 1.45 !important;
    }

    .mud-button-root:not(.mud-icon-button),
    .app-action-button,
    .primary-action,
    .secondary-action,
    .danger-action,
    .shopping-bought-button,
    .dayplan-primary-action,
    .ios-calendar-generate-button,
    .schoolrunsweek-add-button {
        min-height: var(--omni-button-height-standard) !important;
        height: auto !important;
        border-radius: var(--omni-button-radius-machined) !important;
        padding: 0 14px !important;
        font-size: 0.84rem !important;
        font-weight: 720 !important;
        letter-spacing: -0.006em !important;
        text-transform: none !important;
    }

    .mud-button-filled-primary,
    .primary-action,
    .ios-calendar-generate-button.mud-button-root {
        background: linear-gradient(180deg, rgba(132, 146, 204, 0.94), rgba(105, 120, 181, 0.94)) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 8px 18px rgba(88, 105, 175, 0.10) !important;
    }

    .mud-button-outlined,
    .mud-button-text,
    .secondary-action,
    .shopping-bought-button {
        background: rgba(255, 255, 255, 0.026) !important;
        border-color: rgba(255, 255, 255, 0.055) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.020) !important;
    }

    .shopping-bought-button,
    .edit-button,
    .reset-link-button,
    .secondary-card-action {
        min-height: var(--omni-button-height-compact) !important;
        border-radius: var(--omni-button-radius-compact) !important;
        font-size: 0.80rem !important;
        opacity: 0.78 !important;
    }

    .danger-action,
    .delete-button,
    .deactivate-button,
    .mud-button-text-error,
    .mud-button-outlined-error {
        color: rgba(228, 107, 93, 0.76) !important;
        background: rgba(228, 107, 93, 0.045) !important;
        border-color: rgba(228, 107, 93, 0.105) !important;
    }

    .mud-input-control,
    .mud-input-control .mud-input {
        min-height: var(--omni-input-height, 42px) !important;
    }

    .mud-input-control .mud-input-root,
    .mud-input-control .mud-input.mud-input-outlined {
        min-height: var(--omni-input-height, 42px) !important;
        border-radius: var(--omni-input-radius, 12px) !important;
        background: linear-gradient(180deg, rgba(19, 23, 32, 0.82), rgba(9, 12, 18, 0.90)) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.032) !important;
    }

    .mud-input-control .mud-input-slot {
        min-height: var(--omni-input-height, 42px) !important;
        padding-top: 12px !important;
        padding-bottom: 4px !important;
        color: rgba(244, 241, 235, 0.88) !important;
        font-size: 0.90rem !important;
        font-weight: 620 !important;
    }

    .mud-input-control .mud-input-label,
    .mud-input-control .mud-input-label.mud-shrink,
    .mud-input-control .mud-input-label.mud-input-label-animate {
        transform: translate(14px, 5px) scale(1) !important;
        max-width: calc(100% - 52px) !important;
        color: rgba(202, 207, 219, 0.56) !important;
        font-size: 0.55rem !important;
        font-weight: 760 !important;
        letter-spacing: 0.13em !important;
        line-height: 1 !important;
        text-transform: uppercase !important;
    }

    .mud-input-control .mud-input-adornment-end {
        min-width: 42px !important;
        padding-right: 4px !important;
    }

    .mud-input-control .mud-icon-button {
        width: 32px !important;
        min-width: 32px !important;
        height: 32px !important;
        min-height: 32px !important;
        border-radius: 10px !important;
    }

    .mud-dialog {
        border-radius: var(--omni-radius-modal, 20px) !important;
    }

    .mud-dialog .mud-dialog-content {
        padding: 24px 28px 28px !important;
    }

    .mud-dialog .mud-dialog-actions {
        min-height: 72px !important;
        padding: 14px 28px 18px !important;
        justify-content: flex-end !important;
        gap: 10px !important;
    }

    /* Schedule maturity: temporal controls, rail hierarchy, and calendar density. */
    .ios-calendar-page {
        --omni-schedule-control-h: 40px;
        --omni-schedule-grid-gap: 12px;
        --omni-schedule-cell-bg: var(--omni-page-focus-surface);
        --omni-schedule-cell-border: rgba(255, 255, 255, 0.062);
    }

    .ios-calendar-page .ios-calendar-header {
        grid-template-columns: minmax(300px, 0.62fr) minmax(620px, 1.38fr) !important;
        column-gap: clamp(32px, 4vw, 80px) !important;
        margin-bottom: 36px !important;
    }

    .ios-calendar-page .ios-calendar-toolbar {
        grid-template-columns: minmax(0, 1fr) minmax(260px, 330px) !important;
        grid-template-areas:
            "date viewing"
            "mode action" !important;
        gap: 12px 14px !important;
        padding: 16px !important;
        border-radius: 20px !important;
        overflow: visible !important;
        background:
            linear-gradient(180deg, rgba(15, 19, 28, 0.82), rgba(7, 10, 16, 0.88)) !important;
        border-color: rgba(255, 255, 255, 0.058) !important;
        backdrop-filter: none !important;
    }

    .ios-calendar-page .ios-calendar-date-nav-row {
        grid-template-columns: var(--omni-schedule-control-h) minmax(230px, 1fr) var(--omni-schedule-control-h) minmax(86px, max-content) !important;
        gap: 10px !important;
    }

    .ios-calendar-page .ios-calendar-mode-row {
        grid-area: mode !important;
        width: 100% !important;
        max-width: none !important;
        display: grid !important;
        grid-template-columns: minmax(250px, 320px) minmax(0, 1fr) !important;
        gap: 14px !important;
        align-items: center !important;
    }

    .ios-calendar-page .ios-calendar-viewing-row {
        grid-area: viewing !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .ios-calendar-page .ios-calendar-generate-button.mud-button-root {
        grid-area: action !important;
        justify-self: end !important;
        width: auto !important;
        min-width: 168px !important;
        height: var(--omni-schedule-control-h) !important;
        min-height: var(--omni-schedule-control-h) !important;
        border-radius: 12px !important;
        white-space: nowrap !important;
    }

    .ios-calendar-page .ios-calendar-view-switch {
        width: 100% !important;
        min-height: var(--omni-schedule-control-h) !important;
        border-radius: 14px !important;
        padding: 3px !important;
        background: rgba(4, 6, 10, 0.58) !important;
    }

    .ios-calendar-page .ios-calendar-view-button.mud-button-root {
        min-height: 32px !important;
        height: 32px !important;
        border-radius: 10px !important;
        font-size: 0.80rem !important;
    }

    .ios-calendar-page .ios-calendar-nav-button.mud-icon-button,
    .ios-calendar-page .ios-calendar-today-button.mud-button-root,
    .ios-calendar-page .ios-calendar-date-control .mud-input-root,
    .ios-calendar-page .ios-calendar-user-picker .mud-input-root {
        height: var(--omni-schedule-control-h) !important;
        min-height: var(--omni-schedule-control-h) !important;
        border-radius: 12px !important;
    }

    .ios-calendar-page .ios-week-header,
    .ios-calendar-page .ios-week-grid,
    .ios-calendar-page .ios-month-weekdays,
    .ios-calendar-page .ios-month-grid {
        gap: var(--omni-schedule-grid-gap) !important;
    }

    .ios-calendar-page .ios-week-header-cell {
        min-height: 66px !important;
        border-radius: 14px !important;
    }

    .ios-calendar-page .ios-week-column {
        min-height: 148px !important;
        padding: 10px !important;
        border-radius: 16px !important;
    }

    .ios-calendar-page .ios-week-empty {
        min-height: 96px !important;
        color: rgba(202, 207, 219, 0.46) !important;
        font-size: 0.80rem !important;
    }

    .ios-calendar-page .ios-week-event-chip {
        padding: 8px 9px !important;
        border-radius: 10px !important;
        background: rgba(126, 142, 201, 0.13) !important;
        border: 1px solid rgba(126, 142, 201, 0.12) !important;
    }

    .ios-calendar-page .ios-week-event-title {
        font-size: 0.82rem !important;
        font-weight: 720 !important;
        line-height: 1.18 !important;
    }

    .ios-calendar-page .ios-month-cell {
        min-height: clamp(120px, 8vw, 148px) !important;
        padding: 10px 11px !important;
        border-radius: 16px !important;
    }

    .ios-calendar-page .ios-month-cell-number {
        font-size: 0.82rem !important;
        font-weight: 720 !important;
        color: rgba(244, 241, 235, 0.82) !important;
    }

    .ios-calendar-page .ios-month-event-pill {
        height: 18px !important;
        min-height: 18px !important;
        max-width: 100% !important;
        padding: 0 7px !important;
        border-radius: 6px !important;
        font-size: 0.66rem !important;
        line-height: 17px !important;
        background: rgba(126, 142, 201, 0.135) !important;
        border: 1px solid rgba(126, 142, 201, 0.12) !important;
    }

    .ios-calendar-page .ios-month-cell.selected {
        border-color: rgba(150, 166, 224, 0.64) !important;
        box-shadow:
            0 0 0 1px rgba(150, 166, 224, 0.16),
            inset 0 1px 0 rgba(255, 255, 255, 0.052),
            var(--omni-shadow-tier-2) !important;
    }

    @media (max-width: 1499.98px) {
        .ios-calendar-page .ios-calendar-header {
            grid-template-columns: minmax(0, 1fr) !important;
            row-gap: 24px !important;
        }

        .ios-calendar-page .ios-calendar-toolbar {
            max-width: 1120px !important;
        }
    }
}

@media (max-width: 767.98px) {
    .app-empty-state-card,
    .ios-calendar-empty,
    .dayplan-empty-card,
    .shopping-empty-card,
    .maintenance-empty-state,
    .ios-empty-state {
        min-height: 96px !important;
        padding: 18px !important;
    }

    .ios-calendar-page .ios-calendar-toolbar {
        overflow: visible !important;
    }
}

/* Surgical Schedule control correction.
   The mode row owns the segmented control and Generate command in markup, so
   keep the command inside that row instead of placing it in a phantom parent
   grid area. This removes the split/ghosted control geometry. */
.ios-calendar-page .ios-calendar-toolbar {
    grid-template-areas:
        "date viewing"
        "mode mode" !important;
}

.ios-calendar-page .ios-calendar-mode-row {
    grid-area: mode !important;
    display: grid !important;
    grid-template-columns: minmax(252px, 322px) minmax(0, 1fr) auto !important;
    gap: 14px !important;
    align-items: center !important;
    justify-content: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
}

.ios-calendar-page .ios-calendar-view-switch {
    grid-area: auto !important;
    grid-column: 1 !important;
    justify-self: start !important;
    width: auto !important;
    min-width: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
}

.ios-calendar-page .ios-calendar-generate-button.mud-button-root {
    grid-area: auto !important;
    grid-column: 3 !important;
    justify-self: end !important;
    align-self: center !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 166px !important;
    max-width: 230px !important;
    height: var(--omni-schedule-control-h, 40px) !important;
    min-height: var(--omni-schedule-control-h, 40px) !important;
    border-radius: var(--omni-button-radius-machined, 12px) !important;
    overflow: hidden !important;
    background: linear-gradient(180deg, rgba(135, 149, 208, 0.94), rgba(108, 123, 187, 0.94)) !important;
    border: 1px solid rgba(202, 211, 255, 0.18) !important;
    color: #070911 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.13), 0 8px 18px rgba(84, 101, 170, 0.13) !important;
}

.ios-calendar-page .ios-calendar-generate-button .mud-button-label {
    position: relative !important;
    z-index: 1 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.ios-calendar-page .ios-calendar-generate-button .mud-ripple,
.ios-calendar-page .ios-calendar-generate-button::before,
.ios-calendar-page .ios-calendar-generate-button::after {
    display: none !important;
}

@media (max-width: 1499.98px) {
    .ios-calendar-page .ios-calendar-mode-row {
        grid-template-columns: minmax(252px, 322px) minmax(0, 1fr) auto !important;
    }
}

@media (max-width: 767.98px) {
    .ios-calendar-page .ios-calendar-toolbar {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-areas:
            "date"
            "viewing"
            "mode" !important;
        justify-items: stretch !important;
        align-items: stretch !important;
    }

    .ios-calendar-page .ios-calendar-date-nav-row {
        grid-area: date !important;
        display: grid !important;
        grid-template-columns: 46px minmax(0, 1fr) 46px !important;
        gap: 10px !important;
        width: 100% !important;
        min-width: 0 !important;
        justify-self: stretch !important;
    }

    .ios-calendar-page .ios-calendar-date-nav-row > .ios-calendar-nav-button:first-child {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    .ios-calendar-page .ios-calendar-date-nav-row > .ios-calendar-date-control,
    .ios-calendar-page .ios-calendar-date-nav-row > .ios-calendar-picker {
        grid-column: 2 !important;
        grid-row: 1 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    .ios-calendar-page .ios-calendar-date-nav-row > .ios-calendar-nav-button:nth-child(3) {
        grid-column: 3 !important;
        grid-row: 1 !important;
    }

    .ios-calendar-page .ios-calendar-date-nav-row > .ios-calendar-today-button {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        width: 100% !important;
    }

    .ios-calendar-page .ios-calendar-mode-row {
        grid-area: mode !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        width: 100% !important;
        min-width: 0 !important;
        justify-self: stretch !important;
    }

    .ios-calendar-page .ios-calendar-viewing-row {
        grid-area: viewing !important;
        width: 100% !important;
        min-width: 0 !important;
        justify-self: stretch !important;
    }

    .ios-calendar-page .ios-calendar-view-switch,
    .ios-calendar-page .ios-calendar-generate-button.mud-button-root {
        grid-area: auto !important;
        grid-column: 1 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        justify-self: stretch !important;
    }

    .ios-calendar-page .ios-calendar-generate-button .mud-button-label {
        overflow: visible !important;
        text-overflow: clip !important;
    }
}

/* Route/page stability guard.
   Navigation should swap content immediately while the app shell stays anchored.
   Keep motion local to controls, hover states, drawers, and modals. */
.mud-main-content,
.app-main-content,
.app-content-canvas,
.app-page,
.app-page-shell,
.app-page-shell-header,
.app-page-shell-body,
.app-page-header,
.page-surface,
.settings-page,
.setup-page,
.preferences-page,
.dashboard-page,
.app-dashboard,
.ios-calendar-page,
.shopping-page,
.directory-page,
.maintenance-page,
.notes-page,
.schoolrunsweek-page,
.route-view,
.route-container {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
}

.mud-main-content,
.app-main-content,
.app-content-canvas {
    backdrop-filter: none !important;
}

/* Mobile nav stability: route changes must not make the drawer perform a
   theatrical slide in/out. The menu may open and close, but state changes are
   immediate so the shell remains anchored while pages swap. */
@media (max-width: 1023.98px) {
    .mud-drawer.app-drawer,
    .mud-drawer.app-drawer.mud-drawer-temporary,
    .mud-drawer.app-drawer .mud-drawer-content {
        transition: none !important;
        animation: none !important;
        transition-duration: 0ms !important;
        will-change: auto !important;
    }

    .mud-drawer.app-drawer.mud-drawer-temporary.mud-drawer--closed,
    .mud-drawer.app-drawer.mud-drawer-temporary.mud-drawer--closed.mud-drawer--initial {
        visibility: hidden !important;
        pointer-events: none !important;
        transform: translateX(-105vw) !important;
        transition: none !important;
        animation: none !important;
    }

    .mud-drawer.app-drawer.mud-drawer-temporary.mud-drawer--open {
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translateX(0) !important;
        transition: none !important;
        animation: none !important;
    }
}

/* Form-control chrome correction.
   MudBlazor nests input containers/slots inside the visible control shell. A
   few global surface passes were painting those inner elements too, creating a
   strange mini box inside selects/date pickers. Keep chrome on the outer
   control only; inner slots should be transparent text/layout regions. */
.mud-input-control .mud-input-control-input-container,
.mud-input-root,
.mud-input-slot,
.mud-select-input,
.mud-input > input,
.mud-select .mud-input-slot,
.notes-command-select .mud-input-slot,
.dayplan-date-picker .mud-input-slot,
.dayplan-user-picker .mud-input-slot,
.ios-calendar-picker .mud-input-slot,
.ios-calendar-user-picker .mud-input-slot,
.schoolrunsweek-date-picker .mud-input-slot,
.schoolrunsweek-date-wrap .mud-input-slot {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    outline: 0 !important;
}

.mud-input-control .mud-input-control-input-container::before,
.mud-input-control .mud-input-control-input-container::after,
.mud-input-root::before,
.mud-input-root::after,
.mud-input-slot::before,
.mud-input-slot::after,
.mud-select-input::before,
.mud-select-input::after {
    display: none !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.notes-command-select .mud-input,
.dayplan-date-picker .mud-input,
.dayplan-user-picker .mud-input,
.ios-calendar-picker .mud-input,
.ios-calendar-user-picker .mud-input,
.schoolrunsweek-date-picker .mud-input,
.schoolrunsweek-date-wrap .mud-input,
.mud-input-outlined {
    overflow: hidden !important;
}

/* Source: omnisant.finish-pass.css */

/* OMNISANT finish pass
   Loaded last. This is an enforcement layer for precision, not decoration:
   anchored navigation, machined controls, tiered commands, Schedule maturity,
   and broad malformed-control correction. */

:root,
[data-theme="dark"] {
    --omni-finish-control-h: 40px;
    --omni-finish-control-radius: 12px;
    --omni-finish-card-radius: 18px;
    --omni-finish-panel-radius: 20px;
    --omni-finish-border: rgba(255, 255, 255, 0.064);
    --omni-finish-border-strong: rgba(143, 158, 220, 0.24);
    --omni-finish-surface-utility: linear-gradient(180deg, rgba(18, 22, 31, 0.84), rgba(9, 12, 18, 0.88));
    --omni-finish-surface-operational: linear-gradient(180deg, rgba(23, 28, 40, 0.88), rgba(10, 14, 22, 0.92));
    --omni-finish-surface-primary: linear-gradient(180deg, rgba(28, 34, 49, 0.92), rgba(13, 17, 27, 0.96));
    --omni-finish-shadow-utility: 0 10px 26px rgba(0, 0, 0, 0.18);
    --omni-finish-shadow-operational: 0 16px 38px rgba(0, 0, 0, 0.25);
    --omni-finish-shadow-primary: 0 22px 54px rgba(0, 0, 0, 0.34);
    --omni-finish-command-bg: linear-gradient(180deg, rgba(132, 146, 204, 0.93), rgba(105, 121, 188, 0.93));
    --omni-finish-execution-bg: linear-gradient(180deg, rgba(128, 143, 205, 0.80), rgba(92, 108, 174, 0.80));
    --omni-finish-secondary-bg: rgba(255, 255, 255, 0.034);
    --omni-finish-danger-bg: rgba(226, 105, 95, 0.058);
}

/* 1. Route/page stability. No route-level motion, opacity fades, page slide,
   blur, or transform. Local controls may still animate. */
.mud-main-content,
.app-main-content,
.app-content-canvas,
.app-page,
.app-page-shell,
.app-page-shell-header,
.app-page-shell-body,
.app-page-header,
.page-surface,
.content-narrow,
.content-standard,
.content-wide,
.content-full,
.ios-calendar-page,
.ios-week-view,
.ios-month-view,
.ios-day-view,
.shopping-ios-page,
.maintenance-page,
.notes-page,
.ios-contacts-page,
.schoolrunsweek-page,
.settings-page,
.preferences-page,
.stores-page,
.kids-page,
.houses-page,
.locations-page,
.vehicles-page,
.users-page,
.dashboard-page,
.app-card-grid,
.settings-grid,
.shopping-store-list,
.contacts-grid,
.maintenance-grid {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
}

.app-main-content,
.app-content-canvas,
.mud-main-content {
    backdrop-filter: none !important;
    will-change: auto !important;
}

@media (max-width: 1023.98px) {
    .mud-drawer.app-drawer,
    .mud-drawer.app-drawer.mud-drawer-temporary,
    .mud-drawer.app-drawer .mud-drawer-content,
    .mud-drawer-overlay,
    .mud-overlay-drawer {
        animation: none !important;
        transition: none !important;
        transition-duration: 0ms !important;
        will-change: auto !important;
    }
}

/* 2. Content rails. Use the tokenized rails consistently without letting pages
   drift into empty-monitor territory. */
.content-narrow {
    width: min(100%, var(--omni-content-narrow, 960px)) !important;
}

.content-standard,
.settings-page,
.preferences-page,
.notes-page,
.users-page,
.kids-page,
.stores-page,
.houses-page,
.locations-page,
.vehicles-page {
    width: min(100%, var(--omni-content-readable, 1480px)) !important;
}

.content-wide,
.ios-calendar-page,
.shopping-ios-page,
.maintenance-page,
.schoolrunsweek-page,
.dayplan-page {
    width: min(100%, var(--omni-content-wide, 1680px)) !important;
}

.content-full,
.audit-log-page {
    width: min(100%, var(--omni-content-full, 1800px)) !important;
}

.content-narrow,
.content-standard,
.content-wide,
.content-full,
.app-page,
.ios-calendar-page,
.shopping-ios-page,
.maintenance-page,
.notes-page,
.ios-contacts-page,
.schoolrunsweek-page,
.settings-page,
.preferences-page {
    max-width: inherit;
    margin-inline: auto !important;
}

/* 3. Surface tiers. Marked tier classes now actually look different. */
.omni-surface-card,
.app-section-card,
.settings-card,
.settings-mobile-card,
.settings-desktop-row-card {
    border-radius: var(--omni-finish-card-radius) !important;
    border: 1px solid var(--omni-border-tier-1, var(--omni-finish-border)) !important;
    background: var(--omni-surface-tier-1, var(--omni-finish-surface-utility)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), var(--omni-shadow-tier-1, var(--omni-finish-shadow-utility)) !important;
}

.omni-operational-card,
.dayplan-card,
.shopping-section-card,
.shopping-store-group,
.shopping-item-row,
.maintenance-section-card,
.maintenance-item-card,
.network-contact-card,
.schoolrunsweek-day-card,
.schoolrunsweek-assignment-card,
.ios-week-column,
.ios-month-cell,
.ios-day-event-card {
    border-radius: var(--omni-finish-card-radius) !important;
    border: 1px solid var(--omni-border-tier-2, var(--omni-finish-border)) !important;
    background: var(--omni-surface-tier-2, var(--omni-finish-surface-operational)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), var(--omni-shadow-tier-2, var(--omni-finish-shadow-operational)) !important;
}

.omni-primary-card,
.schedule-hero-panel,
.notes-editor-canvas {
    border-color: var(--omni-border-tier-3, var(--omni-finish-border-strong)) !important;
    background: var(--omni-surface-tier-3, var(--omni-finish-surface-primary)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.048), var(--omni-shadow-tier-3, var(--omni-finish-shadow-primary)) !important;
}

/* 4. Machined button/control hierarchy. Buttons stop defaulting to soft pills;
   pills are reserved for chips/status metadata. */
.mud-button-root,
.omni-primary-command,
.omni-secondary-command,
.omni-quiet-action,
.omni-destructive-action,
.omni-execution-action,
.notes-action-button,
.shopping-bought-button,
.ios-calendar-generate-button {
    min-height: var(--omni-button-height-standard, 40px) !important;
    height: var(--omni-button-height-standard, 40px) !important;
    border-radius: var(--omni-button-radius-machined, 14px) !important;
    padding-inline: 16px !important;
    font-size: 0.84rem !important;
    font-weight: 760 !important;
    letter-spacing: -0.005em !important;
    text-transform: none !important;
    transition: background-color var(--omni-motion-luxury-fast, 150ms ease-out), border-color var(--omni-motion-luxury-fast, 150ms ease-out), color var(--omni-motion-luxury-fast, 150ms ease-out), box-shadow var(--omni-motion-luxury-fast, 150ms ease-out), transform var(--omni-motion-luxury-fast, 150ms ease-out) !important;
}

.mud-button-filled-primary,
.omni-primary-command,
.notes-action-primary,
.ios-calendar-generate-button {
    color: #070911 !important;
    border: 1px solid rgba(207, 216, 255, 0.16) !important;
    background: var(--omni-button-primary-bg, var(--omni-finish-command-bg)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.13), 0 8px 18px rgba(84, 101, 170, 0.13) !important;
}

.omni-execution-action,
.shopping-bought-button {
    color: rgba(244, 241, 235, 0.90) !important;
    border: 1px solid rgba(145, 160, 216, 0.17) !important;
    background: var(--omni-finish-execution-bg) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

.mud-button-outlined,
.mud-button-text,
.omni-secondary-command,
.notes-action-ghost {
    color: rgba(244, 241, 235, 0.78) !important;
    border: 1px solid rgba(255, 255, 255, 0.072) !important;
    background: var(--omni-button-secondary-bg, var(--omni-finish-secondary-bg)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025) !important;
}

.mud-button-text-error,
.mud-button-outlined-error,
.omni-destructive-action,
.notes-action-danger,
.deactivate-button {
    color: rgba(226, 105, 95, 0.78) !important;
    border: 1px solid rgba(226, 105, 95, 0.12) !important;
    background: var(--omni-button-danger-bg, var(--omni-finish-danger-bg)) !important;
    box-shadow: none !important;
}

.mud-button-root:hover,
.mud-icon-button:hover,
.omni-primary-command:hover,
.omni-secondary-command:hover,
.omni-execution-action:hover {
    transform: translateY(var(--omni-interaction-lift, -1px)) !important;
}

.mud-chip,
.app-page-context-chip-row,
.notes-briefing-chip,
.shopping-chip,
.shopping-priority-chip,
.status-chip,
.app-empty-state-eyebrow {
    border-radius: var(--omni-radius-pill, 999px) !important;
}

.mud-icon-button,
.mud-menu-button-root,
.omni-icon-utility,
.notes-command-icon-button,
.shopping-menu-button {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    border-radius: var(--omni-radius-icon, 14px) !important;
    border: 1px solid rgba(255, 255, 255, 0.064) !important;
    background: rgba(255, 255, 255, 0.032) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025) !important;
    transition: background-color var(--omni-motion-luxury-fast, 150ms ease-out), border-color var(--omni-motion-luxury-fast, 150ms ease-out), color var(--omni-motion-luxury-fast, 150ms ease-out), transform var(--omni-motion-luxury-fast, 150ms ease-out) !important;
}

/* 5. Form controls: one shell, one icon well. No nested mini boxes. */
.mud-input-control {
    margin-top: 0 !important;
}

.mud-input-control > .mud-input-control-input-container {
    min-height: var(--omni-input-height, 44px) !important;
    margin-top: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
}

.mud-input-control .mud-input.mud-input-outlined,
.mud-input-control .mud-input-outlined,
.mud-input-control .mud-input {
    position: relative !important;
    min-height: var(--omni-input-height, 44px) !important;
    height: var(--omni-input-height, 44px) !important;
    border-radius: var(--omni-input-radius, 14px) !important;
    border: 1px solid rgba(255, 255, 255, 0.066) !important;
    background: linear-gradient(180deg, rgba(20, 24, 34, 0.82), rgba(8, 11, 17, 0.88)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.034) !important;
    overflow: hidden !important;
}

.mud-input-control .mud-input-root,
.mud-input-control .mud-input-slot,
.mud-input-control .mud-select-input,
.mud-input-control input,
.mud-input-control textarea {
    min-width: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
}

.mud-input-control .mud-input-slot,
.mud-input-control .mud-select-input {
    min-height: var(--omni-input-height, 44px) !important;
    height: var(--omni-input-height, 44px) !important;
    padding: 16px 46px 4px 14px !important;
    color: rgba(244, 241, 235, 0.90) !important;
    font-size: 0.90rem !important;
    font-weight: 650 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.mud-input-control textarea.mud-input-slot {
    height: auto !important;
    min-height: 96px !important;
    white-space: pre-wrap !important;
    padding-top: 22px !important;
}

.mud-input-control .mud-input-label,
.mud-input-control .mud-input-label.mud-shrink,
.mud-input-control .mud-input-label.mud-input-label-animate {
    transform: translate(14px, 6px) scale(1) !important;
    max-width: calc(100% - 54px) !important;
    color: rgba(196, 201, 214, 0.58) !important;
    font-size: 0.56rem !important;
    font-weight: 780 !important;
    letter-spacing: 0.12em !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    pointer-events: none !important;
}

.mud-input-control .mud-input-adornment-end {
    position: absolute !important;
    inset-block: 0 !important;
    inset-inline-end: 0 !important;
    display: grid !important;
    place-items: center !important;
    width: 42px !important;
    min-width: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-left: 1px solid rgba(255, 255, 255, 0.050) !important;
    background: rgba(255, 255, 255, 0.026) !important;
}

.mud-input-control .mud-input-adornment-end .mud-icon-button,
.mud-input-control .mud-input-adornment-end .mud-icon-button-root {
    width: 30px !important;
    min-width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.mud-input-outlined-border,
.mud-input-control .mud-input-root::before,
.mud-input-control .mud-input-root::after,
.mud-input-control .mud-input-slot::before,
.mud-input-control .mud-input-slot::after,
.mud-input-control .mud-select-input::before,
.mud-input-control .mud-select-input::after {
    display: none !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Ruthless finish-pass corrections: canonical rails, controls, and active
   states. These overrides remove stray decorative structure and route the
   affected surfaces back through the shared system. */
.app-page-shell-header::after,
.app-page-header::after,
.shopping-ios-header::after,
.ios-contacts-header::after,
.maintenance-header::after,
.notes-header::after,
.schoolrunsweek-header::after,
.dayplan-page-header::after {
    content: none !important;
    display: none !important;
}

html,
body,
.mud-layout,
.mud-main-content,
.app-main-content,
.app-content-canvas,
.app-page,
.app-page-shell {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

.app-drawer,
.app-drawer .mud-drawer-content,
.app-drawer .mud-navmenu {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

.mud-input-control {
    --omni-control-shell-h: 42px;
    --omni-control-shell-radius: 12px;
}

.mud-input-control .mud-input,
.mud-input-control .mud-input-root,
.mud-input-control .mud-select,
.mud-input-control .mud-picker {
    height: var(--omni-control-shell-h) !important;
    min-height: var(--omni-control-shell-h) !important;
    border-radius: var(--omni-control-shell-radius) !important;
    background: linear-gradient(180deg, rgba(12, 15, 23, 0.96), rgba(7, 9, 14, 0.98)) !important;
    border: 1px solid rgba(255, 255, 255, 0.072) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
    overflow: hidden !important;
}

.mud-input-control .mud-input-slot.mud-input-root,
.mud-input-control input.mud-input-root,
.mud-input-control textarea.mud-input-root,
.mud-input-control .mud-select-input.mud-input-root {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.mud-input-control .mud-input-control-input-container,
.mud-input-control .mud-input-slot,
.mud-input-control .mud-select-input,
.mud-input-control .mud-input > input {
    min-width: 0 !important;
    height: var(--omni-control-shell-h) !important;
    min-height: var(--omni-control-shell-h) !important;
    line-height: var(--omni-control-shell-h) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.mud-input-control .mud-input-label,
.mud-input-control .mud-input-label.mud-shrink,
.mud-input-control .mud-input-label.mud-input-label-animate {
    transform: translate(13px, -8px) scale(0.84) !important;
    padding: 0 4px !important;
    background: #080b12 !important;
    letter-spacing: 0.095em !important;
    font-size: 0.62rem !important;
    color: rgba(208, 214, 234, 0.56) !important;
}

.mud-input-control .mud-input-adornment,
.mud-input-control .mud-input-adornment-end {
    height: var(--omni-control-shell-h) !important;
    min-height: var(--omni-control-shell-h) !important;
    width: 42px !important;
    min-width: 42px !important;
    border-left: 1px solid rgba(255, 255, 255, 0.055) !important;
    background: rgba(255, 255, 255, 0.022) !important;
}

.audit-log-toolbar,
.notes-toolbar,
.shopping-filter-card,
.shopping-filter-panel,
.dayplan-toolbar-row {
    border-radius: 18px !important;
    background: rgba(255, 255, 255, 0.018) !important;
    border: 1px solid rgba(255, 255, 255, 0.052) !important;
    box-shadow: none !important;
}

.audit-log-toolbar {
    display: grid !important;
    grid-template-columns: minmax(260px, 1fr) minmax(220px, 320px) !important;
    gap: 12px !important;
    align-items: center !important;
    padding: 12px !important;
    margin-bottom: 18px !important;
}

.audit-log-search,
.audit-log-filter {
    min-width: 0 !important;
}

.audit-log-search .mud-input-adornment-start {
    position: static !important;
    width: 42px !important;
    min-width: 42px !important;
    border-left: 0 !important;
    border-right: 1px solid rgba(255, 255, 255, 0.052) !important;
}

.audit-log-search .mud-input-slot,
.audit-log-search input {
    padding-left: 10px !important;
}

.app-drawer .mud-nav-group > .mud-nav-link {
    background: transparent !important;
    box-shadow: none !important;
    color: rgba(214, 219, 234, 0.62) !important;
}

.app-drawer .mud-nav-group.expanded > .mud-nav-link,
.app-drawer .mud-nav-group .mud-nav-link[aria-expanded="true"] {
    background: rgba(255, 255, 255, 0.024) !important;
    box-shadow: inset 2px 0 0 rgba(145, 160, 224, 0.20) !important;
    color: rgba(229, 233, 244, 0.72) !important;
}

.app-drawer .mud-navmenu {
    scrollbar-width: thin;
    scrollbar-color: rgba(145, 160, 224, 0.28) transparent;
}

.app-drawer .mud-navmenu::-webkit-scrollbar {
    width: 6px;
}

.app-drawer .mud-navmenu::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(145, 160, 224, 0.24);
}

.dayplan-list {
    position: relative !important;
    gap: 14px !important;
}

.dayplan-list:has(.dayplan-card-timeline)::before {
    content: "" !important;
    position: absolute !important;
    left: 83px !important;
    top: 18px !important;
    bottom: 18px !important;
    width: 1px !important;
    background: linear-gradient(180deg, transparent, rgba(166, 178, 234, 0.22), transparent) !important;
}

.dayplan-card-timeline {
    grid-template-columns: 70px 28px minmax(0, 1fr) !important;
    gap: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.dayplan-card-timeline .dayplan-rail-time {
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: start !important;
    padding-top: 18px !important;
    color: rgba(206, 214, 240, 0.72) !important;
    font-size: 0.82rem !important;
    font-weight: 820 !important;
    text-align: right !important;
}

.dayplan-card-timeline .dayplan-rail-track {
    grid-column: 2 !important;
    grid-row: 1 !important;
    position: relative !important;
    width: 28px !important;
    min-width: 28px !important;
    background: transparent !important;
}

.dayplan-card-timeline .dayplan-rail-track::before,
.dayplan-card-timeline .dayplan-rail-track::after {
    content: none !important;
    display: none !important;
}

.dayplan-card-timeline .dayplan-rail-dot {
    position: absolute !important;
    top: 22px !important;
    left: 50% !important;
    width: 7px !important;
    height: 7px !important;
    transform: translateX(-50%) !important;
    border-radius: 999px !important;
    background: rgba(165, 178, 238, 0.84) !important;
    box-shadow: 0 0 0 4px rgba(117, 132, 200, 0.12) !important;
}

.dayplan-card-timeline .dayplan-card-shell {
    grid-column: 3 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    border-radius: 16px !important;
    border: 1px solid rgba(255, 255, 255, 0.058) !important;
    background: linear-gradient(180deg, rgba(20, 24, 34, 0.78), rgba(10, 13, 20, 0.86)) !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18) !important;
}

.dayplan-card-timeline .dayplan-card-title {
    font-size: 1rem !important;
    letter-spacing: -0.012em !important;
}

.shopping-ios-page .app-page-shell-header {
    margin-bottom: 14px !important;
}

.shopping-ios-page .app-page-shell-toolbar {
    margin-bottom: 12px !important;
}

.shopping-ios-page .app-page-context-chip-row {
    justify-content: flex-start !important;
    width: fit-content !important;
    max-width: 100% !important;
    opacity: 0.72 !important;
}

.shopping-filter-card {
    margin-top: 0 !important;
    margin-bottom: 18px !important;
    padding: 16px !important;
}

.kids-roster-card {
    min-height: auto !important;
    gap: 16px !important;
}

.kids-roster-heading {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 12px !important;
}

.kids-roster-name {
    font-size: 1.18rem !important;
    letter-spacing: -0.018em !important;
}

.kids-roster-status {
    flex: 0 0 auto !important;
    opacity: 0.82 !important;
}

.kids-roster-meta-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin-top: 14px !important;
}

.kids-roster-meta {
    min-width: 0 !important;
    padding: 10px 12px !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.026) !important;
    border: 1px solid rgba(255, 255, 255, 0.050) !important;
}

.kids-roster-meta span {
    display: block !important;
    margin-bottom: 4px !important;
    color: rgba(196, 201, 214, 0.54) !important;
    font-size: 0.64rem !important;
    font-weight: 850 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
}

.kids-roster-meta strong {
    display: block !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    color: rgba(244, 241, 235, 0.88) !important;
    font-size: 0.88rem !important;
}

.kids-card-actions {
    align-items: center !important;
}

.kids-card-actions .mud-button-root,
.kids-archive-action {
    min-height: 34px !important;
    border-radius: 11px !important;
    opacity: 0.74 !important;
}

.notes-command-select .mud-input,
.ios-calendar-picker .mud-input,
.ios-calendar-user-picker .mud-input,
.dayplan-user-picker .mud-input,
.dayplan-date-picker .mud-input,
.schoolrunsweek-date-picker .mud-input {
    --omni-input-height: 42px;
    --omni-input-radius: 12px;
}

/* 6. Schedule flagship. The toolbar becomes a disciplined cockpit panel and
   day/week/month have temporal hierarchy instead of styled-table energy. */
.ios-calendar-page {
    --omni-schedule-control-h: 40px;
    --omni-schedule-grid-gap: 12px;
    --omni-input-height: 40px;
    --omni-input-radius: 12px;
}

.ios-calendar-page .ios-calendar-header {
    display: grid !important;
    grid-template-columns: minmax(280px, 0.42fr) minmax(680px, 1fr) !important;
    align-items: end !important;
    gap: clamp(28px, 3.4vw, 72px) !important;
    margin-bottom: 30px !important;
    padding-bottom: 18px !important;
}

.ios-calendar-page .ios-calendar-toolbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(230px, 300px) !important;
    grid-template-areas:
        "date user"
        "mode mode" !important;
    align-items: center !important;
    gap: 12px !important;
    max-width: none !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 12px !important;
    border-radius: var(--omni-finish-panel-radius) !important;
    border: 1px solid rgba(255, 255, 255, 0.060) !important;
    background: linear-gradient(180deg, rgba(15, 19, 28, 0.76), rgba(6, 9, 15, 0.82)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.034), 0 16px 38px rgba(0, 0, 0, 0.22) !important;
    backdrop-filter: none !important;
    overflow: visible !important;
}

.ios-calendar-page .ios-calendar-date-nav-row {
    grid-area: date !important;
    display: grid !important;
    grid-template-columns: var(--omni-schedule-control-h) minmax(220px, 320px) var(--omni-schedule-control-h) auto !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
}

.ios-calendar-page .ios-calendar-date-picker-shell {
    display: block !important;
    min-width: 0 !important;
    width: 100% !important;
}

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

.event-edit-dialog-shell .event-schedule-picker,
.event-edit-dialog-shell .event-schedule-picker .mud-input-control,
.event-edit-dialog-shell .event-schedule-picker .mud-input-control-input-container,
.event-edit-dialog-shell .event-schedule-picker .mud-input-root,
.event-edit-dialog-shell .event-schedule-picker .mud-input {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
}

.event-edit-dialog-shell .event-schedule-picker .mud-input-control {
    margin-top: 0 !important;
}

.event-edit-dialog-shell .event-schedule-picker .mud-input-control-input-container {
    min-height: 54px !important;
}

.event-edit-dialog-shell .event-schedule-picker .mud-input-root,
.event-edit-dialog-shell .event-schedule-picker .mud-input.mud-input-outlined {
    height: 54px !important;
    min-height: 54px !important;
    border-radius: 16px !important;
}

.event-edit-dialog-shell .event-schedule-picker .mud-input-slot {
    height: 54px !important;
    min-height: 54px !important;
    padding: 18px 54px 4px 18px !important;
}

.event-edit-dialog-shell .event-schedule-picker input.mud-input-slot {
    line-height: 32px !important;
}

.event-edit-dialog-shell .event-schedule-picker .mud-input-label,
.event-edit-dialog-shell .event-schedule-picker .mud-input-label.mud-shrink,
.event-edit-dialog-shell .event-schedule-picker .mud-input-label.mud-input-label-animate {
    top: 7px !important;
    left: 18px !important;
    transform: none !important;
    max-width: calc(100% - 84px) !important;
    color: rgba(178, 185, 206, 0.70) !important;
    font-size: 0.68rem !important;
    font-weight: 780 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    padding-inline: 0 !important;
    background: transparent !important;
}

.event-edit-dialog-shell .event-schedule-picker .mud-input-adornment-end {
    width: 54px !important;
    margin-left: 0 !important;
}

.event-edit-dialog-shell .event-schedule-picker .mud-picker-input-button,
.event-edit-dialog-shell .event-schedule-picker .mud-input-adornment-end .mud-icon-button {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    border-radius: 14px !important;
}

.ios-calendar-page .ios-calendar-viewing-row {
    grid-area: user !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
}

.ios-calendar-page .ios-calendar-mode-row {
    grid-area: mode !important;
    display: grid !important;
    grid-template-columns: minmax(246px, 316px) minmax(0, 1fr) auto !important;
    gap: 12px !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
}

.ios-calendar-page .ios-calendar-view-switch {
    grid-column: 1 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: 100% !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 3px !important;
    border-radius: 13px !important;
    border: 1px solid rgba(255, 255, 255, 0.064) !important;
    background: rgba(4, 6, 10, 0.62) !important;
    box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.38) !important;
}

.ios-calendar-page .ios-calendar-view-button.mud-button-root {
    min-width: 0 !important;
    width: 100% !important;
    height: 32px !important;
    min-height: 32px !important;
    border-radius: 10px !important;
    padding-inline: 10px !important;
    color: rgba(196, 201, 214, 0.66) !important;
}

.ios-calendar-page .ios-calendar-view-button.mud-button-filled {
    color: #070911 !important;
    border-color: rgba(207, 216, 255, 0.14) !important;
    background: linear-gradient(180deg, rgba(147, 160, 218, 0.94), rgba(112, 126, 190, 0.92)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

.ios-calendar-page .ios-calendar-generate-button.mud-button-root {
    grid-column: 3 !important;
    justify-self: end !important;
    min-width: 164px !important;
    max-width: 230px !important;
    white-space: nowrap !important;
}

.ios-calendar-page .ios-calendar-nav-button.mud-icon-button,
.ios-calendar-page .ios-calendar-today-button.mud-button-root,
.ios-calendar-page .ios-calendar-date-control .mud-input,
.ios-calendar-page .ios-calendar-user-picker .mud-input {
    height: var(--omni-schedule-control-h) !important;
    min-height: var(--omni-schedule-control-h) !important;
    border-radius: 12px !important;
}

.ios-calendar-page .ios-calendar-date-control .mud-input-slot,
.ios-calendar-page .ios-calendar-user-picker .mud-input-slot {
    height: var(--omni-schedule-control-h) !important;
    min-height: var(--omni-schedule-control-h) !important;
    padding: 15px 46px 3px 14px !important;
}

.ios-calendar-page .ios-calendar-date-control .mud-input-label,
.ios-calendar-page .ios-calendar-date-control .mud-input-label.mud-shrink {
    display: none !important;
}

.ios-calendar-page .ios-calendar-date-control .mud-input-slot {
    padding-top: 3px !important;
    padding-bottom: 0 !important;
    line-height: 37px !important;
}

.ios-calendar-page .ios-week-header,
.ios-calendar-page .ios-week-grid {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    gap: var(--omni-schedule-grid-gap) !important;
}

.ios-calendar-page .ios-week-header-cell {
    min-height: 62px !important;
    padding: 10px !important;
    border-radius: 14px !important;
}

.ios-calendar-page .ios-week-column {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    min-height: 96px !important;
    padding: 10px !important;
    border-radius: 16px !important;
}

.ios-calendar-page .ios-week-empty {
    display: grid !important;
    place-items: center !important;
    min-height: 42px !important;
    color: rgba(196, 201, 214, 0.34) !important;
    font-size: 0.74rem !important;
    font-weight: 620 !important;
}

.ios-calendar-page .ios-week-event-chip,
.ios-calendar-page .schedule-event-chip {
    min-width: 0 !important;
    border-radius: 10px !important;
    border: 1px solid rgba(126, 142, 201, 0.13) !important;
    background: rgba(126, 142, 201, 0.125) !important;
    box-shadow: none !important;
}

.ios-calendar-page .ios-week-event-title,
.ios-calendar-page .ios-month-event-pill {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.ios-calendar-page .ios-month-weekdays,
.ios-calendar-page .ios-month-grid {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    gap: var(--omni-schedule-grid-gap) !important;
}

.ios-calendar-page .ios-month-weekday {
    padding-inline: 4px !important;
    color: rgba(196, 201, 214, 0.54) !important;
    font-size: 0.68rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
}

.ios-calendar-page .ios-month-cell {
    min-height: clamp(116px, 7.6vw, 152px) !important;
    padding: 10px !important;
    border-radius: 16px !important;
}

.ios-calendar-page .ios-month-cell.selected {
    border-color: rgba(145, 160, 216, 0.58) !important;
    box-shadow: var(--omni-glow-active, 0 0 0 1px rgba(145, 160, 216, 0.20)), inset 0 1px 0 rgba(255, 255, 255, 0.052), var(--omni-shadow-tier-2) !important;
}

.ios-calendar-page .ios-month-cell.muted {
    opacity: 0.40 !important;
}

.ios-calendar-page .ios-month-event-pill {
    height: 18px !important;
    min-height: 18px !important;
    max-width: 100% !important;
    padding: 0 7px !important;
    border-radius: 6px !important;
    font-size: 0.65rem !important;
    line-height: 17px !important;
}

.ios-calendar-page .app-empty-state-card,
.ios-calendar-page .ios-calendar-empty {
    min-height: 128px !important;
    border-radius: 18px !important;
    background: linear-gradient(180deg, rgba(18, 22, 31, 0.58), rgba(7, 10, 16, 0.70)) !important;
}

/* 7. Modals as system panels. Compact, readable, no detached footer. */
.mud-dialog {
    border-radius: var(--omni-radius-modal, 22px) !important;
    border: 1px solid rgba(255, 255, 255, 0.082) !important;
    background: linear-gradient(180deg, rgba(22, 27, 39, 0.99), rgba(8, 11, 17, 0.99)) !important;
    box-shadow: var(--omni-shadow-modal, 0 34px 96px rgba(0, 0, 0, 0.48)) !important;
    overflow: hidden !important;
    animation: omni-modal-panel-in 170ms var(--omni-ease-luxury, cubic-bezier(0.19, 1, 0.22, 1)) both !important;
}

@keyframes omni-modal-panel-in {
    from {
        opacity: 0.96;
        transform: translateY(5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.mud-dialog .mud-dialog-content {
    padding: 20px 24px 104px !important;
    max-height: min(74vh, 720px) !important;
    overflow: auto !important;
}

.mud-dialog .mud-dialog-actions {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 2 !important;
    min-height: 68px !important;
    padding: 12px 24px 16px !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
    background: linear-gradient(180deg, rgba(13, 16, 24, 0.92), rgba(7, 9, 15, 0.99)) !important;
    backdrop-filter: blur(10px) !important;
}

.config-dialog-shell {
    gap: 14px !important;
}

.config-dialog-section {
    padding: 16px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(255, 255, 255, 0.058) !important;
    background: rgba(255, 255, 255, 0.025) !important;
}

/* 8. Page identity nudges. Shared system, different operational behavior. */
.page-identity-schedule .ios-calendar-month-label {
    letter-spacing: -0.032em !important;
}

.procurement-page .shopping-store-group {
    border-left: 1px solid rgba(185, 162, 122, 0.14) !important;
}

.maintenance-page .maintenance-section-card,
.maintenance-page .maintenance-item-card {
    border-left: 1px solid rgba(129, 185, 155, 0.12) !important;
}

.directory-page .network-contact-card,
.ios-contacts-page .network-contact-card {
    border-top-color: rgba(185, 162, 122, 0.12) !important;
}

.notes-page .notes-command-bar,
.notes-page .notes-editor-canvas {
    border-color: rgba(255, 255, 255, 0.058) !important;
}

/* 9. Responsive safety for Schedule and controls. */
@media (max-width: 1180px) {
    .ios-calendar-page .ios-calendar-header {
        grid-template-columns: 1fr !important;
        align-items: start !important;
        gap: 20px !important;
    }

    .ios-calendar-page .ios-calendar-toolbar {
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "date"
            "user"
            "mode" !important;
    }

    .ios-calendar-page .ios-calendar-date-nav-row {
        grid-template-columns: var(--omni-schedule-control-h) minmax(220px, 1fr) var(--omni-schedule-control-h) auto !important;
    }
}

@media (max-width: 767.98px) {
    .content-narrow,
    .content-standard,
    .content-wide,
    .content-full,
    .app-page,
    .ios-calendar-page,
    .shopping-ios-page,
    .maintenance-page,
    .notes-page,
    .ios-contacts-page,
    .schoolrunsweek-page,
    .settings-page,
    .preferences-page {
        width: 100% !important;
        max-width: none !important;
        padding-inline: 0 !important;
    }

    .ios-calendar-page .ios-calendar-toolbar {
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "date"
            "user"
            "mode" !important;
        padding: 10px !important;
        border-radius: 18px !important;
    }

    .ios-calendar-page .ios-calendar-date-nav-row {
        grid-template-columns: 42px minmax(0, 1fr) 42px !important;
        gap: 8px !important;
    }

    .ios-calendar-page .ios-calendar-today-button {
        grid-column: 1 / -1 !important;
        width: 100% !important;
    }

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

    .ios-calendar-page .ios-calendar-generate-button.mud-button-root,
    .ios-calendar-page .ios-calendar-view-switch {
        grid-column: 1 !important;
        width: 100% !important;
        max-width: none !important;
        justify-self: stretch !important;
    }

    .ios-week-view-desktop,
    .ios-month-view-desktop {
        display: none !important;
    }

    .ios-week-view-mobile,
    .ios-month-mobile-list {
        display: grid !important;
        gap: 12px !important;
    }

    .mud-dialog {
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        max-height: calc(100dvh - 20px) !important;
        border-radius: 18px !important;
    }

    .mud-dialog .mud-dialog-content {
        max-height: calc(100dvh - 136px) !important;
        padding: 14px 14px 102px !important;
    }

    .mud-dialog .mud-dialog-actions {
        min-height: 64px !important;
        padding: 10px 14px calc(12px + env(safe-area-inset-bottom)) !important;
    }
}

@media (min-width: 768px) {
    .ios-week-view-mobile,
    .ios-month-mobile-list {
        display: none !important;
    }
}

/* Source bridge: app.global-household-polish.css */

/*
 * Omnisant global household/account polish layer.
 * Mechanical consolidation source: profile.polish.css.
 */

/* ===== absorbed from profile.polish.css ===== */
/* Final Household Profile layer. Loaded after foundation so Profile gets one stable owner. */
.household-profile-page {
    --profile-polish-border: rgba(214, 222, 247, 0.095);
    --profile-polish-border-strong: rgba(167, 181, 235, 0.22);
    --profile-polish-panel: linear-gradient(180deg, rgba(18, 22, 31, 0.88), rgba(9, 12, 18, 0.94));
    --profile-polish-panel-soft: linear-gradient(180deg, rgba(16, 20, 29, 0.74), rgba(8, 11, 17, 0.82));
    max-width: 1568px !important;
}

.household-profile-page .app-page-shell-header {
    max-width: 1240px !important;
    margin-inline: auto !important;
    padding-bottom: 18px !important;
}

.household-profile-page .app-page-title {
    font-size: clamp(2rem, 2.45vw, 2.45rem) !important;
    letter-spacing: 0 !important;
}

.household-profile-page .app-page-context {
    max-width: 680px !important;
}

.household-profile-page .profile-command-rail {
    display: grid !important;
    grid-template-columns: minmax(380px, 1fr) max-content !important;
    gap: 14px !important;
    width: 100% !important;
    max-width: 1240px !important;
    margin: 18px auto 12px !important;
    padding: 12px !important;
    border: 1px solid var(--profile-polish-border) !important;
    border-radius: 18px !important;
    background: var(--profile-polish-panel-soft) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.034), 0 18px 44px rgba(0, 0, 0, 0.18) !important;
}

.household-profile-page .profile-search {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
}

.household-profile-page .profile-search .mud-input,
.household-profile-page .profile-search .mud-input-root {
    min-height: 48px !important;
    height: 48px !important;
    border-radius: 14px !important;
}

.household-profile-page .profile-command-actions {
    min-width: max-content !important;
    justify-content: flex-end !important;
}

.household-profile-page .profile-add-split {
    align-self: stretch !important;
    min-height: 48px !important;
    border-radius: 14px !important;
    border-color: rgba(205, 214, 255, 0.16) !important;
    overflow: hidden !important;
}

.household-profile-page .profile-add-split .profile-add-main,
.household-profile-page .profile-add-split .profile-add-arrow .mud-menu-button-root {
    min-height: 48px !important;
    height: 48px !important;
    border-radius: 0 !important;
}

.household-profile-page .profile-add-split .profile-add-main {
    min-width: 126px !important;
}

.household-profile-page .profile-add-split .profile-add-arrow .mud-menu-button-root {
    width: 50px !important;
    min-width: 50px !important;
    background: rgba(255, 255, 255, 0.055) !important;
}

.household-profile-page .profile-category-rail {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 1240px !important;
    margin: 0 auto 20px !important;
    padding: 0 2px 4px !important;
}

.household-profile-page .profile-category-chip {
    min-height: 36px !important;
    padding: 0 14px !important;
    border-radius: 12px !important;
    color: rgba(219, 224, 241, 0.68) !important;
    background: rgba(10, 13, 20, 0.58) !important;
    font-size: 0.78rem !important;
    font-weight: 780 !important;
}

.household-profile-page .profile-category-chip.is-active {
    color: rgba(245, 246, 252, 0.94) !important;
    border-color: rgba(174, 185, 235, 0.34) !important;
    background: linear-gradient(180deg, rgba(105, 116, 158, 0.74), rgba(59, 67, 96, 0.82)) !important;
}

.household-profile-page .profile-layout,
.household-profile-page .profile-section {
    width: 100% !important;
    max-width: 1240px !important;
    margin-inline: auto !important;
}

.household-profile-page .profile-layout {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 420px) !important;
    gap: 28px !important;
}

.household-profile-page .profile-section {
    margin-top: 0 !important;
}

.household-profile-page .profile-section-heading {
    margin-bottom: 14px !important;
}

.household-profile-page .profile-section-heading span {
    font-size: 1.12rem !important;
    letter-spacing: 0 !important;
}

.household-profile-page .profile-attention-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
}

.household-profile-page .profile-attention-card,
.household-profile-page .profile-memory-card,
.household-profile-page .profile-panel,
.household-profile-page .profile-document-foundation,
.household-profile-page .profile-inline-empty,
.household-profile-page .profile-vendor-empty {
    border-color: var(--profile-polish-border) !important;
    background: var(--profile-polish-panel) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
}

.household-profile-page .profile-attention-card {
    min-height: 86px !important;
    padding: 18px 20px !important;
    border-radius: 16px !important;
}

.household-profile-page .profile-memory-card {
    min-height: 178px !important;
    border-radius: 18px !important;
}

.household-profile-page .profile-card-grid,
.household-profile-page .profile-card-grid-wide,
.household-profile-page .profile-card-grid-compact {
    gap: 16px !important;
}

.household-profile-page .profile-panel {
    top: 96px !important;
    padding: 24px !important;
    border-radius: 20px !important;
}

.household-profile-page .profile-mini-list span {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    border: 1px solid rgba(255, 255, 255, 0.035) !important;
}

.household-profile-page .profile-inline-empty {
    min-height: 72px !important;
    border-radius: 16px !important;
}

.mud-dialog:has(.profile-dialog-shell) {
    width: min(1120px, calc(100vw - 48px)) !important;
}

.profile-dialog-shell .config-dialog-section {
    border-radius: 18px !important;
    border-color: var(--profile-polish-border) !important;
    background: rgba(255, 255, 255, 0.024) !important;
}

.profile-dialog-shell .profile-passport-header {
    min-height: 42px !important;
}

.profile-dialog-shell .profile-secondary-command.mud-button-root {
    min-width: 132px !important;
    border-radius: 12px !important;
    white-space: nowrap !important;
}

.profile-dialog-shell .profile-field {
    gap: 8px !important;
}

.profile-dialog-shell .profile-field > label {
    padding-left: 2px !important;
    color: rgba(196, 204, 229, 0.72) !important;
    font-size: 0.68rem !important;
}

.profile-dialog-shell .mud-input,
.profile-dialog-shell .mud-field {
    min-height: 46px !important;
    height: 46px !important;
    border-radius: 13px !important;
    background: rgba(6, 9, 15, 0.78) !important;
}

.profile-dialog-shell .mud-input > input.mud-input-slot,
.profile-dialog-shell .mud-input > div.mud-input-slot.mud-select-input {
    min-height: 46px !important;
    height: 46px !important;
    padding-inline: 14px !important;
}

.profile-dialog-shell .mud-input-control:has(textarea) .mud-input,
.profile-dialog-shell .mud-input-control:has(textarea) .mud-field,
.profile-dialog-shell .mud-input.mud-input-multiline,
.profile-dialog-shell .profile-note-field .mud-input,
.profile-dialog-shell .profile-note-field .mud-field {
    min-height: 112px !important;
    height: auto !important;
    max-height: none !important;
    align-items: stretch !important;
    overflow: hidden !important;
}

.profile-dialog-shell .mud-input > textarea.mud-input-slot,
.profile-dialog-shell textarea.mud-input-root,
.profile-dialog-shell .profile-note-field .mud-input > textarea.mud-input-slot {
    display: block !important;
    min-height: 112px !important;
    height: auto !important;
    max-height: none !important;
    padding: 12px 14px !important;
    line-height: 1.38 !important;
    white-space: pre-wrap !important;
    resize: vertical !important;
}

.profile-passport-edit-card {
    border-color: rgba(214, 222, 247, 0.09) !important;
    border-radius: 16px !important;
    background: rgba(8, 11, 18, 0.42) !important;
}

@media (max-width: 1100px) {
    .household-profile-page .profile-command-rail,
    .household-profile-page .profile-layout {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .household-profile-page .profile-command-actions {
        justify-content: flex-start !important;
    }

    .household-profile-page .profile-panel {
        position: static !important;
    }
}

@media (max-width: 767px) {
    .household-profile-page .profile-command-rail {
        padding: 10px !important;
        border-radius: 16px !important;
    }

    .household-profile-page .profile-add-split,
    .household-profile-page .profile-command-actions {
        width: 100% !important;
    }

    .household-profile-page .profile-add-split .profile-add-main {
        flex: 1 1 auto !important;
    }

    .household-profile-page .profile-category-rail {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
    }

    .mud-dialog:has(.profile-dialog-shell) {
        width: calc(100vw - 20px) !important;
    }
}

/*
 * Final desktop Add/Edit Event dialog containment.
 * Keep this in the desktop owner layer so older card/form/modal fragments cannot
 * turn the event composer back into a tall raw form.
 */
@media (min-width: 769px) {
    html body:has(.event-edit-dialog-shell) .mud-overlay.mud-overlay-dialog {
        background: rgba(3, 5, 10, 0.72) !important;
        backdrop-filter: blur(8px) saturate(0.86) !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.event-edit-dialog-shell) {
        display: flex !important;
        flex-direction: column !important;
        width: min(980px, calc(100vw - 128px)) !important;
        max-width: min(980px, calc(100vw - 128px)) !important;
        height: auto !important;
        max-height: min(720px, calc(100dvh - 96px)) !important;
        min-height: 0 !important;
        border-radius: 22px !important;
        border: 1px solid rgba(150, 162, 210, 0.18) !important;
        background: linear-gradient(180deg, rgba(23, 27, 38, 0.99), rgba(11, 14, 22, 0.99)) !important;
        box-shadow: 0 30px 90px rgba(0, 0, 0, 0.58), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
        overflow: hidden !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.event-edit-dialog-shell) .mud-dialog-title {
        flex: 0 0 auto !important;
        min-height: 56px !important;
        padding: 16px 22px 14px !important;
        border-bottom: 1px solid rgba(150, 162, 210, 0.13) !important;
        background: linear-gradient(180deg, rgba(25, 29, 42, 0.98), rgba(16, 19, 29, 0.96)) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.event-edit-dialog-shell) .mud-dialog-title .mud-typography,
    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.event-edit-dialog-shell) .mud-dialog-title h6 {
        font-size: 1rem !important;
        font-weight: 820 !important;
        line-height: 1.15 !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.event-edit-dialog-shell) .mud-dialog-content {
        flex: 0 1 auto !important;
        min-height: 0 !important;
        max-height: calc(min(720px, calc(100dvh - 96px)) - 114px) !important;
        padding: 12px 18px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        scrollbar-width: thin !important;
        scrollbar-color: rgba(190, 200, 235, 0.34) transparent !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.event-edit-dialog-shell) .mud-dialog-actions {
        position: sticky !important;
        bottom: 0 !important;
        z-index: 4 !important;
        flex: 0 0 auto !important;
        min-height: 62px !important;
        padding: 9px 22px 11px !important;
        justify-content: flex-end !important;
        gap: 10px !important;
        border-top: 1px solid rgba(150, 162, 210, 0.13) !important;
        background: linear-gradient(180deg, rgba(14, 17, 27, 0.95), rgba(8, 10, 16, 0.99)) !important;
        box-shadow: 0 -18px 32px rgba(0, 0, 0, 0.26) !important;
        backdrop-filter: blur(10px) saturate(0.9) !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.event-edit-dialog-shell) .mud-dialog-actions .mud-button-root {
        min-height: 42px !important;
        height: 42px !important;
        padding-inline: 19px !important;
        border-radius: 12px !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.event-edit-dialog-shell) .event-edit-dialog-shell {
        --app-control-h: 40px;
        display: block !important;
        min-width: 0 !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.event-edit-dialog-shell) .event-edit-section-grid {
        display: grid !important;
        grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
        gap: 8px 10px !important;
        align-items: start !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.event-edit-dialog-shell) .event-edit-section-grid > .span-full {
        grid-column: 1 / -1 !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.event-edit-dialog-shell) .event-edit-title-section {
        grid-column: span 5 !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.event-edit-dialog-shell) .event-edit-people-section {
        grid-column: span 7 !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.event-edit-dialog-shell) .event-edit-location-section {
        grid-column: span 5 !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.event-edit-dialog-shell) .event-edit-notes-section {
        grid-column: span 7 !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.event-edit-dialog-shell) .event-edit-section {
        margin: 0 !important;
        padding: 10px !important;
        border-radius: 15px !important;
        border: 1px solid rgba(150, 162, 210, 0.105) !important;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.019), rgba(255, 255, 255, 0.01)) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.022) !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.event-edit-dialog-shell) .event-edit-section .config-dialog-section-header {
        margin: 0 0 7px !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.event-edit-dialog-shell) .event-edit-section .config-dialog-section-kicker {
        margin: 0 !important;
        color: rgba(196, 205, 235, 0.76) !important;
        font-size: 0.64rem !important;
        font-weight: 820 !important;
        line-height: 1 !important;
        letter-spacing: 0.14em !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.event-edit-dialog-shell) .event-edit-location-row,
    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.event-edit-dialog-shell) .event-edit-schedule-grid,
    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.event-edit-dialog-shell) .event-edit-datetime-grid,
    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.event-edit-dialog-shell) .event-edit-people-grid,
    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.event-edit-dialog-shell) .event-edit-recurrence-grid {
        display: grid !important;
        gap: 7px 10px !important;
        align-items: start !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.event-edit-dialog-shell) .event-edit-location-row {
        grid-template-columns: 1fr !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.event-edit-dialog-shell) .event-edit-schedule-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.event-edit-dialog-shell) .event-edit-datetime-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.event-edit-dialog-shell) .event-edit-people-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.event-edit-dialog-shell) .event-edit-title-section .mud-input-control:has(.mud-input-label) > .mud-input-control-input-container {
        min-height: 52px !important;
        height: 52px !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.event-edit-dialog-shell) .event-edit-title-section .mud-input.mud-input-outlined {
        min-height: 44px !important;
        height: 44px !important;
        max-height: 44px !important;
        border-color: rgba(168, 178, 226, 0.18) !important;
        background: rgba(255, 255, 255, 0.045) !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.event-edit-dialog-shell) .event-edit-title-section .mud-input-slot,
    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.event-edit-dialog-shell) .event-edit-title-section input.mud-input-root {
        min-height: 44px !important;
        height: 44px !important;
        line-height: 44px !important;
        font-size: 0.94rem !important;
        font-weight: 650 !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.event-edit-dialog-shell) .event-edit-options-section {
        padding-block: 9px !important;
        border-color: rgba(150, 162, 210, 0.08) !important;
        background: rgba(255, 255, 255, 0.012) !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.event-edit-dialog-shell) .event-edit-recurrence-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        margin-top: 7px !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.event-edit-dialog-shell) .event-edit-field-group-label {
        margin: 0 0 5px !important;
        color: rgba(216, 224, 248, 0.72) !important;
        font-size: 0.61rem !important;
        font-weight: 820 !important;
        letter-spacing: 0.12em !important;
        line-height: 1 !important;
        text-transform: uppercase !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.event-edit-dialog-shell) .event-edit-compact-options {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 6px !important;
        margin: 0 !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.event-edit-dialog-shell) .event-edit-compact-options .mud-input-control {
        min-width: 0 !important;
        min-height: 28px !important;
        height: 28px !important;
        padding: 3px 7px !important;
        border-radius: 12px !important;
        border: 1px solid rgba(150, 162, 210, 0.095) !important;
        background: rgba(255, 255, 255, 0.018) !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.event-edit-dialog-shell) .event-edit-compact-options .mud-checkbox {
        padding: 0 !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.event-edit-dialog-shell) .event-edit-compact-options .mud-checkbox .mud-button-root {
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
        padding: 0 !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.event-edit-dialog-shell) .event-edit-compact-options .mud-checkbox .mud-typography {
        font-size: 0.74rem !important;
        line-height: 1.1 !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.event-edit-dialog-shell) .event-edit-dialog-shell .mud-input-control,
    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.event-edit-dialog-shell) .event-edit-dialog-shell .event-schedule-picker,
    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.event-edit-dialog-shell) .event-edit-dialog-shell .mud-picker {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.event-edit-dialog-shell) .event-edit-dialog-shell .mud-input-control:has(.mud-input-label) {
        padding-top: 0 !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.event-edit-dialog-shell) .event-edit-dialog-shell .mud-input-control:has(.mud-input-label) > .mud-input-control-input-container {
        min-height: 48px !important;
        height: 48px !important;
        padding-top: 11px !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.event-edit-dialog-shell) .event-edit-dialog-shell .mud-input-label,
    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.event-edit-dialog-shell) .event-edit-dialog-shell .mud-input-label.mud-shrink,
    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.event-edit-dialog-shell) .event-edit-dialog-shell .mud-input-label.mud-input-label-animate {
        display: block !important;
        position: absolute !important;
        top: 0 !important;
        left: 9px !important;
        transform: none !important;
        height: 12px !important;
        padding: 0 !important;
        background: transparent !important;
        color: rgba(216, 224, 248, 0.72) !important;
        font-size: 0.61rem !important;
        font-weight: 820 !important;
        letter-spacing: 0.12em !important;
        line-height: 12px !important;
        text-transform: uppercase !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.event-edit-dialog-shell) .event-edit-dialog-shell .mud-input.mud-input-outlined,
    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.event-edit-dialog-shell) .event-edit-dialog-shell .mud-input.mud-input-outlined.mud-select-input,
    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.event-edit-dialog-shell) .event-edit-dialog-shell .mud-field {
        min-height: 40px !important;
        height: 40px !important;
        max-height: 40px !important;
        border-radius: 12px !important;
        border: 1px solid rgba(150, 162, 210, 0.105) !important;
        background: rgba(255, 255, 255, 0.032) !important;
        box-shadow: none !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.event-edit-dialog-shell) .event-edit-dialog-shell .mud-input-slot,
    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.event-edit-dialog-shell) .event-edit-dialog-shell .mud-select-input,
    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.event-edit-dialog-shell) .event-edit-dialog-shell input.mud-input-root {
        min-height: 40px !important;
        height: 40px !important;
        max-height: 40px !important;
        padding: 0 40px 0 12px !important;
        color: rgba(242, 239, 232, 0.9) !important;
        font-size: 0.88rem !important;
        font-weight: 560 !important;
        line-height: 40px !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.event-edit-dialog-shell) .event-edit-notes-section .mud-input-control:has(textarea.mud-input-slot) {
        padding-top: 0 !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.event-edit-dialog-shell) .event-edit-notes-section .mud-input-control:has(textarea.mud-input-slot) > .mud-input-control-input-container {
        min-height: 66px !important;
        height: 66px !important;
        padding-top: 12px !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.event-edit-dialog-shell) .event-edit-notes-section .mud-input-control:has(textarea.mud-input-slot) .mud-input {
        min-height: 52px !important;
        height: auto !important;
        max-height: none !important;
        align-items: stretch !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.event-edit-dialog-shell) .event-edit-notes-section textarea.mud-input-slot,
    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.event-edit-dialog-shell) .event-edit-notes-section textarea.mud-input-root {
        min-height: 52px !important;
        height: auto !important;
        padding: 8px 12px !important;
        line-height: 1.35 !important;
        resize: vertical !important;
    }

    html body:has(.event-edit-dialog-shell) .mud-popover:not(.mud-picker-popover),
    html body:has(.event-edit-dialog-shell) .mud-popover-open:not(.mud-picker-popover) {
        max-height: 220px !important;
        overflow-y: auto !important;
        z-index: 1700 !important;
    }

    html body:has(.event-edit-dialog-shell) .mud-popover.mud-picker-popover,
    html body:has(.event-edit-dialog-shell) .mud-popover-open.mud-picker-popover {
        max-height: min(390px, calc(100dvh - 220px)) !important;
        overflow: auto !important;
        z-index: 1700 !important;
    }

    html body:has(.event-edit-dialog-shell) .mud-picker-popover-paper {
        max-height: min(390px, calc(100dvh - 220px)) !important;
        overflow: auto !important;
    }

    html body:has(.event-edit-dialog-shell) .mud-picker-container {
        z-index: 1700 !important;
        max-height: min(388px, calc(100dvh - 222px)) !important;
        overflow: auto !important;
        background: rgba(12, 15, 23, 0.99) !important;
    }
}

/*
 * Final desktop Add/Edit Maintenance dialog containment.
 * Keeps service-entry forms grouped, compact, and aligned with the shared
 * desktop modal system without changing the underlying save flow.
 */
@media (min-width: 769px) {
    html body:has(.maintenance-edit-dialog-shell) .mud-overlay.mud-overlay-dialog {
        background: rgba(3, 5, 10, 0.70) !important;
        backdrop-filter: blur(8px) saturate(0.86) !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.maintenance-edit-dialog-shell) {
        display: flex !important;
        flex-direction: column !important;
        width: min(1000px, calc(100vw - 128px)) !important;
        max-width: min(1000px, calc(100vw - 128px)) !important;
        height: auto !important;
        max-height: min(640px, calc(100dvh - 96px)) !important;
        min-height: 0 !important;
        border-radius: 22px !important;
        border: 1px solid rgba(150, 162, 210, 0.18) !important;
        background: linear-gradient(180deg, rgba(23, 27, 38, 0.99), rgba(11, 14, 22, 0.99)) !important;
        box-shadow: 0 30px 90px rgba(0, 0, 0, 0.58), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
        overflow: hidden !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.maintenance-edit-dialog-shell) .mud-dialog-title {
        flex: 0 0 auto !important;
        min-height: 52px !important;
        padding: 14px 20px 12px !important;
        border-bottom: 1px solid rgba(150, 162, 210, 0.13) !important;
        background: linear-gradient(180deg, rgba(25, 29, 42, 0.98), rgba(16, 19, 29, 0.96)) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.maintenance-edit-dialog-shell) .mud-dialog-title .mud-typography,
    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.maintenance-edit-dialog-shell) .mud-dialog-title h6 {
        font-size: 1rem !important;
        font-weight: 820 !important;
        line-height: 1.15 !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.maintenance-edit-dialog-shell) .mud-dialog-content {
        flex: 0 1 auto !important;
        min-height: 0 !important;
        max-height: calc(min(640px, calc(100dvh - 96px)) - 104px) !important;
        padding: 10px 16px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        scrollbar-width: thin !important;
        scrollbar-color: rgba(190, 200, 235, 0.34) transparent !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.maintenance-edit-dialog-shell) .mud-dialog-actions {
        position: sticky !important;
        bottom: 0 !important;
        z-index: 4 !important;
        flex: 0 0 auto !important;
        min-height: 56px !important;
        padding: 7px 20px 9px !important;
        justify-content: flex-end !important;
        gap: 10px !important;
        border-top: 1px solid rgba(150, 162, 210, 0.13) !important;
        background: linear-gradient(180deg, rgba(14, 17, 27, 0.95), rgba(8, 10, 16, 0.99)) !important;
        box-shadow: 0 -18px 32px rgba(0, 0, 0, 0.26) !important;
        backdrop-filter: blur(10px) saturate(0.9) !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.maintenance-edit-dialog-shell) .mud-dialog-actions .mud-button-root {
        min-height: 40px !important;
        height: 40px !important;
        padding-inline: 18px !important;
        border-radius: 12px !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.maintenance-edit-dialog-shell) .maintenance-edit-dialog-shell {
        --app-control-h: 36px;
        display: block !important;
        min-width: 0 !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.maintenance-edit-dialog-shell) .maintenance-edit-section-grid {
        display: grid !important;
        grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
        gap: 7px 8px !important;
        align-items: start !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.maintenance-edit-dialog-shell) .maintenance-edit-asset-section {
        grid-column: span 4 !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.maintenance-edit-dialog-shell) .maintenance-edit-service-section,
    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.maintenance-edit-dialog-shell) .maintenance-edit-schedule-section {
        grid-column: span 4 !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.maintenance-edit-dialog-shell) .maintenance-edit-vendor-section {
        grid-column: span 8 !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.maintenance-edit-dialog-shell) .maintenance-edit-secondary-section {
        grid-column: span 4 !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.maintenance-edit-dialog-shell) .maintenance-edit-section {
        margin: 0 !important;
        padding: 8px !important;
        border-radius: 14px !important;
        border: 1px solid rgba(150, 162, 210, 0.105) !important;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.019), rgba(255, 255, 255, 0.01)) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.022) !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.maintenance-edit-dialog-shell) .maintenance-edit-section .config-dialog-section-header {
        margin: 0 0 6px !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.maintenance-edit-dialog-shell) .maintenance-edit-section .config-dialog-section-kicker {
        margin: 0 !important;
        color: rgba(196, 205, 235, 0.76) !important;
        font-size: 0.60rem !important;
        font-weight: 820 !important;
        line-height: 1 !important;
        letter-spacing: 0.14em !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.maintenance-edit-dialog-shell) .maintenance-edit-helper {
        display: none !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.maintenance-edit-dialog-shell) .maintenance-edit-grid,
    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.maintenance-edit-dialog-shell) .maintenance-edit-frequency-grid,
    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.maintenance-edit-dialog-shell) .maintenance-edit-secondary-grid {
        display: grid !important;
        gap: 6px 8px !important;
        align-items: start !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.maintenance-edit-dialog-shell) .maintenance-edit-asset-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.maintenance-edit-dialog-shell) .maintenance-edit-service-grid {
        grid-template-columns: minmax(0, 1fr) 128px !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.maintenance-edit-dialog-shell) .maintenance-edit-frequency-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.maintenance-edit-dialog-shell) .maintenance-edit-vendor-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.maintenance-edit-dialog-shell) .maintenance-edit-location-cell,
    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.maintenance-edit-dialog-shell) .maintenance-edit-notes-cell,
    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.maintenance-edit-dialog-shell) .maintenance-edit-important-toggle {
        grid-column: 1 / -1 !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.maintenance-edit-dialog-shell) .maintenance-edit-secondary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.maintenance-edit-dialog-shell) .maintenance-edit-secondary-section[open] {
        padding-bottom: 8px !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.maintenance-edit-dialog-shell) .maintenance-edit-secondary-summary {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        min-height: 24px !important;
        color: rgba(216, 224, 248, 0.72) !important;
        font-size: 0.61rem !important;
        font-weight: 820 !important;
        letter-spacing: 0.13em !important;
        text-transform: uppercase !important;
        cursor: pointer !important;
        list-style: none !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.maintenance-edit-dialog-shell) .maintenance-edit-secondary-summary::-webkit-details-marker {
        display: none !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.maintenance-edit-dialog-shell) .maintenance-field,
    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.maintenance-edit-dialog-shell) .maintenance-edit-frequency-cell,
    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.maintenance-edit-dialog-shell) .maintenance-edit-asset-cell,
    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.maintenance-edit-dialog-shell) .maintenance-edit-assignee-cell,
    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.maintenance-edit-dialog-shell) .maintenance-edit-location-cell,
    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.maintenance-edit-dialog-shell) .maintenance-edit-notes-cell {
        display: block !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.maintenance-edit-dialog-shell) .maintenance-edit-dialog-shell .mud-input-control,
    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.maintenance-edit-dialog-shell) .maintenance-edit-dialog-shell .mud-picker {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.maintenance-edit-dialog-shell) .maintenance-edit-dialog-shell .mud-input-control:has(.mud-input-label) {
        padding-top: 0 !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.maintenance-edit-dialog-shell) .maintenance-edit-dialog-shell .mud-input-control:has(.mud-input-label) > .mud-input-control-input-container {
        min-height: 44px !important;
        height: 44px !important;
        padding-top: 9px !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.maintenance-edit-dialog-shell) .maintenance-edit-dialog-shell .mud-input-label,
    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.maintenance-edit-dialog-shell) .maintenance-edit-dialog-shell .mud-input-label.mud-shrink,
    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.maintenance-edit-dialog-shell) .maintenance-edit-dialog-shell .mud-input-label.mud-input-label-animate {
        display: block !important;
        position: absolute !important;
        top: 0 !important;
        left: 8px !important;
        transform: none !important;
        height: 10px !important;
        padding: 0 !important;
        background: transparent !important;
        color: rgba(216, 224, 248, 0.72) !important;
        font-size: 0.58rem !important;
        font-weight: 820 !important;
        letter-spacing: 0.12em !important;
        line-height: 10px !important;
        text-transform: uppercase !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.maintenance-edit-dialog-shell) .maintenance-edit-dialog-shell .mud-input.mud-input-outlined,
    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.maintenance-edit-dialog-shell) .maintenance-edit-dialog-shell .mud-input.mud-input-outlined.mud-select-input,
    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.maintenance-edit-dialog-shell) .maintenance-edit-dialog-shell .mud-field {
        min-height: 36px !important;
        height: 36px !important;
        max-height: 36px !important;
        border-radius: 11px !important;
        border: 1px solid rgba(150, 162, 210, 0.105) !important;
        background: rgba(255, 255, 255, 0.032) !important;
        box-shadow: none !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.maintenance-edit-dialog-shell) .maintenance-edit-dialog-shell .mud-input-slot,
    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.maintenance-edit-dialog-shell) .maintenance-edit-dialog-shell .mud-select-input,
    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.maintenance-edit-dialog-shell) .maintenance-edit-dialog-shell input.mud-input-root {
        min-height: 36px !important;
        height: 36px !important;
        max-height: 36px !important;
        padding: 0 36px 0 10px !important;
        color: rgba(242, 239, 232, 0.9) !important;
        font-size: 0.84rem !important;
        font-weight: 560 !important;
        line-height: 36px !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.maintenance-edit-dialog-shell) .maintenance-edit-notes-cell .mud-input-control:has(textarea.mud-input-slot) > .mud-input-control-input-container {
        min-height: 56px !important;
        height: 56px !important;
        padding-top: 10px !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.maintenance-edit-dialog-shell) .maintenance-edit-notes-cell .mud-input-control:has(textarea.mud-input-slot) .mud-input {
        min-height: 44px !important;
        height: auto !important;
        max-height: none !important;
        align-items: stretch !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.maintenance-edit-dialog-shell) .maintenance-edit-notes-cell textarea.mud-input-slot,
    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.maintenance-edit-dialog-shell) .maintenance-edit-notes-cell textarea.mud-input-root {
        min-height: 42px !important;
        height: auto !important;
        padding: 7px 10px !important;
        line-height: 1.28 !important;
        resize: vertical !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.maintenance-edit-dialog-shell) .maintenance-edit-target-summary {
        display: grid !important;
        align-content: center !important;
        min-height: 44px !important;
        padding: 5px 8px !important;
        border-radius: 11px !important;
        border: 1px solid rgba(150, 162, 210, 0.105) !important;
        background: rgba(255, 255, 255, 0.025) !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.maintenance-edit-dialog-shell) .maintenance-edit-target-summary span {
        color: rgba(216, 224, 248, 0.60) !important;
        font-size: 0.56rem !important;
        font-weight: 820 !important;
        letter-spacing: 0.12em !important;
        line-height: 1 !important;
        text-transform: uppercase !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.maintenance-edit-dialog-shell) .maintenance-edit-target-summary strong {
        margin-top: 3px !important;
        color: rgba(242, 239, 232, 0.9) !important;
        font-size: 0.80rem !important;
        line-height: 1.15 !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.maintenance-edit-dialog-shell) .maintenance-inline-switch {
        display: flex !important;
        align-items: center !important;
        gap: 7px !important;
        min-height: 30px !important;
        padding: 3px 7px !important;
        border-radius: 11px !important;
        border: 1px solid rgba(150, 162, 210, 0.09) !important;
        background: rgba(255, 255, 255, 0.017) !important;
        color: rgba(224, 228, 241, 0.82) !important;
        font-size: 0.74rem !important;
        font-weight: 650 !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.maintenance-edit-dialog-shell) .maintenance-inline-switch .mud-switch {
        grid-column: auto !important;
        grid-row: auto !important;
        justify-self: auto !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.maintenance-edit-dialog-shell) .maintenance-inline-switch > .mud-input-control,
    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.maintenance-edit-dialog-shell) .maintenance-inline-switch > .mud-input-control-boolean-input {
        grid-column: auto !important;
        grid-row: auto !important;
        justify-self: auto !important;
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.maintenance-edit-dialog-shell) .maintenance-inline-switch span {
        grid-column: auto !important;
        grid-row: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        line-height: 1.15 !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.maintenance-edit-dialog-shell) .maintenance-edit-apply-toggle,
    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.maintenance-edit-dialog-shell) .maintenance-edit-important-toggle {
        width: 100% !important;
        justify-content: flex-start !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.maintenance-edit-dialog-shell) .maintenance-scope-radio {
        display: flex !important;
        gap: 5px !important;
        margin-top: 5px !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.maintenance-edit-dialog-shell) .maintenance-scope-radio .mud-radio {
        min-height: 28px !important;
        padding: 2px 6px !important;
        border-radius: 11px !important;
        border: 1px solid rgba(150, 162, 210, 0.09) !important;
        background: rgba(255, 255, 255, 0.017) !important;
    }

    html body:has(.maintenance-edit-dialog-shell) .mud-popover:not(.mud-picker-popover),
    html body:has(.maintenance-edit-dialog-shell) .mud-popover-open:not(.mud-picker-popover) {
        max-height: 220px !important;
        overflow-y: auto !important;
        z-index: 1700 !important;
    }

    html body:has(.maintenance-edit-dialog-shell) .mud-popover.mud-picker-popover,
    html body:has(.maintenance-edit-dialog-shell) .mud-popover-open.mud-picker-popover {
        max-height: min(390px, calc(100dvh - 220px)) !important;
        overflow: auto !important;
        z-index: 1700 !important;
    }

    html body:has(.maintenance-edit-dialog-shell) .mud-picker-popover-paper {
        max-height: min(390px, calc(100dvh - 220px)) !important;
        overflow: auto !important;
    }

    html body:has(.maintenance-edit-dialog-shell) .mud-picker-container {
        z-index: 1700 !important;
        max-height: min(388px, calc(100dvh - 222px)) !important;
        overflow: auto !important;
        background: rgba(12, 15, 23, 0.99) !important;
    }
}

/*
 * Final desktop Shopping quick-add dialog density.
 * Shopping entry should feel instant: compact shell, grouped controls, and no
 * stranded footer below a simple form.
 */
@media (min-width: 769px) {
    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.shopping-quick-dialog-shell) {
        display: flex !important;
        flex-direction: column !important;
        width: min(720px, calc(100vw - 128px)) !important;
        max-width: min(720px, calc(100vw - 128px)) !important;
        height: auto !important;
        max-height: min(460px, calc(100dvh - 96px)) !important;
        min-height: 0 !important;
        overflow: hidden !important;
        border-radius: 20px !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.shopping-quick-dialog-shell) .mud-dialog-title {
        flex: 0 0 auto !important;
        min-height: 40px !important;
        padding: 10px 17px 8px !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.shopping-quick-dialog-shell) .mud-dialog-content {
        flex: 0 1 auto !important;
        min-height: 0 !important;
        max-height: calc(min(460px, calc(100dvh - 96px)) - 82px) !important;
        padding: 7px 14px 5px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.shopping-quick-dialog-shell) .mud-dialog-actions {
        flex: 0 0 auto !important;
        min-height: 44px !important;
        padding: 5px 17px 6px !important;
        justify-content: flex-end !important;
        gap: 9px !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.shopping-quick-dialog-shell) .mud-dialog-actions .mud-button-root {
        min-height: 32px !important;
        height: 32px !important;
        padding-inline: 16px !important;
        border-radius: 11px !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.shopping-quick-dialog-shell) .shopping-quick-dialog-shell {
        --app-control-h: 44px;
        display: block !important;
        min-width: 0 !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.shopping-quick-dialog-shell) .shopping-quick-section {
        margin: 0 !important;
        padding: 7px !important;
        border-radius: 14px !important;
        border: 1px solid rgba(150, 162, 210, 0.105) !important;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.018), rgba(255, 255, 255, 0.01)) !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.shopping-quick-dialog-shell) .shopping-quick-section .config-dialog-section-header {
        display: none !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.shopping-quick-dialog-shell) .shopping-quick-section .config-dialog-section-kicker {
        font-size: 0.58rem !important;
        line-height: 1 !important;
        letter-spacing: 0.14em !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.shopping-quick-dialog-shell) .shopping-quick-grid {
        display: grid !important;
        grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
        gap: 10px 10px !important;
        align-items: start !important;
        min-width: 0 !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.shopping-quick-dialog-shell) .shopping-quick-entry-list {
        grid-column: 1 / -1 !important;
        display: grid !important;
        gap: 5px !important;
        min-width: 0 !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.shopping-quick-dialog-shell) .shopping-bulk-item-row {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(144px, 0.38fr) 34px !important;
        gap: 7px !important;
        align-items: end !important;
        min-width: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.shopping-quick-dialog-shell) .shopping-bulk-row-actions {
        display: flex !important;
        align-items: flex-end !important;
        justify-content: flex-end !important;
        gap: 3px !important;
        min-height: 40px !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.shopping-quick-dialog-shell) .shopping-bulk-row-action,
    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.shopping-quick-dialog-shell) .shopping-bulk-row-action.mud-icon-button-root {
        width: 34px !important;
        min-width: 34px !important;
        height: 34px !important;
        min-height: 34px !important;
        border-radius: 11px !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.shopping-quick-dialog-shell) .shopping-quick-item-field {
        grid-column: span 8 !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.shopping-quick-dialog-shell) .shopping-quick-quantity-field {
        grid-column: span 4 !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.shopping-quick-dialog-shell) .shopping-quick-grid > .mud-select {
        grid-column: span 6 !important;
        min-width: 0 !important;
        min-height: 68px !important;
        height: auto !important;
        overflow: visible !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.shopping-quick-dialog-shell) .shopping-quick-notes-field {
        grid-column: span 9 !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.shopping-quick-dialog-shell) .shopping-quick-flags-row {
        grid-column: span 3 !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.shopping-quick-dialog-shell) .mud-input-control,
    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.shopping-quick-dialog-shell) .mud-picker {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.shopping-quick-dialog-shell) .mud-input-control:has(.mud-input-label) {
        padding-top: 0 !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.shopping-quick-dialog-shell) .mud-input-control:has(.mud-input-label) > .mud-input-control-input-container {
        min-height: 68px !important;
        height: auto !important;
        padding-top: 24px !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.shopping-quick-dialog-shell) .mud-input-label,
    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.shopping-quick-dialog-shell) .mud-input-label.mud-shrink,
    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.shopping-quick-dialog-shell) .mud-input-label.mud-input-label-animate {
        display: block !important;
        position: absolute !important;
        top: 0 !important;
        left: 8px !important;
        transform: none !important;
        height: 14px !important;
        padding: 0 !important;
        background: transparent !important;
        color: rgba(216, 224, 248, 0.72) !important;
        font-size: var(--app-label-size) !important;
        font-weight: 580 !important;
        letter-spacing: 0.12em !important;
        line-height: 14px !important;
        text-transform: uppercase !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.shopping-quick-dialog-shell) .mud-input.mud-input-outlined,
    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.shopping-quick-dialog-shell) .mud-input.mud-input-outlined.mud-select-input {
        min-height: 44px !important;
        height: 44px !important;
        max-height: 44px !important;
        border-radius: var(--app-control-radius) !important;
        border: 1px solid rgba(150, 162, 210, 0.135) !important;
        background: var(--app-control-bg) !important;
        box-shadow: none !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.shopping-quick-dialog-shell) .mud-input-slot,
    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.shopping-quick-dialog-shell) .mud-select-input,
    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.shopping-quick-dialog-shell) input.mud-input-root {
        min-height: 44px !important;
        height: 44px !important;
        max-height: 44px !important;
        padding: 0 calc(var(--app-control-icon-w) + 12px) 0 var(--app-control-pad-x) !important;
        color: rgba(242, 239, 232, 0.9) !important;
        font-size: 0.9rem !important;
        font-weight: 560 !important;
        line-height: 44px !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.shopping-quick-dialog-shell) .shopping-quick-notes-field .mud-input-control:has(textarea.mud-input-slot) > .mud-input-control-input-container {
        min-height: 92px !important;
        height: auto !important;
        padding-top: 24px !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.shopping-quick-dialog-shell) .shopping-quick-notes-field .mud-input-control:has(textarea.mud-input-slot) .mud-input {
        min-height: 68px !important;
        height: auto !important;
        max-height: none !important;
        align-items: stretch !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.shopping-quick-dialog-shell) .shopping-quick-notes-field textarea.mud-input-slot,
    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.shopping-quick-dialog-shell) .shopping-quick-notes-field textarea.mud-input-root {
        min-height: 66px !important;
        height: auto !important;
        padding: 10px var(--app-control-pad-x) !important;
        line-height: 1.32 !important;
        resize: vertical !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.shopping-quick-dialog-shell) .shopping-quick-flags-row {
        display: flex !important;
        align-items: center !important;
        align-self: end !important;
        min-height: 44px !important;
        padding: 24px 4px 0 6px !important;
        overflow: hidden !important;
    }
}

/*
 * Desktop regression repair contract.
 * This is the shared desktop shell owner: page rails, drawer chrome,
 * major workspace widths, and the most visible page composition repairs.
 */
@media (min-width: 1024px) {
    :root {
        --desktop-repair-topbar-h: 70px;
        --desktop-repair-rail-x: clamp(42px, 2.8vw, 72px);
        --desktop-repair-standard: 1480px;
        --desktop-repair-wide: 1680px;
        --desktop-repair-command: 1920px;
        --desktop-repair-gap: 18px;
        --desktop-repair-card-radius: 18px;
        --desktop-repair-border: rgba(214, 222, 247, 0.10);
        --desktop-repair-surface: rgba(16, 19, 29, 0.82);
    }

    html body .app-topbar,
    html body .app-topbar.mud-appbar {
        min-height: var(--desktop-repair-topbar-h) !important;
        height: var(--desktop-repair-topbar-h) !important;
        max-height: var(--desktop-repair-topbar-h) !important;
        align-items: center !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.055) !important;
    }

    html body .app-topbar-left,
    html body .app-topbar-actions {
        min-height: var(--desktop-repair-topbar-h) !important;
        height: var(--desktop-repair-topbar-h) !important;
        align-items: center !important;
    }

    html body .app-topbar-menu,
    html body .app-topbar-add-trigger,
    html body .app-topbar .mud-icon-button-root {
        width: 42px !important;
        min-width: 42px !important;
        height: 42px !important;
        min-height: 42px !important;
        border-radius: 13px !important;
    }

    html body .app-drawer,
    html body .app-drawer.mud-drawer {
        top: var(--desktop-repair-topbar-h) !important;
        height: calc(100dvh - var(--desktop-repair-topbar-h)) !important;
        max-height: calc(100dvh - var(--desktop-repair-topbar-h)) !important;
        overflow: hidden !important;
        border-right: 1px solid rgba(255, 255, 255, 0.055) !important;
        background: linear-gradient(180deg, rgba(8, 11, 17, 0.98), rgba(5, 7, 12, 0.98)) !important;
        scrollbar-width: none !important;
    }

    html body .app-drawer::-webkit-scrollbar,
    html body .app-drawer .mud-drawer-content::-webkit-scrollbar,
    html body .app-drawer .mud-navmenu::-webkit-scrollbar {
        width: 0 !important;
        height: 0 !important;
        display: none !important;
    }

    html body .app-drawer .mud-drawer-content,
    html body .app-drawer .mud-navmenu {
        height: 100% !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        scrollbar-width: none !important;
    }

    html body .app-drawer .mud-nav-link.active,
    html body .app-drawer .mud-nav-link.mud-nav-link-active,
    html body .app-drawer .mud-nav-link.active:not(.mud-nav-link-disabled),
    html body .app-drawer .mud-nav-link.mud-nav-link-active:not(.mud-nav-link-disabled) {
        background: rgba(142, 154, 210, 0.10) !important;
        border-color: rgba(173, 184, 238, 0.36) !important;
        box-shadow: inset 0 0 0 1px rgba(173, 184, 238, 0.10) !important;
        color: rgba(241, 243, 250, 0.94) !important;
    }

    html body .app-main-content {
        padding-top: var(--desktop-repair-topbar-h) !important;
    }

    html body .app-content-canvas,
    html body .mud-container.app-content-canvas {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 44px var(--desktop-repair-rail-x) 76px !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
    }

    html body .app-content-canvas > .app-page,
    html body .app-content-canvas > .app-page-shell,
    html body .app-content-canvas > .dayplan-page,
    html body .app-content-canvas > .ios-calendar-page,
    html body .app-content-canvas > .shopping-ios-page,
    html body .app-content-canvas > .notes-page,
    html body .app-content-canvas > .maintenance-page,
    html body .app-content-canvas > .ios-contacts-page,
    html body .app-content-canvas > .schoolrunsweek-page,
    html body .app-content-canvas > .household-profile-page,
    html body .app-content-canvas > .settings-page,
    html body .app-content-canvas > .preferences-page {
        margin: 0 auto 0 0 !important;
        min-width: 0 !important;
    }

    html body .app-page,
    html body .app-page-shell,
    html body .settings-page,
    html body .preferences-page {
        width: min(100%, var(--desktop-repair-standard)) !important;
        max-width: var(--desktop-repair-standard) !important;
    }

    html body .dayplan-page,
    html body .shopping-ios-page,
    html body .notes-page,
    html body .maintenance-page,
    html body .ios-contacts-page,
    html body .ios-contacts-page.network-page,
    html body .household-profile-page {
        width: min(100%, var(--desktop-repair-wide)) !important;
        max-width: var(--desktop-repair-wide) !important;
    }

    html body .ios-calendar-page,
    html body .schoolrunsweek-page {
        width: min(100%, var(--desktop-repair-command)) !important;
        max-width: var(--desktop-repair-command) !important;
    }

    html body .app-page-shell-header,
    html body .app-page-header,
    html body .dayplan-page-header,
    html body .ios-calendar-header,
    html body .shopping-ios-page .app-page-shell-header,
    html body .notes-page .app-page-shell-header,
    html body .maintenance-page .app-page-shell-header,
    html body .ios-contacts-page .app-page-shell-header,
    html body .schoolrunsweek-header,
    html body .household-profile-page .app-page-shell-header,
    html body .settings-page .app-page-header,
    html body .preferences-page .app-page-header {
        width: 100% !important;
        max-width: none !important;
        margin: 0 0 24px !important;
        justify-self: stretch !important;
    }

    html body .app-page-shell-copy,
    html body .ios-calendar-header-top {
        max-width: 760px !important;
        min-width: 0 !important;
    }

    html body .app-page-shell-toolbar,
    html body .dayplan-toolbar-row,
    html body .ios-calendar-toolbar,
    html body .shopping-filter-card,
    html body .notes-command-bar,
    html body .schoolrunsweek-toolbar,
    html body .maintenance-quick-filter-bar,
    html body .network-filter-bar,
    html body .settings-toolbar,
    html body .settings-action-row {
        max-width: 100% !important;
        margin-inline: 0 !important;
        justify-self: start !important;
        border-radius: 17px !important;
        border-color: var(--desktop-repair-border) !important;
        background: rgba(16, 19, 29, 0.70) !important;
    }

    html body .mud-paper,
    html body .app-card,
    html body .dayplan-card,
    html body .shopping-store-group,
    html body .maintenance-card,
    html body .network-contact-card,
    html body .schoolrunsweek-day-card,
    html body .settings-card,
    html body .profile-section,
    html body .notes-editor-pane {
        border-color: var(--desktop-repair-border) !important;
        border-radius: var(--desktop-repair-card-radius) !important;
    }

    html body .mud-input-control,
    html body .mud-select,
    html body .mud-picker,
    html body .mud-input {
        min-width: 0 !important;
    }

    html body .mud-input,
    html body .mud-field {
        min-height: 44px !important;
        border-radius: 13px !important;
    }

    html body .mud-input-slot,
    html body input.mud-input-slot,
    html body div.mud-input-slot.mud-select-input {
        min-height: 44px !important;
        line-height: 44px !important;
    }

    html body .network-contact-grid,
    html body .network-contact-grid-emergency,
    html body .ios-contacts-page .network-contact-grid,
    html body .ios-contacts-page .network-contact-grid-emergency {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(390px, 1fr)) !important;
        gap: 14px !important;
        align-items: stretch !important;
        width: 100% !important;
        max-width: none !important;
    }

    html body .notes-page .notes-workspace {
        display: grid !important;
        grid-template-columns: minmax(380px, 0.42fr) minmax(0, 1fr) !important;
        gap: var(--desktop-repair-gap) !important;
        align-items: start !important;
        width: 100% !important;
    }

    html body .notes-page .notes-list-pane,
    html body .notes-page .notes-editor-pane {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
    }

    html body .notes-page .notes-command-bar,
    html body .notes-page .notes-list-panel {
        width: 100% !important;
        max-width: none !important;
        margin-inline: 0 !important;
    }

    html body .notes-page .notes-editor-pane {
        min-height: min(760px, calc(100dvh - 190px)) !important;
    }

    html body .household-profile-page .app-page-shell-header,
    html body .household-profile-page .profile-command-rail,
    html body .household-profile-page .profile-category-rail,
    html body .household-profile-page .profile-layout,
    html body .household-profile-page .profile-section {
        width: 100% !important;
        max-width: none !important;
        margin-inline: 0 !important;
    }

    html body .ios-calendar-page .ios-month-view,
    html body .ios-calendar-page .ios-week-view,
    html body .ios-calendar-page .ios-month-grid,
    html body .ios-calendar-page .ios-week-grid {
        width: 100% !important;
        max-width: none !important;
    }

    html body .schoolrunsweek-page .schoolrunsweek-days {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)) !important;
        gap: 14px !important;
        width: 100% !important;
        max-width: none !important;
    }
}

@media (min-width: 1800px) {
    html body .schoolrunsweek-page .schoolrunsweek-days {
        grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    }
}

/*
 * Desktop regression repair: composition pass.
 * Keeps page-specific legacy CSS from re-centering or over-boxing the main
 * operational surfaces after the shared shell has been restored.
 */
@media (min-width: 1024px) {
    html body .dayplan-page .dayplan-desktop-grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(360px, 460px) !important;
        gap: 24px !important;
        align-items: start !important;
        width: 100% !important;
    }

    html body .dayplan-page .dayplan-section-timeline,
    html body .dayplan-page .dayplan-secondary-stack {
        min-width: 0 !important;
        width: 100% !important;
    }

    html body .dayplan-page .dayplan-secondary-stack {
        display: grid !important;
        gap: 18px !important;
        align-content: start !important;
    }

    html body .dayplan-page .dayplan-list {
        display: grid !important;
        gap: 12px !important;
    }

    html body .dayplan-page .dayplan-toolbar-row {
        width: max-content !important;
        max-width: 100% !important;
        padding: 10px 12px !important;
        gap: 10px !important;
        align-items: center !important;
    }

    html body .dayplan-page .dayplan-date-wrap {
        flex: 0 0 220px !important;
        width: 220px !important;
        max-width: 220px !important;
        min-width: 0 !important;
    }

    html body .dayplan-page .dayplan-user-wrap {
        flex: 0 0 190px !important;
        width: 190px !important;
        max-width: 190px !important;
        min-width: 0 !important;
    }

    html body .dayplan-page .dayplan-user-picker,
    html body .dayplan-page .dayplan-user-picker .mud-input-control,
    html body .dayplan-page .dayplan-user-picker .mud-input {
        width: 100% !important;
        min-width: 0 !important;
    }

    html body .dayplan-page .dayplan-card-timeline {
        display: grid !important;
        grid-template-columns: 78px 18px minmax(0, 1fr) !important;
        gap: 0 !important;
        align-items: stretch !important;
        min-height: 66px !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    html body .dayplan-page .dayplan-rail-time {
        grid-column: 1 !important;
        width: 100% !important;
        padding: 15px 8px 0 0 !important;
        justify-self: stretch !important;
        text-align: right !important;
        font-size: 0.83rem !important;
        letter-spacing: 0 !important;
        color: rgba(199, 207, 231, 0.78) !important;
    }

    html body .dayplan-page .dayplan-rail-track {
        grid-column: 2 !important;
        width: 18px !important;
        min-width: 18px !important;
        display: flex !important;
        justify-content: center !important;
    }

    html body .dayplan-page .dayplan-card-timeline .dayplan-card-shell {
        grid-column: 3 !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 14px !important;
        align-items: center !important;
        min-height: 66px !important;
        padding: 14px 18px !important;
        border: 1px solid var(--desktop-repair-border) !important;
        border-radius: var(--desktop-repair-card-radius) !important;
        background: rgba(17, 20, 30, 0.84) !important;
    }

    html body .dayplan-page .dayplan-card-title {
        line-height: 1.2 !important;
    }

    html body .dayplan-page .dayplan-card-anytime,
    html body .dayplan-page .dayplan-card-done,
    html body .dayplan-page .dayplan-empty-card {
        min-height: 0 !important;
        padding: 16px 18px !important;
        background: rgba(17, 20, 30, 0.84) !important;
    }

    html body .dayplan-page .dayplan-card-anytime-inner {
        gap: 14px !important;
        align-items: center !important;
    }

    html body .dayplan-page .dayplan-section-title {
        margin: 0 0 10px !important;
        line-height: 1.1 !important;
    }

    html body .ios-contacts-page .network-contact-grid,
    html body .ios-contacts-page .network-contact-grid-emergency {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 14px !important;
    }

    html body .ios-contacts-page .network-contact-card,
    html body .ios-contacts-page .network-contact-card.ios-contact-row {
        display: grid !important;
        grid-template-columns: 52px minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 14px !important;
        min-height: 104px !important;
        height: auto !important;
        padding: 16px 18px !important;
        overflow: visible !important;
    }

    html body .ios-contacts-page .network-contact-card .ios-contact-avatar {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        align-self: center !important;
    }

    html body .ios-contacts-page .network-contact-card .ios-contact-main {
        min-width: 0 !important;
        overflow: hidden !important;
    }

    html body .ios-contacts-page .network-contact-card .ios-contact-name,
    html body .ios-contacts-page .network-contact-card .ios-contact-meta,
    html body .ios-contacts-page .network-contact-card .ios-contact-subtitle {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    html body .ios-contacts-page .network-contact-card .ios-contact-actions {
        position: static !important;
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        min-width: max-content !important;
    }

    html body .ios-contacts-page .network-contact-card .ios-contact-actions .mud-icon-button,
    html body .ios-contacts-page .network-contact-card .ios-contact-actions .mud-menu-button-root,
    html body .ios-contacts-page .contact-card-menu-trigger {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        min-height: 34px !important;
    }

    html body .notes-page .notes-workspace {
        grid-template-columns: minmax(440px, 500px) minmax(0, 1fr) !important;
        gap: 20px !important;
    }

    html body .notes-page .notes-list-pane {
        min-width: 0 !important;
        overflow: visible !important;
    }

    html body .notes-page .notes-command-bar {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 10px !important;
        align-items: start !important;
        padding: 10px !important;
        overflow: visible !important;
    }

    html body .notes-page .notes-command-left {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        min-width: 0 !important;
    }

    html body .notes-page .notes-share-select {
        grid-column: 1 / -1 !important;
    }

    html body .notes-page .notes-command-select,
    html body .notes-page .notes-command-select .mud-input-control,
    html body .notes-page .notes-command-select .mud-input {
        width: 100% !important;
        min-width: 0 !important;
    }

    html body .notes-page .notes-command-right {
        position: static !important;
        display: flex !important;
        gap: 6px !important;
        align-items: center !important;
        justify-content: flex-end !important;
        min-width: max-content !important;
    }

    html body .notes-page .notes-list-panel {
        min-height: 520px !important;
        padding: 14px !important;
    }

    html body .notes-page .notes-editor-pane {
        min-height: min(760px, calc(100dvh - 190px)) !important;
        padding: 24px !important;
    }

    html body .notes-page .notes-notepad {
        min-height: 520px !important;
    }

    html body .shopping-ios-page .shopping-section-card {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 18px !important;
        padding: 20px !important;
        background: rgba(15, 18, 27, 0.68) !important;
    }

    html body .shopping-ios-page .shopping-section-header {
        grid-column: 1 / -1 !important;
        margin: 0 !important;
    }

    html body .shopping-ios-page .shopping-store-group {
        min-width: 0 !important;
        margin: 0 !important;
        padding: 18px !important;
    }

    html body .shopping-ios-page .shopping-item-list {
        display: grid !important;
        gap: 10px !important;
    }

    html body .shopping-ios-page .shopping-item-row {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 12px !important;
        align-items: center !important;
        min-height: 58px !important;
        padding: 12px 14px !important;
    }

    html body .shopping-ios-page .shopping-item-actions {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        min-width: max-content !important;
    }

    html body .maintenance-page .maintenance-page-content,
    html body .maintenance-page .maintenance-section-stack {
        display: grid !important;
        gap: 18px !important;
        width: 100% !important;
    }

    html body .maintenance-page .maintenance-section-card,
    html body .maintenance-page .maintenance-group-card {
        padding: 18px !important;
        background: rgba(15, 18, 27, 0.68) !important;
    }

    html body .maintenance-page .maintenance-item-row {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 18px !important;
        align-items: center !important;
        min-height: 84px !important;
        padding: 16px !important;
    }

    html body .maintenance-page .maintenance-item-actions {
        justify-self: end !important;
        align-self: center !important;
    }

    html body .maintenance-page .maintenance-item-title,
    html body .maintenance-page .maintenance-group-title {
        line-height: 1.18 !important;
    }

    html body .schoolrunsweek-page .schoolrunsweek-day-card {
        min-height: 0 !important;
        border-radius: 15px !important;
    }

    html body .schoolrunsweek-page .schoolrunsweek-slot-card {
        padding: 10px !important;
        min-height: 0 !important;
    }

    html body .schoolrunsweek-page .schoolrunsweek-slot-header {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 6px !important;
        align-items: center !important;
    }

    html body .schoolrunsweek-page .schoolrunsweek-slot-title {
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: normal !important;
        line-height: 1.05 !important;
    }

    html body .schoolrunsweek-page .schoolrunsweek-slot-add-button.mud-button-root {
        width: 34px !important;
        min-width: 34px !important;
        height: 34px !important;
        min-height: 34px !important;
        padding: 0 !important;
        border-radius: 11px !important;
        overflow: hidden !important;
    }

    html body .schoolrunsweek-page .schoolrunsweek-slot-add-button .mud-button-label {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0 !important;
        line-height: 0 !important;
    }

    html body .schoolrunsweek-page .schoolrunsweek-slot-add-button .mud-button-icon-start {
        margin: 0 !important;
    }

    html body .schoolrunsweek-page .schoolrunsweek-slot-add-button .mud-icon-root {
        width: 18px !important;
        height: 18px !important;
        font-size: 18px !important;
    }

    html body .schoolrunsweek-page .schoolrunsweek-empty {
        min-height: 96px !important;
        padding: 14px !important;
    }

    html body .schoolrunsweek-page .schoolrunsweek-assignment-card {
        min-height: 76px !important;
        padding: 10px !important;
    }
}

@media (min-width: 1800px) {
    html body .ios-contacts-page .network-contact-grid,
    html body .ios-contacts-page .network-contact-grid-emergency {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

/*
 * Today desktop regression repair.
 * Restores the daily brief to one composed vertical flow:
 * header, controls, timeline, flexible, done.
 */
@media (min-width: 1024px) {
    html body .app-drawer,
    html body .app-drawer.mud-drawer,
    html body .app-drawer .mud-drawer,
    html body .app-drawer .mud-drawer-content {
        height: calc(100dvh - var(--omni-topbar-height, 68px)) !important;
        max-height: calc(100dvh - var(--omni-topbar-height, 68px)) !important;
        overflow: hidden !important;
        scrollbar-width: none !important;
    }

    html body .app-drawer,
    html body .app-drawer.mud-drawer {
        padding-top: 0 !important;
    }

    html body .app-drawer .mud-drawer-content {
        height: 100% !important;
        max-height: 100% !important;
        min-height: 0 !important;
    }

    html body .app-drawer::-webkit-scrollbar,
    html body .app-drawer.mud-drawer::-webkit-scrollbar,
    html body .app-drawer .mud-drawer::-webkit-scrollbar,
    html body .app-drawer .mud-drawer-content::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }

    html body .app-drawer .mud-navmenu {
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
        max-height: 100% !important;
        min-height: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        padding-bottom: 16px !important;
        scrollbar-width: none !important;
        scrollbar-color: transparent transparent !important;
    }

    html body .app-drawer .mud-navmenu::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }

    html body .app-drawer .mud-navmenu > .mud-divider.my-2 {
        margin-top: auto !important;
        flex: 0 0 auto !important;
    }

    html body .app-drawer .mud-navmenu > .pa-2 {
        flex: 0 0 auto !important;
        padding: 6px 2px 0 !important;
    }

    html body .app-drawer .mud-navmenu > .pa-2 .mud-button-root {
        min-height: 40px !important;
        height: 40px !important;
    }

    html body .dayplan-page {
        width: min(100%, 1220px) !important;
        max-width: 1220px !important;
        margin-inline: 0 !important;
    }

    html body .dayplan-page .dayplan-desktop-grid {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 34px !important;
        align-items: stretch !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    html body .dayplan-page .dayplan-section,
    html body .dayplan-page .dayplan-section-timeline,
    html body .dayplan-page .dayplan-secondary-stack,
    html body .dayplan-page .dayplan-section-flexible,
    html body .dayplan-page .dayplan-section-done {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    html body .dayplan-page .dayplan-secondary-stack {
        display: flex !important;
        flex-direction: column !important;
        gap: 32px !important;
        align-content: stretch !important;
    }

    html body .dayplan-page .dayplan-page-header {
        margin-bottom: 22px !important;
    }

    html body .dayplan-page .dayplan-toolbar-row {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 10px !important;
        width: fit-content !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 0 30px !important;
        padding: 10px 12px !important;
        border-radius: 18px !important;
        background: rgba(13, 16, 24, 0.76) !important;
        border: 1px solid rgba(147, 157, 201, 0.16) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
    }

    html body .dayplan-page .dayplan-date-wrap {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    html body .dayplan-page .dayplan-date-control {
        width: 240px !important;
        min-width: 240px !important;
        max-width: 240px !important;
    }

    html body .dayplan-page .dayplan-date-native {
        min-width: 0 !important;
        width: 100% !important;
        padding-right: 48px !important;
        text-overflow: clip !important;
    }

    html body .dayplan-page .dayplan-date-nav-button,
    html body .dayplan-page .dayplan-date-nav-button.mud-icon-button {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        border-radius: 13px !important;
    }

    html body .dayplan-page .dayplan-today-button.mud-button-root {
        height: 44px !important;
        min-height: 44px !important;
        min-width: 108px !important;
        padding-inline: 20px !important;
        border-radius: 13px !important;
    }

    html body .dayplan-page .dayplan-user-wrap {
        flex: 0 0 210px !important;
        width: 210px !important;
        max-width: 210px !important;
        min-width: 0 !important;
    }

    html body .dayplan-page .dayplan-user-picker,
    html body .dayplan-page .dayplan-user-picker .mud-input-control,
    html body .dayplan-page .dayplan-user-picker .mud-input,
    html body .dayplan-page .dayplan-user-picker .mud-input-control-input-container {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    html body .dayplan-page .dayplan-section-title {
        margin: 0 0 14px !important;
        line-height: 1.12 !important;
    }

    html body .dayplan-page .dayplan-list {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        width: 100% !important;
    }

    html body .dayplan-page .dayplan-list:has(.dayplan-card-timeline)::before {
        left: 94px !important;
        width: 1px !important;
        background: linear-gradient(
            180deg,
            transparent 0,
            rgba(130, 141, 182, 0.18) 34px,
            rgba(130, 141, 182, 0.12) calc(100% - 34px),
            transparent 100%
        ) !important;
        box-shadow: none !important;
    }

    html body .dayplan-page .dayplan-card.dayplan-card-timeline,
    html body .dayplan-page .dayplan-card-timeline.mud-paper {
        display: grid !important;
        grid-template-columns: 82px 26px minmax(0, 1fr) !important;
        gap: 0 !important;
        align-items: stretch !important;
        min-height: 84px !important;
        width: 100% !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        overflow: visible !important;
    }

    html body .dayplan-page .dayplan-card-timeline .dayplan-rail-time {
        grid-column: 1 !important;
        width: 82px !important;
        min-width: 82px !important;
        max-width: 82px !important;
        padding: 24px 8px 0 0 !important;
        justify-self: stretch !important;
        justify-content: flex-end !important;
        text-align: right !important;
        color: rgba(197, 204, 225, 0.76) !important;
        font-size: 0.88rem !important;
        font-weight: 780 !important;
        line-height: 1 !important;
        letter-spacing: 0 !important;
        font-variant-numeric: tabular-nums !important;
        background: transparent !important;
        border: 0 !important;
    }

    html body .dayplan-page .dayplan-card-timeline .dayplan-rail-track {
        grid-column: 2 !important;
        position: relative !important;
        display: block !important;
        width: 26px !important;
        min-width: 26px !important;
        height: 100% !important;
        background: transparent !important;
        border: 0 !important;
    }

    html body .dayplan-page .dayplan-card-timeline .dayplan-rail-track::before,
    html body .dayplan-page .dayplan-card-timeline .dayplan-rail-track::after {
        content: none !important;
        display: none !important;
    }

    html body .dayplan-page .dayplan-card-timeline .dayplan-rail-dot {
        position: absolute !important;
        top: 28px !important;
        left: 50% !important;
        width: 8px !important;
        height: 8px !important;
        transform: translateX(-50%) !important;
        border-radius: 999px !important;
        background: rgba(126, 138, 185, 0.62) !important;
        box-shadow: 0 0 0 7px rgba(91, 106, 170, 0.055) !important;
    }

    html body .dayplan-page .dayplan-card-timeline .dayplan-card-shell {
        grid-column: 3 !important;
        grid-row: 1 !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 16px !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 84px !important;
        padding: 22px 24px !important;
        border-radius: 18px !important;
        border: 1px solid rgba(122, 133, 176, 0.16) !important;
        background: linear-gradient(180deg, rgba(18, 21, 32, 0.9), rgba(14, 17, 26, 0.86)) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
    }

    html body .dayplan-page .dayplan-card-timeline:not(.dayplan-card-timeline-collapsed) .dayplan-card-shell {
        padding-right: 72px !important;
    }

    html body .dayplan-page .dayplan-card-timeline .dayplan-card-title {
        line-height: 1.18 !important;
        font-size: 1rem !important;
        max-width: 100% !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
    }

    html body .dayplan-page .dayplan-card-anytime,
    html body .dayplan-page .dayplan-card-done,
    html body .dayplan-page .dayplan-empty-card {
        width: 100% !important;
        min-height: 0 !important;
        padding: 18px 20px !important;
        border-radius: 18px !important;
        border: 1px solid rgba(122, 133, 176, 0.15) !important;
        background: linear-gradient(180deg, rgba(18, 21, 31, 0.82), rgba(13, 16, 24, 0.78)) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
    }

    html body .dayplan-page .app-empty-state-compact,
    html body .dayplan-page .app-empty-state-inline {
        min-height: 0 !important;
        padding: 18px 20px !important;
    }

    html body .dayplan-page .dayplan-done-panel,
    html body .dayplan-page .dayplan-done-panel .mud-expand-panel,
    html body .dayplan-page .dayplan-done-panel .mud-paper {
        width: 100% !important;
        max-width: none !important;
        border-radius: 18px !important;
    }

    html body .dayplan-page .dayplan-done-panel .mud-expand-panel-header {
        min-height: 58px !important;
        padding: 0 20px !important;
    }

    html body .dayplan-page .dayplan-done-panel .mud-expand-panel-content {
        padding: 0 20px 20px !important;
    }
}

/*
 * Directory desktop repair.
 * Restores the contact roster to the shared premium card rhythm without
 * changing page structure or mobile density rules.
 */
@media (min-width: 1024px) {
    html body .app-drawer,
    html body .app-drawer.mud-drawer,
    html body .app-drawer .mud-drawer,
    html body .app-drawer .mud-drawer-content,
    html body .app-drawer .mud-navmenu {
        scrollbar-width: none !important;
        scrollbar-color: transparent transparent !important;
    }

    html body .app-drawer::-webkit-scrollbar,
    html body .app-drawer.mud-drawer::-webkit-scrollbar,
    html body .app-drawer .mud-drawer::-webkit-scrollbar,
    html body .app-drawer .mud-drawer-content::-webkit-scrollbar,
    html body .app-drawer .mud-navmenu::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }

    html body .app-drawer,
    html body .app-drawer.mud-drawer,
    html body .app-drawer .mud-drawer-content {
        border-right-color: rgba(105, 116, 152, 0.08) !important;
        box-shadow: none !important;
    }

    html body .ios-contacts-page.app-page-shell,
    html body .app-page-shell.ios-contacts-page,
    html body .ios-contacts-page.network-page {
        width: min(100%, 1680px) !important;
        max-width: 1680px !important;
        margin-inline: 0 !important;
    }

    html body .ios-contacts-page .app-page-header,
    html body .ios-contacts-page .network-filter-bar,
    html body .ios-contacts-page .ios-contact-group {
        width: 100% !important;
        max-width: 100% !important;
    }

    html body .ios-contacts-page .network-filter-bar {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        flex-wrap: wrap !important;
        width: fit-content !important;
        max-width: 100% !important;
        gap: 8px !important;
        min-height: 48px !important;
        margin: 24px 0 28px !important;
        padding: 6px !important;
        border: 1px solid rgba(122, 133, 176, 0.16) !important;
        border-radius: 999px !important;
        background: linear-gradient(180deg, rgba(18, 21, 31, 0.86), rgba(12, 15, 23, 0.82)) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
    }

    html body .ios-contacts-page .network-filter-bar .mud-chip-root {
        min-height: 34px !important;
        height: 34px !important;
        padding: 0 14px !important;
        border-radius: 999px !important;
        font-size: 0.76rem !important;
        font-weight: 760 !important;
        letter-spacing: 0 !important;
    }

    html body .ios-contacts-page .ios-contact-group {
        margin-top: 0 !important;
        margin-bottom: 28px !important;
    }

    html body .ios-contacts-page .ios-contact-group + .ios-contact-group {
        margin-top: 8px !important;
    }

    html body .ios-contacts-page .ios-contact-group-title {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        margin: 0 0 14px !important;
        color: rgba(202, 208, 226, 0.7) !important;
        font-size: 0.72rem !important;
        font-weight: 840 !important;
        line-height: 1 !important;
        letter-spacing: 0.2em !important;
        text-transform: uppercase !important;
    }

    html body .ios-contacts-page .ios-contact-group-title::after {
        min-width: 72px !important;
        height: 1px !important;
        background: linear-gradient(90deg, rgba(122, 133, 176, 0.18), transparent) !important;
    }

    html body .ios-contacts-page .network-contact-grid,
    html body .ios-contacts-page .network-contact-grid-emergency {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 18px !important;
        align-items: stretch !important;
        width: 100% !important;
    }

    html body .ios-contacts-page .network-contact-card,
    html body .ios-contacts-page .network-contact-card.ios-contact-row {
        display: grid !important;
        grid-template-columns: 58px minmax(0, 1fr) auto !important;
        grid-template-areas: "avatar body actions" !important;
        align-items: center !important;
        column-gap: 16px !important;
        min-height: 132px !important;
        height: auto !important;
        padding: 22px 22px !important;
        border: 1px solid rgba(122, 133, 176, 0.15) !important;
        border-radius: 20px !important;
        background: linear-gradient(180deg, rgba(19, 22, 33, 0.9), rgba(13, 16, 25, 0.86)) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 14px 34px rgba(0, 0, 0, 0.18) !important;
        overflow: visible !important;
    }

    html body .ios-contacts-page .network-contact-card::before {
        opacity: 0.22 !important;
        background: radial-gradient(circle at top left, rgba(127, 150, 242, 0.08), transparent 42%) !important;
    }

    html body .ios-contacts-page .network-contact-card:hover {
        transform: translateY(-1px) !important;
        border-color: rgba(143, 157, 208, 0.24) !important;
        background: linear-gradient(180deg, rgba(23, 27, 40, 0.93), rgba(15, 18, 28, 0.9)) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045), 0 18px 40px rgba(0, 0, 0, 0.22) !important;
    }

    html body .ios-contacts-page .network-contact-card .ios-contact-avatar {
        grid-area: avatar !important;
        width: 54px !important;
        height: 54px !important;
        min-width: 54px !important;
        border-radius: 999px !important;
        font-size: 0.82rem !important;
        font-weight: 820 !important;
        align-self: center !important;
    }

    html body .ios-contacts-page .network-contact-card .ios-contact-main {
        grid-area: body !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    html body .ios-contacts-page .network-contact-card .ios-contact-name-row {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        min-width: 0 !important;
        margin-bottom: 3px !important;
    }

    html body .ios-contacts-page .network-contact-card .ios-contact-name {
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        color: rgba(246, 243, 236, 0.96) !important;
        font-size: 1.05rem !important;
        font-weight: 790 !important;
        line-height: 1.14 !important;
        letter-spacing: -0.005em !important;
    }

    html body .ios-contacts-page .network-contact-card .ios-contact-badge {
        flex: 0 0 auto !important;
        min-height: 20px !important;
        padding: 0 8px !important;
        font-size: 0.62rem !important;
        font-weight: 780 !important;
        color: rgba(205, 214, 255, 0.72) !important;
        background: rgba(127, 150, 242, 0.09) !important;
        border-color: rgba(127, 150, 242, 0.16) !important;
    }

    html body .ios-contacts-page .network-contact-card .ios-contact-subtitle {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        margin-top: 1px !important;
        max-width: 100% !important;
        overflow: hidden !important;
        color: rgba(177, 184, 202, 0.82) !important;
        font-size: 0.83rem !important;
        line-height: 1.22 !important;
        white-space: nowrap !important;
    }

    html body .ios-contacts-page .network-contact-card .ios-contact-role {
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        color: rgba(177, 184, 202, 0.82) !important;
        font-weight: 620 !important;
    }

    html body .ios-contacts-page .network-contact-card .ios-contact-phone {
        flex: 0 0 auto !important;
        color: rgba(215, 220, 234, 0.88) !important;
        font-weight: 680 !important;
        font-variant-numeric: tabular-nums !important;
    }

    html body .ios-contacts-page .network-contact-card .ios-contact-dot {
        color: rgba(142, 151, 170, 0.5) !important;
    }

    html body .ios-contacts-page .network-contact-card .ios-contact-subtitle > span:not(.ios-contact-dot) {
        color: inherit !important;
    }

    html body .ios-contacts-page .network-contact-card .ios-contact-meta {
        max-width: 100% !important;
        margin-top: 6px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        color: rgba(142, 151, 170, 0.8) !important;
        font-size: 0.78rem !important;
        font-weight: 560 !important;
        line-height: 1.2 !important;
    }

    html body .ios-contacts-page .network-contact-card .ios-contact-meta + .ios-contact-meta {
        display: block !important;
        margin-top: 4px !important;
        color: rgba(142, 151, 170, 0.62) !important;
    }

    html body .ios-contacts-page .network-contact-card .ios-contact-actions {
        grid-area: actions !important;
        position: static !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 7px !important;
        min-width: max-content !important;
        align-self: center !important;
    }

    html body .ios-contacts-page .network-contact-card .ios-contact-actions .mud-icon-button,
    html body .ios-contacts-page .network-contact-card .ios-contact-actions .mud-icon-button-root,
    html body .ios-contacts-page .network-contact-card .ios-contact-actions .mud-menu-button-root,
    html body .ios-contacts-page .contact-card-menu-trigger {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
        border-radius: 12px !important;
    }

    html body .ios-contacts-page .network-contact-card .ios-contact-actions .mud-icon-root,
    html body .ios-contacts-page .contact-card-menu-trigger .mud-icon-root {
        width: 20px !important;
        height: 20px !important;
        font-size: 20px !important;
    }
}

@media (min-width: 1024px) and (max-width: 1599px) {
    html body .ios-contacts-page .network-contact-grid,
    html body .ios-contacts-page .network-contact-grid-emergency {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/*
 * Add/Edit Contact desktop modal repair.
 * The contact editor should read as a compact composer, not a full-page form.
 */
@media (min-width: 1024px) {
    html body:has(.contact-edit-dialog-shell) .mud-overlay-scrim,
    html body:has(.contact-edit-dialog-shell) .mud-overlay-dark {
        background: rgba(2, 4, 10, 0.56) !important;
        backdrop-filter: blur(3px) saturate(0.92) !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.contact-edit-dialog-shell) {
        display: flex !important;
        flex-direction: column !important;
        width: min(880px, calc(100vw - 128px)) !important;
        max-width: min(880px, calc(100vw - 128px)) !important;
        height: auto !important;
        max-height: min(720px, calc(100dvh - 96px)) !important;
        min-height: 0 !important;
        border-radius: 22px !important;
        border: 1px solid rgba(150, 162, 210, 0.18) !important;
        background: linear-gradient(180deg, rgba(20, 24, 35, 0.99), rgba(9, 12, 19, 0.99)) !important;
        box-shadow: 0 30px 92px rgba(0, 0, 0, 0.46), inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
        overflow: hidden !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.contact-edit-dialog-shell) .mud-dialog-title {
        flex: 0 0 auto !important;
        min-height: 58px !important;
        padding: 17px 24px 15px !important;
        border-bottom: 1px solid rgba(150, 162, 210, 0.13) !important;
        background: linear-gradient(180deg, rgba(25, 29, 42, 0.98), rgba(16, 19, 29, 0.96)) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.contact-edit-dialog-shell) .mud-dialog-title .mud-typography {
        color: rgba(248, 246, 241, 0.96) !important;
        font-size: 1.08rem !important;
        font-weight: 790 !important;
        line-height: 1.12 !important;
        letter-spacing: -0.005em !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.contact-edit-dialog-shell) .mud-dialog-content {
        flex: 0 1 auto !important;
        min-height: 0 !important;
        max-height: calc(min(720px, calc(100dvh - 96px)) - 128px) !important;
        padding: 16px 22px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        scrollbar-width: thin !important;
        scrollbar-color: rgba(190, 200, 235, 0.34) transparent !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.contact-edit-dialog-shell) .mud-dialog-actions {
        position: sticky !important;
        bottom: 0 !important;
        z-index: 4 !important;
        flex: 0 0 auto !important;
        min-height: 66px !important;
        padding: 11px 24px 14px !important;
        justify-content: flex-end !important;
        gap: 10px !important;
        border-top: 1px solid rgba(150, 162, 210, 0.13) !important;
        background: linear-gradient(180deg, rgba(13, 16, 24, 0.96), rgba(7, 9, 15, 0.995)) !important;
        box-shadow: 0 -14px 32px rgba(0, 0, 0, 0.22) !important;
        backdrop-filter: none !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.contact-edit-dialog-shell) .mud-dialog-actions .mud-button-root {
        min-height: 44px !important;
        height: 44px !important;
        padding-inline: 20px !important;
        border-radius: 13px !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.contact-edit-dialog-shell) .contact-edit-dialog-shell {
        --app-control-h: 46px;
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.contact-edit-dialog-shell) .contact-edit-section-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px 14px !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.contact-edit-dialog-shell) .contact-edit-section-grid > .span-full {
        grid-column: 1 / -1 !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.contact-edit-dialog-shell) .contact-edit-section {
        margin: 0 !important;
        padding: 14px !important;
        border-radius: 16px !important;
        border: 1px solid rgba(150, 162, 210, 0.12) !important;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.026), rgba(255, 255, 255, 0.014)) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.026) !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.contact-edit-dialog-shell) .contact-edit-section + .contact-edit-section {
        margin-top: 0 !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.contact-edit-dialog-shell) .contact-edit-section .config-dialog-section-header {
        margin: 0 0 10px !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.contact-edit-dialog-shell) .contact-edit-section .config-dialog-section-kicker {
        margin: 0 !important;
        color: rgba(196, 205, 235, 0.76) !important;
        font-size: 0.68rem !important;
        font-weight: 820 !important;
        line-height: 1 !important;
        letter-spacing: 0.16em !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.contact-edit-dialog-shell) .contact-edit-form-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px 14px !important;
        align-items: start !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.contact-edit-dialog-shell) .contact-edit-form-grid > .span-full {
        grid-column: 1 / -1 !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.contact-edit-dialog-shell) .contact-edit-stack {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.contact-edit-dialog-shell) .contact-edit-dialog-shell .mud-input-control:has(.mud-input-label) {
        padding-top: 0 !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.contact-edit-dialog-shell) .contact-edit-dialog-shell .mud-input-control:has(.mud-input-label) > .mud-input-control-input-container {
        min-height: 64px !important;
        height: 64px !important;
        padding-top: 18px !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.contact-edit-dialog-shell) .contact-edit-dialog-shell .mud-input-label,
    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.contact-edit-dialog-shell) .contact-edit-dialog-shell .mud-input-label.mud-shrink,
    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.contact-edit-dialog-shell) .contact-edit-dialog-shell .mud-input-label.mud-input-label-animate {
        height: 13px !important;
        line-height: 13px !important;
        font-size: 0.64rem !important;
        letter-spacing: 0.12em !important;
        color: rgba(216, 224, 248, 0.72) !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.contact-edit-dialog-shell) .contact-edit-dialog-shell .mud-input.mud-input-outlined,
    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.contact-edit-dialog-shell) .contact-edit-dialog-shell .mud-input.mud-input-outlined.mud-select-input,
    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.contact-edit-dialog-shell) .contact-edit-dialog-shell .mud-field {
        min-height: 46px !important;
        height: 46px !important;
        max-height: 46px !important;
        border-radius: 13px !important;
        background: rgba(255, 255, 255, 0.045) !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.contact-edit-dialog-shell) .contact-edit-dialog-shell .mud-input-slot,
    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.contact-edit-dialog-shell) .contact-edit-dialog-shell .mud-select-input,
    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.contact-edit-dialog-shell) .contact-edit-dialog-shell input.mud-input-root {
        min-height: 46px !important;
        height: 46px !important;
        max-height: 46px !important;
        line-height: 46px !important;
        font-size: 0.92rem !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.contact-edit-dialog-shell) .contact-edit-section-notes .mud-input-control:has(textarea.mud-input-slot) {
        padding-top: 0 !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.contact-edit-dialog-shell) .contact-edit-section-notes .mud-input-control:has(textarea.mud-input-slot) > .mud-input-control-input-container {
        min-height: 94px !important;
        height: 94px !important;
        padding-top: 18px !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.contact-edit-dialog-shell) .contact-edit-section-notes .mud-input-control:has(textarea.mud-input-slot) .mud-input {
        min-height: 76px !important;
        height: auto !important;
        max-height: none !important;
        align-items: stretch !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.contact-edit-dialog-shell) .contact-edit-section-notes .mud-input-control:has(textarea.mud-input-slot) .mud-input-label,
    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.contact-edit-dialog-shell) .contact-edit-section-notes .mud-input-control:has(textarea.mud-input-slot) .mud-input-label.mud-shrink,
    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.contact-edit-dialog-shell) .contact-edit-section-notes .mud-input-control:has(textarea.mud-input-slot) .mud-input-label.mud-input-label-animate {
        top: 0 !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.contact-edit-dialog-shell) .contact-edit-section-notes textarea.mud-input-slot,
    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.contact-edit-dialog-shell) .contact-edit-section-notes textarea.mud-input-root {
        min-height: 76px !important;
        height: auto !important;
        padding: 10px 14px !important;
        line-height: 1.35 !important;
        resize: vertical !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.contact-edit-dialog-shell) .contact-edit-section-classification {
        display: block !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.contact-edit-dialog-shell) .contact-edit-flags-row {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.contact-edit-dialog-shell) .contact-edit-toggle-row {
        min-height: 44px !important;
        padding: 8px 10px !important;
        border-radius: 13px !important;
        background: rgba(255, 255, 255, 0.035) !important;
    }

    html body:has(.mud-dialog:not(.mud-dialog-fullscreen)) .mud-popover.mud-popover-relative-width:has(.mud-list),
    html body:has(.mud-dialog:not(.mud-dialog-fullscreen)) .mud-popover-open.mud-popover-relative-width:has(.mud-list) {
        z-index: 2600 !important;
        border: 1px solid rgba(190, 202, 244, 0.16) !important;
        border-radius: 14px !important;
        background: linear-gradient(145deg, rgba(23, 26, 38, 0.99), rgba(11, 13, 21, 0.99)) !important;
        box-shadow:
            0 22px 58px rgba(0, 0, 0, 0.54),
            inset 0 1px 0 rgba(255, 255, 255, 0.055) !important;
        overflow: hidden !important;
    }

    html body:has(.mud-dialog:not(.mud-dialog-fullscreen)) .mud-popover.mud-popover-relative-width .mud-list,
    html body:has(.mud-dialog:not(.mud-dialog-fullscreen)) .mud-popover-open.mud-popover-relative-width .mud-list {
        padding: 6px !important;
        max-height: min(260px, calc(100dvh - 192px)) !important;
        overflow-y: auto !important;
        background: transparent !important;
    }

    html body:has(.mud-dialog:not(.mud-dialog-fullscreen)) .mud-popover.mud-popover-relative-width .mud-list-item,
    html body:has(.mud-dialog:not(.mud-dialog-fullscreen)) .mud-popover-open.mud-popover-relative-width .mud-list-item {
        min-height: 40px !important;
        padding: 8px 11px !important;
        border-radius: 10px !important;
        color: rgba(235, 239, 250, 0.88) !important;
        line-height: 1.25 !important;
    }

    html body:has(.mud-dialog:not(.mud-dialog-fullscreen)) .mud-popover.mud-popover-relative-width .mud-list-item:hover,
    html body:has(.mud-dialog:not(.mud-dialog-fullscreen)) .mud-popover-open.mud-popover-relative-width .mud-list-item:hover {
        background: rgba(150, 164, 224, 0.12) !important;
        color: rgba(250, 251, 255, 0.98) !important;
    }

    html body:has(.mud-dialog:not(.mud-dialog-fullscreen)) .mud-popover.mud-popover-relative-width .mud-list-item.mud-selected-item,
    html body:has(.mud-dialog:not(.mud-dialog-fullscreen)) .mud-popover.mud-popover-relative-width .mud-list-item.mud-list-item-selected,
    html body:has(.mud-dialog:not(.mud-dialog-fullscreen)) .mud-popover.mud-popover-relative-width .mud-list-item[aria-selected="true"],
    html body:has(.mud-dialog:not(.mud-dialog-fullscreen)) .mud-popover-open.mud-popover-relative-width .mud-list-item.mud-selected-item,
    html body:has(.mud-dialog:not(.mud-dialog-fullscreen)) .mud-popover-open.mud-popover-relative-width .mud-list-item.mud-list-item-selected,
    html body:has(.mud-dialog:not(.mud-dialog-fullscreen)) .mud-popover-open.mud-popover-relative-width .mud-list-item[aria-selected="true"] {
        background: rgba(150, 164, 224, 0.16) !important;
        color: rgba(250, 251, 255, 0.98) !important;
    }

    html body:has(.contact-edit-dialog-shell) .mud-popover.app-location-popover,
    html body:has(.contact-edit-dialog-shell) .mud-popover-open.app-location-popover {
        width: min(804px, calc(100vw - 128px)) !important;
        max-width: min(804px, calc(100vw - 128px)) !important;
        max-height: min(224px, calc(100dvh - 220px)) !important;
        overflow: hidden !important;
        z-index: 2600 !important;
    }

    html body:has(.contact-edit-dialog-shell) .mud-popover-open.app-location-popover {
        transform: translateY(calc(-100% - 64px)) !important;
    }

    html body:has(.contact-edit-dialog-shell) .mud-popover.app-location-popover .mud-list,
    html body:has(.contact-edit-dialog-shell) .mud-popover-open.app-location-popover .mud-list {
        max-height: min(224px, calc(100dvh - 220px)) !important;
        overflow-y: auto !important;
    }

    html body:has(.event-edit-dialog-shell) .mud-popover.app-location-popover,
    html body:has(.event-edit-dialog-shell) .mud-popover-open.app-location-popover {
        width: min(365px, calc(100vw - 128px)) !important;
        max-width: min(365px, calc(100vw - 128px)) !important;
        max-height: min(192px, calc(100dvh - 220px)) !important;
        border: 1px solid rgba(190, 202, 244, 0.17) !important;
        border-radius: 14px !important;
        background: linear-gradient(145deg, rgba(23, 26, 38, 0.99), rgba(10, 12, 20, 0.99)) !important;
        box-shadow:
            0 22px 58px rgba(0, 0, 0, 0.54),
            inset 0 1px 0 rgba(255, 255, 255, 0.055) !important;
        overflow: hidden !important;
        z-index: 2600 !important;
    }

    html body:has(.event-edit-dialog-shell) .mud-popover.app-location-popover .mud-list,
    html body:has(.event-edit-dialog-shell) .mud-popover-open.app-location-popover .mud-list {
        max-height: min(192px, calc(100dvh - 220px)) !important;
        padding: 6px !important;
        overflow-y: auto !important;
        background: transparent !important;
    }

    html body:has(.event-edit-dialog-shell) .mud-popover.app-location-popover .mud-list-item,
    html body:has(.event-edit-dialog-shell) .mud-popover-open.app-location-popover .mud-list-item {
        min-height: 40px !important;
        padding: 8px 11px !important;
        border-radius: 10px !important;
        color: rgba(235, 239, 250, 0.88) !important;
        line-height: 1.25 !important;
    }

    html body:has(.maintenance-edit-dialog-shell) .mud-popover.mud-popover-relative-width:has(.mud-list),
    html body:has(.maintenance-edit-dialog-shell) .mud-popover-open.mud-popover-relative-width:has(.mud-list) {
        width: min(299px, calc(100vw - 128px)) !important;
        min-width: min(299px, calc(100vw - 128px)) !important;
        max-width: min(299px, calc(100vw - 128px)) !important;
        max-height: min(220px, calc(100dvh - 220px)) !important;
        border: 1px solid rgba(190, 202, 244, 0.17) !important;
        border-radius: 14px !important;
        background: linear-gradient(145deg, rgba(23, 26, 38, 0.99), rgba(10, 12, 20, 0.99)) !important;
        box-shadow:
            0 22px 58px rgba(0, 0, 0, 0.54),
            inset 0 1px 0 rgba(255, 255, 255, 0.055) !important;
        transform: translateY(4px) !important;
        overflow: hidden !important;
        z-index: 2600 !important;
    }

    html body:has(.maintenance-edit-dialog-shell) .mud-popover.mud-popover-relative-width .mud-list,
    html body:has(.maintenance-edit-dialog-shell) .mud-popover-open.mud-popover-relative-width .mud-list {
        padding: 6px !important;
        max-height: min(220px, calc(100dvh - 220px)) !important;
        overflow-y: auto !important;
        background: transparent !important;
    }

    html body:has(.maintenance-edit-dialog-shell) .mud-popover.mud-popover-relative-width .mud-list-item,
    html body:has(.maintenance-edit-dialog-shell) .mud-popover-open.mud-popover-relative-width .mud-list-item {
        min-height: 40px !important;
        padding: 8px 11px !important;
        border-radius: 10px !important;
        color: rgba(235, 239, 250, 0.88) !important;
        line-height: 1.25 !important;
    }

    html body:has(.maintenance-edit-dialog-shell) .mud-popover.mud-popover-relative-width .mud-list-item:hover,
    html body:has(.maintenance-edit-dialog-shell) .mud-popover-open.mud-popover-relative-width .mud-list-item:hover {
        background: rgba(150, 164, 224, 0.12) !important;
        color: rgba(250, 251, 255, 0.98) !important;
    }

    html body:has(.maintenance-edit-dialog-shell) .mud-popover.mud-popover-relative-width .mud-list-item.mud-selected-item,
    html body:has(.maintenance-edit-dialog-shell) .mud-popover.mud-popover-relative-width .mud-list-item.mud-list-item-selected,
    html body:has(.maintenance-edit-dialog-shell) .mud-popover.mud-popover-relative-width .mud-list-item[aria-selected="true"],
    html body:has(.maintenance-edit-dialog-shell) .mud-popover-open.mud-popover-relative-width .mud-list-item.mud-selected-item,
    html body:has(.maintenance-edit-dialog-shell) .mud-popover-open.mud-popover-relative-width .mud-list-item.mud-list-item-selected,
    html body:has(.maintenance-edit-dialog-shell) .mud-popover-open.mud-popover-relative-width .mud-list-item[aria-selected="true"] {
        background: rgba(150, 164, 224, 0.16) !important;
        color: rgba(250, 251, 255, 0.98) !important;
    }

    html body:has(.shopping-quick-dialog-shell) .mud-popover.mud-popover-relative-width.shopping-quick-select-popover:has(.mud-list),
    html body:has(.shopping-quick-dialog-shell) .mud-popover-open.mud-popover-relative-width.shopping-quick-select-popover:has(.mud-list) {
        width: min(333px, calc(100vw - 128px)) !important;
        min-width: min(333px, calc(100vw - 128px)) !important;
        max-width: min(333px, calc(100vw - 128px)) !important;
        max-height: min(152px, calc(100dvh - 220px)) !important;
        border: 1px solid rgba(190, 202, 244, 0.14) !important;
        border-radius: 12px !important;
        background: linear-gradient(145deg, rgba(20, 23, 34, 0.99), rgba(9, 11, 18, 0.99)) !important;
        box-shadow:
            0 18px 42px rgba(0, 0, 0, 0.48),
            inset 0 1px 0 rgba(255, 255, 255, 0.048) !important;
        transform: translateY(3px) !important;
        overflow: hidden !important;
        z-index: 2600 !important;
    }

    html body:has(.shopping-quick-dialog-shell) .mud-popover.mud-popover-relative-width.shopping-quick-select-popover .mud-list,
    html body:has(.shopping-quick-dialog-shell) .mud-popover-open.mud-popover-relative-width.shopping-quick-select-popover .mud-list {
        padding: 4px !important;
        max-height: min(152px, calc(100dvh - 220px)) !important;
        overflow-y: auto !important;
        background: transparent !important;
    }

    html body:has(.shopping-quick-dialog-shell) .mud-popover.mud-popover-relative-width.shopping-quick-select-popover .mud-list-item,
    html body:has(.shopping-quick-dialog-shell) .mud-popover-open.mud-popover-relative-width.shopping-quick-select-popover .mud-list-item {
        min-height: 32px !important;
        padding: 5px 10px !important;
        border-radius: 9px !important;
        color: rgba(235, 239, 250, 0.86) !important;
        font-size: 0.82rem !important;
        line-height: 1.2 !important;
    }

    html body:has(.shopping-quick-dialog-shell) .mud-popover.mud-popover-relative-width.shopping-quick-select-popover .mud-list-item-text,
    html body:has(.shopping-quick-dialog-shell) .mud-popover-open.mud-popover-relative-width.shopping-quick-select-popover .mud-list-item-text,
    html body:has(.shopping-quick-dialog-shell) .mud-popover.mud-popover-relative-width.shopping-quick-select-popover .mud-list-item .mud-typography,
    html body:has(.shopping-quick-dialog-shell) .mud-popover-open.mud-popover-relative-width.shopping-quick-select-popover .mud-list-item .mud-typography {
        margin: 0 !important;
        color: inherit !important;
        font-size: inherit !important;
        line-height: 1.2 !important;
    }

    html body:has(.shopping-quick-dialog-shell) .mud-popover.mud-popover-relative-width.shopping-quick-select-popover .mud-list-item:hover,
    html body:has(.shopping-quick-dialog-shell) .mud-popover-open.mud-popover-relative-width.shopping-quick-select-popover .mud-list-item:hover {
        background: rgba(150, 164, 224, 0.105) !important;
        color: rgba(250, 251, 255, 0.97) !important;
    }

    html body:has(.shopping-quick-dialog-shell) .mud-popover.mud-popover-relative-width.shopping-quick-select-popover .mud-list-item.mud-selected-item,
    html body:has(.shopping-quick-dialog-shell) .mud-popover.mud-popover-relative-width.shopping-quick-select-popover .mud-list-item.mud-list-item-selected,
    html body:has(.shopping-quick-dialog-shell) .mud-popover.mud-popover-relative-width.shopping-quick-select-popover .mud-list-item[aria-selected="true"],
    html body:has(.shopping-quick-dialog-shell) .mud-popover-open.mud-popover-relative-width.shopping-quick-select-popover .mud-list-item.mud-selected-item,
    html body:has(.shopping-quick-dialog-shell) .mud-popover-open.mud-popover-relative-width.shopping-quick-select-popover .mud-list-item.mud-list-item-selected,
    html body:has(.shopping-quick-dialog-shell) .mud-popover-open.mud-popover-relative-width.shopping-quick-select-popover .mud-list-item[aria-selected="true"] {
        background: rgba(150, 164, 224, 0.14) !important;
        color: rgba(250, 251, 255, 0.98) !important;
    }
}

/*
 * Add/Edit Day Plan desktop modal repair.
 * Uses the compact composer pattern established by Add Contact.
 */
@media (min-width: 1024px) {
    html body:has(.dayplan-edit-dialog-shell) .mud-overlay-scrim,
    html body:has(.dayplan-edit-dialog-shell) .mud-overlay-dark {
        background: rgba(2, 4, 10, 0.56) !important;
        backdrop-filter: blur(3px) saturate(0.92) !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.dayplan-edit-dialog-shell) {
        display: flex !important;
        flex-direction: column !important;
        width: min(880px, calc(100vw - 128px)) !important;
        max-width: min(880px, calc(100vw - 128px)) !important;
        height: auto !important;
        max-height: min(740px, calc(100dvh - 96px)) !important;
        min-height: 0 !important;
        border-radius: 22px !important;
        border: 1px solid rgba(150, 162, 210, 0.18) !important;
        background: linear-gradient(180deg, rgba(20, 24, 35, 0.99), rgba(9, 12, 19, 0.99)) !important;
        box-shadow: 0 30px 92px rgba(0, 0, 0, 0.46), inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
        overflow: hidden !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.dayplan-edit-dialog-shell) .mud-dialog-title {
        flex: 0 0 auto !important;
        min-height: 56px !important;
        padding: 16px 22px 14px !important;
        border-bottom: 1px solid rgba(150, 162, 210, 0.13) !important;
        background: linear-gradient(180deg, rgba(25, 29, 42, 0.98), rgba(16, 19, 29, 0.96)) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.dayplan-edit-dialog-shell) .mud-dialog-title .mud-typography {
        color: rgba(248, 246, 241, 0.96) !important;
        font-size: 1.08rem !important;
        font-weight: 790 !important;
        line-height: 1.12 !important;
        letter-spacing: -0.005em !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.dayplan-edit-dialog-shell) .mud-dialog-content {
        flex: 0 1 auto !important;
        min-height: 0 !important;
        max-height: calc(min(740px, calc(100dvh - 96px)) - 118px) !important;
        padding: 14px 20px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        scrollbar-width: thin !important;
        scrollbar-color: rgba(190, 200, 235, 0.34) transparent !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.dayplan-edit-dialog-shell) .mud-dialog-actions {
        position: sticky !important;
        bottom: 0 !important;
        z-index: 4 !important;
        flex: 0 0 auto !important;
        min-height: 62px !important;
        padding: 10px 22px 12px !important;
        justify-content: flex-end !important;
        gap: 10px !important;
        border-top: 1px solid rgba(150, 162, 210, 0.13) !important;
        background: linear-gradient(180deg, rgba(13, 16, 24, 0.96), rgba(7, 9, 15, 0.995)) !important;
        box-shadow: 0 -14px 32px rgba(0, 0, 0, 0.22) !important;
        backdrop-filter: none !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.dayplan-edit-dialog-shell) .mud-dialog-actions .mud-button-root {
        min-height: 42px !important;
        height: 42px !important;
        padding-inline: 19px !important;
        border-radius: 12px !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.dayplan-edit-dialog-shell) .dayplan-edit-dialog-shell {
        --app-control-h: 42px;
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.dayplan-edit-dialog-shell) .dayplan-edit-section-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px 12px !important;
        align-items: start !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.dayplan-edit-dialog-shell) .dayplan-edit-section-grid > .span-full {
        grid-column: 1 / -1 !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.dayplan-edit-dialog-shell) .dayplan-edit-section {
        margin: 0 !important;
        padding: 12px !important;
        border-radius: 15px !important;
        border: 1px solid rgba(150, 162, 210, 0.105) !important;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.019), rgba(255, 255, 255, 0.01)) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.022) !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.dayplan-edit-dialog-shell) .dayplan-edit-section + .dayplan-edit-section {
        margin-top: 0 !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.dayplan-edit-dialog-shell) .dayplan-edit-section .config-dialog-section-header {
        margin: 0 0 8px !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.dayplan-edit-dialog-shell) .dayplan-edit-section .config-dialog-section-kicker {
        margin: 0 !important;
        color: rgba(196, 205, 235, 0.76) !important;
        font-size: 0.64rem !important;
        font-weight: 820 !important;
        line-height: 1 !important;
        letter-spacing: 0.16em !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.dayplan-edit-dialog-shell) .dayplan-edit-timing-grid,
    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.dayplan-edit-dialog-shell) .dayplan-edit-primary-grid,
    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.dayplan-edit-dialog-shell) .dayplan-edit-assignment-grid,
    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.dayplan-edit-dialog-shell) .dayplan-edit-secondary-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px 12px !important;
        align-items: start !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.dayplan-edit-dialog-shell) .dayplan-edit-timing-grid {
        grid-template-columns: 1fr !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.dayplan-edit-dialog-shell) .dayplan-edit-primary-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.dayplan-edit-dialog-shell) .dayplan-edit-primary-grid > .span-full {
        grid-column: 1 / -1 !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.dayplan-edit-dialog-shell) .dayplan-edit-owner-status {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 8px !important;
        min-height: 30px !important;
        margin: 0 0 6px !important;
        padding: 5px 8px !important;
        border-radius: 12px !important;
        border: 1px solid rgba(150, 162, 210, 0.095) !important;
        background: rgba(255, 255, 255, 0.024) !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.dayplan-edit-dialog-shell) .dayplan-edit-owner-label,
    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.dayplan-edit-dialog-shell) .dayplan-edit-control-label {
        color: rgba(216, 224, 248, 0.72) !important;
        font-size: 0.61rem !important;
        font-weight: 820 !important;
        letter-spacing: 0.12em !important;
        line-height: 1 !important;
        text-transform: uppercase !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.dayplan-edit-dialog-shell) .dayplan-edit-owner-value {
        min-width: 0 !important;
        overflow: hidden !important;
        color: rgba(248, 246, 241, 0.9) !important;
        font-size: 0.86rem !important;
        font-weight: 720 !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.dayplan-edit-dialog-shell) .dayplan-edit-status-row {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
        margin: 0 0 6px !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.dayplan-edit-dialog-shell) .dayplan-edit-status-row .mud-input-control {
        min-width: 0 !important;
        min-height: 30px !important;
        height: 30px !important;
        padding: 3px 7px !important;
        border-radius: 12px !important;
        border: 1px solid rgba(150, 162, 210, 0.095) !important;
        background: rgba(255, 255, 255, 0.024) !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.dayplan-edit-dialog-shell) .dayplan-edit-status-row .mud-checkbox {
        padding: 0 !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.dayplan-edit-dialog-shell) .dayplan-edit-status-row .mud-checkbox .mud-button-root {
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
        padding: 0 !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.dayplan-edit-dialog-shell) .dayplan-edit-status-row .mud-checkbox .mud-typography {
        font-size: 0.76rem !important;
        line-height: 1.1 !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.dayplan-edit-dialog-shell) .dayplan-edit-control {
        display: grid !important;
        gap: 6px !important;
        min-width: 0 !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.dayplan-edit-dialog-shell) .dayplan-edit-control-shell {
        min-height: 42px !important;
        height: 42px !important;
        border-radius: 12px !important;
        background: rgba(255, 255, 255, 0.032) !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.dayplan-edit-dialog-shell) .dayplan-edit-native-input,
    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.dayplan-edit-dialog-shell) .dayplan-edit-time-select {
        min-height: 40px !important;
        height: 40px !important;
        line-height: 40px !important;
        font-size: 0.86rem !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.dayplan-edit-dialog-shell) .dayplan-edit-time-picker {
        height: 30px !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.dayplan-edit-dialog-shell) .dayplan-edit-time-select {
        height: 30px !important;
        min-height: 30px !important;
        line-height: 30px !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.dayplan-edit-dialog-shell) .dayplan-edit-time-clear {
        height: 30px !important;
        min-width: 68px !important;
        border-radius: 10px !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.dayplan-edit-dialog-shell) .dayplan-edit-date-picker,
    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.dayplan-edit-dialog-shell) .dayplan-edit-date-picker .mud-input-control,
    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.dayplan-edit-dialog-shell) .dayplan-edit-date-picker .mud-input-control-input-container {
        width: 100% !important;
        min-width: 0 !important;
        height: 42px !important;
        min-height: 42px !important;
        padding-top: 0 !important;
        margin: 0 !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.dayplan-edit-dialog-shell) .dayplan-edit-date-picker .mud-input.mud-input-outlined {
        min-height: 42px !important;
        height: 42px !important;
        max-height: 42px !important;
        border-radius: 12px !important;
        background: rgba(255, 255, 255, 0.032) !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.dayplan-edit-dialog-shell) .dayplan-edit-date-picker input.mud-input-slot,
    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.dayplan-edit-dialog-shell) .dayplan-edit-date-picker input.mud-input-root {
        min-height: 40px !important;
        height: 40px !important;
        line-height: 40px !important;
        padding-left: 13px !important;
        font-size: 0.86rem !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.dayplan-edit-dialog-shell) .dayplan-edit-date-picker .mud-input-adornment-end,
    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.dayplan-edit-dialog-shell) .dayplan-edit-date-picker .mud-picker-input-button {
        width: 40px !important;
        min-width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.dayplan-edit-dialog-shell) .dayplan-edit-dialog-shell .mud-input-control:has(.mud-input-label) {
        padding-top: 0 !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.dayplan-edit-dialog-shell) .dayplan-edit-dialog-shell .mud-input-control:has(.mud-input-label) > .mud-input-control-input-container {
        min-height: 50px !important;
        height: 50px !important;
        padding-top: 12px !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.dayplan-edit-dialog-shell) .dayplan-edit-dialog-shell .mud-input-label,
    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.dayplan-edit-dialog-shell) .dayplan-edit-dialog-shell .mud-input-label.mud-shrink,
    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.dayplan-edit-dialog-shell) .dayplan-edit-dialog-shell .mud-input-label.mud-input-label-animate {
        height: 12px !important;
        line-height: 12px !important;
        font-size: 0.61rem !important;
        letter-spacing: 0.12em !important;
        color: rgba(216, 224, 248, 0.72) !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.dayplan-edit-dialog-shell) .dayplan-edit-dialog-shell .mud-input.mud-input-outlined,
    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.dayplan-edit-dialog-shell) .dayplan-edit-dialog-shell .mud-input.mud-input-outlined.mud-select-input,
    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.dayplan-edit-dialog-shell) .dayplan-edit-dialog-shell .mud-field {
        min-height: 42px !important;
        height: 42px !important;
        max-height: 42px !important;
        border-radius: 12px !important;
        background: rgba(255, 255, 255, 0.032) !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.dayplan-edit-dialog-shell) .dayplan-edit-dialog-shell .mud-input-slot,
    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.dayplan-edit-dialog-shell) .dayplan-edit-dialog-shell .mud-select-input,
    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.dayplan-edit-dialog-shell) .dayplan-edit-dialog-shell input.mud-input-root {
        min-height: 42px !important;
        height: 42px !important;
        max-height: 42px !important;
        line-height: 42px !important;
        font-size: 0.88rem !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.dayplan-edit-dialog-shell) .dayplan-edit-primary-section .mud-input-control:has(textarea.mud-input-slot) {
        padding-top: 0 !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.dayplan-edit-dialog-shell) .dayplan-edit-primary-section .mud-input-control:has(textarea.mud-input-slot) > .mud-input-control-input-container {
        min-height: 74px !important;
        height: 74px !important;
        padding-top: 14px !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.dayplan-edit-dialog-shell) .dayplan-edit-primary-section .mud-input-control:has(textarea.mud-input-slot) .mud-input {
        min-height: 60px !important;
        height: auto !important;
        max-height: none !important;
        align-items: stretch !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.dayplan-edit-dialog-shell) .dayplan-edit-primary-section textarea.mud-input-slot,
    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.dayplan-edit-dialog-shell) .dayplan-edit-primary-section textarea.mud-input-root {
        min-height: 60px !important;
        height: auto !important;
        padding: 8px 12px !important;
        line-height: 1.35 !important;
        resize: vertical !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.dayplan-edit-dialog-shell) .dayplan-edit-secondary-section {
        padding: 0 !important;
        overflow: hidden !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.dayplan-edit-dialog-shell) .dayplan-edit-secondary-summary {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        min-height: 44px !important;
        padding: 0 12px !important;
        color: rgba(216, 224, 248, 0.78) !important;
        font-size: 0.8rem !important;
        font-weight: 760 !important;
        cursor: pointer !important;
        list-style: none !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.dayplan-edit-dialog-shell) .dayplan-edit-secondary-summary::-webkit-details-marker {
        display: none !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.dayplan-edit-dialog-shell) .dayplan-edit-secondary-section[open] .dayplan-edit-secondary-grid {
        padding: 0 12px 72px !important;
    }

    html body:has(.dayplan-edit-dialog-shell) .mud-popover.app-location-popover,
    html body:has(.dayplan-edit-dialog-shell) .mud-popover-open.app-location-popover {
        max-height: 160px !important;
        overflow-y: auto !important;
    }

    html body:has(.dayplan-edit-dialog-shell) .mud-popover-open.app-location-popover {
        transform: translateY(calc(-100% - 10px)) !important;
    }
}

@media (min-width: 769px) {
    html body:has(.mud-dialog:not(.mud-dialog-fullscreen)) .mud-popover.mud-picker-popover,
    html body:has(.mud-dialog:not(.mud-dialog-fullscreen)) .mud-popover-open.mud-picker-popover,
    html body:has(.mud-dialog:not(.mud-dialog-fullscreen)) .mud-popover:has(.mud-picker-container),
    html body:has(.mud-dialog:not(.mud-dialog-fullscreen)) .mud-popover-open:has(.mud-picker-container) {
        z-index: 2600 !important;
        max-width: min(344px, calc(100vw - 48px)) !important;
        max-height: none !important;
        overflow: visible !important;
    }

    html body:has(.mud-dialog:not(.mud-dialog-fullscreen)) .mud-picker-container,
    html body:has(.mud-dialog:not(.mud-dialog-fullscreen)) .mud-popover .mud-picker,
    html body:has(.mud-dialog:not(.mud-dialog-fullscreen)) .mud-popover-open .mud-picker {
        max-height: none !important;
        overflow: hidden !important;
        background: rgba(13, 16, 25, 0.99) !important;
    }

    html body:has(.event-edit-dialog-shell) {
        --omni-modal-date-picker-popover-max-height: 272px;
        --omni-modal-date-picker-inner-max-height: 270px;
    }

    html body:has(.event-edit-dialog-shell) .mud-popover-open.mud-picker-popover .mud-picker-toolbar,
    html body:has(.event-edit-dialog-shell) .mud-popover-open:has(.mud-picker-container) .mud-picker-toolbar {
        display: none !important;
    }

    html body:has(.maintenance-edit-dialog-shell) {
        --omni-modal-date-picker-popover-max-height: 314px;
        --omni-modal-date-picker-inner-max-height: 312px;
        --omni-maintenance-picker-trigger-width: 145px;
    }

    html body:has(.maintenance-edit-dialog-shell) .mud-popover-open.mud-picker-popover,
    html body:has(.maintenance-edit-dialog-shell) .mud-popover-open:has(.mud-picker-container) {
        transform: translateX(calc(var(--omni-maintenance-picker-trigger-width) - 344px)) !important;
    }

    html body:has(.maintenance-edit-dialog-shell) .mud-popover-open.mud-picker-popover .mud-picker-toolbar,
    html body:has(.maintenance-edit-dialog-shell) .mud-popover-open:has(.mud-picker-container) .mud-picker-toolbar {
        display: none !important;
    }

    html body:has(.maintenance-edit-dialog-shell) .mud-popover-open.mud-picker-popover .mud-picker-calendar-day,
    html body:has(.maintenance-edit-dialog-shell) .mud-popover-open:has(.mud-picker-container) .mud-picker-calendar-day {
        box-shadow: none !important;
    }

    html body:has(.maintenance-edit-dialog-shell) .mud-popover-open.mud-picker-popover .mud-picker-calendar-day.mud-selected,
    html body:has(.maintenance-edit-dialog-shell) .mud-popover-open:has(.mud-picker-container) .mud-picker-calendar-day.mud-selected {
        border: 1px solid rgba(198, 210, 255, 0.30) !important;
        background: rgba(142, 154, 216, 0.28) !important;
        color: rgba(248, 249, 255, 0.96) !important;
    }

    html body:has(.maintenance-edit-dialog-shell) .mud-popover-open.mud-picker-popover .mud-picker-calendar-day.mud-current:not(.mud-selected),
    html body:has(.maintenance-edit-dialog-shell) .mud-popover-open.mud-picker-popover .mud-picker-calendar-day-today:not(.mud-selected),
    html body:has(.maintenance-edit-dialog-shell) .mud-popover-open:has(.mud-picker-container) .mud-picker-calendar-day.mud-current:not(.mud-selected),
    html body:has(.maintenance-edit-dialog-shell) .mud-popover-open:has(.mud-picker-container) .mud-picker-calendar-day-today:not(.mud-selected) {
        border: 1px solid rgba(198, 210, 255, 0.22) !important;
        background: rgba(255, 255, 255, 0.035) !important;
        color: rgba(235, 239, 251, 0.92) !important;
    }
}

/*
 * Desktop Notepad repair.
 * Keeps Notes on the shared desktop system while restoring a real notebook
 * composition: header, compact command bar, then list/editor workspace.
 */
@media (min-width: 1024px) {
    html body .notes-page {
        --notes-rail-w: clamp(360px, 26vw, 430px);
        --notes-toolbar-h: 52px;
        width: min(100%, 1720px) !important;
        max-width: 1720px !important;
    }

    html body .notes-page .app-page-shell-header {
        margin-bottom: 16px !important;
        padding-bottom: 16px !important;
    }

    html body .notes-page .notes-workspace,
    html body .notes-page.notes-shell {
        display: grid !important;
        grid-template-columns: var(--notes-rail-w) minmax(0, 1fr) !important;
        grid-template-rows: auto minmax(610px, calc(100dvh - 224px)) !important;
        gap: 14px 18px !important;
        align-items: stretch !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
    }

    html body .notes-page .notes-command-bar {
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 10px !important;
        min-height: var(--notes-toolbar-h) !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 8px 10px !important;
        border: 1px solid rgba(199, 211, 255, 0.095) !important;
        border-radius: 16px !important;
        background: rgba(12, 15, 23, 0.72) !important;
        box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
        backdrop-filter: none !important;
    }

    html body .notes-page .notes-command-left {
        display: grid !important;
        grid-template-columns: minmax(240px, 300px) minmax(420px, 1fr) minmax(180px, 230px) !important;
        align-items: center !important;
        gap: 8px !important;
        min-width: 0 !important;
    }

    html body .notes-page .notes-command-select,
    html body .notes-page .notes-command-select .mud-input-control,
    html body .notes-page .notes-command-select .mud-input-control-input-container,
    html body .notes-page .notes-command-select .mud-input,
    html body .notes-page .notes-command-select .mud-select,
    html body .notes-page .notes-command-select .mud-field {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    html body .notes-page .notes-command-select .mud-input-control-input-container {
        min-height: 36px !important;
        height: 36px !important;
        padding-top: 0 !important;
    }

    html body .notes-page .notes-command-select .mud-input,
    html body .notes-page .notes-command-chip {
        min-height: 36px !important;
        height: 36px !important;
        max-height: 36px !important;
        border-radius: 11px !important;
        border: 1px solid rgba(199, 211, 255, 0.09) !important;
        background: rgba(255, 255, 255, 0.044) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.026) !important;
    }

    html body .notes-page .notes-command-select .mud-input-slot,
    html body .notes-page .notes-command-select .mud-select-input {
        min-height: 36px !important;
        height: 36px !important;
        max-height: 36px !important;
        line-height: 36px !important;
        padding: 12px 40px 2px 12px !important;
        color: rgba(238, 235, 229, 0.91) !important;
        font-size: 0.84rem !important;
        font-weight: 660 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    html body .notes-page .notes-command-select input.mud-input-slot.mud-select-input {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        color: rgba(238, 235, 229, 0.91) !important;
    }

    html body .notes-page .notes-command-select .mud-input-label,
    html body .notes-page .notes-command-select .mud-input-label.mud-shrink,
    html body .notes-page .notes-command-select .mud-input-label.mud-input-label-animate {
        transform: translate(12px, 4px) scale(1) !important;
        max-width: calc(100% - 46px) !important;
        color: rgba(196, 201, 214, 0.58) !important;
        font-size: 0.50rem !important;
        font-weight: 790 !important;
        letter-spacing: 0.11em !important;
        line-height: 1 !important;
        text-transform: uppercase !important;
    }

    html body .notes-page .notes-command-select .mud-input-adornment-end {
        width: 34px !important;
        min-width: 34px !important;
        max-width: 34px !important;
        border-left-color: rgba(255, 255, 255, 0.04) !important;
        background: transparent !important;
    }

    html body .notes-page .notes-command-chip {
        display: inline-flex !important;
        align-items: center !important;
        min-width: 0 !important;
        padding: 0 12px !important;
        color: rgba(216, 221, 236, 0.72) !important;
        font-size: 0.8rem !important;
        font-weight: 650 !important;
    }

    html body .notes-page .notes-command-right {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 6px !important;
        min-width: max-content !important;
        align-self: center !important;
    }

    html body .notes-page .notes-command-right .mud-icon-button,
    html body .notes-page .notes-command-icon-button.mud-icon-button {
        width: 34px !important;
        min-width: 34px !important;
        height: 34px !important;
        min-height: 34px !important;
        border-radius: 11px !important;
        color: rgba(222, 226, 240, 0.68) !important;
    }

    html body .notes-page .notes-list-pane {
        grid-column: 1 !important;
        grid-row: 2 !important;
        min-width: 0 !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        overflow: hidden !important;
    }

    html body .notes-page .notes-list-panel {
        display: grid !important;
        grid-template-rows: auto minmax(0, 1fr) !important;
        gap: 10px !important;
        min-height: 0 !important;
        height: 100% !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 14px !important;
        border: 1px solid rgba(199, 211, 255, 0.085) !important;
        border-radius: 18px !important;
        background: rgba(13, 16, 24, 0.70) !important;
        box-shadow: 0 18px 48px rgba(0, 0, 0, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.032) !important;
        overflow: hidden !important;
    }

    html body .notes-page .notes-list-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        min-height: 38px !important;
        padding: 0 0 10px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.055) !important;
    }

    html body .notes-page .notes-list-header span {
        display: block !important;
        color: rgba(196, 201, 214, 0.56) !important;
        font-size: 0.66rem !important;
        font-weight: 760 !important;
        letter-spacing: 0.11em !important;
        line-height: 1 !important;
        text-transform: uppercase !important;
    }

    html body .notes-page .notes-list-header strong {
        display: block !important;
        margin-top: 4px !important;
        color: rgba(238, 235, 229, 0.92) !important;
        font-size: 0.94rem !important;
        font-weight: 720 !important;
        line-height: 1.1 !important;
    }

    html body .notes-page .notes-list-add {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 7px !important;
        height: 34px !important;
        min-height: 34px !important;
        padding: 0 12px !important;
        border: 1px solid rgba(145, 160, 216, 0.18) !important;
        border-radius: 12px !important;
        background: rgba(145, 160, 216, 0.12) !important;
        color: rgba(238, 235, 229, 0.88) !important;
        font-size: 0.82rem !important;
        font-weight: 760 !important;
        line-height: 1 !important;
        cursor: pointer !important;
    }

    html body .notes-page .notes-list-add:disabled {
        opacity: 0.46 !important;
        cursor: default !important;
    }

    html body .notes-page .notes-list-items {
        display: grid !important;
        align-content: start !important;
        gap: 8px !important;
        min-height: 0 !important;
        overflow: auto !important;
        padding-right: 2px !important;
        scrollbar-width: thin !important;
        scrollbar-color: rgba(190, 200, 235, 0.28) transparent !important;
    }

    html body .notes-page .notes-list-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 5px !important;
        width: 100% !important;
        min-height: 86px !important;
        padding: 11px 12px !important;
        border: 1px solid rgba(255, 255, 255, 0.052) !important;
        border-radius: 14px !important;
        background: rgba(255, 255, 255, 0.026) !important;
        color: inherit !important;
        text-align: left !important;
        box-shadow: none !important;
    }

    html body .notes-page .notes-list-item > span {
        width: 100% !important;
        min-width: 0 !important;
        text-align: left !important;
    }

    html body .notes-page .notes-list-item:hover,
    html body .notes-page .notes-list-item.is-active,
    html body .notes-page .notes-list-item.active {
        border-color: rgba(145, 160, 216, 0.22) !important;
        background: rgba(145, 160, 216, 0.085) !important;
    }

    html body .notes-page .notes-list-item-top {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        min-width: 0 !important;
        text-align: left !important;
    }

    html body .notes-page .notes-list-item-top strong {
        display: block !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        overflow: hidden !important;
        color: rgba(238, 235, 229, 0.92) !important;
        font-size: 0.91rem !important;
        font-weight: 760 !important;
        line-height: 1.16 !important;
        text-align: left !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    html body .notes-page .notes-list-item-top .mud-icon-root {
        flex: 0 0 auto !important;
        margin-left: auto !important;
    }

    html body .notes-page .notes-list-preview {
        display: -webkit-box !important;
        width: 100% !important;
        min-width: 0 !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        color: rgba(216, 221, 236, 0.66) !important;
        font-size: 0.82rem !important;
        font-weight: 520 !important;
        line-height: 1.35 !important;
        text-align: left !important;
    }

    html body .notes-page .notes-list-meta {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        color: rgba(196, 201, 214, 0.44) !important;
        font-size: 0.69rem !important;
        font-weight: 680 !important;
        line-height: 1.1 !important;
        text-align: left !important;
    }

    html body .notes-page .notes-list-empty {
        display: grid !important;
        align-content: center !important;
        justify-items: start !important;
        gap: 10px !important;
        min-height: 120px !important;
        padding: 14px !important;
        border: 1px dashed rgba(199, 211, 255, 0.12) !important;
        border-radius: 14px !important;
        color: rgba(196, 201, 214, 0.62) !important;
    }

    html body .notes-page .notes-list-empty button {
        height: 34px !important;
        padding: 0 12px !important;
        border: 1px solid rgba(145, 160, 216, 0.16) !important;
        border-radius: 12px !important;
        background: rgba(145, 160, 216, 0.10) !important;
        color: rgba(238, 235, 229, 0.84) !important;
        font-size: 0.8rem !important;
        font-weight: 740 !important;
    }

    html body .notes-page .notes-editor-pane.notes-editor-canvas {
        grid-column: 2 !important;
        grid-row: 2 !important;
        display: grid !important;
        grid-template-rows: auto auto minmax(0, 1fr) auto !important;
        gap: 12px !important;
        min-height: 0 !important;
        height: 100% !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 18px 20px 0 !important;
        border: 1px solid rgba(199, 211, 255, 0.12) !important;
        border-radius: 20px !important;
        background: linear-gradient(180deg, rgba(17, 21, 31, 0.88), rgba(8, 11, 18, 0.94)) !important;
        box-shadow: 0 22px 58px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
        overflow: hidden !important;
    }

    html body .notes-page .notes-editor-toolbar {
        min-height: 42px !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    html body .notes-page .notes-title-input .mud-input,
    html body .notes-page .notes-title-input .mud-input-root,
    html body .notes-page .notes-title-input .mud-input-slot,
    html body .notes-page .notes-title-input input {
        min-height: 40px !important;
        height: 40px !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    html body .notes-page .notes-title-input input,
    html body .notes-page .notes-title-input .mud-input-slot input {
        color: rgba(238, 235, 229, 0.96) !important;
        font-size: 1.24rem !important;
        font-weight: 760 !important;
        letter-spacing: 0 !important;
    }

    html body .notes-page .notes-briefing-meta {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 7px 9px !important;
        margin: 0 !important;
        color: rgba(196, 201, 214, 0.54) !important;
        font-size: 0.73rem !important;
        font-weight: 650 !important;
    }

    html body .notes-page .notes-briefing-chip {
        height: 22px !important;
        padding: 0 8px !important;
        border: 1px solid rgba(255, 255, 255, 0.045) !important;
        border-radius: 999px !important;
        background: rgba(255, 255, 255, 0.048) !important;
        color: rgba(238, 235, 229, 0.78) !important;
        font-size: 0.70rem !important;
        font-weight: 730 !important;
    }

    html body .notes-page .notes-notepad {
        min-height: 0 !important;
        height: 100% !important;
        width: 100% !important;
        padding: 14px 16px !important;
        border: 1px solid rgba(199, 211, 255, 0.09) !important;
        border-radius: 16px !important;
        background: rgba(6, 8, 13, 0.36) !important;
        color: rgba(238, 235, 229, 0.91) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.024) !important;
        font-size: 0.94rem !important;
        line-height: 1.55 !important;
        resize: none !important;
    }

    html body .notes-page .notes-briefing-actions {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) max-content !important;
        align-items: center !important;
        gap: 14px !important;
        min-height: 58px !important;
        margin: 0 -20px !important;
        padding: 10px 20px 12px !important;
        border-top: 1px solid rgba(255, 255, 255, 0.055) !important;
        border-radius: 0 0 19px 19px !important;
        background: rgba(5, 7, 12, 0.34) !important;
    }

    html body .notes-page .notes-status {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 8px !important;
        min-width: 0 !important;
        color: rgba(196, 201, 214, 0.48) !important;
        font-size: 0.72rem !important;
        font-weight: 660 !important;
    }

    html body .notes-page .notes-action-row {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 8px !important;
        min-width: max-content !important;
    }

    html body .notes-page .notes-action-button.mud-button-root {
        height: 34px !important;
        min-height: 34px !important;
        min-width: 70px !important;
        padding: 0 13px !important;
        border-radius: 12px !important;
        font-size: 0.78rem !important;
        font-weight: 760 !important;
    }

    html body .notes-page .notes-editor-empty {
        min-height: 100% !important;
        padding: 24px !important;
        border: 1px dashed rgba(199, 211, 255, 0.12) !important;
        border-radius: 16px !important;
        background: rgba(255, 255, 255, 0.016) !important;
    }
}

@media (min-width: 1024px) and (max-width: 1320px) {
    html body .notes-page .notes-workspace,
    html body .notes-page.notes-shell {
        grid-template-columns: minmax(320px, 0.38fr) minmax(0, 1fr) !important;
    }

    html body .notes-page .notes-command-left {
        grid-template-columns: minmax(210px, 240px) minmax(280px, 1fr) minmax(160px, 200px) !important;
    }
}

/*
 * Profile add menu and overview alignment.
 * This is intentionally kept in the desktop foundation owner because the
 * global Mud popover layer cannot know which menu is the Profile create menu.
 */
@media (min-width: 1024px) {
    html body .mud-popover.profile-add-popover {
        width: min(232px, calc(100vw - 96px)) !important;
        min-width: 220px !important;
        max-width: 232px !important;
        max-height: min(360px, calc(100vh - 180px)) !important;
        margin-top: 8px !important;
        padding: 6px !important;
        border: 1px solid rgba(198, 210, 255, 0.16) !important;
        border-radius: 15px !important;
        background: linear-gradient(180deg, rgba(21, 25, 35, 0.98), rgba(10, 13, 20, 0.99)) !important;
        box-shadow: 0 26px 72px rgba(0, 0, 0, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.055) !important;
        overflow: auto !important;
    }

    html body .mud-popover.profile-add-popover .mud-list {
        display: grid !important;
        gap: 3px !important;
        padding: 0 !important;
        background: transparent !important;
    }

    html body .mud-popover.profile-add-popover .mud-menu-item,
    html body .mud-popover.profile-add-popover .mud-list-item,
    html body .mud-popover.profile-add-popover .mud-list-item-clickable,
    html body .mud-popover.profile-add-popover .mud-list-item-button {
        display: grid !important;
        grid-template-columns: 24px minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 10px !important;
        min-height: 40px !important;
        padding: 0 11px !important;
        border-radius: 11px !important;
        color: rgba(233, 236, 248, 0.88) !important;
        background: transparent !important;
        transition: background-color 120ms ease, color 120ms ease !important;
    }

    html body .mud-popover.profile-add-popover .mud-list-item-button {
        min-height: 40px !important;
    }

    html body .mud-popover.profile-add-popover .mud-menu-item:hover,
    html body .mud-popover.profile-add-popover .mud-list-item:hover,
    html body .mud-popover.profile-add-popover .mud-list-item-clickable:hover,
    html body .mud-popover.profile-add-popover .mud-list-item-button:hover {
        color: rgba(248, 248, 252, 0.96) !important;
        background: rgba(154, 166, 221, 0.12) !important;
    }

    html body .mud-popover.profile-add-popover .mud-menu-item-icon,
    html body .mud-popover.profile-add-popover .mud-list-item-icon {
        min-width: 24px !important;
        margin: 0 !important;
        color: rgba(190, 199, 232, 0.72) !important;
    }

    html body .mud-popover.profile-add-popover .mud-icon-root {
        width: 20px !important;
        height: 20px !important;
        font-size: 20px !important;
    }

    html body .mud-popover.profile-add-popover .mud-menu-item-text,
    html body .mud-popover.profile-add-popover .mud-list-item-text,
    html body .mud-popover.profile-add-popover .mud-typography {
        margin: 0 !important;
        color: inherit !important;
        font-size: 0.88rem !important;
        font-weight: 760 !important;
        letter-spacing: 0 !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
    }

    html body .household-profile-page .app-page-shell-header,
    html body .household-profile-page .profile-command-rail,
    html body .household-profile-page .profile-category-rail,
    html body .household-profile-page .profile-layout,
    html body .household-profile-page .profile-section {
        width: min(100%, 1500px) !important;
        max-width: 1500px !important;
        margin-inline: 0 !important;
    }

    html body .household-profile-page .profile-command-rail {
        grid-template-columns: minmax(420px, 1fr) 176px !important;
        align-items: center !important;
        gap: 12px !important;
    }

    html body .household-profile-page .profile-command-actions,
    html body .household-profile-page .profile-add-split {
        width: 176px !important;
    }

    html body .household-profile-page .profile-add-split {
        min-height: 48px !important;
        border-radius: 15px !important;
        border-color: rgba(207, 216, 255, 0.18) !important;
        background: rgba(14, 17, 26, 0.86) !important;
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    }

    html body .household-profile-page .profile-add-split .profile-add-main {
        width: 126px !important;
        min-width: 126px !important;
    }

    html body .household-profile-page .profile-add-split .profile-add-arrow,
    html body .household-profile-page .profile-add-split .profile-add-arrow .mud-menu-button-root {
        width: 50px !important;
        min-width: 50px !important;
    }

    html body .household-profile-page .profile-layout {
        grid-template-columns: minmax(0, 1fr) minmax(360px, 400px) !important;
        gap: 22px !important;
        align-items: start !important;
    }

    html body .household-profile-page .profile-overview-layout {
        grid-template-columns: minmax(0, 1fr) minmax(360px, 405px) !important;
        gap: 24px !important;
    }

    html body .household-profile-page .profile-overview-section {
        display: grid !important;
        gap: 12px !important;
    }

    html body .household-profile-page .profile-overview-section + .profile-overview-section {
        margin-top: 22px !important;
    }

    html body .household-profile-page .profile-attention-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

    html body .household-profile-page .profile-attention-card {
        display: grid !important;
        grid-template-columns: 44px minmax(0, 1fr) !important;
        gap: 13px !important;
        align-items: center !important;
        min-height: 118px !important;
        padding: 18px !important;
        border-radius: 18px !important;
        background:
            radial-gradient(circle at 18% 0%, rgba(128, 142, 218, 0.10), transparent 40%),
            linear-gradient(180deg, rgba(18, 22, 32, 0.86), rgba(8, 11, 17, 0.93)) !important;
    }

    html body .household-profile-page .profile-attention-card.is-clear {
        background:
            radial-gradient(circle at 18% 0%, rgba(119, 193, 151, 0.11), transparent 40%),
            linear-gradient(180deg, rgba(17, 24, 28, 0.84), rgba(8, 12, 16, 0.93)) !important;
    }

    html body .household-profile-page .profile-attention-card .mud-icon-root {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 44px !important;
        height: 44px !important;
        padding: 10px !important;
        border: 1px solid rgba(198, 210, 255, 0.10) !important;
        border-radius: 14px !important;
        color: rgba(182, 194, 237, 0.82) !important;
        background: rgba(255, 255, 255, 0.035) !important;
    }

    html body .household-profile-page .profile-attention-card.is-clear .mud-icon-root {
        color: rgba(151, 210, 176, 0.78) !important;
        border-color: rgba(151, 210, 176, 0.14) !important;
        background: rgba(151, 210, 176, 0.055) !important;
    }

    html body .household-profile-page .profile-attention-card strong {
        color: rgba(247, 247, 252, 0.96) !important;
        font-size: 1.32rem !important;
        font-weight: 880 !important;
        line-height: 1 !important;
    }

    html body .household-profile-page .profile-attention-card span {
        max-width: 230px !important;
        margin-top: 7px !important;
        color: rgba(190, 197, 219, 0.72) !important;
        font-size: 0.84rem !important;
        line-height: 1.32 !important;
    }

    html body .household-profile-page .profile-memory-card {
        min-height: 156px !important;
        padding: 18px !important;
    }

    html body .household-profile-page .profile-overview-pinned .profile-inline-empty,
    html body .household-profile-page .profile-overview-recent .profile-inline-empty {
        min-height: 76px !important;
        padding: 17px 18px !important;
        border-radius: 18px !important;
        background:
            linear-gradient(180deg, rgba(18, 22, 31, 0.78), rgba(8, 11, 17, 0.90)) !important;
    }

    html body .household-profile-page .profile-overview-recent .profile-card-grid,
    html body .household-profile-page .profile-overview-pinned .profile-card-grid {
        grid-template-columns: 1fr !important;
    }

    html body .household-profile-page .profile-overview-recent .profile-memory-card,
    html body .household-profile-page .profile-overview-pinned .profile-memory-card {
        min-height: 148px !important;
        border-radius: 18px !important;
        background:
            linear-gradient(180deg, rgba(18, 22, 32, 0.84), rgba(8, 11, 17, 0.93)) !important;
    }

    html body .household-profile-page .profile-panel {
        padding: 20px !important;
        border-radius: 18px !important;
    }

    html body .household-profile-page .profile-side-column .profile-panel {
        position: sticky !important;
        top: 98px !important;
        min-height: 360px !important;
        padding: 24px !important;
        border-color: rgba(198, 210, 255, 0.13) !important;
        background:
            radial-gradient(circle at 22% 0%, rgba(130, 143, 214, 0.12), transparent 42%),
            linear-gradient(180deg, rgba(19, 23, 33, 0.88), rgba(8, 11, 17, 0.94)) !important;
    }

    html body .household-profile-page .profile-panel-kicker {
        color: rgba(181, 191, 229, 0.78) !important;
        font-size: 0.72rem !important;
        letter-spacing: 0.18em !important;
    }

    html body .household-profile-page .profile-panel h3 {
        margin-top: 14px !important;
        font-size: 1.22rem !important;
        line-height: 1.16 !important;
    }

    html body .household-profile-page .profile-panel p {
        max-width: 330px !important;
        color: rgba(198, 204, 226, 0.74) !important;
        font-size: 0.92rem !important;
        line-height: 1.52 !important;
    }

    html body .household-profile-page .profile-mini-list {
        gap: 8px !important;
    }

    html body .household-profile-page .profile-mini-list span {
        min-height: 38px !important;
        padding: 10px 12px !important;
    }

    html body .household-profile-page .profile-travel-section .profile-section-heading {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) max-content !important;
        align-items: end !important;
        gap: 18px !important;
        margin-bottom: 13px !important;
    }

    html body .household-profile-page .profile-travel-section .profile-secondary-command.mud-button-root {
        min-width: 138px !important;
        height: 40px !important;
        min-height: 40px !important;
        border-color: rgba(198, 210, 255, 0.15) !important;
        background: rgba(255, 255, 255, 0.035) !important;
    }

    html body .household-profile-page .profile-travel-list {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    html body .household-profile-page .profile-travel-card {
        display: grid !important;
        grid-template-columns: 46px minmax(270px, 0.9fr) minmax(320px, 1.08fr) minmax(240px, 0.72fr) max-content !important;
        align-items: center !important;
        gap: 16px !important;
        min-height: 116px !important;
        padding: 16px 16px 16px 18px !important;
        border-radius: 17px !important;
        border-color: rgba(198, 210, 255, 0.115) !important;
        background:
            radial-gradient(circle at 3% 0%, rgba(138, 151, 222, 0.09), transparent 34%),
            linear-gradient(180deg, rgba(19, 23, 33, 0.82), rgba(8, 11, 17, 0.91)) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
    }

    html body .household-profile-page .profile-travel-card:hover,
    html body .household-profile-page .profile-travel-card:focus-visible {
        border-color: rgba(198, 210, 255, 0.20) !important;
        background:
            radial-gradient(circle at 3% 0%, rgba(150, 163, 236, 0.12), transparent 36%),
            linear-gradient(180deg, rgba(24, 28, 39, 0.90), rgba(10, 13, 20, 0.94)) !important;
        box-shadow: 0 16px 36px rgba(0, 0, 0, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    }

    html body .household-profile-page .profile-travel-crest {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 46px !important;
        height: 46px !important;
        border: 1px solid rgba(198, 210, 255, 0.12) !important;
        border-radius: 15px !important;
        color: rgba(184, 195, 237, 0.84) !important;
        background: rgba(255, 255, 255, 0.04) !important;
    }

    html body .household-profile-page .profile-travel-crest .mud-icon-root {
        font-size: 1.22rem !important;
    }

    html body .household-profile-page .profile-travel-identity,
    html body .household-profile-page .profile-travel-readiness,
    html body .household-profile-page .profile-travel-accounts {
        min-width: 0 !important;
    }

    html body .household-profile-page .profile-travel-identity {
        display: grid !important;
        gap: 4px !important;
    }

    html body .household-profile-page .profile-travel-card .profile-card-kicker {
        color: rgba(177, 187, 228, 0.82) !important;
        font-size: 0.70rem !important;
        font-weight: 850 !important;
        letter-spacing: 0.17em !important;
        line-height: 1.1 !important;
    }

    html body .household-profile-page .profile-travel-card h3 {
        margin: 0 !important;
        color: rgba(247, 247, 252, 0.96) !important;
        font-size: 1.16rem !important;
        font-weight: 860 !important;
        line-height: 1.12 !important;
        letter-spacing: 0 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    html body .household-profile-page .profile-travel-card p {
        margin: 0 !important;
        color: rgba(190, 197, 219, 0.72) !important;
        font-size: 0.88rem !important;
        line-height: 1.25 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    html body .household-profile-page .profile-travel-meta {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 7px !important;
        margin-top: 3px !important;
    }

    html body .household-profile-page .profile-travel-meta > span {
        display: inline-flex !important;
        align-items: center !important;
        min-height: 24px !important;
        max-width: min(100%, 220px) !important;
        padding: 0 9px !important;
        border: 1px solid rgba(198, 210, 255, 0.06) !important;
        border-radius: 999px !important;
        color: rgba(211, 217, 235, 0.72) !important;
        background: rgba(4, 7, 12, 0.22) !important;
        font-size: 0.74rem !important;
        font-weight: 740 !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    html body .household-profile-page .profile-travel-readiness,
    html body .household-profile-page .profile-travel-accounts {
        display: grid !important;
        gap: 8px !important;
        padding-left: 16px !important;
        border-left: 1px solid rgba(198, 210, 255, 0.075) !important;
    }

    html body .household-profile-page .profile-travel-label {
        color: rgba(166, 176, 210, 0.66) !important;
        font-size: 0.66rem !important;
        font-weight: 850 !important;
        letter-spacing: 0.16em !important;
        line-height: 1 !important;
        text-transform: uppercase !important;
    }

    html body .household-profile-page .profile-travel-chip-row {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 7px !important;
        min-width: 0 !important;
    }

    html body .household-profile-page .profile-travel-card .profile-pill {
        min-height: 25px !important;
        max-width: min(100%, 260px) !important;
        padding-inline: 9px !important;
        border-color: rgba(198, 210, 255, 0.075) !important;
        color: rgba(211, 217, 235, 0.74) !important;
        background: rgba(4, 7, 12, 0.22) !important;
        font-size: 0.76rem !important;
        font-weight: 760 !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    html body .household-profile-page .profile-travel-card .profile-travel-positive {
        border-color: rgba(151, 210, 176, 0.15) !important;
        color: rgba(183, 226, 200, 0.82) !important;
        background: rgba(151, 210, 176, 0.06) !important;
    }

    html body .household-profile-page .profile-travel-card .profile-travel-warning {
        border-color: rgba(228, 194, 128, 0.16) !important;
        color: rgba(233, 207, 159, 0.84) !important;
        background: rgba(228, 194, 128, 0.06) !important;
    }

    html body .household-profile-page .profile-travel-empty {
        display: inline-flex !important;
        align-items: center !important;
        min-height: 25px !important;
        width: fit-content !important;
        max-width: 100% !important;
        padding: 0 9px !important;
        border: 1px solid rgba(198, 210, 255, 0.055) !important;
        border-radius: 999px !important;
        color: rgba(174, 181, 205, 0.58) !important;
        background: rgba(4, 7, 12, 0.18) !important;
        font-size: 0.76rem !important;
        font-weight: 730 !important;
        line-height: 1 !important;
    }

    html body .household-profile-page .profile-travel-actions {
        justify-self: end !important;
        align-self: center !important;
        min-width: 40px !important;
    }

    html body .household-profile-page .profile-travel-card .profile-menu .mud-button-root,
    html body .household-profile-page .profile-travel-card .profile-menu .mud-icon-button {
        width: 38px !important;
        height: 38px !important;
        border-radius: 12px !important;
        border: 1px solid rgba(198, 210, 255, 0.095) !important;
        background: rgba(255, 255, 255, 0.035) !important;
    }

    html body .household-profile-page .profile-travel-note {
        grid-column: 2 / -1 !important;
        margin-top: 0 !important;
        padding-top: 11px !important;
        border-top: 1px solid rgba(198, 210, 255, 0.065) !important;
    }

    html body .household-profile-page .profile-vendors-section .profile-section-heading {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) max-content !important;
        align-items: end !important;
        gap: 18px !important;
        margin-bottom: 13px !important;
    }

    html body .household-profile-page .profile-vendors-section .profile-secondary-command.mud-button-root {
        min-width: 126px !important;
        height: 40px !important;
        min-height: 40px !important;
        border-color: rgba(198, 210, 255, 0.15) !important;
        background: rgba(255, 255, 255, 0.035) !important;
    }

    html body .household-profile-page .profile-vendor-board {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    html body .household-profile-page .profile-vendor-group {
        display: grid !important;
        gap: 9px !important;
        margin: 0 !important;
    }

    html body .household-profile-page .profile-vendor-group-title {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 14px !important;
        min-height: 24px !important;
        margin: 0 !important;
        padding-inline: 2px !important;
    }

    html body .household-profile-page .profile-vendor-group-title span {
        color: rgba(184, 193, 231, 0.82) !important;
        font-size: 0.72rem !important;
        font-weight: 850 !important;
        letter-spacing: 0.18em !important;
        line-height: 1 !important;
        text-transform: uppercase !important;
    }

    html body .household-profile-page .profile-vendor-group-title small {
        color: rgba(174, 181, 205, 0.56) !important;
        font-size: 0.76rem !important;
        font-weight: 740 !important;
        line-height: 1 !important;
    }

    html body .household-profile-page .profile-vendor-list {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    html body .household-profile-page .profile-vendor-card {
        display: grid !important;
        grid-template-columns: 46px minmax(250px, 0.82fr) minmax(260px, 0.78fr) minmax(360px, 1fr) max-content !important;
        align-items: center !important;
        gap: 16px !important;
        min-height: 116px !important;
        padding: 16px 16px 16px 18px !important;
        border-radius: 17px !important;
        border-color: rgba(198, 210, 255, 0.115) !important;
        background:
            radial-gradient(circle at 3% 0%, rgba(138, 151, 222, 0.09), transparent 34%),
            linear-gradient(180deg, rgba(19, 23, 33, 0.82), rgba(8, 11, 17, 0.91)) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
    }

    html body .household-profile-page .profile-vendor-card:hover,
    html body .household-profile-page .profile-vendor-card:focus-visible {
        border-color: rgba(198, 210, 255, 0.20) !important;
        background:
            radial-gradient(circle at 3% 0%, rgba(150, 163, 236, 0.12), transparent 36%),
            linear-gradient(180deg, rgba(24, 28, 39, 0.90), rgba(10, 13, 20, 0.94)) !important;
        box-shadow: 0 16px 36px rgba(0, 0, 0, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    }

    html body .household-profile-page .profile-vendor-crest {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 46px !important;
        height: 46px !important;
        border: 1px solid rgba(198, 210, 255, 0.12) !important;
        border-radius: 15px !important;
        color: rgba(184, 195, 237, 0.84) !important;
        background: rgba(255, 255, 255, 0.04) !important;
    }

    html body .household-profile-page .profile-vendor-crest .mud-icon-root {
        font-size: 1.2rem !important;
    }

    html body .household-profile-page .profile-vendor-primary,
    html body .household-profile-page .profile-vendor-contact,
    html body .household-profile-page .profile-vendor-notes {
        min-width: 0 !important;
    }

    html body .household-profile-page .profile-vendor-primary {
        display: grid !important;
        gap: 4px !important;
    }

    html body .household-profile-page .profile-vendor-card .profile-card-kicker {
        color: rgba(177, 187, 228, 0.82) !important;
        font-size: 0.70rem !important;
        font-weight: 850 !important;
        letter-spacing: 0.17em !important;
        line-height: 1.1 !important;
    }

    html body .household-profile-page .profile-vendor-card h3 {
        margin: 0 !important;
        color: rgba(247, 247, 252, 0.96) !important;
        font-size: 1.14rem !important;
        font-weight: 860 !important;
        line-height: 1.12 !important;
        letter-spacing: 0 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    html body .household-profile-page .profile-vendor-card p {
        margin: 0 !important;
        color: rgba(190, 197, 219, 0.72) !important;
        font-size: 0.86rem !important;
        line-height: 1.34 !important;
    }

    html body .household-profile-page .profile-vendor-primary > p,
    html body .household-profile-page .profile-vendor-notes > p {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    html body .household-profile-page .profile-vendor-primary > p {
        white-space: nowrap !important;
    }

    html body .household-profile-page .profile-vendor-notes > p {
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
    }

    html body .household-profile-page .profile-vendor-contact,
    html body .household-profile-page .profile-vendor-notes {
        display: grid !important;
        gap: 7px !important;
        padding-left: 16px !important;
        border-left: 1px solid rgba(198, 210, 255, 0.075) !important;
    }

    html body .household-profile-page .profile-vendor-label {
        color: rgba(166, 176, 210, 0.66) !important;
        font-size: 0.66rem !important;
        font-weight: 850 !important;
        letter-spacing: 0.16em !important;
        line-height: 1 !important;
        text-transform: uppercase !important;
    }

    html body .household-profile-page .profile-vendor-contact strong {
        margin: 0 !important;
        color: rgba(241, 243, 250, 0.90) !important;
        font-size: 0.92rem !important;
        font-weight: 820 !important;
        line-height: 1.14 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    html body .household-profile-page .profile-vendor-contact .profile-vendor-warning {
        color: rgba(233, 207, 159, 0.84) !important;
    }

    html body .household-profile-page .profile-vendor-contact-methods,
    html body .household-profile-page .profile-vendor-chip-row {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 7px !important;
        min-width: 0 !important;
    }

    html body .household-profile-page .profile-vendor-contact-methods > span,
    html body .household-profile-page .profile-vendor-card .profile-pill {
        display: inline-flex !important;
        align-items: center !important;
        min-height: 25px !important;
        max-width: min(100%, 260px) !important;
        padding: 0 9px !important;
        border: 1px solid rgba(198, 210, 255, 0.065) !important;
        border-radius: 999px !important;
        color: rgba(211, 217, 235, 0.74) !important;
        background: rgba(4, 7, 12, 0.22) !important;
        font-size: 0.76rem !important;
        font-weight: 740 !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    html body .household-profile-page .profile-vendor-card .profile-vendor-primary-pill {
        border-color: rgba(151, 210, 176, 0.15) !important;
        color: rgba(183, 226, 200, 0.82) !important;
        background: rgba(151, 210, 176, 0.06) !important;
    }

    html body .household-profile-page .profile-vendor-actions {
        justify-self: end !important;
        align-self: center !important;
        min-width: 40px !important;
    }

    html body .household-profile-page .profile-vendor-card .profile-menu .mud-button-root,
    html body .household-profile-page .profile-vendor-card .profile-menu .mud-icon-button {
        width: 38px !important;
        height: 38px !important;
        border-radius: 12px !important;
        border: 1px solid rgba(198, 210, 255, 0.095) !important;
        background: rgba(255, 255, 255, 0.035) !important;
    }

    html body .household-profile-page .profile-vendors-section .profile-vendor-empty {
        max-width: 100% !important;
        min-height: 92px !important;
        padding: 18px !important;
        border-radius: 17px !important;
    }

    html body .household-profile-page .profile-accounts-section .profile-section-heading {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) max-content !important;
        align-items: end !important;
        gap: 18px !important;
        margin-bottom: 13px !important;
    }

    html body .household-profile-page .profile-accounts-section .profile-secondary-command.mud-button-root {
        min-width: 132px !important;
        height: 40px !important;
        min-height: 40px !important;
        border-color: rgba(198, 210, 255, 0.15) !important;
        background: rgba(255, 255, 255, 0.035) !important;
    }

    html body .household-profile-page .profile-account-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    html body .household-profile-page .profile-account-card {
        display: grid !important;
        grid-template-columns: minmax(260px, 0.9fr) minmax(320px, 1.15fr) max-content !important;
        align-items: center !important;
        gap: 18px !important;
        min-height: 104px !important;
        padding: 16px 16px 16px 18px !important;
        border-radius: 17px !important;
        border-color: rgba(198, 210, 255, 0.115) !important;
        background:
            linear-gradient(180deg, rgba(19, 23, 33, 0.82), rgba(8, 11, 17, 0.91)) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
    }

    html body .household-profile-page .profile-account-card:hover,
    html body .household-profile-page .profile-account-card:focus-visible {
        border-color: rgba(198, 210, 255, 0.20) !important;
        background:
            linear-gradient(180deg, rgba(24, 28, 39, 0.90), rgba(10, 13, 20, 0.94)) !important;
        box-shadow: 0 16px 36px rgba(0, 0, 0, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    }

    html body .household-profile-page .profile-account-primary,
    html body .household-profile-page .profile-account-status {
        min-width: 0 !important;
    }

    html body .household-profile-page .profile-account-primary {
        display: grid !important;
        gap: 4px !important;
    }

    html body .household-profile-page .profile-account-card .profile-card-kicker {
        color: rgba(177, 187, 228, 0.82) !important;
        font-size: 0.70rem !important;
        font-weight: 850 !important;
        letter-spacing: 0.17em !important;
        line-height: 1.1 !important;
    }

    html body .household-profile-page .profile-account-card h3 {
        margin: 0 !important;
        color: rgba(247, 247, 252, 0.96) !important;
        font-size: 1.13rem !important;
        font-weight: 850 !important;
        line-height: 1.12 !important;
        letter-spacing: 0 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    html body .household-profile-page .profile-account-card p {
        margin: 0 !important;
        color: rgba(190, 197, 219, 0.72) !important;
        font-size: 0.88rem !important;
        line-height: 1.25 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    html body .household-profile-page .profile-account-status {
        display: grid !important;
        gap: 7px !important;
        padding-left: 18px !important;
        border-left: 1px solid rgba(198, 210, 255, 0.075) !important;
    }

    html body .household-profile-page .profile-account-status-label {
        color: rgba(166, 176, 210, 0.66) !important;
        font-size: 0.66rem !important;
        font-weight: 850 !important;
        letter-spacing: 0.16em !important;
        line-height: 1 !important;
        text-transform: uppercase !important;
    }

    html body .household-profile-page .profile-account-meta {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 7px !important;
        margin: 0 !important;
        min-width: 0 !important;
    }

    html body .household-profile-page .profile-account-meta > span:not(.profile-pill) {
        display: inline-flex !important;
        align-items: center !important;
        max-width: min(100%, 270px) !important;
        min-height: 25px !important;
        padding: 0 9px !important;
        border: 1px solid rgba(198, 210, 255, 0.06) !important;
        border-radius: 999px !important;
        color: rgba(211, 217, 235, 0.74) !important;
        background: rgba(4, 7, 12, 0.22) !important;
        font-size: 0.76rem !important;
        font-weight: 740 !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    html body .household-profile-page .profile-account-tier {
        min-height: 25px !important;
        border-color: rgba(160, 174, 232, 0.16) !important;
        color: rgba(229, 233, 249, 0.86) !important;
        background: rgba(120, 134, 197, 0.12) !important;
    }

    html body .household-profile-page .profile-account-actions {
        justify-self: end !important;
        align-self: center !important;
        min-width: 40px !important;
    }

    html body .household-profile-page .profile-account-card .profile-menu .mud-button-root,
    html body .household-profile-page .profile-account-card .profile-menu .mud-icon-button {
        width: 38px !important;
        height: 38px !important;
        border-radius: 12px !important;
        border: 1px solid rgba(198, 210, 255, 0.095) !important;
        background: rgba(255, 255, 255, 0.035) !important;
    }

    html body .household-profile-page .profile-account-card .profile-card-note {
        grid-column: 1 / -1 !important;
        margin-top: 0 !important;
        padding-top: 11px !important;
        border-top: 1px solid rgba(198, 210, 255, 0.065) !important;
    }

    html body .household-profile-page .profile-notes-section .profile-section-heading {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) max-content !important;
        align-items: end !important;
        gap: 18px !important;
        margin-bottom: 14px !important;
    }

    html body .household-profile-page .profile-notes-section .profile-primary-command.mud-button-root {
        min-width: 152px !important;
        height: 40px !important;
        min-height: 40px !important;
        border-color: rgba(198, 210, 255, 0.22) !important;
        background: linear-gradient(180deg, rgba(166, 176, 236, 0.96), rgba(130, 142, 207, 0.92)) !important;
        box-shadow: 0 14px 32px rgba(98, 109, 180, 0.18) !important;
    }

    html body .household-profile-page .profile-note-board {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    html body .household-profile-page .profile-note-group {
        display: grid !important;
        gap: 9px !important;
    }

    html body .household-profile-page .profile-note-group-heading {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 14px !important;
        min-height: 24px !important;
        padding-inline: 2px !important;
    }

    html body .household-profile-page .profile-note-group-heading span {
        color: rgba(184, 193, 231, 0.82) !important;
        font-size: 0.72rem !important;
        font-weight: 850 !important;
        letter-spacing: 0.18em !important;
        line-height: 1 !important;
        text-transform: uppercase !important;
    }

    html body .household-profile-page .profile-note-group-heading small {
        color: rgba(174, 181, 205, 0.56) !important;
        font-size: 0.76rem !important;
        font-weight: 740 !important;
        line-height: 1 !important;
    }

    html body .household-profile-page .profile-note-list {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    html body .household-profile-page .profile-note-row {
        display: grid !important;
        grid-template-columns: 42px minmax(280px, 0.85fr) minmax(360px, 1.25fr) max-content !important;
        align-items: center !important;
        gap: 16px !important;
        min-height: 104px !important;
        padding: 14px 16px !important;
        border-radius: 17px !important;
        border-color: rgba(198, 210, 255, 0.115) !important;
        background:
            linear-gradient(180deg, rgba(19, 23, 33, 0.82), rgba(8, 11, 17, 0.91)) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
    }

    html body .household-profile-page .profile-note-row-pinned {
        border-color: rgba(186, 198, 255, 0.18) !important;
        background:
            radial-gradient(circle at 7% 0%, rgba(142, 154, 226, 0.12), transparent 38%),
            linear-gradient(180deg, rgba(21, 25, 36, 0.86), rgba(8, 11, 17, 0.93)) !important;
    }

    html body .household-profile-page .profile-note-row:hover,
    html body .household-profile-page .profile-note-row:focus-visible {
        border-color: rgba(198, 210, 255, 0.20) !important;
        background:
            linear-gradient(180deg, rgba(24, 28, 39, 0.90), rgba(10, 13, 20, 0.94)) !important;
        box-shadow: 0 16px 36px rgba(0, 0, 0, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    }

    html body .household-profile-page .profile-note-empty-row {
        min-height: 104px !important;
    }

    html body .household-profile-page .profile-note-icon {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 42px !important;
        height: 42px !important;
        border: 1px solid rgba(198, 210, 255, 0.10) !important;
        border-radius: 14px !important;
        color: rgba(183, 194, 236, 0.82) !important;
        background: rgba(255, 255, 255, 0.035) !important;
    }

    html body .household-profile-page .profile-note-icon .mud-icon-root {
        font-size: 1.18rem !important;
    }

    html body .household-profile-page .profile-note-primary,
    html body .household-profile-page .profile-note-content {
        min-width: 0 !important;
    }

    html body .household-profile-page .profile-note-primary {
        display: grid !important;
        gap: 4px !important;
    }

    html body .household-profile-page .profile-note-row .profile-card-kicker {
        color: rgba(177, 187, 228, 0.82) !important;
        font-size: 0.70rem !important;
        font-weight: 850 !important;
        letter-spacing: 0.17em !important;
        line-height: 1.1 !important;
    }

    html body .household-profile-page .profile-note-row h3 {
        margin: 0 !important;
        color: rgba(247, 247, 252, 0.96) !important;
        font-size: 1.08rem !important;
        font-weight: 850 !important;
        line-height: 1.14 !important;
        letter-spacing: 0 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    html body .household-profile-page .profile-note-row p {
        margin: 0 !important;
        color: rgba(190, 197, 219, 0.70) !important;
        font-size: 0.84rem !important;
        line-height: 1.35 !important;
    }

    html body .household-profile-page .profile-note-primary > p {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    html body .household-profile-page .profile-note-content {
        display: grid !important;
        gap: 8px !important;
        padding-left: 16px !important;
        border-left: 1px solid rgba(198, 210, 255, 0.075) !important;
    }

    html body .household-profile-page .profile-note-content > p {
        display: -webkit-box !important;
        max-width: 680px !important;
        overflow: hidden !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
    }

    html body .household-profile-page .profile-note-meta {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 7px !important;
    }

    html body .household-profile-page .profile-note-meta > span,
    html body .household-profile-page .profile-note-content > span {
        display: inline-flex !important;
        align-items: center !important;
        max-width: min(100%, 260px) !important;
        min-height: 25px !important;
        padding: 0 9px !important;
        border: 1px solid rgba(198, 210, 255, 0.06) !important;
        border-radius: 999px !important;
        color: rgba(211, 217, 235, 0.74) !important;
        background: rgba(4, 7, 12, 0.22) !important;
        font-size: 0.76rem !important;
        font-weight: 740 !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    html body .household-profile-page .profile-note-actions {
        justify-self: end !important;
        align-self: center !important;
        min-width: 40px !important;
    }

    html body .household-profile-page .profile-note-row .profile-menu .mud-button-root,
    html body .household-profile-page .profile-note-row .profile-menu .mud-icon-button {
        width: 38px !important;
        height: 38px !important;
        border-radius: 12px !important;
        border: 1px solid rgba(198, 210, 255, 0.095) !important;
        background: rgba(255, 255, 255, 0.035) !important;
    }

    html body .household-profile-page .profile-documents-section .profile-section-heading {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) max-content !important;
        align-items: end !important;
        gap: 18px !important;
        margin-bottom: 13px !important;
    }

    html body .household-profile-page .profile-documents-section .profile-secondary-command.mud-button-root {
        min-width: 176px !important;
        height: 40px !important;
        min-height: 40px !important;
        border-color: rgba(198, 210, 255, 0.15) !important;
        background: rgba(255, 255, 255, 0.035) !important;
    }

    html body .household-profile-page .profile-documents-section .profile-document-foundation {
        display: grid !important;
        grid-template-columns: 38px minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 14px !important;
        min-height: 78px !important;
        margin-bottom: 12px !important;
        padding: 14px 16px !important;
        border-radius: 17px !important;
        border-color: rgba(198, 210, 255, 0.105) !important;
        background:
            linear-gradient(180deg, rgba(18, 22, 31, 0.76), rgba(9, 12, 18, 0.88)) !important;
    }

    html body .household-profile-page .profile-documents-section .profile-document-foundation .mud-icon-root {
        width: 38px !important;
        height: 38px !important;
        padding: 9px !important;
        border: 1px solid rgba(198, 210, 255, 0.10) !important;
        border-radius: 13px !important;
        color: rgba(183, 194, 236, 0.80) !important;
        background: rgba(255, 255, 255, 0.035) !important;
    }

    html body .household-profile-page .profile-documents-section .profile-document-foundation span {
        color: rgba(246, 247, 252, 0.94) !important;
        font-size: 0.96rem !important;
        font-weight: 830 !important;
        line-height: 1.16 !important;
    }

    html body .household-profile-page .profile-documents-section .profile-document-foundation p {
        max-width: 920px !important;
        margin-top: 5px !important;
        color: rgba(190, 197, 219, 0.68) !important;
        font-size: 0.84rem !important;
        line-height: 1.35 !important;
    }

    html body .household-profile-page .profile-document-list {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    html body .household-profile-page .profile-document-row {
        display: grid !important;
        grid-template-columns: 42px minmax(260px, 0.95fr) minmax(300px, 1.25fr) max-content !important;
        align-items: center !important;
        gap: 16px !important;
        min-height: 92px !important;
        padding: 14px 16px !important;
        border-radius: 17px !important;
        border-color: rgba(198, 210, 255, 0.115) !important;
        background:
            linear-gradient(180deg, rgba(19, 23, 33, 0.82), rgba(8, 11, 17, 0.91)) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
    }

    html body .household-profile-page .profile-document-row:hover,
    html body .household-profile-page .profile-document-row:focus-visible {
        border-color: rgba(198, 210, 255, 0.20) !important;
        background:
            linear-gradient(180deg, rgba(24, 28, 39, 0.90), rgba(10, 13, 20, 0.94)) !important;
        box-shadow: 0 16px 36px rgba(0, 0, 0, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    }

    html body .household-profile-page .profile-document-empty-row {
        min-height: 104px !important;
    }

    html body .household-profile-page .profile-document-icon {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 42px !important;
        height: 42px !important;
        border: 1px solid rgba(198, 210, 255, 0.10) !important;
        border-radius: 14px !important;
        color: rgba(183, 194, 236, 0.82) !important;
        background: rgba(255, 255, 255, 0.035) !important;
    }

    html body .household-profile-page .profile-document-icon .mud-icon-root {
        font-size: 1.18rem !important;
    }

    html body .household-profile-page .profile-document-primary,
    html body .household-profile-page .profile-document-meta {
        min-width: 0 !important;
    }

    html body .household-profile-page .profile-document-primary {
        display: grid !important;
        gap: 4px !important;
    }

    html body .household-profile-page .profile-document-row .profile-card-kicker {
        color: rgba(177, 187, 228, 0.82) !important;
        font-size: 0.70rem !important;
        font-weight: 850 !important;
        letter-spacing: 0.17em !important;
        line-height: 1.1 !important;
    }

    html body .household-profile-page .profile-document-row h3 {
        margin: 0 !important;
        color: rgba(247, 247, 252, 0.96) !important;
        font-size: 1.08rem !important;
        font-weight: 850 !important;
        line-height: 1.14 !important;
        letter-spacing: 0 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    html body .household-profile-page .profile-document-row p {
        margin: 0 !important;
        color: rgba(190, 197, 219, 0.70) !important;
        font-size: 0.84rem !important;
        line-height: 1.3 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    html body .household-profile-page .profile-document-meta {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 7px !important;
        padding-left: 16px !important;
        border-left: 1px solid rgba(198, 210, 255, 0.075) !important;
    }

    html body .household-profile-page .profile-document-meta > span {
        display: inline-flex !important;
        align-items: center !important;
        max-width: min(100%, 260px) !important;
        min-height: 25px !important;
        padding: 0 9px !important;
        border: 1px solid rgba(198, 210, 255, 0.06) !important;
        border-radius: 999px !important;
        color: rgba(211, 217, 235, 0.74) !important;
        background: rgba(4, 7, 12, 0.22) !important;
        font-size: 0.76rem !important;
        font-weight: 740 !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    html body .household-profile-page .profile-document-actions {
        justify-self: end !important;
        align-self: center !important;
        min-width: 40px !important;
    }

    html body .household-profile-page .profile-document-actions > .mud-icon-root {
        color: rgba(182, 190, 219, 0.62) !important;
        font-size: 1.22rem !important;
    }

    html body .household-profile-page .profile-document-row .profile-menu .mud-button-root,
    html body .household-profile-page .profile-document-row .profile-menu .mud-icon-button {
        width: 38px !important;
        height: 38px !important;
        border-radius: 12px !important;
        border: 1px solid rgba(198, 210, 255, 0.095) !important;
        background: rgba(255, 255, 255, 0.035) !important;
    }
}

/*
 * Schedule toolbar date picker.
 * Mud's generic picker positioning is intentionally broad; this scoped layer
 * keeps the Schedule page picker anchored to the toolbar date field without
 * changing modal date pickers.
 */
@media (min-width: 769px) {
    html body:has(.ios-calendar-page):not(:has(.mud-dialog)) .mud-popover.mud-picker-popover,
    html body:has(.ios-calendar-page):not(:has(.mud-dialog)) .mud-popover-open.mud-picker-popover,
    html body:has(.ios-calendar-page):not(:has(.mud-dialog)) .mud-popover:has(.mud-picker-container),
    html body:has(.ios-calendar-page):not(:has(.mud-dialog)) .mud-popover-open:has(.mud-picker-container) {
        z-index: 2600 !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: min(336px, calc(100vw - 96px)) !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        overflow: visible !important;
    }

    html body:has(.ios-calendar-page):not(:has(.mud-dialog)) .mud-picker-container,
    html body:has(.ios-calendar-page):not(:has(.mud-dialog)) .mud-popover.mud-picker-popover .mud-picker,
    html body:has(.ios-calendar-page):not(:has(.mud-dialog)) .mud-popover-open.mud-picker-popover .mud-picker,
    html body:has(.ios-calendar-page):not(:has(.mud-dialog)) .mud-popover:has(.mud-picker-container) .mud-picker,
    html body:has(.ios-calendar-page):not(:has(.mud-dialog)) .mud-popover-open:has(.mud-picker-container) .mud-picker {
        width: 336px !important;
        max-width: min(336px, calc(100vw - 96px)) !important;
        border: 1px solid rgba(198, 210, 255, 0.17) !important;
        border-radius: 16px !important;
        background: linear-gradient(180deg, rgba(20, 24, 35, 0.995), rgba(8, 11, 18, 0.995)) !important;
        box-shadow: 0 24px 72px rgba(0, 0, 0, 0.54), inset 0 1px 0 rgba(255, 255, 255, 0.055) !important;
        overflow: hidden !important;
    }

    html body:has(.ios-calendar-page):not(:has(.mud-dialog)) .mud-popover.mud-picker-popover .mud-picker-content,
    html body:has(.ios-calendar-page):not(:has(.mud-dialog)) .mud-popover-open.mud-picker-popover .mud-picker-content,
    html body:has(.ios-calendar-page):not(:has(.mud-dialog)) .mud-popover.mud-picker-popover .mud-picker-calendar-content,
    html body:has(.ios-calendar-page):not(:has(.mud-dialog)) .mud-popover-open.mud-picker-popover .mud-picker-calendar-content {
        padding: 10px 12px 12px !important;
        background: transparent !important;
    }

    html body:has(.ios-calendar-page):not(:has(.mud-dialog)) .mud-picker-calendar-header {
        min-height: 36px !important;
        padding: 0 2px 6px !important;
    }

    html body:has(.ios-calendar-page):not(:has(.mud-dialog)) .mud-picker-calendar-header .mud-button-root {
        color: rgba(230, 233, 244, 0.86) !important;
        font-size: 0.84rem !important;
        font-weight: 760 !important;
        letter-spacing: 0 !important;
    }

    html body:has(.ios-calendar-page):not(:has(.mud-dialog)) .mud-picker-calendar-day {
        width: 32px !important;
        min-width: 32px !important;
        height: 32px !important;
        min-height: 32px !important;
        margin: 1px !important;
        border-radius: 10px !important;
        color: rgba(225, 229, 241, 0.78) !important;
        font-size: 0.78rem !important;
        font-weight: 680 !important;
    }

    html body:has(.ios-calendar-page):not(:has(.mud-dialog)) .mud-picker-calendar-day:hover {
        background: rgba(145, 161, 223, 0.16) !important;
        color: rgba(246, 247, 252, 0.96) !important;
    }

    html body:has(.ios-calendar-page):not(:has(.mud-dialog)) .mud-picker-calendar-day.mud-selected,
    html body:has(.ios-calendar-page):not(:has(.mud-dialog)) .mud-picker-calendar-day.mud-picker-calendar-day-selected {
        background: linear-gradient(180deg, rgba(159, 171, 230, 0.92), rgba(103, 116, 178, 0.92)) !important;
        color: rgba(7, 9, 15, 0.94) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32) !important;
    }

    html body:has(.ios-calendar-page):not(:has(.mud-dialog)) .mud-picker-calendar-day.mud-current:not(.mud-selected),
    html body:has(.ios-calendar-page):not(:has(.mud-dialog)) .mud-picker-calendar-day-today:not(.mud-selected) {
        border: 1px solid rgba(159, 171, 230, 0.38) !important;
        color: rgba(238, 241, 252, 0.92) !important;
        background: rgba(159, 171, 230, 0.06) !important;
    }
}

/*
 * Schedule toolbar person selector.
 * Keep the schedule user dropdown attached to the toolbar trigger while using
 * the same restrained overlay language as the rest of the desktop app.
 */
@media (min-width: 769px) {
    html body .ios-calendar-page .ios-calendar-toolbar.schedule-control-surface .ios-calendar-viewing-row,
    html body .ios-calendar-page .ios-calendar-toolbar.schedule-control-surface .ios-calendar-user-picker,
    html body .ios-calendar-page .ios-calendar-toolbar.schedule-control-surface .ios-calendar-user-picker .mud-input-control,
    html body .ios-calendar-page .ios-calendar-toolbar.schedule-control-surface .ios-calendar-user-picker .mud-input-control-input-container,
    html body .ios-calendar-page .ios-calendar-toolbar.schedule-control-surface .ios-calendar-user-picker .mud-input {
        width: 297px !important;
        min-width: 297px !important;
        max-width: 297px !important;
        flex: 0 0 297px !important;
    }

    html body:has(.ios-calendar-page):not(:has(.mud-dialog)) .mud-popover.mud-popover-relative-width:has(.mud-list),
    html body:has(.ios-calendar-page):not(:has(.mud-dialog)) .mud-popover-open.mud-popover-relative-width:has(.mud-list),
    html body .mud-popover.schedule-person-popover,
    html body .mud-popover-open.schedule-person-popover {
        z-index: 2600 !important;
        width: 297px !important;
        min-width: 297px !important;
        max-width: min(297px, calc(100vw - 96px)) !important;
        box-sizing: border-box !important;
        padding: 6px !important;
        border: 1px solid rgba(198, 210, 255, 0.16) !important;
        border-radius: 14px !important;
        background: linear-gradient(180deg, rgba(20, 24, 35, 0.995), rgba(8, 11, 18, 0.995)) !important;
        box-shadow: 0 24px 72px rgba(0, 0, 0, 0.54), inset 0 1px 0 rgba(255, 255, 255, 0.055) !important;
        overflow: hidden !important;
    }

    html body:has(.ios-calendar-page):not(:has(.mud-dialog)) .mud-popover.mud-popover-relative-width:has(.mud-list) .mud-list,
    html body:has(.ios-calendar-page):not(:has(.mud-dialog)) .mud-popover-open.mud-popover-relative-width:has(.mud-list) .mud-list,
    html body .mud-popover.schedule-person-popover .mud-list,
    html body .mud-popover-open.schedule-person-popover .mud-list {
        display: grid !important;
        gap: 2px !important;
        max-height: min(260px, calc(100dvh - 160px)) !important;
        padding: 0 !important;
        background: transparent !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
    }

    html body:has(.ios-calendar-page):not(:has(.mud-dialog)) .mud-popover.mud-popover-relative-width:has(.mud-list) .mud-list-item,
    html body:has(.ios-calendar-page):not(:has(.mud-dialog)) .mud-popover-open.mud-popover-relative-width:has(.mud-list) .mud-list-item,
    html body:has(.ios-calendar-page):not(:has(.mud-dialog)) .mud-popover.mud-popover-relative-width:has(.mud-list) .mud-list-item-clickable,
    html body:has(.ios-calendar-page):not(:has(.mud-dialog)) .mud-popover-open.mud-popover-relative-width:has(.mud-list) .mud-list-item-clickable,
    html body:has(.ios-calendar-page):not(:has(.mud-dialog)) .mud-popover.mud-popover-relative-width:has(.mud-list) .mud-list-item-button,
    html body:has(.ios-calendar-page):not(:has(.mud-dialog)) .mud-popover-open.mud-popover-relative-width:has(.mud-list) .mud-list-item-button,
    html body .mud-popover.schedule-person-popover .mud-list-item,
    html body .mud-popover-open.schedule-person-popover .mud-list-item,
    html body .mud-popover.schedule-person-popover .mud-list-item-clickable,
    html body .mud-popover-open.schedule-person-popover .mud-list-item-clickable,
    html body .mud-popover.schedule-person-popover .mud-list-item-button,
    html body .mud-popover-open.schedule-person-popover .mud-list-item-button {
        min-height: 40px !important;
        padding: 0 11px !important;
        border-radius: 10px !important;
        color: rgba(233, 236, 248, 0.88) !important;
        background: transparent !important;
        font-size: 0.88rem !important;
        font-weight: 680 !important;
        line-height: 1.2 !important;
        letter-spacing: 0 !important;
        transition: background-color 120ms ease, color 120ms ease !important;
    }

    html body:has(.ios-calendar-page):not(:has(.mud-dialog)) .mud-popover.mud-popover-relative-width:has(.mud-list) .mud-list-item:hover,
    html body:has(.ios-calendar-page):not(:has(.mud-dialog)) .mud-popover-open.mud-popover-relative-width:has(.mud-list) .mud-list-item:hover,
    html body:has(.ios-calendar-page):not(:has(.mud-dialog)) .mud-popover.mud-popover-relative-width:has(.mud-list) .mud-list-item-clickable:hover,
    html body:has(.ios-calendar-page):not(:has(.mud-dialog)) .mud-popover-open.mud-popover-relative-width:has(.mud-list) .mud-list-item-clickable:hover,
    html body:has(.ios-calendar-page):not(:has(.mud-dialog)) .mud-popover.mud-popover-relative-width:has(.mud-list) .mud-list-item-button:hover,
    html body:has(.ios-calendar-page):not(:has(.mud-dialog)) .mud-popover-open.mud-popover-relative-width:has(.mud-list) .mud-list-item-button:hover,
    html body .mud-popover.schedule-person-popover .mud-list-item:hover,
    html body .mud-popover-open.schedule-person-popover .mud-list-item:hover,
    html body .mud-popover.schedule-person-popover .mud-list-item-clickable:hover,
    html body .mud-popover-open.schedule-person-popover .mud-list-item-clickable:hover,
    html body .mud-popover.schedule-person-popover .mud-list-item-button:hover,
    html body .mud-popover-open.schedule-person-popover .mud-list-item-button:hover {
        color: rgba(248, 248, 252, 0.96) !important;
        background: rgba(154, 166, 221, 0.12) !important;
    }

    html body:has(.ios-calendar-page):not(:has(.mud-dialog)) .mud-popover.mud-popover-relative-width:has(.mud-list) .mud-list-item.mud-selected-item,
    html body:has(.ios-calendar-page):not(:has(.mud-dialog)) .mud-popover-open.mud-popover-relative-width:has(.mud-list) .mud-list-item.mud-selected-item,
    html body:has(.ios-calendar-page):not(:has(.mud-dialog)) .mud-popover.mud-popover-relative-width:has(.mud-list) .mud-list-item.mud-list-item-selected,
    html body:has(.ios-calendar-page):not(:has(.mud-dialog)) .mud-popover-open.mud-popover-relative-width:has(.mud-list) .mud-list-item.mud-list-item-selected,
    html body:has(.ios-calendar-page):not(:has(.mud-dialog)) .mud-popover.mud-popover-relative-width:has(.mud-list) .mud-list-item[aria-selected="true"],
    html body:has(.ios-calendar-page):not(:has(.mud-dialog)) .mud-popover-open.mud-popover-relative-width:has(.mud-list) .mud-list-item[aria-selected="true"],
    html body .mud-popover.schedule-person-popover .mud-list-item.mud-selected-item,
    html body .mud-popover-open.schedule-person-popover .mud-list-item.mud-selected-item,
    html body .mud-popover.schedule-person-popover .mud-list-item.mud-list-item-selected,
    html body .mud-popover-open.schedule-person-popover .mud-list-item.mud-list-item-selected,
    html body .mud-popover.schedule-person-popover .mud-list-item[aria-selected="true"],
    html body .mud-popover-open.schedule-person-popover .mud-list-item[aria-selected="true"] {
        color: rgba(248, 248, 252, 0.98) !important;
        background: rgba(150, 164, 224, 0.17) !important;
    }

    html body:has(.ios-calendar-page):not(:has(.mud-dialog)) .mud-popover.mud-popover-relative-width:has(.mud-list) .mud-list-item-text,
    html body:has(.ios-calendar-page):not(:has(.mud-dialog)) .mud-popover-open.mud-popover-relative-width:has(.mud-list) .mud-list-item-text,
    html body:has(.ios-calendar-page):not(:has(.mud-dialog)) .mud-popover.mud-popover-relative-width:has(.mud-list) .mud-typography,
    html body:has(.ios-calendar-page):not(:has(.mud-dialog)) .mud-popover-open.mud-popover-relative-width:has(.mud-list) .mud-typography,
    html body .mud-popover.schedule-person-popover .mud-list-item-text,
    html body .mud-popover-open.schedule-person-popover .mud-list-item-text,
    html body .mud-popover.schedule-person-popover .mud-typography,
    html body .mud-popover-open.schedule-person-popover .mud-typography {
        margin: 0 !important;
        color: inherit !important;
        font: inherit !important;
        line-height: inherit !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
}

/*
 * Settings timezone selector.
 * The timezone list is long enough to need containment, but it should still
 * feel attached to the field and calm inside the Settings overview.
 */
@media (min-width: 769px) {
    html body .settings-page .settings-timezone-actions {
        display: grid !important;
        grid-template-columns: minmax(0, 360px) max-content !important;
        align-items: end !important;
        gap: 10px !important;
    }

    html body .settings-page .settings-timezone-select,
    html body .settings-page .settings-timezone-select .mud-input-control,
    html body .settings-page .settings-timezone-select .mud-input-control-input-container,
    html body .settings-page .settings-timezone-select .mud-input {
        width: 360px !important;
        min-width: 0 !important;
        max-width: 360px !important;
    }

    html body:has(.settings-timezone-select):not(:has(.mud-dialog)) .mud-popover.settings-timezone-popover,
    html body:has(.settings-timezone-select):not(:has(.mud-dialog)) .mud-popover-open.settings-timezone-popover,
    html body:has(.settings-timezone-select):not(:has(.mud-dialog)) .mud-popover.mud-popover-relative-width:has(.mud-list),
    html body:has(.settings-timezone-select):not(:has(.mud-dialog)) .mud-popover-open.mud-popover-relative-width:has(.mud-list) {
        z-index: 2600 !important;
        width: 360px !important;
        min-width: 0 !important;
        max-width: min(360px, calc(100vw - 96px)) !important;
        box-sizing: border-box !important;
        padding: 6px !important;
        border: 1px solid rgba(198, 210, 255, 0.16) !important;
        border-radius: 14px !important;
        background: linear-gradient(180deg, rgba(20, 24, 35, 0.995), rgba(8, 11, 18, 0.995)) !important;
        box-shadow: 0 24px 72px rgba(0, 0, 0, 0.52), inset 0 1px 0 rgba(255, 255, 255, 0.055) !important;
        overflow: hidden !important;
    }

    html body:has(.settings-timezone-select):not(:has(.mud-dialog)) .mud-popover.settings-timezone-popover .mud-list,
    html body:has(.settings-timezone-select):not(:has(.mud-dialog)) .mud-popover-open.settings-timezone-popover .mud-list,
    html body:has(.settings-timezone-select):not(:has(.mud-dialog)) .mud-popover.mud-popover-relative-width:has(.mud-list) .mud-list,
    html body:has(.settings-timezone-select):not(:has(.mud-dialog)) .mud-popover-open.mud-popover-relative-width:has(.mud-list) .mud-list {
        display: grid !important;
        gap: 2px !important;
        max-height: min(280px, calc(100dvh - 180px)) !important;
        padding: 0 !important;
        background: transparent !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
        scrollbar-width: thin !important;
        scrollbar-color: rgba(185, 194, 230, 0.34) transparent !important;
    }

    html body:has(.settings-timezone-select):not(:has(.mud-dialog)) .mud-popover.settings-timezone-popover .mud-list-item,
    html body:has(.settings-timezone-select):not(:has(.mud-dialog)) .mud-popover-open.settings-timezone-popover .mud-list-item,
    html body:has(.settings-timezone-select):not(:has(.mud-dialog)) .mud-popover.mud-popover-relative-width:has(.mud-list) .mud-list-item,
    html body:has(.settings-timezone-select):not(:has(.mud-dialog)) .mud-popover-open.mud-popover-relative-width:has(.mud-list) .mud-list-item {
        min-height: 36px !important;
        padding: 0 11px !important;
        border-radius: 10px !important;
        color: rgba(233, 236, 248, 0.88) !important;
        background: transparent !important;
        font-size: 0.86rem !important;
        font-weight: 660 !important;
        line-height: 1.2 !important;
        letter-spacing: 0 !important;
        transition: background-color 120ms ease, color 120ms ease !important;
    }

    html body:has(.settings-timezone-select):not(:has(.mud-dialog)) .mud-popover.settings-timezone-popover .mud-list-item:hover,
    html body:has(.settings-timezone-select):not(:has(.mud-dialog)) .mud-popover-open.settings-timezone-popover .mud-list-item:hover,
    html body:has(.settings-timezone-select):not(:has(.mud-dialog)) .mud-popover.mud-popover-relative-width:has(.mud-list) .mud-list-item:hover,
    html body:has(.settings-timezone-select):not(:has(.mud-dialog)) .mud-popover-open.mud-popover-relative-width:has(.mud-list) .mud-list-item:hover {
        color: rgba(248, 248, 252, 0.96) !important;
        background: rgba(154, 166, 221, 0.12) !important;
    }

    html body:has(.settings-timezone-select):not(:has(.mud-dialog)) .mud-popover.settings-timezone-popover .mud-list-item.mud-selected-item,
    html body:has(.settings-timezone-select):not(:has(.mud-dialog)) .mud-popover-open.settings-timezone-popover .mud-list-item.mud-selected-item,
    html body:has(.settings-timezone-select):not(:has(.mud-dialog)) .mud-popover.settings-timezone-popover .mud-list-item.mud-list-item-selected,
    html body:has(.settings-timezone-select):not(:has(.mud-dialog)) .mud-popover-open.settings-timezone-popover .mud-list-item.mud-list-item-selected,
    html body:has(.settings-timezone-select):not(:has(.mud-dialog)) .mud-popover.settings-timezone-popover .mud-list-item[aria-selected="true"],
    html body:has(.settings-timezone-select):not(:has(.mud-dialog)) .mud-popover-open.settings-timezone-popover .mud-list-item[aria-selected="true"],
    html body:has(.settings-timezone-select):not(:has(.mud-dialog)) .mud-popover.mud-popover-relative-width:has(.mud-list) .mud-list-item.mud-selected-item,
    html body:has(.settings-timezone-select):not(:has(.mud-dialog)) .mud-popover-open.mud-popover-relative-width:has(.mud-list) .mud-list-item.mud-selected-item,
    html body:has(.settings-timezone-select):not(:has(.mud-dialog)) .mud-popover.mud-popover-relative-width:has(.mud-list) .mud-list-item.mud-list-item-selected,
    html body:has(.settings-timezone-select):not(:has(.mud-dialog)) .mud-popover-open.mud-popover-relative-width:has(.mud-list) .mud-list-item.mud-list-item-selected,
    html body:has(.settings-timezone-select):not(:has(.mud-dialog)) .mud-popover.mud-popover-relative-width:has(.mud-list) .mud-list-item[aria-selected="true"],
    html body:has(.settings-timezone-select):not(:has(.mud-dialog)) .mud-popover-open.mud-popover-relative-width:has(.mud-list) .mud-list-item[aria-selected="true"] {
        color: rgba(248, 248, 252, 0.98) !important;
        background: rgba(150, 164, 224, 0.17) !important;
    }

    html body:has(.settings-timezone-select):not(:has(.mud-dialog)) .mud-popover.settings-timezone-popover .mud-list-item-text,
    html body:has(.settings-timezone-select):not(:has(.mud-dialog)) .mud-popover-open.settings-timezone-popover .mud-list-item-text,
    html body:has(.settings-timezone-select):not(:has(.mud-dialog)) .mud-popover.settings-timezone-popover .mud-typography,
    html body:has(.settings-timezone-select):not(:has(.mud-dialog)) .mud-popover-open.settings-timezone-popover .mud-typography,
    html body:has(.settings-timezone-select):not(:has(.mud-dialog)) .mud-popover.mud-popover-relative-width:has(.mud-list) .mud-list-item-text,
    html body:has(.settings-timezone-select):not(:has(.mud-dialog)) .mud-popover-open.mud-popover-relative-width:has(.mud-list) .mud-list-item-text,
    html body:has(.settings-timezone-select):not(:has(.mud-dialog)) .mud-popover.mud-popover-relative-width:has(.mud-list) .mud-typography,
    html body:has(.settings-timezone-select):not(:has(.mud-dialog)) .mud-popover-open.mud-popover-relative-width:has(.mud-list) .mud-typography {
        margin: 0 !important;
        color: inherit !important;
        font: inherit !important;
        line-height: inherit !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
}

/*
 * Preferences desktop composition.
 * Keep account preferences in the shared settings system while using the
 * available desktop width instead of a long narrow form column.
 */
@media (min-width: 1024px) {
    html body .app-content-canvas > .preferences-page,
    html body .preferences-page {
        width: min(100%, 1640px) !important;
        max-width: 1640px !important;
    }

    html body .preferences-page .app-page-header {
        margin-bottom: 22px !important;
    }

    html body .preferences-page .app-page-eyebrow {
        margin-bottom: 8px !important;
        color: rgba(174, 183, 216, 0.84) !important;
        font-size: 0.82rem !important;
        font-weight: 800 !important;
        letter-spacing: 0.17em !important;
    }

    html body .preferences-page .app-page-title {
        margin: 0 !important;
        color: rgba(247, 247, 251, 0.96) !important;
        font-size: clamp(2rem, 1.55vw, 2.35rem) !important;
        line-height: 1.05 !important;
        letter-spacing: 0 !important;
    }

    html body .preferences-page .app-page-context {
        max-width: 760px !important;
        margin-top: 10px !important;
        color: rgba(196, 202, 222, 0.76) !important;
        font-size: 0.98rem !important;
        line-height: 1.55 !important;
    }

    html body .preferences-card {
        width: 100% !important;
        max-width: none !important;
        padding: 18px !important;
        border: 1px solid rgba(198, 210, 255, 0.105) !important;
        border-radius: 22px !important;
        background:
            linear-gradient(180deg, rgba(19, 22, 32, 0.74), rgba(10, 13, 20, 0.70)) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
    }

    html body .preferences-card > form {
        display: grid !important;
        grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr) !important;
        gap: 14px !important;
        align-items: start !important;
    }

    html body .preferences-card > form > .config-dialog-section {
        min-width: 0 !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 16px !important;
        border: 1px solid rgba(198, 210, 255, 0.09) !important;
        border-radius: 18px !important;
        background: rgba(255, 255, 255, 0.018) !important;
        box-shadow: none !important;
    }

    html body .preferences-card > form > .config-dialog-section:nth-of-type(3),
    html body .preferences-card > form > .config-dialog-section:nth-of-type(4),
    html body .preferences-card > form > .config-dialog-section:nth-of-type(5),
    html body .preferences-card > form > .preferences-actions {
        grid-column: 1 / -1 !important;
    }

    html body .preferences-card > form > .config-dialog-section:nth-of-type(5) {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(180px, 240px) !important;
        column-gap: 18px !important;
        align-items: end !important;
    }

    html body .preferences-card .config-dialog-section-header {
        display: grid !important;
        gap: 5px !important;
        margin: 0 0 13px !important;
    }

    html body .preferences-card .config-dialog-section-title {
        color: rgba(239, 241, 250, 0.92) !important;
        font-size: 0.8rem !important;
        font-weight: 850 !important;
        letter-spacing: 0.16em !important;
        line-height: 1.2 !important;
        text-transform: uppercase !important;
    }

    html body .preferences-card .config-dialog-section-copy {
        max-width: 720px !important;
        color: rgba(184, 191, 214, 0.68) !important;
        font-size: 0.9rem !important;
        line-height: 1.45 !important;
    }

    html body .preferences-page .preferences-form-grid {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)) !important;
        gap: 12px !important;
        align-items: end !important;
    }

    html body .preferences-page .mud-input-control {
        margin: 0 !important;
        min-width: 0 !important;
    }

    html body .preferences-page .mud-input-control-input-container,
    html body .preferences-page .mud-input,
    html body .preferences-page .mud-select .mud-input {
        min-height: 46px !important;
    }

    html body .preferences-page .mud-input-slot {
        min-height: 44px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        align-items: center !important;
    }

    html body .preferences-page .mud-input-adornment {
        height: 44px !important;
        min-height: 44px !important;
        align-self: center !important;
        align-items: center !important;
    }

    html body .preferences-page .preferences-calendar-policy {
        margin: 0 0 13px !important;
        padding: 10px 12px !important;
        border-color: rgba(150, 164, 224, 0.16) !important;
        border-radius: 14px !important;
        background: rgba(112, 127, 191, 0.075) !important;
        color: rgba(207, 214, 239, 0.82) !important;
        font-size: 0.9rem !important;
        line-height: 1.42 !important;
    }

    html body .preferences-page .preferences-calendar-policy .mud-icon-root {
        color: rgba(182, 193, 246, 0.78) !important;
        font-size: 1.1rem !important;
    }

    html body .preferences-page .preferences-calendar-grid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 13px !important;
        align-items: stretch !important;
    }

    html body .preferences-page .preferences-calendar-card {
        min-width: 0 !important;
        height: 100% !important;
        padding: 14px !important;
        border: 1px solid rgba(198, 210, 255, 0.085) !important;
        border-radius: 16px !important;
        background: rgba(5, 8, 14, 0.18) !important;
        gap: 12px !important;
    }

    html body .preferences-page .preferences-calendar-card-top {
        align-items: flex-start !important;
        gap: 10px !important;
    }

    html body .preferences-page .preferences-calendar-provider {
        color: rgba(246, 247, 252, 0.94) !important;
        font-size: 1rem !important;
        font-weight: 820 !important;
        line-height: 1.15 !important;
    }

    html body .preferences-page .preferences-calendar-copy,
    html body .preferences-page .preferences-calendar-meta,
    html body .preferences-page .preferences-calendar-invite-copy {
        color: rgba(188, 196, 220, 0.70) !important;
        font-size: 0.86rem !important;
        line-height: 1.42 !important;
    }

    html body .preferences-page .preferences-calendar-meta {
        gap: 6px !important;
    }

    html body .preferences-page .preferences-calendar-meta strong {
        color: rgba(237, 240, 250, 0.88) !important;
        font-weight: 780 !important;
    }

    html body .preferences-page .preferences-calendar-invite-settings {
        gap: 10px !important;
        padding: 11px !important;
        border-color: rgba(198, 210, 255, 0.065) !important;
        border-radius: 14px !important;
        background: rgba(0, 0, 0, 0.11) !important;
    }

    html body .preferences-page .preferences-calendar-invite-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    html body .preferences-page .preferences-calendar-actions {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }

    html body .preferences-page .preferences-calendar-actions .mud-button-root,
    html body .preferences-page .preferences-calendar-invite-settings > .mud-button-root,
    html body .preferences-page .config-dialog-section > .mud-button-root {
        min-height: 36px !important;
        height: 36px !important;
        border-radius: 11px !important;
        padding-inline: 13px !important;
        font-size: 0.82rem !important;
        font-weight: 800 !important;
        letter-spacing: 0 !important;
    }

    html body .preferences-card > form > .config-dialog-section:nth-of-type(5) > .mud-button-root {
        width: 100% !important;
    }

    html body .preferences-page .preferences-toggle-stack {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    html body .preferences-page .preferences-toggle-stack > label.mud-switch {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        min-width: 0 !important;
        min-height: 42px !important;
        padding: 7px 9px !important;
        border: 1px solid rgba(198, 210, 255, 0.075) !important;
        border-radius: 13px !important;
        background: rgba(0, 0, 0, 0.10) !important;
    }

    html body .preferences-page .preferences-toggle-stack > label.mud-switch > .mud-switch-span {
        flex: 0 0 44px !important;
    }

    html body .preferences-page .preferences-toggle-stack > label.mud-switch > .mud-typography {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        width: auto !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        color: rgba(226, 230, 242, 0.84) !important;
        font-size: 0.88rem !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
        white-space: normal !important;
        overflow: visible !important;
    }

    html body .preferences-page .preferences-actions {
        display: flex !important;
        justify-content: flex-end !important;
        align-items: center !important;
        margin: 2px 0 0 !important;
        padding: 2px 0 0 !important;
    }

    html body .preferences-page .preferences-actions .mud-button-root {
        min-width: 154px !important;
        height: 42px !important;
        min-height: 42px !important;
        border-radius: 13px !important;
    }
}

@media (min-width: 1024px) and (max-width: 1500px) {
    html body .preferences-page .preferences-calendar-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    html body .preferences-page .preferences-toggle-stack {
        grid-template-columns: 1fr !important;
    }
}

@media (min-width: 1024px) and (max-width: 1220px) {
    html body .preferences-card > form {
        grid-template-columns: 1fr !important;
    }

    html body .preferences-page .preferences-calendar-grid,
    html body .preferences-page .preferences-calendar-invite-grid {
        grid-template-columns: 1fr !important;
    }
}


/* Schedule Day desktop containment.
 * Keeps the existing Schedule shell, but prevents the Day command bar and empty
 * state from reading as detached islands.
 */
@media (min-width: 1024px) {
    html body .ios-calendar-page .schedule-hero-panel {
        display: block !important;
        width: fit-content !important;
        max-width: 100% !important;
        margin: 0 0 24px !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    html body .ios-calendar-page .ios-calendar-toolbar.schedule-control-surface {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(248px, 290px) !important;
        grid-template-areas:
            "date viewing"
            "mode mode" !important;
        justify-content: stretch !important;
        align-items: center !important;
        gap: 10px !important;
        width: min(100%, 840px) !important;
        max-width: 840px !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        margin-left: 0 !important;
        padding: 12px !important;
        overflow: visible !important;
    }

    html body .ios-calendar-page .ios-calendar-toolbar.schedule-control-surface > .ios-calendar-date-nav-row {
        grid-area: date !important;
        display: grid !important;
        grid-template-columns: 40px minmax(190px, 1fr) 40px 84px !important;
        align-items: center !important;
        gap: 8px !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        height: 40px !important;
        min-height: 40px !important;
        margin: 0 !important;
        overflow: visible !important;
    }

    html body .ios-calendar-page .ios-calendar-toolbar.schedule-control-surface > .ios-calendar-viewing-row,
    html body .ios-calendar-page .ios-calendar-toolbar.schedule-control-surface > .dayplan-user-wrap.ios-calendar-viewing-row {
        grid-area: viewing !important;
        align-self: center !important;
        justify-self: stretch !important;
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        height: 40px !important;
        min-height: 40px !important;
        margin: 0 !important;
        position: relative !important;
        inset: auto !important;
    }

    html body .ios-calendar-page .ios-calendar-toolbar.schedule-control-surface > .ios-calendar-mode-row {
        grid-area: mode !important;
        display: grid !important;
        grid-template-columns: minmax(268px, 320px) minmax(0, 1fr) max-content !important;
        align-items: center !important;
        gap: 10px !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        height: 40px !important;
        min-height: 40px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    html body .ios-calendar-page .ios-calendar-toolbar.schedule-control-surface > .ios-calendar-mode-row > .ios-calendar-view-switch {
        grid-column: 1 !important;
        justify-self: stretch !important;
        width: 100% !important;
        max-width: none !important;
        height: 40px !important;
        min-height: 40px !important;
        margin: 0 !important;
    }

    html body .ios-calendar-page .ios-calendar-toolbar.schedule-control-surface > .ios-calendar-mode-row > .ios-calendar-generate-button.mud-button-root {
        grid-column: 3 !important;
        justify-self: end !important;
        width: auto !important;
        min-width: 156px !important;
        max-width: 196px !important;
        height: 40px !important;
        min-height: 40px !important;
        margin: 0 !important;
    }

    html body .ios-calendar-page .ios-calendar-toolbar.schedule-control-surface .ios-calendar-date-picker-shell {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 40px !important;
        min-height: 40px !important;
    }

    html body .ios-calendar-page .ios-calendar-toolbar.schedule-control-surface .ios-calendar-date-control,
    html body .ios-calendar-page .ios-calendar-toolbar.schedule-control-surface .ios-calendar-user-picker,
    html body .ios-calendar-page .ios-calendar-toolbar.schedule-control-surface .mud-input-control,
    html body .ios-calendar-page .ios-calendar-toolbar.schedule-control-surface .mud-input-control-input-container,
    html body .ios-calendar-page .ios-calendar-toolbar.schedule-control-surface .mud-input,
    html body .ios-calendar-page .ios-calendar-toolbar.schedule-control-surface .mud-select {
        height: 40px !important;
        min-height: 40px !important;
    }

    html body .ios-calendar-page .ios-calendar-toolbar.schedule-control-surface .mud-input-slot,
    html body .ios-calendar-page .ios-calendar-toolbar.schedule-control-surface input.mud-input-slot,
    html body .ios-calendar-page .ios-calendar-toolbar.schedule-control-surface .mud-select-input {
        height: 40px !important;
        min-height: 40px !important;
        line-height: 40px !important;
    }

    html body .ios-calendar-page .schedule-day-surface {
        display: grid !important;
        grid-template-columns: 1fr !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    html body .ios-calendar-page .schedule-day-empty-state.app-empty-state-card {
        display: grid !important;
        grid-template-columns: 56px minmax(0, 1fr) !important;
        justify-content: start !important;
        justify-items: start !important;
        align-items: center !important;
        gap: 18px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 152px !important;
        margin: 0 !important;
        padding: 28px 32px !important;
        border-radius: 20px !important;
        border: 1px solid rgba(198, 210, 255, 0.105) !important;
        background:
            radial-gradient(circle at 12% 0%, rgba(137, 151, 220, 0.09), transparent 38%),
            linear-gradient(180deg, rgba(18, 22, 32, 0.80), rgba(8, 11, 17, 0.90)) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 18px 44px rgba(0, 0, 0, 0.20) !important;
    }

    html body .ios-calendar-page .schedule-day-empty-state .app-empty-state-icon {
        width: 56px !important;
        height: 56px !important;
        margin: 0 !important;
        border-radius: 16px !important;
    }

    html body .ios-calendar-page .schedule-day-empty-state .app-empty-state-copy {
        display: grid !important;
        gap: 6px !important;
        justify-self: start !important;
        align-self: center !important;
        min-width: 0 !important;
        text-align: left !important;
    }

    html body .ios-calendar-page .schedule-day-empty-state .app-empty-state-eyebrow,
    html body .ios-calendar-page .schedule-day-empty-state .app-empty-state-title,
    html body .ios-calendar-page .schedule-day-empty-state .app-empty-state-message {
        text-align: left !important;
    }
}

/* Schedule Month desktop polish.
 * Month gets a tighter top rhythm and calmer premium calendar cells without
 * changing the Schedule interaction model or mobile behavior.
 */
@media (min-width: 1024px) {
    html body .ios-calendar-page.schedule-view-month .schedule-hero-panel {
        margin-bottom: 18px !important;
        padding-bottom: 16px !important;
    }

    html body .ios-calendar-page.schedule-view-month .ios-calendar-toolbar.schedule-control-surface {
        justify-self: end !important;
        align-self: start !important;
    }

    html body .ios-calendar-page.schedule-view-month .ios-month-view-desktop {
        width: 100% !important;
        max-width: 100% !important;
        margin: 12px 0 28px !important;
        display: grid !important;
        gap: 10px !important;
    }

    html body .ios-calendar-page.schedule-view-month .ios-month-weekdays,
    html body .ios-calendar-page.schedule-view-month .ios-month-grid.schedule-month-grid {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

    html body .ios-calendar-page.schedule-view-month .ios-month-weekdays {
        align-items: end !important;
        min-height: 24px !important;
        padding: 0 6px 2px !important;
    }

    html body .ios-calendar-page.schedule-view-month .ios-month-weekday {
        padding: 0 10px 4px !important;
        color: rgba(196, 201, 214, 0.56) !important;
        font-size: 0.69rem !important;
        font-weight: 840 !important;
        letter-spacing: 0.16em !important;
        line-height: 1 !important;
    }

    html body .ios-calendar-page.schedule-view-month .ios-month-grid.schedule-month-grid {
        grid-auto-rows: minmax(160px, 1fr) !important;
    }

    html body .ios-calendar-page.schedule-view-month .ios-month-cell {
        min-height: 160px !important;
        padding: 13px 14px !important;
        border-radius: 18px !important;
        border: 1px solid rgba(198, 210, 255, 0.088) !important;
        background:
            radial-gradient(circle at 12% 0%, rgba(137, 151, 220, 0.055), transparent 38%),
            linear-gradient(180deg, rgba(19, 23, 34, 0.86), rgba(9, 12, 19, 0.90)) !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.038),
            0 12px 28px rgba(0, 0, 0, 0.16) !important;
        outline: 0 !important;
    }

    html body .ios-calendar-page.schedule-view-month .ios-month-cell:hover {
        border-color: rgba(198, 210, 255, 0.16) !important;
        background:
            radial-gradient(circle at 12% 0%, rgba(137, 151, 220, 0.075), transparent 38%),
            linear-gradient(180deg, rgba(22, 26, 38, 0.90), rgba(10, 13, 20, 0.92)) !important;
    }

    html body .ios-calendar-page.schedule-view-month .ios-month-cell.selected {
        border-color: rgba(164, 177, 232, 0.34) !important;
        background:
            radial-gradient(circle at 12% 0%, rgba(145, 160, 216, 0.115), transparent 40%),
            linear-gradient(180deg, rgba(23, 28, 41, 0.90), rgba(10, 13, 21, 0.92)) !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.052),
            0 0 0 1px rgba(145, 160, 216, 0.10),
            0 14px 30px rgba(0, 0, 0, 0.20) !important;
        outline: 0 !important;
    }

    html body .ios-calendar-page.schedule-view-month .ios-month-cell.muted {
        opacity: 1 !important;
        border-color: rgba(198, 210, 255, 0.045) !important;
        background:
            linear-gradient(180deg, rgba(13, 16, 23, 0.40), rgba(6, 8, 13, 0.52)) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.018) !important;
    }

    html body .ios-calendar-page.schedule-view-month .ios-month-cell-number {
        width: fit-content !important;
        min-width: 22px !important;
        min-height: 22px !important;
        margin: 0 0 9px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 999px !important;
        color: rgba(244, 241, 235, 0.86) !important;
        font-size: 0.84rem !important;
        font-weight: 820 !important;
        line-height: 1 !important;
    }

    html body .ios-calendar-page.schedule-view-month .ios-month-cell.selected .ios-month-cell-number {
        color: rgba(248, 248, 252, 0.96) !important;
        background: rgba(145, 160, 216, 0.16) !important;
    }

    html body .ios-calendar-page.schedule-view-month .ios-month-cell.muted .ios-month-cell-number {
        color: rgba(196, 201, 214, 0.32) !important;
    }

    html body .ios-calendar-page.schedule-view-month .ios-month-cell-events {
        display: grid !important;
        gap: 5px !important;
        min-width: 0 !important;
    }

    html body .ios-calendar-page.schedule-view-month .ios-month-event-pill {
        height: 20px !important;
        min-height: 20px !important;
        padding: 0 8px !important;
        border-radius: 7px !important;
        border: 1px solid rgba(150, 166, 224, 0.105) !important;
        background: rgba(126, 142, 201, 0.13) !important;
        color: rgba(244, 241, 235, 0.80) !important;
        font-size: 0.66rem !important;
        font-weight: 760 !important;
        line-height: 19px !important;
    }

    html body .ios-calendar-page.schedule-view-month .ios-month-more {
        padding-inline: 2px !important;
        color: rgba(196, 201, 214, 0.46) !important;
        font-size: 0.68rem !important;
        font-weight: 760 !important;
    }
}

/* Schedule Week desktop polish.
 * Scoped after the legacy schedule layers so the week board keeps readable
 * event rows without affecting Day, Month, or mobile schedule layouts.
 */
@media (min-width: 1024px) {
    html body .ios-calendar-page.schedule-view-week .schedule-hero-panel {
        margin-bottom: 18px !important;
        padding-bottom: 16px !important;
    }

    html body .ios-calendar-page.schedule-view-week .ios-calendar-toolbar.schedule-control-surface {
        justify-self: end !important;
        align-self: start !important;
    }

    html body .ios-calendar-page.schedule-view-week .ios-week-view-desktop {
        display: grid !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 12px 0 28px !important;
        gap: 12px !important;
    }

    html body .ios-calendar-page.schedule-view-week .ios-week-header,
    html body .ios-calendar-page.schedule-view-week .ios-week-grid {
        display: grid !important;
        grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
        width: 100% !important;
        gap: 12px !important;
    }

    html body .ios-calendar-page.schedule-view-week .ios-week-header-cell {
        display: grid !important;
        align-content: center !important;
        gap: 6px !important;
        min-height: 72px !important;
        padding: 12px 14px !important;
        border-radius: 17px !important;
        border: 1px solid rgba(198, 210, 255, 0.085) !important;
        background:
            radial-gradient(circle at 18% 0%, rgba(137, 151, 220, 0.06), transparent 40%),
            linear-gradient(180deg, rgba(19, 23, 34, 0.86), rgba(9, 12, 19, 0.90)) !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.038),
            0 12px 28px rgba(0, 0, 0, 0.14) !important;
        color: rgba(244, 241, 235, 0.82) !important;
        outline: 0 !important;
    }

    html body .ios-calendar-page.schedule-view-week .ios-week-header-cell:hover {
        border-color: rgba(198, 210, 255, 0.16) !important;
        background:
            radial-gradient(circle at 18% 0%, rgba(137, 151, 220, 0.08), transparent 40%),
            linear-gradient(180deg, rgba(22, 26, 38, 0.90), rgba(10, 13, 20, 0.92)) !important;
    }

    html body .ios-calendar-page.schedule-view-week .ios-week-header-cell.active {
        color: rgba(244, 241, 235, 0.94) !important;
        border-color: rgba(164, 177, 232, 0.34) !important;
        background:
            radial-gradient(circle at 18% 0%, rgba(145, 160, 216, 0.13), transparent 42%),
            linear-gradient(180deg, rgba(24, 29, 43, 0.94), rgba(11, 14, 22, 0.94)) !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.052),
            0 0 0 1px rgba(145, 160, 216, 0.10),
            0 14px 30px rgba(0, 0, 0, 0.18) !important;
    }

    html body .ios-calendar-page.schedule-view-week .ios-week-header-name {
        color: rgba(196, 201, 214, 0.58) !important;
        font-size: 0.68rem !important;
        font-weight: 840 !important;
        letter-spacing: 0.16em !important;
        line-height: 1 !important;
        text-transform: uppercase !important;
    }

    html body .ios-calendar-page.schedule-view-week .ios-week-header-number {
        color: rgba(244, 241, 235, 0.88) !important;
        font-size: 1rem !important;
        font-weight: 860 !important;
        line-height: 1 !important;
    }

    html body .ios-calendar-page.schedule-view-week .ios-week-header-cell.active .ios-week-header-name {
        color: rgba(181, 192, 246, 0.78) !important;
    }

    html body .ios-calendar-page.schedule-view-week .ios-week-header-cell.active .ios-week-header-number {
        color: rgba(250, 249, 246, 0.96) !important;
    }

    html body .ios-calendar-page.schedule-view-week .ios-week-column {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        min-height: 218px !important;
        padding: 12px !important;
        gap: 10px !important;
        border-radius: 18px !important;
        border: 1px solid rgba(198, 210, 255, 0.08) !important;
        background:
            radial-gradient(circle at 14% 0%, rgba(137, 151, 220, 0.045), transparent 36%),
            linear-gradient(180deg, rgba(17, 21, 31, 0.78), rgba(7, 10, 16, 0.88)) !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.028),
            0 12px 26px rgba(0, 0, 0, 0.13) !important;
    }

    html body .ios-calendar-page.schedule-view-week .ios-week-empty {
        min-height: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 13px !important;
        border: 1px dashed rgba(198, 210, 255, 0.08) !important;
        background: rgba(255, 255, 255, 0.012) !important;
        color: rgba(196, 201, 214, 0.36) !important;
        font-size: 0.72rem !important;
        font-weight: 780 !important;
        letter-spacing: 0.12em !important;
        line-height: 1 !important;
        text-transform: uppercase !important;
    }

    html body .ios-calendar-page.schedule-view-week .ios-week-event-chip,
    html body .ios-calendar-page.schedule-view-week .schedule-event-chip {
        display: grid !important;
        grid-template-columns: 58px minmax(0, 1fr) !important;
        grid-template-areas:
            "time title"
            "meta meta" !important;
        column-gap: 9px !important;
        row-gap: 3px !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        padding: 9px 10px !important;
        border-radius: 12px !important;
        border: 1px solid rgba(150, 166, 224, 0.13) !important;
        background: rgba(126, 142, 201, 0.13) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.028) !important;
        overflow: visible !important;
    }

    html body .ios-calendar-page.schedule-view-week .ios-week-event-chip:hover {
        border-color: rgba(150, 166, 224, 0.22) !important;
        background: rgba(132, 148, 207, 0.18) !important;
    }

    html body .ios-calendar-page.schedule-view-week .ios-week-event-time:first-child {
        grid-area: time !important;
        align-self: start !important;
        min-width: 0 !important;
        margin: 1px 0 0 !important;
        color: rgba(181, 192, 246, 0.78) !important;
        font-size: 0.66rem !important;
        font-weight: 820 !important;
        line-height: 1.15 !important;
        white-space: nowrap !important;
    }

    html body .ios-calendar-page.schedule-view-week .ios-week-event-title {
        grid-area: title !important;
        min-width: 0 !important;
        color: rgba(244, 241, 235, 0.90) !important;
        font-size: 0.78rem !important;
        font-weight: 780 !important;
        line-height: 1.18 !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        display: block !important;
        height: auto !important;
    }

    html body .ios-calendar-page.schedule-view-week .ios-week-event-time:not(:first-child) {
        grid-area: meta !important;
        min-width: 0 !important;
        margin: 1px 0 0 !important;
        color: rgba(196, 201, 214, 0.46) !important;
        font-size: 0.62rem !important;
        font-weight: 720 !important;
        line-height: 1.2 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
}

/* Service desktop polish.
 * Keeps the existing maintenance behavior while making the desktop surface read
 * as an operational service board instead of raw expansion panels.
 */
@media (min-width: 1024px) {
    html body .maintenance-page {
        width: min(100%, 1680px) !important;
        max-width: 1680px !important;
    }

    html body .maintenance-page .app-page-shell-header {
        margin-bottom: 20px !important;
        padding-bottom: 20px !important;
        border-bottom: 1px solid rgba(198, 210, 255, 0.07) !important;
    }

    html body .maintenance-page .maintenance-header-toolbar {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 10px !important;
        min-width: 0 !important;
        width: 100% !important;
    }

    html body .maintenance-page .maintenance-header-action.mud-button-root {
        height: 42px !important;
        min-height: 42px !important;
        padding-inline: 16px !important;
        border-radius: 14px !important;
        border: 1px solid rgba(164, 177, 232, 0.26) !important;
        background:
            linear-gradient(135deg, rgba(145, 160, 216, 0.94), rgba(119, 133, 190, 0.90)) !important;
        color: rgba(8, 10, 15, 0.94) !important;
        font-size: 0.82rem !important;
        font-weight: 840 !important;
        letter-spacing: 0 !important;
        text-transform: none !important;
        box-shadow:
            0 16px 32px rgba(73, 86, 142, 0.16),
            inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
    }

    html body .maintenance-page .maintenance-page-content {
        gap: 16px !important;
    }

    html body .maintenance-page .maintenance-quick-filter-bar {
        margin: 0 !important;
        padding: 10px !important;
        border-radius: 18px !important;
        border: 1px solid rgba(198, 210, 255, 0.085) !important;
        background:
            radial-gradient(circle at 14% 0%, rgba(137, 151, 220, 0.05), transparent 36%),
            linear-gradient(180deg, rgba(17, 21, 31, 0.78), rgba(8, 11, 17, 0.72)) !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.034),
            0 16px 34px rgba(0, 0, 0, 0.15) !important;
    }

    html body .maintenance-page .maintenance-quick-filter-actions .mud-button-root {
        min-width: 104px !important;
    }

    html body .maintenance-page .maintenance-section-stack {
        display: grid !important;
        grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr) !important;
        align-items: start !important;
        gap: 18px !important;
        width: 100% !important;
    }

    html body .maintenance-page .maintenance-section-stack > .maintenance-section-card {
        grid-column: 1 !important;
    }

    html body .maintenance-page .maintenance-section-stack > .maintenance-scheduled-panels {
        grid-column: 2 !important;
    }

    html body .maintenance-page .maintenance-section-card,
    html body .maintenance-page .maintenance-scheduled-panels .mud-expand-panel {
        border-radius: 20px !important;
        border: 1px solid rgba(198, 210, 255, 0.085) !important;
        background:
            radial-gradient(circle at 10% 0%, rgba(137, 151, 220, 0.055), transparent 38%),
            linear-gradient(180deg, rgba(17, 21, 31, 0.80), rgba(7, 10, 16, 0.86)) !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.035),
            0 16px 36px rgba(0, 0, 0, 0.16) !important;
        overflow: hidden !important;
    }

    html body .maintenance-page .maintenance-section-card {
        padding: 18px !important;
        min-height: 210px !important;
    }

    html body .maintenance-page .maintenance-section-card:first-of-type {
        border-color: rgba(200, 173, 127, 0.16) !important;
        background:
            radial-gradient(circle at 10% 0%, rgba(200, 173, 127, 0.075), transparent 35%),
            linear-gradient(180deg, rgba(20, 22, 28, 0.84), rgba(8, 10, 15, 0.88)) !important;
    }

    html body .maintenance-page .maintenance-section-header {
        margin: 0 0 14px !important;
        padding: 0 0 13px !important;
        border-bottom: 1px solid rgba(198, 210, 255, 0.065) !important;
    }

    html body .maintenance-page .maintenance-section-title {
        color: rgba(244, 241, 235, 0.90) !important;
        font-size: 0.79rem !important;
        font-weight: 860 !important;
        letter-spacing: 0.15em !important;
    }

    html body .maintenance-page .maintenance-section-header .soft-muted {
        margin-top: 6px !important;
        max-width: 62ch !important;
        color: rgba(196, 201, 214, 0.56) !important;
        font-size: 0.82rem !important;
        line-height: 1.35 !important;
    }

    html body .maintenance-page .maintenance-section-header .mud-chip {
        height: 28px !important;
        min-height: 28px !important;
        min-width: 28px !important;
        padding-inline: 10px !important;
        border-color: rgba(198, 210, 255, 0.12) !important;
        background: rgba(255, 255, 255, 0.044) !important;
    }

    html body .maintenance-page .maintenance-section-card .app-empty-state-inline {
        display: grid !important;
        grid-template-columns: 48px minmax(0, 1fr) !important;
        align-items: center !important;
        justify-content: start !important;
        justify-items: start !important;
        gap: 16px !important;
        min-height: 96px !important;
        margin: 0 !important;
        padding: 18px 20px !important;
        border-radius: 16px !important;
        border: 1px solid rgba(198, 210, 255, 0.07) !important;
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.026), rgba(255, 255, 255, 0.012)) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.026) !important;
        text-align: left !important;
    }

    html body .maintenance-page .maintenance-section-card .app-empty-state-icon {
        width: 48px !important;
        height: 48px !important;
        margin: 0 !important;
        border-radius: 15px !important;
        background: rgba(255, 255, 255, 0.042) !important;
        color: rgba(181, 192, 246, 0.62) !important;
    }

    html body .maintenance-page .maintenance-section-card .app-empty-state-copy,
    html body .maintenance-page .maintenance-section-card .app-empty-state-title,
    html body .maintenance-page .maintenance-section-card .app-empty-state-message {
        text-align: left !important;
    }

    html body .maintenance-page .maintenance-section-card .app-empty-state-title {
        color: rgba(244, 241, 235, 0.88) !important;
        font-size: 0.95rem !important;
        font-weight: 800 !important;
    }

    html body .maintenance-page .maintenance-section-card .app-empty-state-message {
        color: rgba(196, 201, 214, 0.56) !important;
        font-size: 0.82rem !important;
        line-height: 1.35 !important;
    }

    html body .maintenance-page .maintenance-scheduled-panels {
        display: grid !important;
        gap: 14px !important;
    }

    html body .maintenance-page .maintenance-scheduled-panels .mud-expand-panel-header {
        min-height: 84px !important;
        padding: 16px 18px !important;
        border: 0 !important;
        background: transparent !important;
    }

    html body .maintenance-page .maintenance-scheduled-panels .mud-expand-panel-content {
        padding: 0 18px 18px !important;
        border-top: 1px solid rgba(198, 210, 255, 0.055) !important;
        background: rgba(0, 0, 0, 0.08) !important;
    }

    html body .maintenance-page .maintenance-scheduled-panels .maintenance-section-header {
        margin: 0 !important;
        padding: 0 !important;
        border-bottom: 0 !important;
    }

    html body .maintenance-page .maintenance-group-card {
        padding: 0 !important;
        border: 0 !important;
        outline: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    html body .maintenance-page .maintenance-group-header {
        display: flex !important;
        align-items: baseline !important;
        justify-content: space-between !important;
        gap: 10px !important;
        margin: 0 0 10px !important;
        padding: 0 2px 8px !important;
        border-bottom: 1px solid rgba(198, 210, 255, 0.045) !important;
    }

    html body .maintenance-page .maintenance-group-header > div {
        display: flex !important;
        align-items: baseline !important;
        gap: 9px !important;
        min-width: 0 !important;
    }

    html body .maintenance-page .maintenance-group-title {
        color: rgba(181, 192, 246, 0.70) !important;
        font-size: 0.72rem !important;
        font-weight: 860 !important;
        letter-spacing: 0.15em !important;
        line-height: 1 !important;
        text-transform: uppercase !important;
    }

    html body .maintenance-page .maintenance-group-count {
        margin: 0 !important;
        color: rgba(196, 201, 214, 0.42) !important;
        font-size: 0.72rem !important;
        font-weight: 760 !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    html body .maintenance-page .maintenance-item-card {
        position: relative !important;
        border-radius: 16px !important;
        border: 1px solid rgba(198, 210, 255, 0.070) !important;
        background:
            radial-gradient(circle at 0% 0%, rgba(181, 192, 246, 0.042), transparent 30%),
            linear-gradient(180deg, rgba(16, 19, 28, 0.78), rgba(8, 10, 16, 0.76)) !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.024),
            0 10px 22px rgba(0, 0, 0, 0.11) !important;
        overflow: hidden !important;
    }

    html body .maintenance-page .maintenance-item-card::before {
        content: "" !important;
        position: absolute !important;
        inset: 0 auto 0 0 !important;
        width: 3px !important;
        background: rgba(181, 192, 246, 0.20) !important;
    }

    html body .maintenance-page .maintenance-item-card.overdue::before {
        background: rgba(200, 173, 127, 0.40) !important;
    }

    html body .maintenance-page .maintenance-item-row {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        min-height: 94px !important;
        padding: 15px 16px 15px 18px !important;
        gap: 16px !important;
    }

    html body .maintenance-page .maintenance-item-top {
        align-items: center !important;
        gap: 8px !important;
        margin-bottom: 8px !important;
    }

    html body .maintenance-page .maintenance-item-title {
        color: rgba(244, 241, 235, 0.91) !important;
        font-size: 1rem !important;
        font-weight: 820 !important;
        letter-spacing: 0 !important;
        line-height: 1.18 !important;
    }

    html body .maintenance-page .maintenance-item-tags {
        gap: 6px !important;
        margin: 0 0 8px !important;
    }

    html body .maintenance-page .maintenance-item-tags .mud-chip,
    html body .maintenance-page .maintenance-status-chip {
        height: 22px !important;
        min-height: 22px !important;
        border-radius: 999px !important;
        font-size: 0.68rem !important;
        font-weight: 760 !important;
    }

    html body .maintenance-page .maintenance-item-actions {
        min-width: 150px !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 8px !important;
    }

    html body .maintenance-page .maintenance-item-primary-actions .mud-button-root {
        height: 36px !important;
        min-height: 36px !important;
        min-width: 96px !important;
        border-radius: 11px !important;
        font-size: 0.76rem !important;
        font-weight: 820 !important;
        text-transform: none !important;
    }

    html body .maintenance-page .maintenance-item-secondary-actions .mud-button-root,
    html body .maintenance-page .maintenance-item-secondary-actions .mud-icon-button {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        border-radius: 999px !important;
        border: 1px solid rgba(198, 210, 255, 0.11) !important;
        background: rgba(255, 255, 255, 0.028) !important;
    }

    html body .maintenance-page .maintenance-item-main .mud-typography-body2,
    html body .maintenance-page .maintenance-due-text,
    html body .maintenance-page .maintenance-item-meta {
        color: rgba(196, 201, 214, 0.60) !important;
        font-size: 0.80rem !important;
    }
}

@media (min-width: 1024px) and (max-width: 1439.98px) {
    html body .maintenance-page .maintenance-section-stack {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html body .maintenance-page .maintenance-section-stack > .maintenance-section-card,
    html body .maintenance-page .maintenance-section-stack > .maintenance-scheduled-panels {
        grid-column: 1 !important;
    }
}

/* Settings Features desktop polish.
 * Keeps feature controls as settings controls, but removes the raw admin-table
 * feeling by using composed cards, readable rows, and a fixed action rail.
 */
@media (min-width: 1024px) {
    html body .feature-settings-page {
        width: min(100%, 1500px) !important;
        max-width: 1500px !important;
    }

    html body .feature-settings-page .settings-hero-card {
        margin-bottom: 22px !important;
        padding: 28px 30px !important;
        border-radius: 20px !important;
        border: 1px solid rgba(198, 210, 255, 0.085) !important;
        background:
            radial-gradient(circle at 10% 0%, rgba(137, 151, 220, 0.055), transparent 40%),
            linear-gradient(180deg, rgba(17, 21, 31, 0.82), rgba(7, 10, 16, 0.84)) !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.035),
            0 18px 38px rgba(0, 0, 0, 0.15) !important;
    }

    html body .feature-settings-page .settings-hero-title {
        color: rgba(244, 241, 235, 0.92) !important;
        font-size: clamp(1.62rem, 1.18vw, 1.98rem) !important;
        font-weight: 830 !important;
        letter-spacing: 0 !important;
        line-height: 1.08 !important;
    }

    html body .feature-settings-page .settings-hero-card .soft-muted {
        margin-top: 9px !important;
        max-width: 62ch !important;
        color: rgba(196, 201, 214, 0.66) !important;
        font-size: 0.94rem !important;
        font-weight: 610 !important;
        line-height: 1.45 !important;
    }

    html body .feature-settings-page .feature-settings-grid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        align-items: start !important;
        gap: 18px !important;
        width: 100% !important;
    }

    html body .feature-settings-page .feature-section-card {
        min-height: 430px !important;
        padding: 24px !important;
        border-radius: 20px !important;
        border: 1px solid rgba(198, 210, 255, 0.09) !important;
        background:
            radial-gradient(circle at 12% 0%, rgba(137, 151, 220, 0.055), transparent 42%),
            linear-gradient(180deg, rgba(17, 21, 31, 0.80), rgba(7, 10, 16, 0.88)) !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.035),
            0 16px 34px rgba(0, 0, 0, 0.14) !important;
    }

    html body .feature-settings-page .feature-section-card .settings-card-top {
        min-height: 106px !important;
        margin: 0 0 14px !important;
        padding: 0 0 16px !important;
        border-bottom: 1px solid rgba(198, 210, 255, 0.065) !important;
    }

    html body .feature-settings-page .settings-card-title {
        color: rgba(244, 241, 235, 0.91) !important;
        font-size: 1.02rem !important;
        font-weight: 820 !important;
        letter-spacing: 0 !important;
        line-height: 1.18 !important;
    }

    html body .feature-settings-page .feature-section-card .soft-muted {
        margin-top: 9px !important;
        color: rgba(196, 201, 214, 0.58) !important;
        font-size: 0.86rem !important;
        font-weight: 600 !important;
        line-height: 1.42 !important;
    }

    html body .feature-settings-page .feature-toggle-stack {
        display: grid !important;
        gap: 10px !important;
    }

    html body .feature-settings-page .feature-toggle-row {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 72px 50px !important;
        align-items: center !important;
        gap: 12px !important;
        min-height: 62px !important;
        padding: 11px 12px 11px 14px !important;
        border-radius: 15px !important;
        border: 1px solid rgba(198, 210, 255, 0.060) !important;
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.018)) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.026) !important;
    }

    html body .feature-settings-page .feature-toggle-row:hover {
        border-color: rgba(198, 210, 255, 0.12) !important;
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.048), rgba(255, 255, 255, 0.022)) !important;
    }

    html body .feature-settings-page .feature-toggle-row span {
        min-width: 0 !important;
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: normal !important;
    }

    html body .feature-settings-page .feature-toggle-copy {
        display: grid !important;
        gap: 4px !important;
        min-width: 0 !important;
    }

    html body .feature-settings-page .feature-toggle-label {
        color: rgba(244, 241, 235, 0.91) !important;
        font-size: 0.91rem !important;
        font-weight: 800 !important;
        letter-spacing: 0 !important;
        line-height: 1.16 !important;
    }

    html body .feature-settings-page .feature-toggle-meta {
        color: rgba(196, 201, 214, 0.50) !important;
        font-size: 0.74rem !important;
        font-weight: 620 !important;
        line-height: 1.26 !important;
    }

    html body .feature-settings-page .feature-toggle-state {
        justify-self: end !important;
        color: rgba(181, 192, 246, 0.70) !important;
        font-size: 0.68rem !important;
        font-weight: 820 !important;
        letter-spacing: 0.11em !important;
        line-height: 1 !important;
        text-transform: uppercase !important;
    }

    html body .feature-settings-page .feature-toggle-row .mud-switch {
        justify-self: end !important;
        margin: 0 !important;
        width: 48px !important;
        min-width: 48px !important;
    }

    html body .feature-settings-page .feature-controls-actions {
        width: 100% !important;
        margin: 18px 0 0 !important;
        padding: 0 !important;
        display: flex !important;
        justify-content: flex-end !important;
    }

    html body .feature-settings-page .feature-controls-actions .mud-button-root {
        height: 42px !important;
        min-height: 42px !important;
        min-width: 132px !important;
        padding-inline: 18px !important;
        border-radius: 14px !important;
        font-size: 0.82rem !important;
        font-weight: 840 !important;
        letter-spacing: 0 !important;
        text-transform: none !important;
    }
}

@media (min-width: 1024px) and (max-width: 1439.98px) {
    html body .feature-settings-page .feature-settings-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html body .feature-settings-page .feature-section-card {
        min-height: 0 !important;
    }
}

/* Settings Houses desktop polish.
 * Property cards share the settings grid system, but read as deliberate
 * household records instead of small flat database tiles.
 */
@media (min-width: 1024px) {
    html body .houses-settings-page {
        width: min(100%, 1500px) !important;
        max-width: 1500px !important;
    }

    html body .houses-settings-page .app-page-shell-header {
        margin-bottom: 22px !important;
        padding-bottom: 22px !important;
        border-bottom: 1px solid rgba(198, 210, 255, 0.07) !important;
    }

    html body .houses-settings-page .app-page-shell-toolbar {
        align-self: center !important;
        display: flex !important;
        justify-content: flex-end !important;
        min-width: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    html body .houses-settings-page .houses-header-action.mud-button-root {
        height: 42px !important;
        min-height: 42px !important;
        padding-inline: 16px !important;
        border-radius: 14px !important;
        border: 1px solid rgba(164, 177, 232, 0.26) !important;
        background:
            linear-gradient(135deg, rgba(145, 160, 216, 0.94), rgba(119, 133, 190, 0.90)) !important;
        color: rgba(8, 10, 15, 0.94) !important;
        font-size: 0.82rem !important;
        font-weight: 840 !important;
        letter-spacing: 0 !important;
        text-transform: none !important;
        box-shadow:
            0 16px 32px rgba(73, 86, 142, 0.16),
            inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
    }

    html body .houses-settings-page .houses-card-grid {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)) !important;
        align-items: stretch !important;
        gap: 18px !important;
        width: 100% !important;
    }

    html body .houses-settings-page .house-card {
        display: grid !important;
        grid-template-rows: auto minmax(96px, auto) minmax(0, 1fr) auto auto !important;
        gap: 15px !important;
        min-height: 286px !important;
        padding: 22px !important;
        border-radius: 20px !important;
        border: 1px solid rgba(198, 210, 255, 0.09) !important;
        background:
            radial-gradient(circle at 12% 0%, rgba(137, 151, 220, 0.055), transparent 40%),
            linear-gradient(180deg, rgba(17, 21, 31, 0.82), rgba(7, 10, 16, 0.88)) !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.035),
            0 16px 34px rgba(0, 0, 0, 0.14) !important;
    }

    html body .houses-settings-page .house-card:hover {
        border-color: rgba(198, 210, 255, 0.15) !important;
        transform: translateY(-1px) !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.045),
            0 20px 42px rgba(0, 0, 0, 0.18) !important;
    }

    html body .houses-settings-page .house-card-header {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: start !important;
        gap: 14px !important;
        min-height: 48px !important;
        margin: 0 !important;
    }

    html body .houses-settings-page .house-card-title-block {
        display: grid !important;
        gap: 6px !important;
        min-width: 0 !important;
    }

    html body .houses-settings-page .house-card-title {
        color: rgba(244, 241, 235, 0.93) !important;
        font-size: 1.12rem !important;
        font-weight: 840 !important;
        letter-spacing: 0 !important;
        line-height: 1.14 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    html body .houses-settings-page .house-card-kind {
        color: rgba(181, 192, 246, 0.58) !important;
        font-size: 0.68rem !important;
        font-weight: 820 !important;
        letter-spacing: 0.12em !important;
        line-height: 1 !important;
        text-transform: uppercase !important;
    }

    html body .houses-settings-page .house-status-chip.mud-chip {
        height: 25px !important;
        min-height: 25px !important;
        padding-inline: 9px !important;
        border-radius: 999px !important;
        border-color: rgba(181, 192, 246, 0.24) !important;
        background: rgba(181, 192, 246, 0.075) !important;
        color: rgba(214, 221, 255, 0.84) !important;
        font-size: 0.66rem !important;
        font-weight: 820 !important;
        letter-spacing: 0.05em !important;
    }

    html body .houses-settings-page .house-card-address {
        display: grid !important;
        align-content: start !important;
        gap: 5px !important;
        min-height: 96px !important;
        padding: 14px 15px !important;
        border-radius: 16px !important;
        border: 1px solid rgba(198, 210, 255, 0.06) !important;
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.026), rgba(255, 255, 255, 0.012)) !important;
    }

    html body .houses-settings-page .house-card-address .app-line {
        margin: 0 !important;
        color: rgba(244, 241, 235, 0.75) !important;
        font-size: 0.86rem !important;
        font-weight: 640 !important;
        line-height: 1.34 !important;
    }

    html body .houses-settings-page .house-card-notes {
        color: rgba(196, 201, 214, 0.58) !important;
        font-size: 0.82rem !important;
        line-height: 1.38 !important;
    }

    html body .houses-settings-page .house-card-footer {
        padding-top: 13px !important;
        border-top: 1px solid rgba(198, 210, 255, 0.055) !important;
    }

    html body .houses-settings-page .house-card-footer .app-meta {
        color: rgba(196, 201, 214, 0.48) !important;
        font-size: 0.76rem !important;
        font-weight: 650 !important;
        line-height: 1.2 !important;
    }

    html body .houses-settings-page .house-card-actions {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 9px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    html body .houses-settings-page .house-card-actions .mud-button-root {
        height: 36px !important;
        min-height: 36px !important;
        min-width: 78px !important;
        padding-inline: 14px !important;
        border-radius: 12px !important;
        font-size: 0.76rem !important;
        font-weight: 820 !important;
        letter-spacing: 0 !important;
        text-transform: none !important;
    }
}

@media (min-width: 1024px) and (max-width: 1439.98px) {
    html body .houses-settings-page .houses-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* Settings Kids desktop polish.
 * Uses the same settings shell rhythm as Properties while keeping child roster
 * cards focused on identity first and school/age details second.
 */
@media (min-width: 1024px) {
    html body .kids-settings-page {
        width: min(100%, 1500px) !important;
        max-width: 1500px !important;
    }

    html body .kids-settings-page .app-page-shell-header {
        margin-bottom: 22px !important;
        padding-bottom: 22px !important;
        border-bottom: 1px solid rgba(198, 210, 255, 0.07) !important;
    }

    html body .kids-settings-page .app-page-shell-toolbar {
        align-self: center !important;
        display: flex !important;
        justify-content: flex-end !important;
        min-width: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    html body .kids-settings-page .kids-header-action.mud-button-root {
        height: 42px !important;
        min-height: 42px !important;
        padding-inline: 16px !important;
        border-radius: 14px !important;
        border: 1px solid rgba(164, 177, 232, 0.26) !important;
        background:
            linear-gradient(135deg, rgba(145, 160, 216, 0.94), rgba(119, 133, 190, 0.90)) !important;
        color: rgba(8, 10, 15, 0.94) !important;
        font-size: 0.82rem !important;
        font-weight: 840 !important;
        letter-spacing: 0 !important;
        text-transform: none !important;
        box-shadow:
            0 16px 32px rgba(73, 86, 142, 0.16),
            inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
    }

    html body .kids-settings-page .kids-data-desktop {
        width: 100% !important;
        max-width: none !important;
    }

    html body .kids-settings-page .kids-card-grid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        align-items: stretch !important;
        gap: 18px !important;
        width: 100% !important;
    }

    html body .kids-settings-page .kids-roster-card {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: auto auto !important;
        grid-template-areas:
            "main"
            "actions" !important;
        gap: 15px !important;
        min-height: 236px !important;
        padding: 21px !important;
        border-radius: 20px !important;
        border: 1px solid rgba(198, 210, 255, 0.09) !important;
        background:
            radial-gradient(circle at 12% 0%, rgba(137, 151, 220, 0.055), transparent 40%),
            linear-gradient(180deg, rgba(17, 21, 31, 0.82), rgba(7, 10, 16, 0.88)) !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.035),
            0 16px 34px rgba(0, 0, 0, 0.14) !important;
    }

    html body .kids-settings-page .kids-roster-card:hover {
        border-color: rgba(198, 210, 255, 0.15) !important;
        transform: translateY(-1px) !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.045),
            0 20px 42px rgba(0, 0, 0, 0.18) !important;
    }

    html body .kids-settings-page .kids-card-main {
        grid-area: main !important;
        display: grid !important;
        grid-template-rows: auto auto !important;
        gap: 17px !important;
        min-width: 0 !important;
    }

    html body .kids-settings-page .kids-roster-heading {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: start !important;
        gap: 14px !important;
        min-height: 50px !important;
    }

    html body .kids-settings-page .kids-roster-title-block {
        display: grid !important;
        gap: 6px !important;
        min-width: 0 !important;
    }

    html body .kids-settings-page .kids-roster-name {
        color: rgba(244, 241, 235, 0.93) !important;
        font-size: 1.12rem !important;
        font-weight: 840 !important;
        letter-spacing: 0 !important;
        line-height: 1.14 !important;
        display: -webkit-box !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: normal !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
    }

    html body .kids-settings-page .kids-roster-subtitle {
        color: rgba(181, 192, 246, 0.58) !important;
        font-size: 0.68rem !important;
        font-weight: 820 !important;
        letter-spacing: 0.12em !important;
        line-height: 1 !important;
        text-transform: uppercase !important;
    }

    html body .kids-settings-page .kids-roster-status.mud-chip {
        height: 25px !important;
        min-height: 25px !important;
        padding-inline: 9px !important;
        border-radius: 999px !important;
        border-color: rgba(181, 192, 246, 0.24) !important;
        background: rgba(181, 192, 246, 0.075) !important;
        color: rgba(214, 221, 255, 0.84) !important;
        font-size: 0.66rem !important;
        font-weight: 820 !important;
        letter-spacing: 0.05em !important;
    }

    html body .kids-settings-page .kids-roster-meta-grid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        align-content: start !important;
        gap: 10px !important;
        margin: 0 !important;
    }

    html body .kids-settings-page .kids-roster-meta {
        display: grid !important;
        align-content: start !important;
        gap: 6px !important;
        min-height: 72px !important;
        min-width: 0 !important;
        padding: 12px !important;
        border-radius: 15px !important;
        border: 1px solid rgba(198, 210, 255, 0.06) !important;
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.026), rgba(255, 255, 255, 0.012)) !important;
    }

    html body .kids-settings-page .kids-roster-meta span {
        display: block !important;
        margin: 0 !important;
        color: rgba(181, 192, 246, 0.58) !important;
        font-size: 0.64rem !important;
        font-weight: 840 !important;
        letter-spacing: 0.12em !important;
        line-height: 1 !important;
        text-transform: uppercase !important;
    }

    html body .kids-settings-page .kids-roster-meta strong {
        display: -webkit-box !important;
        min-width: 0 !important;
        color: rgba(244, 241, 235, 0.82) !important;
        font-size: 0.86rem !important;
        font-weight: 760 !important;
        line-height: 1.2 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: normal !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
    }

    html body .kids-settings-page .kids-card-actions {
        grid-area: actions !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 9px !important;
        min-width: 0 !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 12px 0 0 !important;
        border-top: 1px solid rgba(198, 210, 255, 0.055) !important;
    }

    html body .kids-settings-page .kids-card-actions .mud-button-root {
        height: 36px !important;
        min-height: 36px !important;
        width: auto !important;
        min-width: 78px !important;
        padding-inline: 14px !important;
        border-radius: 12px !important;
        font-size: 0.76rem !important;
        font-weight: 820 !important;
        letter-spacing: 0 !important;
        text-transform: none !important;
    }

    html body .kids-settings-page .kids-card-menu {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 auto !important;
        width: 36px !important;
        height: 36px !important;
        margin: 0 !important;
    }

    html body .kids-settings-page .kids-card-menu .mud-menu-activator {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 36px !important;
        height: 36px !important;
    }

    html body .kids-settings-page .kids-card-actions .mud-icon-button,
    html body .kids-settings-page .kids-card-menu .mud-icon-button {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        border-radius: 999px !important;
        border: 1px solid rgba(198, 210, 255, 0.11) !important;
        background: rgba(255, 255, 255, 0.028) !important;
    }
}

@media (min-width: 1024px) and (max-width: 1439.98px) {
    html body .kids-settings-page .kids-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* Settings Locations desktop polish.
 * Saved place cards follow the same settings record pattern as Properties:
 * name first, type and address second, actions in a stable footer rail.
 */
@media (min-width: 1024px) {
    html body .locations-settings-page {
        width: min(100%, 1500px) !important;
        max-width: 1500px !important;
    }

    html body .locations-settings-page .app-page-shell-header {
        margin-bottom: 22px !important;
        padding-bottom: 22px !important;
        border-bottom: 1px solid rgba(198, 210, 255, 0.07) !important;
    }

    html body .locations-settings-page .app-page-shell-toolbar {
        align-self: center !important;
        display: flex !important;
        justify-content: flex-end !important;
        min-width: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    html body .locations-settings-page .locations-header-action.mud-button-root {
        height: 42px !important;
        min-height: 42px !important;
        padding-inline: 16px !important;
        border-radius: 14px !important;
        border: 1px solid rgba(164, 177, 232, 0.26) !important;
        background:
            linear-gradient(135deg, rgba(145, 160, 216, 0.94), rgba(119, 133, 190, 0.90)) !important;
        color: rgba(8, 10, 15, 0.94) !important;
        font-size: 0.82rem !important;
        font-weight: 840 !important;
        letter-spacing: 0 !important;
        text-transform: none !important;
        box-shadow:
            0 16px 32px rgba(73, 86, 142, 0.16),
            inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
    }

    html body .locations-settings-page .locations-card-grid {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)) !important;
        align-items: stretch !important;
        gap: 18px !important;
        width: 100% !important;
    }

    html body .locations-settings-page .location-card {
        display: grid !important;
        grid-template-rows: auto minmax(82px, auto) minmax(0, 1fr) auto auto !important;
        gap: 15px !important;
        min-height: 276px !important;
        padding: 22px !important;
        border-radius: 20px !important;
        border: 1px solid rgba(198, 210, 255, 0.09) !important;
        background:
            radial-gradient(circle at 12% 0%, rgba(137, 151, 220, 0.055), transparent 40%),
            linear-gradient(180deg, rgba(17, 21, 31, 0.82), rgba(7, 10, 16, 0.88)) !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.035),
            0 16px 34px rgba(0, 0, 0, 0.14) !important;
    }

    html body .locations-settings-page .location-card:hover {
        border-color: rgba(198, 210, 255, 0.15) !important;
        transform: translateY(-1px) !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.045),
            0 20px 42px rgba(0, 0, 0, 0.18) !important;
    }

    html body .locations-settings-page .location-card-header {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: start !important;
        gap: 14px !important;
        min-height: 48px !important;
        margin: 0 !important;
    }

    html body .locations-settings-page .location-card-title-block {
        display: grid !important;
        gap: 6px !important;
        min-width: 0 !important;
    }

    html body .locations-settings-page .location-card-title {
        color: rgba(244, 241, 235, 0.93) !important;
        font-size: 1.12rem !important;
        font-weight: 840 !important;
        letter-spacing: 0 !important;
        line-height: 1.14 !important;
        display: -webkit-box !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: normal !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
    }

    html body .locations-settings-page .location-card-kind {
        color: rgba(181, 192, 246, 0.58) !important;
        font-size: 0.68rem !important;
        font-weight: 820 !important;
        letter-spacing: 0.12em !important;
        line-height: 1 !important;
        text-transform: uppercase !important;
    }

    html body .locations-settings-page .location-status-chip.mud-chip {
        height: 25px !important;
        min-height: 25px !important;
        padding-inline: 9px !important;
        border-radius: 999px !important;
        border-color: rgba(181, 192, 246, 0.24) !important;
        background: rgba(181, 192, 246, 0.075) !important;
        color: rgba(214, 221, 255, 0.84) !important;
        font-size: 0.66rem !important;
        font-weight: 820 !important;
        letter-spacing: 0.05em !important;
    }

    html body .locations-settings-page .location-card-address {
        display: grid !important;
        align-content: start !important;
        gap: 5px !important;
        min-height: 82px !important;
        padding: 14px 15px !important;
        border-radius: 16px !important;
        border: 1px solid rgba(198, 210, 255, 0.06) !important;
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.026), rgba(255, 255, 255, 0.012)) !important;
    }

    html body .locations-settings-page .location-card-address .app-line {
        display: -webkit-box !important;
        margin: 0 !important;
        color: rgba(244, 241, 235, 0.75) !important;
        font-size: 0.86rem !important;
        font-weight: 640 !important;
        line-height: 1.34 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 3 !important;
    }

    html body .locations-settings-page .location-card-notes {
        display: -webkit-box !important;
        color: rgba(196, 201, 214, 0.58) !important;
        font-size: 0.82rem !important;
        line-height: 1.38 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
    }

    html body .locations-settings-page .location-card-footer {
        padding-top: 13px !important;
        border-top: 1px solid rgba(198, 210, 255, 0.055) !important;
    }

    html body .locations-settings-page .location-card-footer .app-meta {
        color: rgba(196, 201, 214, 0.48) !important;
        font-size: 0.76rem !important;
        font-weight: 650 !important;
        line-height: 1.2 !important;
    }

    html body .locations-settings-page .location-card-actions {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 9px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    html body .locations-settings-page .location-card-actions .mud-button-root {
        height: 36px !important;
        min-height: 36px !important;
        min-width: 78px !important;
        padding-inline: 14px !important;
        border-radius: 12px !important;
        font-size: 0.76rem !important;
        font-weight: 820 !important;
        letter-spacing: 0 !important;
        text-transform: none !important;
    }
}

@media (min-width: 1024px) and (max-width: 1439.98px) {
    html body .locations-settings-page .locations-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* Settings Overview desktop polish.
 * This page is the index for all settings areas, so its cards define the
 * reference rhythm for scannable settings navigation.
 */
@media (min-width: 1024px) {
    html body .settings-overview-page {
        width: min(100%, 1500px) !important;
        max-width: 1500px !important;
    }

    html body .settings-overview-page .settings-page-header {
        margin-bottom: 28px !important;
        padding-bottom: 22px !important;
        border-bottom: 1px solid rgba(198, 210, 255, 0.07) !important;
    }

    html body .settings-overview-page .settings-page-header > div {
        display: grid !important;
        gap: 8px !important;
        max-width: 780px !important;
    }

    html body .settings-overview-page .app-page-title {
        margin: 0 !important;
        color: rgba(244, 241, 235, 0.94) !important;
        letter-spacing: 0 !important;
    }

    html body .settings-overview-page .settings-page-context {
        margin: 0 !important;
        max-width: 760px !important;
        color: rgba(196, 201, 214, 0.66) !important;
        font-size: 0.96rem !important;
        line-height: 1.35 !important;
    }

    html body .settings-overview-page .settings-section {
        display: grid !important;
        gap: 14px !important;
        margin: 0 0 34px !important;
    }

    html body .settings-overview-page .settings-section:last-child {
        margin-bottom: 0 !important;
    }

    html body .settings-overview-page .settings-overview-secondary {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        align-items: stretch !important;
        gap: 22px !important;
        width: 100% !important;
        margin: 0 0 34px !important;
    }

    html body .settings-overview-page .settings-overview-secondary .settings-section {
        margin: 0 !important;
    }

    html body .settings-overview-page .settings-section-header {
        display: grid !important;
        gap: 6px !important;
        max-width: 760px !important;
        margin: 0 !important;
    }

    html body .settings-overview-page .settings-section-title {
        margin: 0 !important;
        color: rgba(244, 241, 235, 0.84) !important;
        font-size: 0.92rem !important;
        font-weight: 850 !important;
        letter-spacing: 0.10em !important;
        line-height: 1 !important;
        text-transform: uppercase !important;
    }

    html body .settings-overview-page .settings-section-header .soft-muted {
        margin: 0 !important;
        color: rgba(196, 201, 214, 0.60) !important;
        font-size: 0.9rem !important;
        line-height: 1.34 !important;
    }

    html body .settings-overview-page .settings-overview-grid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        align-items: stretch !important;
        gap: 18px !important;
        width: 100% !important;
    }

    html body .settings-overview-page .settings-household-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }

    html body .settings-overview-page .settings-overview-secondary .settings-overview-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html body .settings-overview-page .settings-overview-card {
        display: grid !important;
        grid-template-rows: auto minmax(0, 1fr) auto !important;
        gap: 16px !important;
        min-height: 232px !important;
        padding: 22px !important;
        border-radius: 20px !important;
        border: 1px solid rgba(198, 210, 255, 0.09) !important;
        background:
            radial-gradient(circle at 12% 0%, rgba(137, 151, 220, 0.050), transparent 40%),
            linear-gradient(180deg, rgba(17, 21, 31, 0.82), rgba(7, 10, 16, 0.88)) !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.035),
            0 16px 34px rgba(0, 0, 0, 0.14) !important;
    }

    html body .settings-overview-page .settings-overview-card:hover {
        border-color: rgba(198, 210, 255, 0.15) !important;
        transform: translateY(-1px) !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.045),
            0 20px 42px rgba(0, 0, 0, 0.18) !important;
    }

    html body .settings-overview-page .settings-card-top {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: start !important;
        gap: 14px !important;
        min-height: 108px !important;
        margin: 0 !important;
    }

    html body .settings-overview-page .settings-card-top > div {
        display: grid !important;
        gap: 10px !important;
        min-width: 0 !important;
    }

    html body .settings-overview-page .settings-card-title {
        color: rgba(244, 241, 235, 0.93) !important;
        font-size: 1.03rem !important;
        font-weight: 840 !important;
        letter-spacing: 0 !important;
        line-height: 1.16 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    html body .settings-overview-page .settings-card-top .soft-muted {
        display: -webkit-box !important;
        margin: 0 !important;
        color: rgba(196, 201, 214, 0.62) !important;
        font-size: 0.88rem !important;
        font-weight: 650 !important;
        line-height: 1.38 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 3 !important;
    }

    html body .settings-overview-page .settings-card-top .mud-chip {
        height: 25px !important;
        min-height: 25px !important;
        padding-inline: 9px !important;
        border-radius: 999px !important;
        border-color: rgba(181, 192, 246, 0.22) !important;
        background: rgba(181, 192, 246, 0.070) !important;
        color: rgba(214, 221, 255, 0.82) !important;
        font-size: 0.66rem !important;
        font-weight: 820 !important;
        letter-spacing: 0.02em !important;
        white-space: nowrap !important;
    }

    html body .settings-overview-page .settings-card-actions {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 9px !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding-top: 13px !important;
        border-top: 1px solid rgba(198, 210, 255, 0.055) !important;
    }

    html body .settings-overview-page .settings-card-actions .mud-button-root {
        height: 36px !important;
        min-height: 36px !important;
        min-width: 104px !important;
        padding-inline: 14px !important;
        border-radius: 12px !important;
        font-size: 0.76rem !important;
        font-weight: 820 !important;
        letter-spacing: 0 !important;
        text-transform: none !important;
    }

    html body .settings-overview-page .settings-timezone-card .settings-card-top {
        min-height: 96px !important;
    }

    html body .settings-overview-page .settings-timezone-actions {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: end !important;
        gap: 10px !important;
        padding-top: 13px !important;
    }

    html body .settings-overview-page .settings-timezone-select,
    html body .settings-overview-page .settings-timezone-select .mud-input-control,
    html body .settings-overview-page .settings-timezone-select .mud-input-control-input-container,
    html body .settings-overview-page .settings-timezone-select .mud-input {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    html body .settings-overview-page .settings-audit-card {
        border-color: rgba(198, 210, 255, 0.12) !important;
        background:
            radial-gradient(circle at 14% 0%, rgba(181, 192, 246, 0.060), transparent 42%),
            linear-gradient(180deg, rgba(18, 22, 33, 0.88), rgba(8, 11, 18, 0.91)) !important;
    }

    html body .settings-overview-page .settings-audit-card .settings-card-top {
        min-height: 118px !important;
    }
}

@media (min-width: 1024px) and (max-width: 1439.98px) {
    html body .settings-overview-page .settings-overview-grid,
    html body .settings-overview-page .settings-household-grid,
    html body .settings-overview-page .settings-system-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    html body .settings-overview-page .settings-overview-secondary {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* Settings Stores desktop polish.
 * Keeps preferred stores as procurement records: store name first, category
 * and active state second, metadata in a compact panel, actions on a fixed rail.
 */
@media (min-width: 1024px) {
    html body .stores-settings-page {
        width: min(100%, 1500px) !important;
        max-width: 1500px !important;
    }

    html body .stores-settings-page .app-page-shell-header {
        margin-bottom: 22px !important;
        padding-bottom: 22px !important;
        border-bottom: 1px solid rgba(198, 210, 255, 0.07) !important;
    }

    html body .stores-settings-page .app-page-shell-copy {
        display: grid !important;
        gap: 8px !important;
        max-width: 780px !important;
    }

    html body .stores-settings-page .app-page-title {
        margin: 0 !important;
        color: rgba(244, 241, 235, 0.94) !important;
        letter-spacing: 0 !important;
    }

    html body .stores-settings-page .app-page-context {
        margin: 0 !important;
        max-width: 760px !important;
        color: rgba(196, 201, 214, 0.66) !important;
        font-size: 0.96rem !important;
        line-height: 1.35 !important;
    }

    html body .stores-settings-page .app-page-shell-toolbar {
        align-self: center !important;
        display: flex !important;
        justify-content: flex-end !important;
        min-width: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    html body .stores-settings-page .stores-header-action.mud-button-root {
        height: 42px !important;
        min-height: 42px !important;
        padding-inline: 16px !important;
        border-radius: 14px !important;
        border: 1px solid rgba(164, 177, 232, 0.26) !important;
        background:
            linear-gradient(135deg, rgba(145, 160, 216, 0.94), rgba(119, 133, 190, 0.90)) !important;
        color: rgba(8, 10, 15, 0.94) !important;
        font-size: 0.82rem !important;
        font-weight: 840 !important;
        letter-spacing: 0 !important;
        text-transform: none !important;
        box-shadow:
            0 16px 32px rgba(73, 86, 142, 0.16),
            inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
    }

    html body .stores-settings-page .stores-card-grid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        align-items: stretch !important;
        gap: 18px !important;
        width: 100% !important;
    }

    html body .stores-settings-page .store-card {
        display: grid !important;
        grid-template-rows: auto auto minmax(38px, 1fr) auto auto !important;
        gap: 15px !important;
        min-height: 282px !important;
        height: 100% !important;
        padding: 22px !important;
        border-radius: 20px !important;
        border: 1px solid rgba(198, 210, 255, 0.09) !important;
        background:
            radial-gradient(circle at 12% 0%, rgba(137, 151, 220, 0.055), transparent 40%),
            linear-gradient(180deg, rgba(17, 21, 31, 0.82), rgba(7, 10, 16, 0.88)) !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.035),
            0 16px 34px rgba(0, 0, 0, 0.14) !important;
    }

    html body .stores-settings-page .store-card:hover {
        border-color: rgba(198, 210, 255, 0.15) !important;
        transform: translateY(-1px) !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.045),
            0 20px 42px rgba(0, 0, 0, 0.18) !important;
    }

    html body .stores-settings-page .store-card-header {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: start !important;
        gap: 14px !important;
        min-height: 52px !important;
        margin: 0 !important;
    }

    html body .stores-settings-page .store-card-title-block {
        display: grid !important;
        gap: 7px !important;
        min-width: 0 !important;
    }

    html body .stores-settings-page .store-card-title {
        display: -webkit-box !important;
        color: rgba(244, 241, 235, 0.93) !important;
        font-size: 1.12rem !important;
        font-weight: 840 !important;
        letter-spacing: 0 !important;
        line-height: 1.14 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: normal !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
    }

    html body .stores-settings-page .store-card-kind {
        color: rgba(181, 192, 246, 0.58) !important;
        font-size: 0.68rem !important;
        font-weight: 820 !important;
        letter-spacing: 0.12em !important;
        line-height: 1 !important;
        text-transform: uppercase !important;
    }

    html body .stores-settings-page .store-status-chip.mud-chip {
        height: 25px !important;
        min-height: 25px !important;
        padding-inline: 9px !important;
        border-radius: 999px !important;
        border-color: rgba(181, 192, 246, 0.24) !important;
        background: rgba(181, 192, 246, 0.075) !important;
        color: rgba(214, 221, 255, 0.84) !important;
        font-size: 0.66rem !important;
        font-weight: 820 !important;
        letter-spacing: 0.05em !important;
    }

    html body .stores-settings-page .store-card-meta-panel {
        display: grid !important;
        align-content: start !important;
        gap: 10px !important;
        min-height: 88px !important;
        padding: 14px 15px !important;
        border-radius: 16px !important;
        border: 1px solid rgba(198, 210, 255, 0.06) !important;
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.026), rgba(255, 255, 255, 0.012)) !important;
    }

    html body .stores-settings-page .store-card-meta-row {
        display: grid !important;
        grid-template-columns: 92px minmax(0, 1fr) !important;
        align-items: baseline !important;
        gap: 12px !important;
        min-width: 0 !important;
    }

    html body .stores-settings-page .store-card-meta-label {
        color: rgba(181, 192, 246, 0.46) !important;
        font-size: 0.65rem !important;
        font-weight: 820 !important;
        letter-spacing: 0.12em !important;
        line-height: 1.1 !important;
        text-transform: uppercase !important;
        white-space: nowrap !important;
    }

    html body .stores-settings-page .store-card-meta-value {
        min-width: 0 !important;
        overflow: hidden !important;
        color: rgba(244, 241, 235, 0.72) !important;
        font-size: 0.86rem !important;
        font-weight: 650 !important;
        line-height: 1.3 !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    html body .stores-settings-page .store-card-notes {
        display: -webkit-box !important;
        color: rgba(196, 201, 214, 0.58) !important;
        font-size: 0.82rem !important;
        line-height: 1.38 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
    }

    html body .stores-settings-page .store-card-footer {
        padding-top: 13px !important;
        border-top: 1px solid rgba(198, 210, 255, 0.055) !important;
    }

    html body .stores-settings-page .store-card-footer .app-meta {
        color: rgba(196, 201, 214, 0.48) !important;
        font-size: 0.76rem !important;
        font-weight: 650 !important;
        line-height: 1.2 !important;
    }

    html body .stores-settings-page .store-card-actions {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 9px !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
    }

    html body .stores-settings-page .store-card-actions .mud-button-root {
        height: 36px !important;
        min-height: 36px !important;
        min-width: 78px !important;
        padding-inline: 14px !important;
        border-radius: 12px !important;
        font-size: 0.76rem !important;
        font-weight: 820 !important;
        letter-spacing: 0 !important;
        text-transform: none !important;
    }
}

@media (min-width: 1024px) and (max-width: 1439.98px) {
    html body .stores-settings-page .stores-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (min-width: 1800px) {
    html body .stores-settings-page .stores-card-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

/* Settings Users desktop polish.
 * Converts access rows into composed user records with name, role, email,
 * sign-in state, and actions presented as a settings entity card.
 */
@media (min-width: 1024px) {
    html body .users-settings-page {
        width: min(100%, 1500px) !important;
        max-width: 1500px !important;
    }

    html body .users-settings-page .app-page-shell-header {
        margin-bottom: 22px !important;
        padding-bottom: 22px !important;
        border-bottom: 1px solid rgba(198, 210, 255, 0.07) !important;
    }

    html body .users-settings-page .app-page-shell-copy {
        display: grid !important;
        gap: 8px !important;
        max-width: 780px !important;
    }

    html body .users-settings-page .app-page-title {
        margin: 0 !important;
        color: rgba(244, 241, 235, 0.94) !important;
        letter-spacing: 0 !important;
    }

    html body .users-settings-page .app-page-context {
        margin: 0 !important;
        max-width: 760px !important;
        color: rgba(196, 201, 214, 0.66) !important;
        font-size: 0.96rem !important;
        line-height: 1.35 !important;
    }

    html body .users-settings-page .app-page-shell-toolbar {
        align-self: center !important;
        display: flex !important;
        justify-content: flex-end !important;
        min-width: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    html body .users-settings-page .users-header-action.mud-button-root {
        height: 42px !important;
        min-height: 42px !important;
        padding-inline: 16px !important;
        border-radius: 14px !important;
        border: 1px solid rgba(164, 177, 232, 0.26) !important;
        background:
            linear-gradient(135deg, rgba(145, 160, 216, 0.94), rgba(119, 133, 190, 0.90)) !important;
        color: rgba(8, 10, 15, 0.94) !important;
        font-size: 0.82rem !important;
        font-weight: 840 !important;
        letter-spacing: 0 !important;
        text-transform: none !important;
        box-shadow:
            0 16px 32px rgba(73, 86, 142, 0.16),
            inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
    }

    html body .users-settings-page .users-card-grid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        align-items: stretch !important;
        gap: 18px !important;
        width: 100% !important;
    }

    html body .users-settings-page .users-card {
        display: grid !important;
        grid-template-areas: none !important;
        grid-template-columns: none !important;
        grid-template-rows: auto auto minmax(0, 1fr) auto !important;
        align-items: stretch !important;
        gap: 15px !important;
        min-height: 286px !important;
        height: 100% !important;
        padding: 22px !important;
        border-radius: 20px !important;
        border: 1px solid rgba(198, 210, 255, 0.09) !important;
        background:
            radial-gradient(circle at 12% 0%, rgba(137, 151, 220, 0.055), transparent 40%),
            linear-gradient(180deg, rgba(17, 21, 31, 0.82), rgba(7, 10, 16, 0.88)) !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.035),
            0 16px 34px rgba(0, 0, 0, 0.14) !important;
    }

    html body .users-settings-page .users-card:hover {
        border-color: rgba(198, 210, 255, 0.15) !important;
        transform: translateY(-1px) !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.045),
            0 20px 42px rgba(0, 0, 0, 0.18) !important;
    }

    html body .users-settings-page .users-card-header {
        grid-area: auto !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: start !important;
        gap: 14px !important;
        min-height: 54px !important;
        margin: 0 !important;
    }

    html body .users-settings-page .users-card-title-block {
        display: grid !important;
        gap: 7px !important;
        min-width: 0 !important;
    }

    html body .users-settings-page .users-card-name {
        display: -webkit-box !important;
        color: rgba(244, 241, 235, 0.93) !important;
        font-size: 1.12rem !important;
        font-weight: 840 !important;
        letter-spacing: 0 !important;
        line-height: 1.14 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: normal !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
    }

    html body .users-settings-page .users-card-kind {
        color: rgba(181, 192, 246, 0.58) !important;
        font-size: 0.68rem !important;
        font-weight: 820 !important;
        letter-spacing: 0.12em !important;
        line-height: 1 !important;
        text-transform: uppercase !important;
    }

    html body .users-settings-page .users-role-chip.mud-chip,
    html body .users-settings-page .users-status-chip.mud-chip,
    html body .users-settings-page .users-staff-chip.mud-chip {
        height: 25px !important;
        min-height: 25px !important;
        padding-inline: 9px !important;
        border-radius: 999px !important;
        border-color: rgba(181, 192, 246, 0.24) !important;
        background: rgba(181, 192, 246, 0.075) !important;
        color: rgba(214, 221, 255, 0.84) !important;
        font-size: 0.66rem !important;
        font-weight: 820 !important;
        letter-spacing: 0.05em !important;
    }

    html body .users-settings-page .users-status-chip.mud-chip {
        border-color: rgba(166, 180, 242, 0.25) !important;
        background: rgba(166, 180, 242, 0.12) !important;
    }

    html body .users-settings-page .users-card-meta-panel {
        grid-area: auto !important;
        display: grid !important;
        align-content: start !important;
        gap: 10px !important;
        min-height: 112px !important;
        padding: 14px 15px !important;
        border-radius: 16px !important;
        border: 1px solid rgba(198, 210, 255, 0.06) !important;
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.026), rgba(255, 255, 255, 0.012)) !important;
    }

    html body .users-settings-page .users-card-meta-row {
        display: grid !important;
        grid-template-columns: 70px minmax(0, 1fr) !important;
        align-items: baseline !important;
        gap: 12px !important;
        min-width: 0 !important;
    }

    html body .users-settings-page .users-card-meta-label {
        color: rgba(181, 192, 246, 0.46) !important;
        font-size: 0.65rem !important;
        font-weight: 820 !important;
        letter-spacing: 0.12em !important;
        line-height: 1.1 !important;
        text-transform: uppercase !important;
        white-space: nowrap !important;
    }

    html body .users-settings-page .users-card-meta-value {
        min-width: 0 !important;
        overflow: hidden !important;
        color: rgba(244, 241, 235, 0.72) !important;
        font-size: 0.86rem !important;
        font-weight: 650 !important;
        line-height: 1.3 !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    html body .users-settings-page .users-card-footer {
        grid-area: auto !important;
        padding-top: 13px !important;
        border-top: 1px solid rgba(198, 210, 255, 0.055) !important;
    }

    html body .users-settings-page .users-card-status-row {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 8px !important;
        min-height: 25px !important;
    }

    html body .users-settings-page .users-card-actions {
        grid-area: auto !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 9px !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
    }

    html body .users-settings-page .users-card-actions .mud-button-root {
        height: 36px !important;
        min-height: 36px !important;
        width: auto !important;
        min-width: 78px !important;
        padding-inline: 14px !important;
        border-radius: 12px !important;
        font-size: 0.76rem !important;
        font-weight: 820 !important;
        letter-spacing: 0 !important;
        text-transform: none !important;
    }
}

@media (min-width: 1800px) {
    html body .users-settings-page .users-card-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

@media (min-width: 1024px) and (max-width: 1439.98px) {
    html body .users-settings-page .users-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* Settings Vehicles desktop polish.
 * Presents fleet records as equal-height operational cards with the vehicle
 * name as the primary read, restrained metadata, and a quieter archive action.
 */
@media (min-width: 1024px) {
    html body .vehicles-settings-page {
        width: min(100%, 1500px) !important;
        max-width: 1500px !important;
    }

    html body .vehicles-settings-page .app-page-shell-header {
        margin-bottom: 22px !important;
        padding-bottom: 22px !important;
        border-bottom: 1px solid rgba(198, 210, 255, 0.07) !important;
    }

    html body .vehicles-settings-page .app-page-shell-copy {
        display: grid !important;
        gap: 8px !important;
        max-width: 780px !important;
    }

    html body .vehicles-settings-page .app-page-title {
        margin: 0 !important;
        color: rgba(244, 241, 235, 0.94) !important;
        letter-spacing: 0 !important;
    }

    html body .vehicles-settings-page .app-page-context {
        margin: 0 !important;
        max-width: 760px !important;
        color: rgba(196, 201, 214, 0.66) !important;
        font-size: 0.96rem !important;
        line-height: 1.35 !important;
    }

    html body .vehicles-settings-page .app-page-shell-toolbar {
        align-self: center !important;
        display: flex !important;
        justify-content: flex-end !important;
        min-width: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    html body .vehicles-settings-page .vehicles-header-action.mud-button-root {
        height: 42px !important;
        min-height: 42px !important;
        padding-inline: 16px !important;
        border-radius: 14px !important;
        border: 1px solid rgba(164, 177, 232, 0.26) !important;
        background:
            linear-gradient(135deg, rgba(145, 160, 216, 0.94), rgba(119, 133, 190, 0.90)) !important;
        color: rgba(8, 10, 15, 0.94) !important;
        font-size: 0.82rem !important;
        font-weight: 840 !important;
        letter-spacing: 0 !important;
        text-transform: none !important;
        box-shadow:
            0 16px 32px rgba(73, 86, 142, 0.16),
            inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
    }

    html body .vehicles-settings-page .vehicles-card-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        align-items: stretch !important;
        gap: 20px !important;
        width: 100% !important;
        max-width: none !important;
    }

    html body .vehicles-settings-page .vehicles-data-desktop {
        width: 100% !important;
        max-width: none !important;
    }

    html body .vehicles-settings-page .vehicle-card {
        display: grid !important;
        grid-template-areas: none !important;
        grid-template-columns: none !important;
        grid-template-rows: auto minmax(0, 1fr) auto auto !important;
        align-items: stretch !important;
        gap: 16px !important;
        min-height: 272px !important;
        height: 100% !important;
        padding: 23px !important;
        border-radius: 20px !important;
        border: 1px solid rgba(198, 210, 255, 0.09) !important;
        background:
            radial-gradient(circle at 12% 0%, rgba(137, 151, 220, 0.055), transparent 40%),
            linear-gradient(180deg, rgba(17, 21, 31, 0.82), rgba(7, 10, 16, 0.88)) !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.035),
            0 16px 34px rgba(0, 0, 0, 0.14) !important;
    }

    html body .vehicles-settings-page .vehicle-card:hover {
        border-color: rgba(198, 210, 255, 0.15) !important;
        transform: translateY(-1px) !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.045),
            0 20px 42px rgba(0, 0, 0, 0.18) !important;
    }

    html body .vehicles-settings-page .vehicle-card-header {
        grid-area: auto !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: start !important;
        gap: 14px !important;
        min-height: 58px !important;
        margin: 0 !important;
    }

    html body .vehicles-settings-page .vehicle-card-title-block {
        display: grid !important;
        gap: 7px !important;
        min-width: 0 !important;
    }

    html body .vehicles-settings-page .vehicle-card-title {
        display: -webkit-box !important;
        color: rgba(244, 241, 235, 0.94) !important;
        font-size: 1.15rem !important;
        font-weight: 850 !important;
        letter-spacing: 0 !important;
        line-height: 1.14 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: normal !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
    }

    html body .vehicles-settings-page .vehicle-card-kind {
        overflow: hidden !important;
        color: rgba(181, 192, 246, 0.58) !important;
        font-size: 0.68rem !important;
        font-weight: 820 !important;
        letter-spacing: 0.12em !important;
        line-height: 1 !important;
        text-overflow: ellipsis !important;
        text-transform: uppercase !important;
        white-space: nowrap !important;
    }

    html body .vehicles-settings-page .vehicle-location-chip.mud-chip {
        height: 25px !important;
        min-height: 25px !important;
        max-width: 170px !important;
        padding-inline: 9px !important;
        border-radius: 999px !important;
        border-color: rgba(181, 192, 246, 0.24) !important;
        background: rgba(181, 192, 246, 0.075) !important;
        color: rgba(214, 221, 255, 0.84) !important;
        font-size: 0.66rem !important;
        font-weight: 820 !important;
        letter-spacing: 0.05em !important;
    }

    html body .vehicles-settings-page .vehicle-location-chip .mud-chip-content {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    html body .vehicles-settings-page .vehicle-card-meta-panel {
        grid-area: auto !important;
        display: grid !important;
        align-content: start !important;
        gap: 10px !important;
        min-height: 112px !important;
        padding: 14px 15px !important;
        border-radius: 16px !important;
        border: 1px solid rgba(198, 210, 255, 0.06) !important;
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.026), rgba(255, 255, 255, 0.012)) !important;
    }

    html body .vehicles-settings-page .vehicle-card-meta-row {
        display: grid !important;
        grid-template-columns: 74px minmax(0, 1fr) !important;
        align-items: baseline !important;
        gap: 12px !important;
        min-width: 0 !important;
    }

    html body .vehicles-settings-page .vehicle-card-meta-label {
        color: rgba(181, 192, 246, 0.46) !important;
        font-size: 0.65rem !important;
        font-weight: 820 !important;
        letter-spacing: 0.12em !important;
        line-height: 1.1 !important;
        text-transform: uppercase !important;
        white-space: nowrap !important;
    }

    html body .vehicles-settings-page .vehicle-card-meta-value {
        min-width: 0 !important;
        overflow: hidden !important;
        color: rgba(244, 241, 235, 0.72) !important;
        font-size: 0.86rem !important;
        font-weight: 650 !important;
        line-height: 1.3 !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    html body .vehicles-settings-page .vehicle-card-footer {
        grid-area: auto !important;
        padding-top: 13px !important;
        border-top: 1px solid rgba(198, 210, 255, 0.055) !important;
    }

    html body .vehicles-settings-page .vehicle-card-footer .app-meta {
        color: rgba(196, 201, 214, 0.48) !important;
        font-size: 0.76rem !important;
        font-weight: 650 !important;
        line-height: 1.2 !important;
    }

    html body .vehicles-settings-page .vehicle-card-actions {
        grid-area: auto !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 9px !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
    }

    html body .vehicles-settings-page .vehicle-card-actions .mud-button-root {
        height: 36px !important;
        min-height: 36px !important;
        width: auto !important;
        min-width: 78px !important;
        padding-inline: 14px !important;
        border-radius: 12px !important;
        font-size: 0.76rem !important;
        font-weight: 820 !important;
        letter-spacing: 0 !important;
        text-transform: none !important;
    }

    html body .vehicles-settings-page .vehicle-card-actions .mud-button-outlined-error {
        border-color: rgba(218, 197, 166, 0.18) !important;
        background: rgba(218, 197, 166, 0.035) !important;
        color: rgba(218, 197, 166, 0.70) !important;
    }
}

@media (min-width: 1024px) and (max-width: 1439.98px) {
    html body .vehicles-settings-page .vehicles-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* Shopping desktop operational polish.
 * Flattens the procurement queue into a compact store board: filter chips,
 * needed store groups, item rows, and a subdued bought ledger.
 */
@media (min-width: 1024px) {
    html body .procurement-page {
        width: min(100%, 1560px) !important;
        max-width: 1560px !important;
    }

    html body .procurement-page .app-page-shell-header {
        margin-bottom: 18px !important;
        padding-bottom: 22px !important;
        border-bottom: 1px solid rgba(198, 210, 255, 0.07) !important;
    }

    html body .procurement-page .app-page-shell-copy {
        display: grid !important;
        gap: 8px !important;
        max-width: 780px !important;
    }

    html body .procurement-page .app-page-title {
        margin: 0 !important;
        color: rgba(244, 241, 235, 0.94) !important;
        letter-spacing: 0 !important;
    }

    html body .procurement-page .app-page-context {
        margin: 0 !important;
        max-width: 760px !important;
        color: rgba(196, 201, 214, 0.66) !important;
        font-size: 0.96rem !important;
        line-height: 1.35 !important;
    }

    html body .procurement-page .app-page-shell-toolbar {
        align-self: center !important;
        display: flex !important;
        justify-content: flex-end !important;
        min-width: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    html body .procurement-page .shopping-header-action.mud-button-root {
        height: 42px !important;
        min-height: 42px !important;
        padding-inline: 16px !important;
        border-radius: 14px !important;
        border: 1px solid rgba(164, 177, 232, 0.26) !important;
        background:
            linear-gradient(135deg, rgba(145, 160, 216, 0.94), rgba(119, 133, 190, 0.90)) !important;
        color: rgba(8, 10, 15, 0.94) !important;
        font-size: 0.82rem !important;
        font-weight: 840 !important;
        letter-spacing: 0 !important;
        text-transform: none !important;
        box-shadow:
            0 16px 32px rgba(73, 86, 142, 0.16),
            inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
    }

    html body .procurement-page .shopping-filter-card {
        width: 100% !important;
        max-width: none !important;
        margin: 0 0 14px !important;
        padding: 0 !important;
        border-radius: 17px !important;
        border: 1px solid rgba(198, 210, 255, 0.075) !important;
        background: rgba(13, 16, 24, 0.66) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.026) !important;
    }

    html body .procurement-page .shopping-filter-shell {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 14px !important;
        min-height: 54px !important;
        padding: 12px 14px !important;
    }

    html body .procurement-page .shopping-filter-header {
        display: flex !important;
        align-items: center !important;
        min-width: max-content !important;
        margin: 0 !important;
    }

    html body .procurement-page .shopping-filter-header .mud-typography {
        color: rgba(181, 192, 246, 0.52) !important;
        font-size: 0.66rem !important;
        font-weight: 840 !important;
        letter-spacing: 0.14em !important;
        line-height: 1 !important;
        text-transform: uppercase !important;
    }

    html body .procurement-page .shopping-filter-chips {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 7px !important;
        min-width: 0 !important;
    }

    html body .procurement-page .shopping-filter-chips .mud-chip {
        height: 25px !important;
        min-height: 25px !important;
        max-width: 290px !important;
        padding-inline: 9px !important;
        border-radius: 999px !important;
        font-size: 0.66rem !important;
        font-weight: 800 !important;
        letter-spacing: 0 !important;
    }

    html body .procurement-page .shopping-filter-chips .mud-chip-content {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    html body .procurement-page .shopping-operational-stack.mud-stack {
        display: grid !important;
        gap: 16px !important;
        width: 100% !important;
    }

    html body .procurement-page .shopping-section-card {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        align-items: start !important;
        gap: 14px !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 16px !important;
        border-radius: 19px !important;
        border: 1px solid rgba(198, 210, 255, 0.085) !important;
        background: rgba(12, 15, 23, 0.56) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.026) !important;
    }

    html body .procurement-page .shopping-section-header {
        grid-column: 1 / -1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        min-height: 34px !important;
        margin: 0 !important;
        padding: 0 0 10px !important;
        border-bottom: 1px solid rgba(198, 210, 255, 0.06) !important;
    }

    html body .procurement-page .shopping-section-header .mud-typography-h6 {
        margin: 0 !important;
        color: rgba(244, 241, 235, 0.90) !important;
        font-size: 1.02rem !important;
        font-weight: 820 !important;
        letter-spacing: 0 !important;
        line-height: 1.1 !important;
    }

    html body .procurement-page .shopping-section-header .mud-chip {
        height: 24px !important;
        min-height: 24px !important;
        border-color: rgba(181, 192, 246, 0.20) !important;
        background: rgba(181, 192, 246, 0.06) !important;
        color: rgba(214, 221, 255, 0.76) !important;
        font-size: 0.66rem !important;
        font-weight: 820 !important;
    }

    html body .procurement-page .shopping-store-group {
        display: grid !important;
        gap: 10px !important;
        min-width: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 14px !important;
        border-radius: 17px !important;
        border: 1px solid rgba(198, 210, 255, 0.075) !important;
        background:
            linear-gradient(180deg, rgba(19, 23, 33, 0.70), rgba(10, 13, 20, 0.66)) !important;
        box-shadow: none !important;
    }

    html body .procurement-page .shopping-store-header {
        display: flex !important;
        align-items: flex-start !important;
        justify-content: space-between !important;
        gap: 12px !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 0 10px !important;
        border-bottom: 1px solid rgba(198, 210, 255, 0.055) !important;
    }

    html body .procurement-page .shopping-store-header > div:first-child {
        min-width: 0 !important;
    }

    html body .procurement-page .shopping-store-header .mud-typography-h6,
    html body .procurement-page .shopping-store-header .mud-typography-subtitle1 {
        max-width: 100% !important;
        margin: 0 !important;
        overflow: hidden !important;
        color: rgba(244, 241, 235, 0.88) !important;
        font-size: 0.94rem !important;
        font-weight: 820 !important;
        letter-spacing: 0 !important;
        line-height: 1.15 !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    html body .procurement-page .shopping-store-meta {
        margin-top: 3px !important;
        color: rgba(196, 201, 214, 0.50) !important;
        font-size: 0.74rem !important;
        font-weight: 680 !important;
        line-height: 1.15 !important;
    }

    html body .procurement-page .shopping-store-badges {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 6px !important;
        min-width: max-content !important;
    }

    html body .procurement-page .shopping-store-badges .mud-chip {
        height: 23px !important;
        min-height: 23px !important;
        padding-inline: 8px !important;
        border-color: rgba(181, 192, 246, 0.18) !important;
        background: rgba(181, 192, 246, 0.045) !important;
        color: rgba(214, 221, 255, 0.64) !important;
        font-size: 0.61rem !important;
        font-weight: 820 !important;
    }

    html body .procurement-page .shopping-item-list {
        display: grid !important;
        gap: 0 !important;
        overflow: hidden !important;
        border-radius: 14px !important;
        border: 1px solid rgba(198, 210, 255, 0.055) !important;
        background: rgba(7, 10, 16, 0.28) !important;
    }

    html body .procurement-page .shopping-item-row,
    html body .procurement-page .shopping-item-row.bought {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 12px !important;
        min-height: 58px !important;
        margin: 0 !important;
        padding: 10px 12px !important;
        border: 0 !important;
        border-top: 1px solid rgba(198, 210, 255, 0.052) !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    html body .procurement-page .shopping-item-list .shopping-item-row:first-child {
        border-top: 0 !important;
    }

    html body .procurement-page .shopping-item-row:hover {
        background: rgba(181, 192, 246, 0.045) !important;
        transform: none !important;
    }

    html body .procurement-page .shopping-item-row-important {
        background:
            linear-gradient(90deg, rgba(218, 197, 166, 0.060), transparent 32%) !important;
    }

    html body .procurement-page .shopping-item-main {
        display: grid !important;
        align-content: center !important;
        gap: 4px !important;
        min-width: 0 !important;
    }

    html body .procurement-page .shopping-item-topline {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        min-width: 0 !important;
    }

    html body .procurement-page .shopping-item-name {
        min-width: 0 !important;
        overflow: hidden !important;
        color: rgba(244, 241, 235, 0.88) !important;
        font-size: 0.87rem !important;
        font-weight: 810 !important;
        letter-spacing: 0 !important;
        line-height: 1.16 !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    html body .procurement-page .shopping-item-detail,
    html body .procurement-page .shopping-item-meta {
        min-width: 0 !important;
        overflow: hidden !important;
        color: rgba(196, 201, 214, 0.52) !important;
        font-size: 0.70rem !important;
        font-weight: 650 !important;
        line-height: 1.18 !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    html body .procurement-page .shopping-item-badges {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 5px !important;
        min-width: 0 !important;
    }

    html body .procurement-page .shopping-pill {
        display: inline-flex !important;
        align-items: center !important;
        min-height: 20px !important;
        padding: 2px 7px !important;
        border-radius: 999px !important;
        font-size: 0.61rem !important;
        font-weight: 820 !important;
        line-height: 1 !important;
    }

    html body .procurement-page .shopping-item-actions {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 7px !important;
        min-width: max-content !important;
    }

    html body .procurement-page .shopping-item-primary-action {
        display: flex !important;
        align-items: center !important;
    }

    html body .procurement-page .shopping-item-bought-button.mud-button-root {
        height: 34px !important;
        min-height: 34px !important;
        min-width: 76px !important;
        padding-inline: 12px !important;
        border-radius: 11px !important;
        font-size: 0.72rem !important;
        font-weight: 830 !important;
        letter-spacing: 0 !important;
        text-transform: none !important;
    }

    html body .procurement-page .shopping-item-actions .mud-menu,
    html body .procurement-page .shopping-item-actions .mud-menu-button,
    html body .procurement-page .shopping-item-actions .mud-menu-button-root,
    html body .procurement-page .shopping-item-actions .mud-icon-button-root {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        min-height: 34px !important;
    }

    html body .procurement-page .shopping-bought-panels {
        width: 100% !important;
        margin: 0 !important;
        border-radius: 18px !important;
        border: 1px solid rgba(198, 210, 255, 0.060) !important;
        background: rgba(10, 13, 20, 0.46) !important;
        box-shadow: none !important;
        opacity: 0.82 !important;
    }

    html body .procurement-page .shopping-bought-panels .mud-expand-panel {
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    html body .procurement-page .shopping-bought-panels .mud-expand-panel-header {
        min-height: 48px !important;
        padding: 0 14px !important;
    }

    html body .procurement-page .shopping-bought-panels .mud-expand-panel-content {
        padding: 0 14px 14px !important;
    }

    html body .procurement-page .shopping-bought-panels .shopping-section-header {
        min-height: 48px !important;
        padding: 0 !important;
        border-bottom: 0 !important;
    }

    html body .procurement-page .shopping-store-group-bought {
        margin-top: 10px !important;
        background: rgba(13, 16, 24, 0.54) !important;
        opacity: 0.78 !important;
    }

    html body .procurement-page .shopping-empty-bought {
        display: block !important;
        padding: 10px 2px 2px !important;
        color: rgba(196, 201, 214, 0.50) !important;
        font-size: 0.82rem !important;
        line-height: 1.35 !important;
    }
}

@media (min-width: 1024px) and (max-width: 1439.98px) {
    html body .procurement-page .shopping-section-card {
        grid-template-columns: 1fr !important;
    }

    html body .procurement-page .shopping-filter-shell {
        grid-template-columns: 1fr !important;
        align-items: start !important;
    }
}

/*
 * Today approved desktop restore.
 * Keeps the daily brief as the known-good vertical flow and prevents old
 * desktop layout experiments from flattening the timeline or exposing drawer
 * scroll chrome.
 */
@media (min-width: 1024px) {
    html body .mud-drawer.app-drawer,
    html body .mud-drawer.app-drawer.mud-drawer,
    html body .mud-drawer.app-drawer .mud-drawer-content {
        height: calc(100dvh - var(--omni-topbar-height, 68px)) !important;
        max-height: calc(100dvh - var(--omni-topbar-height, 68px)) !important;
        min-height: 0 !important;
        overflow: hidden !important;
        border-right-color: rgba(100, 111, 150, 0.08) !important;
        box-shadow: none !important;
        scrollbar-width: none !important;
        scrollbar-color: transparent transparent !important;
    }

    html body .mud-drawer.app-drawer::-webkit-scrollbar,
    html body .mud-drawer.app-drawer .mud-drawer-content::-webkit-scrollbar,
    html body .mud-drawer.app-drawer .mud-navmenu::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        background: transparent !important;
    }

    html body .mud-drawer.app-drawer .mud-drawer-content {
        display: flex !important;
        flex-direction: column !important;
    }

    html body .mud-drawer.app-drawer .mud-navmenu {
        display: flex !important;
        flex: 1 1 auto !important;
        flex-direction: column !important;
        min-height: 0 !important;
        height: 100% !important;
        max-height: 100% !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        padding-bottom: 14px !important;
        scrollbar-width: none !important;
        scrollbar-color: transparent transparent !important;
    }

    html body .mud-drawer.app-drawer .mud-navmenu > .mud-divider.my-2 {
        flex: 0 0 auto !important;
        margin-top: auto !important;
    }

    html body .mud-drawer.app-drawer .mud-navmenu > .pa-2 {
        flex: 0 0 auto !important;
        padding: 6px 2px 0 !important;
    }

    html body .mud-drawer.app-drawer .mud-navmenu > .pa-2 .mud-button-root {
        min-height: 40px !important;
        height: 40px !important;
        border-radius: 12px !important;
    }

    html body .app-content-canvas:has(> .dayplan-page) {
        padding-top: 24px !important;
    }

    html body .app-content-canvas > .dayplan-page,
    html body .dayplan-page {
        width: min(100%, 1380px) !important;
        max-width: 1380px !important;
        margin-inline: 0 !important;
    }

    html body .dayplan-page .dayplan-page-header {
        display: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    html body .dayplan-page .dayplan-toolbar-row {
        display: inline-flex !important;
        width: fit-content !important;
        max-width: 100% !important;
        margin: 0 0 28px !important;
        padding: 9px 10px !important;
        align-items: center !important;
        gap: 8px !important;
        border-radius: 18px !important;
        border: 1px solid rgba(147, 157, 201, 0.16) !important;
        background: rgba(13, 16, 24, 0.76) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
    }

    html body .dayplan-page .dayplan-date-wrap {
        display: inline-flex !important;
        flex: 0 0 auto !important;
        align-items: center !important;
        gap: 7px !important;
        width: auto !important;
        min-width: 0 !important;
    }

    html body .dayplan-page .dayplan-date-control {
        flex: 0 0 262px !important;
        width: 262px !important;
        min-width: 262px !important;
        max-width: 262px !important;
    }

    html body .dayplan-page .dayplan-date-nav-button,
    html body .dayplan-page .dayplan-date-nav-button.mud-icon-button {
        width: 42px !important;
        min-width: 42px !important;
        height: 42px !important;
        min-height: 42px !important;
        padding: 0 !important;
    }

    html body .dayplan-page .dayplan-today-button.mud-button-root {
        width: 92px !important;
        min-width: 92px !important;
        height: 42px !important;
        min-height: 42px !important;
    }

    html body .dayplan-page .dayplan-user-wrap {
        flex: 0 0 210px !important;
        width: 210px !important;
        min-width: 0 !important;
        max-width: 210px !important;
    }

    html body .dayplan-page .dayplan-desktop-grid {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 28px !important;
        align-items: stretch !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    html body .dayplan-page .dayplan-section,
    html body .dayplan-page .dayplan-section-timeline,
    html body .dayplan-page .dayplan-secondary-stack,
    html body .dayplan-page .dayplan-section-flexible,
    html body .dayplan-page .dayplan-section-done {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    html body .dayplan-page .dayplan-secondary-stack {
        display: flex !important;
        flex-direction: column !important;
        gap: 24px !important;
    }

    html body .dayplan-page .dayplan-section-title {
        margin: 0 0 14px !important;
        line-height: 1.12 !important;
    }

    html body .dayplan-page .dayplan-list {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        width: 100% !important;
        position: relative !important;
    }

    html body .dayplan-page .dayplan-list:has(.dayplan-card-timeline)::before {
        left: 94px !important;
        width: 1px !important;
        background: linear-gradient(
            180deg,
            transparent 0,
            rgba(130, 141, 182, 0.28) 34px,
            rgba(130, 141, 182, 0.22) calc(100% - 34px),
            transparent 100%
        ) !important;
        box-shadow: none !important;
    }

    html body .dayplan-page .dayplan-card.dayplan-card-timeline,
    html body .dayplan-page .dayplan-card-timeline.mud-paper {
        display: grid !important;
        grid-template-columns: 82px 26px minmax(0, 1fr) !important;
        gap: 0 !important;
        align-items: stretch !important;
        min-height: 84px !important;
        width: 100% !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        overflow: visible !important;
    }

    html body .dayplan-page .dayplan-card-timeline .dayplan-rail-time {
        grid-column: 1 !important;
        width: 82px !important;
        min-width: 82px !important;
        max-width: 82px !important;
        padding: 24px 8px 0 0 !important;
        justify-self: stretch !important;
        justify-content: flex-end !important;
        text-align: right !important;
        color: rgba(197, 204, 225, 0.76) !important;
        font-size: 0.88rem !important;
        font-weight: 780 !important;
        line-height: 1 !important;
        letter-spacing: 0 !important;
        font-variant-numeric: tabular-nums !important;
        background: transparent !important;
        border: 0 !important;
    }

    html body .dayplan-page .dayplan-card-timeline .dayplan-rail-track {
        grid-column: 2 !important;
        position: relative !important;
        display: block !important;
        width: 26px !important;
        min-width: 26px !important;
        height: 100% !important;
        background: transparent !important;
        border: 0 !important;
    }

    html body .dayplan-page .dayplan-card-timeline .dayplan-rail-track::before,
    html body .dayplan-page .dayplan-card-timeline .dayplan-rail-track::after {
        content: none !important;
        display: none !important;
    }

    html body .dayplan-page .dayplan-card-timeline .dayplan-rail-dot {
        position: absolute !important;
        top: 28px !important;
        left: 50% !important;
        width: 8px !important;
        height: 8px !important;
        transform: translateX(-50%) !important;
        border-radius: 999px !important;
        background: rgba(144, 155, 204, 0.76) !important;
        box-shadow: 0 0 0 7px rgba(91, 106, 170, 0.08) !important;
    }

    html body .dayplan-page .dayplan-card-timeline .dayplan-card-shell {
        grid-column: 3 !important;
        grid-row: 1 !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 16px !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 84px !important;
        padding: 22px 24px !important;
        border-radius: 18px !important;
        border: 1px solid rgba(140, 152, 199, 0.20) !important;
        background: linear-gradient(180deg, rgba(22, 26, 39, 0.94), rgba(16, 20, 31, 0.90)) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
        transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease !important;
    }

    html body .dayplan-page .dayplan-card-timeline:hover .dayplan-card-shell {
        border-color: rgba(154, 166, 215, 0.28) !important;
        background: linear-gradient(180deg, rgba(24, 28, 42, 0.96), rgba(17, 21, 33, 0.92)) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045), 0 12px 32px rgba(0, 0, 0, 0.18) !important;
    }

    html body .dayplan-page .dayplan-card-title-only .dayplan-card-shell,
    html body .dayplan-page .dayplan-card-timeline-collapsed .dayplan-card-shell {
        min-height: 84px !important;
        padding: 22px 24px !important;
    }

    html body .dayplan-page .dayplan-card-title-only .dayplan-card-main {
        display: flex !important;
        align-items: center !important;
        min-width: 0 !important;
    }

    html body .dayplan-page .dayplan-card-title-only .dayplan-card-title {
        line-height: 1.18 !important;
        font-size: 1rem !important;
        font-weight: 600 !important;
        color: rgba(240, 240, 238, 0.92) !important;
    }

    html body .dayplan-page .dayplan-card-title-only .dayplan-card-actions {
        align-self: center !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        min-width: 24px !important;
        min-height: 24px !important;
    }

    html body .dayplan-page .dayplan-title-only-expand-icon,
    html body .dayplan-page .dayplan-collapsed-expand-icon {
        width: 20px !important;
        height: 20px !important;
        font-size: 20px !important;
        color: rgba(178, 185, 209, 0.72) !important;
    }

    html body .dayplan-page .dayplan-card-timeline:not(.dayplan-card-title-only):not(.dayplan-card-timeline-collapsed) .dayplan-card-shell {
        padding-right: 72px !important;
    }

    html body .dayplan-page .dayplan-card-timeline .dayplan-card-title {
        max-width: 100% !important;
        font-weight: 600 !important;
        color: rgba(242, 242, 239, 0.94) !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
    }

    html body .dayplan-page .dayplan-card-anytime,
    html body .dayplan-page .dayplan-card-done,
    html body .dayplan-page .dayplan-empty-card {
        width: 100% !important;
        min-height: 0 !important;
        padding: 18px 20px !important;
        border-radius: 18px !important;
        border: 1px solid rgba(122, 133, 176, 0.15) !important;
        background: linear-gradient(180deg, rgba(18, 21, 31, 0.82), rgba(13, 16, 24, 0.78)) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
    }

    html body .dayplan-page .app-empty-state-compact,
    html body .dayplan-page .app-empty-state-inline {
        min-height: 0 !important;
        padding: 18px 20px !important;
    }

    html body .dayplan-page .dayplan-section-flexible .dayplan-empty-card {
        min-height: 76px !important;
        padding: 12px 16px !important;
    }

    html body .dayplan-page .dayplan-section-flexible .app-empty-state-compact,
    html body .dayplan-page .dayplan-section-flexible .app-empty-state-inline {
        min-height: 0 !important;
        padding: 0 !important;
    }

    html body .dayplan-page .dayplan-section-flexible .app-empty-state-icon {
        width: 38px !important;
        min-width: 38px !important;
        height: 38px !important;
        min-height: 38px !important;
    }

    html body .dayplan-page .dayplan-section-flexible .app-empty-state-title {
        line-height: 1.15 !important;
    }

    html body .dayplan-page .dayplan-section-flexible .app-empty-state-message {
        margin-top: 4px !important;
        line-height: 1.25 !important;
    }

    html body .dayplan-page .dayplan-done-panel,
    html body .dayplan-page .dayplan-done-panel .mud-expand-panel,
    html body .dayplan-page .dayplan-done-panel .mud-paper {
        width: 100% !important;
        max-width: none !important;
        border-radius: 18px !important;
        border-color: rgba(122, 133, 176, 0.10) !important;
        background: rgba(12, 15, 23, 0.58) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.018) !important;
    }

    html body .dayplan-page .dayplan-done-panel .mud-expand-panel-header {
        min-height: 48px !important;
        padding: 0 16px !important;
    }

    html body .dayplan-page .dayplan-done-panel .mud-expand-panel-content {
        padding: 0 16px 14px !important;
    }

    html body .dayplan-page .dayplan-section-done .app-empty-state-inline,
    html body .dayplan-page .dayplan-section-done .app-empty-state-compact {
        padding: 12px 16px !important;
        opacity: 0.82 !important;
    }
}

/*
 * Transport desktop board polish.
 * Keeps the week visible while replacing the raw spreadsheet feel with the
 * calmer OMNISANT card rhythm.
 */
@media (min-width: 1024px) {
    html body .schoolrunsweek-page {
        --transport-polish-border: rgba(166, 178, 226, 0.105);
        --transport-polish-border-soft: rgba(166, 178, 226, 0.070);
        --transport-polish-surface: rgba(15, 18, 27, 0.66);
        --transport-polish-surface-strong: rgba(20, 24, 35, 0.78);
        --transport-polish-muted: rgba(195, 202, 224, 0.58);
        --transport-polish-text: rgba(241, 239, 234, 0.92);
        width: min(100%, var(--desktop-repair-command, 1920px)) !important;
        max-width: var(--desktop-repair-command, 1920px) !important;
        margin-inline: 0 !important;
    }

    html body .schoolrunsweek-page .schoolrunsweek-header {
        margin-bottom: 22px !important;
        padding-bottom: 22px !important;
        border-bottom: 1px solid rgba(166, 178, 226, 0.075) !important;
    }

    html body .schoolrunsweek-page .schoolrunsweek-page-context {
        color: rgba(218, 221, 232, 0.78) !important;
        font-size: clamp(1.22rem, 1.3vw, 1.5rem) !important;
        font-weight: 600 !important;
        letter-spacing: 0 !important;
    }

    html body .schoolrunsweek-page .schoolrunsweek-toolbar {
        display: inline-grid !important;
        grid-template-columns: auto minmax(250px, 310px) !important;
        width: auto !important;
        margin: 0 0 26px !important;
        padding: 6px !important;
        gap: 8px !important;
        border-radius: 18px !important;
        border: 1px solid var(--transport-polish-border) !important;
        background: rgba(13, 16, 24, 0.72) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
    }

    html body .schoolrunsweek-page .schoolrunsweek-nav-wrap {
        gap: 6px !important;
        margin: 0 !important;
        padding: 0 8px 0 0 !important;
        border-right: 1px solid rgba(166, 178, 226, 0.085) !important;
    }

    html body .schoolrunsweek-page .schoolrunsweek-date-wrap {
        min-width: 250px !important;
    }

    html body .schoolrunsweek-page .schoolrunsweek-days {
        display: grid !important;
        grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
        gap: 14px !important;
        align-items: start !important;
        width: 100% !important;
        max-width: none !important;
    }

    html body .schoolrunsweek-page .schoolrunsweek-day-card {
        display: flex !important;
        flex-direction: column !important;
        min-width: 0 !important;
        min-height: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        border: 1px solid var(--transport-polish-border) !important;
        border-radius: 20px !important;
        background:
            linear-gradient(180deg, rgba(23, 27, 39, 0.70), rgba(10, 13, 20, 0.70)) !important;
        box-shadow:
            0 20px 52px rgba(0, 0, 0, 0.18),
            inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
    }

    html body .schoolrunsweek-page .schoolrunsweek-day-header {
        position: static !important;
        padding: 15px 16px 13px !important;
        border-bottom: 1px solid var(--transport-polish-border-soft) !important;
        background:
            linear-gradient(180deg, rgba(25, 29, 41, 0.78), rgba(16, 19, 29, 0.58)) !important;
    }

    html body .schoolrunsweek-page .schoolrunsweek-day-heading {
        gap: 5px !important;
    }

    html body .schoolrunsweek-page .schoolrunsweek-day-name {
        color: rgba(242, 239, 233, 0.94) !important;
        font-size: 0.76rem !important;
        font-weight: 860 !important;
        letter-spacing: 0.14em !important;
    }

    html body .schoolrunsweek-page .schoolrunsweek-day-date {
        color: rgba(195, 202, 224, 0.58) !important;
        font-size: 0.68rem !important;
        font-weight: 720 !important;
        letter-spacing: 0.055em !important;
    }

    html body .schoolrunsweek-page .schoolrunsweek-slot-stack {
        display: grid !important;
        grid-template-rows: auto auto !important;
        gap: 0 !important;
        min-height: 0 !important;
    }

    html body .schoolrunsweek-page .schoolrunsweek-slot-card {
        min-height: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
    }

    html body .schoolrunsweek-page .schoolrunsweek-slot-card + .schoolrunsweek-slot-card {
        border-top: 1px solid var(--transport-polish-border-soft) !important;
    }

    html body .schoolrunsweek-page .schoolrunsweek-slot-content {
        display: grid !important;
        grid-template-rows: auto auto !important;
        align-content: start !important;
        gap: 10px !important;
        min-height: 0 !important;
        height: auto !important;
        padding: 14px 15px 16px !important;
    }

    html body .schoolrunsweek-page .schoolrunsweek-slot-header {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        min-height: 30px !important;
        padding: 0 !important;
        gap: 8px !important;
        border-bottom: 0 !important;
    }

    html body .schoolrunsweek-page .schoolrunsweek-slot-title {
        color: var(--transport-polish-muted) !important;
        font-size: 0.63rem !important;
        font-weight: 820 !important;
        letter-spacing: 0.13em !important;
    }

    html body .schoolrunsweek-page .schoolrunsweek-slot-add-button.mud-button-root {
        width: 30px !important;
        min-width: 30px !important;
        height: 30px !important;
        min-height: 30px !important;
        padding: 0 !important;
        border-radius: 10px !important;
        border: 1px solid rgba(156, 171, 232, 0.16) !important;
        background: rgba(126, 142, 201, 0.075) !important;
        color: rgba(177, 190, 247, 0.88) !important;
        box-shadow: none !important;
    }

    html body .schoolrunsweek-page .schoolrunsweek-slot-add-button .mud-button-label {
        font-size: 0 !important;
        line-height: 0 !important;
    }

    html body .schoolrunsweek-page .schoolrunsweek-slot-add-button .mud-button-icon-start {
        margin: 0 !important;
    }

    html body .schoolrunsweek-page .schoolrunsweek-slot-add-button .mud-icon-root {
        width: 17px !important;
        height: 17px !important;
        font-size: 17px !important;
    }

    html body .schoolrunsweek-page .schoolrunsweek-empty.app-empty-state-card {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 9px !important;
        width: 100% !important;
        min-height: 54px !important;
        padding: 10px 11px !important;
        border: 1px solid rgba(166, 178, 226, 0.06) !important;
        border-radius: 14px !important;
        background: rgba(255, 255, 255, 0.025) !important;
        color: rgba(197, 203, 222, 0.58) !important;
        box-shadow: none !important;
        text-align: left !important;
    }

    html body .schoolrunsweek-page .schoolrunsweek-empty .app-empty-state-icon {
        display: inline-flex !important;
        flex: 0 0 24px !important;
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
        border-radius: 9px !important;
        background: rgba(255, 255, 255, 0.028) !important;
        color: rgba(166, 176, 212, 0.42) !important;
        box-shadow: none !important;
    }

    html body .schoolrunsweek-page .schoolrunsweek-empty .app-empty-state-icon .mud-icon-root {
        width: 14px !important;
        height: 14px !important;
        font-size: 14px !important;
    }

    html body .schoolrunsweek-page .schoolrunsweek-empty .app-empty-state-copy {
        display: block !important;
        min-width: 0 !important;
    }

    html body .schoolrunsweek-page .schoolrunsweek-empty .app-empty-state-title {
        color: rgba(215, 216, 224, 0.74) !important;
        font-size: 0.72rem !important;
        font-weight: 760 !important;
        letter-spacing: 0 !important;
        line-height: 1.2 !important;
    }

    html body .schoolrunsweek-page .schoolrunsweek-empty .app-empty-state-message,
    html body .schoolrunsweek-page .schoolrunsweek-empty .app-empty-state-eyebrow {
        display: none !important;
    }

    html body .schoolrunsweek-page .schoolrunsweek-assignment-card {
        position: relative !important;
        width: 100% !important;
        min-height: 86px !important;
        padding: 0 !important;
        border: 1px solid rgba(167, 180, 232, 0.13) !important;
        border-radius: 16px !important;
        background:
            linear-gradient(180deg, rgba(22, 26, 38, 0.76), rgba(11, 14, 21, 0.72)) !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.035),
            0 14px 28px rgba(0, 0, 0, 0.14) !important;
    }

    html body .schoolrunsweek-page .schoolrunsweek-assignment-card:hover {
        border-color: rgba(177, 190, 247, 0.22) !important;
        background:
            linear-gradient(180deg, rgba(25, 30, 44, 0.84), rgba(13, 16, 24, 0.78)) !important;
        transform: translateY(-1px) !important;
    }

    html body .schoolrunsweek-page .schoolrunsweek-assignment-grid {
        position: relative !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 8px !important;
        min-height: 86px !important;
        padding: 12px 12px 11px !important;
        align-items: start !important;
    }

    html body .schoolrunsweek-page .schoolrunsweek-assignment-grid:has(.schoolrunsweek-assignment-actions) .schoolrunsweek-assignment-adult {
        padding-right: 0 !important;
    }

    html body .schoolrunsweek-page .schoolrunsweek-assignment-grid:has(.schoolrunsweek-assignment-actions) .schoolrunsweek-assignment-children {
        position: static !important;
        grid-column: 1 !important;
        z-index: auto !important;
        min-width: 0 !important;
    }

    html body .schoolrunsweek-page .schoolrunsweek-assignment-display {
        display: grid !important;
        gap: 8px !important;
        min-width: 0 !important;
    }

    html body .schoolrunsweek-page .schoolrunsweek-assignment-name {
        display: block !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: hidden !important;
        color: var(--transport-polish-text) !important;
        font-size: 0.86rem !important;
        font-weight: 800 !important;
        line-height: 1.18 !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    html body .schoolrunsweek-page .schoolrunsweek-assignment-meta,
    html body .schoolrunsweek-page .schoolrunsweek-chip-row {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 5px !important;
        margin: 0 !important;
        min-width: 0 !important;
    }

    html body .schoolrunsweek-page .schoolrunsweek-chip {
        display: inline-flex !important;
        align-items: center !important;
        min-width: 0 !important;
        min-height: 23px !important;
        padding: 0 8px !important;
        border: 1px solid rgba(157, 171, 230, 0.15) !important;
        border-radius: 999px !important;
        background: rgba(126, 142, 201, 0.09) !important;
        color: rgba(202, 211, 252, 0.78) !important;
        font-size: 0.66rem !important;
        font-weight: 760 !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    html body .schoolrunsweek-page .schoolrunsweek-assignment-actions {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 5px !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    html body .schoolrunsweek-page .schoolrunsweek-assignment-actions .mud-chip {
        height: 24px !important;
        min-height: 24px !important;
        max-width: 68px !important;
        padding-inline: 8px !important;
        border-radius: 999px !important;
        border-color: rgba(157, 171, 230, 0.12) !important;
        background: rgba(255, 255, 255, 0.035) !important;
        color: rgba(207, 213, 232, 0.66) !important;
        font-size: 0.62rem !important;
        font-weight: 760 !important;
    }

    html body .schoolrunsweek-page .schoolrunsweek-inline-edit.mud-icon-button,
    html body .schoolrunsweek-page .schoolrunsweek-delete-button.mud-icon-button {
        width: 27px !important;
        min-width: 27px !important;
        height: 27px !important;
        min-height: 27px !important;
        padding: 0 !important;
        border-radius: 9px !important;
        border: 1px solid rgba(157, 171, 230, 0.10) !important;
        background: rgba(255, 255, 255, 0.034) !important;
        color: rgba(201, 208, 229, 0.68) !important;
    }

    html body .schoolrunsweek-page .schoolrunsweek-delete-button.mud-icon-button {
        border-color: rgba(229, 116, 116, 0.12) !important;
        color: rgba(229, 116, 116, 0.70) !important;
    }
}

@media (min-width: 1024px) and (max-width: 1799.98px) {
    html body .schoolrunsweek-page .schoolrunsweek-days {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
    }
}

/*
 * Final dialog textarea guardrail.
 * Keeps compact dialog text inputs from collapsing multiline note fields.
 */
html body .mud-dialog .config-dialog-shell .mud-input-control:has(textarea.mud-input-slot),
html body .mud-dialog .config-dialog-shell .mud-input-control:has(textarea.mud-input-root),
html body .mud-dialog .config-dialog-shell .mud-input-control:has(textarea) > .mud-input-control-input-container {
    min-height: 112px !important;
    height: auto !important;
    max-height: none !important;
    align-items: stretch !important;
}

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

html body .mud-dialog .config-dialog-shell .mud-input > textarea.mud-input-slot,
html body .mud-dialog .config-dialog-shell textarea.mud-input-root {
    display: block !important;
    min-height: 112px !important;
    height: auto !important;
    max-height: none !important;
    padding: 12px 14px !important;
    color: var(--omni-form-text) !important;
    background: transparent !important;
    line-height: 1.38 !important;
    white-space: pre-wrap !important;
    resize: vertical !important;
}

html body .mud-dialog .config-dialog-shell textarea::placeholder {
    color: rgba(220, 225, 235, 0.52) !important;
    font-weight: 520 !important;
    opacity: 1 !important;
}

/*
 * Desktop shell, schedule controls, and modal system cleanup.
 * Final override layer for the shared app chrome without changing navigation
 * structure or mobile behavior.
 */
@media (min-width: 1024px) {
    html body .app-topbar {
        border-bottom: 1px solid rgba(198, 210, 255, 0.055) !important;
        background: linear-gradient(180deg, rgba(8, 11, 17, 0.98), rgba(6, 8, 13, 0.96)) !important;
        box-shadow: none !important;
    }

    html body .app-main-content,
    html body .mud-main-content,
    html body .app-content-canvas,
    html body .mud-container.app-content-canvas {
        background: transparent !important;
        box-shadow: none !important;
    }

    html body .app-main-content::before,
    html body .mud-main-content::before,
    html body .app-content-canvas::before,
    html body .mud-container.app-content-canvas::before {
        content: none !important;
        display: none !important;
    }

    html body .ios-calendar-page .ios-calendar-header,
    html body .ios-calendar-page .schedule-hero-panel {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
    }

    html body .ios-calendar-page .schedule-hero-panel {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-areas:
            "nav"
            "tabs" !important;
        gap: 12px !important;
        width: min(100%, 1060px) !important;
        max-width: 1060px !important;
        margin: 0 0 22px !important;
    }

    html body .ios-calendar-page .ios-calendar-toolbar.schedule-control-surface {
        grid-area: nav !important;
        display: grid !important;
        width: min(100%, 1060px) !important;
        min-width: min(100%, 920px) !important;
        max-width: 1060px !important;
        grid-template-columns: minmax(520px, 1fr) minmax(300px, 360px) !important;
        grid-template-areas: "date viewing" !important;
        column-gap: 22px !important;
        row-gap: 0 !important;
        justify-content: stretch !important;
        align-items: center !important;
        min-height: 44px !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        overflow: visible !important;
    }

    html body .ios-calendar-page .ios-calendar-date-nav-row {
        grid-area: date !important;
        display: grid !important;
        width: 100% !important;
        max-width: 100% !important;
        grid-template-columns: 40px minmax(260px, 1fr) 40px 92px !important;
        gap: 8px !important;
        min-width: 0 !important;
        height: 40px !important;
        margin: 0 !important;
        align-items: center !important;
    }

    html body .ios-calendar-page .ios-calendar-date-picker-shell {
        flex: 1 1 260px !important;
        width: 100% !important;
        min-width: 260px !important;
        max-width: 340px !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.mud-input-slot,
    html body .ios-calendar-page .ios-calendar-date-picker-shell input.mud-input-root {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 156px !important;
        max-width: none !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }

    html body .ios-calendar-page .ios-calendar-date-picker-shell .mud-input-adornment-end {
        flex: 0 0 44px !important;
        width: 44px !important;
        min-width: 44px !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-basis: 40px !important;
        width: 40px !important;
        min-width: 40px !important;
    }

    html body .ios-calendar-page .ios-calendar-viewing-row {
        grid-area: viewing !important;
        width: 100% !important;
        min-width: 300px !important;
        max-width: 360px !important;
        justify-self: stretch !important;
        height: 40px !important;
        margin: 0 !important;
    }

    html body .ios-calendar-page .schedule-view-action-row,
    html body .ios-calendar-page .ios-calendar-mode-row.schedule-view-action-row {
        grid-area: tabs !important;
        display: grid !important;
        grid-template-columns: minmax(280px, 390px) minmax(0, 1fr) max-content !important;
        align-items: center !important;
        gap: 14px !important;
        width: min(100%, 1060px) !important;
        max-width: 1060px !important;
        min-height: 38px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    html body .ios-calendar-page .ios-calendar-mode-row .ios-calendar-view-switch {
        grid-column: 1 !important;
        width: 100% !important;
        justify-self: start !important;
        height: 38px !important;
        min-height: 38px !important;
        border-color: rgba(150, 162, 210, 0.16) !important;
        background: rgba(255, 255, 255, 0.018) !important;
    }

    html body .ios-calendar-page .ios-calendar-mode-row .ios-calendar-generate-button {
        grid-column: 3 !important;
        justify-self: end !important;
        min-width: 176px !important;
        height: 38px !important;
        min-height: 38px !important;
        border-color: rgba(150, 162, 210, 0.13) !important;
        background: rgba(255, 255, 255, 0.018) !important;
        color: rgba(238, 240, 248, 0.72) !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.event-edit-dialog-shell) {
        width: min(960px, calc(100vw - 96px)) !important;
        max-width: min(960px, calc(100vw - 96px)) !important;
        max-height: min(760px, calc(100dvh - 96px)) !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.event-edit-dialog-shell) .mud-dialog-title {
        min-height: 54px !important;
        padding: 14px 22px 13px !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.event-edit-dialog-shell) .mud-dialog-content {
        max-height: calc(min(760px, calc(100dvh - 96px)) - 118px) !important;
        padding: 16px 20px !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.event-edit-dialog-shell) .mud-dialog-actions {
        min-height: 64px !important;
        padding: 11px 22px !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.event-edit-dialog-shell) .event-edit-section-grid {
        gap: 14px 16px !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.event-edit-dialog-shell) .event-edit-section {
        padding: 14px !important;
        border-color: rgba(150, 162, 210, 0.075) !important;
        background: rgba(255, 255, 255, 0.014) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.014) !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.event-edit-dialog-shell) .event-edit-section .config-dialog-section-header {
        margin: 0 0 10px !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.event-edit-dialog-shell) .event-edit-section .config-dialog-section-kicker {
        color: rgba(196, 205, 235, 0.68) !important;
        font-size: 0.62rem !important;
        letter-spacing: 0.115em !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.event-edit-dialog-shell) .event-edit-location-row,
    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.event-edit-dialog-shell) .event-edit-schedule-grid,
    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.event-edit-dialog-shell) .event-edit-datetime-grid,
    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.event-edit-dialog-shell) .event-edit-people-grid,
    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.event-edit-dialog-shell) .event-edit-recurrence-grid {
        gap: 10px 12px !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.event-edit-dialog-shell) .event-edit-location-row {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.event-edit-dialog-shell) .event-edit-dialog-shell .mud-input-control:has(.mud-input-label) > .mud-input-control-input-container {
        min-height: calc(42px + 24px) !important;
        height: auto !important;
        padding-top: 24px !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.event-edit-dialog-shell) .event-edit-dialog-shell .mud-input.mud-input-outlined,
    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.event-edit-dialog-shell) .event-edit-dialog-shell .mud-input.mud-input-outlined.mud-select-input,
    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.event-edit-dialog-shell) .event-edit-dialog-shell .mud-field {
        min-height: 42px !important;
        height: 42px !important;
        max-height: 42px !important;
        border-color: rgba(150, 162, 210, 0.115) !important;
        background: rgba(255, 255, 255, 0.028) !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.event-edit-dialog-shell) .event-edit-dialog-shell .mud-input-slot,
    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.event-edit-dialog-shell) .event-edit-dialog-shell .mud-select-input,
    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.event-edit-dialog-shell) .event-edit-dialog-shell input.mud-input-root {
        min-height: 42px !important;
        height: 42px !important;
        max-height: 42px !important;
        line-height: 42px !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.event-edit-dialog-shell) .event-edit-compact-options {
        gap: 8px !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.event-edit-dialog-shell) .event-edit-compact-options .mud-input-control {
        min-height: 34px !important;
        height: 34px !important;
        padding: 4px 8px !important;
        border-color: rgba(150, 162, 210, 0.08) !important;
        background: rgba(255, 255, 255, 0.014) !important;
    }

    /*
     * Final desktop dialog form contract.
     * This deliberately lives at the end of the desktop layer because older
     * page-era modal passes still appear above. Keep dialog wrappers clear;
     * only the actual Mud field shell owns a surface.
     */
    html body .mud-dialog:not(.mud-dialog-fullscreen) .mud-dialog-title .mud-typography,
    html body .mud-dialog:not(.mud-dialog-fullscreen) .mud-dialog-title h6,
    html body .mud-dialog:not(.mud-dialog-fullscreen) .config-dialog-section-title,
    html body .mud-dialog:not(.mud-dialog-fullscreen) .profile-dialog-section-title,
    html body .mud-dialog:not(.mud-dialog-fullscreen) .config-dialog-section-kicker,
    html body .mud-dialog:not(.mud-dialog-fullscreen) .event-edit-field-group-label,
    html body .mud-dialog:not(.mud-dialog-fullscreen) .maintenance-field-title {
        font-weight: 580 !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen) .mud-input-control,
    html body .mud-dialog:not(.mud-dialog-fullscreen) .mud-picker,
    html body .mud-dialog:not(.mud-dialog-fullscreen) .mud-select,
    html body .mud-dialog:not(.mud-dialog-fullscreen) .mud-input-control > .mud-input-control-input-container,
    html body .mud-dialog:not(.mud-dialog-fullscreen) .mud-input-control:has(.mud-input-label),
    html body .mud-dialog:not(.mud-dialog-fullscreen) .mud-input-control:has(.mud-input-label) > .mud-input-control-input-container {
        border: 0 !important;
        background: transparent !important;
        background-color: transparent !important;
        box-shadow: none !important;
    }

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

    html body .mud-dialog:not(.mud-dialog-fullscreen) .mud-input-control:has(.mud-input-label) > .mud-input-control-input-container {
        position: relative !important;
        min-height: 68px !important;
        height: auto !important;
        padding-top: 24px !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen) .mud-input-control .mud-input-label,
    html body .mud-dialog:not(.mud-dialog-fullscreen) .mud-input-control .mud-input-label.mud-shrink,
    html body .mud-dialog:not(.mud-dialog-fullscreen) .mud-input-control .mud-input-label.mud-input-label-animate {
        position: absolute !important;
        top: 0 !important;
        left: var(--omni-form-label-inset, 8px) !important;
        width: auto !important;
        height: 14px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        line-height: 14px !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen) .mud-input-control .mud-input.mud-input-outlined,
    html body .mud-dialog:not(.mud-dialog-fullscreen) .mud-input-control .mud-input.mud-input-outlined.mud-select-input,
    html body .mud-dialog:not(.mud-dialog-fullscreen) .mud-input-control .mud-field,
    html body .mud-dialog:not(.mud-dialog-fullscreen) .mud-input-control .mud-picker-input,
    html body .mud-dialog:not(.mud-dialog-fullscreen) .mud-picker .mud-input,
    html body .mud-dialog:not(.mud-dialog-fullscreen) .mud-picker .mud-input.mud-input-outlined,
    html body .mud-dialog:not(.mud-dialog-fullscreen) .mud-picker-input {
        min-height: 44px !important;
        height: 44px !important;
        max-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        border-radius: var(--app-control-radius) !important;
        border-color: rgba(150, 162, 210, 0.135) !important;
        background: var(--app-control-bg) !important;
        background-image: none !important;
        box-shadow: none !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen) .mud-input-control .mud-input-slot,
    html body .mud-dialog:not(.mud-dialog-fullscreen) .mud-input-control .mud-select-input,
    html body .mud-dialog:not(.mud-dialog-fullscreen) .mud-input-control input.mud-input-root,
    html body .mud-dialog:not(.mud-dialog-fullscreen) .mud-picker .mud-input-slot,
    html body .mud-dialog:not(.mud-dialog-fullscreen) .mud-picker input.mud-input-root {
        min-height: 44px !important;
        height: 44px !important;
        max-height: 44px !important;
        line-height: 44px !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen) .mud-picker .mud-input-control,
    html body .mud-dialog:not(.mud-dialog-fullscreen) .mud-picker .mud-input-control-input-container {
        min-height: 68px !important;
        height: auto !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen) .mud-select .mud-input-adornment,
    html body .mud-dialog:not(.mud-dialog-fullscreen) .mud-select .mud-input-adornment-end,
    html body .mud-dialog:not(.mud-dialog-fullscreen) .mud-input.mud-select-input .mud-input-adornment,
    html body .mud-dialog:not(.mud-dialog-fullscreen) .mud-input.mud-select-input .mud-input-adornment-end,
    html body .mud-dialog:not(.mud-dialog-fullscreen) .mud-picker .mud-input-adornment-end,
    html body .mud-dialog:not(.mud-dialog-fullscreen) .mud-picker-input-button {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 38px !important;
        min-width: 38px !important;
        height: 44px !important;
        min-height: 44px !important;
        opacity: 1 !important;
        visibility: visible !important;
        color: rgba(214, 220, 240, 0.76) !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen) .mud-select .mud-input-adornment .mud-icon-root,
    html body .mud-dialog:not(.mud-dialog-fullscreen) .mud-select .mud-input-adornment-end .mud-icon-root,
    html body .mud-dialog:not(.mud-dialog-fullscreen) .mud-picker .mud-input-adornment-end .mud-icon-root,
    html body .mud-dialog:not(.mud-dialog-fullscreen) .mud-picker-input-button .mud-icon-root {
        display: block !important;
        width: 20px !important;
        height: 20px !important;
        font-size: 20px !important;
        opacity: 1 !important;
        visibility: visible !important;
        color: rgba(214, 220, 240, 0.76) !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen) .mud-picker-input-button.mud-icon-button,
    html body .mud-dialog:not(.mud-dialog-fullscreen) .mud-picker-input-button .mud-button-root,
    html body .mud-dialog:not(.mud-dialog-fullscreen) .mud-picker-input-button button {
        width: 38px !important;
        min-width: 38px !important;
        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.config-dialog-shell) .config-dialog-shell .mud-picker,
    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.config-dialog-shell) .config-dialog-shell .mud-picker .mud-input-control,
    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.config-dialog-shell) .config-dialog-shell .mud-picker .mud-input-control-input-container {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 68px !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.config-dialog-shell) .config-dialog-shell .mud-picker .mud-input-control-input-container {
        position: relative !important;
        padding-top: 24px !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.config-dialog-shell) .config-dialog-shell .mud-picker .mud-input,
    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.config-dialog-shell) .config-dialog-shell .mud-picker .mud-input-root,
    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.config-dialog-shell) .config-dialog-shell .mud-picker .mud-input.mud-input-outlined,
    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.config-dialog-shell) .config-dialog-shell .mud-picker .mud-field {
        position: relative !important;
        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        overflow: hidden !important;
        border-radius: var(--app-control-radius) !important;
        background: var(--app-control-bg) !important;
        box-shadow: none !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.config-dialog-shell) .config-dialog-shell .mud-picker .mud-input-slot,
    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.config-dialog-shell) .config-dialog-shell .mud-picker input.mud-input-slot,
    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.config-dialog-shell) .config-dialog-shell .mud-picker input.mud-input-root {
        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;
        flex: 1 1 auto !important;
        width: 100% !important;
        min-width: 0 !important;
        padding-block: 0 !important;
        padding-inline-start: var(--app-control-pad-x) !important;
        padding-inline-end: calc(var(--app-control-icon-w) + 2px) !important;
        line-height: 44px !important;
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: nowrap !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.config-dialog-shell) .config-dialog-shell .mud-picker .mud-input-adornment-end,
    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.config-dialog-shell) .config-dialog-shell .mud-picker .mud-picker-input-button,
    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.config-dialog-shell) .config-dialog-shell .mud-picker .mud-input-adornment-end .mud-icon-button {
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        z-index: 2 !important;
        width: var(--app-control-icon-w) !important;
        min-width: var(--app-control-icon-w) !important;
        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 0 var(--app-control-radius) var(--app-control-radius) 0 !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.config-dialog-shell) .config-dialog-shell .mud-picker .mud-input > div.mud-input-slot:empty,
    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.config-dialog-shell) .config-dialog-shell .mud-picker .mud-input > span.mud-input-slot:empty {
        display: none !important;
        flex: 0 0 0 !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.config-dialog-shell) .config-dialog-shell .mud-select .mud-input.mud-input-outlined,
    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.config-dialog-shell) .config-dialog-shell .mud-input.mud-input-outlined.mud-select-input {
        position: relative !important;
        overflow: hidden !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.config-dialog-shell) .config-dialog-shell .mud-select .mud-input-adornment-end,
    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.config-dialog-shell) .config-dialog-shell .mud-input.mud-select-input .mud-input-adornment-end {
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        z-index: 2 !important;
        pointer-events: none !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.config-dialog-shell) .config-dialog-shell .mud-select .mud-select-input {
        width: 100% !important;
        min-width: 0 !important;
        padding-inline-end: calc(var(--app-control-icon-w) + 2px) !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.config-dialog-shell) .config-dialog-shell .mud-select .mud-input.mud-input-outlined::after,
    html body .mud-dialog:not(.mud-dialog-fullscreen):has(.config-dialog-shell) .config-dialog-shell .mud-input.mud-input-outlined.mud-select-input::after {
        content: "" !important;
        position: absolute !important;
        top: 50% !important;
        right: 18px !important;
        z-index: 3 !important;
        width: 7px !important;
        height: 7px !important;
        border-right: 2px solid rgba(214, 220, 240, 0.74) !important;
        border-bottom: 2px solid rgba(214, 220, 240, 0.74) !important;
        transform: translateY(-65%) rotate(45deg) !important;
        pointer-events: none !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen) .mud-input-control:has(textarea) > .mud-input-control-input-container {
        min-height: 108px !important;
        padding-top: 24px !important;
    }

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

    html body .mud-dialog:not(.mud-dialog-fullscreen) textarea.mud-input-slot,
    html body .mud-dialog:not(.mud-dialog-fullscreen) textarea.mud-input-root {
        min-height: 82px !important;
        height: auto !important;
        max-height: none !important;
        padding: 12px var(--app-control-pad-x) !important;
        line-height: 1.35 !important;
    }

    html body .mud-dialog:not(.mud-dialog-fullscreen) textarea::placeholder,
    html body .mud-dialog:not(.mud-dialog-fullscreen) .mud-input-slot::placeholder,
    html body .mud-dialog:not(.mud-dialog-fullscreen) input::placeholder {
        font-size: 0.9rem !important;
        font-weight: 520 !important;
        line-height: 1.35 !important;
        color: rgba(214, 220, 238, 0.46) !important;
    }
}