@import "debusine-select2.css";

html {
    /*
     * Make anchors visible when scrolling to them. E.g. when sending a link
     * to file with a line highlighted.
     */
    scroll-padding-top: 3rem;
}

:root[data-bs-theme=light] {
    --bs-tertiary-bg: rgb(238, 239, 240);
    --bs-tertiary-bg-rgb: 238, 239, 240;
    --debusine-hover-color-multiplier: 0.8;
    --debusine-disabled-color-multiplier: 1.5;
    --debusine-hover-layer: rgb(0 0 0 / 20%);
}
:root[data-bs-theme=dark] {
    --bs-tertiary-bg: rgb(53, 58, 63);
    --bs-tertiary-bg-rgb: 53, 58, 63;
    --debusine-hover-layer: rgb(255 255 255 / 20%);
    --debusine-hover-color-multiplier: 1.2;
    --debusine-disabled-color-multiplier: 0.5;
}

/* Theme-friendly way to specify colors for toolbars */
.bg-debusine-toolbar {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-secondary-bg-rgb), var(--bs-bg-opacity)) !important;
}
/* Button that preserves the underlying color scheme */
.btn-debusine {
  --bs-btn-hover-color: rgb(from var(--bs-btn-color) calc(r * var(--debusine-hover-color-multiplier)) calc(g * var(--debusine-hover-color-multiplier)) calc(b * var(--debusine-hover-color-multiplier)));
  --bs-btn-hover-bg: var(--debusine-hover-layer);
  --bs-btn-disabled-color: rgb(from var(--bs-btn-color) calc(r * var(--debusine-disabled-color-multiplier)) calc(g * var(--debusine-disabled-color-multiplier)) calc(b * var(--debusine-disabled-color-multiplier)));
  --bs-btn-disabled-bg: var(--bs-btn-bg);
  --bs-btn-disabled-border-color: var(--bs-btn-border-color);
}

#breadcrumbs {
    background-color: var(--bs-body-bg);
    position: sticky;
    top: 0;
    z-index: 1;
}

.order-active {
    color: inherit;
    text-decoration: none; /* avoid link underline */
}

.order-inactive {
    color: grey;
    text-decoration: none; /* avoid link underline */
}

.errorlist {
    color:red;
}

footer {
    font-size: 80%;
}
footer a {
    text-decoration: none;
}
footer a:visited {
}
footer button {
    background: none;
    border: none;
    margin: 0;
    padding: 0;
    color: var(--bs-link-color);
}

pre.formatted-content {
    --file-lineno-width: 4em;
}

.formatted-content-lineno a {
    display: block;
    width: 100%;
    text-decoration: none;
    color: inherit;
    min-width: var(--file-lineno-width);
}
.formatted-content-lineno a:hover {
    background-color: #ffc;
    color: #000;
}

pre.formatted-content {
    margin-bottom: 0;
}

.formatted-content pre {
    margin-bottom: 0;
}

pre.formatted-content a {
    display: inline-block;
    width: var(--file-lineno-width);
    text-align: right;
    padding-right: 0.5em;
    border-right: 1px solid #555;
    padding-left: 0.5em;
    /* user-select: none; : implemented using pre.formatted-content a::before to avoid problem with Firefox ESR 140 */
    text-decoration: none;
    color: inherit;
    vertical-align: top;
}

/* Firefox ESR 140, in trixie, adds an extra new line if the selected
   text spans inline block tags with "user-select: none;" (it does not copy the
   contents, but it adds a new line). To avoid hiding the text using
   "user-select: none;": add the line numbers using below approach: pass them
   as attribute and make them visible using CSS.
*/
pre.formatted-content a::before {
    content: attr(data-dln);  /* data-dln: data-line-number. This is repeated once per line, keep it short */
    user-select: none;
}

pre.formatted-content a:hover {
    background-color: #ffc;
    color: #000;
}

