/* =====================================================================
   Polish layer. Loaded last. Fixes from the fine-inspection pass at
   every common resolution (phone to 4K). Scoped with #omnisant so it
   wins over the older page layers.
   ===================================================================== */

/* Screen-reader-only text (used where a button shows only an icon). */
.omni-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ---------------------------------------------------------------------
   Control bar standard. One look for every page toolbar (Today,
   Schedule, Transport): a quiet raised bar holding 44px controls with
   12px corners. Values match the Today bar, which was the reference.
   --------------------------------------------------------------------- */
#omnisant {
    --lux-control-h: 44px;
    --lux-control-radius: 12px;
    --lux-control-bg: rgba(10, 11, 12, 0.72);
    --lux-control-border: 1px solid rgba(218, 214, 205, 0.16);
    --lux-control-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
    --lux-bar-bg: rgba(17, 18, 20, 0.76);
    --lux-bar-border: 1px solid rgba(202, 181, 146, 0.16);
    --lux-bar-radius: 18px;
    --lux-bar-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

@media (min-width: 769px) {
    /* Bars */
    #omnisant .dayplan-page .dayplan-toolbar-row-desktop,
    #omnisant .ios-calendar-page .ios-calendar-header,
    #omnisant .schoolrunsweek-page .schoolrunsweek-toolbar {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 8px !important;
        width: fit-content !important;
        max-width: 100% !important;
        padding: 9px 10px !important;
        border: var(--lux-bar-border) !important;
        border-radius: var(--lux-bar-radius) !important;
        background: var(--lux-bar-bg) !important;
        box-shadow: var(--lux-bar-shadow) !important;
        min-height: 0 !important;
        height: auto !important;
    }

    /* Schedule: the two inner rows become one flowing row. */
    #omnisant .ios-calendar-page .ios-calendar-header {
        width: 100% !important;
        margin-bottom: 18px !important;
    }

    #omnisant .ios-calendar-page .ios-calendar-toolbar,
    #omnisant .ios-calendar-page .ios-calendar-mode-row {
        display: contents !important;
    }

    #omnisant .ios-calendar-page .ios-calendar-date-nav-row,
    #omnisant .schoolrunsweek-page .schoolrunsweek-nav-wrap,
    #omnisant .dayplan-page .dayplan-toolbar-row-desktop .dayplan-date-wrap {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        width: auto !important;
        margin: 0 !important;
    }

    #omnisant .ios-calendar-page .ios-calendar-date-nav-row { order: 1; }
    #omnisant .ios-calendar-page .ios-calendar-view-switch { order: 2; }
    #omnisant .ios-calendar-page .ios-calendar-viewing-row { order: 3; margin-left: auto !important; }
    #omnisant .ios-calendar-page .ios-calendar-generate-button { order: 4; }

    /* Icon buttons (previous / next) */
    #omnisant .ios-calendar-page .ios-calendar-nav-button,
    #omnisant .dayplan-page .dayplan-date-nav-button,
    #omnisant .schoolrunsweek-page .schoolrunsweek-nav-wrap > .mud-icon-button {
        width: var(--lux-control-h) !important;
        min-width: var(--lux-control-h) !important;
        height: var(--lux-control-h) !important;
        min-height: var(--lux-control-h) !important;
        padding: 0 !important;
        margin: 0 !important;
        border: var(--lux-control-border) !important;
        border-radius: var(--lux-control-radius) !important;
        background: var(--lux-control-bg) !important;
        box-shadow: var(--lux-control-shadow) !important;
        color: rgba(244, 241, 235, 0.82) !important;
    }

    #omnisant .ios-calendar-page .ios-calendar-nav-button .mud-icon-root,
    #omnisant .dayplan-page .dayplan-date-nav-button .mud-icon-root,
    #omnisant .schoolrunsweek-page .schoolrunsweek-nav-wrap > .mud-icon-button .mud-icon-root {
        width: 22px !important;
        height: 22px !important;
    }

    /* Text buttons in bars: Today, This Week, Generate Day Plan */
    #omnisant .ios-calendar-page .ios-calendar-today-button,
    #omnisant .ios-calendar-page .ios-calendar-generate-button,
    #omnisant .dayplan-page .dayplan-today-button,
    #omnisant .schoolrunsweek-page .schoolrunsweek-today-button {
        height: var(--lux-control-h) !important;
        min-height: var(--lux-control-h) !important;
        padding: 0 18px !important;
        margin: 0 !important;
        border: var(--lux-control-border) !important;
        border-radius: var(--lux-control-radius) !important;
        background: var(--lux-control-bg) !important;
        box-shadow: var(--lux-control-shadow) !important;
        color: rgba(244, 241, 235, 0.9) !important;
        white-space: nowrap !important;
    }

    /* Date fields: a fixed, sensible width instead of stretching. */
    #omnisant .ios-calendar-page .ios-calendar-date-picker-shell,
    #omnisant .schoolrunsweek-page .schoolrunsweek-date-wrap {
        position: relative !important;
        width: 200px !important;
        min-width: 200px !important;
        height: var(--lux-control-h) !important;
        margin: 0 !important;
    }

    #omnisant .dayplan-page .dayplan-toolbar-row-desktop .dayplan-date-control {
        width: 200px !important;
        height: var(--lux-control-h) !important;
    }

    #omnisant .ios-calendar-page .ios-calendar-date-picker-shell .mud-picker,
    #omnisant .schoolrunsweek-page .schoolrunsweek-date-wrap .mud-picker {
        position: relative !important;
        inset: auto !important;
        width: 100% !important;
        height: var(--lux-control-h) !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
    }

    /* Fields inside bars: 44px; floating labels hidden (the value speaks for itself). */
    #omnisant .ios-calendar-page .ios-calendar-header .mud-input-control,
    #omnisant .ios-calendar-page .ios-calendar-header .mud-input-control-input-container,
    #omnisant .schoolrunsweek-page .schoolrunsweek-toolbar .mud-input-control,
    #omnisant .schoolrunsweek-page .schoolrunsweek-toolbar .mud-input-control-input-container,
    #omnisant .dayplan-page .dayplan-toolbar-row-desktop .mud-input-control,
    #omnisant .dayplan-page .dayplan-toolbar-row-desktop .mud-input-control-input-container {
        position: relative !important;
        inset: auto !important;
        width: 100% !important;
        height: var(--lux-control-h) !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #omnisant .ios-calendar-page .ios-calendar-header .mud-input,
    #omnisant .schoolrunsweek-page .schoolrunsweek-toolbar .mud-input,
    #omnisant .dayplan-page .dayplan-toolbar-row-desktop .mud-input {
        height: var(--lux-control-h) !important;
        min-height: 0 !important;
        border: var(--lux-control-border) !important;
        border-radius: var(--lux-control-radius) !important;
        background: var(--lux-control-bg) !important;
        box-shadow: var(--lux-control-shadow) !important;
    }

    #omnisant .ios-calendar-page .ios-calendar-header .mud-input-label,
    #omnisant .schoolrunsweek-page .schoolrunsweek-toolbar .mud-input-label {
        display: none !important;
    }

    #omnisant .ios-calendar-page .ios-calendar-header .mud-input-adornment,
    #omnisant .schoolrunsweek-page .schoolrunsweek-toolbar .mud-input-adornment,
    #omnisant .dayplan-page .dayplan-toolbar-row-desktop .mud-input-adornment {
        position: absolute !important;
        top: 0 !important;
        right: 4px !important;
        bottom: 0 !important;
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
        padding: 0 !important;
    }

    /* Person pickers */
    #omnisant .ios-calendar-page .ios-calendar-viewing-row,
    #omnisant .dayplan-page .dayplan-toolbar-row-desktop .dayplan-user-wrap {
        width: 240px !important;
        min-width: 200px !important;
        height: var(--lux-control-h) !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    #omnisant .ios-calendar-page .ios-calendar-viewing-row .mud-select,
    #omnisant .dayplan-page .dayplan-toolbar-row-desktop .dayplan-user-wrap .mud-select {
        width: 100% !important;
        height: var(--lux-control-h) !important;
    }

    /* Day / Week / Month */
    #omnisant .ios-calendar-page .ios-calendar-view-switch {
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: none !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 2px !important;
        height: var(--lux-control-h) !important;
        padding: 3px !important;
        margin: 0 !important;
        border: var(--lux-control-border) !important;
        border-radius: var(--lux-control-radius) !important;
        background: var(--lux-control-bg) !important;
        box-shadow: var(--lux-control-shadow) !important;
    }

    #omnisant .ios-calendar-page .ios-calendar-view-switch .mud-button-root {
        flex: 0 0 auto !important;
        width: auto !important;
        height: 36px !important;
        min-height: 36px !important;
        min-width: 76px !important;
        padding: 0 16px !important;
        border-radius: 9px !important;
        border: 0 !important;
        box-shadow: none !important;
    }
}

