/* Version 26191 */

:root {
    --re-border-color: var(--bs-border-color);
    --re-row-highlight-bg: #eee;

    --re-bi-btn-bg: var(--bs-body-bg);

    --re-rule-editor-level0-bg: #e1f5fe;
    --re-rule-editor-level1-bg: #bbdefb;
    --re-rule-editor-level2-bg: #90caf9;
    --re-rule-editor-level3-bg: #64b5f6;
    --re-rule-editor-cond-bg: rgba( 255, 255, 255, 0.50 );
}
[data-bs-theme="dark"] {
    --re-row-highlight-bg: #333;

    --re-bi-btn-bg: #404040;

    --re-rule-editor-level0-bg: #021440;
    --re-rule-editor-level1-bg: #042860;
    --re-rule-editor-level2-bg: #083c80;
    --re-rule-editor-level3-bg: #0a50a0;
    --re-rule-editor-cond-bg: rgba( 255, 255, 255, 0.15 );
}

body {
    /** This prevents the hefty penalty paid on mobile devices with Google's
     *  "pull to refresh" feature. Without it, if you scroll too far to the
     *  top, the browser will refresh the page, losing form data entry, etc.
     *  This works for Chrome, Brave, etc. as of 2024-11-22.
     */
    overscroll-behavior: contain;
}
body#reactor-login {
    font-family: 'Open Sans', var(--bs-body-font-family);
    font-size: 0.85rem;
    background-image: url('/img/Orange-surface-wallpaper-hd.jpg');
    background-size: cover;
}

footer {
    font-size: 0.67rem;
    color: var(--bs-body-color);
    text-align: center;
    margin-top: 16px;
    border-top: 1px solid var(--re-border-color);
}

div#re-nav-banner { color: var(--bs-navbar-color); }
a#swap-theme i.bi { color: var(--bs-yellow); }

button.bi-btn:disabled { opacity: 0.15; cursor: not-allowed; }
button.bi-btn[disabled] { opacity: 0.15; cursor: not-allowed; }
/* button.bi-btn:hover { border-color: var(--bs-link-hover-color); } */
button.bi-btn:active { box-shadow: rgb(204, 219, 232) 3px 3px 6px 0px inset, rgba(255, 255, 255, 0.5) -3px -3px 6px 1px inset; }
button.bi-btn {
    cursor: pointer;
    --bs-btn-padding-x: 3px;
    --bs-btn-padding-y: 3px;
    --bs-btn-bg: var(--re-bi-btn-bg);
    --bs-btn-active-bg: var(--bs-link-active-color);
    font-size: 1.35rem;
    line-height: 1rem;
    vertical-align: middle;
    width: 1.85rem;
    white-space: nowrap;
    box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}
button.bi-btn-sm {
    cursor: pointer;
    font-size: 1rem;
    width: 1.25rem;
    line-height: 0.5rem;
    --bs-btn-padding-x: 1px;
    --bs-btn-padding-y: 1px;
}
button.bi-btn.bi-btn-white {
}
button.bi-btn.active { background-color: var(--bs-success); }
button.bi-btn.draghandle { cursor: grab !important; }
button.bi-btn.slash i::after {
    position: relative;
    content: "/";
    font-size: 1.25em;
    left: -16px;
    top: 0px;
    font-weight: 500;
    color: var(--bs-danger);
}
.bi.bi-size-1 { font-size: 0.5rem; }
.bi.bi-size-2 { font-size: 1rem; }
.bi.bi-size-3 { font-size: 1.5rem; }
.bi.bi-size-4 { font-size: 2rem; }
.bi.bi-size-5 { font-size: 3rem; }
.bi.bi-size-6 { font-size: 4rem; }

.dropdown.no-arrow .dropdown-toggle::after {
  display: none;
}

.text-gray-400  {
  color: #d1d3e2 !important;
}

.text-capitalize  {
  text-transform: capitalize !important;
}

div.re-tab-container { }
div#tab-reactions.re-tab-container datalist { display: none; }
div.re-tab-container input.narrow { width: 6em; text-align: center }
div.re-tab-container .re-fullwidth { width: 100%; }
div.re-tab-container label { font-weight: normal; padding: 0 2px; }
div.re-tab-container label.re-secondaryinput { margin-left: 0.5em; margin-right: 0.5em; }
div.re-tab-container .tberror { border: 1px solid var(--bs-danger); }
div.re-tab-container .tbwarn { border: 1px solid var(--bs-warning); }
div.re-tab-container .tbdocslink { margin-left: 4px; }
div.re-tab-container .tbdocslink i.material-icons { font-size: 18px; position: relative; top: 4px; }

