/* ============================================================================
   Compounder — Component library (canonical).
   Requires css/tokens.css. Link order: tokens.css → components.css → page CSS.
   These are the STANDARD classes for buttons, cards, pills/badges and chips.
   New and migrated markup should use these instead of bespoke per-feature classes.
   ========================================================================== */

/* ---- Buttons -------------------------------------------------------------
   Default shape is a pill (marketing/legal). Product/terminal surfaces that
   want the sharper radius add `.btn-square`. Icon-only buttons add `.btn-icon`. */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-4);
  border:1px solid transparent; border-radius:var(--r-pill);
  padding:var(--space-5) var(--space-9);
  font-family:var(--font-sans); font-size:0.9rem; font-weight:600; line-height:1.1;
  letter-spacing:-0.005em; cursor:pointer; white-space:nowrap; text-decoration:none;
  transition:background var(--transition), border-color var(--transition),
             color var(--transition), box-shadow var(--transition), transform var(--transition-fast);
}
.btn:disabled,.btn[disabled]{opacity:.5; cursor:not-allowed;}
.btn:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}

.btn-primary{background:var(--accent); border-color:var(--accent); color:var(--on-accent);}
.btn-primary:hover{background:var(--accent-strong); border-color:var(--accent-strong);}

.btn-ghost{background:var(--surface); border-color:var(--border-strong); color:var(--text-2);}
.btn-ghost:hover{background:var(--surface-2); border-color:var(--muted-2); color:var(--text);}

.btn-danger{background:var(--surface); border-color:var(--negative-soft); color:var(--negative);}
.btn-danger:hover{background:var(--negative-soft); border-color:var(--negative);}

.btn-brand{background:var(--grad-brand); border:none; color:var(--on-accent);}
.btn-brand:hover{filter:brightness(1.08);}

/* Shape / size modifiers */
.btn-square{border-radius:var(--r-sm);}
.btn-sm{padding:var(--space-3) var(--space-6); font-size:0.82rem;}
.btn-lg{padding:var(--space-6) var(--space-10); font-size:0.95rem;}
.btn-block{width:100%;}
.btn-icon{width:38px; height:38px; padding:0; display:grid; place-items:center; border-radius:var(--r-sm);}

/* ---- Cards --------------------------------------------------------------- */
.card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:var(--space-12); box-shadow:var(--shadow-sm);
}
.card-inset{background:var(--surface-2);}     /* inset tile look */
.card-flush{padding:0;}                        /* layout-only wrapper */
.card-md{border-radius:var(--r-md); padding:var(--space-7) var(--space-8);}
.card-lg-shadow{box-shadow:var(--shadow-lg);}  /* modals */

/* ---- Pills / Badges ------------------------------------------------------
   `.pill` = interactive/status token; `.badge` = smaller static tag.
   Tone modifiers set text + soft background consistently from tokens. */
.pill,.badge{
  display:inline-flex; align-items:center; gap:var(--space-3);
  border:1px solid transparent; border-radius:var(--r-pill);
  font-weight:700; letter-spacing:0.02em; white-space:nowrap; line-height:1.1;
}
.pill{padding:var(--space-3) var(--space-5); font-size:0.72rem;}
.badge{padding:var(--space-1) var(--space-4); font-size:0.68rem;}

.tone-accent  {color:var(--accent);    background:var(--accent-soft);    border-color:var(--accent-ring);}
.tone-positive{color:var(--positive);  background:var(--positive-soft);  border-color:var(--positive-soft);}
.tone-negative{color:var(--negative);  background:var(--negative-soft);  border-color:var(--negative-soft);}
.tone-warn    {color:var(--accent-2);  background:var(--accent-2-soft);  border-color:var(--accent-2-soft);}
.tone-neutral {color:var(--muted);     background:var(--surface-2);      border-color:var(--border);}

/* ---- Chips (mini label+value cards, not pills) --------------------------- */
.chip{
  display:grid; gap:var(--space-2);
  padding:var(--space-4) var(--space-6); border-radius:var(--r-sm);
  border:1px solid var(--border); background:var(--surface-2);
}
.chip > span{color:var(--muted); font-size:0.66rem; font-weight:700; letter-spacing:0.07em; text-transform:uppercase;}
.chip > strong{font-size:0.9rem; font-weight:700; font-variant-numeric:tabular-nums;}



/* ============================================================================
   Modern UI refresh — premium cards, controls and Portfolio surfaces
   ========================================================================== */
