/* ARTA-HUB theme for DocuSeal 3.3.0.
   Tokens mirror ARTA-HUB apps/web/app/globals.css. Loaded from layouts/_head_tags, i.e. BEFORE
   DocuSeal's compiled packs, so every rule is prefixed with html[data-theme] to win on specificity. */

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/arta/fonts/manrope-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/arta/fonts/manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

html[data-theme] {
  /* ---- ARTA-HUB tokens (globals.css :root) ---- */
  --brand: #b72d31;
  --brand-strong: #9e2328;
  --brand-soft: #f8eaea;
  --brand-hover: #f2d6d7;   /* stronger tint for hover/active so it reads on beige */
  --brand-line: rgba(183, 45, 49, 0.24);
  --ink: #161513;
  --ink-muted: #56544f;
  --ink-soft: #918d84;
  --surface-0: #ffffff;
  --surface-1: #f6f4f1;
  --surface-2: #edeae4;
  --surface-3: #d9dadd;
  --page-bg: #f3f1ec;
  --line-subtle: rgba(22, 21, 19, 0.08);
  --line-strong: rgba(22, 21, 19, 0.15);
  --focus-ring: rgba(183, 45, 49, 0.18);
  --ok: #2f7d57;
  --ok-soft: #e7f1ea;
  --warn: #ad7117;
  --warn-soft: #f6eedd;
  --info: #2f5fa6;
  --info-soft: #e6eef7;
  --danger: #b72d31;
  --danger-soft: #fbecec;
  --shadow-card: 0 1px 2px rgba(22, 21, 19, 0.04), 0 8px 24px -16px rgba(22, 21, 19, 0.18);
  --shadow-lift: 0 2px 4px rgba(22, 21, 19, 0.05), 0 18px 40px -22px rgba(22, 21, 19, 0.28);
  --r-sm: 0.75rem;
  --r-md: 1rem;
  --r-lg: 1.4rem;
  --r-xl: 1.75rem;

  /* ---- daisyUI theme "docuseal" remapped (HSL triplets) ---- */
  --p: 0 55% 95%;           /* primary = brand-soft */
  --pf: 0 50% 90%;
  --pc: 358 61% 45%;        /* brand text on soft */
  --s: 358 45% 88%;
  --sf: 358 45% 82%;
  --sc: 45 7% 8%;
  --a: 36 77% 38%;          /* accent = warn amber */
  --af: 36 77% 32%;
  --ac: 0 0% 100%;
  --n: 358 61% 45%;         /* neutral = brand red: DocuSeal's main action colour */
  --nf: 358 64% 38%;
  --nc: 0 0% 100%;
  --b1: 0 0% 100%;          /* surface-0 */
  --b2: 37 20% 90%;         /* one step darker than HUB surface-1: daisy hovers must read on the beige page */
  --b3: 39 17% 85%;
  --bc: 45 7% 8%;           /* ink */
  --in: 216 56% 42%;
  --inc: 0 0% 100%;
  --su: 151 45% 34%;
  --suc: 0 0% 100%;
  --wa: 36 77% 38%;
  --wac: 0 0% 100%;
  --er: 358 61% 45%;
  --erc: 0 0% 100%;
  --rounded-box: 1.4rem;
  --rounded-btn: 999px;
  --rounded-badge: 999px;
  --btn-text-case: none;
  --btn-focus-scale: 1;
  --tooltip-color: #161513;

  background: var(--page-bg);
  color: var(--ink);
  font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

html[data-theme] body {
  background: var(--page-bg);
  font-family: inherit;
  line-height: 1.5;
}
html[data-theme] ::selection { background: var(--brand-soft); color: var(--ink); }
html[data-theme] *::-webkit-scrollbar { width: 10px; height: 10px; }
html[data-theme] *::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; border: 3px solid var(--page-bg); }

