/* Project styles only; CSS under shared/ is never edited. */

.art-title .webix_el_box {
    font-size: 18px;
    font-weight: 600;
}

.art-muted,
.art-muted-label .webix_el_box {
    color: #7a869a;
}

.art-num {
    text-align: right;
}

.art-row-hover {
    background: #eef4fb;
}

.art-detail-title .webix_el_box {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.art-empty {
    padding: 24px;
    color: #7a869a;
}

/* Detail field list */
.art-fields {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.art-fields th,
.art-fields td {
    padding: 5px 10px;
    border-bottom: 1px solid #edf0f3;
    text-align: left;
    vertical-align: top;
}

.art-fields th {
    width: 1%;
    font-weight: 500;
    color: #5a6577;
    white-space: nowrap;
}

.art-fields td {
    overflow-wrap: anywhere;
}

/* Status and callback-state badges: one fixed class per canonical value. */
.art-badge {
    display: inline-block;
    padding: 0 8px;
    border-radius: 10px;
    font-size: 12px;
    line-height: 20px;
    font-weight: 600;
    background: #e6e9ee;
    color: #3d4a5c;
}

.status-pending-submit { background: #eceff3; color: #56627a; }
.status-accepted       { background: #e1ecfb; color: #1f5fae; }
.status-in-progress    { background: #fff1d6; color: #8a5a00; }
.status-completed      { background: #dcf3e3; color: #19703a; }
.status-failed         { background: #fde2e1; color: #b3261e; }
.status-timed-out      { background: #f6e3f4; color: #8e2a84; }
.status-handoff-failed { background: #b3261e; color: #ffffff; }

.callback-not-due   { background: #eceff3; color: #56627a; }
.callback-pending   { background: #fff1d6; color: #8a5a00; }
.callback-delivered { background: #dcf3e3; color: #19703a; }
.callback-failed    { background: #fde2e1; color: #b3261e; }

/* Narrow tables in the detail panel */
.art-compact .art-badge {
    padding: 0 5px;
    font-size: 11px;
}

.art-compact .webix_cell,
.art-compact .webix_hcell {
    padding-left: 6px;
    padding-right: 6px;
}

/* Sidebar */
.art-sidebar {
    border-right: 1px solid #e3e6ea;
}

/* Call example page */
.art-doc {
    padding: 18px 24px 32px 24px;
}

/* About 95 characters of body text per line. */
.art-doc-intro {
    max-width: 108ch;
}

.art-doc-intro p {
    margin: 0 0 12px 0;
    line-height: 1.6;
    font-size: 15px;
}

.art-doc-intro code {
    font-family: Consolas, "Courier New", monospace;
    font-size: 14px;
    background: #f1f3f5;
    padding: 1px 5px;
    border-radius: 3px;
}

.art-code-label {
    width: 80%;
    margin: 18px 0 0 0;
    font-family: Consolas, "Courier New", monospace;
    font-size: 13px;
    font-weight: 600;
    color: #5a6577;
}

.art-code-label + .art-code-wrap {
    margin-top: 4px;
}

/* The code block takes 80% of the content width; only the block itself
   scrolls horizontally if a line is ever longer, never the page. */
.art-code-wrap {
    display: block;
    width: 80%;
    max-width: 100%;
    overflow-x: auto;
    margin-top: 8px;
    background: #ffffff;
    border: 1px solid #dfe3e8;
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* The skin sets separate borders with 2px spacing on tables, which leaves
   gaps between gutter rows; collapse them. */
.art-code {
    width: 100%;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    font-family: Consolas, "Cascadia Mono", "Courier New", monospace;
    font-size: 14.5px;
    line-height: 22px;
    color: #1f2328;
}

.art-code tr,
.art-code td {
    border: 0;
}

.art-code td {
    padding: 0;
    vertical-align: top;
}

.art-ln {
    width: 1%;
    min-width: 3ch;
    padding: 0 14px 0 14px !important;
    text-align: right;
    color: #8c959f;
    background: #f6f8fa;
    border-right: 1px solid #e5e8eb;
    user-select: none;
}

.art-src {
    padding: 0 20px 0 14px !important;
    white-space: pre;
    tab-size: 4;
}

.art-code tr:first-child td { padding-top: 10px !important; }
.art-code tr:last-child td { padding-bottom: 10px !important; }

/* Light editor palette, slightly brighter than the usual light theme. */
.py-com  { color: #008a00; font-style: italic; }
.py-str  { color: #c2185b; }
.py-dec  { color: #b36b00; }
.py-num  { color: #0b8a6e; }
.py-ctl  { color: #a626a4; font-style: italic; }
.py-kw   { color: #0033cc; }
.py-bi   { color: #0a7ea4; }
.py-fn   { color: #7a4d00; font-weight: 600; }
.py-cls  { color: #0a7ea4; font-weight: 600; }
.py-call { color: #7a4d00; }

/* Scenario diagrams page */
.art-diagram-caption {
    padding: 12px 24px 0 24px;
    font-size: 15px;
    line-height: 1.5;
    color: #3d4a5c;
    max-width: 108ch;
}

/* Centered, capped width; only this box scrolls horizontally if ever needed. */
.art-diagram-wrap {
    padding: 12px 24px 32px 24px;
}

.art-diagram {
    max-width: 1200px;
    margin: 0 auto;
    overflow-x: auto;
    text-align: center;
}

.art-diagram svg {
    height: auto;
}

.art-diagram-error {
    text-align: left;
    color: #b3261e;
    white-space: pre-wrap;
}

.art-diagram-caption code {
    font-family: Consolas, "Courier New", monospace;
    font-size: 14px;
    background: #f1f3f5;
    padding: 1px 5px;
    border-radius: 3px;
}

/* ER diagram keeps its natural size for readability; the box scrolls if wider. */
.art-schema {
    max-width: 100%;
}

/* Documentation page (rendered markdown) */
.art-md {
    max-width: 108ch;
    font-size: 15px;
    line-height: 1.6;
    color: #1f2328;
}

.art-md h1 { font-size: 26px; margin: 4px 0 14px 0; font-weight: 600; }
.art-md h2 { font-size: 21px; margin: 28px 0 10px 0; padding-bottom: 4px; border-bottom: 1px solid #e3e6ea; font-weight: 600; }
.art-md h3 { font-size: 17px; margin: 22px 0 8px 0; font-weight: 600; }
.art-md p, .art-md ul, .art-md ol { margin: 0 0 12px 0; }
.art-md li { margin: 3px 0; }

.art-md code {
    font-family: Consolas, "Courier New", monospace;
    font-size: 14px;
    background: #f1f3f5;
    padding: 1px 5px;
    border-radius: 3px;
}

/* Repository paths from README links: not served by the web server, so not clickable. */
.art-md code.art-md-ref { cursor: help; border-bottom: 1px dotted #9aa3ad; }
.art-md a { color: #1f6fb2; }

.art-md pre.art-md-code {
    margin: 10px 0 16px 0;
    padding: 12px 16px;
    background: #ffffff;
    border: 1px solid #dfe3e8;
    border-radius: 6px;
    overflow-x: auto;
    line-height: 22px;
}

.art-md pre.art-md-code code {
    background: none;
    padding: 0;
    font-size: 14px;
    white-space: pre;
}

.art-md table {
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    margin: 10px 0 16px 0;
    font-size: 14px;
}

.art-md th, .art-md td {
    border: 1px solid #dfe3e8;
    padding: 6px 12px;
    text-align: left;
    vertical-align: top;
}

.art-md th { background: #f6f8fa; font-weight: 600; }

.art-md blockquote {
    margin: 0 0 12px 0;
    padding: 4px 14px;
    border-left: 4px solid #d0d7de;
    color: #57606a;
}

.art-md-mermaid {
    margin: 12px 0 18px 0;
    overflow-x: auto;
    text-align: center;
}

/* Two-line grid headers for long column names (row height set on the header cell). */
/* Webix sets the header line-height inline to the row height; override it so
   both lines stay inside the 40px header cell. */
.webix_hcell.art-wrap-h {
    white-space: normal !important;
    line-height: 17px !important;
    padding-top: 3px;
    box-sizing: border-box;
}

/* Mermaid measures labels outside the page; keep page typography out of the SVG. */
.art-md-mermaid svg,
.art-diagram svg {
    line-height: normal;
}

.art-md-mermaid svg p,
.art-diagram svg p {
    margin: 0;
}

/* Edge labels are SVG text: a white halo keeps crossing lines from running through them. */
.art-md-mermaid .edgeLabel text,
.art-diagram .edgeLabel text {
    paint-order: stroke;
    stroke: #ffffff;
    stroke-width: 5px;
    stroke-linejoin: round;
}