/* Copyright (c) 2026 Oleksii Mykhalevych */

/* Script popups: the picker, the parameters popup and the results popup that ScriptRunnerService opens with
   BsModalService. ngx-bootstrap puts the configured `class` on the .modal-dialog: every script dialog carries
   scripts-dialog plus scripts-picker-dialog, scripts-parameters-dialog or scripts-results-dialog. The content renders
   at <body> level, out of reach of component styles, hence this global stylesheet (as css/audit/projectAudit.css is for
   the Project Audit modal). */

/* ---- Dialog ---- */

.modal-dialog.scripts-picker-dialog {
    width: 520px;
}

.modal-dialog.scripts-parameters-dialog {
    width: 560px;
}

.modal-dialog.scripts-results-dialog {
    width: 720px;
}

/* A window narrower than the dialog: it keeps 10px from each edge. */
.modal-dialog.scripts-dialog {
    max-width: calc(100vw - 20px);
}

/* Bootstrap's `.modal.in .modal-dialog { transform: translate(0, 0) }` makes the dialog the containing block of its
   position:fixed descendants, which shifts the list of custom-dropdown (placed in viewport coordinates). Without the
   transform it opens right under its input, as in the Project Audit modal. */
.modal-dialog.scripts-dialog,
.modal.in .modal-dialog.scripts-dialog {
    transform: none !important;
}

.scripts-dialog > .modal-content {
    border: none;
    border-radius: 4px;
    background-color: #ffffff;
    box-shadow: 0 2px 4px 0 rgba(0, 41, 199, 0.2);
}

.scripts-popup {
    font-family: GlowRegular;
    font-size: 14px;
    color: #4a4a4a;
}

.scripts-header {
    display: flex;
    align-items: center;
    height: 50px;
    padding: 0 20px;
    border-bottom: 1px solid #e0e0e0;
}

.scripts-title {
    overflow: hidden;
    font-family: GlowSemibold;
    font-size: 14px;
    color: #4a4a4a;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The body scrolls between the fixed header and footer, also in a low window. */
.scripts-body {
    max-height: min(470px, calc(100vh - 220px));
    overflow-y: auto;
    padding: 16px 20px;
}

/* A run on many projects: the results use the window's height. */
.scripts-results-dialog .scripts-body {
    max-height: calc(100vh - 220px);
}

.scripts-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 12px 20px 20px;
}

/* The picker's footer says what it loads, or why the pick failed, in the room left of the button. */
.scripts-footer-message {
    display: flex;
    flex: 1 1 0;
    align-items: center;
    gap: 8px;
    min-width: 0;
    margin-right: 16px;
}

.scripts-footer-message .ui-loader-dark {
    flex: 0 0 20px;
    margin-top: 0;
}

.scripts-footer-text {
    overflow: hidden;
    color: #808080;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.scripts-footer .ui-btn-grey {
    width: 104px;
    height: 38px;
}

.scripts-footer .ui-btn-light {
    width: 131px;
}

/* ---- States and texts ---- */

.scripts-state {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    color: #808080;
}

.scripts-state .ui-loader-dark {
    flex: 0 0 20px;
    margin-top: 0;
}

.scripts-error {
    color: #ec4a43;
    overflow-wrap: anywhere;
}

.scripts-message {
    margin-bottom: 12px;
}

.scripts-muted {
    color: #808080;
}

/* ---- Picker ---- */

.scripts-section-title {
    margin: 4px 0 6px;
    font-family: GlowSemibold;
    font-size: 12px;
    color: #808080;
}

.scripts-show-all + .scripts-section-title {
    margin-top: 16px;
}

.scripts-picker-list {
    margin: 0 -10px;
}

/* While the runner fetches the picked script, the lists wait dimmed and take no click. */
.scripts-picker--busy .scripts-picker-list {
    opacity: 0.6;
    pointer-events: none;
}

