/* ============================================================
   ALMA FORMS GBP — base.css
   Reset, tipografia e tokens de identidade visual da ALMA Company.
   Carregado em todas as páginas, antes do CSS específico.
   Fonte: docs/documentacao-funcional-formulario.md (seção 7)
   ============================================================ */

/* Fontes (Encode Sans Semi Condensed para títulos, DM Sans para textos) */
@import url("https://fonts.googleapis.com/css2?family=Encode+Sans+Semi+Condensed:wght@400;600;700&family=DM+Sans:wght@400;500;700&display=swap");

:root {
  /* Cores principais */
  --color-blue-light: #00C1FC;
  --color-blue-mid: #00AFFA;
  --color-blue-strong: #007FF4;

  /* Texto e fundo */
  --color-text: #101010;
  --color-text-muted: #5F6673;
  --color-bg: #F6F8FB;
  --color-white: #FFFFFF;
  --color-border: #E4E8EF;

  /* Estados */
  --color-error: #EF4444;
  --color-success: #22C55E;
  --color-warning: #F59E0B;
  --color-info: #3B82F6;

  /* Gradiente principal */
  --gradient-primary: linear-gradient(135deg, var(--color-blue-light) 0%, var(--color-blue-mid) 45%, var(--color-blue-strong) 100%);

  /* Tipografia */
  --font-heading: "Encode Sans Semi Condensed", sans-serif;
  --font-body: "DM Sans", sans-serif;

  /* Arredondamento */
  --radius-card: 20px;     /* 18px a 24px */
  --radius-button: 13px;   /* 12px a 14px */
  --radius-input: 12px;
  --radius-modal: 24px;    /* 22px a 28px */
  --radius-badge: 999px;

  /* Sombras */
  --shadow-default: 0 10px 30px rgba(16, 16, 16, 0.06);
  --shadow-elevated: 0 18px 45px rgba(16, 16, 16, 0.08);
}

/* Reset básico */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Correção global: qualquer elemento com o atributo HTML "hidden" deve
   ficar realmente escondido, mesmo que uma classe (ex.: .field-group,
   .hours-periods) defina display:flex/grid. Sem isso, regras de autor
   com a mesma especificidade do estilo padrão [hidden] do navegador
   vencem e o elemento permanece visível apesar de hidden=true no JS. */
[hidden] {
  display: none !important;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-body);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 600;
  margin: 0 0 0.5em 0;
  color: var(--color-text);
}

p {
  margin: 0 0 1em 0;
  line-height: 1.5;
}

a {
  color: var(--color-blue-strong);
  text-decoration: none;
}

img, svg {
  max-width: 100%;
  display: block;
}

/* ============================================================
   Componentes base (cards, botões, inputs, badges)
   Detalhamento completo virá na Fase 4 — Identidade visual e layout base.
   Estes tokens já podem ser usados desde já por qualquer CSS específico.
   ============================================================ */

.card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-default);
  padding: 24px;
}

.card--elevated {
  box-shadow: var(--shadow-elevated);
}

.btn {
  font-family: var(--font-body);
  font-weight: 700;
  border-radius: var(--radius-button);
  border: none;
  cursor: pointer;
  padding: 12px 20px;
  font-size: 15px;
}

#btn-voltar,
#btn-continuar {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#btn-voltar:hover:not(:disabled):not(.btn--locked),
#btn-continuar:hover:not(:disabled):not(.btn--locked) {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(16, 16, 16, 0.12);
}

#btn-voltar:active:not(:disabled):not(.btn--locked),
#btn-continuar:active:not(:disabled):not(.btn--locked) {
  transform: translateY(0);
  box-shadow: none;
}

.btn--primary {
  background: var(--gradient-primary);
  color: var(--color-white);
}

.btn--secondary {
  background: var(--color-white);
  color: var(--color-blue-strong);
  border: 1px solid var(--color-border);
}

.input {
  font-family: var(--font-body);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-input);
  padding: 12px 14px;
  font-size: 15px;
  width: 100%;
  background: var(--color-white);
  color: var(--color-text);
}

.input:focus {
  outline: 2px solid var(--color-blue-mid);
  outline-offset: 1px;
}

/* ─── Select nativo (rede social, tipo de link de ação) ────────
   A lista aberta de um <select> é renderizada pelo navegador/SO
   e não pode ser estilizada via CSS — só a caixa fechada. */
select.input {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 36px;
  cursor: pointer;
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%235F6673' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ─── Checkbox customizado — identidade visual ALMA ─────────────
   Desmarcado: apenas borda arredondada. Marcado: preenchido com
   o gradiente principal, sem borda, com o "V" em branco. */
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border: 1.5px solid var(--color-border);
  border-radius: 6px;
  background-color: var(--color-white);
  cursor: pointer;
  position: relative;   /* ancora o ::after com position absolute */
  vertical-align: middle;
  transition: background-color .15s, background-image .15s, border-color .15s;
}

