/* ============================================================
 * TEDDY DS — BRIDGE
 *
 * Mapeia classes LEGADAS (usadas nas views) para o visual do DS,
 * sem precisar mexer em HTML/PHP. Carrega DEPOIS de tokens.css,
 * components/* e admin.css para vencer cascade.
 *
 * Cobertura:
 *   - .btn / .btn-primary / .btn-secondary / .btn-danger / .btn-ghost (admin)
 *   - .btn-sm / .btn-icon / .btn-icon (modificadores)
 *   - .admin-card / .admin-card-sm (cards admin)
 *   - .admin-tab / .tab-pane (tabs admin)
 *   - .admin-search-mini (input com ícone admin)
 *   - .admin-modal-content (modal radius/shadow)
 *   - .admin-input / .admin-textarea / .admin-select (forms admin)
 *   - .admin-label / .admin-page-title / .admin-page-subtitle
 *   - .role-badge (admin) e .status-badge (alinhados com .tag DS)
 *   - .form-group / .form-group label / .form-group input,select,textarea
 *   - .news-item / .system-tile (site)
 *
 * Nada aqui sobrescreve o DS — só preenche o gap visual do legado.
 * ============================================================ */

/* ─────────────────────────────────────────────────────────────
 * BOTÕES (admin usa .btn / .btn-primary etc — sem CSS prévio)
 * ─────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-extra);
  line-height: 1;
  cursor: pointer;
  transition: var(--transition-fast);
  text-decoration: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
}
.btn:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}
.btn:disabled,
.btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
}
.btn i { font-size: 16px; line-height: 1; flex-shrink: 0; }

.btn-primary {
  background: var(--color-brand);
  color: var(--color-brand-ink);
}
.btn-primary:hover:not(:disabled) {
  background: var(--color-brand-dark);
  box-shadow: var(--shadow-brand);
}

.btn-secondary {
  background: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-border-strong);
}
.btn-secondary:hover:not(:disabled) {
  background: var(--color-surface-2);
  border-color: var(--color-text-mute);
}

/* .btn-danger e .btn-ghost — já existem no components/button.css.
   Aqui garantimos que .btn-danger/.btn-ghost combinados com .btn (admin)
   se comportem igual. */
.btn.btn-danger {
  background: var(--color-error);
  color: white;
}
.btn.btn-ghost {
  background: transparent;
  color: var(--color-text);
  border-color: transparent;
}
.btn.btn-ghost:hover:not(:disabled) { background: var(--color-surface-2); }

/* Sizes admin */
.btn.btn-sm {
  padding: 8px 14px;
  font-size: var(--font-size-xs);
  border-radius: var(--radius-sm);
}
.btn.btn-lg {
  padding: 16px 28px;
  font-size: var(--font-size-base);
}

.btn-icon {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: var(--radius-sm);
  border: none;
  background: transparent;
  color: var(--color-text-soft);
  cursor: pointer;
  transition: var(--transition-fast);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn-icon:hover { background: var(--color-surface-2); color: var(--color-text); }
.btn-icon i { font-size: 18px; }

/* ─────────────────────────────────────────────────────────────
 * CARDS (admin)
 * ─────────────────────────────────────────────────────────── */
.admin-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  transition: var(--transition-fast);
}
.admin-card.admin-card-sm { padding: var(--space-4); }
.admin-card:hover { box-shadow: var(--shadow-md); }

/* Skeleton herdado por .admin-card.skeleton */
.admin-card.skeleton {
  background: linear-gradient(90deg, var(--color-surface-2) 25%, var(--color-border-strong) 50%, var(--color-surface-2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border: none;
}

/* ─────────────────────────────────────────────────────────────
 * PAGE HEADER (admin)
 * ─────────────────────────────────────────────────────────── */
.admin-page-title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-extra);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-text);
}
.admin-page-subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-text-soft);
  margin-top: var(--space-1);
}

/* ─────────────────────────────────────────────────────────────
 * TABS (admin)
 * ─────────────────────────────────────────────────────────── */
.admin-tab {
  padding: var(--space-4) var(--space-6);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-soft);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: var(--transition-fast);
  white-space: nowrap;
}
.admin-tab:hover { color: var(--color-text); }
.admin-tab.active {
  color: var(--color-brand);
  border-bottom-color: var(--color-brand);
}