/* ---------------------------------------------------------------------
   Schedule week view. Time sat beside the title in a ~130px card, so
   titles broke one letter per line. Stack them: time as a small kicker,
   title below, clamped to three lines, words kept whole.
   --------------------------------------------------------------------- */
#omnisant .ios-calendar-page .ios-week-event-chip {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 4px !important;
    min-width: 0 !important;
    padding: 10px 12px !important;
}

#omnisant .ios-calendar-page .ios-week-event-time {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    line-height: 1.2 !important;
    color: rgba(218, 214, 206, 0.9) !important;
}

#omnisant .ios-calendar-page .ios-week-event-title {
    width: auto !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    font-size: 13px !important;
    font-weight: 650 !important;
    line-height: 1.3 !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

/* ---------------------------------------------------------------------
   Event dialog. One full-width row per group so no field is squeezed:
   Event, When (four fields), People (three), Where (two), Notes, Options.
   --------------------------------------------------------------------- */
#omnisant .event-edit-dialog-shell .event-edit-section-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
}

#omnisant .event-edit-dialog-shell .event-edit-section-grid > .config-dialog-section {
    grid-column: 1 / -1 !important;
    min-height: 0 !important;
    height: auto !important;
}

#omnisant .event-edit-dialog-shell .event-edit-when-grid,
#omnisant .event-edit-dialog-shell .event-edit-people-grid,
#omnisant .event-edit-dialog-shell .event-edit-location-row,
#omnisant .event-edit-dialog-shell .event-edit-recurrence-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
    width: 100% !important;
}

@media (min-width: 600px) {
    #omnisant .event-edit-dialog-shell .event-edit-when-grid,
    #omnisant .event-edit-dialog-shell .event-edit-location-row,
    #omnisant .event-edit-dialog-shell .event-edit-recurrence-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    #omnisant .event-edit-dialog-shell .event-edit-people-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (min-width: 960px) {
    #omnisant .event-edit-dialog-shell .event-edit-when-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

#omnisant .event-edit-dialog-shell .event-edit-when-grid > *,
#omnisant .event-edit-dialog-shell .event-edit-people-grid > *,
#omnisant .event-edit-dialog-shell .event-edit-location-row > * {
    min-width: 0 !important;
    width: 100% !important;
    max-width: none !important;
}

/* ---------------------------------------------------------------------
   Select chevrons. The select's arrow container also carries the
   .mud-select-input class, so the text-slot rule (flex 1, 50px right
   padding) squeezed the arrow to 0px in dialogs. Give it its own slot.
   --------------------------------------------------------------------- */
#omnisant .mud-input > .mud-input-adornment.mud-select-input {
    flex: 0 0 40px !important;
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: none !important;
}

#omnisant .mud-input > .mud-input-adornment.mud-select-input > svg,
#omnisant .mud-input > .mud-input-adornment.mud-select-input .mud-icon-root {
    flex: 0 0 20px !important;
    width: 20px !important;
    height: 20px !important;
    color: rgba(231, 228, 223, 0.62) !important;
    fill: currentColor !important;
}

/* One text column per field: label, value and placeholder all start 13px
   in from the field edge (1px border + 12px padding). Labels were 9px in,
   select values 25px in, text inputs 13px in. */
#omnisant * {
    --omni-form-label-inset: 12px;
}

#omnisant .mud-select .mud-input.mud-input-outlined {
    padding-left: 0 !important;
}

#omnisant .mud-select .mud-input.mud-input-outlined > .mud-input-slot {
    padding-left: 12px !important;
}

#omnisant .mud-input-control .mud-input-label,
#omnisant .mud-input-control .mud-input-label.mud-shrink,
#omnisant .mud-input-control .mud-input-label.mud-input-label-animate {
    left: 13px !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
}

#omnisant .event-edit-dialog-shell .event-edit-title-section { order: 1; }
#omnisant .event-edit-dialog-shell .event-edit-schedule-section { order: 2; }
#omnisant .event-edit-dialog-shell .event-edit-people-section { order: 3; }
#omnisant .event-edit-dialog-shell .event-edit-location-section { order: 4; }
#omnisant .event-edit-dialog-shell .event-edit-notes-section { order: 5; }
#omnisant .event-edit-dialog-shell .event-edit-options-section { order: 6; }

/* ---------------------------------------------------------------------
   Dialog height. Dialogs were capped near 760px even on tall screens,
   so forms scrolled needlessly. Use the screen: header and actions stay
   put, only the content scrolls, and only when it has to.
   --------------------------------------------------------------------- */
@media (min-width: 769px) {
    #omnisant .mud-dialog:not(.mud-dialog-fullscreen) {
        display: flex !important;
        flex-direction: column !important;
        max-height: calc(100dvh - 48px) !important;
    }

    #omnisant .mud-dialog:not(.mud-dialog-fullscreen) > .mud-dialog-content,
    #omnisant .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;
    }

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

/* ---------------------------------------------------------------------
   Multi-line fields size to their row count. The box was fixed near
   54px and the textarea sat 20px low inside it, so a "3 line" notes
   field showed barely one line.
   --------------------------------------------------------------------- */
#omnisant .mud-input-control:has(textarea),
#omnisant .mud-input-control:has(textarea) > .mud-input-control-input-container {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
}

#omnisant .mud-input-control:has(textarea) .mud-input.mud-input-outlined {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    align-items: stretch !important;
    padding: 0 !important;
}

#omnisant .mud-input-control .mud-input > textarea.mud-input-slot {
    position: static !important;
    top: auto !important;
    margin: 0 !important;
    height: auto !important;
    max-height: none !important;
    padding: 11px 12px !important;
    line-height: 1.5 !important;
    resize: vertical !important;
}

#omnisant .mud-input > textarea[rows="1"] { min-height: 46px !important; }
#omnisant .mud-input > textarea[rows="2"] { min-height: 70px !important; }
#omnisant .mud-input > textarea[rows="3"] { min-height: 94px !important; }
#omnisant .mud-input > textarea[rows="4"] { min-height: 118px !important; }
#omnisant .mud-input > textarea[rows="5"] { min-height: 142px !important; }
#omnisant .mud-input > textarea[rows="6"] { min-height: 166px !important; }
#omnisant .mud-input > textarea[rows="8"] { min-height: 214px !important; }
#omnisant .mud-input > textarea[rows="10"] { min-height: 262px !important; }

/* Same label-to-box spacing as single-line fields (label row is 24px). */
#omnisant .mud-input-control.mud-input-outlined-with-label:has(textarea) > .mud-input-control-input-container {
    padding-top: 24px !important;
}

/* ---------------------------------------------------------------------
   Notes command bar. Same field language as every form: label above,
   44px box, value and label on one text column. Grid instead of wrap
   so fields never strand on a row of their own:
   wide  - Category | Note | Category name | Share | actions
   mid   - Category | Note         | actions
           Category name | Share
   --------------------------------------------------------------------- */
