/* Copyright (c) 2026 BSC Softworks
// Portions Copyright (c) 2026 BACnet International
// Licensed under the MIT License. See LICENSE.txt in the project root for license information.
*/

/*
   This contains styles for the main application.
   This file is mostly for "structural" aspects. The "visual" aspects are controlled by variables defined in themes.css.
   See also the styles in ycommons.css
*/

/*================== GLOBAL ==================*/

/* note that some things like .hidden are at the bottom of this file so they take precedence over everything else! */

html {
    line-height: 1.2;
}
body {
    background-color: var(--background-color);
    margin:  0;
    padding: 0;
    color: var(--text-color);
    scroll-behavior: smooth;
    display: flex;
    flex-direction: column;
    box-sizing: border-box; /* Use border-box for easier layout calculation */
}

.pre-wrap { /* don't mess with the formatting of plain text: tabs, newlines, multiple spaces, etc. stay */
    white-space: pre-wrap;
}

button {
    background-color: var(--button-background);
    color: var(--button-text-color);
    color-scheme: var(--color-scheme);
    border: var(--button-border);
    padding: var(--button-padding);
    border-radius: var(--button-radius);
    cursor: pointer;
    margin: var(--button-margin);
}
button:focus-visible { /* as of January 2025, :focus-visible works for Chrome, Firefox, and Safari on Mac. Alternately, use :focus or :-moz-focusring */
    border:  1px solid var(--focus-border-color);
    outline: 1px solid var(--focus-border-color);
}
button:hover {
    border-color: var(--button-hover-border-color);
    color:        var(--button-hover-text-color);
}
button:disabled {
    background-color: var(--button-disabled-background);
    color: var(--button-disabled-text-color);
    cursor: not-allowed; /* Show "not allowed" cursor */
}
button.more-or-less {  /* for MoreOrLess, i.e., collapsed text sections that end with "...more" */
    background:     none;
    border:         none;
    color:          var(--more-button-color);
    margin:         0;
    padding:        0;
    cursor:         pointer;
    font-weight:    bolder;
}
.more-or-less-container span { /* don't mess with the formatting of plain text: tabs, newlines, multiple spaces, etc. stay */
    white-space: pre-wrap;
}
.inline-buttons { /* e,g, span of table row action buttons */
    align-items: center;
    gap: 2px;
    transition: opacity 0.3s;
    width: 1%; /* a trick to make column as narrow as possible */
    white-space: nowrap;
}
button.inline-button { /* like more-or-less, for use as buttons inline with text or controls that are not obtrusive */
    background:     none;
    border:         none;
    color:          var(--more-button-color);
    margin:         0 0 0 0.4em;
    padding:        0;
    cursor:         pointer;
    font-weight:    normal;
}
button.inline-button:disabled {
    color: var(--button-disabled-text-color);
    cursor: not-allowed; /* Show "not allowed" cursor */
}

input {
    max-width: 20ch;
}
input[type="number"], input[type="date"], input[type="time"] {
    max-width: 8ch;
}
input[type="email"], input[type="url"] {
    max-width: 40ch;
}
input.full-width, select.full-width {
    max-width: 100%;
}
input.narrow {
    max-width: 12ch;
}
select {
    width: max-content;
}

input {
    background-color: var(--input-background);
    border: var(--input-border);
    border-radius: var(--input-radius);
    color: var(--input-text-color);
    color-scheme: var(--color-scheme);
    padding: var(--input-padding);
}
input:focus-visible {
    border: 1px solid var(--focus-border-color);
    outline: 1px solid var(--focus-border-color);
}
input:disabled {
    background-color: var(--input-disabled-background);
    color: var(--input-disabled-text-color);
}
input:invalid {
    outline-color: var(--error-color);
    outline-width: medium;
}

