/* ============================================================================
   APAgents — Shared Design Tokens (theme.css)
   ----------------------------------------------------------------------------
   A calm, dense, trustworthy visual system for an autonomous agentic finance
   operations platform. Adapted from the finance-ops UI/UX design-system
   guidance to a plain HTML/CSS/JS (non-framework) stack.

   One accent (indigo `primary`) reserved for agent identity + primary actions.
   One neutral (slate `surface`) for text, borders, backgrounds.

   Load this BEFORE the page stylesheet (style.css / console.css) so pages can
   consume the tokens defined here.
   ========================================================================== */

:root {
    /* ---- Accent: indigo (brand, primary actions, active nav, focus, agent) -- */
    --primary-50:  #eef2ff;
    --primary-100: #e0e7ff;
    --primary-200: #c7d2fe;
    --primary-300: #a5b4fc;
    --primary-400: #818cf8;
    --primary-500: #6366f1;
    --primary-600: #4f46e5;
    --primary-700: #4338ca;
    --primary-800: #3730a3;
    --primary-900: #312e81;
    --primary-950: #1e1b4b;

    /* ---- Neutral: slate (text, borders, backgrounds) ---------------------- */
    --surface-50:  #f8fafc;
    --surface-100: #f1f5f9;
    --surface-200: #e2e8f0;
    --surface-300: #cbd5e1;
    --surface-400: #94a3b8;
    --surface-500: #64748b;
    --surface-600: #475569;
    --surface-700: #334155;
    --surface-800: #1e293b;
    --surface-900: #0f172a;

    /* ---- Agentic finance-operation statuses (AA on white) ----------------- */
    --st-agent-processing-bg: #e0e7ff; --st-agent-processing-fg: #3730a3; /* agent working */
    --st-needs-review-bg:     #fef3c7; --st-needs-review-fg:     #92400e; /* exception / human review */
    --st-awaiting-approval-bg:#e0f2fe; --st-awaiting-approval-fg:#075985; /* pending approver */
    --st-approved-bg:         #d1fae5; --st-approved-fg:         #065f46; /* human approved */
    --st-posted-bg:           #ccfbf1; --st-posted-fg:           #115e59; /* written to ERP */
    --st-rejected-bg:         #fee2e2; --st-rejected-fg:         #991b1b; /* rejected / failed sync */

    /* ---- Agent confidence bands ------------------------------------------- */
    --conf-high-bg:   #d1fae5; --conf-high-fg:   #065f46; /* auto-approvable */
    --conf-medium-bg: #fef3c7; --conf-medium-fg: #92400e; /* review suggested */
    --conf-low-bg:    #fee2e2; --conf-low-fg:    #991b1b; /* human required */

    /* ---- ERP sync health -------------------------------------------------- */
    --erp-synced:  #059669;
    --erp-pending: #d97706;
    --erp-error:   #dc2626;
    --erp-offline: #64748b;

    /* ---- Shape & elevation ------------------------------------------------ */
    --card-radius: 12px;
    --btn-radius: 8px;
    --card-shadow: 0 1px 3px rgba(0,0,0,.04), 0 1px 2px rgba(0,0,0,.03);
    --card-shadow-hover: 0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04);
    --shadow-soft:    0 1px 3px 0 rgb(0 0 0/.04), 0 1px 2px -1px rgb(0 0 0/.04);
    --shadow-soft-md: 0 4px 6px -1px rgb(0 0 0/.05), 0 2px 4px -2px rgb(0 0 0/.05);
    --shadow-soft-lg: 0 10px 15px -3px rgb(0 0 0/.05), 0 4px 6px -4px rgb(0 0 0/.05);
    --shadow-soft-xl: 0 20px 25px -5px rgb(0 0 0/.05), 0 8px 10px -6px rgb(0 0 0/.05);
    --shadow-glow: 0 0 0 3px rgb(99 102 241/.15); /* spotlight a live agent run */

    --sidebar-width: 260px;

    /* ---- Type ------------------------------------------------------------- */
    --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        Oxygen, Ubuntu, Cantarell, sans-serif;
    --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

/* ============================================================================
   Base layer
   ========================================================================== */
* , *::before, *::after { box-sizing: border-box; }

body {
    font-family: var(--font-sans);
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: var(--surface-50);
    color: var(--surface-900);
}

/* Global AA focus ring — never removed without a visible replacement */
*:focus-visible {
    outline: 2px solid var(--primary-500);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Readable native dropdown options */
select option { color: var(--surface-900); background: #fff; }

/* Tabular numbers for money / metric columns — never truncate amounts */
.tabular-nums,
.amount,
.metric,
.stat-value,
table.data td.num,
.money { font-variant-numeric: tabular-nums; }

/* ============================================================================
   Animations
   ========================================================================== */
@keyframes fade-in  { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes scale-in { 0% { transform: scale(.96); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes slide-up { 0% { transform: translateY(12px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
@keyframes pulse-soft { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@keyframes spin { to { transform: rotate(360deg); } }

.animate-fade-in  { animation: fade-in 200ms ease-out; }
.animate-scale-in { animation: scale-in 200ms ease-out; }
.animate-slide-up { animation: slide-up 300ms ease-out; }
.animate-pulse-soft { animation: pulse-soft 1.6s ease-in-out infinite; }

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

/* ============================================================================
   Shared tokenized components: status / confidence / ERP-sync badges + chips
   Driven by the CSS variables above so one markup pattern renders any state.
   Usage:
     <span class="chip st-agent-processing">Agent processing</span>
     <span class="chip conf-high">Confidence: high</span>
     <span class="erp-chip erp-synced">Synced</span>
   ========================================================================== */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.5;
    white-space: nowrap;
}
.chip .chip-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: currentColor; flex: 0 0 auto;
}

/* Finance-operation statuses */
.st-agent-processing { background: var(--st-agent-processing-bg); color: var(--st-agent-processing-fg); }
.st-needs-review     { background: var(--st-needs-review-bg);     color: var(--st-needs-review-fg); }
.st-awaiting-approval{ background: var(--st-awaiting-approval-bg);color: var(--st-awaiting-approval-fg); }
.st-approved         { background: var(--st-approved-bg);         color: var(--st-approved-fg); }
.st-posted           { background: var(--st-posted-bg);           color: var(--st-posted-fg); }
.st-rejected         { background: var(--st-rejected-bg);         color: var(--st-rejected-fg); }

/* Confidence bands */
.conf-high   { background: var(--conf-high-bg);   color: var(--conf-high-fg); }
.conf-medium { background: var(--conf-medium-bg); color: var(--conf-medium-fg); }
.conf-low    { background: var(--conf-low-bg);    color: var(--conf-low-fg); }

/* ERP sync-health chip (pairs color WITH text + dot, never color alone) */
.erp-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    background: #fff;
    border: 1px solid var(--surface-200);
    color: var(--surface-700);
    min-height: 28px;
}
.erp-chip .erp-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.erp-synced  .erp-dot { background: var(--erp-synced); }
.erp-pending .erp-dot { background: var(--erp-pending); }
.erp-error   .erp-dot { background: var(--erp-error); }
.erp-offline .erp-dot { background: var(--erp-offline); }
.erp-pending .erp-dot { animation: pulse-soft 1.6s ease-in-out infinite; }

/* A small "agent" marker to associate indigo with autonomous work */
.agent-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    background: var(--primary-50);
    color: var(--primary-700);
}
.agent-tag .chip-dot { background: var(--primary-500); }