/* ============================================================
   Surety Team — DocuSeal Branding Override
   Matches CRM theme from THEME_IMPLEMENTATION_SUMMARY.md
   Font: Inter (font-semibold = 600 for headings)
   Supports: prefers-color-scheme + parent postMessage dark toggle
   ============================================================ */

:root {
  --font-sans: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ocean-50: #e5f9ff;
  --ocean-100: #ccf4ff;
  --ocean-200: #99e9ff;
  --ocean-300: #66deff;
  --ocean-400: #33d3ff;
  --ocean-500: #00c8ff;
  --ocean-600: #00a0cc;
  --ocean-700: #007899;
  --ocean-800: #005066;
  --ocean-900: #002833;
  --ocean-950: #001c24;
  --gold-500: #ffd700;
  --gold-400: #ffed4e;
}

/* ---------- LIGHT MODE (default) ---------- */
html[data-theme="docuseal"] {
  color-scheme: light;
  --p: 193 100% 40%;
  --pf: 193 100% 34%;
  --pc: 0 0% 100%;
  --s: 193 80% 90%;
  --sf: 193 80% 84%;
  --sc: 193 100% 20%;
  --a: 45 100% 50%;
  --af: 45 100% 44%;
  --ac: 0 0% 10%;
  --n: 193 100% 20%;
  --nf: 193 100% 16%;
  --nc: 0 0% 100%;
  --b1: 193 30% 97%;
  --b2: 193 45% 93%;
  --b3: 193 35% 88%;
  --bc: 193 80% 10%;
  --in: 193 100% 40%;
  --inc: 0 0% 100%;
  --su: 158 64% 40%;
  --suc: 0 0% 100%;
  --wa: 39 100% 50%;
  --wac: 0 0% 10%;
  --er: 0 84% 60%;
  --erc: 0 0% 100%;
  --rounded-box: 1.25rem;
  --rounded-btn: 1rem;
  --rounded-badge: 9999px;
  --btn-text-case: none;
  --page-bg:
    radial-gradient(circle at top left, rgba(255, 215, 0, 0.14), transparent 28%),
    linear-gradient(135deg, var(--ocean-800) 0%, var(--ocean-700) 20%, var(--ocean-300) 60%, var(--ocean-100) 100%);
  --surface-bg: rgba(248, 252, 253, 0.94);
  --surface-border: rgba(0, 120, 153, 0.18);
  --surface-shadow: 0 20px 50px rgba(0, 80, 102, 0.14);
  --header-bg: linear-gradient(90deg, rgba(0, 80, 102, 0.86) 0%, rgba(0, 160, 204, 0.88) 100%);
  --header-panel-bg: rgba(0, 80, 102, 0.94);
  --header-btn-bg: rgba(255, 255, 255, 0.14);
  --header-btn-hover: rgba(255, 255, 255, 0.24);
  --text-main: var(--ocean-900);
  --text-muted: rgba(0, 40, 51, 0.68);
  --text-subtle: rgba(0, 40, 51, 0.58);
  --link-color: var(--ocean-700);
  --link-hover: var(--ocean-800);
  --btn-gradient: linear-gradient(180deg, var(--ocean-500) 0%, var(--ocean-600) 100%);
  --btn-gradient-hover: linear-gradient(180deg, var(--ocean-600) 0%, var(--ocean-700) 100%);
  --btn-shadow: 0 12px 28px rgba(0, 80, 102, 0.22);
  --ghost-bg: rgba(255, 255, 255, 0.88);
  --ghost-border: rgba(0, 120, 153, 0.22);
  --input-bg: rgba(255, 255, 255, 0.94);
  --input-border: rgba(0, 120, 153, 0.22);
  --input-focus: rgba(0, 160, 204, 0.5);
  --document-shadow: 0 18px 44px rgba(0, 80, 102, 0.15);
}

