/* =====================================================================
   Grand Touring identity layer (docs/design/IDENTITY.md).
   Aston Martin restraint and bronze, Apple clarity and motion, Ferrari
   signal red, Breitling instrument numerals. Loaded last.
   ===================================================================== */

#omnisant {
    --gt-obsidian: #07080a;
    --gt-graphite: #0e1013;
    --gt-graphite-2: #14171b;
    --gt-hairline: rgba(236, 226, 206, 0.08);
    --gt-hairline-strong: rgba(236, 226, 206, 0.14);
    --gt-ivory: #f3efe7;
    --gt-pewter: #a7a39a;
    --gt-pewter-dim: #7c7970;
    --gt-bronze: #c9a86a;
    --gt-bronze-hover: #d8bc86;
    --gt-bronze-deep: #9c8150;
    --gt-bronze-soft: rgba(201, 168, 106, 0.14);
    --gt-bronze-line: rgba(201, 168, 106, 0.42);
    --gt-rosso: #e0453a;
    --gt-rosso-soft: rgba(224, 69, 58, 0.14);
    --gt-lume: #8fc7a4;
    --gt-amber: #d9a95b;
    --gt-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

    --omni-color-accent-primary: var(--gt-bronze);
    --omni-color-accent-hover: var(--gt-bronze-hover);
    --omni-color-accent-soft: var(--gt-bronze-soft);
    --omni-color-accent-border: var(--gt-bronze-line);
    --omni-color-text-primary: var(--gt-ivory);
    --omni-color-danger: var(--gt-rosso);
    --omni-color-success: var(--gt-lume);
    --omni-color-warning: var(--gt-amber);
    --mud-palette-primary: var(--gt-bronze);
    --mud-palette-primary-text: var(--gt-obsidian);
    --mud-palette-error: var(--gt-rosso);
    --mud-palette-success: var(--gt-lume);
    --mud-palette-warning: var(--gt-amber);
    --mud-palette-info: var(--gt-bronze);

    background: var(--gt-obsidian) !important;
    color: var(--gt-ivory);
    font-feature-settings: "cv11", "ss01";
}

/* Instrument numerals: every figure lines up like a dial. */
#omnisant,
#omnisant input,
#omnisant .mud-typography,
#omnisant button {
    font-variant-numeric: tabular-nums lining-nums;
}

/* ---------------------------------------------------------------------
   Titles: Apple-tight, ivory. Eyebrows: engraved, wide tracked.
   --------------------------------------------------------------------- */
#omnisant .app-page-title,
#omnisant h1 {
    color: var(--gt-ivory) !important;
    font-weight: 600 !important;
    letter-spacing: -0.022em !important;
}

#omnisant .app-page-eyebrow,
#omnisant .dashboard-kicker,
#omnisant .config-dialog-section-kicker,
#omnisant .config-dialog-section-title {
    color: var(--gt-bronze) !important;
    letter-spacing: 0.16em !important;
}

#omnisant .app-page-context {
    color: var(--gt-pewter) !important;
}

/* ---------------------------------------------------------------------
   Primary action: one bronze fill, obsidian text, no glow.
   --------------------------------------------------------------------- */
#omnisant .mud-button-filled.mud-button-filled-primary,
#omnisant .mud-button-filled-primary {
    background: linear-gradient(180deg, #d4b57a 0%, var(--gt-bronze) 55%, #b8975b 100%) !important;
    color: var(--gt-obsidian) !important;
    border: 1px solid rgba(255, 238, 205, 0.28) !important;
    box-shadow: inset 0 1px 0 rgba(255, 246, 225, 0.35), 0 8px 20px rgba(0, 0, 0, 0.35) !important;
    text-shadow: none !important;
}

#omnisant .mud-button-filled.mud-button-filled-primary:hover {
    background: linear-gradient(180deg, #dfc38d 0%, var(--gt-bronze-hover) 60%, #c4a56b 100%) !important;
}

#omnisant .mud-button-filled-primary .mud-button-label,
#omnisant .mud-button-filled-primary .mud-icon-root {
    color: var(--gt-obsidian) !important;
}

/* Destructive and critical: Rosso, reserved. */
#omnisant .mud-button-filled-error,
#omnisant .mud-button-filled.mud-button-filled-error {
    background: var(--gt-rosso) !important;
    color: #fff7f5 !important;
}

#omnisant .mud-button-text-error,
#omnisant .mud-button-outlined-error,
#omnisant .mud-error-text {
    color: #ef6a60 !important;
}

/* Focus: a bronze bezel. */
#omnisant :focus-visible {
    outline: 2px solid var(--gt-bronze-line) !important;
    outline-offset: 2px !important;
}

