/* Painel administrativo (/admin) e area do cliente (/conta) compartilham um
   vocabulario visual (DESIGN.md, Principio IV). Primitivas comuns - reset,
   tipografia, card, botao, badge, tabela, empty-state, flash - ficam sob .cf
   (classe presente no <body> de AMBAS as areas: "cf adm" e "cf conta"); o
   que e exclusivo do painel administrativo (sidebar, stat-card, toolbar,
   paginacao, row-menu, formularios) fica sob .adm. Isolar os dois evita duas
   copias divergentes do mesmo botao (ver research.md D6 da feature
   002-customer-portal). Valores vem de tokens.css (fonte unica: DESIGN.md).
   Ver DESIGN.md > "Painel Administrativo" e > "Área do Cliente" para o
   vocabulario e as excecoes nomeadas (rampa Categoria, badge "Ativa" em
   success). stylesheet_link_tag :app tambem carrega este arquivo na landing
   e na tela de login, por isso tudo aqui fica escopado. */

/* ── Reset & base (compartilhado) ──────────────────────────────── */
.cf {
  margin: 0;
  font-family: var(--cf-font);
  font-size: 16px;
  color: var(--cf-ink);
  background: var(--cf-paper);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.cf *, .cf *::before, .cf *::after { box-sizing: border-box; }
.cf a { color: var(--cf-primary-deep); text-decoration: none; }
.cf a:hover { text-decoration: underline; }
.cf img { max-width: 100%; height: auto; }

/* Foco visivel em todo elemento interativo (FR-032 / SC-007). */
.cf a:focus-visible,
.cf button:focus-visible,
.cf input:focus-visible,
.cf select:focus-visible,
.cf summary:focus-visible,
.cf [tabindex]:focus-visible {
  outline: 2px solid var(--cf-primary-deep);
  outline-offset: 2px;
  border-radius: var(--cf-radius-sm);
}

/* ── Typography scale (eixo de peso da DESIGN.md, antes do tamanho) ──── */
.cf h1 { font-size: 1.5rem; font-weight: 850; letter-spacing: -0.012em; margin: 0; }
.cf h2 { font-size: 1.15rem; font-weight: 700; margin: 0 0 0.75rem; }
.cf h3 { font-size: 1rem; font-weight: 700; margin: 0; }
.cf p { margin: 0; }

/* ── Page grid (sidebar + main) — exclusivo do painel administrativo ── */
.adm-shell {
  display: grid;
  grid-template-columns: 264px 1fr;
  min-height: 100vh;
}
.adm-main {
  padding: 2rem clamp(1.25rem, 3vw, 2.5rem);
  min-width: 0; /* permite que .table-scroll encolha dentro do grid */
  overflow-x: hidden; /* pagina nunca rola na horizontal (SC-006) */
}

/* ── Surfaces (compartilhado) ──────────────────────────────────── */
.cf .card {
  background: var(--cf-card);
  border: 1px solid var(--cf-line);
  border-radius: var(--cf-radius-md);
  padding: 1.25rem;
  margin-bottom: 1.25rem;
  overflow: hidden;
}

/* ── Page head (see shared/_page_head) ──────────────────────────── */
.cf .page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.cf .page-head-description {
  color: var(--cf-ink-soft);
  margin-top: 0.25rem;
}

/* ── Empty state (see shared/_empty_state) ──────────────────────── */
.cf .empty-state {
  text-align: center;
  padding: 3rem 1.5rem;
}
.cf .empty-state-title { font-weight: 700; margin-bottom: 0.4rem; }
.cf .empty-state-message { color: var(--cf-ink-soft); }
.cf .empty-state-action { margin-top: 1.25rem; }

/* ── Misc (compartilhado) ───────────────────────────────────────── */
.cf .muted { color: var(--cf-ink-soft); }
.cf .dl { display: grid; grid-template-columns: 180px 1fr; gap: 0.5rem 1rem; font-size: 0.95rem; }
.cf .dl dt { color: var(--cf-ink-soft); }
.cf .dl dd { margin: 0; }

/* ── Flash (see shared/_flash, rendered em ambos os layouts) ─────── */
.cf .flash { padding: 0.75rem 1rem; border-radius: var(--cf-radius-sm); margin-bottom: 1.1rem; font-size: 0.9rem; }
.cf .flash-notice { background: var(--cf-categoria-sucesso-tint); color: var(--cf-success-deep); }
.cf .flash-alert { background: var(--cf-primary-tint); color: var(--cf-primary-deep); }

.cf .errors { background: var(--cf-primary-tint); color: var(--cf-primary-deep); border-radius: var(--cf-radius-sm); padding: 0.75rem 1rem; margin-bottom: 1rem; font-size: 0.9rem; }
.cf .errors ul { margin: 0.4rem 0 0; padding-left: 1.1rem; }

/* ── Buttons (DESIGN.md > Buttons: pilula completa, sem excecao) ────── */
.cf .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.7rem 1.3rem;
  border-radius: var(--cf-radius-pill);
  border: 1.5px solid var(--cf-line);
  background: var(--cf-card);
  color: var(--cf-ink);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.25s var(--cf-ease), background 0.25s var(--cf-ease),
              border-color 0.25s var(--cf-ease), color 0.25s var(--cf-ease);
}
.cf .btn:hover { text-decoration: none; transform: translateY(-2px); border-color: var(--cf-ink); }
.cf .btn:active { transform: translateY(0); }

