/* =============================================================
   crypto-tools shared components
   Depends on shared/theme.css (CSS custom properties).
   Use these classes in HTML to get unified UI primitives.
   ============================================================= */

/* ----- Buttons ------------------------------------------------ */
.ct-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ct-sp-2);
  padding: var(--ct-sp-2) var(--ct-sp-4);
  font-family: var(--ct-font-body);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  border: 0;
  border-radius: var(--ct-r-md);
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.1s, box-shadow 0.15s, background 0.15s;
  background: linear-gradient(135deg, var(--ct-accent), var(--ct-accent-hover));
  color: var(--ct-accent-text);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05);
}
.ct-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 16px var(--ct-accent-soft); }
.ct-btn:active { transform: translateY(0); }
.ct-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* ----- Inputs ------------------------------------------------- */
.ct-input,
.ct-select {
  display: inline-block;
  box-sizing: border-box;
  padding: var(--ct-sp-2) var(--ct-sp-3);
  font-family: var(--ct-font-body);
  font-size: 13px;
  color: var(--ct-text);
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--ct-border-strong);
  border-radius: var(--ct-r-md);
  transition: border-color 0.15s, background 0.15s;
  outline: none;
}
.ct-input::placeholder { color: var(--ct-text-faint); }
.ct-input:hover,
.ct-select:hover { border-color: var(--ct-border-accent); }
.ct-input:focus,
.ct-select:focus { border-color: var(--ct-accent); background: rgba(0, 0, 0, 0.4); }
.ct-input-mono { font-family: var(--ct-font-mono); }

/* ----- Cards / panels ----------------------------------------- */
.ct-card-flat {
  background: var(--ct-bg-elevated);
  border: 1px solid var(--ct-border);
  border-radius: var(--ct-r-md);
  padding: var(--ct-sp-4);
}

/* ----- Container wrapper -------------------------------------- */
/* Use on the main page wrapper to get a consistent max-width across
   tools. Default matches hub/funding/hashdive/bitget; add `--wide`
   for data-heavy tools (analyzer, polytracker). */
.ct-container {
  width: 100%;
  max-width: var(--ct-container);
  margin: 0 auto;
  padding: 0 var(--ct-sp-4);
}
.ct-container--wide { max-width: var(--ct-container-wide); }

/* ----- Stat cards --------------------------------------------- */
/* Base: label above value, mono typography, elevated bg. Variants:
   --centered (bba-stat-pill look), --hero (larger value like funding).
   The wrapping grid is tool-local — we only style the card itself. */
.ct-stat-card {
  background: var(--ct-bg-elevated);
  border: 1px solid var(--ct-border);
  border-radius: var(--ct-r-md);
  padding: var(--ct-sp-4);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  box-shadow: var(--ct-shadow-sm);
  transition: border-color 0.15s, background 0.15s;
}
.ct-stat-card--centered { align-items: center; text-align: center; }
.ct-stat-card--hero     { padding: var(--ct-sp-6); gap: var(--ct-sp-2); }
.ct-stat-card__label {
  font-family: var(--ct-font-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--ct-text-dim);
  text-transform: uppercase;
  letter-spacing: 1.5px;
}
.ct-stat-card__value {
  font-family: var(--ct-font-mono);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ct-text);
}
.ct-stat-card--hero .ct-stat-card__value { font-size: 1.5rem; }
.ct-stat-card__label--positive,
.ct-stat-card__value--positive { color: var(--ct-positive); }
.ct-stat-card__label--negative,
.ct-stat-card__value--negative { color: var(--ct-negative); }

/* ----- Tabs (segmented control) ------------------------------- */
/* Used for timeframe pickers, limit switchers, any 2-5 mutually
   exclusive options. Wraps `button`s (or any focusable children). */
.ct-tabs {
  display: inline-flex;
  background: var(--ct-bg-input-strong);
  border: 1px solid var(--ct-border);
  padding: 4px;
  border-radius: var(--ct-r-md);
  gap: 2px;
}
.ct-tabs__item {
  padding: var(--ct-sp-2) var(--ct-sp-4);
  border: 0;
  background: transparent;
  color: var(--ct-text-muted);
  font-family: var(--ct-font-body);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  border-radius: var(--ct-r-sm);
  transition: color 0.15s, background 0.15s;
}
.ct-tabs__item:hover { color: var(--ct-text); }
.ct-tabs__item.is-active {
  background: var(--ct-accent-hover);
  color: var(--ct-accent-text);
}

/* ----- Modal -------------------------------------------------- */
/* Single shared modal primitive. Toggle `.is-open` on the backdrop
   and `.is-visible` on the content to animate in; mirror with
   reversed classes for close. `--chart` variant for wide graph modals. */
.ct-modal {
  position: fixed;
  inset: 0;
  background: var(--ct-bg-overlay);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 50;
  display: none;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s;
}
.ct-modal.is-open    { display: flex; }
.ct-modal.is-visible { opacity: 1; }
.ct-modal--chart     { z-index: 60; }

