/*
 * Plumwheel brand overrides for Docuseal signing pages
 * Mounted at /app/public/custom.css
 *
 * Brand: #401162 (deep plum), #a06aff (lavender), #6e0dff (electric purple)
 * Font: Plus Jakarta Sans
 */

/* -- Font -- */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  /* Background: warmer, deeper cream for contrast with white form pages */
  --b1: 33 30% 90% !important;       /* ~#ede4d4 */
  --b2: 33 22% 85% !important;       /* slightly darker for cards */
  --b3: 33 14% 80% !important;       /* borders/dividers */

  /* Text: deep plum instead of near-black */
  --bc: 280 46% 14% !important;      /* #291334, already good */

  /* Neutral (buttons): Plumwheel deep plum */
  --n:  280 68% 23% !important;      /* #401162 */
  --nf: 280 68% 18% !important;      /* darker hover */
  --nc: 0 0% 100% !important;        /* white text on buttons */

  /* Primary: plum */
  --p: 280 68% 23% !important;       /* #401162 */
  --pf: 280 68% 18% !important;
  --pc: 0 0% 100% !important;

  /* Theme color */
  --rounded-btn: 0.75rem !important; /* softer corners, less pill-shaped */
}

/* -- Global font -- */
body,
html,
input,
textarea,
select,
button {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif !important;
}

/* -- Field area highlights: plum instead of red -- */
.bg-red-100 {
  background-color: rgba(64, 17, 98, 0.10) !important;
}

.border-red-100 {
  border-color: rgba(64, 17, 98, 0.20) !important;
}

.outline-red-500 {
  outline-color: #401162 !important;
}

/* Field areas with opacity modifiers */
[class*="bg-red-100"][class*="bg-opacity-80"] {
  background-color: rgba(64, 17, 98, 0.12) !important;
}

[class*="bg-red-100"][class*="bg-opacity-40"] {
  background-color: rgba(64, 17, 98, 0.06) !important;
}

/* -- Hide Download + Decline buttons -- */
download-button {
  display: none !important;
}

#decline_button,
[data-target="decline_button"],
button[id="decline_button"] {
  display: none !important;
}

/* Also hide the decline modal trigger wrapper */
.flex.items-center.space-x-2 > div:has(#decline_button) {
  display: none !important;
}

/* -- Progress/step dots: plum tint -- */
.bg-base-300 {
  background-color: rgba(64, 17, 98, 0.25) !important;
}

/* Completed step dots */
.bg-base-content {
  background-color: #401162 !important;
}

/* -- Hide sticky header (template name bar above PDF) -- */
/* Target any sticky element at top of the scrollbox */
#scrollbox .sticky {
  display: none !important;
}

/* Also target by attribute selector for safety */
div[class*="sticky"][class*="top-0"][class*="z-50"] {
  display: none !important;
}

/* -- Form panel at bottom: clean white with subtle shadow -- */
.fixed.bottom-0 {
  backdrop-filter: blur(8px);
}

/* -- Start page improvements -- */
.base-button,
button[class*="base-button"] {
  letter-spacing: 0.05em;
  font-weight: 600 !important;
  text-transform: uppercase;
}

/* Input fields: subtle plum focus ring */
.base-input:focus,
input:focus {
  border-color: #a06aff !important;
  box-shadow: 0 0 0 2px rgba(160, 106, 255, 0.2) !important;
  outline: none !important;
}

/* -- Hide "Powered by DocuSeal" in inline Vue completion -- */
:has(> a[href*="docuseal.com"]) {
  display: none !important;
}
a[href*="docuseal.com"] {
  display: none !important;
}

/* -- Hide send-email button in inline Vue completion -- */
toggle-submit:has(form[action*="send_submission_email"]) {
  display: none !important;
}

/* -- Scrollbar styling (webkit) -- */
#scrollbox::-webkit-scrollbar {
  width: 6px;
}

#scrollbox::-webkit-scrollbar-track {
  background: transparent;
}

#scrollbox::-webkit-scrollbar-thumb {
  background-color: rgba(64, 17, 98, 0.15);
  border-radius: 3px;
}