@media (min-width: 769px) {
    #omnisant .notes-page .notes-command-bar {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: end !important;
        gap: 12px !important;
        min-height: 0 !important;
        height: auto !important;
        padding: 12px 14px 14px !important;
    }

    #omnisant .notes-page .notes-command-left {
        display: grid !important;
        grid-template-columns: minmax(170px, 1fr) minmax(220px, 1.6fr) !important;
        gap: 12px !important;
        align-items: end !important;
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
    }

    #omnisant .notes-page .notes-command-right {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        height: 44px !important;
        margin: 0 !important;
        padding: 0 !important;
        align-self: end !important;
    }

    #omnisant .notes-page .notes-command-right .mud-icon-button,
    #omnisant .notes-page .notes-command-right .mud-button-root {
        height: 44px !important;
        min-height: 44px !important;
        min-width: 44px !important;
        margin: 0 !important;
        border-radius: 12px !important;
    }

    #omnisant .notes-page .notes-command-left > *,
    #omnisant .notes-page .notes-command-left .mud-select,
    #omnisant .notes-page .notes-command-left .mud-input-control {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
    }

    #omnisant .notes-page .notes-command-left .mud-input-control-input-container {
        position: relative !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 24px 0 0 !important;
    }

    #omnisant .notes-page .notes-command-left .mud-input.mud-input-outlined {
        height: 44px !important;
        min-height: 44px !important;
        padding: 0 !important;
        align-items: center !important;
    }

    #omnisant .notes-page .notes-command-left .mud-input.mud-input-outlined > .mud-input-slot {
        height: 42px !important;
        min-height: 0 !important;
        padding: 0 44px 0 12px !important;
        display: flex !important;
        align-items: center !important;
        line-height: 42px !important;
    }

    #omnisant .notes-page .notes-command-left .notes-category-name .mud-input.mud-input-outlined > .mud-input-slot {
        padding-right: 12px !important;
    }

    #omnisant .notes-page .notes-command-left .mud-input-adornment {
        border-left: 0 !important;
    }

    #omnisant .notes-page .notes-command-left .mud-input-label {
        position: absolute !important;
        top: 0 !important;
        left: 13px !important;
        transform: none !important;
        height: 14px !important;
        padding: 0 !important;
        margin: 0 !important;
        line-height: 14px !important;
        color: var(--app-label-color) !important;
        font-size: var(--app-label-size) !important;
        font-weight: 680 !important;
        letter-spacing: var(--app-label-tracking) !important;
        text-transform: uppercase !important;
        background: transparent !important;
    }
}

@media (min-width: 1400px) {
    #omnisant .notes-page .notes-command-left {
        grid-template-columns: minmax(170px, 1fr) minmax(240px, 1.8fr) minmax(170px, 1fr) minmax(170px, 1fr) !important;
    }
}

@media (min-width: 769px) {
    #omnisant .notes-page .notes-command-left .mud-select,
    #omnisant .notes-page .notes-command-left .mud-input-control,
    #omnisant .notes-page .notes-command-left .mud-input-control-input-container {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }
}

/* ---------------------------------------------------------------------
   Field wrappers are invisible. Only the field box (.mud-input) has a
   surface; older page rules painted the wrapper too, leaving faint
   rectangles behind labels (Preferences, Notes, phone dialogs).
   --------------------------------------------------------------------- */
#omnisant .mud-select:not(.mud-input),
#omnisant .mud-input-control,
#omnisant .mud-input-control > .mud-input-control-input-container {
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border-color: transparent !important;
}

/* ---------------------------------------------------------------------
   Setup overview cards: the count badge sits beside the title and the
   description uses the card's full width (it was squeezed to ~150px and
   cut off after three lines).
   --------------------------------------------------------------------- */
#omnisant .settings-overview-page .settings-card-top {
    position: relative !important;
    display: block !important;
}

#omnisant .settings-overview-page .settings-card-top > div:first-child {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
}

#omnisant .settings-overview-page .settings-card-top .settings-card-title {
    padding-right: 104px !important;
}

#omnisant .settings-overview-page .settings-card-top .soft-muted {
    display: block !important;
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
    overflow: visible !important;
    max-height: none !important;
    margin-top: 8px !important;
}

#omnisant .settings-overview-page .settings-card-top > .mud-chip {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    margin: 0 !important;
}

/* ---------------------------------------------------------------------
   Audit log: event badges wrap inside their column instead of running
   into Actor.
   --------------------------------------------------------------------- */
#omnisant .audit-log-page .audit-log-matrix td .mud-chip,
#omnisant .audit-log-page .audit-log-matrix td [class*="audit-log-event"] {
    max-width: 100% !important;
    height: auto !important;
    min-height: 24px !important;
    white-space: normal !important;
    text-align: left !important;
    line-height: 1.25 !important;
    padding-top: 3px !important;
    padding-bottom: 3px !important;
}

#omnisant .audit-log-page .audit-log-toolbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(200px, 260px) !important;
    gap: 12px !important;
    align-items: center !important;
}

#omnisant .audit-log-page .audit-log-toolbar > *,
#omnisant .audit-log-page .audit-log-toolbar .mud-select,
#omnisant .audit-log-page .audit-log-toolbar .mud-input-control {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
}

@media (max-width: 768px) {
    #omnisant .audit-log-page .audit-log-toolbar {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

#omnisant .audit-log-page .audit-log-toolbar .mud-select > .mud-input-control,
#omnisant .audit-log-page .audit-log-toolbar .audit-log-filter {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
}

#omnisant .settings-overview-page .settings-card-top > .mud-chip-container {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: auto !important;
    display: block !important;
}

#omnisant .settings-overview-page .settings-card-top > .mud-chip-container > .mud-chip {
    width: auto !important;
    margin: 0 !important;
}

/* ---------------------------------------------------------------------
   Phone gutter: 16px (and never inside the safe area). Content sat 6px
   from the screen edge.
   --------------------------------------------------------------------- */
@media (max-width: 768px) {
    #omnisant .mud-main-content.app-main-content {
        padding-left: max(16px, env(safe-area-inset-left)) !important;
        padding-right: max(16px, env(safe-area-inset-right)) !important;
    }
}

/* Today on phones: the time pill column fits "12:00 AM" (it clipped at 56px). */
@media (max-width: 768px) {
    #omnisant .dayplan-page .dayplan-card.dayplan-card-timeline,
    #omnisant .dayplan-page .dayplan-card-timeline.mud-paper {
        grid-template-columns: 70px minmax(0, 1fr) !important;
        column-gap: 8px !important;
    }

    #omnisant .dayplan-page .dayplan-card-timeline .dayplan-rail-time {
        width: 70px !important;
        min-width: 70px !important;
        max-width: 70px !important;
        justify-content: center !important;
        padding: 0 4px !important;
        white-space: nowrap !important;
        font-size: 11px !important;
        letter-spacing: 0 !important;
    }
}

/* ---------------------------------------------------------------------
   Phone bottom navigation: every item is icon over label, one line,
   same baseline. Items used to wrap differently ("Schedule" dropped a
   line, "Today" didn't). Content keeps clear of the bar.
   --------------------------------------------------------------------- */
@media (max-width: 768px) {
    #omnisant .mobile-bottom-nav {
        display: grid !important;
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        align-items: stretch !important;
        gap: 2px !important;
        padding: 6px 6px calc(6px + env(safe-area-inset-bottom)) !important;
    }

    #omnisant .mobile-bottom-nav .mobile-bottom-nav-item,
    #omnisant .mobile-bottom-nav > a,
    #omnisant .mobile-bottom-nav > button {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;
        min-width: 0 !important;
        width: 100% !important;
        height: 50px !important;
        padding: 0 2px !important;
        margin: 0 !important;
        text-align: center !important;
    }

    #omnisant .mobile-bottom-nav .mud-icon-root {
        width: 22px !important;
        height: 22px !important;
        margin: 0 !important;
        flex: 0 0 22px !important;
    }

    #omnisant .mobile-bottom-nav span {
        display: block !important;
        max-width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        font-size: 10.5px !important;
        font-weight: 650 !important;
        letter-spacing: 0.01em !important;
        line-height: 1.1 !important;
    }

    #omnisant .mud-main-content.app-main-content {
        padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important;
    }
}

/* ---------------------------------------------------------------------
   Transport on phones. Slot name gets its own line beside the add
   button (it was truncated to "Afternoon Pick..."), assignments sit
   underneath at full width, days stack at an even rhythm, and the week
   controls are proper 44px touch targets.
   --------------------------------------------------------------------- */
