/**
 * Trendmetrik UI v2 — buton state sistemi (#tmv2App)
 * base.html inline’daki body:not(:has(#tmv2App)) … background:inherit kuralı v2’de kapalı;
 * bu dosya Bootstrap .btn + .tmv2-button* için tutarlı hover/active/focus/disabled sağlar.
 */

#tmv2App .btn {
  border-radius: var(--tmv2-btn-radius, 10px);
  font-weight: 600;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease,
    opacity 0.15s ease;
}

/* ----- Bootstrap: outline / secondary — metin her zaman okunur ----- */
#tmv2App .btn-outline-secondary:hover:not(:disabled):not(.disabled),
#tmv2App .btn-outline-secondary:active:not(:disabled):not(.disabled),
#tmv2App .btn-outline-secondary:focus-visible:not(:disabled):not(.disabled),
#tmv2App .btn-outline-secondary.focus:not(:disabled):not(.disabled) {
  color: var(--tm-fg-on-brand) !important;
  background-color: var(--tmv2-bs-secondary) !important;
  border-color: var(--tmv2-bs-secondary) !important;
}

#tmv2App .btn-outline-primary:hover:not(:disabled):not(.disabled),
#tmv2App .btn-outline-primary:active:not(:disabled):not(.disabled),
#tmv2App .btn-outline-primary:focus-visible:not(:disabled):not(.disabled),
#tmv2App .btn-outline-primary.focus:not(:disabled):not(.disabled) {
  color: var(--tm-fg-on-brand) !important;
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}

#tmv2App .btn-outline-danger:hover:not(:disabled):not(.disabled),
#tmv2App .btn-outline-danger:active:not(:disabled):not(.disabled),
#tmv2App .btn-outline-danger:focus-visible:not(:disabled):not(.disabled),
#tmv2App .btn-outline-danger.focus:not(:disabled):not(.disabled) {
  color: var(--tm-fg-on-brand) !important;
  background-color: var(--color-danger) !important;
  border-color: var(--color-danger) !important;
}

#tmv2App .btn-outline-success:hover:not(:disabled):not(.disabled),
#tmv2App .btn-outline-success:active:not(:disabled):not(.disabled),
#tmv2App .btn-outline-success:focus-visible:not(:disabled):not(.disabled),
#tmv2App .btn-outline-success.focus:not(:disabled):not(.disabled) {
  color: var(--tm-fg-on-brand) !important;
  background-color: var(--color-success) !important;
  border-color: var(--color-success) !important;
}

/* Ghost / light — hover’da kaybolma yok */
#tmv2App .btn-light:hover:not(:disabled):not(.disabled),
#tmv2App .btn-light:focus-visible:not(:disabled):not(.disabled),
#tmv2App .btn-light.focus:not(:disabled):not(.disabled) {
  color: var(--tmv2-bs-body) !important;
  background-color: var(--tmv2-bs-light-hover-bg) !important;
  border-color: var(--tmv2-bs-light-hover-border) !important;
}

html.dark-mode #tmv2App .btn-light:hover:not(:disabled):not(.disabled) {
  color: var(--tmv2-ink, #e2e8f0) !important;
  background-color: rgba(255, 255, 255, 0.1) !important;
  border-color: var(--tmv2-line, #1e2533) !important;
}

/* Focus-visible — görünür halka, metin korunur */
#tmv2App .btn:focus-visible,
#tmv2App .btn.focus,
#tmv2App button:focus-visible:not(.tmv2-skip-focus):not([role="switch"]) {
  outline: none !important;
  box-shadow: var(--tmv2-focus-ring) !important;
}

#tmv2App .btn-primary:focus-visible:not(:disabled),
#tmv2App .btn-primary.focus:not(:disabled),
#tmv2App .btn-accent:focus-visible:not(:disabled),
#tmv2App .btn-accent.focus:not(:disabled) {
  box-shadow:
    var(--tmv2-focus-ring),
    0 2px 8px rgba(var(--color-primary-rgb), 0.25) !important;
}

#tmv2App .btn-outline-primary:focus-visible:not(:disabled),
#tmv2App .btn-outline-primary.focus:not(:disabled),
#tmv2App .btn-outline-secondary:focus-visible:not(:disabled),
#tmv2App .btn-outline-secondary.focus:not(:disabled) {
  box-shadow: var(--tmv2-focus-ring) !important;
}

/* Active — şeffaf arka plan + beyaz yazı kombinasyonunu engelle */
#tmv2App .btn:active:not(:disabled):not(.disabled) {
  filter: brightness(0.97);
}

#tmv2App .btn:disabled,
#tmv2App .btn.disabled,
#tmv2App button:disabled {
  opacity: 0.55 !important;
  cursor: not-allowed !important;
  pointer-events: none;
}