#omnisant .mud-input.mud-input-outlined:focus-within {
    border-color: var(--gt-bronze-line) !important;
    box-shadow: 0 0 0 3px rgba(201, 168, 106, 0.12) !important;
}

/* Selection and links. */
#omnisant ::selection {
    background: rgba(201, 168, 106, 0.35);
    color: var(--gt-ivory);
}

#omnisant a:not(.mud-button-root):not(.mobile-bottom-nav-item):not(.mud-nav-link) {
    color: var(--gt-bronze-hover);
}

/* ---------------------------------------------------------------------
   Navigation: active item is a bronze bezel with an index mark.
   --------------------------------------------------------------------- */
#omnisant .mud-nav-link.active,
#omnisant .mud-navmenu .mud-nav-link.active {
    background: linear-gradient(90deg, rgba(201, 168, 106, 0.14), rgba(201, 168, 106, 0.04)) !important;
    border: 1px solid rgba(201, 168, 106, 0.30) !important;
    color: var(--gt-ivory) !important;
    box-shadow: inset 2px 0 0 var(--gt-bronze) !important;
}

#omnisant .mud-nav-link.active .mud-nav-link-icon,
#omnisant .mud-nav-link.active .mud-icon-root {
    color: var(--gt-bronze) !important;
}

#omnisant .mobile-bottom-nav .active,
#omnisant nav.mobile-bottom-nav > a.active {
    background: rgba(201, 168, 106, 0.14) !important;
    color: var(--gt-ivory) !important;
}

#omnisant .mobile-bottom-nav .active .mud-icon-root {
    color: var(--gt-bronze) !important;
}

/* Switch "on" and checked checkboxes in bronze. */
#omnisant .mud-switch .mud-switch-base.mud-checked + .mud-switch-track {
    background: var(--gt-bronze) !important;
    border-color: var(--gt-bronze-hover) !important;
}

#omnisant .mud-checkbox .mud-checked .mud-icon-root,
#omnisant .mud-checkbox .mud-checked svg {
    color: var(--gt-bronze) !important;
}

/* Segmented controls: active segment is bronze. */
#omnisant .omni-segmented-control .mud-button-filled,
#omnisant .ios-calendar-view-switch .mud-button-filled {
    background: var(--gt-bronze) !important;
    color: var(--gt-obsidian) !important;
    box-shadow: inset 0 1px 0 rgba(255, 246, 225, 0.35) !important;
}

/* Chips selected: engraved bronze outline. */
#omnisant .mud-chip.mud-chip-filled.mud-chip-color-primary,
#omnisant .mud-chip.mud-chip-color-primary.mud-chip-filled {
    background: var(--gt-bronze-soft) !important;
    color: var(--gt-bronze-hover) !important;
    border: 1px solid var(--gt-bronze-line) !important;
}

/* ---------------------------------------------------------------------
   Calm motion.
   --------------------------------------------------------------------- */
#omnisant .mud-button-root,
#omnisant .mud-chip,
#omnisant .mud-nav-link,
#omnisant .mud-input.mud-input-outlined,
#omnisant .mobile-bottom-nav > * {
    transition: background-color 200ms var(--gt-ease), border-color 200ms var(--gt-ease), color 200ms var(--gt-ease), box-shadow 200ms var(--gt-ease), transform 200ms var(--gt-ease) !important;
}

@keyframes gt-rise {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

#omnisant .mud-dialog {
    animation: gt-rise 240ms var(--gt-ease) both;
}

#omnisant .app-content-canvas > * {
    animation: gt-rise 260ms var(--gt-ease) both;
}

@media (prefers-reduced-motion: reduce) {
    #omnisant *,
    #omnisant *::before,
    #omnisant *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* ---------------------------------------------------------------------
   Today hero: the date set like a watch dial (Breitling) with Apple's
   calm hierarchy. The day numeral is the largest type on the screen.
   --------------------------------------------------------------------- */
#omnisant .gt-today-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin: 4px 0 22px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--gt-hairline);
}

#omnisant .gt-today-dial {
    display: flex;
    align-items: center;
    gap: 18px;
}

#omnisant .gt-today-day {
    display: inline-grid;
    place-items: center;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    border: 1px solid var(--gt-bronze-line);
    box-shadow: inset 0 0 0 5px rgba(201, 168, 106, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.4);
    background: radial-gradient(circle at 50% 35%, rgba(201, 168, 106, 0.10), rgba(201, 168, 106, 0) 70%);
    color: var(--gt-ivory);
    font-size: 36px;
    font-weight: 300;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums lining-nums;
}

