:root {
    color-scheme: light dark;
    /* Canvas backgrounds follow the MudBlazor theme. Fallbacks cover pre-theme rendering, the splash screens. */
    --hab-bg-light: var(--mud-palette-background, #f8fafc);
    --hab-bg-dark: var(--mud-palette-background, #030712);
}

/* WASM loading splash screen */

#habitinator-wasm-splash {
    position: fixed;
    inset: 0;
    z-index: var(--z-max);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--hab-bg-dark);
}

/* Light-mode variant */
html.light-theme #habitinator-wasm-splash {
    background: var(--hab-bg-light);
}
@media (prefers-color-scheme: light) {
    html:not(.dark-theme) #habitinator-wasm-splash {
        background: var(--hab-bg-light);
    }
}

.wasm-splash--hidden {
    opacity: 0 !important;
    visibility: hidden !important;
}

.wasm-splash__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
}

.wasm-splash__logo {
    display: block;
}

.wasm-splash__title {
    font-family: var(--hab-font-sans, system-ui, -apple-system, sans-serif);
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--hab-ink-inverse);
    margin: 0;
}

/* Indeterminate progress bar */
.wasm-splash__progress {
    width: 180px;
    height: 3px;
    background: var(--hab-track-subtle);
    border-radius: var(--radius-pill);
    overflow: hidden;
}

.wasm-splash__progress-bar {
    height: 100%;
    width: 100%;
    min-width: 4%;
    max-width: 100%;
    background: var(--hab-brand, #2563eb);
    border-radius: var(--radius-pill);
    transform: scaleX(var(--progress, 0.05));
    transform-origin: left;
}

.wasm-splash__hint {
    font-family: var(--hab-font-sans, system-ui, -apple-system, sans-serif);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--hab-ink-faint);
    margin: 0;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
    .wasm-splash__progress-bar {
        animation: none;
    }
}

/* -- Top Loading Bar, shown immediately while navigating -- */
#habitinator-loading-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--mud-palette-primary);
    opacity: 0;
    z-index: 20000;
}

html {
    --scrollbar-thumb: var(--mud-palette-text-disabled);
    --scrollbar-track: var(--mud-palette-background);
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
    scrollbar-width: thin;
    scrollbar-gutter: stable;
}

@supports not (scrollbar-color: auto) {
    html::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }
    html::-webkit-scrollbar-thumb {
        background: var(--scrollbar-thumb);
        border-radius: var(--radius-pill);
    }
    html::-webkit-scrollbar-track {
        background: var(--scrollbar-track);
    }
}

html, body {
    font-family: var(--hab-font-sans);
    background-color: var(--hab-bg-light);
    color: var(--mud-palette-text-primary);
    -webkit-tap-highlight-color: transparent;
    accent-color: var(--hab-accent-focus);
    caret-color: var(--mud-palette-primary);
}

::selection {
    background: color-mix(in srgb, var(--mud-palette-primary) 22%, var(--mud-palette-surface));
    color: var(--mud-palette-text-primary);
}

::-moz-selection {
    background: color-mix(in srgb, var(--mud-palette-primary) 22%, var(--mud-palette-surface));
    color: var(--mud-palette-text-primary);
}

html.dark-theme, html.dark-theme body {
    background-color: var(--hab-bg-dark);
}
@media (prefers-color-scheme: dark) {
    html:not(.light-theme), html:not(.light-theme) body {
        background-color: var(--hab-bg-dark);
    }
}

a {
    color: var(--mud-palette-primary);
}

/* Dark theme: primary blue #2563eb fails contrast on dark surfaces (3.9:1).
   Use lighter blue for text, links, and outlined controls. Filled buttons
   keep the dark primary background with white text, which passes. */
.dark-theme a {
    color: #60a5fa;
}

.dark-theme .mud-button-outlined-primary {
    color: #38bdf8 !important;
    border-color: rgba(56, 189, 248, 0.4) !important;
}

.dark-theme .mud-button-text-primary {
    color: #60a5fa !important;
}

.dark-theme .app-bottom-nav__item--active,
.dark-theme .app-mobile-nav__item--active,
.dark-theme .app-mobile-nav__item--active .app-mobile-nav__icon {
    color: #60a5fa !important;
}

.dark-theme .undo-toast-btn {
    color: #60a5fa;
    border-color: #60a5fa;
}

.dark-theme .undo-toast-btn:hover {
    background: #213657;
    border-color: #5b8fd6;
    color: #bfdbfe;
}

.dark-theme .undo-toast-btn:active {
    background: #2a4569;
    color: #bfdbfe;
}

/* Dark theme: tinted active pills and badges use theme colors that are too
   dark on dark surfaces. Brighten the text while keeping the hue, so the
   active state stays recognizable. html prefix outranks scoped !important. */
