@font-face {
    font-family: "Urbanist";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../assets/fonts/urbanist/urbanist-latin-400-normal.woff2") format("woff2");
}

@font-face {
    font-family: "Urbanist";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../assets/fonts/urbanist/urbanist-latin-500-normal.woff2") format("woff2");
}

@font-face {
    font-family: "Urbanist";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../assets/fonts/urbanist/urbanist-latin-600-normal.woff2") format("woff2");
}

@font-face {
    font-family: "Urbanist";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../assets/fonts/urbanist/urbanist-latin-700-normal.woff2") format("woff2");
}

:root {
    --appbrand-font-family: "Urbanist", system-ui, -apple-system, "Segoe UI", sans-serif;
    --cui-font-sans-serif: var(--appbrand-font-family);
    --cui-body-font-family: var(--appbrand-font-family);
    --bs-font-sans-serif: var(--appbrand-font-family);
    --bs-body-font-family: var(--appbrand-font-family);

    /* Primary brand + focus/link mapping */
    --brand-primary: var(--bui-btn-bg, #005EFF);
    --cui-primary: var(--brand-primary);
    --cui-nav-underline-border-link-active-color: var(--brand-primary);
    --brand-primary-hover: color-mix(in srgb, var(--brand-primary) 80%, black);

    /* Bootstrap & CoreUI link vars */
    --bs-link-color: var(--brand-primary);
    --bs-link-hover-color: var(--brand-primary-hover);
    --cui-link-color: var(--brand-primary);
    --cui-link-hover-color: var(--brand-primary-hover);

    /* Layout + focus ring */
    --cui-body-bg: var(--cui-tertiary-bg);
    --sidebar-w: var(--cui-sidebar-width, 256px);
    --focus-ring-fallback: rgba(51, 153, 255, .25);
    --focus-ring: color-mix(in srgb, var(--brand-primary) 25%, transparent);

    /* Tunables */
    --lookup-icon-size: 22px;
    --lookup-addon-xpad: .375rem;

    /* Inline help */
    --inline-help-opacity: .6;
    --inline-help-opacity-hover: 1;

    /* App branding (generic) */
    --appbrand-primary: var(--brand-primary);
    --appbrand-primary-rgb: 0, 94, 255;
    --na-primary-rgb: var(--appbrand-primary-rgb);
    --appbrand-secondary: #6DEACB;
    --appbrand-secondary-readable: color-mix(in srgb, var(--appbrand-secondary) 55%, var(--appbrand-chrome-deep) 45%);

    --appbrand-border: rgba(236, 236, 231, .18);
    --appbrand-neutral-light: #FAFAFA;
    --appbrand-neutral-dark: #1E1E1E;
    --appbrand-text: var(--appbrand-neutral-light);
    --appbrand-on-primary: var(--appbrand-neutral-light);
    --appbrand-on-secondary: var(--appbrand-chrome-deep);

    /* Brand palette: dark chrome + mint accent. Base is the shell surface, deep the
       shade below it for edges and insets.
       The accent is only legible on the dark chrome (13.9:1 on --appbrand-chrome-deep,
       1.3:1 on white), so it is reserved for sidebar/header surfaces. */
    --appbrand-chrome-base: #00335B;
    --appbrand-chrome-deep: #011627;
    --appbrand-accent: var(--appbrand-secondary);

    /* Header sizing */
    --brand-h: 46px;
    --hdr-py: 8px;
    --hdr-px: 0px;

    --bs-primary: var(--appbrand-primary);
    --bs-primary-rgb: var(--appbrand-primary-rgb);
    --cui-primary: var(--appbrand-primary);
    --cui-primary-rgb: var(--appbrand-primary-rgb);

    /* Map Bootstrap/CoreUI "secondary" to your brand secondary */
    --appbrand-secondary-rgb: 109, 234, 203;
    --bs-secondary: var(--appbrand-secondary);
    --bs-secondary-rgb: var(--appbrand-secondary-rgb, 109, 234, 203);
    --cui-secondary: var(--appbrand-secondary);
    --cui-secondary-rgb: var(--appbrand-secondary-rgb, 109, 234, 203);

    /* Text-emphasis + subtle surfaces (used by alerts, bg-*-subtle, etc.) */
    --bs-primary-text-emphasis: color-mix(in srgb, var(--appbrand-primary) 42%, black);
    --bs-primary-bg-subtle: color-mix(in srgb, var(--appbrand-primary) 12%, white);
    --bs-primary-border-subtle: color-mix(in srgb, var(--appbrand-primary) 22%, white);

    --bs-secondary-text-emphasis: color-mix(in srgb, var(--appbrand-secondary) 42%, black);
    --bs-secondary-bg-subtle: color-mix(in srgb, var(--appbrand-secondary) 12%, white);
    --bs-secondary-border-subtle: color-mix(in srgb, var(--appbrand-secondary) 22%, white);

    --cui-form-multi-select-focus-border-color: var(--brand-primary);
    --cui-form-multi-select-focus-box-shadow: var(--focus-ring);

    --na-collapsible-border: rgba(0, 0, 0, .08);
    --na-collapsible-soft: rgba(var(--appbrand-primary-rgb), .06);
    --na-collapsible-shadow: 0 6px 18px rgba(0, 0, 0, .04);
    --na-collapsible-hover: rgba(0, 0, 0, .04);

    --cui-card-bg: #fff;
    --na-sidebar-expanded-w: auto;

    /* Urbanist needs a little more contrast than the previous system stack in
       dense application screens. Keep these as tokens so the hierarchy stays
       consistent across generated views. */
    --na-text-strong: #202833;
    --na-text-body: #354052;
    --na-text-muted: #6b7585;
    --na-control-border: #d9dee7;
    --na-card-border: rgba(32, 40, 51, .07);
    --na-card-shadow: 0 2px 8px rgba(32, 40, 51, .045);
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    scrollbar-gutter: stable;
}

/* Urbanist's rounded shapes work best when headings carry more weight than
   surrounding controls. This restores hierarchy without changing the font. */
body {
    color: var(--na-text-body);
    font-weight: 400;
    line-height: 1.45;
    letter-spacing: .003em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

:is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) {
    color: var(--na-text-strong);
    font-weight: 600;
    letter-spacing: -.012em;
}

#app {
    width: 100%;
    height: 100vh;
    min-width: 500;
    min-height: 500;
    display: flex;
    overflow: hidden;
}

.scroll-area {
    height: 100%;
    overflow-y: auto !important;
    min-width: 0;
}

/* Main view: reserve the scrollbar's space, or a page that barely overflows (a tall outlined grid)
   toggles its scrollbar and the content width with it. The sidebar is col-auto and keeps its own. */
.col.scroll-area {
    scrollbar-gutter: stable;
}

/* Clean workflow runs fill the page viewport through the outer view wrappers. */
.col.scroll-area:has(.na-clean-run) {
    display: flex;
    flex-direction: column;
    overflow-y: hidden !important;
    scrollbar-gutter: auto;
}

.col.scroll-area :has(.na-clean-run),
.col.scroll-area .na-clean-run,
.na-clean-run .na-clean-run-body,
.na-clean-run-body :has(.na-clean-step),
.na-clean-run .na-clean-step {
    min-height: 0;
}

.col.scroll-area .mainDefaultContainer:has(.na-clean-run) {
    flex: 1 1 auto;
    flex-direction: column;
}

/* Previously visited steps retain their body DOM. Their wrappers must stop sharing
   the available height as soon as selection moves to another step. */
.na-clean-run-body div:has(> .na-clean-step-hidden),
.na-clean-run-body div:has(> .na-clean-step):not(:has(.na-clean-step-body)) {
    display: none;
}

/* Give the navigation one bottom inset instead of stacking run, step and widget spacing. */
.na-clean-run .na-clean-run-body {
    padding-bottom: 1.5rem;
}

.na-clean-run .na-clean-step-body {
    min-height: 0;
    gap: 0;
    padding-top: 0;
    padding-bottom: 0;
}

/* The picture takes the space left by the text and inputs; navigation has its own bottom row. */
.na-clean-step-content {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    min-width: 0;
    overflow-y: auto;
    overflow-x: hidden;
    gap: 1.5rem;
    padding: .25rem 0 1.5rem;
}

.na-clean-step-content > * {
    flex: 0 0 auto;
}

.na-clean-step-content > .na-clean-main:not(.na-clean-main-no-media) {
    flex: 1 1 0;
    min-height: 0;
    grid-template-rows: minmax(0, 1fr);
    align-items: stretch;
}

.na-clean-step-content .na-clean-media-col,
.na-clean-step-content .na-clean-media,
.na-clean-step-content .na-clean-media :has(.na-image-preview-gallery),
.na-clean-step-content .na-image-preview-gallery,
.na-clean-step-content .na-image-preview-gallery-main {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
}

.na-clean-step-content .na-image-preview-gallery-description {
    flex: 0 0 auto;
}

/* Parts and tools share a grid class but use different names for the second-row cell. */
.na-clean-step-content .na-clean-requirement:has(> .na-clean-requirement-note) {
    grid-template-areas: "picture qty name" "picture . note";
}

.na-clean-step-content .na-clean-media .na-image-preview-gallery-main img {
    position: absolute;
    inset: 0;
    height: 100% !important;
    max-height: none;
    padding: 0;
    object-fit: contain;
}

.na-clean-run .na-clean-nav {
    flex: 0 0 auto;
    margin-top: 0;
}

.na-clean-run-body .widget-holder.mb-1:has(.na-clean-step) {
    margin-bottom: 0 !important;
}


.property-field-layout {
    overflow: hidden;
}

/* Keep focus rings visible above adjacent fields without relaxing normal layout clipping. */
.property-field-layout:focus-within {
    position: relative;
    z-index: 2;
    overflow: visible;
}

/* An input with icons or buttons over it. They share the input's grid cell, so they stay centred on
   the input while a validation message lands in the next row and pushes a description down. */
.na-input-adorned {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
}

