/* ==========================================================================
   Console skin (was rosetta-skin-light.css). Every page that asked for the skin gets
   rh-tokens.css and this file instead (AutoResourceTagHelper). These rules come first,
   so the rules further down keep overriding them as they did when they were two files.
   ========================================================================== */

/* ==========================================================================
   ROSETTA SKIN LIGHT - Global Element Styles (must remain non-prefixed)
   ========================================================================== */

:root body {
    background-color: var(--rh-surface, #ffffff);
    font-family: var(--rh-font, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);
    color: var(--rh-ink, #0f1b2d);
    font-size: var(--rh-font-size, 14px);
    height: 100%;
    padding: 0;
    margin: 0;
}

html {
    height: 100%;
    padding: 0;
}

input.textbox, select, textarea {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    border-radius: var(--rh-radius-sm, 6px);
    padding-left: 8px;
    border: 1px solid var(--rh-line-2, #cbd5e1);
    font-size: var(--rh-font-size, 14px);
}

/* Make text inputs match Select2 dropdown appearance */
input.textbox[type="text"],
input.textbox[type="password"],
input.textbox[type="email"],
input.textbox[type="number"],
input.textbox[type="date"],
input.textbox[type="time"],
input.textbox[type="url"] {
    height: 24px;
    line-height: normal;
    padding: 4px 8px;
    background-color: var(--rh-surface, #fff);
    color: var(--rh-ink-2, #444);
    vertical-align: middle;
}

textarea {
    resize: vertical;
    font-family: inherit;
    font-size: var(--rh-font-size, 14px);
    background-color: var(--rh-surface, #fff);
    color: var(--rh-ink, #0f1b2d);
    border: 1px solid var(--rh-line-2, #cbd5e1);
    border-radius: var(--rh-radius-sm, 6px);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

textarea:focus {
    outline: none;
    border-color: var(--rh-brand, #367DC7);
    box-shadow: 0 0 0 2px rgba(54, 125, 199, 0.15);
}

textarea:disabled {
    background-color: var(--rh-sunken, #f5f5f5);
    color: #888;
    cursor: not-allowed;
    resize: none;
}

textarea::placeholder {
    color: var(--rh-muted, #999);
    opacity: 1;
}

label {
    font-size: var(--rh-font-size, 14px);
}

[type=text] {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

input[type="text"] {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

input:focus {
    outline: none;
    border-color: var(--rh-brand, #367DC7);
    border-radius: 4px;
}

input.textbox[type="text"]:focus {
    outline: none;
    border-color: var(--rh-brand, #367DC7);
    border-radius: 4px;
}

input:checked + .slider {
    background-color: var(--rh-brand, #04488F);
}

input:focus + .slider {
    box-shadow: 0 0 1px var(--rh-brand, #04488F);
}

input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

input:checked + .smallslider {
    background-color: var(--rh-brand, #04488F);
}

input:focus + .smallslider {
    box-shadow: 0 0 1px var(--rh-brand, #04488F);
}

input:checked + .smallslider:before {
    -webkit-transform: translateX(13px);
    -ms-transform: translateX(13px);
    transform: translateX(13px);
}

input {
    font-size: var(--rh-font-size, 14px);
}

.textbox {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 0;
}

@font-face {
    font-family: "NTR";
    src: url("NTR/NTR-Regular.ttf") format("truetype");
}

/* ==========================================================================
   Third-party Library Overrides (must remain non-prefixed)
   Select2, jsPanel, Tabulator, Context Menu - create elements outside container
   ========================================================================== */

.igrowl-rhInfo {
    background: black;
    border-color: white;
}

.igrowl-rhInfo .igrowl-message {
    background: black;
    color: white;
    font-size: small;
}

.igrowl-rhInfo .igrowl-title {
    background: black;
    color: white;
    font-size: small;
}

.igrowl-rhInfo .igrowl-icon {
    background: black;
    color: white;
}

.igrowl-rhSuccess {
    background: green;
    border-color: white;
}

.igrowl-rhSuccess .igrowl-message {
    background: green;
    color: white;
    font-size: small;
}

.igrowl-rhSuccess .igrowl-title {
    background: green;
    color: white;
    font-size: small;
}

.igrowl-rhSuccess .igrowl-icon {
    background: green;
    color: white;
}

.igrowl-rhFailure {
    background: red;
    border-color: white;
}

.igrowl-rhFailure .igrowl-message {
    background: red;
    color: white;
    font-size: small;
}

.igrowl-rhFailure .igrowl-title {
    background: red;
    color: white;
    font-size: small;
}

.igrowl-rhFailure .igrowl-icon {
    background: red;
    color: white;
}

.igrowl-rhFinalized {
    background: slategrey;
    border-color: white;
}

.igrowl-rhFinalized .igrowl-message {
    background: slategrey;
    color: white;
    font-size: small;
}

.igrowl-rhFinalized .igrowl-title {
    background: slategrey;
    color: white;
    font-size: small;
}

.igrowl-rhFinalized .igrowl-icon {
    background: slategrey;
    color: white;
}/* Select2 multi-select height constraint */
/* Fix Select2 dropdown height to fit contents */

:root .tabulator {
    font-size: var(--rh-font-size-table, 13px);
    background-color: transparent;
    border: none;
    color: var(--rh-ink, #0f1b2d);
    font-variant-numeric: tabular-nums;
}

:root .tabulator .tabulator-tableholder {
    background-color: transparent;
}

:root .tabulator .tabulator-tableholder .tabulator-placeholder {
    background-color: transparent;
}

/* Quiet header: grey band, muted text. Was a navy bar on every table. */
.tabulator .tabulator-header {
    background-color: var(--rh-sunken, #f1f5f9);
    border-bottom: 1px solid var(--rh-line, #e2e8f0);
    color: var(--rh-muted, #64748b);
}

:root .tabulator-header .tabulator-col-content {
    background-color: var(--rh-sunken, #f1f5f9);
    color: var(--rh-muted, #64748b);
}

:root .tabulator .tabulator-header .tabulator-col {
    background-color: var(--rh-sunken, #f1f5f9);
    border-right-color: var(--rh-line, #e2e8f0);
}

:root .tabulator-popup-container {
    font-size: 10px;
}

/* Tabulator Context Menu - Modern Styling */
:root .tabulator-menu {
    background: var(--rh-surface, #ffffff);
    border: 1px solid var(--rh-line, #e2e8f0);
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.1);
    padding: 6px 0;
    min-width: 180px;
    font-family: var(--rh-font, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);
    font-size: 13px;
    z-index: 100000;
}

:root .tabulator-menu .tabulator-menu-item {
    padding: 8px 16px;
    color: #334155;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
    display: flex;
    align-items: center;
    gap: 10px;
}

:root .tabulator-menu .tabulator-menu-item:not(.tabulator-menu-item-disabled):hover {
    background: var(--rh-brand-tint, rgba(4, 72, 143, .08));
    color: var(--rh-ink, #0f1b2d);
}

:root .tabulator-menu .tabulator-menu-item.tabulator-menu-item-disabled {
    color: var(--rh-muted, #94a3b8);
    cursor: not-allowed;
}

:root .tabulator-menu .tabulator-menu-item.tabulator-menu-item-disabled:hover {
    background: transparent;
    color: var(--rh-muted, #94a3b8);
}

:root .tabulator-menu .tabulator-menu-item.tabulator-menu-item-submenu {
    padding-right: 28px;
}

/* Triangle arrow pointing right (same as jQuery contextMenu) */
:root .tabulator-menu .tabulator-menu-item.tabulator-menu-item-submenu::after {
    display: inline-block;
    position: absolute;
    top: 50%;
    right: 10px;
    width: 0;
    height: 0;
    content: '';
    border-style: solid;
    border-width: 5px 0 5px 6px;
    border-color: transparent transparent transparent var(--rh-muted, #64748b);
    transform: translateY(-50%) rotate(0deg);
}

:root .tabulator-menu .tabulator-menu-item.tabulator-menu-item-submenu:hover::after {
    border-color: transparent transparent transparent var(--rh-ink-2, #334155);
}

:root .tabulator-menu .tabulator-menu-separator {
    margin: 6px 12px;
    border-top: 1px solid var(--rh-line, #e2e8f0);
}

/* Nested submenu styling */
:root .tabulator-menu .tabulator-menu {
    margin-top: -6px;
    margin-left: 4px;
}

/* jQuery Context Menu - Modern Styling (matches Tabulator menu) */
:root .context-menu-list {
    background: var(--rh-surface, #ffffff);
    border: 1px solid var(--rh-line, #e2e8f0);
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.1);
    padding: 6px 0;
    min-width: 180px;
    font-family: var(--rh-font, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);
    font-size: 13px;
    /* jQuery contextMenu sets z-index inline on every list */
    z-index: 100000 !important;
    margin: 0;
}

:root .context-menu-item {
    padding: 8px 16px;
    color: var(--rh-ink-2, #334155);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
    background-color: transparent;
    display: flex;
    align-items: center;
}

:root .context-menu-item.context-menu-hover {
    background: var(--rh-brand-tint, rgba(4, 72, 143, .08));
    color: var(--rh-ink, #0f1b2d);
}

:root .context-menu-item.context-menu-disabled {
    color: var(--rh-muted, #94a3b8);
    cursor: not-allowed;
    background-color: transparent;
}

:root .context-menu-item.context-menu-disabled.context-menu-hover {
    background: transparent;
    color: var(--rh-muted, #94a3b8);
}

:root .context-menu-separator {
    margin: 6px 12px;
    border-bottom: 1px solid var(--rh-line, #e2e8f0);
    padding: 0;
}

:root .context-menu-submenu {
    padding-right: 28px;
}

/* Triangle arrow pointing right */
:root .context-menu-submenu::after {
    display: inline-block;
    position: absolute;
    top: 50%;
    right: 10px;
    width: 0;
    height: 0;
    content: '';
    border-style: solid;
    border-width: 5px 0 5px 6px;
    border-color: transparent transparent transparent var(--rh-muted, #64748b);
    transform: translateY(-50%);
}

:root .context-menu-submenu.context-menu-hover::after {
    border-color: transparent transparent transparent var(--rh-ink-2, #334155);
}

/* Context menu icon styling */
:root .context-menu-icon::before {
    color: var(--rh-brand, #04488F);
}

:root .context-menu-icon.context-menu-hover::before {
    color: var(--rh-brand, #04488F);
}

/* Nested submenu positioning */
:root .context-menu-list .context-menu-list {
    margin-top: -6px;
    margin-left: 2px;
}

.jsPanel-modal-backdrop {
    background-color: transparent !important
}

/* jsPanel Custom Styling - Modern Slate/Gray Theme */

/* jsPanel Header: white bar, dark title, hairline underneath */
.jsPanel-hdr {
    background: var(--rh-surface, #ffffff) !important;
    color: var(--rh-ink, #0f1b2d) !important;
    border-bottom: 1px solid var(--rh-line, #e2e8f0) !important;
}

/* jsPanel Titlebar */
.jsPanel-titlebar {
    background: transparent !important;
    color: var(--rh-ink, #0f1b2d) !important;
    font-weight: 600 !important;
}

/* jsPanel Title Text: bold (the title's own normal weight beat the titlebar's), and 10px in, so it
   starts where the Cancel button below does in every action window (_ActionButtons pads its bar 10px) */
.jsPanel-title {
    color: var(--rh-ink, #0f1b2d) !important;
    font-family: var(--rh-font, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    padding-left: var(--rh-panel-gutter, 10px) !important;
}

/* jsPanel Header Controls (minimize, maximize, close buttons) */
.jsPanel-btn {
    color: var(--rh-muted, #64748b) !important;
}

.jsPanel-btn:hover {
    background-color: var(--rh-sunken, #f1f5f9) !important;
    color: var(--rh-ink, #0f1b2d) !important;
}

/* jsPanel Content Area */
.jsPanel-content {
    background: var(--rh-surface, #ffffff) !important;
    border: none !important;
}

/* jsPanel Footer */
.jsPanel-ftr {
    background: var(--rh-sunken, #f1f5f9) !important;
    border: none !important;
    border-top: 1px solid var(--rh-line, #e2e8f0) !important;
}

/* jsPanel Border */
.jsPanel {
    border: 1px solid var(--rh-line, #e2e8f0) !important;
    border-radius: var(--rh-radius-lg, 12px) !important;
    box-shadow: var(--rh-shadow-pop, 0 8px 24px rgba(15, 27, 45, .14)) !important;
}

/* ==========================================================================
   ROSETTA SKIN LIGHT - Themed Styles (prefixed with .rosetta-skin-light)
   ========================================================================== */

.rosetta-skin-light #actionSteps {
    position: relative;
    left: 5px;
    color: rgba(0, 0, 0, 0.15);
}

.rosetta-skin-light #actionSteps a {
    font-size: 84%;
    color: var(--rh-ink-2, #444);
    text-decoration: none;
}

.rosetta-skin-light #actionSteps a.selectedStep {
    font-weight: bold;
    color: var(--rh-brand, #363092);
}

.rosetta-skin-light #actionSteps a:hover {
    color: var(--rh-brand, #363092);
}

.rosetta-skin-light #actionSteps .not-active {
    pointer-events: none;
    cursor: default;
}

.rosetta-skin-light .container {
    font-size: 100%;
    width: 100%;
    height: 95%;
    padding: 0;
    margin: 0;
    border: 0;
    position: absolute;
    overflow: hidden;
}

.rosetta-skin-light .div1 {
    overflow: auto;
    width: 100%;
}

.rosetta-skin-light .div2 {
    width: 100%;
    height: calc(100% - 300px);
    border: 0;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

.rosetta-skin-light .views {
    -webkit-appearance: button;
    -webkit-border-radius: 2px;
    -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
    -webkit-padding-end: 20px;
    -webkit-padding-start: 2px;
    -webkit-user-select: none;
    background-image: url(../images/selectarrow.png), -webkit-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);
    background-position: 97% center;
    background-repeat: no-repeat;
    border: 1px solid #AAA;
    color: #555;
    font-size: inherit;
    overflow: hidden;
    padding: 5px 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 200px;
}

.rosetta-skin-light .split {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    overflow-y: auto;
    width: 100%;
}

.rosetta-skin-light .content {
    border: 0px solid #C0C0C0;
    box-shadow: inset 0 1px 2px #e4e4e4;
    background-color: var(--rh-surface, #fff);
}

.rosetta-skin-light .gutter {
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: 50%;
}

.rosetta-skin-light .gutter.gutter-horizontal {
    cursor: col-resize;
    background-image: url('../images/vertical.png');
}

.rosetta-skin-light .gutter.gutter-vertical {
    cursor: row-resize;
    background-image: url('../images/horizontal.png');
}

.rosetta-skin-light .split.split-horizontal,
.rosetta-skin-light .gutter.gutter-horizontal {
    height: 100%;
    float: left;
}

.rosetta-skin-light .switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

.rosetta-skin-light .switch input {
    display: none;
}

.rosetta-skin-light .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--rh-line-2, #ccc);
    -webkit-transition: .4s;
    transition: .4s;
}

.rosetta-skin-light .slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

/* Rounded sliders */
.rosetta-skin-light .slider.round {
    border-radius: 34px;
}

.rosetta-skin-light .slider.round:before {
    border-radius: 50%;
}

.rosetta-skin-light .smallswitch {
    position: relative;
    display: inline-block;
    width: 23px;
    height: 12px;
}

.rosetta-skin-light .smallswitch input {
    display: none;
}

.rosetta-skin-light .smallslider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--rh-line-2, #ccc);
    -webkit-transition: .4s;
    transition: .4s;
}

.rosetta-skin-light .smallslider:before {
    position: absolute;
    content: "";
    height: 8px;
    width: 8px;
    left: 1px;
    bottom: 2px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

/* Rounded sliders */
.rosetta-skin-light .smallslider.round {
    border-radius: 17px;
}

.rosetta-skin-light .smallslider.round:before {
    border-radius: 50%;
}

/* Filter icon toggles */
.rosetta-skin-light .filter-icons-group {
    display: inline-flex;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 2px 4px;
    margin-right: 6px;
}

.rosetta-skin-light .filter-icon-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 2px 4px;
    margin-right: 1px;
}

.rosetta-skin-light .filter-icon-toggle:hover {
    opacity: 0.7;
}

.rosetta-skin-light .filter-icon-toggle .fa {
    font-size: 17px;
}

.rosetta-skin-light .filter-icon-toggle .fa-users {
    font-size: 14px;
}

.rosetta-skin-light .filter-icon-toggle .fa-lock {
    font-size: 19px;
}
.rosetta-skin-light .filter-icon-on {
    color: var(--rh-brand, #04488F);
}

.rosetta-skin-light .filter-icon-off {
    color: var(--rh-line-2, #ccc);
}

.rosetta-skin-light .divElement {
    margin-top: 5px;
}

.rosetta-skin-light .tooltip_templates {
    display: none;
}

.rosetta-skin-light .renderjson a {
    text-decoration: none;
}

.rosetta-skin-light .renderjson .disclosure {
    color: crimson;
    font-size: 150%;
}

.rosetta-skin-light .renderjson .syntax {
    color: grey;
}

.rosetta-skin-light .renderjson .string {
    color: red;
}

.rosetta-skin-light .renderjson .number {
    color: cyan;
}

.rosetta-skin-light .renderjson .boolean {
    color: plum;
}

.rosetta-skin-light .renderjson .key {
    color: lightblue;
}

.rosetta-skin-light .renderjson .keyword {
    color: lightgoldenrodyellow;
}

.rosetta-skin-light .renderjson .object.syntax {
    color: lightseagreen;
}

.rosetta-skin-light .renderjson .array.syntax {
    color: lightsalmon;
}

.rosetta-skin-light .tdcontainer {
    vertical-align: top;
    height: 32px;
}

.rosetta-skin-light .tdseparator {
    height: 16px;
}

.rosetta-skin-light .radio {
    width: 134px;
    vertical-align: top;
    height: 30px;
}

.rosetta-skin-light .toggle {
    padding-right: 2px;
    padding-left: 2px;
}

.rosetta-skin-light .displayUnit {
    width: 100%;
    height: 100%;
    overflow: visible;
    display: flex;
    flex-direction: column;
}

.rosetta-skin-light #rosetta-logo {
    position: relative;
    top: 2px;
    left: 0px;
    z-index: 1;
    width: 150px;
    height: 40px;
}

:root .rosetta-skin-light .rowClass {
    padding-top: 10px;
    padding-bottom: 5px;
    min-height: auto;
    height: auto;
    align-items: center;
}

:root .rosetta-skin-light .rowClass > * {
    align-self: center;
}

.rosetta-skin-light .component-class {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

.rosetta-skin-light .component-create-action {
    display: table-cell;
    cursor: pointer;
    color: var(--rh-brand, #04488F);
    padding-left: 5px;
    font-size: 17px;
}

.rosetta-skin-light .top-menu-action {
    font-size: 17px;
    cursor: pointer;
    color: var(--rh-brand, #04488F);
}

.rosetta-skin-light .button-container {
    margin-bottom: 0px;
}

.rosetta-skin-light .action-button {
    padding-left: 10px;
    height: 30px;
    white-space: normal;
    width: 230px;
}

.rosetta-skin-light .redeem-button {
    width: 95px;
}

.rosetta-skin-light .redeem-input {
    width: 160px;
    height: 30px;
}

.rosetta-skin-light .organizations-dropdown {
    height: 30px;
    width: 310px;
}

/* Organizations dropdown: rh-select sets the width inline */
.rosetta-skin-light .organizations-dropdown + .rh-select,
.rosetta-skin-light .rh-select.organizations-dropdown {
    width: 310px !important;
    max-width: 310px !important;
}

:root .rosetta-skin-light .my-tabulator-value,
:root .rosetta-skin-light .tabulator-header .my-tabulator-value {
    color: var(--rh-ink, #0f1b2d);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.rosetta-skin-light .panelContent {
    padding: .5rem;
}

:root .rosetta-skin-light .panelHeader {
    font-variant: normal;
}

.rosetta-skin-light div.userLink {
    color: var(--rh-brand, #04488F);
    height: inherit;
    vertical-align: middle;
    text-decoration: none;
    display: inline-block;
    width: 160px;
    text-align: right;
    height: inherit;
    padding-right: 10px;
}

.rosetta-skin-light a.userLink {
    color: var(--rh-brand, #04488F);
    height: inherit;
    vertical-align: middle;
    text-align: right;
    text-decoration: none;
    cursor: pointer;
    display: inline-block;
}

.rosetta-skin-light .yui3-button {
    /* Structure */
    display: inline-block;
    *display: inline; /*IE 6/7*/
    /*zoom: 1;*/
    font-size: 90%;
    line-height: 2; /* ~24px */
    *line-height: 1.9; /* For IE */
    /**font-size: 13px;*/ /*IE 6/7 - To reduce IE's oversized button text*/
    *overflow: visible; /*IE 6/7 - Because of IE's overly large left/right padding on buttons */
    padding: 0.42em 1em 0.42em;
    line-height: normal;
    white-space: nowrap;
    vertical-align: baseline;
    text-align: center;
    cursor: pointer;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    /* Presentation */
    /*color: var(--rh-ink-2, #444);  rgba not supported (IE 8) */
    /*color: rgba(0, 0, 0, 0.80);  rgba supported */
    /**color: var(--rh-ink-2, #444);  IE 6 & 7 */
    /* Presentation: flat primary button, no gloss */
    color: var(--rh-on-brand, #ffffff);
    border: 1px solid var(--rh-brand, #04488F);
    background: var(--rh-brand, #04488F);
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--rh-radius, 8px);
    box-shadow: none;
    transition: background-color .12s ease, border-color .12s ease;
}

.rosetta-skin-light .yui3-button:hover {
    background: var(--rh-brand-hover, #033a75);
    border-color: var(--rh-brand-hover, #033a75);
}

.rosetta-skin-light .yui3-button:focus-visible {
    outline: 2px solid var(--rh-brand-ring, rgba(4, 72, 143, .22));
    outline-offset: 2px;
}

/*** for dashboard ***/
.rosetta-skin-light hr {
    border: 0;
    height: 1px;
    background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(4,72,143,0.75), rgba(0,0,0,0));
    background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(4,72,143,0.75), rgba(0,0,0,0));
    background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(4,72,143,0.75), rgba(0,0,0,0));
    background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(4,72,143,0.75), rgba(0,0,0,0));
}

.rosetta-skin-light a {
    font-size: 90%;
    color: var(--rh-ink, #020304);
    font-family: arial, sans-serif;
}

.rosetta-skin-light .my_header a {
    color: var(--rh-ink, #020304);
    font-size: 128%;
    font-weight: normal;
    font-family: arial, sans-serif;
}

.rosetta-skin-light #radioContainer a:link {
    color: rgba(0, 0, 0, 0.58);
    text-decoration: none;
}

/* unvisited link */
.rosetta-skin-light #radioContainer a:visited {
    color: rgba(0, 0, 0, 0.58);
    text-decoration: none;
}

/* visited link */
.rosetta-skin-light #radioContainer a:hover {
    color: var(--rh-brand, #04488F);
    text-decoration: none;
}

/* mouse over link */
.rosetta-skin-light #radioContainer a:active {
    color: var(--rh-brand, #04488F);
    text-decoration: none;
}

/* selected link */
.rosetta-skin-light #radioContainer a {
    font-family: "Helvetica Neue","Lucida Grande",Verdana,sans-serif;
    /* font-size: 90%;*/
}/* Firefox: Get rid of the inner focus border */
/* Firefox: Add a border around a focused button */

.rosetta-skin-light .yui3-panel .yui3-button {
    position: relative;
    left: -4px;
    padding: 2.5px 16px 2.5px; /*0.4em 1em 0.45em;*/
}

.rosetta-skin-light .yui3-panel .yui3-widget-ft .yui3-button {
    margin-left: 8px;
}

/* Action Buttons - Submit (primary) and Cancel (secondary) */

.rosetta-skin-light .action-submit-button {
    background: var(--rh-brand, #04488F);
    color: var(--rh-on-brand, #ffffff);
    font-weight: 600;
    font-size: 115%;
    padding: 6px 14px;
    border: 1px solid var(--rh-brand, #04488F);
    border-radius: var(--rh-radius, 8px);
    box-shadow: none;
}

.rosetta-skin-light .action-submit-button:hover {
    background: var(--rh-brand-hover, #033a75);
    border-color: var(--rh-brand-hover, #033a75);
    color: var(--rh-on-brand, #ffffff);
    box-shadow: none;
}

.rosetta-skin-light .action-submit-button:active {
    background: var(--rh-brand-hover, #033a75);
    color: var(--rh-on-brand, #ffffff);
    box-shadow: none;
}

.rosetta-skin-light .action-cancel-button {
    background: var(--rh-surface, #ffffff);
    color: var(--rh-ink, #0f1b2d);
    font-weight: 600;
    font-size: 115%;
    padding: 6px 14px;
    border: 1px solid var(--rh-line-2, #cbd5e1);
    border-radius: var(--rh-radius, 8px);
    box-shadow: none;
}

.rosetta-skin-light .action-cancel-button:hover {
    background: var(--rh-sunken, #f1f5f9);
    color: var(--rh-ink, #0f1b2d);
    box-shadow: none;
}

.rosetta-skin-light .action-cancel-button:active {
    background: var(--rh-line, #e2e8f0);
    color: var(--rh-ink, #0f1b2d);
    box-shadow: none;
}

/* File pickers (Customize: Product Image) were the browser's grey default: the button now
   looks like the secondary buttons above, and the file name reads as muted text beside it */
.rosetta-skin-light input[type="file"] {
    font-family: inherit;
    font-size: var(--rh-font-size-sm, 12.5px);
    color: var(--rh-muted, #64748b);
}

.rosetta-skin-light input[type="file"]::file-selector-button {
    margin-right: 10px;
    padding: 5px 12px;
    font: inherit;
    font-weight: 600;
    color: var(--rh-ink, #0f1b2d);
    background: var(--rh-surface, #ffffff);
    border: 1px solid var(--rh-line-2, #cbd5e1);
    border-radius: var(--rh-radius, 8px);
    cursor: pointer;
    transition: background-color .15s;
}

.rosetta-skin-light input[type="file"]::file-selector-button:hover {
    background: var(--rh-sunken, #f1f5f9);
}

.rosetta-skin-light input[type="file"]:focus-visible {
    outline: 2px solid var(--rh-brand, #04488f);
    outline-offset: 2px;
    border-radius: var(--rh-radius, 8px);
}

/* Destructive action inside a dialog (Remove access): outlined in red, filled on hover */
.rosetta-skin-light .action-danger-button {
    background: var(--rh-surface, #ffffff);
    color: var(--rh-bad, #b91c1c);
    font-weight: 600;
    font-size: 115%;
    padding: 6px 14px;
    border: 1px solid var(--rh-bad, #b91c1c);
    border-radius: var(--rh-radius, 8px);
    box-shadow: none;
}

.rosetta-skin-light .action-danger-button:hover:not(:disabled) {
    background: var(--rh-bad-bg, #fee2e2);
    color: var(--rh-bad, #b91c1c);
    box-shadow: none;
}

.rosetta-skin-light .action-danger-button:disabled {
    border-color: var(--rh-line-2, #cbd5e1);
    color: var(--rh-muted, #64748b);
    cursor: not-allowed;
    opacity: 1;
}

/* ==========================================================================
   Console
   ========================================================================== */

/* ==========================================================================
   RosettaConsole refresh - shared component styles
   Loaded last on every console page, after the skins. Values come from
   rh-tokens.css. Rules that the old skins forced with !important are changed
   in those skins directly (rosetta-skin-light.css, semantic-ui-overrides.css),
   so this file needs no !important of its own.
   ========================================================================== */

/* ---------- Base ---------- */

/* The hidden attribute always hides, even on elements given a display value below
   (selection status, budget tiles, palette): author display rules override the
   browser's own [hidden] rule otherwise */
[hidden] {
    display: none !important;
}

:focus-visible {
    outline: 2px solid var(--rh-brand-ring, rgba(4, 72, 143, .22));
    outline-offset: 2px;
}

::selection {
    background: var(--rh-brand-tint-strong, rgba(4, 72, 143, .14));
}

/* ---------- Bootstrap 5 follows the tokens ---------- */

:root {
    --bs-body-font-family: var(--rh-font);
    --bs-body-color: var(--rh-ink);
    --bs-body-bg: var(--rh-surface);
    --bs-border-color: var(--rh-line);
    --bs-border-radius: var(--rh-radius);
    --bs-primary: var(--rh-brand);
    --bs-link-color: var(--rh-brand);
}

/* ---------- Golden Layout: quiet tabs, brand underline on the active one ---------- */

.lm_goldenlayout {
    background: var(--rh-bg, #f6f8fb);
}

.lm_content {
    background: var(--rh-surface, #ffffff);
    border-color: var(--rh-line, #e2e8f0);
}

.lm_header .lm_tab {
    font-family: var(--rh-font, system-ui, sans-serif);
    font-size: var(--rh-font-size-sm, 11.5px);
    color: var(--rh-muted, #64748b);
    background: transparent;
    border: 1px solid transparent;
    border-bottom: none;
}

/* Spacing for the 28px tab strip (headerHeight in goldenlayoututils.js initLayout) */
.lm_header .lm_tab {
    height: 20px;
    line-height: 20px;
    margin-top: 3px;
    padding: 2px 28px 3px 12px;
    border-radius: var(--rh-radius-sm, 6px) var(--rh-radius-sm, 6px) 0 0;
}

.lm_header .lm_tab .lm_title {
    padding-top: 0;
    line-height: 20px;
}

.lm_header .lm_tab .lm_close_tab {
    top: 9px;
    right: 9px;
}

.lm_header .lm_controls {
    top: 5px;
}

.lm_header .lm_tabdropdown_list {
    top: 28px;
}

.lm_header .lm_tab:hover {
    background: var(--rh-sunken, #f1f5f9);
    border-color: transparent;
    color: var(--rh-ink, #0f1b2d);
}

.lm_header .lm_tab.lm_active {
    background: var(--rh-surface, #ffffff);
    border: 1px solid var(--rh-line, #e2e8f0);
    border-bottom: none;
    box-shadow: inset 0 2px 0 var(--rh-brand, #04488F);
    color: var(--rh-ink, #0f1b2d);
    font-weight: 600;
}

.lm_selected .lm_header {
    background-color: var(--rh-sunken, #f1f5f9);
}

.lm_splitter:hover,
.lm_splitter.lm_dragging {
    background: var(--rh-brand, #04488F);
}

/* ---------- Tabulator: hover instead of stripes, tint for selection ---------- */

/* Horizontal padding stays close to Tabulator's 4px: the key/value tables
   use fixed column widths set in federateddashboardutils.js */
.tabulator .tabulator-header .tabulator-col .tabulator-col-content {
    padding: 5px 6px;
}

.tabulator .tabulator-header .tabulator-col .tabulator-col-title {
    font-weight: 600;
}

/* Quiet header band and placeholder on tokens. Here rather than in rosetta-skin-light.css
   because action pages (Share...) load Tabulator's stylesheet without the skin. */
.tabulator .tabulator-header,
.tabulator .tabulator-header .tabulator-col,
.tabulator .tabulator-header .tabulator-col .tabulator-col-content {
    background-color: var(--rh-sunken, #f1f5f9);
    color: var(--rh-muted, #64748b);
}

.tabulator .tabulator-header {
    border-bottom-color: var(--rh-line, #e2e8f0);
}

.tabulator .tabulator-header .tabulator-col {
    border-right-color: var(--rh-line, #e2e8f0);
}

/* Empty table message: quiet text at table size, not Tabulator's 20px bold */
.tabulator .tabulator-tableholder .tabulator-placeholder .tabulator-placeholder-contents {
    padding: 16px;
    color: var(--rh-muted, #64748b);
    font-size: var(--rh-font-size-table, 13px);
    font-weight: 400;
}

/* Sort arrow is faint until the column is sorted or hovered */
.tabulator .tabulator-header .tabulator-col .tabulator-col-sorter .tabulator-arrow {
    opacity: .35;
}

.tabulator .tabulator-header .tabulator-col:hover .tabulator-col-sorter .tabulator-arrow,
.tabulator .tabulator-header .tabulator-col[aria-sort="ascending"] .tabulator-col-sorter .tabulator-arrow,
.tabulator .tabulator-header .tabulator-col[aria-sort="descending"] .tabulator-col-sorter .tabulator-arrow {
    opacity: 1;
}

.tabulator-row,
.tabulator-row.tabulator-row-even {
    background-color: var(--rh-surface, #ffffff);
    border-bottom: 1px solid var(--rh-line, #e2e8f0);
}

.tabulator-row .tabulator-cell {
    padding: 6px 6px;
    border-right-color: transparent;
}

.tabulator-row.tabulator-selectable:hover {
    background-color: var(--rh-sunken, #f1f5f9);
}

.tabulator-row.tabulator-selected,
.tabulator-row.tabulator-selected:hover {
    background-color: var(--rh-brand-tint, rgba(4, 72, 143, .08));
}

.tabulator .tabulator-footer {
    background-color: var(--rh-surface, #ffffff);
    border-top: 1px solid var(--rh-line, #e2e8f0);
    color: var(--rh-muted, #64748b);
    font-weight: 400;
}

.tabulator .tabulator-footer .tabulator-page {
    border-radius: var(--rh-radius-sm, 6px);
    border-color: var(--rh-line-2, #cbd5e1);
    background: var(--rh-surface, #ffffff);
    color: var(--rh-ink-2, #334155);
}

.tabulator .tabulator-footer .tabulator-page.active {
    color: var(--rh-brand, #04488F);
    border-color: var(--rh-brand, #04488F);
    font-weight: 600;
}

/* Name column: the name people know, short UID with a copy button underneath */
.rh-name {
    display: flex;
    flex-direction: column;
    gap: 1px;
    line-height: 1.25;
}

.rh-name-main {
    font-weight: 600;
    color: var(--rh-ink, #0f1b2d);
}

.rh-name-id {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--rh-mono, ui-monospace, Consolas, monospace);
    font-size: 10.5px;
    color: var(--rh-muted, #64748b);
}

.rh-copy {
    display: inline-grid;
    place-items: center;
    padding: 1px;
    border: 0;
    border-radius: 3px;
    background: transparent;
    color: var(--rh-muted, #64748b);
    cursor: pointer;
    opacity: 0;
}

.tabulator-row:hover .rh-copy,
.rh-copy:focus-visible {
    opacity: 1;
}

/* Resources panels: one card grid per group (Cost estimate, Compute, Storage, Network, Monitoring) */
/* 12px on the right, like the account panel's disclosures, so counts such as "None in use"
   keep clear of the panel's scrollbar */
.rh-res {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 560px;
    margin: 4px 12px 16px 0;
}

.rh-res__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--rh-line, #e2e8f0);
}

.rh-res__title {
    font-size: 13px;
    font-weight: 650;
    color: var(--rh-ink, #0f1b2d);
}

.rh-res__meta {
    font-size: var(--rh-font-size-sm, 12.5px);
    color: var(--rh-muted, #64748b);
}

.rh-res__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 6px;
}

.rh-res__item {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 7px 10px;
    border: 1px solid var(--rh-line, #e2e8f0);
    border-radius: var(--rh-radius, 8px);
    background: var(--rh-surface, #ffffff);
    min-width: 0;
}

.rh-res__item b {
    font-size: 16px;
    font-weight: 700;
    color: var(--rh-ink, #0f1b2d);
    font-variant-numeric: tabular-nums;
}

.rh-res__item span {
    font-size: 11.5px;
    color: var(--rh-muted, #64748b);
    line-height: 1.25;
}

.rh-res__item--zero {
    background: transparent;
    border-style: dashed;
}

.rh-res__item--zero b {
    color: var(--rh-muted, #64748b);
    font-weight: 500;
}

.rh-res__more summary {
    cursor: pointer;
    font-size: var(--rh-font-size-sm, 12.5px);
    font-weight: 600;
    color: var(--rh-brand, #04488F);
    margin-bottom: 6px;
    list-style-position: inside;
}

.rh-res .rh-kpis {
    max-width: 420px;
}

/* Icon / table view switch (plan 2.2): two small icons, the current view highlighted;
   the whole control toggles */
.rh-seg {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--rh-line-2, #cbd5e1);
    border-radius: var(--rh-radius-sm, 6px);
    overflow: hidden;
    cursor: pointer;
    vertical-align: middle;
    user-select: none;
}

.rh-seg__opt {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 24px;
    color: var(--rh-muted, #64748b);
}

.rh-seg__opt .fa {
    font-size: 14px;
}

.rh-seg__opt + .rh-seg__opt {
    border-left: 1px solid var(--rh-line-2, #cbd5e1);
}

.rh-seg__opt--on {
    background: var(--rh-brand-tint, rgba(4, 72, 143, .08));
    color: var(--rh-brand, #04488F);
}

.rh-seg:hover .rh-seg__opt:not(.rh-seg__opt--on) {
    color: var(--rh-ink, #0f1b2d);
}

/* Icon grid: long names break inside their tile instead of running into the next one */
/* Icon labels break at the <wbr> after ".", "@", "-", "_" (rhBreakableLabel in nodeutils.js),
   only mid-word when a part is still too long, and stop at two lines with an ellipsis */
.item .itemLabel {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    max-width: 100%;
    overflow-wrap: break-word;
    text-align: center;
    line-height: 1.25;
}

/* Filter buttons (plan 2.5): icon and name; filled when on */
.rosetta-skin-light .filter-icons-group {
    border: 0;
    padding: 0;
    gap: 4px;
}

.rh-filter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    box-sizing: border-box;
    padding: 0 10px 0 8px;
    margin-right: 0;
    border: 1px solid var(--rh-line-2, #cbd5e1);
    /* Same height and corners as the dropdowns and search box beside them */
    border-radius: var(--rh-radius, 8px);
    font-size: var(--rh-font-size-sm, 12.5px);
    color: var(--rh-muted, #64748b);
    background: var(--rh-surface, #ffffff);
}

.rosetta-skin-light .rh-filter .fa {
    font-size: 14px;
}

.rh-filter:has(.filter-icon-on) {
    border-color: var(--rh-brand, #04488F);
    background: var(--rh-brand-tint, rgba(4, 72, 143, .08));
    color: var(--rh-brand, #04488F);
}

.rh-filter:hover {
    opacity: 1;
    border-color: var(--rh-brand, #04488F);
}

/* Row ⋯ button (plan 2.1): opens the row's menu; faint until the row is hovered */
.rh-rowmenu {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: var(--rh-radius-sm, 6px);
    background: transparent;
    color: var(--rh-muted, #64748b);
    cursor: pointer;
    opacity: .45;
}

.tabulator-row:hover .rh-rowmenu,
.rh-rowmenu:focus-visible {
    opacity: 1;
}

.rh-rowmenu:hover {
    background: var(--rh-sunken, #f1f5f9);
    color: var(--rh-ink, #0f1b2d);
}

/* Budget used in a row */
.rh-rowbar {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: var(--rh-ink-2, #334155);
    font-variant-numeric: tabular-nums;
}

.rh-rowbar .rh-bar {
    flex: 1;
    height: 6px;
}

/* Select-all checkbox: centred in its column like the row checkboxes under it */
.tabulator .tabulator-header .tabulator-col .tabulator-col-title:has(> input[type="checkbox"]) {
    text-align: center;
}

/* Selection status in the table toolbar while rows are selected */
.rh-selbar {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    /* The pill is taller than the count beside it: the negative margins keep it inside the
       line, so selecting a row doesn't push the table down */
    margin: -3px 0 -3px 8px;
    padding: 2px 4px 2px 9px;
    border-radius: 999px;
    background: var(--rh-brand-tint, rgba(4, 72, 143, .08));
    color: var(--rh-brand, #04488F);
    font-size: var(--rh-font-size-sm, 12.5px);
    vertical-align: middle;
}

.rh-selbar__clear {
    border: 0;
    border-radius: 999px;
    background: var(--rh-surface, #ffffff);
    color: var(--rh-ink, #0f1b2d);
    font: inherit;
    font-weight: 600;
    padding: 1px 8px;
    cursor: pointer;
}

/* Columns chooser of the artifact tables (rhOpenColumnChooser in welcomeutils.js) */
.rh-colchooser {
    position: absolute;
    z-index: 100000001;
    width: 260px;
    max-height: 420px;
    display: flex;
    flex-direction: column;
    padding: 10px 12px;
    border: 1px solid var(--rh-line, #e2e8f0);
    border-radius: var(--rh-radius, 8px);
    background: var(--rh-surface, #ffffff);
    color: var(--rh-ink, #0f1b2d);
    box-shadow: var(--rh-shadow-pop, 0 8px 24px rgba(15, 27, 45, .14));
    font-family: var(--rh-font, system-ui, sans-serif);
    font-size: var(--rh-font-size-sm, 12.5px);
}

.rh-colchooser__title {
    font-weight: 600;
    margin-bottom: 2px;
}

.rh-colchooser__hint {
    color: var(--rh-muted, #64748b);
    margin-bottom: 8px;
}

.rh-colchooser__list {
    overflow-y: auto;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rh-colchooser__item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 4px;
    border-radius: 4px;
    cursor: pointer;
}

.rh-colchooser__item:hover {
    background: var(--rh-sunken, #f1f5f9);
}

.rh-colchooser__actions {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--rh-line, #e2e8f0);
}

.rh-colchooser__actions button {
    border: 1px solid var(--rh-line-2, #cbd5e1);
    border-radius: 6px;
    background: var(--rh-surface, #ffffff);
    color: var(--rh-ink, #0f1b2d);
    font: inherit;
    font-weight: 600;
    padding: 3px 10px;
    cursor: pointer;
}

.rh-colchooser__actions button:hover {
    background: var(--rh-sunken, #f1f5f9);
}

/* SU badge: menu actions only superusers can run, a small circled "s" (contextmenuutils.js, SemanticMenuHelper) */
.rh-su-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 12px;
    height: 12px;
    margin-left: 5px;
    border: 1px solid var(--rh-line-2, #cbd5e1);
    border-radius: 50%;
    color: var(--rh-muted, #64748b);
    font-size: 8.5px;
    font-weight: 600;
    line-height: 1;
    vertical-align: 1px;
}

/* Status pills in tables (plan 2.1) */
.rh-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 18px;
    text-transform: capitalize;
}

.rh-pill::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.rh-pill--ok { background: var(--rh-ok-bg, #dcfce7); color: var(--rh-ok, #15803d); }
.rh-pill--warn { background: var(--rh-warn-bg, #fef3c7); color: var(--rh-warn, #b45309); }
.rh-pill--bad { background: var(--rh-bad-bg, #fee2e2); color: var(--rh-bad, #b91c1c); }
.rh-pill--muted { background: var(--rh-sunken, #f1f5f9); color: var(--rh-muted, #64748b); }

.rh-quiet {
    color: var(--rh-muted, #64748b);
}

/* IDs in key/value lists: same size as the other values, copy always visible */
.rh-kv-id {
    font-size: 12px;
    color: var(--rh-ink-2, #334155);
}

.rh-kv-id .rh-copy {
    opacity: .7;
}

.rh-copy:hover {
    background: var(--rh-sunken, #f1f5f9);
    color: var(--rh-ink, #0f1b2d);
}

.rh-copy.rh-copied {
    opacity: 1;
    color: var(--rh-ok, #15803d);
}

/* Destructive menu items, last in every menu (plan 2.4). The three menu skins force
   item colours with !important, so these have to as well. */
.context-menu-item.rh-danger,
.context-menu-item.rh-danger > span,
.ui.dropdown .menu > .item.rh-danger,
.tabulator-menu .tabulator-menu-item .rh-danger {
    color: var(--rh-bad, #b91c1c) !important;
}

.ui.dropdown .menu > .divider {
    margin: 4px 0 !important;
}

/* Budget summary: Budget, Spent, Remaining tiles and a budget-used bar (plan 2.2) */
.rh-budget {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 420px;
    margin: 4px 0 10px;
}

/* Three across when there is room; in a narrow panel they wrap rather than cut the amounts off */
.rh-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
    gap: 8px;
}

.rh-kpi {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 8px 10px;
    border: 1px solid var(--rh-line, #e2e8f0);
    border-radius: var(--rh-radius, 8px);
    background: var(--rh-surface, #ffffff);
    min-width: 0;
}

.rh-kpi span {
    font-size: var(--rh-font-size-sm, 12.5px);
    color: var(--rh-muted, #64748b);
}

.rh-kpi b {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--rh-ink, #0f1b2d);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rh-kpi em {
    font-style: normal;
    font-size: var(--rh-font-size-sm, 12.5px);
    font-weight: 600;
}

.rh-usage {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 10px;
    border: 1px solid var(--rh-line, #e2e8f0);
    border-radius: var(--rh-radius, 8px);
}

.rh-usage-row {
    display: flex;
    justify-content: space-between;
    font-size: var(--rh-font-size-sm, 12.5px);
    color: var(--rh-muted, #64748b);
    font-variant-numeric: tabular-nums;
}

.rh-usage-row b {
    color: var(--rh-ink, #0f1b2d);
}

.rh-bar {
    height: 8px;
    border-radius: 999px;
    background: var(--rh-sunken, #f1f5f9);
    border: 1px solid var(--rh-line, #e2e8f0);
    overflow: hidden;
}

.rh-bar i {
    display: block;
    height: 100%;
    border-radius: 999px;
}

/* The tiles replace the Budget & Cost table, which stays as their (hidden) data source.
   !important because setElementsDisplay() toggles the container's inline display. */
.rh-kv-replaced {
    display: none !important;
}

.rh-dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 5px 16px;
    margin: 0;
    padding: 10px;
    border: 1px solid var(--rh-line, #e2e8f0);
    border-radius: var(--rh-radius, 8px);
    font-size: var(--rh-font-size-sm, 12.5px);
}

.rh-dl dt {
    color: var(--rh-muted, #64748b);
}

.rh-dl dd {
    margin: 0;
    color: var(--rh-ink, #0f1b2d);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.rh-budget-updated {
    font-size: 11.5px;
    color: var(--rh-muted, #64748b);
}

.rh-bar i.rh-ok { background: var(--rh-brand, #04488F); }
.rh-bar i.rh-warn { background: var(--rh-warn, #b45309); }
.rh-bar i.rh-bad { background: var(--rh-bad, #b91c1c); }
em.rh-ok { color: var(--rh-ok, #15803d); }
em.rh-warn { color: var(--rh-warn, #b45309); }
em.rh-bad { color: var(--rh-bad, #b91c1c); }

/* Cloud Account panel:"Stop Idle Machines after N Minutes" stays on one line */
#computeSafeguardLabel {
    white-space: nowrap;
}

/* ---------- Dropdowns (plan 2.5): rh-select.js ----------
   The native <select> is hidden; .rh-select draws the control and .rh-select__panel
   (attached to <body>) the list. 28px control, 8px corners, brand focus ring,
   tint highlight, tick on the selected option. */

/* The native select stays in the DOM for forms to read; visually hidden */
select.select2-hidden-accessible {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    border: 0 !important;
    white-space: nowrap !important;
}

.rh-select {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    max-width: 100%;
    font-size: var(--rh-font-size-sm, 12.5px);
    box-sizing: border-box;
}

.rh-select__control {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding: 0 26px 0 9px;
    border: 1px solid var(--rh-line-2, #cbd5e1);
    border-radius: var(--rh-radius, 8px);
    background: var(--rh-surface, #ffffff);
    color: var(--rh-ink, #0f1b2d);
    cursor: pointer;
    position: relative;
    box-sizing: border-box;
    outline: none;
}

.rh-select__control:hover {
    border-color: var(--rh-muted, #64748b);
}

.rh-select__control:focus-visible,
.rh-select--open .rh-select__control {
    border-color: var(--rh-brand, #04488F);
    box-shadow: 0 0 0 3px var(--rh-brand-ring, rgba(4, 72, 143, .22));
}

.rh-select__value {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    line-height: 26px;
}

.rh-select__placeholder {
    color: var(--rh-muted, #64748b);
}

.rh-select__arrow {
    position: absolute;
    right: 10px;
    top: 50%;
    width: 6px;
    height: 6px;
    margin-top: -5px;
    border: solid var(--rh-muted, #64748b);
    border-width: 0 1.6px 1.6px 0;
    transform: rotate(45deg);
    transition: transform .12s ease;
}

.rh-select--open .rh-select__arrow {
    margin-top: -1px;
    transform: rotate(-135deg);
}

.rh-select--disabled .rh-select__control {
    background: var(--rh-sunken, #f1f5f9);
    color: var(--rh-muted, #64748b);
    cursor: not-allowed;
}

.rh-select__panel {
    position: absolute;
    z-index: 100000001;
    display: flex;
    flex-direction: column;
    max-width: 360px;
    max-height: 320px;
    padding: 4px;
    border: 1px solid var(--rh-line, #e2e8f0);
    border-radius: var(--rh-radius, 8px);
    background: var(--rh-surface, #ffffff);
    color: var(--rh-ink, #0f1b2d);
    box-shadow: var(--rh-shadow-pop, 0 8px 24px rgba(15, 27, 45, .14));
    font-family: var(--rh-font, system-ui, sans-serif);
    font-size: var(--rh-font-size-sm, 12.5px);
    box-sizing: border-box;
}

.rh-select__search {
    margin: 0 0 4px;
    padding: 5px 8px;
    border: 1px solid var(--rh-line-2, #cbd5e1);
    border-radius: var(--rh-radius-sm, 6px);
    font: inherit;
    color: inherit;
    background: var(--rh-surface, #ffffff);
}

.rh-select__bulk {
    display: flex;
    justify-content: space-between;
    padding: 2px 4px 6px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--rh-line, #e2e8f0);
}

.rh-select__bulk button {
    border: 0;
    background: none;
    padding: 2px 4px;
    font: inherit;
    font-weight: 600;
    color: var(--rh-brand, #04488F);
    cursor: pointer;
}

.rh-select__list {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    overflow-x: hidden;
    outline: none;
}

.rh-select__option {
    position: relative;
    padding: 6px 28px 6px 8px;
    border-radius: var(--rh-radius-sm, 6px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.rh-select__option--active {
    background: var(--rh-brand-tint, rgba(4, 72, 143, .08));
}

.rh-select__option[aria-selected="true"] {
    color: var(--rh-brand, #04488F);
    font-weight: 600;
}

.rh-select__option[aria-selected="true"]::after {
    content: "";
    position: absolute;
    right: 10px;
    top: 50%;
    width: 4px;
    height: 8px;
    margin-top: -6px;
    border: solid var(--rh-brand, #04488F);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.rh-select__option[aria-disabled="true"] {
    color: var(--rh-muted, #64748b);
    cursor: not-allowed;
}

.rh-select__group {
    padding: 8px 8px 3px;
    font-size: 11px;
    font-weight: 650;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--rh-muted, #64748b);
}

.rh-select__empty {
    padding: 8px;
    color: var(--rh-muted, #64748b);
}

/* Cell text follows the theme (Tabulator's own CSS fixes it at #333) */
.tabulator .tabulator-row,
.tabulator .tabulator-row .tabulator-cell {
    color: var(--rh-ink, #0f1b2d);
}

/* ---------- Key/value lists (Cloud Account, Costs, Resources, Quotas) ----------
   Two-column Tabulators from createTabulator(): the header is a section caption,
   not a sortable column header. Labels are muted, values carry the weight. */

.rh-kv.tabulator .tabulator-header,
.rh-kv.tabulator .tabulator-header .tabulator-col,
.rh-kv.tabulator .tabulator-header .tabulator-col .tabulator-col-content {
    background: transparent !important;
    border: 0;
}

.rh-kv.tabulator .tabulator-header {
    border-bottom: 1px solid var(--rh-line, #e2e8f0);
}

.rh-kv.tabulator .tabulator-header .tabulator-col .tabulator-col-content {
    padding: 6px 6px 5px;
}

.rh-kv.tabulator .tabulator-header .tabulator-col .tabulator-col-title {
    color: var(--rh-ink, #0f1b2d);
    font-size: 13px;
    font-weight: 650;
}

.rh-kv.tabulator .tabulator-header .tabulator-col-sorter {
    display: none;
}

.rh-kv.tabulator .tabulator-row .tabulator-cell:first-child {
    color: var(--rh-muted, #64748b);
}

.rh-kv.tabulator .tabulator-row {
    border-bottom-color: var(--rh-sunken, #f1f5f9);
}

/* Key/value lists don't highlight rows. Not "transparent": that shows Tabulator's white table
   background underneath, which made light text unreadable in dark mode */
.rh-kv.tabulator .tabulator-row,
.rh-kv.tabulator .tabulator-row:hover,
.rh-kv.tabulator .tabulator-tableholder .tabulator-table {
    background-color: var(--rh-surface, #ffffff);
}

/* ---------- Dark theme: third-party pieces with fixed light colours ---------- */

:root[data-theme="dark"] .js-plotly-plot .main-svg {
    background: transparent !important;
}

:root[data-theme="dark"] .js-plotly-plot .bg {
    fill: transparent !important;
}

:root[data-theme="dark"] .js-plotly-plot text {
    fill: var(--rh-muted) !important;
}

:root[data-theme="dark"] .js-plotly-plot .gtitle {
    fill: var(--rh-ink-2) !important;
}

:root[data-theme="dark"] .js-plotly-plot .gridlayer path,
:root[data-theme="dark"] .js-plotly-plot .zerolinelayer path {
    stroke: var(--rh-line) !important;
}

:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea {
    background-color: var(--rh-surface);
    color: var(--rh-ink);
    border-color: var(--rh-line-2);
    color-scheme: dark;
}

/* Logos are images with dark lettering: invert the lightness, keep the hues. The RosettaHub
   logo has a proper dark version instead (rh-skin.js swaps it) */
:root[data-theme="dark"] #liferay-image,
:root[data-theme="dark"] #cloud-logo img,
:root[data-theme="dark"] #cloud-logo svg {
    filter: invert(1) hue-rotate(180deg);
}

:root[data-theme="dark"] .filter-icon-off {
    color: var(--rh-line-2);
}

:root[data-theme="dark"] .jsPanel-content {
    color: var(--rh-ink);
}

/* Same rules when the theme follows a dark OS setting */
@media (prefers-color-scheme: dark) {

    :root[data-theme="system"] .js-plotly-plot .main-svg {
        background: transparent !important;
    }

    :root[data-theme="system"] .js-plotly-plot .bg {
        fill: transparent !important;
    }

    :root[data-theme="system"] .js-plotly-plot text {
        fill: var(--rh-muted) !important;
    }

    :root[data-theme="system"] .js-plotly-plot .gtitle {
        fill: var(--rh-ink-2) !important;
    }

    :root[data-theme="system"] .js-plotly-plot .gridlayer path,
    :root[data-theme="system"] .js-plotly-plot .zerolinelayer path {
        stroke: var(--rh-line) !important;
    }

    :root[data-theme="system"] input,
    :root[data-theme="system"] select,
    :root[data-theme="system"] textarea {
        background-color: var(--rh-surface);
        color: var(--rh-ink);
        border-color: var(--rh-line-2);
        color-scheme: dark;
    }

    :root[data-theme="system"] .filter-icon-off {
        color: var(--rh-line-2);
    }

    :root[data-theme="system"] .jsPanel-content {
        color: var(--rh-ink);
    }
}

/* ---------- Ctrl K palette (plan 3.2) ---------- */

.rh-palette {
    position: fixed;
    inset: 0;
    z-index: 100000002;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 12vh;
    background: rgba(15, 27, 45, .28);
}

.rh-palette[hidden] {
    display: none;
}

.rh-palette__box {
    display: flex;
    flex-direction: column;
    width: min(560px, 92vw);
    max-height: 64vh;
    border: 1px solid var(--rh-line, #e2e8f0);
    border-radius: var(--rh-radius-lg, 12px);
    background: var(--rh-surface, #ffffff);
    box-shadow: 0 24px 64px rgba(15, 27, 45, .28);
    overflow: hidden;
    font-family: var(--rh-font, system-ui, sans-serif);
}

.rh-palette__input {
    border: 0 !important;
    border-bottom: 1px solid var(--rh-line, #e2e8f0) !important;
    border-radius: 0 !important;
    padding: 14px 16px !important;
    height: auto !important;
    font-size: 16px !important;
    color: var(--rh-ink, #0f1b2d);
    background: transparent;
    outline: none;
    box-shadow: none !important;
}

.rh-palette__list {
    list-style: none;
    margin: 0;
    padding: 6px;
    overflow-y: auto;
}

.rh-palette__group {
    padding: 10px 10px 4px;
    font-size: 11px;
    font-weight: 650;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--rh-muted, #64748b);
}

.rh-palette__item {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 10px;
    border-radius: var(--rh-radius-sm, 6px);
    font-size: 14px;
    color: var(--rh-ink, #0f1b2d);
    cursor: pointer;
}

.rh-palette__item--active {
    background: var(--rh-brand-tint, rgba(4, 72, 143, .08));
}

.rh-palette__hint {
    color: var(--rh-muted, #64748b);
    font-size: 12.5px;
    white-space: nowrap;
}

.rh-palette__empty {
    padding: 14px 10px;
    color: var(--rh-muted, #64748b);
}

.rh-palette__foot {
    display: flex;
    gap: 16px;
    padding: 8px 14px;
    border-top: 1px solid var(--rh-line, #e2e8f0);
    background: var(--rh-sunken, #f1f5f9);
    font-size: 11.5px;
    color: var(--rh-muted, #64748b);
}

.rh-palette kbd,
.rh-palette-button kbd {
    display: inline-block;
    min-width: 16px;
    margin-right: 3px;
    padding: 0 4px;
    border: 1px solid var(--rh-line-2, #cbd5e1);
    border-radius: 4px;
    background: var(--rh-surface, #ffffff);
    font-family: var(--rh-mono, monospace);
    font-size: 10.5px;
    text-align: center;
}

/* Top-bar entry point */
.rh-palette-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 26px;
    margin-right: 10px;
    padding: 0 6px 0 10px;
    border: 1px solid var(--rh-line, #e2e8f0);
    border-radius: var(--rh-radius, 8px);
    background: var(--rh-sunken, #f1f5f9);
    color: var(--rh-muted, #64748b);
    font: inherit;
    font-size: 12.5px;
    cursor: pointer;
    white-space: nowrap;
}

.rh-palette-button:hover {
    border-color: var(--rh-line-2, #cbd5e1);
    color: var(--rh-ink, #0f1b2d);
}

/* ---------- Top-bar menus (rh-topbar.js) ---------- */

.rh-topmenu {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-right: 6px;
}

.rh-topmenu--end {
    margin-left: 6px;
    margin-right: 4px;
}

.rh-topmenu__button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 8px;
    border: 1px solid transparent;
    border-radius: var(--rh-radius, 8px);
    background: transparent;
    color: var(--rh-ink-2, #334155);
    font: inherit;
    font-size: 12.5px;
    cursor: pointer;
    white-space: nowrap;
}

.rh-topmenu__button:hover,
.rh-topmenu__button[aria-expanded="true"] {
    border-color: var(--rh-line, #e2e8f0);
    background: var(--rh-sunken, #f1f5f9);
    color: var(--rh-ink, #0f1b2d);
}

.rh-topmenu--end .rh-topmenu__button {
    padding: 0 4px 0 2px;
}

.rh-topmenu__caret {
    color: var(--rh-muted, #64748b);
    font-size: 12px;
}

.rh-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--rh-brand-tint-strong, #dbe7f5);
    color: var(--rh-brand, #04488F);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .02em;
}

.rh-topmenu__pop {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 10050;
    min-width: 230px;
    padding: 4px;
    border: 1px solid var(--rh-line, #e2e8f0);
    border-radius: var(--rh-radius, 8px);
    background: var(--rh-surface, #ffffff);
    box-shadow: var(--rh-shadow-pop, 0 12px 32px rgba(15, 27, 45, .16));
    font-size: 13px;
}

.rh-topmenu--end .rh-topmenu__pop {
    left: auto;
    right: 0;
}

.rh-topmenu__row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px !important;
    border-radius: var(--rh-radius-sm, 6px);
    color: var(--rh-ink, #0f1b2d);
    cursor: pointer;
    white-space: nowrap;
}

.rh-topmenu__row:hover {
    background: var(--rh-sunken, #f1f5f9);
}

.rh-topmenu__row > i {
    width: 16px;
    margin: 0 !important;
    color: var(--rh-muted, #64748b);
    text-align: center;
}

.rh-topmenu__sep {
    height: 1px;
    margin: 4px 6px;
    background: var(--rh-line, #e2e8f0);
}

.rh-topmenu__who {
    padding: 6px 10px 8px;
    color: var(--rh-muted, #64748b);
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rh-topmenu__theme {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 4px 6px 4px 10px;
}

/* ---------- Form controls ---------- */

input.textbox:focus,
textarea:focus,
select:focus {
    border-color: var(--rh-brand, #04488F);
    box-shadow: 0 0 0 3px var(--rh-brand-ring, rgba(4, 72, 143, .22));
}

/* ---------- Scrollbars: thin and quiet ---------- */

* {
    scrollbar-width: thin;
    scrollbar-color: var(--rh-line-2, #cbd5e1) transparent;
}

.rh-topmenu__theme .rh-seg__opt {
    border: 0;
    background: transparent;
    font: inherit;
    cursor: pointer;
}

.rh-topmenu__theme .rh-seg__opt.rh-seg__opt--on {
    background: var(--rh-brand-tint, rgba(4, 72, 143, .08));
}

.rh-topmenu__theme .rh-seg__opt + .rh-seg__opt {
    border-left: 1px solid var(--rh-line-2, #cbd5e1);
}

.rh-topmenu__state {
    margin-left: auto;
    padding-left: 16px;
    color: var(--rh-muted, #64748b);
    font-size: 12px;
}

.rh-topmenu__state--on {
    color: var(--rh-brand, #04488F);
    font-weight: 600;
}

/* ---------- Top-bar context (rh-topbar.js) ---------- */

/* The perspective picker reads as the page title */
#SetGoldenLayoutPerspectiveId .rh-select__control {
    border-color: transparent;
    background: transparent;
    font-weight: 600;
    font-size: 13px;
}

#SetGoldenLayoutPerspectiveId .rh-select__control:hover {
    border-color: var(--rh-line, #e2e8f0);
}

.rh-chip {
    margin-right: 6px;
}

.rh-chip .rh-topmenu__button {
    min-height: 26px;
    height: 26px;
    border: 1px solid var(--rh-line, #e2e8f0);
    border-radius: 999px;
    background: var(--rh-sunken, #f1f5f9);
}

.rh-chip .rh-topmenu__button {
    max-width: 300px;
    padding: 0 8px 0 10px;
    color: var(--rh-ink, #0f1b2d);
}

.rh-chip .rh-topmenu__button > .fa-cloud {
    color: var(--rh-muted, #64748b);
}

.rh-chip__text {
    overflow: hidden;
    text-overflow: ellipsis;
}

.rh-chip .rh-topmenu__pop {
    min-width: 260px;
    padding: 8px;
}

.rh-chip__field {
    display: block;
    padding: 4px 4px 6px;
}

.rh-chip__caption {
    display: block;
    margin-bottom: 4px;
    color: var(--rh-muted, #64748b);
    font-size: 11.5px;
}

.rh-chip__holder {
    padding: 0 !important;
    min-width: 0 !important;
}

.rh-chip__holder .rh-select {
    width: 100% !important;
}

/* ---------- Side menu (rh-sidemenu.js) ---------- */

/* Section headers: small spaced capitals in brand blue, so they read as labels and not as one more
   perspective or view; a chevron that turns when open, the whole row clickable */
.rh-side-section {
    margin: 10px 8px 2px 0;
    padding: 5px 8px 5px 12px !important;
    border-radius: var(--rh-radius-sm, 6px);
    cursor: pointer;
    user-select: none;
}

.rh-side-section:hover {
    background-color: var(--rh-sunken, #f1f5f9);
}

.rh-side-section:focus-visible {
    outline: 2px solid var(--rh-brand-ring, rgba(4, 72, 143, .22));
    outline-offset: 1px;
}

.rh-side-section img[id^="plusminus_"] {
    display: none;
}

.rh-side-section .displaycell {
    gap: 0;
}

#leftcol .rh-side-section .textbold {
    color: var(--rh-brand, #04488f) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.rh-side-section .displaycell::after {
    content: "";
    width: 5px;
    height: 5px;
    margin-left: auto;
    border: solid var(--rh-brand, #04488f);
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(-45deg);
    transition: transform .12s ease;
}

.rh-side-section--open .displaycell::after {
    transform: rotate(45deg);
}

/* Open or close every section (rh-topbar.js), under the side menu's collapse arrow */
.rh-sections-all {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    margin-top: 6px;
    padding: 0;
    border: 1px solid var(--rh-line, #e2e8f0);
    border-radius: 5px;
    background: var(--rh-surface, #ffffff);
    color: var(--rh-muted, #64748b);
    cursor: pointer;
}

.rh-sections-all:hover {
    color: var(--rh-brand, #04488f);
    border-color: var(--rh-brand, #04488f);
}

.rh-sections-all:focus-visible {
    outline: 2px solid var(--rh-brand-ring, rgba(4, 72, 143, .22));
    outline-offset: 1px;
}

/* Icon rail: the collapsed side menu keeps its icons; names show on hover (title) */
#leftcol.rh-rail {
    overflow-x: hidden;
}

#leftcol.rh-rail .federation-label {
    display: none;
}

#leftcol.rh-rail .ui.primary.button.federation-button {
    width: 40px !important;
    margin: 0 auto 4px 4px !important;
    padding: 5px 0 6px !important;
    text-align: center !important;
}

#leftcol.rh-rail .federation-icon {
    margin: 0;
}

#leftcol.rh-rail .rh-side-section {
    margin: 8px 8px 2px 4px;
    padding: 6px 0 !important;
    border-top: 1px solid var(--rh-line, #e2e8f0);
    border-radius: 0;
}

#leftcol.rh-rail .rh-side-section .toggle {
    display: none;
}

#leftcol.rh-rail .rh-side-section .displaycell::after {
    margin: 0 auto;
}

/* Filter bar toggle (top bar Layout menu, changeFilterBarVisibility in welcomeutils.js):
   hides the filters above each view's icons or table, keeping refresh, view switch and Actions */
.rh-filters-hidden .rowClass .filter-icons-group,
.rh-filters-hidden .rowClass label.smallswitch,
.rh-filters-hidden .rowClass select.select2-dropdown + .rh-select,
.rh-filters-hidden .rowClass input.search-input {
    display: none !important;
}

/* Toolbar controls share one height and centre line (the search box was 2px shorter) */
.rowClass .rh-select {
    margin-top: 0;
    margin-bottom: 0;
}

.rowClass input.search-input {
    height: 28px !important;
    margin: 0 !important;
    box-sizing: border-box;
}

/* The search box keeps a search box's width beside the filters; .textbox (100%) otherwise
   stretched it across the whole toolbar. It shrinks in narrow panels. */
.rowClass input.search-input.textbox {
    flex: 0 1 200px;
    width: 200px;
    min-width: 120px;
    max-width: 100%;
}

/* Month range under the cost history charts (VisualComponents.createMonthRangeSelector): the
   inline 92px width was set for 11px text and cut the dates off at the console's 14px */
/* Organization Costs: one chart area with a switch (rhOrgCostView in federateddashboardutils.js) */
.rh-costview {
    margin-top: 12px;
}

.rh-costview__switch {
    display: inline-flex;
    gap: 2px;
    margin: 0 0 6px 8px;
    padding: 2px;
    border: 1px solid var(--rh-line, #e2e8f0);
    border-radius: var(--rh-radius, 8px);
    background: var(--rh-sunken, #f1f5f9);
}

.rh-costview__switch button {
    padding: 4px 10px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--rh-muted, #64748b);
    font: inherit;
    font-size: var(--rh-font-size-sm, 12.5px);
    font-weight: 500;
    cursor: pointer;
}

.rh-costview__switch button[aria-selected="true"] {
    background: var(--rh-surface, #ffffff);
    color: var(--rh-ink, #0f1b2d);
    box-shadow: var(--rh-shadow, 0 1px 2px rgba(15, 27, 45, .06));
}

/* Wraps about as wide as the budget cards above it instead of running across a wide view */
.rh-costview__runway {
    margin: 4px 8px 0;
    max-width: 60ch;
    color: var(--rh-ink-2, #334155);
    font-size: var(--rh-font-size-sm, 12.5px);
    line-height: 1.45;
    text-wrap: pretty;
}

/* Only the chosen view's cells (rhCostView), and the charts the switch replaced. The id inside
   :not() outranks the Range row's own display: flex !important below. */
.rh-costview__off:not(#rh-none) {
    display: none !important;
}

.rh-costview__runway:empty {
    display: none;
}

/* Not when the script hides the row (setMonthRangeVisible: no monthly costs to range over) */
.displaycell[id$="Range"]:not([style*="none"]) {
    display: flex !important;
}

.displaycell[id$="Range"] {
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    padding: 12px 8px 4px 48px !important;
    color: var(--rh-muted, #64748b) !important;
}

.displaycell[id$="Range"] label {
    color: var(--rh-muted, #64748b) !important;
    font-size: var(--rh-font-size-sm, 12.5px) !important;
}

.displaycell[id$="Range"] input[type="month"] {
    width: auto !important;
    min-width: 132px;
    height: 28px;
    margin: 0 !important;
    padding: 0 6px !important;
    border: 1px solid var(--rh-line-2, #cbd5e1) !important;
    border-radius: var(--rh-radius, 8px);
    background: var(--rh-surface, #ffffff) !important;
    color: var(--rh-ink, #0f1b2d) !important;
    font-size: var(--rh-font-size-sm, 12.5px) !important;
    box-sizing: border-box;
}

/* Details on hover (tooltipster-light, nodeutils.js): the same card as the menus and the
   palette instead of the theme's grey box */
.tooltipster-sidetip.tooltipster-light .tooltipster-box {
    border: 1px solid var(--rh-line, #e2e8f0);
    border-radius: var(--rh-radius, 8px);
    background: var(--rh-surface, #ffffff);
    box-shadow: var(--rh-shadow-pop, 0 12px 32px rgba(15, 27, 45, .16));
}

.tooltipster-sidetip.tooltipster-light .tooltipster-content {
    padding: 10px 14px;
    color: var(--rh-ink, #0f1b2d);
    font-family: var(--rh-font, system-ui, sans-serif);
    font-size: var(--rh-font-size-sm, 12.5px);
    line-height: 1.45;
}

.tooltipster-sidetip.tooltipster-light .tooltipster-arrow-background {
    border-top-color: var(--rh-surface, #ffffff);
    border-bottom-color: var(--rh-surface, #ffffff);
    border-left-color: var(--rh-surface, #ffffff);
    border-right-color: var(--rh-surface, #ffffff);
}

.tooltipster-sidetip.tooltipster-light .tooltipster-arrow-border {
    border-top-color: var(--rh-line, #e2e8f0);
    border-bottom-color: var(--rh-line, #e2e8f0);
    border-left-color: var(--rh-line, #e2e8f0);
    border-right-color: var(--rh-line, #e2e8f0);
}

/* ---------- Menus: one look for the Actions dropdowns, row/right-click menus and top-bar menus ----------
   Rows inset 4px with a 6px rounded neutral hover (brand tint stays for the selected item), 13px text,
   and a thin muted chevron for submenus instead of the bold glyph and the solid triangle. */

.ui.dropdown .menu,
.context-menu-list {
    padding: 4px !important;
}

.ui.dropdown .menu > .item,
.ui.dropdown .menu .ui.dropdown.item,
.context-menu-item {
    padding: 7px 10px !important;
    border-radius: var(--rh-radius-sm, 6px);
    font-size: 13px !important;
    line-height: 18px;
}

.ui.dropdown .menu .ui.dropdown.item > .text {
    font-size: 13px !important;
}

/* has-submenu is set on every submenu row, not only while hovered */
.ui.dropdown .menu .has-submenu {
    background: transparent !important;
}

.ui.dropdown .menu > .item:hover,
.ui.dropdown .menu .ui.dropdown.item:hover,
.ui.dropdown .menu .has-submenu:hover,
.context-menu-item.context-menu-hover {
    background: var(--rh-sunken, #f1f5f9) !important;
}

.ui.dropdown .menu > .divider,
.context-menu-separator {
    margin: 4px 6px !important;
    border-color: var(--rh-line, #e2e8f0) !important;
}

/* Submenu chevron (Semantic dropdown items: "item has-submenu" and "ui dropdown item") */
.ui.dropdown .menu .item > .dropdown.icon {
    position: relative;
    width: 12px !important;
    height: 12px;
    margin: 0 0 0 16px !important;
    font-size: 0 !important;
    opacity: 1;
    float: none;
    margin-left: auto !important;
}

.ui.dropdown .menu .item > .dropdown.icon::before {
    content: "" !important;
    position: absolute;
    top: 3px;
    left: 2px;
    width: 5px;
    height: 5px;
    border: solid var(--rh-muted, #64748b);
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(-45deg);
    background: none;
    -webkit-mask: none;
    mask: none;
}

/* Submenu chevron (jQuery contextMenu) */
.context-menu-submenu::after {
    width: 5px !important;
    height: 5px !important;
    right: 12px !important;
    border-style: solid !important;
    border-width: 0 1.5px 1.5px 0 !important;
    border-color: var(--rh-muted, #64748b) !important;
    transform: translateY(-50%) rotate(-45deg) !important;
}

.context-menu-submenu.context-menu-hover::after {
    border-color: var(--rh-ink-2, #334155) !important;
}

/* Top-bar menus follow the same row size */
.rh-topmenu__pop {
    font-size: 13px;
}

.rh-topmenu__row {
    padding: 7px 10px !important;
}

/* Dropdown carets: smaller and lighter than the text they follow */
.rh-select__arrow {
    width: 5px;
    height: 5px;
    right: 11px;
    border-width: 0 1.3px 1.3px 0;
}

.rh-topmenu__caret {
    font-size: 11px;
}

/* Main menu Sign Out after its first click (guardSignOut in rh-topbar.js) */
.ui.dropdown .menu .item.rh-armed,
.ui.dropdown .menu .item.rh-armed:hover {
    background: var(--rh-bad-bg, #fee2e2) !important;
    color: var(--rh-bad, #b91c1c) !important;
}

/* Action window whose page is still being built on the server (fitPanelToFrame) */
.jsPanel.rh-panel-loading .jsPanel-content {
    position: relative;
}

.jsPanel.rh-panel-loading .jsPanel-content::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 22px;
    height: 22px;
    margin: -11px 0 0 -11px;
    border: 2px solid var(--rh-line, #e2e8f0);
    border-top-color: var(--rh-brand, #04488F);
    border-radius: 50%;
    animation: rh-spin .8s linear infinite;
}

@keyframes rh-spin {
    to { transform: rotate(360deg); }
}

/* Long cell values in tables: one line, the full value on hover (rhFormat.compactCell) */
.rh-cell-summary {
    display: inline-block;
    max-width: 360px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

/* A perspective's layout in a table: the summary opens the JSON below it (welcomeutils.js) */
.rh-layout-cell__toggle {
    display: inline-flex;
    align-items: baseline;
    max-width: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.rh-layout-cell__toggle::before {
    content: "▸";
    margin-right: 5px;
    color: var(--rh-muted, #64748b);
}

.rh-layout-cell__toggle[aria-expanded="true"]::before {
    content: "▾";
}

.rh-layout-cell__toggle:hover .rh-cell-summary b {
    color: var(--rh-brand, #04488f);
}

.rh-layout-cell .renderjson {
    margin-top: 6px;
    white-space: pre;
}

.rh-cell-summary b {
    font-weight: 600;
    margin-right: 4px;
}

/* Top of the main menu: what choosing an item does (rh-topbar.js) */
.ui.dropdown.bars-menu > .menu > .rh-menu-hint {
    padding: 8px 14px 4px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--rh-muted, #64748b);
    border-top: 1px solid var(--rh-line, #e2e8f0);
    margin-top: 4px;
    cursor: default;
    white-space: nowrap;
}

/* Submenu rows are flex rows in every menu (the main ☰ menu's were blocks), so the chevron
   sits at the right edge */
.ui.dropdown .menu .item.has-submenu,
.ui.dropdown.bars-menu .menu .item.has-submenu {
    display: flex !important;
    align-items: center;
}

@media (prefers-color-scheme: dark) {
    :root[data-theme="system"] #liferay-image,
    :root[data-theme="system"] #cloud-logo img,
    :root[data-theme="system"] #cloud-logo svg {
        filter: invert(1) hue-rotate(180deg);
    }
}

/* Golden Layout drag preview and drop target, from the theme tokens (light theme CSS had fixed colours) */
.lm_dragProxy .lm_content {
    background: var(--rh-surface, #ffffff);
    border: 1px solid var(--rh-line, #e2e8f0);
    box-shadow: var(--rh-shadow-pop, 0 12px 32px rgba(15, 27, 45, .16));
}

.lm_dragProxy .lm_header .lm_tab {
    background: var(--rh-surface, #ffffff);
    color: var(--rh-ink, #0f1b2d);
    border-color: var(--rh-line, #e2e8f0);
}

.lm_dropTargetIndicator {
    outline: 2px dashed var(--rh-brand, #04488F);
    box-shadow: none;
}

.lm_dropTargetIndicator .lm_inner {
    background: var(--rh-brand, #04488F);
    opacity: .12;
}

/* Tab holding a field that failed validation (semantic-tabs.js) */
.ui.tabular.menu .item.rh-tab-error::after {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-left: 6px;
    border-radius: 50%;
    background: var(--rh-bad, #b91c1c);
    vertical-align: middle;
}

/* ---------- Account panel (LayoutBuilder.createUserTable) ----------
   One action row (console button, window-target icons, requests as compact secondary buttons),
   then small section headings for Safeguards and Managers */
.rh-acct-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 12px 0 4px;
}

.rh-acct-actions > div {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0 !important;
    padding: 0 !important;
}

.rh-acct-actions .button-container {
    display: inline-flex !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Per-cloud buttons hidden by the dashboard (Set Google Email outside GCP) stay hidden */
.rh-acct-actions .button-container[style*="display: none"],
.rh-acct-actions .button-container[style*="display:none"] {
    display: none !important;
}

/* Cloud console button, in the cloud's colour, with an arrow that chooses where it opens */
.displayUnit .go-to-cloud-console,
.displayUnit .go-to-cloud-console-more {
    display: inline-flex !important;
    align-items: center;
    width: auto !important;
    height: 28px;
    margin: 0 !important;
    padding: 0 12px !important;
    border-radius: var(--rh-radius, 8px) !important;
    box-shadow: none !important;
    font-size: var(--rh-font-size-sm, 12.5px) !important;
    font-weight: 600 !important;
}

.displayUnit .aws-cloud-button {
    border: 1px solid #e0a31f !important;
    background: #f5b52e !important;
    color: #3d2c05 !important;
}

.displayUnit .azure-cloud-button {
    border: 1px solid #006abc !important;
    background: #0078d4 !important;
    color: #ffffff !important;
}

.displayUnit .gcp-cloud-button {
    border: 1px solid #3574e0 !important;
    background: #4285f4 !important;
    color: #ffffff !important;
}

.displayUnit .go-to-cloud-console:hover,
.displayUnit .go-to-cloud-console-more:hover {
    filter: brightness(.95);
}

/* Split: the two halves share one rounded outline, the arrow after a thin divider */
.rh-split {
    position: relative;
    display: inline-flex;
}

.rh-split .go-to-cloud-console {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.rh-split .go-to-cloud-console-more {
    padding: 0 8px !important;
    border-left-color: rgba(0, 0, 0, .18) !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    margin-left: -1px !important;
}

.rh-console-targets {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 1000;
    min-width: 180px;
    padding: 4px;
    border: 1px solid var(--rh-line, #e2e8f0);
    border-radius: var(--rh-radius, 8px);
    background: var(--rh-surface, #ffffff);
    box-shadow: var(--rh-shadow-pop, 0 8px 24px rgba(15, 27, 45, .14));
    font-size: 13px;
}

.rh-console-targets__title {
    padding: 4px 8px 6px;
    color: var(--rh-muted, #64748b);
    font-size: 12px;
}

.rh-console-targets button {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 8px;
    border: 0;
    border-radius: var(--rh-radius-sm, 6px);
    background: none;
    color: var(--rh-ink, #0f1b2d);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.rh-console-targets button:hover,
.rh-console-targets button:focus-visible {
    background: var(--rh-sunken, #f1f5f9);
    outline: none;
}

.rh-console-targets button .fa {
    width: 14px;
    color: var(--rh-brand, #04488F);
}

/* Panel buttons are secondary: outlined and sized to their label (Show Cloud Api Keys, Transfer
   Budget, Show Users...). The filled brand colour is for the button that completes a task, in
   dialogs (.action-submit-button), so it keeps its meaning. */
.displayUnit .action-button {
    width: auto !important;
    height: 28px;
    margin: 0 !important;
    padding: 0 10px !important;
    border: 1px solid var(--rh-line-2, #cbd5e1) !important;
    border-radius: var(--rh-radius, 8px) !important;
    background: var(--rh-surface, #ffffff) !important;
    background-image: none !important;
    box-shadow: none !important;
    color: var(--rh-ink, #0f1b2d) !important;
    font-size: var(--rh-font-size-sm, 12.5px) !important;
    font-weight: 500 !important;
    text-shadow: none !important;
}

.displayUnit .action-button:hover {
    background: var(--rh-sunken, #f1f5f9) !important;
}

/* The API keys block that opens under its button takes the full width */
.rh-acct-actions > div > :not(.button-container):not(button):not(i) {
    flex-basis: 100%;
}

.rh-acct-heading,
#managersDisplay #managers {
    color: var(--rh-muted, #64748b) !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.rh-acct-heading {
    margin: 16px 0 6px;
}

#managersDisplay {
    margin-top: 16px;
}

/* ---------- Dark mode: Tabulator popups (row menu) on tokens ---------- */
.tabulator-popup-container {
    background: var(--rh-surface, #ffffff);
    border-color: var(--rh-line, #e2e8f0);
    color: var(--rh-ink, #0f1b2d);
}

.tabulator-menu .tabulator-menu-separator {
    border-top-color: var(--rh-line, #e2e8f0);
}

/* Cloud chip: account summary on top, console button at the bottom (rh-topbar.js) */
.rh-chip__summary {
    padding: 4px 4px 8px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--rh-line, #e2e8f0);
}

.rh-chip__account {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--rh-ink, #0f1b2d);
    font-family: var(--rh-mono, monospace);
    font-size: 12.5px;
}

.rh-chip__account .rh-pill {
    margin-left: auto;
    font-family: var(--rh-font, system-ui, sans-serif);
}

.rh-chip__console {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 30px;
    margin-top: 8px;
    border: 1px solid var(--rh-brand, #04488F);
    border-radius: var(--rh-radius, 8px);
    background: var(--rh-brand, #04488F);
    color: var(--rh-on-brand, #ffffff);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.rh-chip__console:hover {
    background: var(--rh-brand-hover, #033a75);
}

/* Account panel header (rhAccountHeader in federateddashboardutils.js) */
.rh-acct-head {
    padding: 4px 2px 2px;
}

.rh-acct-head__name {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--rh-ink, #0f1b2d);
    font-size: 17px;
    font-weight: 650;
    letter-spacing: -.01em;
}

.rh-acct-head__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    margin-top: 4px;
    color: var(--rh-muted, #64748b);
    font-size: 13px;
}

.rh-acct-head__meta .rh-kv-id {
    font-size: 12.5px;
}

.rh-acct-head__org {
    margin-top: 2px;
    color: var(--rh-muted, #64748b);
    font-size: 13px;
}

/* The API keys block opens below the whole row instead of splitting it */
.rh-acct-actions > div > :not(.button-container):not(button):not(i) {
    order: 99;
}

.rh-acct-actions {
    padding-bottom: 12px;
    border-bottom: 1px solid var(--rh-line, #e2e8f0);
}

.rh-acct-head {
    padding: 10px 12px 2px;
}

.rh-acct-head__label {
    margin-left: 4px;
}

.rh-acct-head ~ .rh-acct-actions {
    margin: 12px 0 4px;
    padding: 0 12px 14px;
}

/* Account pool, for managers (federateddashboardutils.js updateCloudAccount) */
.rh-acct-pool {
    display: block !important;
    margin-top: 16px;
    color: var(--rh-ink-2, #334155);
    font-size: 13px;
}

.rh-acct-pool .rh-acct-heading {
    display: block;
    margin: 0 0 6px;
}

.rh-acct-pool__value {
    color: var(--rh-ink, #0f1b2d);
    font-weight: 600;
}

/* Copy button in the cloud chip summary: always visible, as in the panel header */
.rh-chip__account .rh-copy,
.rh-acct-head .rh-copy {
    opacity: .7;
}

.rh-topmenu__pop .rh-chip__console {
    color: var(--rh-on-brand, #ffffff) !important;
}

/* Icon labels: shared items had an inline color: black (nodeutils.js), unreadable in dark mode */
.item .itemLabel,
.item .itemLabel.sharedItem {
    color: var(--rh-ink, #0f1b2d) !important;
}

/* Owner line under shared items ("fa-user" + login, inline green) */
.item .itemLabel[style*="green"] {
    color: var(--rh-ok, #15803d) !important;
}

/* Tabulator's table background is white; rows normally cover it, but not everywhere */
.tabulator .tabulator-tableholder .tabulator-table {
    background-color: var(--rh-surface, #ffffff);
    color: var(--rh-ink, #0f1b2d);
}

/* Account panel disclosures: Details and Managers open like the Resources groups. Their labels
   share the left edge of the account's name and buttons above them */
.rh-acct-more,
#managersDisplay {
    margin: 14px 12px 0 12px;
}

/* Its cell already has 10px of top padding: together, the same 12px as between the other rows */
#managersDisplay {
    margin-top: 2px;
}

/* Details sits in a cell with 5px of left and 10px of top padding: line it up with the other
   folds and keep the same 12px between them */
/* Inside a cell, which adds 5px padding of its own */
.displaycell > details.rh-acct-more {
    margin-top: 2px;
    margin-left: 7px;
}

.rh-acct-more > summary,
#managersDisplay > .displaycell:first-child {
    display: flex !important;
    align-items: baseline;
    gap: 12px;
    /* The generic .displaycell top padding would sit inside the heading row, above the text */
    padding-top: 0;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--rh-line, #e2e8f0);
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.rh-acct-more > summary::-webkit-details-marker {
    display: none;
}

.rh-acct-more > summary .rh-res__meta {
    margin-left: auto;
}

/* Chevron: right when folded, down when open */
.rh-acct-more > summary::after,
#managersDisplay > .displaycell:first-child::after {
    content: "";
    align-self: center;
    width: 5px;
    height: 5px;
    margin: 0 4px 0 2px;
    border: solid var(--rh-muted, #64748b);
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(-45deg);
    transition: transform .12s ease;
}

.rh-acct-more[open] > summary::after,
#managersDisplay:has(#userManagers:not([style*="none"])) > .displaycell:first-child::after {
    transform: rotate(45deg);
}

.rh-acct-more[open] > summary {
    margin-bottom: 4px;
}

/* The disclosure's summary names the table, so its own header row goes */
.rh-acct-more #cloudAccountUidsLabel .tabulator-header {
    display: none;
}

/* Managers: the toggle row reads as a heading; the plus/minus image goes */
#managersDisplay > .displaycell:first-child img {
    display: none;
}

#managersDisplay > .displaycell:first-child .toggle {
    display: inline !important;
}

#managersDisplay > .displaycell:first-child #managers {
    color: var(--rh-ink, #0f1b2d) !important;
    font-size: 13px !important;
    font-weight: 650 !important;
    letter-spacing: 0;
    text-transform: none;
}

#managersDisplay > .displaycell:first-child::before {
    content: "";
    flex: 1;
    order: 2;
}

#managersDisplay > .displaycell:first-child::after {
    order: 3;
}

/* Account panel: every section heading looks the same (Details, Safeguards, Account pool,
   Managers) and starts on the same left edge */
.rh-acct-heading,
.rh-acct-pool .rh-acct-heading {
    display: block;
    margin: 16px 12px 8px 2px !important;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--rh-line, #e2e8f0);
    color: var(--rh-ink, #0f1b2d) !important;
    font-size: 13px !important;
    font-weight: 650 !important;
    letter-spacing: 0;
    text-transform: none;
}

.rh-acct-pool {
    margin: 0 !important;
    padding: 0 !important;
}

.rh-acct-pool__value {
    margin-left: 2px;
}

.rh-acct-heading + table.displaycell {
    margin-left: 0;
}

.rh-acct-head ~ .rh-acct-actions {
    margin-bottom: 0;
}

.rh-acct-more {
    margin-top: 12px;
}

#managersDisplay > .displaycell:first-child,
#managersDisplay > .displaycell:first-child .toggle,
#managersDisplay > .displaycell:first-child a {
    margin-left: 0 !important;
    padding-left: 0 !important;
}

#userManagers {
    padding: 6px 2px 0;
}

/* Info icon with a tooltip, e.g. what "idle" means next to the safeguard switch */
.rh-info {
    margin-left: 6px;
    font-size: 13px;
    color: var(--rh-muted, #64748b);
    cursor: help;
}

.rh-info:hover,
.rh-info:focus-visible {
    color: var(--rh-brand, #04488F);
}

/* Managers: drop the plus/minus image's cell so the title lines up with the other headings */
#managersDisplay > .displaycell:first-child > .toggle:first-child {
    display: none !important;
}

.rh-acct-head ~ .rh-acct-heading {
    margin-top: 14px !important;
}

/* Safeguard switch: the switch sits next to its label */
table.displaycell:has(#row-computeSafeguard) {
    width: auto !important;
    margin-left: 2px;
}

#row-computeSafeguard > td:first-child {
    width: 44px;
    padding: 0 !important;
}

/* Golden Layout's panel buttons (close, minimise, maximise, tab close) are dark PNGs */
:root[data-theme="dark"] .lm_controls > li,
:root[data-theme="dark"] .lm_header .lm_tab .lm_close_tab {
    filter: invert(1);
}

@media (prefers-color-scheme: dark) {
    :root[data-theme="system"] .lm_controls > li,
    :root[data-theme="system"] .lm_header .lm_tab .lm_close_tab {
        filter: invert(1);
    }
}

/* Pages that load Semantic UI's full stylesheet after the skin (Launch Formation and other
   action pages) got its body { background: #fff }: the theme's surface wins on specificity */
html body {
    background-color: var(--rh-surface, #ffffff);
    color: var(--rh-ink, #0f1b2d);
}

/* Number inputs kept the browser's default look (black, inset border in dark mode) */
input[type="number"] {
    box-sizing: border-box;
    padding: 4px 8px;
    border: 1px solid var(--rh-line-2, #cbd5e1);
    border-radius: var(--rh-radius, 8px);
    background-color: var(--rh-surface, #ffffff);
    color: var(--rh-ink, #0f1b2d);
    color-scheme: inherit;
}

/* Maximised panel: the light theme paints its header white, which hid the (dark-mode, inverted)
   buttons; it uses the same background as the normal tab strip */
.lm_maximised .lm_header {
    background-color: var(--rh-bg, #f6f8fb);
}

.rh-acct-pool__body {
    padding: 4px 2px 2px;
    color: var(--rh-ink-2, #334155);
    font-size: 13px;
}

.rh-acct-pool__actions {
    margin-top: 8px;
}

/* ---------- CodeMirror (policy editors now, the workbench editors later) ----------
   The default theme is fixed white; it follows the code tokens instead */
html .CodeMirror {
    border: 1px solid var(--rh-line-2, #cbd5e1) !important;
    border-radius: var(--rh-radius, 8px);
    background: var(--rh-code-bg, #f8fafc);
    color: var(--rh-ink, #0f1b2d);
    font-family: var(--rh-mono, ui-monospace, monospace);
    font-size: 12.5px;
}

html .CodeMirror-gutters {
    border-right: 1px solid var(--rh-line, #e2e8f0);
    background: var(--rh-code-gutter, #f1f5f9);
}

html .CodeMirror-linenumber {
    color: var(--rh-muted, #64748b);
}

html .CodeMirror-cursor {
    border-left-color: var(--rh-ink, #0f1b2d);
}

html .CodeMirror-selected,
html .CodeMirror-focused .CodeMirror-selected,
html .CodeMirror-line::selection,
html .CodeMirror-line > span::selection,
html .CodeMirror-line > span > span::selection {
    background: var(--rh-code-selection, rgba(4, 72, 143, .14));
}

html .CodeMirror-activeline-background {
    background: var(--rh-sunken, #f1f5f9);
}

html .CodeMirror-matchingbracket {
    color: var(--rh-ok, #15803d) !important;
}

/* Syntax colours readable on the dark editor background */
:root[data-theme="dark"] .cm-s-default .cm-string { color: #f0a96b; }
:root[data-theme="dark"] .cm-s-default .cm-number { color: #7fd1ae; }
:root[data-theme="dark"] .cm-s-default .cm-atom { color: #8dbbf0; }
:root[data-theme="dark"] .cm-s-default .cm-keyword { color: #c7a4f5; }
:root[data-theme="dark"] .cm-s-default .cm-property { color: #9fd0ff; }
:root[data-theme="dark"] .cm-s-default .cm-def,
:root[data-theme="dark"] .cm-s-default .cm-variable-2 { color: #8dbbf0; }
:root[data-theme="dark"] .cm-s-default .cm-comment { color: #8a9ab0; }
:root[data-theme="dark"] .cm-s-default .cm-meta,
:root[data-theme="dark"] .cm-s-default .cm-tag { color: #f59fb0; }

@media (prefers-color-scheme: dark) {
    :root[data-theme="system"] .cm-s-default .cm-string { color: #f0a96b; }
    :root[data-theme="system"] .cm-s-default .cm-number { color: #7fd1ae; }
    :root[data-theme="system"] .cm-s-default .cm-atom { color: #8dbbf0; }
    :root[data-theme="system"] .cm-s-default .cm-keyword { color: #c7a4f5; }
    :root[data-theme="system"] .cm-s-default .cm-property { color: #9fd0ff; }
    :root[data-theme="system"] .cm-s-default .cm-def,
    :root[data-theme="system"] .cm-s-default .cm-variable-2 { color: #8dbbf0; }
    :root[data-theme="system"] .cm-s-default .cm-comment { color: #8a9ab0; }
    :root[data-theme="system"] .cm-s-default .cm-meta,
    :root[data-theme="system"] .cm-s-default .cm-tag { color: #f59fb0; }
}

/* Policy editors in a fixed-height holder (Create IAM user 180px, Create role 250px, Share STS
   200px) fill it: codemirror.css loads after the pages' own 180px rule and set 300px, so the
   editor spilled under the action buttons. The holder's own #ccc border doubled the editor's. */
html #userPolicy[style*="height"] > .CodeMirror,
html #rolePolicy[style*="height"] > .CodeMirror,
html #stsPolicy[style*="height"] > .CodeMirror {
    height: 100%;
}

#userPolicy[style*="border"],
#rolePolicy[style*="border"] {
    border: 0 !important;
}

/* ---------- Save a perspective as new (goldenlayoututils.js) ---------- */

/* Layout menu rows hidden for the frame on show (setVisbility) take no room */
.rh-topmenu__pop > [style*="visibility: hidden"],
.rh-topmenu__pop > .rh-topmenu__sep:not(:has(~ :not([style*="visibility: hidden"]))) {
    display: none;
}

.rh-persp-dialog button {
    padding: 5px 12px;
    border: 1px solid var(--rh-line-2, #cbd5e1);
    border-radius: var(--rh-radius-sm, 6px);
    background: var(--rh-surface, #ffffff);
    color: var(--rh-ink, #0f1b2d);
    font: inherit;
    cursor: pointer;
    white-space: nowrap;
}

.rh-persp-dialog button:hover {
    background: var(--rh-sunken, #f1f5f9);
}

.rh-persp-dialog .rh-persp-dialog__ok {
    border-color: var(--rh-brand, #04488F);
    background: var(--rh-brand, #04488F);
    color: var(--rh-on-brand, #ffffff);
}

.rh-persp-dialog .rh-persp-dialog__ok:hover {
    background: var(--rh-brand, #04488F);
    filter: brightness(1.1);
}

.rh-persp-dialog__note {
    margin: 0 0 12px;
    color: var(--rh-muted, #64748b);
}

.rh-persp-dialog {
    position: fixed;
    inset: 0;
    z-index: 1001;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 27, 45, .35);
}

.rh-persp-dialog__box {
    width: min(420px, calc(100% - 32px));
    padding: 18px 20px;
    border: 1px solid var(--rh-line, #e2e8f0);
    border-radius: var(--rh-radius-lg, 12px);
    background: var(--rh-surface, #ffffff);
    color: var(--rh-ink, #0f1b2d);
    box-shadow: var(--rh-shadow-pop, 0 8px 24px rgba(15, 27, 45, .14));
    font-size: 13px;
}

.rh-persp-dialog__box h3 {
    margin: 0 0 12px;
    font-size: 15px;
}

.rh-persp-dialog__box label {
    display: block;
    margin-bottom: 10px;
    color: var(--rh-ink-2, #334155);
}

.rh-persp-dialog__box input,
.rh-persp-dialog__box textarea {
    display: block;
    box-sizing: border-box;
    width: 100%;
    margin-top: 4px;
    padding: 6px 8px;
    border: 1px solid var(--rh-line-2, #cbd5e1);
    border-radius: var(--rh-radius-sm, 6px);
    background: var(--rh-surface, #ffffff);
    color: var(--rh-ink, #0f1b2d);
    font: inherit;
}

.rh-persp-dialog__error {
    margin: 0 0 10px;
    color: var(--rh-bad, #b91c1c);
}

.rh-persp-dialog__actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* ---------- Where you are: dashboard or perspective, whose it is (rh-topbar.js) ---------- */

.rh-where {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: 6px;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--rh-sunken, #f1f5f9);
    color: var(--rh-ink-2, #334155);
    font-size: 12px;
    line-height: 18px;
    white-space: nowrap;
    cursor: default;
}

.rh-where > .fa {
    color: var(--rh-muted, #64748b);
}

.rh-where[data-where="dashboard"] > .fa,
.rh-where.rh-where--saved,
.rh-where.rh-where--saved > .fa {
    color: var(--rh-ok, #15803d);
}

.rh-where.rh-where--saved {
    background: var(--rh-ok-bg, #dcfce7);
}

/* Shared perspectives in the side menu: a small badge on the item's icon, so names keep their width */
#leftcol .federation-button {
    position: relative;
}

#leftcol .federation-button .rh-side-mark {
    position: absolute;
    left: 25px;
    bottom: 4px;
    padding: 1px;
    border-radius: 50%;
    background: var(--rh-surface, #ffffff);
    font-size: 8px;
    line-height: 1;
    color: var(--rh-muted, #64748b);
}

#leftcol.rh-rail .federation-button .rh-side-mark {
    display: none;
}

/* A thin scrollbar when sections are open: it takes less room from the names */
#leftcol,
#leftcol * {
    scrollbar-width: thin;
}

/* rh-select options with data-icon / data-hint (rh-select.js), e.g. the perspective picker */
.rh-select__rich {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    max-width: 100%;
    min-width: 0;
}

.rh-select__icon {
    flex: none;
    width: 12px;
    font-size: 11px;
    text-align: center;
    color: var(--rh-muted, #64748b);
}

.rh-select__text {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rh-select__hint {
    /* The ID and details give way before the name does */
    flex: 0 100 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-left: 4px;
    font-size: 11.5px;
    color: var(--rh-muted, #64748b);
}

.rh-select__value .rh-select__hint {
    display: none;
}

/* Short UIDs that show in full on click (rhFormat.idHtml) */
.rh-id {
    cursor: pointer;
    border-bottom: 1px dotted var(--rh-line-2, #cbd5e1);
}

.rh-id:hover,
.rh-id:focus-visible {
    color: var(--rh-brand, #04488F);
    border-bottom-color: currentColor;
    outline: none;
}

.rh-id--full {
    min-width: 0;
    word-break: break-all;
}

/* A cell showing a full UID wraps instead of cutting it with an ellipsis */
.tabulator-row .tabulator-cell.rh-cell--wrap {
    white-space: normal;
    text-overflow: clip;
    height: auto !important;
}

.tabulator-cell.rh-cell--wrap .rh-name-id {
    flex-wrap: wrap;
    white-space: normal;
}

/* Under the Safeguards fold, cells whose only content is empty (#fullName, now in the panel
   header; #userLimits) only add space before Details. They show again once filled. */
#rhSafeguards + div > .displaycell:empty,
#rhSafeguards + div > .displaycell:has(> :only-child:empty) {
    display: none;
}

/* Safeguards fold heading when idle stop is off */
.rh-res__meta.rh-res__meta--warn {
    color: var(--rh-warn, #b45309);
}

/* rh-select: the row that unfolds options marked data-more (e.g. More perspectives) */
.rh-select__option.rh-select__more {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 2px;
    border-top: 1px solid var(--rh-line, #e2e8f0);
    border-radius: 0 0 var(--rh-radius-sm, 6px) var(--rh-radius-sm, 6px);
    color: var(--rh-brand, #04488F);
    font-weight: 500;
}

/* Account menu > Go to cloud console: in the brand colour so it stands out among the settings */
.rh-topmenu__row.rh-topmenu__row--brand,
.rh-topmenu__row.rh-topmenu__row--brand .fa {
    color: var(--rh-brand, #04488F);
    font-weight: 600;
}

.rh-topmenu__row.rh-topmenu__row--brand:hover {
    background: var(--rh-brand-tint, rgba(4, 72, 143, .08));
}

/* Layout > Delete perspective */
.rh-topmenu__row.rh-topmenu__row--danger,
.rh-topmenu__row.rh-topmenu__row--danger .fa {
    color: var(--rh-bad, #b91c1c);
}

/* Organization chart (OrgChart JS) in dark mode: the library's boc-dark on the console's colours */
#orgchart.boc-dark {
    background-color: var(--rh-surface, #111a2b);
}

#orgchart.boc-dark .boc-input input {
    border-color: var(--rh-line-2, #33445c);
    background-color: var(--rh-sunken, #0e1626);
    color: var(--rh-ink, #e6edf6);
}

/* Organization chart cards (organizationnodeutils.js createOrgTemplate) */
#orgchart .rh-oc-card {
    fill: var(--rh-surface, #ffffff);
    stroke: var(--rh-line-2, #cbd5e1);
    stroke-width: 1;
}

#orgchart .rh-oc-badge--org { fill: #2563eb; }
#orgchart .rh-oc-badge--project { fill: #0d9488; }
#orgchart .rh-oc-badge--classroom { fill: #7c3aed; }

#orgchart .rh-oc-type {
    fill: var(--rh-muted, #64748b);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .06em;
}

#orgchart .rh-oc-name {
    fill: var(--rh-ink, #0f1b2d);
    font-size: 15px;
    font-weight: 600;
}

#orgchart .rh-oc-meta {
    fill: var(--rh-ink-2, #334155);
    font-size: 12.5px;
}

#orgchart .rh-oc-ctrl {
    fill: var(--rh-surface, #ffffff);
    stroke: var(--rh-line-2, #cbd5e1);
    stroke-width: 1;
}

#orgchart .rh-oc-ctrl-mark {
    stroke: var(--rh-muted, #64748b);
    stroke-width: 1.5;
}

#orgchart .rh-oc-dots {
    fill: var(--rh-muted, #64748b);
}

/* Organization chart details (the library's edit form, read-only here): a compact card in the
   corner instead of a 400px side panel with a large header and a placeholder avatar */
#orgchart .boc-edit-form {
    top: 12px !important;
    right: 12px !important;
    bottom: auto !important;
    width: 280px !important;
    height: auto !important;
    max-height: calc(100% - 24px);
    overflow: auto;
    border: 1px solid var(--rh-line, #e2e8f0);
    border-radius: var(--rh-radius-lg, 12px);
    background: var(--rh-surface, #ffffff) !important;
    box-shadow: var(--rh-shadow-pop, 0 8px 24px rgba(15, 27, 45, .14));
    color: var(--rh-ink, #0f1b2d);
}

#orgchart .boc-edit-form-header {
    height: auto !important;
    padding: 12px 40px 10px 14px !important;
    border-bottom: 1px solid var(--rh-line, #e2e8f0);
    background-color: transparent !important;
    text-align: left;
}

#orgchart .boc-edit-form-title {
    margin: 0 !important;
    padding: 0 !important;
    color: var(--rh-ink, #0f1b2d) !important;
    font-size: 15px !important;
    font-weight: 600;
    line-height: 1.3;
    text-align: left !important;
}

#orgchart .boc-edit-form-close {
    top: 10px !important;
    right: 10px !important;
    transform: scale(.5);
    transform-origin: top right;
}

#orgchart .boc-edit-form-close path {
    fill: var(--rh-muted, #64748b) !important;
}

/* The placeholder person drawn for every node; real user photos stay, smaller */
#orgchart .boc-edit-form-avatar:not(:has(img)) {
    display: none !important;
}

#orgchart .boc-edit-form-avatar {
    position: static !important;
    width: 48px !important;
    height: 48px !important;
    margin: 8px 0 0 !important;
    transform: none !important;
}

#orgchart .boc-edit-form-instruments:not(:has(*)) {
    display: none !important;
}

#orgchart .boc-edit-form-fields,
#orgchart .boc-edit-form-fields-inner,
#orgchart .boc-edit-form .boc-form-fieldset {
    padding: 0 !important;
    margin: 0 !important;
}

#orgchart .boc-edit-form-fields {
    padding: 6px 14px 10px !important;
}

#orgchart .boc-edit-form .boc-form-field {
    min-height: 0 !important;
    margin: 0 !important;
    padding: 5px 0 !important;
}

/* Label above its value, both from the card's left edge (the library floats the label) */
#orgchart .boc-edit-form .boc-input label {
    position: static !important;
    display: block;
    padding: 0 !important;
    transform: none !important;
    color: var(--rh-muted, #64748b) !important;
    font-size: 11.5px !important;
    line-height: 1.3;
}

#orgchart .boc-edit-form .boc-input input {
    height: auto !important;
    padding: 1px 0 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--rh-ink, #0f1b2d) !important;
    font-size: 13px !important;
}

/* Organization chart: user, cloud account and machine cards (organizationnodeutils.js) */
#orgchart .rh-oc-avatar--user { fill: #d97706; }
#orgchart .rh-oc-avatar--root { fill: #475569; }
#orgchart .rh-oc-avatar--other { fill: #92400e; }
#orgchart .rh-oc-avatar--project { fill: #0d9488; }

#orgchart .rh-oc-initials {
    fill: #ffffff;
    font-size: 14px;
    font-weight: 600;
}

#orgchart .rh-oc-sub {
    fill: var(--rh-muted, #64748b);
    font-size: 12px;
}

/* A light tile keeps cloud logos readable in both themes */
#orgchart .rh-oc-logo {
    fill: #ffffff;
    stroke: var(--rh-line, #e2e8f0);
    stroke-width: 1;
}

#orgchart .rh-oc-link {
    stroke: var(--rh-line-2, #cbd5e1);
    stroke-width: 1px;
}

#orgchart .rh-oc-count {
    fill: var(--rh-ink-2, #334155);
    font-size: 11px;
    font-weight: 600;
}

#orgchart .rh-oc-split {
    fill: none;
    stroke: var(--rh-line-2, #cbd5e1);
}

/* A disabled cloud account: dashed red outline */
#orgchart .node.disabled .rh-oc-card {
    stroke: var(--rh-bad, #b91c1c);
    stroke-dasharray: 4 3;
}

#orgchart .node.disabled .rh-oc-type {
    fill: var(--rh-bad, #b91c1c);
}

/* Organization chart: hover card on nodes (rhOrgChartHover), the same card as details on hover */
.rh-oc-hover {
    position: fixed;
    z-index: 1000;
    max-width: 360px;
    padding: 10px 14px;
    border: 1px solid var(--rh-line, #e2e8f0);
    border-radius: var(--rh-radius, 8px);
    background: var(--rh-surface, #ffffff);
    box-shadow: var(--rh-shadow-pop, 0 12px 32px rgba(15, 27, 45, .16));
    color: var(--rh-ink, #0f1b2d);
    font-family: var(--rh-font, system-ui, sans-serif);
    font-size: var(--rh-font-size-sm, 12.5px);
    line-height: 1.45;
    pointer-events: none;
}

.rh-oc-hover__kind {
    color: var(--rh-muted, #64748b);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.rh-oc-hover__title {
    font-size: 14px;
    font-weight: 600;
}

.rh-oc-hover dl {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 3px 12px;
    margin: 8px 0 0;
}

.rh-oc-hover dt {
    color: var(--rh-muted, #64748b);
}

.rh-oc-hover dd {
    margin: 0;
    overflow-wrap: anywhere;
}

/* Organization chart: the members holder (createOrgTemplate) */
#orgchart .rh-oc-group {
    fill: transparent;
    stroke: var(--rh-line-2, #cbd5e1);
    stroke-width: 1;
    stroke-dasharray: 4 4;
}

#orgchart .rh-oc-group-title {
    fill: var(--rh-muted, #64748b);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* Organization view toolbar (All Clouds, Multiple Inheritance, Compliance): muted when off, brand
   on a tint when on, readable in both themes (the shared off colour is a faint line colour) */
.controls-row .filter-icon-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 28px;
    border-radius: var(--rh-radius-sm, 6px);
    cursor: pointer;
}

.controls-row .filter-icon-toggle:hover {
    background: var(--rh-sunken, #f1f5f9);
}

.controls-row .filter-icon-toggle .filter-icon-off {
    color: var(--rh-muted, #64748b);
}

.controls-row .filter-icon-toggle .filter-icon-on {
    color: var(--rh-brand, #04488F);
}

.controls-row .filter-icon-toggle:has(.filter-icon-on) {
    background: var(--rh-brand-tint, rgba(4, 72, 143, .08));
}

/* Organization chart: compliance node (createComplianceTemplate) */
#orgchart .rh-oc-card--bad {
    stroke: var(--rh-bad, #b91c1c);
}

#orgchart .rh-oc-badge--bad { fill: #dc2626; }

#orgchart .rh-oc-type--bad {
    fill: var(--rh-bad, #b91c1c);
}

#orgchart .rh-oc-link--bad {
    stroke: var(--rh-bad, #b91c1c);
    stroke-dasharray: 5 5;
}

/* Compliance details window (showComplianceModal) */
.rh-cv-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 27, 45, .45);
}

.rh-cv-dialog {
    display: flex;
    flex-direction: column;
    width: min(680px, calc(100% - 32px));
    max-height: 80vh;
    border: 1px solid var(--rh-line, #e2e8f0);
    border-radius: var(--rh-radius-lg, 12px);
    background: var(--rh-surface, #ffffff);
    box-shadow: var(--rh-shadow-pop, 0 8px 24px rgba(15, 27, 45, .14));
    color: var(--rh-ink, #0f1b2d);
    font-family: var(--rh-font, system-ui, sans-serif);
    font-size: 13px;
}

.rh-cv-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px 10px;
    border-bottom: 1px solid var(--rh-line, #e2e8f0);
}

.rh-cv-head h3 {
    margin: 0 0 2px;
    color: var(--rh-bad, #b91c1c);
    font-size: 15px;
}

.rh-cv-close {
    border: 0;
    background: none;
    color: var(--rh-muted, #64748b);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.rh-cv-body {
    overflow: auto;
    padding: 10px 18px 16px;
}

.rh-cv-muted {
    color: var(--rh-muted, #64748b);
    font-size: 12px;
}

.rh-cv-policy {
    margin: 6px 0;
    border: 1px solid var(--rh-line, #e2e8f0);
    border-radius: var(--rh-radius, 8px);
}

.rh-cv-policy > summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    cursor: pointer;
}

.rh-cv-policy__name {
    flex: 1;
    min-width: 0;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.rh-cv-count {
    flex: none;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--rh-bad-bg, #fee2e2);
    color: var(--rh-bad, #b91c1c);
    font-size: 11.5px;
    font-weight: 600;
}

.rh-cv-policy > .rh-cv-muted {
    padding: 0 12px 6px;
}

.rh-cv-resource {
    margin: 0 12px 6px;
    border-radius: var(--rh-radius-sm, 6px);
    background: var(--rh-sunken, #f1f5f9);
}

.rh-cv-resource > summary {
    padding: 6px 10px;
    font-family: var(--rh-mono, ui-monospace, monospace);
    font-size: 12px;
    overflow-wrap: anywhere;
    cursor: pointer;
}

.rh-cv-resource dl {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 3px 12px;
    margin: 0;
    padding: 2px 10px 8px;
    font-size: 12px;
}

.rh-cv-resource dt {
    color: var(--rh-muted, #64748b);
}

.rh-cv-resource dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.rh-cv-resource pre {
    margin: 0 10px 8px;
    padding: 8px;
    max-height: 220px;
    overflow: auto;
    border-radius: var(--rh-radius-sm, 6px);
    background: var(--rh-code-bg, #f8fafc);
    color: var(--rh-ink, #0f1b2d);
    font-size: 11px;
}

.rh-cv-policy__desc {
    padding: 0 12px 8px;
    color: var(--rh-ink-2, #334155);
    font-size: 12px;
    line-height: 1.45;
}

.rh-cv-tag {
    flex: none;
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--rh-sunken, #f1f5f9);
    color: var(--rh-muted, #64748b);
    font-family: var(--rh-mono, ui-monospace, monospace);
    font-size: 11px;
}

/* ---------- Guided tour (rh-tour.js) ---------- */

/* Catches clicks on the page while the tour runs */
.rh-tour-block {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
}

/* The highlighted control: everything around it is dimmed by the shadow */
.rh-tour-spot {
    position: fixed;
    z-index: 2147483001;
    border-radius: var(--rh-radius-lg, 12px);
    box-shadow: 0 0 0 2px var(--rh-brand, #04488F), 0 0 0 9999px rgba(15, 27, 45, .55);
    pointer-events: none;
    transition: left .2s ease, top .2s ease, width .2s ease, height .2s ease;
}

.rh-tour {
    position: fixed;
    z-index: 2147483002;
    width: 320px;
    max-width: calc(100vw - 16px);
    padding: 16px;
    border: 1px solid var(--rh-line, #e2e8f0);
    border-radius: var(--rh-radius-lg, 12px);
    background: var(--rh-surface, #ffffff);
    box-shadow: var(--rh-shadow-pop, 0 8px 24px rgba(15, 27, 45, .14));
    color: var(--rh-ink, #0f1b2d);
    font-family: var(--rh-font, system-ui, sans-serif);
}

.rh-tour__step {
    color: var(--rh-muted, #64748b);
    font-size: 12px;
    margin-bottom: 4px;
}

.rh-tour__title {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 6px;
}

.rh-tour__text {
    margin: 0 0 14px;
    color: var(--rh-ink-2, #334155);
    font-size: 13.5px;
    line-height: 1.5;
}

.rh-tour__actions {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
}

.rh-tour__actions button {
    height: 30px;
    padding: 0 12px;
    border-radius: var(--rh-radius, 8px);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.rh-tour__actions .rh-tour__skip {
    margin-right: auto;
    padding-left: 0;
    border: 0;
    background: none;
    color: var(--rh-muted, #64748b);
}

.rh-tour__skip:hover {
    color: var(--rh-ink, #0f1b2d);
}

.rh-tour__back {
    border: 1px solid var(--rh-line-2, #cbd5e1);
    background: var(--rh-surface, #ffffff);
    color: var(--rh-ink, #0f1b2d);
}

.rh-tour__next {
    border: 1px solid var(--rh-brand, #04488F);
    background: var(--rh-brand, #04488F);
    color: var(--rh-on-brand, #ffffff);
}

.rh-tour__actions button:focus-visible {
    outline: 2px solid var(--rh-brand-ring, rgba(4, 72, 143, .22));
    outline-offset: 2px;
}

/* "Ask AI" in the top bar, before the "?" and the account menu (rh-topbar.js) */
.rh-ai {
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
}

.rh-ai-button {
    border-color: var(--rh-line, #e2e8f0);
    color: var(--rh-ink, #0f1b2d);
    font-weight: 500;
}

.rh-ai-button > .fa {
    color: var(--rh-brand, #04488F);
    font-size: 14px;
}

/* Narrow windows: the sparkle alone */
@media (max-width: 1100px) {
    .rh-ai-button__label {
        display: none;
    }
}

/* "?" in the top bar that starts the tour */
.rh-tour-button {
    margin-left: 6px;
    padding: 0 6px;
    font-size: 15px;
    color: var(--rh-muted, #64748b);
}

/* Where to click: a pulsing outline on the controls a step is about */
.rh-tour-point {
    position: fixed;
    z-index: 2147483001;
    border: 2px solid var(--rh-brand, #04488F);
    border-radius: var(--rh-radius, 8px);
    pointer-events: none;
    animation: rh-tour-pulse 1.6s ease-out infinite;
}

@keyframes rh-tour-pulse {
    0% { box-shadow: 0 0 0 0 var(--rh-brand-ring, rgba(4, 72, 143, .35)); }
    70% { box-shadow: 0 0 0 8px rgba(4, 72, 143, 0); }
    100% { box-shadow: 0 0 0 0 rgba(4, 72, 143, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .rh-tour-point { animation: none; }
}

/* Session workbench toolbar: space between the menu and the first button (Share) */
#action_panel td > div > div + .yui3-button {
    margin-left: 8px;
}

/* Session workbench toolbar: connection tools as small labelled buttons (MenuHelper.ConnectActions) */
.rh-connect-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 6px;
    padding: 4px 10px;
    border: 1px solid var(--rh-line-2, #cbd5e1);
    border-radius: var(--rh-radius, 8px);
    background: var(--rh-surface, #ffffff);
    color: var(--rh-ink-2, #334155);
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    vertical-align: middle;
}

.rh-connect-btn .fa {
    color: var(--rh-brand, #04488f);
    font-size: 13px;
}

.rh-connect-btn:hover {
    background: var(--rh-sunken, #f1f5f9);
}

.rh-connect-btn:focus-visible {
    outline: 2px solid var(--rh-brand, #04488f);
    outline-offset: 2px;
}

/* Machine state on a tile (nodeutils.js getIconsDivs): a solid round badge with a white symbol and
   a ring in the page colour, so running, stopped and in-between states read at a glance */
.rh-tile-status i.fa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 14px !important;
    height: 14px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 50%;
    font-size: 8.5px !important;
    line-height: 1;
    color: #ffffff !important;
    box-shadow: 0 0 0 1.5px var(--rh-surface, #ffffff);
}

.rh-tile-status--running i.fa { background: #16a34a; }
.rh-tile-status--stopped i.fa { background: #dc2626; }
.rh-tile-status--busy i.fa { background: #d97706; }
.rh-tile-status--other i.fa { background: #64748b; }

/* The spinner keeps turning inside its badge */
.rh-tile-status--busy i.fa-spin { font-size: 8.5px !important; }

/* Copy buttons beside IDs in Show Info and the details on hover (rhAddCopyButton, nodeutils.js):
   faint until the row is hovered, so a long list of IDs stays readable */
.rh-copyable { position: relative; }
.rh-copy-id {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 20px;
    margin-left: 6px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 4px;
    background: none;
    color: var(--rh-muted, #64748b);
    font-size: 11px;
    line-height: 1;
    vertical-align: middle;
    cursor: pointer;
    opacity: .45;
}
.rh-copyable:hover .rh-copy-id,
.rh-copy-id:focus-visible { opacity: 1; border-color: var(--rh-line-2, #cbd5e1); background: var(--rh-surface, #ffffff); }
.rh-copy-id:hover { color: var(--rh-brand, #04488f); }
.rh-copy-id--done, .rh-copy-id--done:hover { opacity: 1; color: #15803d; }