/* ============================================================
   TECH SILVA DESIGN SYSTEM — components.css (DS-02)
   Contratos oficiais de componentes, todos sobre tokens --ts-*.
   Classes prefixadas .ts- (não colidem com as legadas .p-/.adm-).
   Direção visual: "ferramenta técnica confiável" — sem excesso de
   gradiente/glow/radius; densidade controlada.
   ============================================================ */

/* ---------- BUTTON ---------- */
.ts-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--ts-font-body); font-size: 0.92rem; font-weight: 600;
  line-height: 1; padding: 0.68rem 1.1rem; border-radius: var(--ts-radius-sm);
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  min-height: var(--ts-min-tap, 44px); transition: background var(--ts-motion-fast) var(--ts-motion-ease),
    color var(--ts-motion-fast) var(--ts-motion-ease), box-shadow var(--ts-motion-fast) var(--ts-motion-ease);
  white-space: nowrap;
}
.ts-btn:focus-visible { outline: none; box-shadow: var(--ts-focus-ring); }
.ts-btn:disabled { opacity: 0.55; cursor: not-allowed; }

.ts-btn--primary { background: var(--ts-color-primary); color: var(--ts-color-text-inverse); }
.ts-btn--primary:hover:not(:disabled) { background: var(--ts-color-primary-hover); }
.ts-btn--primary:active:not(:disabled) { background: var(--ts-color-primary-active); }

.ts-btn--secondary { background: var(--ts-color-surface); color: var(--ts-color-primary); border-color: var(--ts-color-primary); }
.ts-btn--secondary:hover:not(:disabled) { background: var(--ts-color-primary-soft); }

.ts-btn--ghost { background: transparent; color: var(--ts-color-text-muted); }
.ts-btn--ghost:hover:not(:disabled) { background: var(--ts-color-bg); color: var(--ts-color-navy); }

