/*
 * Non-destructive theme layer for the static ehd.lu export.
 * The original Next.js bundle remains untouched: this file only overrides its
 * public design tokens and common Tailwind utility classes when dark mode is on.
 */

:root {
  --ehd-theme-control-size: 2.75rem;
  --ehd-dark-canvas: #071724;
  --ehd-dark-surface: #0d2234;
  --ehd-dark-surface-raised: #132b3f;
  --ehd-dark-text: #edf6fd;
  --ehd-dark-muted: #b5c7d6;
  --ehd-dark-line: rgb(181 199 214 / 24%);
  --ehd-dark-blue: #69c7f5;
  --ehd-dark-green: #73ddb5;
}

html[data-theme="dark"] {
  color-scheme: dark;
  background: var(--ehd-dark-canvas);
}

html[data-theme="dark"] body {
  background: var(--ehd-dark-canvas) !important;
  color: var(--ehd-dark-text);
}

html[data-theme="dark"] ::selection {
  color: #04111c;
  background: #7bd3ff;
}

/* Brand foregrounds need extra luminance on the dark canvas. */
html[data-theme="dark"] [class~="text-encre"] {
  color: var(--ehd-dark-text) !important;
}

html[data-theme="dark"] [class~="text-ardoise"] {
  color: var(--ehd-dark-muted) !important;
}

html[data-theme="dark"] [class~="text-azur"] {
  color: var(--ehd-dark-blue) !important;
}

html[data-theme="dark"] [class~="text-jade"] {
  color: var(--ehd-dark-green) !important;
}

/* Light cards and pale section fills become layered navy surfaces. */
html[data-theme="dark"] [class~="bg-nacre"],
html[data-theme="dark"] [class~="bg-nacre/85"],
html[data-theme="dark"] [class~="bg-nacre/95"] {
  background-color: var(--ehd-dark-canvas) !important;
}

html[data-theme="dark"] [class~="bg-chaux/45"],
html[data-theme="dark"] [class~="bg-chaux/70"] {
  background-color: #0a1e2f !important;
}

html[data-theme="dark"] [class~="bg-white"],
html[data-theme="dark"] [class~="bg-white/60"],
html[data-theme="dark"] [class~="bg-white/70"],
html[data-theme="dark"] [class~="bg-white/75"],
html[data-theme="dark"] [class~="bg-white/80"] {
  background-color: var(--ehd-dark-surface-raised) !important;
}

html[data-theme="dark"] [class~="bg-encre/10"],
html[data-theme="dark"] [class~="bg-encre/15"] {
  background-color: rgb(105 199 245 / 10%) !important;
}

/* Preserve the intentionally dark hero/footer, with a little more separation. */
html[data-theme="dark"] [class~="bg-marine"] {
  background-color: #0a3557 !important;
}

html[data-theme="dark"] [class~="bg-encre"] {
  background-color: #04131f !important;
}

/* Tailwind emitted several alpha-specific border rules with baked-in colors. */
html[data-theme="dark"] [class~="border-encre/8"],
html[data-theme="dark"] [class~="border-encre/10"],
html[data-theme="dark"] [class~="border-encre/12"],
html[data-theme="dark"] [class~="border-encre/15"],
html[data-theme="dark"] [class~="border-encre/20"],
html[data-theme="dark"] [class~="border-encre/25"],
html[data-theme="dark"] [class~="border-encre/35"],
html[data-theme="dark"] [class~="border-chaux"] {
  border-color: var(--ehd-dark-line) !important;
}

html[data-theme="dark"] [class~="divide-encre/15"] > :not(:last-child) {
  border-color: var(--ehd-dark-line) !important;
}

html[data-theme="dark"] [class~="shadow-[0_8px_30px_-18px_rgba(12,46,78,0.35)]"],
html[data-theme="dark"] [class~="shadow-[0_20px_70px_-35px_rgba(12,46,78,0.5)]"] {
  box-shadow: 0 18px 46px -28px rgb(0 0 0 / 85%) !important;
}

