/*
Copyright (C) 2026, Zato Source s.r.o. https://zato.io

Licensed under AGPLv3, see LICENSE.txt for terms and conditions.
*/

/* The markdown widgets - floating notes, collapsible sections, comparison
   and filterable tables, see-also links. Each widget is emitted by its
   fence or macro during the build, this file is their one stylesheet. */

/* ------------------------------------------------------------ */
/* Floating note                                                  */
/* ------------------------------------------------------------ */

/* A small note that floats beside the text and flows with it. The note
   takes 0.316 of the document column, 16px padding, 12px vertical margin,
   20px off the text, 12px between the header and the body and between
   paragraphs. Type is transposed by rendered x-height with the factor
   1.13: body 15px, leading 20px, header 14px, letter spacing 0.55px.
   Colors come from the docs palette, the border is the docs hairline
   convention. The side is picked with -left or -right, the header is
   optional. */
.floating-note {
    box-sizing: border-box;
    width: 32%;

    /* No top margin - the note's top edge lines up with the first
       line of the text it floats beside. */
    margin: 0 0 12px;
    padding: 16px;
    border: 1px solid var(--zato-docs-divider);
    border-radius: 4px;
}

.floating-note-right {
    float: right;
    margin-left: 20px;
}

.floating-note-left {
    float: left;
    margin-right: 20px;
}

/* A div on purpose - no docs stylesheet rule targets it, so the widget
   owns its header outright, with the medium cut instead of a synthetic
   bold. Plain sentence case in the heading color - the muted uppercase
   treatment is the face of the docs' clickable nav labels and a note
   header is not a control. */
.floating-note-header {
    padding: 0 0 12px;
    font-family: ZatoMainFontMedium;
    font-size: 15px;
    font-weight: 600;
    color: var(--zato-docs-heading);
}

.floating-note p {
    margin: 0;
    padding: 0;
    font-size: 15px;
    line-height: 20px;
    color: var(--zato-docs-text);
}

.floating-note p + p {
    padding-top: 12px;
}

/* ------------------------------------------------------------ */
/* Collapsible section                                            */
/* ------------------------------------------------------------ */

/* A heading that expands into a content panel. 36px above the widget,
   a 16px chevron with a 16px gap to the title, the content indented
   32px under the heading with 8px above and 24px below. The title runs
   at 18px in the medium cut. The chevron swaps between a right and a
   down SVG on details[open] rather than rotating. */
.collapsible {
    padding-top: 36px;
}

.collapsible-heading {
    display: flex;
    flex-direction: row;
    align-items: center;
    list-style: none;
    cursor: pointer;
}

.collapsible-heading::-webkit-details-marker {
    display: none;
}

.collapsible-title {
    margin-left: 16px;
    font-family: ZatoMainFontMedium;
    font-size: 18px;
    font-weight: 600;
    color: var(--zato-docs-heading);
}

/* The badge after the collapsible title. Alignment runs in two layers of
   font arithmetic: vertical-align: middle centers on the x-height midpoint,
   which sits below the visual center of the title's capitals, so the
   outer layer - inheriting the title's font, which cap and ex resolve
   against - raises its baseline to halfway between the x-height midpoint
   and the cap-height midpoint, the optical middle of a mixed-case title,
   and the chip centers on that. */
.docs-chip-align {
    margin-left: 8px;
    vertical-align: calc((1cap - 1ex) / 4);
}

/* The one chip face the docs use - the dashboard's tag face in its
   accent tone: solid ink over a light tint of the same hue, scaled
   to the docs type. */
.docs-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    min-width: 30px;
    height: 19px;
    padding: 0 6px;
    border-radius: 3px;
    font-family: ZatoMainFontMedium;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #0f6ea8;
    background: #e0f0ff;
    user-select: none;
}

/* The chip to the right of the page title, linking to the copilot page -
   the shared chip face over a faint tint of the breadcrumb blue, muted
   ink, the text lifted by a sharp drop a shade lighter than the tint. */
a.ai-connect-chip,
a.ai-connect-chip:visited,
a.ai-connect-chip:hover {
    /* A long title must not squeeze the chip into wrapped lines. */
    flex: none;
    white-space: nowrap;
    margin-left: 20px;
    color: #50617a;
    background: #edf4fb;
    text-shadow: 1px 1px 0 #f6fafd;
    text-decoration: none;
}

