/* ==========================================================================
   NVX Academy — Inline Styles Replacement Utilities
   Consolidates the 20 most common inline style patterns identified in the
   2026-09-07 inline styles audit. Classes use the c- prefix.
   ========================================================================== */

/* ---------- Tipografia ---------- */

.c-heading-section {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--neutral-700);
  margin-top: 24px;
  margin-bottom: 12px;
}

.c-text-muted-sm {
  font-size: 10.5px;
  color: var(--neutral-400);
}

.c-text-amber {
  font-size: 15px;
  color: var(--color-warning, var(--warning));
}

.c-text-muted {
  color: var(--text-muted, var(--neutral-500));
}

.c-text-subtle {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.4);
}

.c-text-purple {
  color: var(--color-purple);
}

.color-dot--gray { background: var(--neutral-400); }

/* ---------- Containers ---------- */

.c-panel-dark {
  border: 1px solid var(--neutral-700);
  padding: 12px;
  color: var(--neutral-200);
}

.c-panel-dark-bold {
  border: 1px solid var(--neutral-700);
  padding: 12px;
  text-align: left;
  color: var(--neutral-200);
  font-weight: 600;
}

.c-card-outline {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0.7rem;
  border: 1px solid var(--gy-mid, var(--neutral-200));
  border-radius: 10px;
}

/* ---------- Badges ---------- */

.c-badge-pill {
  display: inline-block;
  background: var(--neutral-700);
  color: var(--neutral-500);
  font-size: 9px;
  padding: 2px 8px;
  border-radius: 5px;
}

.c-badge-pill-orange {
  display: inline-block;
  font-size: 10.5px;
  background: var(--or-pale, var(--accent-subtle));
  color: var(--or-dim, var(--orange-700));
  padding: 2px 8px;
  border-radius: 5px;
}