#omnisant .gt-today-date-copy {
    display: grid;
    gap: 2px;
}

#omnisant .gt-today-eyebrow {
    color: var(--gt-bronze);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

#omnisant .gt-today-weekday {
    color: var(--gt-ivory);
    font-size: 30px;
    font-weight: 600;
    letter-spacing: -0.022em;
    line-height: 1.1;
}

#omnisant .gt-today-month {
    color: var(--gt-pewter);
    font-size: 15px;
    font-weight: 450;
}

#omnisant .gt-today-summary {
    display: flex;
    gap: 28px;
    margin: 0;
}

#omnisant .gt-today-summary > div {
    display: grid;
    gap: 2px;
    padding-left: 14px;
    border-left: 1px solid var(--gt-hairline-strong);
}

#omnisant .gt-today-summary dt {
    color: var(--gt-pewter-dim);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

#omnisant .gt-today-summary dd {
    margin: 0;
    color: var(--gt-ivory);
    font-size: 24px;
    font-weight: 300;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums lining-nums;
}

@media (max-width: 768px) {
    #omnisant .gt-today-hero {
        gap: 16px;
        margin-bottom: 16px;
        padding-bottom: 16px;
    }

    #omnisant .gt-today-day {
        width: 60px;
        height: 60px;
        font-size: 28px;
    }

    #omnisant .gt-today-weekday {
        font-size: 24px;
    }

    #omnisant .gt-today-summary {
        width: 100%;
        justify-content: space-between;
        gap: 12px;
    }

    #omnisant .gt-today-summary dd {
        font-size: 20px;
    }
}

/* The mobile summary bar duplicated the hero's date; keep only the controls. */
@media (max-width: 1023.98px) {
    #omnisant .dayplan-mobile-controls-summary .dayplan-mobile-controls-date,
    #omnisant .dayplan-mobile-controls-summary .dayplan-mobile-controls-separator {
        display: none !important;
    }
}

/* ---------------------------------------------------------------------
   Timeline as a chronograph rail: hairline track, engraved hour
   indices, a bronze index dot, times in instrument numerals.
   --------------------------------------------------------------------- */
#omnisant .dayplan-page .dayplan-section-title {
    color: var(--gt-bronze) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    margin-bottom: 14px !important;
}

#omnisant .dayplan-page .dayplan-rail-time {
    color: var(--gt-ivory) !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    letter-spacing: 0.01em !important;
    font-variant-numeric: tabular-nums lining-nums !important;
}

#omnisant .dayplan-page .dayplan-rail-dot {
    background: var(--gt-graphite) !important;
    border: 1.5px solid var(--gt-bronze) !important;
    box-shadow: 0 0 0 3px var(--gt-obsidian) !important;
}

#omnisant .dayplan-page .dayplan-rail-track::before,
#omnisant .dayplan-page .dayplan-rail-track {
    border-color: var(--gt-hairline-strong) !important;
}

#omnisant .dayplan-page .dayplan-card-shell {
    background: linear-gradient(180deg, rgba(255, 250, 240, 0.028), rgba(255, 250, 240, 0.012)) !important;
    border: 1px solid var(--gt-hairline) !important;
    box-shadow: none !important;
}

#omnisant .dayplan-page .dayplan-card-shell:hover {
    border-color: var(--gt-hairline-strong) !important;
}

/* ---------------------------------------------------------------------
   Calendar month: one hairline grid (Apple) instead of 42 boxes.
   --------------------------------------------------------------------- */
@media (min-width: 769px) {
    #omnisant .ios-calendar-page .ios-month-grid {
        gap: 0 !important;
        border-top: 1px solid var(--gt-hairline) !important;
        border-left: 1px solid var(--gt-hairline) !important;
        border-radius: 14px !important;
        overflow: hidden !important;
    }

    #omnisant .ios-calendar-page .ios-month-cell {
        border: 0 !important;
        border-right: 1px solid var(--gt-hairline) !important;
        border-bottom: 1px solid var(--gt-hairline) !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        margin: 0 !important;
    }

    #omnisant .ios-calendar-page .ios-month-cell:hover {
        background: rgba(255, 250, 240, 0.025) !important;
    }

    #omnisant .ios-calendar-page .ios-month-cell.muted {
        background: rgba(0, 0, 0, 0.18) !important;
    }

    #omnisant .ios-calendar-page .ios-month-cell-number {
        font-weight: 500 !important;
        color: var(--gt-pewter) !important;
    }

    /* Today: a bronze ring around the numeral. */
    #omnisant .ios-calendar-page .ios-month-cell.today .ios-month-cell-number,
    #omnisant .ios-calendar-page .ios-month-cell.is-today .ios-month-cell-number,
    #omnisant .ios-calendar-page .ios-month-cell.selected .ios-month-cell-number {
        display: inline-grid !important;
        place-items: center !important;
        width: 28px !important;
        height: 28px !important;
        border-radius: 50% !important;
        background: var(--gt-bronze) !important;
        color: var(--gt-obsidian) !important;
        font-weight: 650 !important;
    }

    #omnisant .ios-calendar-page .ios-month-event-pill {
        background: rgba(201, 168, 106, 0.10) !important;
        border: 0 !important;
        border-left: 2px solid var(--gt-bronze) !important;
        border-radius: 4px !important;
        color: var(--gt-ivory) !important;
        font-weight: 550 !important;
    }
}

