/* Bridge — Metronic v9 (transitorio). Descartar ao migrar de framework. */
:root {
  /* ── Primary (brand) ──────────────────────── */
  --tw-primary-light:         var(--lh-primary);
  --tw-primary-active-light:  var(--lh-primary-active);
  --tw-primary-light-light:   var(--lh-primary-light);
  --tw-primary-clarity-light: var(--lh-primary-clarity);
  --tw-primary-inverse-light: var(--lh-primary-inverse);
  --tw-primary-dark:          var(--lh-primary-dm);
  --tw-primary-active-dark:   var(--lh-primary-active-dm);
  --tw-primary-light-dark:    var(--lh-primary-light-dm);
  --tw-primary-clarity-dark:  var(--lh-primary-clarity-dm);
  --tw-primary-inverse-dark:  var(--lh-primary-inverse-dm);

  /* ── Brand/Accent ─────────────────────────── */
  --tw-brand-light:         var(--lh-accent-ui);
  --tw-brand-active-light:  var(--lh-accent-ui-active);
  --tw-brand-light-light:   var(--lh-accent-ui-light);
  --tw-brand-clarity-light: var(--lh-accent-ui-clarity);
  --tw-brand-inverse-light: var(--lh-accent-ui-inverse);
  --tw-brand-dark:          var(--lh-accent-ui-dm);
  --tw-brand-active-dark:   var(--lh-accent-ui-active-dm);
  --tw-brand-light-dark:    var(--lh-accent-ui-light-dm);
  --tw-brand-clarity-dark:  var(--lh-accent-ui-clarity-dm);
  --tw-brand-inverse-dark:  var(--lh-accent-ui-inverse-dm);

  /* ── Success ──────────────────────────────── */
  --tw-success-light:         var(--lh-success);
  --tw-success-active-light:  var(--lh-success-active);
  --tw-success-light-light:   var(--lh-success-light);
  --tw-success-clarity-light: var(--lh-success-clarity);
  --tw-success-inverse-light: #ffffff;
  --tw-success-dark:          var(--lh-success-dm);
  --tw-success-active-dark:   var(--lh-success-active-dm);
  --tw-success-light-dark:    var(--lh-success-light-dm);
  --tw-success-clarity-dark:  var(--lh-success-clarity-dm);
  --tw-success-inverse-dark:  #ffffff;

  /* ── Info (blue, nao purple) ──────────────── */
  --tw-info-light:         var(--lh-info);
  --tw-info-active-light:  var(--lh-info-active);
  --tw-info-light-light:   var(--lh-info-light);
  --tw-info-clarity-light: var(--lh-info-clarity);
  --tw-info-inverse-light: #ffffff;
  --tw-info-dark:          var(--lh-info-dm);
  --tw-info-active-dark:   var(--lh-info-active-dm);
  --tw-info-light-dark:    var(--lh-info-light-dm);
  --tw-info-clarity-dark:  var(--lh-info-clarity-dm);
  --tw-info-inverse-dark:  #ffffff;

  /* ── Danger ───────────────────────────────── */
  --tw-danger-light:         var(--lh-danger);
  --tw-danger-active-light:  var(--lh-danger-active);
  --tw-danger-light-light:   var(--lh-danger-light);
  --tw-danger-clarity-light: var(--lh-danger-clarity);
  --tw-danger-inverse-light: #ffffff;
  --tw-danger-dark:          var(--lh-danger-dm);
  --tw-danger-active-dark:   var(--lh-danger-active-dm);
  --tw-danger-light-dark:    var(--lh-danger-light-dm);
  --tw-danger-clarity-dark:  var(--lh-danger-clarity-dm);
  --tw-danger-inverse-dark:  #ffffff;

  /* ── Warning ──────────────────────────────── */
  --tw-warning-light:         var(--lh-warning);
  --tw-warning-active-light:  var(--lh-warning-active);
  --tw-warning-light-light:   var(--lh-warning-light);
  --tw-warning-clarity-light: var(--lh-warning-clarity);
  --tw-warning-inverse-light: #ffffff;
  --tw-warning-dark:          var(--lh-warning-dm);
  --tw-warning-active-dark:   var(--lh-warning-active-dm);
  --tw-warning-light-dark:    var(--lh-warning-light-dm);
  --tw-warning-clarity-dark:  var(--lh-warning-clarity-dm);
  --tw-warning-inverse-dark:  #ffffff;

  /* ── Gray / Neutral ───────────────────────── */
  --tw-gray-100-light: var(--lh-neutral-50);
  --tw-gray-200-light: var(--lh-neutral-100);
  --tw-gray-300-light: var(--lh-neutral-200);
  --tw-gray-400-light: var(--lh-neutral-300);
  --tw-gray-500-light: var(--lh-neutral-400);
  --tw-gray-600-light: var(--lh-neutral-500);
  --tw-gray-700-light: var(--lh-neutral-600);
  --tw-gray-800-light: var(--lh-neutral-700);
  --tw-gray-900-light: var(--lh-neutral-900);

  --tw-gray-100-dark: var(--lh-neutral-100-dm);
  --tw-gray-200-dark: var(--lh-neutral-200-dm);
  --tw-gray-300-dark: var(--lh-neutral-300-dm);
  --tw-gray-400-dark: var(--lh-neutral-400-dm);
  --tw-gray-500-dark: var(--lh-neutral-500-dm);
  --tw-gray-600-dark: var(--lh-neutral-600-dm);
  --tw-gray-700-dark: var(--lh-neutral-700-dm);
  --tw-gray-800-dark: var(--lh-neutral-800-dm);
  --tw-gray-900-dark: var(--lh-neutral-900-dm);

  /* ── Box Shadows ──────────────────────────── */
  --tw-primary-box-shadow: 0px 4px 12px 0px rgba(106,42,243,0.35);
  --tw-info-box-shadow:    0px 4px 12px 0px rgba(59,130,246,0.35);
  --tw-success-box-shadow: 0px 4px 12px 0px rgba(34,197,94,0.35);
  --tw-danger-box-shadow:  0px 4px 12px 0px rgba(239,68,68,0.35);
  --tw-warning-box-shadow: 0px 4px 12px 0px rgba(245,158,11,0.35);
}