textarea {
    background-color: var(--textarea-background);
    color: var(--textarea-text-color);
    color-scheme: var(--color-scheme);
    padding: var(--textarea-padding);
    border: var(--textarea-border);
    border-radius: var(--textarea-radius);
}
textarea:focus-visible {
    border: 1px solid var(--focus-border-color);
    outline: 1px solid var(--focus-border-color);    
}
textarea:read-only:focus-visible {
    border: 1px solid var(--focus-readonly-color);
    outline: 1px solid var(--focus-readonly-color);      
}
textarea.terminal {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    flex: 1 1 auto;
    white-space: pre-wrap;
    resize: none;
    font-family: monospace;
    background-color: var(--textarea-background);
    color: var(--textarea-text-color);
    padding: var(--textarea-padding);
    border: var(--textarea-border);
    border-radius: var(--textarea-radius);
    color-scheme: var(--color-scheme);
}
.terminal-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;       /* allows child to fill height even if parent was flexible */
    height: 100%;         /* ensures child’s height:100% has meaning */
}
textarea.terminal:focus-visible {
    border: 1px solid var(--focus-border-color);
    outline: 1px solid var(--focus-border-color);
}
textarea.terminal:read-only:focus-visible {
    border: 1px solid var(--focus-readonly-color);
    outline: 1px solid var(--focus-readonly-color);
}

dialog-ORIGINAL {
    background-color:   var(--dialog-background);
    color:              var(--dialog-text-color);
    border:             var(--dialog-border);
    border-radius:      var(--dialog-radius);
    padding:            var(--dialog-padding);
    box-shadow:         0 5px 15px rgba(0, 0, 0, 0.3);
    /*width: 400px;*/
    max-width:      800px; /* 90%; */
    overflow:       auto;
    top:            30%;
    bottom:         30%;
    left:           30%;
    right:          30%;
    translate:      -30% 0;
    z-index:        1000;
}
dialog {
     background-color:   var(--dialog-background);
     color:              var(--dialog-text-color);
     border:             var(--dialog-border);
     border-radius:      var(--dialog-radius);
     padding:            var(--dialog-padding);
     box-shadow:         0 5px 15px rgba(0, 0, 0, 0.3);
     width:          max-content;
     max-width:      min(600px, 75vw);
     overflow:       auto;
     top:            30%;
     bottom:         30%;
     left:           30%;
     right:          30%;
     translate:      -30% 0;
     z-index:        1000;
 }


dialog::backdrop {
    background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent overlay */
}
/* right-align the row of buttons at the botton of a dialog  */
.dialog-button-row {
    margin-top: 5px;
    display: flex;
    justify-content: flex-end;
}
.dialog-title-text {
    color: var(--text-title-color);   /* theme-compatible title color, typically lower contrast than body text */
    font-size: larger;
    font-weight: bolder;
    margin-bottom: 10px;
}
/* dialog made wider to display content correctly even if browser/app is not wide  */
.dialog-wide {
    min-width: 500px;
}
.dialog-separator {
    margin: 10px 5px 10px 0;
    border: none;
    border-top: 1px solid #ccc; /* works for dark/light theme */
}

select {
    background-color: var(--select-background);
    color: var(--select-text-color);
    border: var(--select-border);
    padding: var(--select-padding);
    border-radius: var(--select-radius);
}
select:focus, select:hover {
    background-color: var(--select-focus-background-color);
    border-color: var(--focus-border-color);
    color-scheme: var(--color-scheme);
    outline-color: var(--focus-border-color);
    outline-width: medium;
}
select:focus-visible {
    border: 1px solid var(--focus-border-color);
    outline: 1px solid var(--focus-border-color);
}
.select-all {
    /* when this is applied to a span, it will select all the text inside the span when any part is clicked */
    user-select: all;
    cursor: pointer;
    background-color: #f0f0f0;
    padding: 2px 4px;
    border-radius: 3px;
    border: 1px solid #ccc;
}

input[type="file"] { /* prevent the [Choose File][No file chosen ] combo from going out of bounds */
    width: 80%;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    border: none;
}
a {
    color: var(--link-color);
    padding: 2px;
}
a:hover {
    text-decoration: underline;
}
a:focus-visible {
    outline: 2px solid var(--focus-border-color);    
}

.button-row-right {
    margin-top: 4px;
    margin-bottom: 4px;
    display: flex;
    justify-content: flex-end;
}
.button-row-left {
    margin-top: 4px;
    margin-bottom: 4px;
    display: flex;
    justify-content: flex-start;
}
hr {
    border: none;
    height: 2px;
    position: relative;
}
hr::before { /* center vertically */
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    border-top: 1px solid var(--border-color);
    transform: translateY(-50%);
}

/*================== HOVER TEXT FOR ALL ==================*/

