/* =============================================================
   PropArena — Foundational Component Styles
   Consumes tokens from colors_and_type.css
   All sizing uses logical properties for RTL.
   ============================================================= */

/* ---------- BUTTON ---------- */
.pa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font: var(--type-label);
  letter-spacing: 0.01em;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: background var(--dur-150) var(--ease-out),
              color var(--dur-150) var(--ease-out),
              border-color var(--dur-150) var(--ease-out),
              box-shadow var(--dur-150) var(--ease-out),
              transform var(--dur-100) var(--ease-out);
  padding-block: 8px;
  padding-inline: 14px;
  min-block-size: 36px;
  position: relative;
}
.pa-btn:focus-visible { box-shadow: var(--focus-ring); }
.pa-btn[disabled], .pa-btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}
.pa-btn[aria-busy="true"] { color: transparent; pointer-events: none; }
.pa-btn[aria-busy="true"]::after {
  content: "";
  position: absolute;
  inline-size: 14px;
  block-size: 14px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-block-start-color: transparent;
  color: var(--surface-fg-on-accent);
  animation: pa-spin 700ms linear infinite;
}
.pa-btn[aria-busy="true"].pa-btn--secondary::after,
.pa-btn[aria-busy="true"].pa-btn--ghost::after { color: var(--surface-fg-1); }

/* sizes */
.pa-btn--xs { min-block-size: 24px; padding-block: 4px; padding-inline: 8px; font-size: 12px; }
.pa-btn--sm { min-block-size: 32px; padding-block: 6px; padding-inline: 12px; }
.pa-btn--lg { min-block-size: 44px; padding-block: 10px; padding-inline: 18px; font-size: 14px; }
.pa-btn--full { inline-size: 100%; }

/* primary — solid cyan accent + glow */
.pa-btn--primary {
  background: var(--color-accent);
  color: var(--surface-fg-on-accent);
  font-weight: 600;
  box-shadow: var(--glow-accent);
}
.pa-btn--primary:hover { background: var(--color-accent-emphasis); box-shadow: 0 0 28px rgba(34,211,238,.55); }
.pa-btn--primary:active { transform: translateY(1px); box-shadow: var(--glow-accent); }

/* secondary — bordered */
.pa-btn--secondary {
  background: transparent;
  color: var(--surface-fg-1);
  border-color: var(--surface-border-strong);
}
.pa-btn--secondary:hover { background: var(--surface-bg-3); border-color: var(--color-accent); }
.pa-btn--secondary:active { background: var(--surface-bg-4); }

/* ghost */
.pa-btn--ghost { background: transparent; color: var(--surface-fg-1); }
.pa-btn--ghost:hover { background: var(--surface-bg-3); }

/* danger */
.pa-btn--danger {
  background: var(--color-danger);
  color: #fff;
  font-weight: 600;
}
.pa-btn--danger:hover { background: var(--red-500); box-shadow: var(--glow-danger); }

/* link */
.pa-btn--link {
  background: transparent;
  color: var(--color-accent);
  min-block-size: auto;
  padding: 0;
  border-radius: 0;
}
.pa-btn--link:hover { color: var(--color-accent-emphasis); text-decoration: underline; }

/* icon-only */
.pa-btn--icon { padding-inline: 8px; padding-block: 8px; min-block-size: 36px; min-inline-size: 36px; }
.pa-btn--icon.pa-btn--sm { min-block-size: 32px; min-inline-size: 32px; }
.pa-btn--icon.pa-btn--lg { min-block-size: 44px; min-inline-size: 44px; }

/* ---------- INPUT ---------- */
.pa-field { display: flex; flex-direction: column; gap: 6px; }
.pa-label {
  font: var(--type-label);
  color: var(--surface-fg-2);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.pa-label .pa-required { color: var(--color-danger); }
.pa-help { font: var(--type-caption); color: var(--surface-fg-3); }
.pa-help--error { color: var(--color-danger); display: inline-flex; align-items: center; gap: 4px; }
.pa-help--success { color: var(--color-success); display: inline-flex; align-items: center; gap: 4px; }

.pa-input,
.pa-textarea,
.pa-select {
  font: var(--type-body-sm);
  color: var(--surface-fg-1);
  background: var(--surface-bg-2);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  padding-block: 8px;
  padding-inline: 12px;
  min-block-size: 36px;
  inline-size: 100%;
  transition: border-color var(--dur-150) var(--ease-out), box-shadow var(--dur-150) var(--ease-out);
}
.pa-input::placeholder, .pa-textarea::placeholder { color: var(--surface-fg-3); }
.pa-input:hover, .pa-textarea:hover, .pa-select:hover { border-color: var(--surface-border-strong); }
.pa-input:focus, .pa-textarea:focus, .pa-select:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--tint-accent-20);
}
.pa-input[aria-invalid="true"] { border-color: var(--color-danger); }
.pa-input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px var(--tint-danger-10); }
.pa-input[disabled] { opacity: 0.5; cursor: not-allowed; }

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