/* ─────────────────────────────────────────────────────────────
 * SEARCH BOX (admin) — alinha com .field-input-icon do DS
 * ─────────────────────────────────────────────────────────── */
.admin-search-mini {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: 0 var(--space-4);
  transition: var(--transition-fast);
}
.admin-search-mini:focus-within {
  background: var(--color-surface);
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px var(--color-brand-soft);
}
.admin-search-mini i {
  font-size: 16px;
  color: var(--color-text-mute);
  flex-shrink: 0;
}
.admin-search-mini input {
  background: transparent;
  border: none;
  outline: none;
  flex: 1;
  padding: 10px var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}
.admin-search-mini input::placeholder { color: var(--color-text-mute); }

/* ─────────────────────────────────────────────────────────────
 * FORM ADMIN INPUTS — .admin-input / .login-input dentro do admin
 * ─────────────────────────────────────────────────────────── */
.admin-content .login-input,
.admin-input,
.admin-textarea,
.admin-select {
  width: 100%;
  padding: 12px 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  outline: none;
  transition: var(--transition-fast);
}
.admin-content .login-input:hover,
.admin-input:hover,
.admin-textarea:hover,
.admin-select:hover { border-color: var(--color-text-mute); }
.admin-content .login-input:focus,
.admin-input:focus,
.admin-textarea:focus,
.admin-select:focus {
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px var(--color-brand-soft);
}
.admin-textarea { min-height: 120px; resize: vertical; line-height: var(--line-height-relaxed); }

/* Label admin */
.admin-label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

/* ─────────────────────────────────────────────────────────────
 * BADGES (status / role) — alinhar com .tag DS
 * ─────────────────────────────────────────────────────────── */
.role-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-extra);
  background: var(--color-surface-2);
  color: var(--color-text-soft);
}

/* status-badge específicos (admin.css define cores; só padronizamos tipografia/radius) */
.status-badge {
  font-family: var(--font-sans);
  font-weight: var(--font-weight-extra);
  letter-spacing: 0.02em;
}
.status-badge.bg-green { background: var(--color-success-bg); color: var(--color-success-ink); }
.status-badge.bg-orange { background: var(--color-warning-bg); color: #92400e; }
.status-badge.bg-gray { background: #e2e8f0; color: #475569; }

/* ─────────────────────────────────────────────────────────────
 * MODAL CLIENT — overlay escondido por padrão (override do components.css
 * que tinha display:flex permanente, causando modais flutuando no layout)
 * ─────────────────────────────────────────────────────────── */
.modal-overlay {
  display: none;
}
.modal-overlay.open {
  display: flex;
}

/* ─────────────────────────────────────────────────────────────
 * MODAL ADMIN — alinhar radius/shadow com DS
 * ─────────────────────────────────────────────────────────── */
.admin-modal-content {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  max-width: 600px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  animation: scaleIn 0.2s ease;
}
.admin-modal-overlay h3 {
  font-weight: var(--font-weight-extra);
}

/* ─────────────────────────────────────────────────────────────
 * FORM-GROUP (legado do original.css) — visual de .field
 * ─────────────────────────────────────────────────────────── */
.form-group {
  margin-bottom: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.form-group label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  letter-spacing: 0;
}
/* inputs dentro de form-group (não dentro de #login-overlay para preservar tema escuro) */
:not(#login-overlay) > .form-group input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
:not(#login-overlay) > .form-group select,
:not(#login-overlay) > .form-group textarea {
  padding: 12px 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  outline: none;
  transition: var(--transition-fast);
}
:not(#login-overlay) > .form-group input:focus,
:not(#login-overlay) > .form-group select:focus,
:not(#login-overlay) > .form-group textarea:focus {
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px var(--color-brand-soft);
}

/* ─────────────────────────────────────────────────────────────
 * SISTEMA TILE / NEWS ITEM — leve harmonização
 * ─────────────────────────────────────────────────────────── */
.system-tile {
  border-radius: var(--radius-md);
  transition: var(--transition-base);
}
.system-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

.news-item { transition: var(--transition-fast); }
.news-item:hover { background: var(--color-surface-2); border-radius: var(--radius-sm); }

/* ─────────────────────────────────────────────────────────────
 * UTILS — animations referenced
 * ─────────────────────────────────────────────────────────── */
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }