/* main.css — importeert alle stijlen in de juiste volgorde
   Volgorde is belangrijk: tokens eerst, dan reset, dan layout, dan componenten */

/* ============================================================
   Claro — Design Tokens
   ============================================================
   Three layers:
   1. Primary color (violet) — buttons, links, hover, focus
   2. Badge colors — three independent layers
   3. Skeleton animation
   ============================================================ */

/* ------------------------------------------------------------
   Base tokens — light mode
   ------------------------------------------------------------ */

:root {
  /* Surface & layout */
  --color-background: #ffffff;
  --color-surface: #f9fafb;
  --color-surface-hover: #f3f4f6;
  --color-border: #e5e7eb;

  /* Typography */
  --font-family:
    -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --font-xs: 11px;
  --font-sm: 13px;
  --font-md: 14px;
  --font-lg: 16px;

  /* Text colors */
  --color-text-primary: #111827;
  --color-text-secondary: #6b7280;
  --color-text-muted: #9ca3af;
  --color-text-gain: #15803d;
  --color-text-loss: #b91c1c;

  /* ----------------------------------------------------------
     1. PRIMARY COLOR — Claro Violet
     Base: #7c35d9 (600)
     Cool violet with subtle warm undertone.
     ---------------------------------------------------------- */

  /* Tint scale */
  --color-violet-50: #f7f3ff;
  --color-violet-100: #ece5fd;
  --color-violet-200: #d9cbfb;
  --color-violet-300: #bea4f7;
  --color-violet-400: #a07bf2;
  --color-violet-500: #8c52e5;
  --color-violet-600: #7c35d9;
  --color-violet-700: #6a27be;
  --color-violet-800: #571ca0;
  --color-violet-900: #3e1278;
  --color-violet-950: #260b4a;

  /* Semantic tokens — light mode */
  --color-primary: var(--color-violet-600);
  --color-primary-hover: var(--color-violet-700);
  --color-primary-active: var(--color-violet-800);
  --color-primary-subtle: var(--color-violet-50);
  --color-primary-muted: var(--color-violet-100);
  --color-primary-border: var(--color-violet-200);
  --color-primary-focus: var(--color-violet-500);

  /* Links — light mode */
  --color-link: var(--color-violet-700);
  --color-link-hover: var(--color-violet-800);

  /* Button tokens — light mode */
  --btn-primary-bg: var(--color-primary);
  --btn-primary-color: #ffffff;
  --btn-primary-bg-hover: var(--color-primary-hover);
  --btn-primary-bg-active: var(--color-primary-active);

  --btn-ghost-bg: var(--color-violet-100);
  --btn-ghost-color: var(--color-violet-700);
  --btn-ghost-border: var(--color-violet-200);
  --btn-ghost-bg-hover: var(--color-violet-50);

  /* Focus ring */
  --focus-ring-color: var(--color-violet-500);
  --focus-ring: 0 0 0 3px var(--color-violet-200);
  --focus-ring-error: 0 0 0 3px var(--badge-error-border);
  --focus-ring-success: 0 0 0 3px var(--badge-success-border);
  --focus-ring-info: 0 0 0 3px var(--badge-info-border);
  --focus-ring-muted: 0 0 0 3px var(--color-border);

  /* Row hover */
  --row-hover-bg: var(--color-violet-50);

  /* Modal */
  --modal-overlay: rgba(0, 0, 0, 0.6);
  --modal-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);

  /* Interactive borders — meets 3:1 WCAG AA for UI components, unlike --color-border */
  --input-border: var(--color-text-muted);

  /* Expired/destructive background tint */
  --color-expired-bg: var(--badge-error-bg);

  /* ----------------------------------------------------------
     2. BADGE COLORS
     Three layers that never visually conflict:
     Layer 1 = grouping  (neutral, non-semantic)
     Layer 2 = action    (intentional, action-oriented)
     Layer 3 = status    (fully semantic)
     ---------------------------------------------------------- */

  /* Layer 1 — Grouping */
  --badge-buffer-bg: #f1f5f9;
  --badge-buffer-color: #334155;
  --badge-buffer-border: #e2e8f0;

  --badge-core-bg: #e0f2fe;
  --badge-core-color: #075985;
  --badge-core-border: #bae6fd;

  --badge-dividend-bg: #ede9fe;
  --badge-dividend-color: #5b21b6;
  --badge-dividend-border: #ddd6fe;

  --badge-stocks-bg: #ffe4e6;
  --badge-stocks-color: #9f1239;
  --badge-stocks-border: #fecdd3;

  /* Layer 1 — Grouping, extended palette for custom/renamed categories */
  --badge-teal-bg: #ccfbf1;
  --badge-teal-color: #115e59;
  --badge-teal-border: #99f6e4;

  --badge-lime-bg: #ecfccb;
  --badge-lime-color: #3f6212;
  --badge-lime-border: #d9f99d;

  --badge-orange-bg: #ffedd5;
  --badge-orange-color: #9a3412;
  --badge-orange-border: #fed7aa;

  --badge-cyan-bg: #a5f3fc;
  --badge-cyan-color: #164e63;
  --badge-cyan-border: #67e8f9;

  /* Layer 2 — Action */
  --badge-buy-bg: #d1fae5;
  --badge-buy-color: #065f46;
  --badge-buy-border: #a7f3d0;

  --badge-sell-bg: #fdf2f8;
  --badge-sell-color: #9d174d;
  --badge-sell-border: #fbcfe8;

  --badge-hold-bg: #fef9c3;
  --badge-hold-color: #854d0e;
  --badge-hold-border: #fde68a;

  /* Layer 3 — Status */
  --badge-success-bg: #dcfce7;
  --badge-success-color: #15803d;
  --badge-success-border: #bbf7d0;

  --badge-warning-bg: #fef3c7;
  --badge-warning-color: #92400e;
  --badge-warning-border: #fde68a;

  --badge-error-bg: #fee2e2;
  --badge-error-color: #b91c1c;
  --badge-error-border: #fca5a5;

  --badge-info-bg: #dbeafe;
  --badge-info-color: #1d4ed8;
  --badge-info-border: #bfdbfe;

  /* ----------------------------------------------------------
     3. SKELETON
     ---------------------------------------------------------- */
  --skeleton-bg-from: var(--color-violet-50);
  --skeleton-bg-via: #f0ebff;

  /* ----------------------------------------------------------
     4. BRANDING — page-level gradient, header glass, login card
     See design/claro-assets/docs/design-to-dev.md. One gradient, --gradient-bg,
     runs on every page (dashboard, settings, login, everything) — no more
     distinct login variant. Applied only to page backgrounds and the
     header bar — never to cards/tables/panels, which stay solid
     (--color-surface).
     ---------------------------------------------------------- */
  --gradient-bg:
    radial-gradient(ellipse 75% 65% at 10% 5%, rgba(124, 53, 217, 0.12) 0%, transparent 60%),
    radial-gradient(ellipse 55% 55% at 90% 0%, rgba(217, 70, 239, 0.08) 0%, transparent 58%),
    radial-gradient(ellipse 60% 45% at 65% 100%, rgba(91, 31, 168, 0.09) 0%, transparent 62%),
    #f7f5ff;
  --login-card-bg: #ffffff;
  --login-card-border: rgba(124, 53, 217, 0.12);
  --login-card-shadow: 0 8px 32px rgba(124, 53, 217, 0.08), 0 2px 8px rgba(0, 0, 0, 0.06);
  --header-bg: rgba(255, 255, 255, 0.15);
  --header-border: rgba(0, 0, 0, 0.05);
}

