/* ==========================================================================
   AUTO PROD BOT — Components
   Sistema de componentes unificado (botões, cards, badges, forms)
   Compartilhado entre theme-app e theme-market
   ========================================================================== */

/* ==========================================================================
   1. BUTTONS
   ========================================================================== */

.btn {
  font-family: var(--font-sans);
  font-weight: var(--font-semibold);
  font-size: var(--text-base);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-4);
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--transition-normal);
  line-height: var(--leading-normal);
}

.btn:hover {
  transform: translateY(-1px);
  text-decoration: none;
}

.btn:active {
  transform: translateY(0);
}

.btn:disabled,
.btn.disabled {
  opacity: 0.6;
  pointer-events: none;
  transform: none;
}

/* ----- Size variants ----- */

.btn-sm {
  font-size: var(--text-sm);
  padding: var(--space-1) var(--space-3);
  min-height: 32px;
  gap: var(--space-1);
}

.btn-lg {
  font-size: var(--text-md);
  padding: var(--space-3) var(--space-6);
  min-height: 48px;
}

/* ----- Color variants ----- */

.btn-primary {
  background-color: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

.btn-primary:hover {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: #fff;
  box-shadow: var(--shadow-md);
}

.btn-secondary {
  background-color: transparent;
  color: var(--color-text-secondary);
  border-color: var(--color-border);
}

.btn-secondary:hover {
  background-color: var(--color-bg-hover);
  color: var(--color-text);
  border-color: var(--color-text-secondary);
}

.btn-success {
  background-color: var(--color-success);
  color: #fff;
  border-color: var(--color-success);
}

.btn-success:hover {
  background-color: var(--color-success-dark);
  border-color: var(--color-success-dark);
  color: #fff;
  box-shadow: var(--shadow-md);
}

.btn-warning {
  background-color: var(--color-warning);
  color: #212529;
  border-color: var(--color-warning);
}

.btn-warning:hover {
  background-color: var(--color-warning-dark);
  border-color: var(--color-warning-dark);
  color: #212529;
  box-shadow: var(--shadow-md);
}

.btn-danger {
  background-color: var(--color-danger);
  color: #fff;
  border-color: var(--color-danger);
}

.btn-danger:hover {
  background-color: var(--color-danger-dark);
  border-color: var(--color-danger-dark);
  color: #fff;
  box-shadow: var(--shadow-md);
}

.btn-whatsapp {
  background-color: var(--color-whatsapp);
  color: #000;
  border-color: var(--color-whatsapp);
}

.btn-whatsapp:hover {
  background-color: var(--color-whatsapp-dark);
  border-color: var(--color-whatsapp-dark);
  color: #000;
  box-shadow: var(--shadow-md);
}

/* ----- Ghost variant (outlined, transparent) ----- */

.btn-ghost {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text);
}

.btn-ghost:hover {
  background: var(--color-bg-hover);
  border-color: var(--color-text-secondary);
}

.btn-ghost.btn-ghost-primary {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.btn-ghost.btn-ghost-primary:hover {
  background: rgba(108, 92, 231, 0.1);
}

.btn-ghost.btn-ghost-danger {
  border-color: var(--color-danger);
  color: var(--color-danger);
}

.btn-ghost.btn-ghost-danger:hover {
  background: rgba(220, 53, 69, 0.1);
}

.btn-ghost.btn-ghost-success {
  border-color: var(--color-success);
  color: var(--color-success);
}

.btn-ghost.btn-ghost-success:hover {
  background: rgba(40, 167, 69, 0.1);
}

.btn-ghost.btn-ghost-warning {
  border-color: var(--color-warning);
  color: var(--color-warning-dark);
}

.btn-ghost.btn-ghost-warning:hover {
  background: rgba(255, 193, 7, 0.1);
}

/* ----- Full width ----- */

.btn-block {
  display: flex;
  width: 100%;
}

/* ==========================================================================
   2. CARDS
   ========================================================================== */

.card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-normal);
}

.card:hover {
  box-shadow: var(--shadow-md);
}