/* Quote configurator controls use a dedicated light-field class. */
html[data-theme="dark"] .champ-clair {
  color: var(--ehd-dark-text) !important;
  background: var(--ehd-dark-surface) !important;
  border-color: var(--ehd-dark-line) !important;
}

html[data-theme="dark"] .champ-clair::placeholder {
  color: #91a8ba !important;
}

html[data-theme="dark"] .champ-clair:hover,
html[data-theme="dark"] .champ-clair:focus {
  border-color: rgb(105 199 245 / 72%) !important;
}

html[data-theme="dark"] input[type="date"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  color-scheme: dark;
}

html[data-theme="dark"] .champ option,
html[data-theme="dark"] .champ-clair option {
  color: var(--ehd-dark-text) !important;
  background: var(--ehd-dark-surface) !important;
}

/* The button is independent from the React tree and remains usable everywhere. */
header > div:first-child {
  padding-right: max(5rem, calc(env(safe-area-inset-right) + 4.25rem)) !important;
}

#ehd-theme-toggle {
  position: fixed;
  z-index: 2147483000;
  top: max(0.7rem, env(safe-area-inset-top));
  right: max(0.7rem, env(safe-area-inset-right));
  display: inline-grid;
  width: var(--ehd-theme-control-size);
  height: var(--ehd-theme-control-size);
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  place-items: center;
  border: 1px solid rgb(244 247 250 / 42%);
  border-radius: 999px;
  color: #f4f7fa;
  background: rgb(6 26 44 / 76%);
  box-shadow: 0 10px 28px -16px rgb(0 0 0 / 80%);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  cursor: pointer;
  font: 700 1.15rem/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  transition: transform 160ms ease, border-color 160ms ease, background-color 160ms ease;
  touch-action: manipulation;
}

#ehd-theme-toggle:hover {
  border-color: #7bd3ff;
  background: rgb(15 72 113 / 94%);
  transform: translateY(-1px);
}

#ehd-theme-toggle:active {
  transform: translateY(0) scale(0.96);
}

#ehd-theme-toggle:focus-visible {
  outline: 3px solid #7bd3ff;
  outline-offset: 3px;
}

html[data-theme="light"] #ehd-theme-toggle {
  color: #08233a;
  background: rgb(244 247 250 / 92%);
  border-color: rgb(12 46 78 / 24%);
}

html[data-theme="light"] #ehd-theme-toggle:hover {
  background: #fff;
  border-color: #0f6fc0;
}

/* Signed quotes: the exact PDF is presented before the drawing surface. */
.ehd-signature-document {
  margin-bottom: 1.5rem;
  padding: 1rem;
  border: 1px solid rgb(12 46 78 / 18%);
  border-radius: 1rem;
  background: rgb(244 247 250 / 78%);
}

.ehd-signature-document-title {
  margin: 0 0 0.85rem;
  color: #0c2e4e;
  font: 800 clamp(1.05rem, 3vw, 1.3rem)/1.25 Manrope, Inter, system-ui, sans-serif;
  letter-spacing: -0.02em;
}

.ehd-signature-document-status,
.ehd-signature-document-error {
  margin: 0;
  line-height: 1.55;
}

.ehd-signature-document-error {
  padding: 0.85rem 1rem;
  border: 1px solid rgb(185 28 28 / 30%);
  border-radius: 0.75rem;
  color: #8a1717;
  background: #fff0f0;
  font-weight: 650;
}

.ehd-signature-pdf-viewer {
  display: block;
  width: 100%;
  height: clamp(28rem, 68vh, 48rem);
  overflow: hidden;
  border: 1px solid rgb(12 46 78 / 22%);
  border-radius: 0.75rem;
  background: #fff;
}

.ehd-signature-pdf-open {
  display: inline-flex;
  min-height: 44px;
  margin-top: 0.9rem;
  padding: 0.7rem 1rem;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: #fff;
  background: #0f6fc0;
  font-weight: 750;
  text-decoration: none;
}

.ehd-signature-pdf-open:hover {
  background: #0b5d9f;
}

