/* Área logada ("Minha conta") e painel admin — mesmo sistema da landing:
   campos chapados nas cores do projeto, Chivo, cantos retos, sem sombra. */

body.account-body {
  min-height: 100svh;
  background: var(--bg);
}

.card {
  background: #fff;
  padding: clamp(20px, 3vw, 32px);
}

.section-subtitle {
  color: var(--muted);
  font-size: var(--step-body);
}

/* ---------------- cabeçalho ---------------- */
.account-header {
  background: var(--field-purple);
  color: #fff;
}

.account-header .navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
}

.account-header-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

.account-header-link {
  font-size: var(--step-small);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.25em;
}

.btn-logout {
  min-height: 40px;
  padding: 0 16px;
  border: 0;
  cursor: pointer;
  background: var(--accent);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--step-small);
  font-weight: 700;
  transition: background-color var(--t-hover) ease, transform var(--t-press) var(--ease-out);
}

.btn-logout:active { transform: scale(0.96); }

@media (hover: hover) and (pointer: fine) {
  .btn-logout:hover { background: #fff; }
}

/* ---------------- título da página ---------------- */
.account-heading {
  padding: clamp(40px, 6vw, 80px) 0 8px;
}

.account-heading h1 {
  margin-bottom: 12px;
  font-size: clamp(3rem, 1.6rem + 5vw, 6.5rem);
  line-height: 0.88;
  letter-spacing: -0.05em;
}

/* ---------------- grade: abas + conteúdo ---------------- */
.account-grid {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 32px;
  align-items: start;
  padding: 32px 0 80px;
}

.account-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.account-nav a {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 0 16px;
  background: #fff;
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
  transition: background-color var(--t-hover) ease, color var(--t-hover) ease;
}

@media (hover: hover) and (pointer: fine) {
  .account-nav a:hover { background: var(--surface); }
}

.account-nav a.active { background: var(--ink); color: var(--accent); }
.account-nav a.account-nav-danger { color: var(--danger); }
.account-nav a.account-nav-danger.active { background: var(--danger); color: #fff; }

.account-section-title { margin-bottom: 20px; }

.account-section-title h2,
.card h2 {
  font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem);
  line-height: 0.95;
}

.account-section p + p { margin-top: 0.8em; }
.account-section > p { max-width: 64ch; }

@media (prefers-reduced-motion: no-preference) {
  .account-section:not(.hidden) { animation: section-in 360ms var(--ease-out); }
}

@keyframes section-in {
  from { opacity: 0; transform: translateY(12px); }
}

.delete-accept-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0;
  cursor: pointer;
}

.delete-accept-row input[type='checkbox'] {
  width: 22px;
  height: 22px;
  accent-color: var(--field-purple);
}

.delete-accept-row input[type='checkbox']:disabled { cursor: not-allowed; }
.delete-accept-row span { font-size: var(--step-small); color: var(--muted); }

/* ---------------- Início: boas-vindas ---------------- */
.welcome-hero {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 24px;
}

.welcome-hero h2 { margin-bottom: 6px; }

.welcome-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  min-width: 72px;
  background: var(--field-purple);
  color: var(--accent);
  font-size: 2.5rem;
  font-weight: 900;
}

.welcome-alert {
  margin-bottom: 20px;
  padding: 14px 16px;
  background: var(--accent);
  font-weight: 700;
}

.welcome-alert a { margin-left: 8px; font-weight: 900; }

.welcome-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 4px;
}

.welcome-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 16px;
  background: var(--bg);
}

.welcome-item strong { overflow-wrap: anywhere; font-size: var(--step-body); }
.welcome-label { font-size: var(--step-small); color: var(--muted); }

/* ---------------- tabelas ---------------- */
table.invoices tbody tr { transition: background-color var(--t-hover) ease; }

@media (hover: hover) and (pointer: fine) {
  table.invoices tbody tr:hover { background: var(--surface); }
}

table.invoices a { font-weight: 700; text-underline-offset: 0.2em; }

/* ---------------- admin ---------------- */
/* /admin/ usa mais largura de tela — a tabela de assinantes tem mais colunas
   e status que pode ser um texto longo ("Cortesia (cupom X) até DATA"). */