.na-input-adorned > .form-control,
.na-input-adorned > .na-input-adornment-start,
.na-input-adorned > .na-input-adornment-end {
    grid-area: 1 / 1;
}

.na-input-adorned > .na-input-adornment-start {
    justify-self: start;
}

.na-input-adorned > .na-input-adornment-end {
    justify-self: end;
}

/* Show/hide eye inside a password field. Without this it is a bare grey browser button. */
.password-visibility-toggle {
    position: relative;
    z-index: 2;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: var(--cui-border-radius, .375rem);
    background-color: transparent;
    color: var(--na-text-muted, var(--cui-secondary-color));
    transition: color .15s ease-in-out, background-color .15s ease-in-out;
}

.password-visibility-toggle:hover,
.password-visibility-toggle:focus-visible {
    outline: 0;
    color: var(--appbrand-primary, var(--cui-primary));
    background-color: color-mix(in srgb, var(--appbrand-primary, var(--cui-primary)) 10%, transparent);
}

/* Dictation: a microphone inside the field. It sits over the input, so the text keeps room on the right. */
.na-dictation-button {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    margin-right: .375rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: transparent;
    color: var(--cui-secondary-color, #6b7280);
}

.na-dictation-button:hover,
.na-dictation-button:focus-visible {
    background-color: var(--cui-tertiary-bg, #f3f4f7);
    color: var(--cui-body-color, #212631);
}

/* A textarea's microphone belongs at the top, where it does not sit on top of the text. */
.na-dictation-button-multiline {
    align-self: start;
    margin-top: .375rem;
}

/* Beside a clear button rather than under it. */
.na-dictation-button-shifted {
    margin-right: 2.25rem;
}

.na-dictation-button.is-listening {
    color: var(--cui-danger, #dc3545);
    background-color: rgba(var(--cui-danger-rgb, 220, 53, 69), .1);
}

.na-dictation-hint {
    margin-top: .25rem;
    color: var(--cui-secondary-color, #6b7280);
    font-size: .75rem;
    line-height: 1.3;
}

/* overflow:hidden on any ancestor breaks position:sticky for its descendants. Add na-sticky-scope
   to a view's root node to relax overflow on just the .property-field-layout wrapper that contains
   it, instead of relaxing overflow globally for every view. */
.property-field-layout:has(.na-sticky-scope) {
    overflow: visible;
}

.mainDefaultContainer {
    height: 100%;
}

/* Standard separation between a full-page view header and its page content.
   Keep this opt-in so embedded and dialog headers retain their compact spacing. */
.na-page-header {
    margin-bottom: 1rem;
}

.tooltip-nova {
    position: relative;
    z-index: 10;
}

.card-nova {
    border: 1px solid var(--cui-border-soft);
    border-radius: 12px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06);
    min-width: 0;
}

/* Standard cards are common in generated workspaces. Reduce their visual
   weight so typography, rather than repeated outlines, separates content. */
.card {
    --cui-card-border-color: var(--na-card-border);
    --bs-card-border-color: var(--na-card-border);
    box-shadow: var(--na-card-shadow);
}

.card-nova {
    border-color: var(--na-card-border);
    box-shadow: var(--na-card-shadow);
}

:is(.card-header, .card-title) {
    color: var(--na-text-strong);
    font-weight: 600;
    letter-spacing: -.006em;
}

.section-title-nova {
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #6c757d;
}

.section-title-nova {
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--na-text-muted);
}

.bool-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border-radius: 999px;
    padding: 0.45rem 0.75rem;
    font-size: 0.85rem;
    font-weight: 700;
}

.bool-pill.true {
    background: rgba(45, 181, 93, 0.12);
    color: #198754;
}

.bool-pill.false {
    background: rgba(220, 53, 69, 0.12);
    color: #b02a37;
}

.tooltip-nova:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 70%;
    left: 50%;
    transform: translateX(-50%);
    background: #1e1e2f;
    color: white;
    padding: 6px 10px;
    border-radius: 6px;
    white-space: nowrap;
    font-size: 0.8rem;
    z-index: 9999;
}

.list-header-floating-top {
    position: absolute;
    top: -25px;
    right: 5px;
    z-index: 2;
}

/* ====== Hover content ====== */
.layoutnode-hover-hovercontent {
    display: none;
}

.layoutnode-hover-content {
    display: block;
}

.layoutnode-hover:hover .layoutnode-hover-hovercontent {
    display: block;
}

.layoutnode-hover:hover .layoutnode-hover-content {
    display: none;
}

.empty-list-box {
    border: 2px dashed #cbd5e1;
    border-radius: 12px;
    padding: 40px;
    text-align: center;
    color: #6c757d;
}

.empty-list-box .empty-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 6px;
}

.empty-list-box .empty-subtitle {
    font-size: 0.9rem;
    opacity: 0.8;
}

.xmleditor textarea,
.xmleditor pre {
    position: absolute;
    inset: 0;

    box-sizing: border-box;

    margin: 0;
    padding: 10px;

    border: none;
    font-family: Consolas, monospace;
    font-size: 14px;
    line-height: 1.5;

    white-space: pre;
    tab-size: 4;
}

.xmleditor textarea {
    background: transparent;
    color: transparent;
    caret-color: black;
    z-index: 2;
}

.xmleditor pre {
    pointer-events: none;
    z-index: 1;
}

.xmleditor {
    position: relative
}

.highlight {
    pointer-events: none;
    z-index: 1;
}

.simplebar-content-wrapper {
    overflow-x: hidden !important;
}

.row>[class*="col"] {
    min-width: 0;
}

.card {
    --cui-card-bg: var(--cui-white) !important;
}

.modal {
    --cui-card-bg: var(--cui-white);
    --cui-modal-content-bg: var(--cui-card-bg);
    --cui-modal-content-bg-translucent: var(--cui-card-bg);
}

.modal-content {
    background-color: var(--cui-card-bg) !important;
}

.validation-error {
    background-color: mistyrose;
    border-radius: 10px;
    padding-left: 20px;
    color: red;
}

.inline-editor--editable {
    cursor: pointer;
}

.inline-editor--editable:hover {
    cursor: pointer;
}

/* TypographyWidget normally reserves spacing below itself. Header title slots
   already control their own vertical rhythm, so that margin makes them taller. */
.na-viewheader-typography.mb-1 {
    margin-bottom: 0 !important;
}

@keyframes shakemessagecounter {
    0% {
        transform: skewX(-15deg);
    }

    5% {
        transform: skewX(15deg);
    }

    10% {
        transform: skewX(-15deg);
    }

    15% {
        transform: skewX(15deg);
    }

    20% {
        transform: skewX(0deg);
    }

    100% {
        transform: skewX(0deg);
    }
}

@keyframes updatedentitydataanimation {
    0% {
        background: #33cccc00;
    }

    50% {
        background: #00ff04;
    }

    100% {
        background: #b8cc3300;
    }
}

/* Gimmick surprise popup - a full-screen celebration pushed from the server when a Gimmick
   counter/threshold is reached. Deliberately punchier than the gentle mvIn/mvOut view transitions
   above: this is meant to feel like a game reward, not a routine UI update. */
.gimmick-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(16, 24, 40, 0.55);
    cursor: pointer;
    animation: gimmickFadeIn 0.2s ease-out;
}

.gimmick-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: #fff;
    border-radius: 1rem;
    padding: 2.5rem 2rem 1.75rem 2rem;
    max-width: 22rem;
    box-shadow: 0 20px 60px rgba(16, 24, 40, 0.35);
    cursor: default;
    animation: gimmickPopIn 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: visible;
}

