/* ============================================================
   FinsiderAI Components
   Core reusable component classes.
   Modern fintech aesthetic: navy + indigo + cool surfaces + Manrope.
   ============================================================ */

/* ============================================================
   BUTTONS
   Variants: primary (navy), accent (indigo), secondary, ghost
   States: default, hover, active, disabled, focus
   HARD RULE: Never pill-shaped. Always --r-md radius.
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  height: 46px;
  padding-inline: var(--sp-5);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  line-height: 1;
  letter-spacing: var(--ls-normal);
  text-decoration: none;
  border-radius: var(--r-md);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
  white-space: nowrap;
  user-select: none;
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Primary — navy fill, white text (default CTA) */
.btn--primary {
  background: var(--c-navy-800);
  color: var(--c-surface);
}

.btn--primary:hover {
  background: var(--c-navy-700);
}

.btn--primary:active {
  background: var(--c-navy-900);
  transform: translateY(1px);
}

/* Accent — electric indigo (high-emphasis actions, key CTAs) */
.btn--accent {
  background: var(--c-indigo-500);
  color: var(--c-surface);
}

.btn--accent:hover {
  background: var(--c-indigo-400);
  box-shadow: var(--sh-glow);
}

.btn--accent:active {
  background: var(--c-indigo-500);
  transform: translateY(1px);
}

/* Secondary — white surface, navy border */
.btn--secondary {
  background: var(--c-surface);
  color: var(--c-navy-900);
  border-color: var(--c-border-strong);
}

.btn--secondary:hover {
  border-color: var(--c-navy-800);
  background: var(--c-surface-2);
}

.btn--secondary:active {
  background: var(--c-surface-3);
  transform: translateY(1px);
}

/* Ghost — text only, no background */
.btn--ghost {
  background: transparent;
  color: var(--c-navy-900);
}

.btn--ghost:hover {
  background: var(--c-surface-3);
}

/* Size variants */
.btn--sm {
  height: 38px;
  padding-inline: var(--sp-4);
  font-size: var(--fs-body-sm);
}

.btn--lg {
  height: 54px;
  padding-inline: var(--sp-6);
  font-size: var(--fs-body-lg);
}

.btn--block {
  width: 100%;
}

/* ============================================================
   CARDS
   Surface containers for content.
   Variants: default, elevated, interactive, gradient
   ============================================================ */

.card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
}

.card--elevated {
  border: none;
  box-shadow: var(--sh-card);
}

.card--padded {
  padding: var(--sp-8);
}

.card__title {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  color: var(--c-navy-900);
  letter-spacing: var(--ls-tight);
}

.card__subtitle {
  margin-top: var(--sp-2);
  font-size: var(--fs-body-sm);
  color: var(--c-text-muted);
}

/* ============================================================
   INPUTS
   ============================================================ */

.input {
  display: block;
  width: 100%;
  height: 46px;
  padding-inline: var(--sp-4);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--c-text);
  background: var(--c-surface);
  border: 1.5px solid var(--c-border-strong);
  border-radius: var(--r-md);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.input:focus {
  outline: none;
  border-color: var(--c-indigo-500);
  box-shadow: var(--sh-focus);
}

.input:disabled {
  background: var(--c-surface-3);
  color: var(--c-text-muted);
  cursor: not-allowed;
}

.input--mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.input-label {
  display: block;
  margin-bottom: var(--sp-2);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  color: var(--c-text-sub);
}

.input-help {
  margin-top: var(--sp-2);
  font-size: var(--fs-body-sm);
  color: var(--c-text-muted);
}

.input--error {
  border-color: var(--c-danger);
}

.input-error {
  margin-top: var(--sp-2);
  font-size: var(--fs-body-sm);
  color: var(--c-danger);
}

/* ============================================================
   TAGS / BADGES / PILLS
   ============================================================ */

.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-3);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  border-radius: var(--r-sm);
  background: var(--c-surface-3);
  color: var(--c-text-sub);
}

.tag--gain {
  background: var(--c-gain-tint);
  color: var(--c-gain);
}

/* ============================================================
   TABLES
   ============================================================ */

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-body);
}

.table th,
.table td {
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  border-bottom: 1px solid var(--c-border);
}

.table th {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body-sm);
  color: var(--c-text-sub);
  background: var(--c-surface-2);
  letter-spacing: var(--ls-normal);
}