div.re-tab-container div.re-listport-head {
    /* If you change this, also change re-listhead in reactor-ui-rules.css and reactor-ui-expressions.css */
    min-height: 42px;
    padding: 0px 0px 4px 0px;
    background-color: var(--bs-tertiary-bg);
    border-bottom: 1px dotted var(--bs-border-color);
}
div.re-tab-container div.re-listport-head .re-listport-title {
    /* If you change this, also change re-listhead in reactor-ui-rules.css and reactor-ui-expressions.css */
    font-size: 1.5rem;
    font-weight: bold;
}
div.re-listport-head > div.re-listport-item > [class^="col-"] {
    border-right: 1px solid var(--bs-border-color);
}
div.re-listport-head > div.re-listport-item > .col {
    border-right: 1px solid var(--bs-border-color);
}

div.re-tab-container div.re-listport-body {
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0px;
    border-top: 1px dotted var(--bs-border-color);
    scroll-snap-type: y mandatory;
}
div.re-tab-container div.re-listport-body div.re-listport-item {
    /* min-height: 2rem; */
    font-size: 0.85rem;
    border-bottom: 1px dotted var(--re-border-color);
    padding: 4px 4px 4px 4px;
    align-items: center;
    scroll-snap-align: start;
}
div.re-tab-container div.re-listport-head div.re-listport-item {
    font-size: 1rem;
    font-weight: bold;
    border-top: 1px dotted var(--bs-border-color);
    border-bottom: none;
    padding: 0px 4px;
}
div.re-tab-container div.re-listport-item:hover:not(.active) { background-color: var(--re-row-highlight-bg) !important; }

div#tab-entities span.entity-primary-attribute { font-weight: 500; }

/* --- Dashboard overrides --- */

main[role="main"] { background-color: var(--bs-body-bg); }

nav.navbar { font-size: 1rem; }
nav.navbar a { text-decoration: none; }
nav.navbar a i.bi { font-size: 1.2rem; line-height: 1.2rem; }

nav.sidebar { background-color: var(--bs-body-bg) !important; }

li.nav-item.expandable.closed > a.nav-link::after { content: "C"; }
li.nav-item.expandable.open > a.nav-link::after { content: "O" }
li.re-nav-sub { font-size: 0.85rem; margin-left: 1.4rem; }
li.re-nav-sub a.nav-link { font-weight: normal; }

.nav-group {
}

.nav-group .feather {
  margin-right: 4px;
}

.nav-group .nav-item-title {
  font-weight: 500;
}

div#re-sysclock { min-width: 8rem; }
div#re-api-connstate { min-width: 12rem; }

div#sysdialog.re-dialog-error div.modal-header {
    background-color: var(--bs-danger);
    color: var(--bs-danger-bg);
}

/* -------------- Entity Picker --------------- */
div#entitypicker div.modal-dialog { width: 50vw; max-width: unset; }
div#entitypicker div.ep-list-head,
div#entitypicker div.ep-list-body {
    display: block;
}
div#entitypicker div.ep-list-head {
    background: rgb(2,0,36);
    background: linear-gradient(270deg, rgba(5,111,188,0.55) 0%, rgba(0,212,255,1) 100%);
    font-weight: bold;
    vertical-align: middle;
}
div#entitypicker div.row { min-height: 2rem; padding: 4px 8px; }
div#entitypicker div.ep-list-body { max-height: 50vh; overflow-y: auto; overflow-x: hidden; }
div#entitypicker div.ep-list-body div.row:hover { color: var(--bs-white); background-color: var(--bs-primary); }
div#entitypicker tbody div.re-entity-name { cursor: pointer; }
div#entitypicker .ui-draggable-handle {
    cursor: move;
}
/* Standard control's fields (see EntityPicker.getPickerControl()) */
div.entity-selector {
    color: var(--bs-body-color);
    background-clip: padding-box;
    background-color: var(--bs-body-bg);
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
}
div.entity-selector:hover { cursor: pointer; border-color: var(--bs-link-hover-color) !important; }
div.entity-selector span.re-es-text i.bi {
    padding: 0 0;
}
div.entity-selector div.re-es-pick {
    font-size: 0.875rem;
    line-height: 1.5;
    font-weight: normal;
    padding: 0.25rem 0.5rem 0.25rem 0.5rem;
    min-width: 12rem;
}
div.entity-selector div.re-es-eid {
    border-left: 1px dotted var(--bs-border-color);
    cursor: pointer;
    font-size: 0.875rem;
    line-height: 1.5;
    padding: 0.25rem 0.5rem 0.25rem 0.5rem;
    min-width: 8rem;
    text-align: center;
}

