/* public_html/app/assets/css/login.css */
/* PAC360 | PAC02 – login.css
   Design System utilitário:
   - .btn-brand, .card-neo, .text-muted, .form-help, .field-error
   Acessibilidade:
   - Estados :focus visíveis, contraste AA.
*/

:root {
  --brand: #06b6d4;
  --brand-2: #84cc16;
  --bg: #ffffff;
  --ink: #0f172a;
  --muted: #64748b;
  --card: #f8fafc;
  --ring: rgba(6,182,212,.5);
}

html[data-theme="dark"] {
  --bg: #0b1020;
  --ink: #eef2f7;   /* texto principal bem claro */
  --muted: #cbd5e1; /* textos auxiliares legíveis */
  --card: #0f172a;
  --ring: rgba(132,204,22,.45);
}

/* ===== Tipografia & containers ===== */
body { background: var(--bg); color: var(--ink); }

.card-neo {
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.06);
  backdrop-filter: saturate(120%) blur(4px);
  background: var(--card);
}

/* ===== Botões ===== */
.btn-brand {
  /* base (tema claro) */
  --bs-btn-bg: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-color: #001018; /* texto escuro no claro */
  --bs-btn-hover-bg: color-mix(in srgb, var(--brand) 90%, black 10%);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--brand) 85%, black 15%);
  --bs-btn-focus-shadow-rgb: 6, 182, 212;

  background-color: var(--bs-btn-bg);
  border-color: var(--bs-btn-border-color);
  color: var(--bs-btn-color);
}

/* força o color mesmo se outra regra tentar sobrescrever */
.btn-brand { color: var(--bs-btn-color) !important; }

/* hover/active consistentes */
.btn-brand:hover {
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
  filter: none !important;
}
.btn-brand:active {
  background-color: color-mix(in srgb, var(--brand) 80%, black 20%);
  border-color: color-mix(in srgb, var(--brand) 75%, black 25%);
}

/* botão brand no tema escuro: texto BEM claro e sem “fosco” */
html[data-theme="dark"] .btn-brand {
  --bs-btn-color: #f8fafc;
  background-color: var(--brand) !important;
  border-color: var(--brand) !important;
  color: #f8fafc !important;             /* <- chave p/ evitar texto apagado */
  font-weight: 700;
  text-shadow: 0 1px 0 rgba(0,0,0,.18);  /* melhora leitura no ciano */
  opacity: 1 !important;                 /* garante sem opacidade reduzida */
  filter: none !important;
}

/* hover no dark: um pouco mais claro, mantendo contraste do texto */
html[data-theme="dark"] .btn-brand:hover {
  background-color: color-mix(in srgb, var(--brand) 92%, white 8%) !important;
  border-color:    color-mix(in srgb, var(--brand) 88%, white 12%) !important;
  color: #f8fafc !important;
}

/* outline secundário no dark (ex.: mostrar/ocultar senha, toggle tema) */
html[data-theme="dark"] .btn-outline-secondary {
  color: var(--ink);
  border-color: #3b465a;
}
html[data-theme="dark"] .btn-outline-secondary:hover {
  background: #1b2237;
  border-color: #4b5770;
  color: var(--ink);
}

/* ===== Inputs / Focus ===== */
.form-control:focus,
.btn:focus,
.btn:focus-visible {
  outline: 2px solid transparent;
  box-shadow: 0 0 0 .25rem var(--ring);
}

.form-control.is-invalid,
.was-validated .form-control:invalid {
  border-color: #dc2626 !important;
  background-image: none;
}