html.dark-theme .board-section-switcher__btn--active,
html.dark-theme .board-section-switcher__btn--active .board-section-switcher__label,
html.dark-theme .board-section-switcher__btn--active .board-section-switcher__count,
html.dark-theme .board-filter-btn--active,
html.dark-theme .stats-segment__btn--active,
html.dark-theme .habit-tag-chip,
html.dark-theme .edit-daily-shell--daily .edit-daily-checklist__add {
    color: #60a5fa !important;
}

html.dark-theme .stats-habit-ratio,
html.dark-theme .hab-modal--habit .habit-tag-chip,
html.dark-theme .edit-daily-shell--habit .habit-tag-chip,
html.dark-theme .edit-daily-shell--habit .edit-daily-checklist__add {
    color: #2dd4bf !important;
}

/* Visually hidden headings keep page structure for assistive technology. They never
   show visually, including when route focus lands on them after navigation. */
.hab-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Focus ring for auth-page checkboxes. Form and button styling lives in auth-pages.css. */
.form-check-input:focus {
  box-shadow: 0 0 0 0.1rem var(--mud-palette-surface), 0 0 0 var(--space-1) var(--mud-palette-primary);
}

/* Cap content line lengths for readability */
.board-card__notes {
    max-width: 55ch;
}

.auth-form-hint {
    color: var(--mud-palette-text-secondary);
    font-size: 0.875rem;
    line-height: 1.45;
    margin: 0 0 var(--space-5) 0;
}

/* Edit modals use the hab-modal inner shell so MudDialog itself must be transparent */
.mud-dialog.edit-habit-dialog,
.mud-dialog:has(.edit-habit-shell),
.mud-dialog.edit-daily-dialog,
.mud-dialog:has(.edit-daily-shell),
.mud-dialog.hab-modal-dialog,
.mud-dialog:has(.hab-modal) {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    overflow: visible !important;
    overflow-y: visible !important;
    max-height: none !important;
    width: min(26rem, calc(100vw - 1rem)) !important;
}

.mud-dialog.edit-habit-dialog .mud-dialog-content,
.mud-dialog:has(.edit-habit-shell) .mud-dialog-content,
.mud-dialog.edit-daily-dialog .mud-dialog-content,
.mud-dialog:has(.edit-daily-shell) .mud-dialog-content,
.mud-dialog:has(.hab-modal) .mud-dialog-content {
    padding: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    max-height: inherit !important;
}

/* Retroactive Yesterday Dailies Dialog: hide default MudDialog paper so only the inner card is visible */
.mud-dialog.daily-yesterday-dialog,
.mud-dialog:has(.daily-yesterday-shell) {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    overflow: visible !important;
    overflow-y: visible !important;
    max-height: none !important;
    width: min(34rem, calc(100vw - 1rem)) !important;
}

.mud-dialog.daily-yesterday-dialog .mud-dialog-content,
.mud-dialog:has(.daily-yesterday-shell) .mud-dialog-content {
    padding: 0 !important;
    overflow: visible !important;
}

/* Settings section switcher */
.settings-section-switcher {
    display: flex;
    width: 100%;
    gap: var(--space-1);
    padding: 0.2rem;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    border-radius: var(--radius-lg);
    box-sizing: border-box;
}

.settings-section-switcher__btn {
    flex: 1 1 33.333%;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: var(--space-2);
    min-height: 44px;
    padding: var(--space-2) var(--space-3);
    border: none;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--mud-palette-text-secondary);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: none;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.settings-section-switcher__btn--active {
    color: #fff;
    background-color: var(--mud-palette-primary);
}

.settings-section-switcher__label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.settings-section-content {
    width: 100%;
    padding-top: var(--space-6);
}

@media (max-width: 959.98px) {
    .settings-section-content {
        padding-top: var(--space-5);
    }

    .settings-section-switcher {
        position: sticky;
        top: calc(var(--app-top-bar-offset, 4.25rem) + var(--space-2));
        z-index: 100;
    }
}

/* Soften card container borders app-wide. Outlined MudPaper cards in settings and stats. */
.mud-paper-outlined {
    border-color: var(--hab-border-card);
}

/* Soften outlined input borders app-wide. Error, focus, hover, and disabled states keep MudBlazor's colors. */
.mud-input-outlined .mud-input-outlined-border {
    border-color: light-dark(rgba(15, 23, 42, 0.14), rgba(255, 255, 255, 0.12));
}

/* Numeric input fields use tabular JetBrains Mono */
.mud-input-numeric input,
.mud-input-control input[type="number"],
input[type="number"].mud-input-slot {
    font-family: var(--hab-font-mono) !important;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1, "zero" 1;
}

