/*
 * Tema v2 (tki) - botoes (.btn e todas as variantes: solidos, outline,
 * light/dark, link, tamanhos, grupos, fechar).
 * Button do tki: 40px, cantos de 12px, 14px/500, sem sombra pesada.
 * Acao principal = cor da whitelabel (--bs-primary). Cores de estado escolhidas
 * para o texto branco passar em contraste (4.5:1) nos dois temas.
 */

:where(html.tki-layout) .btn {
  min-height: 40px;
  padding: 8px 16px;
  font-size: 14px;
  border-radius: var(--tki-radius-control);
}

:where(html.tki-layout) .btn-sm {
  min-height: 32px;
  padding: 5px 12px;
  font-size: 13px;
  border-radius: 10px;
}

:where(html.tki-layout) .btn-lg {
  min-height: 48px;
  padding: 10px 24px;
  font-size: 15px;
}

html.tki-layout .btn {
  --bs-btn-font-family: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
  --bs-btn-font-weight: 500;
  --bs-btn-box-shadow: none;
  --bs-btn-focus-box-shadow: var(--tki-ring);
  --bs-btn-disabled-opacity: 0.5;
  font-weight: 500;
  letter-spacing: 0;
  gap: 8px;
  align-items: center;
  justify-content: center;
  box-shadow: none;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s, filter 0.15s;
}

:where(html.tki-layout) .btn { display: inline-flex; }
:where(html.tki-layout) :is(.btn.w-100, .btn.d-block, .btn-block) { display: flex; }
html.tki-layout .btn:focus-visible { box-shadow: var(--tki-ring) !important; outline: none; }
html.tki-layout .btn i,
html.tki-layout .btn svg { flex-shrink: 0; }

/* ---------- Solidos ---------- */

html.tki-layout .btn:is(.btn-primary, .btn-success, .btn-danger, .btn-info, .btn-warning, .btn-dark, .btn-secondary, .btn-light) {
  color: var(--bs-btn-color) !important;
  background: var(--bs-btn-bg) !important;
  border: 1px solid var(--bs-btn-border-color) !important;
}

html.tki-layout .btn:is(.btn-primary, .btn-success, .btn-danger, .btn-info, .btn-warning, .btn-dark, .btn-secondary, .btn-light):hover,
html.tki-layout .btn:is(.btn-primary, .btn-success, .btn-danger, .btn-info, .btn-warning, .btn-dark, .btn-secondary, .btn-light):focus-visible {
  color: var(--bs-btn-hover-color) !important;
  background: var(--bs-btn-hover-bg) !important;
  border-color: var(--bs-btn-hover-border-color) !important;
}

html.tki-layout .btn:is(.btn-primary, .btn-success, .btn-danger, .btn-info, .btn-warning, .btn-dark, .btn-secondary, .btn-light):is(:active, .active, .show) {
  color: var(--bs-btn-active-color) !important;
  background: var(--bs-btn-active-bg) !important;
  border-color: var(--bs-btn-active-border-color) !important;
}

html.tki-layout .btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--tki-primary);
  --bs-btn-border-color: var(--tki-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: rgba(var(--bs-primary-rgb, 37, 99, 235), 0.9);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--tki-primary);
  --bs-btn-active-border-color: var(--tki-primary);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--tki-primary);
  --bs-btn-disabled-border-color: var(--tki-primary);
}
html.tki-layout .btn-primary:hover { filter: none; }

html.tki-layout .btn-success {
  --bs-btn-color: #fff;
  --bs-btn-bg: #047857;
  --bs-btn-border-color: #047857;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #065f46;
  --bs-btn-hover-border-color: #065f46;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #065f46;
  --bs-btn-active-border-color: #065f46;
  --bs-btn-disabled-bg: #047857;
  --bs-btn-disabled-border-color: #047857;
}

html.tki-layout .btn-danger {
  --bs-btn-color: #fff;
  --bs-btn-bg: #dc2626;
  --bs-btn-border-color: #dc2626;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #b91c1c;
  --bs-btn-hover-border-color: #b91c1c;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #b91c1c;
  --bs-btn-active-border-color: #b91c1c;
  --bs-btn-disabled-bg: #dc2626;
  --bs-btn-disabled-border-color: #dc2626;
}

