/* ============================================================
   Per-Fin — Stitch dark-navy fintech theme
   Re-skins Radzen (material-dark) + adds custom shell utilities.
   ============================================================ */

/* ------------------------------------------------------------
   ONE palette, two vocabularies.

   The app grew two token sets: --pf-* (which drives every Radzen component through the
   --rz-* overrides below) and the MD3-style semantic set further down (--surface-container,
   --on-surface-variant, …) which drives all the hand-built cash-flow cards. They were near
   duplicates that had drifted apart, so a Radzen dialog rendered navy (#242F46) while the
   MoneyBox inside it rendered neutral grey (#272a31) — two hue families on one screen.

   The semantic set is now the single source of truth (it covers the larger surface area and
   carries proper roles), and every --pf-* name is an alias onto it. Both vocabularies still
   work, so no markup had to change, but there is now exactly one place a colour is decided.
   ------------------------------------------------------------ */
:root {
    --pf-bg: var(--background);
    --pf-surface: var(--surface-container);        /* card / panel surface */
    --pf-surface-2: var(--surface-container-high); /* elevated: dialogs, popovers */
    --pf-surface-3: var(--surface-container-highest);
    --pf-border: var(--outline-variant);           /* hairline borders */
    --pf-border-soft: var(--outline-variant);
    --pf-text: var(--foreground);
    --pf-text-dim: var(--on-surface-variant);
    --pf-primary: var(--primary-container);        /* bright blue (fills) */
    --pf-primary-soft: var(--primary);             /* light blue (text/icons) */
    --pf-success: var(--secondary);
    --pf-danger: var(--tertiary);
    --pf-warning: var(--warning);
}

/* ---------- Radzen variable overrides ---------- */
:root,
body .rz-theme-material-dark,
body {
    --rz-body-background-color: var(--pf-bg);
    --rz-base-background-color: var(--pf-bg);
    --rz-body-color: var(--pf-text);
    --rz-text-color: var(--pf-text);
    --rz-text-title-color: var(--pf-text);
    --rz-text-secondary-color: var(--pf-text-dim);
    --rz-text-tertiary-color: var(--pf-text-dim);
    --rz-text-disabled-color: var(--pf-text-dim);
    --rz-on-surface: var(--pf-text);

    --rz-primary: var(--pf-primary);
    --rz-primary-light: #6ea4ff;
    --rz-primary-lighter: rgba(77, 142, 255, 0.16);
    --rz-primary-dark: #2f6fe0;
    --rz-primary-darker: #1f5bc6;

    --rz-success: var(--pf-success);
    --rz-success-light: #6ffbbe;
    --rz-danger: var(--pf-danger);
    --rz-danger-light: #ffd0ca;
    --rz-warning: var(--pf-warning);
    --rz-info: var(--pf-primary);

    --rz-card-background-color: var(--pf-surface);
    --rz-card-color: var(--pf-text);
    --rz-panel-background-color: var(--pf-surface);

    --rz-base-50: var(--surface-container-lowest);
    --rz-base-100: var(--surface-container-low);
    --rz-base-200: var(--surface-container);
    --rz-base-300: var(--surface-container-high);
    --rz-border-color: var(--pf-border);

    --rz-input-background-color: var(--surface-container-low);
    --rz-input-color: var(--pf-text);
    --rz-input-border: 1px solid var(--pf-border);
    --rz-input-placeholder-color: var(--pf-text-dim);

    --rz-dialog-background-color: var(--pf-surface-2);
    --rz-dialog-title-background-color: var(--pf-surface-2);
    --rz-dialog-title-color: var(--pf-text);
    --rz-dialog-border-radius: 1rem;
    --rz-dropdown-open-background-color: var(--pf-surface-2);
    --rz-menu-background-color: var(--pf-surface-2);

    /* chart series */
    --rz-series-1: #4d8eff;
    --rz-series-2: #4edea3;
    --rz-series-3: #ffb3ad;
    --rz-series-4: #adc6ff;
    --rz-series-5: #ffd27a;
}