/* App bar: MudToolBar can shrink-wrap. Force full width + flex spacer so user/logout stay on the right edge */
.mud-appbar.app-top-bar {
    display: flex !important;
}

.mud-appbar.app-top-bar .mud-toolbar-appbar.app-top-bar-toolbar,
.mud-appbar.app-top-bar .mud-toolbar.mud-toolbar-appbar {
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
}

.mud-appbar.app-top-bar .app-top-bar__row {
    display: flex !important;
    flex: 1 1 0% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    box-sizing: border-box !important;
}

.mud-appbar.app-top-bar .app-top-bar__flex-spacer {
    flex: 1 1 auto !important;
    min-width: var(--space-4) !important;
    align-self: stretch !important;
}

.mud-appbar.app-top-bar .app-top-bar__right {
    flex: 0 0 auto !important;
    margin-left: 0 !important;
}

.text-transform-none {
    text-transform: none !important;
}

/* Replacements for Bootstrap text utilities. Neither Bootstrap nor MudBlazor
   ships these names, so without them the markup falls back to browser defaults
   such as underlined brand links and unmuted secondary text. */
.text-decoration-none {
    text-decoration: none !important;
}

.text-secondary {
    color: var(--mud-palette-text-secondary) !important;
}

.font-weight-normal {
    font-weight: 400 !important;
}

.text-truncate {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.max-w-240 {
    max-width: 240px !important;
}

/* Responsive visibility. Do not rely on Bootstrap display utilities for app chrome. */
.app-show-mobile-only,
.app-show-mobile-only.mud-button-root,
.app-show-mobile-only.mud-icon-button {
    display: none !important;
}

/* Mobile app chrome: hide the redundant brand title and collapse the bar so the
   nav tabs and profile actions share a single compact row. */
@media (max-width: 959.98px) {
    .app-branding--header {
        display: none !important;
    }

    .app-top-bar__stack {
        flex-direction: row !important;
        align-items: center !important;
        gap: var(--space-4) !important;
        width: 100% !important;
    }

    .app-top-bar__row {
        flex: 0 0 auto !important;
        width: auto !important;
        column-gap: var(--space-1) !important;
        min-width: 0;
        margin: 0 !important;
        order: 1 !important;
    }

    .app-top-bar__right {
        gap: var(--space-1);
    }

    .app-mobile-nav {
        flex: 1 1 auto !important;
        width: auto !important;
        padding: 0 !important;
        order: 2 !important;
    }

    /* Compact profile icons on mobile */
    .app-header-user-rail {
        flex-direction: row !important;
        gap: var(--space-1);
        justify-content: flex-start;
        align-items: center;
    }

    .app-header-profile-btn.mud-icon-button {
        width: 2.25rem !important;
        height: 2.25rem !important;
        border-radius: var(--radius-lg) !important;
    }
}

.app-show-desktop-only,
.app-show-desktop-only.mud-button-root,
.app-show-desktop-only.mud-icon-button {
    display: flex !important;
}

@media (max-width: 959.98px) {
    .app-show-mobile-only,
    .app-show-mobile-only.mud-button-root,
    .app-show-mobile-only.mud-icon-button {
        display: inline-flex !important;
    }

    .app-show-desktop-only,
    .app-show-desktop-only.mud-button-root,
    .app-show-desktop-only.mud-icon-button {
        display: none !important;
    }

    /* Single-row mobile app bar. Offset main content below fixed app bar.
       Keep the extra gap small but never less than the actual app bar height,
       so the first card sits close to the nav without clipping under it. */
    .app-shell-layout {
        --app-top-bar-offset: 4.25rem;
        --board-sticky-top: 4.25rem;
    }

    .app-shell-layout .app-shell-main.mud-main-content {
        padding-top: calc(var(--app-top-bar-offset) + var(--space-1)) !important;
    }
}

/* Desktop header nav - global styles. MudButton root is outside component CSS isolation. */
.app-header-nav {
    gap: var(--space-2) var(--space-4);
    margin-left: 0;
    align-items: center;
}

.app-header-nav-slot {
    display: inline-flex;
    align-items: center;
    height: var(--space-8);
    box-sizing: border-box;
}

.app-header-nav .app-header-nav-slot .app-header-nav-btn.mud-button-root {
    box-sizing: border-box;
    height: var(--space-8) !important;
    min-height: var(--space-8) !important;
    margin: 0 !important;
    padding: var(--space-2) 0.85rem !important;
    border: none !important;
    border-radius: var(--radius-md) !important;
    box-shadow: none !important;
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: none !important;
}

.app-header-nav .app-header-nav-slot:not(.app-header-nav-slot--active) .app-header-nav-btn.mud-button-root {
    color: var(--mud-palette-text-secondary) !important;
    background-color: transparent !important;
}

.app-header-nav .app-header-nav-slot--active .app-header-nav-btn.mud-button-filled.mud-button-filled-primary {
    background-color: var(--mud-palette-primary) !important;
    border-color: transparent !important;
}

/* GitHub repo link in the desktop header. MudButton root lives outside
   component CSS isolation, so the visuals live here with the header nav. */
.github-repo-link.mud-icon-button {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-md) !important;
    color: var(--mud-palette-text-secondary) !important;
}