/* ---------- DARK MODE via OS preference ---------- */
@media (prefers-color-scheme: dark) {
  html[data-theme="docuseal"] {
    color-scheme: dark;
    --p: 193 100% 50%;
    --pf: 193 100% 44%;
    --pc: 0 0% 10%;
    --s: 193 60% 18%;
    --sf: 193 60% 14%;
    --sc: 193 80% 70%;
    --a: 45 95% 55%;
    --af: 45 95% 49%;
    --ac: 0 0% 10%;
    --n: 193 40% 13%;
    --nf: 193 40% 10%;
    --nc: 0 0% 95%;
    --b1: 193 50% 8%;
    --b2: 193 40% 11%;
    --b3: 193 36% 16%;
    --bc: 0 0% 95%;
    --page-bg:
      radial-gradient(circle at top left, rgba(255, 215, 0, 0.06), transparent 26%),
      linear-gradient(180deg, hsl(193 50% 5%) 0%, hsl(193 50% 8%) 30%, hsl(193 40% 11%) 100%);
    --surface-bg: hsl(193 40% 11% / 0.94);
    --surface-border: rgba(0, 160, 204, 0.16);
    --surface-shadow: 0 24px 60px rgba(0, 0, 0, 0.34);
    --header-bg: linear-gradient(90deg, hsl(193 100% 15%) 0%, hsl(193 100% 22%) 55%, hsl(193 100% 35% / 0.82) 100%);
    --header-panel-bg: hsl(193 60% 12% / 0.96);
    --header-btn-bg: rgba(255, 255, 255, 0.1);
    --header-btn-hover: rgba(255, 255, 255, 0.18);
    --text-main: hsl(0 0% 95%);
    --text-muted: hsl(193 40% 72%);
    --text-subtle: hsl(193 30% 62%);
    --link-color: var(--ocean-300);
    --link-hover: var(--gold-400);
    --btn-gradient: linear-gradient(180deg, var(--ocean-500) 0%, var(--ocean-600) 100%);
    --btn-gradient-hover: linear-gradient(180deg, var(--ocean-400) 0%, var(--ocean-500) 100%);
    --btn-shadow: 0 16px 34px rgba(0, 0, 0, 0.28);
    --ghost-bg: rgba(255, 255, 255, 0.06);
    --ghost-border: rgba(102, 222, 255, 0.12);
    --input-bg: hsl(193 50% 8%);
    --input-border: rgba(102, 222, 255, 0.1);
    --input-focus: rgba(51, 211, 255, 0.5);
    --document-shadow: 0 20px 52px rgba(0, 0, 0, 0.28);
  }
}

/* ---------- DARK MODE via class (set by JS from parent CRM) ---------- */
html[data-theme="docuseal"].surety-dark {
  color-scheme: dark;
  --p: 193 100% 50%;
  --pf: 193 100% 44%;
  --pc: 0 0% 10%;
  --s: 193 60% 18%;
  --sf: 193 60% 14%;
  --sc: 193 80% 70%;
  --a: 45 95% 55%;
  --af: 45 95% 49%;
  --ac: 0 0% 10%;
  --n: 193 40% 13%;
  --nf: 193 40% 10%;
  --nc: 0 0% 95%;
  --b1: 193 50% 8%;
  --b2: 193 40% 11%;
  --b3: 193 36% 16%;
  --bc: 0 0% 95%;
  --page-bg:
    radial-gradient(circle at top left, rgba(255, 215, 0, 0.06), transparent 26%),
    linear-gradient(180deg, hsl(193 50% 5%) 0%, hsl(193 50% 8%) 30%, hsl(193 40% 11%) 100%);
  --surface-bg: hsl(193 40% 11% / 0.94);
  --surface-border: rgba(0, 160, 204, 0.16);
  --surface-shadow: 0 24px 60px rgba(0, 0, 0, 0.34);
  --header-bg: linear-gradient(90deg, hsl(193 100% 15%) 0%, hsl(193 100% 22%) 55%, hsl(193 100% 35% / 0.82) 100%);
  --header-panel-bg: hsl(193 60% 12% / 0.96);
  --header-btn-bg: rgba(255, 255, 255, 0.1);
  --header-btn-hover: rgba(255, 255, 255, 0.18);
  --text-main: hsl(0 0% 95%);
  --text-muted: hsl(193 40% 72%);
  --text-subtle: hsl(193 30% 62%);
  --link-color: var(--ocean-300);
  --link-hover: var(--gold-400);
  --btn-gradient: linear-gradient(180deg, var(--ocean-500) 0%, var(--ocean-600) 100%);
  --btn-gradient-hover: linear-gradient(180deg, var(--ocean-400) 0%, var(--ocean-500) 100%);
  --btn-shadow: 0 16px 34px rgba(0, 0, 0, 0.28);
  --ghost-bg: rgba(255, 255, 255, 0.06);
  --ghost-border: rgba(102, 222, 255, 0.12);
  --input-bg: hsl(193 50% 8%);
  --input-border: rgba(102, 222, 255, 0.1);
  --input-focus: rgba(51, 211, 255, 0.5);
  --document-shadow: 0 20px 52px rgba(0, 0, 0, 0.28);
}