/* Bridge — Override direto nos seletores .light/.dark do Metronic.
   O Metronic define --tw-primary etc. com valores hardcoded dentro de .light{} e .dark{},
   NAO via var(--tw-primary-light). Sem isso, checkbox/radio/switch ficam com cores default. */
:root, .light {
  --tw-primary:         var(--lh-primary);
  --tw-primary-active:  var(--lh-primary-active);
  --tw-primary-light:   var(--lh-primary-light);
  --tw-primary-clarity: var(--lh-primary-clarity);
  --tw-primary-inverse: #ffffff;
  --tw-brand:           var(--lh-accent-ui);
  --tw-brand-active:    var(--lh-accent-ui-active);
  --tw-brand-light:     var(--lh-accent-ui-light);
  --tw-brand-clarity:   var(--lh-accent-ui-clarity);
  --tw-brand-inverse:   #ffffff;
  --tw-success:         var(--lh-success);
  --tw-success-active:  var(--lh-success-active);
  --tw-success-light:   var(--lh-success-light);
  --tw-success-clarity: var(--lh-success-clarity);
  --tw-success-inverse: #ffffff;
  --tw-info:            var(--lh-info);
  --tw-info-active:     var(--lh-info-active);
  --tw-info-light:      var(--lh-info-light);
  --tw-info-clarity:    var(--lh-info-clarity);
  --tw-info-inverse:    #ffffff;
  --tw-danger:          var(--lh-danger);
  --tw-danger-active:   var(--lh-danger-active);
  --tw-danger-light:    var(--lh-danger-light);
  --tw-danger-clarity:  var(--lh-danger-clarity);
  --tw-danger-inverse:  #ffffff;
  --tw-warning:         var(--lh-warning);
  --tw-warning-active:  var(--lh-warning-active);
  --tw-warning-light:   var(--lh-warning-light);
  --tw-warning-clarity: var(--lh-warning-clarity);
  --tw-warning-inverse: #ffffff;
  --tw-gray-100: var(--lh-neutral-50);
  --tw-gray-200: var(--lh-neutral-100);
  --tw-gray-300: var(--lh-neutral-200);
  --tw-gray-400: var(--lh-neutral-300);
  --tw-gray-500: var(--lh-neutral-400);
  --tw-gray-600: var(--lh-neutral-500);
  --tw-gray-700: var(--lh-neutral-600);
  --tw-gray-800: var(--lh-neutral-700);
  --tw-gray-900: var(--lh-neutral-900);
}