.cf .btn-primary { background: var(--cf-primary); border-color: var(--cf-primary); color: var(--cf-on-primary); }
.cf .btn-primary:hover { background: var(--cf-primary-deep); border-color: var(--cf-primary-deep); }

.cf .btn-danger { color: var(--cf-primary-deep); border-color: var(--cf-primary-tint); background: var(--cf-card); }
.cf .btn-danger:hover { background: var(--cf-primary-tint); border-color: var(--cf-primary-deep); }

.cf .actions { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; }

/* ── Badges (vocabulario fixo, DESIGN.md > Badge) ─────────────────── */
.cf .badge {
  display: inline-block;
  padding: 0.15rem 0.7rem;
  border-radius: var(--cf-radius-pill);
  font-size: 0.75rem;
  font-weight: 700;
}
.cf .badge--active { background: var(--cf-categoria-sucesso-tint); color: var(--cf-success-deep); }
.cf .badge--paid { background: var(--cf-categoria-sucesso-tint); color: var(--cf-success-deep); }
.cf .badge--pending { background: var(--cf-categoria-ambar-tint); color: var(--cf-categoria-ambar-icon); }
.cf .badge--overdue { background: var(--cf-primary-tint); color: var(--cf-primary-deep); }
.cf .badge--expiring-soon { background: var(--cf-categoria-ambar-tint); color: var(--cf-categoria-ambar-icon); }
.cf .badge--expired,
.cf .badge--canceled,
.cf .badge--none { background: var(--cf-snow); color: var(--cf-ink-soft); }
/* Vocabulario adicional da area do cliente (FR-022): dispositivo desconectado
   nao e um erro nem uma expiracao, entao nao herda badge--expired - le a
   mesma rampa neutra que "Sem assinatura" ja usa. */
.cf .badge--disconnected { background: var(--cf-snow); color: var(--cf-ink-soft); }

/* ── Avatar (inicial do nome, ver AdminHelper#avatar_initial) ───────── */
.cf .avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--cf-radius-pill);
  background: var(--cf-snow);
  color: var(--cf-ink);
  font-weight: 700;
  font-size: 0.85rem;
  flex-shrink: 0;
}

/* ── Tables (compartilhado — a lista de dispositivos da area do cliente
   usa a mesma vocabulario da tabela do painel) ──────────────────────── */