/* dar mais contraste à borda do input no dark */
html[data-theme="dark"] .form-control {
  background-color: #0e1428;
  border-color: #2a3447;
  color: var(--ink);
}
html[data-theme="dark"] .form-control::placeholder { color: #9fb0c7; }
.input-group > .btn { border-color: #cbd5e1; }
html[data-theme="dark"] .input-group > .btn { border-color: #334155; }

/* ===== Textos auxiliares, labels e links ===== */

/* Labels e textos em dark com contraste AA */
html[data-theme="dark"] .form-label,
html[data-theme="dark"] .form-check-label,
html[data-theme="dark"] footer small {
  color: var(--ink) !important;
}

/* Textos auxiliares: “Lembrar de mim”, “Use seu e-mail corporativo”, chip de tenant */
.text-muted,
.form-help,
.tenant-chip {
  color: var(--muted) !important;
}

/* Links secundários (Esqueci minha senha / Termos / Privacidade) */
a, .link-secondary { color: var(--brand); }
a:hover { color: color-mix(in srgb, var(--brand) 80%, black 20%); }

html[data-theme="dark"] a.link-secondary {
  color: #a5b4fc !important;   /* lilás claro no escuro */
}
html[data-theme="dark"] a.link-secondary:hover {
  color: #c4b5fd !important;
}

/* ===== Toasts / Banners ===== */
.toast.text-bg-dark {
  --bs-toast-bg: #0f172a;
  --bs-toast-color: #e5e7eb;
}

#cookieBanner {
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  border-radius: 12px;
}

/* ===== Mensagens ===== */
.invalid-feedback, .field-error { font-size: .9rem; }

/* Títulos no dark: mesmo contraste das labels */
html[data-theme="dark"] #login-title,
html[data-theme="dark"] .card-neo h1,
html[data-theme="dark"] .card-neo .h1,
html[data-theme="dark"] .card-neo h2,
html[data-theme="dark"] .card-neo .h2,
html[data-theme="dark"] .card-neo h3,
html[data-theme="dark"] .card-neo .h3,
html[data-theme="dark"] .card-neo h4,
html[data-theme="dark"] .card-neo .h4 {
  color: var(--ink) !important;
}

/* ====== iOS/Safari refinements (PAC360) ====== */

/* Usa var(--vh) quando disponível para corrigir o 100vh no iPhone */
.login-wrap {
  min-height: calc(var(--vh, 1dvh) * 100);
}

/* Safe areas para toasts/banners fixos no rodapé */
@supports (padding: max(0px)) {
  .toast-container,
  #cookieBanner {
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }
  main.container {
    padding-bottom: max(24px, env(safe-area-inset-bottom));
  }
}

/* Evita zoom automático ao focar em inputs no iOS (mantém 16px mínimo) */
input, select, textarea, button {
  font-size: 16px;
}

/* Aparência consistente dos inputs no iOS */
input[type="text"],
input[type="email"],
input[type="password"],
button,
.input-group .btn {
  -webkit-appearance: none;
  appearance: none;
  border-radius: 12px;
}

/* Melhor toque/realce */
* { -webkit-tap-highlight-color: rgba(0,0,0,0.08); }
html { -webkit-text-size-adjust: 100%; }

/* Botão de mostrar senha e demais botões: área mínima de toque */
.input-group > .btn {
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Pequeno refinamento em telas menores */
@media (max-width: 420px) {
  .card-neo { padding: 1.25rem !important; }
  .btn.btn-lg { padding-block: 0.9rem; }
  .form-control { padding-block: 0.75rem; }
  .input-group .btn { padding-block: 0.75rem; }
}

/* Garante contraste das labels/rodapé no dark */
html[data-theme="dark"] .form-label,
html[data-theme="dark"] .form-check-label,
html[data-theme="dark"] footer small {
  color: var(--ink) !important;
}

/* Suaviza rolagem quando o teclado abre */
@supports (-webkit-touch-callout: none) {
  body { scroll-behavior: smooth; }
}

/* Evita que toast ou cookieBanner fiquem colados no “home bar” do iPhone */
#cookieBanner {
  margin-bottom: env(safe-area-inset-bottom, 0);
}

/* ===== Chrome iOS / iOS viewport patches ===== */

/* Garante que a página possa ocupar 100% */
html, body {
  height: 100%;
}

/* Ordem de preferências:
   1) 100svh (small viewport) evita "pulos" quando a barra encolhe/expande
   2) 100dvh (dynamic) quando suportado
   3) var(--vh) calculado via JS (visualViewport)
   4) -webkit-fill-available como último fallback em iOS antigos
*/
.login-wrap {
  min-height: 100vh; /* fallback genérico */
  min-height: calc(var(--vh, 1vh) * 100);
  min-height: -webkit-fill-available;
}

@supports (min-height: 100svh) {
  .login-wrap { min-height: 100svh; }
}
@supports (min-height: 100dvh) {
  .login-wrap { min-height: 100dvh; }
}

/* Evita zoom ao focar input no iOS (Chrome e Safari) */
input, select, textarea, button {
  font-size: 16px;
}

/* Aparência consistente + alvos de toque confortáveis */
input[type="text"],
input[type="email"],
input[type="password"],
button,
.input-group .btn {
  -webkit-appearance: none;
  appearance: none;
  border-radius: 12px;
}

.input-group > .btn {
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Safe area no rodapé (notch / barra home) */
@supports (padding: max(0px)) {
  .toast-container,
  #cookieBanner {
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }
  main.container {
    padding-bottom: max(24px, env(safe-area-inset-bottom));
  }
}

/* Evita “pulo” de layout quando o teclado sobe */
html { -webkit-text-size-adjust: 100%; }
*   { -webkit-tap-highlight-color: rgba(0,0,0,0.08); }

/* Telas bem estreitas: mais respiro */
@media (max-width: 420px) {
  .card-neo { padding: 1.25rem !important; }
  .btn.btn-lg { padding-block: .9rem; }
  .form-control { padding-block: .75rem; }
  .input-group .btn { padding-block: .75rem; }
}

/* Mantém o card visível quando teclado sobe */
@supports (overflow: clip) {
  .login-wrap { overflow: clip; }
}