/* ============================================================
 * Coachecom Forms V3 — Input + Textarea + Select (Marco 4F.1 + 4F.2)
 * ------------------------------------------------------------
 * Sistema unificado de form controls — Figma "Forms & Inputs"
 * (frame 12:951 do design system V3).
 *
 * Substitui em uma única camada CSS:
 *   - .form-control (BS3, ~798 call sites em application/views/)
 *   - .form-control + .input-sm/.input-lg, .input-group-sm/lg
 *   - <select>/<textarea> com .form-control (BS3 default cinza)
 *
 * NÃO mexe em:
 *   - .field-input/.field-input-wrap (auth.css) — convive em
 *     paralelo, mesmos tokens, mesma altura (44px). O escopo já
 *     é V3.
 *   - .perfil-field input/select/textarea (editar_perfil.php
 *     inline) — não compartilha class .form-control. Continua
 *     com styling próprio (h:40, radius:8) até cleanup do 4F.5.
 *
 * Carregamento: template_sistema.php inclui DEPOIS de
 * buttons-v3.css (e portanto depois de {headerinc} → BS3 +
 * smartadmin + style.css). !important é load-bearing pra vencer
 * BS3 .form-control que tem regras concorrentes.
 *
 * Spec visual (Figma 12:951):
 *   sm:  h36  px12  font14  radius10
 *   md:  h44  px16  font14  radius10  (padrão)
 *   lg:  h48  px20  font16  radius10
 *   bg:                    #fff (default) / #f3f3f5 (filled) / transparent (flushed)
 *   border:                1px solid #e2e8f0  (flushed: border-bottom 2px)
 *   placeholder color:     rgba(10,10,10,0.5)
 *   font:                  Inter Regular 14px
 *   focus:                 border #1d4ed8 + box-shadow 3px rgba(29,78,216,.12)
 *   disabled:              opacity .5
 *   error:                 border #dc2626 + helper text #dc2626
 *
 * Variantes (via classes adicionais):
 *   .form-input               default (bg branco + border)
 *   .form-input-filled        cinza claro sem border
 *   .form-input-flushed       só border-bottom (estilo material)
 *
 * Aliases legacy (mapeamento automático, sem mudar markup):
 *   .form-control                → .form-input default
 *   .form-control.input-sm       → .form-input-sm
 *   .form-control.input-lg       → .form-input-lg
 *   .input-group-sm .form-control → .form-input-sm
 *   .input-group-lg .form-control → .form-input-lg
 * ============================================================ */


/* ─── Tokens locais ──────────────────────────── */

:root {
  --form-radius:        10px;
  --form-bg:            var(--bg);
  --form-bg-filled:     #f3f3f5;
  --form-border:        var(--border-field);   /* borda de controle: 3:1 no escuro, igual ao --border no claro */
  --form-border-focus:  #1d4ed8;
  --form-shadow-focus:  0 0 0 3px rgb(29 78 216 / .12);
  --form-shadow-error:  0 0 0 3px rgb(220 38 38 / .12);
  --form-text:          var(--ink);
  --form-placeholder:   var(--ink-3);   /* dark-safe: segue --ink-3 (claro #64748b 4.76:1 / escuro #8492a6 5.2:1) — legível nos 2 temas (era preto-50%, sumia no dark) */
  --form-helper:        var(--ink-2);
  --form-error:         var(--danger);   /* dark-safe: light #dc2626, dark #f87171 */
}


/* ─── Base ─────────────────────────────────────
   Cobre tag específica (input/select/textarea) com .form-control
   pra evitar regressão em <input type="checkbox/radio/file/range">
   que NÃO devem ganhar styling de text input. */

input.form-input,
input.form-control:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]),
select.form-input,
select.form-control,
textarea.form-input,
textarea.form-control {
  display: block !important;
  width: 100% !important;
  height: 44px !important;
  padding: 0 16px !important;

  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 20px !important;
  color: var(--form-text) !important;

  background: var(--form-bg) !important;
  background-image: none !important;

  border: 1px solid var(--form-border) !important;
  border-radius: var(--form-radius) !important;
  box-shadow: none !important;
  outline: none !important;

  transition: border-color .15s, box-shadow .15s, background-color .15s !important;
  vertical-align: middle !important;
}


/* ─── Tamanhos ──────────────────────────────── */

.form-input-sm,
.form-control.input-sm,
input.form-control-sm,
select.form-control-sm,
textarea.form-control-sm,
.input-group-sm > .form-control,
.input-group-sm > .input-group-addon,
.input-group-sm > .input-group-btn > .btn {
  height: 36px !important;
  padding: 0 12px !important;
  font-size: 14px !important;
  line-height: 18px !important;
  border-radius: var(--form-radius) !important;
}

