/* Halo foundations and framework adapters. Independent of app.css and Bop. */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
html, body { margin: 0; padding: 0; font-family: var(--halo-font); background: var(--halo-canvas); color: var(--halo-text); line-height: 1.5; }
body { min-height: 100vh; overflow-x: clip; }
button, input, select, textarea { font: inherit; }
::selection { background: var(--halo-selection); color: var(--halo-text); }
a { color: var(--halo-ink-brand); }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--halo-focus-color); outline-offset: 3px; }
/* FocusOnNavigate moves screen-reader focus to a static page heading. Keep
   focus rings on interactive controls, not this programmatic navigation target. */
body h1[tabindex="-1"]:focus { outline: none; }
.validation-message, .blazor-error-boundary { color: var(--halo-ink-critical); }
.invalid { border-color: var(--halo-ink-critical); }
.blazor-error-boundary { padding: var(--halo-4); background: var(--halo-tint-critical); border: 1px solid var(--halo-ink-critical); border-radius: var(--halo-radius-md); }
.blazor-error-boundary::after { content: "An error has occurred."; }

/* CSS applies the saved palette before the interactive provider connects. */
:root[data-theme] {
    --mud-palette-background: var(--halo-canvas);
    --mud-palette-background-gray: var(--halo-surface-sunken);
    --mud-palette-surface: var(--halo-surface);
    --mud-palette-text-primary: var(--halo-text);
    --mud-palette-text-secondary: var(--halo-text-secondary);
    --mud-palette-text-disabled: var(--halo-text-tertiary);
    --mud-palette-action-default: var(--halo-text-secondary);
    --mud-palette-action-disabled: var(--halo-text-tertiary);
    --mud-palette-action-disabled-background: var(--halo-surface-sunken);
    --mud-palette-divider: var(--halo-hairline-strong);
    --mud-palette-lines-default: var(--halo-hairline-strong);
    --mud-palette-lines-inputs: var(--halo-input-border);
    --mud-palette-primary: var(--halo-action-brand);
    --mud-palette-primary-text: var(--halo-on-action);
    --mud-palette-success: var(--halo-ink-success);
    --mud-palette-warning: var(--halo-ink-warning);
    --mud-palette-error: var(--halo-ink-critical);
    --mud-palette-info: var(--halo-ink-info);
}
.mud-typography, .mud-input, .mud-button, .mud-table, .mud-list, .mud-dialog { font-family: var(--halo-font); }
.mud-paper, .mud-card { background: var(--halo-surface); color: var(--halo-text); border-radius: var(--halo-radius-lg); }
.mud-ripple-element { display: none; }
.mud-divider { border-color: var(--halo-hairline); }
.mud-icon-root { color: currentColor; }
.mud-popover, .mud-menu, .mud-picker { background: var(--halo-surface); color: var(--halo-text); border: 1px solid var(--halo-hairline-strong); border-radius: var(--halo-radius-md); box-shadow: var(--halo-shadow-3); }
.mud-list-item { color: var(--halo-text); border-radius: var(--halo-radius-xs); }
.mud-list-item:hover, .mud-list-item:focus-visible { background: var(--halo-surface-hover); }
.mud-list-item.mud-selected-item { color: var(--halo-ink-brand); background: var(--halo-tint-brand); }
.mud-tooltip { background: var(--halo-surface-inverse); color: var(--halo-text-inverse); border-radius: var(--halo-radius-xs); }
.mud-snackbar { border-radius: var(--halo-radius-md); }
.mud-alert { border-radius: var(--halo-radius-md); box-shadow: none; }
.mud-alert-outlined-success, .mud-alert-text-success { color: var(--halo-ink-success); background: var(--halo-tint-success); }
.mud-alert-outlined-warning, .mud-alert-text-warning { color: var(--halo-ink-warning); background: var(--halo-tint-warning); }
.mud-alert-outlined-error, .mud-alert-text-error { color: var(--halo-ink-critical); background: var(--halo-tint-critical); }
.mud-alert-outlined-info, .mud-alert-text-info { color: var(--halo-ink-info); background: var(--halo-tint-info); }
.mud-alert-filled-success { color: var(--halo-on-action); background: var(--halo-action-success); }
.mud-alert-filled-warning { color: var(--halo-on-action); background: var(--halo-action-warning); }
.mud-alert-filled-error { color: var(--halo-on-action); background: var(--halo-action-critical); }
.mud-alert-filled-info { color: var(--halo-on-action); background: var(--halo-action-info); }