/* <span class="input" role="textbox" contenteditable="true">defaultvalue</span>
   Ref: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/textbox_role
   I'd like to use this method, but apparently it doesn't send change events?
*/
span[contenteditable=true], div[contenteditable=true] {
    min-width: 4em;
    border: 1px solid #ccc;
    border-radius: 0.2em;
    padding: 4px 4px;
    color: #555;
    background-color: white;
}
span[contenteditable=true]:focus {
    border: 2px solid var(--bs-primary);
}

/* old presentation
div.re-ui-alerts div.card-body { padding: 0.5rem; }
div.re-ui-alerts div.alert { padding: 8px 8xp; margin-bottom: 0.5rem; }
*/
div#re-alert-modal {}
div#re-alert-modal .modal-dialog {
    max-width: 50vw;
    margin: 0.5rem auto;
}
div#re-alert-modal .modal-header {
    padding: 8px 1rem;
}
div#re-alert-modal .modal-body {
    padding: 8px 1rem;
    font-size: 1rem;
    line-height: 1.5rem;
}

div.re-clocks { font-family: monospace; font-size: 0.85rem; font-weight: normal; line-height: 1.1rem; }

div.re-license-agreed {
    color: var(--bs-body-color);
    background-color: var(--bs-secondary-bg);
    font-size: 1rem;
    line-height: 1.5rem;
    padding: 16px 16px;
}

div.re-license-pending {
    color: var(--bs-body-color);
    background-color: var(--bs-secondary-bg);
    font-size: 1.2rem;
    line-height: 2rem;
    border: 3px solid black;
    padding: 16px 16px;
}

div.re-flex-break {
    flex-basis: 100%;
    height: 0;
}

div#offcanvasRulesets {
    color: var(--bs-body-color);
    background-color: var(--bs-secondary-bg);
}
div#offcanvasRulesets .nav {
    --bs-nav-link-padding-y: 0.33rem;
}
div#offcanvasRulesets a.nav-link i.bi-grip-vertical {
    text-decoration: none;
    color: var(--bs-secondary);
    cursor: move;
}
div#offcanvasRulesets a.nav-link i.bi-cpu {
    text-decoration: none;
    color: var(--bs-secondary);
}
div#offcanvasRulesets .sort-placeholder { background-color: var(--bs-tertiary-bg); min-height: 2rem; }

/* Global context menu styling */
#globalContextMenu {
    position: absolute;
    display: none;
    z-index: var(--bs-dropdown-zindex);
    box-shadow: var(--bs-dropdown-box-shadow);
    min-width: var(--bs-dropdown-min-width);
    font-size: 90%; /* var(--bs-dropdown-font-size); */
    color: var(--bs-dropdown-color);
    background: var(--bs-dropdown-bg);
    border-color: var(--bs-dropdown-border-color);
    border-radius: var(--bs-dropdown-border-radius);
}

#globalContextMenu .dropdown-header {
    color: var(--bs-dropdown-header-color);
    padding: var(--bs-dropdown-header-padding-y) var(--bs-dropdown-header-padding-x) !important;
}

#globalContextMenu .dropdown-item {
    cursor: pointer;
    padding: var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x) !important;
}

#globalContextMenu .dropdown-item:disabled,
#globalContextMenu .dropdown-item[disabled],
#globalContextMenu .dropdown-item.disabled,
{
    color: var(--bs-dropdown-link-disabled-color) !important;
	cursor: not-allowed !important;
	pointer-events: none !important;
}

#globalContextMenu .dropdown-item:hover {
    background-color: var(--bs-dropdown-link-hover-bg);
    color: var(--bs-dropdown-link-hover-color);
}

#globalContextMenu .dropdown-item:active {
    background-color: var(--bs-dropdown-link-active-bg);
    color: var(--bs-dropdown-link-active-color);
}

/* Optional: divider */
#globalContextMenu .context-divider {
    height: 1px;
    margin: var(--bs-dropdown-divider-margin-y) 0;
    background-color: var(--bs-dropdown-divider-bg);
}