.cf .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -1.25rem; padding: 0 1.25rem; }
.cf .table-scroll:has(.row-menu[open]) { overflow: visible; }
.cf table { width: 100%; border-collapse: collapse; min-width: 480px; }
.cf th, .cf td { text-align: left; padding: 0.7rem 0.75rem; border-bottom: 1px solid var(--cf-line); vertical-align: middle; }
.cf th { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--cf-ink-soft); font-weight: 700; }
.cf tr:last-child td { border-bottom: none; }
.cf td.actions-cell { white-space: nowrap; }
.cf .row-name { display: flex; align-items: center; gap: 0.65rem; }
.cf .row-name-email { color: var(--cf-ink-soft); font-size: 0.85rem; }

/* ── Forms (compartilhado — a tela de login tambem e um formulario e
   precisa do mesmo vocabulario; so .fields-row, o layout de duas colunas,
   fica exclusivo do painel administrativo, que e quem tem formularios
   longos) ────────────────────────────────────────────────────────────── */
.cf .field { margin-bottom: 1rem; }
.cf .field label { display: block; font-size: 0.85rem; font-weight: 700; margin-bottom: 0.4rem; }
.cf .field input[type=text],
.cf .field input[type=email],
.cf .field input[type=password],
.cf .field input[type=number],
.cf .field input[type=datetime-local],
.cf .field select,
.cf .select-field {
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--cf-line);
  border-radius: var(--cf-radius-sm);
  font-size: 0.95rem;
  font-family: inherit;
  background: var(--cf-card);
  color: var(--cf-ink);
  -webkit-appearance: none;
  appearance: none;
}
.cf .field select,
.cf .select-field {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235f5250' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
  padding-right: 2.2rem;
}
.cf .field .hint { font-size: 0.8rem; color: var(--cf-ink-soft); margin-top: 0.25rem; }
.cf .field-inline { display: flex; align-items: center; gap: 0.5rem; }
.cf .field-inline label { margin: 0; font-weight: 400; }
.adm .fields-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.cf .field-error input, .cf .field-error select { border-color: var(--cf-primary-deep); }
.cf .field-error-message { color: var(--cf-primary-deep); font-size: 0.8rem; margin-top: 0.25rem; }

/* ── Responsive helpers (compartilhado) ──────────────────────────── */
.cf .show-xs { display: none; }
.cf .visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 640px) {
  .cf h1 { font-size: 1.25rem; }
  .cf .page-head { flex-direction: column; align-items: flex-start; gap: 0.6rem; }
  .cf .page-head .actions { width: 100%; }
  .cf .dl { grid-template-columns: 1fr; }
  .cf .dl dt { margin-top: 0.4rem; }
  .cf .dl dt:first-child { margin-top: 0; }
  .cf .hide-xs { display: none !important; }
  .cf .show-xs { display: block; }
  .cf .table-scroll { margin: 0 -1rem; padding: 0 1rem; }

  .adm-main { padding: 1.25rem 1rem; }
  .adm .fields-row { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .cf .hide-sm { display: none !important; }
  .cf .btn { padding: 0.6rem 1rem; font-size: 0.85rem; }
  .cf .actions { gap: 0.5rem; }
}

/* ── Sidebar (FR-001..FR-003) — exclusivo do painel administrativo ──── */
.adm-sidebar {
  display: flex;
  flex-direction: column;
  background: var(--cf-card);
  border-right: 1px solid var(--cf-line);
  padding: 1.5rem 1rem;
  min-height: 100vh;
}

.adm-sidebar-brand {
  display: block;
  padding: 0 0.5rem 1.5rem;
}
.adm-sidebar-brand:hover { text-decoration: none; }
.cf .adm-sidebar-logo {
  height: 1.75rem;
  width: auto;
}

.adm-sidebar-nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.15rem; flex: 1; }
.adm-sidebar-link {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 0.75rem;
  border-radius: var(--cf-radius-sm);
  color: var(--cf-ink-soft);
  font-weight: 500;
  font-size: 0.92rem;
  transition: background 0.2s var(--cf-ease), color 0.2s var(--cf-ease);
}
.adm-sidebar-link:hover { color: var(--cf-ink); background: var(--cf-snow); text-decoration: none; }
.adm-sidebar-link.is-active { background: var(--cf-primary-tint); color: var(--cf-primary-deep); font-weight: 700; }

