/* VieON Hub Growth Dashboard — styles beyond Tailwind utilities */

#nav a.nav-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  border-radius: 0.5rem;
  padding: 0.5rem 0.7rem;
  font-size: 0.8125rem;
  color: #cbd5e1;
  transition: background-color 0.15s, color 0.15s;
}
#nav a.nav-item:hover { background: rgba(51, 65, 85, 0.55); color: #f1f5f9; }
#nav a.nav-item.active { background: rgba(16, 185, 129, 0.15); color: #34d399; font-weight: 500; }
#nav a.nav-item i { width: 1.05rem; text-align: center; font-size: 0.8125rem; }
#nav .nav-group { padding: 0.7rem 0.7rem 0.3rem; font-size: 0.625rem; letter-spacing: 0.07em; text-transform: uppercase; color: #64748b; }

.card { border: 1px solid #1e293b; border-radius: 0.875rem; background: #0f172a; }
.card-head { display: flex; align-items: center; gap: 0.75rem; border-bottom: 1px solid #1e293b; padding: 0.85rem 1rem; }
.card-title { font-size: 0.875rem; font-weight: 600; }
.card-sub { font-size: 0.6875rem; color: #94a3b8; }
.card-body { padding: 1rem; }

.kpi { border: 1px solid #1e293b; border-radius: 0.875rem; background: #0f172a; padding: 1rem; }
.kpi-label { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.05em; color: #94a3b8; }
.kpi-value { margin-top: 0.35rem; font-size: 1.4rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.kpi-delta { margin-top: 0.2rem; font-size: 0.6875rem; }

.chart { width: 100%; height: 340px; }
.chart-sm { height: 260px; }
.chart-lg { height: 480px; }

.btn { display: inline-flex; align-items: center; gap: 0.4rem; border-radius: 0.5rem; border: 1px solid #334155; padding: 0.4rem 0.75rem; font-size: 0.75rem; transition: background-color 0.15s; }
.btn:hover { background: #1e293b; }
.btn-primary { border-color: transparent; background: #10b981; color: #020617; font-weight: 500; }
.btn-primary:hover { background: #34d399; }
.btn-danger { border-color: #7f1d1d; color: #fca5a5; }
.btn-danger:hover { background: rgba(127, 29, 29, 0.35); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.field { width: 100%; border-radius: 0.5rem; border: 1px solid #334155; background: #020617; padding: 0.4rem 0.6rem; font-size: 0.75rem; color: #e2e8f0; }
.field:focus { border-color: #10b981; outline: none; }

.tbl { width: 100%; border-collapse: collapse; font-size: 0.75rem; }
.tbl th { position: sticky; top: 0; z-index: 1; background: #0f172a; border-bottom: 1px solid #1e293b; padding: 0.5rem 0.6rem; text-align: left; font-weight: 600; color: #94a3b8; white-space: nowrap; }
.tbl td { border-bottom: 1px solid rgba(30, 41, 59, 0.6); padding: 0.45rem 0.6rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl tbody tr:hover { background: rgba(30, 41, 59, 0.35); }
.tbl-wrap { max-height: 460px; overflow: auto; border: 1px solid #1e293b; border-radius: 0.75rem; }

.badge { display: inline-flex; align-items: center; gap: 0.25rem; border-radius: 999px; padding: 0.1rem 0.5rem; font-size: 0.625rem; font-weight: 500; }
.badge-green { background: rgba(16, 185, 129, 0.15); color: #34d399; }
.badge-amber { background: rgba(245, 158, 11, 0.15); color: #fbbf24; }
.badge-rose { background: rgba(244, 63, 94, 0.15); color: #fb7185; }
.badge-slate { background: rgba(100, 116, 139, 0.2); color: #cbd5e1; }
.badge-sky { background: rgba(14, 165, 233, 0.15); color: #38bdf8; }

.alert { display: flex; gap: 0.7rem; border-radius: 0.75rem; border-left: 3px solid; padding: 0.8rem 0.9rem; }
.alert-critical { border-color: #f43f5e; background: rgba(244, 63, 94, 0.08); }
.alert-warning { border-color: #f59e0b; background: rgba(245, 158, 11, 0.08); }
.alert-info { border-color: #0ea5e9; background: rgba(14, 165, 233, 0.08); }

.heat-cell { text-align: center; font-variant-numeric: tabular-nums; }
.heat-empty { color: #334155; }

.skeleton { border-radius: 0.75rem; background: linear-gradient(90deg, #0f172a 25%, #1e293b 37%, #0f172a 63%); background-size: 400% 100%; animation: sk 1.3s ease-in-out infinite; }
@keyframes sk { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

.drop { border: 1.5px dashed #334155; border-radius: 0.75rem; padding: 1.25rem; text-align: center; transition: border-color 0.15s, background-color 0.15s; }
.drop.over { border-color: #10b981; background: rgba(16, 185, 129, 0.06); }

.toast-item { display: flex; align-items: flex-start; gap: 0.6rem; min-width: 280px; max-width: 420px; border: 1px solid #1e293b; border-radius: 0.75rem; background: #0f172a; padding: 0.75rem 0.9rem; font-size: 0.75rem; box-shadow: 0 10px 30px rgba(0,0,0,.45); }

.tab-btn { border-radius: 0.5rem; padding: 0.35rem 0.7rem; font-size: 0.75rem; border: 1px solid #1e293b; }
.tab-btn.active { background: rgba(16, 185, 129, 0.15); border-color: rgba(16, 185, 129, 0.4); color: #34d399; }

.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.num { font-variant-numeric: tabular-nums; }