/* ---------- Base ---------- */
/* Tailwind preflight is disabled (to coexist with Radzen), so restore the one
   reset we rely on: border-box sizing so padding doesn't inflate element height. */
*, *::before, *::after { box-sizing: border-box; }

html, body {
    background-color: var(--pf-bg) !important;
    color: var(--pf-text);
    font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* Sidebar nav list reset (no preflight → kill default disc bullets + indent) */
nav ul { list-style: none; margin: 0; padding: 0; }
nav li { margin: 0; padding: 0; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--surface-container-highest); border-radius: 9999px; border: 2px solid var(--pf-bg); }
::-webkit-scrollbar-thumb:hover { background: var(--outline); }

/* ---------- Custom shell utilities ---------- */
.glass-panel {
    background: color-mix(in oklab, var(--surface-container) 72%, transparent);
    backdrop-filter: blur(12px);
    border: 1px solid var(--pf-border);
    border-radius: 1rem;
}

.pf-page-title {
    font-family: "Hanken Grotesk", sans-serif;
    font-weight: 600;
    font-size: 1.75rem;
    line-height: 2.25rem;
    letter-spacing: -0.01em;
    color: var(--pf-text);
    margin: 0;
}

.pf-mono { font-family: "JetBrains Mono", monospace; }

.pf-card {
    background: color-mix(in oklab, var(--surface-container) 72%, transparent);
    backdrop-filter: blur(12px);
    border: 1px solid var(--pf-border);
    border-radius: 1rem;
    padding: 1.5rem;
}
.pf-card-title {
    font-family: "Hanken Grotesk", sans-serif;
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--pf-text);
    margin: 0 0 1rem 0;
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    user-select: none;
}

/* ---------- Radzen component polish ---------- */
.rz-card {
    background: var(--pf-surface) !important;
    border: 1px solid var(--pf-border) !important;
    border-radius: 1rem !important;
    color: var(--pf-text) !important;
}

/* DataGrid */
.rz-datatable, .rz-data-grid, .rz-grid-table {
    background: transparent !important;
    color: var(--pf-text) !important;
}
.rz-datatable .rz-datatable-thead > tr > th,
.rz-grid-table thead th,
.rz-grid-table thead .rz-column-title {
    background: color-mix(in oklab, var(--surface-container) 60%, transparent) !important;
    border-color: var(--pf-border) !important;
}
.rz-grid-table thead th,
.rz-column-title,
.rz-column-title-content,
.rz-grid-table thead th .rz-cell-data,
.rz-sortable-column .rz-column-title {
    color: var(--pf-text-dim) !important;
    text-transform: uppercase;
    font-size: 0.72rem !important;
    letter-spacing: 0.05em;
    font-weight: 600;
}
.rz-grid-table thead th .rz-sortable-column-icon,
.rz-grid-table thead th .notranslate { color: var(--pf-text-dim) !important; }
.rz-datatable .rz-data-row > td,
.rz-grid-table tbody td {
    border-color: var(--pf-border) !important;
    background: transparent !important;
}
.rz-datatable .rz-data-row:hover > td,
.rz-grid-table tbody tr:hover td {
    background: rgba(54, 57, 65, 0.3) !important;
}