/* ---------------------------------------------------------------------
   One primary action per view. View switches select with an engraved
   bronze bezel, not a fill; secondary commands (Generate Day Plan) are
   quiet graphite buttons.
   --------------------------------------------------------------------- */
#omnisant .omni-segmented-control .mud-button-filled,
#omnisant .ios-calendar-view-switch .mud-button-filled {
    background: var(--gt-bronze-soft) !important;
    color: var(--gt-bronze-hover) !important;
    box-shadow: inset 0 0 0 1px var(--gt-bronze-line) !important;
}

#omnisant .omni-segmented-control .mud-button-filled .mud-button-label,
#omnisant .ios-calendar-view-switch .mud-button-filled .mud-button-label {
    color: var(--gt-bronze-hover) !important;
}

#omnisant .ios-calendar-page .ios-calendar-generate-button,
#omnisant .ios-calendar-page .ios-calendar-generate-button.mud-button-filled-primary {
    background: rgba(255, 250, 240, 0.04) !important;
    border: 1px solid var(--gt-hairline-strong) !important;
    color: var(--gt-ivory) !important;
    box-shadow: none !important;
}

#omnisant .ios-calendar-page .ios-calendar-generate-button .mud-button-label {
    color: var(--gt-ivory) !important;
}

#omnisant .ios-calendar-page .ios-month-event-pill {
    background: rgba(201, 168, 106, 0.06) !important;
    border-left-color: rgba(201, 168, 106, 0.7) !important;
}

/* Timeline rows: sized to their content (a one-line item was 84px tall). */
@media (min-width: 769px) {
    #omnisant .dayplan-page .dayplan-card.dayplan-card-timeline,
    #omnisant .dayplan-page .dayplan-card-timeline.mud-paper {
        min-height: 0 !important;
        margin-bottom: 10px !important;
    }

    #omnisant .dayplan-page .dayplan-card-shell {
        min-height: 56px !important;
        padding: 14px 18px !important;
    }

    #omnisant .dayplan-page .dayplan-rail-time {
        padding-top: 17px !important;
    }
}

/* Signals: overdue and critical states in Rosso, due-soon in amber. */
#omnisant [class*="overdue"]:not(.maintenance-page):not(section):not(.mud-chip-container),
#omnisant .maintenance-status-overdue,
#omnisant .status-overdue {
    color: #ef6a60 !important;
    border-color: rgba(224, 69, 58, 0.45) !important;
}

/* Blazor focuses the page heading after navigation (for screen readers); no ring there. */
#omnisant h1:focus,
#omnisant h1:focus-visible,
#omnisant [tabindex="-1"]:focus,
#omnisant [tabindex="-1"]:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* ---------------------------------------------------------------------
   Service item: title first, engraved tags left-aligned, the due time as
   the instrument reading (amber soon, Rosso overdue), actions top-right.
   --------------------------------------------------------------------- */
#omnisant .maintenance-item-row {
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: start !important;
    column-gap: 16px !important;
    padding: 16px 18px !important;
    border: 1px solid var(--gt-hairline) !important;
    border-radius: 14px !important;
    background: linear-gradient(180deg, rgba(255, 250, 240, 0.028), rgba(255, 250, 240, 0.01)) !important;
    box-shadow: none !important;
}

#omnisant .maintenance-item-row .maintenance-item-main {
    display: grid !important;
    justify-items: start !important;
    row-gap: 8px !important;
    min-width: 0 !important;
}

#omnisant .maintenance-item-row .maintenance-item-top,
#omnisant .maintenance-item-row .maintenance-item-tags {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 6px !important;
    width: 100% !important;
}

#omnisant .maintenance-item-row .maintenance-item-title {
    flex: 1 0 100% !important;
    white-space: normal !important;
    text-overflow: clip !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--gt-ivory) !important;
    line-height: 1.35 !important;
    margin-bottom: 2px !important;
}