.ehd-signature-pdf-open:focus-visible {
  outline: 3px solid #35aaea;
  outline-offset: 3px;
}

.ehd-signature-pdf-retry,
.ehd-signature-use-name {
  display: inline-flex;
  min-height: 44px;
  margin-top: 0.85rem;
  padding: 0.65rem 1rem;
  align-items: center;
  justify-content: center;
  border: 1px solid rgb(15 111 192 / 42%);
  border-radius: 999px;
  color: #0c5e9d;
  background: #fff;
  cursor: pointer;
  font: 700 0.92rem/1.25 Manrope, Inter, system-ui, sans-serif;
}

.ehd-signature-pdf-retry:hover,
.ehd-signature-use-name:hover {
  border-color: #0f6fc0;
  background: rgb(15 111 192 / 7%);
}

.ehd-signature-pdf-retry:focus-visible,
.ehd-signature-use-name:focus-visible {
  outline: 3px solid #35aaea;
  outline-offset: 3px;
}

.ehd-signature-use-name {
  margin: 0 0 0.4rem;
}

.ehd-signature-use-name-hint {
  display: block;
  margin-bottom: 0.8rem;
  color: #526c7e;
  font-size: 0.82rem;
  line-height: 1.45;
}

.ehd-signature-consent {
  display: flex;
  min-height: 44px;
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  gap: 0.75rem;
  align-items: flex-start;
  border: 1px solid rgb(11 107 71 / 28%);
  border-radius: 0.8rem;
  color: #0c2e4e;
  background: rgb(11 107 71 / 8%);
  cursor: pointer;
  font-weight: 650;
  line-height: 1.45;
}

.ehd-signature-consent input {
  width: 1.3rem;
  height: 1.3rem;
  margin: 0.05rem 0 0;
  flex: 0 0 auto;
  accent-color: #0b6b47;
}

.ehd-signature-canvas-instruction {
  margin: 0 0 0.75rem;
  padding: 0.75rem 0.9rem;
  border-left: 3px solid #0f6fc0;
  color: #334f64;
  background: rgb(15 111 192 / 7%);
  line-height: 1.5;
}

html[data-theme="dark"] .ehd-signature-document {
  border-color: var(--ehd-dark-line);
  background: var(--ehd-dark-surface);
}

html[data-theme="dark"] .ehd-signature-document-title,
html[data-theme="dark"] .ehd-signature-consent {
  color: var(--ehd-dark-text);
}

html[data-theme="dark"] .ehd-signature-document-error {
  border-color: rgb(252 165 165 / 45%);
  color: #fecaca;
  background: rgb(127 29 29 / 24%);
}

html[data-theme="dark"] .ehd-signature-consent {
  border-color: rgb(115 221 181 / 35%);
  background: rgb(115 221 181 / 9%);
}

html[data-theme="dark"] .ehd-signature-canvas-instruction {
  color: var(--ehd-dark-muted);
  background: rgb(105 199 245 / 8%);
}

html[data-theme="dark"] .ehd-signature-pdf-retry,
html[data-theme="dark"] .ehd-signature-use-name {
  color: var(--ehd-dark-blue);
  background: var(--ehd-dark-surface-raised);
  border-color: rgb(105 199 245 / 42%);
}

html[data-theme="dark"] .ehd-signature-use-name-hint {
  color: var(--ehd-dark-muted);
}

@media (max-width: 639px) {
  header > div:first-child {
    padding-right: max(4.75rem, calc(env(safe-area-inset-right) + 4.25rem)) !important;
  }

  /* Sur mobile, le sélecteur de langue occupe déjà le coin supérieur droit. */
  #ehd-theme-toggle {
    top: calc(env(safe-area-inset-top) + 4.25rem);
  }

  .ehd-signature-document {
    padding: 0.75rem;
  }

  .ehd-signature-pdf-viewer {
    height: max(26rem, 62vh);
  }
}

@media (prefers-reduced-motion: reduce) {
  #ehd-theme-toggle {
    transition: none;
  }
}

@media print {
  #ehd-theme-toggle {
    display: none !important;
  }
}