/* Buttons keep Radzen behavior but pick up new primary via vars */
.rz-button.rz-primary { color: #ffffff !important; }

/* Inputs / dropdowns */
.rz-textbox, .rz-dropdown, .rz-numeric, .rz-datepicker, .rz-textarea, .rz-lookup {
    background: var(--surface-container-low) !important;
    border: 1px solid var(--pf-border) !important;
    color: var(--pf-text) !important;
    border-radius: 0.5rem !important;
}
/* Dropdown popup panel, dialog background/radius, dropdown search filter, and the
   .pf-needs-transfer / .pf-header-selector variants now live in the shared
   PerFinance.UI stylesheet (pf-theme-shared.css) so both Web and the MAUI App
   pick them up from one place. */

/* Badges */
.rz-badge.rz-success { background: rgba(78, 222, 163, 0.16) !important; color: var(--pf-success) !important; }
.rz-badge.rz-danger { background: rgba(255, 180, 171, 0.16) !important; color: var(--pf-danger) !important; }

/* Notifications */
.rz-notification { background: var(--pf-surface-2) !important; border: 1px solid var(--pf-border) !important; }

/* ---------- Sidebar nav links ---------- */
.pf-nav {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 1rem;
    border-radius: 0.6rem;
    color: var(--pf-text-dim);
    font-weight: 500;
    font-size: 0.92rem;
    text-decoration: none;
    border-right: 3px solid transparent;
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
    -webkit-tap-highlight-color: transparent;
}
.pf-nav:hover { background: rgba(54, 57, 65, 0.45); color: var(--pf-text); }
.pf-nav:active { transform: scale(0.97); background: rgba(54, 57, 65, 0.65); }
.pf-nav .material-symbols-outlined { font-size: 22px; }
.pf-nav-active {
    color: var(--pf-primary-soft);
    font-weight: 600;
    background: rgba(77, 142, 255, 0.12);
    border-right-color: var(--pf-primary);
}
.pf-dropzone {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 1.4rem;
    border: 1px dashed var(--pf-border);
    border-radius: 0.7rem;
    color: var(--pf-text-dim);
    font-size: 0.85rem;
    text-align: center;
    background: var(--pf-surface-2);
}
.pf-dropzone:hover { border-color: var(--pf-primary); }
.pf-dropzone input[type=file] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}
.pf-ratio { padding: 0.5rem 0.75rem; background: var(--pf-surface-2); border-radius: 0.4rem; }
.pf-clickable { cursor: pointer; transition: transform 0.1s ease, background-color 0.15s ease; }
.pf-clickable:hover { background: var(--pf-surface-2); }
.pf-nav-section {
    margin: 1rem 0 0.25rem;
    padding: 0 1rem;
    color: var(--pf-text-dim);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ---------- Workspace switcher (Invest ⇄ Budget) ---------- */
.pf-workspace-switch {
    display: flex;
    gap: 0.25rem;
    padding: 0.25rem;
    background: var(--pf-bg);
    border: 1px solid var(--pf-border);
    border-radius: 9999px;
}
.pf-ws-pill {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.5rem 0.75rem;
    border: none;
    background: transparent;
    color: var(--pf-text-dim);
    font-family: "Hanken Grotesk", sans-serif;
    font-weight: 600;
    font-size: 0.85rem;
    border-radius: 9999px;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.pf-ws-pill:hover { color: var(--pf-text); }
.pf-ws-pill .material-symbols-outlined { font-size: 20px; }
.pf-ws-active {
    background: var(--pf-primary);
    color: #ffffff;
}
.pf-ws-active:hover { color: #ffffff; }

/* ---------- Animations ---------- */
@keyframes pf-spin { to { transform: rotate(360deg); } }
.pf-spin { animation: pf-spin 1s linear infinite; }

/* ============================================================
   Design tokens ported from the Lovable prototype.
   These power the Tailwind arbitrary-value classes used by the
   custom (non-Radzen) budget cards, e.g. bg-[var(--surface-container)].
   ============================================================ */
:root {
    --background: #0B1220;
    --foreground: #e1e2ec;
    --surface: #10131a;
    --surface-container-lowest: #0b0e15;
    --surface-container-low: #191b23;
    --surface-container: #1d2027;
    --surface-container-high: #272a31;
    --surface-container-highest: #32353c;
    --on-surface-variant: #c2c6d6;
    --outline: #8c909f;
    --outline-variant: #424754;
    --primary: #adc6ff;
    --primary-container: #4d8eff;
    --on-primary: #002e6a;
    --secondary: #4edea3;
    --tertiary: #ffb3ad;
    --positive: #19c37d;
    --negative: #ef4444;
    --warning: #f5b544;
}

/* Tabular figures so amounts align in columns. */
.pf-mono, .font-mono, code, kbd, samp {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum", "zero";
}

/* CTA glow + processing pulse (FAB). */
.shadow-glow-primary {
    box-shadow:
        0 8px 24px -8px color-mix(in oklab, var(--primary-container) 60%, transparent),
        0 0 0 1px color-mix(in oklab, var(--primary) 25%, transparent);
}
.pulse-glow { animation: pulseGlow 2s ease-in-out infinite; }
@keyframes pulseGlow {
    0%, 100% {
        box-shadow:
            0 8px 24px -8px color-mix(in oklab, var(--primary-container) 60%, transparent),
            0 0 0 0 color-mix(in oklab, var(--primary-container) 50%, transparent);
    }
    50% {
        box-shadow:
            0 8px 32px -4px color-mix(in oklab, var(--primary-container) 80%, transparent),
            0 0 0 12px color-mix(in oklab, var(--primary-container) 0%, transparent);
    }
}

/* Floating credit-card hero. */
@keyframes cardFloat {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50% { transform: translateY(-6px) rotate(-1deg); }
}
.card-float { animation: cardFloat 6s ease-in-out infinite; }

/* Quick-add account buttons. */
.pf-quick-add { transition: background-color 0.15s ease; }
.pf-quick-add:hover { background: var(--surface-container-high) !important; }

/* Loading shimmer. */
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
.skeleton {
    background: linear-gradient(90deg, var(--surface-container) 0%, var(--surface-container-high) 50%, var(--surface-container) 100%);
    background-size: 200% 100%;
    animation: shimmer 1.6s linear infinite;
}

/* ============================================================
   Settings system
   Grouped, collapsible sections with one consistent row shape. Every value uses the same
   label/description/control geometry, so the page reads as one system rather than a pile of
   individually-styled controls.
   ============================================================ */

.pf-set-section {
    border: 1px solid var(--outline-variant);
    border-radius: 1rem;
    background: var(--surface-container);
    overflow: hidden;
    margin-bottom: 0.75rem;
}

/* Consequential actions are tinted so the section reads as different in kind before it is read
   as different in content. */
.pf-set-section.pf-set-danger {
    border-color: color-mix(in oklab, var(--negative) 35%, var(--outline-variant));
}

.pf-set-head {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    width: 100%;
    padding: 1rem 1.1rem;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    color: var(--foreground);
    font: inherit;
}

.pf-set-head:hover { background: var(--surface-container-high); }

/* Keyboard focus must be as visible as hover, or the section header is unusable without a mouse. */
.pf-set-head:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}

.pf-set-head-icon {
    font-size: 20px;
    color: var(--primary);
    flex: 0 0 auto;
}

.pf-set-head-text { flex: 1 1 auto; min-width: 0; }

.pf-set-head-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    font-weight: 600;
}

.pf-set-head-desc {
    display: block;
    font-size: 0.78rem;
    color: var(--on-surface-variant);
    margin-top: 0.15rem;
}

.pf-set-chevron {
    font-size: 22px;
    color: var(--on-surface-variant);
    flex: 0 0 auto;
    transition: transform 0.18s ease-out;
}

.pf-set-chevron-open { transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
    .pf-set-chevron { transition: none; }
}

.pf-set-body {
    padding: 0.25rem 1.1rem 0.4rem;
    border-top: 1px solid var(--outline-variant);
}

/* A pending edit, called out in both the row and its section header. */
.pf-set-badge {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    background: color-mix(in oklab, var(--primary) 18%, transparent);
    color: var(--primary);
    white-space: nowrap;
}

.pf-set-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.9rem 0;
    border-bottom: 1px solid color-mix(in oklab, var(--outline-variant) 55%, transparent);
}