.gimmick-card::before {
    content: "";
    position: absolute;
    inset: -20%;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(circle, var(--gimmick-accent, #6c93ff) 0%, transparent 70%);
    opacity: 0.35;
    animation: gimmickGlowPulse 1.8s ease-in-out infinite;
}

.gimmick-icon {
    font-size: 3.5rem;
    line-height: 1;
    margin-bottom: 0.75rem;
    animation: gimmickIconBounce 0.7s ease-out 0.1s both;
}

.gimmick-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #101828;
    margin-bottom: 0.35rem;
}

.gimmick-text {
    font-size: 0.9rem;
    color: #667085;
}

.gimmick-hint {
    margin-top: 1.25rem;
    font-size: 0.7rem;
    color: #98a2b3;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.gimmick-confetti {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;
    background: var(--gimmick-color, #6c93ff);
    border-radius: 2px;
    opacity: 0;
    animation: gimmickBurst 0.9s ease-out both;
}

@keyframes gimmickFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes gimmickPopIn {
    0% {
        transform: scale(0.4) rotate(-6deg);
        opacity: 0;
    }

    60% {
        transform: scale(1.08) rotate(2deg);
        opacity: 1;
    }

    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

@keyframes gimmickIconBounce {
    0% {
        transform: scale(0) rotate(0deg);
    }

    60% {
        transform: scale(1.25) rotate(8deg);
    }

    100% {
        transform: scale(1) rotate(0deg);
    }
}

@keyframes gimmickGlowPulse {
    0%, 100% {
        opacity: 0.25;
        transform: scale(0.95);
    }

    50% {
        opacity: 0.45;
        transform: scale(1.05);
    }
}

@keyframes gimmickBurst {
    0% {
        opacity: 1;
        transform: rotate(var(--gimmick-angle, 0deg)) translateY(0) scale(1);
    }

    100% {
        opacity: 0;
        transform: rotate(var(--gimmick-angle, 0deg)) translateY(-90px) scale(0.4);
    }
}

.menuContainer {
    flex: 0 0 0 !important;
    width: 0 !important;
}

.layoutFieldActions {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    /* replaces px-1 hacks */
    flex-wrap: wrap;
    /* align with col content */
    padding-left: var(--bs-gutter-x, 1rem);
    padding-right: var(--bs-gutter-x, 1rem);
}

.applicationContainer {
    flex: 1 1 auto;
    min-width: 0;
    margin: 10px;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 20px);
    overflow: visible;
    left: auto;
    width: auto;
    height: auto;
    scrollbar-gutter: stable both-edges;
}

.mainview {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    flex: 1 1 auto;
    min-height: 0;
    scrollbar-gutter: stable both-edges;
}

/* Sticky full-width views manage scrolling in their outer viewport. Do not
   reserve an additional inner scrollbar gutter, which otherwise shows up as
   a narrow strip beside full-bleed headers. */
.mainview:has(.na-sticky-scope) {
    scrollbar-gutter: auto;
}

.card-header {
    position: sticky;
    top: 0;
    z-index: 1;
}

.field-containter-primary {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}

/* Default main scroll viewport (replaces #DefaultView + #Default.applicationContainer.card) */
.applicationContainer.card.na-default-scroll {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-gutter: auto;
    padding-right: 0;
    min-height: 0 !important;
    overscroll-behavior: contain;
}

/* Optional: keep if you really want overlay behavior (non-standard) */
.applicationContainer.card.na-default-scroll {
    overflow-y: overlay;
}


.applicationContainer.card {
    overflow: hidden;
    scrollbar-gutter: auto;
}

.card-body {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* The tile itself: a fixed-height flex column container */
.tile-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* clip borders; inner will scroll */
    border-radius: 18px;
}

/* Make the content area scroll within the fixed tile height */
.tile-card .tile-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    scrollbar-gutter: stable both-edges;
}

.widget-header {
    display: flex;
    justify-content: center;
    /* horizontaal */
    align-items: center;
    /* verticaal */
    line-height: 1.2;
    /* verticale ruimte tussen regels */
    margin: 10px 0;
}

.widget-holder {
    opacity: 1.0;
}

.button-icon {
    border: 0px;
    background-color: transparent;
}

input,
textarea,
select,
button {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

::placeholder {
    color: rgba(0, 0, 0, 0.5);
    font-style: italic;
}

/* Flex align icon and text inside button, center them vertically and add spacing. */
.app-button {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

/* Make SVG block-level so it aligns properly */
.app-icon {
    display: block;
}

.field-container-primary-button {
    justify-self: end;
    display: flex;
    justify-content: flex-end;
}

/* Class that gets applied to main view widgets with an outline */
.widget-with-outline>.row {
    padding-left: 12px;
    padding-right: 12px;
}

/* Base label */
.form-label {
    font-weight: 600;
    color: var(--bs-secondary-color);
    line-height: 1.25;
}

/* Label above a field (Message/CTA/etc.) */
.form-label--above {
    /* add when LabelAbove = true */
    margin-bottom: .25rem;
    /* mb-1 */
    font-size: .95rem;
}

.form-label {
    font-size: .8125rem;
    color: var(--na-text-strong);
    line-height: 1.3;
    letter-spacing: .008em;
}

.form-label--above {
    font-size: .8125rem;
}

/* Side label (Duration, short fields) */
.form-label--side {
    /* add when LabelAbove = false */
    margin-bottom: 0 !important;
    /* mb-0 */
    font-size: .875rem;
    /* ~ BodySm */
    white-space: nowrap;
    text-align: right;
    /* padding-left: 5px; */
    /* aligns with inputs nicely */
}

.form-select.na-empty-selection {
    color: rgba(0, 0, 0, 0.5);
    font-style: italic;
}

.form-select option {
    font-style: normal;
}

.form-control:focus,
.form-control:focus-visible,
.form-select:focus,
.form-select:focus-visible {
    border-color: var(--brand-primary) !important;
    /* fallback first, then modern color-mix (browsers that support it will use the second line) */
    box-shadow: 0 0 0 .25rem var(--focus-ring-fallback) !important;
    box-shadow: 0 0 0 .25rem var(--focus-ring) !important;
    outline: 0;
}

.mainDefaultContainer .form-control,
.mainDefaultContainer .form-select {
    color: var(--na-text-body);
    font-weight: 500;
    letter-spacing: 0;
    border-color: var(--na-control-border);
    box-shadow: inset 0 1px 1px rgba(32, 40, 51, .015);
}

.mainDefaultContainer .form-control:hover:not(:disabled):not([readonly]),
.mainDefaultContainer .form-select:hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--na-control-border) 65%, var(--na-text-muted));
}

.mainDefaultContainer .form-text,
.mainDefaultContainer .text-body-secondary,
.mainDefaultContainer .text-muted {
    color: var(--na-text-muted) !important;
    font-weight: 400;
}

/* Disabled / readonly pair dimming */
.form-label:is(.is-disabled),
.form-label:has(+ .form-control:disabled),
.form-label:has(+ .form-control[readonly]) {
    color: var(--bs-tertiary-color);
    font-weight: 500;
}

/* Required asterisk (accessible) */
.form-label--required::after {
    content: " *";
    color: var(--bs-danger);
    font-weight: 700;
    margin-left: .125rem;
}

/* Optional tag (tiny, tertiary) */
.form-label__meta {
    margin-left: .375rem;
    font-size: .75rem;
    color: var(--bs-tertiary-color);
}

/* Gentle appear/exit animations */
@keyframes mvIn {
    from {
        opacity: 0;
        transform: translateY(-4px) scale(.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes mvOut {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    to {
        opacity: 0;
        transform: translateY(4px) scale(.98);
    }
}

.mv-enter {
    animation: mvIn .24s ease-out both;
}

.mv-exit {
    animation: mvOut .2s ease-in both;
}

/* Empty state sizing/spacing stays modest */
.mv-empty {
    background: var(--bs-body-bg);
}

.mv-empty .card-body {
    min-height: 96px;
}

.mv-empty__icon {
    color: var(--bs-secondary-color);
}

/* ============================= */
/* Overlay scrollbar (global)    */
/* ============================= */
.scroll-overlay {
    position: relative;
    height: 100%;
}

.scroll-overlay__viewport {
    height: 100%;
    overflow: auto;
    /* Hide native scrollbars */
    scrollbar-width: none;
    /* Firefox */
}

.scroll-overlay__viewport::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.scroll-overlay__bar {
    position: absolute;
    top: 0;
    right: 2px;
    width: 8px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .35);
    opacity: 0;
    transition: opacity .15s ease;
    pointer-events: none;
    /* Don’t block content clicks */
}

.scroll-overlay:hover .scroll-overlay__bar {
    opacity: .6;
}

.scroll-overlay:hover .scroll-overlay__bar:hover {
    opacity: .8;
}

/* Icon-only buttons: transparent, tight hitbox, inline-flex center */
.app-button.is-icon-only {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Ensure SVGs inside line up nicely */
.app-button.is-icon-only .app-icon {
    display: block;
    color: currentColor;
    transition: color .12s ease-in-out;
}

/* Brand hover/active using your tokens */
.app-button.is-icon-only:hover .app-icon,
.app-button.is-icon-only:focus-visible .app-icon {
    color: var(--brand-primary);
}

.app-button.is-icon-only:active .app-icon {
    color: var(--brand-primary-hover, color-mix(in srgb, var(--brand-primary) 80%, black));
}

/* Optional: remove default browser button styling on WebKit */
.app-button.is-icon-only {
    -webkit-appearance: none;
    appearance: none;
}

/* Optional: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .app-button.is-icon-only .app-icon {
        transition: none;
    }
}

/* Keep addon tidy */
.input-group .lookup-addon {
    padding-inline: var(--lookup-addon-xpad);
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.lookup-addon .lookup-icon svg {
    width: var(--lookup-icon-size);
    height: var(--lookup-icon-size);
    display: block;
}

.input-group.look-up-item-shimmer>.form-select {
    background-image: linear-gradient(90deg, rgba(255, 255, 255, .7) 0%,
            rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, .7) 100%);
    background-size: 200% 100%;
    animation: lookupShimmer 2.3s linear infinite;
    border-color: rgba(0, 0, 0, .08) !important;
}

@keyframes lookupShimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

/* give the whole block a faint outline so it reads as “active” */
.input-group.look-up-item-shimmer {
    position: relative;
    border-radius: var(--bs-border-radius, .5rem);
}

.input-group.look-up-item-shimmer::after {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    pointer-events: none;
    box-shadow:
        0 0 0 2px rgba(var(--bs-primary-rgb, 13, 110, 253), .25),
        0 2px 10px -2px rgba(0, 0, 0, .12);
}

.input-group.look-up-item-glass {
    position: relative;
    border-radius: var(--bs-border-radius, .75rem);
    background: linear-gradient(to bottom right,
            rgba(255, 255, 255, .55), rgba(255, 255, 255, .35));
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow:
        0 10px 30px rgba(0, 0, 0, .08),
        0 0 0 2px rgba(var(--bs-primary-rgb, 13, 110, 253), .25);
}

.input-group.look-up-item-glass>.form-select,
.input-group.look-up-item-glass>.input-group-text {
    background: transparent !important;
    border-color: rgba(255, 255, 255, .6) !important;
}

.input-group.look-up-item-glass>.form-select:focus {
    box-shadow: none !important;
}

[id^="offcanvasRight_"].offcanvas {
    --bs-offcanvas-padding-x: 0;
    --bs-offcanvas-padding-y: 0;
    --cui-offcanvas-padding-x: 0;
    --cui-offcanvas-padding-y: 0;
    padding: 0;
    padding-top: 0.75rem;
}

/* Always enable hovering help buttons */
.inline-help-btn {
    pointer-events: auto !important;
}

/* default: dimmed */
.inline-help-btn {
    opacity: var(--inline-help-opacity);
    transition: opacity .15s ease-in-out;
}

/* on hover/focus: full */
.inline-help-btn:hover,
.inline-help-btn:focus,
.inline-help-btn:focus-visible {
    opacity: var(--inline-help-opacity-hover);
}

@media (prefers-reduced-motion: reduce) {
    .inline-help-btn {
        transition: none;
    }
}

/* nudge label-anchored help icons up slightly to align with label text */
.inline-help-btn--label {
    position: relative;
    top: -3px;
    opacity: 0.65;
    color: var(--bs-secondary-color);
    transition: opacity .15s ease-in-out, color .15s ease-in-out;
}

.inline-help-btn--label:hover,
.inline-help-btn--label:focus,
.inline-help-btn--label:focus-visible {
    opacity: 1;
    color: var(--bs-primary);
}

.widget-holder.mb-1.na-no-pad>.w-100>.offcanvas-header {
    margin-bottom: 1rem;
}

.offcanvas-header .title-wrap {
    display: flex;
    gap: .5rem;
    align-items: baseline;
    min-width: 0
}

.offcanvas-header .title-wrap>*:first-child {
    min-width: 0
}

.offcanvas-header .title-wrap>*:first-child .typography {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.btn-primary {
    /* CoreUI tokens */
    --cui-btn-color: var(--appbrand-on-primary);
    --cui-btn-bg: var(--appbrand-primary);
    --cui-btn-border-color: var(--appbrand-primary);
    --cui-btn-hover-color: var(--appbrand-on-primary);
    --cui-btn-hover-bg: color-mix(in srgb, var(--appbrand-primary) 85%, black);
    --cui-btn-hover-border-color: color-mix(in srgb, var(--appbrand-primary) 85%, black);
    --cui-btn-active-color: var(--appbrand-on-primary);
    --cui-btn-active-bg: var(--appbrand-primary);
    --cui-btn-active-border-color: var(--appbrand-primary);
    --cui-btn-focus-shadow-rgb: var(--appbrand-primary-rgb);

    /* Bootstrap mirrors */
    --bs-btn-color: var(--appbrand-on-primary);
    --bs-btn-bg: var(--appbrand-primary);
    --bs-btn-border-color: var(--appbrand-primary);
    --bs-btn-hover-color: var(--appbrand-on-primary);
    --bs-btn-hover-bg: color-mix(in srgb, var(--appbrand-primary) 85%, black);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--appbrand-primary) 85%, black);
    --bs-btn-active-color: var(--appbrand-on-primary);
    --bs-btn-active-bg: var(--appbrand-primary);
    --bs-btn-active-border-color: var(--appbrand-primary);
    --bs-btn-focus-shadow-rgb: var(--appbrand-primary-rgb);
}

.btn-close {
    --cui-btn-close-focus-shadow: 0 0 0 0.25rem rgba(var(--appbrand-primary-rgb), .25);
    --bs-btn-close-focus-shadow: 0 0 0 0.25rem rgba(var(--appbrand-primary-rgb), .25);
}

/* CoreUI + Bootstrap concrete vars for .btn-info */
.btn.btn-info {
    /* CoreUI tokens */
    --cui-btn-color: #fff;
    --cui-btn-bg: var(--appbrand-primary);
    --cui-btn-border-color: var(--appbrand-primary);
    --cui-btn-hover-color: #fff;
    --cui-btn-hover-bg: color-mix(in srgb, var(--appbrand-primary) 80%, black);
    --cui-btn-hover-border-color: color-mix(in srgb, var(--appbrand-primary) 80%, black);
    --cui-btn-active-color: #fff;
    --cui-btn-active-bg: color-mix(in srgb, var(--appbrand-primary) 70%, black);
    --cui-btn-active-border-color: color-mix(in srgb, var(--appbrand-primary) 70%, black);
    --cui-btn-focus-shadow-rgb: var(--appbrand-primary-rgb);

    /* Bootstrap tokens */
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--appbrand-primary);
    --bs-btn-border-color: var(--appbrand-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: color-mix(in srgb, var(--appbrand-primary) 80%, black);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--appbrand-primary) 80%, black);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: color-mix(in srgb, var(--appbrand-primary) 70%, black);
    --bs-btn-active-border-color: color-mix(in srgb, var(--appbrand-primary) 70%, black);
    --bs-btn-focus-shadow-rgb: var(--appbrand-primary-rgb);

    /* neutralize inline color if any */
    color: var(--cui-btn-color) !important;
}

