/*
   Countertop Office surgical delight layer.

   Scope: a handful of earned moments. Completion feedback, recoverable errors,
   first-paint settle, and tactile button + focus polish. Nothing decorative,
   nothing announced. The work surfaces stay calm; only the moments are warm.

   All motion respects prefers-reduced-motion. Curves use the workbench
   ease-out variable defined in house.css. No bounce, no elastic, no glow.
*/

:root {
    --ease-out-quart: cubic-bezier(.25, 1, .5, 1);
    --ease-out-expo: cubic-bezier(.16, 1, .3, 1);
}

/* ---------------------------------------------------------------------------
   1. Button press: the workbench "stamp" feel.
   The filled primary already has an inset bottom highlight; on press we
   sink it 1px and tighten the inset so it reads as a physical press.
--------------------------------------------------------------------------- */

.mud-button-root {
    transition:
        transform 120ms var(--ease-out-quart),
        background-color 160ms var(--ease-out-quart),
        border-color 160ms var(--ease-out-quart),
        box-shadow 160ms var(--ease-out-quart);
}

/* MudSwitch / MudCheckbox reuse the .mud-button-root .mud-icon-button classes
   on their internal sliding thumb element (.mud-switch-base). The button press
   transforms below would override the thumb's own translate and make the toggle
   visibly jump/flicker on click, so exclude those control bases. */
.mud-button-root:active:not([disabled]):not(.mud-switch-base) {
    transform: translateY(1px);
}

.mud-button-filled.mud-button-filled-primary:active:not([disabled]) {
    box-shadow: inset 0 -1px 0 color-mix(in oklch, var(--brand-strong), black 14%) !important;
}

.mud-icon-button {
    transition:
        background-color 140ms var(--ease-out-quart),
        color 140ms var(--ease-out-quart),
        transform 120ms var(--ease-out-quart);
}

.mud-icon-button:active:not([disabled]):not(.mud-switch-base) {
    transform: scale(.94);
}

/* Nav-link active state already has the inset bottom shadow; tighten on click. */
.mud-drawer .mud-nav-link {
    transition:
        background-color 160ms var(--ease-out-quart),
        border-color 160ms var(--ease-out-quart),
        color 160ms var(--ease-out-quart);
}

/* ---------------------------------------------------------------------------
   2. Focus ring: already defined in house.css. Add a gentle settle so
   keyboard users feel the ring land instead of snap.
--------------------------------------------------------------------------- */

.mud-button-root,
.mud-icon-button,
.mud-nav-link,
.app-brand-block,
.mud-input-control,
.stat-card,
.mud-list-item {
    transition-property:
        background-color, border-color, color, box-shadow, transform, outline-color;
    transition-duration: 160ms;
    transition-timing-function: var(--ease-out-quart);
}

/* ---------------------------------------------------------------------------
   3. Snackbar polish: cosmetics only. We deliberately do NOT animate the
   snackbar ourselves — MudBlazor already owns the show/hide transition. A
   second keyframe animation here (especially with fill-mode: both) pins the
   toast at full opacity and fights the library's dismiss fade, which reads as
   a flicker on appear and disappear. Style the surface; leave motion to Mud.
--------------------------------------------------------------------------- */

.mud-snackbar {
    box-shadow: var(--shadow-2), var(--shadow-inset) !important;
    overflow: hidden;
    position: relative;
}

.mud-snackbar::before {
    background: var(--ink-soft);
    content: "";
    height: 3px;
    inset: 0 0 auto 0;
    position: absolute;
    width: auto;
}

.mud-snackbar.mud-alert-filled-success::before,
.mud-snackbar.mud-alert-text-success::before {
    background: var(--ok);
}

.mud-snackbar.mud-alert-filled-warning::before,
.mud-snackbar.mud-alert-text-warning::before {
    background: var(--warn);
}

.mud-snackbar.mud-alert-filled-error::before,
.mud-snackbar.mud-alert-text-error::before {
    background: var(--bad);
}

.mud-snackbar.mud-alert-filled-info::before,
.mud-snackbar.mud-alert-text-info::before {
    background: var(--info);
}

/* ---------------------------------------------------------------------------
   4. Status chip: a quiet "this is settled" treatment on Paid / Success.
   No animation per render; the inset highlight reads as a stamped finish.
--------------------------------------------------------------------------- */

.mud-chip.mud-chip-color-success,
.mud-chip.mud-chip-filled.mud-chip-color-success {
    background: var(--ok-soft) !important;
    box-shadow: inset 0 -1px 0 color-mix(in oklch, var(--ok), transparent 70%);
    color: var(--ok) !important;
}

.mud-chip.mud-chip-color-warning,
.mud-chip.mud-chip-filled.mud-chip-color-warning {
    background: var(--warn-soft) !important;
    box-shadow: inset 0 -1px 0 color-mix(in oklch, var(--warn), transparent 70%);
    color: var(--warn) !important;
}