.pf-set-row:last-child { border-bottom: none; }

.pf-set-row-text { flex: 1 1 auto; min-width: 0; }

.pf-set-row-name {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
}

.pf-set-row-desc {
    font-size: 0.78rem;
    color: var(--on-surface-variant);
    margin-top: 0.15rem;
    line-height: 1.4;
}

.pf-set-row-control { flex: 0 0 auto; }

/* Below ~560px a side-by-side row leaves the control a sliver, so the row stacks and the control
   takes the full width it needs to stay usable with a thumb. */
@media (max-width: 560px) {
    .pf-set-row {
        flex-direction: column;
        align-items: stretch;
        gap: 0.6rem;
    }

    .pf-set-row-control { width: 100%; }
    .pf-set-row-control .rz-dropdown,
    .pf-set-row-control .rz-textbox { width: 100% !important; }
}

/* The save bar. Sticks to the bottom of the viewport while there are unsaved edits so the action
   is reachable without scrolling back down a long page. */
.pf-set-savebar {
    position: sticky;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.85rem 1rem;
    margin-top: 1rem;
    border: 1px solid var(--outline-variant);
    border-radius: 1rem;
    background: color-mix(in oklab, var(--surface-container-high) 94%, transparent);
    backdrop-filter: blur(10px);
    z-index: 5;
}

