/*
 * Abtalona look for DocuSeal's signing pages, so the form embedded in the
 * business portal reads as part of the portal rather than DocuSeal's own
 * purple/beige theme. Served from DocuSeal's public/ (mounted by compose.yaml)
 * and linked into every HTML page by abtalona_embed.rb.
 *
 * DocuSeal is built on daisyUI, which reads its palette from HSL triplets
 * (--p primary, --n neutral, --b1..3 base, --bc base content...). The values
 * below are the portal's OKLCH tokens (packages/ui globals.css) in HSL.
 * `html[data-theme]` outranks DocuSeal's own `[data-theme=docuseal]`.
 * The "Powered by DocuSeal" attribution in the footer stays visible (toned
 * down, not hidden): DocuSeal's licence (LICENSE_ADDITIONAL_TERMS, AGPL 7(b))
 * requires it. Only the big header logo (a link to "/") is hidden.
 */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');

html[data-theme] {
  --p: 201 98% 36%;
  --pf: 201 98% 30%;
  --pc: 183 100% 96%;
  --s: 205 100% 92%;
  --sc: 201 98% 30%;
  --a: 205 100% 92%;
  --ac: 201 98% 30%;
  --n: 201 98% 36%;
  --nf: 201 98% 30%;
  --nc: 0 0% 100%;
  --b1: 0 0% 100%;
  --b2: 180 7% 95%;
  --b3: 192 11% 90%;
  --bc: 200 14% 4%;
  --er: 357 100% 45%;
  --rounded-box: 0.875rem;
  --rounded-btn: 9999px;
  --rounded-badge: 9999px;
  --border-btn: 1px;
  --tab-radius: 0.625rem;
  color-scheme: light;
}

html[data-theme].abtalona-dark {
  --p: 202 84% 40%;
  --pf: 202 84% 46%;
  --pc: 183 100% 96%;
  --s: 206 47% 18%;
  --sc: 205 100% 92%;
  --a: 206 47% 18%;
  --ac: 205 100% 92%;
  --n: 202 84% 40%;
  --nf: 202 84% 46%;
  --nc: 0 0% 100%;
  --b1: 197 13% 10%;
  --b2: 193 12% 15%;
  --b3: 193 12% 20%;
  --bc: 180 20% 98%;
  color-scheme: dark;
}

html[data-theme],
html[data-theme] body,
html[data-theme] button,
html[data-theme] input,
html[data-theme] textarea,
html[data-theme] select {
  font-family: Manrope, 'IBM Plex Sans Arabic', ui-sans-serif, system-ui, sans-serif;
}

html[data-theme][lang|='ar'],
html[data-theme][lang|='ar'] body,
html[data-theme][lang|='ar'] button,
html[data-theme][lang|='ar'] input,
html[data-theme][lang|='ar'] textarea {
  font-family: 'IBM Plex Sans Arabic', Manrope, ui-sans-serif, system-ui, sans-serif;
}

/* The big DocuSeal logo above the form; the footer credit stays. */
html[data-theme] a[href='/'].mx-auto {
  display: none;
}

/* DocuSeal pulls its title bar to the frame edge; give it the portal's inset. */
html[data-theme] [class*='-mx-[8px]'] {
  margin-inline: 0;
  padding-inline: 12px;
}

/* Portal buttons: sentence case, bold, no shouting. */
html[data-theme] .base-button,
html[data-theme] button,
html[data-theme] .btn {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 700;
}

/* DocuSeal's step button labels are lower case ("next") and relied on
   uppercase: capitalise the first letter only ("Next", "Sign and Complete").
   ::first-letter needs a block-level box, hence the inline-block label span. */
html[data-theme] .submit-form-button > span > span {
  display: inline-block;
}

html[data-theme] .submit-form-button > span > span::first-letter {
  text-transform: uppercase;
}

html[data-theme] .btn-neutral,
html[data-theme] .btn-primary {
  color: hsl(var(--nc));
}

/* Inputs and the signature pad: the portal's soft border and focus ring. */
html[data-theme] .base-input,
html[data-theme] .input,
html[data-theme] .textarea,
html[data-theme] .select {
  border-color: hsl(var(--b3));
  border-radius: 0.625rem;
}

html[data-theme] .base-input:focus,
html[data-theme] .input:focus,
html[data-theme] .textarea:focus {
  outline: 2px solid hsl(206 50% 60% / 0.5);
  outline-offset: 1px;
}

html[data-theme] canvas {
  border-radius: 0.625rem;
}

/* The page sits inside a portal card: drop DocuSeal's own page background. */
html[data-theme] body {
  background: hsl(var(--b1));
}

/* Fields in the dark palette: DocuSeal paints inputs white. */
html[data-theme].abtalona-dark input,
html[data-theme].abtalona-dark textarea,
html[data-theme].abtalona-dark .base-input {
  background-color: hsl(var(--b2));
  color: hsl(var(--bc));
}

/* The required attribution, kept but quiet: small and muted. */
html[data-theme] a[href*='docuseal.com'] {
  color: inherit;
  font-weight: 500;
}

html[data-theme] :has(> a[href*='docuseal.com']) {
  font-size: 11px;
  opacity: 0.55;
}