.primary-btn,
.secondary-btn,
.btn {
  min-height: 40px;
  border-radius: 12px;
  font-weight: 700;
  letter-spacing: -0.01em;
  transition: transform 140ms ease, background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, color 160ms ease;
}
.primary-btn,
.btn-primary,
.btn-brand {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
  border-color: color-mix(in srgb, var(--accent) 72%, var(--border-strong));
  color: var(--on-accent);
  box-shadow: 0 10px 26px color-mix(in srgb, var(--accent) 24%, transparent), 0 1px 0 rgba(255,255,255,.18) inset;
}
@media (hover: hover) and (pointer: fine) {
  .primary-btn:hover,
  .btn-primary:hover,
  .btn-brand:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 34px color-mix(in srgb, var(--accent) 30%, transparent), 0 1px 0 rgba(255,255,255,.24) inset;
  }
}
.secondary-btn,
.btn-ghost {
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 88%, white 12%), var(--surface));
  border-color: var(--ui-border-soft, var(--border));
  color: var(--text-2);
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset;
}
@media (hover: hover) and (pointer: fine) {
  .secondary-btn:hover,
  .btn-ghost:hover {
    transform: translateY(-1px);
    border-color: var(--ui-border-strong, var(--border-strong));
    color: var(--text);
    box-shadow: var(--shadow-sm);
  }
}
.primary-btn:active,
.secondary-btn:active,
.btn:active { transform: translateY(0); }

.symbol-info-panel,
.symbol-profile-card,
.symbol-metric-card,
.portfolio-kpi,
.table-wrap {
  border: 1px solid var(--ui-border-soft, var(--border));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--panel-strong) 78%, transparent), color-mix(in srgb, var(--panel) 94%, transparent)),
    var(--panel);
  box-shadow: var(--ui-shadow-premium, var(--shadow-md));
}
.symbol-info-panel,
.symbol-profile-card,
.symbol-metric-card { border-radius: 16px; }
@media (hover: hover) and (pointer: fine) {
  .symbol-info-panel:hover,
  .symbol-profile-card:hover,
  .symbol-metric-card:hover { border-color: var(--ui-border-strong, var(--border-strong)); }
}

.panel-head {
  gap: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--hairline);
}
.panel-head h3 {
  letter-spacing: -0.025em;
}
.panel-badge,
.badge,
.pill {
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
  background: color-mix(in srgb, var(--accent-soft) 72%, transparent);
  color: color-mix(in srgb, var(--accent-strong) 82%, var(--text));
  border-radius: var(--r-pill);
  font-weight: 800;
  letter-spacing: .02em;
}

.app-select,
input,
textarea,
select {
  border-color: var(--ui-border-soft, var(--border));
  background: color-mix(in srgb, var(--surface-2) 86%, black 4%);
  color: var(--text);
  box-shadow: 0 1px 0 rgba(255,255,255,.035) inset;
}
.app-select:focus,
input:focus,
textarea:focus,
select:focus {
  border-color: color-mix(in srgb, var(--accent) 72%, var(--border-strong));
  box-shadow: 0 0 0 4px var(--ui-focus, var(--accent-ring));
  outline: none;
}

.table-wrap {
  border-radius: 16px;
  overflow: auto;
}
.market-table-floating,
table {
  border-collapse: separate;
  border-spacing: 0;
}
.market-table-floating th,
table th {
  background: color-mix(in srgb, var(--surface-2) 78%, var(--panel-strong));
  color: var(--muted);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .055em;
  text-transform: uppercase;
}
.market-table-floating td,
table td {
  border-color: var(--hairline);
  font-variant-numeric: tabular-nums;
}
@media (hover: hover) and (pointer: fine) {
  .market-table-floating tbody tr:hover,
  table tbody tr:hover {
    background: color-mix(in srgb, var(--accent-soft) 38%, transparent);
  }
}

@media (max-width: 820px), (pointer: coarse) {
  .primary-btn,
  .secondary-btn,
  .btn,
  button,
  select,
  input[type="button"],
  input[type="submit"] { min-height: 44px; }
}


@media (prefers-reduced-motion: reduce) {
  .primary-btn,
  .secondary-btn,
  .btn,
  .portfolio-kpi { transition: none; }
  .primary-btn:hover,
  .secondary-btn:hover,
  .btn:hover,
  .portfolio-kpi:hover { transform: none; }
}