/* Engraved chips: hairline outline, small caps feel. */
#omnisant .maintenance-item-row .mud-chip,
#omnisant .shopping-pill,
#omnisant .schoolrunsweek-chip {
    background: transparent !important;
    border: 1px solid var(--gt-hairline-strong) !important;
    color: var(--gt-pewter) !important;
    font-size: 10.5px !important;
    font-weight: 650 !important;
    letter-spacing: 0.04em !important;
    height: 22px !important;
    border-radius: 6px !important;
}

#omnisant .maintenance-item-row .mud-chip-color-warning,
#omnisant .shopping-pill-important {
    color: var(--gt-amber) !important;
    border-color: rgba(217, 169, 91, 0.45) !important;
}

#omnisant .maintenance-item-row .mud-chip-color-error {
    color: #ef6a60 !important;
    border-color: rgba(224, 69, 58, 0.45) !important;
}

#omnisant .maintenance-item-row .maintenance-due-text {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--gt-ivory) !important;
    font-variant-numeric: tabular-nums lining-nums !important;
}

#omnisant .maintenance-item-row .maintenance-due-text.soon,
#omnisant .maintenance-item-row .maintenance-due-text.today {
    color: var(--gt-amber) !important;
}

#omnisant .maintenance-item-row .maintenance-due-text.overdue {
    color: #ef6a60 !important;
}

#omnisant .maintenance-item-row .app-location-action {
    justify-content: flex-start !important;
    width: auto !important;
    padding: 0 !important;
}

#omnisant .maintenance-item-row .app-location-action-text {
    color: var(--gt-bronze-hover) !important;
    text-decoration: none !important;
    border-bottom: 1px solid var(--gt-bronze-line) !important;
    height: auto !important;
    line-height: 1.5 !important;
}

#omnisant .maintenance-item-row .maintenance-item-actions {
    align-self: start !important;
    align-items: flex-start !important;
    min-height: 0 !important;
}

#omnisant .maintenance-item-row .maintenance-item-primary-actions {
    margin: 0 !important;
}

/* Service group header rows: hairline, no box within a box. */
#omnisant .maintenance-group-card {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

#omnisant .maintenance-group-header {
    border: 0 !important;
    border-bottom: 1px solid var(--gt-hairline) !important;
    background: transparent !important;
    padding: 0 0 8px !important;
    margin-bottom: 10px !important;
}

#omnisant .maintenance-item-row .maintenance-item-top .mud-chip,
#omnisant .maintenance-item-row .maintenance-item-tags .mud-chip {
    margin: 0 !important;
}

#omnisant .maintenance-item-row .maintenance-item-top > :not(.maintenance-item-title) {
    margin-left: 0 !important;
}

#omnisant .app-location-action-text {
    font-size: 14px !important;
    font-weight: 500 !important;
}

#omnisant .maintenance-item-row .maintenance-item-main > .mt-1 {
    margin-top: 0 !important;
}

/* ---------------------------------------------------------------------
   Transport: day columns as quiet graphite panels with a bronze date
   index; runs separated by hairlines; child chips engraved.
   --------------------------------------------------------------------- */
#omnisant .schoolrunsweek-page .schoolrunsweek-day-card {
    background: linear-gradient(180deg, rgba(255, 250, 240, 0.03), rgba(255, 250, 240, 0.01)) !important;
    border: 1px solid var(--gt-hairline) !important;
    border-radius: 16px !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

#omnisant .schoolrunsweek-page .schoolrunsweek-day-header {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--gt-hairline) !important;
}

#omnisant .schoolrunsweek-page .schoolrunsweek-day-header .mud-typography:last-child,
#omnisant .schoolrunsweek-page .schoolrunsweek-day-date {
    color: var(--gt-bronze) !important;
}

#omnisant .schoolrunsweek-page .schoolrunsweek-slot-card {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--gt-hairline) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

#omnisant .schoolrunsweek-page .schoolrunsweek-slot-card:last-child {
    border-bottom: 0 !important;
}

#omnisant .schoolrunsweek-page .schoolrunsweek-assignment-card {
    background: rgba(255, 250, 240, 0.03) !important;
    border: 1px solid var(--gt-hairline) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}

#omnisant .schoolrunsweek-page .mud-chip {
    background: transparent !important;
    border: 1px solid var(--gt-hairline-strong) !important;
    color: var(--gt-ivory) !important;
    border-radius: 6px !important;
}

#omnisant .schoolrunsweek-page .schoolrunsweek-slot-add-button.mud-button-root {
    border: 1px solid var(--gt-bronze-line) !important;
    background: var(--gt-bronze-soft) !important;
    color: var(--gt-bronze-hover) !important;
}

