/* ---------- Visao geral ---------- */

.stats-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 640px) {
  .stats-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.history-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}


/* ---------- Gerador ---------- */

.gerador-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 1024px) {
  .gerador-grid {
    grid-template-columns: 2fr 3fr;
  }
}

#gerador-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-radius: 12px;
  border: 1px solid var(--slate-800);
  padding: 20px;
}

.coupons-card {
  border-radius: 8px;
  border: 1px solid var(--slate-800);
  background: rgba(15, 23, 42, 0.5);
  padding: 12px;
}

.coupons-card > p {
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--slate-300);
}

.coupon-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.coupon-grid.extra {
  margin-top: 8px;
}

.coupons-card .checkbox-row {
  margin-top: 12px;
  border-top: 1px solid var(--slate-800);
  padding-top: 12px;
}

.toggle-extra-btn {
  margin-top: 8px;
  width: 100%;
  border-radius: 6px;
  border: 1px solid var(--slate-700);
  padding: 8px;
  font-size: 14px;
  color: var(--slate-300);
}

.toggle-extra-btn:hover {
  background: var(--slate-800);
}

.toggles-card {
  border-radius: 8px;
  border: 1px solid var(--slate-800);
  background: rgba(15, 23, 42, 0.5);
  padding: 12px;
}

.toggle-group + .toggle-group {
  margin-top: 12px;
  border-top: 1px solid var(--slate-800);
  padding-top: 12px;
}

.toggle-group-title {
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.toggle-group-title.accent-urgencia {
  color: color-mix(in srgb, var(--orange-400) 90%, transparent);
}

.toggle-group-title.accent-especificacoes {
  color: color-mix(in srgb, var(--sky-400) 90%, transparent);
}

.toggle-group-title.accent-plataforma {
  color: color-mix(in srgb, var(--violet-400) 90%, transparent);
}

.toggle-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.toggle-items .checkbox-row .emoji {
  display: inline-block;
  width: 16px;
  flex-shrink: 0;
  text-align: center;
  font-size: 14px;
  line-height: 1;
}

#gerador-output {
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-radius: 12px;
  border: 1px solid var(--slate-800);
  padding: 20px;
}

#outputMessage {
  min-height: 190px;
}

.message-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.message-actions .btn-send {
  flex: 1;
}

.image-upload-wrap {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
}

.image-dropzone {
  display: flex;
  min-height: 0;
  flex: 1;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px dashed var(--slate-700);
  background: rgba(15, 23, 42, 0.5);
  padding: 32px 12px;
  font-size: 14px;
  color: var(--slate-500);
  text-align: center;
}

.image-dropzone:hover {
  border-color: var(--slate-600);
  color: var(--slate-400);
}

.image-dropzone.dragging {
  border-color: var(--emerald-500);
  background: rgba(16, 185, 129, 0.1);
  color: var(--emerald-400);
}

.image-preview-box {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  align-items: center;
  border-radius: 8px;
  border: 1px solid var(--slate-800);
  background: rgba(15, 23, 42, 0.5);
  padding: 12px;
}

.image-preview-box.dragging {
  border-color: var(--emerald-500);
  background: rgba(16, 185, 129, 0.1);
}

.image-preview-visual {
  position: relative;
  width: 100%;
  min-height: 0;
  flex: 1;
}

.image-preview-visual img {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  border-radius: 6px;
  object-fit: contain;
}

.remove-image-btn {
  position: absolute;
  right: 8px;
  top: 8px;
  display: flex;
  height: 28px;
  width: 28px;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: rgba(2, 6, 23, 0.8);
  color: var(--slate-300);
}

.remove-image-btn:hover {
  background: var(--slate-800);
}

.image-preview-box .image-name {
  margin-top: 8px;
  flex-shrink: 0;
  font-size: 14px;
  color: var(--slate-300);
}

.image-preview-box .image-size {
  flex-shrink: 0;
  font-size: 12px;
  color: var(--slate-500);
}

/* ---------- Cupons ---------- */

.cupons-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.cupons-categorias {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.cupons-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cupom-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-radius: 12px;
  border: 1px solid var(--slate-800);
  background: rgba(15, 23, 42, 0.4);
  padding: 16px;
}

@media (min-width: 640px) {
  .cupom-row {
    flex-direction: row;
    align-items: center;
  }
}

.cupom-discount-box {
  display: flex;
  width: 80px;
  flex-shrink: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(16, 185, 129, 0.15);
  color: var(--emerald-400);
  padding: 8px 0;
}

.cupom-discount-box .discount-value {
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
}

.cupom-discount-box .discount-label {
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.8;
}

.cupom-info {
  min-width: 0;
  flex: 1;
}

.cupom-info-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.cupom-nome {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 600;
  color: var(--slate-100);
}

.cupom-info-bottom {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  font-size: 12px;
  color: var(--slate-500);
}

