/* ---------------------------------------------------------------------------
   InvestCore design tokens

   Two surfaces, one vocabulary. The account area runs on "ink" — a deep navy
   ground with a single brass accent, because the figures are the subject and
   everything else should recede behind them. The operations console runs on
   "paper" — a light, dense, high-information surface built for scanning
   hundreds of rows. Both share the same accent, type scale and rules.

   This file is plain, static CSS (no build step). The color/font tokens are
   mirrored in the Tailwind CDN config (see partials/tailwind-head.blade.php)
   so utility classes like `bg-ink-950` resolve to the same values.
--------------------------------------------------------------------------- */

:root {
  /* "ink" surface tokens are themeable — each has a plain hex (used directly
     by the component classes below) and an "-rgb" triplet (used by the
     Tailwind config so utilities like `bg-ink-950/70` keep working with
     opacity modifiers). [data-theme="light"] overrides both forms. */
  --color-ink-950: #050505;
  --color-ink-950-rgb: 5 5 5;
  --color-ink-900: #0d0d0d;
  --color-ink-900-rgb: 13 13 13;
  --color-ink-850: #121212;
  --color-ink-850-rgb: 18 18 18;
  --color-ink-800: #1a1a1a;
  --color-ink-800-rgb: 26 26 26;
  --color-ink-700: #262626;
  --color-ink-700-rgb: 38 38 38;
  --color-ink-600: #333333;
  --color-ink-600-rgb: 51 51 51;

  --color-line: #2e2e2e;
  --color-line-rgb: 46 46 46;
  --color-line-soft: #232323;
  --color-line-soft-rgb: 35 35 35;

  --color-chalk: #f2f2f2;
  --color-chalk-rgb: 242 242 242;
  --color-muted: #9e9e9e;
  --color-muted-rgb: 158 158 158;
  --color-dim: #6b6b6b;
  --color-dim-rgb: 107 107 107;

  --color-brass-300: #bfbfbf;
  --color-brass-400: #d4d4d4;
  --color-brass-500: #ffffff;
  --color-brass-600: #e0e0e0;

  --color-mint-400: #d9d9d9;
  --color-mint-500: #bfbfbf;
  --color-rose-400: #8c8c8c;
  --color-rose-500: #737373;
  --color-violet-400: #a6a6a6;
  --color-sky-400: #c2c2c2;

  --color-paper: #f5f5f5;
  --color-paper-line: #e0e0e0;

  /* Fixed dark text for use on top of the brass accent (buttons, active nav,
     logo badges). Deliberately NOT overridden in [data-theme="light"] —
     brass stays the same color in both themes, so the text on it must too. */
  --color-onbrass: #000000;

  --font-display: "Sora", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;

  --radius-card: 14px;
}

/* Light variant of the "ink" account surface. Scoped to elements the toggle
   marks with data-theme="light" (the account layout only — the admin
   console and guest/error pages don't use this attribute and stay as-is). */
[data-theme="light"] {
  --color-ink-950: #fafafa;
  --color-ink-950-rgb: 250 250 250;
  --color-ink-900: #ffffff;
  --color-ink-900-rgb: 255 255 255;
  --color-ink-850: #ffffff;
  --color-ink-850-rgb: 255 255 255;
  --color-ink-800: #f0f0f0;
  --color-ink-800-rgb: 240 240 240;
  --color-ink-700: #e0e0e0;
  --color-ink-700-rgb: 224 224 224;
  --color-ink-600: #c7c7c7;
  --color-ink-600-rgb: 199 199 199;

  --color-line: #dcdcdc;
  --color-line-rgb: 220 220 220;
  --color-line-soft: #e8e8e8;
  --color-line-soft-rgb: 232 232 232;

  --color-chalk: #0d0d0d;
  --color-chalk-rgb: 13 13 13;
  --color-muted: #595959;
  --color-muted-rgb: 89 89 89;
  --color-dim: #8a8a8a;
  --color-dim-rgb: 138 138 138;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  font-feature-settings: "cv11", "ss01";
}

h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
}

/* Figures are the content. Tabular lining everywhere money appears. */
.figure {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}

:focus-visible {
  outline: 2px solid var(--color-brass-400);
  outline-offset: 2px;
  border-radius: 4px;
}

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

/* --- account surface ------------------------------------------------- */

.panel {
  background-color: var(--color-ink-850);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
}

.panel-flush {
  background-color: var(--color-ink-850);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  overflow: hidden;
}

/*
  The ledger rule: the signature device. A hairline under every headline
  figure, ticked like the edge of a measuring rule. It reads as a
  measurement, not a decoration, and it is the one element repeated across
  every surface of the product.
*/
.ledger-rule {
  height: 7px;
  background-image:
    linear-gradient(to right, var(--color-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--color-brass-500) 1px, transparent 1px);
  background-size: 9px 7px, 100% 1px;
  background-repeat: repeat-x, no-repeat;
  background-position: 0 2px, 0 0;
  opacity: 0.55;
}

.ledger-rule-muted {
  background-image:
    linear-gradient(to right, var(--color-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--color-line) 1px, transparent 1px);
  opacity: 0.7;
}

