/* ==========================================================================
   Documentation module - three-column reader / editor

   Colours are derived from the active Serenity Pro theme rather than hardcoded.
   The layout sets a small palette of local variables from the theme's Bootstrap
   and Serenity custom properties, and `html.dark` (applied by _Layout.cshtml for
   any "-dark" theme) overrides the few that cannot be expressed as one value.
   Every hardcoded hex here is a fallback for when a variable is absent.
   ========================================================================== */

.docs-shell {
    --dx-surface:    var(--s-card-bg, var(--bs-body-bg, #fff));
    --dx-panel:      var(--s-alt-row-bg, #fbfcfd);
    --dx-text:       var(--bs-body-color, #2d3748);
    --dx-heading:    var(--bs-emphasis-color, var(--bs-body-color, #16202e));
    --dx-muted:      var(--bs-secondary-color, #6b7684);
    --dx-faint:      var(--bs-tertiary-color, #98a2b0);
    --dx-border:     var(--s-card-border, var(--bs-border-color, #e8ebef));
    --dx-input-bg:   var(--s-input-bg, var(--bs-body-bg, #fff));
    --dx-input-bd:   var(--s-input-border, var(--bs-border-color, #d7dce2));
    --dx-input-text: var(--s-input-text, var(--bs-body-color, #2d3748));
    --dx-accent:     var(--bs-primary, #2f6fed);

    /* Translucent tints work against any theme background, light or dark. */
    --dx-accent-bg:  rgba(47, 111, 237, .10);
    --dx-hover:      rgba(128, 128, 128, .10);
    --dx-selected:   rgba(47, 111, 237, .14);
    --dx-code-bg:    #1e293b;
    --dx-code-text:  #e2e8f0;
}

html.dark .docs-shell {
    --dx-panel:     rgba(255, 255, 255, .03);
    --dx-accent-bg: rgba(120, 170, 255, .16);
    --dx-hover:     rgba(255, 255, 255, .07);
    --dx-selected:  rgba(120, 170, 255, .20);
    --dx-code-bg:   rgba(0, 0, 0, .35);
}

.docs-shell {
    display: flex;
    height: 100%;
    min-height: 480px;
    background: var(--dx-surface);
    color: var(--dx-text);
    font-size: 14px;
}

.dx-btn {
    padding: 5px 12px; border: 1px solid var(--dx-input-bd); border-radius: 5px;
    background: var(--dx-input-bg); cursor: pointer; font-size: 12px; color: var(--dx-text);
}
.dx-btn:hover { background: var(--dx-hover); }
.dx-btn-primary { background: var(--dx-accent); border-color: var(--dx-accent); color: #fff; }
.dx-btn-primary:hover { background: var(--dx-accent); filter: brightness(.92); color: #fff; }

.dx-hint { color: var(--dx-faint); font-size: 12px; padding: 10px 8px; }
.dx-chip {
    display: inline-block; background: var(--bs-warning-bg-subtle, #fff3cd);
    color: var(--bs-warning-text-emphasis, #856404);
    border-radius: 9px; padding: 0 7px; font-size: 10px; margin-left: 6px;
}
.dx-read { color: var(--bs-success, #16a34a); font-size: 11px; margin-left: 5px; }

/* Documentation button in the top navigation bar. */
.s-docs-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    white-space: nowrap;
    text-decoration: none;
}
.s-docs-btn i { font-size: 15px; }
.s-docs-btn span { font-size: 12px; font-weight: 600; }
.s-docs-btn:hover { text-decoration: none; }

/* On a narrow screen the label would crowd the bar; the icon still reads. */
@media (max-width: 720px) {
    .s-docs-btn span { display: none; }
    .s-docs-btn { padding: 4px 8px; }
}

/* --- contextual help drawer ----------------------------------------------- */

/* No backdrop and no modal: the drawer sits beside the screen it documents so
   the page underneath stays clickable while it is open. */
.s-docs-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 460px;
    max-width: 92vw;
    z-index: 1050;
    display: flex;
    flex-direction: column;
    background: var(--s-card-bg, var(--bs-body-bg, #fff));
    color: var(--bs-body-color, #2d3748);
    border-left: 1px solid var(--s-card-border, var(--bs-border-color, #e8ebef));
    box-shadow: -6px 0 24px rgba(16, 24, 40, .16);
    transform: translateX(100%);
    transition: transform .18s ease-out;
}
.s-docs-drawer.s-docs-open { transform: translateX(0); }

/* Drag the left edge to resize; width is remembered in localStorage. */
.s-docs-resize {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 6px;
    cursor: ew-resize;
    z-index: 2;
}
.s-docs-resize:hover { background: var(--bs-primary, #2f6fed); opacity: .35; }
body.s-docs-resizing { cursor: ew-resize; user-select: none; }
body.s-docs-resizing .s-docs-drawer { transition: none; }

.s-docs-drawer-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--s-card-border, var(--bs-border-color, #e8ebef));
}

.s-docs-back, .s-docs-wide {
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 17px;
    line-height: 1;
    padding: 0 4px;
    color: var(--bs-secondary-color, #6b7684);
}
.s-docs-back:hover:not(:disabled), .s-docs-wide:hover { color: var(--bs-primary, #2f6fed); }
.s-docs-back:disabled { opacity: .3; cursor: default; }

/* Breadcrumbs and sibling steps keep the drawer navigable on its own. */
.s-docs-crumb-space { color: var(--bs-primary, #2f6fed); font-weight: 600; }
.s-docs-crumb { color: var(--bs-secondary-color, #6b7684); text-decoration: none; }
.s-docs-crumb:hover { color: var(--bs-primary, #2f6fed); text-decoration: underline; }
.s-docs-crumb-cur { color: var(--bs-body-color, #2d3748); font-weight: 600; }
.s-docs-crumb-sep { color: var(--bs-tertiary-color, #98a2b0); margin: 0 4px; }

.s-docs-drawer-foot {
    display: flex;
    gap: 8px;
    padding: 10px 14px;
    border-top: 1px solid var(--s-card-border, var(--bs-border-color, #e8ebef));
}
.s-docs-drawer-foot:empty { display: none; }
.s-docs-step {
    flex: 1;
    padding: 8px 10px;
    border: 1px solid var(--s-card-border, var(--bs-border-color, #e8ebef));
    border-radius: 6px;
    text-decoration: none;
    font-size: 12px;
    color: var(--bs-body-color, #2d3748);
    overflow: hidden;
}
.s-docs-step:hover { border-color: var(--bs-primary, #2f6fed); text-decoration: none; }
.s-docs-step span { display: block; font-size: 10px; color: var(--bs-tertiary-color, #98a2b0); }
.s-docs-step em {
    display: block; font-style: normal; font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.s-docs-next { text-align: right; }
.s-docs-drawer-title {
    flex: 1;
    font-weight: 700;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.s-docs-drawer-full {
    font-size: 11px;
    color: var(--bs-primary, #2f6fed);
    white-space: nowrap;
    text-decoration: none;
}
.s-docs-drawer-full:hover { text-decoration: underline; }
.s-docs-drawer-close {
    border: none;
    background: transparent;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    color: var(--bs-secondary-color, #6b7684);
    padding: 0 2px;
}
.s-docs-drawer-close:hover { color: var(--bs-primary, #2f6fed); }

.s-docs-drawer-crumbs {
    padding: 6px 14px;
    font-size: 11px;
    color: var(--bs-tertiary-color, #98a2b0);
    border-bottom: 1px solid var(--s-card-border, var(--bs-border-color, #e8ebef));
}
.s-docs-drawer-crumbs:empty { display: none; }

.s-docs-drawer-body {
    flex: 1;
    overflow: auto;
    padding: 16px 18px 40px;
}
.s-docs-drawer-body .dx-body { font-size: 14px; }

.s-docs-loading,
.s-docs-empty {
    color: var(--bs-tertiary-color, #98a2b0);
    font-size: 13px;
    padding: 24px 4px;
    text-align: center;
}
.s-docs-empty a { color: var(--bs-primary, #2f6fed); }

@media (max-width: 720px) {
    .s-docs-drawer { width: 100vw; max-width: 100vw; }
}

/* Banner on the admin Page Settings grid, pointing at the real editor. */
.dx-grid-note {
    padding: 9px 14px; background: var(--dx-accent-bg);
    border-bottom: 1px solid var(--dx-border);
    font-size: 12px; color: var(--dx-text);
}
.dx-grid-note a { color: var(--dx-accent); font-weight: 600; }

/* ------------------------------------------------------------- left sidebar */

.dx-sidebar {
    width: 270px; flex: none; border-right: 1px solid var(--dx-border);
    background: var(--dx-panel); display: flex; flex-direction: column;
}

.dx-space-row { padding: 10px 10px 6px; }
.dx-space-picker {
    width: 100%; padding: 6px 8px; border: 1px solid var(--dx-input-bd);
    border-radius: 5px; background: var(--dx-input-bg); color: var(--dx-input-text);
    font-size: 13px; font-weight: 600;
}

.dx-search-row { padding: 0 10px 8px; }
.dx-search {
    width: 100%; padding: 6px 10px; border: 1px solid var(--dx-input-bd);
    border-radius: 16px; background: var(--dx-input-bg); color: var(--dx-input-text);
    font-size: 12px;
}
.dx-search:focus { outline: none; border-color: var(--dx-accent); }

.dx-tree { flex: 1; overflow: auto; padding: 4px 6px 10px; }
.dx-sidebar-foot { padding: 8px 10px; border-top: 1px solid var(--dx-border); }
.dx-sidebar-foot .dx-btn { width: 100%; }

.dx-node {
    display: flex; align-items: center; gap: 4px;
    padding: 4px 6px; border-radius: 5px; cursor: pointer;
    font-size: 13px; line-height: 1.35; color: var(--dx-text);
}
.dx-node:hover { background: var(--dx-hover); }
.dx-node-current { background: var(--dx-selected); font-weight: 600; }
.dx-twisty { width: 12px; flex: none; color: var(--dx-faint); font-size: 10px; text-align: center; }
.dx-node-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dx-node-title i { color: var(--dx-muted); margin-right: 2px; }

/* Add-subpage button on each tree row.
   Selector is deliberately over-specific: Bootstrap ships in the "Base" style
   bundle which _LayoutHead emits AFTER this file, so a plain `.dx-node-add`
   loses to `.btn` on source order and inherits its padding and line-height -
   which is what pushed the glyph off centre. `.dx-sidebar .dx-node` in front
   wins on specificity regardless of order.
   The icon is a Font Awesome glyph rather than a "+" character because the
   text plus sits on the font's math axis, so it renders optically high even
   inside a perfectly centred box. */
.dx-sidebar .dx-node .dx-node-add,
.dx-sidebar .dx-node .dx-node-add.btn {
    width: 25px;
    height: 25px;
    min-width: 25px;
    flex: none;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    margin: 0;
    border-radius: 4px;
    font-size: 11px;
    line-height: 1;
}
.dx-sidebar .dx-node .dx-node-add > i {
    display: block;
    line-height: 1;
}

/* search results replace the tree */
.dx-hit { padding: 8px 8px; border-radius: 6px; cursor: pointer; }
.dx-hit:hover { background: var(--dx-hover); }
.dx-hit-title { font-weight: 600; font-size: 13px; }
.dx-hit-path { font-size: 10px; color: var(--dx-faint); margin: 1px 0 3px; }
.dx-hit-snip { font-size: 11px; color: var(--dx-muted); line-height: 1.45; }

/* --------------------------------------------------------------- main column */

.dx-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.dx-main-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 9px 26px; border-bottom: 1px solid var(--dx-border);
    flex-wrap: wrap;
}
.dx-crumbs { display: flex; align-items: center; gap: 5px; font-size: 12px; flex-wrap: wrap; }
.dx-crumb-space { color: var(--dx-accent); font-weight: 600; }
.dx-crumb { color: var(--dx-muted); cursor: pointer; }
.dx-crumb:hover { color: var(--dx-accent); }
.dx-crumb-current { color: var(--dx-text); font-weight: 600; cursor: default; }
.dx-crumb-sep { color: var(--dx-faint); }

.dx-actions { display: flex; align-items: center; gap: 8px; }
.dx-meta { font-size: 11px; color: var(--dx-faint); }
.dx-savestate { font-size: 11px; color: var(--bs-success, #16a34a); min-width: 90px; text-align: right; }

.dx-scroll {
    flex: 1; overflow: auto; padding: 18px 0 40px;
    display: flex; flex-direction: column;
}
/* Uncapped - the document uses the full width between the tree and the contents. */
.dx-article {
    width: 100%; margin: 0 auto; padding: 0 32px;
    display: flex; flex-direction: column; flex: 1; min-height: 0;
}

.dx-title { font-size: 30px; font-weight: 700; line-height: 1.2; margin: 0 0 4px; color: var(--dx-heading); }
.dx-byline { font-size: 12px; color: var(--dx-faint); margin-bottom: 18px; }

/* rendered article body */
.dx-body { padding: 0; line-height: 1.75; font-size: 15px; flex: 1; color: var(--dx-text); }
.dx-body h1 { font-size: 25px; margin: 32px 0 10px; font-weight: 700; color: var(--dx-heading); }
.dx-body h2 { font-size: 20px; margin: 28px 0 8px; font-weight: 700; color: var(--dx-heading); }
.dx-body h3 { font-size: 17px; margin: 22px 0 6px; font-weight: 700; color: var(--dx-heading); }
.dx-body h4 { font-size: 15px; margin: 18px 0 6px; font-weight: 700; color: var(--dx-heading); }
.dx-body p { margin: 0 0 13px; }
.dx-body ul, .dx-body ol { margin: 0 0 13px; padding-left: 26px; }
.dx-body li { margin-bottom: 5px; }
.dx-body img { max-width: 100%; border-radius: 6px; margin: 10px 0; }
.dx-body blockquote {
    border-left: 3px solid var(--dx-accent); background: var(--dx-accent-bg);
    margin: 14px 0; padding: 10px 16px; color: var(--dx-text);
}
.dx-body pre, .dx-body .ql-code-block-container {
    background: var(--dx-code-bg); color: var(--dx-code-text); border-radius: 6px;
    padding: 13px 16px; overflow: auto; font-size: 13px; margin: 14px 0;
}
.dx-body table { border-collapse: collapse; margin: 14px 0; width: 100%; }
.dx-body th, .dx-body td { border: 1px solid var(--dx-border); padding: 7px 10px; text-align: left; }
.dx-body th { background: var(--dx-hover); font-weight: 700; }
.dx-body a { color: var(--dx-accent); text-decoration: none; }
.dx-body a:hover { text-decoration: underline; }

.dx-related {
    margin-top: 30px; padding: 12px 16px; border-radius: 7px;
    background: var(--dx-accent-bg); border: 1px solid var(--dx-border); font-size: 13px;
}
.dx-related i { color: var(--dx-accent); margin-right: 6px; }

.dx-empty { text-align: center; color: var(--dx-faint); padding: 70px 20px; }
.dx-empty p { margin-bottom: 14px; }

/* prev / next */
/* Kept uncapped to stay aligned with .dx-article above it. */
.dx-pager {
    width: 100%; margin: 20px auto 0; padding: 0 32px;
    display: flex; gap: 12px; justify-content: space-between; flex: none;
}
.dx-page-link {
    flex: 1; text-align: left; cursor: pointer; background: var(--dx-surface);
    border: 1px solid var(--dx-border); border-radius: 8px; padding: 12px 16px;
    color: var(--dx-text);
}
.dx-page-link:hover { border-color: var(--dx-accent); }
.dx-page-link.dx-next { text-align: right; }
.dx-page-dir { display: block; font-size: 11px; color: var(--dx-faint); }
.dx-page-name { display: block; font-weight: 600; color: var(--dx-text); margin-top: 2px; }

/* -------------------------------------------------------------- edit surface */

.dx-title-input {
    width: 100%; border: none; outline: none; padding: 0 0 6px;
    font-size: 30px; font-weight: 700; color: var(--dx-heading); line-height: 1.2;
    flex: none; background: transparent;
}
.dx-title-input::placeholder { color: var(--dx-faint); }

/* The editor takes every pixel left between the title and the bottom of the
   page, so a big monitor gets a big writing surface. */
.dx-quill-host {
    margin-top: 8px; flex: 1; min-height: 0;
    display: flex; flex-direction: column;
}
/* Quill inserts .ql-toolbar as a SIBLING of the container, both direct children
   of .dx-quill-host - not nested inside a wrapper. So the host is the flex
   column, and the two children are sized individually below. A blanket
   `> div { flex-direction: column }` here would turn the toolbar itself into a
   column and stack every .ql-formats group onto its own row. */
.dx-quill-host .ql-toolbar {
    display: block;
    position: sticky; top: 0; z-index: 5; flex: none;
    background: var(--dx-panel); border: 1px solid var(--dx-border);
    border-radius: 7px 7px 0 0;
}
/* Keep Quill's own inline grouping, whatever a parent layout may have imposed. */
.dx-quill-host .ql-toolbar .ql-formats {
    display: inline-block;
    vertical-align: middle;
}

/* Custom table buttons. Quill renders an empty <button> for any toolbar name it
   has no icon for, so the label comes from CSS. Plain text rather than an icon
   font, because that depends on no external font being present or versioned. */
.dx-quill-host .ql-toolbar button[class^="ql-tbl"] {
    width: auto;
    min-width: 30px;
    padding: 0 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--dx-muted);
}
.dx-quill-host .ql-toolbar button[class^="ql-tbl"]:hover { color: var(--dx-accent); }
.dx-quill-host .ql-toolbar button.ql-tblNew::after    { content: "Table"; }
.dx-quill-host .ql-toolbar button.ql-tblRow::after    { content: "+Row"; }
.dx-quill-host .ql-toolbar button.ql-tblCol::after    { content: "+Col"; }
.dx-quill-host .ql-toolbar button.ql-tblDelRow::after { content: "−Row"; }
.dx-quill-host .ql-toolbar button.ql-tblDelCol::after { content: "−Col"; }
.dx-quill-host .ql-toolbar button.ql-tblDrop::after   { content: "×Table"; }

.dx-quill-host .ql-toolbar button.ql-pageLink {
    width: auto; min-width: 30px; padding: 0 6px;
    font-size: 11px; font-weight: 600; color: var(--dx-muted);
}
.dx-quill-host .ql-toolbar button.ql-pageLink::after { content: "↳ Page"; }
.dx-quill-host .ql-toolbar button.ql-pageLink:hover { color: var(--dx-accent); }

/* --- page reference picker ------------------------------------------------ */

.dx-pagepick {
    position: absolute; z-index: 20; top: 46px; left: 16px; width: 320px;
    background: var(--dx-surface); border: 1px solid var(--dx-border);
    border-radius: 8px; box-shadow: 0 8px 24px rgba(16, 24, 40, .18); padding: 8px;
}
.dx-pagepick-head {
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .05em; color: var(--dx-faint); margin-bottom: 6px;
}
.dx-pagepick-filter {
    width: 100%; padding: 5px 8px; margin-bottom: 6px;
    border: 1px solid var(--dx-input-bd); border-radius: 5px;
    background: var(--dx-input-bg); color: var(--dx-input-text); font-size: 12px;
}
.dx-pagepick-list { max-height: 260px; overflow: auto; }
.dx-pagepick-item {
    display: block; width: 100%; text-align: left; border: none;
    background: transparent; cursor: pointer; padding: 5px 8px;
    border-radius: 4px; font-size: 13px; color: var(--dx-text);
}
.dx-pagepick-item:hover { background: var(--dx-accent-bg); }

/* A reference to another page reads as a link with a small inbound arrow, so it
   is distinguishable from an ordinary external hyperlink. */
.dx-body a[href*="pageId="],
.dx-quill-host .ql-editor a[href*="pageId="] {
    color: var(--dx-accent);
    text-decoration: none;
    border-bottom: 1px solid var(--dx-accent-bg);
}
.dx-body a[href*="pageId="]::before,
.dx-quill-host .ql-editor a[href*="pageId="]::before {
    content: "↳ ";
    opacity: .7;
}
.dx-body a[href*="pageId="]:hover { border-bottom-color: var(--dx-accent); }

/* Tables Quill inserts carry no borders of their own. */
.dx-quill-host .ql-editor table,
.dx-body table.ql-table,
.dx-body table {
    border-collapse: collapse;
    width: 100%;
    margin: 14px 0;
}
.dx-quill-host .ql-editor table td,
.dx-quill-host .ql-editor table th {
    border: 1px solid var(--dx-border);
    padding: 7px 10px;
    min-width: 40px;
}

/* Font-size picker.
   Quill only ships ::before labels for its own four named sizes, so a px
   whitelist renders as blank rows. Echo the value instead - one rule covers
   every size, and adding a size to FONT_SIZES needs no CSS change. */
.dx-quill-host .ql-snow .ql-picker.ql-size { width: 62px; }
.dx-quill-host .ql-snow .ql-picker.ql-size .ql-picker-label[data-value]::before,
.dx-quill-host .ql-snow .ql-picker.ql-size .ql-picker-item[data-value]::before {
    content: attr(data-value);
}
/* The unset entry is "normal", which carries no data-value. */
.dx-quill-host .ql-snow .ql-picker.ql-size .ql-picker-label::before,
.dx-quill-host .ql-snow .ql-picker.ql-size .ql-picker-item::before { content: "Normal"; }

/* Preview each option at its own size, the way Word's size list behaves. */
.dx-quill-host .ql-snow .ql-picker.ql-size .ql-picker-item[data-value]::before {
    font-size: 13px;
}
.dx-quill-host .ql-snow .ql-picker.ql-size .ql-picker-options { max-height: 320px; overflow: auto; }

/* Font-family picker echoes its value too, rather than only Quill's three. */
.dx-quill-host .ql-snow .ql-picker.ql-font { width: 108px; }
.dx-quill-host .ql-snow .ql-picker.ql-font .ql-picker-label[data-value]::before,
.dx-quill-host .ql-snow .ql-picker.ql-font .ql-picker-item[data-value]::before {
    content: attr(data-value);
    text-transform: capitalize;
}
.dx-quill-host .ql-container {
    border: 1px solid var(--dx-border); border-top: none; border-radius: 0 0 7px 7px;
    flex: 1; min-height: 320px; font-size: 15px; font-family: inherit;
    overflow: auto; background: var(--dx-surface); color: var(--dx-text);
}
.dx-quill-host .ql-editor { line-height: 1.75; padding: 20px 24px; }

/* Only width is ever stored on an image; height follows so the aspect ratio
   cannot drift out of step with it. */
.dx-quill-host .ql-editor img,
.dx-body img { height: auto; }
.dx-quill-host .ql-editor img { cursor: pointer; }

/* --- image resize handles ------------------------------------------------- */

.dx-quill-host { position: relative; }

.dx-img-overlay {
    position: absolute; z-index: 6; pointer-events: none;
    outline: 1px solid var(--dx-accent);
    outline-offset: 1px;
}
.dx-img-size {
    position: absolute; top: -22px; left: 0;
    background: var(--dx-accent); color: #fff;
    font-size: 10px; padding: 1px 6px; border-radius: 3px;
    white-space: nowrap;
}
.dx-img-h {
    position: absolute; width: 10px; height: 10px;
    background: #fff; border: 2px solid var(--dx-accent); border-radius: 2px;
    pointer-events: auto;
}
.dx-img-nw { top: -5px; left: -5px;   cursor: nwse-resize; }
.dx-img-ne { top: -5px; right: -5px;  cursor: nesw-resize; }
.dx-img-sw { bottom: -5px; left: -5px;  cursor: nesw-resize; }
.dx-img-se { bottom: -5px; right: -5px; cursor: nwse-resize; }
.dx-quill-host .ql-editor.ql-blank::before { color: var(--dx-faint); font-style: normal; }

/* Quill's snow theme hardcodes near-black icon strokes and dropdown text, which
   disappear on a dark background. Repaint them from the theme's text colour. */
html.dark .dx-quill-host .ql-snow .ql-stroke { stroke: var(--dx-text); }
html.dark .dx-quill-host .ql-snow .ql-stroke-miter { stroke: var(--dx-text); }
html.dark .dx-quill-host .ql-snow .ql-fill,
html.dark .dx-quill-host .ql-snow .ql-stroke.ql-fill { fill: var(--dx-text); }
html.dark .dx-quill-host .ql-snow .ql-picker { color: var(--dx-text); }
html.dark .dx-quill-host .ql-snow .ql-picker-options {
    background: var(--dx-panel); border-color: var(--dx-border);
}
html.dark .dx-quill-host .ql-snow .ql-picker-label { border-color: transparent; }
html.dark .dx-quill-host .ql-snow.ql-toolbar button:hover .ql-stroke,
html.dark .dx-quill-host .ql-snow.ql-toolbar button.ql-active .ql-stroke {
    stroke: var(--dx-accent);
}
html.dark .dx-quill-host .ql-snow.ql-toolbar button:hover .ql-fill,
html.dark .dx-quill-host .ql-snow.ql-toolbar button.ql-active .ql-fill {
    fill: var(--dx-accent);
}
html.dark .dx-quill-host .ql-snow .ql-tooltip {
    background: var(--dx-panel); color: var(--dx-text);
    border-color: var(--dx-border); box-shadow: none;
}
html.dark .dx-quill-host .ql-snow .ql-tooltip input[type=text] {
    background: var(--dx-input-bg); color: var(--dx-input-text);
    border-color: var(--dx-input-bd);
}

/* ---------------------------------------------------------- version history */

.dx-history { margin-top: 14px; }
.dx-hist-row {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 4px; border-bottom: 1px solid var(--dx-border); font-size: 13px;
}
.dx-hist-v { font-weight: 700; color: var(--dx-accent); width: 44px; flex: none; }
.dx-hist-title { flex: 1; }
.dx-hist-who { color: var(--dx-faint); font-size: 11px; }
.dx-back { margin-top: 20px; }

/* ------------------------------------------------------------ right contents */

.dx-toc {
    width: 220px; flex: none; border-left: 1px solid var(--dx-border);
    padding: 34px 14px; overflow: auto; background: var(--dx-surface);
}
.dx-toc.dx-toc-hidden { visibility: hidden; }
.dx-toc-head {
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: var(--dx-faint); margin-bottom: 10px;
}
.dx-toc-item {
    display: block; width: 100%; text-align: left; border: none;
    background: transparent; cursor: pointer; padding: 4px 8px;
    font-size: 12px; color: var(--dx-muted); line-height: 1.4;
    border-left: 2px solid transparent; border-radius: 0 4px 4px 0;
}
.dx-toc-item:hover { color: var(--dx-accent); }
.dx-toc-item.dx-toc-active {
    color: var(--dx-accent); border-left-color: var(--dx-accent);
    background: var(--dx-accent-bg); font-weight: 600;
}
.dx-toc-l1 { padding-left: 8px; }
.dx-toc-l2 { padding-left: 18px; }
.dx-toc-l3 { padding-left: 30px; }
.dx-toc-l4 { padding-left: 42px; font-size: 11px; }

/* ------------------------------------------------------------- narrow screens */

@media (max-width: 1200px) {
    .dx-toc { display: none; }
}
@media (max-width: 860px) {
    .dx-sidebar { width: 210px; }
    .dx-article, .dx-pager { padding: 0 16px; }
}

/* ------------------------------------------- contextual help button (ERP toolbars)

   Injected into any grid toolbar by ScriptInit.ts when dbo.DocPageRoutes maps the
   current route to a page. It lives outside .docs-shell, so it cannot use the
   --dx-* variables above and derives its colour from the Bootstrap theme instead. */

.tool-button.doc-help-button .button-inner i {
    color: var(--bs-primary, #2f6fed);
    font-size: 15px;
}
.tool-button.doc-help-button:hover .button-inner i {
    opacity: .75;
}