.mud-chip.mud-chip-color-error,
.mud-chip.mud-chip-filled.mud-chip-color-error {
    background: var(--bad-soft) !important;
    box-shadow: inset 0 -1px 0 color-mix(in oklch, var(--bad), transparent 70%);
    color: var(--bad) !important;
}

.mud-chip.mud-chip-color-info,
.mud-chip.mud-chip-filled.mud-chip-color-info {
    background: var(--info-soft) !important;
    box-shadow: inset 0 -1px 0 color-mix(in oklch, var(--info), transparent 70%);
    color: var(--info) !important;
}

/* ---------------------------------------------------------------------------
   5. Skeleton shimmer: current MudSkeleton is a flat block. Add a warm,
   slow ledger-paper sweep so loading feels like the records are settling
   in, not stalling. Curve and pace are tuned to be near-subliminal.
--------------------------------------------------------------------------- */

.mud-skeleton {
    background:
        linear-gradient(
            90deg,
            color-mix(in oklch, var(--surface-tint), var(--surface) 45%) 0%,
            color-mix(in oklch, var(--surface-tint), white 18%) 50%,
            color-mix(in oklch, var(--surface-tint), var(--surface) 45%) 100%
        ) !important;
    background-size: 220% 100% !important;
    animation: workbench-skeleton-sweep 1600ms linear infinite;
    border: 1px solid var(--line-soft);
    border-radius: var(--r-sm) !important;
}

@keyframes workbench-skeleton-sweep {
    from { background-position: 120% 0; }
    to   { background-position: -120% 0; }
}

/* ---------------------------------------------------------------------------
   6. First-paint settle: pages fade in over 180ms. This catches the
   moment Blazor swaps loaded content in, so users feel records "arrive"
   instead of flash-cut. Only applies to the main scrollable region, not
   modals (which already animate) or the topbar/sidebar (which persist).
--------------------------------------------------------------------------- */

.app-shell .mud-main-content > * {
    animation: workbench-content-in 220ms var(--ease-out-quart) both;
}

@keyframes workbench-content-in {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* ---------------------------------------------------------------------------
   7. Stat / feature card hover: micro-lift on the card itself, not the
   transient ones (which can cause layout twitch on data dashboards).
   Cards already shift border + shadow on hover; we add a hair of
   translateY so the workbench feels physical without bouncing.
--------------------------------------------------------------------------- */

.feature-block,
.feature-card,
.highlight-item,
.plan-card {
    transition:
        transform 180ms var(--ease-out-quart),
        border-color 180ms var(--ease-out-quart),
        background 180ms var(--ease-out-quart),
        box-shadow 180ms var(--ease-out-quart);
    will-change: transform;
}

.feature-block:hover,
.feature-card:hover,
.highlight-item:hover {
    transform: translateY(-1px);
}

/* The data dashboard stat-cards are clickable but we don't want them to
   jump under a cursor scanning across a row. Keep them still. */

/* ---------------------------------------------------------------------------
   8. Table row hover already exists; add a gentle 100ms cross-fade so the
   eucalyptus wash arrives instead of snap-paints. Helps with dense tables.
--------------------------------------------------------------------------- */

.mud-table-row > .mud-table-cell,
.mud-data-grid .mud-table-row > .mud-table-cell {
    transition: background-color 120ms var(--ease-out-quart);
}

/* MudDataGrid / MudTable empty-row treatment. The library renders a single
   row with the "no records" text; we promote it into a calm centred block
   with a circular surface mark, so empty list pages feel intentional rather
   than unfinished. Pure CSS so every grid in the app benefits without each
   page wiring NoRecordsContent. The :hover override stops the eucalyptus
   wash applying to an empty row. */

.mud-table-row.mud-table-empty-row > .mud-table-cell,
.mud-data-grid .mud-table-row.mud-table-empty-row > .mud-table-cell {
    background: color-mix(in oklch, var(--surface), var(--surface-tint) 35%) !important;
    border-bottom: none !important;
    color: var(--ink-muted) !important;
    font-size: var(--fs-3) !important;
    height: auto !important;
    padding: 44px 24px !important;
    text-align: center !important;
}

.mud-table-row.mud-table-empty-row > .mud-table-cell {
    position: relative;
}

/* Centered surface-tint disc with a ledger-sheet glyph cut into it. We draw
   the disc with a radial gradient (so it stays solid) and the icon with a
   mask, then composite both onto the same pseudo-element. */
.mud-table-row.mud-table-empty-row > .mud-table-cell::before {
    background: color-mix(in oklch, var(--surface-tint), var(--brand-wash) 45%);
    border: 1px solid var(--line-soft);
    border-radius: 50%;
    box-shadow: var(--shadow-inset);
    content: "";
    display: block;
    height: 44px;
    margin: 0 auto 10px;
    width: 44px;
}

.mud-table-row.mud-table-empty-row > .mud-table-cell::after {
    background-color: var(--ink-soft);
    content: "";
    display: block;
    height: 44px;
    margin: -54px auto 10px;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6Zm-1 7V3.5L18.5 9H13Z'/></svg>") center / 20px 20px no-repeat;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6Zm-1 7V3.5L18.5 9H13Z'/></svg>") center / 20px 20px no-repeat;
    width: 44px;
}

.mud-table-row.mud-table-empty-row:hover > .mud-table-cell {
    background: color-mix(in oklch, var(--surface), var(--surface-tint) 35%) !important;
}

/* ---------------------------------------------------------------------------
   9. Dashboard "all clear" treatment: when the hero narrative reports
   no outstanding balances, the eyebrow gains a small ok-tinted mark.
   This is the only earned celebratory moment in the product surface.
--------------------------------------------------------------------------- */

.house-hero[data-state="clear"] {
    background:
        radial-gradient(circle at 88% 18%, color-mix(in oklch, var(--ok-soft), transparent 35%), transparent 38%),
        linear-gradient(135deg, var(--surface) 0%, var(--brand-wash) 62%, color-mix(in oklch, var(--accent-soft), var(--surface) 52%) 100%);
}

.house-hero[data-state="clear"] .house-hero-eyebrow::after {
    background: var(--ok);
    border-radius: 50%;
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--ok), transparent 78%);
    content: "";
    display: inline-block;
    height: 7px;
    margin-left: 8px;
    vertical-align: 2px;
    width: 7px;
}