.cupom-info-bottom .value {
  color: var(--slate-300);
}

.cupom-info-bottom a {
  color: var(--emerald-400);
}

.cupom-info-bottom a:hover {
  text-decoration: underline;
}

.cupom-copy-btn {
  flex-shrink: 0;
}

/* ---------- Faturamento ---------- */

/* colunas reagem a largura da propria pagina (container query), nao da
   janela - a sidebar fixa de 256px come boa parte da tela em telas
   menores, e media query sozinha deixaria tudo espremido */
#page-faturamento {
  container-type: inline-size;
}

.fat-stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@container (min-width: 720px) {
  .fat-stats {
    grid-template-columns: repeat(3, 1fr);
  }
}

.fat-ano {
  display: flex;
  align-items: center;
  gap: 4px;
  border-radius: 6px;
  border: 1px solid var(--slate-800);
  padding: 2px;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--slate-100);
}

.fat-ano span {
  min-width: 48px;
  text-align: center;
}

.fat-ano .layout-toggle-btn {
  padding: 9px;
}

.stat-tile .stat-value.fat-stat {
  /* 8cqi: no celular mais estreito (320px) ainda cabe valor de milhoes */
  font-size: min(24px, 8cqi);
  font-family: var(--font-mono);
  white-space: nowrap;
}

/* em 3 colunas o card fica estreito - a fonte acompanha a largura da
   pagina pra caber ate valores na casa dos milhoes */
@container (min-width: 720px) {
  .stat-tile .stat-value.fat-stat {
    font-size: min(24px, 2.5cqi);
  }
}

/* troca de ano: mantem o ano anterior na tela (esmaecido) ate o novo
   chegar, em vez de piscar "Carregando..." e pular o scroll pro topo */
.fat-conteudo {
  display: flex;
  flex-direction: column;
  gap: 24px;
  transition: opacity 0.15s;
}

.fat-conteudo[inert] {
  opacity: 0.45;
}

.fat-stat.negativo,
.fat-valor.negativo,
.fat-tooltip .negativo {
  color: var(--red-400);
}

/* grafico: eixo Y com folga a esquerda pros rotulos */
.fat-chart {
  margin-top: 16px;
}

.fat-chart-plot {
  position: relative;
  height: 220px;
  margin-left: 64px;
}

.fat-gridline {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px solid rgba(30, 41, 59, 0.6);
}

.fat-gridline.base {
  border-top-color: var(--slate-700);
}

.fat-gridline span {
  position: absolute;
  right: 100%;
  margin-right: 10px;
  transform: translateY(-50%);
  font-size: 11px;
  color: var(--slate-500);
  white-space: nowrap;
}

.fat-bars {
  position: absolute;
  inset: 0;
  display: flex;
}

.fat-bar-col {
  position: relative;
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  border-radius: 6px;
  outline: none;
  cursor: default;
}

.fat-bar-col:hover,
.fat-bar-col:focus-visible {
  background: rgba(30, 41, 59, 0.35);
}

.fat-bar {
  width: 56%;
  max-width: 36px;
  border-radius: 4px 4px 0 0;
  background: color-mix(in srgb, var(--sky-400) 75%, transparent);
  transition: background-color 0.15s;
}

.fat-bar-col.atual .fat-bar,
.fat-bar-col:hover .fat-bar,
.fat-bar-col:focus-visible .fat-bar {
  background: var(--sky-400);
}

.fat-bar-labels {
  display: flex;
  margin-left: 64px;
  margin-top: 8px;
}

.fat-bar-labels .lbl-short {
  display: none;
}

@container (max-width: 560px) {
  .fat-bar-labels .lbl-full {
    display: none;
  }

  .fat-bar-labels .lbl-short {
    display: inline;
  }
}

.fat-bar-labels > span {
  flex: 1;
  text-align: center;
  font-size: 11px;
  color: var(--slate-500);
}

.fat-tooltip {
  position: absolute;
  top: 0;
  z-index: 5;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-radius: 8px;
  border: 1px solid var(--slate-700);
  background: var(--slate-950);
  padding: 8px 12px;
  font-size: 12px;
  color: var(--slate-400);
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
}

.fat-tooltip strong {
  color: var(--slate-100);
}

.fat-tooltip b {
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--slate-100);
}

/* cards dos meses - mesma estrutura da planilha */
.fat-meses {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@container (min-width: 600px) {
  .fat-meses {
    grid-template-columns: repeat(2, 1fr);
  }
}

@container (min-width: 900px) {
  .fat-meses {
    grid-template-columns: repeat(3, 1fr);
  }
}

.fat-mes {
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid var(--slate-800);
  background: rgba(15, 23, 42, 0.4);
}

.fat-mes.atual {
  border-color: color-mix(in srgb, var(--sky-400) 50%, transparent);
}

.fat-mes.salvo {
  animation: fat-flash-ok 0.9s ease-out;
}

.fat-mes.erro {
  animation: fat-flash-erro 0.9s ease-out;
}

@keyframes fat-flash-ok {
  from {
    border-color: var(--emerald-400);
  }
}

@keyframes fat-flash-erro {
  from {
    border-color: var(--red-400);
  }
}

.fat-mes-titulo {
  padding: 10px 14px;
  border-bottom: 1px solid var(--slate-800);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--slate-100);
}