/* ----- tmv2-button* — yeni bileşen (Bootstrap ile birlikte kullanılabilir) ----- */
#tmv2App .tmv2-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25;
  border-radius: var(--tmv2-btn-radius, 10px);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease;
}

#tmv2App .tmv2-button:active:not(:disabled):not([aria-disabled="true"]) {
  filter: brightness(0.97);
}

#tmv2App .tmv2-button:disabled,
#tmv2App .tmv2-button[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

#tmv2App .tmv2-button-sm {
  padding: 0.35rem 0.75rem;
  font-size: 0.8125rem;
}

#tmv2App .tmv2-button-primary {
  background: var(--color-primary);
  color: var(--tm-fg-on-brand) !important;
  border-color: var(--color-primary);
  box-shadow: 0 2px 8px rgba(var(--color-primary-rgb), 0.22);
}

#tmv2App .tmv2-button-primary:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  color: var(--tm-fg-on-brand) !important;
}

#tmv2App .tmv2-button-primary:active:not(:disabled):not([aria-disabled="true"]) {
  background: var(--tmv2-primary-active);
  border-color: var(--tmv2-primary-active);
  color: var(--tm-fg-on-brand) !important;
}

#tmv2App .tmv2-button-primary:focus-visible {
  box-shadow: var(--tmv2-focus-ring), 0 2px 8px rgba(var(--color-primary-rgb), 0.22) !important;
}

#tmv2App .tmv2-button-secondary {
  background: var(--tmv2-surface-2, #f1f5f9);
  color: var(--tmv2-ink, #0f172a) !important;
  border-color: var(--tmv2-line, #e7ebf1);
}

#tmv2App .tmv2-button-secondary:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--tmv2-surface-3, #e2e8f0);
  border-color: var(--tmv2-line, #cbd5e1);
  color: var(--tmv2-ink, #0f172a) !important;
}

#tmv2App .tmv2-button-outline {
  background: transparent;
  color: var(--color-primary, #0175e4) !important;
  border-color: var(--color-primary, #0175e4);
}

#tmv2App .tmv2-button-outline:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--color-primary);
  color: var(--tm-fg-on-brand) !important;
  border-color: var(--color-primary);
}

#tmv2App .tmv2-button-ghost {
  background: transparent;
  color: var(--tmv2-ink-2, #475569) !important;
  border-color: transparent;
}

#tmv2App .tmv2-button-ghost:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--tmv2-surface-2, #f1f5f9);
  color: var(--tmv2-ink, #0f172a) !important;
}

#tmv2App .tmv2-button-danger {
  background: var(--tmv2-danger);
  color: var(--tm-fg-on-brand) !important;
  border-color: var(--tmv2-danger);
}

#tmv2App .tmv2-button-danger:hover:not(:disabled):not([aria-disabled="true"]) {
  filter: brightness(1.05);
  color: var(--tm-fg-on-brand) !important;
}

#tmv2App .tmv2-button-success {
  background: var(--tmv2-success);
  color: var(--tm-fg-on-brand) !important;
  border-color: var(--tmv2-success);
}

#tmv2App .tmv2-button-success:hover:not(:disabled):not([aria-disabled="true"]) {
  filter: brightness(1.05);
  color: var(--tm-fg-on-brand) !important;
}

#tmv2App .tmv2-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: var(--tmv2-btn-radius);
  border: 1px solid var(--tmv2-line-2, var(--tmv2-line, #e7ebf1));
  background: var(--tmv2-surface, #fff);
  color: var(--tmv2-ink-2, #475569);
  box-shadow: var(--tmv2-sh-1);
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease;
}

#tmv2App .tmv2-icon-button:hover:not(:disabled) {
  background: var(--tmv2-surface-2, #f1f5f9);
  color: var(--tmv2-ink, #0f172a);
  box-shadow: var(--tmv2-sh-2);
  border-color: var(--tmv2-line, #e7ebf1);
}

#tmv2App .tmv2-icon-button--primary {
  background: var(--tmv2-primary-soft);
  border-color: color-mix(in srgb, var(--tmv2-primary) 35%, var(--tmv2-line));
  color: var(--tmv2-primary);
}

#tmv2App .tmv2-icon-button--success {
  background: var(--tmv2-success-soft);
  border-color: color-mix(in srgb, var(--tmv2-success) 35%, var(--tmv2-line));
  color: var(--tmv2-success);
}

#tmv2App .tmv2-icon-button--danger {
  background: var(--tmv2-danger-soft);
  border-color: color-mix(in srgb, var(--tmv2-danger) 35%, var(--tmv2-line));
  color: var(--tmv2-danger);
}

/* Eski pulse/glow utility sınıflarıyla birlikte — sakin v2 */
#tmv2App button.tmv2-icon-button.xml-action-btn:hover,
#tmv2App a.tmv2-icon-button.xml-action-btn:hover {
  animation: none !important;
  transform: none !important;
}

#tmv2App button.tmv2-icon-button.xml-action-btn::before,
#tmv2App a.tmv2-icon-button.xml-action-btn::before,
#tmv2App button.tmv2-icon-button.xml-action-btn::after,
#tmv2App a.tmv2-icon-button.xml-action-btn::after {
  display: none !important;
  content: none !important;
}

