: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, #0b0f19);
}

/* 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);
    transition: opacity 0.35s ease, visibility 0.35s ease;
}

/* 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 {
    animation: splash-pulse 2s ease-in-out infinite;
}

@keyframes splash-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.08); opacity: 0.85; }
}

.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: #f1f5f9;
    margin: 0;
}

html.light-theme .wasm-splash__title {
    color: #1e293b;
}
@media (prefers-color-scheme: light) {
    html:not(.dark-theme) .wasm-splash__title {
        color: #1e293b;
    }
}

/* Indeterminate progress bar */
.wasm-splash__progress {
    width: 180px;
    height: 3px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-pill);
    overflow: hidden;
}

html.light-theme .wasm-splash__progress {
    background: rgba(0, 0, 0, 0.08);
}
@media (prefers-color-scheme: light) {
    html:not(.dark-theme) .wasm-splash__progress {
        background: rgba(0, 0, 0, 0.08);
    }
}

.wasm-splash__progress-bar {
    height: 100%;
    width: 5%;
    min-width: 4%;
    max-width: 100%;
    background: var(--hab-brand-gradient);
    border-radius: var(--radius-pill);
    transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

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

html.light-theme .wasm-splash__hint {
    color: rgba(0, 0, 0, 0.35);
}
@media (prefers-color-scheme: light) {
    html:not(.dark-theme) .wasm-splash__hint {
        color: rgba(0, 0, 0, 0.35);
    }
}

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

/* -- Top Loading Bar, legacy, inside the WASM-rendered layout -- */
#habitinator-loading-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, #3b82f6 0%, #60a5fa 50%, #3b82f6 100%);
    background-size: 200% 100%;
    opacity: 0;
    animation: habLoading 1.5s infinite linear, habFadeIn 0.3s forwards;
    animation-delay: 0s, 0.8s;
    z-index: 20000;
    transition: opacity var(--dur-slow) ease, visibility var(--dur-slow) ease;
}
@keyframes habLoading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
@keyframes habFadeIn {
    to { opacity: 1; }
}

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: light-dark(#2563eb, #60a5fa);
}

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);
}

/* 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;
}

.mud-dialog.edit-habit-dialog,
.mud-dialog:has(.edit-habit-shell),
.mud-dialog.edit-daily-dialog,
.mud-dialog:has(.edit-daily-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(24rem, calc(100vw - var(--space-8))) !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 {
    padding: 0 !important;
    overflow: visible !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 - var(--space-8))) !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: var(--control-height);
    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;
    transition: all var(--dur-fast) ease;
}

.settings-section-switcher__btn:active {
    transform: scale(0.97);
}

.settings-section-switcher__btn--active {
    color: #fff;
    background-color: var(--mud-palette-primary);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--mud-palette-primary) 35%, transparent);
}

.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);
    }
}

/* 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;
}

/* 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 sync/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-user-rail .sync-status-indicator {
        margin-right: var(--space-1) !important;
    }

    .app-header-user-rail .sync-status-indicator .mud-icon {
        font-size: 1.25rem !important;
    }

    .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;
    box-shadow: 0 2px 6px color-mix(in srgb, var(--mud-palette-primary) 30%, 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: var(--mobile-nav-height);
    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;
    transition: color var(--dur-normal) ease, background-color var(--dur-normal) ease, border-color var(--dur-normal) ease;
}

.app-mobile-nav__item:active {
    transform: scale(0.98);
}

.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 (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;
    }
}

/* 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;
    }
}

.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, bottom-left snackbar -- */
.habitinator-toast {
    position: relative;
    overflow: hidden;
    padding: 0 !important;
    background: var(--mud-palette-surface) !important;
    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 12px 40px color-mix(in srgb, var(--mud-palette-text-primary) 12%, transparent),
        0 2px 10px color-mix(in srgb, var(--mud-palette-text-primary) 7%, transparent) !important;
    cursor: pointer;
    animation: toast-slide-in var(--dur-slow) cubic-bezier(0.22, 1, 0.36, 1);
    align-self: flex-start !important;
    width: fit-content !important;
    min-width: auto !important;
    max-width: min(24rem, calc(100vw - 2rem)) !important;
}

/* Severity accent stripe on the leading edge */
.habitinator-toast::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 3px;
    background: var(--toast-accent, var(--mud-palette-primary));
    pointer-events: none;
}

.habitinator-toast.severity-info    { --toast-accent: var(--mud-palette-info); }
.habitinator-toast.severity-success { --toast-accent: var(--mud-palette-success); }
.habitinator-toast.severity-warning { --toast-accent: var(--mud-palette-warning); }
.habitinator-toast.severity-error   { --toast-accent: var(--mud-palette-error); }

/* Undo toasts: no accent stripe. The Undo button carries the color */
.habitinator-toast.undo-toast::before {
    display: none;
}

@keyframes toast-slide-in {
    from { opacity: 0; transform: translateY(var(--space-5)); }
    to   { opacity: 1; transform: translateY(0); }
}

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

.habitinator-toast .mud-snackbar-content {
    width: 100%;
    padding: 0 !important;
    margin: 0 !important;
}

/* -- Typed message toast -- */
.toast-content {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    width: 100%;
    padding: var(--space-5) var(--space-6);
}

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

.toast-content-message {
    flex: 1;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--mud-palette-text-primary);
    line-height: 1.45;
}

.toast-content-dismiss {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    padding: 0;
    transition: background var(--dur-fast) ease, color var(--dur-fast) ease;
}

.toast-content-dismiss:hover {
    background: color-mix(in srgb, var(--mud-palette-text-primary) 8%, transparent);
    color: var(--mud-palette-text-primary);
}

/* -- Undo toast -- */
.undo-toast-body {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    width: 100%;
    padding: var(--space-5) var(--space-6);
}

.undo-toast-message {
    flex: 1;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--mud-palette-text-primary);
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.undo-toast-btn {
    flex-shrink: 0;
    background: var(--mud-palette-error);
    color: var(--mud-palette-error-text, #fff);
    border: none;
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-6);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background var(--dur-fast) ease, transform var(--dur-fast) ease;
}

.undo-toast-btn:hover {
    background: color-mix(in srgb, var(--mud-palette-error) 85%, #000);
}

.undo-toast-btn:active {
    transform: scale(0.97);
}

/* Premium dialog styling overrides */

/* Upgraded backdrop blur on all dialog overlays */
.mud-dialog-container {
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    background-color: rgba(10, 15, 30, 0.45) !important;
    transition: background-color var(--dur-slow) ease, backdrop-filter var(--dur-slow) ease;
}

/* Base dialog style. All dialogs except those with custom outer shells. */
.mud-dialog:not(.edit-daily-dialog):not(.edit-habit-dialog):not(.daily-yesterday-dialog) {
    border-radius: var(--space-6) !important;
    border: 1px solid color-mix(in srgb, var(--mud-palette-divider) 60%, transparent) !important;
    background: var(--mud-palette-surface) !important;
    box-shadow: 
        0 24px 38px 3px rgba(0, 0, 0, 0.08), 
        0 9px 46px 8px rgba(0, 0, 0, 0.06), 
        0 11px 15px -7px rgba(0, 0, 0, 0.1) !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;
    transition: background-color var(--dur-fast) ease;
    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);
}

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