/* ---------- BASE LAYOUT ---------- */
html[data-theme="docuseal"],
html[data-theme="docuseal"] body {
  min-height: 100%;
  background: var(--page-bg) !important;
  background-attachment: fixed;
  color: var(--text-main);
}

html[data-theme="docuseal"] body,
html[data-theme="docuseal"] button,
html[data-theme="docuseal"] input,
html[data-theme="docuseal"] select,
html[data-theme="docuseal"] textarea {
  font-family: var(--font-sans);
}

html[data-theme="docuseal"] a {
  color: var(--link-color);
}

html[data-theme="docuseal"] a:hover {
  color: var(--link-hover);
}

/* ---------- BUTTONS ---------- */
html[data-theme="docuseal"] .btn,
html[data-theme="docuseal"] .base-button,
html[data-theme="docuseal"] .btn-neutral {
  border: 0 !important;
  color: #fff !important;
  background: var(--btn-gradient) !important;
  box-shadow: var(--btn-shadow);
  transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease;
  text-transform: none;
}

html[data-theme="docuseal"] .btn:hover,
html[data-theme="docuseal"] .base-button:hover,
html[data-theme="docuseal"] .btn-neutral:hover {
  background: var(--btn-gradient-hover) !important;
  transform: translateY(-1px);
}

html[data-theme="docuseal"] .white-button,
html[data-theme="docuseal"] .btn-outline {
  border: 1px solid var(--ghost-border) !important;
  color: var(--text-main) !important;
  background: var(--ghost-bg) !important;
  box-shadow: 0 10px 24px rgba(0, 80, 102, 0.08);
}

html[data-theme="docuseal"] .white-button:hover,
html[data-theme="docuseal"] .btn-outline:hover {
  background: var(--surface-bg) !important;
}

/* ---------- INPUTS ---------- */
html[data-theme="docuseal"] .input,
html[data-theme="docuseal"] .textarea,
html[data-theme="docuseal"] .select,
html[data-theme="docuseal"] .base-input,
html[data-theme="docuseal"] .base-textarea {
  border-color: var(--input-border) !important;
  background: var(--input-bg) !important;
  color: var(--text-main) !important;
}

html[data-theme="docuseal"] .input:focus,
html[data-theme="docuseal"] .textarea:focus,
html[data-theme="docuseal"] .select:focus,
html[data-theme="docuseal"] .base-input:focus,
html[data-theme="docuseal"] .base-textarea:focus {
  outline: 2px solid var(--input-focus);
  outline-offset: 1px;
  border-color: var(--input-focus) !important;
}

/* ---------- SURFACES ---------- */
html[data-theme="docuseal"] #signing_form_header,
html[data-theme="docuseal"] .form-container,
html[data-theme="docuseal"] .completed-form,
html[data-theme="docuseal"] .alert,
html[data-theme="docuseal"] .bg-base-100,
html[data-theme="docuseal"] .bg-base-200,
html[data-theme="docuseal"] .modal-box,
html[data-theme="docuseal"] .dropdown-content,
html[data-theme="docuseal"] .menu,
html[data-theme="docuseal"] .card {
  background-color: var(--surface-bg) !important;
  backdrop-filter: blur(10px);
  border-color: var(--surface-border) !important;
  box-shadow: var(--surface-shadow);
}

html[data-theme="docuseal"] #signing_form_header {
  background: var(--header-panel-bg) !important;
  color: #fff;
  border: 1px solid var(--surface-border);
  border-radius: 1.5rem 1.5rem 0 0;
  box-shadow: var(--surface-shadow);
}

html[data-theme="docuseal"] #signing_form_header .btn {
  background: var(--header-btn-bg) !important;
  color: #fff !important;
  box-shadow: none;
}

html[data-theme="docuseal"] #signing_form_header .btn:hover {
  background: var(--header-btn-hover) !important;
}

html[data-theme="docuseal"] .form-container {
  border-radius: 1.5rem 1.5rem 0 0;
}