.dark {
  --tw-primary:         var(--lh-primary-dm);
  --tw-primary-active:  var(--lh-primary-active-dm);
  --tw-primary-light:   var(--lh-primary-light-dm);
  --tw-primary-clarity: var(--lh-primary-clarity-dm);
  --tw-primary-inverse: #ffffff;
  --tw-brand:           var(--lh-accent-ui-dm);
  --tw-brand-active:    var(--lh-accent-ui-active-dm);
  --tw-brand-light:     var(--lh-accent-ui-light-dm);
  --tw-brand-clarity:   var(--lh-accent-ui-clarity-dm);
  --tw-brand-inverse:   #ffffff;
  --tw-success:         var(--lh-success-dm);
  --tw-success-active:  var(--lh-success-active-dm);
  --tw-success-light:   var(--lh-success-light-dm);
  --tw-success-clarity: var(--lh-success-clarity-dm);
  --tw-success-inverse: #ffffff;
  --tw-info:            var(--lh-info-dm);
  --tw-info-active:     var(--lh-info-active-dm);
  --tw-info-light:      var(--lh-info-light-dm);
  --tw-info-clarity:    var(--lh-info-clarity-dm);
  --tw-info-inverse:    #ffffff;
  --tw-danger:          var(--lh-danger-dm);
  --tw-danger-active:   var(--lh-danger-active-dm);
  --tw-danger-light:    var(--lh-danger-light-dm);
  --tw-danger-clarity:  var(--lh-danger-clarity-dm);
  --tw-danger-inverse:  #ffffff;
  --tw-warning:         var(--lh-warning-dm);
  --tw-warning-active:  var(--lh-warning-active-dm);
  --tw-warning-light:   var(--lh-warning-light-dm);
  --tw-warning-clarity: var(--lh-warning-clarity-dm);
  --tw-warning-inverse: #ffffff;
  --tw-gray-100: var(--lh-neutral-100-dm);
  --tw-gray-200: var(--lh-neutral-200-dm);
  --tw-gray-300: var(--lh-neutral-300-dm);
  --tw-gray-400: var(--lh-neutral-400-dm);
  --tw-gray-500: var(--lh-neutral-500-dm);
  --tw-gray-600: var(--lh-neutral-600-dm);
  --tw-gray-700: var(--lh-neutral-700-dm);
  --tw-gray-800: var(--lh-neutral-800-dm);
  --tw-gray-900: var(--lh-neutral-900-dm);
}

/* Bridge — Override direto de componentes para garantir cores corretas.
   Necessario porque Metronic usa :root,.light combinado e nem sempre
   nossas variaveis vencem na cascata. */