.ct-modal__content {
  background: var(--ct-bg-elevated);
  border: 1px solid var(--ct-border-strong);
  border-radius: var(--ct-r-lg);
  padding: var(--ct-sp-6);
  width: calc(100% - 32px);
  max-width: 32rem;
  margin: 0 var(--ct-sp-4);
  box-shadow: var(--ct-shadow-md);
  display: flex;
  flex-direction: column;
  max-height: 80vh;
  transform: scale(0.95);
  transition: transform 0.3s;
}
.ct-modal__content.is-in { transform: scale(1); }
.ct-modal__content--chart {
  max-width: 64rem;
  max-height: none;
  height: 600px;
  padding: 0;
  overflow: hidden;
}

.ct-modal__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--ct-sp-4);
  padding-bottom: var(--ct-sp-4);
  border-bottom: 1px solid var(--ct-border);
}
.ct-modal__title {
  font-family: var(--ct-font-body);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ct-text);
  margin: 0;
  letter-spacing: -0.2px;
}
.ct-modal__desc {
  font-size: 13px;
  color: var(--ct-text-muted);
  margin: 4px 0 0;
}
.ct-modal__close {
  background: var(--ct-bg-input);
  color: var(--ct-text-muted);
  border: 0;
  border-radius: var(--ct-r-md);
  padding: var(--ct-sp-2);
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: color 0.15s, background 0.15s;
}
.ct-modal__close:hover {
  color: var(--ct-text);
  background: var(--ct-bg-hover);
}
.ct-modal__body {
  overflow-y: auto;
  padding-right: var(--ct-sp-2);
  flex-grow: 1;
}
.ct-modal__footer {
  margin-top: var(--ct-sp-4);
  padding-top: var(--ct-sp-4);
  border-top: 1px solid var(--ct-border);
  text-align: right;
}

/* ----- Tables ------------------------------------------------- */
.ct-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  font-family: var(--ct-font-body);
  color: var(--ct-text);
}
.ct-table th {
  text-align: left;
  padding: var(--ct-sp-3) var(--ct-sp-3);
  color: var(--ct-text-muted);
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  background: rgba(124, 58, 237, 0.04);
  border-bottom: 1px solid var(--ct-border-accent);
  position: sticky;
  top: 0;
  cursor: default;
  user-select: none;
}
.ct-table th.sortable { cursor: pointer; }
.ct-table th.sortable:hover { color: var(--ct-text); background: var(--ct-accent-soft); }
.ct-table td {
  padding: var(--ct-sp-3) var(--ct-sp-3);
  border-bottom: 1px solid var(--ct-border);
  font-family: var(--ct-font-mono);
  font-size: 12px;
}
.ct-table tr:hover td { background: var(--ct-bg-hover); }

/* Dense variant — tighter padding + mono header for data-heavy tools
   (analyzer). Keeps the same 10px uppercase header typography as base. */
.ct-table--dense th {
  padding: var(--ct-sp-3) var(--ct-sp-2);
  font-family: var(--ct-font-mono);
  background: var(--ct-bg-input);
  border-bottom-color: var(--ct-border);
}
.ct-table--dense td {
  padding: var(--ct-sp-2);
  color: var(--ct-text-muted);
}

/* Horizontal-scroll wrapper — for wide tables that should overflow gracefully
   rather than push the page wider than the viewport. Negative margin + matching
   padding bleed the scroll area to the page edges so the table feels full-width
   without losing the body gutter. Set --ct-table-scroll-gutter to match the
   host's body horizontal padding (default 24px). */
.ct-table-scroll {
  --ct-table-scroll-gutter: 24px;
  overflow-x: auto;
  margin: 0 calc(var(--ct-table-scroll-gutter) * -1);
  padding: 0 var(--ct-table-scroll-gutter);
}

/* ----- Empty state ------------------------------------------- */
.ct-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 2rem;
  color: var(--ct-text-muted);
  font-size: 0.9rem;
  text-align: center;
}
.ct-empty-state--compact { padding: 20px; }
.ct-empty-state--italic { font-style: italic; }

/* ----- Badge ------------------------------------------------- */
.ct-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 12px;
  color: #fff;
  background: #8b5cf6;        /* default / "other" — accent purple */
}
.ct-badge--yes      { background: #22c55e; }
.ct-badge--no       { background: #ef4444; }
.ct-badge--hold-yes { background: #3b82f6; }
.ct-badge--hold-no  { background: #9ca3af; }
.ct-badge--hold-unk { background: #f59e0b; }

/* ----- Sign-colored text ------------------------------------- */
/* Tools use assorted class names for the same idea; define them all here
   so the per-tool CSS doesn't redeclare them. `!important` because these
   semantic colors must win over typographic defaults set by `.some-table td`
   etc. (per-tool CSS used !important for the same reason). */
.positive,
.positive-text,
.value-positive,
.bba-pos-text { color: var(--ct-positive) !important; }
.negative,
.negative-text,
.value-negative,
.bba-neg-text { color: var(--ct-negative) !important; }
.neutral,
.bba-neutral-text { color: var(--ct-text-muted) !important; }

/* ----- Keyframes --------------------------------------------- */
@keyframes ct-spin { to { transform: rotate(360deg); } }