@media (max-width: 768px) {
    #omnisant .schoolrunsweek-page .schoolrunsweek-days {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 14px !important;
    }

    #omnisant .schoolrunsweek-page .schoolrunsweek-day-card {
        margin: 0 !important;
        padding: 12px 14px !important;
    }

    #omnisant .schoolrunsweek-page .schoolrunsweek-slot-content {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 36px !important;
        grid-template-areas: none !important;
        align-items: center !important;
        column-gap: 10px !important;
        row-gap: 8px !important;
        padding: 12px 0 !important;
    }

    #omnisant .schoolrunsweek-page .schoolrunsweek-slot-content > * {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
    }

    #omnisant .schoolrunsweek-page .schoolrunsweek-slot-header {
        display: contents !important;
    }

    #omnisant .schoolrunsweek-page .schoolrunsweek-slot-title {
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: auto !important;
        overflow: visible !important;
        white-space: normal !important;
        text-overflow: clip !important;
    }

    #omnisant .schoolrunsweek-page .schoolrunsweek-slot-add-button.mud-button-root {
        grid-column: 2 !important;
        grid-row: 1 !important;
        justify-self: end !important;
        width: 36px !important;
        min-width: 36px !important;
        height: 36px !important;
    }

    #omnisant .schoolrunsweek-page .schoolrunsweek-toolbar {
        padding: 8px !important;
        min-height: 0 !important;
    }

    #omnisant .schoolrunsweek-page .schoolrunsweek-nav-wrap {
        display: grid !important;
        grid-template-columns: 44px minmax(0, 1fr) 44px !important;
        gap: 8px !important;
        padding: 0 !important;
    }

    #omnisant .schoolrunsweek-page .schoolrunsweek-nav-wrap > .mud-button-root {
        height: 44px !important;
        min-height: 44px !important;
        min-width: 44px !important;
        padding: 0 !important;
        border-radius: 12px !important;
    }

    #omnisant .schoolrunsweek-page .schoolrunsweek-nav-wrap > .mud-icon-button .mud-icon-root {
        width: 22px !important;
        height: 22px !important;
    }
}

/* ---------------------------------------------------------------------
   Tablets (769-1023px). The layout switches to the phone shell (bottom
   navigation, slide-out menu) below 1024px, but the phone styling only
   ran to 768px, so on an iPad in portrait the navigation rendered as
   plain inline links across the page. Style it the same as on phones.
   --------------------------------------------------------------------- */
@media (min-width: 769px) and (max-width: 1023.98px) {
    #omnisant nav.mobile-bottom-nav {
        position: fixed !important;
        left: 50% !important;
        right: auto !important;
        bottom: max(12px, env(safe-area-inset-bottom, 0px)) !important;
        transform: translateX(-50%) !important;
        z-index: 1200 !important;
        display: grid !important;
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        align-items: stretch !important;
        gap: 4px !important;
        width: min(calc(100vw - 32px), 460px) !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        padding: 6px !important;
        border-radius: 20px !important;
        background: rgba(10, 10, 11, 0.94) !important;
        border: 1px solid rgba(230, 228, 223, 0.10) !important;
        box-shadow: 0 14px 34px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
        backdrop-filter: blur(18px);
    }

    #omnisant nav.mobile-bottom-nav > a,
    #omnisant nav.mobile-bottom-nav > button {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;
        min-width: 0 !important;
        height: 52px !important;
        padding: 0 4px !important;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 14px !important;
        background: transparent !important;
        color: rgba(231, 228, 223, 0.72) !important;
        text-decoration: none !important;
    }

    #omnisant nav.mobile-bottom-nav > a.active,
    #omnisant nav.mobile-bottom-nav > button.active {
        background: rgba(206, 187, 155, 0.14) !important;
        color: rgba(250, 250, 249, 0.96) !important;
    }

    #omnisant nav.mobile-bottom-nav .mud-icon-root {
        width: 22px !important;
        height: 22px !important;
        margin: 0 !important;
    }

    #omnisant nav.mobile-bottom-nav span {
        display: block !important;
        white-space: nowrap !important;
        font-size: 11px !important;
        font-weight: 650 !important;
        line-height: 1.1 !important;
    }

    #omnisant .mud-main-content.app-main-content {
        padding-bottom: calc(104px + env(safe-area-inset-bottom)) !important;
    }
}

/* Schedule on tablets: the desktop month and week grids were hidden below
   1024px and the phone lists above 768px, so 769-1023px showed nothing. */
@media (min-width: 769px) and (max-width: 1023.98px) {
    #omnisant .ios-calendar-page .ios-month-view-desktop {
        display: block !important;
    }

    #omnisant .ios-calendar-page .ios-month-view-desktop .ios-month-weekdays,
    #omnisant .ios-calendar-page .ios-month-view-desktop .ios-month-grid {
        display: grid !important;
        grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    }

    #omnisant .ios-calendar-page .ios-week-view-desktop {
        display: block !important;
    }

    #omnisant .ios-calendar-page .ios-month-mobile-list,
    #omnisant .ios-calendar-page .ios-week-view-mobile {
        display: none !important;
    }
}

#omnisant .ios-calendar-page .ios-week-view-desktop .ios-week-event-chip {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
}

#omnisant .ios-calendar-page .ios-week-view-desktop .ios-week-event-title {
    visibility: visible !important;
    opacity: 1 !important;
    position: static !important;
    max-height: none !important;
}

@media (max-width: 1279.98px) {
    #omnisant .ios-calendar-page .ios-week-view-desktop .ios-week-event-chip {
        padding: 8px 9px !important;
    }

    #omnisant .ios-calendar-page .ios-week-view-desktop .ios-week-event-title {
        font-size: 12px !important;
    }
}

#omnisant .ios-calendar-page .ios-week-view-desktop .ios-week-event-title {
    white-space: normal !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* ---------------------------------------------------------------------
   Notes on phones and small tablets (up to 768px): every control is
   full width in one column, actions sit right-aligned beneath, and the
   note list uses the same cards as desktop.
   --------------------------------------------------------------------- */
@media (max-width: 768px) {
    #omnisant .notes-page .notes-command-bar {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 12px !important;
        padding: 12px !important;
    }

    #omnisant .notes-page .notes-command-left {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 12px !important;
        width: 100% !important;
    }

    #omnisant .notes-page .notes-command-left > *,
    #omnisant .notes-page .notes-command-left .mud-select,
    #omnisant .notes-page .notes-command-left .mud-input-control {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        flex: 1 1 auto !important;
    }

    #omnisant .notes-page .notes-command-right {
        display: flex !important;
        justify-content: flex-end !important;
        gap: 8px !important;
    }

    #omnisant .notes-page .notes-command-right .mud-icon-button {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        border-radius: 12px !important;
    }

    #omnisant .notes-page .notes-list-items {
        display: grid !important;
        gap: 8px !important;
    }

    #omnisant .notes-page .notes-list-item {
        display: grid !important;
        gap: 4px !important;
        width: 100% !important;
        padding: 12px 14px !important;
        border: 1px solid rgba(255, 255, 255, 0.06) !important;
        border-radius: 14px !important;
        background: rgba(255, 255, 255, 0.028) !important;
        text-align: left !important;
    }

    #omnisant .notes-page .notes-list-item.is-active {
        border-color: rgba(206, 187, 155, 0.24) !important;
        background: rgba(206, 187, 155, 0.09) !important;
    }

    #omnisant .notes-page .notes-list-preview {
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        overflow-wrap: anywhere !important;
        font-size: 14px !important;
        color: rgba(231, 228, 223, 0.7) !important;
    }

    #omnisant .notes-page .notes-list-meta {
        font-size: 11px !important;
    }
}

/* Today on tablets: one surface per row (the row wrapper also drew a box). */
@media (min-width: 769px) and (max-width: 1023.98px) {
    #omnisant .dayplan-page .dayplan-card.dayplan-card-timeline,
    #omnisant .dayplan-page .dayplan-card-timeline.mud-paper {
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }
}

/* ---------------------------------------------------------------------
   One text column for every outlined field (text, select, picker,
   textarea): the box has no left padding and the slot starts 12px in,
   so labels, values and placeholders line up 13px from the edge.
   Fields with a leading icon (search) keep their own layout.
   --------------------------------------------------------------------- */
#omnisant .mud-input.mud-input-outlined:not(.mud-input-adorned-start) {
    padding-left: 0 !important;
}

