/* FW Admin Tech Tools Pro - help page theme.
   The same file styles the tool pages on the website and the help pages inside the app. */

:root {
  --hp-bg: #0f1318;
  --hp-surface: #171c24;
  --hp-surface-2: #1e2530;
  --hp-text: #e8edf3;
  --hp-muted: #98a4b3;
  --hp-border: #2b3441;
  --hp-accent: #3b82f6;
  --hp-accent-text: #ffffff;
  --hp-shadow: rgba(0, 0, 0, 0.35);
  --hp-gutter: clamp(14px, 2.2vw, 44px);
  color-scheme: dark;
}

:root[data-hp-theme="light"] {
  --hp-shadow: rgba(15, 23, 42, 0.16);
  color-scheme: light;
}

/* On the website the colours come from the visitor's chosen theme (text colour + panel colour). */
html[data-hp-site] {
  --hp-text: var(--fw-text-color, #ffffff);
  --hp-bg: var(--fw-panel-bg, #000000);
  --hp-surface: color-mix(in srgb, var(--fw-panel-bg, #000000) 93%, var(--fw-text-color, #ffffff));
  --hp-surface-2: color-mix(in srgb, var(--fw-panel-bg, #000000) 88%, var(--fw-text-color, #ffffff));
  --hp-border: color-mix(in srgb, var(--fw-panel-bg, #000000) 78%, var(--fw-text-color, #ffffff));
  --hp-muted: color-mix(in srgb, var(--fw-panel-bg, #000000) 52%, var(--fw-text-color, #ffffff));
  --hp-accent: color-mix(in srgb, #2f7bf6 76%, var(--fw-text-color, #ffffff));
  --hp-accent-text: #ffffff;
  --hp-shadow: rgba(0, 0, 0, 0.32);
}

/* ================================================================
   Help window layout (inside the app only)
   ================================================================ */
html:not([data-hp-site]) {
  background: var(--hp-bg) !important;
  zoom: 1 !important;
  scroll-behavior: smooth;
}

html:not([data-hp-site]) body#fwBody,
html:not([data-hp-site]) body {
  background: var(--hp-bg) !important;
  color: var(--hp-text) !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 100vh;
  font: 15px/1.65 "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

html:not([data-hp-site]) #form1 {
  display: block !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: calc(var(--hp-gutter) * 0.55) var(--hp-gutter) calc(var(--hp-gutter) * 1.2) !important;
}

/* website furniture that has no use inside the help window */
html:not([data-hp-site]) .fw-matrix,
html:not([data-hp-site]) .fw-youtube-embed,
html:not([data-hp-site]) #ttLayoutFixDummy,
html:not([data-hp-site]) #fb-root,
html:not([data-hp-site]) .aspNetHidden,
html:not([data-hp-site]) .footer {
  display: none !important;
}

html:not([data-hp-site]) .fw-page-background {
  display: block !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  overflow: visible !important;
}

html:not([data-hp-site]) .DivCenterNoBackground,
html:not([data-hp-site]) .fw-panel-row,
html:not([data-hp-site]) .DivCenter {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  position: static !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  transform: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html:not([data-hp-site]) .DivCenterNoBackground > br,
html:not([data-hp-site]) .fw-panel-row > br,
html:not([data-hp-site]) .DivCenter > br {
  display: none !important;
}

html:not([data-hp-site]) table.DivRoundedPanel,
html:not([data-hp-site]) table.DivRoundedPanel > tbody,
html:not([data-hp-site]) table.DivRoundedPanel > tbody > tr,
html:not([data-hp-site]) table.DivRoundedPanel > tbody > tr > td {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: inherit !important;
  box-shadow: none !important;
  text-align: left !important;
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

html:not([data-hp-site]) ::-webkit-scrollbar { width: 12px; height: 12px; }
html:not([data-hp-site]) ::-webkit-scrollbar-track { background: transparent; }
html:not([data-hp-site]) ::-webkit-scrollbar-thumb {
  background: var(--hp-border);
  border-radius: 8px;
  border: 3px solid var(--hp-bg);
}
html:not([data-hp-site]) ::-webkit-scrollbar-thumb:hover { background: var(--hp-muted); }
html:not([data-hp-site]) ::selection { background: var(--hp-accent); color: var(--hp-accent-text); }

/* ================================================================
   Website layout (tool pages only: a table whose content cell holds the cards)
   ================================================================ */
html[data-hp-site] .DivCenterNoBackground:has(td.smalltextLeft > div[style*="vw"]),
html[data-hp-site] .DivCenter:has(td.smalltextLeft > div[style*="vw"]) {
  max-width: min(100%, 1760px) !important;
  padding-left: var(--hp-gutter) !important;
  padding-right: var(--hp-gutter) !important;
}

html[data-hp-site] table.DivRoundedPanel:has(td.smalltextLeft > div[style*="vw"]) {
  max-width: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;
  border-spacing: 0 !important;
}

html[data-hp-site] table.DivRoundedPanel:has(td.smalltextLeft > div[style*="vw"]) > tbody > tr > td.DefaultPageTableWidth {
  padding: 0 18px 0 0 !important;
  vertical-align: top !important;
}

html[data-hp-site] table.DivRoundedPanel > tbody > tr > td.smalltextLeft:has(> div[style*="vw"]) {
  margin: 0 !important;
  padding: 0 !important;
  min-width: 0 !important;
  vertical-align: top !important;
}

/* ================================================================
   Content cards (website and app)
   ================================================================ */
td.smalltextLeft > div[style*="vw"] {
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 0 18px !important;
  padding: clamp(18px, 2vw, 32px) !important;
  background: var(--hp-surface) !important;
  border: 1px solid var(--hp-border) !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 2px var(--hp-shadow), 0 10px 28px var(--hp-shadow) !important;
  color: var(--hp-text) !important;
  font: 15px/1.7 "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif !important;
  text-align: left !important;
  animation: hp-rise 0.35s ease-out both;
}

@keyframes hp-rise {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  td.smalltextLeft > div[style*="vw"] { animation: none; }
  html { scroll-behavior: auto; }
}

/* tidy the blank-line spacing */
td.smalltextLeft > div[style*="vw"] br + br,
td.smalltextLeft > div[style*="vw"] > br:first-child,
td.smalltextLeft > div[style*="vw"] ul > br,
td.smalltextLeft > div[style*="vw"] ol > br,
td.smalltextLeft > div[style*="vw"] li + br,
td.smalltextLeft > div[style*="vw"] strong + br {
  display: none !important;
}

/* section labels */
td.smalltextLeft > div[style*="vw"] > strong {
  display: block;
  margin: 1.5em 0 0.45em;
  padding-bottom: 0.3em;
  color: var(--hp-accent);
  font-size: 1.1em;
  font-weight: 650;
  border-bottom: 1px solid var(--hp-border);
}

/* lists */
td.smalltextLeft > div[style*="vw"] ul,
td.smalltextLeft > div[style*="vw"] ol {
  margin: 0.4em 0 1em !important;
  padding-left: 1.5em !important;
}

td.smalltextLeft > div[style*="vw"] ul { list-style: none !important; }

td.smalltextLeft > div[style*="vw"] li {
  position: relative;
  margin: 0.4em 0 !important;
  padding-left: 0.2em;
}

td.smalltextLeft > div[style*="vw"] ul > li::before {
  content: "";
  position: absolute;
  left: -1.1em;
  top: 0.72em;
  width: 0.42em;
  height: 0.42em;
  border-radius: 50%;
  background: var(--hp-accent);
}

td.smalltextLeft > div[style*="vw"] li > strong:first-child,
td.smalltextLeft > div[style*="vw"] li > b:first-child {
  color: var(--hp-text);
  font-weight: 650;
}

/* text */
td.smalltextLeft > div[style*="vw"] a { color: var(--hp-accent) !important; text-decoration: none; }
td.smalltextLeft > div[style*="vw"] a:hover { text-decoration: underline; }

td.smalltextLeft > div[style*="vw"] code,
td.smalltextLeft > div[style*="vw"] kbd,
td.smalltextLeft > div[style*="vw"] samp,
td.smalltextLeft > div[style*="vw"] pre {
  font-family: Consolas, "Cascadia Mono", "Courier New", monospace !important;
  font-size: 0.92em;
  background: var(--hp-surface-2);
  border: 1px solid var(--hp-border);
  border-radius: 5px;
  padding: 0.1em 0.4em;
}

/* screenshots */
td.smalltextLeft > div[style*="vw"] img {
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 18px auto !important;
  border: 1px solid var(--hp-border) !important;
  border-radius: 10px !important;
  box-shadow: 0 10px 30px var(--hp-shadow) !important;
}

/* printing */
@media print {
  html, html body#fwBody, html body { background: #fff !important; color: #000 !important; }
  td.smalltextLeft > div[style*="vw"] {
    background: #fff !important;
    color: #000 !important;
    border: 0 !important;
    box-shadow: none !important;
    animation: none !important;
    padding: 0 !important;
  }
  td.smalltextLeft > div[style*="vw"] > strong { color: #000 !important; }
  td.smalltextLeft > div[style*="vw"] img { box-shadow: none !important; }
}