/**
 * Projeto: BaseCNPJ
 * Arquivo: dev.css
 * Autor: Djeferson Capelli
 * Versão: 1.0.0
 * Descrição: Estilos das páginas de desenvolvedores e documentação da API
 */
.dev-shell {
  min-height: 100vh;
  min-height: 100dvh;
  padding-top: calc(var(--nav-h) + env(safe-area-inset-top, 0) + 34px);
  padding-bottom: max(40px, env(safe-area-inset-bottom, 0));
  padding-left: max(16px, 4vw, env(safe-area-inset-left, 0));
  padding-right: max(16px, 4vw, env(safe-area-inset-right, 0));
}

.dev-wrap {
  max-width: 960px;
  margin: 0 auto;
}

.dev-head {
  margin-bottom: 22px;
}

.dev-head h1 {
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--text);
  margin-bottom: 10px;
}

.dev-head p {
  color: var(--text-muted);
  font-size: 16px;
  max-width: 72ch;
}

.dev-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin-bottom: 14px;
}

.dev-card h2 {
  font-size: 20px;
  margin-bottom: 10px;
  color: var(--text);
}

.dev-card h3 {
  font-size: 17px;
  margin-top: 18px;
  margin-bottom: 8px;
  color: var(--text);
}

.dev-card h3:first-child { margin-top: 0; }

.dev-card p {
  color: var(--text-muted);
  line-height: 1.65;
}

.dev-card ul {
  list-style: disc;
  padding-left: 18px;
  color: var(--text-muted);
  line-height: 1.7;
  margin: 8px 0 0;
}

.dev-card a {
  color: var(--accent);
  text-decoration: none;
}

.dev-card a:hover {
  text-decoration: underline;
}

.dev-card code {
  background: var(--bg-card-h);
  padding: 2px 6px;
  border-radius: 6px;
  font-family: 'DM Mono', monospace;
  font-size: 13px;
}

.dev-card pre {
  background: #0b1220;
  color: #e2e8f0;
  border-radius: 10px;
  padding: 14px;
  overflow: auto;
  font-family: 'DM Mono', monospace;
  font-size: 13px;
  line-height: 1.5;
  margin: 12px 0 0;
}

html[data-theme="light"] .dev-card pre {
  background: #1e293b;
}

.dev-muted {
  color: var(--text-dim);
}

.dev-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
  margin-top: 6px;
}

.dev-back:hover {
  text-decoration: underline;
}

/* ── Tabelas de parâmetros ────────────────────────────────────────────────── */
.dev-params{width:100%;border-collapse:collapse;margin:10px 0 0;font-size:13px}
.dev-params th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--text-dim);font-weight:600;padding:8px 10px;border-bottom:1px solid var(--border)}
.dev-params td{padding:8px 10px;border-bottom:1px solid rgba(255,255,255,.04);color:var(--text-muted);vertical-align:top}
html[data-theme="light"] .dev-params td{border-bottom-color:rgba(0,0,0,.06)}
.dev-params code{font-size:12px}

/* ── Badges ──────────────────────────────────────────────────────────────── */
.dev-badge-get{display:inline-block;padding:2px 8px;border-radius:4px;font-size:11px;font-weight:700;background:rgba(34,197,94,.15);color:#22c55e;margin-right:6px;letter-spacing:.03em}
.dev-badge-auth{display:inline-block;padding:2px 8px;border-radius:4px;font-size:11px;font-weight:600;background:rgba(239,159,39,.12);color:#EF9F27;margin-right:6px}
.dev-badge-public{display:inline-block;padding:2px 8px;border-radius:4px;font-size:11px;font-weight:600;background:rgba(55,131,255,.12);color:#3783FF;margin-right:6px}

/* ── Postman box ─────────────────────────────────────────────────────────── */
.dev-postman{margin-top:14px;padding:12px 14px;border-radius:8px;background:rgba(55,131,255,.06);border:1px solid rgba(55,131,255,.15);font-size:12px;color:var(--text-muted);line-height:1.6}
.dev-postman strong{color:var(--text)}
.dev-postman code{font-size:11px}

/* ── Colunas lado a lado ─────────────────────────────────────────────────── */
.dev-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:10px}

/* ── Status page ─────────────────────────────────────────────────────────── */
.dev-status-banner{display:flex;align-items:center;gap:14px;padding:18px 20px;border-radius:12px}
.dev-status-banner--ok{background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.2)}
.dev-status-banner--warn{background:rgba(239,159,39,.08);border:1px solid rgba(239,159,39,.2)}
.dev-status-banner-dot{width:14px;height:14px;border-radius:50%;flex-shrink:0}
.dev-status-banner--ok .dev-status-banner-dot{background:#22c55e;box-shadow:0 0 12px rgba(34,197,94,.4)}
.dev-status-banner--warn .dev-status-banner-dot{background:#EF9F27;box-shadow:0 0 12px rgba(239,159,39,.4)}
.dev-status-banner-title{font-size:15px;font-weight:600;color:var(--text)}
.dev-status-banner-sub{font-size:12px;color:var(--text-dim);margin-top:2px}

.dev-status-list{margin-top:12px}
.dev-status-row{display:flex;align-items:center;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--border)}
.dev-status-row:last-child{border-bottom:none}
.dev-status-row-left{display:flex;align-items:center;gap:10px}
.dev-status-row-name{font-size:14px;font-weight:500;color:var(--text)}
.dev-status-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.dev-status-dot--ok{background:#22c55e;box-shadow:0 0 6px rgba(34,197,94,.35)}
.dev-status-dot--warn{background:#EF9F27}
.dev-status-dot--down{background:#E24B4A;box-shadow:0 0 6px rgba(226,75,74,.35)}
.dev-status-tag{display:inline-block;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:600}
.dev-status-tag--ok{background:rgba(34,197,94,.1);color:#22c55e}
.dev-status-tag--down{background:rgba(226,75,74,.1);color:#E24B4A}

.dev-status-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:16px}
.dev-status-item{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:20px;text-align:center}
.dev-status-item-value{font-size:28px;font-weight:800;color:var(--text);letter-spacing:-.02em}
.dev-status-item-label{font-size:12px;color:var(--text-dim);margin-top:4px;text-transform:uppercase;letter-spacing:.03em;font-weight:600}

/* ── Changelog ───────────────────────────────────────────────────────────── */
.dev-timeline{position:relative;padding-left:24px;margin-top:16px}
.dev-timeline::before{content:"";position:absolute;left:7px;top:4px;bottom:4px;width:2px;background:var(--border)}
.dev-timeline-item{position:relative;margin-bottom:24px}
.dev-timeline-item:last-child{margin-bottom:0}
.dev-timeline-dot{position:absolute;left:-20px;top:5px;width:12px;height:12px;border-radius:50%;background:var(--accent);border:2px solid var(--bg-void,#040d1a)}
.dev-timeline-date{font-size:11px;color:var(--text-dim);font-weight:600;text-transform:uppercase;letter-spacing:.03em;margin-bottom:4px}
.dev-timeline-title{font-size:14px;font-weight:600;color:var(--text);margin-bottom:4px}
.dev-timeline-body{font-size:13px;color:var(--text-muted);line-height:1.6}
.dev-timeline-body ul{list-style:disc;padding-left:18px;margin-top:6px}

@media (max-width: 600px) {
  .dev-card { padding: 16px; }
  .dev-card pre { font-size: 12px; padding: 12px; }
  .dev-cols{grid-template-columns:1fr}
  .dev-status-grid{grid-template-columns:1fr}
}