.form-input-lg,
.form-control.input-lg,
input.form-control-lg,
select.form-control-lg,
textarea.form-control-lg,
.input-group-lg > .form-control,
.input-group-lg > .input-group-addon,
.input-group-lg > .input-group-btn > .btn {
  height: 48px !important;
  padding: 0 20px !important;
  font-size: 16px !important;
  line-height: 22px !important;
  border-radius: var(--form-radius) !important;
}


/* ─── Variantes ──────────────────────────────── */

.form-input-filled,
input.form-control.form-input-filled,
select.form-control.form-input-filled,
textarea.form-control.form-input-filled {
  background: var(--form-bg-filled) !important;
  border-color: transparent !important;
}

.form-input-flushed,
input.form-control.form-input-flushed,
select.form-control.form-input-flushed,
textarea.form-control.form-input-flushed {
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid var(--form-border) !important;
  border-radius: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}


/* ─── Placeholder ───────────────────────────── */

input.form-input::placeholder,
input.form-control::placeholder,
textarea.form-input::placeholder,
textarea.form-control::placeholder {
  color: var(--form-placeholder) !important;
  opacity: 1 !important;
}


/* ─── Focus ─────────────────────────────────── */

input.form-input:focus,
input.form-control:focus,
select.form-input:focus,
select.form-control:focus,
textarea.form-input:focus,
textarea.form-control:focus {
  outline: none !important;
  border-color: var(--form-border-focus) !important;
  box-shadow: var(--form-shadow-focus) !important;
}

.form-input-flushed:focus,
input.form-control.form-input-flushed:focus,
select.form-control.form-input-flushed:focus,
textarea.form-control.form-input-flushed:focus {
  border-bottom-color: var(--form-border-focus) !important;
  box-shadow: 0 1px 0 0 var(--form-border-focus) !important;
}


/* ─── Disabled / readonly ────────────────────── */

input.form-input:disabled,
input.form-control:disabled,
select.form-input:disabled,
select.form-control:disabled,
textarea.form-input:disabled,
textarea.form-control:disabled,
input.form-input[readonly],
input.form-control[readonly],
textarea.form-input[readonly],
textarea.form-control[readonly] {
  opacity: .5 !important;
  cursor: not-allowed !important;
  background: var(--form-bg-filled) !important;
}


/* ─── Error state ─────────────────────────────
   Compatibilidade tripla:
   - BS3/SmartAdmin: .has-error como wrapper
   - Bootstrap 4+:    .is-invalid no próprio input
   - ARIA:            [aria-invalid="true"] */

/* ATENÇÃO à especificidade: a regra base acima é
   `input.form-control:not([type=…])×5` => (0,6,1) com !important. Seletores
   curtos como `.form-control.is-invalid` (0,2,0) PERDEM e o estado de erro
   não aparecia em nenhum <input> do sistema. Por isso as variantes de
   `input` abaixo repetem a mesma cadeia de :not(), igualando a base e
   vencendo por vir depois no arquivo. */
.has-error .form-input,
.has-error .form-control,
.has-error input.form-control,
.has-error select.form-control,
.has-error textarea.form-control,
.form-input.is-invalid,
.form-control.is-invalid,
input.form-control.is-invalid:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]),
input.form-control[aria-invalid="true"]:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]),
.has-error input.form-control:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]),
[aria-invalid="true"].form-input,
[aria-invalid="true"].form-control {
  border-color: var(--form-error) !important;
}
.has-error .form-input:focus,
.has-error .form-control:focus,
.form-input.is-invalid:focus,
.form-control.is-invalid:focus,
[aria-invalid="true"].form-input:focus,
[aria-invalid="true"].form-control:focus {
  box-shadow: var(--form-shadow-error) !important;
  border-color: var(--form-error) !important;
}


/* ─── Textarea (Marco 4F.2) ──────────────────── */
/* Override do height fixo: textarea precisa crescer com conteúdo. */

textarea.form-input,
textarea.form-control {
  height: auto !important;
  min-height: 80px !important;
  padding: 12px 16px !important;
  resize: vertical !important;
  line-height: 1.5 !important;
}
textarea.form-input.form-input-sm,
textarea.form-control.input-sm,
textarea.form-control-sm {
  min-height: 64px !important;
  padding: 10px 12px !important;
}
textarea.form-input.form-input-lg,
textarea.form-control.input-lg,
textarea.form-control-lg {
  min-height: 96px !important;
  padding: 14px 20px !important;
}


/* ─── Select (Marco 4F.2) ─────────────────────
   Substitui o caret nativo do browser por SVG inline custom. */

select.form-input,
select.form-control {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 14px 14px !important;
  padding-right: 36px !important;
  cursor: pointer !important;
}
select.form-input::-ms-expand,
select.form-control::-ms-expand { display: none !important; }