[data-tip] {
    position: relative;
}
[data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    /*background: var(--tooltip-bg, #333);*/
    /*color: var(--tooltip-color, #fff);*/
    font-size: 11px;
    white-space: nowrap;
    padding: 4px 8px;
    border-radius: 4px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s;
}
[data-tip]:hover::after {
    opacity: 1;
    transition-delay: 1.0s;
}

/*================== PAGE LAYOUT ==================*/

#header, #footer {
    flex-grow: 0;
    flex-shrink: 0;
}
.main-container { /* for div that contains header+middle+footer */
    display: flex;
    flex-direction: column;
    height: 100vh; /* take up entire viewport height so that footer is always at bottom */
    padding: 8px;
    box-sizing: border-box;
}
.flex-part-fixed { /* for header and footer */
    flex-grow: 0;
    flex-shrink: 0;
}
.flex-part-stretch { /* for middle */
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow:   auto
}

/*================== TABS ==================*/
.tab-bar {
    overflow: hidden;
    margin-top: 0;
    margin-bottom: 0;
    flex-shrink: 0;  /* add this */
}

.tab-bar button {
    background-color:   var(--tab-background);
    border-color:       var(--tab-border-color);
    border-radius:      var(--tab-border-radius);
    border-style:       solid;
    border-width:       var(--tab-border-width);
    color:              var(--tab-text-color);
    cursor:             pointer;
    float:              left;
    margin:             var(--tab-margin);
    outline:            none;
    padding:            var(--tab-padding);
}

.tab-bar button:hover {
    background-color: var(--tab-hover-background);
    color: var(--tab-hover-text-color);
}

/* do NOT set a different border-width for selected tab; that can interfere with tab stacking */
.tab-bar button.selected {
    background-color: var(--tab-active-background);
    border-color:     var(--tab-active-border-color);
    color: var(--tab-active-text-color);
    font-weight: bold;
    position: relative;
    z-index: 2; /* A value higher than the panel */
}

.tab-bar button:disabled {
    display: none;
    background-color: #ddd;
    text-decoration:  none;
    color:            rgb(128,128,128);
}

/* Panels container (the area below the tab bar) */
.tab-panels {
    flex-grow: 1;  /* replaces height: 100% */
    min-height: 0; /* allow it to shrink below content size if needed */
    padding:       6px 12px;
    background-color: var(--panel-background-color);
    border-color:   var(--panel-border-color);
    border-radius:  var(--panel-border-radius);
    border-style:   solid;
    border-width:   var(--panel-border-width);
    margin-top: calc(var(--panel-border-width) * -1); /* this negative margin is to make the tab panel top edge hide under the buttons to the look connected to the panel */
    overflow: auto; /* allow content to scroll if it exceeds the panel height */
}
.tab-panels-header {
    /* no special flex needed — block layout, inline elements behave normally */
    width: 100%;
    flex-shrink: 0;   /* don't let it shrink to give space to a split-container below */
}
/* from claude */
.tab-panels-CLAUDE {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-height: 0;
    padding: 6px 12px;
    background-color: var(--panel-background-color);
    border-color:   var(--panel-border-color);
    border-radius:  var(--panel-border-radius);
    border-style:   solid;
    border-width:   var(--panel-border-width);
    margin-top: calc(var(--panel-border-width) * -1);
    overflow: auto;
}


/*================== GENERAL FORMATTING ==================*/

.big-strong {                  /* text emphasis, such as "This is THE most important thing." */
    font-size: larger;
    font-weight: bolder;
}
.warning-shield {             /* styling for unicode ⚠ */
    color: var(--error-color);
    font-size: 120%;
}
.warning-border {
    border: 1px solid var(--error-color);
}
::-webkit-scrollbar {  /* (webkit is for all major browsers, not just safari) */
    width: 12px;
}
::-webkit-scrollbar-track {
    background: var(--scrollbar-background);
}
::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb-background);
    border-radius: 20px;
    border: 3px solid var(--scrollbar-border-color);
}

.card { /* TODO kill "card" as a style name */
    background-color: var(--card-background);
    box-shadow: 0 4px 8px var(--card-shadow);
    border-radius: var(--card-radius);
    margin: 10px 0;
    padding: 6px 12px;
    border: 1px solid var(--border-color);
    color: var(--text-color);
    transition: box-shadow 0.3s ease;
}
.card:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}
.card p {
    margin: 0;
    color: #666;
}

