/* ==========================================================================
   Document pages (privacy policy) in the LedGo ERP look.
   Uses the same colour tokens as the main page, so light/dark mode and the
   six colour themes carry over from the visitor's last choice.
   ========================================================================== */
.doc-page .lang-select { display: none; }
.doc { width: min(860px, 100% - 2rem); margin: 0 auto; padding: 8.5rem 0 4.5rem; }

.doc-head {
  position: relative; overflow: hidden;
  padding: 2.2rem; margin-bottom: 1.4rem; border-radius: 1.4rem;
  background: var(--paper-panel); border: 1px solid var(--ink-line-strong);
  box-shadow: var(--shadow-md);
}
.doc-head::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, rgb(var(--brand)), rgb(var(--brand-deep, var(--brand))), transparent);
}
.doc-icon { width: 4.2rem; height: 4.2rem; border-radius: 1.1rem; margin-bottom: 1rem; border: 1px solid var(--ink-line-strong); background: #fff; padding: 0.35rem; object-fit: contain; }
.doc-head h1 {
  font-family: "Big Shoulders Display", "Public Sans", sans-serif; font-weight: 800; text-transform: uppercase;
  font-size: clamp(2.3rem, 5.4vw, 3.6rem); line-height: 1; letter-spacing: 0.01em; margin: 0.7rem 0 1.4rem;
}
.doc-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; margin: 0; }
.doc-meta div { padding: 0.75rem 0.9rem; border-radius: 0.8rem; background: var(--ink-2); border: 1px solid var(--ink-line); }
.doc-meta dt { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-on-ink-muted); }
.doc-meta dd { margin: 0.15rem 0 0; font-size: 0.95rem; font-weight: 600; overflow-wrap: anywhere; }
.doc-meta a { color: rgb(var(--brand-on-surface, var(--brand))); text-decoration: none; }

.doc-body {
  padding: 2.2rem; border-radius: 1.4rem; line-height: 1.75;
  background: var(--paper-panel); border: 1px solid var(--ink-line-strong);
}
.doc-body > p, .doc-body li { color: var(--text-on-ink); }
.doc-body p + p { margin-top: 0.8rem; }
.doc-body h2 {
  font-family: "Big Shoulders Display", "Public Sans", sans-serif; font-weight: 800; text-transform: uppercase;
  font-size: 1.55rem; letter-spacing: 0.02em; margin: 2.4rem 0 0.8rem; padding-top: 1.7rem; border-top: 1px solid var(--ink-line);
  display: flex; align-items: baseline; gap: 0.8rem;
}
.doc-body h2 .n { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.85rem; color: rgb(var(--brand-on-surface, var(--brand))); }
.doc-body h3 { font-size: 1.02rem; margin: 1.4rem 0 0.4rem; }
.doc-body ul { padding-left: 1.2rem; margin: 0.7rem 0; }
.doc-body li + li { margin-top: 0.4rem; }
.doc-body a { color: rgb(var(--brand-on-surface, var(--brand))); }
.doc-body a:hover { text-decoration: none; }
.doc-body code { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.85rem; padding: 0.1rem 0.45rem; border-radius: 0.4rem; background: rgb(var(--brand) / 0.1); color: rgb(var(--brand-on-surface, var(--brand))); }

.table-wrap { overflow-x: auto; margin: 0.8rem 0; border: 1px solid var(--ink-line-strong); border-radius: 0.9rem; }
.doc-body table { width: 100%; border-collapse: collapse; font-size: 0.94rem; min-width: 520px; }
.doc-body th { text-align: left; padding: 0.75rem 0.9rem; background: var(--ink-2); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-on-ink-muted); }
.doc-body td { padding: 0.75rem 0.9rem; border-top: 1px solid var(--ink-line); vertical-align: top; }
.doc-body td:first-child { font-weight: 700; white-space: nowrap; }

.callout { margin: 1rem 0; padding: 1.1rem 1.25rem; border-radius: 0.9rem; background: rgb(var(--brand) / 0.08); border: 1px solid rgb(var(--brand) / 0.32); }
.callout > strong { display: block; }
.callout p { margin-top: 0.4rem; }

.contact-box { display: grid; gap: 0.5rem; margin: 0.8rem 0; padding: 1.1rem 1.25rem; border-radius: 0.9rem; background: var(--ink-2); border: 1px solid var(--ink-line); }
.contact-box div { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: 0.25rem 0.9rem; }
.contact-box span { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-on-ink-muted); padding-top: 0.2rem; }
.contact-box a, .contact-box strong { overflow-wrap: anywhere; }

.doc-toc { margin: 1.1rem 0 0.4rem; padding: 1.1rem 1.25rem; border-radius: 0.9rem; background: var(--ink-2); border: 1px solid var(--ink-line); }
.doc-toc strong { display: block; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-on-ink-muted); margin-bottom: 0.5rem; }
.doc-toc ol { margin: 0; padding-left: 1.3rem; columns: 2; column-gap: 1.8rem; }
.doc-toc li { padding-block: 0.15rem; }
.doc-toc a, .contact-box a { display: inline-block; padding-block: 0.25rem; text-decoration: none; }
.doc-foot { margin-top: 2rem !important; padding-top: 1.1rem; border-top: 1px solid var(--ink-line); font-size: 0.88rem; color: var(--text-on-ink-muted) !important; }

.doc-page .site-footer { margin-top: 0; }

@media (max-width: 640px) {
  .doc { padding-top: 6.6rem; }
  .doc-head, .doc-body { padding: 1.35rem; }
  .doc-meta { grid-template-columns: 1fr; }
  .doc-toc ol { columns: 1; }
  .doc-body .table-wrap { border: 0; overflow: visible; }
  .doc-body table, .doc-body thead, .doc-body tbody, .doc-body tr, .doc-body td { display: block; min-width: 0; }
  .doc-body thead { display: none; }
  .doc-body tr { margin-bottom: 0.8rem; border: 1px solid var(--ink-line-strong); border-radius: 0.9rem; overflow: hidden; }
  .doc-body td { border: 0; padding: 0.6rem 0.9rem; }
  .doc-body td:first-child { background: var(--ink-2); white-space: normal; }
}