.table td {
  color: var(--c-text);
}

/* Numeric columns — right align, tabular */
.table .num,
.table th.num {
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   CALLOUTS
   ============================================================ */

.callout {
  display: flex;
  gap: var(--sp-4);
  padding: var(--sp-5);
  border-radius: var(--r-lg);
  border-left: 4px solid var(--c-indigo-500);
  background: var(--c-indigo-100);
  color: var(--c-navy-900);
}

.callout--gain {
  border-left-color: var(--c-gain);
  background: var(--c-gain-tint);
}

.callout--warn {
  border-left-color: var(--c-warn);
  background: var(--c-warn-tint);
}

.callout__title {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  margin-bottom: var(--sp-1);
}

/* ============================================================
   FAQ ACCORDION
   ============================================================ */

.faq-item {
  border-bottom: 1px solid var(--c-border);
  padding-block: var(--sp-5);
}

.faq-item__question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-4);
  font-family: var(--font-body);
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-semibold);
  color: var(--c-navy-900);
  cursor: pointer;
  list-style: none;
  transition: color var(--t-fast);
}

.faq-item__question::-webkit-details-marker {
  display: none;
}

.faq-item__answer {
  margin-top: var(--sp-4);
  color: var(--c-text-sub);
  line-height: var(--lh-relaxed);
}

.faq-item:hover .faq-item__question {
  color: var(--c-indigo-500);
}

/* ============================================================
   CURRENCY TOGGLE (INR/USD switcher)
   ============================================================ */

.currency-toggle {
  display: inline-flex;
  padding: 3px;
  background: var(--c-surface-3);
  border-radius: var(--r-md);
}

.currency-toggle__btn {
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  color: var(--c-text-sub);
  background: transparent;
  border: none;
  border-radius: calc(var(--r-md) - 3px);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}

.currency-toggle__btn[aria-pressed="true"] {
  background: var(--c-surface);
  color: var(--c-navy-900);
  box-shadow: var(--sh-card);
}

.currency-toggle__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ============================================================
   UTILITIES
   Single-purpose helpers. Declared last in components.css so they
   win over component defaults of equal specificity (e.g. a
   .card__title font-size, a .container layout) without !important.
   ============================================================ */

/* Accessible visually-hidden: removed from view but kept in the
   accessibility tree and focusable. Preferred over the
   opacity:0;width:0;height:0 hack, which still occupies hit area. */
.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* Spacing utilities — token-valued margin helpers that replace static
   inline style="margin-*:var(--sp-*)" overrides. */
.mt-4 { margin-top: var(--sp-4); }
.mt-6 { margin-top: var(--sp-6); }
.mb-6 { margin-bottom: var(--sp-6); }

/* Font-size utility — token-valued, replaces inline font-size overrides. */
.fs-h5 { font-size: var(--fs-h5); }

/* ─── Standard Financial Table Component (.fin-table) ──────────────────────
 * Canonical table design for FinsiderAI. Every data table on the site uses
 * this component as its visual foundation.
 *
 * Required HTML structure:
 *   <div class="fin-table-wrap">
 *     <div class="fin-table-scroll">
 *       <table class="fin-table" aria-label="…">
 *         <thead>
 *           <tr class="fin-thead-groups">   ← group header row (navy bg)
 *           <tr class="fin-thead-cols">     ← column header row (indigo tint)
 *         </thead>
 *         <tbody>
 *           <tr class="fin-row">
 *             <td class="fin-cell--left">  ← label/feature column
 *             <td data-label="…">          ← data column
 *
 * Token note: uses existing tokens only. Non-existent tokens from the spec
 * are mapped: --c-indigo-600→--c-navy-800, --c-indigo-700→--c-navy-900,
 * --c-indigo-50→--c-indigo-100, --c-text-primary→--c-text,
 * hover --c-indigo-50→--c-surface-3 (matches ybg-table hover).
 * ─────────────────────────────────────────────────────────────────────── */

/* Outer wrapper: rounded, clipped, bordered */
.fin-table-wrap {
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--c-border);
}

/* Horizontal scroll container */
.fin-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Base table */
.fin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-caption);
  background: var(--c-surface);
}

/* Group header row — brand navy, white text */
.fin-thead-groups th {
  background: var(--c-navy-800);
  color: #ffffff;
  font-size: 11px;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: var(--sp-2) var(--sp-3);
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.15);
  white-space: nowrap;
}