html.tki-layout .btn-info {
  --bs-btn-color: #fff;
  --bs-btn-bg: #0369a1;
  --bs-btn-border-color: #0369a1;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #075985;
  --bs-btn-hover-border-color: #075985;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #075985;
  --bs-btn-active-border-color: #075985;
}

html.tki-layout .btn-warning {
  --bs-btn-color: #fff;
  --bs-btn-bg: #b45309;
  --bs-btn-border-color: #b45309;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #92400e;
  --bs-btn-hover-border-color: #92400e;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #92400e;
  --bs-btn-active-border-color: #92400e;
}

/* "secondary" do tki: cinza suave com texto escuro */
html.tki-layout .btn-secondary,
html.tki-layout .btn-light {
  --bs-btn-color: #18181b;
  --bs-btn-bg: #f4f4f5;
  --bs-btn-border-color: #f4f4f5;
  --bs-btn-hover-color: #18181b;
  --bs-btn-hover-bg: #e4e4e7;
  --bs-btn-hover-border-color: #e4e4e7;
  --bs-btn-active-color: #18181b;
  --bs-btn-active-bg: #e4e4e7;
  --bs-btn-active-border-color: #e4e4e7;
  --bs-btn-disabled-color: #52525b;
  --bs-btn-disabled-bg: #f4f4f5;
  --bs-btn-disabled-border-color: #f4f4f5;
}

html.tki-layout .btn-dark {
  --bs-btn-color: #fff;
  --bs-btn-bg: #18181b;
  --bs-btn-border-color: #18181b;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #27272a;
  --bs-btn-hover-border-color: #27272a;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #27272a;
  --bs-btn-active-border-color: #27272a;
}

html.tki-layout[data-bs-theme='dark'] .btn-secondary,
html.tki-layout[data-bs-theme='dark'] .btn-light {
  --bs-btn-color: #f3f4f6;
  --bs-btn-bg: #23262d;
  --bs-btn-border-color: #2c3038;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #2c3038;
  --bs-btn-hover-border-color: #3a3f49;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #2c3038;
  --bs-btn-active-border-color: #3a3f49;
  --bs-btn-disabled-color: #9aa3b2;
  --bs-btn-disabled-bg: #23262d;
  --bs-btn-disabled-border-color: #2c3038;
}

html.tki-layout[data-bs-theme='dark'] .btn-dark {
  --bs-btn-color: #18181b;
  --bs-btn-bg: #f4f4f5;
  --bs-btn-border-color: #f4f4f5;
  --bs-btn-hover-color: #18181b;
  --bs-btn-hover-bg: #e4e4e7;
  --bs-btn-hover-border-color: #e4e4e7;
  --bs-btn-active-color: #18181b;
  --bs-btn-active-bg: #e4e4e7;
  --bs-btn-active-border-color: #e4e4e7;
}