.c-badge-success {
  display: inline-block;
  background: var(--color-success-bg, #F0FDF4);
  color: var(--color-success, var(--success-text));
  padding: 2px 8px;
  border-radius: 5px;
}

/* ---------- Layout ---------- */

.c-row-clickable {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.c-col-right {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
}

.c-flex-1 {
  flex: 1;
}

/* ---------- Backgrounds ---------- */

.c-bg-dark {
  background-color: var(--neutral-900);
}

.c-bg-dark-2 {
  background-color: var(--neutral-900);
}

.c-bg-dark-3 {
  background-color: var(--neutral-800);
}

/* ---------- Espaçamento ---------- */

.c-pt-0 {
  padding-top: 0;
}

.pt-4 { padding-top: 1.6rem; }
.pt-5 { padding-top: 2.2rem; }

/* ---------- Utilitários ---------- */

.c-w-60 {
  width: 60%;
}

.c-w-90 {
  width: 90%;
}

.c-w-94 { width: 94%; }
.c-w-88 { width: 88%; }
.c-w-76 { width: 76%; }
.c-w-52 { width: 52%; }
.c-w-41 { width: 41%; }
.c-w-18 { width: 18%; }

.c-w-20 {
  width: 20%;
}

.c-w-21 { width: 21%; }
.c-w-92 { width: 92%; }

.c-w-3 { width: 3%; }
.c-w-8 { width: 8%; }
.c-w-11 { width: 11%; }
.c-w-12 { width: 12%; }
.c-w-26 { width: 26%; }
.c-w-34 { width: 34%; }
.c-w-30 { width: 30%; }
.c-w-45 { width: 45%; }
.c-w-50 { width: 50%; }
.c-w-56 { width: 56%; }
.c-w-59 { width: 59%; }
.c-w-64 { width: 64%; }
.c-w-68 { width: 68%; }
.c-w-76 { width: 76%; }
.c-w-70 { width: 70%; }
.c-w-75 { width: 75%; }
.c-w-78 { width: 78%; }
.c-w-80 { width: 80%; }
.c-w-82 { width: 82%; }
.c-w-84 { width: 84%; }
.c-w-85 { width: 85%; }
.c-w-88 { width: 88%; }
.c-w-90 { width: 90%; }
.c-w-94 { width: 94%; }
.c-w-95 { width: 94.6%; }
.c-w-52 { width: 52%; }
.c-w-4 { width: 4%; }
.c-w-1 { width: 1%; }

/* ---------- Chart containers ---------- */

.chart-container { position: relative; width: 100%; height: 190px; }
.chart-container--h170 { height: 170px; }
.chart-container--h180 { height: 180px; }
.chart-container--h200 { height: 200px; }
.chart-container--h260 { height: 260px; }

/* ---------- Layout helpers ---------- */

.c-card-dark {
  background: var(--neutral-950);
  border: 1px solid var(--neutral-800);
  border-radius: 9px;
  padding: .7rem;
}

.c-stat-row {
  padding: 5px 0;
  border-bottom: 1px solid var(--neutral-100);
}

/* ---------- Text helpers ---------- */

.c-text-xs-muted {
  font-size: 10.5px;
  color: var(--neutral-500);
}

.border { border: 1px solid var(--gy-mid); }
.border-dark { border-color: var(--neutral-700); }

.c-border-danger-light {
  border-color: #FECACA;
}

/* ---------- Avatar helpers ---------- */

.c-avatar--sm {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

/* ---------- Layout helpers ---------- */

.c-w-9 { width: 38px; }
.w-4 { width: 15px; }
.h-4 { height: 15px; }
.c-h-9 { height: 38px; }

/* ---------- Spacing ---------- */

.block { display: block; }
.px-1 { padding-left: 2px; padding-right: 2px; }
.ml-1 { margin-left: 6px; }
.ml-2 { margin-left: 10px; }
.py-2 { padding-top: .8rem; padding-bottom: .8rem; }
.mb-10px { margin-bottom: 10px; }
.mt-4 { margin-top: 1.6rem; }
.min-h-56px { min-height: 56px; }
.max-w-3\/4 { max-width: 75%; }
.max-h-35rem { max-height: 35rem; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* ---------- Typography ---------- */

.text-sm { font-size: 12.5px; }
.text-white { color: var(--neutral-0); }
.accent-orange { accent-color: var(--accent); }
.text-gray-light { color: var(--neutral-300); }
.text-green-800 { color: #065F46; }
.text-orange-dim { color: var(--orange-700); }
.font-normal { font-weight: 400; font-style: normal; }
.not-italic { font-style: normal; }
.uppercase { text-transform: uppercase; }
.leading-relaxed { line-height: 1.7; }
.leading-normal { line-height: 1.6; }
.leading-none { line-height: 1; }
.line-through { text-decoration: line-through; }

/* ---------- Display ---------- */

.absolute { position: absolute; }
.left-3 { left: 12px; }
.left-0 { left: 0; }
.top-1\/2 { top: 50%; }
.-translate-y-1\/2 { transform: translateY(-50%); }

/* ---------- Backgrounds ---------- */

.bg-red-50 { background: var(--neutral-50); }
.bg-green-50 { background: #F0FDF4; }
.bg-orange-pale { background: var(--accent-subtle); }
.bg-purple-pale { background: #EDE9FE; }
.bg-amber-pale { background: var(--warning-subtle); }
.bg-orange-dark { background: #e8662f; }
.bg-green-dark { background: #1f7a5c; }
.bg-red-dark { background: #b5482a; }
.bg-blue-dark { background: #2a5f7a; }
.bg-amber-dark { background: #8a5a2e; }
.bg-gray-light { background: var(--gy-lt, var(--neutral-50)); }

/* ---------- Buttons ---------- */

.c-btn--danger {
  background: var(--danger);
  color: var(--neutral-0);
  border: none;
  padding: 10px 20px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.c-btn--danger:hover {
  background: var(--red-700);
}

.c-btn-outline-gray {
  background: none;
  border: 1px solid var(--neutral-200);
  color: var(--gy-dk);
  padding: 8px 20px;
  border-radius: 9px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}

.c-btn-outline-gray:hover {
  border-color: var(--or);
  color: var(--or);
}

.c-btn-dashed {
  background: none;
  border: 1.5px dashed var(--neutral-200);
  padding: .7rem;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--gy-dk);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  width: 100%;
}

.c-btn-dashed:hover {
  border-color: var(--or);
  color: var(--or);
}

/* ---------- Badges ---------- */

.c-badge-host {
  font-size: 8.5px;
  background: var(--accent);
  color:var(--accent-contrast);
  padding: 1px 5px;
  border-radius: 4px;
  margin-left: 3px;
  text-transform: none;
  font-weight: 600;
}

/* ---------- Containers ---------- */

.c-panel-light {
  padding: 1.2rem 1.4rem;
  background:var(--surface-default);
  border-bottom: 1px solid var(--gy-mid);
}

.chart-container--h220 { height: 220px; }

/* ---------- Avatars ---------- */

.c-avatar--xs {
  width: 58px;
  height: 58px;
}

/* ---------- Icon sizing ---------- */

.icon-xs { font-size: 10px; }
.icon-sm { font-size: 11px; }
.icon-md { font-size: 14px; }
.icon-lg { font-size: 18px; }
.icon-xl { font-size: 22px; }
.icon-2xl { font-size: 32px; }

/* ---------- Display ---------- */

.u-hidden { display: none !important; }