/* Genesis Credit Partners — Component recipes
   Class-based styles for the reusable primitives, so interaction states
   (hover / active / focus / disabled) are real CSS, not JS. The React
   components in /components are thin wrappers over these classes and consume
   only the CSS custom properties declared in the token files. */

/* ============================== Button ================================= */
.gcp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--weight-semibold);
  line-height: 1; letter-spacing: 0.01em; white-space: nowrap;
  padding: 10px 18px; border-radius: var(--radius-sm); border: 1px solid transparent;
  cursor: pointer; user-select: none; text-decoration: none;
  transition: background var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard);
}
.gcp-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.gcp-btn:active { transform: translateY(0.5px); }
.gcp-btn[disabled], .gcp-btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }
.gcp-btn--sm { padding: 7px 13px; font-size: var(--text-xs); }
.gcp-btn--lg { padding: 13px 24px; font-size: var(--text-body); }
.gcp-btn--block { display: flex; width: 100%; }

.gcp-btn--primary { background: var(--forest-900); color: #fff; border-color: var(--forest-900); }
.gcp-btn--primary:hover { background: var(--forest-700); border-color: var(--forest-700); }

.gcp-btn--secondary { background: #fff; color: var(--forest-900); border-color: var(--line-300); }
.gcp-btn--secondary:hover { border-color: var(--forest-900); background: var(--paper-50); }

.gcp-btn--ghost { background: transparent; color: var(--forest-900); border-color: transparent; }
.gcp-btn--ghost:hover { background: var(--sage-100); }

.gcp-btn--gold { background: var(--gold-500); color: var(--forest-950); border-color: var(--gold-500); }
.gcp-btn--gold:hover { background: var(--gold-600); border-color: var(--gold-600); }

.gcp-btn--danger { background: var(--data-negative); color: #fff; border-color: var(--data-negative); }
.gcp-btn--danger:hover { filter: brightness(1.08); }

/* Icon-only button */
.gcp-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: var(--radius-sm);
  background: transparent; color: var(--text-secondary); border: 1px solid transparent;
  cursor: pointer; transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}
.gcp-icon-btn:hover { background: var(--sage-100); color: var(--forest-900); }
.gcp-icon-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.gcp-icon-btn--bordered { border-color: var(--line-300); }
.gcp-icon-btn--sm { width: 28px; height: 28px; }

/* ============================== Fields ================================= */
.gcp-field { display: flex; flex-direction: column; gap: 6px; }
.gcp-label { font-family: var(--font-sans); font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--text-secondary); letter-spacing: 0.02em; }
.gcp-label .gcp-req { color: var(--data-negative); margin-left: 2px; }
.gcp-hint { font-size: var(--text-xs); color: var(--text-muted); }
.gcp-hint--error { color: var(--data-negative); }

.gcp-input, .gcp-select, .gcp-textarea {
  font-family: var(--font-sans); font-size: var(--text-body); color: var(--text-primary);
  background: #fff; border: 1px solid var(--line-300); border-radius: var(--radius-sm);
  padding: 9px 12px; width: 100%; line-height: 1.4;
  transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}
.gcp-input::placeholder, .gcp-textarea::placeholder { color: var(--ink-400); }
.gcp-input:hover, .gcp-select:hover, .gcp-textarea:hover { border-color: var(--ink-400); }
.gcp-input:focus, .gcp-select:focus, .gcp-textarea:focus { outline: none; border-color: var(--forest-700); box-shadow: 0 0 0 3px rgba(3,51,37,0.10); }
.gcp-input[aria-invalid="true"] { border-color: var(--data-negative); box-shadow: 0 0 0 3px var(--data-negative-bg); }
.gcp-input[disabled], .gcp-select[disabled] { background: var(--paper-100); color: var(--text-muted); cursor: not-allowed; }
.gcp-textarea { resize: vertical; min-height: 80px; }

.gcp-input-wrap { position: relative; display: flex; align-items: center; }
.gcp-input-wrap .gcp-input-icon { position: absolute; left: 11px; display: inline-flex; color: var(--ink-400); pointer-events: none; }
.gcp-input-wrap--icon .gcp-input { padding-left: 34px; }

.gcp-select-wrap { position: relative; }
.gcp-select { appearance: none; padding-right: 34px; cursor: pointer; }
.gcp-select-wrap::after { content: ""; position: absolute; right: 13px; top: 50%; width: 7px; height: 7px; border-right: 1.5px solid var(--ink-500); border-bottom: 1.5px solid var(--ink-500); transform: translateY(-65%) rotate(45deg); pointer-events: none; }

/* Checkbox */
.gcp-check { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-size: var(--text-body); color: var(--text-primary); }
.gcp-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.gcp-check__box { width: 18px; height: 18px; border-radius: var(--radius-xs); border: 1.5px solid var(--line-300); background: #fff; display: inline-flex; align-items: center; justify-content: center; transition: all var(--duration-fast) var(--ease-standard); flex: none; }
.gcp-check__box svg { width: 12px; height: 12px; stroke: #fff; opacity: 0; }
.gcp-check input:checked + .gcp-check__box { background: var(--forest-900); border-color: var(--forest-900); }
.gcp-check input:checked + .gcp-check__box svg { opacity: 1; }
.gcp-check input:focus-visible + .gcp-check__box { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.gcp-check input:disabled + .gcp-check__box { opacity: 0.45; }

/* Switch */
.gcp-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: var(--text-body); color: var(--text-primary); }
.gcp-switch input { position: absolute; opacity: 0; }
.gcp-switch__track { width: 38px; height: 22px; border-radius: 999px; background: var(--ink-300); position: relative; transition: background var(--duration-base) var(--ease-standard); flex: none; }
.gcp-switch__thumb { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform var(--duration-base) var(--ease-out); }
.gcp-switch input:checked + .gcp-switch__track { background: var(--forest-900); }
.gcp-switch input:checked + .gcp-switch__track .gcp-switch__thumb { transform: translateX(16px); }
.gcp-switch input:focus-visible + .gcp-switch__track { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* ============================== Card =================================== */
.gcp-card { background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: var(--space-6); }
.gcp-card--raised { box-shadow: var(--shadow-md); border-color: var(--line-100); }
.gcp-card--flat { box-shadow: none; }
.gcp-card--brand { background: var(--forest-900); color: #fff; border-color: var(--forest-800); }
.gcp-card--brand .gcp-eyebrow { color: var(--gold-300); }
.gcp-card--accent { border-top: var(--border-accent) solid var(--gold-500); }
.gcp-card--interactive { cursor: pointer; transition: box-shadow var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard); }
.gcp-card--interactive:hover { box-shadow: var(--shadow-lg); border-color: var(--line-300); transform: translateY(-2px); }

/* ============================== Badge / Tag ============================ */
.gcp-badge {
  display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-sans);
  font-size: var(--text-2xs); font-weight: var(--weight-semibold); letter-spacing: 0.06em; text-transform: uppercase;
  padding: 3px 9px; border-radius: var(--radius-xs); border: 1px solid transparent; line-height: 1.4;
}
.gcp-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.gcp-badge--performing { background: var(--data-positive-bg); color: #1F5C3B; border-color: #C7E0CF; }
.gcp-badge--distressed { background: var(--data-negative-bg); color: #8A2E20; border-color: #ECCBC4; }
.gcp-badge--watch { background: var(--data-warning-bg); color: #856425; border-color: #E8D6A8; }
.gcp-badge--neutral { background: var(--sky-100); color: var(--navy-800); border-color: var(--sky-200); }
.gcp-badge--brand { background: var(--sage-100); color: var(--forest-800); border-color: var(--sage-200); }
.gcp-badge--gold { background: var(--gold-100); color: #856425; border-color: var(--gold-300); }
.gcp-badge--solid { background: var(--forest-900); color: #fff; border-color: var(--forest-900); }

.gcp-tag {
  display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-sans);
  font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--text-secondary);
  padding: 4px 10px; border-radius: var(--radius-sm); background: var(--paper-100); border: 1px solid var(--line-200);
}
.gcp-tag--removable { padding-right: 6px; }
.gcp-tag__x { display: inline-flex; cursor: pointer; color: var(--ink-400); border-radius: 3px; }
.gcp-tag__x:hover { color: var(--text-primary); background: var(--line-200); }

/* ============================== Stat =================================== */
.gcp-stat { display: flex; flex-direction: column; gap: 3px; }
.gcp-stat__label { font-family: var(--font-sans); font-size: var(--text-2xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-muted); }
.gcp-stat__value { font-family: var(--font-mono); font-size: 28px; font-weight: var(--weight-medium); color: var(--text-primary); font-variant-numeric: tabular-nums; line-height: 1.05; }
.gcp-stat__value--brand { color: var(--forest-900); }
.gcp-stat__sub { font-size: var(--text-xs); color: var(--text-secondary); }
.gcp-stat__delta { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-medium); }
.gcp-stat__delta--up { color: var(--data-positive); }
.gcp-stat__delta--down { color: var(--data-negative); }

/* Rating / desirability dots (the deck's ●●● motif) */
.gcp-rating { display: inline-flex; gap: 4px; align-items: center; }
.gcp-rating__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--forest-900); }
.gcp-rating__dot--empty { background: transparent; border: 1.5px solid var(--ink-300); }

/* ============================== Avatar ================================= */
.gcp-avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--forest-900); color: var(--gold-300); font-family: var(--font-serif); font-weight: var(--weight-semibold); overflow: hidden; flex: none; }
.gcp-avatar img { width: 100%; height: 100%; object-fit: cover; }
.gcp-avatar--sm { width: 28px; height: 28px; font-size: 12px; }
.gcp-avatar--md { width: 40px; height: 40px; font-size: 15px; }
.gcp-avatar--lg { width: 56px; height: 56px; font-size: 20px; }
.gcp-avatar--square { border-radius: var(--radius-sm); }

/* ============================== Tabs =================================== */
.gcp-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line-200); }
.gcp-tab { font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-muted); padding: 10px 16px; cursor: pointer; background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); }
.gcp-tab:hover { color: var(--text-primary); }
.gcp-tab--active { color: var(--forest-900); border-bottom-color: var(--gold-500); font-weight: var(--weight-semibold); }