.pa-input-group {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  background: var(--surface-bg-2);
  overflow: hidden;
}
.pa-input-group:focus-within { border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--tint-accent-20); }
.pa-input-group__affix {
  display: inline-flex;
  align-items: center;
  padding-inline: 10px;
  font: var(--type-label);
  color: var(--surface-fg-2);
  background: var(--surface-bg-3);
  border-inline-end: 1px solid var(--surface-border);
}
.pa-input-group__affix--suffix { border-inline-end: 0; border-inline-start: 1px solid var(--surface-border); }
.pa-input-group .pa-input { border: 0; box-shadow: none; background: transparent; }

/* ---------- CHECKBOX / RADIO / SWITCH ---------- */
.pa-check {
  appearance: none;
  inline-size: 16px;
  block-size: 16px;
  border: 1.5px solid var(--surface-border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-bg-2);
  display: inline-grid;
  place-content: center;
  cursor: pointer;
  transition: background var(--dur-100), border-color var(--dur-100);
}
.pa-check::before {
  content: "";
  inline-size: 10px;
  block-size: 10px;
  transform: scale(0);
  transition: transform var(--dur-100) var(--ease-out);
  background: var(--surface-fg-on-accent);
  clip-path: polygon(14% 47%, 0 60%, 40% 100%, 100% 20%, 86% 8%, 38% 70%);
}
.pa-check:checked { background: var(--color-accent); border-color: var(--color-accent); }
.pa-check:checked::before { transform: scale(1); }
.pa-check--radio { border-radius: 50%; }
.pa-check--radio::before { border-radius: 50%; clip-path: none; inline-size: 8px; block-size: 8px; background: var(--surface-fg-on-accent); }
.pa-check:focus-visible { box-shadow: var(--focus-ring); }

.pa-switch {
  --w: 36px; --h: 20px;
  position: relative;
  inline-size: var(--w);
  block-size: var(--h);
  background: var(--surface-bg-3);
  border: 1px solid var(--surface-border-strong);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background var(--dur-150);
  flex-shrink: 0;
}
.pa-switch::after {
  content: "";
  position: absolute;
  inset-inline-start: 2px;
  inset-block-start: 1px;
  inline-size: 14px;
  block-size: 14px;
  border-radius: 50%;
  background: var(--surface-fg-1);
  transition: inset-inline-start var(--dur-150) var(--ease-out), background var(--dur-150);
}
.pa-switch[aria-checked="true"] { background: var(--color-accent); border-color: var(--color-accent); }
.pa-switch[aria-checked="true"]::after { inset-inline-start: 18px; background: var(--surface-fg-on-accent); }
.pa-switch:focus-visible { box-shadow: var(--focus-ring); }

/* ---------- BADGE / CHIP ---------- */
.pa-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding-block: 2px;
  padding-inline: 8px;
  border-radius: var(--radius-full);
  font: var(--type-overline);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--surface-bg-3);
  color: var(--surface-fg-2);
  border: 1px solid var(--surface-border);
}
.pa-badge--dot::before {
  content: "";
  inline-size: 6px;
  block-size: 6px;
  border-radius: 50%;
  background: currentColor;
}
.pa-badge--active    { background: var(--tint-success-10); color: var(--color-success); border-color: transparent; }
.pa-badge--breached  { background: var(--tint-danger-10);  color: var(--color-danger);  border-color: transparent; }
.pa-badge--pending   { background: var(--tint-warning-10); color: var(--color-warning); border-color: transparent; }
.pa-badge--info      { background: var(--tint-accent-10);  color: var(--color-accent);  border-color: transparent; }
.pa-badge--funded    { background: var(--color-accent); color: var(--surface-fg-on-accent); border-color: transparent; }
.pa-badge--inactive  { background: var(--surface-bg-3); color: var(--surface-fg-3); }

