/* ===========================================================================
 * CommandEdge console — object pages (phase 3, generic layer).
 * Restyles what stfwTableData / stfwFields / stfwModal render for EVERY object:
 *   - page toolbar (.header-grid-container)
 *   - list view (.grid-container + stfwFields inputs), sortable headers
 *   - tile view (makeGridDisplayEntry tiles)
 *   - record popup and every other stfwModal (.ldcv > .base > .inner.card)
 *   - the shared input controls (.stfwinput-field / -select / -checkbox)
 * Classes prefixed .ob- are added by javascript/stfwObjects.js; the legacy code
 * paints many colours inline, hence the targeted !important.
 * Per-object editors (orchestration designer, parser editors) are not covered.
 * ======================================================================== */

/* -------- legacy theme variables, retuned to CommandEdge -----------------
   These are read by the legacy JS at render time (getCssStyleVariable), so this
   recolours inline styles across every legacy screen in one place. */
:root {
    --main-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --full-color: #1E5BFF;
    --main-color: #1E5BFF;
    --menu-entry-color: #C3CFF4;          /* disabled icons, tile fills */
    --menu-menu-entry-color: #1E5BFF;     /* enabled icons, labels, dialog titles */
    --button-main-color: #1E5BFF;
    --default-button-color: #1E5BFF;
    --offset-button-color: #475467;
    --table-row-alt-color: #ffffff;
    --table-row-selected-color: #EAF0FF;

    --ob-ink: #0f1d2b;
    --ob-ink-2: #344454;
    --ob-muted: #5b6b7b;
    --ob-line: #e3e9ef;
    --ob-line-strong: #d5dde6;
    --ob-hover: #f6f9fc;
    --ob-head: #f9fafb;
    --ob-brand: #1E5BFF;
    --ob-brand-hover: #1748D6;
    --ob-info-bg: #EEF2FF;
    --ob-ring: 0 0 0 4px rgba(30, 91, 255, .22);
    --ob-font: var(--main-font);
}

/* ---------------------------------------------------------------- controls */
.stfwinput-field,
.stfwinput-select {
    height: 34px;
    padding: 0 10px;
    text-indent: 0;
    font-family: var(--ob-font) !important;
    font-size: 13.5px !important;
    font-weight: 400;
    color: var(--ob-ink);
    background-color: var(--ob-field);
    border: 1px solid var(--ob-line-strong);
    border-radius: 8px;
    box-shadow: none;
    outline: none;
    transition: border-color .12s, box-shadow .12s, background-color .12s;
}
.stfwinput-select {
    padding-right: 30px;
    line-height: 32px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235b6b7b' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px 12px;
}
.stfwinput-field:hover, .stfwinput-select:hover { border-color: var(--ob-line-hover); }
.stfwinput-field:focus, .stfwinput-select:focus { border-color: var(--ob-brand); box-shadow: var(--ob-ring); }
.stfwinput-field:disabled, .stfwinput-select:disabled, .stfwinput-field[readonly] { background-color: var(--ob-field-disabled); color: var(--ob-muted); }