.ts-btn--danger { background: var(--ts-color-danger); color: #fff; }
.ts-btn--danger:hover:not(:disabled) { background: #c93a3f; }

.ts-btn--sm { padding: 0.45rem 0.8rem; font-size: 0.82rem; min-height: 36px; }
.ts-btn--lg { padding: 0.85rem 1.4rem; font-size: 1rem; }
.ts-btn--block { width: 100%; }

/* ---------- INPUT ---------- */
.ts-field { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 1rem; }
.ts-label { font-family: var(--ts-font-body); font-size: var(--ts-text-label); font-weight: 600; color: var(--ts-color-navy); }
.ts-helper { font-size: var(--ts-text-caption); color: var(--ts-color-text-muted); }
.ts-input, .ts-select, .ts-textarea {
  font-family: var(--ts-font-body); font-size: 0.92rem; color: var(--ts-color-text);
  padding: 0.62rem 0.8rem; border: 1px solid var(--ts-color-border); border-radius: var(--ts-radius-sm);
  background: var(--ts-color-surface); min-height: var(--ts-min-tap, 44px);
  transition: border-color var(--ts-motion-fast) var(--ts-motion-ease), box-shadow var(--ts-motion-fast) var(--ts-motion-ease);
  width: 100%;
}
.ts-input::placeholder, .ts-textarea::placeholder { color: var(--ts-color-text-muted); opacity: 0.7; }
.ts-input:focus, .ts-select:focus, .ts-textarea:focus { outline: none; border-color: var(--ts-color-primary); box-shadow: var(--ts-focus-ring); }
.ts-input[aria-invalid="true"], .ts-field--invalid .ts-input { border-color: var(--ts-color-danger); }
.ts-input:disabled, .ts-select:disabled, .ts-textarea:disabled { background: var(--ts-color-surface-muted); color: var(--ts-color-text-muted); cursor: not-allowed; }
.ts-input[readonly] { background: var(--ts-color-surface-muted); }
.ts-required { color: var(--ts-color-danger); }

/* ---------- CHECKBOX / RADIO ---------- */
.ts-check { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; color: var(--ts-color-text); cursor: pointer; }
.ts-check input { width: 1.05rem; height: 1.05rem; accent-color: var(--ts-color-primary); cursor: pointer; }
.ts-check input:focus-visible { outline: none; box-shadow: var(--ts-focus-ring); }
.ts-check--disabled { opacity: 0.55; cursor: not-allowed; }
.ts-check--invalid input { outline: 1px solid var(--ts-color-danger); outline-offset: 1px; }

/* ---------- CARD ---------- */
.ts-card {
  background: var(--ts-color-surface); border: 1px solid var(--ts-color-border);
  border-radius: var(--ts-radius-md); padding: var(--ts-space-5); color: var(--ts-color-text);
}
.ts-card--outlined { box-shadow: none; border-color: var(--ts-color-border); }
.ts-card--interactive { cursor: pointer; transition: box-shadow var(--ts-motion-fast) var(--ts-motion-ease), transform var(--ts-motion-fast) var(--ts-motion-ease); }
.ts-card--interactive:hover { box-shadow: var(--ts-shadow-md); }
.ts-card--highlight { border-color: var(--ts-color-primary); background: var(--ts-color-primary-soft); }

/* ---------- BADGE ---------- */
.ts-badge {
  display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.75rem; font-weight: 600;
  padding: 0.22rem 0.6rem; border-radius: var(--ts-radius-pill); line-height: 1.4;
}
.ts-badge--neutral { background: var(--ts-color-surface-muted); color: var(--ts-color-text-muted); }
.ts-badge--info { background: var(--ts-color-info-bg); color: #0a5db0; }
.ts-badge--success { background: var(--ts-color-success-bg); color: #137a49; }
.ts-badge--warning { background: var(--ts-color-warning-bg); color: #b05500; }
.ts-badge--danger { background: var(--ts-color-danger-bg); color: #b02a2f; }

/* ---------- ALERT ---------- */
.ts-alert {
  display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.85rem 1rem;
  border-radius: var(--ts-radius-sm); border: 1px solid transparent; font-size: 0.9rem;
}
.ts-alert--info { background: var(--ts-color-info-bg); border-color: var(--ts-color-info); color: #0a3d66; }
.ts-alert--success { background: var(--ts-color-success-bg); border-color: var(--ts-color-success); color: #0d5c37; }
.ts-alert--warning { background: var(--ts-color-warning-bg); border-color: var(--ts-color-warning); color: #8a4500; }
.ts-alert--error { background: var(--ts-color-danger-bg); border-color: var(--ts-color-danger); color: #8f2024; }

/* ---------- TOAST / FLASH ---------- */
.ts-toast {
  position: fixed; bottom: 1.25rem; left: 50%; transform: translateX(-50%);
  background: var(--ts-color-navy); color: #fff; padding: 0.75rem 1.1rem; border-radius: var(--ts-radius-sm);
  font-size: 0.9rem; box-shadow: var(--ts-shadow-lg); z-index: 10000;
  max-width: min(92vw, 480px);
}
.ts-toast--success { background: var(--ts-color-success); }
.ts-toast--error { background: var(--ts-color-danger); }

/* ---------- TABLE ---------- */
.ts-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.ts-table th, .ts-table td { text-align: left; padding: 0.7rem 0.85rem; border-bottom: 1px solid var(--ts-color-border); }
.ts-table th { font-weight: 600; color: var(--ts-color-navy); background: var(--ts-color-surface-muted); }
.ts-table tbody tr:hover { background: var(--ts-color-bg); }
.ts-table__actions { display: flex; gap: 0.4rem; justify-content: flex-end; }
.ts-table__empty { text-align: center; padding: 2rem; color: var(--ts-color-text-muted); }
/* mobile fallback: rolagem horizontal */
.ts-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------- EMPTY STATE ---------- */
.ts-empty { text-align: center; padding: var(--ts-space-8) var(--ts-space-5); color: var(--ts-color-text-muted); }
.ts-empty__title { font-family: var(--ts-font-heading); font-size: var(--ts-text-h3); color: var(--ts-color-navy); margin: 0 0 0.35rem; }
.ts-empty__icon { display: inline-block; margin-bottom: 0.6rem; opacity: 0.7; }

/* ---------- MODAL / DRAWER ---------- */
.ts-modal-overlay { position: fixed; inset: 0; background: rgba(3, 18, 41, 0.5); display: flex; align-items: center; justify-content: center; z-index: 9000; padding: 1rem; }
.ts-modal { background: var(--ts-color-surface); border-radius: var(--ts-radius-md); box-shadow: var(--ts-shadow-lg); width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto; }
.ts-modal__header { padding: var(--ts-space-4) var(--ts-space-5); border-bottom: 1px solid var(--ts-color-border); display: flex; align-items: center; justify-content: space-between; }
.ts-modal__body { padding: var(--ts-space-5); }
.ts-modal__close { background: none; border: none; cursor: pointer; color: var(--ts-color-text-muted); font-size: 1.3rem; line-height: 1; }

/* ---------- PRODUCT CARD (base) ---------- */
.ts-product-card {
  background: var(--ts-color-surface); border: 1px solid var(--ts-color-border); border-radius: var(--ts-radius-md);
  padding: var(--ts-space-4); display: flex; flex-direction: column; gap: 0.6rem;
}
.ts-product-card__media { aspect-ratio: 16/9; background: var(--ts-color-surface-muted); border-radius: var(--ts-radius-sm); display: flex; align-items: center; justify-content: center; color: var(--ts-color-text-muted); }
.ts-product-card__model { font-family: var(--ts-font-heading); font-size: 1.05rem; font-weight: 700; color: var(--ts-color-navy); margin: 0; }
.ts-product-card__desc { font-size: 0.85rem; color: var(--ts-color-text-muted); margin: 0; }
.ts-product-card__status { font-size: 0.75rem; font-weight: 600; color: var(--ts-color-success); }
.ts-product-card__status--owned { color: var(--ts-color-success); }
.ts-product-card__status--unavailable { color: var(--ts-color-text-muted); }
.ts-product-card__actions { display: flex; gap: 0.5rem; margin-top: auto; }