#omnisant .mud-input.mud-input-outlined:not(.mud-input-adorned-start) > input.mud-input-slot,
#omnisant .mud-input.mud-input-outlined:not(.mud-input-adorned-start) > div.mud-input-slot,
#omnisant .mud-input.mud-input-outlined:not(.mud-input-adorned-start) > textarea.mud-input-slot {
    padding-left: 12px !important;
    margin-left: 0 !important;
    text-indent: 0 !important;
}

/* ---------------------------------------------------------------------
   Dialog sections, one standard. 16px inside, 12px between fields,
   14px corners; the section title sits 14px above the first field.
   --------------------------------------------------------------------- */
#omnisant .mud-dialog .config-dialog-section {
    padding: 16px !important;
    border-radius: 14px !important;
    gap: 12px !important;
    min-width: 0 !important;
}

#omnisant .mud-dialog .config-dialog-section > .config-dialog-section-header {
    margin: 0 0 2px !important;
}

/* ---------------------------------------------------------------------
   Service item dialog. Sections stack full width in a sensible order
   (what, which asset, when, who/where, automation) and fields pair up
   two per row, instead of three cramped columns of uneven height.
   --------------------------------------------------------------------- */
#omnisant .maintenance-edit-dialog-shell .maintenance-edit-section-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas: none !important;
    gap: 12px !important;
}

#omnisant .maintenance-edit-dialog-shell .maintenance-edit-section-grid > .maintenance-edit-section {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    grid-area: auto !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
}

#omnisant .maintenance-edit-dialog-shell .maintenance-edit-service-section { order: 1; }
#omnisant .maintenance-edit-dialog-shell .maintenance-edit-asset-section { order: 2; }
#omnisant .maintenance-edit-dialog-shell .maintenance-edit-schedule-section { order: 3; }
#omnisant .maintenance-edit-dialog-shell .maintenance-edit-vendor-section { order: 4; }
#omnisant .maintenance-edit-dialog-shell .maintenance-edit-secondary-section { order: 5; }

#omnisant .maintenance-edit-dialog-shell .maintenance-edit-grid,
#omnisant .maintenance-edit-dialog-shell .maintenance-edit-frequency-grid,
#omnisant .maintenance-edit-dialog-shell .maintenance-edit-secondary-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas: none !important;
    gap: 12px !important;
    align-items: start !important;
}

@media (min-width: 600px) {
    #omnisant .maintenance-edit-dialog-shell .maintenance-edit-grid,
    #omnisant .maintenance-edit-dialog-shell .maintenance-edit-frequency-grid,
    #omnisant .maintenance-edit-dialog-shell .maintenance-edit-secondary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    #omnisant .maintenance-edit-dialog-shell .maintenance-edit-title-cell,
    #omnisant .maintenance-edit-dialog-shell .maintenance-edit-notes-cell,
    #omnisant .maintenance-edit-dialog-shell .maintenance-edit-location-cell {
        grid-column: 1 / -1 !important;
    }
}

#omnisant .maintenance-edit-dialog-shell .maintenance-field,
#omnisant .maintenance-edit-dialog-shell .maintenance-edit-grid > *,
#omnisant .maintenance-edit-dialog-shell .maintenance-edit-frequency-grid > * {
    grid-area: auto !important;
    grid-row: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
}

/* Switch rows: one quiet line, label beside the switch, no box. */
#omnisant .maintenance-edit-dialog-shell .maintenance-inline-switch {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 44px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    align-self: end !important;
}

#omnisant .maintenance-edit-dialog-shell .maintenance-edit-secondary-summary {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 20px !important;
    cursor: pointer !important;
}

@media (min-width: 600px) {
    #omnisant .maintenance-edit-dialog-shell .maintenance-edit-grid > .maintenance-edit-title-cell,
    #omnisant .maintenance-edit-dialog-shell .maintenance-edit-grid > .maintenance-edit-notes-cell,
    #omnisant .maintenance-edit-dialog-shell .maintenance-edit-grid > .maintenance-edit-location-cell {
        grid-column: 1 / -1 !important;
    }
}

/* Number steppers: quiet chevrons inside the field, not two outlined pills. */
#omnisant .mud-input-numeric-spin {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 0 !important;
    height: 100% !important;
    padding: 0 4px 0 0 !important;
}

#omnisant .mud-input-numeric-spin .mud-icon-button,
#omnisant .mud-input-numeric-spin button {
    width: 28px !important;
    min-width: 28px !important;
    height: 18px !important;
    min-height: 18px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 6px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: rgba(231, 228, 223, 0.6) !important;
}

#omnisant .mud-input-numeric-spin .mud-icon-button:hover,
#omnisant .mud-input-numeric-spin button:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    color: rgba(250, 250, 249, 0.92) !important;
}

#omnisant .mud-input-numeric-spin .mud-icon-root {
    width: 18px !important;
    height: 18px !important;
}

/* ---------------------------------------------------------------------
   Switch, one design everywhere: a 44x26 pill track with a 20px knob
   centred inside it; champagne-blue when on. Replaces MudBlazor's
   thumb-over-thin-track, which sat 3px off-centre and picked up the
   square icon-button box behind it.
   --------------------------------------------------------------------- */
#omnisant .mud-switch {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 !important;
    cursor: pointer !important;
}

#omnisant .mud-switch .mud-switch-span {
    position: relative !important;
    display: inline-block !important;
    flex: 0 0 44px !important;
    width: 44px !important;
    height: 26px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
}

#omnisant .mud-switch .mud-switch-track {
    position: absolute !important;
    inset: 0 !important;
    width: 44px !important;
    height: 26px !important;
    margin: 0 !important;
    border-radius: 13px !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    background: rgba(255, 255, 255, 0.10) !important;
    opacity: 1 !important;
    transition: background-color 160ms ease, border-color 160ms ease !important;
}

#omnisant .mud-switch .mud-switch-base {
    position: absolute !important;
    top: 3px !important;
    left: 3px !important;
    z-index: 1 !important;
    width: 20px !important;
    min-width: 20px !important;
    height: 20px !important;
    min-height: 20px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: translateX(0) !important;
    transition: transform 160ms ease !important;
}

#omnisant .mud-switch .mud-switch-base.mud-checked {
    transform: translateX(18px) !important;
}

#omnisant .mud-switch .mud-switch-base .mud-ripple-effect {
    display: none !important;
}

#omnisant .mud-switch .mud-switch-button {
    width: 20px !important;
    height: 20px !important;
    padding: 0 !important;
    margin: 0 !important;
}

#omnisant .mud-switch .mud-switch-input {
    position: absolute !important;
    inset: -3px !important;
    width: 44px !important;
    height: 26px !important;
    margin: 0 !important;
    opacity: 0 !important;
    cursor: pointer !important;
}

#omnisant .mud-switch [class*="mud-switch-thumb"] {
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    background: #f5f4f3 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45) !important;
}

#omnisant .mud-switch .mud-switch-base.mud-checked + .mud-switch-track {
    background: rgba(206, 187, 155, 0.85) !important;
    border-color: rgba(226, 209, 180, 0.9) !important;
}

#omnisant .mud-switch .mud-switch-base:focus-within [class*="mud-switch-thumb"] {
    box-shadow: 0 0 0 3px rgba(226, 209, 180, 0.35), 0 1px 3px rgba(0, 0, 0, 0.45) !important;
}

/* ---------------------------------------------------------------------
   Label-to-field gap. Labels sit 8px above their box everywhere in
   dialogs and forms (they were touching the box in several dialogs).
   --------------------------------------------------------------------- */
#omnisant .mud-dialog .mud-input-control.mud-input-outlined-with-label > .mud-input-control-input-container,
#omnisant .preferences-page .mud-input-control.mud-input-outlined-with-label > .mud-input-control-input-container {
    padding-top: 22px !important;
}

#omnisant .mud-dialog .mud-input-control.mud-input-outlined-with-label > .mud-input-control-input-container > .mud-input-label,
#omnisant .preferences-page .mud-input-control.mud-input-outlined-with-label > .mud-input-control-input-container > .mud-input-label {
    top: 0 !important;
}