/* Header status icons sit in plain spans next to MudIconButtons. This rule centers
   the sync button on the flex line. The scope is the sync wrapper only, so the
   .app-show-desktop-only hide behavior keeps working. */
.app-header-user-rail > span.sync-indicator-wrap {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center;
    align-self: center;
    line-height: 0;
}

.github-repo-link.mud-icon-button:hover {
    color: var(--mud-palette-primary) !important;
    background-color: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent) !important;
}

/* Mobile nav tabs inside the app bar, always rendered by MudAppBar */
.app-top-bar__stack {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: var(--space-2);
}

.app-mobile-nav {
    display: none;
    width: 100%;
    gap: var(--space-2);
    padding: 0 0 0.15rem;
}

.app-mobile-nav__item {
    flex: 1 1 0;
    min-width: 0;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0.45rem var(--space-4);
    border-radius: var(--radius-lg);
    border: 1px solid transparent;
    background: transparent;
    color: var(--mud-palette-text-secondary);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.82rem;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.app-mobile-nav__icon {
    font-size: 1.15rem !important;
}

.app-mobile-nav__label {
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

@media (max-width: 359.98px) {
    .app-mobile-nav__item {
        gap: 0;
    }

    .app-mobile-nav__label {
        display: none;
    }
}

.app-mobile-nav__item--active {
    color: var(--mud-palette-primary);
    background-color: color-mix(in srgb, var(--mud-palette-primary) 18%, transparent);
    border-color: color-mix(in srgb, var(--mud-palette-primary) 40%, transparent);
}

@media (min-width: 768px) and (max-width: 959.98px) {
    .app-mobile-nav {
        display: flex;
    }

    .app-top-bar.mud-appbar {
        height: auto !important;
        min-height: var(--topbar-height) !important;
    }

    .app-top-bar .mud-toolbar-appbar {
        height: auto !important;
        min-height: var(--topbar-height) !important;
        align-items: center !important;
        padding-top: var(--space-3) !important;
        padding-bottom: var(--space-3) !important;
    }
}

/* Phones use the fixed bottom tab bar, so the top tabs stay hidden
   and the main content clears the bar plus the home indicator. */
@media (max-width: 767.98px) {
    .app-mobile-nav {
        display: none !important;
    }

    /* The bottom bar owns navigation on phones. The top bar keeps only the
       sync dot. Brand and profile menu live on wider screens and in Settings. */
    .app-branding--header {
        display: none !important;
    }

    .app-shell-layout {
        --app-bottom-nav-offset: calc(4.5rem + env(safe-area-inset-bottom, 0px));
    }

    .app-shell-layout .app-shell-main.mud-main-content {
        padding-bottom: var(--app-bottom-nav-offset) !important;
    }

    .board-main-container.mud-container {
        padding-left: max(var(--space-5), env(safe-area-inset-left, 0px)) !important;
        padding-right: max(var(--space-5), env(safe-area-inset-right, 0px)) !important;
    }
}

/* Page containers to limit width on big screens */
.settings-page-wrapper {
    max-width: 900px;
    margin: 0 auto;
    width: 100%;
}

@media (max-width: 479.98px) {
    .settings-page-wrapper .mud-paper.settings-section-paper {
        padding: 0.85rem !important;
    }
}

.settings-section-paper {
    border-radius: var(--radius-xl);
    background: color-mix(in srgb, var(--mud-palette-surface) 90%, var(--mud-palette-primary) 4%);
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 10%, var(--mud-palette-table-lines) 75%);
    box-shadow: 0 1px 3px color-mix(in srgb, var(--mud-palette-text-primary) 6%, transparent);
}

.settings-load-fallback {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.35rem;
    padding: 2rem 1.25rem;
    background: color-mix(in srgb, var(--mud-palette-background-gray) 38%, var(--mud-palette-surface));
    border: 1px dashed color-mix(in srgb, var(--mud-palette-divider) 60%, transparent);
    border-radius: var(--radius-xl);
}
.settings-load-fallback__icon { color: var(--mud-palette-text-disabled) !important; opacity: 0.5; margin-bottom: 0.2rem; }
.settings-load-fallback__title { font-weight: 700; letter-spacing: -0.015em; }

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: var(--z-error);
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: var(--space-5);
    top: var(--space-4);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 0.5rem;
    background: transparent;
    border: none;
    color: inherit;
    font-size: inherit;
    line-height: 1;
}

