/* ============================================================
   NAPEL — tema ESCURO (naval) da parte INTERNA do DocuSeal.
   Carregado SO por layouts/application.html.erb, depois de napel-theme.css.
   Nao toca em form.html.erb / plain.html.erb (tela de assinatura dos clientes continua clara).
   Paleta: fundo #042C48 · superficie #0A3450 · superficie-2 #113C58 · borda #113C58 / #27557A
           texto #EBF7FA · secundario #B5D4E8 · primario #74A9D7 · sucesso #34D399 · aviso #FBBF24 · vermelho #F87171 (texto pequeno #FCA5A5)
   ============================================================ */

/* ---------- tokens DaisyUI (HSL) + tokens Napel ---------- */
html[data-theme="docuseal"] {
  color-scheme: dark;
  --p: 208 55% 65%;   --pc: 205 90% 15%;  --pf: 204 52% 81%;
  --s: 204 52% 81%;   --sc: 205 90% 15%;  --sf: 208 55% 65%;
  --a: 208 55% 65%;   --ac: 205 90% 15%;  --af: 204 52% 81%;
  --n: 204 52% 81%;   --nc: 205 90% 15%;  --nf: 208 55% 65%;
  --b1: 204 78% 18%;
  --b2: 204 68% 21%;
  --b3: 206 58% 27%;
  --bc: 192 60% 95%;
  --in: 208 55% 65%;  --inc: 205 90% 15%;
  --su: 160 64% 52%;  --suc: 205 90% 15%;
  --wa: 43 96% 56%;   --wac: 205 90% 15%;
  --er: 0 91% 71%;    --erc: 205 90% 15%;
  --napel-navy-950: #EBF7FA;
  --napel-navy-900: #B5D4E8;
  --napel-navy: #74A9D7;
  --napel-sky: #74A9D7;
  --napel-sky-700: #74A9D7;
  --napel-sky-bg: #113C58;
  --napel-ink: #EBF7FA;
  --napel-bg: #042C48;
  --napel-border: #113C58;
  --napel-border-strong: #27557A;
  --napel-shadow: 0 1px 2px rgba(0,0,0,.30), 0 10px 26px -14px rgba(0,0,0,.55);
  --napel-shadow-lg: 0 24px 60px -22px rgba(0,0,0,.65);
  --napel-focus: #74A9D7;
}