#omnisant .mud-dialog .mud-input-control.mud-input-outlined-with-label,
#omnisant .mud-dialog .mud-input-control.mud-input-outlined-with-label > .mud-input-control-input-container,
#omnisant .preferences-page .mud-input-control.mud-input-outlined-with-label,
#omnisant .preferences-page .mud-input-control.mud-input-outlined-with-label > .mud-input-control-input-container {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
}

#omnisant .mud-dialog .mud-select,
#omnisant .preferences-page .mud-select {
    height: auto !important;
    min-height: 0 !important;
}

/* Switch rows beside a labelled field: centre the switch on the field box
   (the box sits below a 22px label row). */
#omnisant .mud-dialog .maintenance-inline-switch {
    align-self: stretch !important;
    align-items: flex-end !important;
    min-height: 66px !important;
    padding-bottom: 9px !important;
}

#omnisant .mud-dialog .maintenance-inline-switch > .mud-input-control,
#omnisant .mud-dialog .maintenance-inline-switch > .mud-input-control > .mud-input-control-input-container {
    min-height: 0 !important;
    height: 26px !important;
}

/* ---------------------------------------------------------------------
   Day plan dialog: Date and Time follow the same label/field rhythm as
   every other field (label 13px in, 8px above a 44px box); Audience and
   Children sit on one line.
   --------------------------------------------------------------------- */
#omnisant .dayplan-edit-dialog-shell .dayplan-edit-timing-grid {
    display: grid !important;
    gap: 12px !important;
}

#omnisant .dayplan-edit-dialog-shell .dayplan-edit-control {
    display: grid !important;
    grid-template-rows: 14px auto !important;
    row-gap: 8px !important;
    margin: 0 !important;
}

#omnisant .dayplan-edit-dialog-shell .dayplan-edit-control-label {
    padding: 0 0 0 13px !important;
    height: 14px !important;
    line-height: 14px !important;
    color: var(--app-label-color) !important;
    font-size: var(--app-label-size) !important;
    font-weight: 680 !important;
    letter-spacing: var(--app-label-tracking) !important;
    text-transform: uppercase !important;
}

#omnisant .dayplan-edit-dialog-shell .dayplan-edit-date-picker,
#omnisant .dayplan-edit-dialog-shell .dayplan-edit-date-picker .mud-input-control,
#omnisant .dayplan-edit-dialog-shell .dayplan-edit-date-picker .mud-input-control-input-container {
    height: 44px !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}

#omnisant .dayplan-edit-dialog-shell .dayplan-edit-time-shell {
    height: 44px !important;
    min-height: 44px !important;
    border-radius: 12px !important;
    align-items: center !important;
}

#omnisant .dayplan-edit-dialog-shell .dayplan-edit-assignment-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    align-items: start !important;
}

#omnisant .dayplan-edit-dialog-shell .dayplan-edit-assignment-grid > * {
    margin: 0 !important;
    align-self: start !important;
}

/* ---------------------------------------------------------------------
   Checkbox rows: box and label centred on one line everywhere
   (Contact classification had the box riding high).
   --------------------------------------------------------------------- */
#omnisant .mud-dialog .mud-checkbox,
#omnisant .mud-dialog .contact-edit-toggle-row {
    align-items: center !important;
}

#omnisant .mud-dialog .contact-edit-toggle-row {
    display: flex !important;
    justify-content: space-between !important;
    min-height: 48px !important;
    padding: 0 8px 0 14px !important;
}

#omnisant .mud-dialog .contact-edit-toggle-row .mud-input-control,
#omnisant .mud-dialog .contact-edit-toggle-row .mud-input-control-input-container {
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    align-self: center !important;
}

#omnisant .mud-dialog .contact-edit-toggle-row > span {
    flex: 1 1 auto !important;
    min-width: max-content !important;
}

#omnisant .mud-dialog .contact-edit-toggle-row > .mud-input-control {
    flex: 0 0 auto !important;
    width: auto !important;
}

#omnisant .mud-dialog .contact-edit-toggle-row .mud-checkbox {
    width: auto !important;
}

/* ---------------------------------------------------------------------
   Dialog frame, one standard for every dialog:
   - sections 12px apart (some were 48px);
   - a section header is just its title, plus an optional 13px helper line;
   - content padding 16px 20px, no dead space above the actions;
   - actions right-aligned at natural width (Add House stretched Save).
   --------------------------------------------------------------------- */
#omnisant .mud-dialog .config-dialog-shell {
    gap: 12px !important;
    row-gap: 12px !important;
}

#omnisant .mud-dialog .config-dialog-section > .config-dialog-section-header {
    display: grid !important;
    gap: 6px !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
}

#omnisant .mud-dialog .config-dialog-helper,
#omnisant .mud-dialog .config-dialog-section-header .soft-muted {
    margin: 0 !important;
    font-size: 13px !important;
    font-weight: 450 !important;
    line-height: 1.45 !important;
    color: rgba(222, 219, 214, 0.66) !important;
}

@media (min-width: 769px) {
    #omnisant .mud-dialog:not(.mud-dialog-fullscreen) .mud-dialog-content {
        padding: 16px 20px !important;
    }
}

#omnisant .mud-dialog .mud-dialog-actions {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 10px !important;
}

#omnisant .mud-dialog .mud-dialog-actions > .mud-button-root {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 96px !important;
}

#omnisant .mud-dialog .mud-dialog-actions > .mud-button-root.mr-auto {
    margin-right: auto !important;
}

/* Sections are spaced by the shell's gap only (they also carried 16/18px margins). */
#omnisant .mud-dialog .config-dialog-section,
#omnisant .mud-dialog .config-dialog-section + .config-dialog-section {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Field grids inside sections don't add their own spacing. */
#omnisant .mud-dialog .config-dialog-section .config-dialog-grid,
#omnisant .mud-dialog .config-dialog-section [class*="-grid"] {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    row-gap: 12px !important;
}

#omnisant .mud-dialog .config-dialog-section-kicker {
    margin: 0 !important;
}

/* MudGrid inside dialogs: 12px gutters like everything else (it added 8px padding per item). */
#omnisant .mud-dialog .mud-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    margin: 0 !important;
    gap: 12px !important;
}

#omnisant .mud-dialog .mud-grid > .mud-grid-item {
    padding: 0 !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

@media (min-width: 600px) {
    #omnisant .mud-dialog .mud-grid > .mud-grid-item-sm-6 {
        flex: 0 0 calc(50% - 6px) !important;
        max-width: calc(50% - 6px) !important;
    }

    #omnisant .mud-dialog .mud-grid > .mud-grid-item-sm-4 {
        flex: 0 0 calc(33.333% - 8px) !important;
        max-width: calc(33.333% - 8px) !important;
    }
}

/* ---------------------------------------------------------------------
   Checkboxes in dialogs: 20px box, 14px/600 label, 8px between, and the
   whole row is at least 36px tall so they're easy to hit.
   --------------------------------------------------------------------- */
#omnisant .mud-dialog .mud-checkbox {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 36px !important;
    margin: 0 !important;
}

#omnisant .mud-dialog .mud-checkbox > .mud-button-root {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    padding: 0 !important;
    margin: 0 !important;
}

#omnisant .mud-dialog .mud-checkbox > .mud-button-root .mud-icon-root,
#omnisant .mud-dialog .mud-checkbox > .mud-button-root svg {
    width: 20px !important;
    height: 20px !important;
}

#omnisant .mud-dialog .mud-checkbox .mud-typography,
#omnisant .mud-dialog .mud-checkbox > p,
#omnisant .mud-dialog .mud-checkbox > span:not(.mud-button-root):not(.mud-sr-only) {
    margin: 0 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    color: rgba(244, 243, 240, 0.88) !important;
}

/* ---------------------------------------------------------------------
   Shopping rows: the item name owns the first line (up to two lines,
   never 12 characters and an ellipsis); quantity, notes, tags and date
   flow quietly on the second; Bought and the menu stay at the right.
   --------------------------------------------------------------------- */
#omnisant .shopping-item-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    column-gap: 12px !important;
    min-height: 58px !important;
    height: auto !important;
}

#omnisant .shopping-item-row .shopping-item-main {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    column-gap: 10px !important;
    row-gap: 4px !important;
    min-width: 0 !important;
}

#omnisant .shopping-item-row .shopping-item-topline {
    flex: 1 0 100% !important;
    min-width: 0 !important;
}