#blazor-error-ui .dismiss:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.stats-page-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

@media (max-width: 959.98px) {
    .settings-page-wrapper,
    .stats-page-wrapper {
        padding-top: var(--space-2);
    }
}

/* App toasts: compact pill, sized to content */
#mud-snackbar-container.mud-snackbar-location-bottom-left,
#mud-snackbar-container,
.mud-snackbar-provider.mud-snackbar-provider-bottom-left {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--space-2, 0.5rem) !important;
    bottom: max(var(--space-3, 0.75rem), env(safe-area-inset-bottom, 0px)) !important;
    left: var(--space-3, 0.75rem) !important;
    padding: 0 !important;
    z-index: 2100 !important;
}

.mud-snackbar.habitinator-toast + .mud-snackbar.habitinator-toast,
.habitinator-toast + .habitinator-toast {
    margin-top: var(--space-2, 0.5rem) !important;
}

.mud-snackbar.habitinator-toast,
.habitinator-toast {
    position: relative;
    overflow: hidden;
    padding: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
    min-width: 0 !important;
    width: fit-content !important;
    max-width: min(26rem, calc(100vw - 1.5rem)) !important;
    background: color-mix(in srgb, var(--mud-palette-surface) 92%, var(--mud-palette-background-gray) 8%) !important;
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    color: var(--mud-palette-text-primary) !important;
    border-radius: var(--radius-xl) !important;
    border: 1px solid color-mix(in srgb, var(--mud-palette-divider) 70%, transparent) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    cursor: pointer;
    align-self: flex-start !important;
    transition: transform var(--duration-fast) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard);
}