/* Outline info */
.btn-outline-info {
    --cui-btn-color: var(--appbrand-primary);
    --cui-btn-border-color: var(--appbrand-primary);
    --cui-btn-hover-color: #fff;
    --cui-btn-hover-bg: var(--appbrand-primary);
    --cui-btn-hover-border-color: var(--appbrand-primary);
    --cui-btn-focus-shadow-rgb: var(--appbrand-primary-rgb);

    --bs-btn-color: var(--appbrand-primary);
    --bs-btn-border-color: var(--appbrand-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--appbrand-primary);
    --bs-btn-hover-border-color: var(--appbrand-primary);
    --bs-btn-focus-shadow-rgb: var(--appbrand-primary-rgb);
}

/* icons inside your app buttons should follow the computed text color */
.btn .app-icon,
.btn svg {
    color: currentColor;
    fill: currentColor;
}

.btn-outline-primary {
    --cui-btn-color: var(--appbrand-primary);
    --bs-btn-color: var(--appbrand-primary);
    /* … */
}

.btn-outline-primary {
    /* CoreUI tokens */
    --cui-btn-color: var(--appbrand-primary);
    --cui-btn-border-color: var(--appbrand-primary);
    --cui-btn-hover-color: var(--appbrand-on-primary);
    --cui-btn-hover-bg: var(--appbrand-primary);
    --cui-btn-hover-border-color: var(--appbrand-primary);
    --cui-btn-active-color: var(--appbrand-on-primary);
    --cui-btn-active-bg: color-mix(in srgb, var(--appbrand-primary) 85%, black);
    --cui-btn-active-border-color: color-mix(in srgb, var(--appbrand-primary) 85%, black);
    --cui-btn-focus-shadow-rgb: var(--appbrand-primary-rgb);

    /* Bootstrap tokens */
    --bs-btn-color: var(--appbrand-primary);
    --bs-btn-border-color: var(--appbrand-primary);
    --bs-btn-hover-color: var(--appbrand-on-primary);
    --bs-btn-hover-bg: var(--appbrand-primary);
    --bs-btn-hover-border-color: var(--appbrand-primary);
    --bs-btn-active-color: var(--appbrand-on-primary);
    --bs-btn-active-bg: color-mix(in srgb, var(--appbrand-primary) 85%, black);
    --bs-btn-active-border-color: color-mix(in srgb, var(--appbrand-primary) 85%, black);
    --bs-btn-focus-shadow-rgb: var(--appbrand-primary-rgb);
}

.btn-outline-primary {
    /* CoreUI disabled tokens used by .btn.disabled rule */
    --cui-btn-disabled-color: rgba(var(--appbrand-primary-rgb), .55);
    --cui-btn-disabled-bg: transparent;
    --cui-btn-disabled-border-color: rgba(var(--appbrand-primary-rgb), .45);
    --cui-btn-disabled-opacity: 1;
    /* cancel default heavy fade */

    /* Bootstrap mirrors (for BS rules/components that read these) */
    --bs-btn-disabled-color: rgba(var(--appbrand-primary-rgb), .55);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: rgba(var(--appbrand-primary-rgb), .45);
    --bs-btn-disabled-opacity: 1;
}

.border-primary {
    /* CoreUI path */
    --cui-primary: var(--appbrand-primary);
    --cui-primary-rgb: var(--appbrand-primary-rgb);
    border-color: rgba(var(--cui-primary-rgb), var(--cui-border-opacity, 1)) !important;

    /* Bootstrap path (for components that read BS vars) */
    --bs-primary: var(--appbrand-primary);
    --bs-primary-rgb: var(--appbrand-primary-rgb);
    border-color: rgba(var(--bs-primary-rgb), var(--bs-border-opacity, 1)) !important;
}

/* Force .text-info to our brand even with !important */
.text-info {
    color: rgba(var(--cui-info-rgb), var(--cui-text-opacity, 1)) !important;
}

/* Icon-only app buttons: default + hover tone */
.app-button.is-icon-only {
    color: var(--appbrand-primary) !important;
}

.app-button.is-icon-only:hover,
.app-button.is-icon-only:focus-visible {
    color: color-mix(in srgb, var(--appbrand-primary) 80%, black) !important;
}

/* Ensure inner SVGs inherit the computed color */
.app-button .app-icon,
.app-button svg {
    color: currentColor !important;
    fill: currentColor !important;
}

/* Actions may opt into a semantic interaction color while retaining their
   normal icon color at rest. This follows the generic icon-button rules. */
.app-button.is-icon-only.na-action-hover-color:is(:hover, :focus-visible) {
    color: var(--na-action-hover-color) !important;
}

.btn-secondary {
    --cui-btn-color: var(--appbrand-on-secondary);
    --cui-btn-bg: var(--appbrand-secondary);
    --cui-btn-border-color: var(--appbrand-secondary);
    --cui-btn-hover-color: var(--appbrand-on-secondary);
    --cui-btn-hover-bg: color-mix(in srgb, var(--appbrand-secondary) 85%, black);
    --cui-btn-hover-border-color: color-mix(in srgb, var(--appbrand-secondary) 85%, black);
    --cui-btn-active-color: var(--appbrand-on-secondary);
    --cui-btn-active-bg: color-mix(in srgb, var(--appbrand-secondary) 75%, black);
    --cui-btn-active-border-color: color-mix(in srgb, var(--appbrand-secondary) 75%, black);
    --cui-btn-focus-shadow-rgb: var(--appbrand-secondary-rgb);

    --bs-btn-color: var(--appbrand-on-secondary);
    --bs-btn-bg: var(--appbrand-secondary);
    --bs-btn-border-color: var(--appbrand-secondary);
    --bs-btn-hover-color: var(--appbrand-on-secondary);
    --bs-btn-hover-bg: color-mix(in srgb, var(--appbrand-secondary) 85%, black);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--appbrand-secondary) 85%, black);
    --bs-btn-active-color: var(--appbrand-on-secondary);
    --bs-btn-active-bg: color-mix(in srgb, var(--appbrand-secondary) 75%, black);
    --bs-btn-active-border-color: color-mix(in srgb, var(--appbrand-secondary) 75%, black);
    --bs-btn-focus-shadow-rgb: var(--appbrand-secondary-rgb);
}

