/* wider content column so the 1100px screenshots are shown at full size */
:root { --content-width: 68em; }

/* The OTOBO logo is a dark blue PNG and disappears against the dark theme.
   Invert it there — once for the explicit toggle, once for the system setting. */
body[data-theme="dark"] img.otobo-logo { filter: brightness(0) invert(1); opacity: .9; }
@media (prefers-color-scheme: dark) {
  body[data-theme="auto"] img.otobo-logo { filter: brightness(0) invert(1); opacity: .9; }
}

/* Tables in this handbook carry long OTOBO setting names in code spans.
   Without these rules the first column cannot shrink, the table grows wider
   than the page, and the description column is cut off on the right. */

table.docutils {
    table-layout: fixed;
    width: 100%;
}

table.docutils td,
table.docutils th {
    vertical-align: top;
    padding: 0.5em 0.7em;
}

/* Long identifiers like AgentCustomerUserInformationCenter::Backend###0500-…
   must be allowed to wrap.

   Sphinx renders a code span as <code class="literal"><span class="pre">…</span></code>.
   The white-space: pre that prevents wrapping sits on the INNER span, so a rule
   on <code> alone changes nothing and the identifier keeps running out of its
   cell and over the next column. Both elements have to be addressed. */
table.docutils code,
table.docutils tt,
table.docutils .literal,
table.docutils code span.pre,
table.docutils .literal span.pre,
table.docutils span.pre {
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Monospace at body size eats the column and forces breaks in the middle of a
   word. A little smaller lets the setting names break where the reST already
   splits them — at the ### — instead of somewhere inside FilterElementPost. */
table.docutils code,
table.docutils tt,
table.docutils .literal {
    font-size: 0.82em;
}

/* The setting name should still read as one unit, so give it a little air
   from the description that follows it in the same cell. */
table.docutils td > p + p {
    margin-top: 0.4em;
}

/* Settings are documented as a definition list, not as a table: an OTOBO
   setting name runs up to 45 characters, and no table column is wide enough
   for that without breaking it in the middle of a word. On its own line the
   name simply fits. */
/* Colours come from the Furo variables, not fixed greys — a hard-coded light
   background keeps its light grey in dark mode and the name becomes unreadable. */
dl dt {
    margin-top: 1.4em;
    padding: 0.25em 0.5em;
    background: var(--color-background-secondary);
    border-left: 3px solid var(--color-background-border);
    font-weight: normal;
}

dl dt code,
dl dt .literal {
    background: transparent;
    border: 0;
    font-size: 0.9em;
}

/* The three longest names still exceed even the full width on a narrow window.
   Here a break is harmless — the name owns the whole line, so it wraps once at
   the end instead of being squeezed into a column. */
dl dt code,
dl dt .literal,
dl dt span.pre {
    white-space: normal !important;
    overflow-wrap: anywhere;
}

dl dd {
    margin-left: 1.2em;
}

dl dd p:first-child {
    margin-top: 0.4em;
    color: var(--color-foreground-secondary);
}

/* Wide tables that still do not fit (narrow windows) scroll inside themselves
   instead of pushing the whole page sideways. */
.wy-table-responsive,
div.table-wrapper {
    overflow-x: auto;
}