.pa-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-block: 4px;
  padding-inline: 10px;
  border-radius: var(--radius-full);
  background: var(--surface-bg-3);
  border: 1px solid var(--surface-border);
  font: var(--type-label);
  color: var(--surface-fg-1);
}
.pa-chip__close {
  inline-size: 14px;
  block-size: 14px;
  border-radius: 50%;
  background: transparent;
  border: 0;
  color: var(--surface-fg-3);
  cursor: pointer;
  display: inline-grid;
  place-content: center;
}
.pa-chip__close:hover { color: var(--surface-fg-1); background: var(--surface-bg-4); }

/* ---------- CARD ---------- */
.pa-card {
  background: var(--surface-bg-2);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.pa-card--interactive {
  cursor: pointer;
  transition: border-color var(--dur-150), box-shadow var(--dur-150), transform var(--dur-150);
}
.pa-card--interactive:hover {
  border-color: var(--surface-border-accent);
  box-shadow: var(--shadow-lg);
  transform: translateY(-1px);
}

/* ---------- STAT / KPI ---------- */
.pa-stat__label {
  font: var(--type-overline);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--surface-fg-3);
  margin-block-end: 6px;
}
.pa-stat__value {
  font: var(--type-mono-lg);
  font-variant-numeric: tabular-nums;
  color: var(--surface-fg-1);
}
.pa-stat__delta {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font: var(--type-mono);
  font-size: 13px;
}
.pa-stat__delta--up { color: var(--color-profit); }
.pa-stat__delta--down { color: var(--color-loss); }

/* ---------- PROGRESS ---------- */
.pa-progress {
  block-size: 6px;
  inline-size: 100%;
  background: var(--surface-bg-3);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.pa-progress__bar {
  block-size: 100%;
  background: var(--color-accent);
  box-shadow: 0 0 8px var(--color-accent);
  transition: inline-size var(--dur-500) var(--ease-out);
}
.pa-progress--success .pa-progress__bar { background: var(--color-success); box-shadow: 0 0 8px var(--color-success); }
.pa-progress--warning .pa-progress__bar { background: var(--color-warning); box-shadow: 0 0 8px var(--color-warning); }
.pa-progress--danger  .pa-progress__bar { background: var(--color-danger);  box-shadow: 0 0 8px var(--color-danger);  }

/* ---------- TABLE ---------- */
.pa-table {
  inline-size: 100%;
  border-collapse: collapse;
  font: var(--type-body-sm);
}
.pa-table th {
  text-align: start;
  font: var(--type-overline);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--surface-fg-3);
  background: var(--surface-bg-3);
  padding: 8px 12px;
  border-block-end: 1px solid var(--surface-border);
  white-space: nowrap;
}
.pa-table td {
  padding: 10px 12px;
  border-block-end: 1px solid var(--surface-border);
  color: var(--surface-fg-1);
}
.pa-table tbody tr:hover { background: var(--surface-bg-3); }
.pa-table--dense td, .pa-table--dense th { padding: 6px 10px; }
.pa-table .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: end; }

/* ---------- TABS ---------- */
.pa-tabs { display: flex; gap: 0; border-block-end: 1px solid var(--surface-border); }
.pa-tab {
  background: transparent;
  border: 0;
  color: var(--surface-fg-2);
  padding: 10px 14px;
  font: var(--type-label);
  cursor: pointer;
  position: relative;
  transition: color var(--dur-150);
}
.pa-tab:hover { color: var(--surface-fg-1); }
.pa-tab[aria-selected="true"] { color: var(--color-accent); }
.pa-tab[aria-selected="true"]::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: -1px;
  block-size: 2px;
  background: var(--color-accent);
  box-shadow: 0 0 8px var(--color-accent);
}

.pa-segmented {
  display: inline-flex;
  padding: 3px;
  background: var(--surface-bg-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--surface-border);
}
.pa-segmented__item {
  padding: 6px 12px;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  font: var(--type-label);
  color: var(--surface-fg-2);
  cursor: pointer;
}
.pa-segmented__item[aria-selected="true"] {
  background: var(--surface-bg-1);
  color: var(--surface-fg-1);
  box-shadow: var(--shadow-sm);
}

/* ---------- TOOLTIP ---------- */
.pa-tooltip {
  background: var(--gray-950);
  color: var(--gray-50);
  border: 1px solid var(--surface-border-strong);
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  font: var(--type-caption);
  box-shadow: var(--shadow-md);
}