.btn-primary {
  color: #ffffff;
  background-color: var(--lh-primary);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active {
  background-color: var(--lh-primary-active);
}

.btn-info {
  color: #ffffff;
  background-color: var(--lh-info);
}
.btn-info:hover, .btn-info:focus, .btn-info:active, .btn-info.active {
  background-color: var(--lh-info-active);
}

.btn-warning {
  color: #ffffff;
  background-color: var(--lh-warning);
}
.btn-warning:hover, .btn-warning:focus, .btn-warning:active, .btn-warning.active {
  background-color: var(--lh-warning-active);
}

.btn-success {
  color: #ffffff;
  background-color: var(--lh-success);
}
.btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success.active {
  background-color: var(--lh-success-active);
}

.btn-danger {
  color: #ffffff;
  background-color: var(--lh-danger);
}
.btn-danger:hover, .btn-danger:focus, .btn-danger:active, .btn-danger.active {
  background-color: var(--lh-danger-active);
}

/* Badges — garantir cor de texto correta */
.badge-primary {
  color: #ffffff;
  background-color: var(--lh-primary);
}
.badge-info {
  color: #ffffff;
  background-color: var(--lh-info);
}
.badge-success {
  color: #ffffff;
  background-color: var(--lh-success);
}
.badge-danger {
  color: #ffffff;
  background-color: var(--lh-danger);
}
.badge-warning {
  color: #ffffff;
  background-color: var(--lh-warning);
}

/* Outline badges — texto colorido, fundo transparente, borda */
.badge-outline.badge-primary {
  color: var(--lh-primary);
  background-color: transparent;
  border-color: var(--lh-primary-clarity);
}
.badge-outline.badge-info {
  color: var(--lh-info);
  background-color: transparent;
  border-color: var(--lh-info-clarity);
}
.badge-outline.badge-success {
  color: var(--lh-success);
  background-color: transparent;
  border-color: var(--lh-success-clarity);
}
.badge-outline.badge-danger {
  color: var(--lh-danger);
  background-color: transparent;
  border-color: var(--lh-danger-clarity);
}
.badge-outline.badge-warning {
  color: var(--lh-warning);
  background-color: transparent;
  border-color: var(--lh-warning-clarity);
}

/* Outline buttons — texto e borda coloridos, fundo transparente */
.btn-outline.btn-primary {
  color: var(--lh-primary);
  background-color: transparent;
  border-color: var(--lh-primary-clarity);
}
.btn-outline.btn-primary:hover, .btn-outline.btn-primary:focus, .btn-outline.btn-primary:active {
  color: #ffffff;
  background-color: var(--lh-primary);
  border-color: var(--lh-primary);
}
.btn-outline.btn-info {
  color: var(--lh-info);
  background-color: transparent;
  border-color: var(--lh-info-clarity);
}
.btn-outline.btn-info:hover, .btn-outline.btn-info:focus, .btn-outline.btn-info:active {
  color: #ffffff;
  background-color: var(--lh-info);
  border-color: var(--lh-info);
}
.btn-outline.btn-success {
  color: var(--lh-success);
  background-color: transparent;
  border-color: var(--lh-success-clarity);
}
.btn-outline.btn-success:hover, .btn-outline.btn-success:focus, .btn-outline.btn-success:active {
  color: #ffffff;
  background-color: var(--lh-success);
  border-color: var(--lh-success);
}
.btn-outline.btn-danger {
  color: var(--lh-danger);
  background-color: transparent;
  border-color: var(--lh-danger-clarity);
}
.btn-outline.btn-danger:hover, .btn-outline.btn-danger:focus, .btn-outline.btn-danger:active {
  color: #ffffff;
  background-color: var(--lh-danger);
  border-color: var(--lh-danger);
}
.btn-outline.btn-warning {
  color: var(--lh-warning);
  background-color: transparent;
  border-color: var(--lh-warning-clarity);
}
.btn-outline.btn-warning:hover, .btn-outline.btn-warning:focus, .btn-outline.btn-warning:active {
  color: #ffffff;
  background-color: var(--lh-warning);
  border-color: var(--lh-warning);
}

/* Clear buttons — sem fundo, texto colorido, hover neutro */
.btn-clear.btn-primary { color: var(--lh-primary); }
.btn-clear.btn-primary:hover, .btn-clear.btn-primary:focus {
  color: var(--lh-primary);
  background-color: var(--lh-neutral-100);
}
.btn-clear.btn-info { color: var(--lh-info); }
.btn-clear.btn-info:hover, .btn-clear.btn-info:focus {
  color: var(--lh-info);
  background-color: var(--lh-neutral-100);
}
.btn-clear.btn-success { color: var(--lh-success); }
.btn-clear.btn-success:hover, .btn-clear.btn-success:focus {
  color: var(--lh-success);
  background-color: var(--lh-neutral-100);
}
.btn-clear.btn-danger { color: var(--lh-danger); }
.btn-clear.btn-danger:hover, .btn-clear.btn-danger:focus {
  color: var(--lh-danger);
  background-color: var(--lh-neutral-100);
}
.btn-clear.btn-warning { color: var(--lh-warning); }
.btn-clear.btn-warning:hover, .btn-clear.btn-warning:focus {
  color: var(--lh-warning);
  background-color: var(--lh-neutral-100);
}

/* Bridge — Sidebar background + menu active states */
.demo1 .sidebar {
  background-color: var(--lh-neutral-50) !important;
}
.dark .demo1 .sidebar {
  background-color: var(--lh-neutral-200-dm) !important;
}

.menu-default .menu-item.active > .menu-link,
.menu-default .menu-item.active > .menu-label,
.menu-default .menu-item.here > .menu-link,
.menu-default .menu-item.here > .menu-label {
  background-color: var(--lh-neutral-200) !important;
}
.dark .menu-default .menu-item.active > .menu-link,
.dark .menu-default .menu-item.active > .menu-label,
.dark .menu-default .menu-item.here > .menu-link,
.dark .menu-default .menu-item.here > .menu-label {
  background-color: var(--lh-neutral-300-dm) !important;
}

.menu-default .menu-item > .menu-link:hover,
.menu-default .menu-item > .menu-label:hover {
  background-color: var(--lh-neutral-100) !important;
}
.dark .menu-default .menu-item > .menu-link:hover,
.dark .menu-default .menu-item > .menu-label:hover {
  background-color: var(--lh-neutral-300-dm) !important;
}

/* Bridge — Tipografia override */
h1, h2, h3, h4, h5, h6, .card-title, .menu-title {
  font-family: var(--lh-font-heading) !important;
}