/* Topbar quick-create menu: workbench dressing for the popover.
   The activator button uses the existing topbar-primary-action class for
   visibility rules; the popover gets its own class so we can scope spacing
   and the icon color without bleeding into other MudMenus. */

.topbar-quick-create-popover.mud-popover {
    background: var(--surface) !important;
    border: 1px solid var(--ledger-rule) !important;
    border-radius: var(--r-md) !important;
    box-shadow: var(--shadow-2), var(--shadow-inset) !important;
    min-width: 240px;
    padding: 6px;
}

.topbar-quick-create-popover .mud-list-item {
    border-radius: var(--r-sm);
    color: var(--ink) !important;
    font-family: var(--font-nav);
    font-weight: 760;
    margin: 2px 0;
    min-height: 38px;
    padding: 8px 12px;
}

.topbar-quick-create-popover .mud-list-item:hover {
    background: var(--brand-wash) !important;
}

.topbar-quick-create-popover .mud-list-item .mud-list-item-icon {
    color: var(--brand-strong) !important;
    margin-right: 10px;
    min-width: 0;
}

.topbar-quick-create-popover .mud-divider {
    border-color: var(--line-soft);
    margin: 4px 2px;
}

/* ---------------------------------------------------------------------------
   10. Link affordance: a 1px underline that settles in on hover, instead
   of being permanent or popping abruptly. Affects in-text links only.
--------------------------------------------------------------------------- */

.mud-link {
    text-decoration-color: transparent;
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    transition: text-decoration-color 140ms var(--ease-out-quart);
}

.mud-link:hover {
    text-decoration-color: currentColor;
}

/* ---------------------------------------------------------------------------
   11. Empty-list block: used by dashboard panels. Soften the icon and
   give the copy room so empty states feel intentional, not unfinished.
--------------------------------------------------------------------------- */

.dashboard-board .mud-list .pa-6.d-flex.flex-column.align-center {
    gap: 4px;
    padding: 28px 18px !important;
}

.dashboard-board .mud-list .pa-6.d-flex.flex-column.align-center .mud-icon-root {
    background: color-mix(in oklch, var(--surface-tint), var(--brand-wash) 35%);
    border: 1px solid var(--line-soft);
    border-radius: 50%;
    box-shadow: var(--shadow-inset);
    color: var(--ink-soft) !important;
    font-size: 1.6rem !important;
    height: 52px;
    padding: 14px;
    width: 52px;
}

/* ---------------------------------------------------------------------------
   12. Reduced motion: strip every animation back to instant. Hover state
   changes still apply, just without transitions.
--------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .mud-button-root,
    .mud-icon-button,
    .mud-nav-link,
    .mud-link,
    .mud-snackbar,
    .mud-skeleton,
    .mud-table-row > .mud-table-cell,
    .feature-block,
    .feature-card,
    .highlight-item,
    .plan-card,
    .app-shell .mud-main-content > * {
        animation: none !important;
        transition: none !important;
    }

    .mud-button-root:active:not([disabled]),
    .mud-icon-button:active:not([disabled]),
    .feature-block:hover,
    .feature-card:hover,
    .highlight-item:hover {
        transform: none !important;
    }
}