html,
body,
#react-app,
.full-height {
    height: 100%;
    color: rgb(var(--primary-text-color, 64, 64, 64));
}

/* Global Scrollbar Styling
   - Thin, overlay-style scrollbars
   - Appear on hover for macOS-like experience on Windows */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--primary-text-color, 0, 0, 0), 0.3) transparent;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(var(--primary-text-color, 0, 0, 0), 0);
    border-radius: 4px;
    border: 2px solid transparent;
    background-clip: content-box;
    transition: background-color 0.2s ease-in-out;
}

*:hover::-webkit-scrollbar-thumb {
    background-color: rgba(var(--primary-text-color, 0, 0, 0), 0.2);
}

*:hover::-webkit-scrollbar-thumb:hover {
    background-color: rgba(var(--primary-text-color, 0, 0, 0), 0.4);
}

/* Dark mode scrollbars */
[data-theme="dark"] * {
    scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0);
}

[data-theme="dark"] *:hover::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.2);
}

[data-theme="dark"] *:hover::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.4);
}

/* Portlet border and shadow styles - theme aware */
:root {
    --portlet-border-color: rgba(0, 0, 0, 0.15);
    --portlet-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

[data-theme="dark"] {
    --portlet-border-color: rgba(255, 255, 255, 0.08);
    --portlet-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
}

::-webkit-scrollbar-corner {
    background: transparent;
}

.form-control {
    border-color: rgba(var(--primary-text-color, 0, 0, 0), 0.175);
}

.form-control:focus {
    outline: none !important;
    box-shadow: none !important;
    border-color: rgb(var(--border-color, 206, 212, 218));
}

.accordion-button {
    font-size: 0.9rem;
    padding: 0.7rem;
}

.btn:focus,
.accordion-button:focus {
    outline: none !important;
}

/* Suppress the framework focus rings through their own variables rather than a blanket
   `box-shadow: none`, which would also erase the outline button's lift for as long as it keeps
   focus after a click. */
.btn {
    --bs-btn-focus-box-shadow: none;
}

.accordion-button {
    --bs-accordion-btn-focus-box-shadow: none;
}

/* Native <button> is cursor:default and Bootstrap overrides it to pointer. Restoring the default
   keeps the hand meaning "this navigates".
   Both qualifiers are load-bearing. `button` scopes this to real buttons, because anchors styled as
   buttons (external-data-builder/review-step.tsx) do navigate and must keep the hand — an author
   rule here would beat the UA stylesheet that would otherwise give it to them. `:not(:disabled)`
   matches the specificity of Reboot's `button:not(:disabled)`, which a bare `.btn` loses to. */
button.btn:not(:disabled) {
    cursor: default;
}

.nav-tabs .nav-link,
.xefr-tabs .nav-link {
    cursor: pointer;
}

/* A disabled .btn is `pointer-events: none` in Bootstrap, which makes the hover land on whatever
   sits behind it — inside a `.clickable` card that means the card's hand cursor shows through on a
   button that cannot be pressed. Restoring pointer events puts the arrow back. Scoped to `button`
   because `a.btn.disabled` has no disabled attribute and still needs the events blocked to be
   genuinely unclickable. */
button.btn:disabled {
    pointer-events: auto;
    cursor: default;
}

.color-primary {
    color: rgba(var(--accent-color, 14, 187, 179), 1) !important;
    accent-color: rgba(var(--accent-color, 14, 187, 179), 1) !important;
}

.background-color-primary {
    background-color: rgba(var(--accent-color, 14, 187, 179), 1);
}

.background-color-primary-transparent {
    background-color: rgba(var(--accent-color, 14, 187, 179), 0.05);
}

.background-color-secondary {
    background-color: rgb(var(--secondary-background-color, 250, 250, 253));
}

.background-color-secondary-transparent {
    background-color: rgba(var(--secondary-background-color, 250, 250, 253), 0.8);
}

.background-color-tertiary {
    background-color: rgb(var(--tertiary-background-color, 235, 235, 240));
}

.background-color-white {
    background-color: rgb(var(--surface-color, 255, 255, 255));
}

.accordion-button.collapsed {
    background-color: rgb(var(--tertiary-background-color, 235, 235, 240));
    color: rgb(var(--primary-text-color, 0, 0, 0));
}

.border-color-primary {
    border-color: rgba(var(--accent-color, 14, 187, 179), 1);
}

.border-color-secondary {
    border: 1px solid rgba(var(--primary-text-color, 0, 0, 0), 0.175);
}

.border-right {
    border-right: 1px solid rgb(var(--border-color, 228, 231, 235));
}

.control-label {
    font-size: 12px;
    font-weight: 600;
    color: rgba(var(--primary-text-color, 0, 0, 0), 0.6);
    position: relative;
}

.attribute-list .control-label {
    font-size: unset;
    align-self: start;
}

.form .control-label {
    font-size: unset;
    color: unset;
}

.ellipses {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.navbar-nav-item > a {
    color: rgba(var(--primary-text-color, 0, 0, 0), 0.7) !important;
}

.navbar-nav-item > a:hover {
    color: rgb(var(--accent-color, 14, 187, 179));
}

.navbar-override {
    z-index: 9999;
    justify-content: unset;
    background-color: rgb(var(--surface-color, 255, 255, 255));
    border-bottom: 1px solid rgba(var(--primary-text-color, 0, 0, 0), 0.175);
}

.nav-link,
.nav-link.active,
.nav-link:hover {
    color: rgb(var(--primary-text-color, 0, 0, 0));
}

.nav-item > a {
    cursor: pointer;
}

.brand-logo {
    margin: 0.3rem;
    height: 2rem;
}

.brand-header-text {
    font-size: 1.375rem;
    font-weight: 200;
    margin-left: 0.5rem;
    white-space: nowrap;
}

/* Non-production environment badge (e.g. DEV / TEST) in the nav bar. A pill
   reads as a deliberate badge rather than stray header text. All colours
   derive from --header-text-color so it contrasts whatever the nav bar
   background is, in any brand and in both light/dark themes; the border, fill
   and uppercase weight carry the cue without relying on hue. */
.env-pill {
    display: inline-flex;
    align-items: center;
    margin-left: 0.75rem;
    padding: 0.15rem 0.6rem;
    border: 1px solid rgba(var(--header-text-color), 0.45);
    border-radius: 999px;
    background-color: rgba(var(--header-text-color), 0.12);
    color: rgba(var(--header-text-color), 0.95);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
}

.settings-icon {
    font-size: 16px !important;
    padding: 0;
    text-align: right;
    color: unset !important;
    display: flex !important;
    align-items: center;
    gap: 4px;
}

.settings-icon.dropdown-toggle::after {
    margin-left: 2px;
    align-self: center;
}

.hamburger-icon {
    font-size: 16px !important;
    padding: 0;
    text-align: right;
    color: unset !important;
}

.settings-menu {
    font-size: 12px;
    position: fixed !important;
    top: 3rem !important;
    right: 0.5rem !important;
    left: unset !important;
    max-width: 440px;
    width: fit-content;
    padding: 0 !important;
    min-width: auto !important;
}

.settings-menu .dropdown-item {
    padding: 0.25rem 1rem;
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.settings-menu-header {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}

.settings-menu-columns {
    display: flex;
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}

.settings-menu-column {
    padding: 0.5rem 0;
    min-width: 200px;
}

.settings-menu-column + .settings-menu-column {
    border-left: 1px solid var(--bs-border-color, #dee2e6);
}

.settings-menu-group-label {
    padding: 0.5rem 1rem 0.125rem;
    font-weight: 600;
    font-size: 0.9em;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    opacity: 0.6;
}

.settings-menu-group-label:not(:first-child) {
    margin-top: 0.5rem;
}

.settings-menu-footer {
    padding: 0.5rem 0;
}

.settings-menu-version {
    padding: 0.25rem 1rem 0.5rem;
    font-size: 0.85em;
    opacity: 0.5;
    display: flex;
    gap: 1rem;
}

.language-menu {
    left: -6.875rem !important;
    top: 2rem !important;
    font-size: 12px;
    position: absolute !important;
}

.language-menu .dropdown-item {
    padding: 0.125rem 1rem;
    display: flex;
}

.dropdown-item.no-hover:hover {
    color: unset !important;
    background-color: unset !important;
}

@media (max-width: 576px) {
    .nav-tabs {
        white-space: nowrap;
        height: fit-content;
        overflow-x: scroll;
        overflow-y: hidden;
        flex-wrap: nowrap;
    }
}

a,
a.nav-link {
    font-size: 13px;
    color: rgba(var(--accent-color, 14, 187, 179), 1);
    text-decoration: none;
}

a:hover,
a.nav-link:hover {
    color: rgba(var(--accent-color, 14, 187, 179), 0.8);
}

a.disabled {
    pointer-events: none;
    opacity: 0.65%;
}

a.nav-link.active {
    background-color: rgba(var(--primary-text-color, 0, 0, 0), 0) !important;
    border-bottom: 1px solid rgb(var(--secondary-background-color, 250, 250, 253)) !important;
    font-weight: bold !important;
}

.dropdown-menu {
    z-index: 9999;
}

.navigation-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(var(--primary-text-color, 0, 0, 0), 0.4);
    z-index: 1050;
    display: flex;
    justify-content: flex-start;
}

.navigation-view {
    width: 80%;
    height: 100%;
    background-color: rgb(var(--surface-color, 255, 255, 255));
    padding: 15px;
    overflow-y: auto;
}

.sidebar .sidebar-button .sidebar-button-text {
    max-width: 200px;
    opacity: 0;
    transform: translateX(-10px);
    transition:
        opacity 140ms ease,
        transform 140ms ease,
        max-width 180ms ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sidebar.expanded .sidebar-button .sidebar-button-text {
    opacity: 1;
    transform: translateX(0);
    max-width: 100%;
    /* allow the text flex item to shrink below its content width so the ellipsis engages */
    flex: 1;
    min-width: 0;
}

/* The label container must be allowed to shrink within the row for the text to truncate
   rather than push the row wider than the sidebar. No overflow:hidden here — the text span
   clips itself, and hiding overflow would clip the count badge that pokes out top-left. */
.sidebar.expanded .sidebar-button .nav-button-label {
    flex: 1;
    min-width: 0;
}

.sidebar {
    margin-top: -1px;
    background-color: rgb(var(--sidebar-background-color, 255, 255, 255));
    z-index: 9996;
    border-right: 1px solid rgba(var(--primary-text-color, 0, 0, 0), 0.175);
    padding-top: 10px;
    width: 50px;
    min-width: 50px;
    overflow-y: auto;
    transition:
        width 180ms ease,
        min-width 180ms ease,
        box-shadow 180ms ease;
}

.sidebar.expanded {
    width: 250px;
    min-width: 250px;
}

.sidebar-button-text {
    display: none;
}

.nav-icon {
    font-size: 0.81em;
    opacity: 0.6;
    transition: opacity 140ms ease;
    flex-shrink: 0;
}

.sidebar-button.active .nav-icon {
    opacity: 1;
}

/* Offset the collapsed active right-border so the icon stays centred (collapsed only) */
.sidebar:not(.expanded) .sidebar-button.active .nav-icon {
    padding-left: 3px;
}

.active .nav-badge {
    margin-left: 2px;
}

.expanded .nav-badge {
    margin-left: 4px;
}

.expanded .active .nav-badge {
    margin-left: 2px;
}

.collapsed-child-indicator {
    position: absolute;
    right: -8px;
    font-size: 10px;
    color: rgba(var(--sidebar-text-color), 0.7);
}

.expanded .sidebar-button-text {
    display: inherit;
    font-size: 13px;
    margin-left: 10px;
    white-space: nowrap;
}

.expanded .current .sidebar-button-text {
    font-weight: 600;
}

.sidebar-button {
    cursor: pointer;
    font-size: 18px;
    padding: 8px 0;
    color: rgba(var(--sidebar-text-color, 0, 0, 0), 0.8);
    overflow: visible;
    user-select: none;
}

.sidebar-button:hover {
    background-color: rgba(var(--sidebar-hover-background-color, 14, 187, 179), 0.1);
}

/* Stronger hover tint (the `.sidebar` prefix beats brand.css's 0.1 rule) and a full-opacity
   icon on hover, not the faint resting state. */
.sidebar .sidebar-button:hover {
    background-color: rgba(var(--sidebar-hover-background-color, 14, 187, 179), 0.22);
}

.sidebar-button:hover .nav-icon {
    opacity: 1;
}

@keyframes fadeInSection {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.child-portals-wrapper {
    opacity: 0;
    transition: opacity 200ms ease-out;
}

.child-portals-wrapper.visible {
    opacity: 1;
}

/* Guide line sits under the parent portal's icon; children sit just right of it and the
   selected child's accent bar (::before, nudged 1px left) overwrites it. */
.expanded .child-portals-wrapper {
    margin-left: 30px;
    padding-left: 0;
    border-left: 1px solid rgba(var(--sidebar-text-color), 0.18);
}

.section-wrapper {
    animation: fadeInSection 120ms ease-out;
}

.sidebar-button.active {
    border-right: 3px solid rgba(var(--tertiary-color, 14, 187, 179), 1);
    background-color: rgba(var(--sidebar-active-background-color, 14, 187, 179), 0.1);
}

/* Active (the viewed portal or an ancestor of it): square left edge, rounded right, no bar */
.expanded .sidebar-button.active {
    border-radius: 0 8px 8px 0;
    border-left: none;
    border-right: none;
}

/* Children indent via the wrapper; identical box metrics selected or not, so nothing jumps.
   Trimmed left padding keeps children close to the guide line rather than far right.
   The `.sidebar` prefix raises specificity to (0,4,0) so this beats the equal-specificity
   `[data-nav-density=…] .expanded .sidebar-button { margin: … 15px }` rules below, which would
   otherwise re-apply margin-left:15px and push children right off the guide line. */
.sidebar.expanded .sidebar-button.secondary {
    margin-left: 0;
    padding-left: 6px;
}

/* Only the portal actually being viewed gets the left accent bar (any depth). Drawn as an
   overlay so selecting a portal never shifts its icon/text. */
.expanded .sidebar-button.current::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 3px;
    background-color: rgba(var(--tertiary-color, 14, 187, 179), 1);
}

/* For a selected child, nudge the bar left so it sits over the wrapper's guide line */
.expanded .sidebar-button.current.secondary::before {
    left: -1px;
}

.expanded .sidebar-button {
    border-radius: 8px;
    margin: 5px 15px;
    padding: 10px;
}

.section-divider {
    margin: 5px 15px;
}

.expanded .section-divider {
    margin: 10px 10px;
    padding: 5px 0;
}

/* Compact navbar density */
[data-nav-density="COMPACT"] .expanded .sidebar-button {
    margin: 2px 15px;
    padding: 6px 10px;
}
[data-nav-density="COMPACT"] .expanded .section-divider {
    margin: 6px 10px;
    padding: 3px 0;
}
[data-nav-density="COMPACT"] .sidebar:not(.expanded) .sidebar-button {
    padding: 5px 0;
}

/* Very compact navbar density */
[data-nav-density="VERY_COMPACT"] .expanded .sidebar-button {
    margin: 1px 15px;
    padding: 3px 10px;
}
[data-nav-density="VERY_COMPACT"] .expanded .section-divider {
    margin: 3px 10px;
    padding: 1px 0;
}
[data-nav-density="VERY_COMPACT"] .sidebar:not(.expanded) .sidebar-button {
    padding: 3px 0;
}

.sidebar-child-menu {
    position: fixed;
    left: 49px;
    width: fit-content;
    background-color: rgb(var(--surface-color, 255, 255, 255));
    border: 1px solid rgba(var(--accent-color, 14, 187, 179), 0.1);
    padding: 10px 0;
    z-index: 9999;
}

/* Anchored to the bottom in both states (position: sticky as the last child) so it never
   scrolls out of view and never jumps top<->bottom when toggling. `flex: none` + explicit size
   keep it a true circle (not stretched by the flex column). Faint until hovered.
   Expanded: bottom-right, on the resize bar. */
.nav-collapse-toggle {
    position: sticky;
    bottom: 14px;
    align-self: flex-end;
    flex: none;
    margin-right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(var(--sidebar-text-color), 0.25);
    background-color: rgb(var(--sidebar-background-color, 255, 255, 255));
    color: rgba(var(--sidebar-text-color), 0.45);
    font-size: 10px;
    cursor: pointer;
    opacity: 0.5;
    transition:
        opacity 140ms ease,
        color 140ms ease,
        border-color 140ms ease;
    z-index: 10;
}

.nav-collapse-toggle:hover {
    opacity: 1;
    color: rgba(var(--sidebar-text-color), 0.9);
    border-color: rgba(var(--sidebar-text-color), 0.55);
}

/* Collapsed: still bottom-anchored (from the base rule); just centre it in the narrow rail. */
.sidebar:not(.expanded) .nav-collapse-toggle {
    align-self: center;
    margin-right: 0;
}

.powered-by-text {
    color: rgba(var(--sidebar-text-color, 0, 0, 0), 0.5);
    font-size: 10px;
}

.powered-by-gpt {
    font-size: 11px;
    color: rgba(var(--primary-text-color, 0, 0, 0), 0.6);
}

.edit-portal .draggable-leaf {
    overflow: auto;
}

.portal-container {
    padding: 10px;
    background-color: rgb(var(--tertiary-background-color, 235, 235, 240));
}

.portlet-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    overflow: auto;
    position: relative;
}

.portlet {
    background-color: rgb(var(--secondary-background-color, 250, 250, 253));
    overflow: auto;
    position: relative;
}

/* Contextual help "?" icon: faint by default, solid and full-strength on hover.
   mix-blend-mode: difference makes the glyph contrast against whatever brand-coloured
   background sits beneath it, so it stays visible on light tiles and dark heroes alike.
   A grey source colour keeps it faint (rather than fading with opacity, which washed the
   thin glyph out to near-invisible); hover switches to white + heavy weight to solidify. */
.portlet-help-icon {
    color: rgb(150, 150, 150);
    mix-blend-mode: difference;
    transition:
        color 0.12s ease,
        font-weight 0.12s ease;
}

.portlet-help-icon:hover {
    color: #ffffff;
    font-weight: 900;
}

/* Prevents the portlet content wrapper from scrolling */
.portlet-content-no-scroll {
    overflow: hidden !important;
}

/* Prevents the portlet container itself from scrolling — children (e.g. grids) retain their own overflow */
.portlet-no-scroll {
    overflow: hidden !important;
}

.pop-out-portlet {
    position: fixed;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    background-color: rgb(var(--surface-color, 255, 255, 255));
    z-index: 9999;
    border: 1px solid rgba(var(--primary-text-color, 0, 0, 0), 0.175);
    border-radius: 8px;
}

.portal-container .portlet {
    border: 1px solid rgba(var(--primary-text-color, 0, 0, 0), 0.175);
    border-radius: 8px;
}

/* A FLUSH data-view (internal padding NONE → .data-instance-list.p-0) is framed by its own
   graduated grid frame, so the portlet must not draw a border/clip too — otherwise the two
   frames collide and the portlet's overflow:auto shaves the grid's rounded corners. Scoped
   to a DIRECT data-view portlet (no nested portlets) so tab/split containers keep their
   frames; padded data-views keep the portlet frame; the portlet's shadow is left intact. */
.portlet:has(.data-instance-list.p-0):not(:has(.portlet)) {
    border: none !important;
    overflow: visible !important;
}

.portal-with-background .portlet {
    background-color: rgba(var(--secondary-background-color, 250, 250, 253), 0.8) !important;
}

/* A portlet hosting a Portal Reference embed is a window onto another portal, not content of
   its own — it must not paint the white portlet card (background/border/shadow), so the host
   portal's background shows through and the embedded portlets float on it exactly as they do
   when their portal is viewed standalone. Scoped to the DIRECT host portlet: the :not() guard
   keeps outer tab/split containers framed, and portlets INSIDE the embed don't match at all
   (they contain no .portal-reference-embed of their own). */
.portlet:has(.portal-reference-embed):not(:has(.portlet .portal-reference-embed)) {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* An HTML View portlet set to hide its frame paints nothing of its own — no card, no border,
   no shadow — so the authored markup sits directly on the portal background. Scoped to the
   DIRECT host portlet, matching the portal-reference rule above: the :not() guard keeps an
   outer tab/split container framed when a frameless HTML view lives inside it. */
.portlet:has(.html-view-frameless):not(:has(.portlet .html-view-frameless)) {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Default chrome for an HTML-layout table row card. It sits on the layout's own root, inside the
   card stylesheet's scoping root, so a card can restyle its own frame. */
.xefr-row-card {
    padding: 1rem;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.narrow-portlet {
    max-width: unset !important;
}

/*Hide border for nested portlets*/
.portlet .portlet {
    border: none;
}

.vertical-separator {
    position: relative;
    height: 100%;
    width: 10px;
    min-width: 10px;
    overflow: hidden;
}

.horizontal-separator {
    position: relative;
    height: 10px;
    min-height: 10px;
    width: 100%;
    overflow: hidden;
}

/* Ensure separators respect their inline-specified size in flex containers */
.horizontal-separator,
.vertical-separator {
    flex: none;
}

/* Portal Spacing Variants */

/* Portal with NONE spacing - the content inside becomes the bordered boundary, not the portal itself */
.portal-spacing-none > * {
    border: 1px solid rgba(var(--primary-text-color, 0, 0, 0), 0.175);
    border-radius: 8px;
    overflow: hidden;
    background-color: rgb(var(--secondary-background-color, 250, 250, 253));
}

/* All portlets inside NONE spacing have no borders */
.portal-spacing-none .portlet {
    border: none !important;
    border-radius: 0 !important;
}

/* ...but when that NONE-spacing boundary wraps a data-view, the grid's own graduated frame
   IS the boundary — so drop the wrapper's border + clip (which doubled the frame and shaved
   the grid's rounded corners). */
.portal-spacing-none > *:has(.data-instance-card) {
    border: none;
    border-radius: 0;
    overflow: visible;
    background-color: transparent;
}

/* In a default-spacing tabbed portal the transparent tab strip reveals the
   secondary background behind it. Seamless (NONE) spacing instead leaves a
   different colour bleeding through the strip, so the band looks mismatched.
   Pin the strip to the secondary background so tabbed portals look the same
   regardless of spacing mode. Skipped when a background image is set, so the
   strip stays transparent and shows the image. */
.portal-spacing-none:not(.portal-with-background) .xefr-tabs {
    background-color: rgb(var(--secondary-background-color, 250, 250, 253));
}

/* Nested containers inside portal-spacing-none don't get their own border */
.portal-spacing-none .none-spacing-container {
    border: none;
    border-radius: 0;
}

/* Allow separators to shrink to inline-specified size when spacing is NONE,
   and allow overflow so slider can extend beyond the 0px separator */
.portal-spacing-none .horizontal-separator,
.none-spacing-container > .horizontal-separator {
    min-height: 0;
    overflow: visible;
}

.portal-spacing-none .vertical-separator,
.none-spacing-container > .vertical-separator {
    min-width: 0;
    overflow: visible;
}

/* Nested container with NONE spacing - border/shadow applied via inline styles, corners as fallback */
.none-spacing-container {
    background-color: rgb(var(--secondary-background-color, 250, 250, 253));
    border-radius: 8px !important;
    overflow: hidden !important;
}

/* Portlets inside none-spacing containers: remove their own corners, container handles clipping */
.none-spacing-container .portlet {
    border-radius: 0 !important;
    background-color: transparent;
}

/* Make sliders grabbable in NONE spacing - invisible until hover with delay */
.portal-spacing-none .horizontal-slider,
.none-spacing-container .horizontal-slider {
    height: 10px;
    margin-top: -5px;
    z-index: 10;
    background-color: transparent;
    transition: background-color 0.15s ease-in-out 0.4s;
}

.portal-spacing-none .vertical-slider,
.none-spacing-container .vertical-slider {
    width: 10px;
    margin-left: -5px;
    z-index: 10;
    background-color: transparent;
    transition: background-color 0.15s ease-in-out 0.4s;
}

.portal-spacing-none .horizontal-slider:hover,
.portal-spacing-none .vertical-slider:hover,
.none-spacing-container .horizontal-slider:hover,
.none-spacing-container .vertical-slider:hover {
    background-color: rgba(var(--primary-text-color, 0, 0, 0), 0.08);
}

.portal-spacing-tight .portlet {
    border-radius: 4px;
}

.portal-spacing-relaxed .portlet {
    border-radius: 12px;
}

/* Bootstrap only defines --bs-btn-hover/active/disabled-color on its own colour variants, so on
   btn-fbk those var() lookups are invalid at computed-value time and `color` silently falls back to
   the inherited value. Setting them keeps every state on one colour: disabled reads as disabled via
   Bootstrap's opacity alone, and enabling a button no longer animates a colour change. */
.btn-fbk {
    display: flex !important;
    color: rgb(var(--primary-text-color, 0, 0, 0));
    --bs-btn-hover-color: rgb(var(--primary-text-color, 0, 0, 0));
    /* Bootstrap reads a background and a border alongside each state colour: `.btn:focus-visible`
       takes the hover pair, `.btn:active` the active pair. Base .btn defines neither background, and
       an undefined custom property is invalid at computed-value time, so the background falls back
       to transparent and the border to currentColor. Stating all six keeps a tab-focused button
       painted and a pressed one from drawing a hard border. They mirror the :hover:enabled and
       :active:enabled rules below, which outrank them on pointer states and leave these to govern
       keyboard focus. */
    --bs-btn-hover-bg: rgba(var(--primary-text-color, 0, 0, 0), 0.08);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: rgb(var(--primary-text-color, 0, 0, 0));
    --bs-btn-active-bg: rgba(var(--primary-text-color, 0, 0, 0), 0.15);
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-color: rgb(var(--primary-text-color, 0, 0, 0));
    --bs-btn-disabled-opacity: 0.5;
    /* Base .btn never defines this, so Bootstrap's `.btn:disabled` background is invalid at
       computed-value time and falls back to the initial value. Stating it makes the transparent
       ghost background a decision rather than a side effect; btn-fbk-outline overrides it with
       the surface colour, which is the case that was actually going wrong. */
    --bs-btn-disabled-bg: transparent;
    --bs-btn-border-radius: 5px !important;
    font-size: 12px !important;
    font-weight: 500;
    min-height: 28px;
    white-space: nowrap;
    /* Bootstrap's own .btn is `1px solid transparent`, and keeping it means a plain and an outline
       button occupy the same box, so their labels sit at the same inset along a toolbar. min-height
       pins the height either way, so this is a width difference rather than a baseline one. It also
       keeps the border-colour states above meaningful, which at zero width they silently are not. */
    border: 1px solid transparent;
}

.btn-fbk:disabled {
    border: 1px solid transparent;
}

.btn-fbk-primary {
    background-color: rgba(var(--accent-color, 14, 187, 179), 1);
    border: 1px solid rgba(var(--accent-color, 14, 187, 179), 1);
    color: rgb(var(--accent-text-color, 255, 255, 255));
    --bs-btn-hover-color: rgb(var(--accent-text-color, 255, 255, 255));
    --bs-btn-hover-bg: rgba(var(--accent-color, 14, 187, 179), 0.85);
    --bs-btn-hover-border-color: rgba(var(--accent-color, 14, 187, 179), 0.85);
    --bs-btn-active-color: rgb(var(--accent-text-color, 255, 255, 255));
    --bs-btn-active-bg: rgba(var(--accent-color, 14, 187, 179), 0.7);
    --bs-btn-active-border-color: rgba(var(--accent-color, 14, 187, 179), 0.7);
    --bs-btn-disabled-color: rgb(var(--accent-text-color, 255, 255, 255));
}

.btn-fbk-primary:disabled {
    background-color: rgba(var(--accent-color, 14, 187, 179), 0.9);
    border: 1px solid rgba(var(--primary-text-color, 0, 0, 0), 0.175);
    color: rgb(var(--accent-text-color, 255, 255, 255));
}

.btn-fbk-primary:hover {
    color: rgb(var(--accent-text-color, 255, 255, 255));
}

/* Hover and press are lightness steps rather than accent washes, so they read without relying on
   hue separation. Press lands deeper than hover so a click registers as arriving.
   Only the background is stated: the border and text come from the --bs-btn-hover-* variables above,
   which carry the same values at a lower specificity, so a toggled-on button keeps its accent ring
   under the pointer instead of having it overridden. */
.btn-fbk:hover:enabled {
    background-color: rgba(var(--primary-text-color, 0, 0, 0), 0.08);
}

.btn-fbk:active:enabled {
    background-color: rgba(var(--primary-text-color, 0, 0, 0), 0.15);
}

.btn-fbk-primary:hover:enabled {
    background-color: rgba(var(--accent-color, 14, 187, 179), 0.85);
    border-color: rgba(var(--accent-color, 14, 187, 179), 0.85);
}

.btn-fbk-primary:active:enabled {
    background-color: rgba(var(--accent-color, 14, 187, 179), 0.7);
    border-color: rgba(var(--accent-color, 14, 187, 179), 0.7);
}

/* The border is deliberately faint: a hard 1px lift underneath is what separates the button from
   the surface, and a heavier border on top of it reads as clutter once several sit in a row.
   The lift carries no blur on purpose — blur spreads sideways as well as down, and in a dense row
   of buttons that lateral spill reads as murk between neighbours rather than as depth. */
.btn-fbk-outline {
    background-color: rgb(var(--surface-color, 255, 255, 255));
    border: 1px solid rgba(var(--primary-text-color, 0, 0, 0), 0.14);
    box-shadow: 0 1px 0 0 rgba(var(--primary-text-color, 0, 0, 0), 0.04);
    --bs-btn-hover-bg: rgba(var(--primary-text-color, 0, 0, 0), 0.09);
    --bs-btn-hover-border-color: rgba(var(--accent-color, 14, 187, 179), 0.9);
    --bs-btn-active-bg: rgba(var(--primary-text-color, 0, 0, 0), 0.15);
    --bs-btn-active-border-color: rgba(var(--primary-text-color, 0, 0, 0), 0.14);
    --bs-btn-disabled-bg: rgb(var(--surface-color, 255, 255, 255));
}

.btn-fbk-outline:hover:enabled {
    background-color: rgba(var(--primary-text-color, 0, 0, 0), 0.09);
}

.btn-fbk-outline:active:enabled {
    background-color: rgba(var(--primary-text-color, 0, 0, 0), 0.15);
}

/* A shadow does not read against a dark ground, so the lift becomes a fill there instead. */
[data-theme="dark"] .btn-fbk-outline {
    box-shadow: none;
    /* Layered over an opaque surface rather than applied as an alpha fill, so the button
       reads the same shade wherever it sits instead of picking up the ground behind it. */
    background-image: linear-gradient(
        rgba(var(--primary-text-color, 0, 0, 0), 0.07),
        rgba(var(--primary-text-color, 0, 0, 0), 0.07)
    );
}

.btn-fbk-outline:disabled {
    border: 1px solid rgba(var(--primary-text-color, 0, 0, 0), 0.14);
}

/* Toggled-on, which the ghost tier states with the accent ring its transparent border leaves room
   for — the same signal the outline tier uses, so the two read as one state across a toolbar. The
   fill is cleared because --bs-btn-active-bg is a press value, momentary by design, and holding it
   for as long as a menu stays open turns the button into a solid block. .btn-fbk-outline.active
   follows and wins for that tier, which adds its own surface behind the ring. */
.btn-fbk.active {
    background-color: transparent;
    border-color: rgba(var(--accent-color, 14, 187, 179), 1);
    color: rgba(var(--accent-color, 14, 187, 179), 1);
}

.btn-fbk-outline.active {
    background-color: rgb(var(--surface-color, 255, 255, 255));
    border-color: rgba(var(--accent-color, 14, 187, 179), 1);
    color: rgba(var(--accent-color, 14, 187, 179), 1);
}

.btn-fbk-circle {
    border-radius: 100% !important;
    width: 28px;
    height: 28px;
    padding: 0;
}

.btn-fbk-tiny-pill {
    font-size: 10px !important;
    padding: 1px 4px 2px;
    border-radius: 5px;
    line-height: 1;
}

.btn-icon {
    margin-top: 3px;
    margin-right: 5px;
}

/* An icon that is the whole button needs no gap after it. .btn-icon's margin separates a glyph from
   its label; with no label it only pushes the glyph off centre and pads the button out. The class is
   explicit rather than :only-child because the settings button carries an absolutely-positioned dot
   as a sibling whenever a filter is active. */
.btn-icon-only {
    --bs-btn-padding-x: 0.375rem;
}

.btn-icon-only .btn-icon {
    margin-right: 0;
}

/* Holds the preview on screen while the comments and their answers scroll underneath it. Sticky
   changes no box size, so the form still lays out at the width it will really be rendered at. */
.html-preview-sticky {
    position: sticky;
    top: 0;
    z-index: 2;
    background: rgb(var(--surface-color, 255, 255, 255));
}

/* A form template is HTML, where whitespace between elements collapses. Without this an inherited
   `white-space: pre-wrap` — which every read-only value wrapper sets, and a row card renders inside
   one — makes the template's own indentation and blank lines render as empty lines in the form. An
   author who wants preformatted text can still ask for it with `:scope`. */
.form-html-layout {
    white-space: normal;
}

/* The comments written against the preview, set in from the edges rather than flush against them. */
.xefr-comment-list {
    margin-left: 1rem;
    margin-right: 1rem;
}

/* Reserved whether or not the off-screen eye is showing, so every comment starts at the same place. */
.xefr-comment-eye {
    flex: 0 0 1rem;
    text-align: center;
}

/* .btn-fbk lays its content out with flex but does not centre it, which leaves a button holding
   nothing but an icon with the glyph off to one side. */
.xefr-comment-icon-btn {
    align-items: center;
    justify-content: center;
    width: 28px;
    padding: 0;
}

/* The pin on a drawn preview selection. No frame — it sits over the form being commented on, so
   the icon alone is the affordance and it takes the accent colour on hover and while open. */
.xefr-comment-pin {
    padding: 2px;
    border: none;
    background: none;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    color: rgba(var(--primary-text-color, 0, 0, 0), 0.45);
    text-shadow: 0 0 3px rgb(var(--surface-color, 255, 255, 255));
    transition: color 0.15s ease;
}

.xefr-comment-pin:hover,
.xefr-comment-pin.active {
    color: rgba(var(--accent-color, 14, 187, 179), 1);
}

.toolbar-separator {
    width: 0;
    height: 1.25rem;
    border-left: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
    margin: 0 0.25rem;
    flex-shrink: 0;
    align-self: center;
}

.data-instance-list-title {
    margin: 10px 12px 10px 10px;
}

.btn-xs {
    --bs-btn-padding-y: 0.125rem;
    --bs-btn-padding-x: 0.25rem;
    --bs-btn-font-size: 0.75rem;
}

.portal-select-button {
    width: 7rem;
    height: 8rem;
    overflow: hidden;
    background-color: rgb(var(--surface-color, 255, 255, 255));
}

.portal-select-button.with-background {
    background-color: rgba(var(--surface-color, 255, 255, 255), 0.8);
}

.portal-select-button:hover,
.portal-select-button:hover .portal-select-icon {
    border-color: rgba(var(--tertiary-color, 14, 187, 179), 1);
    background-color: rgb(var(--surface-color, 255, 255, 255));
}

.portal-select-button:hover .portal-select-icon {
    color: rgba(var(--tertiary-color, 14, 187, 179), 1);
}

.form-control-sm,
.input-group-sm > .btn,
.input-group-sm > .form-control,
.input-group-sm > .form-select,
.input-group-sm > .input-group-text {
    font-size: 12px;
}

.form-control-sm {
    min-height: unset;
}

.override-background .form-control {
    background-color: unset;
}

.override-text .form-control {
    color: unset;
}

.symmetrical-control {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
}

.no-select {
    user-select: none;
    -ms-user-select: none;
}

.overflow-x {
    overflow-x: auto;
}

.overflow-y {
    overflow-y: auto;
}

.clickable {
    cursor: pointer;
}

.xer-attribution {
    color: rgb(190, 190, 190);
    background-color: rgba(41, 42, 45, 0.5) !important;
}

.ol-attribution ul,
.ol-attribution a,
.ol-attribution li {
    font-size: 10px;
    text-shadow: none !important;
}

.xer-zoom {
    left: 20px;
    bottom: 0.5em;
}

.xer-zoom-in,
.xer-zoom-out,
.xer-map-control {
    width: 1.76rem !important;
    height: 1.76rem !important;
    filter: grayscale(0.7);
}

.desaturated-layer {
    filter: grayscale(0.8);
}

.loader {
    border: 2px solid rgba(var(--accent-color, 14, 187, 179), 0.2);
    border-top: 2px solid rgba(var(--accent-color, 14, 187, 179), 1);
    border-radius: 50%;
    margin-top: 3px;
    width: 13px;
    height: 13px;
    animation: spin 2s linear infinite;
}

.power-bi-container iframe {
    border: none;
}

.portlet-iframe {
    height: 100%;
    width: 100%;
    border: none;
}

.scrollable-portlet {
    overflow-y: auto;
    height: 100%;
}

.value-display-portlet-container {
    display: flex;
    flex-direction: row;
}

.value-display-portlet-content {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    /* justify-content controlled by inline style for vertical alignment */
}

.portal-drag-handle {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    color: rgba(var(--primary-text-color, 0, 0, 0), 0.2);
    cursor: grabbing;
}

.portal-drag-ghost-class {
    border: 2px dashed rgba(var(--primary-text-color, 0, 0, 0), 0.2);
    height: 138px;
    margin: 0;
}

.portal-button-image-style {
    width: 100%;
    text-align: center;
    font-size: 22px;
    color: rgba(var(--tertiary-color, 14, 187, 179), 1);
}

.add-section-btn:hover {
    cursor: pointer;
}

.add-section-btn hr:first-of-type {
    width: 100px;
    transition: none;
}

.add-section-right-line {
    width: 100px;
    transition: width 0.3s ease;
}

.add-section-btn {
    margin-top: -10px;
    height: 40px;
}

.add-section-btn:hover .add-section-right-line {
    width: 100vw;
    transition: width 0.6s ease;
}

.portal-drag-ghost-class > div {
    display: none;
}

.section-drag-ghost-class {
    border: 2px dashed rgba(var(--primary-text-color, 0, 0, 0), 0.2);
    height: 138px;
    margin: 0;
}

.section-drag-ghost-class > div {
    display: none;
}

.section-drag-ghost-class > span {
    display: none;
}

.section-drag-ghost-class * {
    visibility: hidden;
}

.editable-list-drag-handle,
.attribute-drag-handle {
    font-size: 24px;
    color: rgba(var(--primary-text-color, 0, 0, 0), 0.2);
    cursor: grab;
}

.editable-list-drag-handle:active,
.attribute-drag-handle:active {
    cursor: grabbing;
}

.attribute-row > .attribute-drag-handle {
    display: flex;
    align-items: center;
    padding: 0 8px;
    font-size: 20px;
}

.attribute-row {
    border-radius: 4px;
    transition: background-color 0.15s ease;
}

.attribute-row:hover {
    background-color: rgba(var(--primary-text-color, 0, 0, 0), 0.04);
}

.attribute-name-append {
    font-size: 14px;
    padding: 0px 5px;
}

.attribute-drag-handle-small {
    color: rgba(var(--primary-text-color, 0, 0, 0), 0.2);
    cursor: grabbing;
    font-size: 24px;
}

.attribute-drag-ghost-class {
    border: 2px dashed rgba(var(--primary-text-color, 0, 0, 0), 0.2);
    height: 52px;
    margin: 0;
}

.attribute-drag-ghost-class > div {
    display: none;
}

.action-drag-handle {
    font-size: 28px;
    color: rgba(var(--primary-text-color, 0, 0, 0), 0.2);
    cursor: grabbing;
    vertical-align: middle;
}

.tab-drag-handle {
    top: 10px;
    right: 10px;
    color: rgba(var(--primary-text-color, 0, 0, 0), 0.2);
    cursor: grabbing;
}

.tab-drag-ghost-class {
    border: 2px dashed rgba(var(--primary-text-color, 0, 0, 0), 0.2);
    width: 120px;
    height: 36px;
    margin: 0;
}

.tab-drag-ghost-class > div {
    display: none;
}

.editable-list-drag-ghost-class {
    border: 2px dashed rgba(var(--primary-text-color, 0, 0, 0), 0.2);
    height: fit-content;
    margin: 0;
}

.failed-validation-border {
    border-color: rgb(var(--error-color, 220, 53, 69));
}

.alert-danger {
    background-color: rgb(var(--surface-color, 255, 255, 255));
    color: rgb(var(--error-color, 220, 53, 69));
    border-color: rgb(var(--error-color, 220, 53, 69));
    font-size: 14px;
}

.text-center {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.vh-80 {
    height: 80vh;
}

.card-header {
    font-weight: 300;
    padding: 0.5rem 0.75rem;
}

.subtitle {
    font-size: 0.8rem;
    margin-bottom: 0;
}

.detail-label-style {
    font-size: 0.8rem;
    font-weight: 300;
}

.detail-text-style {
    font-weight: 300;
    margin-bottom: 0.3rem;
}

.title {
    font-weight: 300;
    margin-bottom: 0;
}

hr.divider {
    margin: 0.625rem 0;
}

.embed-card {
    width: 32rem;
    height: 32rem;
}

.close-button {
    font-size: 0.8rem;
    position: absolute;
    top: 0;
    right: 0.9rem;
    cursor: pointer;
}

.dot {
    height: 8px;
    width: 8px;
    display: inline-block;
    border-radius: 50%;
}

.status-pill {
    position: absolute;
    bottom: 3px;
    right: 3px;
    display: flex;
    pointer-events: none;
    z-index: 2;
}

.grey-dot {
    background-color: #808080;
    height: 8px;
    width: 8px;
    display: inline-block;
    border-radius: 50%;
}

.orange-dot {
    background-color: orange;
    height: 8px;
    width: 8px;
    display: inline-block;
    border-radius: 50%;
}

.pill {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 12px;
    padding: 2px 8px;
    overflow: hidden;
    white-space: nowrap;
    color: white;
    user-select: none;
}

.pill.clickable:hover {
    opacity: 0.9;
}

.blue-pill {
    background-color: #007bff;
}

.xefr-slate-pill {
    background-color: #212628;
}

.xefr-slate-80-pill {
    background-color: #4b4f52;
}

.xefr-slate-60-pill {
    background-color: #75797a;
}

.xefr-aqua-pill {
    background-color: #83cdca;
    color: black;
}

.xefr-aqua-80-pill {
    background-color: #9ad4d2;
    color: black;
}

.xefr-aqua-60-pill {
    background-color: #c7aaa9;
    color: black;
}

.xefr-teal-pill {
    background-color: #33ada8;
}

.xefr-teal-80-pill {
    background-color: #6fbcb8;
}

.xefr-teal-60-pill {
    background-color: #98cbc7;
}

.slate-blue-pill {
    background-color: #6a5acd;
}

.olive-green-pill {
    background-color: #808000;
}

.steel-blue-pill {
    background-color: #4682b4;
}

.sienna-pill {
    background-color: #a0522d;
}

.cadet-blue-pill {
    background-color: #5f9ea0;
}

.search-button {
    height: 34px;
    padding: 7px;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.chart {
    padding: 15px;
}

.chart.chart-normal {
    padding: 15px;
}

.chart.chart-compact {
    padding: 8px;
}

.chart.chart-very-compact {
    padding: 2px;
}

.chart.chart-none {
    padding: 0;
}

.master-navigation-sidebar {
    position: relative;
    background-color: rgb(var(--surface-color, 255, 255, 255));
    z-index: 9998;
    padding: 15px;
    border-right: 1px solid rgb(var(--border-color, 228, 231, 235));
    overflow: auto;
    font-size: 14px;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.grid-cell-modified {
    animation-duration: 2s;
    animation-name: flash-and-fade;
}

@keyframes flash-and-fade {
    from {
        background-color: rgba(var(--accent-color, 14, 187, 179), 1);
    }

    to {
        background-color: rgba(var(--surface-color, 255, 255, 255), 0);
    }
}

.flex-basis-0 {
    flex-basis: 0 !important;
}

.draft-js-image {
    max-width: 100%;
}

.DraftEditor-root {
    font-size: 13px;
    font-weight: 300;
}

@keyframes pulse {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0.25;
        transform: scale(0.75);
    }
}

.schema-accordion-button {
    background-color: rgb(var(--secondary-background-color, 246, 246, 246));
    color: rgb(var(--primary-text-color, 0, 0, 0));
}

.schema-accordion-button:not(.collapsed) {
    background-color: rgb(var(--tertiary-background-color, 234, 241, 250));
    color: rgb(var(--primary-text-color, 0, 0, 0));
}

.accordion {
    margin-bottom: 0.8rem;
}

.accordion.test-data-warning {
    border-radius: 6px;
    box-shadow:
        0 0 0 2px rgba(220, 53, 69, 0.6),
        0 0 12px rgba(220, 53, 69, 0.4);
}

.pipeline-log {
    padding-left: 0.5rem;
    border-radius: 5px;
    padding-bottom: 0;
    margin: 0;
    padding-top: 0.5rem;
    max-height: 400px;
    overflow-y: scroll;
    border: 1px solid rgba(var(--primary-text-color, 0, 0, 0), 0.175);
}

.pipeline-run {
    margin-bottom: 0.8rem;
    border: none;
}

.pipeline-timeline-message {
    color: rgba(var(--primary-text-color, 0, 0, 0), 0.4);
    font-size: 12px;
}

.accordion-button.pipeline-run-header::after {
    order: -1;
    margin-right: 0.5rem;
    margin-left: 0;
}

.accordion-button.pipeline-run-header.collapsed,
.accordion-button.pipeline-run-header {
    background-color: transparent;
    color: rgb(var(--primary-text-color, 0, 0, 0));
    padding: 0;
}
.accordion-button.pipeline-run-header:not(.collapsed) {
    box-shadow: none;
}

.pipeline-timeline-line {
    position: absolute;
    left: 51px;
    top: 7px;
    bottom: 11px;
    width: 1px;
    background-color: rgba(var(--primary-text-color, 0, 0, 0), 0.175);
}

.accordion-body.pipeline-timeline {
    padding: 0.2rem;
    padding-top: 0.4rem;
    padding-left: 45px;
    position: relative;
    color: rgba(var(--primary-text-color, 0, 0, 0), 0.7);
    font-size: 14px;
}

.vertical-slider {
    position: absolute;
    width: 10px;
    height: 100%;
    cursor: col-resize;
}

.horizontal-slider {
    position: absolute;
    width: 100%;
    height: 10px;
    cursor: row-resize;
}

.react-datepicker-popper {
    z-index: 40100 !important;
}

#root-portal {
    position: relative;
    z-index: 50000;
}

.react-datepicker {
    font-family: inherit !important;
    font-size: 12px !important;
    border-radius: 0.3rem !important;
    background-color: rgb(var(--surface-color, 255, 255, 255)) !important;
    border-color: rgb(var(--border-color, 174, 184, 193)) !important;
    color: rgb(var(--primary-text-color, 0, 0, 0)) !important;
}

.react-datepicker__month-container {
    border-radius: 0 0 0.3rem 0.3rem !important;
}

.react-datepicker__today-button {
    border-radius: 0 0 0.3rem 0.3rem !important;
}

.react-datepicker__triangle {
    margin-left: -4px !important;
    margin-top: 3px !important;
    opacity: 1 !important;
}

.react-datepicker__current-month {
    display: none !important;
}

.react-datepicker__header {
    padding-top: 5px !important;
    padding-bottom: 4px !important;
    background-color: rgb(var(--tertiary-background-color, 240, 240, 240)) !important;
    border-bottom-color: rgb(var(--border-color, 174, 184, 193)) !important;
}

.react-datepicker__navigation {
    top: 4px !important;
}

.react-datepicker__navigation--previous {
    left: 15px !important;
}

.react-datepicker__navigation--next {
    right: 15px !important;
}

.react-datepicker .react-datepicker__month-dropdown-container--select,
.react-datepicker .react-datepicker__year-dropdown-container--select,
.react-datepicker .react-datepicker__month-dropdown-container,
.react-datepicker .react-datepicker__year-dropdown-container {
    display: inline-block !important;
    margin: 0 !important;
}

.react-datepicker .react-datepicker__month-dropdown-container--select,
.react-datepicker .react-datepicker__month-dropdown-container {
    margin-right: 2px !important;
}

.react-datepicker__month-select,
.react-datepicker__year-select {
    font-size: 12px !important;
    padding: 2px 4px !important;
    border: 1px solid rgba(var(--primary-text-color, 0, 0, 0), 0.175) !important;
    border-radius: 3px !important;
    background-color: rgb(var(--input-background-color, 255, 255, 255)) !important;
    color: rgb(var(--primary-text-color, 64, 64, 64)) !important;
    cursor: pointer !important;
    transition: border-color 0.15s ease-in-out !important;
    margin: 0 !important;
    height: 22px !important;
    line-height: 1 !important;
    vertical-align: middle !important;
    width: auto !important;
    min-width: 65px !important;
}

.react-datepicker__month-select:hover,
.react-datepicker__year-select:hover {
    border-color: rgb(var(--border-color, 206, 212, 218)) !important;
}

.react-datepicker__month-select:focus,
.react-datepicker__year-select:focus {
    outline: none !important;
    border-color: rgb(var(--border-color, 206, 212, 218)) !important;
    box-shadow: none !important;
}

/* Datepicker dark mode styles */
.react-datepicker__day-name,
.react-datepicker__day,
.react-datepicker__time-name {
    color: rgb(var(--primary-text-color, 0, 0, 0)) !important;
}

.react-datepicker__day:hover {
    background-color: rgba(var(--accent-color, 14, 187, 179), 0.2) !important;
}

.react-datepicker__day--selected,
.react-datepicker__day--keyboard-selected {
    background-color: rgba(var(--accent-color, 14, 187, 179), 1) !important;
    color: rgb(var(--accent-text-color, 255, 255, 255)) !important;
}

.react-datepicker__day--today {
    font-weight: bold;
}

.react-datepicker__day--outside-month {
    color: rgba(var(--primary-text-color, 0, 0, 0), 0.4) !important;
}

.react-datepicker__today-button {
    background-color: rgb(var(--tertiary-background-color, 240, 240, 240)) !important;
    border-top-color: rgb(var(--border-color, 174, 184, 193)) !important;
    color: rgb(var(--primary-text-color, 0, 0, 0)) !important;
}

.react-datepicker__navigation-icon::before {
    border-color: rgb(var(--primary-text-color, 0, 0, 0)) !important;
}

.react-datepicker__navigation:hover *::before {
    border-color: rgba(var(--accent-color, 14, 187, 179), 1) !important;
}

.react-datepicker__close-icon {
    display: flex !important;
    align-items: center !important;
}

/* Calendar prefix icon on date / datetime pickers — smaller, faint, vertically centred */
.react-datepicker__calendar-icon {
    font-size: 0.75rem !important;
    color: rgba(var(--primary-text-color, 0, 0, 0), 0.45) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    padding: 0 0.5rem !important;
}

/* showIcon bumps the input's vertical padding (6px/5px); restore form-control-sm's
   0.25rem so the field keeps its original height, while leaving the left room for the icon */
.react-datepicker__view-calendar-icon input {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
}

/* FA Pro xmark icon — \f00d */
.react-datepicker__close-icon::after {
    font-family: "Font Awesome 7 Pro" !important;
    font-weight: 900 !important;
    content: "\f00d" !important;
    background-color: transparent !important;
    color: rgba(var(--primary-text-color, 0, 0, 0), 0.4) !important;
    border-radius: 0 !important;
    font-size: 14px !important;
    height: auto !important;
    width: auto !important;
    padding: 0 !important;
    display: inline-block !important;
    line-height: 1 !important;
}

.lookup-configuration {
    padding-left: 0.8594rem;
}

.centered-horizontally {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.centered-vertically {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

.justify-space-between {
    justify-content: space-between;
}

.height-fit-content {
    height: fit-content;
}

.divided > *:not(:last-child) {
    border-bottom: 1px solid rgba(var(--primary-text-color, 0, 0, 0), 0.175);
}

.code-editor {
    font-size: 12px;
    padding: 0;
}

.code-editor > * {
    height: 100%;
}

.fa-solid.fa-invert-hover:hover,
.fas.fa-invert-hover:hover {
    font-weight: 300;
}

.fa-light.fa-invert-hover:hover,
.fal.fa-invert-hover:hover {
    font-weight: 900;
}

.chart-doughnut-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    font-size: 14px;
    width: 25%;
}

.chart-doughnut-text p {
    margin: 4px;
    padding: 0;
    line-height: 1.2;
}

.attribute-list {
    display: grid;
    grid-template-columns: auto 10fr;
    grid-gap: 0.75rem 1rem;
}

.attribute-list :nth-child(2n) {
    white-space: pre-wrap;
}

/* Targets the two-column layout emitted by getClassNames() in controls.tsx
   when useTwoLines=false. Keep in sync if those class names change. */
.inline-labels .form-group.row {
    flex-wrap: nowrap;
    align-items: center;
    margin-bottom: 0;
}

.inline-labels .col-sm-4.col-form-label {
    flex: 0 0 auto;
    width: auto;
    padding-top: 0;
    padding-bottom: 0;
    padding-right: 0.5rem;
}

.inline-labels .col-sm-8 {
    flex: 1 1 0;
    width: auto;
}

.pending {
    background-color: #fff3cd;
}

.file-upload-text {
    font-size: 12px;
    color: grey;
}

.flex-grow-children > * {
    flex-grow: 1;
}

.dotted-border {
    border: 1px dashed rgba(var(--primary-text-color, 0, 0, 0), 0.4);
}

.form-element-editor-buttton {
    margin-top: 0.3rem;
}

.form-buttons {
    margin-left: auto;
}

/* Parent container overlay - used when "Show Parent Container" is clicked */
.parent-container-overlay {
    background-color: var(--bs-body-bg, #fff);
    opacity: 0.95;
}

.parent-container-overlay-text {
    font-size: 32px;
    font-weight: 300;
    color: var(--bs-secondary-color, rgba(0, 0, 0, 0.5));
}

.formlet-definition-editor .editable-list-buttons {
    display: none !important; /* Hide separate drag handle - compact row is the handle */
}

/* Allow flex children to shrink properly in formlet editor */
.formlet-definition-editor .d-flex,
.formlet-definition-editor .flex-grow-1 {
    min-width: 0;
}

/* Compact form element styles */
.form-element-compact {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    height: 32px; /* Fixed height for consistent appearance */
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 4px;
    background: var(--bs-tertiary-bg, #f8f9fa);
    cursor: pointer;
    transition:
        background-color 0.15s,
        border-color 0.15s;
    margin-bottom: 6px;
    min-width: 0; /* Allow shrinking in flex parent */
    container-type: inline-size; /* Enable container queries */
}

.form-element-compact:hover {
    background: var(--bs-secondary-bg, #e9ecef);
    border-color: var(--bs-border-color-translucent, #c6c7c8);
}

.form-element-compact-summary {
    flex: 1;
    min-width: 40px; /* Ensure text is always partially visible */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px !important; /* Override drag-handle's 24px */
    color: var(--bs-body-color, #212529);
}

/* Hover tooltip for compact form elements - escapes container boundaries */
/* Visibility controlled by React (conditional render + inline display:block) */
.form-element-compact-tooltip {
    position: fixed;
    z-index: 9999;
    max-width: 400px;
    padding: 8px 12px;
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    font-size: 13px;
    color: var(--bs-body-color, #212529);
    white-space: normal;
    word-break: break-word;
    pointer-events: none;
}

.form-element-type-pill {
    flex-shrink: 0;
    font-size: 11px !important; /* Override drag-handle's 24px */
}

/* Hide pill and delete icon when container is too narrow */
@container (max-width: 120px) {
    .form-element-type-pill {
        display: none;
    }
}

@container (max-width: 80px) {
    .form-element-delete-icon {
        display: none;
    }

    /* On hover in narrow containers: show delete button and shrink text to fit */
    .form-element-compact:hover .form-element-delete-icon {
        display: inline-block;
    }

    .form-element-compact:hover .form-element-compact-summary {
        min-width: 0; /* Allow text to shrink to nothing to make room for delete button */
    }
}

.form-element-delete-icon {
    flex-shrink: 0;
    font-size: 14px !important; /* Override drag-handle's 24px */
    color: var(--bs-secondary-color, #6c757d);
    cursor: pointer;
    padding: 2px 4px;
    margin-right: 2px;
    border-radius: 4px;
    transition:
        color 0.15s,
        background-color 0.15s;
}

.form-element-delete-icon:hover {
    color: var(--bs-danger, #dc3545);
    background-color: rgba(220, 53, 69, 0.1);
}

/* Make Add button in formlet editor fit content (not the delete buttons in rows) */
.formlet-definition-editor > .btn,
.formlet-definition-editor > div > .btn {
    width: fit-content;
}

.data-instance-list {
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
}

/* Wrap the toolbar + grid as one unit (an empty toolbar is omitted so it's "just the grid").
   No own border — the PORTLET is the framing unit and respects the portal border config.
   Radius + overflow only clip the grid's corners to the portlet's rounded frame. */
.data-instance-card {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    /* layout only — the toolbar (top) and grid (bottom) own their rounded corners now,
       so no outer clip (which would shave ~1px off those curved borders). */
}

/* Faint border looping up and over the toolbar — a subtle "these belong together" cue,
   quieter than the grid's own border. Its full bottom border is the grid's top edge. */
.data-instance-toolbar {
    padding: 2px 6px;
    border-top: 1px solid color-mix(in srgb, var(--portlet-border-color, rgba(0, 0, 0, 0.15)) 45%, transparent);
    border-left: 1px solid color-mix(in srgb, var(--portlet-border-color, rgba(0, 0, 0, 0.15)) 45%, transparent);
    border-right: 1px solid color-mix(in srgb, var(--portlet-border-color, rgba(0, 0, 0, 0.15)) 45%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--portlet-border-color, rgba(0, 0, 0, 0.15)) 45%, transparent);
    border-radius: 8px 8px 0 0; /* round the top corners so the faint border curves */
}

/* Trim the 8px vertical padding on the button wrappers (CRUD py-2, custom-action/aux p-2)
   so a buttoned toolbar isn't noticeably deeper than a button-less one. Uniform across all
   wrappers, and only vertical padding — buttons don't reflow, so they stay aligned. */
.data-instance-toolbar .p-2,
.data-instance-toolbar .py-2 {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}

/* One gap inside a group and a wider one between groups, so the row reads as groups rather than as
   an even run. 5px a side puts adjacent items 10px apart, matching the gap the quick filter groups
   set on themselves; .toolbar-separator carries the boundary. */
.data-instance-toolbar .p-2 {
    padding-left: 5px !important;
    padding-right: 5px !important;
}

/* Flush case: the grid unit IS the portlet's whole boundary, so the toolbar's OUTER edges
   (top + sides) are the portlet's actual border — full strength, not the faint nested cue.
   The divider (border-bottom) stays faint as the internal "belong together" separator. */
.data-instance-list.p-0 .data-instance-toolbar {
    border-top-color: var(--portlet-border-color, rgba(0, 0, 0, 0.15));
    border-left-color: var(--portlet-border-color, rgba(0, 0, 0, 0.15));
    border-right-color: var(--portlet-border-color, rgba(0, 0, 0, 0.15));
}

/* the grid lives inside the card now — drop its own border/radius to avoid a double frame */
/* Graduated unit frame: a regular border around the grid itself, with its OWN radius so
   the border curves at the corners (rather than being clipped square by the outer card). */
.data-instance-card .squirrel-grid {
    border: 1px solid var(--portlet-border-color, rgba(0, 0, 0, 0.15));
    border-radius: 8px;
}
/* When a toolbar sits above, the grid's top edge is the divider (the toolbar's full bottom
   border), so it isn't doubled — and only the bottom corners round. */
.data-instance-card:has(.data-instance-toolbar) .squirrel-grid {
    border-top: none;
    border-radius: 0 0 8px 8px;
}

.toast-container {
    position: fixed;
    left: 0;
    top: 0;
    padding-top: 75px;
    padding-bottom: 75px;
    height: 100%;
    width: 100%;
    overflow: auto;
    z-index: 999999;
}

.toast {
    width: 40rem;
    max-width: 80%;
}

.table {
    font-size: 12px;
}

.react-select-option:hover {
    background: rgba(var(--accent-color, 14, 187, 179), 0.1);
}
.react-select-option.custom-select__option--is-focused {
    background: none;
}
.react-select-option.custom-select__option--is-selected {
    background: rgba(var(--accent-color, 14, 187, 179), 1);
}

.viewmap-sidebar {
    position: relative;
    font-size: 12px;
    border-right: 1px solid rgba(var(--primary-text-color, 0, 0, 0), 0.175);
    padding: 1rem;
    z-index: 999;
}

.viewmap-sidebar:not(.expanded) {
    width: 0;
    padding: 0;
    border-right: unset;
}

.viewmap-control {
    position: static !important;
    z-index: 9;
}

.semantic-highlight {
    background-color: yellow;
    padding: 0 2px;
    border-radius: 2px;
    display: inline;
}

.carousel-control:hover {
    background-color: rgba(var(--primary-text-color, 0, 0, 0), 0.2);
}

.tag-flex {
    display: flex;
    justify-content: flex-end;
}

.tag {
    display: inline-block;
    width: fit-content;
    margin-bottom: 3px;
    font-size: 5px;
    font-weight: 500;
    padding: 1px 3px;
    border-radius: 3px;
    text-transform: uppercase;
}

.tag-light {
    color: #fff;
}

.map-filter-search {
    font-size: 10px;
    margin-left: 10px;
}

.editor-input {
    min-width: 800px;
}

.editor-input.read-only {
    border: none;
    padding: 10px;
}

@media (max-width: 767px) {
    .editor-input.read-only {
        padding: 0;
    }
}

.editor-input.editable {
    min-height: 200px;
    border: 1px solid rgb(var(--border-color, 204, 204, 204));
    padding: 10px;
    font-size: 0.875rem;
}

.editor-input > h1,
.editor-input > h2,
.editor-input > h3,
.editor-input > h4,
.editor-input > h5,
.editor-input > h6,
.editor-input > p {
    margin: 0;
}

.lex-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px;
    font-size: 13px;
}

.lex-toolbar button,
.lex-floating-toolbar button,
.lex-toolbar-menu button {
    font-weight: 300;
}

.lex-toolbar-menu,
.lex-floating-toolbar {
    font-size: 13px;
}

.lex-toolbar-divider {
    width: 1px;
    height: 24px;
    background-color: rgb(var(--border-color, 204, 204, 204));
    align-self: center;
}

.lex-floating-toolbar {
    display: flex;
    background: rgb(var(--surface-color, 255, 255, 255));
    border-radius: 4px;
    padding: 4px;
    box-shadow: 0 2px 6px rgba(var(--primary-text-color, 0, 0, 0), 0.15);
    z-index: 10;
}

.lex-modal {
    position: absolute;
    background: rgb(var(--surface-color, 255, 255, 255));
    border: 1px solid rgb(var(--border-color, 204, 204, 204));
    border-radius: 4px;
    padding: 8px;
    box-shadow: 0 2px 8px rgba(var(--primary-text-color, 0, 0, 0), 0.2);
    z-index: 40002;
    display: flex;
    align-items: center;
    gap: 8px;
}

.editor-input a {
    font-size: inherit;
}

.editor-input table {
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    table-layout: fixed;
    margin: 2px;
}

.editor-input td {
    border: 1px solid rgb(var(--border-color, 204, 204, 204));
    padding: 6px 10px;
    background: rgb(var(--surface-color, 255, 255, 255));
    text-align: left;
    font-size: 14px;
    line-height: 1.4;
}

.editor-input tr:nth-of-type(1) td:first-child {
    border-top-left-radius: 6px;
}
.editor-input tr:nth-of-type(1) td:last-child {
    border-top-right-radius: 6px;
}
.editor-input tr:last-child td:first-child {
    border-bottom-left-radius: 6px;
}
.editor-input tr:last-child td:last-child {
    border-bottom-right-radius: 6px;
}

.editor-input td + td {
    border-left: none;
}
.editor-input tr + tr td {
    border-top: none;
}

.editor-input td:hover {
    background-color: rgba(var(--tertiary-background-color, 249, 249, 249), 1);
}

.editor-input ul > li:has(> ul):not(:has(> span, > p, > div)) {
    list-style-type: none;
    padding-left: 0;
}

.editor-input ol > li:has(> ol):not(:has(> span, > p, > div)) {
    list-style-type: none;
    padding-left: 0;
}

.artefact-decorator {
    display: inline-block;
    border: 1px solid rgb(var(--border-color, 204, 204, 204));
    border-radius: 8px;
    overflow: hidden;
    background-color: rgb(var(--surface-color, 255, 255, 255));
}

.artefact-caption {
    padding: 0.5rem;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}

.artefact-decorator img,
.artefact-decorator video,
.artefact-decorator iframe,
.artefact-decorator .card {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0;
}

.table-hover-button {
    position: absolute;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    z-index: 40000;
}

.table-hover-button span {
    font-size: x-small;
    display: block;
}

.table-cell-resizer {
    z-index: 40000;
    position: absolute;
    background: transparent;
}

.table-cell-resizer .right {
    top: 0;
    right: -2px;
    width: 5px;
    height: 100%;
    cursor: col-resize;
}

.table-cell-resizer .bottom {
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 5px;
    cursor: row-resize;
}

.table-cell-action-button-container {
    position: absolute;
    z-index: 40000;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.table-cell-action-button,
.table-cell-action-button-container * {
    pointer-events: auto;
}

.table-cell-action-button {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 0;
    position: absolute;
    top: 10px;
    right: 10px;
    border-radius: 15px;
    color: rgb(var(--primary-text-color, 34, 34, 34));
    cursor: pointer;
}

.table-cell-action-button:hover {
    background: rgba(var(--tertiary-background-color, 224, 224, 224), 1);
}

.table-cell-action-button span {
    font-size: x-small;
    display: block;
}

.table-dropdown-menu {
    display: flex;
    flex-direction: column;
    background: rgb(var(--surface-color, 255, 255, 255));
    border: 1px solid rgb(var(--border-color, 221, 221, 221));
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(var(--primary-text-color, 0, 0, 0), 0.15);
    padding: 0;
    z-index: 40005;
    min-width: 140px;
    overflow: hidden;
}

.table-dropdown-item {
    all: unset;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    font-size: 14px;
    width: 100%;
    cursor: pointer;
    background-color: rgb(var(--surface-color, 255, 255, 255));
    color: rgb(var(--primary-text-color, 51, 51, 51));
    transition: background 0.2s ease;
}

.table-dropdown-item:hover {
    background-color: rgb(var(--tertiary-background-color, 245, 245, 245));
}

.table-dropdown-item .fa-trash {
    color: #c0392b;
}

@media (max-width: 768px) {
    .mobile-stack {
        flex-direction: column;
    }
}

.thumbnail-card {
    width: 20%;
    overflow: hidden;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .thumbnail-card {
        width: 100%;
    }
}

.card {
    font-size: 13px;
    margin-bottom: 15px;
}

.accordion-body .card:last-child {
    margin-bottom: 0;
}

.thumbnail-card .card {
    flex-grow: 1;
}

.thumbnail-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.web-link-preview {
    overflow: auto;
    height: 100%;
}

.fa-chevron-down.section-chevron {
    transition: transform 0.2s ease;
}

.fa-chevron-down.section-chevron[data-bs-toggle="collapse"][aria-expanded="false"] {
    transform: rotate(-180deg);
}

.fa-chevron-down.section-chevron[data-bs-toggle="collapse"][aria-expanded="true"] {
    transform: rotate(0deg);
}

/* Section visibility toggle styles */
.section-visibility-toggle {
    transition: color 0.2s ease-in-out;
    font-size: 12px !important; /* Make eye icon smaller */
}

.section-visibility-toggle:hover {
    opacity: 0.8;
    transform: scale(1.1);
}

.section-visibility-toggle.visible {
    color: rgba(var(--primary-text-color, 73, 80, 87), 0.8) !important; /* Visible/selected */
}

.section-visibility-toggle.hidden {
    color: rgba(var(--primary-text-color, 173, 181, 189), 0.4) !important; /* Hidden/not selected */
}

.ai-suggestion-banner {
    padding: 6px 10px;
    font-size: 10px;
    min-width: 0;
    width: 100%;
}

.ai-suggestion-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ai-suggest-wrapper:has(.ai-suggestion-banner) .mb-3 {
    margin-bottom: 0.25rem !important;
}

.suggestion-count {
    font-size: smaller;
    font-weight: bold;
    color: rgba(var(--primary-text-color, 0, 0, 0), 0.6);
}

.edit-resizable-preview {
    position: fixed;
    background-color: rgba(var(--primary-text-color, 0, 0, 0), 0.2);
    pointer-events: none;
    border: 1px dashed gray;
}

.edit-resizable-handle {
    position: absolute;
    width: 12px;
    height: 12px;
    background-color: rgba(var(--primary-text-color, 0, 0, 0), 0.5);
    cursor: nwse-resize;
}

.edit-resizable-handle.top-left {
    left: 0;
    top: 0;
}

.edit-resizable-handle.bottom-right {
    right: 0;
    bottom: 0;
}

.css-gyoyly-multiValue {
    margin: 2px 2px 2px !important;
}

.obfuscate {
    filter: blur(3px);
    user-select: none;
}

.card-body-artefact {
    flex: 1 1 auto;
    padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x);
    color: var(--bs-card-color);
}

.card-body-artefact:empty {
    display: none;
    padding: 0;
}

/* Hierarchy View Portlet - Allow dynamically calculated font sizes */
.react-flow__node-hierarchyNode {
    font-size: inherit !important;
}

/* Scroll to Top Button */
.scroll-to-top-btn {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    z-index: 10;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(var(--accent-color, 14, 187, 179), 0.6);
    color: rgb(var(--accent-text-color, 255, 255, 255));
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(var(--primary-text-color, 0, 0, 0), 0.15);
    opacity: 0;
    transition:
        opacity 0.2s ease-in-out,
        background-color 0.2s ease-in-out;
    pointer-events: none;
}

.scroll-to-top-btn.visible {
    opacity: 1;
    pointer-events: auto;
}

.scroll-to-top-btn:hover {
    background-color: rgba(var(--accent-color, 14, 187, 179), 0.85);
}

.scroll-to-top-btn:focus {
    outline: none;
}

/* --- Async / Dynamic Lookup --- */

.async-lookup-preview-text {
    font-size: 0.8em;
    color: rgba(var(--primary-text-color, 64, 64, 64), 0.55);
    line-height: 1.3;
}

.async-lookup-browse-button {
    cursor: pointer;
    padding: 0 6px;
    display: flex;
    align-items: center;
    color: rgba(var(--primary-text-color, 64, 64, 64), 0.55);
    background: none;
    border: none;
}

.async-lookup-browse-icon {
    font-size: 10px;
}

.data-view-maximise-btn {
    border: none;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    color: inherit;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 4px 8px;
    margin-right: 6px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    min-height: 24px;
}

.data-view-maximise-btn:hover,
.data-view-maximise-btn:focus {
    /* Neutral lightness tint derived from the current text colour, so it adapts to dark/light
       themes without introducing a hue (kept neutral deliberately for contrast/colour-blind users). */
    background-color: color-mix(in srgb, currentColor 8%, transparent);
    outline: none;
}

/* Action slot in the form editor's preview: the host portlet's buttons are not in scope there,
   so the slot is drawn as a named chip that can still be positioned and styled. */
.html-layout-action-slot {
    display: inline-flex;
    align-items: center;
    border: 1px dashed color-mix(in srgb, currentColor 40%, transparent);
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 0.8rem;
    opacity: 0.7;
}

/* The default lay-out for a data-xefr-actions marker: the same row the host portlet draws. */
.xefr-form-actions {
    display: flex;
    flex-wrap: wrap;
}