.btn.btn-outline-secondary {
    /* CoreUI tokens */
    --cui-btn-color: var(--appbrand-secondary-readable);
    --cui-btn-border-color: var(--appbrand-secondary);
    --cui-btn-hover-color: var(--appbrand-on-secondary);
    --cui-btn-hover-bg: var(--appbrand-secondary);
    --cui-btn-hover-border-color: var(--appbrand-secondary);
    --cui-btn-active-color: var(--appbrand-on-secondary);
    --cui-btn-active-bg: color-mix(in srgb, var(--appbrand-secondary) 85%, black);
    --cui-btn-active-border-color: color-mix(in srgb, var(--appbrand-secondary) 85%, black);
    --cui-btn-focus-shadow-rgb: var(--appbrand-secondary-rgb);

    /* Disabled look (match your primary outline pattern) */
    --cui-btn-disabled-color: rgba(var(--appbrand-secondary-rgb), .55);
    --cui-btn-disabled-bg: transparent;
    --cui-btn-disabled-border-color: rgba(var(--appbrand-secondary-rgb), .45);
    --cui-btn-disabled-opacity: 1;

    /* Bootstrap mirrors (for components that read BS vars) */
    --bs-btn-color: var(--appbrand-secondary-readable);
    --bs-btn-border-color: var(--appbrand-secondary);
    --bs-btn-hover-color: var(--appbrand-on-secondary);
    --bs-btn-hover-bg: var(--appbrand-secondary);
    --bs-btn-hover-border-color: var(--appbrand-secondary);
    --bs-btn-active-color: var(--appbrand-on-secondary);
    --bs-btn-active-bg: color-mix(in srgb, var(--appbrand-secondary) 85%, black);
    --bs-btn-active-border-color: color-mix(in srgb, var(--appbrand-secondary) 85%, black);
    --bs-btn-focus-shadow-rgb: var(--appbrand-secondary-rgb);
    --bs-btn-disabled-color: rgba(var(--appbrand-secondary-rgb), .55);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: rgba(var(--appbrand-secondary-rgb), .45);
    --bs-btn-disabled-opacity: 1;
}

.btn-outline-info {
    --cui-btn-color: var(--appbrand-primary);
    --cui-btn-border-color: var(--appbrand-primary);
    --cui-btn-hover-color: #fff;
    --cui-btn-hover-bg: var(--appbrand-primary);
    --cui-btn-hover-border-color: var(--appbrand-primary);
    --cui-btn-active-color: #fff;
    --cui-btn-active-bg: var(--appbrand-primary);
    --cui-btn-active-border-color: var(--appbrand-primary);
    --cui-btn-focus-shadow-rgb: var(--appbrand-primary-rgb);

    /* Bootstrap mirrors (some BS rules read these directly) */
    --bs-btn-color: var(--appbrand-primary);
    --bs-btn-border-color: var(--appbrand-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--appbrand-primary);
    --bs-btn-hover-border-color: var(--appbrand-primary);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--appbrand-primary);
    --bs-btn-active-border-color: var(--appbrand-primary);
    --bs-btn-focus-shadow-rgb: var(--appbrand-primary-rgb);
}

/* Belt-and-suspenders: explicitly style pressed/checked/show states */
.btn-outline-info:active,
.btn-outline-info.active,
.btn-check:checked+.btn-outline-info,
.btn-check:active+.btn-outline-info,
.show>.btn-outline-info.dropdown-toggle {
    color: #fff !important;
    background-color: var(--appbrand-primary) !important;
    border-color: var(--appbrand-primary) !important;
}

.btn-outline-info:focus-visible {
    box-shadow: 0 0 0 .25rem rgba(var(--appbrand-primary-rgb), .35);
}

.card--studio--primary {
    position: relative;
    overflow: hidden;

    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: var(--bs-border-radius-lg, .75rem);

    /* soft primary wash on white */
    background:
        radial-gradient(120% 80% at 10% -10%,
            color-mix(in srgb, #fff 92%, var(--appbrand-primary) 8%) 0%,
            #fff 60%) no-repeat;

    box-shadow:
        0 10px 34px rgba(var(--appbrand-primary-rgb), .08),
        0 1px 0 rgba(255, 255, 255, .8) inset;
    transition: box-shadow .18s ease, transform .18s ease;
}

/* Let the bg show through common header/footer slots if present */
.card--studio--primary>.card-header,
.card--studio--primary>.card-footer {
    background: transparent !important;
}

.form-control.is-soft-valid {
    border-color: color-mix(in srgb, var(--brand-primary) 70%, white);
    box-shadow: none;
    background-image: none;
}


.badge.bg-primary-subtle,
.badge-subtle-primary {
    background-color: var(--bs-primary-bg-subtle) !important;
    border: 1px solid var(--bs-primary-border-subtle) !important;
}

.badge.bg-secondary-subtle,
.badge-subtle-secondary {
    background-color: var(--bs-secondary-bg-subtle) !important;
    border: 1px solid var(--bs-secondary-border-subtle) !important;
}

/* Tiny polish so badges sit nicely in radio labels */
.form-check-label .badge-subtle {
    font-weight: 600;
    /* border-radius: 9999px; */
}

.badge-nudge-up {
    transform: translateY(-5px);
}

.bg-primary-subtle {
    background-color: var(--bs-primary-bg-subtle) !important;
    color: var(--bs-primary-text-emphasis) !important;
}

.border-primary-subtle {
    border-color: var(--bs-primary-border-subtle) !important;
}

.text-primary-emphasis {
    color: var(--bs-primary-text-emphasis) !important;
}

.bg-secondary-subtle {
    background-color: var(--bs-secondary-bg-subtle) !important;
    color: var(--bs-secondary-text-emphasis) !important;
}

.border-secondary-subtle {
    border-color: var(--bs-secondary-border-subtle) !important;
}

.text-secondary-emphasis {
    color: var(--bs-secondary-text-emphasis) !important;
}


.footnote-marker {
    vertical-align: super;
    font-size: 0.75em;
    text-decoration: none;
}

/* CoreUI DatePicker footer buttons → use app brand colors */
.date-picker .btn-primary,
.datepicker .btn-primary {
    /* CoreUI tokens */
    --cui-btn-color: #fff;
    --cui-btn-bg: var(--appbrand-primary);
    --cui-btn-border-color: var(--appbrand-primary);
    --cui-btn-hover-color: #fff;
    --cui-btn-hover-bg: color-mix(in srgb, var(--appbrand-primary) 85%, black);
    --cui-btn-hover-border-color: color-mix(in srgb, var(--appbrand-primary) 85%, black);
    --cui-btn-active-color: #fff;
    --cui-btn-active-bg: color-mix(in srgb, var(--appbrand-primary) 70%, black);
    --cui-btn-active-border-color: color-mix(in srgb, var(--appbrand-primary) 70%, black);
    --cui-btn-focus-shadow-rgb: var(--appbrand-primary-rgb);

    /* Bootstrap mirrors (some rules read these directly) */
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--appbrand-primary);
    --bs-btn-border-color: var(--appbrand-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: color-mix(in srgb, var(--appbrand-primary) 85%, black);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--appbrand-primary) 85%, black);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: color-mix(in srgb, var(--appbrand-primary) 70%, black);
    --bs-btn-active-border-color: color-mix(in srgb, var(--appbrand-primary) 70%, black);
    --bs-btn-focus-shadow-rgb: var(--appbrand-primary-rgb);
}

.date-picker .btn-ghost-primary,
.datepicker .btn-ghost-primary {
    /* Ghost = text-colored button; keep text brand-colored */
    --cui-btn-color: var(--appbrand-primary);
    --cui-btn-hover-color: #fff;
    --cui-btn-hover-bg: var(--appbrand-primary);
    --cui-btn-hover-border-color: var(--appbrand-primary);
    --cui-btn-focus-shadow-rgb: var(--appbrand-primary-rgb);

    /* Bootstrap mirrors */
    --bs-btn-color: var(--appbrand-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--appbrand-primary);
    --bs-btn-hover-border-color: var(--appbrand-primary);
    --bs-btn-focus-shadow-rgb: var(--appbrand-primary-rgb);
}

.date-picker,
.datepicker {
    /* Input focus ring + border color */
    --cui-date-picker-focus-border-color: var(--appbrand-primary);
    --cui-date-picker-focus-box-shadow: 0 0 0 .25rem rgba(var(--appbrand-primary-rgb), .35);

    /* Text & bg while focused (keep bg neutral unless you want a tint) */
    --cui-date-picker-focus-color: var(--bs-body-color);
    --cui-date-picker-focus-bg: var(--cui-body-bg);
}

/* CoreUI DatePicker — brand color for "Today" cell */
.date-picker,
.datepicker {
    --cui-calendar-cell-today-color: var(--appbrand-primary);
}

/* CoreUI Pro's calendar markup uses calendar-nav-btn rather than btn. The bundled base stylesheet
   does not include that newer reset, which otherwise leaves the month, year and arrows looking like
   native browser buttons. Keep these as compact ghost controls so the date remains the focal point. */
.date-picker .calendar-nav,
.datepicker .calendar-nav {
    align-items: center;
    gap: 0.25rem;
    padding: 0.625rem 0.75rem;
}

.date-picker .calendar-nav-prev,
.date-picker .calendar-nav-next,
.date-picker .calendar-nav-date,
.datepicker .calendar-nav-prev,
.datepicker .calendar-nav-next,
.datepicker .calendar-nav-date {
    display: flex;
    align-items: center;
    gap: 0.125rem;
}

.date-picker .calendar-nav-date,
.datepicker .calendar-nav-date {
    justify-content: center;
    min-width: 0;
}

