/* Metas Comerciais — UI oficial (ref: Metas Semanais.html) */

.app-content {
  padding: 18px 18px 48px;
}

/* ---- Cards ---- */
.card,
.app-card,
.panel-card,
.sg-card {
  background: var(--surface, #fff);
  border: 1px solid var(--line, #e2e8f1);
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 18px;
  box-shadow: 0 1px 2px rgba(20, 30, 50, 0.03);
}

.card > h2,
.card-title,
.section-title,
.sg-card-title,
.panel-heading h2 {
  font-family: 'Sora', sans-serif;
  font-size: 15px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 4px;
  color: var(--ink, #16202f);
}

.sub,
.card-subtitle,
.section-subtitle,
.sg-card-sub {
  color: var(--muted, #5b6b80);
  font-size: 12.5px;
  margin: 2px 0 16px;
}

.step-no,
.sg-step-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: var(--navy, #16273f);
  color: #fff;
  font-family: 'Sora', sans-serif;
  font-size: 12px;
  font-weight: 600;
  flex: none;
}

/* ---- Inputs globais ---- */
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea,
.sg-input {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--line, #e2e8f1);
  border-radius: 9px;
  font: inherit;
  color: var(--ink, #16202f);
  background: #fff;
  outline: none;
  font-variant-numeric: tabular-nums;
}

input:focus,
select:focus,
textarea:focus,
.sg-input:focus {
  border-color: var(--accent, #0e7c86);
  box-shadow: 0 0 0 3px rgba(14, 124, 134, 0.13);
}

input:disabled,
input[readonly],
select:disabled,
textarea:disabled {
  background: var(--panel, #f7f9fc);
  color: var(--muted, #5b6b80);
}

label.fld > span,
.form-label,
.input-label,
.sg-field > span:first-child {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted, #5b6b80);
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* ---- Botões ---- */
.btn,
.primary-action,
.secondary-action {
  border: 1px solid var(--line, #e2e8f1);
  background: #fff;
  color: var(--ink, #16202f);
  padding: 8px 13px;
  border-radius: 9px;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: 0.12s;
}

.btn:hover,
.secondary-action:hover {
  border-color: var(--navy2, #1f3a5f);
  background: var(--panel, #f7f9fc);
}

.btn.primary,
.primary-action {
  background: var(--navy, #16273f);
  color: #fff;
  border-color: var(--navy, #16273f);
}

.btn.primary:hover,
.primary-action:hover {
  background: var(--navy2, #1f3a5f);
}

.btn.sm,
.sg-btn-sm {
  padding: 5px 9px;
  font-size: 12.5px;
}

.btn.ghost {
  border-style: dashed;
  color: var(--muted, #5b6b80);
}

/* ---- Tabelas ---- */
.tbl,
.data-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
  font-variant-numeric: tabular-nums;
}

.tbl th,
.data-table thead th {
  font-family: 'Sora', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted, #5b6b80);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: right;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line, #e2e8f1);
  background: transparent;
}

.tbl th.l,
.tbl td.l,
.data-table .l {
  text-align: left;
}

.tbl td,
.data-table tbody td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--line2, #eef2f7);
  text-align: right;
  background: #fff;
}

.tbl tr:last-child td,
.data-table tbody tr:last-child td {
  border-bottom: none;
}

.tbl .total td,
.tbl tr.total td,
.data-table .total td {
  font-weight: 600;
  border-top: 2px solid var(--line, #e2e8f1);
  background: var(--panel, #f7f9fc);
}

/* Listas de cadastro (texto puro, sem colunas numericas) nao devem herdar
   o alinhamento a direita pensado para tabelas financeiras acima. */
#empresas .data-table th,
#empresas .data-table td,
#usuarios .data-table th,
#usuarios .data-table td,
#eventos .data-table th,
#eventos .data-table td,
#auditoria .data-table th,
#auditoria .data-table td,
#ciclos .data-table th,
#ciclos .data-table td {
  text-align: left;
}

/* ---- Níveis ---- */
.tier-head {
  font-family: 'Sora', sans-serif;
  font-weight: 600;
  font-size: 12px;
  color: #fff;
  text-align: center;
  padding: 7px 10px;
  border-radius: 7px;
  white-space: nowrap;
  display: inline-block;
}

.th-b { background: linear-gradient(135deg, var(--bronze, #c17a3f), var(--bronzeD, #9c5d2a)); }
.th-p { background: linear-gradient(135deg, var(--prata, #94a3b3), var(--prataD, #74838f)); }
.th-o { background: linear-gradient(135deg, var(--ouro, #e0a92e), var(--ouroD, #bd8910)); }
.th-d { background: linear-gradient(135deg, var(--diam, #37afd0), var(--diamD, #2289a6)); }

.b { color: var(--bronzeD, #9c5d2a); font-weight: 600; }
.p { color: var(--prataD, #74838f); font-weight: 600; }
.o { color: var(--ouroD, #bd8910); font-weight: 600; }
.d { color: var(--diamD, #2289a6); font-weight: 600; }

.sg-lv-bronze .sg-level-head,
.ncard.bronze .top { background: linear-gradient(135deg, var(--bronze, #c17a3f), var(--bronzeD, #9c5d2a)); color: #fff; }
.sg-lv-prata .sg-level-head,
.ncard.prata .top { background: linear-gradient(135deg, var(--prata, #94a3b3), var(--prataD, #74838f)); color: #fff; }
.sg-lv-ouro .sg-level-head,
.ncard.ouro .top { background: linear-gradient(135deg, var(--ouro, #e0a92e), var(--ouroD, #bd8910)); color: #fff; }
.sg-lv-diamante .sg-level-head,
.ncard.diamante .top { background: linear-gradient(135deg, var(--diam, #37afd0), var(--diamD, #2289a6)); color: #fff; }

/* ---- Etapas ---- */
.stage-tag {
  font-family: 'Sora', sans-serif;
  font-weight: 600;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--navy, #16273f);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  font-size: 12px;
}

/* ---- Premiação ---- */
.prizecard {
  border: 1px solid var(--line, #e2e8f1);
  border-radius: 11px;
  padding: 13px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  background: #fff;
}

.prizecard .ttl {
  font-family: 'Sora', sans-serif;
  font-weight: 600;
  font-size: 13px;
  color: #fff;
  padding: 6px 10px;
  border-radius: 7px;
}

.prizecard .row-flex {
  display: flex;
  gap: 8px;
  align-items: center;
}

.prizecard .val {
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}

.prizecard small {
  color: var(--muted, #5b6b80);
  font-size: 11px;
}

.niveis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 6px;
}

.ncard {
  border: 1px solid var(--line, #e2e8f1);
  border-radius: 11px;
  overflow: hidden;
  background: #fff;
}

.ncard .top {
  padding: 9px 12px;
  color: #fff;
  font-family: 'Sora', sans-serif;
  font-weight: 600;
  font-size: 13px;
}

.ncard .body {
  padding: 11px 12px;
}

.subh {
  font-family: 'Sora', sans-serif;
  font-weight: 600;
  font-size: 13px;
  margin: 20px 0 6px;
  color: var(--ink, #16202f);
}

.note {
  font-size: 12px;
  color: var(--muted, #5b6b80);
  margin-top: 10px;
  line-height: 1.55;
}

/* ---- Abas ---- */
.seg {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 12px 0;
}

.seg button,
.seg .seg-btn {
  border: 1px solid var(--line, #e2e8f1);
  background: #fff;
  color: var(--muted, #5b6b80);
  padding: 6px 12px;
  border-radius: 8px;
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}

.seg button.on,
.seg button.is-active,
.seg .seg-btn.on {
  background: var(--panel, #f7f9fc);
  color: var(--ink, #16202f);
  border-color: var(--navy2, #1f3a5f);
  font-weight: 600;
}

/* ---- Badges status ---- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 20px;
}

.badge.ok { background: #e3f5ec; color: var(--ok, #1f9d5b); }
.badge.warn { background: #fdf3df; color: var(--warn, #cf8a00); }
.badge.bad { background: #fce6e6; color: var(--bad, #d64545); }

@media (max-width: 900px) {
  .niveis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .niveis {
    grid-template-columns: 1fr;
  }
}