/* Texto branco forcado (text-white) em botao claro ficaria invisivel */
html.tki-layout .btn:is(.btn-secondary, .btn-light).text-white { color: var(--bs-btn-color) !important; }
html.tki-layout[data-bs-theme='dark'] .btn-dark.text-white { color: #18181b !important; }

/* ---------- Outline: borda neutra, fundo da superficie, texto na cor ---------- */

:where(html.tki-layout) [class*='btn-outline-'] {
  --tki-btn-fg: var(--tki-fg);
  --tki-btn-hover-bg: var(--tki-hover);
  --tki-btn-bd: var(--tki-input-border);
}

html.tki-layout .btn:is([class*='btn-outline-']) {
  color: var(--tki-btn-fg) !important;
  background: var(--tki-card) !important;
  border: 1px solid var(--tki-btn-bd) !important;
}

html.tki-layout .btn:is([class*='btn-outline-']):hover,
html.tki-layout .btn:is([class*='btn-outline-']):focus-visible,
html.tki-layout .btn:is([class*='btn-outline-']):is(:active, .active, .show) {
  color: var(--tki-btn-fg) !important;
  background: var(--tki-btn-hover-bg) !important;
  border-color: var(--tki-btn-bd) !important;
}

html.tki-layout .btn-outline-primary { --tki-btn-fg: var(--tki-primary-text); --tki-btn-hover-bg: var(--tki-soft-primary-bg); --tki-btn-bd: var(--tki-soft-primary-bd); }
html.tki-layout .btn-outline-success { --tki-btn-fg: var(--tki-soft-success-fg); --tki-btn-hover-bg: var(--tki-soft-success-bg); --tki-btn-bd: var(--tki-soft-success-bd); }
html.tki-layout .btn-outline-danger  { --tki-btn-fg: var(--tki-soft-danger-fg);  --tki-btn-hover-bg: var(--tki-soft-danger-bg);  --tki-btn-bd: var(--tki-soft-danger-bd); }
html.tki-layout .btn-outline-warning { --tki-btn-fg: var(--tki-soft-warning-fg); --tki-btn-hover-bg: var(--tki-soft-warning-bg); --tki-btn-bd: var(--tki-soft-warning-bd); }
html.tki-layout .btn-outline-info    { --tki-btn-fg: var(--tki-soft-info-fg);    --tki-btn-hover-bg: var(--tki-soft-info-bg);    --tki-btn-bd: var(--tki-soft-info-bd); }
html.tki-layout :is(.btn-outline-secondary, .btn-outline-light, .btn-outline-dark) { --tki-btn-fg: var(--tki-fg); }

/* Outline "ativo" (filtros tipo pilula): preenchido na cor */
html.tki-layout .btn-outline-primary:is(.active, :active),
html.tki-layout .btn-check:checked + .btn-outline-primary {
  color: #fff !important;
  background: var(--tki-primary) !important;
  border-color: var(--tki-primary) !important;
}

/* ---------- Link ---------- */

html.tki-layout .btn-link {
  --bs-btn-color: var(--tki-primary-text);
  --bs-btn-hover-color: var(--tki-primary-text);
  --bs-btn-active-color: var(--tki-primary-text);
  --bs-btn-disabled-color: var(--tki-muted);
  color: var(--tki-primary-text) !important;
  background: transparent !important;
  border-color: transparent !important;
  text-decoration: none;
}
html.tki-layout .btn-link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Desabilitado ---------- */

html.tki-layout .btn:disabled,
html.tki-layout .btn.disabled,
html.tki-layout fieldset:disabled .btn {
  opacity: 0.5;
  pointer-events: none;
}

/* ---------- Grupo ---------- */

html.tki-layout .btn-group > .btn:not(:last-child):not(.dropdown-toggle),
html.tki-layout .btn-group > .btn-group:not(:last-child) > .btn {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

html.tki-layout .btn-group > .btn:nth-child(n + 3),
html.tki-layout .btn-group > :not(.btn-check) + .btn,
html.tki-layout .btn-group > .btn-group:not(:first-child) > .btn {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

/* ---------- Fechar (X) ---------- */

html.tki-layout .btn-close {
  --bs-btn-close-color: currentColor;
  --bs-btn-close-opacity: 0.6;
  --bs-btn-close-hover-opacity: 1;
  --bs-btn-close-focus-shadow: var(--tki-ring);
  width: 16px;
  height: 16px;
  padding: 6px;
  border-radius: 8px;
  filter: none !important;
  box-sizing: content-box;
}

html.tki-layout .btn-close:hover { background-color: var(--tki-hover); }
html.tki-layout[data-bs-theme='dark'] .btn-close { filter: invert(1) grayscale(100%) brightness(200%) !important; }

/* Toast/alerta colorido mantem o X branco */
html.tki-layout :is(.toast, .alert)[class*='bg-'] .btn-close-white,
html.tki-layout :is(.toast, .alert)[class*='text-bg-'] .btn-close-white {
  filter: invert(1) grayscale(100%) brightness(200%) !important;
}