/* Dialogs share one neutral surface, readable content and fixed action footer. */
.mud-dialog { display: flex; flex-direction: column; max-height: min(92dvh, 920px); overflow: hidden; background: var(--halo-surface-raised); color: var(--halo-text); border: 1px solid var(--halo-hairline-strong); border-radius: var(--halo-radius-xl); box-shadow: var(--halo-shadow-3), inset 0 0 0 .5px rgb(255 255 255 / .06); animation: halo-dialog-in var(--halo-duration-4) var(--halo-ease-spring), halo-dialog-fade var(--halo-duration-2) var(--halo-ease-out); }
@keyframes halo-dialog-in { from { transform: translateY(14px) scale(.92); } }
@keyframes halo-dialog-fade { from { opacity: 0; } }
.mud-dialog .mud-dialog-title { flex: 0 0 auto; padding: var(--halo-5) var(--halo-6); border-bottom: 1px solid var(--halo-hairline); background: var(--halo-surface-raised); font-family: var(--halo-font-display); font-weight: 700; letter-spacing: var(--halo-tracking-tight); }
.mud-dialog .mud-dialog-title .mud-typography { font-family: var(--halo-font-display); font-weight: 700; letter-spacing: var(--halo-tracking-tight); }
.mud-dialog .mud-dialog-content { flex: 1 1 auto; min-height: 0; overflow: auto; padding: var(--halo-6); background: var(--halo-surface-raised); color: var(--halo-text); }
.mud-dialog .mud-dialog-actions { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: var(--halo-2); padding: var(--halo-4) var(--halo-6); border-top: 1px solid var(--halo-hairline); background: var(--halo-surface-sunken); }
/* Fields inside a dialog step in as a staircase: 45ms apart, after the sheet lands. */
.mud-dialog .mud-dialog-content > :is(.halo-form-grid, .halo-dialog-stack, .dialog-form, .halo-dialog-grid) > * { animation: halo-field-rise var(--halo-duration-4) var(--halo-ease-out) both; animation-delay: calc(var(--halo-stagger, 0) * 45ms + 80ms); }
.mud-dialog .mud-dialog-content > :is(.halo-form-grid, .halo-dialog-stack, .dialog-form, .halo-dialog-grid) > :nth-child(1) { --halo-stagger: 0; }
.mud-dialog .mud-dialog-content > :is(.halo-form-grid, .halo-dialog-stack, .dialog-form, .halo-dialog-grid) > :nth-child(2) { --halo-stagger: 1; }
.mud-dialog .mud-dialog-content > :is(.halo-form-grid, .halo-dialog-stack, .dialog-form, .halo-dialog-grid) > :nth-child(3) { --halo-stagger: 2; }
.mud-dialog .mud-dialog-content > :is(.halo-form-grid, .halo-dialog-stack, .dialog-form, .halo-dialog-grid) > :nth-child(4) { --halo-stagger: 3; }
.mud-dialog .mud-dialog-content > :is(.halo-form-grid, .halo-dialog-stack, .dialog-form, .halo-dialog-grid) > :nth-child(5) { --halo-stagger: 4; }
.mud-dialog .mud-dialog-content > :is(.halo-form-grid, .halo-dialog-stack, .dialog-form, .halo-dialog-grid) > :nth-child(6) { --halo-stagger: 5; }
.mud-dialog .mud-dialog-content > :is(.halo-form-grid, .halo-dialog-stack, .dialog-form, .halo-dialog-grid) > :nth-child(7) { --halo-stagger: 6; }
.mud-dialog .mud-dialog-content > :is(.halo-form-grid, .halo-dialog-stack, .dialog-form, .halo-dialog-grid) > :nth-child(n + 8) { --halo-stagger: 7; }
@keyframes halo-field-rise { from { opacity: 0; transform: translateY(8px); } }
.mud-overlay-dark { background: var(--halo-scrim); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: halo-dialog-fade var(--halo-duration-3) var(--halo-ease-out); }
.mud-drawer--closed.mud-drawer-pos-right { display: none; }
.halo-dialog-stack, .dialog-form { display: grid; gap: var(--halo-4); }
.halo-dialog-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--halo-4); }
.halo-dialog-full { grid-column: 1 / -1; }