/* Multi-select (size > 1 ou [multiple]): mantém comportamento
   nativo de lista expandida — só remove o caret e ajusta padding. */
select[multiple].form-input,
select[multiple].form-control,
select[size].form-input,
select[size].form-control {
  height: auto !important;
  min-height: 100px !important;
  padding: 8px 12px !important;
  background-image: none !important;
}


/* ─── Form group / Labels / Helper ──────────── */
/* .form-group já existe no BS3 (margin-bottom 15px). Refinamos
   apenas tipografia do label e do help-block pra ficar V3. */

.form-group label,
.form-group .control-label,
label.form-label {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--form-text) !important;
  margin-bottom: 6px !important;
}

.form-group .help-block,
.form-text,
.form-helper {
  font-size: 12px !important;
  line-height: 16px !important;
  color: var(--form-helper) !important;
  margin: 6px 0 0 !important;
}

.has-error .help-block,
.has-error .control-label,
.form-error,
.invalid-feedback {
  color: var(--form-error) !important;
}


/* ─── Compat: número com spinners minimizados ─ */
/* Browsers desktop adicionam spinner em type=number — mantém
   visualmente alinhado com o resto do input. */

input[type="number"].form-input,
input[type="number"].form-control {
  -moz-appearance: textfield;
}
input[type="number"].form-input::-webkit-outer-spin-button,
input[type="number"].form-input::-webkit-inner-spin-button,
input[type="number"].form-control::-webkit-outer-spin-button,
input[type="number"].form-control::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}


/* ============================================================
 * Checkbox & Radio V3 (Marco 4F.3) — frames Figma 12:1141 / 12:1216
 * ------------------------------------------------------------
 * Pattern OPT-IN: classes `.form-check` (checkbox/radio) requerem
 * markup específico V3 — não estilizam legacy `.smart-form` ou
 * `<label class="checkbox">` do SmartAdmin (ambos têm visual `<i>`
 * próprio que duplicaria com nosso). Quem quiser V3 muda markup:
 *
 *   <label class="form-check">
 *     <input type="checkbox">
 *     <span>Texto</span>
 *   </label>
 *
 *   <label class="form-check">
 *     <input type="radio" name="grupo">
 *     <span>Texto</span>
 *   </label>
 *
 * Spec: sm 16px / md 20px (default) / lg 24px. Border #e2e8f0,
 * checked bg #1d4ed8 (--form-border-focus). Checkmark via SVG
 * inline; radio dot via box-shadow inset (4px white ring).
 * ============================================================ */

.form-check {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  font-size: 14px;
  line-height: 20px;
  color: var(--form-text);
  margin: 0;
}
.form-check + .form-check { margin-top: 10px; }
.form-check.is-block,
.form-check-block { display: flex; }

.form-check > input[type="checkbox"],
.form-check > input[type="radio"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 20px !important;
  height: 20px !important;
  flex-shrink: 0;
  background: var(--form-bg);
  border: 1.5px solid var(--form-border);
  cursor: pointer;
  vertical-align: middle;
  transition: border-color .15s, background-color .15s, box-shadow .15s;
  outline: none;
}

/* Checkbox: square c/ rounded corners */
.form-check > input[type="checkbox"] {
  border-radius: 4px;
}
.form-check > input[type="checkbox"]:checked {
  background-color: var(--form-border-focus);
  border-color: var(--form-border-focus);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
}

/* Radio: circle c/ dot interno (box-shadow inset 4px white) */
.form-check > input[type="radio"] {
  border-radius: 50%;
}
.form-check > input[type="radio"]:checked {
  background-color: var(--form-border-focus);
  border-color: var(--form-border-focus);
  box-shadow: inset 0 0 0 4px var(--form-bg);
}

.form-check > input[type="checkbox"]:focus-visible,
.form-check > input[type="radio"]:focus-visible {
  box-shadow: var(--form-shadow-focus);
}
.form-check > input[type="radio"]:checked:focus-visible {
  box-shadow: inset 0 0 0 4px var(--form-bg), var(--form-shadow-focus);
}

.form-check > input[type="checkbox"]:disabled,
.form-check > input[type="radio"]:disabled,
.form-check.disabled {
  opacity: .5;
  cursor: not-allowed;
}
.form-check > input[type="checkbox"]:disabled ~ *,
.form-check > input[type="radio"]:disabled ~ * {
  cursor: not-allowed;
}

/* Erro: aplicado via `.has-error .form-check` ou `.form-check.is-invalid` */
.has-error .form-check > input[type="checkbox"],
.has-error .form-check > input[type="radio"],
.form-check.is-invalid > input[type="checkbox"],
.form-check.is-invalid > input[type="radio"] {
  border-color: var(--form-error);
}
.has-error .form-check,
.form-check.is-invalid {
  color: var(--form-error);
}