/* --- forms ------------------------------------------------------------ */

.field {
  width: 100%;
  background-color: var(--color-ink-900);
  border: 1px solid var(--color-line);
  border-radius: 10px;
  padding: 0.625rem 0.875rem;
  color: var(--color-chalk);
  font-size: 0.9375rem;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.field::placeholder { color: var(--color-dim); }

.field:focus {
  border-color: var(--color-brass-500);
  background-color: var(--color-ink-850);
  outline: none;
}

.field-light {
  width: 100%;
  background-color: #fff;
  border: 1px solid var(--color-paper-line);
  border-radius: 10px;
  padding: 0.5625rem 0.8125rem;
  color: #0d0d0d;
  font-size: 0.9375rem;
}

.field-light:focus {
  border-color: var(--color-brass-500);
  outline: none;
  box-shadow: 0 0 0 3px rgb(237 164 52 / 0.15);
}

.label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 0.4rem;
}

/* --- buttons ---------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 10px;
  padding: 0.625rem 1.125rem;
  font-size: 0.875rem;
  font-weight: 600;
  transition: all 0.15s ease;
  cursor: pointer;
  white-space: nowrap;
}

.btn-primary {
  background-color: var(--color-brass-500);
  color: var(--color-onbrass);
}

.btn-primary:hover { background-color: var(--color-brass-400); }

.btn-ghost {
  background-color: transparent;
  border: 1px solid var(--color-line);
  color: var(--color-chalk);
}

.btn-ghost:hover { border-color: var(--color-ink-600); background-color: var(--color-ink-800); }

.btn-danger {
  background-color: color-mix(in srgb, var(--color-rose-500) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-rose-500) 40%, transparent);
  color: var(--color-rose-400);
}

.btn-danger:hover { background-color: color-mix(in srgb, var(--color-rose-500) 26%, transparent); }

.btn-mint {
  background-color: var(--color-mint-500);
  color: #0d0d0d;
}

.btn-mint:hover { background-color: var(--color-mint-400); }

.btn-sm { padding: 0.375rem 0.75rem; font-size: 0.8125rem; }

/* --- pills ------------------------------------------------------------ */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: 999px;
  padding: 0.1875rem 0.625rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pill-pending { background: color-mix(in srgb, var(--color-brass-500) 15%, transparent); color: var(--color-brass-300); }
.pill-ok      { background: color-mix(in srgb, var(--color-mint-500) 15%, transparent); color: var(--color-mint-400); }
.pill-bad     { background: color-mix(in srgb, var(--color-rose-500) 15%, transparent); color: var(--color-rose-400); }
.pill-idle    { background: color-mix(in srgb, #8496b4 15%, transparent); color: var(--color-muted); }
.pill-live    { background: color-mix(in srgb, var(--color-sky-400) 15%, transparent); color: var(--color-sky-400); }

/* --- maturity bar ----------------------------------------------------- */

/*
  One segment per scheduled payout, not a smooth percentage bar. The user can
  count the instalments they have been paid and the ones still owed, which is
  the fact they actually care about.
*/
.maturity {
  display: flex;
  gap: 2px;
  height: 8px;
}

.maturity span {
  flex: 1 1 0;
  border-radius: 2px;
  background-color: var(--color-ink-700);
  min-width: 2px;
}

.maturity span[data-paid="1"] { background-color: var(--color-brass-500); }
.maturity span[data-due="1"]  { background-color: var(--color-brass-300); }

/* --- tables ----------------------------------------------------------- */

.t-head {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-dim);
  text-align: left;
  padding: 0.75rem 1rem;
}

.t-cell { padding: 0.875rem 1rem; font-size: 0.875rem; }

.t-row { border-top: 1px solid var(--color-line-soft); }
.t-row:hover { background-color: color-mix(in srgb, var(--color-ink-800) 60%, transparent); }

/* --- console (admin) -------------------------------------------------- */

.card {
  background-color: #fff;
  border: 1px solid var(--color-paper-line);
  border-radius: var(--radius-card);
}

.c-head {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6b6b6b;
  text-align: left;
  padding: 0.6875rem 1rem;
  background-color: #fafafa;
}

.c-cell { padding: 0.75rem 1rem; font-size: 0.875rem; color: #111111; }
.c-row { border-top: 1px solid var(--color-paper-line); }
.c-row:hover { background-color: #fafafa; }

.c-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.125rem 0.5625rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.c-pill-pending { background: #ececec; color: #595959; }
.c-pill-ok      { background: #dcdcdc; color: #1a1a1a; }
.c-pill-bad     { background: #1a1a1a; color: #ffffff; }
.c-pill-idle    { background: #f0f0f0; color: #737373; }

.nav-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-radius: 9px;
  padding: 0.5625rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-muted);
  transition: all 0.15s ease;
}

.nav-link:hover { color: var(--color-chalk); background-color: var(--color-ink-800); }

.nav-link-active {
  color: var(--color-onbrass);
  background-color: var(--color-brass-500);
  font-weight: 600;
}

.nav-link-active:hover { color: var(--color-onbrass); background-color: var(--color-brass-400); }