/* ---------- ALERT / BANNER ---------- */
.pa-alert {
  display: flex;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--surface-border);
  background: var(--surface-bg-2);
  align-items: flex-start;
}
.pa-alert__icon { flex-shrink: 0; margin-block-start: 2px; }
.pa-alert__body { flex: 1; }
.pa-alert__title { font: var(--type-h6); text-transform: none; letter-spacing: 0; color: var(--surface-fg-1); margin-block-end: 2px; }
.pa-alert__msg { font: var(--type-body-sm); color: var(--surface-fg-2); }
.pa-alert--info    { background: var(--tint-accent-10);  border-color: transparent; }
.pa-alert--info .pa-alert__icon    { color: var(--color-accent); }
.pa-alert--success { background: var(--tint-success-10); border-color: transparent; }
.pa-alert--success .pa-alert__icon { color: var(--color-success); }
.pa-alert--warning { background: var(--tint-warning-10); border-color: transparent; }
.pa-alert--warning .pa-alert__icon { color: var(--color-warning); }
.pa-alert--danger  { background: var(--tint-danger-10);  border-color: transparent; }
.pa-alert--danger .pa-alert__icon  { color: var(--color-danger); }

/* ---------- TOAST ---------- */
.pa-toast {
  background: var(--surface-bg-2);
  border: 1px solid var(--surface-border-strong);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  box-shadow: var(--shadow-lg);
  min-inline-size: 280px;
}
.pa-toast--success { border-inline-start: 3px solid var(--color-success); }
.pa-toast--danger  { border-inline-start: 3px solid var(--color-danger); }
.pa-toast--info    { border-inline-start: 3px solid var(--color-accent); }

/* ---------- AVATAR ---------- */
.pa-avatar {
  inline-size: 36px;
  block-size: 36px;
  border-radius: 50%;
  background: var(--surface-bg-3);
  display: inline-grid;
  place-content: center;
  font: var(--type-label);
  color: var(--surface-fg-1);
  position: relative;
  border: 1px solid var(--surface-border);
}
.pa-avatar--sm { inline-size: 24px; block-size: 24px; font-size: 11px; }
.pa-avatar--lg { inline-size: 48px; block-size: 48px; font-size: 16px; }
.pa-avatar__dot {
  position: absolute;
  inset-block-end: 0;
  inset-inline-end: 0;
  inline-size: 10px;
  block-size: 10px;
  border-radius: 50%;
  border: 2px solid var(--surface-bg-1);
  background: var(--color-success);
}

/* ---------- KBD ---------- */
.pa-kbd {
  font: 600 11px/16px var(--font-mono);
  background: var(--surface-bg-3);
  border: 1px solid var(--surface-border-strong);
  border-block-end-width: 2px;
  border-radius: var(--radius-sm);
  padding: 1px 6px;
  color: var(--surface-fg-2);
}

/* ---------- SKELETON ---------- */
.pa-skel {
  background: linear-gradient(90deg, var(--surface-bg-3), var(--surface-bg-4), var(--surface-bg-3));
  background-size: 200% 100%;
  border-radius: var(--radius-sm);
  animation: pa-shimmer 1500ms linear infinite;
  block-size: 12px;
  inline-size: 100%;
}
@keyframes pa-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@keyframes pa-spin { to { transform: rotate(360deg); } }

/* ---------- RISK GAUGE (donut) ---------- */
.pa-gauge {
  --val: 50;
  --size: 96px;
  --thick: 8px;
  --color: var(--color-accent);
  inline-size: var(--size);
  block-size: var(--size);
  position: relative;
  display: inline-grid;
  place-content: center;
}
.pa-gauge::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(var(--color) calc(var(--val) * 1%), var(--surface-bg-3) 0);
  -webkit-mask: radial-gradient(circle, transparent calc(50% - var(--thick)), #000 calc(50% - var(--thick) + 1px));
          mask: radial-gradient(circle, transparent calc(50% - var(--thick)), #000 calc(50% - var(--thick) + 1px));
  filter: drop-shadow(0 0 6px var(--color));
}
.pa-gauge__inner {
  text-align: center;
  z-index: 1;
}
.pa-gauge__num { font: var(--type-mono); font-size: 16px; color: var(--surface-fg-1); display: block; }
.pa-gauge__lbl { font: var(--type-caption); color: var(--surface-fg-3); }
.pa-gauge--safe    { --color: var(--color-success); }
.pa-gauge--warning { --color: var(--color-warning); }
.pa-gauge--danger  { --color: var(--color-danger); }

/* ---------- ICON ---------- */
.pa-icon {
  inline-size: 16px;
  block-size: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
.pa-icon--sm { inline-size: 14px; block-size: 14px; }
.pa-icon--lg { inline-size: 20px; block-size: 20px; }
.pa-icon--xl { inline-size: 24px; block-size: 24px; }
[dir="rtl"] .pa-icon--mirror { transform: scaleX(-1); }