/* ---------------- Top bar + brand lockup (HUB .topbar / .brand-row) ---------------- */
html[data-theme] .arta-topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-subtle);
  margin-bottom: 1.75rem;
}
html[data-theme] .arta-topbar > div { margin-bottom: 0; }
html[data-theme] .arta-brand { display: inline-flex; align-items: center; gap: 0.75rem; color: inherit; text-decoration: none; }
html[data-theme] .arta-brand .logo-mark {
  width: 2.85rem; height: 2.85rem; flex: none; border-radius: 0.95rem;
  background: var(--surface-0); display: grid; place-items: center;
  border: 1px solid var(--line-subtle); box-shadow: var(--shadow-card); overflow: hidden;
}
html[data-theme] .arta-brand .logo-mark img { width: 100%; height: 100%; object-fit: contain; display: block; }
html[data-theme] .arta-brand .brand-text { display: grid; gap: 0.2rem; line-height: 1; text-align: left; }
html[data-theme] .arta-brand .wm { font-weight: 800; letter-spacing: 0.13em; font-size: 1.12rem; color: var(--brand); }
html[data-theme] .arta-brand .tg { font-size: 0.66rem; font-weight: 500; color: var(--ink-soft); letter-spacing: 0.02em; }
html[data-theme] .arta-brand.arta-brand-lg .logo-mark { width: 4rem; height: 4rem; border-radius: 1.2rem; }
html[data-theme] .arta-brand.arta-brand-lg .wm { font-size: 1.5rem; }
html[data-theme] .arta-brand.arta-brand-lg .tg { font-size: 0.78rem; }
html[data-theme] .arta-avatar {
  display: flex; align-items: center; justify-content: center;
  width: 2.4rem; height: 2.4rem; border-radius: 999px;
  background: var(--brand-soft); color: var(--brand);
  font-size: 0.8rem; font-weight: 800; letter-spacing: 0.02em;
  border: 1px solid var(--brand-line);
}
html[data-theme] #account_settings_button { font-size: 0.95rem; font-weight: 600; color: var(--ink-muted); }
html[data-theme] #account_settings_button:hover { color: var(--brand); }

/* ---------------- Typography ---------------- */
html[data-theme] h1, html[data-theme] h2, html[data-theme] h3 { letter-spacing: -0.02em; }
html[data-theme] .text-4xl.font-bold, html[data-theme] .text-3xl.font-bold, html[data-theme] h1.font-bold { font-weight: 800; }
html[data-theme] .link { color: var(--brand); text-decoration: none; font-weight: 600; }
html[data-theme] .link:hover { color: var(--brand-strong); text-decoration: underline; }
html[data-theme] .text-gray-500, html[data-theme] .text-gray-600 { color: var(--ink-muted); }