/* A row takes no click itself: its name picks the script and its star toggles the favorite. */
.scripts-picker-row {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 36px;
    padding: 0 10px 0 0;
}

/* The focusable part of a row, which picks the script: its name and tag, from the row's left edge. The star beside it
   is a button of its own. Only this part reacts to the pointer, as only a click on it picks. */
.scripts-picker-pick {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 10px;
    min-width: 0;
    height: 100%;
    padding-left: 10px;
    border-radius: 4px;
    cursor: pointer;
}

.scripts-picker-pick:hover {
    background-color: #fafafa;
}

.scripts-picker-pick:hover .scripts-picker-name {
    color: #5774e7;
}

.scripts-picker-pick:focus-visible,
.scripts-star:focus-visible,
.scripts-show-all:focus-visible {
    outline: 2px solid #5774e7;
    outline-offset: 1px;
}

.scripts-picker-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.scripts-tag {
    flex: 0 0 auto;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 11px;
    line-height: 16px;
}

.scripts-tag--public {
    background-color: #eef1fe;
    color: #5774e7;
}

.scripts-tag--private {
    background-color: #f1f1f1;
    color: #808080;
}

/* The star: a 32px target around its 16px image. The negative margins keep the row's layout as for the image alone,
   and the focus ring stays around the image. */
.scripts-star {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: 0 -8px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
}

.scripts-star:focus-visible {
    outline-offset: -7px;
}

.scripts-star:disabled {
    cursor: default;
}

.scripts-star--saving {
    opacity: 0.4;
}

.scripts-show-all {
    display: inline-block;
    margin-top: 8px;
    padding: 0;
    border: none;
    background: none;
    line-height: 20px;
}

.scripts-search {
    width: 100%;
    margin-bottom: 8px;
    padding: 0 10px;
}

/* ---- Parameters ---- */

.scripts-parameter {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 6px 0;
    border-bottom: 1px solid #f1f1f1;
}

.scripts-parameter:last-child {
    border-bottom: none;
}

/* A list's label stays beside its first element as the rows grow. */
.scripts-parameter-list {
    align-items: flex-start;
}

.scripts-parameter-label {
    flex: 0 0 180px;
    min-width: 0;
    padding-right: 16px;
}