/* ------------------------------------------------------------
   Dark mode overrides
   Applied via an explicit data-theme attribute on <html>, resolved in
   App.jsx from the user's theme setting ("system" follows the OS
   preference — see App.jsx's matchMedia listener — "light"/"dark" force
   a fixed value regardless of the OS). No @media query here on purpose:
   resolving "system" in JS lets an explicit choice win outright, instead
   of fighting the OS preference on CSS specificity.
   ------------------------------------------------------------ */

:root[data-theme="dark"] {
  /* Surface & layout */
  --color-background: #0f1117;
  --color-surface: #1a1d27;
  --color-surface-hover: #22263a;
  --color-border: #2a2d3d;

  /* Text colors */
  --color-text-primary: #f0f2f8;
  --color-text-secondary: #a8adc4;
  --color-text-muted: #7a7f96;
  --color-text-gain: #86efac;
  --color-text-loss: #ff6b6b;

  /* Primary color — dark mode */
  --color-primary: var(--color-violet-600);
  --color-primary-hover: var(--color-violet-500);
  --color-primary-active: var(--color-violet-400);
  --color-primary-subtle: var(--color-violet-950);
  --color-primary-muted: #1e1040;
  --color-primary-border: #3b1f6e;
  --color-primary-focus: var(--color-violet-400);

  /* Links — dark mode */
  --color-link: var(--color-violet-300);
  --color-link-hover: var(--color-violet-200);

  /* Button tokens — dark mode */
  --btn-primary-bg: var(--color-primary);
  --btn-primary-color: #ffffff;
  --btn-primary-bg-hover: var(--color-violet-500);
  --btn-primary-bg-active: var(--color-violet-400);

  --btn-ghost-bg: #1e1040;
  --btn-ghost-color: var(--color-violet-300);
  --btn-ghost-border: #3b1f6e;
  --btn-ghost-bg-hover: var(--color-violet-950);

  --focus-ring-color: var(--color-violet-400);
  --focus-ring: 0 0 0 3px #3b1f6e;

  --row-hover-bg: var(--color-violet-950);

  /* Badges — dark mode */
  --badge-buffer-bg: #1e293b;
  --badge-buffer-color: #94a3b8;
  --badge-buffer-border: #334155;

  --badge-core-bg: #082f49;
  --badge-core-color: #7dd3fc;
  --badge-core-border: #0c4a6e;

  --badge-dividend-bg: #2e1065;
  --badge-dividend-color: #c4b5fd;
  --badge-dividend-border: #4c1d95;

  --badge-stocks-bg: #4c0519;
  --badge-stocks-color: #fda4af;
  --badge-stocks-border: #881337;

  --badge-teal-bg: #042f2e;
  --badge-teal-color: #5eead4;
  --badge-teal-border: #115e59;

  --badge-lime-bg: #1f2917;
  --badge-lime-color: #b4cc6a;
  --badge-lime-border: #4b5a26;

  --badge-orange-bg: #2e1b0f;
  --badge-orange-color: #e2a468;
  --badge-orange-border: #6b3d1f;

  --badge-cyan-bg: #0d2f3a;
  --badge-cyan-color: #5bc7dc;
  --badge-cyan-border: #1f5a6b;

  --badge-buy-bg: #052e16;
  --badge-buy-color: #4ade80;
  --badge-buy-border: #14532d;

  --badge-sell-bg: #3d0a2a;
  --badge-sell-color: #f9a8d4;
  --badge-sell-border: #831843;

  --badge-hold-bg: #422006;
  --badge-hold-color: #fde047;
  --badge-hold-border: #78350f;

  --badge-success-bg: #052e16;
  --badge-success-color: #86efac;
  --badge-success-border: #14532d;

  --badge-warning-bg: #451a03;
  --badge-warning-color: #fcd34d;
  --badge-warning-border: #78350f;

  --badge-error-bg: #450a0a;
  --badge-error-color: #fca5a5;
  --badge-error-border: #7f1d1d;

  --badge-info-bg: #1e3a5f;
  --badge-info-color: #93c5fd;
  --badge-info-border: #1e40af;

  /* Skeleton — dark mode */
  --skeleton-bg-from: var(--color-violet-950);
  --skeleton-bg-via: #1e1040;

  /* Branding — dark mode (see design/claro-assets/docs/design-to-dev.md) */
  --gradient-bg:
    radial-gradient(ellipse 75% 65% at 10% 5%, rgba(124, 53, 217, 0.30) 0%, transparent 60%),
    radial-gradient(ellipse 55% 55% at 90% 0%, rgba(217, 70, 239, 0.2) 0%, transparent 58%),
    radial-gradient(ellipse 60% 45% at 65% 100%, rgba(91, 31, 168, 0.25) 0%, transparent 62%),
    radial-gradient(ellipse 35% 35% at 92% 85%, rgba(217, 70, 239, 0.18) 0%, transparent 58%),
    #07060f;
  --login-card-bg: #0f0d1c;
  --login-card-border: rgba(255, 255, 255, 0.09);
  --login-card-shadow: 0 24px 60px rgba(0, 0, 0, 0.60), 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
  --header-bg: rgba(7, 6, 15, 0.15);
  --header-border: rgba(255, 255, 255, 0.05);
}

/* reset.css — resets browser defaults */

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

body {
  background-color: var(--color-background);
  color: var(--color-text-primary);
  font-family: var(--font-family);
  font-size: var(--font-md);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Visible focus ring for keyboard navigation */

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

input:focus-visible,
textarea:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-color: var(--color-primary);
}

/* Text links */

a,
.link {
  color: var(--color-link);
  text-decoration: underline;
  transition: color 0.1s;
}

a:hover,
.link:hover {
  color: var(--color-link-hover);
}

/* layout.css — global layout classes */

.app {
  max-width: 1400px;
  margin: 0 auto;
  padding: 32px clamp(16px, 3vw, 48px);
}

/* Sticky/blur header bar — full-width so it floats above the page
   background regardless of .app's max-width (see CLAUDE.md "Page width":
   the header always runs full-width). See design-to-dev.md ("3. Header"). */

.app-header-bar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--header-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--header-border);
}

.app-header-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 16px clamp(16px, 3vw, 48px);
}

/* Page-background gradient (dark and light variants both defined in
   tokens.css) — toggled on <body> by Layout.jsx/AuthFlow.jsx. Same
   gradient on every page, no separate login variant.

   min-height + no-repeat: the radial-gradient percentages are sized
   against body's own box, not the viewport — on a short-content page
   (e.g. Appearance settings) body was only as tall as its content, so
   the background tiled a second time below it instead of covering the
   full viewport. Forcing body to at least 100vh fixes that regardless
   of how little content a page has.

   background-attachment: fixed — without this, those same percentage
   sizes still scale with body's actual (content) height on long pages,
   so a tall page (e.g. /investments with a full table) makes the same
   relative glow physically much bigger and reads brighter than a short
   page. Pinning the background to the viewport keeps intensity
   consistent regardless of page length. */

body.bg-app {
  min-height: 100vh;
  background: var(--gradient-bg);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.app-header {
  margin-bottom: 32px;
}

.app-header h1 {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.3px;
  color: var(--color-text-primary);
}

.app-header p {
  color: var(--color-text-secondary);
  font-size: var(--font-sm);
  margin-top: 4px;
}

/* Page content-width tiers — see CLAUDE.md "Page width" for the full
   decision table. Applied to a page's root wrapper; .app above already
   provides the 24px+ side padding these nest inside. */

.page-width-narrow {
  max-width: 760px;
  margin: 0 auto;
}

.page-width-medium {
  max-width: 960px;
  margin: 0 auto;
}

.page-width-wide {
  max-width: 1100px;
  margin: 0 auto;
}

.page-width-full {
  max-width: 1280px;
  margin: 0 auto;
}

/* Dashboard layout — portfolio table + action panel side by side */

.dashboard-grid {
  display: grid;
  grid-template-columns: 70fr 30fr;
  gap: 16px;
  align-items: start;
}

/* On narrow screens — stack vertically */

@media (max-width: 1024px) {
  .dashboard-grid {
    grid-template-columns: 1fr;
  }
}

/* badges.css — badge utility classes
   Three layers that never conflict:
   1. Grouping  (category, neutral)
   2. Action    (intentional, action-oriented)
   3. Status    (fully semantic: success / error / info) */

.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: var(--font-xs);
  font-weight: 500;
  white-space: nowrap;
  border: 0.5px solid transparent;
}