/* Rowspan anchor cells (e.g. Year, Feature): darkest navy, left-aligned */
.fin-thead-groups th[rowspan] {
  background: var(--c-navy-900);
  vertical-align: middle;
  text-align: center;
}

/* Column header row — light indigo tint */
.fin-thead-cols th {
  background: var(--c-indigo-100);
  color: var(--c-navy-900);
  font-size: 10px;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: var(--sp-2) var(--sp-3);
  text-align: center;
  border: 1px solid var(--c-indigo-200);
  border-bottom: 2px solid var(--c-indigo-200);
  white-space: nowrap;
}

/* Header alignment modifiers */
.fin-thead-cols th:first-child,
.fin-th--left   { text-align: center; }
.fin-th--center { text-align: center !important; }

/* Sub-label beneath header text (e.g. "LTCG 12.5% · STCG 20%") */
.fin-th-sub {
  display: block;
  font-size: 9px;
  font-weight: var(--fw-regular);
  color: var(--c-indigo-400);
  letter-spacing: 0.03em;
  margin-top: 2px;
  text-transform: none;
}

/* Body cell base */
.fin-row td {
  border: 1px solid var(--c-border);
  padding: var(--sp-2) var(--sp-3);
  text-align: right;
  color: var(--c-text);
  font-size: var(--fs-caption);
  vertical-align: middle;
  transition: background var(--t-fast);
}

/* Label column — left-aligned, medium weight */
.fin-row td:first-child,
.fin-cell--left {
  text-align: left;
  font-weight: var(--fw-medium);
  color: var(--c-text);
}

/* Cell alignment modifiers */
.fin-cell--center { text-align: center !important; }

/* Alternating row tint */
.fin-table tbody tr:nth-child(even) td { background: var(--c-surface-2); }

/* Hover highlight (matches ybg-table hover) */
.fin-table tbody tr:hover td { background: var(--c-surface-3); }

/* Semantic value modifiers */
.fin-cell--positive { color: var(--c-gain-dark); font-weight: var(--fw-medium); }
.fin-cell--warning  { color: var(--c-warn-dark); }
.fin-cell--accent   { color: var(--c-indigo-500); font-weight: var(--fw-semibold); }

/* Mobile: card layout.
   Scoped to :not(.ybg-table) so tables that ship their own mobile
   layout (like ybg-table) are not affected by these rules. */
@media (max-width: 760px) {
  .fin-table thead    { display: none; }
  .fin-table,
  .fin-table tbody    { display: block; width: 100%; }

  .fin-table-wrap {
    border: none;
    border-radius: 0;
    overflow: visible;
  }
  .fin-table-scroll { overflow: visible; }

  .fin-table:not(.ybg-table) .fin-row {
    display: block;
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    margin-bottom: var(--sp-3);
    overflow: hidden;
  }
  .fin-table:not(.ybg-table) .fin-row td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    text-align: right;
    border: none;
    border-bottom: 1px solid var(--c-border);
    padding: var(--sp-2) var(--sp-4);
    font-size: var(--fs-body-sm);
    transition: none;
  }
  .fin-table:not(.ybg-table) .fin-row td:last-child { border-bottom: none; }
  .fin-table:not(.ybg-table) .fin-row td::before {
    content: attr(data-label);
    font-weight: var(--fw-semibold);
    color: var(--c-indigo-500);
    text-align: left;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    flex-shrink: 0;
    margin-right: var(--sp-3);
  }
  /* Feature / label column: card header — no label prefix */
  .fin-table:not(.ybg-table) .fin-cell--left {
    display: block;
    background: var(--c-surface-2);
    border-bottom: 1px solid var(--c-border) !important;
    font-weight: var(--fw-bold);
    font-family: var(--font-display);
    font-size: var(--fs-body-sm);
    padding: var(--sp-3) var(--sp-4);
    text-align: left;
    color: var(--c-navy-900);
    letter-spacing: var(--ls-tight);
  }
  .fin-table:not(.ybg-table) .fin-cell--left::before { display: none; }

  /* Suppress alternating/hover backgrounds on mobile cards */
  .fin-table:not(.ybg-table) tbody tr:nth-child(even) td,
  .fin-table:not(.ybg-table) tbody tr:hover td { background: transparent; }
}