/* ===== Components — Nova Dashboard ===== */

/* ===== Stat Card ===== */
.stat-card {
  background: var(--bg-card);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  transition: var(--transition);
}

.stat-card:hover {
  transform: translateY(-4px);
  border-color: var(--primary);
  background: var(--bg-card-hover);
  box-shadow: var(--shadow-lg);
}

.stat-card .icon {
  font-size: 22px;
  margin-bottom: var(--space-sm);
}

.stat-card .value {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 2px;
  line-height: 1.2;
}

.stat-card .label {
  color: var(--text-secondary);
  font-size: 12px;
}

.stat-card .sublabel {
  color: var(--text-muted);
  font-size: 11px;
  margin-top: var(--space-xs);
}

/* Accent variants */
.stat-card.success { border-left: 3px solid var(--success); }
.stat-card.warning { border-left: 3px solid var(--warning); }
.stat-card.info    { border-left: 3px solid var(--info); }
.stat-card.primary { border-left: 3px solid var(--primary); }

/* ===== Module Card ===== */
.module-card {
  background: var(--bg-card);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  text-align: center;
  cursor: pointer;
  transition: var(--transition);
  text-decoration: none;
  color: var(--text-primary);
  display: block;
}

.module-card:hover {
  transform: translateY(-4px);
  border-color: var(--primary);
  background: var(--primary-light);
}

.module-card .icon {
  font-size: 28px;
  margin-bottom: var(--space-sm);
  display: block;
}

.module-card .title {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 2px;
}

.module-card .description {
  font-size: 10px;
  color: var(--text-secondary);
}

/* Featured modules */
.module-card.featured {
  background: linear-gradient(135deg, rgba(227, 30, 36, 0.15) 0%, rgba(183, 28, 28, 0.15) 100%);
  border-color: rgba(227, 30, 36, 0.3);
}

.module-card.featured:hover {
  background: linear-gradient(135deg, rgba(227, 30, 36, 0.25) 0%, rgba(183, 28, 28, 0.25) 100%);
}

/* New badge */
.module-card .badge-new {
  display: inline-block;
  background: var(--success);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  margin-bottom: var(--space-sm);
}

/* ===== Action Button ===== */
.action-btn {
  background: var(--bg-input);
  border: 1px solid var(--glass-border);
  color: var(--text-primary);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 13px;
  font-family: var(--font-family);
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
}

.action-btn:hover {
  background: var(--primary);
  border-color: var(--primary);
}

.action-btn:active {
  transform: scale(0.97);
}

.action-btn .spinner {
  display: none;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.action-btn.loading .spinner {
  display: inline-block;
}

.action-btn.loading .btn-text {
  opacity: 0.7;
}

/* ===== Toast (skeleton — Phase 4) ===== */
.toast-container {
  position: fixed;
  top: calc(var(--header-height) + var(--space-md));
  right: var(--space-xl);
  z-index: 3000;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  pointer-events: none;
}

.toast {
  background: var(--bg-solid);
  border: 1px solid var(--glass-border);
  border-left: 3px solid var(--info);
  border-radius: var(--radius-sm);
  padding: var(--space-md) var(--space-lg);
  color: var(--text-primary);
  font-size: 14px;
  box-shadow: var(--shadow-lg);
  animation: fadeIn 0.3s ease;
  pointer-events: auto;
  max-width: 360px;
}

.toast.success { border-left-color: var(--success); }
.toast.warning { border-left-color: var(--warning); }
.toast.error   { border-left-color: var(--danger); }

/* ===== Visit Card ===== */
.visit-card {
  background: var(--bg-card);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  transition: var(--transition);
}

.visit-card:hover {
  border-color: var(--primary);
}

.visit-card .icon {
  font-size: 24px;
  margin-bottom: var(--space-sm);
}

.visit-card .value {
  font-size: 28px;
  font-weight: 700;
}

.visit-card .label {
  color: var(--text-secondary);
  font-size: 13px;
}

.visit-card .unique {
  color: var(--text-muted);
  font-size: 11px;
  margin-top: var(--space-xs);
}

/* ===== Footer ===== */
.footer {
  text-align: center;
  padding: var(--space-xl);
  color: var(--text-muted);
  font-size: 12px;
}

/* ===== Catálogo Interno — Modal (2026-09-04) ===== */
.cat-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(4px);
  z-index: 4000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
}
.cat-modal-panel {
  background: var(--bg-solid);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
  width: 100%;
  max-width: 860px;
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.cat-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--glass-border);
}
.cat-modal-header h3 { margin: 0; font-size: 16px; color: var(--text-primary); }
.cat-modal-close {
  background: var(--bg-input);
  border: 1px solid var(--glass-border);
  color: var(--text-primary);
  border-radius: var(--radius-sm);
  width: 32px;
  height: 32px;
  cursor: pointer;
  font-size: 14px;
}
.cat-modal-close:hover { background: var(--primary); color:#fff; }
.cat-modal-search {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md);
  border-bottom: 1px solid var(--glass-border);
}
.cat-modal-search input {
  flex: 1;
  background: var(--bg-input);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  color: var(--text-primary);
  font-size: 13px;
  font-family: var(--font-family);
  outline: none;
}
.cat-modal-search input:focus { border-color: var(--primary); }
.cat-modal-count {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}
.cat-modal-list {
  overflow-y: auto;
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.cat-loading, .cat-empty {
  padding: var(--space-xl);
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}
.cat-card {
  display: flex;
  gap: var(--space-md);
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  transition: var(--transition);
}
.cat-card:hover { background: var(--bg-card-hover); }
.cat-thumb {
  width: 72px;
  height: 72px;
  min-width: 72px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg-input);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cat-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cat-thumb-empty { font-size: 26px; color: var(--text-muted); }
.cat-card-body { flex: 1; min-width: 0; }
.cat-card-nome {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-xs);
}
.cat-card-info {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--space-xs);
}
.cat-chip {
  display: inline-flex;
  align-items: center;
  background: var(--bg-input);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-full);
  padding: 2px 10px;
  font-size: 11px;
  color: var(--text-secondary);
}
.cat-chip.cat-ok { color:#4ade80; border-color: rgba(74,222,128,0.4); }
.cat-chip.cat-no { color:#ff6b6b; border-color: rgba(255,107,107,0.4); }
.cat-card-link {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}
.cat-card-link a {
  color: var(--primary-light, #7aa2ff);
  font-size: 12px;
  word-break: break-all;
  text-decoration: none;
}
.cat-card-link a:hover { text-decoration: underline; }
.cat-copy-btn {
  background: var(--bg-input);
  border: 1px solid var(--glass-border);
  color: var(--text-primary);
  border-radius: var(--radius-sm);
  padding: 4px 12px;
  font-size: 11px;
  cursor: pointer;
  font-family: var(--font-family);
  transition: var(--transition);
}
.cat-copy-btn:hover { background: var(--primary); color:#fff; border-color: var(--primary); }

/* spinner global pequeno (catálogo interno) */
.spinner-sm {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid var(--border-color);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: cat-spin 0.8s linear infinite;
  vertical-align: middle;
}
@keyframes cat-spin {
  to { transform: rotate(360deg); }
}