.pf-set-savebar-text {
    flex: 1 1 auto;
    font-size: 0.82rem;
    color: var(--on-surface-variant);
    min-width: 8rem;
}

/* Sign-out is a form POST on the web and a button on mobile; this keeps the two visually identical
   so the platform difference never surfaces to the user. */
.pf-signout-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.9rem;
    border-radius: 0.5rem;
    border: 1px solid color-mix(in oklab, var(--negative) 45%, transparent);
    background: color-mix(in oklab, var(--negative) 10%, transparent);
    color: var(--negative);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}

.pf-signout-btn:hover { background: color-mix(in oklab, var(--negative) 18%, transparent); }

.pf-signout-btn:focus-visible {
    outline: 2px solid var(--negative);
    outline-offset: 2px;
}

/* ============================================================
   Search field
   Debounced search applies on its own ~300ms after typing stops, but with no icon and no activity
   cue that pause reads as "nothing happened", and users reach for Enter to force it. The icon gives
   the field an obvious purpose, swapping it for a spinner shows the search is actually running, and
   the clear button makes getting back to the full list a single click.
   ============================================================ */
.pf-search {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 220px;
    min-width: 200px;
}

.pf-search .rz-textbox {
    width: 100%;
    padding-left: 2.1rem !important;
    padding-right: 2rem !important;
}

.pf-search-icon {
    position: absolute;
    left: 0.6rem;
    font-size: 18px !important;
    color: var(--on-surface-variant);
    pointer-events: none;
    z-index: 1;
}

/* Reuses the app's existing spin keyframe so the searching state matches every other busy
   indicator rather than introducing a second motion language. */
.pf-search-icon.pf-searching { color: var(--primary); }

.pf-search-clear {
    position: absolute;
    right: 0.45rem;
    display: inline-grid;
    place-items: center;
    height: 1.35rem;
    width: 1.35rem;
    border: none;
    border-radius: 9999px;
    background: transparent;
    color: var(--on-surface-variant);
    cursor: pointer;
    padding: 0;
    z-index: 1;
}

.pf-search-clear:hover {
    background: var(--surface-container-highest);
    color: var(--foreground);
}

.pf-search-clear:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
}