#omnisant .shopping-item-row .shopping-item-name {
    width: 100% !important;
    max-width: none !important;
    white-space: normal !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    line-height: 1.3 !important;
}

#omnisant .shopping-item-row .shopping-item-detail {
    display: block !important;
    flex: 0 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
}

#omnisant .shopping-item-row .shopping-item-badges {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    gap: 6px !important;
}

#omnisant .shopping-item-row .shopping-item-meta {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    width: auto !important;
    white-space: nowrap !important;
    overflow: visible !important;
    font-size: 12px !important;
    color: rgba(222, 219, 214, 0.55) !important;
}

#omnisant .shopping-item-row .shopping-item-main,
#omnisant .shopping-item-row .shopping-item-main > * {
    justify-content: flex-start !important;
    justify-self: start !important;
    text-align: left !important;
    margin-left: 0 !important;
}

#omnisant .shopping-item-row .shopping-item-detail {
    padding-left: 0 !important;
}

/* ---------------------------------------------------------------------
   Page subtitles are read, not truncated. On phones they step down to a
   quieter 15px so the title leads.
   --------------------------------------------------------------------- */
#omnisant .app-page-context,
#omnisant .app-page-shell-header .app-page-context {
    display: block !important;
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
    max-height: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

@media (max-width: 768px) {
    #omnisant .app-page-context,
    #omnisant .app-page-shell-header .app-page-context {
        font-size: 15px !important;
        font-weight: 450 !important;
        line-height: 1.5 !important;
    }
}

/* ---------------------------------------------------------------------
   Record cards (Stores and similar): label/value pairs read as a
   definition list: small uppercase label above a single-line value.
   Timestamps are quiet 12px metadata. Actions sit side by side.
   --------------------------------------------------------------------- */
#omnisant .store-card-meta-panel {
    display: grid !important;
    gap: 10px !important;
}

#omnisant .store-card-meta-row {
    display: grid !important;
    gap: 2px !important;
    min-width: 0 !important;
}

#omnisant .store-card-meta-label {
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: rgba(216, 213, 206, 0.6) !important;
}

#omnisant .store-card-meta-value {
    min-width: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    font-size: 14px !important;
    color: rgba(246, 245, 244, 0.9) !important;
}

#omnisant .store-card-footer,
#omnisant .store-card-footer .mud-typography {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: rgba(222, 219, 214, 0.5) !important;
}

#omnisant .store-card-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
}

#omnisant .store-card-actions > .mud-button-root {
    width: 100% !important;
    margin: 0 !important;
}

/* Page header toolbar breathes below the subtitle on phones. */
@media (max-width: 768px) {
    #omnisant .app-page-shell-header {
        gap: 14px !important;
    }

    #omnisant .app-page-shell-toolbar {
        margin-top: 2px !important;
    }

    /* Preferences: one card level on phones (panel inside a panel cost 32px of width). */
    #omnisant .preferences-page .preferences-card {
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }
}

/* Section header text, the same everywhere (dialogs, Preferences). */
#omnisant .config-dialog-section-title {
    margin: 0 !important;
    font-size: 11px !important;
    font-weight: 750 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    line-height: 1.1 !important;
    color: rgba(216, 213, 206, 0.72) !important;
}

#omnisant .config-dialog-section-copy {
    margin: 0 !important;
    font-size: 13px !important;
    font-weight: 450 !important;
    line-height: 1.45 !important;
    color: rgba(222, 219, 214, 0.66) !important;
}

#omnisant .preferences-page .config-dialog-section {
    padding: 16px !important;
    border-radius: 14px !important;
    display: grid !important;
    gap: 12px !important;
}

#omnisant .preferences-page .config-dialog-section > .config-dialog-section-header {
    display: grid !important;
    gap: 6px !important;
    margin: 0 !important;
}

/* ---------------------------------------------------------------------
   Page subtitles everywhere: a calm supporting line, not a second
   headline (they were 18px at weight 570).
   --------------------------------------------------------------------- */
#omnisant .app-page-context {
    max-width: 72ch !important;
    font-size: 16px !important;
    font-weight: 450 !important;
    line-height: 1.55 !important;
    color: rgba(222, 219, 214, 0.7) !important;
}

/* Preferences: sections start at the top (Context floated its field to the bottom). */
#omnisant .preferences-page .config-dialog-section {
    align-content: start !important;
    align-self: stretch !important;
}

#omnisant .preferences-page .config-dialog-section > .config-dialog-section-header {
    height: auto !important;
    min-height: 0 !important;
    align-content: start !important;
    justify-content: start !important;
}

#omnisant .preferences-page .preferences-form-grid {
    align-content: start !important;
    margin: 0 !important;
}

#omnisant .preferences-page .preferences-calendar-policy {
    font-size: 14px !important;
    line-height: 1.5 !important;
}

/* Calendar provider cards: status badge sits beside the name only; the
   description gets the full card width. */
#omnisant .preferences-page .preferences-calendar-card-top {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas: "name status" "copy copy" !important;
    align-items: start !important;
    column-gap: 10px !important;
    row-gap: 6px !important;
}

#omnisant .preferences-page .preferences-calendar-card-top > div:first-child {
    display: contents !important;
}

#omnisant .preferences-page .preferences-calendar-provider {
    grid-area: name !important;
}

#omnisant .preferences-page .preferences-calendar-copy {
    grid-area: copy !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: rgba(222, 219, 214, 0.7) !important;
}

#omnisant .preferences-page .preferences-calendar-card-top > :not(:first-child) {
    grid-area: status !important;
    justify-self: end !important;
}

/* ---------------------------------------------------------------------
   Audit log on phones and tablets: each entry is a card of label/value
   rows. Cells kept their desktop column widths (46-175px), squeezing
   values into a letter-wide sliver.
   --------------------------------------------------------------------- */
@media (max-width: 1023.98px) {
    #omnisant .audit-log-page .audit-log-matrix tbody tr {
        display: grid !important;
        gap: 8px !important;
        padding: 14px 16px !important;
    }

    #omnisant .audit-log-page .audit-log-matrix tbody td {
        display: grid !important;
        grid-template-columns: 84px minmax(0, 1fr) !important;
        align-items: baseline !important;
        column-gap: 12px !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        padding: 0 !important;
        border: 0 !important;
        overflow-wrap: anywhere !important;
        font-size: 14px !important;
    }

    #omnisant .audit-log-page .audit-log-matrix tbody td::before {
        font-size: 11px !important;
        letter-spacing: 0.08em !important;
    }

    #omnisant .audit-log-page .audit-log-matrix tbody td .mud-chip {
        justify-self: start !important;
        width: auto !important;
        max-width: 100% !important;
        height: auto !important;
    }

    #omnisant .audit-log-page .audit-log-matrix tbody td .mud-chip-content {
        white-space: normal !important;
        width: auto !important;
    }
}

/* Pickers in dialogs grow with their label row (a 44px fixed height with
   overflow hidden cut the box in half on tablets). */
#omnisant .mud-dialog .mud-picker,
#omnisant .mud-dialog .mud-picker > .mud-input-control,
#omnisant .mud-dialog .mud-picker > .mud-input-control > .mud-input-control-input-container {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

/* Checkbox groups wrap cleanly with even spacing instead of overlapping. */
#omnisant .mud-dialog .config-dialog-checkbox-row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    column-gap: 20px !important;
    row-gap: 4px !important;
}

#omnisant .mud-dialog .config-dialog-checkbox-row > * {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
}

#omnisant .mud-dialog .config-dialog-checkbox-row .mud-checkbox .mud-typography,
#omnisant .mud-dialog .config-dialog-checkbox-row .mud-checkbox > p {
    white-space: nowrap !important;
}

/* Today toolbar: pieces keep their natural size so the bar stays one row
   down to tablet width (older rules stretched the date and Today button). */