.card-header {
  padding: var(--space-3) var(--space-4);
  font-weight: var(--font-semibold);
  font-size: var(--text-md);
  border-bottom: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.card-body {
  padding: var(--space-4);
}

.card-footer {
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--color-border-light);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* Card header color variants (used with bg-* classes) */
.card-header.bg-primary  { color: #fff; }
.card-header.bg-success  { color: #fff; }
.card-header.bg-danger   { color: #fff; }
.card-header.bg-warning  { color: #212529; }
.card-header.bg-info     { color: #fff; }
.card-header.bg-dark     { color: #fff; }

/* ----- Mobile ----- */
@media (max-width: 768px) {
  .card-header {
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-base);
  }

  .card-body {
    padding: var(--space-3);
  }
}

@media (max-width: 576px) {
  .card-body {
    padding: var(--space-2);
  }
}

/* ==========================================================================
   3. BADGES
   ========================================================================== */

.badge {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  line-height: 1;
}

.badge-primary   { background: var(--color-primary);   color: #fff; }
.badge-secondary { background: var(--color-text-muted); color: #fff; }
.badge-success   { background: var(--color-success);   color: #fff; }
.badge-warning   { background: var(--color-warning);   color: #212529; }
.badge-danger    { background: var(--color-danger);    color: #fff; }
.badge-info      { background: var(--color-info);      color: #fff; }

/* Soft badges (lighter background) */
.badge-soft-primary   { background: rgba(108, 92, 231, 0.15); color: var(--color-primary); }
.badge-soft-success   { background: rgba(40, 167, 69, 0.15);  color: var(--color-success); }
.badge-soft-warning   { background: rgba(255, 193, 7, 0.15);  color: var(--color-warning-dark); }
.badge-soft-danger    { background: rgba(220, 53, 69, 0.15);  color: var(--color-danger); }
.badge-soft-info      { background: rgba(23, 162, 184, 0.15); color: var(--color-info); }

/* Pill badge */
.badge-pill {
  border-radius: var(--radius-full);
  padding: var(--space-1) var(--space-3);
}

/* ----- Mobile ----- */
@media (max-width: 768px) {
  .badge {
    font-size: 0.65rem;
    padding: 2px var(--space-1);
  }
}

/* ==========================================================================
   4. FORMS
   ========================================================================== */

.form-control,
.form-select {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--font-normal);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-bg-input);
  color: var(--color-text);
  min-height: 44px;
  transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--color-primary);
  box-shadow: var(--focus-ring);
  outline: none;
}

.form-control::placeholder {
  color: var(--color-text-muted);
}

.form-label {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-1);
}

/* Code textarea */
.form-code {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

/* Password toggle */
.password-toggle {
  position: absolute;
  right: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  z-index: 10;
  padding: var(--space-1);
  transition: color var(--transition-normal);
}

.password-toggle:hover {
  color: var(--color-primary-light);
}

/* Form group spacing */
.form-group {
  margin-bottom: var(--space-4);
}

/* ----- Mobile ----- */
@media (max-width: 768px) {
  .form-control,
  .form-select {
    font-size: var(--text-sm);
  }

  .form-label {
    font-size: var(--text-xs);
  }
}

/* ==========================================================================
   5. MODALS
   ========================================================================== */

.modal-content {
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-light);
  box-shadow: var(--shadow-xl);
  background: var(--color-bg-card);
}

.modal-header {
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border-light);
}

.modal-body {
  padding: var(--space-4);
}

.modal-footer {
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--color-border-light);
  gap: var(--space-2);
}

.modal-title {
  font-size: var(--text-md);
  font-weight: var(--font-semibold);
}

/* ----- Mobile ----- */
@media (max-width: 768px) {
  .modal-body {
    padding: var(--space-3);
  }
}

/* ==========================================================================
   6. ALERTS
   ========================================================================== */

.alert {
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  border: none;
}

/* ==========================================================================
   7. PROGRESS BARS
   ========================================================================== */

.progress {
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--color-border-light);
}

.progress-bar {
  border-radius: var(--radius-full);
  transition: width var(--transition-slow);
}

/* ==========================================================================
   8. TABLES
   ========================================================================== */

.table-container {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border-light);
}

/* ==========================================================================
   9. LOADING OVERLAY
   ========================================================================== */

.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  z-index: var(--z-overlay);
}

/* ==========================================================================
   10. QR CODE CONTAINER
   ========================================================================== */

.qr-container {
  background: #fff;
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  display: inline-block;
  box-shadow: var(--shadow-lg);
}

.qr-container img {
  max-width: 100%;
  image-rendering: pixelated;
}

/* ==========================================================================
   11. DAY SELECTOR (Configurações / Grupos)
   ========================================================================== */

.day-selector {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.day-btn {
  border-radius: var(--radius-full);
  min-width: 36px;
  height: 36px;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
}

.day-btn.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  box-shadow: 0 2px 8px rgba(108, 92, 231, 0.3);
}

/* ==========================================================================
   12. SUBCATEGORIA TAGS
   ========================================================================== */

.subcategoria-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  margin: 2px;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  background: var(--color-bg-hover);
  color: var(--color-text-secondary);
}

/* ==========================================================================
   WHATSAPP FLOAT BUTTON (Suporte)
   ========================================================================== */
.whatsapp-float {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 60px;
  height: 60px;
  background: var(--color-whatsapp);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  box-shadow: 0 5px 30px rgba(37, 211, 102, 0.5);
  z-index: 1050;
  transition: all 0.3s ease;
  text-decoration: none;
}

.whatsapp-float:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 40px rgba(37, 211, 102, 0.6);
  color: #fff;
}