/* Layer 1 — Grouping */

.badge--buffer {
  background: var(--badge-buffer-bg);
  color: var(--badge-buffer-color);
  border-color: var(--badge-buffer-border);
}

.badge--core {
  background: var(--badge-core-bg);
  color: var(--badge-core-color);
  border-color: var(--badge-core-border);
}

.badge--dividend {
  background: var(--badge-dividend-bg);
  color: var(--badge-dividend-color);
  border-color: var(--badge-dividend-border);
}

.badge--stocks {
  background: var(--badge-stocks-bg);
  color: var(--badge-stocks-color);
  border-color: var(--badge-stocks-border);
}

/* Layer 1 — Grouping, extended palette for custom/renamed categories */

.badge--teal {
  background: var(--badge-teal-bg);
  color: var(--badge-teal-color);
  border-color: var(--badge-teal-border);
}

.badge--lime {
  background: var(--badge-lime-bg);
  color: var(--badge-lime-color);
  border-color: var(--badge-lime-border);
}

.badge--orange {
  background: var(--badge-orange-bg);
  color: var(--badge-orange-color);
  border-color: var(--badge-orange-border);
}

.badge--cyan {
  background: var(--badge-cyan-bg);
  color: var(--badge-cyan-color);
  border-color: var(--badge-cyan-border);
}

/* Layer 2 — Action */

.badge--buy {
  background: var(--badge-buy-bg);
  color: var(--badge-buy-color);
  border-color: var(--badge-buy-border);
}

.badge--sell {
  background: var(--badge-sell-bg);
  color: var(--badge-sell-color);
  border-color: var(--badge-sell-border);
}

.badge--hold {
  background: var(--badge-hold-bg);
  color: var(--badge-hold-color);
  border-color: var(--badge-hold-border);
}

/* Layer 3 — Status */

.badge--success {
  background: var(--badge-success-bg);
  color: var(--badge-success-color);
  border-color: var(--badge-success-border);
}

.badge--warning {
  background: var(--badge-warning-bg);
  color: var(--badge-warning-color);
  border-color: var(--badge-warning-border);
}

.badge--error {
  background: var(--badge-error-bg);
  color: var(--badge-error-color);
  border-color: var(--badge-error-border);
}

.badge--info {
  background: var(--badge-info-bg);
  color: var(--badge-info-color);
  border-color: var(--badge-info-border);
}

/* skeleton.css — shimmer animation for skeleton loading states */

@keyframes shimmer {
  0% {
    background-position: -400px 0;
  }
  100% {
    background-position: 400px 0;
  }
}

.skeleton {
  background: linear-gradient(
    90deg,
    var(--skeleton-bg-from) 25%,
    var(--skeleton-bg-via) 50%,
    var(--skeleton-bg-from) 75%
  );
  background-size: 800px 100%;
  animation: shimmer 1.5s infinite linear;
  border-radius: 6px;
}

.skeleton--pill {
  border-radius: 20px;
}

.skeleton--circle {
  border-radius: 50%;
}

body.hide-amounts .blur-amount {
  filter: blur(6px);
  user-select: none;
}