/*
 * ToolDeck design tokens. Colors are derived from the MudBlazor palette variables emitted by
 * MudThemeProvider, so every token follows the active light or dark palette automatically.
 * Keep this file limited to tokens, resets, and unavoidable MudBlazor overrides.
 */
:root {
    --td-font-sans: "Geist", "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
    --td-font-mono: "Geist Mono", "Cascadia Code", "SF Mono", Consolas, ui-monospace, monospace;

    --td-page: var(--mud-palette-background);
    --td-surface: var(--mud-palette-surface);
    --td-surface-muted: var(--mud-palette-background-gray);
    --td-surface-hover: color-mix(in oklab, var(--mud-palette-primary) 6%, var(--mud-palette-surface));
    --td-text: var(--mud-palette-text-primary);
    --td-text-muted: var(--mud-palette-text-secondary);
    --td-text-subtle: var(--mud-palette-text-disabled);
    --td-border: var(--mud-palette-lines-default);
    --td-border-strong: var(--mud-palette-lines-inputs);

    --td-accent: var(--mud-palette-primary);
    --td-accent-strong: var(--mud-palette-primary-darken);
    --td-accent-soft: color-mix(in oklab, var(--mud-palette-primary) 12%, var(--mud-palette-surface));
    --td-accent-border: color-mix(in oklab, var(--mud-palette-primary) 35%, var(--mud-palette-lines-default));
    --td-on-accent: var(--mud-palette-primary-text);
    --td-focus: color-mix(in oklab, var(--mud-palette-primary) 65%, transparent);

    --td-success: var(--mud-palette-success);
    --td-success-soft: color-mix(in oklab, var(--mud-palette-success) 13%, var(--mud-palette-surface));
    --td-warning: var(--mud-palette-warning);
    --td-warning-soft: color-mix(in oklab, var(--mud-palette-warning) 15%, var(--mud-palette-surface));
    --td-danger: var(--mud-palette-error);
    --td-danger-soft: color-mix(in oklab, var(--mud-palette-error) 12%, var(--mud-palette-surface));
    --td-info: var(--mud-palette-info);
    --td-info-soft: color-mix(in oklab, var(--mud-palette-info) 13%, var(--mud-palette-surface));

    --td-nav-bg: var(--mud-palette-appbar-background);
    --td-nav-text: var(--mud-palette-appbar-text);
    --td-nav-muted: var(--mud-palette-drawer-icon);
    --td-nav-border: rgb(255 255 255 / .1);
    --td-nav-hover: rgb(255 255 255 / .08);
    --td-nav-active: rgb(255 255 255 / .13);
    --td-nav-indicator: #a493ea;
    --td-nav-border-strong: rgb(255 255 255 / .2);
    --td-nav-inset: rgb(0 0 0 / .12);
    --td-nav-active-ring: rgb(255 255 255 / .12);

    --td-avatar-bg: linear-gradient(180deg, #6753ae, #3b2d83);
    --td-avatar-ring: rgb(255 255 255 / .18);
    --td-avatar-text: #fff;
    --td-backdrop: color-mix(in oklab, #15131d 50%, transparent);

    /* Code, JSON, and console surfaces are dark in both themes. */
    --td-code-bg: #15131d;
    --td-code-toolbar: #1e1b2b;
    --td-code-border: #2c2840;
    --td-code-text: #e2deec;
    --td-code-muted: #968fad;
    --td-code-subtle: #6b6488;
    --td-code-control: #a8a1be;
    --td-code-control-hover: #fff;
    --td-code-accent: #a493ea;
    --td-code-property: #b7aae8;
    --td-code-info: #7fbdf0;
    --td-code-success: #8fd1a8;
    --td-code-warning: #e8b56b;
    --td-code-danger: #f0a3a3;
    --td-code-danger-soft: rgb(212 91 91 / .2);
    --td-code-live: #56a98a;
    --td-code-live-glow: rgb(86 169 138 / .2);
    --td-code-live-glow-faint: rgb(86 169 138 / .05);
    --td-code-hit-bg: rgb(232 181 107 / .28);
    --td-code-hit-outline: rgb(232 181 107 / .55);
    --td-code-hit-current-bg: #e8b56b;
    --td-code-hit-current-text: #15131d;

    --td-radius-sm: 5px;
    --td-radius-md: 7px;
    --td-radius-lg: 10px;
    --td-radius-xl: 14px;

    --td-shadow-sm: 0 1px 2px rgb(21 19 29 / .06);
    --td-shadow-md: 0 2px 4px -1px rgb(21 19 29 / .08), 0 8px 20px -12px rgb(21 19 29 / .18);
    --td-shadow-xl: 0 12px 40px -12px rgb(21 19 29 / .3);

    --td-space-1: .25rem;
    --td-space-2: .5rem;
    --td-space-3: .75rem;
    --td-space-4: 1rem;
    --td-space-5: 1.25rem;
    --td-space-6: 1.5rem;

    --td-appbar-height: 48px;
    --td-footer-height: 28px;
    --td-motion: .15s cubic-bezier(.4, 0, .2, 1);

    color-scheme: light;
}

:root[data-td-theme="dark"] {
    --td-nav-border: rgb(255 255 255 / .07);
    --td-nav-hover: rgb(255 255 255 / .05);
    --td-nav-active: rgb(149 133 216 / .16);
    --td-nav-indicator: #9585d8;
    --td-shadow-sm: 0 1px 2px rgb(0 0 0 / .3);
    --td-shadow-md: 0 2px 4px -1px rgb(0 0 0 / .4), 0 10px 24px -14px rgb(0 0 0 / .6);
    --td-shadow-xl: 0 16px 48px -12px rgb(0 0 0 / .7);
    color-scheme: dark;
}

html,
body {
    margin: 0;
    background: var(--td-page, #fbfafd);
    color: var(--td-text, #15131d);
    font-family: var(--td-font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

:focus-visible {
    outline: 2px solid var(--td-focus);
    outline-offset: 2px;
}

code,
kbd,
pre,
samp {
    font-family: var(--td-font-mono);
}

* {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in oklab, var(--td-text-subtle) 70%, transparent) transparent;
}

/* MudBlazor overrides shared by every screen. */
.mud-paper-outlined {
    border-color: var(--td-border);
}

.mud-button-root.mud-button {
    border-radius: var(--td-radius-md);
    box-shadow: none;
}

.mud-button-filled:hover {
    box-shadow: var(--td-shadow-sm);
}

.mud-popover.mud-paper {
    border: 1px solid var(--td-border);
    box-shadow: var(--td-shadow-xl);
}

.mud-dialog {
    border: 1px solid var(--td-border);
    border-radius: var(--td-radius-xl);
}

.mud-table-root .mud-table-head .mud-table-cell {
    color: var(--td-text-muted);
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.mud-input.mud-input-outlined .mud-input-slot,
.mud-select .mud-input-slot {
    font-size: .875rem;
}

.mud-input-control .mud-input-helper-text {
    font-size: .75rem;
}

/*
 * Popover content of shared components. MudBlazor renders popovers in MudPopoverProvider, outside the
 * owning component, so CSS isolation cannot reach these elements.
 */
.td-user-menu-popover .mud-list,
.td-theme-menu .mud-list {
    min-width: 13rem;
}

.td-user-menu-header {
    display: grid;
    gap: .125rem;
    padding: .5rem 1rem .625rem;
}

.td-theme-option {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

/* Tooltip detail of TdStatusChip. */
.td-status-chip-anchor {
    max-width: 100%;
}

.td-status-detail {
    display: grid;
    max-width: min(28rem, 80vw);
    gap: .375rem;
    padding: .25rem 0;
    font-size: .75rem;
    line-height: 1.4;
    text-align: left;
    overflow-wrap: anywhere;
}

.td-status-detail p,
.td-status-detail ul {
    margin: 0;
}

.td-status-detail ul {
    display: grid;
    gap: .25rem;
    padding-left: 1rem;
}

.td-status-detail code {
    font-family: var(--td-font-mono);
    font-size: .6875rem;
}

.td-status-detail small {
    opacity: .8;
}

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

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}

.td-button-progress {
    width: 1rem !important;
    height: 1rem !important;
    margin-right: .5rem;
    color: currentColor;
}