/* Framework fields use the same border, focus and disabled roles as native Halo. */
.mud-input.mud-input-outlined, .mud-input.mud-input-filled { background: var(--halo-surface); color: var(--halo-text); border-radius: var(--halo-radius-md); }
.mud-input.mud-input-outlined .mud-input-outlined-border { border-color: var(--halo-input-border); }
.mud-input.mud-input-filled { border: 1px solid var(--halo-input-border); }
.mud-input.mud-input-filled::before, .mud-input.mud-input-filled::after { display: none; }
.mud-input:hover .mud-input-outlined-border { border-color: var(--halo-input-border-hover); }
.mud-input.mud-input-focused .mud-input-outlined-border { border-color: rgb(var(--halo-tone-brand) / .70); }
.mud-input.mud-input-focused { box-shadow: var(--halo-focus-ring-field); }
.mud-input.mud-input-outlined, .mud-input.mud-input-filled { transition: box-shadow var(--halo-duration-2) var(--halo-ease-out), border-color var(--halo-duration-1) var(--halo-ease-out); }
.mud-input.mud-input-outlined .mud-input-outlined-border { transition: border-color var(--halo-duration-1) var(--halo-ease-out); }
.mud-input.mud-input-error.mud-input-focused { box-shadow: 0 0 0 4px rgb(var(--halo-tone-critical) / .14); }
.mud-input-control.mud-input-error .mud-input { animation: halo-field-shake var(--halo-duration-3) var(--halo-ease-out); }
@keyframes halo-field-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.mud-input.mud-disabled { background: var(--halo-surface-sunken); color: var(--halo-text-tertiary); }
.mud-input-label, .mud-input-helper-text { color: var(--halo-text-secondary); }
.mud-input-adornment { color: var(--halo-text-secondary); }
.mud-input.mud-input-error .mud-input-outlined-border { border-color: var(--halo-ink-critical); }
.mud-input-control .mud-input-error .mud-input-helper-text { color: var(--halo-ink-critical); }
.mud-picker-toolbar { color: var(--halo-text); background: var(--halo-surface-sunken); }
.mud-picker-calendar .mud-day.mud-selected { color: var(--halo-on-action); background: var(--halo-action-brand); }
.mud-picker-calendar .mud-day.mud-current { box-shadow: inset 0 0 0 1px var(--halo-focus-color); }

/* Tables keep operational density and theme-aware hover/selection. */
.mud-table { background: var(--halo-surface); color: var(--halo-text); }
.mud-table-head .mud-table-cell { background: var(--halo-surface); color: var(--halo-text-secondary); font-size: var(--halo-text-caption); font-weight: 600; }
.mud-table-cell { color: var(--halo-text); border-bottom-color: var(--halo-hairline); }
.mud-table-hover .mud-table-body .mud-table-row:hover { background: var(--halo-surface-hover); }
.mud-table-row.selected, .mud-table-row.mud-selected { background: var(--halo-tint-brand); }
.mud-table-pagination { color: var(--halo-text-secondary); border-top: 1px solid var(--halo-hairline); }

@media (max-width: 640px) {
    .halo-dialog-grid { grid-template-columns: 1fr; }
    .mud-dialog .mud-dialog-content { padding: var(--halo-4); }
    .mud-dialog .mud-dialog-title, .mud-dialog .mud-dialog-actions { padding: var(--halo-4); }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
@keyframes halo-number-change { from { opacity: .55; } to { opacity: 1; } }
.halo-number-change { animation: halo-number-change var(--halo-duration-2) var(--halo-ease); }
/* Text and outlined actions use readable semantic ink; filled actions keep their stable paint. */
.mud-primary-text, .mud-button-text-primary, .mud-button-outlined-primary { color: var(--halo-ink-brand); }
.mud-secondary-text, .mud-button-text-secondary, .mud-button-outlined-secondary { color: var(--halo-ink-pipeline); }
.mud-dark-text { color: var(--halo-text); }
.halo-grid--condensed .mud-table-body .mud-table-cell { padding-block: var(--halo-1); }
.halo-grid--expanded .mud-table-body .mud-table-cell { padding-block: var(--halo-3); }
.halo-grid-clickable .mud-table-body .mud-table-row { cursor: pointer; }
.halo-col-actions { width: 1%; white-space: nowrap; }

@keyframes sticky-slide-left {
    from { transform: translateX(100%); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}

@keyframes sticky-slide-right {
    from { transform: translateX(-100%); opacity: 0; }
    to   { transform: translateX(0);     opacity: 1; }
}

.sticky-note-enter-left {
    animation: sticky-slide-left 250ms cubic-bezier(0.32, 0.72, 0, 1);
}

.sticky-note-enter-right {
    animation: sticky-slide-right 250ms cubic-bezier(0.32, 0.72, 0, 1);
}

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

    .sticky-note-enter-left,
    .sticky-note-enter-right {
        animation: none;
    }
}


@media print { .halo-main-content { padding: 0; } .blazor-error-boundary { display: none; } }