/* ---------------------------------------------------------------------
   Shopping: store groups as hairline panels; Bought is a quiet bronze
   outline (the primary action of the page is Add item).
   --------------------------------------------------------------------- */
#omnisant .shopping-item-row {
    background: rgba(255, 250, 240, 0.025) !important;
    border: 1px solid var(--gt-hairline) !important;
    box-shadow: none !important;
    border-radius: 12px !important;
}

#omnisant .shopping-item-row .mud-button-filled-success,
#omnisant .shopping-item-primary-action .mud-button-root {
    background: transparent !important;
    border: 1px solid var(--gt-bronze-line) !important;
    color: var(--gt-bronze-hover) !important;
    box-shadow: none !important;
}

#omnisant .shopping-item-primary-action .mud-button-label {
    color: var(--gt-bronze-hover) !important;
}

/* ---------------------------------------------------------------------
   Sign-in: the arrival. Wide-set wordmark (Aston Martin), a bronze
   hairline, one quiet line; the card is graphite with a hairline edge.
   --------------------------------------------------------------------- */
#omnisant .ios-auth-shell {
    background:
        radial-gradient(ellipse 60% 45% at 50% 0%, rgba(201, 168, 106, 0.10), rgba(201, 168, 106, 0) 70%),
        radial-gradient(ellipse 80% 60% at 50% 110%, rgba(255, 250, 240, 0.04), rgba(0, 0, 0, 0) 70%),
        var(--gt-obsidian) !important;
}

#omnisant .ios-auth-card {
    width: min(420px, calc(100vw - 32px)) !important;
    padding: 44px 36px 32px !important;
    border-radius: 20px !important;
    border: 1px solid var(--gt-hairline-strong) !important;
    background: linear-gradient(180deg, rgba(20, 22, 26, 0.92), rgba(12, 13, 16, 0.96)) !important;
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 246, 225, 0.05) !important;
    animation: gt-rise 420ms var(--gt-ease) both;
}

#omnisant .ios-auth-brand {
    display: grid !important;
    justify-items: center !important;
    gap: 14px !important;
    margin-bottom: 30px !important;
}

#omnisant .ios-auth-wordmark-hero {
    color: var(--gt-ivory) !important;
    font-size: 30px !important;
    font-weight: 300 !important;
    letter-spacing: 0.42em !important;
    padding-left: 0.42em !important;
    line-height: 1 !important;
}

#omnisant .gt-auth-rule {
    width: 56px;
    height: 1px;
    background: linear-gradient(90deg, rgba(201, 168, 106, 0), var(--gt-bronze), rgba(201, 168, 106, 0));
}

#omnisant .gt-auth-tagline {
    color: var(--gt-pewter);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

#omnisant .ios-auth-field-label {
    color: var(--gt-pewter) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em !important;
}

#omnisant .ios-auth-input {
    height: 48px !important;
    border-radius: 12px !important;
    border: 1px solid var(--gt-hairline-strong) !important;
    background: rgba(255, 250, 240, 0.035) !important;
    color: var(--gt-ivory) !important;
    padding: 0 14px !important;
    font-size: 16px !important;
}

#omnisant .ios-auth-input:focus {
    border-color: var(--gt-bronze-line) !important;
    box-shadow: 0 0 0 3px rgba(201, 168, 106, 0.14) !important;
    outline: none !important;
}

#omnisant .ios-auth-checkbox {
    accent-color: var(--gt-bronze);
}

#omnisant .ios-auth-submit {
    height: 50px !important;
    border-radius: 12px !important;
    font-size: 15px !important;
    letter-spacing: 0.04em !important;
    margin-top: 6px !important;
}

#omnisant .ios-auth-forgot {
    color: var(--gt-pewter) !important;
}

#omnisant .ios-auth-forgot:hover {
    color: var(--gt-bronze-hover) !important;
}

/* In-app wordmark: the same wide-set light cut as the sign-in. */
#omnisant .app-topbar-logo {
    color: var(--gt-ivory) !important;
    font-weight: 300 !important;
    letter-spacing: 0.38em !important;
}

/* Top bar and sidebar sit one step above obsidian, divided by hairlines. */
#omnisant .mud-appbar,
#omnisant .app-topbar {
    background: rgba(9, 10, 12, 0.92) !important;
    border-bottom: 1px solid var(--gt-hairline) !important;
    box-shadow: none !important;
    backdrop-filter: blur(18px);
}

#omnisant .mud-drawer {
    background: #0a0b0d !important;
    border-right: 1px solid var(--gt-hairline) !important;
    box-shadow: none !important;
}