.date-picker .calendar-nav-btn,
.datepicker .calendar-nav-btn {
    -webkit-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2rem;
    min-width: 2rem;
    padding: 0.375rem;
    color: var(--cui-body-color);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 0.5rem;
    transition: color 120ms ease, background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

.date-picker .calendar-nav-date .calendar-nav-btn,
.datepicker .calendar-nav-date .calendar-nav-btn {
    min-width: 0;
    padding-inline: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
}

.date-picker .calendar-nav-btn:hover,
.datepicker .calendar-nav-btn:hover {
    color: var(--appbrand-primary);
    background: rgba(var(--appbrand-primary-rgb), 0.1);
    border-color: rgba(var(--appbrand-primary-rgb), 0.16);
}

.date-picker .calendar-nav-btn:hover .calendar-nav-icon,
.datepicker .calendar-nav-btn:hover .calendar-nav-icon {
    background-color: var(--appbrand-primary);
}

.date-picker .calendar-nav-btn:focus-visible,
.datepicker .calendar-nav-btn:focus-visible {
    color: var(--appbrand-primary);
    outline: 0;
    border-color: rgba(var(--appbrand-primary-rgb), 0.45);
    box-shadow: 0 0 0 0.2rem rgba(var(--appbrand-primary-rgb), 0.18);
}

.date-picker .calendar-nav-icon,
.datepicker .calendar-nav-icon {
    pointer-events: none;
}

/* Optional: emphasize the border and background a bit */
.date-picker .calendar-cell.today .calendar-cell-inner,
.datepicker .calendar-cell.today .calendar-cell-inner {
    color: var(--appbrand-primary);
}

.date-picker .calendar-cell.selected .calendar-cell-inner,
.datepicker .calendar-cell.selected .calendar-cell-inner {
    background-color: var(--appbrand-primary) !important;
    color: #fff !important;
}

/* DatePicker: ghost button (Cancel) should press with brand color */
.date-picker .btn-ghost-primary,
.datepicker .btn-ghost-primary {
    --cui-btn-color: var(--appbrand-primary);
    --cui-btn-hover-color: #fff;
    --cui-btn-hover-bg: var(--appbrand-primary);
    --cui-btn-hover-border-color: var(--appbrand-primary);
    --cui-btn-focus-shadow-rgb: var(--appbrand-primary-rgb);

    --cui-btn-active-color: #fff;
    --cui-btn-active-bg: color-mix(in srgb, var(--appbrand-primary) 85%, black);
    --cui-btn-active-border-color: color-mix(in srgb, var(--appbrand-primary) 85%, black);

    /* Bootstrap mirrors so BS rules also match */
    --bs-btn-color: var(--appbrand-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--appbrand-primary);
    --bs-btn-hover-border-color: var(--appbrand-primary);
    --bs-btn-focus-shadow-rgb: var(--appbrand-primary-rgb);

    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: color-mix(in srgb, var(--appbrand-primary) 85%, black);
    --bs-btn-active-border-color: color-mix(in srgb, var(--appbrand-primary) 85%, black);
}

/* Footer buttons → brand primary */
.time-picker .btn-primary,
.timepicker .btn-primary {
    --cui-btn-color: #fff;
    --cui-btn-bg: var(--appbrand-primary);
    --cui-btn-border-color: var(--appbrand-primary);
    --cui-btn-hover-color: #fff;
    --cui-btn-hover-bg: color-mix(in srgb, var(--appbrand-primary) 85%, black);
    --cui-btn-hover-border-color: color-mix(in srgb, var(--appbrand-primary) 85%, black);
    --cui-btn-active-color: #fff;
    --cui-btn-active-bg: color-mix(in srgb, var(--appbrand-primary) 70%, black);
    --cui-btn-active-border-color: color-mix(in srgb, var(--appbrand-primary) 70%, black);
    --cui-btn-focus-shadow-rgb: var(--appbrand-primary-rgb);

    /* Bootstrap mirrors (if BS rules read these directly) */
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--appbrand-primary);
    --bs-btn-border-color: var(--appbrand-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: color-mix(in srgb, var(--appbrand-primary) 85%, black);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--appbrand-primary) 85%, black);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: color-mix(in srgb, var(--appbrand-primary) 70%, black);
    --bs-btn-active-border-color: color-mix(in srgb, var(--appbrand-primary) 70%, black);
    --bs-btn-focus-shadow-rgb: var(--appbrand-primary-rgb);
}

/* “Ghost”/text buttons (Cancel, etc.) keep brand text color */
.time-picker .btn-ghost-primary,
.timepicker .btn-ghost-primary {
    --cui-btn-color: var(--appbrand-primary);
    --cui-btn-hover-color: #fff;
    --cui-btn-hover-bg: var(--appbrand-primary);
    --cui-btn-hover-border-color: var(--appbrand-primary);
    --cui-btn-focus-shadow-rgb: var(--appbrand-primary-rgb);

    --bs-btn-color: var(--appbrand-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--appbrand-primary);
    --bs-btn-hover-border-color: var(--appbrand-primary);
    --bs-btn-focus-shadow-rgb: var(--appbrand-primary-rgb);
}

/* Input focus ring + border (when the time input itself is focused) */
.time-picker .form-control:focus,
.timepicker .form-control:focus {
    border-color: var(--brand-primary) !important;
    box-shadow: 0 0 0 .25rem var(--focus-ring-fallback) !important;
    box-shadow: 0 0 0 .25rem var(--focus-ring) !important;
    outline: 0;
}

/* Dropdown panel: subtle brandy border/shadow for visibility */
.time-picker .time-picker-dropdown,
.timepicker .time-picker-dropdown {
    border: 1px solid color-mix(in srgb, var(--appbrand-primary) 22%, #ddd) !important;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .12),
        0 0 0 .125rem color-mix(in srgb, var(--appbrand-primary) 20%, transparent);
}

/* Columns: hover tint + selected item highlight */
.time-picker .time-picker-select .time-picker-item:hover,
.timepicker .time-picker-select .time-picker-item:hover {
    background-color: color-mix(in srgb, var(--appbrand-primary) 12%, transparent);
}

/* Selected/current item — make it clearly branded */
.time-picker .time-picker-select .time-picker-item.active,
.time-picker .time-picker-select .time-picker-item.selected,
.timepicker .time-picker-select .time-picker-item.active,
.timepicker .time-picker-select .time-picker-item.selected,
.time-picker [class*="time-picker-"] [class*="selected"],
.timepicker [class*="time-picker-"] [class*="selected"] {
    background-color: var(--appbrand-primary) !important;
    color: #fff !important;
}

/* Scrollbar/thumb inside column lists (optional) */
.time-picker .time-picker-select::-webkit-scrollbar-thumb,
.timepicker .time-picker-select::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--appbrand-primary) 35%, #bbb);
    border-radius: 999px;
}

/* Clock/trigger icon in the addon follows brand on hover/focus */
.time-picker .input-group-text,
.timepicker .input-group-text {
    color: var(--bs-secondary-color);
}

.time-picker .input-group-text:hover,
.time-picker .input-group-text:focus,
.timepicker .input-group-text:hover,
.timepicker .input-group-text:focus {
    color: var(--appbrand-primary);
}

/* Small/large variants inherit the same accenting */
.time-picker.time-picker-sm .form-control:focus,
.time-picker.time-picker-lg .form-control:focus,
.timepicker.time-picker-sm .form-control:focus,
.timepicker.time-picker-lg .form-control:focus {
    border-color: var(--brand-primary) !important;
    box-shadow: 0 0 0 .25rem var(--focus-ring) !important;
}

/* If the component renders a header/“now” link inside the dropdown */
.time-picker .time-picker-header a,
.timepicker .time-picker-header a {
    color: var(--appbrand-primary);
}

.time-picker .time-picker-header a:hover,
.timepicker .time-picker-header a:hover {
    color: var(--brand-primary-hover);
}

/* CoreUI TimePicker focus border → brand */
.time-picker,
.timepicker {
    --cui-time-picker-focus-border-color: var(--appbrand-primary);
    --cui-time-picker-focus-box-shadow: 0 0 0 .25rem rgba(var(--appbrand-primary-rgb), .35);
}

input[type="checkbox"] {
    accent-color: var(--appbrand-primary);
}

.form-check-input:focus {
    border-color: var(--appbrand-primary);
    box-shadow: 0 0 0 .25rem rgba(var(--appbrand-primary-rgb), .35);
    outline: 0;
}

.form-switch .form-check-input:focus {
    box-shadow: 0 0 0 .25rem rgba(var(--appbrand-primary-rgb), .35);
}

/* TimePicker ghost too, for parity */
.time-picker .btn-ghost-primary,
.timepicker .btn-ghost-primary {
    --cui-btn-active-color: #fff;
    --cui-btn-active-bg: color-mix(in srgb, var(--appbrand-primary) 85%, black);
    --cui-btn-active-border-color: color-mix(in srgb, var(--appbrand-primary) 85%, black);

    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: color-mix(in srgb, var(--appbrand-primary) 85%, black);
    --bs-btn-active-border-color: color-mix(in srgb, var(--appbrand-primary) 85%, black);
}

/* Belt & suspenders in case the component hard-codes states */
.date-picker .btn-ghost-primary:active,
.date-picker .btn-ghost-primary.active,
.time-picker .btn-ghost-primary:active,
.time-picker .btn-ghost-primary.active {
    color: #fff !important;
    background-color: color-mix(in srgb, var(--appbrand-primary) 85%, black) !important;
    border-color: color-mix(in srgb, var(--appbrand-primary) 85%, black) !important;
}

.na-list-widget .card-body {
    padding: .75rem 1rem;
}

.na-list-widget .card {
    border-radius: .75rem;
}

