/* ─────────────────────────────────────────────────────────────────────
   Trustivum white-label overrides for OpenSign
   ─────────────────────────────────────────────────────────────────────
   These rules layer on top of OpenSign's compiled CSS. They re-skin the
   surfaces a recipient would see during the signing flow:

   - Top header / brand area
   - Primary action buttons (Sign, Approve, Send)
   - Page background & cards
   - Outbound links / accents

   We can't fully restyle every deeply-nested OpenSign component without
   forking, but we can hit the high-traffic surfaces. Anything missed
   gets caught when we audit the signing flow with a real test SOW.
   ───────────────────────────────────────────────────────────────────── */

:root {
  /* Trustivum brand palette — match www.trustivum.com */
  --trv-navy: #05091a;
  --trv-navy-2: #0a1020;
  --trv-blue: #2563eb;
  --trv-blue-lt: #60a5fa;
  --trv-emerald: #34d399;
  --trv-gold: #c9a86a;
  --trv-text: #1f2937;
  --trv-mute: #6b7280;
  --trv-border: #e5e7eb;
  --trv-bg: #f6f7fb;
}

/* Base typography → align with the Trustivum stack */
body, .opensigncss, [data-theme="opensigncss"] {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
h1, h2, h3, h4, h5,
.heading, .title {
  font-family: 'Space Grotesk', 'Inter', sans-serif !important;
}

/* Replace the OpenSign top header background with Trustivum navy. The
   exact selector OpenSign uses isn't documented; these cover the common
   header containers OpenSign emits. */
header, .header, .navbar, .top-bar, .app-header, [class*="header"][class*="bar"] {
  background-color: var(--trv-navy) !important;
  border-bottom: 1px solid #1c2640 !important;
}
header a, header a:hover,
.navbar a, .navbar a:hover,
.app-header a, .app-header a:hover {
  color: #f0f4ff !important;
}

/* Primary action buttons — Sign, Send for Signature, etc. OpenSign uses
   Bootstrap btn-primary in places + a custom op-primary class in others.
   Hit both. */
.btn-primary,
.op-primary,
button.bg-primary,
button.bg-blue-500,
button.bg-blue-600,
button.bg-\\[var\\(--primary\\)\\],
.bg-primary,
[class*="primary"][class*="btn"] {
  background-color: var(--trv-blue) !important;
  border-color: var(--trv-blue) !important;
  color: white !important;
}
.btn-primary:hover, .op-primary:hover, button.bg-primary:hover {
  background-color: #1d4ed8 !important;
  border-color: #1d4ed8 !important;
}

/* Bootstrap link/text-primary → Trustivum blue */
.text-primary, a.text-primary { color: var(--trv-blue) !important; }
a:not(.btn) { color: var(--trv-blue); }
a:not(.btn):hover { color: var(--trv-navy); }

/* OpenSign uses --primary in their CSS variables. Override at root. */
:root, html, body, [data-theme] {
  --primary: var(--trv-navy) !important;
  --bs-primary: var(--trv-blue) !important;
  --color-primary: var(--trv-blue) !important;
}

/* Page background — softer Trustivum off-white for the recipient view */
body, .signing-page, .recipient-sign, [class*="bg-gray-50"], [class*="bg-gray-100"] {
  background-color: var(--trv-bg) !important;
}

/* Cards / containers — subtle Trustivum border */
.card, .panel, .op-card,
[class*="bg-white"][class*="rounded"], [class*="shadow-md"][class*="rounded"] {
  border: 1px solid var(--trv-border) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

/* Hide all "Powered by OpenSign" / brand callouts. We don't know every
   selector, but these patterns catch the typical mounting points. */
[class*="powered-by"],
[class*="poweredBy"],
[class*="opensign-credit"],
[id*="opensign-credit"],
.footer-credit,
.brand-credit {
  display: none !important;
}

/* Email-template-style banners that say "Trustivum Sign" in the React
   client also — give them the navy + emerald wordmark style. */
.brand-wordmark, .app-name {
  font-family: 'Space Grotesk', sans-serif !important;
  color: var(--trv-navy) !important;
}
.brand-wordmark .accent, .app-name .accent {
  color: var(--trv-emerald) !important;
}

/* Loader — page initially shows "...Loading". Make it Trustivum-looking. */
.loader, .spinner-border, [class*="loader"] {
  border-color: var(--trv-border) !important;
  border-top-color: var(--trv-blue) !important;
}

/* Signature drop-zones — subtle blue dashed border on hover/active */
.sig-placeholder, [class*="signature-field"], [class*="placeholder"][class*="sign"] {
  border-color: var(--trv-blue-lt) !important;
}
.sig-placeholder.active, [class*="signature-field"].active {
  background-color: rgba(37, 99, 235, 0.06) !important;
}

/* Footer */
.footer, footer {
  background-color: white !important;
  border-top: 1px solid var(--trv-border) !important;
  color: var(--trv-mute) !important;
  font-size: 12.5px !important;
}

/* Links inside content area — Trustivum blue */
.content a, main a { color: var(--trv-blue); }
.content a:hover, main a:hover { color: var(--trv-navy); }