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

:root {
    /* Palette (from the Stitch design system) */
    --pf-bg: #0B1220;            /* app background (base) */
    --pf-surface: #1A2336;       /* card / panel surface */
    --pf-surface-2: #242F46;     /* elevated: dialogs, popovers */
    --pf-surface-3: #2a3450;     /* hover */
    --pf-border: #2D3748;        /* hairline borders */
    --pf-border-soft: #424754;
    --pf-text: #F8FAFC;          /* primary text */
    --pf-text-dim: #aab6cc;      /* secondary text (raised for legibility on dark navy) */
    --pf-primary: #4d8eff;       /* bright blue (fills) */
    --pf-primary-soft: #adc6ff;  /* light blue (text/icons) */
    --pf-success: #4edea3;
    --pf-danger: #ffb4ab;
    --pf-warning: #ffd27a;
}

/* ---------- 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: #11192b;
    --rz-base-100: #16203a;
    --rz-base-200: #1c2945;
    --rz-base-300: #243150;
    --rz-border-color: var(--pf-border);

    --rz-input-background-color: #11192b;
    --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-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: #2a3450; border-radius: 9999px; border: 2px solid var(--pf-bg); }
::-webkit-scrollbar-thumb:hover { background: #38507e; }

/* ---------- Custom shell utilities ---------- */
.glass-panel {
    background: rgba(26, 35, 54, 0.72);
    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: rgba(26, 35, 54, 0.72);
    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: rgba(29, 32, 39, 0.6) !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; }

/* Dialogs / popups */
.rz-dialog, .rz-dialog-content {
    background: var(--pf-surface-2) !important;
    color: var(--pf-text) !important;
    border-radius: 1rem !important;
}

/* Inputs / dropdowns */
.rz-textbox, .rz-dropdown, .rz-numeric, .rz-datepicker, .rz-textarea, .rz-lookup {
    background: #11192b !important;
    border: 1px solid var(--pf-border) !important;
    color: var(--pf-text) !important;
    border-radius: 0.5rem !important;
}
.rz-dropdown-panel, .rz-dropdown-items, .rz-multiselect-panel {
    background: var(--pf-surface-2) !important;
    color: var(--pf-text) !important;
}
/* Search/filter box inside a dropdown or multiselect panel (was white text on white). */
.rz-dropdown-filter, .rz-multiselect-filter, .rz-dropdown-filter-container input, .rz-multiselect-header input {
    background: #11192b !important;
    color: var(--pf-text) !important;
    border: 1px solid var(--pf-border) !important;
    border-radius: 0.4rem !important;
}
.rz-dropdown-filter::placeholder, .rz-multiselect-filter::placeholder, .rz-multiselect-header input::placeholder {
    color: var(--pf-text-dim) !important;
}

/* Import review: card-payment rows whose transfer source isn't picked yet — amber call-out. */
.pf-needs-transfer.rz-dropdown {
    border: 1.5px solid var(--pf-warning) !important;
    background: rgba(255, 210, 122, 0.12) !important;
    box-shadow: 0 0 0 2px rgba(255, 210, 122, 0.28) !important;
}

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

/* Pulsing ring around the assistant FAB while an AI import is processing. */
@keyframes pf-fab-glow {
    0%   { box-shadow: 0 4px 20px rgba(77,142,255,0.45), 0 0 0 0 rgba(77,142,255,0.55); }
    70%  { box-shadow: 0 4px 20px rgba(77,142,255,0.45), 0 0 0 16px rgba(77,142,255,0); }
    100% { box-shadow: 0 4px 20px rgba(77,142,255,0.45), 0 0 0 0 rgba(77,142,255,0); }
}
.pf-fab-busy { animation: pf-fab-glow 1.6s ease-out infinite; }

@keyframes pf-pop { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }
.pf-chat-popup { animation: pf-pop 0.16s ease-out; transform-origin: bottom right; }

/* PortfolioSelector in header */
.pf-header-selector .rz-dropdown { min-width: 200px; border-radius: 9999px !important; }

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