/* ---------- fundo, texto, titulos ---------- */
html[data-theme="docuseal"] { background: #042C48 !important; }
body.napel-dark {
  color: #EBF7FA !important;
  background:
    radial-gradient(circle at 14% 18%, rgba(116,169,215,.10), transparent 42%),
    radial-gradient(circle at 86% 6%, rgba(47,124,191,.10), transparent 40%),
    #042C48 !important;
  background-attachment: fixed !important;
}
body.napel-dark::after {
  background-image: radial-gradient(rgba(116,169,215,.10) 1.1px, transparent 1.1px);
  opacity: 1;
}
body.napel-dark h1, body.napel-dark h2, body.napel-dark h3,
body.napel-dark h4, body.napel-dark h5, body.napel-dark h6 { color: #EBF7FA; }
body.napel-dark .napel-h1 {
  background: linear-gradient(110deg, #EBF7FA 0%, #B5D4E8 45%, #74A9D7 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}
body.napel-dark .napel-eyebrow {
  color: #74A9D7;
  background: #113C58;
  border-color: #27557A;
}
body.napel-dark .label, body.napel-dark label:not([class*="btn"]):not(.base-button):not(.white-button) { color: #EBF7FA; }
body.napel-dark a:not([class*="btn"]):not(.base-button):not(.white-button):not([class*="napel-"]):not([class*="menu"]) { color: inherit; }

/* ---------- navbar ---------- */
body.napel-dark .napel-brand-text { color: #74A9D7; }
body.napel-dark .napel-home-btn {
  background: #74A9D7;
  color: #042C48 !important;
  border-color: #74A9D7;
  box-shadow: 0 1px 2px rgba(0,0,0,.30), 0 6px 16px -8px rgba(0,0,0,.55);
}
body.napel-dark .napel-home-btn:hover {
  background: #B5D4E8;
  border-color: #B5D4E8;
  box-shadow: 0 2px 4px rgba(0,0,0,.35), 0 10px 22px -8px rgba(0,0,0,.6);
}
body.napel-dark .napel-back-btn {
  background: #0A3450;
  color: #EBF7FA !important;
  border-color: #27557A;
}
body.napel-dark .napel-back-btn:hover {
  background: #113C58;
  border-color: #74A9D7;
}

/* ---------- botoes ---------- */
body.napel-dark .base-button,
body.napel-dark .btn-primary,
body.napel-dark .btn-neutral {
  background: #74A9D7;
  color: #042C48;
  border: 1px solid #74A9D7;
  box-shadow: 0 1px 2px rgba(0,0,0,.30), 0 8px 20px -10px rgba(0,0,0,.55);
}
body.napel-dark .base-button:hover,
body.napel-dark .btn-primary:hover,
body.napel-dark .btn-neutral:hover {
  background: #B5D4E8;
  border-color: #B5D4E8;
  color: #042C48;
  box-shadow: 0 2px 4px rgba(0,0,0,.35), 0 12px 28px -10px rgba(0,0,0,.6);
}
body.napel-dark .btn-outline {
  background: transparent;
  color: #74A9D7;
  border: 1.5px solid #27557A;
}
body.napel-dark .btn-outline:hover {
  background: #113C58;
  border-color: #74A9D7;
  color: #B5D4E8;
}
body.napel-dark .btn:focus-visible,
body.napel-dark .base-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px #74A9D7;
}
body.napel-dark .white-button {
  background-color: #0A3450;
  color: #EBF7FA;
  border-color: #27557A;
}
body.napel-dark .white-button:hover {
  background-color: #113C58;
  border-color: #74A9D7;
  color: #EBF7FA;
}

/* ---------- campos ---------- */
body.napel-dark .input, body.napel-dark .textarea, body.napel-dark .select,
body.napel-dark .base-input, body.napel-dark .base-select, body.napel-dark .base-textarea {
  border: 1.5px solid #27557A;
  background: #042C48;
  color: #EBF7FA;
}
body.napel-dark .input:focus, body.napel-dark .input:focus-visible,
body.napel-dark .textarea:focus, body.napel-dark .select:focus,
body.napel-dark .base-input:focus, body.napel-dark .base-select:focus, body.napel-dark .base-textarea:focus,
body.napel-dark .checkbox:focus-visible {
  outline: none;
  border-color: #74A9D7;
  box-shadow: 0 0 0 3px #74A9D7;
}
body.napel-dark .input:hover, body.napel-dark .base-input:hover { border-color: #74A9D7; }
body.napel-dark input::placeholder, body.napel-dark textarea::placeholder { color: #8DB2CF; opacity: 1; }
body.napel-dark input:disabled, body.napel-dark textarea:disabled, body.napel-dark select:disabled { color: #B5D4E8; opacity: 1; }

/* ---------- cartoes, modais, menus ---------- */
body.napel-dark .card, body.napel-dark .bg-base-100.border, body.napel-dark .shadow-md {
  background: #0A3450;
  border: 1px solid #113C58;
  box-shadow: var(--napel-shadow);
}
body.napel-dark .napel-setup-card {
  background: #0A3450 !important;
  border: 1px solid #113C58 !important;
  box-shadow: var(--napel-shadow-lg) !important;
}
body.napel-dark .modal-box { background-color: #0A3450; color: #EBF7FA; }
body.napel-dark .modal::backdrop, body.napel-dark .modal-backdrop { background-color: rgba(2,15,26,.72); }
body.napel-dark .dropdown-content, body.napel-dark .menu { color: #EBF7FA; }
body.napel-dark ul.dropdown-content { background-color: #0A3450; box-shadow: inset 0 0 0 1px #27557A, 0 10px 28px -12px rgba(0,0,0,.6); }
body.napel-dark .tooltip:before { background-color: #EBF7FA; color: #042C48; }

/* ---------- badges ---------- */
body.napel-dark .badge-success { background-color: rgba(52,211,153,.12) !important; color: #34D399 !important; border-color: transparent; }
body.napel-dark .badge-warning { background-color: rgba(251,191,36,.18) !important; color: #FBBF24 !important; border-color: transparent; }
body.napel-dark .badge-error { background-color: rgba(248,113,113,.18) !important; color: #FCA5A5 !important; border-color: transparent; }
body.napel-dark .badge-info { background-color: rgba(116,169,215,.18) !important; color: #B5D4E8 !important; border-color: transparent; }

/* ---------- tabelas, selecao, scrollbar ---------- */
body.napel-dark table tbody tr:hover { background-color: #113C58; }
body.napel-dark ::selection { background: rgba(116,169,215,.45); color: #EBF7FA; }
::-webkit-scrollbar-track { background: #042C48; }
::-webkit-scrollbar-thumb { background: #27557A; }
::-webkit-scrollbar-thumb:hover { background: #74A9D7; }

/* ---------- cores fixas do Tailwind usadas nas telas internas ---------- */
body.napel-dark .bg-white { background-color: #0A3450; }
body.napel-dark .bg-gray-50, body.napel-dark .bg-gray-100 { background-color: #113C58; }
body.napel-dark .bg-gray-200, body.napel-dark .bg-neutral-200 { background-color: #27557A; }
body.napel-dark .border-gray-300, body.napel-dark .border-gray-400,
body.napel-dark .border-neutral-200, body.napel-dark .border-neutral-300 { border-color: #27557A; }
body.napel-dark .text-gray-300, body.napel-dark .text-gray-400, body.napel-dark .text-gray-500, body.napel-dark .text-gray-600,
body.napel-dark .text-neutral-500, body.napel-dark .md\:text-neutral-500 { color: #B5D4E8; }
body.napel-dark .text-gray-700, body.napel-dark .text-gray-900, body.napel-dark .text-neutral-700 { color: #EBF7FA; }

/* ---------- editor de modelo: o Vue aplica #faf7f5 inline (prop backgroundColor) ---------- */
body.napel-dark [style*="background-color: rgb(250, 247, 245)"] { background-color: #042C48 !important; }
body.napel-dark .fields-list-item[style], body.napel-dark .field-type-button[style] { background-color: #0A3450 !important; }
body.napel-dark .field-type-button { border-color: #27557A; color: #EBF7FA; }

/* ---------- avatar (iniciais) ---------- */
body.napel-dark label.bg-base-content { background-color: #113C58; box-shadow: inset 0 0 0 1px #27557A; color: #EBF7FA; }
body.napel-dark label.bg-base-content span { color: #EBF7FA; }

/* ---------- texto sobre botao primario (era branco sobre azul-marinho) ---------- */
body.napel-dark .btn-neutral .text-white, body.napel-dark .btn-primary .text-white, body.napel-dark .base-button .text-white { color: #042C48; }

/* ---------- WhatsApp (verde de marca, texto escuro p/ contraste) ---------- */
body.napel-dark [style*="background:#25D366"] { color: #042C48 !important; }

/* ---------- texto secundario com opacidade (text-base-content/NN) ---------- */
body.napel-dark [class*="text-base-content/"] { color: #B5D4E8; }
body.napel-dark .border-base-content { border-color: #27557A; }
body.napel-dark .text-red-400, body.napel-dark .text-red-500, body.napel-dark .text-red-600 { color: #FCA5A5; }
body.napel-dark .text-green-500, body.napel-dark .text-green-600 { color: #34D399; }

/* ---------- fundos pastel do Tailwind fora do papel (alertas, chips); .field-area fica claro porque fica sobre o PDF ---------- */
body.napel-dark :is(.bg-red-50, .bg-red-100, .bg-red-200):not(.field-area) { background-color: rgba(248,113,113,.20); }
body.napel-dark :is(.bg-blue-50, .bg-sky-100, .bg-sky-200, .bg-cyan-100, .bg-cyan-200, .bg-indigo-100, .bg-indigo-200):not(.field-area) { background-color: rgba(116,169,215,.20); }
body.napel-dark :is(.bg-lime-50, .bg-lime-100, .bg-lime-200, .bg-emerald-100, .bg-emerald-200):not(.field-area) { background-color: rgba(52,211,153,.20); }
body.napel-dark :is(.bg-amber-100, .bg-yellow-100, .bg-yellow-200, .bg-orange-100, .bg-orange-200):not(.field-area) { background-color: rgba(251,191,36,.20); }
body.napel-dark :is(.bg-purple-100, .bg-purple-200, .bg-pink-100, .bg-pink-200):not(.field-area) { background-color: rgba(192,132,252,.20); }

/* ---------- blocos de codigo (mockup-code) continuam escuros ---------- */
body.napel-dark .mockup-code { background-color: #031F34; color: #EBF7FA; box-shadow: inset 0 0 0 1px #113C58; }
body.napel-dark .mockup-code .bg-neutral, body.napel-dark label.border-neutral-focus { background-color: #113C58; color: #EBF7FA; border-color: #27557A; }
body.napel-dark .mockup-code .text-white { color: #EBF7FA; }

/* ---------- titulos de menu, badges outline, bordas padrao do preflight (#e5e7eb) ---------- */
body.napel-dark .menu-title, body.napel-dark .menu-title span { color: #B5D4E8; }
body.napel-dark .badge-outline { border-color: #27557A; }
body.napel-dark .border-gray-200, body.napel-dark .border-gray-100 { border-color: #27557A; }
:where(body.napel-dark) *, :where(body.napel-dark) *::before, :where(body.napel-dark) *::after { border-color: #27557A; }