.collapsible-chevron {
    flex: none;
    width: 16px;
    height: 16px;
    fill: var(--zato-docs-muted);
}

.collapsible-chevron-open,
.collapsible[open] .collapsible-chevron-closed {
    display: none;
}

.collapsible[open] .collapsible-chevron-open {
    display: block;
}

.collapsible-content {
    padding: 8px 0 24px 32px;
}

/* ------------------------------------------------------------ */
/* Content selector                                               */
/* ------------------------------------------------------------ */

/* A labeled select that switches which content pane shows below it.
   The label runs in the table headers' face, the select wears the same
   face as the table filter box. The incoming pane fades in. */
.content-selector {
    margin: 16px 0;
}

.content-selector-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
}

.content-selector-label {
    font-family: ZatoMainFontMedium;
    font-size: 15px;
    text-transform: uppercase;
    color: #50617a;
}

.content-selector-frame {
    position: relative;
    display: inline-flex;
    align-items: center;
    border-radius: 6px;
    background: #ffffff;
    box-shadow: #d4dee9 0 0 0 1px;
}

.content-selector-frame select {
    appearance: none;
    margin: 0;
    padding: 5px 32px 5px 9px;
    border: 0;
    border-radius: 6px;
    font-family: ZatoMainFont;
    font-size: 15px;
    color: var(--zato-docs-text);
    background: transparent;
    cursor: pointer;
}

.content-selector-frame svg {
    position: absolute;
    right: 9px;
    width: 14px;
    height: 14px;
    color: #50617a;
    pointer-events: none;
}

.content-selector-pane-hidden {
    display: none;
}

.content-selector-pane-entering {
    animation: content-selector-fade-in 0.43s ease-out;
}

