/* Buttons, badges, focus, status */
body.ezco-gui .btn,
body.ezco-gui .tw-dw-btn {
  min-height: var(--ez-btn-h);
  border-radius: var(--ez-radius);
  font-family: var(--ez-font-body);
  font-weight: 500;
  font-size: 14px;
}
body.ezco-gui .btn-primary,
body.ezco-gui .tw-dw-btn-primary {
  background-color: var(--ez-forest) !important;
  border-color: var(--ez-forest) !important;
  color: var(--ez-bone) !important;
}
body.ezco-gui .btn-default,
body.ezco-gui .tw-dw-btn-outline {
  background: var(--ez-surface) !important;
  border: 1px solid var(--ez-border-soft) !important;
  color: var(--ez-text) !important;
}
body.ezco-gui .btn-danger,
body.ezco-gui .tw-dw-btn-error {
  background-color: var(--ez-danger) !important;
  border-color: var(--ez-danger) !important;
  color: var(--ez-bone) !important;
}
body.ezco-gui .btn:focus-visible,
body.ezco-gui .tw-dw-btn:focus-visible,
body.ezco-gui a:focus-visible,
body.ezco-gui input:focus-visible,
body.ezco-gui select:focus-visible,
body.ezco-gui textarea:focus-visible,
body.ezco-gui button:focus-visible {
  outline: 2px solid var(--ez-forest);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ez-sage) 45%, transparent);
}
body.ezco-gui .label,
body.ezco-gui .badge,
body.ezco-gui .status-label {
  font-family: var(--ez-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 999px;
  border: 1px solid transparent;
  padding: 0.25em 0.65em;
}
body.ezco-gui .label-success { background: color-mix(in srgb, var(--ez-sage-700) 18%, var(--ez-tint)); color: var(--ez-sage-700); border-color: color-mix(in srgb, var(--ez-sage-700) 35%, var(--ez-tint)); }
body.ezco-gui .label-warning { background: color-mix(in srgb, var(--ez-clay) 14%, var(--ez-tint)); color: var(--ez-clay); border-color: color-mix(in srgb, var(--ez-clay) 30%, var(--ez-tint)); }
body.ezco-gui .label-danger { background: color-mix(in srgb, var(--ez-danger) 14%, var(--ez-tint)); color: var(--ez-danger); border-color: color-mix(in srgb, var(--ez-danger) 30%, var(--ez-tint)); }
body.ezco-gui .label-default,
body.ezco-gui .label-info { background: var(--ez-surface-2); color: var(--ez-text-muted); border-color: var(--ez-border-soft); }
body.ezco-gui .help-block,
body.ezco-gui .error,
body.ezco-gui .text-danger,
body.ezco-gui .invalid-feedback {
  color: var(--ez-danger) !important;
  font-size: 13px;
}

/* Indigo→blue gradient CTAs (Tambah / Unduh Excel pattern) → forest/sage */
body.ezco-gui .tw-from-indigo-500,
body.ezco-gui .tw-from-indigo-600,
body.ezco-gui .hover\:tw-from-indigo-600:hover,
body.ezco-gui .active\:tw-from-indigo-700:active {
  --tw-gradient-from: var(--ez-forest) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: color-mix(in srgb, var(--ez-forest) 0%, transparent) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
body.ezco-gui .tw-to-blue-500,
body.ezco-gui .tw-to-blue-600,
body.ezco-gui .hover\:tw-to-blue-600:hover,
body.ezco-gui .active\:tw-to-blue-700:active {
  --tw-gradient-to: var(--ez-sage) var(--tw-gradient-to-position) !important;
}
/* Solid fallback if gradient vars ignored (buttons / links with both classes) */
body.ezco-gui .tw-bg-gradient-to-r.tw-from-indigo-600.tw-to-blue-500,
body.ezco-gui .tw-bg-gradient-to-r.tw-from-indigo-500.tw-to-blue-500,
body.ezco-gui a.tw-bg-gradient-to-r.tw-from-indigo-600,
body.ezco-gui button.tw-bg-gradient-to-r.tw-from-indigo-600,
body.ezco-gui .tw-dw-btn.tw-bg-gradient-to-r.tw-from-indigo-600 {
  background-image: linear-gradient(to right, var(--ez-forest), var(--ez-sage)) !important;
  background-color: var(--ez-forest) !important;
  color: var(--ez-bone) !important;
  border-color: transparent !important;
}
body.ezco-gui .tw-bg-gradient-to-r.tw-from-indigo-600.tw-to-blue-500:hover,
body.ezco-gui .tw-bg-gradient-to-r.tw-from-indigo-500.tw-to-blue-500:hover,
body.ezco-gui a.tw-bg-gradient-to-r.tw-from-indigo-600:hover,
body.ezco-gui button.tw-bg-gradient-to-r.tw-from-indigo-600:hover,
body.ezco-gui .tw-dw-btn.tw-bg-gradient-to-r.tw-from-indigo-600:hover {
  background-image: linear-gradient(to right, var(--ez-sage-700), var(--ez-sage)) !important;
  filter: brightness(1.05);
}

/* Solid indigo/blue Tailwind utilities in authenticated shell */
body.ezco-gui .tw-text-indigo-600,
body.ezco-gui .tw-text-blue-500,
body.ezco-gui .tw-text-blue-600 {
  color: var(--ez-forest) !important;
}
body.ezco-gui .tw-bg-indigo-600,
body.ezco-gui .tw-bg-blue-500,
body.ezco-gui .tw-bg-blue-600 {
  background-color: var(--ez-forest) !important;
  color: var(--ez-bone) !important;
}
body.ezco-gui .tw-bg-indigo-50 {
  background-color: color-mix(in srgb, var(--ez-sage) 14%, var(--ez-tint)) !important;
}
body.ezco-gui .focus\:tw-ring-blue-500:focus,
body.ezco-gui .focus\:tw-ring-blue-500:focus-visible {
  --tw-ring-color: color-mix(in srgb, var(--ez-sage) 55%, transparent) !important;
}

/* Bootstrap / daisy info → forest */
body.ezco-gui .btn-info,
body.ezco-gui .tw-dw-btn-info,
body.ezco-gui .bg-info {
  background-color: var(--ez-forest) !important;
  border-color: var(--ez-forest) !important;
  color: var(--ez-bone) !important;
}
body.ezco-gui .btn-info:hover,
body.ezco-gui .tw-dw-btn-info:hover,
body.ezco-gui .bg-info:hover {
  background-color: var(--ez-sage-700) !important;
  border-color: var(--ez-sage-700) !important;
}
body.ezco-gui .text-info {
  color: var(--ez-sage-700) !important;
}