@media (max-width: 768px) {
  #tmv2App button.tmv2-icon-button,
  #tmv2App a.tmv2-icon-button {
    padding: 0 !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px;
  }
}

#tmv2App .tmv2-button:focus-visible,
#tmv2App .tmv2-icon-button:focus-visible {
  outline: none !important;
  box-shadow: var(--tmv2-focus-ring, 0 0 0 3px rgba(1, 117, 228, 0.35)) !important;
}

/* Dark mode */
html.dark-mode #tmv2App .tmv2-button-secondary {
  background: rgba(255, 255, 255, 0.06);
  color: var(--tmv2-ink, #e2e8f0) !important;
  border-color: var(--tmv2-line, #1e2533);
}

html.dark-mode #tmv2App .tmv2-button-secondary:hover:not(:disabled):not([aria-disabled="true"]) {
  background: rgba(255, 255, 255, 0.1);
  color: var(--tm-fg-on-brand) !important;
}

html.dark-mode #tmv2App .tmv2-button-outline {
  color: var(--color-primary, #73b7fe) !important;
  border-color: rgba(var(--color-primary-rgb, 1, 117, 228), 0.55);
}

html.dark-mode #tmv2App .tmv2-button-outline:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--color-primary);
  color: var(--tm-fg-on-brand) !important;
}

html.dark-mode #tmv2App .tmv2-icon-button {
  background: var(--tmv2-surface, #10151f);
  border-color: var(--tmv2-line, #1e2533);
  color: var(--tmv2-ink-2, #94a3b8);
}

html.dark-mode #tmv2App .tmv2-icon-button--primary {
  background: var(--tmv2-primary-soft);
  border-color: color-mix(in srgb, var(--tmv2-primary) 40%, var(--tmv2-line));
  color: var(--tmv2-primary);
}

html.dark-mode #tmv2App .tmv2-icon-button--success {
  background: var(--tmv2-success-soft);
  border-color: color-mix(in srgb, var(--tmv2-success) 40%, var(--tmv2-line));
  color: var(--tmv2-success);
}

html.dark-mode #tmv2App .tmv2-icon-button--danger {
  background: var(--tmv2-danger-soft);
  border-color: color-mix(in srgb, var(--tmv2-danger) 40%, var(--tmv2-line));
  color: var(--tmv2-danger);
}

/* ----- Bootstrap solid — base.html + Baklava ile çakışmayı #tmv2App altında çöz
   Kök neden: :focus / .focus durumunda arka plan veya metin rengi düşüyor; inherit/outline
   kombinasyonu beyaz metin + açık zemin üretiyordu. ----- */
#tmv2App .btn-primary,
#tmv2App a.btn-primary,
#tmv2App button.btn-primary {
  background-color: var(--tmv2-primary) !important;
  border-color: var(--tmv2-primary) !important;
  color: var(--tm-fg-on-brand) !important;
}

#tmv2App .btn-primary:hover:not(:disabled):not(.disabled),
#tmv2App .btn-primary:focus:not(:disabled):not(.disabled),
#tmv2App .btn-primary.focus,
#tmv2App .btn-primary:active:not(:disabled):not(.disabled),
#tmv2App .show > .btn-primary.dropdown-toggle {
  background-color: var(--tmv2-primary-hover) !important;
  border-color: var(--tmv2-primary-hover) !important;
  color: var(--tm-fg-on-brand) !important;
}

#tmv2App .btn-secondary {
  background-color: var(--tmv2-bs-secondary) !important;
  border-color: var(--tmv2-bs-secondary) !important;
  color: var(--tm-fg-on-brand) !important;
}

#tmv2App .btn-secondary:hover:not(:disabled):not(.disabled),
#tmv2App .btn-secondary:focus:not(:disabled):not(.disabled),
#tmv2App .btn-secondary.focus:not(:disabled):not(.disabled),
#tmv2App .btn-secondary:focus-visible:not(:disabled):not(.disabled),
#tmv2App .btn-secondary:active:not(:disabled):not(.disabled) {
  background-color: var(--tmv2-bs-secondary-hover) !important;
  border-color: var(--tmv2-bs-secondary-active) !important;
  color: var(--tm-fg-on-brand) !important;
}

#tmv2App .btn-success {
  background-color: var(--color-success) !important;
  border-color: var(--color-success) !important;
  color: var(--tm-fg-on-brand) !important;
}