.adm-sidebar-footer { margin-top: auto; padding-top: 1rem; display: flex; flex-direction: column; gap: 1rem; }

.adm-sidebar-support {
  background: var(--cf-snow);
  border-radius: var(--cf-radius-sm);
  padding: 0.85rem 0.9rem;
}
.adm-sidebar-support-title { font-weight: 700; font-size: 0.85rem; margin: 0 0 0.2rem; }
.adm-sidebar-support-text { color: var(--cf-ink-soft); font-size: 0.8rem; margin: 0 0 0.5rem; }
.adm-sidebar-support-link { color: var(--cf-primary-deep); font-weight: 700; font-size: 0.8rem; }

.adm-sidebar-identity { display: flex; align-items: center; gap: 0.6rem; padding: 0 0.25rem; }
.adm-sidebar-identity-copy { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.adm-sidebar-identity-name { font-weight: 700; font-size: 0.88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-sidebar-identity-role { color: var(--cf-ink-soft); font-size: 0.78rem; }
.adm-sidebar-signout {
  appearance: none;
  border: none;
  background: none;
  color: var(--cf-ink-soft);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  padding: 0.3rem 0.4rem;
  border-radius: var(--cf-radius-sm);
}
.adm-sidebar-signout:hover { color: var(--cf-primary-deep); background: var(--cf-primary-tint); }

/* Abaixo de 960px a sidebar nunca desaparece: vira uma barra empilhada, com
   a navegacao rolando na horizontal dentro do proprio container (mesma
   doutrina do .table-scroll) - a pagina em si nunca rola na horizontal
   (FR-005, SC-006). */
@media (max-width: 960px) {
  .adm-shell { grid-template-columns: 1fr; }
  .adm-sidebar {
    min-height: 0;
    border-right: none;
    border-bottom: 1px solid var(--cf-line);
    padding: 1rem;
  }
  .adm-sidebar-brand { padding: 0 0.25rem 0.75rem; }
  .adm-sidebar-nav {
    flex-direction: row;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex: none;
    padding-bottom: 0.25rem;
  }
  .adm-sidebar-link { white-space: nowrap; }
  .adm-sidebar-footer { flex-direction: row; align-items: center; justify-content: space-between; margin-top: 0.75rem; flex-wrap: wrap; }
  .adm-sidebar-support { flex: 1 1 220px; }
  .adm-sidebar-identity { flex: 1 1 220px; }
}

/* ── Stat cards (FR-007..FR-010; DESIGN.md > Categoria) — admin apenas ── */
.adm .stat-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.adm .stat-card { display: flex; align-items: flex-start; gap: 0.9rem; margin-bottom: 0; }
.adm .stat-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--cf-radius-md);
  flex-shrink: 0;
}
.adm .stat-card-icon--neutra { background: var(--cf-categoria-neutra-tint); color: var(--cf-categoria-neutra-icon); }
.adm .stat-card-icon--sucesso { background: var(--cf-categoria-sucesso-tint); color: var(--cf-categoria-sucesso-icon); }
.adm .stat-card-icon--ambar { background: var(--cf-categoria-ambar-tint); color: var(--cf-categoria-ambar-icon); }
.adm .stat-card-icon--violeta { background: var(--cf-categoria-violeta-tint); color: var(--cf-categoria-violeta-icon); }
.adm .stat-card-label { color: var(--cf-ink-soft); font-size: 0.85rem; font-weight: 500; margin-bottom: 0.2rem; }
.adm .stat-card-value { font-size: 1.5rem; font-weight: 850; letter-spacing: -0.01em; margin-bottom: 0.15rem; }
.adm .stat-delta { display: inline-block; font-size: 0.8rem; font-weight: 700; }
.adm .stat-delta--up { color: var(--cf-success-deep); }
.adm .stat-delta--down { color: var(--cf-primary-deep); }
.adm .stat-delta--flat { color: var(--cf-ink-soft); }