@keyframes content-selector-fade-in {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/* ------------------------------------------------------------ */
/* Widget tables                                                  */
/* ------------------------------------------------------------ */

/* Lists inside widget table cells run compact - the cell's own
   padding already frames them, so the body prose spacing goes. */
.docs-widget-table td ul {
    padding-top: 0;
}

.docs-widget-table td li {
    padding-left: 20px;
}

.docs-widget-table td ul > li::before {
    left: 0;
}

/* The widget tables' own frame - columns size to their content,
   header cells at 8px 16px sitting on the body box, body cells at
   16px with a 1px hairline box around the whole body, rounded 4px at
   its corners. Type carries the 1.13 x-height factor: cells 16px,
   leading 22px, headers 15px. The blue-slate header is #50617a, the
   blue-gray hairline #ecf1f6, the cell text #414552. The plain-table
   rules in docs.css are scoped away from these tables, so everything
   here is the one source of their chrome. */
table.docs-widget-table {
    width: 100%;
    max-width: 100%;
    margin: 16px 0 8px;
    border-collapse: separate;
    border-spacing: 0;
}

.docs-widget-table thead th {
    padding: 8px 16px;
    font-family: ZatoMainFontMedium;
    font-size: 15px;
    font-weight: normal;
    text-align: center;
    text-transform: uppercase;
    vertical-align: bottom;
    color: #50617a;

    /* The headers' own ground - a column wash painted through a col
       element covers the whole column, this keeps it out of the head. */
    background: #ffffff;
}

.docs-widget-table thead th:first-child {
    text-align: left;
}

.docs-widget-table tbody td {
    padding: 16px;
    border-bottom: 1px solid #ecf1f6;
    font-size: 16px;
    line-height: 22px;
    vertical-align: top;
    color: #414552;
}

/* The hairline box around the whole table, headers included - the top
   edge and the upper corners sit on the first header row, the sides run
   down through the head and the body, the bottom comes from the cells'
   own border-bottom. The line under the headers is the first body row's
   border-top. */
.docs-widget-table thead tr:first-child th {
    border-top: 1px solid #ecf1f6;
}

.docs-widget-table thead tr:first-child th:first-child {
    border-left: 1px solid #ecf1f6;
    border-top-left-radius: 4px;
}

.docs-widget-table thead tr:first-child th:last-child {
    border-right: 1px solid #ecf1f6;
    border-top-right-radius: 4px;
}

.docs-widget-table tbody tr:first-child td {
    border-top: 1px solid #ecf1f6;
}

.docs-widget-table tbody td:first-child {
    border-left: 1px solid #ecf1f6;
}

.docs-widget-table tbody td:last-child {
    border-right: 1px solid #ecf1f6;
}

.docs-widget-table tbody tr:last-child td:first-child {
    border-bottom-left-radius: 4px;
}

.docs-widget-table tbody tr:last-child td:last-child {
    border-bottom-right-radius: 4px;
}

/* The label column - the medium cut with the heading color, one weight
   above the body, never synthetically bold. */
.docs-widget-table tbody td strong {
    font-family: ZatoMainFont;
    font-weight: normal;
    color: var(--zato-docs-heading);
}

/* A cell whose whole content is one of the marks sits centered
   under its centered column header. */
.docs-widget-table tbody td.table-cell-mark {
    text-align: center;
}

/* ------------------------------------------------------------ */
/* Comparison table                                               */
/* ------------------------------------------------------------ */

/* The yes and no marks - the dashboard's own Lucide icons, rendered by
   lucide.createIcons(). The check runs in the dashboard's checkmark
   green on a circle of the same green's light tint, shaded by a faint
   conic gradient centered in the circle so the chip reads quietly
   three-dimensional - the same treatment the see-also tooltip chip
   gets in the accent's tint. The cross runs in the muted slate the
   column headers use. The mark and any text around it form one flex
   row, centered against each other geometrically. */
.comparison-table-yes {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.comparison-table-yes-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: conic-gradient(from 210deg at 50% 50%, #5f9a63 0deg, #679f6b 140deg, #5f9a63 300deg, #5f9a63 360deg);
}

.comparison-table-yes svg {
    width: 12px;
    height: 12px;
    color: #ffffff;
}

/* Smaller and a lighter slate than the headers, still in the docs'
   blue family - present without competing with the check chips. */
.comparison-table-no svg {
    width: 14px;
    height: 14px;
    vertical-align: -2px;
    color: #8095b1;
}

/* A column that carries the faint blue-gray wash - any table marks any
   of its columns with this col element, the headers stay out of it
   through their own ground. */
col.table-column-highlight {
    background: #f4f7fa;
}

/* The footnotes under the table. */
.comparison-table-footnote {
    font-size: 15px;
    line-height: 21px;
    color: #414552;
}

.comparison-table-footnote sup {
    font-family: ZatoMainFontMedium;
}

/* ------------------------------------------------------------ */
/* Filterable table                                               */
/* ------------------------------------------------------------ */

/* The toolbar strip the filter sits in - a full-width header cell
   with the same wash as the column highlight, framed on three sides
   by the hairline and rounded at the top like the body box is at
   its corners. */
.docs-widget-table thead th.table-toolbar {
    padding: 8px 16px;
    background: #f4f7fa;
    border-top: 1px solid #ecf1f6;
    border-left: 1px solid #ecf1f6;
    border-right: 1px solid #ecf1f6;
    border-radius: 4px 4px 0 0;
    text-align: left;
}

/* Under the toolbar the box sides continue through the column header
   row - the left one always, the right one only when no scrollbar runs
   along the table's right edge. */
.filterable-table thead tr:last-child th:first-child {
    border-left: 1px solid #ecf1f6;
}

.filterable-table thead tr:last-child th:last-child {
    border-right: 1px solid #ecf1f6;
}

.table-scroll-active .filterable-table thead tr:last-child th:last-child {
    border-right: 0;
}

/* The filter box - a flex row with an 8px gap, a 6px radius and a
   1px #d4dee9 ring drawn as a shadow, 352px wide, holding a
   borderless input. */
.table-filter {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 352px;

    /* 4px 8px scaled with the type like the font sizes are. */
    padding: 5px 9px;
    border-radius: 6px;
    background: #ffffff;
    box-shadow: #d4dee9 0 0 0 1px;
}

/* The input's own outline is off, so the box carries the focus -
   the ring turns the docs link blue with a soft halo around it. */
.table-filter:focus-within {
    box-shadow: #006fbf 0 0 0 1px, rgba(0, 111, 191, 0.18) 0 0 0 4px;
}

.table-filter svg {
    flex: none;
    width: 14px;
    height: 14px;
    color: #667691;
}

.table-filter input {
    flex: 1;
    min-width: 0;
    padding: 0;
    border: 0;
    outline: none;
    font-family: ZatoMainFont;
    font-size: 14px;
    color: #273951;
}

.table-filter input::placeholder {
    color: #667691;
}

.table-filter-clear {
    display: none;
    align-items: center;
    gap: 4px;
    padding: 0;
    border: 0;
    background: transparent;
    font-family: ZatoMainFont;
    font-size: 14px;
    color: #667691;
    cursor: pointer;
}

.table-filter-clear-visible {
    display: inline-flex;
}

.table-filter-clear svg {
    width: 16px;
    height: 16px;
    stroke-width: 1.5px;
}

.table-empty td {
    color: #667691;
}

/* The scroll box - the filter script turns scrolling on only for tables
   that outgrow it in the first place, and those keep their scrollbar
   permanently, disabled rather than removed when filtering shortens
   the table, so nothing shifts as rows come and go. */
.table-scroll {
    margin: 16px 0 8px;
}

.table-scroll-active {
    max-height: 550px;
    overflow-y: scroll;

    /* Author-set colors make both engines paint the whole scrollbar
       themselves - with the stock rendering, a pane whose content fits
       gets a near-white track that visually vanishes, with these colors
       the track stays painted and the bar reads as disabled. Thumb is
       the docs border tone, the track a step below the zebra stripe. */
    scrollbar-color: #9db1c7 #e4ebf2;
}

.table-scroll table {
    margin: 0;
}

/* The alternating wash - the filter script reassigns the class over
   the visible rows, so the stripes keep alternating when rows are
   filtered out. */
.table-row-even td {
    background-color: #f7fafc;
}

/* ------------------------------------------------------------ */
/* See also                                                       */
/* ------------------------------------------------------------ */

/* Links to related pages - the open book leads each row and hovers
   together with the text, in the docs accent instead of staying gray. */
.see-also-list {
    padding: 8px 0 0;
    margin: 0;
    list-style: none;
}

.see-also-list li {
    display: flex;
    align-items: center;
    padding: 4px 0;
}

/* The document's own list bullets stay off these rows. */
.docs-leaf-document .see-also-list > li::before {
    content: none;
}

.see-also-list a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    color: var(--zato-docs-link);
    text-decoration: none;
}

.see-also-list svg,
.see-also-table a svg {
    flex: none;
    width: 16px;
    height: 16px;
    color: #667691;
}

.see-also-list a:hover svg,
.see-also-table a:hover svg {
    color: var(--zato-dark-accent-color);
}

/* The same links inside a see-also table - the book leads each one and the
   text keeps the cell's own size, only the list rows run in their own cut.
   The book rides the first line, so a link that wraps keeps it at the top,
   centered against that line's own height. */
.see-also-table a {
    display: inline-flex;
    align-items: flex-start;
    gap: 8px;
    color: var(--zato-docs-link);
    text-decoration: none;
}

.see-also-table a svg {
    margin-top: calc((1lh - 16px) / 2);
}

/* The see-also tooltip - a light card, the book in a tinted round chip
   and the target page's title above its description. */
.tippy-box[data-theme~=see-also] {
    background: #ffffff;
    color: #414552;

    /* The dashboard's accent blue rather than a neutral slate - the
       card's frame carries the same hue the title inside it runs in. */
    border: 1px solid #4d87c7;
    border-radius: 3px;
    box-shadow: 0 6px 24px rgba(0, 25, 51, 0.18), 0 1px 3px rgba(0, 25, 51, 0.12);
}

.tippy-box[data-theme~=see-also] > .tippy-arrow {
    color: #ffffff;
}

.tippy-box[data-theme~=see-also] .tippy-content {
    padding: 14px 16px;
}

.see-also-tip {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    max-width: 300px;
}

/* The chip carries the same subtle conic sheen the comparison table
   check circles use, in a livelier cut of the accent blue. */
.see-also-tip-icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: conic-gradient(from 210deg at 50% 50%, #cce3fa 0deg, #b3d5f5 140deg, #cce3fa 300deg, #cce3fa 360deg);
}

.see-also-tip-icon svg {
    width: 16px;
    height: 16px;
    color: #0f6ea8;
}

.see-also-tip-card {
    display: block;
    font-size: 14px;
    line-height: 1.45;
}

.see-also-tip-title {
    display: block;
    font-family: ZatoMainFontMedium;
    font-size: 15px;
    color: var(--zato-dark-accent-color);
    margin: 0 0 4px;
}

.see-also-tip-text {
    display: block;
    color: #5a6b84;
}