#tmv2App .btn-success:hover:not(:disabled):not(.disabled),
#tmv2App .btn-success:focus:not(:disabled):not(.disabled),
#tmv2App .btn-success:active:not(:disabled):not(.disabled) {
  filter: brightness(0.95);
  color: var(--tm-fg-on-brand) !important;
}

#tmv2App .btn-danger {
  background-color: var(--color-danger) !important;
  border-color: var(--color-danger) !important;
  color: var(--tm-fg-on-brand) !important;
}

#tmv2App .btn-danger:hover:not(:disabled):not(.disabled),
#tmv2App .btn-danger:focus:not(:disabled):not(.disabled),
#tmv2App .btn-danger:active:not(:disabled):not(.disabled) {
  filter: brightness(0.95);
  color: var(--tm-fg-on-brand) !important;
}

#tmv2App .btn-warning {
  background-color: var(--tmv2-warning) !important;
  border-color: var(--tmv2-warning-border) !important;
  color: var(--tmv2-ink) !important;
}

#tmv2App .btn-warning:hover:not(:disabled):not(.disabled),
#tmv2App .btn-warning:focus:not(:disabled):not(.disabled),
#tmv2App .btn-warning:active:not(:disabled):not(.disabled) {
  filter: brightness(0.97);
  color: var(--tmv2-ink) !important;
}

#tmv2App .btn-info {
  background-color: var(--color-secondary) !important;
  border-color: var(--color-secondary) !important;
  color: var(--tmv2-ink) !important;
}

#tmv2App .btn-info:hover:not(:disabled):not(.disabled),
#tmv2App .btn-info:focus:not(:disabled):not(.disabled),
#tmv2App .btn-info:active:not(:disabled):not(.disabled) {
  filter: brightness(0.97);
  color: var(--tmv2-ink) !important;
}

#tmv2App .btn-dark {
  background-color: var(--tmv2-bs-dark) !important;
  border-color: var(--tmv2-bs-dark) !important;
  color: var(--tm-fg-on-brand) !important;
}

#tmv2App .btn-dark:hover:not(:disabled):not(.disabled),
#tmv2App .btn-dark:focus:not(:disabled):not(.disabled),
#tmv2App .btn-dark:active:not(:disabled):not(.disabled) {
  background-color: var(--tmv2-bs-dark-hover) !important;
  color: var(--tm-fg-on-brand) !important;
}

#tmv2App .btn-link {
  color: var(--color-primary) !important;
  background: transparent !important;
  border-color: transparent !important;
  text-decoration: none;
}

#tmv2App .btn-link:hover:not(:disabled),
#tmv2App .btn-link:focus:not(:disabled) {
  color: var(--color-primary-hover) !important;
  text-decoration: underline;
}

/* Pagination */
#tmv2App .page-link {
  color: var(--color-primary) !important;
  background-color: var(--tmv2-surface) !important;
  border-color: var(--tmv2-line) !important;
}

#tmv2App .page-link:hover:not(:disabled) {
  color: var(--color-primary) !important;
  background-color: var(--tmv2-surface-2) !important;
}

#tmv2App .page-item.active .page-link {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: var(--tm-fg-on-brand) !important;
}

#tmv2App .page-item.disabled .page-link {
  color: var(--tmv2-mute) !important;
  background-color: var(--tmv2-surface-2) !important;
}

html.dark-mode #tmv2App .page-link {
  background-color: var(--tmv2-surface) !important;
  border-color: var(--tmv2-line) !important;
}

/* Modal footer — aynı görünürlük garantisi */
#tmv2App .modal-footer .btn:disabled {
  opacity: 0.55;
}

/* Filter bar / toolbar */
#tmv2App .filter-bar .btn-outline-secondary,
#tmv2App .tmv2-filter-bar .btn-outline-secondary,
#tmv2App .dashboard-top-controls .btn-outline-secondary {
  color: var(--tmv2-ink-2) !important;
  background-color: var(--tmv2-surface) !important;
  border-color: var(--tmv2-line) !important;
}

#tmv2App .filter-bar .btn-outline-secondary:hover:not(:disabled),
#tmv2App .tmv2-filter-bar .btn-outline-secondary:hover:not(:disabled),
#tmv2App .dashboard-top-controls .btn-outline-secondary:hover:not(:disabled),
#tmv2App .filter-bar .btn-outline-secondary.focus:not(:disabled),
#tmv2App .tmv2-filter-bar .btn-outline-secondary.focus:not(:disabled),
#tmv2App .dashboard-top-controls .btn-outline-secondary.focus:not(:disabled) {
  color: var(--tm-fg-on-brand) !important;
  background-color: var(--tmv2-bs-secondary) !important;
  border-color: var(--tmv2-bs-secondary) !important;
}