/* OLW theme override for OpenSign — forces dark mode and remaps daisyUI tokens to OLW palette.
   Mounted over the client; survives restarts/upgrades as long as daisyUI var names persist. */

/* Remap daisyUI base tokens to OLW colors (oklch, matching OpenSign's compiled format) */
:root, [data-theme="opensigndark"] {
  --b1: 12.2919% 0.010757 271.392;   /* #05060a page bg */
  --b2: 20.7682% 0.039824 265.755;   /* #0f172a card surface */
  --b3: 27.9495% 0.036848 260.031;   /* #1e293b elevated/hover */
  --bc: 92.8761% 0.012619 255.508;   /* #e2e8f0 body text */
  --p:  75.3513% 0.138989 232.661;   /* #38bdf8 primary blue */
  --pc: 12.2919% 0.010757 271.392;   /* dark text on blue buttons */
  --n:  27.9495% 0.036848 260.031;   /* neutral surface */
  --nc: 92.8761% 0.012619 255.508;   /* neutral content text */
  --a:  75.3513% 0.138989 232.661;   /* accent = primary blue */
  --ac: 12.2919% 0.010757 271.392;
  --s:  20.7682% 0.039824 265.755;   /* secondary = card surface */
  --sc: 92.8761% 0.012619 255.508;
}

/* Body background must follow the theme (OpenSign hardcodes white in index.css) */
body {
  background-color: var(--fallback-b1, oklch(var(--b1))) !important;
}

/* Page-level surfaces that OpenSign sets to light grey/white explicitly */
[data-theme="opensigndark"] .bg-base-100,
[data-theme="opensigndark"] body {
  background-color: var(--fallback-b1, oklch(var(--b1))) !important;
}

/* Ensure text on dark surfaces is light */
[data-theme="opensigndark"] {
  color: var(--fallback-bc, oklch(var(--bc)));
}





/* === Center the sign/login card (GuestLogin + Login pages) === */

/* Make the outer page card a centered flex column so logo, heading and form
   all stack and center. Cap width so it doesn't stretch edge-to-edge. */
[data-theme="opensigndark"] .op-card.bg-base-100.shadow-md:not(.outline) {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  max-width: 440px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* The welcome/form columns were 50% width for side-by-side on wide screens.
   Force them full width of the (now narrow) card so they stack and center. */
[data-theme="opensigndark"] .op-card.bg-base-100.shadow-md:not(.outline) > div {
  width: 100% !important;
}

/* Center the logo block */
[data-theme="opensigndark"] .op-card.bg-base-100.shadow-md:not(.outline) img {
  margin-left: auto;
  margin-right: auto;
}

/* Center heading + subtext */
[data-theme="opensigndark"] .op-card.bg-base-100.shadow-md:not(.outline) h1,
[data-theme="opensigndark"] .op-card.bg-base-100.shadow-md:not(.outline) legend {
  text-align: center !important;
}

/* Center the inner form box */
[data-theme="opensigndark"] .op-card.bg-base-100.shadow-md:not(.outline) .op-card {
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 400px !important;
  width: 100% !important;
}

/* Center the primary button */
[data-theme="opensigndark"] .op-card.bg-base-100.shadow-md:not(.outline) .op-btn.op-btn-primary {
  display: inline-flex !important;
  margin-left: auto !important;
  margin-right: auto !important;
}


/* Tighten the signing card's internal padding so the form isn't floating in space */
[data-theme="opensigndark"] .op-card.bg-base-100.shadow-md:not(.outline) {
  padding: 32px 28px !important;
}


/* ===== OLW: subtle matrix animation as a full-bleed background on the login page ===== */
/* Hide the stock OpenSign desk illustration on the main login page */
#root .place-self-center img[src*="login_img"],
#root .place-self-center img[alt*="four-monitor"] {
  display: none !important;
}

/* The matrix canvas fills the whole login card, sitting BEHIND the form (z-index 0).
   It's a persistent background so it never disappears on resize. */