/* ============================================================
   Assistant: a docked header icon (in MainLayout) that opens the drawer below. Replaces a FAB that
   floated over the user's own figures on every page - a full-strength gradient button pulling the
   eye away from the numbers the page exists to show.

   Slides on `right`, not `transform`: a class-toggled `transform` on this `position:fixed` panel
   measurably never took visual effect in testing (reproduced with forced values and !important - the
   computed transform stuck at its starting value and never advanced), while `right` did not have that
   problem. `left:auto` guards against another rule elsewhere constraining both left and right on a
   fixed element, which would make the browser ignore whichever `right` value is set - -400px
   comfortably clears the drawer's own 400px max width at any narrower viewport too.

   No transition, deliberately. Root cause of the stuck-transform symptom above: while a CSS transition
   is actively running, the browser gives its interpolated value cascade priority over the destination
   rule even when that rule is !important (this is correct, specified behavior in general - it's what
   lets an in-flight animation keep playing smoothly rather than snapping to a competing style
   mid-flight). Something about this specific panel left that transition perpetually "in progress" and
   never reaching its end value - reproduced at both mobile and desktop widths, so this is not a
   narrow-viewport quirk - and every override attempt kept losing to a transition that was never going
   to finish. No slide animation is worth a panel the user cannot open.
   ============================================================ */
.pf-chat-drawer {
    left: auto !important;
    right: -400px;
}

.pf-chat-drawer-open {
    right: 0;
}

@media (max-width: 480px) {
    .pf-chat-drawer { width: 100vw !important; }
}

.pf-assistant-header-btn {
    position: relative;
}

.pf-assistant-header-btn.pf-assistant-active::after {
    content: "";
    position: absolute;
    top: 0.35rem;
    right: 0.35rem;
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 9999px;
    background: var(--primary);
}

/* ---------- "Did you know" insight panel ----------
   The panel rotates on its own, so the transition has to be quiet enough to notice without
   pulling the eye off whatever the user was actually reading. */
.pf-insight-body {
    animation: pf-insight-in 0.32s ease-out;
}

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

.pf-insight-icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 9999px;
}

.pf-insight-nav {
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border: none;
    border-radius: 9999px;
    background: transparent;
    color: var(--on-surface-variant);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.pf-insight-nav:hover {
    background: var(--surface-container-highest);
    color: var(--foreground);
}

.pf-insight-nav:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.pf-insight-action {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    margin-top: 0.5rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
}

.pf-insight-action:hover { text-decoration: underline; }

.pf-insight-dot {
    width: 0.4rem;
    height: 0.4rem;
    padding: 0;
    border: none;
    border-radius: 9999px;
    background: var(--outline-variant);
    cursor: pointer;
    transition: background 0.2s, width 0.2s;
}

.pf-insight-dot.active {
    width: 1.1rem;
    background: var(--primary);
}

.pf-insight-dot:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .pf-insight-body { animation: none; }
    .pf-insight-dot { transition: none; }
}

/* ---------- Account cards on Accounts — clickable through to filtered transactions ---------- */
.pf-account-card {
    transition: border-color 0.15s, background 0.15s;
}

.pf-account-card:hover {
    border-color: var(--primary);
}

.pf-account-card:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* ---------- Forecast money: predicted must never look like it already happened ---------- */
.pf-forecast-row {
    border-left: 2px dashed var(--warning);
}

/* ---------- Generic status chip: same pill shape as the forecast chip, tone-parameterized for
   anywhere a short, colour-coded fact needs to sit inline (credit available, a due date, ...). ---------- */
.pf-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 10px;
    font-weight: 600;
    padding: 0.2rem 0.55rem;
    border-radius: 9999px;
    white-space: nowrap;
    flex: 0 0 auto;
}

.pf-chip-positive { background: color-mix(in oklab, var(--positive) 16%, transparent); color: var(--positive); }
.pf-chip-warning { background: color-mix(in oklab, var(--warning) 16%, transparent); color: var(--warning); }
.pf-chip-negative { background: color-mix(in oklab, var(--negative) 16%, transparent); color: var(--negative); }
.pf-chip-neutral { background: var(--surface-container-highest); color: var(--on-surface-variant); }

.pf-forecast-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.15rem 0.45rem;
    border-radius: 9999px;
    background: color-mix(in oklab, var(--warning) 18%, transparent);
    color: var(--warning);
    flex: 0 0 auto;
    white-space: nowrap;
}