/*
 * ============================================================
 *  ALGPT Enterprise Components
 *  /static/css/components.css
 *
 *  REQUIRES: tokens.css imported BEFORE this file.
 *
 *  Created: 2026-04-28 — Fase 2 Enterprise Visual Restoration
 *
 *  RULES
 *  -----
 *  1. Every selector is prefixed with .algpt- (namespaced).
 *  2. No !important declarations.
 *  3. No hardcoded colors except rgba(0,0,0,0.75) for modal overlay.
 *  4. All values come from tokens.css var(--token).
 *  5. This file is purely additive — it does not override existing classes.
 *  6. Do not modify existing HTML to use these classes yet (Fase 3+).
 *
 *  SECTIONS
 *  --------
 *  A. Buttons      (.algpt-btn*)
 *  B. Badges       (.algpt-badge*)
 *  C. Cards        (.algpt-card*)
 *  D. Inputs       (.algpt-input)
 *  E. Tables       (.algpt-table)
 *  F. Modals       (.algpt-modal*)
 * ============================================================
 */


/* ============================================================
 *  A. BUTTONS
 *
 *  Hierarchy:
 *    primary   → gold CTA, max 1 per screen
 *    secondary → standard action
 *    ghost     → tertiary / cancel
 *    danger    → destructive action
 *
 *  Sizes: default (36px), sm (28px), lg (44px)
 * ============================================================ */

.algpt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  padding: 0 16px;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: var(--transition);
  border: 1px solid transparent;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  box-sizing: border-box;
}

/* Disabled state — shared across all button variants */
.algpt-btn:disabled,
.algpt-btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--disabled-bg);
  color: var(--text-disabled);
  border-color: transparent;
  box-shadow: none;
  filter: none;
}

/* --- Primary --- */
.algpt-btn-primary {
  background: var(--gold-gradient-btn);
  color: var(--text-inverse);
  border-color: transparent;
}
.algpt-btn-primary:hover:not(:disabled):not([aria-disabled="true"]) {
  filter: brightness(1.08);
}
.algpt-btn-primary:active:not(:disabled):not([aria-disabled="true"]) {
  filter: brightness(0.92);
}
.algpt-btn-primary:focus-visible {
  box-shadow: var(--focus-ring);
  outline: none;
}

/* --- Secondary --- */
.algpt-btn-secondary {
  background: var(--surface2);
  color: var(--text-dim);
  border-color: var(--border);
}
.algpt-btn-secondary:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--surface3);
  color: var(--text);
}
.algpt-btn-secondary:focus-visible {
  box-shadow: var(--focus-ring);
  outline: none;
}

/* --- Ghost --- */
.algpt-btn-ghost {
  background: transparent;
  color: var(--text-dim);
  border-color: transparent;
}
.algpt-btn-ghost:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--hover-surface);
  border-color: var(--border);
  color: var(--text);
}
.algpt-btn-ghost:focus-visible {
  box-shadow: var(--focus-ring);
  outline: none;
}

/* --- Danger --- */
.algpt-btn-danger {
  background: var(--danger-soft);
  color: var(--danger);
  border-color: var(--danger);
}
.algpt-btn-danger:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--danger-soft);
  filter: brightness(1.15);
}
.algpt-btn-danger:focus-visible {
  box-shadow: var(--focus-ring);
  outline: none;
}

/* --- Size modifiers --- */
.algpt-btn-sm {
  height: 28px;
  padding: 0 12px;
  font-size: var(--fs-xs);
}
.algpt-btn-lg {
  height: 44px;
  padding: 0 20px;
  font-size: var(--fs-base);
}


/* ============================================================
 *  B. BADGES
 *
 *  One component, six semantic variants:
 *    (default) → neutral
 *    success   → completed, live, approved
 *    warn      → pending, rate-limit, caution
 *    danger    → error, blocked, failed
 *    info      → informational, in-review
 *    gold      → premium, brand feature
 * ============================================================ */

.algpt-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-xs);
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  /* Default: neutral */
  background: var(--surface2);
  color: var(--text-dim);
  border: 1px solid var(--border);
}

.algpt-badge-success {
  background: var(--success-soft);
  color: var(--success);
  border-color: transparent;
}

.algpt-badge-warn {
  background: var(--warn-soft);
  color: var(--warn);
  border-color: transparent;
}

.algpt-badge-danger {
  background: var(--danger-soft);
  color: var(--danger);
  border-color: transparent;
}

.algpt-badge-info {
  background: var(--info-soft);
  color: var(--info);
  border-color: transparent;
}

.algpt-badge-gold {
  background: var(--gold-soft);
  color: var(--gold-text);
  border-color: var(--gold-border);
}


/* ============================================================
 *  C. CARDS
 *
 *  .algpt-card          → standard panel / card
 *  .algpt-card-elevated → raised card on top of another card
 * ============================================================ */

.algpt-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-6);
  box-sizing: border-box;
}

.algpt-card-elevated {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-6);
  box-sizing: border-box;
  box-shadow: var(--shadow-soft);
}


/* ============================================================
 *  D. INPUTS
 *
 *  Unified text input / select / textarea baseline.
 * ============================================================ */

.algpt-input {
  display: block;
  width: 100%;
  height: 36px;
  padding: 0 12px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  outline: none;
  transition: var(--transition);
  box-sizing: border-box;
}

.algpt-input::placeholder {
  color: var(--muted);
}

.algpt-input:focus {
  border-color: var(--gold-border);
  box-shadow: var(--focus-ring);
}

.algpt-input:disabled {
  background: var(--disabled-bg);
  color: var(--text-disabled);
  cursor: not-allowed;
  opacity: 0.6;
}

/* Textarea variant */
.algpt-input.algpt-input-textarea {
  height: auto;
  min-height: 80px;
  padding: 10px 12px;
  resize: vertical;
}


/* ============================================================
 *  E. TABLES
 *
 *  Structured data table with consistent header / row styles.
 * ============================================================ */

.algpt-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
}

.algpt-table th {
  background: var(--surface2);
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  text-align: left;
  white-space: nowrap;
}

.algpt-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-light);
  color: var(--text-dim);
  vertical-align: middle;
}

.algpt-table tr:last-child td {
  border-bottom: none;
}

.algpt-table tbody tr:hover td {
  background: var(--hover-surface);
}


/* ============================================================
 *  F. MODALS
 *
 *  .algpt-modal-overlay → full-screen dimmed backdrop
 *  .algpt-modal         → modal container
 *  .algpt-modal-header  → title bar with bottom border
 * ============================================================ */

.algpt-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);   /* exception: overlay bg has no token */
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  box-sizing: border-box;
}

.algpt-modal {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-raised);
  padding: var(--space-6);
  min-width: 400px;
  max-width: 90vw;
  max-height: 90vh;
  overflow-y: auto;
  box-sizing: border-box;
}

.algpt-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-light);
  font-family: var(--font-sans);
  font-size: var(--fs-xl);
  font-weight: 600;
  color: var(--text);
  line-height: var(--lh-tight);
}