/* Keyring brand overlay for DocuSeal (DaisyUI v4). Loaded LAST so its :root
   triplet overrides win the cascade. Pure restyle: NO markup, product_name, or
   §7(b)/§13 attribution change. Bump ?v= (and the patch literal) on every edit —
   this is a static, year-cached file, not a hashed pack. */

/* ---- Brand webfonts (self-hosted; CSP font-src 'self' permits these) ---- */
@font-face {
  font-family: "Robin Pro";
  src:
    url("/brand-fonts/robin-regular-pro.woff2") format("woff2"),
    url("/brand-fonts/robin-regular-pro.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Robin Pro";
  src:
    url("/brand-fonts/robin-bold-pro.woff2") format("woff2"),
    url("/brand-fonts/robin-bold-pro.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans Condensed";
  src: url("/brand-fonts/ibm-plex-sans-condensed-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---- DaisyUI v4 :root theme triplets (H S% L%, no hsl() wrapper) ---- */
:root {
  /* Cream surfaces */
  --b1: 40 33% 94%; /* base    #f4f1ea */
  --b2: 40 23% 90%; /* base-200 #ebe7de */
  --b3: 40 23% 86%; /* base-300 #e5e0d5 */
  --bc: 27 24% 8%; /* base-content = ink */

  /* Ink neutral */
  --n: 27 24% 8%;
  --nf: 27 24% 5%;
  --nc: 40 33% 94%; /* neutral-content = cream */

  /* Primary = INK (the default/safe action — NOT amber; keeps amber rationed) */
  --p: 27 24% 8%;
  --pf: 0 0% 2%;
  --pc: 40 33% 94%; /* cream text on ink */

  /* Accent = AMBER (the single rationed CTA color) */
  --a: 36 94% 56%; /* #f8a028 */
  --af: 36 94% 48%;
  --ac: 27 24% 8%; /* ink text on amber */

  /* Secondary = BLUE (interactive / secondary actions) */
  --s: 217 75% 53%; /* #2c6fe0 */
  --sf: 217 75% 45%;
  --sc: 0 0% 100%; /* white text on blue */

  /* Info = blue, Success = mint signal, Warning = amber (rare), Error = coral signal */
  --in: 217 75% 53%;
  --inc: 0 0% 100%;
  --su: 160 82% 65%; /* signal-pos mint #5fefc0 */
  --suc: 40 33% 94%;
  --wa: 36 94% 56%;
  --wac: 27 24% 8%;
  --er: 4 82% 62%; /* signal-neg coral #ee5b50 */
  --erc: 40 33% 94%;

  /* Flat: zero every DaisyUI radius + kill the focus scale animation */
  --rounded-box: 0;
  --rounded-btn: 0;
  --rounded-badge: 0;
  --tab-radius: 0;
  --tab-border: 2px;
  --border-btn: 1px;
  --btn-text-case: uppercase; /* uppercase CTAs, matching Atrium labels */
  --btn-focus-scale: 1;

  color-scheme: light;

  /* Body = mono (the DS canonical reading face); headings = Robin; labels/CTAs = IBM Plex Sans Condensed. */
  --keyring-font-body: ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;
  --keyring-font-label: "IBM Plex Sans Condensed", "Arial Narrow", Arial, sans-serif;
  --keyring-font-display: "Robin Pro", "Helvetica Neue", Arial, sans-serif;
}

/* ---- Flat hardening + typography the variables can't reach ---- */
html,
body,
[data-theme] {
  font-family: var(--keyring-font-body);
}
h1,
h2,
h3,
.text-2xl,
.text-3xl,
.text-4xl {
  font-family: var(--keyring-font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
}
/* DaisyUI keeps --btn-text-case:uppercase; pair with the IBM Plex Sans Condensed
   label face + tracking so amber/ink buttons read as brand CTAs (matches Atrium). */
/* ALL buttons / "boxes" are UPPERCASE condensed labels (DS). Covers DaisyUI .btn,
   DocuSeal's custom .base-button / .white-button, segmented .join controls and tabs
   — even where the markup tags them .normal-case (e.g. the preferences
   "General / API and Embedding" toggle, the "UPDATE" base-button). */
.btn,
.base-button,
.white-button,
.join .btn,
.tabs .tab,
.tab {
  font-family: var(--keyring-font-label) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em;
}
/* No rounding/elevation anywhere. DaisyUI + raw Tailwind rounded and shadow utils
   in the compiled (uneditable) markup need the blunt instrument. */
*,
*::before,
*::after {
  box-shadow: none !important;
  border-radius: 0 !important;
}
/* Tailwind also ships !important rounded utilities (e.g. .!rounded-lg,
   .!rounded-s-full) whose CLASS specificity (0,1,0) beats the universal reset
   above even though both are !important. Match their specificity with an attribute
   selector and load later so flat always wins — covers rounded-*, !rounded-*, and
   the DaisyUI rounded-box/btn/badge classes. */
[class*="rounded"],
[class*="rounded"]::before,
[class*="rounded"]::after {
  border-radius: 0 !important;
}
/* Focus = a solid BLUE outline (the DS focus colour), not DaisyUI's faint ink ring.
   !important + the explicit .input/.select/.textarea :focus selectors beat DaisyUI's
   higher-specificity faint focus outline. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible,
.input:focus,
.input:focus-within,
.textarea:focus,
.select:focus,
.select:focus-within {
  outline: 2px solid hsl(var(--s)) !important;
  outline-offset: 2px;
}

/* ---- One light surface only: cream. No white, no grey, no lighter tints. ----
   The DS is strict: there is a single light surface (cream, --b1); structure comes
   from hairlines + whitespace, never from white/grey/lighter tinted panels. DocuSeal
   layers base-100/200/300 + bg-white to build cards, pills, toggles and buttons —
   collapse them all onto cream. Dark ink/terminal surfaces (--n / btn-neutral /
   tooltips / footer) are unaffected; the amber selection highlight below is more
   specific and still wins. */
.bg-white,
[class*="bg-white"],
.white-button,
.bg-base-100,
[class*="bg-base-100"],
.bg-base-200,
[class*="bg-base-200"],
.bg-base-300,
[class*="bg-base-300"] {
  background-color: hsl(var(--b1)) !important;
}

/* ---- On-brand selection highlight: a full amber accent fill ----
   Hover/selection fills the element with the brand amber and sets ink text. Covers
   the template-builder field-type buttons, the dashboard template cards (incl. their
   inner panels), and dropdown/context-menu items. Amber is the deliberate
   interaction accent. */
.field-type-button:hover,
.field-type-button:focus-visible,
.field-type-button.active,
.fields-grid-item:hover,
.fields-grid-item:focus-visible {
  background-color: hsl(var(--a)) !important;
  border-color: hsl(var(--a)) !important;
  color: hsl(var(--ac)) !important;
}

/* Dropdown / context-menu items (Download, Save and Preview, Preferences, Profile,
   Verify PDF...) are actions → blue highlight with white text on hover/active. */
.menu li > *:not(ul):hover,
.menu li > *:not(ul):focus-visible,
.menu li > .active {
  background-color: hsl(var(--s)) !important;
  color: hsl(var(--sc)) !important;
}

/* Document-template cards highlight INK with cream text (inverts on dark surfaces),
   not amber — amber stays the rationed accent. Covers the card + its inner panels +
   all descendant text/icons. */
[data-targets~="dashboard-dropzone.templateCards"]:hover,
[data-targets~="dashboard-dropzone.templateCards"]:hover [class*="bg-base-"] {
  background-color: hsl(var(--bc)) !important;
  border-color: hsl(var(--bc)) !important;
}
[data-targets~="dashboard-dropzone.templateCards"]:hover,
[data-targets~="dashboard-dropzone.templateCards"]:hover * {
  color: hsl(var(--b1)) !important;
}

/* ---- Action-button hover: BLUE accent by default ----
   Every action button (DaisyUI .btn incl. btn-circle, DocuSeal .base-button /
   .white-button) fills BLUE with white text on hover/focus — the interaction accent.
   Covers Save, Copy, Upload cert, View, Archive, Event Log, Sign now, and the card
   Move/Edit/Clone/Archive icons. Deliberate exceptions are defined below. */
.btn:hover,
.btn:focus-visible,
.base-button:hover,
.base-button:focus-visible,
.white-button:hover,
.white-button:focus-visible {
  background-color: hsl(var(--s)) !important;
  border-color: hsl(var(--s)) !important;
  color: hsl(var(--sc)) !important;
}

/* ---- Toggles render as a flat checkbox: empty box / filled box ----
   The DaisyUI pill toggle (dull dark track + knob) is off-brand. Restyle the
   Test-mode (and any) toggle to a square: empty cream box with an ink hairline when
   off, solid ink box when on. !important overrides the inline pill sizing. */
.toggle {
  width: 1rem !important;
  height: 1rem !important;
  border: 1px solid hsl(var(--bc)) !important;
  background-color: hsl(var(--b1)) !important;
  box-shadow: none !important;
  --handleoffset: 0 !important;
}
.toggle:checked {
  background-color: hsl(var(--bc)) !important;
  border-color: hsl(var(--bc)) !important;
  box-shadow: none !important;
}

/* ---- Status badges: solid DS colours, never faint ----
   DocuSeal renders status badges at bg-opacity-50 (washed out); the DS uses solid
   fills. Force full opacity so info=blue, success=mint, warning=amber, error=coral
   read as solid editorial labels (text contrast comes from each badge's *-content
   token). The "opened" status is remapped off amber to blue in patch-status-badges. */
.badge {
  --tw-bg-opacity: 1 !important;
  /* The label face is loaded at weight 400 only; the markup's font-semibold
     synthesises a faux-bold that reads off-brand. Labels stay regular weight. */
  font-weight: 400 !important;
}

/* ---- Small captions / meta = uppercase mono labels (dates, owner, counts) ---- */
.text-xs:not(.normal-case) {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ---- Builder field-type tiles: labels must FIT the tile ----
   Two rules above conspire against the ~1/3-column tile. The uppercase mono
   treatment (wide glyphs + 0.04em tracking) outgrows it, and the light-surface
   collapse paints the tile's full-height 18px drag-handle gutter opaque cream
   (its `group-hover:bg-base-200/50` class substring-matches
   [class*="bg-base-200"]), hiding any text beneath it — "SIGNATURE" reads
   "IGNATURE". Keep the on-brand uppercase but set the condensed label face with
   no tracking, and cap the label column so it clears the gutter on both sides
   (so no font metric can ever push text under it) — long names wrap to a second
   centred line instead. Covers the locked/upsell tile variants too. */
.fields-grid-item .flex-col {
  min-width: 0;
  max-width: calc(100% - 2.5rem);
  padding-left: 0;
  padding-right: 0;
}
.fields-grid-item .text-xs {
  font-family: var(--keyring-font-label);
  font-size: 0.65rem;
  line-height: 1.15;
  letter-spacing: normal;
  text-align: center;
  white-space: normal;
  overflow-wrap: break-word;
}

/* ---- Action-button hover exceptions (override the blue default above) ---- */
/* Create (the new-template CTA) = amber, the single rationed accent. */
.white-button[href*="/templates/new"]:hover {
  background-color: hsl(var(--a)) !important;
  border-color: hsl(var(--a)) !important;
  color: hsl(var(--ac)) !important;
}
/* Header Upload = ink (deliberate secondary beside Create). */
#templates_upload_button:hover {
  background-color: hsl(var(--bc)) !important;
  border-color: hsl(var(--bc)) !important;
  color: hsl(var(--b1)) !important;
}
/* The top-nav "Settings" link highlights INK on hover (not blue). It has no
   rest-state highlight, so it is not highlighted while already on a settings page.
   A small rest padding keeps the ink box from shifting layout on hover. */
#account_settings_button {
  padding: 0.15rem 0.5rem;
}
#account_settings_button:hover {
  background-color: hsl(var(--bc)) !important;
  color: hsl(var(--b1)) !important;
}

/* ---- Surface the drag-to-reuse affordance in the builder fields panel ----
   Each placed field in the right-hand panel is draggable: drop it on the page to
   add ANOTHER area to that SAME field (reuse), instead of creating a duplicate.
   Upstream gives the placed-field rows (field.vue) no visual hint — only the raw
   HTML5 draggable attribute — so admins never discover it and make duplicates.
   The default/custom-field library rows already show a six-dot IconDrag handle;
   we bring the placed rows to parity WITHOUT touching the compiled markup.

   Scope: `[class*="list-field-"]` matches ONLY field.vue's placed submitter rows
   (they carry `list-field-<type>`, e.g. list-field-text). It deliberately excludes
   custom_field.vue (`.list-field` with no `-<type>` suffix — already has a handle),
   the default-field library rows, the field-type picker grid (`.fields-grid-item`),
   the drag placeholder, and every non-builder list (room/tier tables, menus). */
[class*="list-field-"] .fields-list-item {
  cursor: grab;
}
[class*="list-field-"] .fields-list-item:active {
  cursor: grabbing;
}
/* Reserve a left gutter and paint an always-visible six-dot grip glyph there,
   mirroring the library rows' IconDrag. `.fields-list-item` is position:relative,
   so the absolute ::before anchors to the row's left edge; the padded content
   div (`.p-1`) is nudged right so the glyph never overlaps the field-type icon. */
[class*="list-field-"] .fields-list-item::before {
  content: "\2807\00a0\2807"; /* ⠇ ⠇ — two braille columns read as a drag grip */
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1.15rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--keyring-font-body);
  font-size: 0.8rem;
  line-height: 1;
  letter-spacing: -0.12em;
  color: hsl(var(--bc) / 0.35);
  pointer-events: none;
  z-index: 1;
  transition: color 0.12s ease;
}
[class*="list-field-"] .fields-list-item:hover::before {
  color: hsl(var(--bc) / 0.7);
}
/* Push the field-type icon + name clear of the grip gutter (upstream `.p-1`
   header row starts flush-left; it is the only `.p-1` in the placed-field row). */
[class*="list-field-"] .fields-list-item > div > .p-1 {
  padding-left: 1.15rem;
}
/* Hover hint: a compact, on-brand uppercase caption pinned to the row's bottom-
   right, inside the row so it can't overflow the narrow panel. Fades in on hover
   and is click-through, so it never blocks the row's own controls. */
[class*="list-field-"] .fields-list-item::after {
  content: "DRAG ONTO PAGE TO REUSE";
  position: absolute;
  right: 0.25rem;
  bottom: 0.15rem;
  max-width: calc(100% - 1.4rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--keyring-font-label);
  font-size: 0.55rem;
  letter-spacing: 0.06em;
  color: hsl(var(--bc) / 0.55);
  background-color: hsl(var(--b1));
  padding: 0 0.2rem;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s ease;
  z-index: 1;
}
[class*="list-field-"] .fields-list-item:hover::after {
  opacity: 1;
}