input[type="checkbox"]:hover {
  border-color: var(--color-blue-mid);
}

input[type="checkbox"]:checked {
  background-image: var(--gradient-primary);
  border-style: none;
}

input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  /* Centralizar dentro dos 20px:
     O "V" tem 5px × 9px. Após rotate(45deg) o centro ótico
     fica ligeiramente acima do geométrico — ajuste de 1px. */
  left: 50%;
  top: 50%;
  width: 5px;
  height: 9px;
  border: solid var(--color-white);
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -58%) rotate(45deg);
}

input[type="checkbox"]:focus-visible {
  outline: none;
}

.badge {
  display: inline-block;
  border-radius: var(--radius-badge);
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 700;
  font-family: var(--font-body);
}

.badge--success { background: rgba(34, 197, 94, 0.12); color: var(--color-success); }
.badge--error    { background: rgba(239, 68, 68, 0.12); color: var(--color-error); }
.badge--warning  { background: rgba(245, 158, 11, 0.12); color: var(--color-warning); }
.badge--info     { background: rgba(59, 130, 246, 0.12); color: var(--color-info); }

/* ============================================================
   Toasts (canto inferior esquerdo)
   Ver docs/documentacao-funcional-formulario.md, seção 17.
   ============================================================ */

#toast-container {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: calc(100vw - 40px);
}

.toast {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-info);
  border-radius: var(--radius-input);
  box-shadow: var(--shadow-elevated);
  padding: 12px 16px;
  font-size: 14px;
  color: var(--color-text);
  max-width: 360px;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.toast--success { border-left-color: var(--color-success); }
.toast--error    { border-left-color: var(--color-error); }
.toast--warning   { border-left-color: var(--color-warning); }
.toast--info       { border-left-color: var(--color-info); }

/* Toast com borda em gradiente (pergunta de aplicar horário a todos os dias) */
.toast--apply-hours {
  border-left: none;
  padding-left: 20px;
  position: relative;
  overflow: hidden;
}
.toast--apply-hours::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--gradient-primary);
}

.toast--leaving {
  opacity: 0;
  transform: translateY(8px);
}


/* ============================================================
   ALMA FORMS GBP — dark mode
   Adicionar ao FINAL do public/styles/base.css.
   Aplicado quando <html data-theme="dark">.
   ============================================================ */

/* ── Variáveis ───────────────────────────────────────────────── */
[data-theme="dark"] {
  --color-bg:         #0F1117;
  --color-white:      #181C28;
  --color-border:     #252A3A;
  --color-text:       #E3E8F4;
  --color-text-muted: #7A8599;

  /* Azuis mantidos — é a marca */
  --color-blue-light:  #00C1FC;
  --color-blue-mid:    #00AFFA;
  --color-blue-strong: #007FF4;

  /* Estados */
  --color-error:   #F87171;
  --color-success: #4ADE80;
  --color-warning: #FBB040;
  --color-info:    #60A5FA;

  /* Sombras mais pronunciadas no escuro */
  --shadow-default:  0 10px 30px rgba(0, 0, 0, 0.45);
  --shadow-elevated: 0 18px 45px rgba(0, 0, 0, 0.55);
}

/* ── Inputs e formulários ──────────────────────────────────── */
[data-theme="dark"] .input,
[data-theme="dark"] .form-input,
[data-theme="dark"] .search-input,
[data-theme="dark"] textarea.input {
  background-color: #1B1F2E;
  border-color: var(--color-border);
  color: var(--color-text);
}

[data-theme="dark"] .input::placeholder,
[data-theme="dark"] .form-input::placeholder,
[data-theme="dark"] .search-input::placeholder {
  color: var(--color-text-muted);
}

[data-theme="dark"] .input:focus,
[data-theme="dark"] .form-input:focus,
[data-theme="dark"] .search-input:focus {
  border-color: var(--color-blue-mid);
  box-shadow: 0 0 0 3px rgba(0, 175, 250, 0.18);
}

