/* Card "Email transacional da plataforma" -- Task 15 do plan Brevo.
   Vive na layer pages (cascade layers ordem em head.ejs). */

@layer pages {
  .platform-email-config-card {
    margin-top: 1.5rem;
    padding: 1.5rem;
  }

  .platform-email-config-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.25rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
  }

  .platform-email-config-card-head h2 {
    margin: 0 0 0.25rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-text, #0f172a);
  }

  /* Subtitulo proprio (em vez de .text-muted bootstrap, que sofre override
     em :root[data-theme-mode="dark"] no layout-overrides.css). Cor via token
     --color-text-soft, que adapta automatico entre netzor/dark/light. */
  .platform-email-config-subtitle {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--color-text-soft, #66758a);
  }

  .platform-email-config-status-strip {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
  }

  .platform-email-config-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.75rem;
    border-radius: 999px;
    background: rgba(31, 94, 255, 0.08);
    color: var(--ds-color-fg, #1f2937);
    font-size: 0.8rem;
    line-height: 1;
    border: 1px solid rgba(31, 94, 255, 0.2);
  }

  .platform-email-config-badge strong {
    font-weight: 700;
    color: #0f172a;
  }

  .platform-email-config-badge--warn {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.35);
    color: #92400e;
  }

  .platform-email-config-badge--warn strong {
    color: #92400e;
  }

  .platform-email-config-form .row {
    margin-left: 0;
    margin-right: 0;
  }

  .platform-email-config-source {
    margin-top: 1rem;
    font-size: 0.8rem;
    color: var(--ds-color-fg-muted, #64748b);
  }

  .platform-email-config-source strong {
    color: var(--ds-color-fg, #1f2937);
    font-weight: 600;
  }

  .platform-email-config-actions {
    margin-top: 1.25rem;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    flex-wrap: wrap;
  }

  .platform-email-config-feedback {
    margin: 0.75rem 0 0;
    min-height: 1.25rem;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--ds-color-fg-muted, #64748b);
  }

  .platform-email-config-feedback[data-level="success"] {
    color: #166534;
  }

  .platform-email-config-feedback[data-level="error"] {
    color: #b91c1c;
  }

  .platform-email-config-feedback[data-level="info"] {
    color: var(--ds-color-fg-muted, #64748b);
  }

  /* Dark mode overrides — escopados em [data-theme-mode="dark"] (toggle vive em
     html/body). Sem isso, o ".saas-page-body" sozinho dispararia tambem em
     modo claro e quebraria a legibilidade. */
  [data-theme-mode="dark"] .platform-email-config-card-head h2 {
    color: #f8fbff;
  }

  [data-theme-mode="dark"] .platform-email-config-badge {
    background: rgba(96, 165, 250, 0.16);
    border-color: rgba(96, 165, 250, 0.34);
    color: #dbeafe;
  }

  [data-theme-mode="dark"] .platform-email-config-badge strong {
    color: #f8fbff;
  }

  [data-theme-mode="dark"] .platform-email-config-badge--warn {
    background: rgba(251, 191, 36, 0.16);
    border-color: rgba(251, 191, 36, 0.36);
    color: #fbbf24;
  }

  [data-theme-mode="dark"] .platform-email-config-badge--warn strong {
    color: #fde68a;
  }

  [data-theme-mode="dark"] .platform-email-config-source {
    color: rgba(226, 232, 240, 0.7);
  }

  [data-theme-mode="dark"] .platform-email-config-source strong {
    color: #f8fbff;
  }

  [data-theme-mode="dark"] .platform-email-config-feedback {
    color: rgba(226, 232, 240, 0.78);
  }

  [data-theme-mode="dark"] .platform-email-config-feedback[data-level="success"] {
    color: #6ee7b7;
  }

  [data-theme-mode="dark"] .platform-email-config-feedback[data-level="error"] {
    color: #fca5a5;
  }

  [data-theme-mode="dark"] .platform-email-config-feedback[data-level="info"] {
    color: rgba(226, 232, 240, 0.78);
  }

  /* ===========================================================================
   * Entregabilidade (API REST da Brevo) -- Tarefa 7 do plan Brevo. Badge extra
   * no header + <details> proprio (NAO reusa .saas-admin-collapsible de
   * shell.css -- aquela classe pega fundo escuro FIXO via a regra
   * incondicional 'body.saas-page-body .saas-admin-collapsible', que nao
   * alterna com [data-theme-mode]. O resto deste card alterna de verdade,
   * entao o <details> daqui precisa alternar tambem, senao o texto tokenizado
   * fica ilegivel contra aquele fundo sempre-escuro no tema claro).
   *
   * Cores SEMPRE via tokens --color-* (nunca --nz-*-soft: hex legado sem
   * override no escuro, reprova o audit de contraste). --color-danger,
   * --color-danger-soft, --color-danger-text (idem warning/info/text/border/
   * surface-muted) tem par claro/escuro em tokens.css -- nao precisam de
   * override [data-theme-mode="dark"] proprio aqui.
   * =========================================================================== */
  .platform-email-config-provider-details {
    margin-top: 1.25rem;
    border-radius: 16px;
    border: 1px solid var(--color-border);
    background: var(--color-surface-muted);
    overflow: hidden;
  }

  /* provider:null -- worker de telemetria nunca rodou. Borda tracejada,
     neutra (nao e erro, e "ainda nao coletou"), sinaliza sem alarmar. */
  .platform-email-config-provider-details--empty {
    border-style: dashed;
  }

  .platform-email-config-provider-summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1.1rem;
    cursor: pointer;
    user-select: none;
    font-weight: 700;
    color: var(--color-text);
  }

  .platform-email-config-provider-summary::-webkit-details-marker { display: none; }
  .platform-email-config-provider-summary::marker { content: ''; }

  .platform-email-config-provider-summary::after {
    /* Unicode BLACK DOWN-POINTING TRIANGLE U+25BC -- 1 backslash no CSS
       literal (2 barras vira string \25BC visivel em vez do char). */
    content: '\25BC';
    font-size: 0.7rem;
    color: var(--color-text-soft);
    transition: transform 0.18s ease;
  }

  .platform-email-config-provider-details[open] .platform-email-config-provider-summary::after {
    transform: rotate(180deg);
  }

  .platform-email-config-provider-body {
    padding: 0.9rem 1.1rem 1.1rem;
    border-top: 1px solid var(--color-border);
  }

  .platform-email-config-badge--danger {
    background: var(--color-danger-soft);
    border-color: var(--color-danger);
    color: var(--color-danger-text);
  }

  .platform-email-config-badge--danger strong {
    color: var(--color-danger-text);
  }

  /* color: --color-text (nao --color-text-soft) -- medido 4.23:1 no claro
     (< 4.5 AA) com --color-text-soft sobre --color-surface-muted; ver nota
     de contraste mais abaixo, antes de .platform-email-config-provider-lastdata. */
  .platform-email-config-badge--muted {
    background: var(--color-surface-muted);
    border-color: var(--color-border);
    color: var(--color-text);
  }

  .platform-email-config-badge--muted strong {
    color: var(--color-text);
  }

  /* O arquivo ja tem '[data-theme-mode="dark"] .platform-email-config-badge'
     (especificidade 0,2,0) definindo bg/border/color pra TODO badge no
     escuro -- sem um par de mesma forma aqui, esse seletor generico venceria
     --danger/--muted (0,1,0) e o badge voltaria pro azul default, mascarando
     o estado real. Mesmo valores (var() ja resolve por tema); so sobe a
     especificidade pra vencer a mesma briga que --warn ja vence. */
  [data-theme-mode="dark"] .platform-email-config-badge--danger {
    background: var(--color-danger-soft);
    border-color: var(--color-danger);
    color: var(--color-danger-text);
  }

  [data-theme-mode="dark"] .platform-email-config-badge--danger strong {
    color: var(--color-danger-text);
  }

  [data-theme-mode="dark"] .platform-email-config-badge--muted {
    background: var(--color-surface-muted);
    border-color: var(--color-border);
    color: var(--color-text);
  }

  [data-theme-mode="dark"] .platform-email-config-badge--muted strong {
    color: var(--color-text);
  }

  /* Contraste medido no harness (transition:none, data-theme-mode
     sincronizado em html+body, achado da revisao de qualidade): no claro,
     --color-text-soft sobre --color-surface-muted (o fundo deste <details>)
     da 4.23:1 -- reprova AA (4.5:1) pra texto normal. No escuro passa
     folgado (9.82:1), entao o problema e so aqui. Os 5 pontos abaixo usam
     --color-text (16:1 no claro, 16.8:1 no escuro) em vez de
     --color-text-soft: 'Ultimo dado' e a afirmacao mais importante do
     bloco, nao pode ficar de baixo contraste. (Sem hex literal aqui de
     proposito -- audit:css-dark-colors conta cor crua ATE em comentario.) */
  .platform-email-config-provider-lastdata {
    margin: 0 0 1rem;
    font-size: 0.82rem;
    color: var(--color-text);
  }

  .platform-email-config-provider-grid-label {
    margin: 0 0 0.4rem;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--color-danger-text);
  }

  .platform-email-config-provider-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 0.6rem;
    margin-bottom: 1rem;
  }

  /* status:'degraded' pinta o snapshot ANTIGO (dado de dias atras) -- sem
     marca visual, "Entregues hoje: 12" com dado de 51h le como se fosse
     fresco. Opacidade reduzida + rotulo (.platform-email-config-provider-
     grid-label, acima) tornam a grade visualmente "desligada" da realidade
     atual, reforçando o que a linha 'Ultimo dado' ja diz em texto.

     0.7 e o piso: opacity cria grupo de composicao e mescla o texto com o
     fundo, entao o valor vira contraste efetivo. Medido sobre
     --color-surface-muted no tema claro: 0.55 da 3.85:1 (reprova AA) e 0.7
     da 6.27:1. O maior texto da grade tem 16.8px bold = 12.6pt, abaixo do
     limiar de "texto grande" da WCAG, entao o requisito e 4.5:1 e nao 3:1.
     Nao baixe daqui sem remedir. */
  .platform-email-config-provider-grid--stale {
    opacity: 0.7;
  }

  .platform-email-config-provider-stat {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.55rem 0.7rem;
    border-radius: 12px;
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border);
  }

  .platform-email-config-provider-stat-label {
    font-size: 0.7rem;
    color: var(--color-text);
  }

  .platform-email-config-provider-stat-value {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-text);
  }

  .platform-email-config-provider-warnings,
  .platform-email-config-provider-blocked {
    margin: 0 0 1rem;
    padding: 0.6rem 0.85rem;
    border-radius: 12px;
    font-size: 0.82rem;
    line-height: 1.5;
  }

  .platform-email-config-provider-warnings ul,
  .platform-email-config-provider-blocked ul {
    margin: 0;
    padding-left: 1.1rem;
    max-height: 180px;
    overflow-y: auto;
  }

  .platform-email-config-provider-warnings p,
  .platform-email-config-provider-blocked p {
    margin: 0 0 0.4rem;
  }

  .platform-email-config-provider-warnings p:last-child,
  .platform-email-config-provider-blocked p:last-child,
  .platform-email-config-provider-warnings ul:last-child,
  .platform-email-config-provider-blocked ul:last-child {
    margin-bottom: 0;
  }

  /* Tom padrao (sem modificador) = atencao (avisos reais tipo hard-bounce). */
  .platform-email-config-provider-warnings {
    background: var(--color-warning-soft);
    border: 1px solid var(--color-warning);
    color: var(--color-warning-text);
  }

  .platform-email-config-provider-warnings--danger {
    background: var(--color-danger-soft);
    border-color: var(--color-danger);
    color: var(--color-danger-text);
  }

  .platform-email-config-provider-warnings--info {
    background: var(--color-info-soft);
    border-color: var(--color-info);
    color: var(--color-info-text);
  }

  .platform-email-config-provider-blocked {
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border);
    color: var(--color-text);
  }

  .platform-email-config-provider-blocked-date {
    color: var(--color-text);
    font-size: 0.75rem;
  }

  .platform-email-config-provider-key {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
  }

  /* .ds-form-helper (design system, components.css) usa --color-text-soft --
     correto sobre os fundos onde normalmente aparece (surface-solid/bg).
     Aqui dentro o fundo e --color-surface-muted (herdado do <details>), e a
     mesma cor cai pra 4.23:1 (< 4.5 AA). Reforça so neste escopo -- nao
     mexe no componente compartilhado, que esta correto nos outros lugares. */
  .platform-email-config-provider-key .ds-form-helper {
    color: var(--color-text);
  }

  .platform-email-config-provider-key-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.7rem;
    font-size: 0.85rem;
    color: var(--color-text);
  }
}