/* ==========================================================================
   ERP buttons — one geometry and token set across list, detail, and modal UI.
   Palette category "gradient" (html[data-palette-category="gradient"]) is the
   only case where primary buttons use a color gradient. UI styles
   (skeuomorph / clay / vodabiz) still restyle in ui_themes.css.
   ========================================================================== */

:root {
  --erp-btn-radius: 12px;
  --erp-btn-pad-y: 9px;
  --erp-btn-pad-x: 20px;
  --erp-btn-font: 13px;
  --erp-btn-weight: 600;
  --erp-btn-view-pad-y: 6px;
  --erp-btn-view-pad-x: 14px;
  --erp-btn-view-font: 12px;
  --erp-btn-view-radius: 10px;
  --erp-btn-primary-bg: var(--tenant-button-bg, var(--tenant-primary, var(--theme-accent-deep, #064e3b)));
  --erp-btn-primary-fg: var(--tenant-button-text, #ffffff);
  --erp-btn-primary-image: none;
}

html[data-palette-category="gradient"] {
  --erp-btn-primary-image: linear-gradient(
    135deg,
    var(--tenant-button-bg, var(--theme-accent-800, #064e3b)),
    var(--tenant-accent, var(--theme-accent, #10b981))
  );
}

/* --------------------------------------------------------------------------
   Primary / submit
   -------------------------------------------------------------------------- */
body .jalusi-submit-btn,
body .btn-primary,
body .primary-btn,
body .submit-btn,
body .tenant-btn-primary,
body .shop-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: var(--erp-btn-pad-y) var(--erp-btn-pad-x);
  border-radius: var(--erp-btn-radius);
  font-size: var(--erp-btn-font);
  font-weight: var(--erp-btn-weight);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  background-color: var(--erp-btn-primary-bg) !important;
  background-image: var(--erp-btn-primary-image) !important;
  color: var(--erp-btn-primary-fg) !important;
  border: 1px solid color-mix(in srgb, var(--erp-btn-primary-bg) 82%, #000000) !important;
  box-shadow: none;
  transition: filter 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}
body .jalusi-submit-btn:hover,
body .btn-primary:hover,
body .primary-btn:hover,
body .submit-btn:hover,
body .tenant-btn-primary:hover,
body .shop-btn-primary:hover {
  filter: brightness(1.08);
}
body .jalusi-submit-btn:disabled,
body .jalusi-submit-btn[data-jalusi-busy],
body .btn-primary:disabled,
body .primary-btn:disabled,
body .submit-btn:disabled {
  opacity: 0.7;
  cursor: wait;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Secondary / cancel
   -------------------------------------------------------------------------- */
body .jalusi-cancel-btn,
body .btn-secondary,
body .btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: var(--erp-btn-pad-y) var(--erp-btn-pad-x);
  border-radius: var(--erp-btn-radius);
  font-size: var(--erp-btn-font);
  font-weight: var(--erp-btn-weight);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  background-color: transparent !important;
  background-image: none !important;
  color: var(--theme-accent-800, var(--tenant-primary, #064e3b)) !important;
  border: 1px solid var(--theme-accent-300, rgba(16, 185, 129, 0.25)) !important;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
body .jalusi-cancel-btn:hover,
body .btn-secondary:hover,
body .btn-outline:hover {
  background-color: var(--theme-accent-050, rgba(16, 185, 129, 0.06)) !important;
}

/* --------------------------------------------------------------------------
   Ghost / list action / Preview / filter pill
   -------------------------------------------------------------------------- */
body .view-btn,
body .filter-pill,
body .folder-tab,
body .tab-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: var(--erp-btn-view-pad-y) var(--erp-btn-view-pad-x);
  border-radius: var(--erp-btn-view-radius);
  font-size: var(--erp-btn-view-font);
  font-weight: var(--erp-btn-weight);
  line-height: 1.2;
  text-decoration: none !important;
  cursor: pointer;
  background-color: var(--theme-accent-100, rgba(16, 185, 129, 0.08)) !important;
  background-image: none !important;
  color: var(--theme-accent-800, var(--tenant-primary, #064e3b)) !important;
  border: 1px solid var(--theme-accent-200, rgba(16, 185, 129, 0.15)) !important;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
body .view-btn:hover,
body .filter-pill:hover,
body .folder-tab:not(.active):hover,
body .tab-btn:not(.active):hover {
  background-color: var(--theme-accent-200, rgba(16, 185, 129, 0.16)) !important;
  border-color: var(--theme-accent-300, rgba(16, 185, 129, 0.28)) !important;
  color: var(--theme-accent-900, var(--tenant-primary, #064e3b)) !important;
}

body .layout-btn.active,
body .filter-pill.active,
body .folder-tab.active,
body .tab-btn.active {
  background-color: var(--erp-btn-primary-bg, var(--tenant-button-bg, #064e3b)) !important;
  background-image: var(--erp-btn-primary-image, none) !important;
  color: var(--erp-btn-primary-fg, var(--tenant-button-text, #ffffff)) !important;
  border-color: color-mix(in srgb, var(--erp-btn-primary-bg, #064e3b) 82%, #000000) !important;
}

/* --------------------------------------------------------------------------
   Danger / delete
   -------------------------------------------------------------------------- */
body .danger-btn,
body .jalusi-danger-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: var(--erp-btn-pad-y) var(--erp-btn-pad-x);
  border-radius: var(--erp-btn-radius);
  font-size: var(--erp-btn-font);
  font-weight: var(--erp-btn-weight);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  color: #ffffff !important;
  background-color: #dc2626 !important;
  background-image: none !important;
  border: 1px solid #b91c1c !important;
  transition: filter 0.15s ease;
}
body .danger-btn:hover,
body .jalusi-danger-btn:hover {
  filter: brightness(1.08);
}

/* --------------------------------------------------------------------------
   Ad-hoc Tailwind primary CTAs (hardcoded emerald / slate)
   -------------------------------------------------------------------------- */
button[class*="bg-[#064e3b]"],
a[class*="bg-[#064e3b]"],
button[class*="bg-[#059669]"],
a[class*="bg-[#059669]"],
button[class*="bg-[#065f46]"],
a[class*="bg-[#065f46]"],
button[class*="bg-[#047857]"],
a[class*="bg-[#047857]"],
button[class*="bg-[#071810]"],
a[class*="bg-[#071810]"],
button[class*="bg-emerald-700"],
a[class*="bg-emerald-700"][class*="text-white"],
button[class*="bg-emerald-800"],
a[class*="bg-emerald-800"][class*="text-white"],
button[class*="bg-slate-800"][class*="text-white"],
a[class*="bg-slate-800"][class*="text-white"],
button[class*="bg-slate-900"][class*="text-white"],
a[class*="bg-slate-900"][class*="text-white"],
button[class*="bg-gradient-to"][class*="from-emerald-"],
a[class*="bg-gradient-to"][class*="from-emerald-"],
button[class*="bg-gradient-to"][class*="from-[#064e3b]"],
a[class*="bg-gradient-to"][class*="from-[#064e3b]"],
button[class*="bg-gradient-to"][class*="from-[#059669]"],
a[class*="bg-gradient-to"][class*="from-[#059669]"] {
  background-color: var(--erp-btn-primary-bg) !important;
  background-image: var(--erp-btn-primary-image) !important;
  color: var(--erp-btn-primary-fg) !important;
  border-color: color-mix(in srgb, var(--erp-btn-primary-bg) 82%, #000000) !important;
}

/* Card / kanban Preview that used slate chips */
button[class*="bg-slate-100"][class*="text-slate-700"][class*="rounded-lg"][class*="text-xs"],
button[class*="bg-white"][class*="border-slate-200"][class*="text-slate-700"][class*="rounded-lg"][class*="text-xs"] {
  background-color: var(--theme-accent-100, rgba(16, 185, 129, 0.08)) !important;
  background-image: none !important;
  color: var(--theme-accent-800, var(--tenant-primary, #064e3b)) !important;
  border: 1px solid var(--theme-accent-200, rgba(16, 185, 129, 0.15)) !important;
}

/* Field Update / Preview as emerald underline *buttons* (not text links) */
button[class*="hover:underline"][class*="text-[#064e3b]"],
button[class*="hover:underline"][class*="text-emerald-"] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--erp-btn-view-pad-y) var(--erp-btn-view-pad-x);
  border-radius: var(--erp-btn-view-radius);
  font-size: var(--erp-btn-view-font);
  font-weight: var(--erp-btn-weight);
  line-height: 1.2;
  text-decoration: none !important;
  background-color: var(--theme-accent-100, rgba(16, 185, 129, 0.08)) !important;
  background-image: none !important;
  color: var(--theme-accent-800, var(--tenant-primary, #064e3b)) !important;
  border: 1px solid var(--theme-accent-200, rgba(16, 185, 129, 0.15)) !important;
}

/* Inline emerald primary gradients on buttons/links (not decorative bars) */
a[style*="linear-gradient"]:not([style*="#991b1b"]):not([style*="#dc2626"]):not([style*="#ef4444"]):not([style*="#b91c1c"]):not([style*="#7f1d1d"]),
button[style*="linear-gradient"]:not([style*="#991b1b"]):not([style*="#dc2626"]):not([style*="#ef4444"]):not([style*="#b91c1c"]):not([style*="#7f1d1d"]) {
  background-color: var(--erp-btn-primary-bg) !important;
  background-image: var(--erp-btn-primary-image) !important;
  color: var(--erp-btn-primary-fg) !important;
  border-color: color-mix(in srgb, var(--erp-btn-primary-bg) 82%, #000000) !important;
}