.habitinator-toast:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.habitinator-toast.severity-info    { --toast-accent: var(--mud-palette-primary); }
.habitinator-toast.severity-success { --toast-accent: var(--hab-accent-success, #16a34a); }
.habitinator-toast.severity-warning { --toast-accent: #d97706; }
.habitinator-toast.severity-error   { --toast-accent: var(--hab-type-habit-bad, #dc2626); }

.habitinator-toast.undo-toast { --toast-accent: var(--mud-palette-primary); cursor: pointer; }

.habitinator-toast .mud-snackbar-icon,
.habitinator-toast .mud-snackbar-action,
.habitinator-toast .mud-snackbar-close-button,
.habitinator-toast .mud-snackbar-content-action {
    display: none !important;
}

.habitinator-toast .mud-snackbar-content,
.habitinator-toast .mud-snackbar-content-message {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: inherit !important;
    display: block !important;
}

/* Toast: horizontal layout, auto-sized */
.toast-content {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    padding: 0.35rem 0.85rem 0.35rem 0.5rem;
    box-sizing: border-box;
    cursor: pointer;
}

.toast-content__main {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex: 1;
    min-width: 0;
    line-height: 1.35;
}

.toast-content-icon {
    --size: 1.65rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    background: color-mix(in srgb, var(--toast-accent, var(--mud-palette-primary)) 14%, transparent);
    color: var(--toast-accent, var(--mud-palette-primary));
}

.toast-content-icon .mud-icon {
    font-size: 1rem !important;
}

.toast-content-message {
    font-family: var(--hab-font-sans);
    font-size: 0.84rem;
    font-weight: 550;
    letter-spacing: -0.01em;
    color: var(--mud-palette-text-primary);
    line-height: 1.35;
    overflow-wrap: anywhere;
    user-select: none;
}

/* Undo toast: icon + message + undo button, auto-sized */
.undo-toast-body {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.35rem 0.65rem 0.35rem 0.5rem;
    box-sizing: border-box;
    line-height: 1.35;
    cursor: pointer;
}

.undo-toast-icon {
    --size: 1.65rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    background: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent);
    color: var(--mud-palette-primary);
}

.undo-toast-icon .mud-icon {
    font-size: 1rem !important;
}

.undo-toast-message {
    flex: 1;
    font-family: var(--hab-font-sans);
    font-size: 0.84rem;
    font-weight: 550;
    letter-spacing: -0.01em;
    color: var(--mud-palette-text-primary);
    line-height: 1.35;
    overflow-wrap: anywhere;
    cursor: default;
    user-select: none;
}

.undo-toast-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
    color: var(--mud-palette-primary);
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 32%, transparent);
    border-radius: var(--radius-pill);
    padding: 0.25rem 0.65rem;
    font-family: var(--hab-font-sans);
    font-size: 0.76rem;
    font-weight: 650;
    letter-spacing: -0.01em;
    text-transform: none;
    cursor: pointer;
    line-height: 1.2;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.undo-toast-btn:hover {
    background: color-mix(in srgb, var(--mud-palette-primary) 22%, transparent);
    border-color: color-mix(in srgb, var(--mud-palette-primary) 55%, transparent);
    color: var(--mud-palette-primary);
}

.undo-toast-btn:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.undo-toast-btn:active {
    background: color-mix(in srgb, var(--mud-palette-primary) 30%, transparent);
}

.undo-toast-btn .mud-icon {
    font-size: 0.88rem !important;
}

@media (max-width: 767.98px) {
    /* Toasts dock below the app bar below the tablet breakpoint so they never cover the add field
       or the fixed bottom navigation. */
    #mud-snackbar-container.mud-snackbar-location-bottom-left,
    #mud-snackbar-container,
    .mud-snackbar-provider.mud-snackbar-provider-bottom-left {
        top: calc(var(--app-top-bar-offset, 3.5rem) + var(--space-2)) !important;
        bottom: auto !important;
        left: 0.5rem !important;
        right: 0.5rem !important;
    }
    .habitinator-toast {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    .toast-content {
        padding: 0.35rem 0.5rem;
        gap: var(--space-2);
    }
    .undo-toast-body {
        padding: 0.35rem 0.5rem;
        gap: var(--space-2);
    }
    .undo-toast-btn {
        min-height: 44px;
        padding: 0.35rem 0.75rem;
    }
}

/* Shared minimal fallback used when inline MudAlert is replaced by toast */
.dialog-inline-fallback,
.stats-load-fallback {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.35rem;
    padding: 2rem 1.25rem;
}
.dialog-inline-fallback {
    padding: 1.6rem 1.25rem;
    background: color-mix(in srgb, var(--mud-palette-background-gray) 30%, var(--mud-palette-surface));
    border: 1px dashed color-mix(in srgb, var(--mud-palette-divider) 58%, transparent);
    border-radius: var(--radius-xl);
}
.dialog-inline-fallback__icon { color: var(--mud-palette-text-disabled) !important; opacity: 0.55; margin-bottom: 0.15rem; }
.dialog-inline-fallback__title { font-weight: 700; letter-spacing: -0.015em; }
.dialog-inline-fallback--compact {
    padding: 0.85rem 1rem !important;
    gap: 0.2rem !important;
    background: color-mix(in srgb, var(--mud-palette-error) 6%, var(--mud-palette-surface)) !important;
    border-style: solid !important;
    border-color: color-mix(in srgb, var(--mud-palette-error) 16%, var(--mud-palette-divider)) !important;
}

/* Dialog backdrop: flat dim, no blur and no gradients for speed */
.mud-dialog-container {
    background: rgba(8, 12, 24, 0.5) !important;
}
.mud-dialog-container.mud-dialog-container--with-backdrop {
    background: rgba(8, 12, 24, 0.5) !important;
}

/* Base dialog style. All dialogs except those with custom outer shells (hab-modal family). */
.mud-dialog:not(.edit-daily-dialog):not(.edit-habit-dialog):not(.daily-yesterday-dialog):not(.hab-modal-dialog):not(:has(.hab-modal)):not(:has(.edit-daily-shell)):not(:has(.daily-yesterday-shell)) {
    border-radius: var(--hab-modal-radius) !important;
    border: 1px solid color-mix(in srgb, var(--mud-palette-divider) 60%, transparent) !important;
    background: var(--mud-palette-surface) !important;
    box-shadow:
        0 1px 3px light-dark(rgba(15, 23, 42, 0.08), rgba(0, 0, 0, 0.45)),
        0 12px 32px light-dark(rgba(15, 23, 42, 0.12), rgba(0, 0, 0, 0.6)) !important;
    overflow: hidden !important;
}

/* Consistent title bar */
.mud-dialog .mud-dialog-title {
    background: var(--mud-palette-surface) !important;
    border-bottom: 1px solid var(--mud-palette-divider) !important;
    padding: 1.25rem 1.25rem var(--space-6) !important;
}

/* Message boxes: honor line breaks in message text */
.mud-dialog.mud-message-box .mud-dialog-content {
    white-space: pre-line;
}

.mud-dialog .mud-dialog-title .mud-typography {
    font-weight: 700 !important;
    font-size: 1.1rem !important;
    color: var(--mud-palette-text-primary) !important;
    letter-spacing: -0.015em;
}

/* Consistent dialog actions, the footer */
.mud-dialog .mud-dialog-actions {
    border-top: 1px solid var(--mud-palette-divider) !important;
    padding: var(--space-6) 1.25rem !important;
    background: var(--mud-palette-surface) !important;
    gap: var(--space-5) !important;
}

.mud-dialog .mud-dialog-actions .mud-button {
    text-transform: none !important;
    font-weight: 600 !important;
    border-radius: var(--radius-md) !important;
}

/* Consistent close button style on base dialogs */
.mud-dialog-title .mud-button-close {
    color: var(--mud-palette-text-secondary) !important;
    margin-top: -0.15rem;
    margin-right: -0.15rem;
    border-radius: var(--radius-md) !important;
}

/* Activity day detail dialog, heatmap details, redesign */

/* Dialog content container custom spacing */
.activity-day-detail-dialog .activity-day-detail-dialog__content {
    padding: 1.25rem !important;
}

/* Modern timeline and list table layout */
.activity-day-detail-table.mud-table {
    background: transparent !important;
}

.activity-day-detail-table .mud-table-root {
    background: transparent !important;
    border: 1px solid var(--mud-palette-divider) !important;
    border-radius: var(--radius-lg) !important;
    overflow: hidden !important;
    border-collapse: separate !important;
    width: 100% !important;
}

.activity-day-detail-table .mud-table-container {
    background: transparent !important;
    overflow-x: hidden !important;
}

.activity-day-detail-table .mud-table-body .mud-table-row {
    background: var(--mud-palette-surface) !important;
    display: table-row !important;
}

/* Stripes: Alternating row background */
.activity-day-detail-table .mud-table-body .mud-table-row:nth-child(even) {
    background: var(--mud-palette-background-gray) !important;
}

.activity-day-detail-table .mud-table-body .mud-table-cell {
    display: table-cell !important;
    vertical-align: middle !important;
    color: var(--mud-palette-text-primary) !important;
    border-bottom: 1px solid var(--mud-palette-divider) !important;
    padding: var(--space-5) var(--space-6) !important;
    font-size: 0.9rem !important;
    text-align: left !important;
}

.activity-day-detail-table .mud-table-body .mud-table-row:last-child .mud-table-cell {
    border-bottom: none !important;
}

/* Time badge column */
.activity-time-cell {
    width: 70px;
    min-width: 60px;
    font-weight: 600 !important;
    color: var(--mud-palette-text-secondary) !important;
    white-space: nowrap;
    padding: var(--space-4) var(--space-4) var(--space-4) var(--space-5) !important;
}

.activity-time-text {
    font-family: var(--hab-font-mono);
    font-size: 0.8rem;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1, "zero" 1;
    background: color-mix(in srgb, var(--mud-palette-text-secondary) 10%, transparent);
    padding: 0.15rem var(--space-3);
    border-radius: var(--radius-sm);
}

/* Small-screen optimizations */
@media (max-width: 480px) {
    .activity-day-detail-dialog .activity-day-detail-dialog__content {
        padding: var(--space-5) !important;
    }

    .activity-day-detail-table .mud-table-body .mud-table-row {
        display: block !important;
        padding: var(--space-3) var(--space-4);
        border-bottom: 1px solid var(--mud-palette-divider);
    }

    .activity-day-detail-table .mud-table-body .mud-table-row:last-child {
        border-bottom: none;
    }

    .activity-day-detail-table .mud-table-body .mud-table-cell {
        display: block !important;
        padding: 0 !important;
        font-size: 0.8rem !important;
        text-align: left !important;
        border-bottom: none !important;
    }

    .activity-time-cell {
        width: auto;
        min-width: 0;
        padding: 0 0 0.1rem 0 !important;
    }

    .activity-time-text {
        font-family: var(--hab-font-mono);
        font-size: 0.72rem;
        padding: 0;
        background: none;
        letter-spacing: 0.01em;
        font-variant-numeric: tabular-nums;
        font-feature-settings: "tnum" 1, "zero" 1;
        color: var(--mud-palette-text-secondary);
    }

    .activity-desc-wrap {
        gap: 0.45rem;
        align-items: center;
    }

    .activity-detail-icon {
        font-size: 0.95rem !important;
        flex-shrink: 0;
    }

    .activity-text {
        font-size: 0.82rem;
        overflow-wrap: break-word;
    }
}

/* Details description and status indicator */
.activity-desc-wrap {
    display: inline-flex;
    align-items: center;
    gap: var(--space-5);
    min-width: 0;
    flex-wrap: nowrap;
    vertical-align: middle;
}

.activity-text {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--mud-palette-text-primary);
    min-width: 0;
}

.activity-day-detail-dialog .mud-progress-linear { border-radius: var(--space-1); }

/* New timeline for day detail, board aligned */
.stats-day-summary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: var(--space-4);
    padding: 0.4rem 0.7rem;
    background: color-mix(in srgb, var(--mud-palette-primary) 7%, var(--mud-palette-surface));
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 14%, transparent);
    border-radius: var(--radius-pill);
    font-family: var(--hab-font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-secondary);
}
.stats-day-summary__count { color: var(--mud-palette-text-primary); }
.stats-day-summary__dot { width: 3px; height: 3px; border-radius: 50%; background: var(--mud-palette-text-disabled); flex-shrink: 0; }
.stats-day-timeline { display: flex; flex-direction: column; gap: 0; border: 1px solid color-mix(in srgb, var(--mud-palette-divider) 55%, transparent); border-radius: var(--radius-lg); overflow: hidden; background: var(--mud-palette-surface); }
.stats-day-event { display: grid; grid-template-columns: 64px 24px 1fr; gap: 0.65rem; align-items: center; padding: 0.75rem 0.85rem; border-bottom: 1px solid color-mix(in srgb, var(--mud-palette-divider) 35%, transparent); background: var(--mud-palette-surface); }
.stats-day-event:last-child { border-bottom: none; }
.stats-day-event:nth-child(even) { background: color-mix(in srgb, var(--mud-palette-background-gray) 92%, var(--mud-palette-divider) 8%); }
.stats-day-event:nth-child(odd) { background: var(--mud-palette-surface); }
.stats-day-event__time { font-family: var(--hab-font-mono); font-size: 0.78rem; font-weight: 650; letter-spacing: 0.01em; color: var(--mud-palette-text-secondary); font-variant-numeric: tabular-nums; text-align: right; }
.stats-day-event__icon { font-size: 1.15rem !important; line-height: 1; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.stats-day-event__icon--daily { color: var(--mud-palette-primary); }
.stats-day-event__icon--todo { color: var(--hab-type-todo-ink); }
.stats-day-event__icon--plus { color: var(--hab-type-habit); }
.stats-day-event__icon--minus { color: var(--hab-type-habit-bad); }
.stats-day-event__icon--timer { color: var(--mud-palette-text-secondary); }
.stats-day-event__icon--default { color: var(--mud-palette-text-disabled); }
.stats-day-event__body { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.stats-day-event__title { font-size: 0.875rem; font-weight: 650; letter-spacing: -0.01em; color: var(--mud-palette-text-primary); overflow-wrap: break-word; line-height: 1.3; }
.stats-day-event__meta { font-size: 0.72rem; color: var(--mud-palette-text-secondary); line-height: 1.3; }
.stats-day-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 2rem 1.5rem; border: 1px dashed color-mix(in srgb, var(--mud-palette-divider) 65%, transparent); border-radius: var(--radius-xl); background: color-mix(in srgb, var(--mud-palette-background-gray) 22%, transparent); }
.stats-day-empty__icon { color: var(--mud-palette-text-disabled); opacity: 0.7; margin-bottom: 0.5rem; }
@media (max-width: 480px) {
    .stats-day-event { grid-template-columns: 56px 24px 1fr; padding: 0.6rem 0.7rem; gap: 0.5rem; }
    .stats-day-event__time { font-size: 0.72rem; }
    .stats-day-event__title { font-size: 0.82rem; }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition: none !important;
    }
    html {
        scroll-behavior: auto !important;
    }
}

/* Phone safe area: keep last content clear of the home indicator. */
@media (max-width: 959.98px) {
    .app-shell-main.mud-main-content {
        padding-bottom: max(var(--space-5), env(safe-area-inset-bottom, 0px)) !important;
    }

    .stats-segment__btn {
        min-height: 44px;
        padding: 0.5rem 0.85rem;
    }

    .stats-weekly-tile__label,
    .stats-weekly-tile__delta {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        line-height: 1.3;
    }

    .mud-dialog .mud-dialog-actions .mud-button {
        min-height: 44px;
    }

    .dialog-inline-fallback .mud-button-root { min-height: 44px; }

    .settings-page-wrapper .mud-button-root:not(.mud-icon-button) { min-height: 44px; }

    .settings-page-wrapper input.mud-input-slot,
    .settings-page-wrapper textarea.mud-input-slot,
    .stats-filter-row input.mud-input-slot {
        font-size: 16px !important;
    }

    .quiet-time-picker {
        flex: 1 1 150px !important;
        min-width: 150px !important;
    }
}

/* Quiet hours pickers share the row and wrap on narrow screens. */
.quiet-hours-row {
    flex-wrap: wrap;
}

.quiet-time-picker {
    flex: 1 1 160px;
    min-width: 160px;
}

/* Stop iOS focus zoom on phone text entry. */
@media (pointer: coarse) {
    .board-add-field input,
    .timer-target-field input,
    .timer-focus-textfield input {
        font-size: 16px !important;
    }
}