/* ============================================================
   ui-padrao.css — padrão visual único de controles (04/11/2026)
   Botões, seletores, campos e filtros em formato PÍLULA (cantos totalmente
   redondos), fundo sólido, borda leve e sombra suave — igual aos exemplos
   que o Ciro mandou. Vale em todas as telas e perfis.

   Convivência com o Tailwind:
   - Só mexe em raio, fundo, borda, sombra e foco. Padding/altura ficam como
     cada tela já definiu.
   - Botão PREENCHIDO (indigo/emerald/red/escuro) mantém a cor; só fica pílula
     e ganha sombra. Botão de borda fica branco com borda cinza.
   - Área de texto (textarea) e trilhos de abas mantêm canto 12px — pílula
     em caixa alta de texto fica estranho.
   Carregar DEPOIS do Tailwind.
   ============================================================ */

:root {
  --ui-pilula: 9999px;
  --ui-raio-caixa: 14px;
  --ui-fundo: #ffffff;
  --ui-fundo-hover: #f8fafc;
  --ui-borda: #e5e7eb;
  --ui-borda-forte: #d1d5db;
  --ui-foco: #0b1f58;
  --ui-foco-anel: rgba(11, 31, 88, 0.16);
  --ui-sombra: 0 1px 2px rgba(15, 23, 42, 0.05);
  --ui-sombra-botao: 0 1px 2px rgba(15, 23, 42, 0.08), 0 6px 16px -10px rgba(15, 23, 42, 0.35);
}

/* ---------- Campos de uma linha: texto, número, data, busca, e-mail... ---------- */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="hidden"]) {
  border-radius: var(--ui-pilula) !important;
  background-color: var(--ui-fundo) !important;
  border: 1px solid var(--ui-borda) !important;
  box-shadow: var(--ui-sombra);
  padding-left: max(1rem, 0.9em) !important;
  transition: border-color .15s, box-shadow .15s;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):focus {
  outline: none !important;
  border-color: var(--ui-foco) !important;
  box-shadow: 0 0 0 3px var(--ui-foco-anel) !important;
}
input[readonly] { background-color: #f9fafb !important; }

/* Área de texto: canto arredondado, não pílula */
textarea {
  border-radius: var(--ui-raio-caixa) !important;
  background-color: var(--ui-fundo) !important;
  border: 1px solid var(--ui-borda) !important;
  box-shadow: var(--ui-sombra);
  transition: border-color .15s, box-shadow .15s;
}
textarea:focus { outline: none !important; border-color: var(--ui-foco) !important; box-shadow: 0 0 0 3px var(--ui-foco-anel) !important; }

/* ---------- Seletores: pílula com setinha própria ---------- */
select {
  border-radius: var(--ui-pilula) !important;
  background-color: var(--ui-fundo) !important;
  border: 1px solid var(--ui-borda) !important;
  box-shadow: var(--ui-sombra);
  -webkit-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right .8rem center !important;
  background-size: 16px !important;
  padding-left: max(1rem, 0.9em) !important;
  padding-right: 2.4rem !important;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}
select:hover { background-color: var(--ui-fundo-hover) !important; }
select:focus { outline: none !important; border-color: var(--ui-foco) !important; box-shadow: 0 0 0 3px var(--ui-foco-anel) !important; }
select[multiple] { border-radius: var(--ui-raio-caixa) !important; background-image: none !important; padding-right: .75rem !important; }

/* ---------- Botões: pílula ---------- */
button:not(.kanban-card):not([class*="rounded-none"]),
a[class*="px-"][class*="py-"] {
  border-radius: var(--ui-pilula) !important;
  transition: background-color .15s, box-shadow .15s, border-color .15s, transform .05s;
}
button:active:not(:disabled) { transform: translateY(0.5px); }

/* Aba SUBLINHADA (Configurações: Geral | Grupos | Integrações) não é pílula:
   com o raio, a linha de baixo virava um arco com cara de contorno. Volta
   ao sublinhado reto, sem fundo e sem sombra. */
button[class*="border-b-2"]:not(.kanban-card):not([class*="rounded-none"]),
button.settings-subtab {
  border-radius: 0 !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border-top: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
}

/* Botão de borda (secundário): branco, borda cinza */
button[class*="border-gray"]:not([class*="bg-indigo"]):not([class*="bg-emerald"]):not([class*="bg-green"]):not([class*="bg-red"]):not([class*="bg-amber"]):not([class*="bg-gray-8"]):not([class*="bg-gray-9"]),
button[class*="border-indigo-2"]:not([class*="bg-indigo-6"]),
button[class*="border-emerald-2"]:not([class*="bg-emerald-6"]),
button[class*="border-red-2"]:not([class*="bg-red-6"]) {
  background-color: var(--ui-fundo) !important;
  border-color: var(--ui-borda-forte) !important;
  box-shadow: var(--ui-sombra);
}
button[class*="border-gray"]:not([class*="bg-indigo"]):not([class*="bg-emerald"]):not([class*="bg-green"]):not([class*="bg-red"]):not([class*="bg-amber"]):hover,
button[class*="border-indigo-2"]:hover,
button[class*="border-emerald-2"]:hover,
button[class*="border-red-2"]:hover {
  background-color: var(--ui-fundo-hover) !important;
}

/* Botão cinza-claro (Copiar, etc.) */
button[class*="bg-gray-100"] {
  background-color: var(--ui-fundo) !important;
  border: 1px solid var(--ui-borda) !important;
  box-shadow: var(--ui-sombra);
}

/* Botão preenchido (primário/ação): mantém a cor, ganha sombra */
button[class*="bg-indigo-6"], button[class*="bg-emerald-6"], button[class*="bg-emerald-5"], button[class*="bg-green-5"], button[class*="bg-green-6"],
button[class*="bg-red-6"], button[class*="bg-gray-8"], button[class*="bg-gray-9"], button[class*="bg-amber-5"] {
  box-shadow: var(--ui-sombra-botao);
}

/* Abas em pílula (Kanban | Lista, Cliente | Parceiro...): trilho redondo, aba ativa branca */
div[class*="bg-gray-100"][class*="rounded-xl"][class*="p-1"] {
  background-color: #f1f5f9 !important;
  border: 1px solid var(--ui-borda) !important;
  border-radius: var(--ui-pilula) !important;
}
div[class*="bg-gray-100"][class*="rounded-xl"][class*="p-1"] > button { border-radius: var(--ui-pilula) !important; }
.tab-active { background-color: #fff !important; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.10) !important; }

/* Foco por teclado */
button:focus-visible, a:focus-visible { outline: none !important; box-shadow: 0 0 0 3px var(--ui-foco-anel) !important; }

input[type="checkbox"], input[type="radio"] { accent-color: var(--ui-foco); }
input:disabled, select:disabled, textarea:disabled, button:disabled { opacity: .55; cursor: not-allowed; }