.account-layout.admin-wide { max-width: 1320px; }

.subscribers-filters {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.subscribers-filters input { flex: 1; }

.subscribers-filters input,
.subscribers-filters select {
  min-height: 48px;
  padding: 10px 14px;
  border: 2px solid var(--surface);
  border-radius: 0;
  background: #fff;
  font-family: var(--font);
  font-size: var(--step-small);
}

.subscribers-filters input:focus,
.subscribers-filters select:focus { outline: none; border-color: var(--field-purple); }

.subscribers-filters select { min-width: 160px; }

/* Colunas: 1 ID, 2 Nome, 3 E-mail, 4 Plano, 5 Status. Nome ganha espaço,
   e-mail fica sempre em uma linha. */
#subscribers-table th:nth-child(2),
#subscribers-table td:nth-child(2) { min-width: 220px; }

#subscribers-table th:nth-child(3),
#subscribers-table td:nth-child(3) { white-space: nowrap; }

#subscribers-table th:nth-child(5),
#subscribers-table td:nth-child(5) { min-width: 260px; }

#subscribers-table td:last-child { text-align: right; white-space: nowrap; }

/* Status de assinante pode ter texto longo (cortesia com nome do cupom e
   data) — aqui vira uma tag que acompanha o texto em vez de espremê-lo. */
#subscribers-table .status-pill {
  display: inline-block;
  white-space: normal;
  text-align: left;
  line-height: 1.4;
}

.btn-sm {
  min-height: 36px;
  padding: 0 14px;
  font-size: var(--step-small);
}

@media (max-width: 720px) {
  .account-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; padding-top: 20px; }
  .account-nav { flex-direction: row; overflow-x: auto; scrollbar-width: none; }
  .account-nav a { flex-shrink: 0; }
  .subscribers-filters { flex-direction: column; }
}

/* Modal de detalhes do assinante e de cupons (/admin/) */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(43, 33, 64, 0.72);
}

.modal-overlay.hidden { display: none; }

.modal-card {
  position: relative;
  width: min(680px, 100%);
  max-height: min(90vh, 820px);
  overflow-y: auto;
  padding: 64px 32px 32px;
  background: var(--bg);
}

@media (prefers-reduced-motion: no-preference) {
  .modal-overlay:not(.hidden) .modal-card { animation: section-in 320ms var(--ease-out); }
}

.modal-close {
  position: absolute;
  top: 20px;
  right: 24px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--font);
  font-size: var(--step-small);
  font-weight: 700;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin: 12px 0 24px;
}

.detail-grid > div { padding: 12px 14px; background: #fff; }

.detail-grid dt {
  margin: 0;
  font-size: var(--step-small);
  color: var(--muted);
}

.detail-grid dd { margin: 2px 0 0; font-weight: 700; }

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

/* ---------------- dashboard do admin ---------------- */
.dash-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 4px;
  margin-bottom: 4px;
}

.dash-kpi {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px;
  background: var(--field-purple);
  color: #fff;
}

.dash-kpi strong {
  font-size: clamp(2rem, 1.6rem + 1.2vw, 2.75rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}

.dash-kpi span { font-size: var(--step-small); }
.dash-kpi.alert { background: var(--danger); }
.dash-kpi.alert strong { color: #fff; }

.dash-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
}

.dash-card h3 {
  margin: 0 0 14px;
  font-size: var(--step-body);
  line-height: 1.1;
}

.dash-wide { grid-column: span 2; }
.dash-full { grid-column: 1 / -1; }
.dash-chart { position: relative; height: 240px; }

@media (max-width: 900px) {
  .dash-grid { grid-template-columns: 1fr; }
  .dash-wide, .dash-full { grid-column: auto; }
}

/* ---------------- cantos arredondados ---------------- */
.btn-logout { border-radius: var(--pill); }

.card,
.modal-card { border-radius: var(--radius-lg); }

.dash-kpi,
.welcome-avatar { border-radius: var(--radius); }

.account-nav a,
.welcome-item,
.welcome-alert,
.detail-grid > div,
.subscribers-filters input,
.subscribers-filters select { border-radius: var(--radius-sm); }