.sub-card {
    border-bottom: 1px solid var(--border-color);
}

.panel {
    padding:       6px 12px;
    background-color: var(--panel-background-color);
    border-color:   var(--panel-border-color);
    border-radius:  var(--panel-border-radius);
    border-style:   solid;
    border-width:   var(--panel-border-width);
    margin-top: calc(var(--panel-border-width) * -1); /* this negative margin is to make the tab panel top edge hide under the buttons to the look connected to the panel */
}


.indent-box {
    display:      block;
    padding:      6px 12px;
    border:       none;
}

.border-box {
    display:      block;
    padding:      6px 12px;
    border:       1px;
    border-color: var(--border-color);
    border-style: solid;
    border-radius:  var(--panel-border-radius);
}

.title {
    color: var(--text-title-color); /* non-black to reduce title contrast slightly */
    font-weight: bold;
    font-size: larger;
    padding-bottom: 4px;
    top: 4px;

}

/*================== PAGE HEADER/FOOTER ==================*/

header {
    line-height: 1;
    background-color: var(--header-background);
    color: var(--header-text-color);
    display: flex;
    justify-content: space-between; /* horizontally align logo and buttons */
    align-items: center;            /* vertically center logo and buttons */
    /*overflow:    visible;  /* visible so hover dropdown menu shows over rest of page */
    padding-bottom: 10px; /* adds space below the header before the tabs */
}
.header-logo-container { /* one item on left */
    display: inline-block; /* Ensures the container fits around the image */
    margin: 5px 0 5px 5px; /* top | right | bottom | left */
    width: 130px;
    height: 40px;
    background-image: var(--header-logo-image);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.header-title-container { /* one item on left */
     /* display: inline-block;Ensures the container fits around the image */
    margin: 5px 5px 5px 5px; /* top | right | bottom | left */
    display: flex;
    align-items: center; /* aligns button and text vertically centered */
    color: var(--header-title-color);
    font:  var(--header-title-font);
}
.header-items-container { /* items on right */
    margin: 0 10px 0 0; /* top | right | bottom | left */
    display: flex;
    align-items: center;
}
.header-logo-img {
    height: 40px;
    padding: 5px;
    display: block;
}
.header-login-hidden-form { /* hidden form to get focus for keyboard log ins */
    position: absolute; /* a form is block-level element so it takes up room even if width=0 and height=0 */
    width:0;
    height:0;
    overflow: hidden;
}
.header-item {
    color:   var(--header-text-color);
    margin:  5px;
    cursor: pointer;
}
.header-app-chooser-button {
    display: inline-block;
    margin: 5px 0 5px 5px;
    width: 30px;
    height: 30px;
    background-image: var(--header-app-chooser-image);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border: none;
    padding: 0;
    background-color: transparent;
    cursor: pointer;
}
.header-user {
    display:        flex;
}
.user-badge {
    padding:       4px;
    width:         20px;
    height:        20px;
    border-radius: 50%;
    font-size:     20px;
    color:         #ffffff;
    text-align:    center;
    background:    var(--user-badge-background); /* #8f8f3f; */
}
.header-login-button {
    padding: 0.5rem 1rem;
    background-color: var(--user-badge-background);
    color: white;
    border-radius: 9999px;
    outline: none;
    border: none;
    cursor: pointer;
}
.header-login-button:hover {
    /*background-color: #1D4ED8; */
    /* box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); */
}
/*.header-login-button:focus {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5);
}*/

footer {
    line-height: 1;
    text-align:   left;
    display: flex;
    margin-top: 10px; /* adds space above the footer below the tabs */
    padding:      5px 0 5px 10px; /* top | right | bottom | left */
    justify-content: space-between;
    align-items: center;
    background-color: var(--footer-background);
    color:            var(--footer-text-color);
}
/* a better style for the footer items. It's on a row with the copyright, separated by space */
.footer-items-container {
    display: flex;
    flex-direction: row;
    justify-content: flex-end; /* Align items to the right */
    align-items: center;
}
.footer-item {
    color:   var(--footer-text-color);
    margin-left:  10px; /* space between items */
    cursor: pointer;
    text-decoration: none;
}
.footer-item:hover {
    text-decoration: underline;
}
.copyright-text::before { /* TODO find alternative - don't like using ::before because it's not "real" text in the DOM */
    content: var(--copyright-text);
}

/*================== DROPDOWN ==================*/

.dropdown {
    position:         relative;
    z-index:          100;
    display:          inline-block;
}
.dropdown-content {
    border: var(--header-dropdown-border);
    background-color: var(--header-dropdown-background);
    color: var(--header-dropdown-text-color);
    display:          none;
    position:         absolute;
    right:            0;
    min-width:        160px;
    box-shadow:       0px 8px 16px 0px rgba(0,0,0,0.2);
}
/* not used this attempted to center but cause the whole page to get scroll bars!
.dropdown-content {
    border: var(--header-dropdown-border);
    background-color: var(--header-dropdown-background);
    color: var(--header-dropdown-text-color);
    display:          none;
    position:         absolute;
    left:             50%;
    transform:        translateX(-50%);
    min-width:        160px;
    box-shadow:       0px 8px 16px 0px rgba(0,0,0,0.2);
}*/
.dropdown-content a {
    color:           var(--header-dropdown-text-color);
    padding:         12px 16px;
    text-decoration: none;
    display:         block;
}
.dropdown-content a:hover {
    background-color: var(--header-dropdown-hover);
}
.dropdown:not(.no-hover):hover .dropdown-content {
    display:          block;
}

/*================== MISC ==================*/

.license-dialog {
    width:         640px;
}
.license-dialog-text {
    width:         100%;
}

/*==================  DOWNLOAD/ARCHIVE/APPROVE TABLES ==================*/

.table-column-state-text {
    font-weight: bold;
}
.table-column-user {
    font-weight: bold;
}

/*==================  SETTINGS ==================*/

/* style for two column name/value display or editing */
.settings {
    display:grid;
    /* grid-template-columns: fit-content(200px) fit-content(300px);*/
    grid-template-columns: fit-content(300px) 1fr; /* this is correct, I think */
    grid-auto-rows: fit-content(1px);
    grid-gap: 10px;
}

.settings-row {  /* this can be used on a single element to inherit column sizing from .settings parent */
    display: grid;
    grid-template-columns: subgrid;  /* inherit column sizing from parent */
    grid-column: 1 / -1;             /* span both parent columns */
    align-items: center;             /* vertically center both label and control */
}
/* style for one or more buttons at the bottom of a 'settings' grid */
/* if this is set to "center", the buttons are centered under both the name and value columns */
.settings-buttons {
    grid-column-start: span 2;
    text-align: left;
    padding-top: 20px;
    /* border-top: 1px solid var(--border-color); */
}
.settings input[type="checkbox"] { /* checkboxes inside the .settings grid */
    justify-self: start; /* left-align within its grid cell */
    accent-color: var(--checkbox-mark-color);
    color-scheme: var(--color-scheme);
}
.settings label {
    margin-top: auto;
    margin-bottom: auto;
}
.settings textarea {
    resize: none;
    width: 100%;
    height: 100px;
}
.settings-value-group { /* for when a single setting consists of multiple parts */
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
}
.settings-value-separator { /* words used to separate settings values have horizontal padding on each side */
    margin: 0 5px; /*~dr 10px */
}
.settings-label-disabled {
    opacity: 0.5;
}

/*==================  DROP ZONES =================== */

.drop-zone {
    background-color: var(--dropzone-background);
    color: var(--dropzone-text-color);
    border: var(--dropzone-border);
    border-radius: var(--dropzone-radius);
    padding: var(--dropzone-padding);
    margin: var(--dropzone-margin);
    width: fit-content;
}

/*==================  TABLES **************/

table {
    border-spacing: 0;
    width: 100%;
    border: 1px solid var(--table-border-color);
}
th, td {
    text-align: left;
    padding: 6px;
}
tbody tr:nth-child(odd) {
    background-color: var(--row-odd-color);
}
tbody tr:nth-child(even) {
    background-color: var(--row-even-color);
}
tbody tr.selected {
    background-color: var(--row-selected-color);
}

.shy {          /* shy items: hidden by default, shown on hover or some other selection */
    opacity: 0; /* overridden by :hover */
    transition: opacity 0.3s;
}
*:hover .shy {
    opacity: 1; /* "wake up" the invisible things like .inline-buttons for table rows */
}


/*==================  SPLIT PANEL (TREE+INSPECTOR) ==================*/

.split-container-NOTUSED {
    display: flex;
    overflow: hidden; /* not auto — children handle their own scroll */
    flex-grow: 1;
    flex-shrink: 1; /* allow shrinking */
    flex-basis: 0;
    min-height: 0;
}

.split-container {
    display: flex;
    overflow: hidden;    /* not auto — children handle their own scroll */
    min-height: 300px;   /* height can be set by JS. see pages.js fillBottom */
    width: 100%;
}

.split-child {
    overflow: auto;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/*
.split-panel-left {
    display: flex;
    padding: 10px;
    width: 50%;
    border-width: var(--tree-border-width-left);
    border-style: var(--tree-border-style);
    border-color: var(--tree-border-color);
}
.split-panel-right {
    display: grid;
    padding: 10px;
    width: 50%;
    border-width: var(--tree-border-width-right);
    border-style: var(--tree-border-style);
    border-color: var(--tree-border-color);
    grid-auto-rows: fit-content(1px);
    grid-gap: 5px;
}
*/

.tree-and-inspector-container {
  display: flex;
}
.tree-and-inspector-left {
    display: flex;
    padding: 10px;
    width: 50%;
    border-width: var(--tree-border-width-left);
    border-style: var(--tree-border-style);
    border-color: var(--tree-border-color);
}
.tree-and-inspector-right {
    display: grid;
    padding: 10px;
    width: 50%;
    border-width: var(--tree-border-width-right);   /* allow for single vertical border */
    border-style: var(--tree-border-style);
    border-color: var(--tree-border-color);
    grid-auto-rows: fit-content(1px);
    grid-gap: 5px;
}
.tree-and-inspector-location-text {
    font-weight: var(--tree-location-font-weight);
 }


/* =============== highest priority stuff comes last ============= */

.display-contents { /* this is defined before 'hidden' so it can be used as a fallback when hidden is removed */
    display: contents;
}

.hidden {
    display: none; !important;
}
.error-text {
    color:  var(--error-color); /*  red for light mode; lighter red for dark mode */
}
.error-bold-text {
    color:  var(--error-color); /*  red for light mode; lighter red for dark mode */
    font-weight: bolder;
}
.warning-text {
    text-decoration:       underline;
    text-decoration-color: var(--error-color);
    text-decoration-style: dashed;  /*~dr wavy; */
    text-underline-offset: 2px;     /*+dr */
    text-decoration-thickness: 1px; /*+dr */
}
.invalid {
    border: 2px solid red;
    background-color: #ffe6e6; /* Light red */
    border-radius: 4px;
}
.gray-text {
    color:     rgb(128,128,128);
}


/* **************************************** */
.ytree-node-text {
    font-weight:           var(--tree-node-font-weight);
    padding: 1px 3px;   /*+dr an alternative to adding to ytree-selected */
}
.ytree-node-text.selected {
    background-color: var(--tree-selected-background);
    font-weight:      bold;  /* overrides -tree-node-font-weight */
    color:            var(--tree-selected-color);  /* dark mode: selected text black */
}
.ytree-selected {
    background-color:   var(--tree-selected-background);
    /*-dr padding: 1px 3px;   non-tight wrapping of highlight */
    font-weight: bold;  /* overrides -tree-node-font-weight */
    color: var(--tree-selected-color);  /* dark mode: selected text black */
}
.ytree-error {
    color:                 var(--error-color);
}
.ytree-error-below {
    text-decoration:       underline;
    text-decoration-color: var(--error-color);
    text-decoration-style: dashed;  /*~dr wavy; */
    text-underline-offset: 2px;     /*+dr */
    text-decoration-thickness: 1px; /*+dr */
}
.ytree-tree { /* an <ol> at the root level*/
    list-style-type:      none;
    margin:               0;
    padding:              0;
}
.ytree-node-children {  /* an <ol> for a node's children */
    list-style-type:     none;
    padding:             0px;
    margin:              0px 0px 0px 1em;
}
.ytree-node-expand-button {
    padding:             0;
    background:          none;
    border:              none;
    min-width:           1ch;
    font-family:         monospace;
    margin:              0px 5px 0 0;
}