/* ─────────────────────────────────────────────────────────────────────────
   Investment Tracker — Custom Theme 1
   Theme name: "theme-1"  |  Palette: Confident + Warm, Light Mode

   DaisyUI v4 reads variables as raw oklch components (no oklch() wrapper):
     --p: <lightness%> <chroma> <hue>
   DaisyUI then composes them as oklch(var(--p)) internally.
   ───────────────────────────────────────────────────────────────────────── */

[data-theme="theme-1"] {
  color-scheme: light;

  /* Surfaces — warm whites, not clinical pure white */
  --b1: 98% 0.003 94;        /* #FAFAF7 — page background */
  --b2: 100% 0 0;            /* #FFFFFF — card / panel surface */
  --b3: 91% 0.007 85;        /* #E7E5DF — borders, dividers */
  --bc: 16% 0.008 62;        /* #1C1917 — primary text */

  /* Brand primary — deep navy, confident, financial-grade */
  --p: 26% 0.075 237;        /* #1B3A5C */
  --pc: 100% 0 0;            /* white text on primary */

  /* Secondary — warm copper for highlights */
  --s: 43% 0.062 57;         /* #7C5C3A */
  --sc: 100% 0 0;

  /* Accent — same as secondary for now */
  --a: 43% 0.062 57;
  --ac: 100% 0 0;

  /* Semantic — FCN lifecycle states */
  --su: 52% 0.165 148;       /* #16A34A — KO hit (green) */
  --suc: 100% 0 0;
  --wa: 65% 0.165 65;        /* #D97706 — approaching KI (amber) */
  --wac: 100% 0 0;
  --er: 54% 0.210 28;        /* #DC2626 — KI breached (red) */
  --erc: 100% 0 0;
  --n: 50% 0.012 56;         /* #78716C — matured / inactive (warm stone) */
  --nc: 100% 0 0;

  /* Info — unused for now, set to a safe neutral blue */
  --in: 65% 0.10 231;
  --inc: 100% 0 0;

  /* Component shape */
  --rounded-box: 0.5rem;
  --rounded-btn: 0.375rem;
  --rounded-badge: 0.25rem;
  --animation-btn: 0.25s;
  --animation-input: 0.2s;
  --btn-focus-scale: 0.95;
  --border-btn: 1px;
  --tab-border: 1px;
  --tab-radius: 0.375rem;
}

/* ── Global base ────────────────────────────────────────────────────────── */

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

html, body {
  height: 100%;
  margin: 0;
}

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
  -webkit-font-smoothing: antialiased;
}

/* ── Tabular numbers for financial figures ──────────────────────────────── */
.tabular-nums {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}

/* ── Tile left-border health colour overrides ─────────────────────────────
   Tailwind's border-l-* colour classes use the theme's CSS variables.
   We define explicit fallbacks here for the custom border colours used on
   the KI health state left-border accent. ────────────────────────────── */

.border-l-healthy { border-left-color: oklch(26% 0.075 237); }  /* navy primary */
.border-l-warning { border-left-color: oklch(65% 0.165 65); }   /* amber */
.border-l-error   { border-left-color: oklch(54% 0.210 28); }   /* red */
.border-l-success { border-left-color: oklch(52% 0.165 148); }  /* green */
.border-l-neutral { border-left-color: oklch(50% 0.012 56); }   /* warm stone */
.border-l-primary { border-left-color: oklch(26% 0.075 237); }  /* navy primary */

/* ── Submenu navigation strip ────────────────────────────────────────────── */

/* Default — recedes into the background */
.submenu-link {
  display: flex;
  align-items: center;
  padding: 0 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(15, 23, 42, 0.38);
  border-bottom: 3px solid transparent;
  border-radius: 4px 4px 0 0;
  cursor: pointer;
  user-select: none;
  transition:
    color       150ms ease,
    transform   150ms ease,
    box-shadow  150ms ease,
    border-color 150ms ease;
}

/* Hover — lift off the strip with a soft shadow */
.submenu-link:hover:not(.active) {
  color: #0F172A;
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.09), 0 1px 3px rgba(0, 0, 0, 0.06);
}

/* Active — you are here */
.submenu-link.active {
  color: #0D3D3D;
  font-weight: 600;
  border-bottom-color: #0D3D3D;
}

/* ── Dashboard card hover lift ─────────────────────────────────────────── */
.fcn-card {
  transition: transform 200ms ease-out, box-shadow 200ms ease-out;
}
.fcn-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.10), 0 4px 10px rgba(0, 0, 0, 0.07);
}

/* ── Route transition ───────────────────────────────────────────────────── */
/* Outgoing page: fade out only — no movement */
.fade-leave-active {
  transition: opacity 120ms ease;
}
.fade-leave-to {
  opacity: 0;
}

/* Incoming page: fade in + subtle upward reveal */
.fade-enter-active {
  transition: opacity 200ms ease, transform 200ms ease;
}
.fade-enter-from {
  opacity: 0;
  transform: translateY(6px);
}
.fade-enter-to {
  opacity: 1;
  transform: translateY(0);
}