.stfwinput-checkbox {
    width: 18px !important; height: 18px !important;
    padding: 0;
    border: 1.5px solid var(--ob-line-hover);
    border-radius: 5px;
    background: var(--ob-field);
    box-shadow: none;
    cursor: pointer;
}
input.stfwinput-checkbox:checked,
input[type=checkbox].stfwinput-checkbox:checked {
    background: var(--ob-brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
    border-color: var(--ob-brand);
}
.stfwinput-checkbox:focus-visible { outline: none; box-shadow: var(--ob-ring); }
input[type=color] { width: 34px; height: 26px; padding: 0; border: 1px solid var(--ob-line-strong); border-radius: 6px; background: var(--ob-field); cursor: pointer; }
input[type=color]::-webkit-color-swatch-wrapper { padding: 2px; }
input[type=color]::-webkit-color-swatch { border: 0; border-radius: 4px; }

/* ---------------------------------------------------------------- page toolbar */
:is(#hello, .ob-scope) .header-grid-container {
    display: flex !important;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 4px 0 18px;
    font-family: var(--ob-font);
    color: var(--ob-ink);
}
:is(#hello, .ob-scope) .header-grid-container > div {
    height: auto; line-height: normal;
    background: transparent;
    font-size: 13.5px; font-weight: 600;
}
:is(#hello, .ob-scope) .header-grid-container > div:first-child {        /* page title */
    margin-right: 16px;
    font-size: 24px; font-weight: 700; letter-spacing: -.01em;
    color: var(--ob-ink);
}
:is(#hello, .ob-scope) .header-grid-container > div:empty { display: none; }
:is(#hello, .ob-scope) .header-grid-container > .ob-tool {
    display: inline-flex; align-items: center; gap: 7px;
    height: 36px; padding: 0 12px;
    border: 1px solid var(--ob-line-strong); border-radius: 8px;
    background: var(--ob-surface); color: var(--ob-ink-2);
    cursor: pointer; white-space: nowrap;
    box-shadow: var(--ob-shadow-sm);
    transition: background-color .12s, border-color .12s;
}
:is(#hello, .ob-scope) .header-grid-container > .ob-tool:hover { background: var(--ob-hover); }
:is(#hello, .ob-scope) .header-grid-container > .ob-tool > svg { width: 16px; height: 16px; flex: none; }
:is(#hello, .ob-scope) .header-grid-container > .ob-tool > svg path { fill: currentColor; }
:is(#hello, .ob-scope) .header-grid-container > .ob-tool.ob-tool-primary { background: var(--ob-brand); border-color: var(--ob-brand); color: #fff; }
:is(#hello, .ob-scope) .header-grid-container > .ob-tool.ob-tool-primary:hover { background: var(--ob-brand-hover); }
:is(#hello, .ob-scope) .header-grid-container > .ob-tool.ob-tool-danger { color: var(--ob-danger); }
:is(#hello, .ob-scope) .header-grid-container > .ob-tool.ob-disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
:is(#hello, .ob-scope) .header-grid-container > .ob-tool.ob-disabled:hover { background: var(--ob-surface); }
:is(#hello, .ob-scope) .header-grid-container > .ob-tool-icononly { padding: 0; width: 36px; justify-content: center; }
:is(#hello, .ob-scope) #searchtag { display: none; }
:is(#hello, .ob-scope) #searchtagelement { order: 100; margin-left: 8px; }
:is(#hello, .ob-scope) #searchtagelement input {
    width: 260px; height: 36px;
    padding-left: 34px;
    background: var(--ob-field) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2398a2b3' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") 10px center / 16px 16px no-repeat;
}
/* Cards | List switch (stfwTableData.makeViewSwitch) - after the search box */
:is(#hello, .ob-scope) .header-grid-container > .ob-viewswitch {
    order: 101; margin-left: 8px;
    display: inline-flex; padding: 3px; gap: 2px;
    border: 1px solid var(--ob-line-strong); border-radius: 9px;
    background: var(--ob-field);
}
.ob-viewswitch > button {
    height: 28px; padding: 0 12px;
    border: 0; border-radius: 6px;
    background: transparent; color: var(--ob-muted);
    font: 600 13px var(--ob-font);
    cursor: pointer;
}
.ob-viewswitch > button:hover { color: var(--ob-ink); }
.ob-viewswitch > button.ob-on { background: var(--ob-surface); color: var(--ob-ink); box-shadow: var(--ob-shadow-sm), 0 0 0 1px var(--ob-line-strong); cursor: default; }
.ob-viewswitch > button:focus-visible { outline: none; box-shadow: var(--ob-ring); }
/* left-aligned over the list: title, then the action buttons, then the search box */
:is(#hello, .ob-scope) .header-grid-container > div:first-child { order: -2; }

/* ---------------------------------------------------------------- list view */
:is(#hello, .ob-scope) .grid-container.ob-list {
    row-gap: 0 !important;
    grid-auto-rows: 48px !important;
    background: var(--ob-surface);
    border: 1px solid var(--ob-line);
    border-radius: 12px;
    box-shadow: var(--ob-shadow-sm);
    overflow: auto;
    font-family: var(--ob-font);
}
:is(#hello, .ob-scope) .grid-container.ob-list > div {
    height: 48px; line-height: normal;
    justify-content: flex-start;
    padding: 0 8px;
    background: var(--ob-surface);
    border-bottom: 1px solid var(--ob-line);
    font-weight: 400; font-size: 13.5px; color: var(--ob-ink);
    min-width: 0;
}
:is(#hello, .ob-scope) .grid-container.ob-list > div.ob-th {
    position: sticky; top: 0; z-index: 2;
    height: 42px;
    background: var(--ob-head);
    color: var(--ob-muted) !important;
    font-size: 11.5px !important; font-weight: 600;
    text-transform: uppercase; letter-spacing: .04em;
    white-space: nowrap;
}
:is(#hello, .ob-scope) .grid-container.ob-list > div.ob-th > div { display: none; }     /* the   spacer */
:is(#hello, .ob-scope) .grid-container.ob-list > div.ob-th > svg { width: 12px; height: 12px; margin-left: 3px; cursor: pointer; opacity: .8; flex: none; }
:is(#hello, .ob-scope) .grid-container.ob-list > div.ob-th > svg:hover { opacity: 1; }
:is(#hello, .ob-scope) .grid-container.ob-list > div.ob-hover { background: var(--ob-hover) !important; }
:is(#hello, .ob-scope) .grid-container.ob-list > div.ob-rowstart { justify-content: center; padding: 0; }
:is(#hello, .ob-scope) .grid-container.ob-list > div.ob-rowstart > svg:not(.ob-rowimg) { width: 20px; height: 20px; cursor: pointer; opacity: .85; transition: opacity .12s, transform .12s; }
:is(#hello, .ob-scope) .grid-container.ob-list > div.ob-rowstart > svg:not(.ob-rowimg):hover { opacity: 1; transform: translateX(2px); }

/* the record's own image in place of the arrow (stfwTableData.rowOpener) - drawn
   for light backgrounds like the card logos, so it sits on the logo chip in dark */
:is(#hello, .ob-scope) .grid-container.ob-list > div.ob-rowstart > .ob-rowimg {
    height: 24px; width: auto; max-width: 30px; object-fit: contain;
    cursor: pointer; border-radius: 5px;
    transition: transform .12s;
}
:is(#hello, .ob-scope) .grid-container.ob-list > div.ob-rowstart > .ob-rowimg:hover { transform: scale(1.08); }
html[data-theme="dark"] :is(#hello.ob-page, .ob-scope.ob-page) .grid-container.ob-list > div.ob-rowstart > .ob-rowimg {
    background: var(--ob-logo-bg); padding: 2px; height: 26px; box-sizing: border-box;
}

/* Inline-edit fields read like text until you point at or focus them. */
:is(#hello, .ob-scope) .grid-container.ob-list .stfwinput-field,
:is(#hello, .ob-scope) .grid-container.ob-list .stfwinput-select {
    width: 100% !important; max-width: 100%;
    border-color: transparent;
    background-color: transparent;
}
:is(#hello, .ob-scope) .grid-container.ob-list .stfwinput-select { background-image: none; }
:is(#hello, .ob-scope) .grid-container.ob-list > div.ob-hover .stfwinput-field,
:is(#hello, .ob-scope) .grid-container.ob-list > div.ob-hover .stfwinput-select { border-color: var(--ob-line-strong); background-color: var(--ob-field); }
:is(#hello, .ob-scope) .grid-container.ob-list > div.ob-hover .stfwinput-select,
:is(#hello, .ob-scope) .grid-container.ob-list .stfwinput-select:focus {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235b6b7b' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
:is(#hello, .ob-scope) .grid-container.ob-list .stfwinput-field:focus,
:is(#hello, .ob-scope) .grid-container.ob-list .stfwinput-select:focus { border-color: var(--ob-brand); background-color: var(--ob-field); }

/* ---------------------------------------------------------------- tile view */
:is(#hello, .ob-scope) .grid-container.ob-tiles {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
    grid-auto-rows: auto !important;
    gap: 16px !important;
    margin: 0 !important;
    height: auto !important;
    overflow: visible !important;
    font-family: var(--ob-font);
}
:is(#hello, .ob-scope) .header-grid-container + div > br { display: none; }   /* the two <br> above the tile grid */
:is(#hello, .ob-scope) .grid-container.ob-tiles > div.ob-tile {
    position: relative;
    display: flex !important;
    align-items: center;
    gap: 14px;
    height: auto !important; min-height: 86px;
    padding: 16px 18px !important;
    line-height: normal;
    text-align: left;
    background: var(--ob-surface) !important;
    border: 1px solid var(--ob-line) !important;
    border-radius: 14px !important;
    box-shadow: var(--ob-shadow-sm);
    cursor: pointer;
    transition: transform .12s, box-shadow .12s, border-color .12s;
}
:is(#hello, .ob-scope) .grid-container.ob-tiles > div.ob-tile:hover {
    transform: translateY(-2px);
    border-color: var(--ob-line-brand) !important;
    box-shadow: var(--ob-shadow);
}
:is(#hello, .ob-scope) .ob-tile > div:nth-child(1) {                     /* image box */
    flex: none;
    display: grid !important; place-items: center;
    width: 54px; height: 54px;
    margin: 0 !important; padding: 0 !important;
    float: none !important;
    background: var(--ob-logo-bg);
    border: 1px solid var(--ob-line);
    border-radius: 12px;
    overflow: hidden;
}
:is(#hello, .ob-scope) .ob-tile > div:nth-child(1) img { max-width: 40px; max-height: 40px; width: auto; height: auto; object-fit: contain; }
:is(#hello, .ob-scope) .ob-tile > div:nth-child(1) img.ob-photo { max-width: none; max-height: none; width: 54px; height: 54px; object-fit: cover; }
:is(#hello, .ob-scope) .ob-tile > div:nth-child(1) svg { width: 30px; height: 30px; }
:is(#hello, .ob-scope) .ob-tile > div:nth-child(2) {                     /* title + count */
    display: flex; flex-direction: column; align-items: flex-start;
    min-width: 0; flex: 1;
    line-height: 1.3;
}
:is(#hello, .ob-scope) .ob-tile > div:nth-child(2) > br { display: none; }
:is(#hello, .ob-scope) .ob-tile > div:nth-child(2) > div:first-child {
    float: none !important; display: block !important;
    margin: 0 !important;
    font-size: 15px !important; font-weight: 650 !important;
    color: var(--ob-ink) !important;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
:is(#hello, .ob-scope) .ob-tile.ob-group > div:nth-child(2) > div:first-child { text-transform: capitalize; }
:is(#hello, .ob-scope) .ob-tile > div:nth-child(2) > .ob-count {
    position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
    float: none !important; display: grid !important; place-items: center;
    min-width: 28px; height: 24px; padding: 0 8px !important; margin: 0 !important;
    border-radius: 999px;
    background: var(--ob-info-bg);
    color: var(--ob-brand) !important;
    font-size: 0 !important;
}
:is(#hello, .ob-scope) .ob-tile > div:nth-child(2) > .ob-count::after { content: attr(data-count); font-size: 12.5px; font-weight: 700; }
:is(#hello, .ob-scope) .ob-tile.ob-group > div:nth-child(2) { padding-right: 40px; }
:is(#hello, .ob-scope) .ob-tile > div:nth-child(3) { display: none; }      /* spacer */
:is(#hello, .ob-scope) .ob-tile > div:nth-child(2) > .ob-sub { font-size: 12.5px; color: var(--ob-muted); margin-top: 2px; }

:is(#hello, .ob-scope) .grid-container.ob-tiles > div.ob-tile.ob-back {
    background: transparent !important;
    border: 1px dashed var(--ob-line-strong) !important;
    box-shadow: none;
    color: var(--ob-muted);
}
:is(#hello, .ob-scope) .grid-container.ob-tiles > div.ob-tile.ob-back:hover { border-color: var(--ob-brand) !important; transform: none; }
:is(#hello, .ob-scope) .ob-tile.ob-back > div:nth-child(1) { background: transparent; border: 0; width: 32px; height: 32px; }
:is(#hello, .ob-scope) .ob-tile.ob-back > div:nth-child(1) svg { width: 20px; height: 20px; }
:is(#hello, .ob-scope) .ob-tile.ob-back > div:nth-child(1) svg path { fill: var(--ob-muted); }
:is(#hello, .ob-scope) .ob-tile.ob-back > div:nth-child(2) > div:first-child { color: var(--ob-ink-2) !important; font-weight: 600 !important; }

/* ---------------------------------------------------------------- popups (stfwModal) */
.ldcv:before { background: rgba(15, 29, 43, .45) !important; }
.ldcv.active { backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.ldcv > .base > .inner.card {
    border: 0 !important;
    border-radius: 16px !important;
    box-shadow: var(--ob-shadow-lg) !important;
    font-family: var(--ob-font);
    color: var(--ob-ink);
}
.ldcv .inner.card > .card-body { padding: 22px 28px 24px; }
.ldcv .inner.card > .card-body > h2 {
    margin: 0 36px 0 0;
    font-size: 20px; font-weight: 700; letter-spacing: -.01em; line-height: 1.3;
    font-family: var(--ob-font);
}
.ldcv .inner.card > .card-body > h2 > span.ob-title-plain { color: var(--ob-ink) !important; }
.ldcv .inner.card > .card-body > hr {
    margin: 16px -28px 18px;
    border: 0; border-top: 1px solid var(--ob-line);
    opacity: 1;
}

/* the field grid inside record popups: label / field pairs */
.ldcv .grid-container.ob-form {
    grid-template-columns: repeat(var(--ob-pairs, 3), max-content minmax(0, 1fr)) !important;
    column-gap: 14px;
    row-gap: 6px !important;
    font-family: var(--ob-font);
}
.ldcv .grid-container.ob-form > div {
    height: 40px; line-height: normal;
    background: transparent;
    font-weight: 400;
}
.ldcv .grid-container.ob-form > div.ob-label {
    justify-content: flex-end;
    margin: 0 !important;
    padding-left: 18px;
    color: var(--ob-ink-2) !important;
    font-size: 13px !important; font-weight: 600 !important;
    white-space: nowrap;
}
.ldcv .grid-container.ob-form > div.ob-label.ob-req::after { content: "*"; color: var(--ob-danger-strong); margin-left: 3px; }
.ldcv .grid-container.ob-form > div.ob-value { justify-content: flex-start; min-width: 0; }
.ldcv .grid-container.ob-form > div.ob-value > * { margin-left: 0 !important; }
.ldcv .grid-container.ob-form .stfwinput-field,
.ldcv .grid-container.ob-form .stfwinput-select { width: 100% !important; max-width: 360px; }
.ldcv .grid-container.ob-form > div.ob-value > svg { width: 20px; height: 20px; cursor: pointer; }
@media (max-width: 1280px) { .ldcv .grid-container.ob-form { --ob-pairs: 2; } }
@media (max-width: 820px)  { .ldcv .grid-container.ob-form { --ob-pairs: 1; } }

/* "+" that reveals the extra (hidden) columns */
.ldcv [id^="hidercontent"] {
    display: inline-flex; align-items: center; gap: 8px;
    margin: 10px 0 4px;
    padding: 6px 10px 6px 6px;
    border-radius: 8px;
    color: var(--ob-brand); font-size: 13px; font-weight: 600;
    cursor: pointer;
}
.ldcv [id^="hidercontent"]:hover { background: var(--ob-info-bg); }
.ldcv [id^="hidercontent"] svg { width: 18px; height: 18px; }
.ldcv [id^="hidercontent"]::after { content: "More fields"; }
.ldcv [id^="hidercontent"].ob-open::after { content: "Fewer fields"; }

/* footer: buttons right-aligned, primary action last (rightmost) */
.ldcv .inner.card > .card-body > div[id$="footer"] {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    left: 28px; right: 28px; bottom: 18px !important;
    width: auto !important;
    padding-top: 14px;
    border-top: 1px solid var(--ob-line);
}
.ldcv .inner.card > .card-body > div[id$="footer"] > hr,
.ldcv .inner.card > .card-body > div[id$="footer"] > span { display: none; }
.ldcv .inner.card > .card-body > div[id$="footer"] > .btn {
    display: inline-flex; align-items: center;
    height: 36px; padding: 0 14px;
    margin: 0 !important;
    border: 1px solid var(--ob-line-strong) !important;
    border-radius: 8px !important;
    background: var(--ob-surface) !important;
    color: var(--ob-ink-2) !important;
    font-family: var(--ob-font); font-size: 13.5px; font-weight: 600;
    box-shadow: var(--ob-shadow-sm) !important;
    opacity: 1 !important;
    cursor: pointer;
    transition: background-color .12s;
}
.ldcv .inner.card > .card-body > div[id$="footer"] > .btn:hover { background: var(--ob-hover) !important; }
.ldcv .inner.card > .card-body > div[id$="footer"] > .btn.ob-primary {
    background: var(--ob-brand) !important;
    border-color: var(--ob-brand) !important;
    color: #fff !important;
}
.ldcv .inner.card > .card-body > div[id$="footer"] > .btn.ob-primary:hover { background: var(--ob-brand-hover) !important; }
.ldcv .inner.card > .card-body > div[id$="footer"] > .btn.ob-danger { color: var(--ob-danger) !important; }

/* ---------------------------------------------------------------- dark mode
   Legacy pages keep their light panel (stfwShell.css) until each is themed;
   popups match that panel, so they stay light too. */

/* ---- fixes after first real-data pass ---- */
:is(#hello, .ob-scope) .grid-container.ob-list input[type=color],
.ldcv .grid-container.ob-form input[type=color] { width: 34px !important; height: 26px !important; flex: none; }
:is(#hello, .ob-scope) .grid-container.ob-list > div.ob-hover input[type=color] { border-color: var(--ob-line-strong); }
.ldcv > .base { max-width: min(1240px, 96vw) !important; }
.ldcv [id^="hidercontent"] > :not(svg) { display: none; }   /* stray separator next to the +/- icon */
:is(#hello, .ob-scope) .ob-tile > div:nth-child(2) > .ob-count { display: inline-flex !important; align-items: center; justify-content: center; line-height: 1 !important; }
:is(#hello, .ob-scope) .ob-tile > div:nth-child(2) > .ob-count::after { line-height: 1; }
:is(#hello, .ob-scope) > div > br { display: none; }                        /* spacer <br>s above the tile grid */
.ldcv .inner.card > .card-body > div[id$="content"] { padding-bottom: 30px; }

/* ===========================================================================
 * Backup and Recovery dialog (template #bkupContentElem in src/mainpage.html,
 * rows from stfwBackups.addEntry)
 * ======================================================================== */
.ldcv .base:has(.bk) { height: auto !important; width: min(1100px, 96vw) !important; }
.ldcv .inner.card:has(.bk) { height: auto !important; }
.ldcv .inner.card > .card-body > div[id$="footer"]:not(:has(.btn)) { display: none; }   /* popups whose buttons live in the content */
.ldcv .card-body > div[id$="content"]:has(> .bk) { padding-bottom: 0; }

.bk { font-family: var(--ob-font); color: var(--ob-ink); font-size: 14px; line-height: 1.5; }
.bk * { box-sizing: border-box; }
.bk h3 { margin: 0 0 4px; font-size: 15px; font-weight: 650; color: var(--ob-ink); font-family: var(--ob-font); }
.bk .bk-help { margin: 0 0 14px; color: var(--ob-muted); font-size: 13px; }

.bk-scope { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; }
.bk-scope-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--ob-info-bg); color: var(--ob-brand); flex: none; }
.bk-scope-icon svg { width: 18px; height: 18px; }
.bk-object { font-size: 15px; font-weight: 650; color: var(--ob-ink); }

.bk-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 16px; margin-bottom: 16px; }
@media (max-width: 900px) { .bk-grid { grid-template-columns: 1fr; } }
.bk-card {
    display: flex; flex-direction: column;
    padding: 18px 20px;
    background: var(--ob-surface);
    border: 1px solid var(--ob-line);
    border-radius: 12px;
}
.bk-card-actions { margin-top: auto; display: flex; gap: 8px; }

/* buttons inside the dialog body (not the stfwModal footer) */
.bk .bk-btn {
    display: inline-flex; align-items: center; gap: 8px;
    height: 36px; padding: 0 14px; margin: 0 !important;
    border: 1px solid var(--ob-line-strong) !important; border-radius: 8px !important;
    background: var(--ob-surface) !important; color: var(--ob-ink-2) !important;
    font-family: var(--ob-font); font-size: 13.5px !important; font-weight: 600;
    box-shadow: var(--ob-shadow-sm) !important;
    cursor: pointer; white-space: nowrap;
    transition: background-color .12s, border-color .12s;
}
.bk .bk-btn:hover { background: var(--ob-hover) !important; }
.bk .bk-btn:focus-visible { outline: none; box-shadow: var(--ob-ring) !important; }
.bk .bk-btn svg { width: 16px; height: 16px; }
.bk .bk-btn.bk-btn-primary { background: var(--ob-brand) !important; border-color: var(--ob-brand) !important; color: #fff !important; }
.bk .bk-btn.bk-btn-primary:hover { background: var(--ob-brand-hover) !important; }
.bk .bk-btn.bk-btn-warn { height: 32px; padding: 0 12px; color: var(--ob-warn) !important; border-color: var(--ob-warn-line) !important; background: var(--ob-warn-bg) !important; }
.bk .bk-btn.bk-btn-warn:hover { background: var(--ob-warn-bg-hover) !important; border-color: var(--ob-warn-line-hover) !important; }

/* drop zone */
.bk .bk-dropwrap { display: block; padding: 0; }
.bk .bk-drop {
    display: flex; align-items: center; justify-content: center;
    min-height: 96px; width: 100%; margin: 0;
    padding: 16px;
    border: 1.5px dashed var(--ob-line-strong) !important;
    border-radius: 10px !important;
    background: var(--ob-drop-bg);
    color: var(--ob-muted);
    text-align: center;
    transition: border-color .12s, background-color .12s;
}
.bk .bk-drop .file-form { width: 100%; margin: 0; }
.bk .bk-drop p {
    margin: 0; padding-top: 30px;
    font-size: 13.5px; font-weight: 600; color: var(--ob-ink-2);
    white-space: pre-line;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E5BFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='m17 8-5-5-5 5'/%3E%3Cpath d='M12 3v12'/%3E%3C/svg%3E") center top / 22px 22px no-repeat;
}
.bk .bk-drop.highlight { border-color: var(--ob-brand) !important; background: var(--ob-info-bg); }

/* history table: header + rows share the 6-column grid; column 0 is a hidden row marker */
.bk-history { padding-bottom: 6px; }
.bk-history h3 { margin-bottom: 10px; }
.bk-table {
    display: grid !important;
    grid-template-columns: 0 170px minmax(0, 1fr) 90px 130px 110px !important;
    grid-row-gap: 0 !important;
    max-height: none;
}
.bk-thead > div {
    padding: 8px 10px;
    background: var(--ob-head);
    border-top: 1px solid var(--ob-line); border-bottom: 1px solid var(--ob-line);
    color: var(--ob-muted);
    font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
}
.bk-thead > div:first-child, .bk-tbody > .bk-c0 { padding: 0 !important; border: 0 !important; overflow: hidden; }
.bk-tbody { max-height: 22em; overflow-y: auto !important; overflow-x: hidden !important; }
.bk-tbody > .bk-c {
    display: flex; align-items: center;
    min-height: 52px; height: auto;
    padding: 6px 10px;
    border-bottom: 1px solid var(--ob-line);
    color: var(--ob-ink); font-size: 13.5px;
    min-width: 0;
}
.bk-tbody > .bk-date { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; color: var(--ob-muted); white-space: nowrap; }
.bk-tbody > .bk-name .stfwinput-field { width: 100% !important; border-color: transparent; background: transparent; }
.bk-tbody > .bk-name .stfwinput-field:hover { border-color: var(--ob-line-strong); background: var(--ob-field); }
.bk-tbody > .bk-name .stfwinput-field:focus { border-color: var(--ob-brand); background: var(--ob-field); }
.bk-tbody > .bk-ver span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 34px; height: 22px; padding: 0 8px;
    border-radius: 999px; background: var(--ob-info-bg); color: var(--ob-brand);
    font-size: 12px; font-weight: 700;
}
.bk-tbody > .bk-ver span::before { content: "v"; }
.bk-tbody > .bk-dl { cursor: pointer; }
.bk-tbody > .bk-dl .bk-link {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 8px; border-radius: 7px;
    color: var(--ob-brand); font-weight: 600; font-size: 13px;
}
.bk-tbody > .bk-dl:hover .bk-link { background: var(--ob-info-bg); }
.bk-tbody > .bk-dl svg { width: 15px; height: 15px; }
.bk-tbody > .bk-dl:focus-visible { outline: none; box-shadow: inset var(--ob-ring); }
.bk-tbody:empty { display: block !important; }
.bk-tbody:empty::before {
    content: "No backups yet. Create one above, or restore from a file.";
    display: block; padding: 22px 10px;
    color: var(--ob-muted); text-align: center; font-size: 13.5px;
}

.bk-foot { display: flex; justify-content: flex-end; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--ob-line); }

/* ===========================================================================
 * Theme variables for the object layer.
 * Light values are the defaults. Dark values apply ONLY inside areas this layer
 * has restyled: :is(#hello.ob-page, .ob-scope.ob-page) (list/tile pages) and .ldcv.ob-themed (record
 * popups, Backups, simple messages) - both classes set by stfwObjects.js.
 * Anything not yet restyled keeps its light panel (see stfwShell.css).
 * ======================================================================== */
:root {
    --ob-surface: #ffffff;
    --ob-field: #ffffff;
    --ob-field-disabled: #f6f8fa;
    --ob-line-hover: #b7c4d1;
    --ob-line-brand: #C7D3F5;
    --ob-logo-bg: #f6f8fa;
    --ob-drop-bg: #fafbfc;
    --ob-danger: #b42318;
    --ob-danger-strong: #d92d20;
    --ob-warn: #b54708;
    --ob-warn-line: #fedf89;
    --ob-warn-line-hover: #fec84b;
    --ob-warn-bg: #fffcf5;
    --ob-warn-bg-hover: #fffaeb;
    --ob-link: var(--ob-brand);
    --ob-shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
    --ob-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 12px 28px -8px rgba(16, 24, 40, .16);
    --ob-shadow-lg: 0 24px 48px -12px rgba(16, 24, 40, .3);
}
html[data-theme="dark"] {
    /* read by the legacy JS when it paints a selected row */
    --table-row-selected-color: rgba(79, 139, 255, .20);
}
html[data-theme="dark"] :is(#hello.ob-page, .ob-scope.ob-page),
html[data-theme="dark"] .ldcv.ob-themed {
    --ob-ink: #E7EAF6;
    --ob-ink-2: #C3C9E3;
    --ob-muted: #8F98BF;
    --ob-line: #222A4D;
    --ob-line-strong: #2C355C;
    --ob-line-hover: #3A4677;
    --ob-line-brand: #3A4A8A;
    --ob-hover: #161E42;
    --ob-head: #131A3A;
    --ob-surface: #0F1530;
    --ob-field: #0B1026;
    --ob-field-disabled: #11183A;
    --ob-logo-bg: #F4F6FB;                 /* logos are drawn for light backgrounds */
    --ob-drop-bg: #0B1026;
    --ob-info-bg: rgba(79, 139, 255, .16);
    --ob-link: #8FB2FF;
    --ob-danger: #F97066;
    --ob-danger-strong: #F97066;
    --ob-warn: #FDB022;
    --ob-warn-line: rgba(253, 176, 34, .35);
    --ob-warn-line-hover: rgba(253, 176, 34, .6);
    --ob-warn-bg: rgba(247, 144, 9, .10);
    --ob-warn-bg-hover: rgba(247, 144, 9, .18);
    --ob-ring: 0 0 0 4px rgba(79, 139, 255, .35);
    --ob-shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
    --ob-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 28px -8px rgba(0, 0, 0, .6);
    --ob-shadow-lg: 0 24px 48px -12px rgba(0, 0, 0, .7);
    color-scheme: dark;
}

/* surfaces that the legacy CSS paints white */
.ldcv > .base > .inner.card { background: var(--ob-surface) !important; }
html[data-theme="dark"] .ldcv.ob-themed [id$="content"] { color: var(--ob-ink) !important; }   /* inline color: black */
html[data-theme="dark"] .ldcv.ob-themed .card-body > h2 > span.ob-title-plain { color: var(--ob-ink) !important; }

/* links / brand-tinted text get the lighter blue on navy */
html[data-theme="dark"] :is(#hello.ob-page, .ob-scope.ob-page) .ob-count,
html[data-theme="dark"] .ldcv.ob-themed [id^="hidercontent"],
html[data-theme="dark"] .ldcv.ob-themed .bk-ver span,
html[data-theme="dark"] .ldcv.ob-themed .bk-dl .bk-link,
html[data-theme="dark"] .ldcv.ob-themed .bk-scope-icon { color: var(--ob-link) !important; }
html[data-theme="dark"] .ldcv.ob-themed .bk .bk-drop p {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238FB2FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='m17 8-5-5-5 5'/%3E%3Cpath d='M12 3v12'/%3E%3C/svg%3E");
}

/* list rows: the legacy code writes background "white" inline when a row is unselected */
html[data-theme="dark"] :is(#hello.ob-page, .ob-scope.ob-page) .ob-list > div[style*="background: white"],
html[data-theme="dark"] :is(#hello.ob-page, .ob-scope.ob-page) .ob-list > div[style*="background-color: white"] { background: var(--ob-surface) !important; }
html[data-theme="dark"] :is(#hello.ob-page, .ob-scope.ob-page) .ob-list > div.ob-hover[style*="background: white"] { background: var(--ob-hover) !important; }

/* icons the legacy code fills with the brand blue read better a shade lighter */
html[data-theme="dark"] :is(#hello.ob-page, .ob-scope.ob-page) .ob-rowstart > svg:not(.ob-rowimg) path,
html[data-theme="dark"] :is(#hello.ob-page, .ob-scope.ob-page) .ob-th > svg path,
html[data-theme="dark"] .ldcv.ob-themed .ob-value > svg path,
html[data-theme="dark"] .ldcv.ob-themed [id^="hidercontent"] svg path { fill: #6F98FF; }
html[data-theme="dark"] :is(#hello.ob-page, .ob-scope.ob-page) .ob-tile.ob-back > div:nth-child(1) svg path { fill: var(--ob-muted); }

/* the page title in the toolbar and the selects' chevron */
html[data-theme="dark"] :is(#hello.ob-page, .ob-scope.ob-page) .stfwinput-select,
html[data-theme="dark"] .ldcv.ob-themed .stfwinput-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238F98BF' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
html[data-theme="dark"] :is(#hello.ob-page, .ob-scope.ob-page) .grid-container.ob-list .stfwinput-select:not(:focus) { background-image: none; }
html[data-theme="dark"] :is(#hello.ob-page, .ob-scope.ob-page) .grid-container.ob-list > div.ob-hover .stfwinput-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238F98BF' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
html[data-theme="dark"] :is(#hello.ob-page, .ob-scope.ob-page) input[type=color],
html[data-theme="dark"] .ldcv.ob-themed input[type=color] { background: var(--ob-field); }

/* ---- dark tiles: lift the cards off the page (they were 4% apart) ---- */
html[data-theme="dark"] :is(#hello.ob-page, .ob-scope.ob-page) .grid-container.ob-tiles > div.ob-tile {
    background: #18204A !important;
    border-color: #2E3A70 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 1px 3px rgba(0, 0, 0, .45);
}
html[data-theme="dark"] :is(#hello.ob-page, .ob-scope.ob-page) .grid-container.ob-tiles > div.ob-tile:hover {
    background: #1E2858 !important;
    border-color: #4F6BD8 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 12px 28px -8px rgba(0, 0, 0, .7), 0 0 0 1px rgba(79, 107, 216, .35);
}
html[data-theme="dark"] :is(#hello.ob-page, .ob-scope.ob-page) .ob-tile > div:nth-child(1) { background: #F4F6FB; border-color: transparent; }
html[data-theme="dark"] :is(#hello.ob-page, .ob-scope.ob-page) .ob-tile > div:nth-child(2) > .ob-count { background: rgba(111, 152, 255, .22); color: #C2D3FF !important; }
html[data-theme="dark"] :is(#hello.ob-page, .ob-scope.ob-page) .grid-container.ob-tiles > div.ob-tile.ob-back {
    background: transparent !important;
    border-color: #3A4677 !important;
    box-shadow: none;
}
html[data-theme="dark"] :is(#hello.ob-page, .ob-scope.ob-page) .grid-container.ob-tiles > div.ob-tile.ob-back:hover { border-color: #6F98FF !important; background: rgba(79, 139, 255, .06) !important; }
html[data-theme="dark"] :is(#hello.ob-page, .ob-scope.ob-page) .ob-tile.ob-back > div:nth-child(1) { background: transparent; }

/* group tiles whose group is empty */
:is(#hello, .ob-scope) .ob-tile > div:nth-child(2) > div.ob-untitled::before { content: "Ungrouped"; color: var(--ob-muted); font-style: italic; font-weight: 600; }

/* ---- dark dialogs: a defined edge and a deeper scrim ---- */
html[data-theme="dark"] .ldcv:before { background: rgba(2, 5, 18, .68) !important; }
html[data-theme="dark"] .ldcv.ob-themed > .base > .inner.card {
    background: #161D45 !important;                         /* lighter than the page and the cards inside */
    border: 1px solid #34407A !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 0 0 1px rgba(0, 0, 0, .4), 0 28px 60px -12px rgba(0, 0, 0, .85) !important;
}
html[data-theme="dark"] .ldcv.ob-themed .inner.card > .card-body > hr,
html[data-theme="dark"] .ldcv.ob-themed .inner.card > .card-body > div[id$="footer"] { border-color: #2B356A; }
/* light (not yet restyled) popups on a dark page get an edge too */
html[data-theme="dark"] .ldcv:not(.ob-themed) > .base > .inner.card { box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 28px 60px -12px rgba(0, 0, 0, .85) !important; }

/* ===========================================================================
 * Executions (stfwExecutions.js buildPage/makeEntry). Concept follows the
 * Highstreet Bridges executions page: filter card, actions, full-width table.
 * Row DOM order is fixed (req, orch, trig, stat, start, end, dur, user, integ);
 * the visual column order is set with `order`.
 * ======================================================================== */
:is(#hello, .ob-scope) .ex-page { font-family: var(--ob-font); color: var(--ob-ink); font-size: 14px; line-height: 1.45; }
:is(#hello, .ob-scope) .ex-page * { box-sizing: border-box; }
.ex-head { display: flex; align-items: flex-end; gap: 16px; margin: 4px 0 16px; }
.ex-head h1 { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -.01em; color: var(--ob-ink); font-family: var(--ob-font); }
.ex-head p { margin: 4px 0 0; color: var(--ob-muted); font-size: 13.5px; }
.ex-live { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px; border-radius: 999px; background: var(--ob-info-bg); color: var(--ob-link); font-size: 12.5px; font-weight: 700; }
.ex-live i { width: 8px; height: 8px; border-radius: 50%; background: #12b76a; box-shadow: 0 0 0 3px rgba(18, 183, 106, .25); animation: ex-pulse 2s infinite; }
@keyframes ex-pulse { 50% { box-shadow: 0 0 0 6px rgba(18, 183, 106, 0); } }

.ex-card { background: var(--ob-surface); border: 1px solid var(--ob-line); border-radius: 12px; box-shadow: var(--ob-shadow-sm); }
.ex-filters { padding: 16px 18px; margin-bottom: 16px; }
/* On or Before | Request ID | Status | Requestor | Integration | Orchestration (no Period since v1.22.0) */
.ex-fgrid { display: grid; grid-template-columns: 160px 120px 150px 190px 190px minmax(200px, 1fr); gap: 12px 14px; }
/* Foot of the list while the next older batch loads (scroll to the bottom). */
.ex-loadmore { padding: 14px 0 18px; text-align: center; font-size: 13px; color: var(--ob-muted); }
.ex-loadmore.ex-loadmore-busy::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 8px; vertical-align: -2px;
    border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: ex-spin .8s linear infinite; }
@keyframes ex-spin { to { transform: rotate(360deg); } }
@media (max-width: 1200px) { .ex-fgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ex-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0; }
.ex-field > span { font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ob-muted); }
.ex-field .stfwinput-field, .ex-field .stfwinput-select { width: 100% !important; max-width: none; height: 36px; display: block; margin: 0 !important; }
.ex-actions { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--ob-line); }
.ex-grow { flex: 1; }
.ex-btn {
    display: inline-flex; align-items: center; gap: 7px;
    height: 36px; padding: 0 14px;
    border: 1px solid var(--ob-line-strong); border-radius: 8px;
    background: var(--ob-surface); color: var(--ob-ink-2);
    font: inherit; font-size: 13.5px; font-weight: 600;
    cursor: pointer; box-shadow: var(--ob-shadow-sm);
}
.ex-btn:hover { background: var(--ob-hover); }
.ex-btn:focus-visible { outline: none; box-shadow: var(--ob-ring); }
.ex-btn svg { width: 15px; height: 15px; }
.ex-btn.ex-primary { background: var(--ob-brand); border-color: var(--ob-brand); color: #fff; }
.ex-btn.ex-primary:hover { background: var(--ob-brand-hover); }

.ex-results { overflow: hidden; }
.ex-summary { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid var(--ob-line); font-size: 13.5px; }
.ex-summary b { font-size: 15px; }
.ex-muted { color: var(--ob-muted); }
.ex-scroll { overflow: auto; max-height: calc(100vh - 380px); min-height: 220px; }

.ex-row {
    display: grid;
    grid-template-columns: 82px minmax(140px, 1.4fr) minmax(96px, .9fr) minmax(140px, 1.3fr) 104px 136px 136px 88px minmax(84px, .8fr);
    min-width: 1024px;
    align-items: center;
    border-bottom: 1px solid var(--ob-line);
}
.ex-row > .ex-req   { order: 1; }
.ex-row > .ex-orch  { order: 2; }
.ex-row > .ex-integ { order: 3; }
.ex-row > .ex-trig  { order: 4; }
.ex-row > .ex-stat  { order: 5; }
.ex-row > .ex-start { order: 6; }
.ex-row > .ex-end   { order: 7; }
.ex-row > .ex-dur   { order: 8; }
.ex-row > .ex-user  { order: 9; }
.ex-c { padding: 0 10px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ex-row.ex-th {
    position: sticky; top: 0; z-index: 1;
    height: 40px;
    background: var(--ob-head);
    color: var(--ob-muted);
    font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
}
.ex-body > .ex-row { height: 50px; cursor: pointer; transition: background-color .12s; }
.ex-body > .ex-row:hover { background: var(--ob-hover); }
.ex-body > .ex-row:focus-visible { outline: none; box-shadow: inset var(--ob-ring); }
.ex-body > .ex-row.ex-new { animation: ex-flash 2.5s ease-out; }
@keyframes ex-flash { from { background: var(--ob-info-bg); } to { background: transparent; } }
.ex-body .ex-req { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; color: var(--ob-muted); }
.ex-body .ex-orch { font-weight: 600; }
.ex-body .ex-integ, .ex-body .ex-user { color: var(--ob-ink-2); }
.ex-body .ex-trig { color: var(--ob-ink-2); }
.ex-body .ex-start, .ex-body .ex-end { font-variant-numeric: tabular-nums; color: var(--ob-ink-2); font-size: 13px; }
.ex-body .ex-dur { font-variant-numeric: tabular-nums; }
.ex-tag {
    display: inline-block; margin-right: 6px; padding: 1px 6px;
    border-radius: 5px; background: var(--ob-info-bg); color: var(--ob-link);
    font-size: 10.5px; font-weight: 700; letter-spacing: .05em; vertical-align: 1px;
}
.ex-body:empty::before, .ex-body.ex-empty:empty::before {
    content: "No executions match these filters.";
    display: block; padding: 40px 16px; text-align: center; color: var(--ob-muted);
}

.ex-pill {
    display: inline-flex; align-items: center; gap: 6px;
    height: 22px; padding: 0 9px; border-radius: 999px;
    font-size: 12px; font-weight: 600; white-space: nowrap;
    background: var(--ob-head); color: var(--ob-ink-2);
}
.ex-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .85; }
.ex-pill.ex-ok   { background: var(--ex-ok-bg, #ecfdf3); color: var(--ex-ok, #067647); }
.ex-pill.ex-warn { background: var(--ob-warn-bg-hover); color: var(--ob-warn); }
.ex-pill.ex-err  { background: var(--ex-err-bg, #fef3f2); color: var(--ob-danger); }
.ex-pill.ex-run  { background: var(--ob-info-bg); color: var(--ob-link); }
.ex-row.ex-running .ex-pill.ex-run::before { animation: ex-blink 1s infinite; }
@keyframes ex-blink { 50% { opacity: .2; } }
.ex-summary .ex-pill { height: 24px; }

html[data-theme="dark"] :is(#hello.ob-page, .ob-scope.ob-page) { --ex-ok: #47CD89; --ex-ok-bg: rgba(18, 183, 106, .14); --ex-err-bg: rgba(240, 68, 56, .16); }
@media (prefers-reduced-motion: reduce) { .ex-live i, .ex-row.ex-running .ex-pill.ex-run::before, .ex-body > .ex-row.ex-new { animation: none; } }

/* ===========================================================================
 * Event-assertion run detail (stfwExecutions.exAssertionModal)
 * ======================================================================== */
.ldcv .card-body > div[id$="content"]:has(> .ea) { max-height: calc(90vh - 170px); overflow-y: auto; padding-bottom: 64px; }
.ea { font-family: var(--ob-font); color: var(--ob-ink); font-size: 13.5px; line-height: 1.45; }
.ea * { box-sizing: border-box; }
.ea-top { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.ea-type { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ob-link); background: var(--ob-info-bg); padding: 3px 8px; border-radius: 6px; }
.ea-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
.ea-kv { padding: 10px 12px; border: 1px solid var(--ob-line); border-radius: 10px; background: var(--ob-surface); min-width: 0; }
.ea-kv.ea-wide { grid-column: span 2; }
.ea-kv span { display: block; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ob-muted); margin-bottom: 3px; }
.ea-kv b { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ea-kv.ea-mono b { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; font-weight: 500; }
.ea h4 { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--ob-ink); }
.ea-data { border: 1px solid var(--ob-line); border-radius: 10px; overflow: hidden; margin-bottom: 16px; background: var(--ob-surface); }
.ea-drow { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 12px; padding: 9px 12px; border-bottom: 1px solid var(--ob-line); }
.ea-drow:last-child { border-bottom: 0; }
.ea-drow span, .ea-json summary span { font-weight: 600; color: var(--ob-ink-2); font-size: 12.5px; word-break: break-all; }
.ea-drow code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; color: var(--ob-ink); word-break: break-all; }
.ea-drow code i { color: var(--ob-muted); }
.ea-json { border-bottom: 1px solid var(--ob-line); }
.ea-json:last-child { border-bottom: 0; }
.ea-json summary { display: flex; align-items: center; gap: 10px; padding: 9px 12px; cursor: pointer; list-style: none; }
.ea-json summary::-webkit-details-marker { display: none; }
.ea-json summary::before { content: "\25B8"; color: var(--ob-muted); transition: transform .12s; }
.ea-json[open] summary::before { transform: rotate(90deg); }
.ea-json summary em { margin-left: auto; font-style: normal; font-size: 11.5px; color: var(--ob-muted); }
.ea-json pre { margin: 0; padding: 12px 14px; max-height: 360px; overflow: auto; background: var(--ob-head); border-top: 1px solid var(--ob-line); font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--ob-ink); white-space: pre; }
.ea-raw { border: 1px solid var(--ob-line); border-radius: 10px; overflow: hidden; background: var(--ob-surface); }
.ea-none { padding: 14px 12px; color: var(--ob-muted); }
@media (max-width: 760px) { .ea-grid { grid-template-columns: 1fr 1fr; } .ea-drow { grid-template-columns: 1fr; } }

.ldcv .inner.card:has(.ea) > .card-body > div[id$="footer"] { background: var(--ob-surface); padding-bottom: 0; }
html[data-theme="dark"] .ldcv.ob-themed .inner.card:has(.ea) > .card-body > div[id$="footer"] { background: #161D45; }

/* a list with no records yet */
:is(#hello, .ob-scope) .grid-container.ob-list.ob-empty::after {
    content: "No records yet. Use New to add one.";
    grid-column: 1 / -1;
    padding: 22px 16px; text-align: center;
    font-size: 13px; color: var(--ob-muted); background: var(--ob-surface);
}

/* ---------------------------------------------------------------- notices
   simpleNotificationModal / simpleContentConfirmModal / waitModal: compact, sized to
   the message, a status icon by the title (tone from the caller's colour). */
.ldcv.ob-notice {
    --tone: var(--ob-brand); --tone-bg: var(--ob-info-bg);
}
.ldcv.ob-notice[data-tone="ok"]   { --tone: #067647; --tone-bg: #ECFDF3; }
.ldcv.ob-notice[data-tone="err"]  { --tone: #D92D20; --tone-bg: #FEF3F2; }
.ldcv.ob-notice[data-tone="warn"] { --tone: #DC6803; --tone-bg: #FFFAEB; }
html[data-theme="dark"] .ldcv.ob-notice[data-tone="ok"]   { --tone: #47CD89; --tone-bg: rgba(18, 183, 106, .16); }
html[data-theme="dark"] .ldcv.ob-notice[data-tone="err"]  { --tone: #F97066; --tone-bg: rgba(240, 68, 56, .18); }
html[data-theme="dark"] .ldcv.ob-notice[data-tone="warn"] { --tone: #FDB022; --tone-bg: rgba(247, 144, 9, .18); }
html[data-theme="dark"] .ldcv.ob-notice[data-tone="info"] { --tone: #8FB2FF; --tone-bg: rgba(79, 139, 255, .16); }

.ldcv.ob-notice > .base {
    width: min(480px, 92vw) !important;
    height: auto !important;
    min-height: 0 !important;
}
.ldcv.ob-notice > .base > .inner.card { width: auto !important; height: auto !important; }
.ldcv.ob-notice .inner.card > .card-body {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    column-gap: 14px;
    padding: 22px 24px 18px;
}
.ldcv.ob-notice .inner.card > .card-body > h2 {
    grid-column: 2; grid-row: 1;
    margin: 0 !important; padding: 0 !important; border: 0 !important;
    min-height: 40px; display: flex; align-items: center;
}
.ldcv.ob-notice .inner.card > .card-body > h2 > span {
    color: var(--ob-ink) !important;
    font-size: 16px !important; font-weight: 650 !important; line-height: 1.3; letter-spacing: 0;
    text-transform: none;
}
/* the icon sits in column 1, beside the title */
.ldcv.ob-notice .inner.card > .card-body::before {
    content: "i";
    grid-column: 1; grid-row: 1;
    width: 40px; height: 40px; border-radius: 50%;
    display: grid; place-items: center;
    font: 800 17px/1 var(--ob-font); font-style: normal;
    color: var(--tone); background: var(--tone-bg);
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--tone-bg) 45%, transparent);
}
.ldcv.ob-notice[data-tone="ok"]   .inner.card > .card-body::before { content: "✓"; }
.ldcv.ob-notice[data-tone="err"]  .inner.card > .card-body::before { content: "✕"; font-size: 15px; }
.ldcv.ob-notice[data-tone="warn"] .inner.card > .card-body::before { content: "!"; }
.ldcv.ob-notice .inner.card > .card-body > hr { display: none !important; }
.ldcv.ob-notice .inner.card > .card-body > [id$="content"] {
    grid-column: 2;
    margin: 4px 0 0 !important; padding: 0 !important;
    color: var(--ob-ink-2) !important;
    font-size: 14px; line-height: 1.5;
    overflow-wrap: anywhere;
}
.ldcv.ob-notice [id$="content"] > div { padding-bottom: 0 !important; }
.ldcv.ob-notice [id$="content"] span[style*="font-size"] { font-size: 14px !important; }
.ldcv.ob-notice [id$="content"] strong, .ldcv.ob-notice [id$="content"] b { color: var(--ob-ink); font-weight: 650; }
.ldcv.ob-notice [id$="content"] > p:empty { display: none; }
.ldcv.ob-notice .inner.card > .card-body > div[id$="footer"] {
    grid-column: 1 / -1;
    position: static !important;
    margin-top: 20px !important; padding: 0 !important;
    border: 0 !important;
}

/* wait: a spinner instead of the icon, quiet message, no buttons */
.ldcv.ob-wait .inner.card > .card-body::before {
    content: "" !important;
    width: 26px; height: 26px; margin: 7px;
    border-radius: 50%;
    border: 3px solid var(--tone-bg);
    border-top-color: var(--tone);
    background: transparent; box-shadow: none;
    animation: ob-spin .8s linear infinite;
}
.ldcv.ob-wait [id$="content"] img[src*="wait30"] { display: none !important; }
.ldcv.ob-wait [id$="content"] .stfwmainmenulegend {
    font-size: 14px !important; font-weight: 400 !important; color: var(--ob-ink-2) !important;
}
.ldcv.ob-wait .inner.card > .card-body > div[id$="footer"] { display: none !important; }
@keyframes ob-spin { to { transform: rotate(360deg); } }

/* a required value is missing (parameter dialogs paint the field red inline) */
.ldcv input[style*="background-color: red"],
.ldcv select[style*="background-color: red"],
.ldcv textarea[style*="background-color: red"] {
    background-color: #FEF3F2 !important;
    border: 1.5px solid #D92D20 !important;
    box-shadow: 0 0 0 3px rgba(217, 45, 32, .15) !important;
    color: var(--ob-ink) !important;
}
html[data-theme="dark"] .ldcv input[style*="background-color: red"],
html[data-theme="dark"] .ldcv select[style*="background-color: red"],
html[data-theme="dark"] .ldcv textarea[style*="background-color: red"] {
    background-color: rgba(240, 68, 56, .14) !important;
    border-color: #F97066 !important;
}

/* custom toolbars (Applications): their search is a label cell + input */
:is(#hello, .ob-scope) .ob-custom-toolbar > [id$="_SEARCHTAG"] { display: none !important; }
:is(#hello, .ob-scope) .ob-custom-toolbar > [id$="_SEARCHELEMENT"] { order: 100; margin-left: 8px; }   /* after the buttons, incl. Help (99) */
:is(#hello, .ob-scope) .ob-custom-toolbar > [id$="_SEARCHELEMENT"] input {
    width: 260px; height: 36px;
    padding-left: 34px;
    background: var(--ob-field) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2398a2b3' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") 10px center / 16px 16px no-repeat;
}
:is(#hello, .ob-scope) .ob-custom-toolbar > .ob-tool { opacity: 1 !important; }   /* the screen dims disabled tools inline; .ob-disabled does it here */
/* v1.49.5: ...and it must actually do it - the rule above also beat .ob-disabled, so a disabled tool showed at full strength */
:is(#hello, .ob-scope) .ob-custom-toolbar > .ob-tool.ob-disabled { opacity: .45 !important; cursor: not-allowed !important; }
:is(#hello, .ob-scope) .ob-custom-toolbar > .ob-tool.ob-tool-help { order: 99; }

/* ---------------------------------------------------------------- Applications list
   stfwApplications.renderList paints its own grid inline (white cells, lightgray
   rules, light-blue headers, white selection, a white storage track), so every
   colour here needs !important. Classes come from obDecorateAppList. */
#hello.ob-page > hr { border: 0; border-top: 1px solid var(--ob-line); }
#hello .grid-container.ob-applist {
    width: fit-content; max-width: 100%;      /* the columns are fixed widths; wrap them, no empty band */
    background: var(--ob-surface);
    border: 1px solid var(--ob-line);
    border-radius: 12px;
    box-shadow: var(--ob-shadow-sm);
    font-family: var(--ob-font);
}
#hello .grid-container.ob-applist > div {
    background-color: var(--ob-surface) !important;
    border-bottom: 1px solid var(--ob-line) !important;
    color: var(--ob-ink);
    padding-left: 8px;
}
#hello .grid-container.ob-applist > div.ob-th {
    position: sticky; top: 0; z-index: 2;
    background-color: var(--ob-head) !important;
    color: var(--ob-muted) !important;
    font-size: 11.5px !important; font-weight: 600;
    text-transform: uppercase; letter-spacing: .04em;
}
#hello .grid-container.ob-applist > div.ob-selected { background-color: var(--table-row-selected-color) !important; }
#hello .grid-container.ob-applist a { color: var(--ob-link); }
#hello .grid-container.ob-applist > div div[style*="background-color: white"] { background-color: var(--ob-field) !important; }   /* storage track */
#hello .grid-container.ob-applist > div div[style*="lightgray"] { border-color: var(--ob-line-strong) !important; }
#hello .grid-container.ob-applist .btn {
    height: 30px; padding: 0 12px;
    font-size: 13px !important; font-weight: 600;
    border-radius: 8px;
}
#hello .grid-container.ob-applist .btn-secondary {
    background: var(--ob-surface); color: var(--ob-ink-2);
    border: 1px solid var(--ob-line-strong);
}
#hello .grid-container.ob-applist .btn-secondary:hover { background: var(--ob-hover); }
html[data-theme="dark"] #hello.ob-page .grid-container.ob-applist > div:not(.ob-th) > svg path { fill: #6F98FF; }   /* the open arrow */
html[data-theme="dark"] #hello.ob-page .grid-container.ob-applist [style*="color: green"] { color: #47CD89 !important; }
html[data-theme="dark"] #hello.ob-page .grid-container.ob-applist [style*="color: red"] { color: #F97066 !important; }
html[data-theme="dark"] #hello.ob-page .grid-container.ob-applist div[style*="background-color: green"] { background-color: #47CD89 !important; }
html[data-theme="dark"] #hello.ob-page .grid-container.ob-applist div[style*="background-color: red"] { background-color: #F97066 !important; }
html[data-theme="dark"] #hello.ob-page:has(#STFW_APPLICATION_LIST) { color: var(--ob-ink); }

/* ---------------------------------------------------------------- Federation: shared SSO providers (v1.17)
   Badge on a shared row, the per-application SSO master-switch banner, and the
   "who this change reaches" notice on the shared-provider form. These live in the
   Applications detail popup and dialogs with grids, which obModalThemable keeps
   LIGHT even in dark mode - so the defaults are fixed light colours, and the dark
   palette applies only inside a surface that really is themed. */
.ce-sso-badge {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 11px; font-weight: 600; letter-spacing: .02em;
    color: #1E5BFF; background: #EEF2FF; border: 1px solid #c7d4ff;
}
.ce-sso-master, .ce-sso-reach {
    padding: 8px 12px;
    border-radius: 8px;
    line-height: 1.4;
    color: #101828; background: #EEF2FF; border: 1px solid #c7d4ff;
}
.ce-sso-master.ce-sso-off, .ce-sso-reach { background: #FFFAEB; border-color: #FEC84B; }
.ce-sso-reach { margin-bottom: .75em; }
html[data-theme="dark"] :is(.ldcv.ob-themed, #hello.ob-page) .ce-sso-badge {
    color: var(--ob-brand); background: var(--ob-info-bg); border-color: var(--ob-line);
}
html[data-theme="dark"] :is(.ldcv.ob-themed, #hello.ob-page) :is(.ce-sso-master, .ce-sso-reach) {
    color: var(--ob-ink); background: var(--ob-info-bg); border-color: var(--ob-line);
}
html[data-theme="dark"] :is(.ldcv.ob-themed, #hello.ob-page) :is(.ce-sso-master.ce-sso-off, .ce-sso-reach) {
    background: var(--ob-warn-bg); border-color: var(--ob-warn-line);
}

/* ---------------------------------------------------------------- Row buttons + enabled checkbox (v1.17.1)
   .ce-btn: icon + label, the same look as the toolbars' .ob-tool and Executions' .ex-btn,
   for buttons that sit inside table rows (SSO Providers dialog). It reads the --ob-*
   variables, so it is light by default and follows dark wherever the surface is themed. */
.ce-sso-actions { display: flex; flex-direction: row; flex-wrap: wrap; gap: 6px; }
.ce-btn {
    display: inline-flex; align-items: center; gap: 6px;
    height: 30px; padding: 0 10px;
    border: 1px solid var(--ob-line-strong); border-radius: 8px;
    background: var(--ob-surface); color: var(--ob-ink-2);
    font: inherit; font-size: 13px; font-weight: 600; line-height: 1;
    cursor: pointer; white-space: nowrap;
    box-shadow: var(--ob-shadow-sm);
    transition: background-color .12s, border-color .12s, color .12s;
}
.ce-btn:hover { background: var(--ob-hover); }
.ce-btn:focus-visible { outline: none; box-shadow: var(--ob-ring); }
.ce-btn svg { width: 15px; height: 15px; flex: none; }
.ce-btn.ce-btn-danger { color: var(--ob-danger); }
.ce-btn.ce-btn-danger:hover { border-color: var(--ob-danger); }
.ce-sso-enabled { display: inline-flex; align-items: center; margin: 0; cursor: pointer; }
.ce-sso-enabled input {
    width: 17px; height: 17px; margin: 0;
    accent-color: var(--ob-brand); cursor: pointer;
}
.ce-sso-enabled input:disabled { cursor: progress; opacity: .6; }

/* Entra: the issuer built from the tenant ID, and the links between that and a hand-entered issuer (v1.17.2) */
.ce-sso-issuer-preview {
    margin-top: .3em;
    font-size: 12px; line-height: 1.4;
    color: #475467; word-break: break-all;
}
.ce-sso-issuer-preview span { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.ce-sso-issuer-preview a, .ce-sso-issuer-back {
    color: #1E5BFF; font-size: 12px; font-weight: 600; white-space: nowrap; text-decoration: none;
}
.ce-sso-issuer-preview a:hover, .ce-sso-issuer-back:hover { text-decoration: underline; }
.ce-sso-issuer-back { display: inline-block; margin-top: .3em; }
html[data-theme="dark"] .ldcv.ob-themed .ce-sso-issuer-preview { color: var(--ob-muted); }
html[data-theme="dark"] .ldcv.ob-themed :is(.ce-sso-issuer-preview a, .ce-sso-issuer-back) { color: var(--ob-brand); }

/* ---------------------------------------------------------------- Attachments + registrations (v1.18)
   Sign-in tile label (icon + display name), a dangling attachment (resolves=false),
   the read-only "from the registration" box on the attachment form, and the tile
   note/preview on the registration form. Same light-by-default rule as above. */
.ce-sso-tile { display: inline-flex; align-items: center; gap: 6px; min-height: 20px; }
.ce-sso-icon { width: 18px; height: 18px; object-fit: contain; flex: none; border-radius: 3px; }
.ce-sso-sub { font-size: 12px; opacity: .72; margin-top: 2px; }
.ce-sso-broken { color: #B42318; font-weight: 600; }
.ce-sso-broken-note { background: #FEF3F2 !important; border-color: #FDA29B !important; }
.ce-sso-tilenote { grid-column: 1 / -1; height: auto !important; display: block !important; margin: .4em 0 .3em;
    line-height: 1.45 !important; font-weight: normal; text-align: left; font-size: 13px; }
.ce-sso-tilepreview { margin-top: .35em; font-size: 12px; font-weight: normal; color: #475467; display: flex; align-items: center; gap: 6px; }
.ce-sso-regbox {
    margin-top: .9em; padding: 10px 12px;
    border: 1px solid #EAECF0; border-radius: 8px; background: #F9FAFB;
}
.ce-sso-regbox-head {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    font-size: 12px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: #475467;
    margin-bottom: .5em;
}
.ce-sso-regbox-grid { display: grid; grid-template-columns: 11em 1fr; gap: 4px 12px; font-size: 13px; }
.ce-sso-regbox-grid > div { word-break: break-all; }
.ce-sso-regbox-label { color: #475467; }
html[data-theme="dark"] :is(.ldcv.ob-themed, #hello.ob-page) .ce-sso-broken { color: var(--ob-danger); }
html[data-theme="dark"] :is(.ldcv.ob-themed, #hello.ob-page) .ce-sso-broken-note { background: var(--ob-warn-bg) !important; border-color: var(--ob-danger) !important; }
html[data-theme="dark"] :is(.ldcv.ob-themed, #hello.ob-page) .ce-sso-regbox { background: var(--ob-surface-2, var(--ob-surface)); border-color: var(--ob-line); }
html[data-theme="dark"] :is(.ldcv.ob-themed, #hello.ob-page) :is(.ce-sso-regbox-head, .ce-sso-regbox-label, .ce-sso-tilepreview) { color: var(--ob-muted); }

/* Registration icon: drop / choose / paste an image, embedded as a data: URI (v1.18.1) */
.ce-sso-icondrop {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    width: 95%; box-sizing: border-box; margin-top: .4em; padding: 10px 12px;
    border: 1.5px dashed #D0D5DD; border-radius: 8px; background: #F9FAFB;
    font-size: 12px; font-weight: normal; color: #475467;
    transition: background-color .12s, border-color .12s;
}
.ce-sso-icondrop:focus-visible { outline: none; box-shadow: var(--ob-ring); }
.ce-sso-icondrop.ce-sso-icondrop-over { border-color: #1E5BFF; background: #EEF3FF; }
.ce-sso-icondrop-text { flex: 1 1 14em; word-break: break-word; text-align: left; }
.ce-sso-icondrop-error { color: #B42318; font-weight: 600; }
html[data-theme="dark"] .ldcv.ob-themed .ce-sso-icondrop { background: var(--ob-surface-2, var(--ob-surface)); border-color: var(--ob-line-strong); color: var(--ob-muted); }
html[data-theme="dark"] .ldcv.ob-themed .ce-sso-icondrop.ce-sso-icondrop-over { border-color: var(--ob-brand); }
html[data-theme="dark"] .ldcv.ob-themed .ce-sso-icondrop-error { color: var(--ob-danger); }
.ce-sso-icondrop-thumb:empty { display: none; }
.ce-sso-icondrop-thumb .ce-sso-icon { width: 28px; height: 28px; }
.ce-sso-icon.ce-sso-icon-missing { display: inline-block; border: 1px dashed #F04438; background: #FEF3F2; }
.ce-sso-namecaption { margin-top: .25em; font-size: 12px; font-weight: 600; color: #475467; }
html[data-theme="dark"] .ldcv.ob-themed .ce-sso-namecaption { color: var(--ob-muted); }
/* Help text switched off with the ? toggle (stfwAppApplyHelp), even where a block's own rule forces display. */
.stfw-app-help.stfw-app-help-hidden { display: none !important; }

/* Federation tab toolbar + primary .ce-btn (v1.19.2) */
.ce-sso-toolbar { margin: .25em 0 .9em 0; }
.ce-btn.ce-btn-primary { background: var(--ob-brand); border-color: var(--ob-brand); color: #fff; }
.ce-btn.ce-btn-primary:hover { background: var(--ob-brand-hover); border-color: var(--ob-brand-hover); }

/* v1.29: the Admin Console's own row on the Applications page */
.ce-self-badge { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: .02em;
  white-space: nowrap; color: var(--ob-link, #2563eb); background: var(--ob-info-bg, #eef4ff); border: 1px solid currentColor; }
.ce-self-warn { margin-top: .8em; padding: .6em .8em; border-radius: 8px; font-size: 13.5px; line-height: 1.45;
  color: var(--ob-ink, inherit); background: var(--ob-warn-bg, #fff7e6); border: 1px solid var(--ob-warn-line, #f0c36d); }
.ce-self-info { margin-bottom: 1em; padding: .7em .9em; border-radius: 8px; font-size: 13.5px; line-height: 1.6;
  background: var(--ob-info-bg, #eef4ff); border: 1px solid var(--ob-line, #dbe3ef); }
.ce-self-stale { color: #b45309; font-weight: 600; }
.ce-self-note { opacity: .75; font-size: 12.5px; margin-top: .3em; }
.ce-self-gate { padding: 1em; font-size: 13.5px; line-height: 1.5; max-width: 60em; }

/* Password dialog (stfwDialogs.passwordDialog, CommandEdge v1.43.5) */
.ldcv .pw-dlg { display: grid; gap: 14px; padding: 6px 4px 4px; font-family: var(--ob-font); color: var(--ob-ink); }
.ldcv .pw-status { margin: 0; font-size: 13.5px; color: var(--ob-ink-2); line-height: 1.45; }
.ldcv .pw-field { display: grid; gap: 6px; }
.ldcv .pw-field > span:first-child { font-size: 12px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--ob-muted); }
.ldcv .pw-wrap { position: relative; display: block; }
.ldcv .pw-wrap input { width: 100%; box-sizing: border-box; height: 38px !important; padding-right: 42px !important; font-size: 14px; }
.ldcv .pw-eye { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); width: 30px; height: 30px; display: grid; place-items: center;
  border: 0; border-radius: 6px; background: transparent; color: var(--ob-muted); cursor: pointer; }
.ldcv .pw-eye:hover { background: var(--ob-hover); color: var(--ob-ink); }
.ldcv .pw-eye:focus-visible { outline: none; box-shadow: var(--ob-ring); }
.ldcv .pw-eye.pw-on { color: var(--ob-brand); }
.ldcv .pw-msg { padding: 9px 12px; border-radius: 8px; font-size: 13px; line-height: 1.4; border: 1px solid transparent; }
.ldcv .pw-msg[hidden] { display: none; }
.ldcv .pw-err { background: var(--ob-err-bg, #fef3f2); color: var(--ob-err, #b42318); border-color: var(--ob-err-line, #fecdca); }
.ldcv .pw-info { background: var(--ob-info-bg); color: var(--ob-ink-2); border-color: var(--ob-line); }
html[data-theme="dark"] .ldcv .pw-err { background: rgba(240,68,56,.14); color: #fda29b; border-color: rgba(253,162,155,.35); }

/* Domains and publishing (Applications toolbar -> Domains; doc 13 §4.6a) */
.ce-apex-banner { display: flex; align-items: center; gap: 14px; margin: 0 0 12px; padding: 10px 14px; border-radius: 10px;
  border: 1px solid #fecdca; background: #fef3f2; color: #7a271a; font-size: 13.5px; }
.ce-apex-banner > div { flex: 1; }
.ce-apex-banner[hidden] { display: none; }
.ldcv .ce-dom-dialog { font-size: 14px; color: var(--ob-ink); }
.ldcv .ce-dom-add { margin: 4px 0 14px; padding: 12px 14px; border: 1px solid var(--ob-line); border-radius: 10px; background: var(--ob-surface-2, #f9fafb); }
.ldcv .ce-dom-addrow { display: flex; gap: 10px; align-items: center; }
.ldcv .ce-dom-addrow input { width: 320px; height: 36px !important; }
.ldcv .ce-dom-cost { margin-top: 8px; font-size: 12.5px; line-height: 1.45; color: var(--ob-ink-2); }
.ldcv .ce-dom-alert { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin: 0 0 12px; padding: 10px 14px; border-radius: 10px;
  border: 1px solid #fecdca; background: #fef3f2; color: #7a271a; font-size: 13.5px; }
.ldcv .ce-dom-alert > div:first-child { flex: 1 1 320px; }
.ldcv .ce-dom-alert-ctl { display: flex; gap: 8px; align-items: center; }
.ldcv .ce-dom-alert-ctl select { min-width: 260px; height: 34px !important; }
.ldcv .ce-dom-tag { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; padding: 1px 7px; border-radius: 999px;
  background: var(--ob-info-bg); color: var(--ob-link); vertical-align: middle; }
.ldcv .ce-dom-state { display: inline-block; font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: #f2f4f7; color: #344054; }
.ldcv .ce-st-valid { background: #ecfdf3; color: #067647; }
.ldcv .ce-st-pending { background: #fffaeb; color: #b54708; }
.ldcv .ce-st-invalid { background: #fef3f2; color: #b42318; }
.ldcv .ce-ck { display: inline-block; font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; }
.ldcv .ce-ck-pass { background: #ecfdf3; color: #067647; }
.ldcv .ce-ck-fail { background: #fef3f2; color: #b42318; }
.ldcv .ce-ck-warn { background: #fffaeb; color: #b54708; border: 1px solid #fedf89; }
.ldcv .ce-ck-unk { background: #f2f4f7; color: #667085; }
.ldcv .ce-ck-note { font-size: 12px; color: var(--ob-muted, #667085); line-height: 1.35; margin-top: 2px; white-space: normal; }
.ldcv .ce-dom-none { color: #b42318; font-weight: 600; }
.ldcv .ce-dom-empty, .ldcv .ce-dom-err { padding: 16px 4px; color: var(--ob-muted); }
.ldcv .ce-dom-err { color: #b42318; }
.ldcv .ce-dom-two { display: flex; gap: 22px; flex-wrap: wrap; margin: 8px 0; }
.ldcv .ce-dom-two > div { min-width: 180px; }
.ldcv .ce-dom-lbl { display: block; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ob-muted); margin-bottom: 2px; }
.ldcv .ce-dom-head { padding-bottom: 12px; border-bottom: 1px solid var(--ob-line); }
.ldcv .ce-dom-title { font-size: 16px; margin-bottom: 4px; }
.ldcv .ce-dom-sec { padding: 12px 0; border-bottom: 1px solid var(--ob-line); }
.ldcv .ce-dom-sec:last-child { border-bottom: 0; }
.ldcv .ce-dom-sectitle { font-weight: 700; margin-bottom: 8px; }
.ldcv .ce-dom-radio { display: flex; align-items: center; gap: 6px; padding: 3px 0; cursor: pointer; font-weight: 400; }
.ldcv .ce-dom-radio input { width: 15px; height: 15px; margin: 0; accent-color: var(--ob-brand); }
.ldcv .ce-dom-asgrow { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(220px, 1.3fr) auto; gap: 12px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--ob-line); }
.ldcv .ce-dom-asgrow:last-child { border-bottom: 0; }
.ldcv .ce-dom-why { margin-top: 8px; font-size: 12.5px; color: #b54708; }
html[data-theme="dark"] .ce-apex-banner, html[data-theme="dark"] .ldcv .ce-dom-alert { background: rgba(240,68,56,.12); border-color: rgba(253,162,155,.35); color: #fda29b; }
html[data-theme="dark"] .ldcv .ce-st-valid, html[data-theme="dark"] .ldcv .ce-ck-pass { background: rgba(34,197,94,.16); color: #75e0a7; }
html[data-theme="dark"] .ldcv .ce-st-pending, html[data-theme="dark"] .ldcv .ce-ck-warn { background: rgba(245,158,11,.16); color: #fcd34d; border-color: rgba(252,211,77,.4); }
html[data-theme="dark"] .ldcv .ce-st-invalid, html[data-theme="dark"] .ldcv .ce-ck-fail { background: rgba(240,68,56,.16); color: #fda29b; }
html[data-theme="dark"] .ldcv .ce-ck-unk, html[data-theme="dark"] .ldcv .ce-dom-state { background: rgba(152,162,179,.16); color: #cbd5e1; }
html[data-theme="dark"] .ldcv .ce-dom-add { background: rgba(255,255,255,.03); }
html[data-theme="dark"] .ldcv .ce-dom-none, html[data-theme="dark"] .ldcv .ce-dom-err { color: #fda29b; }
html[data-theme="dark"] .ldcv .ce-dom-why { color: #fcd34d; }
/* Applications list: badges under the name; apex rows lightly shaded (v1.46.3) */
.ce-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 3px; }
.ce-apex-badge { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: .02em;
  white-space: nowrap; color: #067647; background: #ecfdf3; border: 1px solid currentColor; }
#hello .grid-container.ob-applist > div.ce-apex-row:not(.ob-selected) { background-color: #f3fbf6 !important; }
html[data-theme="dark"] .ce-apex-badge { color: #75e0a7; background: rgba(34,197,94,.14); }
html[data-theme="dark"] #hello .grid-container.ob-applist > div.ce-apex-row:not(.ob-selected) { background-color: rgba(34,197,94,.07) !important; }
/* Hover cards (ceInstallTips) - Domains check details (v1.46.4) */
.ce-tip-card { position: fixed; z-index: 100000; max-width: 380px; padding: 10px 12px; border-radius: 10px; pointer-events: none;
  background: #fff; color: #101828; border: 1px solid #d0d5dd; box-shadow: 0 12px 28px rgba(16,24,40,.18), 0 2px 6px rgba(16,24,40,.08);
  font: 13px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
.ce-tip-card[hidden] { display: none; }
.ce-tip-card .ce-tip-title { font-weight: 700; margin-bottom: 6px; display: flex; gap: 8px; align-items: center; }
.ce-tip-card .ce-tip-note { padding: 6px 8px; border-radius: 6px; background: #f2f4f7; color: #344054; margin-bottom: 6px; overflow-wrap: anywhere;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.ce-tip-card .ce-tip-what { color: #667085; font-size: 12.5px; }
.ce-tip-card .ce-ck { display: inline-block; font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; }
.ce-tip-card .ce-ck-pass { background: #ecfdf3; color: #067647; }
.ce-tip-card .ce-ck-fail { background: #fef3f2; color: #b42318; }
.ce-tip-card .ce-ck-warn { background: #fffaeb; color: #b54708; border: 1px solid #fedf89; }
.ce-tip-card .ce-ck-unk { background: #f2f4f7; color: #667085; }
.ldcv .ce-tip-anchor { cursor: help; }
.ldcv .ce-tip-anchor:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(30,91,255,.3); }
.ldcv .ce-ck-i { display: inline-grid; place-items: center; width: 13px; height: 13px; margin-left: 3px; border-radius: 50%; font-size: 9px; font-style: italic;
  font-family: Georgia, serif; background: currentColor; color: #fff; vertical-align: 1px; }
.ldcv .ce-ck-i { color: inherit; }
.ldcv .ce-ck-pass .ce-ck-i { background: #067647; color: #fff; }
.ldcv .ce-ck-fail .ce-ck-i { background: #b42318; color: #fff; }
.ldcv .ce-ck-warn .ce-ck-i { background: #b54708; color: #fff; }
.ldcv .ce-ck-unk .ce-ck-i { background: #667085; color: #fff; }
html[data-theme="dark"] .ce-tip-card { background: #161d45; color: #e4e7ec; border-color: #34407a; box-shadow: 0 12px 28px rgba(0,0,0,.45); }
html[data-theme="dark"] .ce-tip-card .ce-tip-note { background: rgba(255,255,255,.06); color: #d0d5dd; }
html[data-theme="dark"] .ce-tip-card .ce-tip-what { color: #98a2b3; }
html[data-theme="dark"] .ce-tip-card .ce-ck-pass { background: rgba(34,197,94,.16); color: #75e0a7; }
html[data-theme="dark"] .ce-tip-card .ce-ck-fail { background: rgba(240,68,56,.16); color: #fda29b; }
html[data-theme="dark"] .ce-tip-card .ce-ck-warn { background: rgba(245,158,11,.16); color: #fcd34d; }

/* Export / import an application (v1.47.0; doc 13 §4.8a) */
.ldcv .ce-xi { display: grid; gap: 12px; font-size: 14px; color: var(--ob-ink); }
.ldcv .ce-xi-lead { font-size: 15px; }
.ldcv .ce-xi-field { display: grid; gap: 5px; }
.ldcv .ce-xi-field > span { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--ob-muted); }
.ldcv .ce-xi-field input.stfwinput-field { width: 100%; max-width: 420px; height: 36px !important; box-sizing: border-box; }
.ldcv .ce-xi-field small { font-size: 12px; color: var(--ob-muted); }
.ldcv .ce-xi-field small.ce-xi-bad, .ldcv .ce-xi-bad { color: #b42318; font-weight: 600; }
.ldcv .ce-xi-file { font-size: 13px; color: var(--ob-ink-2); }
.ldcv .ce-xi-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ldcv .ce-xi-box { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--ob-line); font-size: 13px; line-height: 1.45; }
.ldcv .ce-xi-box ul { margin: 6px 0 6px 18px; padding: 0; }
.ldcv .ce-xi-ok { background: #f6fef9; border-color: #abefc6; }
.ldcv .ce-xi-warn { background: #fffaeb; border-color: #fedf89; color: #7a2e0e; }
.ldcv .ce-xi-note { font-size: 12.5px; color: var(--ob-ink-2); padding: 8px 10px; border-radius: 8px; background: var(--ob-info-bg); }
.ldcv .ce-xi-info { font-size: 13px; color: var(--ob-ink-2); min-height: 1em; }
.ldcv .ce-xi-check { display: flex; align-items: center; gap: 8px; font-weight: 400; cursor: pointer; }
.ldcv .ce-xi-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--ob-brand); }
.ldcv .ce-xi-prog[hidden] { display: none; }
.ldcv .ce-xi-bar { height: 8px; border-radius: 999px; background: var(--ob-line); overflow: hidden; }
.ldcv .ce-xi-bar > span { display: block; height: 100%; width: 0; background: var(--ob-brand); transition: width .15s; }
.ldcv .ce-xi-progtext { margin-top: 6px; font-size: 12.5px; color: var(--ob-ink-2); }
.ldcv .ce-xi-todo { padding: 12px 14px; border-radius: 10px; border: 1px solid #fedf89; background: #fffaeb; color: #7a2e0e; }
.ldcv .ce-xi-todo-h { font-weight: 700; margin-bottom: 6px; }
.ldcv .ce-xi-todo ol { margin: 0 0 0 20px; padding: 0; display: grid; gap: 4px; font-size: 13.5px; }
.ldcv .ce-xi-facts { display: flex; gap: 22px; flex-wrap: wrap; }
.ldcv .ce-xi-facts span, .ldcv .ce-xi-pub > span { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ob-muted); }
.ldcv .ce-xi-pub code { display: inline-block; margin: 3px 6px 3px 0; padding: 1px 6px; border-radius: 4px; background: var(--ob-head, #f2f4f7); }
html[data-theme="dark"] .ldcv .ce-xi-ok { background: rgba(34,197,94,.08); border-color: rgba(117,224,167,.3); }
html[data-theme="dark"] .ldcv .ce-xi-warn, html[data-theme="dark"] .ldcv .ce-xi-todo { background: rgba(245,158,11,.10); border-color: rgba(252,211,77,.35); color: #fcd34d; }
html[data-theme="dark"] .ldcv .ce-xi-bad { color: #fda29b; }

/* v1.48: Import / Export dialog (xiDialog) - tabs, bundle card, update plan, lineage */
.ldcv .ce-xi-tool { gap: 14px; }
.ldcv .ce-xi-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--ob-line); }
.ldcv .ce-xi-tab { appearance: none; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 8px 14px;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--ob-muted); cursor: pointer; }
.ldcv .ce-xi-tab:hover { color: var(--ob-ink); }
.ldcv .ce-xi-tab.on { color: var(--ob-brand); border-bottom-color: var(--ob-brand); }
.ldcv .ce-xi-body { display: grid; gap: 12px; max-height: 62vh; overflow-y: auto; padding-right: 4px; align-content: start; }
.ldcv .ce-xi-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.ldcv .ce-xi-choice { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ldcv .ce-xi-choice > div { flex: 1 1 320px; }
.ldcv .ce-xi-select { width: 100%; max-width: 520px; height: 36px !important; box-sizing: border-box; }
.ldcv .ce-xi-filebox { display: grid; gap: 10px; justify-items: start; }
.ldcv .ce-xi-card { justify-self: stretch; padding: 12px 14px; border: 1px solid var(--ob-line); border-radius: 10px; background: var(--ob-head, #f9fafb); font-size: 13px; }
.ldcv .ce-xi-card-h { font-size: 15px; }
.ldcv .ce-xi-card-h > span { color: var(--ob-muted); }
.ldcv .ce-xi-card-h .ce-xi-ver { margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--ob-brand); border: 1px solid currentColor; }
.ldcv .ce-xi-card-f { margin: 2px 0 8px; font-size: 12px; color: var(--ob-muted); }
.ldcv .ce-xi-card-grid { display: grid; gap: 5px; }
.ldcv .ce-xi-card-grid > div, .ldcv .ce-xi-pdet > div { display: grid; grid-template-columns: 130px 1fr; gap: 10px; line-height: 1.45; }
.ldcv .ce-xi-card-grid span:first-child, .ldcv .ce-xi-pdet > div > span:first-child { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ob-muted); padding-top: 2px; }
.ldcv .ce-xi code, .ldcv .ce-xi-card code { padding: 0 5px; border-radius: 4px; background: var(--ob-hover, #f2f4f7); font-size: 12px; }
.ldcv .ce-xi-planhead { font-size: 13.5px; color: var(--ob-ink-2); }
.ldcv .ce-xi-plan { display: grid; border: 1px solid var(--ob-line); border-radius: 10px; overflow: hidden; }
.ldcv .ce-xi-prow { border-top: 1px solid var(--ob-line); }
.ldcv .ce-xi-prow:first-child { border-top: 0; }
.ldcv .ce-xi-prow.ce-xi-excl { background: #fffaeb; }
.ldcv .ce-xi-pline { display: grid; grid-template-columns: 22px minmax(140px, 220px) 150px 96px 1fr auto; gap: 10px; align-items: center; padding: 9px 12px; font-size: 13px; }
.ldcv .ce-xi-pline.ce-xi-rline { grid-template-columns: minmax(140px, 220px) 96px 1fr; }
.ldcv .ce-xi-pline input { width: 16px; height: 16px; margin: 0; accent-color: var(--ob-brand); }
.ldcv .ce-xi-pwho span { color: var(--ob-muted); }
.ldcv .ce-xi-pver { font-variant-numeric: tabular-nums; color: var(--ob-ink-2); }
.ldcv .ce-xi-psum { color: var(--ob-ink-2); }
.ldcv .ce-xi-excl .ce-xi-psum { color: #93370d; }
.ldcv .ce-xi-pill { justify-self: start; padding: 1px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap; border: 1px solid currentColor; }
.ldcv .ce-xi-pill.ok { color: #067647; background: #ecfdf3; }
.ldcv .ce-xi-pill.excl { color: #b54708; background: #fffaeb; }
.ldcv .ce-xi-pill.bad { color: #b42318; background: #fef3f2; }
.ldcv .ce-xi-tog { appearance: none; background: none; border: 0; padding: 2px 4px; font: inherit; font-size: 12.5px; color: var(--ob-link, #2563eb); cursor: pointer; }
.ldcv .ce-xi-pdet { display: grid; gap: 6px; padding: 4px 14px 12px 44px; font-size: 12.5px; }
.ldcv .ce-xi-pdet[hidden] { display: none; }
.ldcv .ce-xi-pdet ul, .ldcv .ce-xi-clist { margin: 0 0 0 16px; padding: 0; }
.ldcv .ce-xi-pwarn { color: #93370d; }
.ldcv .ce-xi-lin { border: 1px solid var(--ob-line); border-radius: 10px; overflow: hidden; }
.ldcv .ce-xi-lin-h { padding: 9px 12px; background: var(--ob-head, #f9fafb); font-size: 13.5px; border-bottom: 1px solid var(--ob-line); }
.ldcv .ce-xi-lin-h span { color: var(--ob-muted); }
.ldcv .ce-xi-lin-r { display: grid; grid-template-columns: 200px 1fr 160px; gap: 10px; padding: 7px 12px; font-size: 13px; border-top: 1px solid var(--ob-line); }
.ldcv .ce-xi-lin-r:first-child { border-top: 0; }
.ldcv .ce-xi-lin-th { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ob-muted); }
html[data-theme="dark"] .ldcv .ce-xi-prow.ce-xi-excl { background: rgba(245,158,11,.08); }
html[data-theme="dark"] .ldcv .ce-xi-excl .ce-xi-psum, html[data-theme="dark"] .ldcv .ce-xi-pwarn { color: #fcd34d; }
html[data-theme="dark"] .ldcv .ce-xi-pill.ok { color: #75e0a7; background: rgba(34,197,94,.10); }
html[data-theme="dark"] .ldcv .ce-xi-pill.excl { color: #fcd34d; background: rgba(245,158,11,.10); }
html[data-theme="dark"] .ldcv .ce-xi-pill.bad { color: #fda29b; background: rgba(240,68,56,.10); }
.ldcv .ce-xi-field small.ce-xi-fold { color: var(--ob-brand); }

/* v1.49: Security > Single Sign-On page (same content as the SSO Providers dialog) */
#hello .ce-sso-page { padding: .25em 0 3em; max-width: 1400px; }
#hello .ce-sso-pagehelp { display: flex; align-items: center; justify-content: center; }
#hello .ce-sso-page .ce-sso-row { cursor: pointer; }
/* buildTable paints each cell white, so the selection and hover colour go on the cells */
#hello .ce-sso-page .ce-sso-row:hover > div { background-color: var(--ob-hover, #f5f7fa) !important; }
#hello .ce-sso-page .ce-sso-row.ce-sso-sel > div { background-color: var(--table-row-selected-color) !important; }
#hello .ce-sso-page .ce-sso-row.ce-sso-sel > div:first-child { box-shadow: inset 3px 0 0 var(--ob-brand, #1e5bff); }

/* v1.49.3: help popover from a toolbar ? (ceHelpPopover) */
.ce-help-pop { position: fixed; z-index: 100000; width: 400px; max-width: calc(100vw - 24px); padding: 14px 16px 6px; border-radius: 12px;
  background: #fff; color: #101828; border: 1px solid #d0d5dd;
  box-shadow: 0 16px 36px rgba(16,24,40,.18), 0 3px 8px rgba(16,24,40,.08);
  font: 13.5px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  opacity: 0; transform: translateY(-4px); transition: opacity .14s ease, transform .14s ease; }
.ce-help-pop.on { opacity: 1; transform: none; }
.ce-help-pop::before { content: ""; position: absolute; top: -7px; left: var(--ce-arrow-x, 24px); width: 12px; height: 12px; margin-left: -6px;
  background: inherit; border-left: 1px solid #d0d5dd; border-top: 1px solid #d0d5dd; transform: rotate(45deg); }
.ce-help-pop-h { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; font-size: 14.5px; }
.ce-help-pop-h b { flex: 1; }
.ce-help-pop-i { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; flex: none;
  background: var(--ob-info-bg, #eef4ff); color: var(--ob-brand, #1e5bff); font-weight: 800; font-size: 13px; }
.ce-help-pop-x { appearance: none; border: 0; background: none; width: 26px; height: 26px; border-radius: 6px; font-size: 19px; line-height: 1;
  color: #667085; cursor: pointer; }
.ce-help-pop-x:hover { background: #f2f4f7; color: #101828; }
.ce-help-pop p { margin: 0 0 10px; color: #344054; }
.ce-help-pop p b { color: #101828; }
.ce-help-pop.ce-help-pop-dark { background: #1d2433; color: #e6e9ef; border-color: #344054; }
.ce-help-pop.ce-help-pop-dark::before { border-color: #344054; }
.ce-help-pop.ce-help-pop-dark p { color: #c4cad6; }
.ce-help-pop.ce-help-pop-dark p b, .ce-help-pop.ce-help-pop-dark .ce-help-pop-h { color: #f2f4f7; }
.ce-help-pop.ce-help-pop-dark .ce-help-pop-i { background: rgba(79,139,255,.18); color: #8fb3ff; }
.ce-help-pop.ce-help-pop-dark .ce-help-pop-x { color: #98a2b3; }
.ce-help-pop.ce-help-pop-dark .ce-help-pop-x:hover { background: #2b3446; color: #fff; }
#hello .ce-sso-page .ce-sso-open { cursor: pointer; display: inline-flex; }
#hello .ce-sso-page .ce-sso-row { user-select: none; }
.ce-sso-admincell { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.ce-sso-iconfix { font-size: 11.5px; line-height: 1.2; color: var(--ob-link, #2563eb); text-decoration: none; }
.ce-sso-iconfix:hover { text-decoration: underline; }

/* v1.53: application brand images (doc 32) - badge in the list, logo on Overview */
.ce-app-badge { width: 24px; height: 24px; object-fit: contain; border-radius: 5px; display: block; cursor: pointer; }
.ce-app-logo { max-height: 64px; max-width: 260px; object-fit: contain; display: block; margin: 6px 0; }
.ce-app-logo-none { color: var(--ob-muted, #667085); }

/* v1.54: User Auth - token exchange and item events group */
.ce-auth-grouphead { margin: 1.4em 0 .4em; padding-top: .9em; border-top: 1px solid var(--ob-line, #e4e7ec);
  font-size: 13px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--ob-muted, #667085); }
.ce-auth-none { color: var(--ob-muted, #667085); font-style: italic; }
.ce-auth-reg { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; padding: 2px 0; }
.ce-auth-reg span { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--ob-ink-2, #475467); word-break: break-all; }
.grid-container > div.ce-auth-switch { flex-direction: row !important; align-items: flex-start !important; justify-content: flex-start !important;
  gap: 10px; padding: 8px 0; }
.ce-auth-switch input[type=checkbox] { flex: none; margin-top: 1px; }
.ce-auth-explain { font-size: 12.5px !important; font-weight: 400 !important; line-height: 1.45; color: var(--ob-ink-2, #475467) !important;
  opacity: 1 !important; max-width: 52em; text-align: left; }

/* v1.55: Edge Events tab (doc 34 §3) - droppedPersons is the point of the screen */
.ce-ev { display: grid; gap: 10px; font-size: 13.5px; }
.ce-ev-note, .ce-ev-ret { color: var(--ob-muted, #667085); font-size: 12.5px; }
.ce-ev-err { color: #b42318; }
.ce-ev-bar { display: flex; align-items: center; gap: 10px; }
.ce-ev-bar select { height: 32px !important; width: auto !important; }
.ce-ev-sum { display: flex; gap: 14px; align-items: flex-start; padding: 12px 14px; border-radius: 10px; border: 1px solid; }
.ce-ev-sum p { margin: 3px 0 0; font-size: 13px; line-height: 1.45; max-width: 60em; }
.ce-ev-sum-n { min-width: 46px; text-align: center; font-size: 26px; font-weight: 800; line-height: 1.1; }
.ce-ev-sum.bad { background: #fef3f2; border-color: #fda29b; color: #912018; }
.ce-ev-sum.ok { background: #f6fef9; border-color: #abefc6; color: #05603a; }
.ce-ev-head { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.ce-ev-head h4 { margin: 0; font-size: 15px; font-weight: 700; color: var(--ob-ink, #101828); }
.ce-ev-count { color: var(--ob-muted, #667085); font-size: 12.5px; }
.ce-ev-pill { padding: 1px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; border: 1px solid currentColor; }
.ce-ev-pill.bad { color: #b42318; background: #fef3f2; }
.ce-ev-pill.wait { color: #175cd3; background: #eff8ff; cursor: help; }
.ce-ev-warn { padding: 9px 12px; border-radius: 8px; background: #fffaeb; border: 1px solid #fedf89; color: #93370d; font-size: 13px; line-height: 1.45; }
.ce-ev-empty { padding: 14px; border: 1px dashed var(--ob-line, #d0d5dd); border-radius: 10px; color: var(--ob-muted, #667085); text-align: center; }
.ce-ev-tablewrap { border: 1px solid var(--ob-line, #e4e7ec); border-radius: 10px; overflow: auto; max-height: 340px; }
.ce-ev-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ce-ev-table th { position: sticky; top: 0; background: var(--ob-head, #f9fafb); text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--ob-muted, #667085); padding: 8px 10px; border-bottom: 1px solid var(--ob-line, #e4e7ec); }
.ce-ev-table td { padding: 7px 10px; border-bottom: 1px solid var(--ob-line, #f2f4f7); white-space: nowrap; }
.ce-ev-table tr.bad td { background: #fef3f2; }
.ce-ev-table tr.bad td:first-child { box-shadow: inset 3px 0 0 #d92d20; }
.ce-ev-table code { font-size: 12px; }
.ce-ev-drop { display: inline-block; min-width: 26px; text-align: center; padding: 1px 7px; border-radius: 999px; background: #d92d20; color: #fff; font-weight: 800; }
.ce-ev-zero { color: var(--ob-muted, #98a2b3); }
.ce-ev-st { padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.ce-ev-st.ok { background: #ecfdf3; color: #067647; }
.ce-ev-st.wait { background: #eff8ff; color: #175cd3; }
html[data-theme="dark"] .ce-ev-sum.bad, html[data-theme="dark"] .ce-ev-table tr.bad td { background: rgba(240,68,56,.12); color: #fda29b; }
html[data-theme="dark"] .ce-ev-sum.ok { background: rgba(34,197,94,.08); color: #75e0a7; border-color: rgba(117,224,167,.3); }
html[data-theme="dark"] .ce-ev-warn { background: rgba(245,158,11,.10); color: #fcd34d; border-color: rgba(252,211,77,.35); }
html[data-theme="dark"] .ce-ev-head h4 { color: #f2f4f7; }

/* v1.56: project assignment on Overview */
.ce-proj-wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.ce-proj-check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; margin: 0; font-weight: 400; }
.ce-proj-check input:disabled + span { opacity: .8; }
.ce-proj-help { font-size: 12px; line-height: 1.4; color: var(--ob-muted, #667085); max-width: 34em; }
.ce-proj-select { min-width: 18em; max-width: 100%; height: 34px !important; }

/* v1.58: rename application / rename schema / retired schemas */
.ce-rn { display: grid; gap: 12px; font-size: 13.5px; color: var(--ob-ink, #101828); }
.ce-rn code { padding: 0 5px; border-radius: 4px; background: var(--ob-hover, #f2f4f7); font-size: 12.5px; }
.ce-rn-field { display: grid; gap: 4px; }
.ce-rn-field > span { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--ob-muted, #667085); }
.ce-rn-field input.stfwinput-field { width: 100%; max-width: 440px; height: 36px !important; box-sizing: border-box; }
.ce-rn-field small { font-size: 12px; color: var(--ob-muted, #667085); }
.ce-rn-warn { padding: 10px 12px; border-radius: 8px; background: #fffaeb; border: 1px solid #fedf89; color: #7a2e0e; line-height: 1.5; }
.ce-rn-warn[hidden] { display: none; }
.ce-rn-warn ul { margin: 6px 0 0 18px; padding: 0; }
.ce-rn-bad { padding: 10px 12px; border-radius: 8px; background: #fef3f2; border: 1px solid #fda29b; color: #912018; line-height: 1.5; }
.ce-rn-big { font-size: 14.5px; border-width: 2px; }
.ce-rn-ok { padding: 10px 12px; border-radius: 8px; background: #f6fef9; border: 1px solid #abefc6; color: #05603a; }
.ce-rn-muted { color: var(--ob-muted, #667085); font-size: 12.5px; }
.ce-rn-lead { font-size: 14.5px; }
.ce-rn-addr span, .ce-rn-list > span { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ob-muted, #667085); margin-bottom: 3px; }
.ce-rn-list ul { margin: 0 0 0 18px; padding: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; max-height: 160px; overflow: auto; }
.ce-rn-amber { padding: 8px 10px; border-radius: 8px; background: #fffaeb; border: 1px solid #fedf89; }
.ce-rn-redl { padding: 8px 10px; border-radius: 8px; background: #fef3f2; border: 1px solid #fda29b; color: #912018; }
.ce-rn-names { font-size: 14.5px; }
.ce-rn-sum { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.ce-rn-sum span { font-size: 12.5px; color: var(--ob-ink-2, #475467); }
.ce-rn-spin, .ce-rn-step { display: flex; align-items: center; gap: 10px; }
.ce-rn-spinner { width: 16px; height: 16px; flex: none; border-radius: 50%; border: 2.5px solid #b2ddff; border-top-color: #1570ef; animation: ceRnSpin .8s linear infinite; }
@keyframes ceRnSpin { to { transform: rotate(360deg); } }
.ce-rn-follow { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--ob-line, #e4e7ec); border-radius: 10px; }
.ce-rn-fhead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ce-rn-pill { padding: 1px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; border: 1px solid currentColor; }
.ce-rn-pill.run { color: #175cd3; background: #eff8ff; } .ce-rn-pill.ok { color: #067647; background: #ecfdf3; }
.ce-rn-pill.warn { color: #b54708; background: #fffaeb; } .ce-rn-pill.bad { color: #b42318; background: #fef3f2; }
.ce-rn-hb { margin-left: auto; font-size: 12px; display: inline-flex; align-items: center; gap: 6px; }
.ce-rn-hb::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.ce-rn-hb.ok { color: #079455; } .ce-rn-hb.ok::before { animation: ceRnPulse 1.2s ease-in-out infinite; }
.ce-rn-hb.lost { color: #d92d20; font-weight: 700; }
@keyframes ceRnPulse { 50% { opacity: .3; } }
.ce-rn-log summary { cursor: pointer; font-size: 12.5px; color: var(--ob-link, #2563eb); }
.ce-rn-log pre, .ce-rn-pre { max-height: 260px; overflow: auto; margin: 6px 0 0; padding: 8px 10px; border-radius: 6px; background: #0f172a; color: #e2e8f0; font-size: 11.5px; white-space: pre-wrap; }
.ce-rn-relaunch { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; background: #fffaeb; border: 1px solid #fedf89; color: #7a2e0e; }
.ce-rn-sec { display: grid; gap: 8px; margin-top: 1.2em; }
.ce-rn-sechead { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ob-muted, #667085); margin-top: .6em; }
.ce-rn-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ce-rn-table th { text-align: left; font-size: 11px; color: var(--ob-muted, #667085); text-transform: uppercase; padding: 5px 8px; border-bottom: 1px solid var(--ob-line, #e4e7ec); }
.ce-rn-table td { padding: 5px 8px; border-bottom: 1px solid var(--ob-line, #f2f4f7); }
.ce-rn-retired { display: flex; align-items: center; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--ob-line, #f2f4f7); font-size: 13px; }
.ce-rn-retired > span { flex: 1; color: var(--ob-ink-2, #475467); }
html[data-theme="dark"] .ce-rn-warn, html[data-theme="dark"] .ce-rn-amber, html[data-theme="dark"] .ce-rn-relaunch { background: rgba(245,158,11,.10); color: #fcd34d; border-color: rgba(252,211,77,.35); }
html[data-theme="dark"] .ce-rn-bad, html[data-theme="dark"] .ce-rn-redl { background: rgba(240,68,56,.12); color: #fda29b; border-color: rgba(253,162,155,.4); }
html[data-theme="dark"] .ce-rn-ok { background: rgba(34,197,94,.08); color: #75e0a7; border-color: rgba(117,224,167,.3); }
html[data-theme="dark"] .ce-rn { color: var(--ob-ink, #f2f4f7); }
.ce-rn-codebad { color: #b42318 !important; font-weight: 600; }
.ce-rn-codebad a { margin-left: 4px; color: var(--ob-link, #2563eb); font-weight: 700; }
.ce-rn-summary { padding: 8px 12px; border-radius: 8px; background: var(--ob-info-bg, #eef4ff); font-size: 13.5px; }
.ce-rn-summary.bad { background: #fef3f2; color: #912018; }
html[data-theme="dark"] .ce-rn-codebad { color: #fda29b !important; }
.btn.ce-btn-off { opacity: .45 !important; pointer-events: none !important; cursor: not-allowed !important; }

/* v1.60: ceStandardHeader - our pages use the console's standard toolbar header */
#hello .ce-std-head { margin-bottom: 0; }
#hello .ce-std-extra { display: flex; align-items: center; }
#hello .ex-page > hr { margin: 10px 0 16px; }
#hello .sms-page .sms-mode { margin: 0 0 14px; }

/* v1.62: Accepts item grants switch + Grants tab (doc 34 §2.8) */
.ce-auth-switch.ce-auth-off { opacity: .55; }
.ce-auth-grantnote { flex-basis: 100%; font-size: 12px; color: #b54708; margin-left: 26px; }
.ce-auth-grantnote[hidden] { display: none; }
.ce-auth-switch:has(.ce-auth-grantnote) { flex-wrap: wrap; }
.ce-gr-wrap { max-height: 520px; }
.ce-gr-click { cursor: pointer; }
.ce-gr-click:hover td { background: var(--ob-hover, #f5f7fa); }
.ce-gr-tw { width: 18px; color: var(--ob-muted, #98a2b3); }
.ce-gr-act { font-size: 11.5px; color: var(--ob-muted, #667085); }
.ce-gr-st { padding: 1px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; border: 1px solid currentColor; }
.ce-gr-st.active { color: #067647; background: #ecfdf3; }
.ce-gr-st.expired { color: #475467; background: #f2f4f7; }
.ce-gr-st.revoked { color: #b42318; background: #fef3f2; }
.ce-gr-detail[hidden] { display: none; }
.ce-gr-detail td { white-space: normal !important; background: var(--ob-head, #f9fafb); }
.ce-gr-meta { font-size: 12.5px; color: var(--ob-ink-2, #475467); margin: 4px 0 8px; }
.ce-gr-id { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; color: var(--ob-muted, #98a2b3); margin-left: 8px; }
.ce-gr-ev { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-bottom: 6px; }
.ce-gr-ev th { text-align: left; font-size: 10.5px; text-transform: uppercase; color: var(--ob-muted, #667085); padding: 4px 6px; border-bottom: 1px solid var(--ob-line, #e4e7ec); }
.ce-gr-ev td { padding: 4px 6px; border-bottom: 1px solid var(--ob-line, #f2f4f7); background: transparent !important; }
.ce-gr-reason { color: #b42318; font-weight: 600; }
html[data-theme="dark"] .ce-gr-st.active { color: #75e0a7; background: rgba(34,197,94,.10); }
html[data-theme="dark"] .ce-gr-st.expired { color: #d0d5dd; background: rgba(255,255,255,.06); }
html[data-theme="dark"] .ce-gr-st.revoked, html[data-theme="dark"] .ce-gr-reason { color: #fda29b; background: rgba(240,68,56,.10); }
html[data-theme="dark"] .ce-auth-grantnote { color: #fcd34d; }

/* Application > Overview: Source repository; Versions: Source / Workspace commit (doc 07 §4.14a, SR-3) */
.ce-src { display: grid; gap: 3px; min-width: 0; max-width: 100%; }
.ce-src-line { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ce-src-url { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ce-src-chip, .ce-src-tag { flex: none; display: inline-block; padding: 0 8px; border-radius: 999px; font-size: 11px; font-weight: 700; line-height: 18px; white-space: nowrap;
    color: #175cd3; background: #eff8ff; border: 1px solid #b2ddff; }
.ce-src-tag { color: #475467; background: #f2f4f7; border-color: #d0d5dd; max-width: 11em; overflow: hidden; text-overflow: ellipsis; }
.ce-src-muted { color: var(--ob-muted, #667085); }
.ce-src-small { font-size: 12px; }
.ce-src-ver { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ce-sha { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; }
.ce-sha-plain { color: inherit; }
html[data-theme="dark"] .ce-src-chip { color: #b2ddff; background: rgba(21,112,239,.15); border-color: rgba(83,177,253,.35); }
html[data-theme="dark"] .ce-src-tag { color: #d0d5dd; background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.15); }
.ce-src-ver { flex-wrap: wrap; row-gap: 3px; padding: 4px 0; }
.ce-src-tag { max-width: 100%; }