[data-theme="dark"] select.input {
  background-color: #1B1F2E;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%237A8599' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ── Checkbox ────────────────────────────────────────────────── */
[data-theme="dark"] input[type="checkbox"] {
  background-color: #1B1F2E;
  border-color: #3A4058;
}

[data-theme="dark"] input[type="checkbox"]:hover {
  border-color: var(--color-blue-mid);
}

/* ── Badges ──────────────────────────────────────────────────── */
[data-theme="dark"] .badge--success { background: rgba(74,222,128,0.14); color: #4ADE80; }
[data-theme="dark"] .badge--error   { background: rgba(248,113,113,0.14); color: #F87171; }
[data-theme="dark"] .badge--warning { background: rgba(251,176,64,0.14);  color: #FBB040; }
[data-theme="dark"] .badge--info    { background: rgba(96,165,250,0.14);  color: #60A5FA; }
[data-theme="dark"] .badge--blue    { background: rgba(0,127,244,0.16);   color: #60AFFF; }

/* ── Autocomplete ────────────────────────────────────────────── */
[data-theme="dark"] .autocomplete__list {
  background: #1B1F2E;
  border: 1px solid var(--color-border);
}

[data-theme="dark"] .autocomplete__option:hover,
[data-theme="dark"] .autocomplete__option--active {
  background: #252A3A;
}

/* ── Option-pills ────────────────────────────────────────────── */
[data-theme="dark"] .option-pill:not([aria-pressed="true"]) {
  background: #1B1F2E;
  border-color: #3A4058;
  color: var(--color-text-muted);
}

[data-theme="dark"] .option-pill:not([aria-pressed="true"]):hover {
  background: #252A3A;
  color: var(--color-text);
}

/* ── Filter tabs ─────────────────────────────────────────────── */
[data-theme="dark"] .filter-tab:not(.active) {
  background: #1B1F2E;
  border-color: #3A4058;
  color: var(--color-text-muted);
}

[data-theme="dark"] .filter-tab:not(.active):hover {
  background: #252A3A;
  color: var(--color-text);
}

/* ── Skeleton loading ────────────────────────────────────────── */
[data-theme="dark"] .loading-row {
  background: linear-gradient(90deg, #1B1F2E 25%, #252A3A 50%, #1B1F2E 75%);
  background-size: 200% 100%;
}

/* ── Toasts ──────────────────────────────────────────────────── */
[data-theme="dark"] .toast {
  background: #1B1F2E;
  border-color: var(--color-border);
  color: var(--color-text);
}

/* ── Botões de exportação ────────────────────────────────────── */
[data-theme="dark"] .btn-export:not(:first-child) {
  background: #1B1F2E;
  border-color: #3A4058;
  color: var(--color-text);
}

[data-theme="dark"] .btn-export:not(:first-child):hover {
  background: #252A3A;
  border-color: #4A5270;
}

/* ── Botão secundário ────────────────────────────────────────── */
[data-theme="dark"] .btn--secondary {
  background: #1B1F2E;
  border-color: #3A4058;
  color: var(--color-text);
}

[data-theme="dark"] .btn--secondary:hover:not(:disabled) {
  background: #252A3A;
  border-color: #4A5270;
}

/* ── Inline alert ────────────────────────────────────────────── */
[data-theme="dark"] .inline-alert {
  background: rgba(0, 127, 244, 0.08);
  border-color: rgba(0, 127, 244, 0.22);
  color: #60AFFF;
}

/* ── Info banner (modal) ─────────────────────────────────────── */
[data-theme="dark"] .info-banner {
  background: rgba(59, 130, 246, 0.08);
  border-color: rgba(59, 130, 246, 0.20);
  color: #60A5FA;
}

/* ── Bloco de resposta (detalhe) ─────────────────────────────── */
[data-theme="dark"] .resp-block-header {
  background: #141720;
}

[data-theme="dark"] .resp-field {
  border-bottom-color: var(--color-border);
}

/* ── Botões de ação (tabela de clientes) ─────────────────────── */
[data-theme="dark"] .btn-acao--reenviar {
  background: rgba(0, 127, 244, 0.12);
}

[data-theme="dark"] .btn-acao--ver {
  background: rgba(74, 222, 128, 0.10);
}

/* ── Modal ───────────────────────────────────────────────────── */
[data-theme="dark"] .modal-close:hover {
  background: #252A3A;
  color: var(--color-text);
}

[data-theme="dark"] .data-table tbody tr:hover {
  background: #1E2233;  /* levemente mais claro que o fundo dos cards */
}

/* ── Botão de tema na sidebar ────────────────────────────────── */
.theme-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: none;
  background: none;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-muted);
  cursor: pointer;
  width: 100%;
  text-align: left;
  transition: background .15s, color .15s;
}

.theme-toggle:hover {
  background: var(--color-bg);
  color: var(--color-text);
}

.theme-icon--moon,
.theme-icon--sun {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

/* Toggle flutuante (formulário público + login) */
.theme-fab {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-white);
  color: var(--color-text-muted);
  cursor: pointer;
  box-shadow: var(--shadow-default);
  transition: background .15s, color .15s, transform .15s, box-shadow .15s;
}

.theme-fab:hover {
  color: var(--color-text);
  transform: translateY(-2px);
  box-shadow: var(--shadow-elevated);
}

.theme-fab .theme-icon--moon,
.theme-fab .theme-icon--sun {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
}