.na-listwidget-no-outer-padding-row {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.na-listwidget-no-outer-padding-row>.col-12,
.na-listwidget-no-outer-padding-row>.col {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* FieldLayoutWidget marks a row without gutter (view headers, nav bars, nested views). Without these
   the row kept Bootstrap's negative margins, which the column's padding only hid: every page with such
   a header scrolled 12px sideways. Zero both - the content stays exactly where it was. */
.row.na-no-gutter {
    margin-left: 0;
    margin-right: 0;
}

.row.na-no-gutter > .na-no-colpad {
    padding-left: 0;
    padding-right: 0;
}

.na-no-row-gap-top {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Vertical rhythm between normal widgets */
.na-widget-row {
    margin-bottom: .75rem;
}

.table td.badge-center {
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}

.donut-row {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
}

.donut-col {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* DonutWidget.LegendBelow */
.donut-row.donut-row-below {
    flex-direction: column;
    align-items: center;
}

/* DonutWidget.CenterTextField: the figure in the hole of a gauge. viewBox units, so it scales with Size. */
.donut-center-text {
    font-size: 54px;
    font-weight: 700;
    fill: var(--cui-body-color, #212631);
}

.donut-caption {
    margin-top: -0.5rem;
    line-height: 1.2;
}

/* closer + neat */
.donut-slice {
    transition: filter .15s ease, transform .15s ease, stroke-width .15s ease;
    cursor: pointer;
}

.donut-slice.is-hover {
    filter: brightness(1.15) saturate(1.08);
    stroke-width: 2.25;
}

.donut-tooltip {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    padding: .375rem .5rem;
    border-radius: .5rem;
    font-size: .8125rem;
    line-height: 1.2;
    background: rgba(33, 37, 41, .92);
    color: #fff;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .18);
    transform: translate3d(0, 0, 0);
    opacity: 0;
    transition: opacity .1s ease;
    max-width: 260px;
    white-space: nowrap;
}

.donut-tooltip.is-show {
    opacity: 1;
}

.donut-tooltip__dot {
    display: inline-block;
    width: .6rem;
    height: .6rem;
    border-radius: 9999px;
    margin-right: .375rem;
    vertical-align: -0.08rem;
    border: 1px solid rgba(255, 255, 255, .65);
}

.donut-tooltip__dim {
    opacity: .85
}

.widget-updated {
    position: relative;
}

.widget-updated::before {
    content: "";
    position: absolute;
    top: -10px;
    left: -10px;
    right: -17px;
    bottom: -10px;
    border-radius: .5rem;
    box-shadow: 0 0 0 2px var(--fx-green) inset;
    opacity: 0;
    pointer-events: none;
    animation: fx-cell-ring var(--fx-dur) ease-out;
}

.widget-updated::after {
    content: "";
    position: absolute;
    top: -10px;
    right: -15px;
    width: .8rem;
    height: .8rem;
    opacity: 0;
    background: var(--fx-green);
    mask: url("/assets/icons/check.svg") no-repeat center / contain;
    -webkit-mask: url("/assets/icons/check.svg") no-repeat center / contain;
    pointer-events: none;
    animation: fx-check-pop var(--fx-dur) ease-out;
}

.widget-update-cancelled {
    position: relative;
    animation: fx-cell-bg var(--fx-dur) ease-out;
}

.widget-update-cancelled::before {
    content: "";
    position: absolute;
    top: -10px;
    left: -10px;
    right: -17px;
    bottom: -10px;
    border-radius: .5rem;
    box-shadow: 0 0 0 2px var(--fx-red) inset;
    opacity: 0;
    pointer-events: none;
    animation: fx-cell-ring var(--fx-dur) ease-out;
}

.widget-update-cancelled::after {
    content: "";
    position: absolute;
    top: -10px;
    right: -15px;
    width: .8rem;
    height: .8rem;
    opacity: 0;
    background: var(--fx-red);
    mask: url("/assets/icons/x.svg") no-repeat center / contain;
    -webkit-mask: url("/assets/icons/x.svg") no-repeat center / contain;
    pointer-events: none;
    animation: fx-check-pop var(--fx-dur) ease-out;
}

.form-multi-select .form-multi-select-input-group:focus,
.form-multi-select.show .form-multi-select-input-group,
.form-multi-select-input-group:focus-within {
    border-color: var(--brand-primary) !important;
    box-shadow: 0 0 0 .25rem var(--focus-ring) !important;
}

.form-multi-select.form-multi-select-selected,
.form-multi-select.show {
    --cui-form-multi-select-border-color: var(--brand-primary);
    --cui-form-multi-select-focus-border-color: var(--brand-primary);
}

.form-multi-select-option:focus {
    box-shadow: 0 0 0 .15rem var(--focus-ring) !important;
    border-color: var(--brand-primary) !important;
    outline: 0 !important;
}

.btn.filmstrip-thumb-vertical.active {
    background-color: color-mix(in srgb, var(--appbrand-primary) 6%, #ffffff) !important;
    border-color: var(--appbrand-primary) !important;
    box-shadow: 0 0 0 .04em var(--focus-ring);
}

.btn.filmstrip-thumb-horizontal.active {
    background-color: color-mix(in srgb, var(--appbrand-primary) 6%, #ffffff) !important;
    border-color: var(--appbrand-primary) !important;
    box-shadow: 0 0 0 .04rem var(--focus-ring);
}

.entitytree-shell {
    --et-panel: var(--cui-white, #fff);
    --et-border: rgba(0, 0, 0, .08);
    --et-soft: color-mix(in srgb, var(--appbrand-primary) 6%, transparent);
    --et-muted: var(--bs-secondary-color, #6c757d);
    --et-primary: var(--appbrand-primary, var(--brand-primary, #0d6efd));
    --et-primary-rgb: var(--appbrand-primary-rgb, 13, 110, 253);
    --et-focus-ring: var(--focus-ring, rgba(51, 153, 255, .25));

    min-height: 0;
    overflow: visible;
}

.entitytree-panel {
    background: var(--et-panel);
    padding: 0.5rem;
    min-height: 0;
    overflow: visible;
}

.entitytree-scroll {
    overflow: auto;
    min-height: 0;
    padding: .35rem;
    margin: 0;
}

.entitytree-item {
    background: #fff !important;
    border: 1px solid rgba(0, 0, 0, .14) !important;
    border-radius: 10px;
    padding: .5rem .6rem;
    cursor: pointer;
    user-select: none;
    box-shadow: none !important;
    outline: none !important;
}

.entitytree-item:hover {
    background: color-mix(in srgb, var(--et-primary) 3%, white) !important;
}

.entitytree-item.active {
    background: color-mix(in srgb, var(--et-primary) 10%, white) !important;
    border-color: rgba(var(--et-primary-rgb), .35) !important;
    box-shadow: 0 0 0 .15rem var(--et-focus-ring) !important;
}

.entitytree-mini {
    font-size: .875rem;
}

.vh-no-gutter>.row {
    --cui-gutter-x: 0;
    --bs-gutter-x: 0;
}

.vh-no-gutter>.row>* {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.row.na-vh-row {
    --cui-gutter-x: 0 !important;
    --bs-gutter-x: 0 !important;
}

.nova-tooltip {
    position: fixed;
    pointer-events: none;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 12px;
    line-height: 1.2;
    white-space: pre-wrap;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
    background: rgba(33, 37, 41, .80);
    color: white;
    opacity: 0;
    transform: translateY(2px);
    transition: opacity 80ms ease, transform 80ms ease;
    z-index: 1080;
}

.nova-tooltip.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- ProgressStepperWidget --- */
.progress-stepper {
    gap: .5rem;
}

.progress-stepper__dots {
    gap: .5rem;
}

.progress-stepper--lg {
    gap: .75rem;
}

.progress-stepper--lg .progress-stepper__dots {
    gap: .625rem;
}

.progress-stepper--lg .progress-stepper__dot {
    width: 14px;
    height: 14px;
}

.progress-stepper--sm .progress-stepper__dot {
    width: 8px;
    height: 8px;
}

/* Base dot */
.progress-stepper__dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    display: inline-block;

    /* Default (pending/todo) */
    background: var(--cui-secondary-color, var(--bs-secondary, #6c757d));
    opacity: .55;

    /* little “ring” to show separation on white */
    box-shadow: 0 0 0 1px color-mix(in srgb, currentColor 20%, transparent);
}

/* Current step pops */
.progress-stepper__dots .progress-stepper__dot.is-current {
    opacity: 1;
    transform: scale(1.15);
    background: var(--cui-primary, var(--bs-primary, #0d6efd));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cui-primary, var(--bs-primary, #0d6efd)) 25%, transparent);
}

.progress-stepper--lg .progress-stepper__dots .progress-stepper__dot.is-current {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--cui-primary, var(--bs-primary, #0d6efd)) 25%, transparent);
}

/* Status colors (tuned for Bootstrap/CoreUI) */
.progress-stepper__dot.is-todo {
    background: var(--cui-secondary-color, var(--bs-secondary, #6c757d));
    opacity: .55;
}

.progress-stepper__dot.is-inprogress {
    background: var(--cui-primary, var(--bs-primary, #0d6efd));
    opacity: .9;
}

.progress-stepper__dot.is-pass {
    background: var(--cui-success, var(--bs-success, #198754));
    opacity: .95;
}

.progress-stepper__dot.is-warn {
    background: var(--cui-warning, var(--bs-warning, #ffc107));
    opacity: .95;
}

.progress-stepper__dot.is-fail {
    background: var(--cui-danger, var(--bs-danger, #dc3545));
    opacity: .95;
}

.progress-stepper__dot.is-skipped {
    background: color-mix(in srgb, var(--cui-secondary-color, var(--bs-secondary, #6c757d)) 55%, transparent);
    opacity: .7;
}

.ShowOutline {
    --cui-gutter-x: 0;
    --cui-gutter-y: 0;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100%;
    padding: 1rem;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .03);
    overflow: hidden;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

/* .ShowOutline:focus-within {
    border-color: var(--cui-primary, var(--bs-primary, #0d6efd));
    box-shadow: 0 0 0 0.2rem rgba(var(--cui-primary-rgb, 13, 110, 253), 0.25);
} */

.na-mode-toggle .btn-group .btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

.na-mode-toggle__icon svg {
    width: 16px;
    height: 16px;
    display: block;
}

.is-collapsed {
    display: none !important;
}

.is-collapsed {
    max-height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: max-height 160ms ease, opacity 160ms ease;
}

.na-collapsible-mainview {
    width: 100%;
}

/* Simple header button */
.na-collapsible-header {
    padding: 10px 14px;
    gap: 10px;
    border-radius: 8px;
    text-decoration: none;
}

.na-collapsible-header:hover {
    background: var(--na-collapsible-hover);
    text-decoration: none;
}

.na-collapsible-header:focus,
.na-collapsible-header:focus-visible {
    box-shadow: none;
    text-decoration: none;
}

/* Icon + title */
.na-collapsible-icon {
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: .75;
}

.na-collapsible-header[aria-expanded="true"] .na-collapsible-icon {
    opacity: 1;
}

.na-collapsible-title {
    line-height: 1.2;
}

.na-collapsible-card .na-collapsible-content {
    padding: .5rem 1rem 1rem 1rem;
}

/* Default (non-card) collapsible content style */
.na-collapsible-content {
    margin-left: 20px;
    padding-left: 10px;
    border-left: 1px solid rgba(0, 0, 0, .10);
    overflow: hidden;
    transition: height .35s ease;
    will-change: height;
}

.na-collapsible-header[aria-expanded="false"]+.na-collapsible-content {
    border-left-color: transparent;
    padding-left: 0;
    margin-left: 0;
}

.na-collapsible-header[aria-expanded="true"]+.na-collapsible-content {
    margin-top: 6px;
}

/* Card wrapper */
.na-collapsible-card {
    overflow: hidden;
    width: auto;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.na-collapsible-card .na-collapsible-content,
.na-collapsible-card .na-collapsible-content.show,
.na-collapsible-card .na-collapsible-content.collapsing,
.na-collapsible-card .collapse,
.na-collapsible-card .collapse.show,
.na-collapsible-card .collapsing {
    background-color: transparent !important;
}

/* Card summary/header */
.na-collapsible-card__summary {
    /* background: linear-gradient(180deg, var(--na-collapsible-soft), #fff 60%); */
    padding: 1rem;
    border-bottom: none;
    cursor: pointer;
}

.ShowOutline.na-collapsible-mainview {
    padding: 0 1rem;
}

.na-collapsible-card__summary button,
.na-collapsible-card__summary a,
.na-collapsible-card__summary [role="button"],
.na-collapsible-card__summary [role="link"] {
    cursor: pointer;
}

.na-collapsible-card__summary input,
.na-collapsible-card__summary textarea,
.na-collapsible-card__summary select {
    cursor: auto;
}

.na-collapsible-card {
    background: #fff;
}

.na-collapsible-card__summary {
    display: block;
    width: calc(100% + 2rem);
    margin-left: -1rem;
    margin-right: -1rem;
    padding: 1rem 1rem;
    background: transparent;
    transition: background-color 120ms ease;
}

.na-collapsible-card__summary:hover {
    background: var(--na-collapsible-hover);
}

.na-collapsible-card__summary:has(button:hover, a:hover, [role="button"]:hover, [role="link"]:hover, input:hover, textarea:hover, select:hover) {
    /* background: linear-gradient(180deg, var(--na-collapsible-soft), #fff 60%); */
    box-shadow: none;
}

.na-collapsible-card:has(.na-collapsible-content.show) .na-collapsible-card__summary,
.na-collapsible-card:has(.na-collapsible-content.collapsing) .na-collapsible-card__summary {
    border-bottom: 1px solid rgba(0, 0, 0, .06);
}

.na-collapsible-card:has(.na-collapsible-content.show) .na-collapsible-card__summary:hover,
.na-collapsible-card:has(.na-collapsible-content.collapsing) .na-collapsible-card__summary:hover {
    box-shadow: none;
}

.na-collapsible-card__toggle {
    color: inherit;
    text-decoration: none;
}

.na-collapsible-card__toggle:hover {
    text-decoration: none;
}

.na-collapsible-card__icon {
    opacity: .8;
}

.na-collapsible-card__toggle:hover .na-collapsible-card__icon {
    opacity: 1;
}

/* Card content overrides (remove tree indent/border, keep card padding) */
.na-collapsible-card .na-collapsible-content {
    background: #fff;
    padding: 1rem;
    margin-left: 0;
    border-left: none;
}

/* If you keep adding this class in TS, it should NOT kill padding */
.na-collapsible-content--card {
    margin-left: 0 !important;
    border-left: none !important;
    box-shadow: none !important;
    /* NOTE: removed padding-left:0 so it doesn't look "off" */
}

/* Collapse helper */
.na-collapse-display-none {
    display: none !important;
}

.form-control,
.form-select,
.form-multi-select-search,
.input-group-text,
.form-multi-select-selection-tags,
.form-multi-select-input-group,
.form-multi-select-selection,
.form-multi-select-search,
.date-picker-input-group,
.time-picker-input-group {
    background-color: transparent !important;
}

.na-appearance-disabled {
    cursor: not-allowed !important;
    opacity: 0.55;
    filter: grayscale(15%);
}

.na-appearance-disabled * {
    pointer-events: none !important;
}

.na-mode-toggle {
    display: inline-flex;
    align-items: center;
}

.ShowOutline.na-li {
    background: #fff;
}

.na-mode-toggle__group {
    display: inline-flex;
    align-items: stretch;
    gap: 2px;

    padding: 2px;
    border-radius: 999px;

    border: 1px solid var(--cui-border-color, #e5e7eb);
    background: color-mix(in srgb, var(--cui-body-bg, #ffffff) 92%, black);
}

.na-mode-toggle__btn {
    appearance: none;
    border: 0;
    background: transparent;
    border-radius: 999px;

    padding: 5px 10px;
    line-height: 1;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    font-weight: 600;
    font-size: .875rem;
    color: var(--cui-body-color, #111827);
    opacity: .65;

    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.na-mode-toggle__btn:hover:not(:disabled) {
    opacity: .9;
    background: color-mix(in srgb, var(--cui-body-bg, #ffffff) 87%, black);
}

.na-mode-toggle__btn.is-active {
    opacity: 1;
    background: var(--brand-primary, var(--cui-primary));
    color: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .10);
}

.na-mode-toggle__btn:disabled {
    cursor: not-allowed;
    opacity: .4;
}

.na-mode-toggle__icon,
.na-mode-toggle__icon svg {
    display: inline-flex;
}

.na-mode-toggle__btn {
    padding: 4px 9px;
}

/* Small */
.app-button.app-button-sm {
    padding: .25rem .5rem;
    gap: .375rem;
    font-size: .875rem;
    line-height: 1.1;
}

/* XSmall */
.app-button.app-button-xs {
    padding: .15rem .4rem;
    gap: .25rem;
    font-size: .8125rem;
    line-height: 1.1;
}

/* Ensure icon-only respects size too */
.app-button.is-icon-only.app-button-sm {
    padding: .25rem;
}

.app-button.is-icon-only.app-button-xs {
    padding: .15rem;
}

/* Keep SVG from stretching layout */
.app-button.app-button-sm .app-icon,
.app-button.app-button-xs .app-icon {
    flex: 0 0 auto;
}

.app-button.app-button-sm>span {
    margin-right: 0 !important;
}

.app-button.app-button-xs>span {
    margin-right: 0 !important;
}

.status-dot {
    margin-left: 5px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    box-shadow: 0 0 8px currentColor;
}

.sidebar.na-sidebar-autowidth {
    width: auto !important;
    min-width: 0 !important;
    max-width: max-content;
    flex: 0 0 auto !important;
}

.sidebar.na-sidebar-autowidth .sidebar-nav,
.sidebar.na-sidebar-autowidth .simplebar-content,
.sidebar.na-sidebar-autowidth .simplebar-content-wrapper {
    width: auto !important;
    min-width: 0 !important;
}

.sidebar.na-sidebar-autowidth .nav-item,
.sidebar.na-sidebar-autowidth .nav-group {
    width: auto !important;
}

.sidebar.na-sidebar-autowidth .nav-link,
.sidebar.na-sidebar-autowidth .nav-group-toggle {
    width: auto !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: flex-start;
    white-space: nowrap;
}

.sidebar.na-sidebar-autowidth.na-sidebar-collapsed {
    width: 45px !important;
    min-width: 45px !important;
    max-width: 45px !important;
}

.input-group>select.form-select {
    margin-inline-start: 0 !important;
}

.form-control,
.form-select {
    border-radius: 8px;
}

.input-group>.lookup-addon:has(.lookup-icon:empty) {
    display: none !important;
}

.input-group>.lookup-addon:has(.lookup-icon:empty)+.form-select,
.input-group>.lookup-addon:has(.lookup-icon:empty)+.form-control {
    margin-left: 0 !important;
    border-top-left-radius: 8px !important;
    border-bottom-left-radius: 8px !important;
}

/* CoreUI's date picker expects its input wrapper to be a flex row; without the Pro stylesheet the
   text input collapses to a couple of pixels and shows one character of the date. */
.date-picker-input-group {
    display: flex;
    align-items: stretch;
    width: 100%;
}

.date-picker-input-wrapper {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
}

.date-picker-input-wrapper .date-picker-input {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
}

/* The day under the mouse is previewed in a second input that must lie over the chosen date, not
   beside it. It stays transparent like the rest of the field, so the chosen date is hidden instead. */
.date-picker-input-wrapper .date-picker-input-preview {
    position: absolute;
    inset: 0;
    z-index: 5;
}

.date-picker-input-wrapper:has(> .date-picker-input-preview:not([style*="none"])) > .date-picker-input:not(.date-picker-input-preview),
.date-picker-input-wrapper:has(> .date-picker-input-preview:not([style*="none"])) > .date-picker-input:not(.date-picker-input-preview)::placeholder {
    color: transparent;
}

/* The clear button's hover rule in the bundled stylesheet predates the wrapper and no longer matches. */
.date-picker-input-group:hover .date-picker-input-wrapper:has(.date-picker-input:not(.date-picker-input-preview):not(:placeholder-shown)) ~ .date-picker-indicator:not(:last-child) {
    display: none;
}

.date-picker-input-group:hover .date-picker-input-wrapper:has(.date-picker-input:not(.date-picker-input-preview):not(:placeholder-shown)) ~ .date-picker-cleaner {
    display: flex;
}