#omnisant .mud-drawer .mud-navmenu-group-title,
#omnisant .mud-drawer .app-nav-section-title,
#omnisant .mud-drawer [class*="nav-section"] {
    color: var(--gt-pewter-dim) !important;
}

/* Dialogs: graphite with a hairline edge and a bronze-tinted title rule. */
#omnisant .mud-dialog {
    background: linear-gradient(180deg, #121417, #0c0d10) !important;
    border: 1px solid var(--gt-hairline-strong) !important;
    box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 246, 225, 0.04) !important;
}

#omnisant .mud-dialog .mud-dialog-title {
    border-bottom: 1px solid var(--gt-hairline) !important;
    color: var(--gt-ivory) !important;
    letter-spacing: -0.01em !important;
}

#omnisant .mud-dialog .mud-dialog-actions {
    border-top: 1px solid var(--gt-hairline) !important;
}

#omnisant .mud-dialog .config-dialog-section {
    background: rgba(255, 250, 240, 0.022) !important;
    border: 1px solid var(--gt-hairline) !important;
    box-shadow: none !important;
}

#omnisant .mud-overlay-dialog .mud-overlay-scrim,
#omnisant .mud-overlay .mud-overlay-scrim {
    background: rgba(3, 3, 4, 0.72) !important;
    backdrop-filter: blur(6px);
}

/* Menus and dropdowns: graphite panels, bronze hover index. */
#omnisant .mud-popover.mud-popover-open {
    background: #121417 !important;
    border: 1px solid var(--gt-hairline-strong) !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55) !important;
}

#omnisant .mud-popover .mud-list-item:hover,
#omnisant .mud-popover .mud-selected-item,
#omnisant .mud-popover .mud-list-item.mud-selected-item {
    background: rgba(201, 168, 106, 0.10) !important;
    color: var(--gt-ivory) !important;
}

/* Date picker: selected day in bronze. */
#omnisant .mud-picker-calendar-day.mud-selected,
#omnisant .mud-picker .mud-selected {
    background: var(--gt-bronze) !important;
    color: var(--gt-obsidian) !important;
}

#omnisant .mud-picker-calendar-day.mud-current:not(.mud-selected) {
    color: var(--gt-bronze-hover) !important;
    border: 1px solid var(--gt-bronze-line) !important;
}

#omnisant .mud-picker-toolbar,
#omnisant .mud-picker-datepicker-toolbar,
#omnisant .mud-picker-timepicker-toolbar {
    background: linear-gradient(180deg, #1a1c20, #121417) !important;
    color: var(--gt-ivory) !important;
}

#omnisant .mud-picker-time-clock .mud-picker-time-clock-pin,
#omnisant .mud-picker-time-clock .mud-picker-time-clock-pointer,
#omnisant .mud-picker-time-clock-pointer-thumb {
    background-color: var(--gt-bronze) !important;
    border-color: var(--gt-bronze) !important;
}

/* Snackbars: graphite plaques. */
#omnisant .mud-snackbar {
    background: #15171b !important;
    border: 1px solid var(--gt-hairline-strong) !important;
    color: var(--gt-ivory) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5) !important;
}

#omnisant .mud-snackbar.mud-alert-filled-success .mud-snackbar-icon,
#omnisant .mud-snackbar .mud-icon-root {
    color: var(--gt-bronze) !important;
}

/* Date picker days: plain numerals, soft hover, bronze ring for today and a
   bronze disc for the chosen day (they were 42 boxed tiles). */
#omnisant .mud-picker-calendar-day {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 50% !important;
    color: var(--gt-ivory) !important;
    font-weight: 450 !important;
}

#omnisant .mud-picker-calendar-day:hover:not(.mud-selected) {
    background: rgba(255, 250, 240, 0.06) !important;
}

#omnisant .mud-picker-calendar-day.mud-current:not(.mud-selected) {
    border: 1px solid var(--gt-bronze-line) !important;
    color: var(--gt-bronze-hover) !important;
}

#omnisant .mud-picker-calendar-day.mud-selected {
    background: var(--gt-bronze) !important;
    color: var(--gt-obsidian) !important;
    font-weight: 650 !important;
}

#omnisant .mud-picker-calendar-header-day,
#omnisant .mud-picker-calendar-header .mud-typography {
    color: var(--gt-pewter-dim) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
}

#omnisant .mud-picker-calendar-header-switch .mud-button-root,
#omnisant .mud-picker-nav-button,
#omnisant .mud-picker-calendar-header-switch .mud-icon-button {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