#olw-matrix-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  z-index: 0;
}

/* Make the login card a positioning context that clips the canvas to its bounds */
#olw-matrix-host {
  position: relative !important;
  overflow: hidden !important;
}


/* ===== OLW: keep login card at a fixed, centered width (stable aspect ratio) ===== */
/* The main login card is .op-card.bg-base-100 WITHOUT shadow-md (signing page has shadow-md).
   Cap its width and center it so the form doesn't stretch with the viewport. */
[data-theme="opensigndark"] .pb-1.md\:pb-4 > .op-card.bg-base-100:not(.shadow-md) {
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
}

/* Cap the inner form box so fields keep a comfortable width even on wide screens */
[data-theme="opensigndark"] .op-card.bg-base-100:not(.shadow-md) .op-card.bg-base-100.shadow-md {
  max-width: 420px;
}


/* ===== OLW: keep login button from stretching when the card is narrow ===== */
[data-theme="opensigndark"] .op-card.bg-base-100:not(.shadow-md) .op-btn.op-btn-primary {
  width: auto !important;
  max-width: 260px;
}


/* ===== OLW: center the login card's content (logo, heading, form, button) ===== */
[data-theme="opensigndark"] #olw-matrix-host {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  min-height: 560px;
}

/* Center the logo block (it's inline-block, which ignores flex centering) */
[data-theme="opensigndark"] #olw-matrix-host > .inline-block {
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Center the two-column grid (form | illustration) — collapse to a centered single column */
[data-theme="opensigndark"] #olw-matrix-host .grid.md\:grid-cols-2 {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
}

/* Center the heading + subtext */
[data-theme="opensigndark"] #olw-matrix-host h1,
[data-theme="opensigndark"] #olw-matrix-host legend {
  text-align: center !important;
}

/* Center the inner form box */
[data-theme="opensigndark"] #olw-matrix-host .op-card.bg-base-100.shadow-md {
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 420px !important;
  width: 100% !important;
}

/* Center the login button within the form box */
[data-theme="opensigndark"] #olw-matrix-host .op-btn.op-btn-primary {
  display: inline-flex !important;
  margin-left: auto !important;
  margin-right: auto !important;
}


/* ===== OLW: center the owl image inside its (wide) logo container ===== */
[data-theme="opensigndark"] #olw-matrix-host .inline-block {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}
[data-theme="opensigndark"] #olw-matrix-host .inline-block img {
  margin-left: auto !important;
  margin-right: auto !important;
}


/* ===== OLW: force-center the owl image (object-contain leaves it at the box's left) ===== */
[data-theme="opensigndark"] #olw-matrix-host .inline-block > img {
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
}


/* ===== OLW: make the navy page background fill the full viewport (no black strip below) ===== */
[data-theme="opensigndark"] #root > .bg-base-200 {
  min-height: 100vh;
}


/* ===== OLW: fix low-contrast signer names in the PDF "Yet to sign" panel ===== */
/* SignerListComponent renders name/email text inheriting a near-black color on the dark theme.
   Force light text on the signer rows so they're readable. */
[data-theme="opensigndark"] .rounded-xl.mx-1.flex.flex-row > div:last-child,
[data-theme="opensigndark"] .rounded-xl.mx-1.flex.flex-row > div:last-child span {
  color: #ffffff !important;
}
[data-theme="opensigndark"] .rounded-xl.mx-1.flex.flex-row > div:last-child span {
  font-weight: 700 !important;
}
/* The avatar initial is hardcoded text-black on a colored circle — keep it dark (it sits on a light block) */


/* ===== OLW: lighten the modal backdrop dimming so the "Yet to sign" panel stays legible ===== */
/* The consent/disclosure modal uses a 40% black backdrop that crushes the signer list behind it.
   Soften it to ~25% — the modal's own box has a solid bg so its text is unaffected. */
[data-theme="opensigndark"] .op-modal.op-modal-open {
  background-color: rgba(0, 0, 0, 0.25) !important;
}