/* Sizes */
.form-check-sm { font-size: 14px; line-height: 20px; }
.form-check-sm > input[type="checkbox"],
.form-check-sm > input[type="radio"] {
  width: 16px !important;
  height: 16px !important;
}
.form-check-sm > input[type="radio"]:checked {
  box-shadow: inset 0 0 0 3px var(--form-bg);
}
.form-check-sm > input[type="checkbox"]:checked {
  background-size: 10px 10px;
}

.form-check-lg { font-size: 16px; line-height: 24px; }
.form-check-lg > input[type="checkbox"],
.form-check-lg > input[type="radio"] {
  width: 24px !important;
  height: 24px !important;
}
.form-check-lg > input[type="radio"]:checked {
  box-shadow: inset 0 0 0 5px var(--form-bg);
}
.form-check-lg > input[type="checkbox"]:checked {
  background-size: 14px 14px;
}

/* Grupo de checkboxes/radios — gap 10px vertical entre items */
.form-check-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.form-check-group > .form-check + .form-check { margin-top: 0; }
.form-check-group-inline {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 16px;
}


/* ============================================================
 * Toggle / Switch V3 (Marco 4F.4) — frame Figma 12:1281
 * ------------------------------------------------------------
 * Componente NOVO — não existe no legacy. Markup obrigatório:
 *
 *   <label class="form-toggle">
 *     <input type="checkbox">
 *     <span class="form-toggle-track"></span>
 *     <span>Texto</span>
 *   </label>
 *
 * Spec (md = default):
 *   track:  44×24, bg #cbced4 (off) → #1d4ed8 (on)
 *   thumb:  20×20, bg white, shadow 0 1px 3px rgba(0,0,0,.1)
 *   move:   left 2px (off) → 22px (on)
 *   radius: 9999px (pill)
 * Sm: 36×20 / thumb 16
 * Lg: 56×28 / thumb 24
 * ============================================================ */

.form-toggle {
  /* Ancora o checkbox escondido (position:absolute, abaixo) no proprio
     toggle. Sem isso o bloco de referencia dele era o ancestral posicionado
     mais proximo — no modal de convite, a coluna inteira, fora da area que
     rola. Com lista longa de convidados, clicar no toggle focava o checkbox
     la' embaixo e o navegador rolava a coluna ate' ele: tela em branco. */
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  user-select: none;
  font-size: 14px;
  line-height: 20px;
  color: var(--form-text);
  margin: 0;
}
.form-toggle + .form-toggle { margin-top: 12px; }

.form-toggle > input[type="checkbox"] {
  /* Esconde nativo mas mantém clicável e acessível via teclado */
  position: absolute !important;
  opacity: 0 !important;
  width: 1px !important;
  height: 1px !important;
  pointer-events: none !important;
  margin: 0 !important;
}

.form-toggle > .form-toggle-track {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  width: 44px;
  height: 24px;
  background: var(--border-strong); /* trilho OFF: light #cbd5e1 ≈ antigo #cbced4, dark #475569 */
  border-radius: 9999px;
  transition: background-color .2s;
}
.form-toggle > .form-toggle-track::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: #fff; /* knob: branco nos dois temas (elemento "on-track", pop sobre trilho) */
  border-radius: 50%;
  box-shadow: 0 1px 3px rgb(0 0 0 / .1), 0 1px 2px rgb(0 0 0 / .06);
  transition: left .2s;
}

.form-toggle > input[type="checkbox"]:checked + .form-toggle-track {
  background: var(--form-border-focus);
}
.form-toggle > input[type="checkbox"]:checked + .form-toggle-track::before {
  left: 22px;
}

.form-toggle > input[type="checkbox"]:focus-visible + .form-toggle-track {
  box-shadow: var(--form-shadow-focus);
}

.form-toggle > input[type="checkbox"]:disabled + .form-toggle-track,
.form-toggle.disabled {
  opacity: .5;
  cursor: not-allowed;
}
.form-toggle > input[type="checkbox"]:disabled ~ * { cursor: not-allowed; }

/* Sizes */
.form-toggle-sm > .form-toggle-track {
  width: 36px;
  height: 20px;
}
.form-toggle-sm > .form-toggle-track::before {
  width: 16px;
  height: 16px;
}
.form-toggle-sm > input[type="checkbox"]:checked + .form-toggle-track::before {
  left: 18px;
}

.form-toggle-lg { font-size: 16px; line-height: 24px; }
.form-toggle-lg > .form-toggle-track {
  width: 56px;
  height: 28px;
}
.form-toggle-lg > .form-toggle-track::before {
  width: 24px;
  height: 24px;
}
.form-toggle-lg > input[type="checkbox"]:checked + .form-toggle-track::before {
  left: 30px;
}