/* ============================== Tooltip ================================ */
.gcp-tooltip-wrap { position: relative; display: inline-flex; }
.gcp-tooltip { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: var(--forest-950); color: #fff; font-family: var(--font-sans); font-size: var(--text-xs); line-height: 1.4; padding: 7px 10px; border-radius: var(--radius-sm); white-space: nowrap; box-shadow: var(--shadow-md); opacity: 0; pointer-events: none; transition: opacity var(--duration-fast) var(--ease-standard); z-index: 20; }
.gcp-tooltip::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--forest-950); }
.gcp-tooltip-wrap:hover .gcp-tooltip, .gcp-tooltip-wrap:focus-within .gcp-tooltip { opacity: 1; }

/* ============================== Alert ================================== */
.gcp-alert { display: flex; gap: 12px; padding: 13px 16px; border-radius: var(--radius-sm); border: 1px solid var(--border-default); background: var(--surface-card); border-left-width: 3px; }
.gcp-alert__body { display: flex; flex-direction: column; gap: 2px; }
.gcp-alert__title { font-weight: var(--weight-semibold); font-size: var(--text-sm); color: var(--text-primary); }
.gcp-alert__text { font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.5; }
.gcp-alert__icon { flex: none; margin-top: 1px; }
.gcp-alert--info { border-left-color: var(--navy-500); background: var(--sky-100); }
.gcp-alert--info .gcp-alert__icon { color: var(--navy-700); }
.gcp-alert--success { border-left-color: var(--data-positive); background: var(--data-positive-bg); }
.gcp-alert--success .gcp-alert__icon { color: var(--data-positive); }
.gcp-alert--warning { border-left-color: var(--gold-600); background: var(--data-warning-bg); }
.gcp-alert--warning .gcp-alert__icon { color: var(--gold-600); }
.gcp-alert--danger { border-left-color: var(--data-negative); background: var(--data-negative-bg); }
.gcp-alert--danger .gcp-alert__icon { color: var(--data-negative); }

/* ============================== Divider =============================== */
.gcp-divider { border: 0; border-top: 1px solid var(--line-200); margin: 0; }
.gcp-divider--vertical { border-top: 0; border-left: 1px solid var(--line-200); height: auto; align-self: stretch; }
.gcp-divider--strong { border-color: var(--line-300); }