/* ── Toolbar (FR-011..FR-013, FR-017) — admin apenas ─────────────── */
.adm .toolbar { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin-bottom: 1.25rem; }
.adm .toolbar-search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1 1 260px;
  border: 1px solid var(--cf-line);
  border-radius: var(--cf-radius-sm);
  padding: 0.5rem 0.75rem;
  background: var(--cf-card);
  color: var(--cf-ink-soft);
}
.adm .toolbar-search input {
  border: none;
  outline: none;
  background: none;
  font: inherit;
  color: var(--cf-ink);
  width: 100%;
}
.adm .toolbar .select-field { flex: 0 1 180px; }

/* ── Pagination (FR-014, FR-015) — admin apenas ──────────────────── */
.adm .pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--cf-line);
}
.adm .pagination-label { color: var(--cf-ink-soft); font-size: 0.85rem; }
.adm .pagination-pages { display: flex; align-items: center; gap: 0.25rem; flex-wrap: wrap; row-gap: 0.4rem; }
.adm .pagination-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.5rem;
  border-radius: var(--cf-radius-sm);
  color: var(--cf-ink-soft);
  font-size: 0.85rem;
  font-weight: 600;
}
.adm .pagination-btn:hover { background: var(--cf-snow); color: var(--cf-ink); text-decoration: none; }
.adm .pagination-btn.is-current { background: var(--cf-primary-tint); color: var(--cf-primary-deep); }
.adm .pagination-btn.is-disabled { pointer-events: none; opacity: 0.4; }
.adm .pagination-btn--prev .icon { transform: rotate(90deg); }
.adm .pagination-btn--next .icon { transform: rotate(-90deg); }
.adm .pagination-gap { color: var(--cf-ink-soft); padding: 0 0.25rem; }
.adm .pagination-per-page { display: flex; }
.adm .pagination-per-page .select-field { min-width: 9rem; }

/* ── Row menu (<details>/<summary> nativo, sem JS - DESIGN.md) — admin apenas */
.adm .row-menu { position: relative; display: inline-block; }
.adm .row-menu-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--cf-radius-sm);
  color: var(--cf-ink-soft);
  cursor: pointer;
  list-style: none;
}
.adm .row-menu-trigger::-webkit-details-marker { display: none; }
.adm .row-menu-trigger:hover { background: var(--cf-snow); color: var(--cf-ink); }
.adm .row-menu[open] .row-menu-trigger { background: var(--cf-snow); color: var(--cf-ink); }
.adm .row-menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 0.25rem);
  z-index: 20;
  display: flex;
  flex-direction: column;
  min-width: 11rem;
  background: var(--cf-card);
  border: 1px solid var(--cf-line);
  border-radius: var(--cf-radius-sm);
  padding: 0.35rem;
  box-shadow: 0 10px 24px -10px oklch(28% 0.07 24 / 0.35);
}
.adm .row-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.5rem 0.6rem;
  border-radius: calc(var(--cf-radius-sm) - 4px);
  color: var(--cf-ink);
  font-size: 0.88rem;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
}
.adm .row-menu-item:hover { background: var(--cf-snow); text-decoration: none; }
.adm .row-menu-item--button { margin: 0; }
.adm .row-menu-item--danger { color: var(--cf-primary-deep); }
.adm .row-menu-item--danger:hover { background: var(--cf-primary-tint); }

/* ── Subscriber detail (users#show) — admin apenas ───────────────── */
.adm .user-badges { display: flex; align-items: center; gap: 0.6rem; margin: -0.75rem 0 1.25rem; }
.adm .checkout-card { border: 1.5px solid var(--cf-primary); }

/* ── Placeholder modules (FR-027..FR-030) — admin apenas ─────────── */
.adm .placeholder-card { text-align: center; padding: 3rem 1.5rem; }
.adm .placeholder-marker {
  display: inline-block;
  padding: 0.15rem 0.7rem;
  border-radius: var(--cf-radius-pill);
  background: var(--cf-snow);
  color: var(--cf-ink-soft);
  font-size: 0.75rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
}
.adm .placeholder-message { color: var(--cf-ink-soft); max-width: 32rem; margin-inline: auto; }

@media (prefers-reduced-motion: reduce) {
  .cf * { transition: none !important; animation: none !important; }
}