/* ---------------- Buttons (HUB .button / .button-primary / .button-secondary) ---------------- */
html[data-theme] .btn {
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
  border-radius: 999px;
  transition: transform 0.2s, background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
}
html[data-theme] .btn:hover { transform: translateY(-1px); }
html[data-theme] .btn:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--focus-ring); }
html[data-theme] .btn-neutral,
html[data-theme] .base-button {
  background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: var(--shadow-lift);
}
html[data-theme] .btn-neutral:hover,
html[data-theme] .base-button:hover { background: var(--brand-strong); border-color: var(--brand-strong); color: #fff; }
html[data-theme] .btn-neutral.btn-outline { background: var(--surface-0); color: var(--ink); border-color: var(--line-strong); box-shadow: none; }
html[data-theme] .btn-neutral.btn-outline:hover { color: var(--brand); border-color: var(--brand); background: var(--surface-0); }
html[data-theme] .white-button,
html[data-theme] .btn-outline {
  background: var(--surface-0); color: var(--ink); border: 1px solid var(--line-strong); box-shadow: none;
}
html[data-theme] .white-button:hover,
html[data-theme] .btn-outline:hover { background: var(--surface-0); color: var(--brand); border-color: var(--brand); }
html[data-theme] .btn-ghost { color: var(--ink-muted); }
html[data-theme] .btn-ghost:hover { background: var(--brand-hover); color: var(--brand-strong); }
html[data-theme] .btn-primary { background: var(--surface-0); border: 1.5px solid var(--brand); color: var(--brand); }
html[data-theme] .btn-primary:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
html[data-theme] .btn-error { background: var(--danger); border-color: var(--danger); color: #fff; }
html[data-theme] .btn[disabled], html[data-theme] .btn-disabled { opacity: 0.55; transform: none; }

/* ---------------- Inputs (HUB .field input) ---------------- */
html[data-theme] .input,
html[data-theme] .select,
html[data-theme] .textarea,
html[data-theme] .base-input,
html[data-theme] .base-select,
html[data-theme] .base-textarea {
  border-radius: 1rem;
  border: 1px solid var(--line-strong);
  background-color: var(--surface-0);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(22, 21, 19, 0.05);
  transition: border-color 0.15s, box-shadow 0.15s;
}
html[data-theme] .input:focus, html[data-theme] .input:focus-within,
html[data-theme] .select:focus,
html[data-theme] .textarea:focus,
html[data-theme] .base-input:focus,
html[data-theme] .base-textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 4px var(--focus-ring);
}
html[data-theme] ::placeholder { color: var(--ink-soft); }
html[data-theme] .label-text, html[data-theme] label.label { font-weight: 600; color: var(--ink); }

html[data-theme] .checkbox,
html[data-theme] .radio { --chkbg: 358 61% 45%; --chkfg: 0 0% 100%; border-color: var(--line-strong); }
html[data-theme] .checkbox:checked, html[data-theme] .checkbox[checked="true"],
html[data-theme] .radio:checked { background-color: var(--brand); border-color: var(--brand); }
html[data-theme] .toggle:checked, html[data-theme] .toggle[checked="true"] { --tglbg: #fff; background-color: var(--brand); border-color: var(--brand); color: var(--brand); }
html[data-theme] .range { --range-shdw: 358 61% 45%; }

/* ---------------- Cards / panels / modals ---------------- */
html[data-theme] .card {
  background: var(--surface-0);
  border: 1px solid var(--line-subtle);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
}
html[data-theme] .card.bg-base-200 { background: var(--surface-0); }
html[data-theme] .modal-box {
  border-radius: var(--r-xl);
  border: 1px solid var(--line-subtle);
  box-shadow: var(--shadow-lift);
}
html[data-theme] .modal-box .text-xl.font-semibold, html[data-theme] .modal-box h2 { font-weight: 800; letter-spacing: -0.02em; }
html[data-theme] .dropdown-content.menu, html[data-theme] .dropdown-content {
  border: 1px solid var(--line-subtle);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lift);
}
html[data-theme] .rounded-box { border-radius: var(--r-lg); }

/* list rows on dashboards */
html[data-theme] .border-base-300 { border-color: var(--line-strong); }
html[data-theme] .hover\:bg-base-200:hover, html[data-theme] .hover\:bg-base-300:hover { background-color: var(--brand-hover); color: var(--brand-strong); }
html[data-theme] .dropdown-content li > a:hover, html[data-theme] .dropdown-content li > button:hover { background: var(--brand-hover); color: var(--brand-strong); box-shadow: none; }

/* ---------------- Menus / settings nav (HUB .nav-link) ---------------- */
html[data-theme] .menu li > a, html[data-theme] .menu li > button, html[data-theme] .menu li > span { border-radius: 0.65rem; font-weight: 600; color: var(--ink-muted); }
html[data-theme] .menu li > a:hover, html[data-theme] .menu li > button:hover { background: var(--surface-0); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); }
html[data-theme] .menu li > a.active,
html[data-theme] .menu li > .active,
html[data-theme] .menu li > a.bg-base-300 { background: var(--surface-0); color: var(--brand); font-weight: 800; box-shadow: inset 4px 0 0 var(--brand), 0 0 0 1px var(--line-strong), var(--shadow-card); }

/* ---------------- Tables (HUB .data-table) ---------------- */
html[data-theme] .table { font-size: 0.88rem; }
html[data-theme] .table thead th,
html[data-theme] .table thead td {
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--ink-soft); font-weight: 700; background: var(--surface-1);
}
html[data-theme] .table :where(th, td) { border-color: var(--line-subtle); }