html[data-theme="docuseal"] page-container,
html[data-theme="docuseal"] .shadow-md {
  border-radius: 1.25rem;
  overflow: hidden;
  box-shadow: var(--document-shadow);
}

/* ---------- TEXT ---------- */
html[data-theme="docuseal"] .field-name-label,
html[data-theme="docuseal"] .label,
html[data-theme="docuseal"] .text-base-content,
html[data-theme="docuseal"] .text-2xl,
html[data-theme="docuseal"] .text-xl {
  color: var(--text-main) !important;
}

html[data-theme="docuseal"] .field-description-text,
html[data-theme="docuseal"] .text-base-content\/70,
html[data-theme="docuseal"] .text-neutral-500,
html[data-theme="docuseal"] .text-gray-500,
html[data-theme="docuseal"] .text-gray-600 {
  color: var(--text-muted) !important;
}

html[data-theme="docuseal"] #form_completed > .text-center.mt-4 {
  display: none !important;
}

/* ---------- BRANDING ---------- */
html[data-theme="docuseal"] .surety-powered-by {
  color: var(--text-muted);
  font-size: 0.95rem;
}

html[data-theme="docuseal"] .surety-brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 0.875rem;
  color: inherit;
  text-decoration: none !important;
}

html[data-theme="docuseal"] .surety-brand-logo {
  display: block;
  object-fit: contain;
}

html[data-theme="docuseal"] .surety-brand-copy {
  display: flex;
  flex-direction: column;
  line-height: 1.02;
  font-family: var(--font-sans);
}

html[data-theme="docuseal"] .surety-brand-copy strong {
  font-family: var(--font-sans);
  font-size: clamp(1.22rem, 2vw, 1.8rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  color: inherit;
}

html[data-theme="docuseal"] .surety-brand-copy span {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

html[data-theme="docuseal"] .surety-brand-on-dark {
  position: relative;
  width: 100%;
  padding: 1rem 1.25rem 0.75rem;
  border-radius: 1.5rem 1.5rem 0 0;
  background: var(--header-bg) !important;
  box-shadow: var(--surface-shadow);
}

html[data-theme="docuseal"] .surety-brand-on-dark .surety-brand-copy,
html[data-theme="docuseal"] .surety-brand-on-dark .surety-brand-copy span {
  color: rgba(255, 255, 255, 0.86);
}

html[data-theme="docuseal"] .surety-brand-on-dark .surety-brand-copy strong {
  color: #fff;
}

html[data-theme="docuseal"] .surety-policy-links a,
html[data-theme="docuseal"] .text-center.md\:text-neutral-500 a {
  color: var(--link-color);
  text-decoration: none;
}

html[data-theme="docuseal"] .surety-policy-links a:hover,
html[data-theme="docuseal"] .text-center.md\:text-neutral-500 a:hover {
  color: var(--gold-500);
}

html[data-theme="docuseal"] .badge,
html[data-theme="docuseal"] .toggle {
  border-color: var(--surface-border);
}

html[data-theme="docuseal"] .surety-auth-shell {
  min-height: calc(100vh - 8rem);
  display: flex;
  align-items: center;
}

html[data-theme="docuseal"] .surety-auth-card {
  width: 100%;
  padding: 2rem;
  border: 1px solid var(--surface-border);
  border-radius: 1.75rem;
  background: var(--surface-bg) !important;
  box-shadow: var(--surface-shadow);
  backdrop-filter: blur(10px);
}

html[data-theme="docuseal"] .surety-hero-lockup .surety-brand-copy strong {
  font-size: clamp(2rem, 5vw, 3rem);
}

html[data-theme="docuseal"] .surety-hero-lockup .surety-brand-copy span {
  font-size: 0.95rem;
  letter-spacing: 0.24em;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 768px) {
  html[data-theme="docuseal"] #signing_form_header,
  html[data-theme="docuseal"] .surety-brand-on-dark {
    border-radius: 1rem 1rem 0 0;
  }

  html[data-theme="docuseal"] .form-container {
    border-radius: 1rem 1rem 0 0;
  }

  html[data-theme="docuseal"] .surety-brand-copy span {
    font-size: 0.72rem;
    letter-spacing: 0.16em;
  }

  html[data-theme="docuseal"] .surety-auth-card {
    padding: 1.25rem;
    border-radius: 1.25rem;
  }
}