.fat-mes.atual .fat-mes-titulo {
  color: var(--sky-400);
}

.fat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 6px 2px 14px;
  min-height: 36px;
  border-bottom: 1px solid rgba(30, 41, 59, 0.6);
  font-size: 14px;
  color: var(--slate-300);
}

.fat-row:last-child {
  border-bottom: none;
}

.fat-row-trafego {
  background: color-mix(in srgb, var(--red-500) 10%, transparent);
}

.fat-row-bruto {
  background: color-mix(in srgb, var(--blue-400) 10%, transparent);
}

.fat-row-liquido {
  background: color-mix(in srgb, var(--emerald-500) 12%, transparent);
  font-weight: 600;
}

.fat-input {
  flex: 0 1 150px;
  min-width: 0;
  min-height: 32px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  padding: 4px 8px;
  text-align: right;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--slate-100);
  outline: none;
}

.fat-input:hover {
  border-color: var(--slate-700);
}

.fat-input:focus {
  border-color: var(--emerald-500);
  background: var(--slate-950);
}

.fat-valor {
  padding: 4px 9px;
  font-family: var(--font-mono);
  color: var(--slate-100);
}

/* toque (celular/tablet): alvos de ~44px e fonte de 16px nos campos -
   abaixo de 16px o Safari do iPhone da zoom na tela ao focar o campo */
@media (pointer: coarse) {
  .fat-row {
    min-height: 46px;
  }

  .fat-input {
    min-height: 40px;
    font-size: 16px;
  }

  .fat-ano .layout-toggle-btn {
    padding: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fat-mes.salvo,
  .fat-mes.erro {
    animation: none;
  }

  .fat-conteudo {
    transition: none;
  }
}

/* ---------- Cache ---------- */

#page-cache {
  container-type: inline-size;
}

/* colunas fixas: link longo ou titulo gigante nunca empurram o botao de
   excluir pra fora da tela (o excesso vira "...", texto completo no
   tooltip do titulo) */
.cache-table {
  table-layout: fixed;
}

.cache-table th:nth-child(2) {
  width: 30%;
}

.cache-table th:nth-child(3) {
  width: 120px;
}

.cache-table td.title-cell {
  max-width: none;
}

.cache-table td.link-cell {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cache-table .action-cell {
  text-align: right;
  white-space: nowrap;
}


/* pagina estreita: cada produto vira um bloco (titulo + excluir em cima,
   link embaixo) em vez de uma tabela que precisaria rolar de lado pra
   chegar no botao de excluir */
@container (max-width: 640px) {
  .cache-table thead {
    display: none;
  }

  .cache-table tr {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 2px 8px;
    padding: 10px 12px;
  }

  .cache-table td {
    padding: 0;
  }

  .cache-table td.title-cell {
    max-width: none;
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }

  .cache-table .link-cell {
    grid-column: 1 / -1;
    grid-row: 2;
    font-size: 12px;
  }

  .cache-table .action-cell {
    grid-column: 2;
    grid-row: 1;
    width: auto;
  }
}


/* ---------- Visao geral: historico ---------- */

#page-visao-geral {
  container-type: inline-size;
}

/* mesmas colunas fixas do Cache: link/titulo longo nunca empurram o
   botao Copiar pra fora da tela */
.hist-table {
  table-layout: fixed;
}

.hist-table th:nth-child(1) {
  width: 170px;
}

.hist-table th:nth-child(3) {
  width: 26%;
}

.hist-table th:nth-child(4) {
  width: 110px;
}

.hist-table td.title-cell {
  max-width: none;
}

.hist-table .date-cell {
  white-space: nowrap;
  color: var(--slate-400);
}

.hist-table td.link-cell {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hist-table .action-cell {
  text-align: right;
}


/* pagina estreita: cada envio vira um bloco (data + copiar em cima,
   titulo, link) em vez de tabela com rolagem lateral */
@container (max-width: 640px) {
  .hist-table thead {
    display: none;
  }

  .hist-table tr {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 2px 8px;
    padding: 10px 12px;
  }

  .hist-table td {
    padding: 0;
  }

  .hist-table .date-cell {
    font-size: 12px;
  }

  .hist-table td.title-cell {
    grid-column: 1 / -1;
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }

  .hist-table td.link-cell {
    grid-column: 1 / -1;
    font-size: 12px;
  }

  .hist-table .action-cell {
    grid-column: 2;
    grid-row: 1;
  }
}