.scripts-parameter-name,
.scripts-parameter-type {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.scripts-parameter-name {
    font-family: GlowSemibold;
}

.scripts-parameter-type {
    font-size: 12px;
    color: #808080;
}

.scripts-parameter-editor {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.scripts-number,
.scripts-text,
.scripts-time {
    padding: 0 10px;
}

.scripts-number {
    width: 140px;
}

.scripts-text {
    width: 100%;
}

.scripts-time {
    width: 124px;
}

.scripts-date .customDatepicker__container .datepicker {
    width: 130px;
    margin-left: 0;
}

/* A user, a group or a team, an element, a phase or an assignment of the project, or a list of them; and the
   dropdowns of an attribute picker. */
.scripts-entity {
    width: 260px;
}

/* A list or a collection of a scalar: one row per element with its Remove, and Add below them. */
.scripts-list {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-width: 0;
}

.scripts-list-item {
    display: flex;
    align-self: stretch;
    align-items: center;
    gap: 8px;
}

.scripts-list-item .scripts-text {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
}

.scripts-list-add {
    height: 32px;
    padding: 0 16px;
}

.scripts-list-add:focus-visible,
.scripts-list-remove:focus-visible {
    outline: 2px solid #5774e7;
    outline-offset: 2px;
}

/* An attribute picker: the scope switch, then the attribute and its value. */
.scripts-attribute {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* The pickers of a list of attributes: a light line between one picker and the next. */
.scripts-attribute-item + .scripts-attribute-item {
    padding-top: 8px;
    border-top: 1px solid #ecedf2;
}

.scripts-attribute-scopes {
    display: flex;
    gap: 4px;
}

.scripts-attribute-scope {
    height: 24px;
    padding: 0 10px;
    border: 1px solid #d6d9e5;
    border-radius: 12px;
    background-color: #ffffff;
    font-size: 12px;
    color: #4a4a4a;
    cursor: pointer;
}

.scripts-attribute-scope--active {
    border-color: #5774e7;
    background-color: #eef1fd;
    color: #5774e7;
}

.scripts-attribute-scope:focus-visible {
    outline: 2px solid #5774e7;
    outline-offset: 2px;
}

.scripts-unit {
    color: #808080;
}

.scripts-unsupported {
    font-size: 13px;
    color: #808080;
}

/* A record parameter: its name above it, then the group of its fields or the table of its records. */
.scripts-parameter-record {
    flex-direction: column;
    align-items: stretch;
}

.scripts-parameter-record > .scripts-parameter-label {
    flex: 0 0 auto;
    padding: 0 0 6px;
}

.scripts-parameter-record > .scripts-parameter-editor {
    display: block;
}

/* A record's group: one line per field, its name and type before its editor, in a light frame. */
.scripts-record {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 10px;
    border: 1px solid #ecedf2;
    border-radius: 4px;
}

.scripts-record-none {
    display: flex;
    align-items: center;
    gap: 8px;
}

.scripts-record-field {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.scripts-record-label {
    flex: 0 0 120px;
    min-width: 0;
}

.scripts-record-editor {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

/* Set, and None for a nested record or a record's date. */
.scripts-record-switch {
    height: 32px;
    padding: 0 12px;
}

.scripts-record-switch:focus-visible {
    outline: 2px solid #5774e7;
    outline-offset: 2px;
}

/* A list of records: the table scrolls sideways in a narrow dialog; Add below it. */
.scripts-records {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-width: 0;
}

.scripts-record-table {
    max-width: 100%;
    overflow-x: auto;
}

.scripts-record-table table {
    border-collapse: collapse;
}

.scripts-record-table th,
.scripts-record-table td {
    padding: 4px 6px;
    border: 1px solid #ecedf2;
    vertical-align: top;
}

.scripts-record-table th {
    font-family: GlowSemibold;
    font-weight: normal;
    text-align: left;
    white-space: nowrap;
    background-color: #f4f5fc;
}

/* The editors of a table's cell are narrower than a parameter's. */
.scripts-record-table .scripts-entity {
    width: 180px;
}

.scripts-record-table .scripts-number {
    width: 100px;
}

/* ---- Results ---- */

.scripts-result {
    margin-bottom: 12px;
    border: 1px solid #ecedf2;
    border-radius: 4px;
}

.scripts-result:last-child {
    margin-bottom: 0;
}

.scripts-result-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 12px;
    border-bottom: 1px solid #ecedf2;
    border-radius: 4px 4px 0 0;
    background-color: #f4f5fc;
}

.scripts-result-project {
    min-width: 0;
    overflow: hidden;
    font-family: GlowSemibold;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.scripts-status {
    flex: 0 0 auto;
    padding: 2px 10px;
    border-radius: 10px;
    font-family: GlowSemibold;
    font-size: 12px;
    line-height: 16px;
}

/* The colours of the Project Audit change badges (css/audit/projectAudit.css): Done as "added", Not run as
   "modified", Failed as "removed". */
.scripts-status--done {
    background-color: #e6f5ec;
    color: #1f7a52;
}

.scripts-status--not-run {
    background-color: #eaf1fc;
    color: #2461c4;
}

.scripts-status--failed {
    background-color: #fdecea;
    color: #c0392b;
}

.scripts-result-body {
    padding: 8px 12px;
}

.scripts-result-body > * + * {
    margin-top: 6px;
}

.scripts-output {
    display: flex;
    gap: 16px;
    padding: 4px 0;
    border-bottom: 1px solid #f1f2f5;
}

.scripts-output:last-child {
    border-bottom: none;
}

.scripts-output + .scripts-output {
    margin-top: 0;
}

.scripts-output-name {
    flex: 0 0 35%;
    min-width: 0;
    overflow: hidden;
    color: #808080;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.scripts-output-value {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

/* A record output's name: its record's, "Replacement" or "Replacement[2]", above its fields or its table. */
.scripts-record-output-label {
    color: #808080;
}

/* ---- Results: the value tree (ef-script-value-node) ----
   A node is its compact line; once expanded, its parts follow below, one level, indented under the arrow. An output
   that does not expand is its text alone, aligned as before. The parts of a level line up: a part that does not
   expand keeps the arrow's room. Labels, notes and messages are muted; long texts wrap. */

ef-script-value-node {
    display: block;
    min-width: 0;
}

.scripts-node-line {
    display: flex;
    align-items: flex-start;
    gap: 4px;
}

/* The toggle: the whole line of a node that expands (a div with the button role). */
.scripts-node-toggle {
    text-align: left;
    cursor: pointer;
}

.scripts-node-toggle:focus {
    outline: none;
}

.scripts-node-toggle:focus-visible {
    outline: 1px solid #5774e7;
    outline-offset: 1px;
}

.scripts-node-toggle:hover .expandCollapseArrowComponent path {
    fill: #5774e7;
}

/* The arrow and the room it keeps: as high as one line of text, so it stays beside the first line of a long one. The
   arrow is decoration: a click on it goes to the toggle, never to the arrow's own toggling. */
.scripts-node-arrow,
.scripts-node-spacer {
    flex: 0 0 12px;
    height: 20px;
}

.scripts-node-arrow {
    pointer-events: none;
}

.scripts-node-arrow expandCollapse-arrow,
.scripts-node-arrow .expandCollapseArrowComponent {
    display: flex;
    height: 100%;
}

.scripts-node-label {
    flex: 1 1 auto;
    min-width: 0;
}

.scripts-node-name {
    margin-right: 4px;
    color: #808080;
}

.scripts-node-note {
    margin-left: 6px;
    color: #808080;
}

.scripts-node-meta {
    color: #808080;
}

/* A muted fixed text in a part's line: the message of a field that could not be read, or "(default)" for a weekday
   that the calendar does not set. */
.scripts-node-label .scripts-node-meta {
    font-style: italic;
}

.scripts-node-children {
    margin-left: 5px;
    padding-left: 11px;
    border-left: 1px solid #ecedf2;
}

.scripts-node-grid {
    max-width: 100%;
    margin: 2px 0 4px;
    overflow-x: auto;
}

.scripts-node-grid table {
    border-collapse: collapse;
    font-size: 13px;
}

.scripts-node-grid th,
.scripts-node-grid td {
    padding: 2px 8px;
    border: 1px solid #ecedf2;
    vertical-align: top;
}

.scripts-node-grid th {
    font-family: GlowSemibold;
    font-weight: normal;
    text-align: left;
    white-space: nowrap;
    background-color: #f4f5fc;
}

.scripts-node-grid th .scripts-node-meta {
    font-family: GlowRegular;
    font-size: 12px;
}

.scripts-diagnostics {
    margin: 0;
    padding: 0;
    list-style: none;
}

.scripts-diagnostic {
    display: flex;
    gap: 12px;
    padding: 2px 0;
}

.scripts-diagnostic-position {
    flex: 0 0 auto;
    font-family: Consolas, 'Courier New', monospace;
    color: #808080;
}

.scripts-diagnostic-message {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* A warning, which never stops a script from running, says so before its message, beside its first line. */
.scripts-diagnostic-severity {
    flex: 0 0 auto;
    align-self: flex-start;
    padding: 0 6px;
    border-radius: 8px;
    background-color: #fff6d6;
    font-size: 12px;
    color: #8a6100;
}

.scripts-problems {
    margin: 0;
    padding-left: 18px;
}

.scripts-problems li {
    padding: 2px 0;
}