pre.formatted-content i {
    padding-left: 0.5em;
    display: inline-block;
    font-style: normal;
    color: #eeeeec;

    /* Line wrapping */
    width: calc(100% - var(--file-lineno-width));
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

pre.formatted-content a:target, pre.formatted-content a:target + i, summary.align-items-start:target {
    background-color: #777;
}

pre.formatted-content a:focus-visible, summary.align-items-start:target {
    outline: none;
}

/* Makes the calculation of width:calc(100% - var(--file-lineno-width))
 * not need to account for paddings/margins (box-sizing: border-box).
 */
div.formatted-content > a,
div.formatted-content > div {
    box-sizing: border-box;
}

/* Workaround for https://issues.chromium.org/issues/40069963 */
details[open]::details-content {
  display: contents;
}

.log-section-title {
    display: contents;
    user-select: none;
}

.log-section-label {
    display: inline-block;
    font-family: monospace;
    font-weight: bold;
    color: rgb(102, 255, 102);
    user-select: none;
}

/* Arrow to expand/collapse a section */
.log-section-title::before {
    content: "▸";
    display: inline-block;
    margin-right: 0.4em;
    transform: rotate(0deg);
    transition: transform 0.15s ease-in-out;
    color: rgb(102, 255, 102);
}

details[open] .log-section-title::before {
    transform: rotate(90deg);
}

/* Style logout button to appear in the same way it did when we were logging
 * out using a GET request via a link.
 */
#logout-form button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

/*
 * A height attribute (any height attribute) is needed on a table element to be
 * able to use height: 100% inside table cells.
 *
 * See https://stackoverflow.com/a/73399942
 */
table {
    height: fit-content;
}


div.table-filter-form-container
{
    width: 30rem;
}

form.table-filter-form .select2
{
    flex-grow: 1;
}

/* Bootstrap supports buttons styled like links, but their default alignment
 * and padding means that they aren't quite suitable for use in the middle
 * of a paragraph of text.  Adjust these.
 */
button.btn-link.in-running-text
{
    vertical-align: baseline;
    padding: 0;
}

#scope-workspace-list th:nth-last-child(-n+3),
#scope-workspace-list td:nth-last-child(-n+3) {
    width: 1%;
    white-space: nowrap; /* Prevent wrapping */
}

.workflow-ancestor {
    opacity: 0.6;
}

.table-tds-vertical-align-middle td {
    vertical-align: middle;
}

.table-ths-vertical-align-middle th {
    vertical-align: middle;
}

/* Allow wrapping but still preserve newlines */
pre.pre-wrap {
    white-space: pre-wrap;    /* preserve \n, wrap long lines */
    overflow-wrap: anywhere;  /* break long URLs/tokens */
}

.error-list {
    list-style-type: none;  /* remove bullets */
    padding-left: 0;
    margin-left: 0;
}

#breadcrumbs {
    background-color: var(--bs-body-bg);
    display: flex;
    flex-direction: row;
    align-items: baseline;
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
    border-top: 1pt solid;
    border-bottom: 1pt solid;
    border-color: var(--bs-border-color);
}

.breadcrumb-parent::after {
    padding-left: 1ex;
    content: "⧸";
    padding-right: 1ex;
}
.breadcrumb-parent {
    font-size: calc(var(--bs-body-font-size) * 0.875);
    color: var(--bs-gray);
}
#breadcrumbs a {
    text-decoration: none;
}
#breadcrumbs a:hover {
    color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));
    text-decoration: var(--bs-link-decoration);
}

.breadcrumb-separator::before {
    padding-left: 1ex;
    padding-right: 1ex;
}
.breadcrumb-separator {
    font-size: calc(var(--bs-body-font-size) * 0.875);
}

.breadcrumb-current {
    font-size: var(--bs-body-font-size);
}
h1.breadcrumb-current {
    margin: 0;
}

table.task-input-fields {
    width: 100%;
}
table.task-input-fields .name {
    white-space: nowrap;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
table.task-input-fields td:last-child {
    width: 100%
}
.task-input-fields td .details {
    visibility: hidden;
    display: block;
    margin-right: 0.5em;
}
.task-input-fields td:hover .details {
    visibility: visible;
}
.task-input-fields-popover {
    /*--bs-popover-max-width: 500px;*/
}