#omnisant .mud-picker-calendar-header-switch .mud-typography,
#omnisant .mud-picker-slide-transition .mud-typography {
    color: var(--gt-ivory) !important;
    font-weight: 600 !important;
}

#omnisant .mud-picker-calendar-day.mud-current:not(.mud-selected),
#omnisant .mud-picker-calendar-day.mud-current.mud-button-outlined {
    border: 1px solid var(--gt-bronze) !important;
    color: var(--gt-bronze-hover) !important;
    box-shadow: none !important;
}

/* ---------------------------------------------------------------------
   Legibility: secondary text meets WCAG AA (4.5:1) on graphite.
   Pewter is the floor for anything a person has to read.
   --------------------------------------------------------------------- */
#omnisant {
    --gt-pewter: #b3afa6;
    --gt-pewter-dim: #9c988f;
}

#omnisant .soft-muted,
#omnisant .mud-typography.soft-muted,
#omnisant .ios-month-weekday,
#omnisant .ios-month-more,
#omnisant .notes-list-meta,
#omnisant .shopping-item-note,
#omnisant .shopping-item-meta,
#omnisant .ios-contact-meta,
#omnisant .maintenance-group-card .mud-typography-body2,
#omnisant .config-dialog-helper,
#omnisant .config-dialog-section-copy,
#omnisant .app-page-context {
    color: var(--gt-pewter) !important;
}

#omnisant .shopping-group-count,
#omnisant [class*="-count"]:not(.mud-chip):not(.mud-badge),
#omnisant .notes-command-bar ~ * .mud-typography-caption {
    color: var(--gt-pewter) !important;
}

#omnisant .shopping-filter-header .mud-typography,
#omnisant .shopping-store-group-header .mud-typography-body2,
#omnisant .shopping-store-meta,
#omnisant .notes-list-header > div > span,
#omnisant .notes-list-add span,
#omnisant .notes-briefing-meta > span:not(.notes-briefing-chip) {
    color: var(--gt-pewter) !important;
}

#omnisant .notes-list-header > div > span,
#omnisant .shopping-filter-header .mud-typography {
    color: var(--gt-bronze) !important;
}

/* One primary per view: navigational "Manage …" buttons on Setup are quiet. */
#omnisant .settings-overview-page .settings-card-actions .mud-button-filled-primary {
    background: transparent !important;
    border: 1px solid var(--gt-bronze-line) !important;
    color: var(--gt-bronze-hover) !important;
    box-shadow: none !important;
}

#omnisant .settings-overview-page .settings-card-actions .mud-button-filled-primary .mud-button-label {
    color: var(--gt-bronze-hover) !important;
}

#omnisant .settings-overview-page .settings-card-actions .mud-button-filled-primary:hover {
    background: var(--gt-bronze-soft) !important;
}

/* Card copy is body text, not a second headline. */
#omnisant .settings-overview-page .settings-card-top .soft-muted,
#omnisant .settings-section-header .soft-muted {
    font-weight: 450 !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
}

#omnisant .settings-section-title {
    color: var(--gt-bronze) !important;
    font-size: 12px !important;
    letter-spacing: 0.16em !important;
}

#omnisant .settings-overview-page .settings-card {
    background: linear-gradient(180deg, rgba(255, 250, 240, 0.03), rgba(255, 250, 240, 0.01)) !important;
    border: 1px solid var(--gt-hairline) !important;
    border-radius: 16px !important;
    box-shadow: none !important;
}

/* Directory: avatars are bronze-ringed monograms; red is kept for alerts. */
#omnisant .ios-contact-avatar,
#omnisant [class*="contact-avatar"] {
    background: rgba(201, 168, 106, 0.08) !important;
    border: 1px solid var(--gt-bronze-line) !important;
    color: var(--gt-bronze-hover) !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
}

#omnisant .network-contact-card,
#omnisant .ios-contact-row.network-contact-card {
    background: linear-gradient(180deg, rgba(255, 250, 240, 0.03), rgba(255, 250, 240, 0.01)) !important;
    border: 1px solid var(--gt-hairline) !important;
    box-shadow: none !important;
}

/* Schedule on phones: the date rail uses the same instrument look. */
@media (max-width: 768px) {
    #omnisant .ios-month-mobile-day {
        background: transparent !important;
        border: 1px solid var(--gt-hairline) !important;
        box-shadow: none !important;
    }

    #omnisant .ios-month-mobile-day.active {
        border-color: var(--gt-bronze) !important;
        background: var(--gt-bronze-soft) !important;
        color: var(--gt-ivory) !important;
    }

    #omnisant .ios-month-mobile-day-dot {
        background: var(--gt-bronze) !important;
        color: var(--gt-obsidian) !important;
    }
}