/* ---------------- Badges / alerts / tabs / tooltips ---------------- */
html[data-theme] .badge {
  border-radius: 999px; font-size: 0.68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em;
  border: 1px solid var(--line-strong); background: var(--surface-1); color: var(--ink-muted);
}
html[data-theme] .badge-info { background: var(--info-soft); color: var(--info); border-color: transparent; }
html[data-theme] .badge-success { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
html[data-theme] .badge-warning { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
html[data-theme] .badge-error { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
html[data-theme] .badge-outline { background: transparent; }
html[data-theme] .alert { border-radius: var(--r-md); border: 1px solid var(--line-subtle); box-shadow: var(--shadow-card); background: var(--surface-0); color: var(--ink); }
html[data-theme] .alert-error { background: #fff1f2; border-color: #f0b6b8; color: #8b2529; }
html[data-theme] .alert-success { background: #f0fdf4; border-color: #b7e0c2; color: #1a7f3c; }
html[data-theme] .alert-info { background: var(--info-soft); border-color: transparent; color: var(--info); }
html[data-theme] .alert-warning { background: var(--warn-soft); border-color: transparent; color: var(--warn); }
html[data-theme] .tabs-boxed { background: var(--surface-1); border: 1px solid var(--line-subtle); border-radius: 999px; padding: 0.25rem; }
html[data-theme] .tabs-boxed .tab { border-radius: 999px; font-weight: 700; color: var(--ink-muted); }
html[data-theme] .tabs-boxed .tab-active { background: var(--surface-0); color: var(--ink); box-shadow: var(--shadow-card); }
html[data-theme] .tab-active:not(.tabs-boxed .tab) { color: var(--brand); border-color: var(--brand); }
html[data-theme] .tooltip { --tooltip-color: #161513; --tooltip-text-color: #fff; }
html[data-theme] .text-accent { color: var(--brand); }
html[data-theme] .stat-value { font-weight: 800; letter-spacing: -0.02em; }
html[data-theme] .steps .step-neutral + .step-neutral:before,
html[data-theme] .steps .step-neutral:after { background: var(--brand); color: #fff; }

/* ---------------- Signing form ---------------- */
html[data-theme] #signing_form_header { background: rgba(255, 255, 255, 0.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line-subtle); }
html[data-theme] #signing_form_header h1 { font-weight: 800; letter-spacing: -0.02em; }
html[data-theme] #scrollbox .bg-white.shadow, html[data-theme] page-container img, html[data-theme] .page-container { box-shadow: var(--shadow-card); }
html[data-theme] #form_container, html[data-theme] submission-form > div.bg-base-100 { border-radius: var(--r-xl) var(--r-xl) 0 0; box-shadow: 0 -12px 40px -24px rgba(22, 21, 19, 0.35); }
html[data-theme] .arta-form-brand { display: flex; justify-content: center; padding: 1.25rem 0 0.5rem; }

/* ---------------- Auth / landing ---------------- */
html[data-theme] .arta-auth-hero { text-align: center; margin: 1.5rem auto 1.75rem; }
html[data-theme] .arta-auth-hero h1 { font-size: 1.9rem; font-weight: 800; letter-spacing: -0.03em; margin-top: 1rem; }
html[data-theme] .arta-auth-hero p { color: var(--ink-muted); margin-top: 0.35rem; }

/* ---------------- DocuSeal attribution (AGPL s7(b): must remain visible) ---------------- */
html[data-theme] .arta-powered { font-size: 0.72rem; color: var(--ink-soft); text-align: center; padding: 1rem 0.5rem; }
html[data-theme] .arta-powered a { color: var(--ink-muted); text-decoration: underline; text-underline-offset: 2px; }

/* ---------------- Embedded in ARTA-HUB (set by /arta/arta-embed.js inside an iframe) ---------------- */
html[data-theme].arta-embedded,
html[data-theme].arta-embedded body { background: transparent; }
html[data-theme].arta-embedded .arta-topbar,
html[data-theme].arta-embedded .arta-form-brand { display: none; }
html[data-theme].arta-embedded #signing_form_header { position: static; }

/* ---------------- Contrast: content blocks sit as white cards on the beige page ---------------- */
html[data-theme] .max-w-6xl a.bg-base-200,
html[data-theme] .max-w-6xl div.bg-base-200.rounded-2xl,
html[data-theme] .max-w-6xl div.bg-base-200.rounded-xl {
  background: var(--surface-0);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-card);
}
html[data-theme] .max-w-6xl a.bg-base-200:hover {
  border-color: var(--brand);
  box-shadow: var(--shadow-lift);
  transform: translateY(-2px);
  transition: transform .18s, box-shadow .18s, border-color .18s;
}

/* ---------------- Pro upsells inside compiled Vue/JS (not overridable as views) ---------------- */
html[data-theme] .tooltip:has(> a[href*="docuseal.com/pricing"]),
html[data-theme] .tooltip:has(> a[href*="qualified-electronic-signature"]),
html[data-theme] div:has(> a[href="https://www.docuseal.com/pricing"]),
html[data-theme] a[href*="docuseal.com/pricing"],
html[data-theme] a[href$="/upgrade"],
html[data-theme] #bulk_message,
html[data-theme] a[href*="CONSOLE_URL"],
html[data-theme] a[href*="console.docuseal"] { display: none !important; }

/* ---------------- v3: contrast pass (hover/active must read against the beige page) ---------------- */
html[data-theme] .menu li > a.active, html[data-theme] .menu li > .active {
  background: var(--surface-0); color: var(--brand); font-weight: 800;
  box-shadow: inset 4px 0 0 var(--brand), 0 0 0 1px var(--line-strong), var(--shadow-card);
}
html[data-theme] .hover\:bg-base-200:hover, html[data-theme] .hover\:bg-base-300:hover {
  background-color: var(--surface-0); color: var(--brand);
  box-shadow: inset 0 0 0 1px var(--brand);
}
html[data-theme] .btn-warning { background: var(--ink); border-color: var(--ink); color: #fff; }

/* template builder: field palette tiles + submitter rows as white tiles with real borders */
html[data-theme] .fields-grid-item,
html[data-theme] template-builder .border-base-300.rounded,
html[data-theme] template-builder .border.rounded-md { background-color: var(--surface-0) !important; border: 1px solid var(--line-strong) !important; }
html[data-theme] .fields-grid-item:hover { border-color: var(--brand) !important; color: var(--brand); box-shadow: var(--shadow-card); }

/* template builder header: swap the orange DocuSeal mark (compiled Vue) for the ARTA logo */
html[data-theme] template-builder a[href="/"] > svg { display: none; }
html[data-theme] template-builder a[href="/"] { display: inline-flex; }
html[data-theme] template-builder a[href="/"]::before {
  content: ""; width: 2.6rem; height: 2.6rem; border-radius: 0.85rem;
  background: #fff url("/arta/logo-128.png") center / 86% no-repeat;
  border: 1px solid var(--line-subtle); box-shadow: var(--shadow-card);
}

/* "Welcome to DocuSeal" quick-tour prompts */
html[data-theme] #app_tour_manager,
html[data-theme] template-builder div.border-dashed:has(.btn-warning) { display: none !important; }

/* settings "Back" link is a menu-title: no row chrome */
html[data-theme] .menu li.menu-title > a, html[data-theme] .menu li.menu-title > span { box-shadow: none !important; background: transparent !important; color: var(--brand) !important; }
html[data-theme] .menu li.menu-title > span { color: var(--ink-soft) !important; }

/* dropdown panels are white: hover uses the red tint instead of white-on-white */
html[data-theme] .dropdown-content.menu li > a:hover,
html[data-theme] .dropdown-content.menu li > button:hover,
html[data-theme] .dropdown-content.menu li > label:hover { background: var(--brand-hover); color: var(--brand-strong); box-shadow: none; }