@media (min-width: 769px) {
    #omnisant .dayplan-page .dayplan-toolbar-row-desktop > .dayplan-date-wrap,
    #omnisant .dayplan-page .dayplan-toolbar-row-desktop > .dayplan-today-wrap,
    #omnisant .dayplan-page .dayplan-toolbar-row-desktop > .dayplan-user-wrap {
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        grid-column: auto !important;
        justify-self: auto !important;
    }

    #omnisant .dayplan-page .dayplan-toolbar-row-desktop .dayplan-date-control {
        flex: 0 0 200px !important;
        max-width: 200px !important;
    }

    #omnisant .dayplan-page .dayplan-toolbar-row-desktop .dayplan-today-button {
        width: auto !important;
    }

    #omnisant .dayplan-page .dayplan-toolbar-row-desktop > .dayplan-user-wrap {
        width: 220px !important;
    }
}

/* Today's native date field reads like every other field. */
#omnisant .dayplan-page .dayplan-date-native {
    padding: 0 40px 0 12px !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    text-align: left !important;
    font-variant-numeric: tabular-nums !important;
}

#omnisant .dayplan-page .dayplan-date-control {
    padding-left: 0 !important;
}

@media (min-width: 769px) {
    #omnisant .dayplan-page .dayplan-toolbar-row-desktop > .dayplan-user-wrap {
        justify-content: flex-start !important;
    }

    #omnisant .dayplan-page .dayplan-toolbar-row-desktop > .dayplan-user-wrap .mud-select,
    #omnisant .dayplan-page .dayplan-toolbar-row-desktop > .dayplan-user-wrap .mud-input-control,
    #omnisant .dayplan-page .dayplan-toolbar-row-desktop > .dayplan-user-wrap .mud-input {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
    }
}

/* Record-card titles wrap to two lines instead of cutting after a word or two. */
#omnisant .vehicle-card-title,
#omnisant .store-card-title,
#omnisant .house-card-title,
#omnisant .kids-roster-name,
#omnisant .settings-desktop-row-title,
#omnisant .settings-mobile-card-title {
    white-space: normal !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    min-width: 0 !important;
}

#omnisant .vehicle-card-title-block,
#omnisant .store-card-title-block {
    min-width: 0 !important;
    flex: 1 1 auto !important;
}

/* Select value runs right up to the 40px chevron (the slot reserved 50-60px). */
#omnisant .mud-select .mud-input.mud-input-outlined > .mud-input-slot {
    padding-right: 40px !important;
}

#omnisant .mud-picker .mud-input.mud-input-outlined > input.mud-input-slot {
    padding-right: 44px !important;
}

/* ---------------------------------------------------------------------
   Very large screens at 100% scaling (e.g. 4K without OS scaling): scale
   the interface proportionally so it reads like a ~2200px layout instead
   of a small island of 13px text. The layout, dialogs, snackbars and menu
   contents are zoomed individually; the menu container itself is not,
   because MudBlazor places it with screen coordinates (zooming <html>
   put dropdowns hundreds of pixels away from their field).
   --------------------------------------------------------------------- */
@media (min-width: 2400px) {
    #omnisant { --lux-zoom: 1.25; }
}

@media (min-width: 3000px) {
    #omnisant { --lux-zoom: 1.5; }
}

@media (min-width: 3600px) {
    #omnisant { --lux-zoom: 1.75; }
}

@media (min-width: 2400px) {
    #omnisant > .mud-layout,
    #omnisant .mud-layout,
    #omnisant .mud-dialog,
    #omnisant .mud-snackbar,
    #omnisant .mud-popover .mud-picker-container {
        zoom: var(--lux-zoom);
    }

    /* Menus keep the field's exact width; only their text and rows scale. */
    #omnisant .mud-popover .mud-list-item,
    #omnisant .mud-popover .mud-menu-item {
        min-height: calc(40px * var(--lux-zoom)) !important;
        font-size: calc(15px * var(--lux-zoom)) !important;
        padding: calc(8px * var(--lux-zoom)) calc(14px * var(--lux-zoom)) !important;
    }

    #omnisant .mud-popover .mud-list-item .mud-typography,
    #omnisant .mud-popover .mud-list-item-text,
    #omnisant .mud-popover .mud-menu-item .mud-typography {
        font-size: inherit !important;
    }

    #omnisant .mud-popover {
        max-height: calc(320px * var(--lux-zoom)) !important;
    }

    #omnisant .mud-layout .mud-layout,
    #omnisant .mud-layout .mud-dialog,
    #omnisant .mud-layout .mud-snackbar {
        zoom: 1;
    }
}

/* ---------------------------------------------------------------------
   Service on phones: house and Add share one row; quick filters wrap
   instead of running off the edge; groups lose a level of card nesting
   so items get the width.
   --------------------------------------------------------------------- */
@media (max-width: 768px) {
    #omnisant .maintenance-page .maintenance-header-toolbar {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
        width: 100% !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    #omnisant .maintenance-page .maintenance-header-toolbar .app-page-context-chip-row {
        min-width: 0 !important;
        flex: 1 1 auto !important;
        overflow: hidden !important;
        white-space: nowrap !important;
        text-overflow: ellipsis !important;
    }

    #omnisant .maintenance-page .maintenance-header-action {
        flex: 0 0 auto !important;
    }

    #omnisant .maintenance-page .maintenance-quick-filter-bar {
        display: grid !important;
        gap: 10px !important;
        padding: 12px !important;
    }

    #omnisant .maintenance-page .maintenance-quick-filter-chips {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        overflow: visible !important;
    }

    #omnisant .maintenance-page .maintenance-quick-filter-chips .mud-chip {
        margin: 0 !important;
    }

    #omnisant .maintenance-page .maintenance-quick-filter-actions {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 8px !important;
    }

    #omnisant .maintenance-page .maintenance-group-card,
    #omnisant .maintenance-page .maintenance-category-group {
        padding-left: 0 !important;
        padding-right: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }
}

/* Event dialog on phones: date and time pair up on one line. */
@media (min-width: 340px) and (max-width: 599.98px) {
    #omnisant .event-edit-dialog-shell .event-edit-when-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* Shopping item layout, final: name / details / tags + date, all left-aligned,
   never wider than its column (older rules forced it under the Bought button). */
#omnisant .shopping-item-row > .shopping-item-main {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    grid-template-areas: "name name" "detail detail" "badges meta" !important;
    justify-items: start !important;
    align-items: center !important;
    column-gap: 10px !important;
    row-gap: 4px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

#omnisant .shopping-item-row > .shopping-item-main > .shopping-item-topline { grid-area: name !important; width: 100% !important; }
#omnisant .shopping-item-row > .shopping-item-main > .shopping-item-detail { grid-area: detail !important; width: 100% !important; max-width: 100% !important; }
#omnisant .shopping-item-row > .shopping-item-main > .shopping-item-badges { grid-area: badges !important; position: static !important; left: auto !important; transform: none !important; }
#omnisant .shopping-item-row > .shopping-item-main > .shopping-item-meta { grid-area: meta !important; position: static !important; left: auto !important; transform: none !important; }

#omnisant .shopping-item-row > .shopping-item-main > .shopping-item-badges:empty {
    display: none !important;
}

/* Dialog fields on phones: one label row, not two (wrapper and container both padded). */
#omnisant .mud-dialog .mud-input-control.mud-input-outlined-with-label {
    padding-top: 0 !important;
}

#omnisant .shopping-item-row .shopping-item-quantity {
    margin-left: 0 !important;
    padding-left: 0 !important;
}

/* Collapsible dialog sections: the header reads like every section title,
   with its chevron on the right; no dead space under the fields. */
#omnisant .mud-dialog details.config-dialog-section {
    padding: 16px !important;
    min-height: 0 !important;
    height: auto !important;
}

#omnisant .mud-dialog details.config-dialog-section > summary {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 20px !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
    list-style: none !important;
    font-size: 11px !important;
    font-weight: 750 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: rgba(216, 213, 206, 0.72) !important;
}

#omnisant .mud-dialog details.config-dialog-section > summary::-webkit-details-marker {
    display: none !important;
}

#omnisant .mud-dialog details.config-dialog-section[open] > summary {
    margin-bottom: 12px !important;
}

#omnisant .mud-dialog details.config-dialog-section > :not(summary) {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* The chevron has its own 40px slot, so the text needs only a small gap before it. */
#omnisant .mud-select .mud-input.mud-input-outlined > .mud-input-slot {
    padding-right: 8px !important;
}

#omnisant .mud-dialog details.config-dialog-section > :not(summary) {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}