/* Fill the routed thread pane and let the inner Chat own its own scroll:
   min-height:0 is required so the flex children may shrink and scroll
   instead of overflowing the column. */
.container-8916566 {
    height: 100%;
    min-height: 0;
}

.body-8916566 {
    min-height: 0;
    overflow: hidden;
}


.container-67f2b5c {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    /* Inside the dock's flex column: shrink instead of overflowing,
       so chatboxBody's own scroll area kicks in. */
    min-height: 0;
    background-color: var(--bs-secondary-bg-subtle);

    .chatboxContainer-67f2b5c {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 0;
        background-color: var(--bs-body-bg);
        overflow: hidden;

        .chatboxBody-67f2b5c {
            flex: 1;
            background-color: var(--bs-body-bg);
            overflow-y: auto;
            display: flex;
            flex-direction: column;
        }
    }

    .nav-tabs .nav-link.active {
        background-color: var(--bs-body-bg);
        border-bottom-color: var(--bs-body-bg);
    }
}

/* Adaptive selector pills (model / data-access): drive Bootstrap's `--bs-btn-*`
   from theme tokens so they read on any surface without a fixed `.btn-light`.
   Qualified with `.btn` to win the source-order tie against Bootstrap's base
   `.btn` (its CSS loads after this bundle). */
.selectorToggle-67f2b5c.btn {
    --bs-btn-bg: rgba(var(--bs-emphasis-color-rgb), 0.08);
    --bs-btn-border-color: transparent;
    --bs-btn-color: var(--bs-body-color);
    --bs-btn-hover-bg: var(--bs-secondary-bg);
    --bs-btn-hover-border-color: var(--bs-border-color);
    --bs-btn-hover-color: var(--bs-emphasis-color);
    --bs-btn-active-bg: var(--bs-secondary-bg);
    --bs-btn-active-color: var(--bs-emphasis-color);
}


.beamField-1f65623 {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-2xl);
    border: 1px solid var(--bs-border-color);
    background: var(--bs-tertiary-bg);
}

.beamGrid-1f65623 {
    position: absolute;
    inset: 0;
    opacity: 0.3;
    background-image:
        linear-gradient(color-mix(in srgb, var(--bs-body-color) 12%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--bs-body-color) 12%, transparent) 1px, transparent 1px);
    background-size: 24px 24px;
}

.beamUploading-1f65623 {
    position: absolute;
    top: 10px;
    bottom: 10px;
    width: 2px;
    background: linear-gradient(to bottom, transparent, var(--bs-primary), transparent);
    animation: aiBeamSweepHorizontal 9s ease-in-out infinite;
}

.beamAnalyzing-1f65623 {
    position: absolute;
    left: 10px;
    right: 10px;
    height: 2px;
    background: linear-gradient(to right, transparent, var(--bs-primary), transparent);
    animation: aiBeamSweepVertical 9s ease-in-out infinite;
}

@keyframes aiBeamSweepHorizontal {
    0% {
        left: 8%;
    }
    33% {
        left: 86%;
    }
    66% {
        left: 30%;
    }
    100% {
        left: 8%;
    }
}

@keyframes aiBeamSweepVertical {
    0% {
        top: 8%;
    }
    33% {
        top: 86%;
    }
    66% {
        top: 30%;
    }
    100% {
        top: 8%;
    }
}

.content-1f65623 {
    position: relative;
    min-height: 8rem;
    color: var(--bs-body-color);
}

/* Half the size of the file-analysis tab's fs-1 upload icon. */
.fileIcon-1f65623 {
    font-size: 1.25rem;
}

.phaseLabel-1f65623 {
    font-size: 0.875rem;
    color: var(--bs-secondary-color);
}


.welcomeMessage-2096523 {
    flex: 1;
    padding: var(--space-8);
    color: var(--bs-secondary-color);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
}

.messagesWrapper-2096523 {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.jumpToLatest-2096523 {
    position: absolute;
    bottom: var(--space-2);
    left: 50%;
    transform: translateX(-50%);
    border-radius: 2rem;
    box-shadow: var(--bs-box-shadow-sm);
}

.messagesContainer-2096523 {
    flex: 1;
    padding: var(--space-4);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);

    /* Reduce heading sizes in chat messages */
    h1 {
        font-size: 1.5rem;
        margin: var(--space-3) 0 var(--space-2);
    }

    h2 {
        font-size: 1.3rem;
        margin: 0.65rem 0 0.45rem;
    }

    h3 {
        font-size: 1.15rem;
        margin: 0.6rem 0 0.4rem;
    }

    h4 {
        font-size: 1.05rem;
        margin: 0.5rem 0 0.35rem;
    }

    h5 {
        font-size: 0.95rem;
        margin: 0.45rem 0 0.3rem;
    }

    h6 {
        font-size: 0.85rem;
        margin: 0.4rem 0 0.25rem;
    }

    /* Make tables horizontally scrollable with Bootstrap striped styling */
    table {
        display: block;
        width: 100%;
        overflow-x: auto;
        margin: var(--space-3) 0;
        border-collapse: collapse;
        font-size: 0.875rem;
        color: var(--bs-body-color);
        vertical-align: top;
        border: 1px solid var(--bs-border-color);

        thead,
        tbody,
        tfoot,
        tr,
        td,
        th {
            display: revert;
        }

        thead th {
            font-weight: 600;
            padding: var(--space-2);
            border-bottom: 2px solid var(--bs-border-color);
            /* Adaptive surface (not fixed-light --bs-light) so it reads on the
               dark dock too. */
            background-color: var(--bs-tertiary-bg);
            color: var(--bs-emphasis-color);
            text-align: left;
            white-space: nowrap;
        }

        td,
        th {
            padding: var(--space-2);
            border: 1px solid var(--bs-border-color);
            text-align: left;
        }

        tbody {
            tr:nth-of-type(odd) > * {
                background-color: rgba(var(--bs-emphasis-color-rgb), 0.05);
            }

            tr:hover > * {
                background-color: rgba(var(--bs-primary-rgb), 0.075);
                transition: background-color var(--transition-fast);
            }
        }
    }

}

.userText-2096523 {
    white-space: pre-wrap;
    word-wrap: break-word;
}

.assistantMessage-2096523 {
    .errorMessageContent-2096523 {
        max-width: 70%;
        padding: 0;
    }
}

.messageActions-2096523 {
    opacity: 0.35;
    transition: opacity var(--transition-fast);

    a {
        color: var(--bs-secondary-color);
    }

    &:hover {
        opacity: 1;
    }
}


.tabContent-476fddb {
    flex: 1;
    padding: var(--space-6);
    overflow-y: auto;
}

.itemsContainer-476fddb {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);

    .itemCard-476fddb {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        padding: var(--space-4);
        background-color: var(--bs-tertiary-bg);
        border: 1px solid var(--bs-border-color);
        border-radius: var(--radius-md);
        cursor: pointer;
        transition:
            background-color var(--transition-base),
            border-color var(--transition-base);

        &:hover {
            background-color: var(--bs-secondary-bg);
            border-color: var(--bs-primary);
        }

        .itemCardContent-476fddb {
            flex: 1;
            cursor: pointer;
            min-width: 0;

            .itemText-476fddb {
                margin: 0;
                color: var(--bs-body-color);
                font-size: 0.95rem;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                line-clamp: 2;
                -webkit-box-orient: vertical;
            }
        }
    }
}


.dropOverlay-56ca851 {
    position: fixed;
    inset: 0;
    z-index: 1070;
    pointer-events: none;
    background: rgba(var(--bs-primary-rgb), 0.08);
    /* Full-viewport drag indicator, not a drop target widget — the
       .dropzone utility's box layout doesn't apply here. */
    /* ast-grep-ignore prefer-dropzone-utility */
    border: 3px dashed var(--bs-primary);
}

.dropHint-56ca851 {
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    border: 1px solid var(--bs-primary);
    font-weight: 600;
}


.prefillCard-1360e4d {
    flex-shrink: 0;
}

.dropZone-1360e4d {
    cursor: pointer;
    border-style: dashed !important;
}


.stepsGroup-a87bb2a {
    max-width: 100%;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--radius-xl);
    background-color: var(--bs-body-bg);
    font-size: 0.85rem;

    &[open] .chevron-a87bb2a {
        transform: rotate(180deg);
    }
}

.groupSummary-a87bb2a {
    padding: var(--space-1) var(--space-3);
    cursor: pointer;
    list-style: none;

    &::-webkit-details-marker {
        display: none;
    }
}

.groupLabel-a87bb2a {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chevron-a87bb2a {
    transition: transform var(--transition-fast);
}

.groupBody-a87bb2a {
    border-top: 1px solid var(--bs-border-color);
}

.reasoningStep-a87bb2a {
    border-top: 1px solid var(--bs-border-color);
    font-size: 0.85rem;

    &:first-child {
        border-top: none;
    }
}

.reasoningSummary-a87bb2a {
    padding: var(--space-1) var(--space-3);
    cursor: pointer;
    list-style: none;

    &::-webkit-details-marker {
        display: none;
    }
}

.reasoningText-a87bb2a {
    padding: var(--space-2) var(--space-3);
    border-top: 1px dashed var(--bs-border-color);
    white-space: pre-wrap;
    max-height: 16rem;
    overflow: auto;
}


.thinkingIndicator-1d085dd {
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--radius-2xl);
    border-bottom-left-radius: var(--radius-sm);
    background-color: var(--bs-tertiary-bg);
}

.dots-1d085dd {
    gap: 0.3rem;

    span {
        width: 0.45rem;
        height: 0.45rem;
        border-radius: var(--radius-circle);
        background-color: var(--bs-secondary-color);
        animation: aiThinkingDot 1.2s infinite ease-in-out;
    }

    span:nth-child(2) {
        animation-delay: 0.2s;
    }

    span:nth-child(3) {
        animation-delay: 0.4s;
    }
}

@keyframes aiThinkingDot {
    0%,
    80%,
    100% {
        opacity: 0.3;
        transform: translateY(0);
    }

    40% {
        opacity: 1;
        transform: translateY(-0.15rem);
    }
}


.step-d83a9f5 {
    border-top: 1px solid var(--bs-border-color);
    font-size: 0.85rem;

    &:first-child {
        border-top: none;
    }
}

.stepSummary-d83a9f5 {
    padding: var(--space-1) var(--space-3);
    cursor: pointer;
    list-style: none;

    &::-webkit-details-marker {
        display: none;
    }
}

.stepLabel-d83a9f5 {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stepBody-d83a9f5 {
    padding: var(--space-2) var(--space-3);
    border-top: 1px dashed var(--bs-border-color);
}

.stepPre-d83a9f5 {
    font-size: 0.75rem;
    max-height: 16rem;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
    background-color: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--radius-sm);
    padding: var(--space-2);
    margin: var(--space-1) 0 var(--space-2);
}


.chartSvg-de799a4 {
    max-height: 300px;

    /* Axis labels / grid lines hardcode light greys as SVG presentation attrs;
       CSS overrides those, so re-point at adaptive tokens — readable on dark. */
    text {
        fill: var(--bs-secondary-color);
    }

    line {
        stroke: var(--bs-border-color);
    }
}

.legendMarker-de799a4 {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
}


.block-fc5bc89 {
    margin-bottom: var(--space-3);

    &:last-child {
        margin-bottom: 0;
    }
}

.fallback-fc5bc89 {
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 0.85rem;
    margin: 0;
    max-height: 400px;
    overflow-y: auto;
}


.chartSvg-f81f65d {
    max-height: 300px;

    /* Axis labels / grid lines hardcode light greys as SVG presentation attrs;
       CSS overrides those, so re-point at adaptive tokens — readable on dark. */
    text {
        fill: var(--bs-secondary-color);
    }

    line {
        stroke: var(--bs-border-color);
    }
}

.legendMarker-f81f65d {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}


.legendMarker-ede8857 {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}


.progressBar-12c6e9b {
    height: 8px;
}

.progressFill-12c6e9b {
    width: 0%;
}


.calendarTypeMultiselect-d91079e {
    min-width: 22rem;
}


.pastEvent-9695e44,
.pastEvent-9695e44 a {
    color: var(--bs-secondary) !important;
    opacity: 0.75;
}

.userImage-9695e44 {
    margin-top: -15px;
    margin-bottom: -15px;
}


.compactCalendar-a4b8ba0 {
    min-height: unset;

    /* Force compact row heights even in full-month mode (num_weeks=None),
       where the underlying CalendarBodyMonthly does not apply its `.compact`
       modifier. Without these overrides the widget grows to 5 × 10rem just
       for the week rows, overflowing the dashboard grid. Stylance hashes
       class names so we target via [class*="..."]; the extra .dates ancestor
       lifts specificity above body_monthly.css's `.dates .dayItem` rule. */
    [class*="dates"] {
        flex: none;
        grid-auto-rows: auto;
    }

    [class*="dates"] [class*="dayItem"] {
        cursor: default;
        pointer-events: none;
        min-height: unset;
    }

    /* Clip horizontally so a long event title that overflows its column does
       not leak past the right edge of the row. Vertical overflow is left
       visible — body_monthly.css already sizes weekRow to its lane count, so
       there is nothing to clip vertically in normal use. */
    [class*="dates"] [class*="weekRow"] {
        min-height: unset;
        overflow-x: hidden;
    }
}


.flag-13baac3 {
    min-width: 3ex;
    text-align: center;
    margin-inline-end: var(--space-1);
}


.pageViewSpaced-d8ca171 {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    margin-top: var(--space-3);
    width: 100%;
    padding-right: calc(var(--bs-gutter-x) * 0.5);
    padding-left: calc(var(--bs-gutter-x) * 0.5);
    margin-right: auto;
    margin-left: auto;
}

.pageViewFlex-d8ca171 {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    /* Override implicit `min-height: auto` so flex-grow can shrink
       this below content height — needed for inner scroll containers
       (e.g. SplitTabList paneBody) to bound correctly. */
    min-height: 0;
}

@keyframes tabInA {
    from {
        opacity: 0;
        transform: translateY(-120px);
    }
}

@keyframes tabInB {
    from {
        opacity: 0;
        transform: translateY(-120px);
    }
}

.animA-d8ca171 > * {
    animation: tabInA 0.2s ease-out;
}

.animB-d8ca171 > * {
    animation: tabInB 0.2s ease-out;
}

@media (prefers-reduced-motion: reduce) {
    .animA-d8ca171 > *,
    .animB-d8ca171 > * {
        animation: none;
    }
}

.tabOutlet-d8ca171 {
    overflow: hidden;

    &:has(nav.navbar.screenBottom) {
        overflow: visible;
        clip-path: inset(0 -100vw);
    }

    /* Let route-local sticky sidebars stick to the page scroll instead of the
       tab outlet's non-scrolling overflow container. */
    &:has([data-sticky-sidebar]) {
        overflow: visible;
        clip-path: inset(0 -100vw);
    }

    /* Same un-trapping for a sticky `screenBottom` table footer: the pane's
       `overflow` would otherwise pin the footer to the (non-scrolling) pane
       instead of letting it stick to the page scroll. */
    &:has(tfoot.screenBottom) {
        overflow: visible;
        clip-path: inset(0 -100vw);
    }

    & nav.navbar.screenBottom {
        z-index: 1020;
    }
}

.tabSpaced-d8ca171 {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    margin-top: var(--space-3);
    width: 100%;
    padding-right: calc(var(--bs-gutter-x) * 0.5);
    padding-left: calc(var(--bs-gutter-x) * 0.5);
    margin-right: auto;
    margin-left: auto;
}

.tabFlex-d8ca171 {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}


/* Skin the mantiq `<Multiselect>` trigger so it renders as a flat
   icon-only button. The mantiq component always wraps its trigger in
   `.form-control.form-select`, which Bootstrap paints white via
   `background-color: var(--bs-body-bg)` and tops with a caret SVG via
   `background-image`. Stylance-scoped descendants of `.paneSelect` would
   normally outrank Bootstrap on specificity, but Bootstrap's stylesheet
   gets loaded after the per-component modules in dev builds, so we use
   `!important` to make the override deterministic. */

.paneSelect-c54e4b4 .form-control,
.paneSelect-c54e4b4 .form-select,
.paneSelect-c54e4b4 .form-control.form-select {
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    min-height: 0 !important;
    width: auto !important;
    color: inherit !important;
}

.paneSelect-c54e4b4 .form-control.form-select > button {
    background: transparent;
    border: 0;
    padding: var(--space-1) var(--space-2);
    width: auto;
    color: var(--bs-body-color, inherit);
    line-height: 1;
    border-radius: var(--bs-border-radius, 0.375rem);
    transition: background-color 120ms ease, color 120ms ease;
}

.paneSelect-c54e4b4 .form-control.form-select > button:hover {
    background-color: var(--bs-secondary-bg, rgba(0, 0, 0, 0.05));
    color: var(--bs-primary, #0d6efd);
}

.paneSelect-c54e4b4 .form-control.form-select > button:focus,
.paneSelect-c54e4b4 .form-control.form-select > button:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}



.resizeHandle-f6e3cd9 {
    flex: 0 0 8px;
    cursor: col-resize;
    user-select: none;
    touch-action: none;
    align-self: stretch;
    position: relative;
    background-color: transparent;

    /* Visible 2px line centered in the 8px hit area. */
    &::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 3px;
        width: 2px;
        background-color: var(--bs-border-color, #dee2e6);
        transition: background-color 120ms ease;
    }

    &:hover::after,
    &.resizing::after {
        background-color: var(--bs-primary, #0d6efd);
        left: 1px;
        width: 6px;
    }
}


/* Layout primitives Bootstrap can't express. The flex/sizing utilities
   live on the view (`d-flex flex-column flex-grow-1 w-100` etc.); only
   `min-{h,w}: 0` and similar leftover declarations stay here, plus the
   `.splitTabList` / `.panesRow` / `.pane` class hooks needed by the
   `.multiPane` and `:global(.focused)` selectors below. */

.splitTabList-fd3e08d {
    min-height: 0;

    & .tabBarTabs-fd3e08d {
        min-width: 0;
    }

    & .iconButton-fd3e08d {
        background: transparent;
        border: 0;
        padding: var(--space-1) var(--space-2);
        color: var(--bs-body-color, inherit);
        cursor: pointer;
        line-height: 1;
        border-radius: var(--bs-border-radius, 0.375rem);
        transition: background-color 120ms ease, color 120ms ease;

        &:hover {
            background-color: var(--bs-secondary-bg, rgba(0, 0, 0, 0.05));
            color: var(--bs-primary, #0d6efd);
        }

        &:focus-visible {
            outline: 0;
            box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
        }
    }
}

.panesRow-fd3e08d {
    min-height: 0;
}

.pane-fd3e08d {
    /* `flex-basis: 0` makes the resize-handle's percentage-based
       `flex-grow` values map proportionally to pane widths; Bootstrap
       has no equivalent utility. */
    flex-basis: 0;
    min-width: 0;
    min-height: 0;

    &.focused {
        box-shadow: inset 0 -2px 0 var(--bs-primary, #0d6efd);
    }

    & .paneHeaderLabel-fd3e08d {
        min-width: 0;
    }

    & .paneClose-fd3e08d {
        font-size: 0.75rem;
    }
}

/* Multi-pane only. `overflow: hidden` on an ancestor makes it a
   sticky-containing-block, so applying it unconditionally would
   pin a child `position: sticky` nav to `.pane`'s bottom (off
   screen) instead of the document viewport. */
.splitTabList-fd3e08d.multiPane .panesRow-fd3e08d,
.splitTabList-fd3e08d.multiPane .pane-fd3e08d {
    overflow: hidden;
}

.paneBody-fd3e08d {
    flex: 1 1 auto;
    overflow: auto;
    /* min-height/width: 0 let the flex item shrink below content size,
       so `overflow: auto` produces scrollbars instead of expanding. */
    min-height: 0;
    min-width: 0;

    & > * {
        animation: tabInSplit 0.18s ease-out;
    }
}

.splitTabList-fd3e08d.multiPane .paneBody-fd3e08d {
    overflow: auto;
}

/* Defeat layout.css's `.tabOutlet:has(> nav.screenBottom)` rule that
   sets overflow:visible — in split mode paneBody must keep scrolling. */
.splitTabList-fd3e08d.multiPane .paneBody-fd3e08d:has(> nav.navbar.screenBottom) {
    overflow: auto;
    clip-path: none;
}

/* Likewise for a `screenBottom` table footer: in split mode the pane keeps
   its own scroll, so the footer sticks to the pane (not the page). */
.splitTabList-fd3e08d.multiPane .paneBody-fd3e08d:has(tfoot.screenBottom) {
    overflow: auto;
    clip-path: none;
}

/* The bottom action bar lives outside the pane, below the panes row, so the
   footer pins to the pane's own bottom rather than take app.css's viewport
   offset (--screen-bottom-nav-height), which would float it up inside the pane.
   !important overrides that offset rule, which has equal specificity. */
.splitTabList-fd3e08d.multiPane .paneBody-fd3e08d tfoot.screenBottom {
    bottom: 0 !important;
}

/* Two-axis sticky pin to the pane viewport. `left: 0` handles wide
   tables that scroll horizontally; margins reset because app.css sets
   negative gutter margins that only make sense outside a pane. */
.splitTabList-fd3e08d.multiPane .paneBody-fd3e08d .navbar.screenBottom {
    position: sticky;
    bottom: 0;
    left: 0;
    margin-left: 0;
    margin-right: 0;
    z-index: var(--bs-zindex-sticky, 1020);
}

@keyframes tabInSplit {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .paneBody-fd3e08d > * {
        animation: none;
    }
}


.mapContainer-a4440b4 {
    position: relative;
    display: flex;
    overflow: hidden;

    .controls-a4440b4 {
        position: absolute;
        z-index: 1;
        top: 10px;
        [dir="ltr"] & {
            right: 10px;
        }

        [dir="rtl"] & {
            right: 10px;
        }
    }

    .map-a4440b4 {
        flex-grow: 1;
    }

    .offcanvas {
        position: absolute !important;
        top: 0 !important;
        bottom: 0 !important;
        height: auto !important;
        max-height: 100% !important;
    }

    [dir="ltr"] & .offcanvas-end {
        right: 0 !important;
    }

    [dir="rtl"] & .offcanvas-end {
        left: 0 !important;
    }

    .offcanvas-backdrop {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
    }
}

.mapFullScreen-a4440b4 {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1060 !important;
    background-color: white;
}

.streetViewContainer-a4440b4 {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    background: #000;
}

.streetViewVisible-a4440b4 {
    display: block;
}

.streetViewPanorama-a4440b4 {
    width: 100%;
    height: 100%;
}

.streetViewCloseBtn-a4440b4 {
    position: absolute;
    z-index: 11;
    top: 10px;
    background: white;
    border: none;
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);

    &:hover {
        background: #f0f0f0;
    }

    [dir="ltr"] & {
        right: 10px;
    }

    [dir="rtl"] & {
        left: 10px;
    }
}

*:has(.mapFullScreen-a4440b4) {
    view-transition-name: none !important;
}


.accessGrid-5987577 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
    grid-gap: 1.25rem;
    align-items: start;

    & .userImageContainer-5987577 {
        padding: 0;
        overflow: clip;
        flex-shrink: 0;

        & img {
            object-fit: cover;
            width: 2.25em;
            height: 2.25em;
        }
    }
}

.inputGroupHeight-5987577 {
    height: 2.25em;
}

.userSelectInline-5987577 {
    min-width: 22rem;
}


@keyframes badgeCounterUpdate {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(var(--bs-primary-rgb), 0.7);
    }
    30% {
        transform: scale(1.3);
        box-shadow: 0 0 0 4px rgba(var(--bs-primary-rgb), 0);
    }
    50% {
        transform: scale(0.95);
    }
    70% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(var(--bs-primary-rgb), 0);
    }
}

.badgeCounter-64623ad {
    transition: all 0.3s ease-out;
    transform-origin: center;
    transition-property: transform, box-shadow, background-color, color;

    &.updating-64623ad {
        animation: badgeCounterUpdate 0.6s ease-out;
    }
}


.companyBadge-d8f231e {
    color: var(--bs-dark);
    background-color: var(--bs-white);
    display: inline-block;
    padding: 0 var(--space-1);
    height: 1.5em;
    line-height: 1.25;
    font-size: 75%;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap;
    vertical-align: text-bottom;
    border-radius: var(--bs-border-radius);
    border: solid var(--bs-border-width) black;
}


.companyInlineMultiSelect-3694dc0 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    grid-gap: 1rem;
    align-items: start;

    .selectedCompanyIconContainer-3694dc0 {
        padding: 0;
        overflow: clip;

        img {
            max-height: 2.25em;
            width: 2.25em;
            object-fit: contain !important;
        }
    }
}

/* Rendered inside `<Multiselect children>`, which portals out of the wrapper.
   Stylance-hashed so it stays unique to this component even at top level. */
.companyIconContainer-3694dc0 {
    display: inline-block;
    width: 4ex;
    text-align: center;
    margin-inline-end: var(--space-4);

    img {
        width: auto;
        max-width: 4ex;
        object-fit: contain !important;
    }
}


.companySvgIcon-e9448e1 {
    display: inline-block;
    vertical-align: middle;
    max-height: 45px;
}


.companyIconContainer-3a5d784 {
    display: inline-block;
    width: 4ex;
    text-align: center;
    margin-inline-end: var(--space-4);

    img {
        width: auto;
        max-width: 4ex;
        object-fit: contain !important;
    }
}


/* Rendered inside `<SingleSelect children>` which portals out of the
   SingleSelect wrapper. Stylance-hashed so it stays unique to this component
   at top level. */
.iconContainer-4f4bdbf {
    display: inline-block;

    table & {
        width: 1.5rem;
        text-align: center;
        margin-inline-end: var(--space-3);
    }

    img {
        width: 1.5rem;
        max-height: 1.5rem;
        margin-inline-end: var(--space-3);
        object-fit: contain !important;
    }
}


.image-2ab86ce {
    width: 100%;
    object-fit: cover;
    border-radius: var(--bs-border-radius);
    display: block;
}


.donutChart-63925fc {
    overflow: visible;
}

.track-63925fc {
    /* Background ring: adaptive so it follows the surface instead of a fixed
       light grey that read near-white on dark themes. */
    stroke: var(--bs-border-color);
}

.segment-63925fc {
    transition: stroke-width var(--transition-fast);
    cursor: pointer;
}

.legendItem-63925fc {
    cursor: pointer;
    transition: font-weight var(--transition-fast);
}

.centerContent-63925fc {
    pointer-events: none;
}


.feedbackPanel-d0268bc {
    padding: 0;
    margin-bottom: var(--space-5);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 300px;
    overflow: hidden;
    z-index: 10000;

    & .feedbackPanelList-d0268bc {
        margin: 0;
        padding: 0;
        list-style-type: none;
        width: 100%;

        & .feedbackPanelItem-d0268bc {
            margin: 0;
            padding: 0;
            display: block;
            width: 100%;
            transition: background-color var(--transition-base);

            &:hover {
                filter: brightness(85%);
            }

            & .feedbackPanelItemContent-d0268bc {
                padding: 12px 15px;
                width: 100%;
            }
        }
    }
}


.previewButton-db538d4 {
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: zoom-in;
}

/* Mirrors FileLightboxPortal: dark backdrop comes from Bootstrap, the
   content layer is a transparent flex column, and the body is a flex
   centre with the image scaled to fit via object-fit:contain. Chained
   with `:global(.modal-…)` to outrank Bootstrap's responsive defaults. */
.previewDialog-db538d4.modal-dialog {
    width: 90%;
    max-width: 1400px;
}

/* `pointer-events: none` lets clicks outside the image fall through to
   Bootstrap's backdrop-dismiss; the image and close button re-enable
   pointer events on themselves so they remain interactive. */
.previewContent-db538d4.modal-content {
    position: relative;
    height: 90vh;
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 0;
    box-shadow: none;
    pointer-events: none;
}

.previewBody-db538d4 {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    min-height: 0;
    position: relative;
}

/* `height: 100%; width: auto` collapses the <img> box to the bitmap's
   own aspect ratio inside the centred flex parent, so the rounded
   corners trace the visible image rather than the surrounding box. */
.previewImage-db538d4 {
    height: 100%;
    width: auto;
    max-width: 100%;
    border-radius: var(--bs-border-radius-lg);
    pointer-events: auto;
}

.previewClose-db538d4.btn-close {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    z-index: 2;
    width: 2.5rem;
    height: 2.5rem;
    background-color: var(--bs-body-bg) !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    opacity: 1;
    background-size: 1rem;
    background-position: center;
    pointer-events: auto;
}

.previewClose-db538d4.btn-close:hover {
    background-color: var(--bs-body-bg) !important;
    opacity: 0.85;
}


.invitationsHolder-43d281c {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    grid-gap: 1rem;
    align-items: start;
    margin-bottom: var(--space-4);
    .input-group {
        .input-group-text {
            background-color: var(--bs-secondary-bg);
        }
    }
}


.userImageContainer-1eca496 {
    padding: 0;
    overflow: clip;
    flex-shrink: 0;

    & img {
        object-fit: cover;
        width: 2.25em;
        height: 2.25em;
    }
}

.userSelectInline-1eca496 {
    min-width: 22rem;
}

/*
 * Stop the Read / Edit / Delete column headers from drifting right as the
 * User column widens to fit longer names. Each permission column gets a
 * fixed footprint (icon + short label + checkbox padding) so the User
 * column absorbs all extra horizontal space.
 */
.permissionCol-1eca496 {
    width: 5rem;
}

.actionsCol-1eca496 {
    width: 3rem;
}



.pageHeaderBreadcrumb-b587cb5 {
    font-size: 1.75rem;
    --bs-breadcrumb-divider: var(--pageHeaderDivider, ">");

    a:not(:hover) {
        text-decoration: none;
    }

    li > svg[role="graphics-symbol"],
    li > a > svg[role="graphics-symbol"] {
        margin-inline-end: var(--space-2);
    }

    li > a > img {
        margin-inline-end: var(--space-2);
    }
}


.statusPanel-a66280b {
    .breadcrumbTriangle-a66280b {
        --breadcrumbTriangle-bg: var(--bs-tertiary-bg);
        --breadcrumbTriangle-arrow-color: var(--bs-body-bg);
        display: inline-block;
        overflow: hidden;
        border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0;
        counter-reset: flag;
        text-align: center;
        padding: 0 0.125em;
        vertical-align: middle;
        background-color: var(--breadcrumbTriangle-bg);

        /* Dark theme override */
        [data-bs-theme="dark"] & {
            --breadcrumbTriangle-arrow-color: var(--bs-body-bg);
        }

        li {
            text-decoration: none;
            outline: none;
            display: block;
            float: left;
            line-height: 3em;
            padding: 0 1em 0 3em;
            position: relative;
            margin: 0.125em 0;
            color: var(--bs-body-color);
            background: var(--bs-secondary-bg);
            transition: all 0.5s;

            /* Arrow after each item */
            &::after {
                content: "";
                position: absolute;
                top: 0;
                right: -1.5em;
                width: 3em;
                height: 3em;
                transform: scale(0.707) rotate(45deg);
                z-index: 1;
                box-shadow: 0.2em -0.2em 0 0.2em
                    var(--breadcrumbTriangle-arrow-color);
                border-radius: 0 var(--bs-border-radius) 0 3em;
                background-color: var(--bs-secondary-bg);
                transition: all 0.5s;
            }

            /* Number circles for numbered lists */
            &::before {
                color: var(--bs-body-color);
                background: var(--bs-body-bg);
                box-shadow: 0 0 0 0.1em var(--bs-border-color);
            }

            &:first-child {
                padding-left: 1em;
                border-radius: var(--bs-border-radius) 0 0
                    var(--bs-border-radius);

                &::before {
                    left: 1em;
                }
            }

            &:last-child {
                border-radius: 0 var(--bs-border-radius-sm)
                    var(--bs-border-radius-sm) 0;

                &::after {
                    content: none;
                }
            }

            /* Single item (e.g., cancelled status) needs rounded corners on all sides */
            &:first-child:last-child {
                border-radius: var(--bs-border-radius);
            }

            /* Coloured chip states. Each variant sets `--chipBg` (and
             * `font-weight: bold` for the in-flight states), the shared block
             * paints the chip and its arrow ::after pseudo-element. Adding a
             * new state = one line. */
            &.active-a66280b,
            &.cancelled-a66280b,
            &.success-a66280b {
                color: var(--chipFg) !important;
                background: var(--chipBg) !important;
                -webkit-print-color-adjust: exact;
                print-color-adjust: exact;

                &::after {
                    background: var(--chipBg) !important;
                    -webkit-print-color-adjust: exact;
                    print-color-adjust: exact;
                }
            }

            &.active-a66280b    { --chipBg: var(--bs-primary); --chipFg: var(--bs-white); font-weight: bold; }
            &.cancelled-a66280b { --chipBg: var(--bs-danger);  --chipFg: var(--bs-white); font-weight: bold; }
            &.success-a66280b   { --chipBg: var(--bs-success); --chipFg: var(--bs-white); }

            /* Warning override for the active step. Used when the status's
             * `basic_theme_color()` is `Warning` (e.g. ReviewChangesRequired)
             * so the chip reads as a "needs attention" state instead of the
             * default in-progress blue. Yellow + white is unreadable, so
             * darken the text to match Bootstrap's `text-bg-warning` pairing. */
            &.activeWarning-a66280b { --chipBg: var(--bs-warning); --chipFg: var(--bs-dark); }

            /* Danger override for the active step. Used for context-sensitive
             * problem states the static `basic_theme_color()` can't express —
             * e.g. an overdue lease invoice still in `PaymentExpected` should
             * read as DUE. Opt-in via `WorkflowConfig::chip_is_danger`.
             *
             * MUST stay declared after `.activeWarning` so the cascade
             * resolves to red when both classes coexist on the same `<li>`.
             * If you move this rule above the warning block the chip will
             * silently turn yellow. */
            &.activeDanger-a66280b { --chipBg: var(--bs-danger); --chipFg: var(--bs-white); font-weight: bold; }
        }
    }

    .alert {
        margin-bottom: 0;
    }

    .float-end button::last-child.me-2 {
        margin-inline-end: 0 !important;
    }

    /* The action-button footer becomes a flex-wrap row so buttons get
     * consistent horizontal and vertical gaps when they wrap. The
     * `.float-end` group (Comment / Hold / Cancel / Override) doesn't
     * float in a flex container — `margin-left: auto` pushes it to the
     * trailing edge instead, matching the original visual. The per-button
     * `me-2` margins become redundant inside this flex parent (gap handles
     * spacing). */
    .card-footer {
        /* ast-grep-ignore prefer-bootstrap-flex-utility */
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--space-2);
    }

    .card-footer .float-end {
        margin-left: auto;
        float: none !important;
    }

    /* Scope to direct children only — buttons inside `.float-end` aren't
     * flex items of the card-footer, so they still need their own `me-2`
     * margins to space themselves apart. */
    .card-footer > .me-2 {
        margin-inline-end: 0 !important;
    }
}


.secondaryBreadcrumb-601d02e {
    --bs-breadcrumb-divider: var(--secondaryBreadcrumbDivider, "/");

    a:not(:hover) {
        text-decoration: none;
    }

    & > ol {
        margin-bottom: 0;
    }

    li > svg[role="graphics-symbol"],
    li > a > svg[role="graphics-symbol"] {
        margin-inline-end: var(--icon-spacing);
    }

    li > a > img {
        height: 24px;
        max-height: 24px;
        width: auto;
    }
}


.userImageContainer-768ad49 {
    padding: 0;
    overflow: clip;
    flex-shrink: 0;

    & img {
        object-fit: cover;
        width: 2.25em;
        height: 2.25em;
    }
}

.minWidth0-768ad49 {
    min-width: 0;

    & .sharedUrl-768ad49 {
        word-break: break-all;
    }
}


.statusChangeLogPanel-944173f {
    list-style: none;
    padding: 0;
    border-bottom-left-radius: var(--bs-border-radius);
    border-bottom-right-radius: var(--bs-border-radius);
    overflow: clip;

    .card:has(+ &) {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    .card + & {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

    li {
        border-inline-start: 4px solid var(--bs-info);
        background-color: var(--bs-info-bg-subtle);

        p {
            margin-top: var(--space-2);
            margin-bottom: 0;
        }

        cite {
            font-style: normal;
            font-weight: 500;
        }
    }

    .item-944173f {
        display: grid;
        grid-template-rows: 1fr;
        opacity: 1;
        padding: var(--space-3) var(--space-4);
        transition:
            grid-template-rows 0.3s ease-in-out,
            opacity 0.3s ease-in-out,
            padding 0.3s ease-in-out,
            margin 0.3s ease-in-out;

        &.collapsed-944173f {
            grid-template-rows: 0fr;
            opacity: 0;
            padding-top: 0;
            padding-bottom: 0;
            margin: 0;
        }

        .itemInner-944173f {
            min-height: 0;
            overflow: hidden;
        }

        .notes-944173f {
            white-space: pre-wrap;

            &:empty {
                display: none;
            }
        }
    }
}
.footerContainer-944173f {
    padding: 0 var(--bs-border-radius);

    .expandFooter-944173f {
        border-top: 0.175rem solid var(--bs-secondary) !important;
    }
}


/* Pinned to the same value the active `.cardedTab` nav-link uses, so tab and
   card read as one surface even when a theme restyles `.card` directly.
   `.tabCard:global(.card)` out-specifies the theme's own `.card` rule. */
.tabCard-c18ba30.card {
    background-color: var(--bs-card-bg, var(--bs-body-bg)) !important;
}

/* Connected look for tabs whose pane renders in a TabCard: put the global
   `cardedTab` class on the tab's nav-item. `!important` beats the themes,
   which set the active-tab colors with `!important` themselves. */
.nav-tabs .cardedTab .nav-link.active {
    background-color: var(--bs-card-bg, var(--bs-body-bg)) !important;
    border-bottom-color: var(--bs-card-bg, var(--bs-body-bg)) !important;
    color: var(--bs-body-color) !important;
}

/* Financial sets the card surface via `.card { --bs-body-bg: var(--bs-light) }`;
   a nav-tab is not a `.card`, so mirror that on the active carded tab. */
body.theme-financial .nav-tabs .cardedTab .nav-link.active,
.themeBox#theme-financial .nav-tabs .cardedTab .nav-link.active {
    --bs-body-bg: var(--bs-light);
}

/* Keeps Chrome from leaving the active tab's bottom border visible above the
   card. Put `has-carded-tab` on the `.nav-tabs` list that holds `cardedTab`
   items. */
.nav-tabs.has-carded-tab .nav-item {
    line-height: 1.6;
}


.input-group .input-group-text:has(img.userImage-67c3db5) {
    overflow: clip;

    img.userImage-67c3db5 {
        object-fit: cover !important;
    }
}

.userImage-67c3db5 {
    object-fit: cover;
    max-width: 100%;
    max-height: 100%;
    /* Center inline avatars against adjacent text. Ignored when the avatar is a
       flex item (flex layouts already center via align-items), harmless for
       standalone avatars; fixes the non-flex inline-next-to-text call sites. */
    vertical-align: middle;
}

.square-67c3db5 {
    aspect-ratio: 1 / 1;
    height: auto;
}


.userInlineMultiselect-fc9eaae {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    grid-gap: 1rem;
    align-items: start;

    .disabledInput-fc9eaae {
        .input-group-text {
            background-color: var(--bs-secondary-bg);
        }
    }
}

/* The rules below target elements inside the dropdown menu. The menu renders
   in a <Portal> (under <body> or the open modal) and is no longer a DOM
   descendant of `.userInlineMultiselect`, so we can't scope to that wrapper.
   The classes used here are stylance-hashed and unique to this component,
   so writing them at the top level stays scoped in practice. */

.userImageContainer-fc9eaae {
    padding: 0;
    overflow: clip;

    img {
        object-fit: cover;
        width: 2.25em;
        height: 2.25em;
    }
}

td:has(.multiselectSelectedIcon-fc9eaae) {
    display: none;
}

.dropdown-menu:has(.multiselectSelectedIcon-fc9eaae) td {
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
}

/* Applied to the portaled menu via `menu_class`. Hides the select-all /
   unselect-all icon buttons next to the search input; per-row delete
   buttons live outside the menu and are untouched. */
.hideBulkActions-fc9eaae {
    input[type="search"] ~ button {
        display: none;
    }
}


.userAvatar-2d12a7a {
    width: 2.25em;
    height: 2.25em;
    max-width: 2.25rem;
    max-height: 2.25rem;
    overflow: hidden;
    flex-shrink: 0;

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


.ratingContainer-ed1a3ba {
    position: relative;
    z-index: 2; /* sit above .stretched-link::after (z-index: 1) */
    width: fit-content;

    .hoverTooltip-ed1a3ba {
        position: absolute;
        left: 50%;
        gap: 0.45rem;
        white-space: nowrap;
        padding: var(--bs-tooltip-padding-y, 0.25rem)
            var(--bs-tooltip-padding-x, 0.5rem);
        border-radius: var(
            --bs-tooltip-border-radius,
            var(--bs-border-radius, 0.375rem)
        );
        background-color: var(--bs-tooltip-bg, var(--bs-emphasis-color));
        color: var(--bs-tooltip-color, var(--bs-body-bg));
        font-size: var(--bs-tooltip-font-size, 0.875rem);
        box-shadow: var(--bs-box-shadow-sm);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition:
            opacity 120ms ease,
            transform 120ms ease,
            visibility 120ms ease;
        z-index: var(--bs-tooltip-zindex, 1080);

        &::after {
            content: "";
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            border-style: solid;
        }
    }

    .hoverTooltipTop-ed1a3ba {
        bottom: calc(100% + var(--bs-tooltip-arrow-height, 0.4rem));
        transform: translate(-50%, 0.25rem);

        &::after {
            top: 100%;
            border-width: var(--bs-tooltip-arrow-height, 0.4rem)
                calc(var(--bs-tooltip-arrow-width, 0.8rem) / 2) 0;
            border-color: var(--bs-tooltip-bg, var(--bs-emphasis-color))
                transparent transparent;
        }
    }

    .hoverTooltipBottom-ed1a3ba {
        top: calc(100% + var(--bs-tooltip-arrow-height, 0.4rem));
        transform: translate(-50%, -0.25rem);

        &::after {
            bottom: 100%;
            border-width: 0 calc(var(--bs-tooltip-arrow-width, 0.8rem) / 2)
                var(--bs-tooltip-arrow-height, 0.4rem);
            border-color: transparent transparent
                var(--bs-tooltip-bg, var(--bs-emphasis-color));
        }
    }

    &:hover,
    &:focus-within {
        .hoverTooltip-ed1a3ba {
            opacity: var(--bs-tooltip-opacity, 0.9);
            visibility: visible;
            transform: translate(-50%, 0);
        }
    }

    .tooltipText-ed1a3ba {
        min-width: 0;
        gap: 0.15rem;
    }
}


.entriesTable-aee9449 {
    table-layout: fixed;
}

.colDate-aee9449 {
    width: 20%;
}

.colAmount-aee9449 {
    width: 10%;
}

.colActions-aee9449 {
    width: 5%;
}


.formField-14cdb60 {
    max-width: 400px;
}


.tableHead-89d6fe4 {
    border-bottom: 1px solid black;
}

.totalFirstRow-89d6fe4 {
    border-top: 1px solid black;
}


.dateColumn-90506d2 {
    min-width: 10rem;
}


.widgetEmpty-7baaca7 {
    text-align: center;
    padding: var(--space-8) var(--space-4);
}

.widgetEmptyIcon-7baaca7 {
    font-size: 2rem;
    color: var(--bs-secondary-color);
    margin-bottom: var(--space-2);
}

.widgetEmptyText-7baaca7 {
    color: var(--bs-secondary-color);
    margin: 0;
}


.contentLayer-72f6989 {
    position: relative;
    z-index: 1;
}

.bottomNavLayer-72f6989 {
    position: relative;
    z-index: 1;
}


.tableLayer-77f5f89 {
    position: relative;
    z-index: 1;
}

.bottomNavLayer-77f5f89 {
    position: relative;
    z-index: 1;
}


.treeView-67d9b51 {
    --tree-line-color: var(--bs-border-color);
    --tree-hover-bg: var(--bs-tertiary-bg);
    --tree-button-bg: var(--bs-body-bg);
    --tree-button-fg: var(--bs-tertiary-color);
    --tree-node-height: 2rem;
    overflow: clip;
}

.treeList-67d9b51 {
    list-style: none;
    margin: 0;
    padding: 0;
}

.treeNode-67d9b51 {
    position: relative;
    line-height: normal;
}

.treeNodeContent-67d9b51 {
    height: var(--tree-node-height);
    padding: 0 var(--space-2);
    cursor: default;
    border-radius: var(--radius-sm);
    transition: background-color 0.15s ease;

    &:hover {
        background-color: var(--tree-hover-bg);
    }
}

.treeIndent-67d9b51 {
    height: 100%;
}

.treeLine-67d9b51 {
    width: 1.25rem;
    position: relative;
    flex-shrink: 0;

    /* Vertical line - full height to connect nodes */
    &::before {
        content: "";
        position: absolute;
        left: 0.525rem;
        top: calc(-0.26 * var(--tree-node-height));
        bottom: calc(-0.5 * var(--tree-node-height));
        width: 1px;
        background-color: var(--tree-line-color);
    }

    /* Horizontal connector */
    &::after {
        content: "";
        position: absolute;
        left: 0.525rem;
        top: 50%;
        width: 0.625rem;
        height: 1px;
        background-color: var(--tree-line-color);
    }

    /* Last child - vertical line only goes to middle */
    &.lastChild-67d9b51::before {
        bottom: 50%;
    }

    /* Empty - no lines (for ancestors where parent was last child) */
    &.empty-67d9b51::before,
    &.empty-67d9b51::after {
        display: none;
    }

    /* Continuation - only vertical line, no horizontal */
    &.continuation-67d9b51::after {
        display: none;
    }
}

.toggleBtn-67d9b51 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    margin-right: 0.375rem;
    z-index: 2;
    padding: 0;
    border: none;
    cursor: pointer;
    border-radius: 0.1875rem;
    flex-shrink: 0;
    box-shadow: var(--shadow-xs);
    transition: all 0.15s ease;
    background: var(--tree-button-bg);
    color: var(--tree-button-fg);

    &:hover {
        background-color: var(--bs-gray-300);
        color: var(--bs-gray-700);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    }

    &:focus {
        outline: none;
    }

    svg {
        width: 1rem;
        height: 1rem;
    }
}

.nodeLabel-67d9b51 {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.875rem;
    padding: var(--space-2) 0;
}

.childrenList-67d9b51 {
    list-style: none;
    margin: 0;
    padding: 0;
}


.helpText-a198eb9 {
    font-size: 0.75rem;
    color: var(--bs-secondary);
    text-transform: uppercase;
}


.colShrink-6f75eef {
    width: 1%;
}


.dropZone-5b2ac49 {
    flex-grow: 1;
    width: 100%;
    max-height: 150px;
    /* ast-grep-ignore prefer-dropzone-utility */
    border: 3px dashed var(--bs-secondary-border-subtle);
    border-radius: var(--radius-2xl);
    background-color: var(--bs-secondary-bg-subtle);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: var(--space-4);
}


.legendCount-f83d612 {
    font-size: 0.8rem;
}


.filterColumn-2bee96b {
    min-width: 200px;
}

.amountInput-2bee96b {
    width: 120px;
}

.actionBar-2bee96b {
    z-index: 1020;
}


.ackHeader-3fa6833 {
    width: 8em;
    max-width: 8em;
}

.companiesHeader-3fa6833 {
    width: 6em;
    max-width: 6em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dateHeader-3fa6833 {
    width: 9em;
    max-width: 9em;
}

.headerRow-3fa6833 th {
    padding-bottom: var(--space-3);
}

.openHeader-3fa6833 {
    width: 4em;
    max-width: 4em;
}

.titleCell-3fa6833 {
    max-width: 20vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.announcementCard-33c6e19 {
    flex: 0 1 24rem;
    max-width: 24rem;
    transition: box-shadow var(--transition-fast);

    &:hover {
        box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
    }

    & .announcementBody-33c6e19 {
        font-size: 0.9rem;

        & .markdown-preview {
            margin-bottom: 0;
            color: var(--bs-body-color);
        }
    }
}


.announcementList-9f83b77 {

    .announcementItem-9f83b77 {
        padding: var(--space-3) var(--space-4);
        border-bottom: 1px solid var(--bs-border-color-translucent);

        &:last-child {
            border-bottom: 0;
        }

        .announcementHead-9f83b77 {
            margin-bottom: 0.35rem;

            .announcementLink-9f83b77 {
                font-weight: 600;
                color: var(--bs-body-color);
                text-decoration: none;
            }
        }

        .announcementBody-9f83b77 {
            font-size: 0.9rem;

            .markdown-preview {
                margin-bottom: 0;
                color: var(--bs-body-color);
            }
        }
    }
}



.vatRateInput-b0de86f {
    max-width: 5em;
}

.groupHeaderCell-b0de86f {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.indented-b0de86f {
    padding-left: 1.75rem !important;
}


.invoiceLinesTable-e91b3f8 th {
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
}

.invoiceLinesTable-e91b3f8 td {
    vertical-align: middle;
    padding: 0.25rem 0.35rem;
}

/* Column widths. Description (1st) has no fixed width and absorbs leftover
   space; the remaining input-bearing columns need explicit widths so their
   inputs don't collapse below a usable size. */
.invoiceLinesTable-e91b3f8 th:nth-child(2) {
    width: 220px;
}

.invoiceLinesTable-e91b3f8 th:nth-child(3),
.invoiceLinesTable-e91b3f8 th:nth-child(4) {
    width: 100px;
}

.invoiceLinesTable-e91b3f8 th:nth-child(8) {
    width: 40px;
}


.cellWrap-8cdcc25 {
    position: relative;
    border-bottom: 1px solid var(--bs-border-color-translucent);
}

.cell-8cdcc25 {
    background-color: transparent;
    border: none;
    text-align: left;
    text-decoration: none;
    transition: background-color var(--transition-fast);

    &:hover {
        background-color: var(--bs-tertiary-bg);
    }
}

.progressSegment-8cdcc25 {
    width: 0%;
}


.companyList-78e3219 {
    width: 360px;
    min-width: 320px;
}


.caseIds-7edeb60 {
    max-width: 25vw;
    overflow: hidden;
}

.expandRows-7edeb60 .caseIds-7edeb60 {
    white-space: normal;
}

.compactRows-7edeb60 .caseIds-7edeb60 {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}


.maxWidthNotes-efb7fb2 {
    max-width: 200px;
}


/* Related parties list specific styles */

.relatedPartiesContainer-47ec959 {
    height: 100%;
    overflow-y: auto;
}

.levelCard-47ec959 {
    border-left: 4px solid var(--bs-primary);
}

.levelBadge-47ec959 {
    font-size: 0.875rem;
    font-weight: 600;
}

.searchButton-47ec959 {
    min-width: 38px;
}

.filterCard-47ec959 {
    background-color: var(--bs-light);
}

/* Nested table styling for level groups */
.levelTable-47ec959 {
    margin-bottom: 0;

    & thead th {
        border-top: none;
        font-weight: 600;
    }
}

/* Quick search button in table */
.quickSearchBtn-47ec959 {
    opacity: 0.7;
    transition: opacity var(--transition-base);

    &:hover {
        opacity: 1;
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .filterCard-47ec959 .row-47ec959 > div {
        margin-bottom: var(--space-4);
    }

    .filterCard-47ec959 .row-47ec959 > div:last-child {
        margin-bottom: 0;
    }
}


.graphContainer-f53924f {
    flex: 1 1 0;
    min-height: 0;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding-bottom: var(--space-4);

    .graphCanvas-f53924f {
        flex: 1 1 0;
        min-height: 0;
        width: 100%;
        height: 100%;
        display: block;
        border: 1px solid #dee2e6;
        background: #fff;
        cursor: grab;
        touch-action: none;

        &:active {
            cursor: grabbing;
        }
    }
}


.table-3f06c26 {
    border-collapse: collapse;
}

.table-3f06c26 th,
.table-3f06c26 td {
    padding: 6px;
    text-align: left;
}

.granted-3f06c26 {
    color: green;
    font-weight: bold;
}

.denied-3f06c26 {
    color: red;
    font-weight: bold;
}


.basicInfo-42cb60d {
    .userImageContainer-42cb60d {
        padding: 0;
        overflow: clip;

        img {
            object-fit: cover !important;
            height: 2.25em;
        }
    }
}


.cursorPointer-594eb1f {
    cursor: pointer;

    &:hover {
        opacity: 0.8;
    }
}


.basicInfo-2304d82 {
    .head-2304d82 {
        gap: var(--space-2) !important;
    }

    .companyIconSmall-2304d82 {
        width: 22px;
        height: 22px;
    }

    .statusBadge-2304d82 {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}


.versionCard-9c7ec03 {
    transition: all 0.2s ease-in-out;

    &.versionCardCurrent-9c7ec03 {
        border-color: var(--bs-success) !important;
        border-width: 2px;
    }

    & .dropZone-9c7ec03 {
        flex-grow: 1;
        width: 100%;
        /* ast-grep-ignore prefer-dropzone-utility */
        border: 3px dashed var(--bs-secondary-border-subtle);
        border-radius: var(--radius-2xl);
        background-color: var(--bs-secondary-bg-subtle);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: var(--space-4);
        transition: all 0.2s ease-in-out;

        &:hover {
            border-color: var(--bs-primary);
            background-color: var(--bs-primary-bg-subtle);
        }
    }
}



.table-b4b6c8a {
    .completed-b4b6c8a {
        display: none;
    }

    tr {
        vertical-align: middle;
        &.table-success {
            .progress {
                display: none;
            }

            .completed-b4b6c8a {
                display: block;
            }
        }

        td {
            &:has(.progress) {
                min-width: 40%;
                vertical-align: middle;
            }
        }
    }
}


.field_input_page-51200c3 {
    width: 5rem;
}

.pages_stack-51200c3 {
    max-width: 900px;
    margin: 0 auto;
    padding-right: var(--space-2);
}

.preview_page-51200c3 {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1.4142;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    margin-bottom: var(--space-3);
    cursor: crosshair;
    user-select: none;
    touch-action: none;
    line-height: 0;
}

.preview_page_image-51200c3 {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
}

.preview_page_label-51200c3 {
    position: absolute;
    top: 0.25rem;
    left: 0.25rem;
    font-size: 0.75rem;
    color: #6c757d;
    pointer-events: none;
}

.preview_field-51200c3 {
    position: absolute;
    border: 2px dashed;
    background-color: rgba(13, 110, 253, 0.15);
    overflow: hidden;
    font-size: 0.7rem;
    cursor: move;
    box-sizing: border-box;
    touch-action: none;
}

.preview_field_label-51200c3 {
    padding: var(--space-1);
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.preview_field_selected-51200c3 {
    border-style: solid;
    box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.4);
}

.resize_handle-51200c3 {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 12px;
    height: 12px;
    background-color: #0d6efd;
    cursor: nwse-resize;
    border-radius: 0 0 2px 0;
}

.preview_field_signature-51200c3 {
    border-color: #0d6efd;
    color: #0d6efd;
}

.preview_field_initials-51200c3 {
    border-color: #6610f2;
    color: #6610f2;
    background-color: rgba(102, 16, 242, 0.15);
}

.preview_field_date-51200c3 {
    border-color: #198754;
    color: #198754;
    background-color: rgba(25, 135, 84, 0.15);
}

.preview_field_text-51200c3 {
    border-color: #fd7e14;
    color: #fd7e14;
    background-color: rgba(253, 126, 20, 0.15);
}

.field_popover-51200c3 {
    position: absolute;
    z-index: 20;
    width: 220px;
    max-width: 90%;
    padding: var(--space-2);
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
    cursor: default;
    user-select: auto;
    touch-action: auto;
    pointer-events: auto;
    line-height: 1.4;
}

/* Validation-error focus anchors (flash_form_field scrolls these into view).
   The app header is position: sticky; top: 0, so without this margin a
   top-aligned scroll lands the flashed field — e.g. the "Place signature
   fields" heading — behind the header. Keep it clear below the header. */
#signature-title,
#signature-pdf,
#signature-signatories,
#signature-fields {
    scroll-margin-top: 5rem;
}


.preWrap-ed33214 {
    white-space: pre-wrap;
}


.userImageContainer-31a5598 {
    overflow: clip;

    img {
        object-fit: cover !important;
    }
}


.filterContainer-118d281 {
    width: 60ex;
    min-width: 45ex;
}

.directoryGrid-118d281 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: var(--space-6);
    margin-top: var(--space-2);
    --card-height: 225px;

    .employeeCard-118d281 {
        position: relative;
        border-radius: var(--bs-border-radius-xl);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        overflow: hidden;
        transition: all var(--transition-slow);
        cursor: pointer;
        height: var(--card-height);

        &:hover {
            box-shadow: var(--bs-box-shadow) !important;
        }

        .slide-118d281 {
            position: absolute;
            width: 100%;
            height: var(--card-height);
            transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .leaveIconsContainer-118d281 {
            display: none;
        }

        .frontSlide-118d281 {
            background: var(--bs-dark);
            color: var(--bs-light);
            z-index: 2;

            .avatar-118d281 {
                width: 100px;
                height: 100px;
                box-shadow: var(--shadow-md);
                overflow: hidden;

                svg {
                    opacity: 0.75;
                }

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

            .basicInfo-118d281 {
                text-align: center;
                margin-top: var(--space-3);
                padding: 0 var(--space-4);
            }

            .name-118d281 {
                /* Keep the card's light-on-dark colour. Themes that set a global
                   heading colour (e.g. OpenDesign's dark --titles-color) target
                   the bare `h3`; because that rule is nested under a selector
                   list containing an id (#theme-opendesign), CSS nesting wraps it
                   in :is() and it inherits id-level specificity — so only
                   !important reliably wins here, otherwise the name renders
                   dark-on-dark and invisible. */
                color: var(--bs-light) !important;
                font-size: 1.1rem;
                font-weight: 600;
                margin: 0;
                line-height: 1.3;
            }

            .position-118d281 {
                font-size: 0.85rem;
                opacity: 0.95;
                margin-top: var(--space-1);
                font-variant: small-caps;
                text-transform: capitalize;
            }
        }

        &.onLeave-118d281 .frontSlide-118d281 {
            background: var(--bs-secondary);

            .leaveIconsContainer-118d281 {
                display: block;
                position: absolute;
                top: 1rem;
                right: 1rem;
            }
        }

        &:hover .frontSlide-118d281 {
            transform: translateY(calc(-1 * var(--card-height)));
        }

        .innerSlide-118d281 {
            background: rgba(var(--bs-light-rgb), var(--bs-bg-opacity, 1));
            padding: var(--space-5);
            transform: translateY(200px);
            z-index: 1;
            flex-direction: column;
            align-items: flex-start;
            justify-content: flex-start;
            overflow-y: auto;
            opacity: 0;

            .position-118d281 {
                font-variant: small-caps;
                text-transform: capitalize;
            }

            a {
                text-decoration: none;

                &:hover {
                    text-decoration: underline;
                }
            }

            div {
                text-overflow: ellipsis;
            }

            .actions-118d281 {
                float: inline-end;

                a,
                button {
                    text-align: center;
                    padding: 0;
                }
            }
        }

        &:hover .innerSlide-118d281 {
            transform: translateY(0);
            opacity: 1;
        }
    }
}

.modal-118d281 {
    img.businessCardImage-118d281 {
        max-height: 75vh;
    }
}


.filterDropdownLayer-2842979 {
    position: relative;
    z-index: 3000;

    .dropdown-menu.show {
        z-index: 3001 !important;
    }
}

.bottomNavLayer-2842979 {
    position: relative;
    z-index: 1;
}

.formerEmployee-2842979 {
    background-color: lightgray;
}


.eventTypeIcon-5464644 {
    border-color: var(--bs-success);
}


.badgeWrapper-92d4564 {
    position: relative;
    display: inline-block;
}

.companiesCell-92d4564 {
    z-index: 2;
    cursor: pointer;

    &:hover {
        background-color: var(--bs-tertiary-bg);
    }
}

.companiesDropdown-92d4564 {
    display: none;
    position: absolute;
    top: 0;
    left: 100%;
    margin-left: var(--space-4);
    min-width: 150px;
    max-height: 200px;
    overflow-y: auto;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    z-index: 1000;
}

.headerRow-92d4564 {
    & th {
        padding-bottom: var(--space-3);
    }

    & .companiesHeader-92d4564 {
        width: 6em;
        max-width: 6em;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    & .fromHeader-92d4564,
    & .toHeader-92d4564 {
        width: 7em;
        max-width: 7em;
    }

    & .tentativeHeader-92d4564 {
        width: 3em;
        max-width: 3em;
    }

    & .typeHeader-92d4564 {
        width: 10em;
        max-width: 10em;
    }

    & .workingHoursHeader-92d4564 {
        width: 6em;
        max-width: 6em;
    }
}

.open-92d4564 {
    z-index: 1001;

    & .companiesDropdown-92d4564 {
        display: block;
    }
}

.titleCell-92d4564 {
    max-width: 20vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.descriptionInput-f511032 {
    width: 100%;
    min-height: 80px;
    /* Auto-grow vertically to fit content (Chromium 123+, Safari 17.4+, Firefox 135+).
       Falls back to min-height when unsupported. */
    field-sizing: content;
    resize: none;
    overflow: hidden;
}

/* Halve the gap between FilePreviewInline header and preview body
   (Bootstrap p-3 = 1rem → 0.5rem). */
.previewWrap-f511032 .card-body {
    padding-top: var(--space-2) !important;
}

/* Split layout: data on the left, supporting documents on the right.
   Below 1300px the two panes stack and a tab bar switches between them —
   that's when the right-pane previews stop being readable side-by-side. */
.splitPane-f511032 {
    flex: 1 1 50%;
    min-width: 0;
}

@media (max-width: 1299.98px) {
    .splitLayout-f511032 {
        flex-direction: column;
    }

    .splitPane-f511032 {
        flex: 1 1 100%;
        width: 100%;
    }

    .hiddenOnMobile-f511032 {
        display: none !important;
    }
}

/* Locks the currency dropdown of the VAT MoneyInput — user cannot click/change. */
.lockedCurrency-f511032 .form-select {
    pointer-events: none;
    background-color: var(--bs-secondary-bg);
    color: var(--bs-secondary-color);
    opacity: 0.85;
}

/* Match the MoneyInput's combined max-width (number input 10em + currency
 * dropdown 5.25em) so the Total amount value's right edge lines up with the
 * right edge of the currency dropdown above, at any viewport width.
 * Anchored in `em` so a font-size change scales both consistently. */
.totalValueWidth-f511032 {
    flex: 0 0 calc(10em + 5.25em);
    max-width: calc(10em + 5.25em);
}


.avatar-efb9f21 {
    width: 2.25em;
    height: 2.25em;
    object-fit: cover;
    border-radius: 50%;
    margin-right: var(--space-2);
}

/* Inside the SingleSelect trigger (collapsed/selected display), shrink the
 * avatar so the button's total height matches sibling .form-control inputs.
 * Dropdown option rows live in `.dropdown-menu` and keep the 2.25em avatar. */
.form-control.form-select > button .avatar-efb9f21 {
    width: 1.5em;
    height: 1.5em;
}

/* Allow the inner `text-truncate` span to shrink below its content size.
 * Bootstrap's flex children default to `min-width: auto` which blocks the
 * ellipsis from kicking in when the employee+company string overflows the
 * column. */
.label-efb9f21 {
    min-width: 0;
}


.dropZone-7370663 {
    flex-grow: 1;
    width: 100%;
    max-height: 150px;
    /* ast-grep-ignore prefer-dropzone-utility */
    border: 3px dashed var(--bs-secondary-border-subtle);
    border-radius: var(--radius-2xl);
    background-color: var(--bs-secondary-bg-subtle);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: var(--space-4);
}


.table-3079df8 {
    .completed-3079df8 {
        display: none;
    }

    tr {
        vertical-align: middle;
        &.table-success {
            .progress {
                display: none;
            }

            .completed-3079df8 {
                display: block;
            }
        }

        td {
            &:has(.progress) {
                min-width: 40%;
                vertical-align: middle;
            }
        }
    }
}


.titleInput-145b676 {
    min-width: 300px;
}

.projectSelectWrapper-145b676 {
    max-width: 400px;
}

.pointsInput-145b676 {
    max-width: 120px;
}


.avatar-128a62a {
    width: 2.25em;
    height: 2.25em;
    object-fit: cover;
    border-radius: 50%;
    margin-right: var(--space-2);
}


.dropZone-3fbcd29 {
    flex-grow: 1;
    width: 100%;
    max-height: 150px;
    /* ast-grep-ignore prefer-dropzone-utility */
    border: 3px dashed var(--bs-secondary-border-subtle);
    border-radius: var(--radius-2xl);
    background-color: var(--bs-secondary-bg-subtle);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: var(--space-4);
}


.calendarFilter-b56b78a {
    min-width: 15rem;
}


/* Container-aware sizing: each column wants to be at least 640px wide
   (roughly the request table's intrinsic comfort width with its multiselect
   filter dropdowns in the header). When available width drops below
   ~1280px the grid collapses to one column so the request table's
   horizontal scroll is preferred over a visible scrollbar inside a
   side-by-side cell. This responds to the *content area* width (which
   shrinks when the sidebar is open), not the viewport width — viewport
   media queries miss that case. */
.gridContainer-3c91b07 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(640px, 100%), 1fr));
    gap: var(--space-4);
    align-items: start;

    & > table {
        min-width: 0;
    }

    /* Each column lets its content shrink to fit. Horizontal scrolling is
       handled by the inner `.table-responsive` wrapper for the request table
       and by the calendar's own min-width-0 grid, so we don't add overflow-x
       here. */
    & .tableColumn-3c91b07,
    & .calendarColumn-3c91b07 {
        min-width: 0;
    }
}


.leaveTypeIcon-641f3b4 {
    border-color: var(--bs-primary);
}

.overNavbar-641f3b4 {
    z-index: 1050;
}

.employeeSelector-641f3b4 {
    /* Ensure dropdown appears above bottom navbar (z-index: 1050) */
    position: relative;
    z-index: 1060;
    /* Prevent resizing when selecting different length names */
    width: 100%;

    & > * {
        width: 100%;
    }
}


.avatar-1bf745c {
    width: 2em;
    height: 2em;
    border-radius: 50%;
    object-fit: cover;
}


.actionCell-f092216 {
    white-space: nowrap;
}

.companyLogo-f092216 {
    max-height: 32px;
}

/* Amounts cell: tight nested 2-column table. Bootstrap's `.table` paints
 * every cell using BOTH `background-color: var(--bs-table-bg)` AND a
 * full-cell `box-shadow: inset 0 0 0 9999px var(--bs-table-bg-state, ...)`,
 * so overriding `--bs-table-bg` alone leaves the shadow to repaint the
 * dark body background on top of the parent row's status tint. Clear all
 * three (bg, shadow accent, state) and inherit the row colour. */
/* `!important` is needed because Bootstrap's `.table` rule loads after
 * the stylance bundle and resets `--bs-table-bg` to the body bg with
 * the same specificity, so source order wins without it. */
.amountsTable-f092216 {
    --bs-table-bg: transparent !important;
    --bs-table-bg-state: transparent !important;
    --bs-table-bg-type: transparent !important;
    --bs-table-accent-bg: transparent !important;
    --bs-table-color: inherit !important;
    background-color: transparent;

    & td {
        padding: 0 var(--space-1);
        background-color: transparent !important;
        box-shadow: none !important;
        border: none;
    }

    & .totalsRow-f092216 td {
        border-top: 1px solid var(--bs-border-color);
        padding-top: var(--space-1);
    }
}


.suggestions-63fe0d3 {
    top: 100%;
}

.description-63fe0d3 {
    white-space: pre-line;
}


.employeeInOutStatsGraph-d480413 {
    position: relative;
    width: 100%;

    svg.svg-d480413 {
        display: block;
        width: 100%;
        min-height: 300px;
        height: 50vh;
        max-height: 500px;

        text {
            fill: var(--bs-body-color);
            stroke-width: 0;
        }

        .axis-d480413 {
            shape-rendering: crispEdges;

            line {
                stroke: var(--bs-border-color);
                stroke-width: 2;
                stroke-dasharray: 4 2;
            }
            text {
                font-size: 12px;
            }

            .xTick-d480413 {
                text {
                    text-anchor: end;
                    dominant-baseline: hanging;
                }
            }

            .yTick-d480413 {
                text {
                    text-anchor: end;
                    dominant-baseline: central;
                }
            }
        }

        .bars-d480413 {
            cursor: pointer;

            .barIn-d480413 {
                fill: var(--bs-success);
                opacity: 0.8;
            }

            .barOut-d480413 {
                fill: var(--bs-danger);
                opacity: 0.8;
            }

            &:hover {
                .barIn-d480413,
                .barOut-d480413 {
                    opacity: 1;
                }
            }
        }

        .countLine-d480413 {
            stroke: var(--bs-primary);
            stroke-width: 2.5;
        }

        .countDot-d480413 {
            fill: var(--bs-primary);
            stroke: var(--text-emphasis);
            stroke-width: 2;
            cursor: pointer;

            &:hover {
                r: 6;
            }
        }
    }

    .legend-d480413 {
        margin-top: var(--space-2);
        font-size: 0.875rem;

        .legendLine-d480413 {
            display: inline-block;
            width: 24px;
            height: 3px;
            background-color: var(--bs-primary);
            border-radius: 2px;
        }

        .legendBarIn-d480413 {
            display: inline-block;
            width: 12px;
            height: 12px;
            background-color: var(--bs-success);
            border-radius: 2px;
        }

        .legendBarOut-d480413 {
            display: inline-block;
            width: 12px;
            height: 12px;
            background-color: var(--bs-danger);
            border-radius: 2px;
        }
    }

    .tooltip-d480413 {
        position: absolute;
        pointer-events: none;
        z-index: 1000;
        min-width: 180px;
        font-size: 0.875rem;
    }
}


.gradeBadge-dd7e9ec {
    color: black !important;
    background-color: gold !important;
    font-family: var(--bs-body-font-family);
    place-items: center;
    padding: 0 var(--space-1);
    height: 1.5em;
    font-size: 75%;
    font-weight: 700;
    white-space: nowrap;
    vertical-align: text-bottom;
}


.gradesSalaryGraph-6565728 {
    position: relative;
    width: 100%;

    svg.svg-6565728 {
        display: block;
        width: 100%;
        min-height: 400px;
        height: 70vh;
        max-height: 800px;

        text {
            fill: var(--bs-body-color);
            stroke-width: 0;
        }

        .axis-6565728 {
            shape-rendering: crispEdges;

            .yTick-6565728 {
                text-anchor: end;
                dominant-baseline: central;
                font-size: 15px;
            }

            .xTick-6565728 {
                text-anchor: middle;
                dominant-baseline: hanging;
                font-size: 18px;
                font-weight: bold;
            }

            line {
                stroke: var(--bs-border-color);
                stroke-width: 1.25;
            }
        }

        .interactivePoint-6565728 {
            cursor: pointer;
        }

        .bucket-6565728 {
            fill: var(--bs-primary);
            stroke: var(--bs-primary-border-subtle);
            stroke-width: 3;
            cursor: pointer;

            rect {
                rx: 3px;
                ry: 3px;
            }

            text {
                text-anchor: middle;
                dominant-baseline: central;
                font-size: 20px;
                font-weight: bold;
                pointer-events: none;
            }
        }
    }

    .tooltipBox-6565728 {
        position: absolute;
        pointer-events: none;
        z-index: 1000;
        min-width: 250px;
    }
}


.nationalityFilter-dcc543c {
    max-width: 10ex;
}


.preserve_whitespace-67699dd {
    white-space: pre-wrap;
}

.frequency_select-67699dd {
    flex: 0 0 auto;
    width: auto;
    min-width: 8rem;
}

.bonus_row-67699dd > .input-group {
    display: contents;
}

.bonus_row-67699dd > .input-group > .form-control,
.bonus_row-67699dd > .input-group > .form-select {
    border-radius: 0;
}

.clickable_row-67699dd {
    cursor: pointer;
}


.columnHeader-8dc53db {
    white-space: nowrap;

    button {
        padding: 0.05rem 0.25rem 0 0.25rem;
    }
}


.matrix-edcdd0c {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background-color: var(--bs-border-color-translucent);
    border-top: 1px solid var(--bs-border-color-translucent);
}

.matrixCell-edcdd0c {
    padding: 0.9rem 1rem;
    background-color: var(--bs-body-bg);
    color: inherit;
    text-decoration: none;
    transition: background-color var(--transition-fast);

    &:hover {
        background-color: var(--bs-tertiary-bg);
    }
}

.matrixBadge-edcdd0c {
    min-width: 2.5rem;
    padding: 0.35rem 0.6rem;
    border-radius: 999px;
    font-size: 1.1rem;
    font-weight: 700;
    text-align: center;
}

.matrixLabel-edcdd0c {
    font-size: 0.9rem;
    font-weight: 500;
}


.reportEdit-9ddeb66 {
    .ql-toolbar.ql-snow {
        background-color: white;
        border-color: var(--bs-border-color);
    }

    .ql-toolbar.ql-snow .ql-stroke {
        stroke: var(--bs-body-color);
    }

    .ql-toolbar.ql-snow .ql-fill {
        fill: var(--bs-body-color);
    }

    .ql-toolbar.ql-snow .ql-picker-label {
        color: var(--bs-body-color);
    }

    .ql-toolbar.ql-snow .ql-picker-options {
        background-color: white;
        border-color: var(--bs-border-color);
    }

    .ql-container.ql-snow {
        border-color: var(--bs-border-color);
    }

    .ql-editor {
        background-color: white;
        color: var(--bs-body-color);
        min-height: 200px;
        max-height: 400px;
        overflow-y: auto;
    }

    .ql-editor.ql-blank::before {
        color: var(--bs-secondary-color);
    }
}


.threadHeading-d27de9e {
    font-size: 1.75rem;
}

.threadDate-d27de9e {
    font-size: 80%;
}


.formSelects-526a300 [class*="itemSelector"] {
    z-index: auto;
}


.dateField-cffa3a5 {
    width: 100%;

    input[type="date"] {
        width: 100% !important;
    }
}


.preWrap-d09c3a3 {
    white-space: pre-wrap;
}

.formSelects-d09c3a3 [class*="itemSelector"] {
    z-index: auto;
}


.checkInOutBtn-cfc9c97 {
    height: 100px;
    font-size: 1.2rem;
    font-weight: bold;

    &:disabled {
        opacity: 0.5;
    }
}



.avatar-a4fa249 {
    width: 64px;
    height: 64px;
    flex-shrink: 0;

    & img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}



.employeeSelector-9ceb9b5 {
    max-width: 400px;
}


.number-ced1db2 {
    font-variant-numeric: tabular-nums;
    text-align: end;
}


.graph-ad65c36 {
    position: relative;
    height: 500px;
    width: 100%;

    .graphSvg-ad65c36 {
        width: 100%;
        height: 100%;
        display: block;
    }

    .axis-ad65c36 {
        font-family: var(--bs-font-sans-serif);
        font-size: 0.9rem;
    }

    .yGrid-ad65c36,
    .xGrid-ad65c36 {
        stroke: #777;
        stroke-dasharray: 2 2;
        shape-rendering: crispEdges;
    }

    .yTickLabel-ad65c36,
    .xTick-ad65c36 {
        fill: var(--bs-body-color);
    }

    .yTickLabel-ad65c36 {
        dy: -0.25rem;
        dominant-baseline: ideographic;
    }

    .tradeTickLabel-ad65c36 {
        fill: #fb8b1e;
        opacity: 0.8;
    }

    .foreignOwnershipLine-ad65c36 {
        stroke: #60481c;
        stroke-width: 3px;
        fill: none;
    }

    .foreignOwnershipDataPoint-ad65c36 {
        stroke: #60481c;
        stroke-width: 1.5px;
        opacity: 0.9;
        fill: #fff;
        cursor: pointer;
    }

    .notes-ad65c36 {
        stroke: #000;
        fill: silver;
        opacity: 1;
    }

    .stockPrice-ad65c36 {
        shape-rendering: geometricprecision;
        stroke: #fb8b1e;
        stroke-linejoin: round;
        stroke-width: 2px;
        stroke-opacity: 0.9;
        fill: none;
    }

    .tooltipBox-ad65c36 {
        position: absolute;
        z-index: 10;
        pointer-events: none;
    }
}

.asOfDate-ad65c36 {
    text-align: end;
    font-style: italic;
    color: var(--bs-secondary-color);
}


/* The expanded list of unlinked NINs: bound its height and scroll internally
   so a large import can't outgrow the add-files modal. */
.unlinkedList-bef8e71 {
    max-height: 16rem;
    overflow-y: auto;
}


.mapGraphContainer-6b89ed4 {
    position: relative;
    width: 100%;
    min-height: 520px;

    & .mapGraphInner-6b89ed4 {
        position: relative;
        width: 100%;
        height: 520px;
        overflow: hidden;
        background: var(--bs-body-bg);

        & .bubbleTooltip-6b89ed4 {
            position: absolute !important;
            z-index: 5;
            pointer-events: none;
            min-width: 200px;
            max-width: 340px;

            & .colorMarker-6b89ed4 {
                width: 10px;
                height: 10px;
                border-radius: 50%;
                flex: 0 0 auto;
                border: 1px solid var(--bs-border-color);
            }
        }

        & .mapSvg-6b89ed4 {
            width: 100%;
            height: 100%;
            display: block;
            user-select: none;
            cursor: grab;

            &:active {
                cursor: grabbing;
            }

            & .mapBackground-6b89ed4 {
                fill: var(--bs-info-bg-subtle);
            }

            & .globeOutline-6b89ed4 {
                fill: none;
                stroke: rgba(0, 0, 0, 0.18);
                stroke-width: 0.8;
                vector-effect: non-scaling-stroke;
            }

            & .countryFill-6b89ed4 {
                fill: var(--bs-body-bg);

                &:hover {
                    fill: var(--bs-secondary-bg);
                }
            }

            & .countryStroke-6b89ed4 {
                fill: none;
                stroke: rgba(0, 0, 0, 0.28);
                stroke-width: 0.6;
                vector-effect: non-scaling-stroke;
            }

            & .bubbleGroup-6b89ed4 {
                & .sharesBubble-6b89ed4 {
                    opacity: 0.7;
                    transition: opacity 0.12s ease-in-out;
                }

                &:hover .sharesBubble-6b89ed4 {
                    opacity: 1;
                }

                & .bubbleHitZone-6b89ed4 {
                    cursor: pointer;
                }
            }
        }
    }
}

.dateHeader-6b89ed4 {
    display: inline-block;
    font-variant-numeric: tabular-nums;
    width: 10ex;
    text-align: end;
}


.navGraphContainer-539b3fa {
    position: relative;
    min-height: 520px;
    width: 100%;

    &.withPerformance-539b3fa {
        min-height: 1040px;
    }

    & .svg-539b3fa {
        width: 100%;
        height: 100%;
        min-height: 520px;

        & .axis-539b3fa {
            & line {
                stroke: var(--bs-border-color);
                stroke-dasharray: 2, 2;
            }

            & text {
                font-size: 14px;
                fill: var(--bs-body-color);
            }

            & .yTick-539b3fa {
                & text {
                    font-size: 14px;
                }
            }

            & .portfolioTick-539b3fa {
                fill: rgb(186, 148, 88);
                font-size: 14px;
            }

            & .portfolioAxisCaption-539b3fa {
                fill: rgb(186, 148, 88);
                font-size: 16px;
                text-anchor: middle;
            }
        }

        & .xTick-539b3fa {
            font-size: 14px;
            fill: var(--bs-body-color);
        }

        & .yearBackground-539b3fa {
            fill: none;

            &.yearBackgroundOdd-539b3fa {
                fill: rgba(128, 128, 128, 0.15);
            }
        }

        & .performanceYear-539b3fa {
            fill: rgb(186, 148, 88);
            text-anchor: middle;
            font-size: 20px;
        }

        & .performance-539b3fa {
            stroke: #ccc;
            stroke-width: 20px;
        }

        & .performanceMarker-539b3fa {
            stroke: none;
            fill: #ccc;
        }

        & .performanceText-539b3fa {
            text-anchor: middle;
            dominant-baseline: middle;
            font-size: 20px;
            fill: var(--bs-body-color);
        }

        & .stockPerformanceTick-539b3fa {
            fill: rgb(186, 148, 88);
            font-size: 14px;
        }

        & .stockPerformanceAxisCaption-539b3fa {
            fill: rgb(186, 148, 88);
            text-anchor: middle;
            font-size: 16px;
        }

        & .stockPerformanceZeroLine-539b3fa {
            stroke: #777;
            stroke-width: 1px;
        }

        & .stockPerformanceCalculation-539b3fa {
            shape-rendering: geometricprecision;
            stroke-linejoin: round;
            stroke-width: 2px;
            stroke-opacity: 0.9;
            fill: none;
        }

        & .portfolioSizeArea-539b3fa {
            stroke: none;
            fill: rgba(186, 148, 88, 0.25);
        }

        & .portfolioSizeLine-539b3fa {
            stroke: rgb(186, 148, 88);
            stroke-width: 1px;
            fill: none;
        }

        & .navLine-539b3fa {
            stroke: #60481c;
            stroke-width: 3px;
            fill: none;
            stroke-linejoin: round;
            stroke-linecap: round;
        }

        & .navLineDataPoint-539b3fa {
            stroke: #60481c;
            stroke-width: 2px;
            fill: #fff;
            cursor: pointer;

            &.navLineDataPointNotes-539b3fa {
                stroke: #000;
                fill: silver;
            }
        }

        & .stockPrice-539b3fa {
            shape-rendering: geometricprecision;
            stroke: #fb8b1e;
            stroke-linejoin: round;
            stroke-width: 2px;
            stroke-opacity: 0.9;
            fill: none;

            &.stockPriceHidden-539b3fa {
                display: none;
            }
        }

        & .stockPriceRange-539b3fa {
            shape-rendering: geometricprecision;
            stroke: #000;
            stroke-linejoin: round;
            stroke-width: 0.5px;
            stroke-opacity: 0.5;
            fill: #c09c78;
            opacity: 0.6;
        }

        & .dividend-539b3fa {
            fill: #000;
        }

        & .dividendText-539b3fa {
            font-size: 16px;
            fill: var(--bs-body-color);
            dominant-baseline: hanging;
        }

        & .dividendDropLine-539b3fa {
            stroke: #000;
            stroke-width: 1.5px;
            stroke-dasharray: 4, 4;
            opacity: 0.8;
        }

        & .dividendDropLineMarker-539b3fa {
            fill: #000;
        }

        & .dividendDistributionText-539b3fa {
            fill: rgba(0, 0, 0, 0.5);
            font-size: 11px;
            dominant-baseline: hanging;
        }

        & .ipoLine-539b3fa {
            stroke: #800000;
            stroke-width: 2px;
            stroke-dasharray: 2, 2;
        }

        & .ipoText-539b3fa {
            fill: #800000;
            font-size: 12px;
        }
    }

    & .tooltipBox-539b3fa {
        position: absolute;
        background: var(--bs-body-bg);
        border: 1px solid var(--bs-border-color);
        border-radius: var(--bs-border-radius);
        padding: var(--space-3);
        box-shadow: var(--bs-box-shadow);
        z-index: 1000;
        min-width: 200px;
        pointer-events: none;

        & table {
            font-size: 0.875rem;
        }

        & table td {
            padding: 0.125rem 0.25rem;
        }
    }
}


.scrollableCardBody-15f3d82 {
    max-height: 400px;
    overflow-y: auto;
}


.graphContainer-2385aec {
    position: relative;
    min-height: 600px;

    .svg-2385aec {
        width: 100%;
        min-height: 600px;

        .axis-2385aec line {
            fill: none;
            stroke: #777;
            stroke-dasharray: 2, 2;
            shape-rendering: crispEdges;
        }

        .axis-2385aec text {
            fill: var(--bs-secondary-color, #6c757d);
            font-family:
                "Avenir LT Std 45 Book", "Droid Sans", "Helvetica Neue",
                Helvetica, Arial, sans-serif;
            font-size: 14px;
        }

        .yTick-2385aec text {
            font-size: 14px;
        }

        .xAxis-2385aec text {
            font-family:
                "Avenir LT Std 45 Book", "Droid Sans", "Helvetica Neue",
                Helvetica, Arial, sans-serif;
            font-size: 14px;
            fill: var(--bs-secondary-color, #6c757d);
        }

        .xTick-2385aec {
            font-size: 14px;
        }

        .shareBookDates-2385aec line {
            stroke: black;
            stroke-width: 1px;
            opacity: 0.3;
        }

        .shareholderEntry-2385aec {
            cursor: pointer;
            stroke: #ddd;
            stroke-width: 0.3px;
            opacity: 0.95;
            fill-opacity: 0.85;
            transition: opacity 0.15s ease;
        }

        .contextArea-2385aec {
            opacity: 0.5;
            stroke: none;
        }

        .context-2385aec {
            cursor: ew-resize;
        }

        .contextFrame-2385aec {
            fill: none;
            stroke: var(--bs-border-color, #dee2e6);
            stroke-width: 1px;
        }

        .brushSelection-2385aec {
            fill: rgba(13, 110, 253, 0.15);
            stroke: #fff;
            stroke-width: 1px;
            cursor: grab;
        }

        .brushSelection-2385aec:active {
            cursor: grabbing;
        }

        .y0-2385aec {
            stroke: black;
            stroke-width: 2px;
            opacity: 0.5;
        }

        .hover-2385aec .shareholderEntry-2385aec {
            opacity: 0.5;
        }

        .hover-2385aec .shareholderEntry-2385aec.hovered-2385aec {
            opacity: 1;
            stroke: red;
            stroke-width: 2px;
        }
    }

    .tooltipBox-2385aec {
        position: absolute;
        background: var(--bs-body-bg);
        border: 1px solid var(--bs-border-color);
        border-radius: var(--bs-border-radius);
        padding: var(--space-2);
        box-shadow: var(--bs-box-shadow);
        pointer-events: none;
        z-index: 1000;
        min-width: 150px;

        table {
            font-size: 0.875rem;
        }

        td {
            padding: 0.1rem 0.25rem;
        }
    }
}


.number-e21b56f {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.positive-e21b56f {
    color: var(--bs-success);
}

.negative-e21b56f {
    color: var(--bs-danger);
}

.orderBookTable-e21b56f {
    font-size: 0.875rem;
}

.orderBookTable-e21b56f th,
.orderBookTable-e21b56f td {
    padding: var(--space-2);
}

.metricCard-e21b56f {
    border-radius: var(--radius-md);
}

.metricValue-e21b56f {
    font-size: 1.25rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.metricLabel-e21b56f {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}


.maxWidthDateInput-d0d637b {
    max-width: 14rem;
}


.companyRow-61127a8 {
    position: relative;
    z-index: 3;
}


.companyRow-b70cd04 {
    position: relative;
    z-index: 3;
}


.dropZone-9dae1bd {
    width: 100%;
    position: relative;
    border-radius: var(--bs-border-radius);
    transition: box-shadow var(--transition-base);
    isolation: isolate;

    &::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background:
            radial-gradient(
                circle at top right,
                rgba(var(--bs-primary-rgb), 0.18),
                transparent 42%
            ),
            linear-gradient(
                135deg,
                rgba(var(--bs-primary-rgb), 0.1),
                rgba(var(--bs-info-rgb), 0.06)
            );
        transform: scale(0.985);
        z-index: -1;
        opacity: 0;
        pointer-events: none;
        transition:
            opacity var(--transition-base),
            transform var(--transition-base);
    }

    > * {
        transition:
            transform var(--transition-base),
            filter var(--transition-base);
    }

    &[data-selected="true"]::before {
        opacity: 1;
        transform: translateY(0);
    }
}

.container-9dae1bd {
    width: 100%;
    padding: var(--space-6);
    border: 2px dashed var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    background: var(--bs-light);
    position: relative;
    overflow: hidden;
    container-type: inline-size;
    container-name: files-drop-zone;
    cursor: pointer;
    transition:
        border-width var(--transition-base),
        border-color var(--transition-base),
        background-color var(--transition-base),
        box-shadow var(--transition-base),
        transform var(--transition-base);

    [data-selected="true"] & {
        border-color: var(--bs-primary);
        background: var(--bs-primary-bg-subtle);
    }

    .backgroundIconContainer-9dae1bd {
        position: absolute;
        inset: 0;
        pointer-events: none;

        .backgroundIcon-9dae1bd {
            width: clamp(5rem, 22cqi, 9rem);
            height: clamp(5rem, 22cqi, 9rem);
            opacity: 0.075;
            color: var(--bs-body-color);
        }
    }

    .textContainer-9dae1bd {
        position: relative;
        z-index: 1;
        gap: var(--space-3);
        max-width: 34rem;

        .headline-9dae1bd {
            color: var(--bs-secondary-color);
            font-size: 1rem;
            font-weight: 600;
            line-height: 1.45;
            text-wrap: balance;
        }

        .actions-9dae1bd {
            gap: var(--space-3) var(--space-4);
            color: var(--bs-secondary-color);
        }
    }

    @container files-drop-zone (width <= 28rem) {
        min-height: 10.5rem;
        padding-block: var(--space-8) var(--space-5);

        .headline-9dae1bd {
            font-size: 0.95rem;
        }

        .actions-9dae1bd {
            gap: var(--space-2);
        }
    }
}


.importSection-5906ea2 {
    position: relative;
    z-index: 1;
}

.notesTextarea-5906ea2 {
    height: 100px;
}


.tableLayer-cea16bc {
    position: relative;
    z-index: 1;
}

.bottomNavLayer-cea16bc {
    position: relative;
    z-index: 1;
}


.mailing-email-preview-iframe {
    width: 100%;
    height: clamp(400px, 80vh, 1100px);
}


.progressBar-5101395 {
    height: 25px;
}

.progressBarFill-5101395 {
    width: 0%;
    transition: width var(--transition-slow);
}


/* Outer wrapper for the shared media-listing preview body.
   Self-contained: scopes the media-exchange dark theme tokens and font
   families so the component renders correctly in any binary, even
   ones that don't ship the global [data-theme="media-exchange"]
   overrides (e.g. the ERP admin "Preview" tab). */
.mlp-body-32f19f5 {
    --bg: #0a0a0e;
    --bg-2: #0f1014;
    --surface: #15161c;
    --surface-2: #1c1d25;
    --border: #242530;
    --border-2: #323340;
    --text: #ecebe5;
    --text-dim: #a8a698;
    --text-mute: #6b6a60;
    --accent: #d9a54f;
    --accent-deep: #a77d30;
    --accent-soft: rgba(217, 165, 79, 0.12);
    --good: #5ed38d;
    --serif: 'Playfair Display', Georgia, serif;
    --sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;

    background: var(--bg);
    color: var(--text);
    font-family: var(--sans);
    /* Normalise inherited weight so a theme that bolds body text
       (e.g. Brutalist) doesn't bleed into the preview's body copy. */
    font-weight: 400;
    position: relative;
}

/* ---- Hero ---- */
.mlp-hero-32f19f5 {
    position: relative;
    height: 520px;
    overflow: hidden;
}

.mlp-heroBackdrop-32f19f5 {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.5) saturate(1.1);
}

.mlp-heroOverlay-32f19f5 {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            rgba(10, 10, 14, 0.3) 0%,
            rgba(10, 10, 14, 0.75) 60%,
            var(--bg) 100%
        ),
        radial-gradient(circle at 20% 50%, var(--accent-soft), transparent 50%);
}

.mlp-heroInner-32f19f5 {
    position: relative;
    height: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 40px 48px 80px;
    gap: var(--space-8);
}

.mlp-heroPoster-32f19f5 {
    width: 220px;
    aspect-ratio: 2 / 3;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border-2);
    flex-shrink: 0;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}

.mlp-heroPosterImg-32f19f5 {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mlp-heroPosterPlaceholder-32f19f5 {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--surface), var(--surface-2));
}

.mlp-heroContent-32f19f5 {
    flex: 1;
    padding-bottom: 10px;
}

.mlp-heroBadgeRow-32f19f5 {
    gap: 10px;
    margin-bottom: 14px;
}

.mlp-heroStage-32f19f5 {
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.04em;
}

.mlp-heroTicker-32f19f5 {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--accent);
    letter-spacing: 0.1em;
}

/* This preview is a self-contained "what the public sees" island and must
   stay theme-independent. The ERP themes restyle bare elements (`h1`, `a`,
   …) under `:is(body.theme-X, .themeBox#theme-X) <el>`; because `:is()`
   takes its most-specific branch, the `.themeBox#theme-X` *id* gives those
   rules ID-level specificity (1,1,1) that no class selector can beat. They
   are not `!important`, so we lock the preview's own typography with
   `!important` on every property a theme can touch (colour, font, and the
   `h1` gradient-text trio). */
.mlp-body-32f19f5 .mlp-heroTitle-32f19f5 {
    font-family: var(--serif) !important;
    font-size: 64px;
    font-weight: 400 !important;
    margin: 0;
    letter-spacing: -0.025em;
    line-height: 1;
    color: #fff !important;
    /* Neutralize theme `h1` gradient-text (Forest/Midnight/Ocean/Sunset set
       background + background-clip:text + transparent text-fill, plus a
       text-shadow on Midnight). */
    background: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: currentColor !important;
    text-shadow: none !important;
}

.mlp-heroLogline-32f19f5 {
    font-family: var(--serif);
    font-style: italic;
    font-size: 18px;
    color: var(--accent);
    margin-top: 10px;
    letter-spacing: 0.01em;
}

.mlp-heroMeta-32f19f5 {
    gap: var(--space-3);
    margin-top: 18px;
    color: var(--text-dim);
    font-size: 13px;
    white-space: nowrap;
}

.mlp-heroActions-32f19f5 {
    gap: 10px;
    margin-top: 22px;
}

.mlp-body-32f19f5 .mlp-btnPrimary-32f19f5 {
    padding: 11px 22px;
    background: var(--accent);
    color: #0a0a0e !important;
    border: none;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    gap: var(--space-2);
    white-space: nowrap;
    text-decoration: none !important;
    transition: filter 0.15s ease;
}

.mlp-body-32f19f5 .mlp-btnPrimary-32f19f5:hover {
    filter: brightness(1.08);
    color: #0a0a0e !important;
}

.mlp-body-32f19f5 .mlp-btnSecondary-32f19f5 {
    padding: 11px 20px;
    background: transparent;
    color: var(--text) !important;
    border: 1px solid var(--border-2);
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    gap: var(--space-2);
    white-space: nowrap;
    text-decoration: none !important;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.mlp-body-32f19f5 .mlp-btnSecondary-32f19f5:hover {
    border-color: var(--accent);
    color: var(--accent) !important;
}

.mlp-iconBtn-32f19f5 {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: transparent;
    border: 1px solid var(--border-2);
    color: var(--text-dim);
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: all 0.15s ease;

    &:hover {
        color: var(--accent);
        border-color: var(--accent);
    }
}

/* ---- Inner content wrapper (below the hero) ---- */
.mlp-content-32f19f5 {
    max-width: 1320px;
    width: 100%;
    margin: var(--space-5) auto var(--space-0);
    padding: 0 48px 60px;
    position: relative;
    z-index: 5;
    flex: 1;
}

.mlp-statsBar-32f19f5 {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--space-3);
}

.mlp-stat-32f19f5 {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 16px;
    gap: 6px;
}

.mlp-statLabel-32f19f5 {
    color: var(--text-mute);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.mlp-statValue-32f19f5 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text);
    font-family: var(--serif);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mlp-statSub-32f19f5 {
    font-size: 10.5px;
    color: var(--text-mute);
    font-family: var(--mono);
}

.mlp-columns-32f19f5 {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: var(--space-6);
    margin-top: var(--space-6);
}

.mlp-mainCol-32f19f5 {
    gap: var(--space-5);
}

.mlp-sideCol-32f19f5 {
    position: relative;
}

@media (max-width: 1100px) {
    .mlp-statsBar-32f19f5 { grid-template-columns: repeat(3, 1fr); }
    .mlp-columns-32f19f5 { grid-template-columns: 1fr; }
    .mlp-body-32f19f5 .mlp-heroTitle-32f19f5 { font-size: 44px; }
    .mlp-heroInner-32f19f5 { flex-direction: column; align-items: stretch; padding: var(--space-8) var(--space-6) var(--space-12); }
}

/* ---- Cards ---- */
.mlp-card-32f19f5 {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: var(--space-6);
}

.mlp-body-32f19f5 .mlp-cardTitle-32f19f5 {
    margin: 0;
    font-size: 13px;
    font-family: var(--sans) !important;
    font-weight: 600 !important;
    letter-spacing: 0.06em;
    color: var(--text-dim) !important;
    text-transform: uppercase;
}

.mlp-cardSerifBody-32f19f5 {
    font-family: var(--serif);
    font-size: 19px;
    line-height: 1.5;
    color: var(--text);
    margin: 14px 0 0;
    font-weight: 400;
    letter-spacing: -0.005em;
    text-wrap: pretty;
}

/* ---- Credits ---- */
.mlp-creditsGrid-32f19f5 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-top: 18px;
}

@media (max-width: 900px) {
    .mlp-creditsGrid-32f19f5 { grid-template-columns: repeat(2, 1fr); }
}

.mlp-creditCell-32f19f5 {
    gap: 5px;
}

.mlp-creditLabel-32f19f5 {
    color: var(--text-mute);
    font-size: 10.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.mlp-creditValue-32f19f5 {
    color: var(--text);
    font-size: 13px;
    font-weight: 500;
}

.mlp-creditsFooter-32f19f5 {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
    gap: var(--space-3);
}

.mlp-genreChips-32f19f5 {
    gap: var(--space-2);
}

.mlp-genreChip-32f19f5 {
    padding: 6px 12px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 12px;
    color: var(--text);
}

/* ---- Stills gallery ---- */
.mlp-galleryHead-32f19f5 {
    gap: 10px;
}

.mlp-galleryCount-32f19f5 {
    font-family: var(--mono);
    font-size: 10.5px;
    color: var(--text-mute);
}

.mlp-galleryGrid-32f19f5 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: var(--space-4);
}

.mlp-galleryThumb-32f19f5 {
    position: relative;
    aspect-ratio: 16 / 10;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--border);
    padding: 0;
    background: var(--surface-2);
    cursor: pointer;
    transition: border-color 0.15s ease;

    &:hover {
        border-color: var(--accent);
    }

    & img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
}

.mlp-lightbox-32f19f5 {
    position: fixed;
    inset: 0;
    background: rgba(5, 5, 8, 0.92);
    backdrop-filter: blur(10px);
    z-index: 200;
    display: grid;
    place-items: center;
    padding: var(--space-10);
    animation: lightbox-fade 0.2s ease both;
}

@keyframes lightbox-fade {
    from { opacity: 0; } to { opacity: 1; }
}

.mlp-lightboxImg-32f19f5 {
    max-width: 90vw;
    max-height: 86vh;
    border-radius: 12px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}

.mlp-lightboxClose-32f19f5 {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(22, 22, 28, 0.9);
    border: 1px solid var(--border-2);
    color: var(--text);
    cursor: pointer;
    display: grid;
    place-items: center;
    font-size: 24px;
    line-height: 1;
}

.mlp-lightboxPosition-32f19f5 {
    position: absolute;
    bottom: 32px;
    font-family: var(--mono);
    font-size: 12px;
    color: var(--text-dim);
}

/* ---- Investment sidebar ---- */
.mlp-sidebar-32f19f5 {
    gap: var(--space-4);
    position: sticky;
    top: 84px;
}

.mlp-sidebarLabel-32f19f5 {
    color: var(--text-mute);
    font-size: 10.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.mlp-sidebarLabelSmall-32f19f5 {
    font-size: 11px;
    color: var(--text-dim);
    letter-spacing: 0.06em;
}

.mlp-sidebarValueRow-32f19f5 {
    gap: 10px;
    margin-top: 6px;
}

.mlp-sidebarValue-32f19f5 {
    font-family: var(--serif);
    font-size: 36px;
    font-weight: 500;
    color: var(--text);
    letter-spacing: -0.015em;
}

.mlp-sidebarChange-32f19f5 {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--good);
}

.mlp-sidebarTicker-32f19f5 {
    font-family: var(--mono);
    font-size: 10.5px;
    color: var(--text-mute);
    margin-top: var(--space-1);
}

.mlp-amountSection-32f19f5 {
    gap: var(--space-2);
    margin-top: var(--space-4);
}

.mlp-amountWrap-32f19f5 {
    position: relative;
}

.mlp-amountSign-32f19f5 {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-mute);
    font-size: 14px;
}

.mlp-body-32f19f5 .mlp-amountInput-32f19f5 {
    width: 100%;
    padding: 12px 14px 12px 28px;
    /* Nostalgia themes bare <input>; lock these so the field keeps the
       preview's dark styling under every theme. */
    background: var(--bg-2) !important;
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text) !important;
    font-size: 15px;
    font-family: var(--mono) !important;
    outline: none;
}

.mlp-amountInput-32f19f5:focus {
    border-color: var(--accent);
}

.mlp-presetRow-32f19f5 {
    gap: 6px;
    margin-top: 2px;
}

.mlp-preset-32f19f5 {
    flex: 1;
    padding: 6px 0;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 7px;
    color: var(--text-dim);
    font-size: 11px;
    cursor: pointer;
    font-family: var(--mono);
}

.mlp-presetActive-32f19f5 {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
}

.mlp-breakdown-32f19f5 {
    gap: var(--space-2);
    padding: 14px 0;
    margin-top: var(--space-4);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.mlp-breakdownRow-32f19f5 {
    font-size: 12px;
    gap: 10px;
}

.mlp-breakdownLabel-32f19f5 {
    color: var(--text-mute);
}

.mlp-breakdownValue-32f19f5 {
    font-family: var(--mono);
    color: var(--text);
}

.mlp-cta-32f19f5 {
    width: 100%;
    padding: 13px;
    background: var(--accent);
    color: #0a0a0e;
    border: none;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: 0.02em;
    margin-top: var(--space-4);
    transition: filter 0.15s ease;

    &:hover {
        filter: brightness(1.1);
    }
}

.mlp-disclaimer-32f19f5 {
    font-size: 10.5px;
    color: var(--text-mute);
    text-align: center;
    line-height: 1.5;
    margin-top: var(--space-3);
}

/* ---- Data Room ---- */
.mlp-body-32f19f5 .mlp-dataRoomTitle-32f19f5 {
    margin: 0;
    font-size: 12.5px;
    font-family: var(--sans) !important;
    font-weight: 600 !important;
    letter-spacing: 0.06em;
    color: var(--text-dim) !important;
    text-transform: uppercase;
}

.mlp-dataRoomList-32f19f5 {
    gap: 2px;
    margin-top: 14px;
}

.mlp-body-32f19f5 .mlp-dataRoomItem-32f19f5 {
    gap: 10px;
    padding: 10px;
    border-radius: 8px;
    text-decoration: none !important;
    color: var(--text) !important;
    transition: background 0.15s ease;
}

.mlp-body-32f19f5 .mlp-dataRoomItem-32f19f5:hover {
    background: var(--surface-2);
}

.mlp-dataRoomIcon-32f19f5 {
    color: var(--text-mute);
    flex-shrink: 0;
}

.mlp-dataRoomInfo-32f19f5 {
    flex: 1;
    min-width: 0;
}

.mlp-dataRoomName-32f19f5 {
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mlp-dataRoomSize-32f19f5 {
    font-size: 10px;
    font-family: var(--mono);
    color: var(--text-mute);
}

.mlp-dataRoomDownload-32f19f5 {
    color: var(--text-mute);
    flex-shrink: 0;
}

/* ---- Asset manager card ---- */
.mlp-assetManager-32f19f5 {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: var(--space-5);
    gap: var(--space-3);
}

.mlp-assetManagerAvatar-32f19f5 {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-deep));
    display: grid;
    place-items: center;
    font-weight: 700;
    color: #0a0a0e;
    font-size: 13px;
    flex-shrink: 0;
}

.mlp-assetManagerInfo-32f19f5 {
    flex: 1;
    min-width: 0;
}

.mlp-assetManagerLabel-32f19f5 {
    color: var(--text-mute);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.mlp-assetManagerName-32f19f5 {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text);
    margin-top: 3px;
}

/* The .related* classes live with the RelatedTitles component in
   bins/the_exchange (preview.css) — it composes around this body but
   stays out of the shared crate because the ERP preview tab doesn't
   render the "more titles" rail. */

/* ---- Lightbox prev/next chevrons ---- */
.mlp-lightboxNav-32f19f5 {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(22, 22, 28, 0.85);
    border: 1px solid var(--border-2);
    color: var(--text);
    cursor: pointer;
    display: grid;
    place-items: center;
    font-size: 22px;
    line-height: 1;

    &:hover {
        background: rgba(22, 22, 28, 1);
        color: var(--accent);
    }
}

.mlp-lightboxNavPrev-32f19f5 { left: 24px; }
.mlp-lightboxNavNext-32f19f5 { right: 24px; }


.coverAspect-f528392 {
    aspect-ratio: 2 / 3;
}


.mediaListingEditForm-acb78e2 {
    .searchSelect {
        width: 100%;
    }

    .searchSelect input {
        width: 100% !important;
        min-width: 100% !important;
    }

    .searchSelect input::placeholder {
        color: var(--bs-body-color);
        opacity: 0.85;
    }

    & textarea {
        field-sizing: content;
        min-height: 4lh;
    }

    & .posterColumn-acb78e2 {
        flex: 0 0 180px;
        width: 180px;
        max-width: 180px;

        @media (min-width: 1200px) {
            flex: 0 0 200px;
            width: 200px;
            max-width: 200px;
        }

        @media (min-width: 1400px) {
            flex: 0 0 230px;
            width: 230px;
            max-width: 230px;
        }

        @media (max-width: 575.98px) {
            flex: 0 0 auto;
            width: 100%;
            max-width: 200px;
            margin-inline: auto;
        }
    }
}



.portfolioEditForm-757513d {
    .filesUpload-757513d {
        width: 100%;
        height: 120px;
    }

    .dropZone-757513d {
        width: 100%;
        height: 100%;
        border: 2px dashed var(--bs-secondary);
        background-color: var(--bs-secondary-bg);
        border-radius: var(--radius-md);
        cursor: pointer;

        &:hover {
            background-color: var(--bs-primary-bg-subtle);
        }
    }

    .instructions-757513d {

        p {
            text-align: center;
            margin: 0;
        }
    }
}


.headerGrid-1948639 {
    grid-template-columns: minmax(0, 1fr) auto;
}


.gallery-cbe7b1f {
    padding: var(--space-4);
    overflow-y: auto;
}

.noImages-cbe7b1f {
    width: 100%;
    text-align: center;
    padding: var(--space-12);
}


.coverPreviewButton-5a34539 {
    position: relative;
    /* sit above the row's stretched-link overlay so clicking the poster
       opens the preview instead of navigating */
    z-index: 2;
    flex-shrink: 0;
    /* !important to reliably beat the shared .previewButton width:100%
       (equal specificity, so a plain rule would only win by bundle order) */
    width: auto !important;
}

.coverThumbnail-5a34539 {
    width: 48px;
    height: 68px;
    object-fit: cover;
    border-radius: var(--bs-border-radius);
    flex-shrink: 0;

    @media (min-width: 1200px) {
        width: 56px;
        height: 80px;
    }

    @media (min-width: 1400px) {
        width: 64px;
        height: 92px;
    }

    @media (min-width: 1800px) {
        width: 76px;
        height: 108px;
    }
}


.heatmap-d22d46e {
    position: relative;
    width: 100%;
    /* Default aspect ratio; the orientation modifiers below override it per breakpoint. */
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-md, 8px);
    overflow: hidden;
    background: transparent;

    /* Landscape on >=md screens; taller portrait box on mobile so tiles keep
   enough room to stay legible. */
    &.heatmapWide-d22d46e {
        aspect-ratio: 16 / 9;
    }

    &.heatmapTall-d22d46e {
        aspect-ratio: 3 / 4;
    }

    & .tile-d22d46e {
        position: absolute;
        overflow: hidden;
        text-decoration: none;
        /* Transparent border + padding-box clip leaves a gap between the
       coloured fills without shifting the squarified layout. */
        border: 0.75px solid transparent;
        background-clip: padding-box;
        cursor: pointer;
        /* `--tile-bg` is set per-tile by the component. */
        background-color: var(--tile-bg, transparent);

        /* Hover highlight drawn as a separate overlay so only the wash animates and
       the tile's own background colour is left untouched. */
        &::after {
            content: "";
            position: absolute;
            inset: 0;
            background-color: rgba(255, 255, 255, 0);
            transition: background-color var(--transition-slow, 0.3s) ease;
            pointer-events: none;
        }

        &:hover::after,
        &:focus-visible::after {
            background-color: rgba(255, 255, 255, 0.28);
        }

        &:hover,
        &:focus-visible {
            text-decoration: none;
            outline: none;
        }

        /* Keep the labels above the hover overlay. */
        & .tileName-d22d46e,
        & .tileCount-d22d46e {
            position: relative;
            z-index: 1;
        }

        & .tileName-d22d46e {
            font-size: 0.8rem;
            font-weight: 600;
            line-height: 1.1;
            overflow: hidden;
            word-break: break-word;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
        }

        & .tileCount-d22d46e {
            font-size: 0.95rem;
            font-weight: 700;
            opacity: 0.88;
        }
    }
}


.imageCell-36d5307 {
    max-width: 48px;
    vertical-align: middle;
}

.clickableRow-36d5307 {
    cursor: pointer;
}


.portfolioInlineMultiselect-731822a {
    width: 100%;
}

/* Applied to both the selected portfolio chips and the dropdown items so the
   sizing keeps working after the dropdown portals out of the wrapper. */
.coverImage-731822a {
    width: 32px;
    object-fit: cover;
}


.previewWrapper-f4e73ff {
    background: #0a0a0e;
    min-height: calc(100vh - 180px);
    margin: var(--space-3);
}


.canvasViewport-f538e82 {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    cursor: grab;
    user-select: none;

    &:active {
        cursor: grabbing;
    }
}

.scaleFrame-f538e82 {
    flex: 0 0 auto;
    position: relative;
    width: max-content;
    height: max-content;
}

.canvas-f538e82 {
    transform-origin: 0 0;
    width: max-content;
    height: max-content;
    overflow: hidden;
}


.modalOverlay-d94a004 {
    z-index: 1055;
}


.col25-10ce7bd { width: 25%; }
.col35-10ce7bd { width: 35%; }
.col10-10ce7bd { width: 10%; }

.treeContainer-10ce7bd {
    background: var(--bs-body-bg);
    border-radius: 0.375rem;
    overflow-x: auto;

    table {
        table-layout: fixed;
        width: 100%;
    }

    td {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .groupRow-10ce7bd {
        transition: background-color var(--transition-fast);
    }

    .groupRow-10ce7bd:hover {
        background-color: var(--bs-gray-100);
    }

    .treeCell-10ce7bd {}

    .expandBtn-10ce7bd {
        background: none;
        border: none;
        padding: 0;
        width: 20px;
        height: 20px;
        cursor: pointer;
        transition: transform var(--transition-base);
    }

    .expandSpacer-10ce7bd {
    width: 20px;
    display: inline-block;
}

.expandBtn-10ce7bd:hover {
        transform: scale(1.2);
    }

    .expandBtn-10ce7bd i {
        font-size: 0.875rem;
    }
}


.chartContainer-7b1d29f {
    flex: 1 1 0;
    min-height: 0;
    width: 100%;
    flex-direction: column;
    overflow: hidden;
    position: relative;

    & > * {
        animation: orgChartFadeIn 0.3s ease-out;
    }

    .orgTree-7b1d29f {
        --popoverWidth: 320px;
        --popoverMaxHeight: 420px;
        --popoverGap: 0.6rem;

        display: flex;
        justify-content: center;
        align-items: flex-start;
        gap: var(--space-12);
        padding: var(--space-6);
        padding-right: calc(var(--space-6) + var(--popoverWidth) + var(--popoverGap));
        padding-bottom: calc(var(--space-6) + var(--popoverMaxHeight) + var(--popoverGap));
        min-width: max-content;
        min-height: max-content;

        &.layoutVertical-7b1d29f {
            flex-direction: column;
            align-items: flex-start;
            justify-content: flex-start;
        }
    }
}

@keyframes orgChartFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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


.chartContainer-8496320 {
    height: 600px;
    width: 100%;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    margin: 0 var(--space-4);

    & > * {
        animation: orgChartFadeIn 0.3s ease-out;
    }

    .orgTree-8496320 {
        padding: 4rem 0;
        min-width: max-content;
        min-height: max-content;
    }

    .overlayControls-8496320 {
        position: absolute;
        top: 1rem;
        right: 1rem;
        z-index: 10;
    }
}

@keyframes orgChartFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

/* Selection Node Styles */
@keyframes nodeAppear {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

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

@keyframes childrenAppear {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

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

.selectionNode-8496320 {
    --connectorsColor: var(--bs-gray);
    --cardWidth: 200px;

    display: flex;
    flex-direction: column;
    align-items: center;
    animation: nodeAppear 0.4s ease-out;

    .nodeCard-8496320 {
        width: var(--cardWidth);
        transition: all var(--transition-base);
        position: relative;
        cursor: pointer;

        &:hover {
            box-shadow: var(--bs-box-shadow);
        }

        &:has(input.form-check-input:checked) {
            background-color: var(--bs-primary-bg-subtle);
        }
    }

    .childrenContainer-8496320 {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        margin-top: 0;
        animation: childrenAppear 0.3s ease-out;
    }

    .connectorLine-8496320 {
        width: 2px;
        height: 40px;
        background: var(--connectorsColor);
        position: relative;
        margin-bottom: 0;
    }

    .childrenNodes-8496320 {
        --childGap: 2rem;
        display: flex;
        justify-content: center;
        position: relative;
        gap: var(--childGap);

        /* Horizontal connector line between siblings */
        &::before {
            content: "";
            position: absolute;
            top: 0;
            height: 2px;
            background: var(--connectorsColor);
            z-index: 1;
        }

        /* Position horizontal line to span from first to last child */
        &:not(:has(:only-child))::before {
            left: calc(50% / var(--child-count, 2));
            right: calc(50% / var(--child-count, 2));
        }

        &:has(:only-child)::before {
            display: none;
        }

        .childWrapper-8496320 {
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
            padding-top: var(--space-10);
            flex: 0 0 auto;

            &::before {
                content: "";
                position: absolute;
                top: 0;
                left: 50%;
                transform: translateX(-50%);
                width: 2px;
                height: 40px;
                background: var(--connectorsColor);
                z-index: 2;
            }

            .childConnector-8496320::before {
                content: "";
                position: absolute;
                top: 0;
                right: 50%;
                width: calc(50% + (var(--childGap) / 2));
                height: 2px;
                background: var(--connectorsColor);
                z-index: 1;
            }

            .childConnector-8496320::after {
                content: "";
                position: absolute;
                top: 0;
                left: 50%;
                width: calc(50% + (var(--childGap) / 2));
                height: 2px;
                background: var(--connectorsColor);
                z-index: 1;
            }

            &:first-child > .childConnector-8496320::before,
            &:only-child > .childConnector-8496320::before {
                content: none;
            }

            &:last-child > .childConnector-8496320::after,
            &:only-child > .childConnector-8496320::after {
                content: none;
            }
        }
    }
}


@keyframes nodeAppear {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

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

.userAvatarSlot-abc32de {
    width: 40px;
    flex-shrink: 0;
}

.roleBadge-abc32de {
    background: var(--bs-primary);
    color: white;
    padding: 0.15rem 0.4rem;
    border-radius: var(--radius-sm);
    font-size: 0.7rem;
}

.container-abc32de {
    --connectorsColor: var(--bs-gray);
    --cardWidth: 240px;

    display: flex;
    flex-direction: column;
    align-items: center;
    animation: nodeAppear 0.4s ease-out;

    .nodeCard-abc32de {
        width: var(--cardWidth);
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        text-decoration: none;
        border-color: var(--bs-border-color);
        cursor: pointer;

        &:hover {
            box-shadow: var(--bs-box-shadow);
            border-color: var(--bs-primary);
        }

        .rolesPopover-abc32de {
            position: absolute;
            top: 0;
            left: calc(100% + 0.6rem);
            width: 320px;
            max-height: 420px;
            overflow-y: auto;
            padding: 0.6rem 0.75rem;
            border-radius: var(--bs-border-radius, 0.375rem);
            background-color: var(--bs-body-bg);
            color: var(--bs-body-color);
            border: 1px solid var(--bs-border-color);
            box-shadow: var(--bs-box-shadow);
            font-size: 0.8125rem;
            text-align: left;
            cursor: default;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transform: translateX(-0.25rem);
            transition:
                opacity 120ms ease,
                transform 120ms ease,
                visibility 120ms ease;
            z-index: var(--bs-tooltip-zindex, 1080);

            /* arrow pointing left to the card */
            &::before {
                content: "";
                position: absolute;
                top: 1rem;
                right: 100%;
                border-style: solid;
                border-width: 0.4rem 0.4rem 0.4rem 0;
                border-color: transparent var(--bs-border-color) transparent
                    transparent;
            }

            &::after {
                content: "";
                position: absolute;
                top: 1rem;
                right: calc(100% - 1px);
                border-style: solid;
                border-width: 0.4rem 0.4rem 0.4rem 0;
                border-color: transparent var(--bs-body-bg) transparent
                    transparent;
            }
        }

        &:hover .rolesPopover-abc32de,
        &:focus-within .rolesPopover-abc32de {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            transform: translateX(0);
            transition-delay: 120ms;
        }

        .popoverHeader-abc32de {
            margin-bottom: 0.4rem;
            padding-bottom: 0.35rem;
            border-bottom: 1px solid var(--bs-border-color);
            color: var(--bs-emphasis-color);
        }

        .popoverSection-abc32de {
            margin-bottom: var(--space-2);

            &:last-child {
                margin-bottom: 0;
            }
        }

        .popoverSectionTitle-abc32de {
            font-weight: bold;
            color: var(--bs-secondary-color);
            margin-bottom: var(--space-1);
        }

        .popoverPermissionType-abc32de {
            color: var(--bs-secondary-color);
        }

        /* Permission filter highlighting */
        &.highlighted-abc32de {
            /* Override Bootstrap text-secondary to be visible on success background */
            .text-secondary {
                color: rgba(255, 255, 255, 0.75) !important;
            }

            &:hover {
                box-shadow: var(--bs-box-shadow);
            }
        }

        /* Permission filter dimming */
        &.dimmed-abc32de {
            opacity: 0.4;

            &:hover {
                opacity: 0.7;
            }
        }

        .nodeTitle-abc32de {
            &:hover {
                font-weight: bold;
            }

            button.expand-abc32de {
                &:active {
                    transform: scale(0.95);
                }
            }
        }

        .groupDescription-abc32de:has(small:empty) {
            display: none;
        }
    }

    .childrenContainer-abc32de {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        margin-top: 0;
        animation: childrenAppear 0.3s ease-out;
    }

    @keyframes childrenAppear {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }

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

    .connectorLine-abc32de {
        width: var(--connector-line-width, 2px);
        height: 40px;
        background: var(--connectorsColor);
        position: relative;
        margin-bottom: 0;
    }

    .childrenNodes-abc32de {
        --childGap: 3rem;
        display: flex;
        justify-content: center;
        position: relative;
        gap: var(--childGap);

        /* Horizontal connector line between siblings */
        &::before {
            content: "";
            position: absolute;
            top: 0;
            height: var(--connector-line-width, 2px);
            background: var(--connectorsColor);
            z-index: 1;
        }

        /* Position horizontal line to span from first to last child */
        &:not(:has(:only-child))::before {
            left: calc(50% / var(--child-count, 2));
            right: calc(50% / var(--child-count, 2));
        }

        &:has(:only-child)::before {
            display: none;
        }

        .childWrapper-abc32de {
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
            padding-top: var(--space-10);
            flex: 0 0 auto;

            &::before {
                content: "";
                position: absolute;
                top: 0;
                left: 50%;
                transform: translateX(-50%);
                width: var(--connector-line-width, 2px);
                height: 40px;
                background: var(--connectorsColor);
                z-index: 2;
            }

            .childConnector-abc32de::before {
                content: "";
                position: absolute;
                top: 0;
                right: 50%;
                width: calc(50% + (var(--childGap) / 2));
                height: var(--connector-line-width, 2px);
                background: var(--connectorsColor);
                z-index: 1;
            }

            .childConnector-abc32de::after {
                content: "";
                position: absolute;
                top: 0;
                left: 50%;
                width: calc(50% + (var(--childGap) / 2));
                height: var(--connector-line-width, 2px);
                background: var(--connectorsColor);
                z-index: 1;
            }

            &:first-child > .childConnector-abc32de::before,
            &:only-child > .childConnector-abc32de::before {
                content: none;
            }

            &:last-child > .childConnector-abc32de::after,
            &:only-child > .childConnector-abc32de::after {
                content: none;
            }
        }
    }

    &.layoutVertical-abc32de {
        flex-direction: row;
        align-items: center;

        .childrenContainer-abc32de {
            flex-direction: row;
            align-items: center;
        }

        .nodeCard-abc32de {
            .rolesPopover-abc32de {
                top: calc(100% + 0.6rem);
                left: 0;
                transform: translateY(-0.25rem);

                &::before {
                    top: auto;
                    right: auto;
                    bottom: 100%;
                    left: 1rem;
                    border-width: 0 0.4rem 0.4rem 0.4rem;
                    border-color: transparent transparent
                        var(--bs-border-color) transparent;
                }

                &::after {
                    top: auto;
                    right: auto;
                    bottom: calc(100% - 1px);
                    left: 1rem;
                    border-width: 0 0.4rem 0.4rem 0.4rem;
                    border-color: transparent transparent var(--bs-body-bg)
                        transparent;
                }
            }

            &:hover .rolesPopover-abc32de,
            &:focus-within .rolesPopover-abc32de {
                transform: translateY(0);
            }
        }

        .connectorLine-abc32de {
            width: 40px;
            height: var(--connector-line-width, 2px);
        }

        .childrenNodes-abc32de {
            flex-direction: column;
            justify-content: flex-start;

            &::before {
                top: auto;
                left: 0;
                width: var(--connector-line-width, 2px);
                height: auto;
            }

            &:not(:has(:only-child))::before {
                top: calc(50% / var(--child-count, 2));
                bottom: calc(50% / var(--child-count, 2));
                left: 0;
                right: auto;
            }

            .childWrapper-abc32de {
                flex-direction: row;
                align-items: center;
                padding-top: 0;
                padding-left: var(--space-10);

                &::before {
                    top: 50%;
                    left: 0;
                    transform: translateY(-50%);
                    width: 40px;
                    height: var(--connector-line-width, 2px);
                }

                .childConnector-abc32de::before {
                    top: auto;
                    bottom: 50%;
                    right: auto;
                    left: 0;
                    width: var(--connector-line-width, 2px);
                    height: calc(50% + (var(--childGap) / 2));
                }

                .childConnector-abc32de::after {
                    top: 50%;
                    left: 0;
                    width: var(--connector-line-width, 2px);
                    height: calc(50% + (var(--childGap) / 2));
                }
            }
        }
    }
}


/* `.iconContainer` and `.companyName` render inside `<SingleSelect children>`,
   which portals out of the SingleSelect wrapper. Stylance-hashed so they stay
   unique to this component at top level. */
.iconContainer-bd8ba1c {
    width: 1.5rem;
    text-align: center;
    flex-grow: 0 !important;

    img {
        width: 1.5rem;
        max-height: 1.5rem;
        object-fit: contain !important;
    }
}

.companyName-bd8ba1c {
    flex-grow: 1 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Forces the single `<td>` in each dropdown row to take the full width.
   Scoped via `:has(.iconContainer)` so it only matches rows of this select. */
td:has(.iconContainer-bd8ba1c) {
    width: 100%;
}


.filterContainer-b5556f2 {
    min-width: 280px;

    .inputWrapper-b5556f2 {
        position: relative;

        input[type="search"] {
            padding-right: var(--space-10);
        }
    }

    .inputIcon-b5556f2 {
        position: absolute;
        right: 0.75rem;
        top: 50%;
        transform: translateY(-50%);
        color: var(--bs-secondary-color);
        pointer-events: none;
    }

    .clearBtn-b5556f2 {
        position: absolute;
        right: 0.25rem;
        top: 50%;
        transform: translateY(-50%);
        padding: var(--space-1) var(--space-2);
        border: none;
        background: none;
        color: var(--bs-secondary-color);
        cursor: pointer;

        &:hover {
            color: var(--bs-body-color);
        }
    }

    .matchBadge-b5556f2 {
        display: block;
        margin-top: var(--space-1);
        font-size: 0.75rem;
    }

    .dropdown-menu {
        max-height: 50vh;
        overflow-y: auto;
        min-width: 100%;
        width: max-content;
        max-width: 500px;
    }
}


.permissionPicker-1b505f9 {
    .permissionRow-1b505f9 {
        padding: var(--space-2) 0;
        border-bottom: 1px solid var(--bs-border-color-translucent);

        &:first-child {
            padding-top: 0;
        }

        &:last-child {
            border-bottom: none;
            padding-bottom: 0;
        }
    }
}


.filterContainer-bdcaa24 {
    min-width: 280px;

    .inputWrapper-bdcaa24 {
        position: relative;

        input[type="search"] {
            padding-right: var(--space-10);
        }
    }

    .inputIcon-bdcaa24 {
        position: absolute;
        right: 0.75rem;
        top: 50%;
        transform: translateY(-50%);
        color: var(--bs-secondary-color);
        pointer-events: none;
    }

    .clearBtn-bdcaa24 {
        position: absolute;
        right: 0.25rem;
        top: 50%;
        transform: translateY(-50%);
        padding: var(--space-1) var(--space-2);
        border: none;
        background: none;
        color: var(--bs-secondary-color);
        cursor: pointer;

        &:hover {
            color: var(--bs-body-color);
        }
    }

    .matchBadge-bdcaa24 {
        display: block;
        margin-top: var(--space-1);
        font-size: 0.75rem;
    }

    .dropdown-menu {
        max-height: 50vh;
        overflow-y: auto;
        min-width: 100%;
        width: max-content;
        max-width: 500px;
    }
}


.rolePicker-62205df {
    /* Section styles */
    .roleSection-62205df {
        border: 1px solid var(--bs-border-color);
        border-radius: var(--bs-border-radius);
        padding: var(--space-4);
        margin-bottom: var(--space-4);
        background: var(--bs-body-bg);
    }

    .roleSectionHeader-62205df {
        margin-bottom: var(--space-3);
    }

    .roleSectionTitle-62205df {
        font-weight: 600;
        color: var(--bs-primary);
    }

    /* Card styles */
    .roleCard-62205df {
        border: 1px solid var(--bs-border-color);
        border-radius: var(--bs-border-radius);
        padding: var(--space-3);
        margin-bottom: var(--space-2);
        background: var(--bs-body-bg);
        transition: border-color var(--transition-base);

        &:hover {
            border-color: var(--bs-primary);
        }

        &:last-child {
            margin-bottom: 0;
        }
    }

    .roleName-62205df {
        font-weight: 500;
    }

    .roleDescription-62205df {
        font-size: 0.85rem;
        color: var(--bs-secondary);
    }

    /* Permissions preview */
    .permissionsPreview-62205df {
        margin-top: var(--space-3);
        padding-top: var(--space-3);
        border-top: 1px solid var(--bs-border-color-translucent);
    }

    .permissionsAccordion-62205df {
        font-size: 0.875rem;

        .accordion-button {
            padding: var(--space-2) var(--space-3);
            font-size: 0.875rem;
        }

        .accordion-body {
            padding: var(--space-2) var(--space-3);
        }
    }

    .permissionBadge-62205df {
        background: rgba(var(--bs-primary-rgb), 0.1);
        color: var(--bs-primary);
        padding: 0.2rem 0.5rem;
        border-radius: var(--radius-sm);
        font-size: 0.75rem;
        margin: 0.125rem;
    }

    /* Dropdown styles */
    .dropdownMenu-62205df {
        padding-top: 0;
    }

    .dropdownSearch-62205df {
        padding: var(--space-2);
        border-bottom: 1px solid var(--bs-border-color-translucent);
    }

    .dropdownList-62205df {
        max-height: 300px;
        overflow-y: auto;
    }

    /* Badge styles */
    .roleBadge-62205df {
        background: var(--bs-primary);
        color: white;
        padding: var(--space-1) var(--space-2);
        border-radius: var(--radius-sm);
        font-size: 0.75rem;
    }

    /* Empty state */
    .noRoles-62205df {
        color: var(--bs-secondary);
        font-style: italic;
        padding: var(--space-4);
        text-align: center;
    }

    /* Expand button */
    .expandButton-62205df {
        padding: 0;
        border: none;
        background: transparent;
        color: var(--bs-secondary);
        cursor: pointer;
        transition: transform var(--transition-base);

        &:hover {
            color: var(--bs-primary);
        }

        &.expanded-62205df {
            transform: rotate(180deg);
        }
    }
}


.card-6f859c6 {
    border-radius: var(--radius-md);
    transition: box-shadow var(--transition-fast);

    &:hover {
        box-shadow: var(--bs-box-shadow);
    }

    & .header-6f859c6 {
        border-bottom: 1px solid var(--bs-border-color);
    }

    & .groupSection-6f859c6 {
        /* Anchor for the adjacent-sibling separator below. */

        & + .groupSection-6f859c6 {
            padding-top: var(--space-3);
            border-top: 1px dashed var(--bs-border-color-translucent);
        }

        & .roleRow-6f859c6 {
            align-items: center;
        }

        & .chips-6f859c6 {
            max-height: 16rem;
            overflow-y: auto;

            & .chip-6f859c6 {
                border-radius: var(--radius-sm);
                overflow: hidden;
                font-size: 0.75rem;
                line-height: 1.2;
                border: 1px solid rgba(var(--bs-primary-rgb), 0.25);

                & .chipEntity-6f859c6 {
                    background: rgba(var(--bs-primary-rgb), 0.18);
                    color: var(--bs-primary);
                    padding: 0.2rem 0.45rem;
                    font-weight: 600;
                    white-space: nowrap;
                }

                & .chipAction-6f859c6 {
                    background: rgba(var(--bs-primary-rgb), 0.06);
                    color: var(--bs-body-color);
                    padding: 0.2rem 0.45rem;
                    white-space: nowrap;
                }
            }
        }
    }
}


.root-77b8769 {
    width: 100%;
}

.pickerCard-77b8769 {
    border-radius: var(--radius-md);
}

.pickerControl-77b8769 {
    min-width: 0;
}

.emptyState-77b8769 {
    background: var(--bs-body-bg);
    border: 1px dashed var(--bs-border-color);
    border-radius: var(--radius-md);
}

.emptyIcon-77b8769 {
    width: 2.5rem;
    height: 2.5rem;
    opacity: 0.5;
}


.permissionsContainer-183084f {
    max-width: 800px;

    & h4 {
        margin-bottom: var(--space-2);
    }

    & .featuresGrid-183084f {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: var(--space-4);
        margin-top: var(--space-6);

        & .featureCard-183084f {
            padding: var(--space-4);
            background: var(--bs-gray-100);
            border-radius: 0.375rem;
            border: 1px solid var(--bs-border-color);
            transition: all var(--transition-base);

            &:hover {
                background: var(--bs-gray-200);
                border-color: var(--bs-primary);
            }
        }
    }
}


.productionCoverSheet-ad4574d {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    max-width: 1200px;
    margin: 0 auto;

    .weekColorMarker-ad4574d {
        position: relative;
        width: 2.5rem;
        height: 2.5rem;
        background: var(--bs-tertiary-bg);
        border-radius: 50%;
        margin-right: var(--space-2);

        .weekNumber-ad4574d {
            position: absolute;
            bottom: 2px;
            font-weight: 900;
            font-size: 0.75rem;
        }
    }

    .qrCodeSection-ad4574d {
        padding: var(--space-2);
        background: white;
        border-radius: var(--bs-border-radius);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }

    .qrCodePlaceholder-ad4574d {
        width: 200px;
        height: 200px;
        border: 2px dashed var(--bs-border-color);
        border-radius: var(--bs-border-radius);
        background-color: var(--bs-tertiary-bg);

        i {
            color: var(--bs-secondary-color);
        }
    }

    .qrCodeClickable-ad4574d {
        cursor: pointer;
        border-radius: var(--bs-border-radius);
        transition:
            transform var(--transition-base),
            box-shadow var(--transition-base);

        &:hover {
            transform: scale(1.02);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }

        img {
            display: block;
            border-radius: var(--bs-border-radius);
        }
    }

    .employees-ad4574d {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: var(--space-4);
    }

    .employeeCard-ad4574d {
        height: 100%;
        border: 1px solid var(--bs-border-color);
        border-radius: var(--bs-border-radius);
        background: var(--bs-body-bg);
        transition: box-shadow var(--transition-base);

        &:hover {
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }
    }

    .employeeCard-ad4574d.onLeave-ad4574d {
        opacity: 0.6;
        background: var(--bs-warning-bg-subtle);
    }

    .position-ad4574d {
        margin-top: -2px;
        color: #a6844e;
        font-variant: small-caps;
        text-transform: capitalize;
        font-size: 0.85rem;
    }
}

@media screen {
    .productionCoverSheet-ad4574d {
        padding: var(--space-6);
    }
}

@media print {
    .productionCoverSheet-ad4574d {
        padding: 0;
    }
}


.avatarCell-e7435d6 {
    width: 48px;
}


.previewPdf-7fdda1d {
	width: 100%;
	height: 600px;
	border: 0;
}

.previewImage-7fdda1d {
	max-width: 100%;
	max-height: 600px;
}


.flagCell-4ab4189 {
	width: 2em;
}

.cheapestIcon-4ab4189 {
	display: none;
}

tr.cheapest-4ab4189 .cheapestIcon-4ab4189 {
	display: inline-block;
}


.canvas-f46579e {
    cursor: crosshair;
    max-width: 100%;
}


.chartContainer-a6ba634 {
    min-height: 400px;
    max-height: 650px;
    height: 70vh;
}


.breadcrumbItem-82816b7 {
    max-width: 300px;
}


.matrix-8201667 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background-color: var(--bs-border-color-translucent);
    border-top: 1px solid var(--bs-border-color-translucent);
}

.matrixCell-8201667 {
    padding: 0.9rem 1rem;
    background-color: var(--bs-body-bg);
    color: inherit;
    text-decoration: none;
    transition: background-color var(--transition-fast);

    &:hover {
        background-color: var(--bs-tertiary-bg);
    }
}

.matrixBadge-8201667 {
    min-width: 2.5rem;
    padding: 0.35rem 0.6rem;
    border-radius: 999px;
    font-size: 1.1rem;
    font-weight: 700;
    text-align: center;
}

.matrixLabel-8201667 {
    font-size: 0.9rem;
    font-weight: 500;
}


/* Bootstrap utilities cover most layout (flex, gap, padding, borders, colors).
 * What remains here is what Bootstrap doesn't ship: a custom row hover, the
 * color-mix accent backgrounds for pending/awaiting rows, and the markdown
 * fade-out clamp. Keep this file small. */

.row-7180e79 {
    border-left: 3px solid transparent;
    transition: background-color 0.12s ease-in-out;

    &:hover {
        background-color: var(--bs-tertiary-bg);
    }

    &:last-child {
        border-bottom: 0 !important;
    }
}

.rowPending-7180e79 {
    border-left-color: var(--bs-primary);
    background-color: color-mix(in srgb, var(--bs-primary) 5%, transparent);
}

.rowAwaiting-7180e79 {
    border-left-color: var(--bs-warning);
    background-color: color-mix(in srgb, var(--bs-warning) 6%, transparent);
}

.notes-7180e79 {
    .markdown-preview {
        margin-bottom: 0;
        max-height: 4.5rem;
        overflow: hidden;
        position: relative;
    }

    .markdown-preview::after {
        content: "";
        position: absolute;
        inset: auto 0 0 0;
        height: 1.25rem;
        background: linear-gradient(to bottom, transparent, var(--bs-body-bg));
        pointer-events: none;
    }
}


/* Work center edit view — soft-card design tokens. Stylance-scoped.
 *
 * Flex layout primitives (display:flex, align-items, justify-content, gap,
 * flex-direction) live on the view via Bootstrap utilities — this module
 * only carries visual properties (border, background, radius, sizing). */

.shell-3b9ee02 {
    width: 100%;
}

.teamColumn-3b9ee02 {
    background: var(--bs-tertiary-bg);
    border-radius: var(--radius-md);
    padding: 0.85rem;
    height: 100%;

    & .subSectionLabel-3b9ee02 {
        font-size: 0.78rem;
        font-weight: 600;
        color: var(--bs-body-color);
        margin-bottom: var(--space-2);
    }
}

.sectionCount-3b9ee02 {
    font-size: 0.7rem;
    font-weight: 500;
    background: var(--bs-secondary-bg);
    color: var(--bs-secondary-color);
    padding: 0.05rem 0.4rem;
    border-radius: var(--radius-sm);
    margin-left: var(--space-1);
    letter-spacing: 0;
    text-transform: none;
}

.softCard-3b9ee02 {
    border: 0.5px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--radius-xl);
    box-shadow: none;

    .card-header {
        padding: var(--space-3) var(--space-5);
        background: transparent;
    }

    .card-body {
        padding: var(--space-5);
    }
}

.formLabelSm-3b9ee02 {
    font-size: 0.78rem;
    color: var(--bs-secondary-color);
    margin-bottom: var(--space-1);
    font-weight: 400;
}

.iconFrame-3b9ee02 {
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--bs-tertiary-bg);
    border-radius: var(--radius-md);
    overflow: hidden;
    max-width: 12rem;
    margin: 0 auto;

    & .iconPlaceholder-3b9ee02 {
        color: var(--bs-secondary-color);
        font-size: 0.85rem;
    }
}

.machineRow-3b9ee02 {
    padding: 0.7rem 1.25rem;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-2);
    position: relative;
    background: var(--bs-body-bg);

    &:last-of-type {
        margin-bottom: var(--space-3);
    }

    & .machineIcon-3b9ee02 {
        flex-shrink: 0;
        width: 2rem;
        height: 2rem;
        border-radius: 0.4rem;
        background: var(--bs-tertiary-bg);
        color: var(--bs-secondary-color);
        overflow: hidden;

        & > img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }

    & .machineName-3b9ee02 {
        font-size: 0.9rem;
        color: var(--bs-body-color);
    }

    & .machineChevron-3b9ee02 {
        flex-shrink: 0;
        color: var(--bs-secondary-color);
        opacity: 0.6;
    }
}


/* Machine edit view — soft-card design tokens. Stylance-scoped.
 *
 * Flex layout primitives live on the view via Bootstrap utilities — this
 * module only carries visual properties (border, background, radius). */

.shell-1b0e4c5 {
    width: 100%;
}

.sectionCount-1b0e4c5 {
    font-size: 0.7rem;
    font-weight: 500;
    background: var(--bs-secondary-bg);
    color: var(--bs-secondary-color);
    padding: 0.05rem 0.4rem;
    border-radius: var(--radius-sm);
    margin-left: var(--space-1);
    letter-spacing: 0;
    text-transform: none;
}

.softCard-1b0e4c5 {
    border: 0.5px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--radius-xl);
    box-shadow: none;

    .card-header {
        padding: var(--space-3) var(--space-5);
        background: transparent;
    }

    .card-body {
        padding: var(--space-5);
    }
}

.formLabelSm-1b0e4c5 {
    font-size: 0.78rem;
    color: var(--bs-secondary-color);
    margin-bottom: var(--space-1);
    font-weight: 400;
}

.pictureFrame-1b0e4c5 {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--bs-tertiary-bg);
    border-radius: var(--radius-md);
    overflow: hidden;

    & img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    & .picturePlaceholder-1b0e4c5 {
        color: var(--bs-secondary-color);
        font-size: 0.85rem;
    }
}

.probeRow-1b0e4c5 {
    padding: 0.7rem 0.9rem;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-2);
    position: relative;
    background: var(--bs-body-bg);

    &:last-of-type {
        margin-bottom: var(--space-3);
    }

    & .probeIcon-1b0e4c5 {
        flex-shrink: 0;
        width: 2rem;
        height: 2rem;
        border-radius: 0.4rem;
        background: var(--bs-tertiary-bg);
        color: var(--bs-secondary-color);
    }

    & .probeBody-1b0e4c5 {
        flex-grow: 1;
        min-width: 0;

        & .probeName-1b0e4c5 {
            font-size: 0.9rem;
            font-weight: 600;
            color: var(--bs-body-color);
        }

        & .probeValue-1b0e4c5 {
            font-size: 0.8rem;
            color: var(--bs-secondary-color);
            font-family: var(--bs-font-monospace);
        }
    }

    & .probeChevron-1b0e4c5 {
        flex-shrink: 0;
        color: var(--bs-secondary-color);
        opacity: 0.6;
    }
}

.statusRow-1b0e4c5 {
    height: calc(1.5em + 0.75rem + 2px);
}


/* Probe edit view — soft-card design tokens. Stylance-scoped. */

.shell-a7bd351 {
    width: 100%;
}

.softCard-a7bd351 {
    border: 0.5px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--radius-xl);
    box-shadow: none;

    .card-header {
        padding: var(--space-3) var(--space-5);
        background: transparent;
    }

    .card-body {
        padding: var(--space-5);
    }
}

.formLabelSm-a7bd351 {
    font-size: 0.78rem;
    color: var(--bs-secondary-color);
    margin-bottom: var(--space-1);
    font-weight: 400;
}

.statusRow-a7bd351 {
    height: calc(1.5em + 0.75rem + 2px);
}


.colName-e8d28d3 {
    width: 25%;
}


.shell-16e67d2 {
    width: 100%;
    padding-top: var(--space-2);

    & .statusCard-16e67d2 {
        border: 0.5px solid rgba(0, 0, 0, 0.08);
        border-left: 4px solid transparent;
        border-radius: var(--radius-xl);
        box-shadow: none;

        & .card-body {
            padding: var(--space-5);
        }

        &.statusRunning-16e67d2 {
            border-left-color: var(--bs-success);
        }

        &.statusIdle-16e67d2 {
            border-left-color: var(--bs-warning);
        }
    }

    & .sectionHeading-16e67d2 {
        margin-top: var(--space-4);
        margin-bottom: var(--space-2);
    }

    & .historyTable-16e67d2 td {
        vertical-align: middle;
    }
}


.delayBar-c358f64 {
    height: 3px;
}

.progressFill-c358f64 {
    width: 0%;
}


.progressFill-b8f249c {
    width: 0%;
}


/* Status badge text on quotation rows is hidden by default (icon + tooltip
   carry the meaning) and only revealed on very wide viewports, because the
   table is rendered inside a half-width col-md-6 card on desktop. */
.statusBadgeText-138984a {
    display: none;
}

.clickableCell-138984a {
    cursor: pointer;
}

@media (min-width: 2400px) {
    .statusBadgeText-138984a {
        display: inline;
    }
}


table {
    .imageCol-416e2f0 {
        width: 5rem;
    }

    td.imageCol-416e2f0 img {
        max-width: 4rem;
        max-height: 4rem;
        object-fit: contain;
    }

    .codeCol-416e2f0 {
        width: 12rem;
    }

    .pkgRateCol-416e2f0 {
        width: 16rem;
    }

    .grossAmountCol-416e2f0 {
        width: 16rem;
    }

    .discountCol-416e2f0 {
        width: 8rem;
    }

    .vatCol-416e2f0 {
        width: 16rem;
    }

    .qtyPerPkgInput-416e2f0 {
        width: 5rem;
        flex: 0 0 5rem;
    }

    .numPkgInput-416e2f0 {
        width: 4rem;
        flex: 0 0 4rem;
    }

    .unitText-416e2f0 {
        width: 3rem;
        flex: 0 0 3rem;
        justify-content: center;
    }
}


.invoiceCountInput-b5af0e4 {
    max-width: 80px;
}

/* Label-only validation decorator: the wrapping div is the col-sm-3 grid
 * column itself. Hide the inline .invalid-feedback message — the top
 * UiErrorsPanel already surfaces it; rendering it inside a narrow left
 * column breaks the form alignment. */
.costLabelDecorator-b5af0e4 > .invalid-feedback {
    display: none;
}


.checkboxColumn-e31df08 {
    width: 40px;
}


.checkboxColumn-840ed76 {
    width: 2.5rem;
}


.progressBar-7fca964 {
    height: 20px;
}

.progressSegment-7fca964 {
    width: 0%;
}


.headerGrid-dfb815a {
    grid-template-columns: minmax(0, 1fr) auto;
}


.approveCell-f057cca {
    position: relative;
    z-index: 2;
}


.row-fcbb634 {
    height: 1px;

    .cell-fcbb634 {
        height: 100%;

        .cellContent-fcbb634 {
            height: 100%;
        }
    }
}


.companyIcon-7aa5b6c {
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
}


.colDragHandle-4e809d6 {
    width: 40px;
}

.colCount-4e809d6 {
    width: 100px;
}

.colMoney-4e809d6 {
    width: 250px;
}


.partsTable-d01c009 {
    table-layout: fixed;
}

.colPart-d01c009 {
    width: 25%;
}

.colCount-d01c009 {
    width: 120px;
}

.notesCell-d01c009 {
    white-space: pre-line;
}


.ganttContainer-53a9a57 {
    position: relative;
    background: var(--bs-body-bg);

    --gantt-grid-color: rgba(var(--bs-border-color-rgb), 0.55);
    --gantt-grid-major-color: rgba(var(--bs-border-color-rgb), 0.9);
    --gantt-header-bg: var(--bs-tertiary-bg);
    --gantt-name-bg: var(--bs-body-bg);
    --gantt-row-even: rgba(var(--bs-tertiary-bg-rgb), 0.12);
    --gantt-row-odd: rgba(var(--bs-tertiary-bg-rgb), 0.22);
    --gantt-task-bar: var(--bs-success-bg-subtle);
    --gantt-task-stroke: var(--bs-success);
    --gantt-group-bar: var(--bs-info-bg-subtle);
    --gantt-group-stroke: var(--bs-info);
    --gantt-progress-bar: var(--bs-success);
    --gantt-dependency-color: var(--bs-secondary-color);

    .svg-53a9a57 {
        display: block;
        width: 100%;
    }

    .headerBackground-53a9a57 {
        fill: var(--gantt-header-bg, #f8f9fa);
    }

    .headerLabel-53a9a57 {
        font-size: 11px;
        font-weight: 600;
        fill: var(--bs-body-color);
        letter-spacing: 0.02em;
        font-family:
            "Avenir LT Std 45 Book", "Droid Sans", "Helvetica Neue", Helvetica,
            Arial, sans-serif;
    }

    .headerLabelMuted-53a9a57 {
        font-size: 11px;
        font-weight: 600;
        fill: var(--bs-secondary-color);
        letter-spacing: 0.02em;
        font-family:
            "Avenir LT Std 45 Book", "Droid Sans", "Helvetica Neue", Helvetica,
            Arial, sans-serif;
    }

    .outlineControl-53a9a57 {
        opacity: 0.55;
        cursor: pointer;
        transition: opacity var(--transition-base);
    }

    .outlineControl-53a9a57:hover {
        opacity: 1;
    }

    .outlineControlHit-53a9a57 {
        fill: rgba(var(--bs-body-color-rgb), 0.06);
        stroke: rgba(var(--bs-body-color-rgb), 0.18);
    }

    .outlineControlIcon-53a9a57 {
        fill: var(--bs-body-color);
        text-anchor: middle;
        dominant-baseline: middle;
        font-size: 12px;
        font-weight: 600;
    }

    .nameColumnBackground-53a9a57 {
        fill: var(--gantt-name-bg, #ffffff);
    }

    .monthBand-53a9a57 {
        fill: rgba(var(--bs-secondary-rgb), 0.03);
    }

    .monthBandAlt-53a9a57 {
        fill: rgba(var(--bs-secondary-rgb), 0.06);
    }

    .headerDivider-53a9a57,
    .columnDivider-53a9a57 {
        stroke: var(--bs-border-color, #dee2e6);
        stroke-width: 1px;
    }

    .timeAxis-53a9a57 {
        .gridLineMinor-53a9a57 {
            stroke: var(--gantt-grid-color, #dee2e6);
            stroke-width: 1px;
            shape-rendering: crispEdges;
        }

        .gridLineMajor-53a9a57 {
            stroke: var(--gantt-grid-major-color, #adb5bd);
            stroke-width: 1.5px;
            shape-rendering: crispEdges;
        }

        .axisLabel-53a9a57 {
            font-size: 10px;
            fill: var(--bs-secondary-color, #6c757d);
            font-family:
                "Avenir LT Std 45 Book", "Droid Sans", "Helvetica Neue",
                Helvetica, Arial, sans-serif;
        }

        .axisLabelYear-53a9a57 {
            font-size: 11px;
            font-weight: 600;
            fill: var(--bs-body-color, #212529);
            font-family:
                "Avenir LT Std 45 Book", "Droid Sans", "Helvetica Neue",
                Helvetica, Arial, sans-serif;
        }
    }

    .todayLine-53a9a57 {
        stroke: var(--bs-danger, #dc3545);
        stroke-width: 1px;
        stroke-dasharray: 4, 4;
    }

    .dependencyLine-53a9a57 {
        stroke: var(--gantt-dependency-color, #6c757d);
        stroke-width: 1.2px;
        opacity: 0.85;
    }

    .dependencyLineActive-53a9a57 {
        stroke: var(--bs-primary);
        stroke-width: 2.5px;
        stroke-dasharray: 6 4;
    }

    .dependencyArrow-53a9a57 {
        fill: var(--gantt-dependency-color, #6c757d);
    }

    .dependencyArrowActive-53a9a57 {
        fill: var(--bs-primary);
    }

    .loggedTimeLine-53a9a57 {
        fill: rgba(255, 165, 0, 0.25);
        stroke: orange;
        stroke-width: 1.5px;
    }

    .tooltipBox-53a9a57 {
        position: absolute;
        background: var(--bs-body-bg);
        border: 1px solid var(--bs-border-color);
        border-radius: var(--bs-border-radius);
        padding: var(--space-2);
        box-shadow: var(--bs-box-shadow);
        pointer-events: none;
        z-index: 1000;
        width: 30vw;
        min-width: min(90vw, 300px);
        max-width: 560px;

        .tooltipHeader-53a9a57 {
            font-weight: 600;
            margin-bottom: var(--space-1);
        }

        .tooltipImage-53a9a57 {
            width: 32px;
            height: 24px;
            object-fit: cover;
            border-radius: var(--radius-sm);
        }

        .tooltipLink-53a9a57 {
            color: var(--bs-body-color);
            text-decoration: none;
        }

        .tooltipLink-53a9a57:hover {
            text-decoration: underline;
        }

        table {
            font-size: 0.875rem;
        }

        td {
            padding: 0.1rem 0.25rem;
        }
    }
}

@keyframes taskHoverHighlight {
    0% {
        stroke-dashoffset: 120;
    }

    100% {
        stroke-dashoffset: 0;
    }
}

.summaryLoggedRow-53a9a57 {
    pointer-events: none;
}

.summaryLoggedBackground-53a9a57 {
    fill: rgba(var(--bs-warning-rgb), 0.08);
}

.summaryLoggedLabel-53a9a57 {
    font-size: 12px;
    fill: var(--bs-secondary-color);
}

.staffList-53a9a57 {
    margin-top: var(--space-2);
}

.staffListItems-53a9a57 {
    gap: 0.35rem;
}

.staffItem-53a9a57 {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.85rem;

    img {
        width: 24px;
        height: 24px;
        object-fit: cover;
        flex-shrink: 0;
    }
}


.taskRow-6057c74 {
    .rowBackground-6057c74 {
        fill: var(--gantt-row-even, transparent);
        cursor: pointer;
        transition: fill 0.15s ease;
    }

    .rowSeparator-6057c74 {
        stroke: rgba(var(--bs-border-color-rgb), 0.48);
        stroke-width: 1px;
        shape-rendering: crispEdges;
    }

    .rowBackgroundAlt-6057c74 {
        fill: var(--gantt-row-odd, transparent);
    }

    .rowBackground-6057c74:hover {
        fill: rgba(var(--bs-primary-rgb), 0.08);
    }

    .rowCurrent-6057c74 {
        fill: var(--bs-primary-bg-subtle) !important;
    }

    .rowActive-6057c74 {
        fill: rgba(var(--bs-primary-rgb), 0.12) !important;
    }
}

.expandButton-6057c74 {
    cursor: pointer;

    .expandIcon-6057c74 {
        font-size: 10px;
        fill: var(--bs-secondary-color, #6c757d);
        dominant-baseline: middle;
    }
}

.taskName-6057c74 {
    font-size: 13px;
    fill: var(--bs-body-color, #212529);
    font-family:
        "Avenir LT Std 45 Book", "Droid Sans", "Helvetica Neue", Helvetica,
        Arial, sans-serif;
}

.outlineNumber-6057c74 {
    font-size: 12px;
    fill: var(--bs-secondary-color);
    font-family:
        "Avenir LT Std 45 Book", "Droid Sans", "Helvetica Neue", Helvetica,
        Arial, sans-serif;
}

.taskNameCurrent-6057c74 {
    fill: var(--bs-primary);
    font-weight: 600;
}

.trackImage-6057c74 {
    clip-path: inset(0 round 4px);
}

.staffAvatarImg-6057c74 {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    opacity: 0.35;
    transition: opacity var(--transition-base);
}

.taskRow-6057c74:hover .staffAvatarImg-6057c74 {
    opacity: 1;
}

.taskBar-6057c74 {
    cursor: pointer;
    opacity: 0.95;
    stroke-width: 1.4px;
}

/* Zero-duration Milestone marker (rendered as an SVG diamond instead of a bar). */
.milestoneMarker-6057c74 {
    cursor: pointer;
    fill: var(--gantt-milestone, var(--bs-info));
    stroke: var(--gantt-milestone-stroke, var(--bs-info-border-subtle, #0aa2c0));
    stroke-width: 1.4px;
}

.taskBarLeaf-6057c74 {
    stroke: var(--gantt-task-stroke, #198754);
}

.taskBarGroup-6057c74 {
    stroke: var(--gantt-group-stroke, #0dcaf0);
}

.taskBarLate-6057c74 {
    fill: var(--bs-danger-bg-subtle);
    stroke: var(--bs-danger);
}

.taskBarCompletedLate-6057c74 {
    fill: var(--bs-warning-bg-subtle);
    stroke: var(--bs-warning);
}

.taskBarUndefined-6057c74 {
    stroke: var(--bs-warning);
}

.dependencyPredecessor-6057c74,
.dependencySuccessor-6057c74 {
    stroke-width: 3px;
    stroke-dasharray: 8 6;
}

.taskBar-6057c74:hover {
    opacity: 1;
    stroke-width: 2px;
}

.progressBar-6057c74 {
    pointer-events: none;
    opacity: 0.88;
}

.progressText-6057c74 {
    font-size: 11px;
    fill: white;
    font-weight: 500;
    pointer-events: none;
    font-family:
        "Avenir LT Std 45 Book", "Droid Sans", "Helvetica Neue", Helvetica,
        Arial, sans-serif;
}

.noDates-6057c74 {
    font-size: 12px;
    fill: var(--bs-secondary-color, #6c757d);
    font-style: italic;
}

.loggedTimeLine-6057c74 {
    fill: rgba(255, 165, 0, 0.25);
    stroke: orange;
    stroke-width: 1.5px;
}

.staffBadgeCircle-6057c74 {
    fill: var(--bs-primary);
}

.staffBadgeText-6057c74 {
    fill: white;
    font-size: 9px;
    text-anchor: middle;
    dominant-baseline: middle;
    font-weight: 600;
}

.rowClosed-6057c74 {
    opacity: 0.6;
}

.rowCurrent-6057c74 {
    fill: rgba(var(--bs-primary-rgb), 0.18);
}

.taskNameClosed-6057c74 {
    fill: var(--bs-secondary-color, #6c757d);
}

.taskBarClosed-6057c74 {
    opacity: 0.5;
}

.taskBarCurrent-6057c74 {
    stroke: var(--bs-primary);
    stroke-width: 2.2px;
}

.overdueOverlay-6057c74 {
    fill: rgba(var(--bs-danger-rgb), 0.15);
    pointer-events: none;
}


/* Kanban board layout */
.kanbanBoard-98e1ae1 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-4);

    & .kanbanColumn-98e1ae1 {
        background: var(--bs-tertiary-bg);
        border-radius: var(--bs-border-radius);
        padding: var(--space-3);
        min-height: 220px;
        transition:
            background-color var(--transition-base),
            border-color var(--transition-base);
        border: 2px solid transparent;

        &.kanbanColumnDragOver-98e1ae1 {
            background: rgba(var(--bs-primary-rgb), 0.08);
            border-color: rgba(var(--bs-primary-rgb), 0.3);
        }

        & .kanbanDropPlaceholder-98e1ae1 {
            height: 60px;
            border: 2px dashed var(--bs-primary);
            border-radius: var(--bs-border-radius);
            background: rgba(var(--bs-primary-rgb), 0.05);
            animation: pulse 1.5s ease-in-out infinite;
        }

        & .kanbanCard-98e1ae1 {
            background: var(--bs-body-bg);
            border: 1px solid var(--bs-border-color);
            border-radius: var(--bs-border-radius);
            padding: var(--space-3);
            cursor: grab;
            box-shadow: var(--bs-box-shadow-sm);
            transition:
                opacity var(--transition-base),
                transform var(--transition-base);

            &:active {
                cursor: grabbing;
            }

            &.kanbanCardDragging-98e1ae1 {
                opacity: 0.5;
                transform: scale(0.98);
            }

            &.kanbanCardSelected-98e1ae1 {
                border-color: var(--bs-primary);
                box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.15);
            }

            & .kanbanCardTitle-98e1ae1 {
                font-weight: 600;
            }

            & .kanbanCardMeta-98e1ae1 {
                font-size: 0.85rem;
                color: var(--bs-secondary-color);

                &.warningCell-98e1ae1 {
                    transition: color var(--transition-base);
                }

                &.warningText-98e1ae1 {
                    color: var(--bs-danger) !important;
                    font-weight: 600;
                }
            }
        }
    }
}

@keyframes pulse {
    0%,
    100% {
        opacity: 0.5;
    }
    50% {
        opacity: 1;
    }
}


.projectHeader-a2f938a {
    cursor: pointer;
    transition: background-color var(--transition-fast);

    &:hover {
        background-color: var(--bs-tertiary-bg);
    }

    & .projectProgress-a2f938a {
        height: 8px;
    }

    & .companyIcon-a2f938a {
        width: 1.5rem;
        height: 1.5rem;
        flex-shrink: 0;
    }

    & .rotated-a2f938a {
        transform: rotate(180deg);
        transition: transform 0.2s ease-in-out;
    }
}

.employeeProgress-a2f938a {
    height: 6px;
}

.progressFill-a2f938a {
    width: 0%;
}


.rowClosed-328990c {
    opacity: 0.6;
}

.warningCell-328990c {
    transition: color var(--transition-base);
}

.warningText-328990c {
    color: var(--bs-danger) !important;
    font-weight: 600;
}

.successText-328990c {
    color: var(--bs-success) !important;
    font-weight: 600;
}

.ganttTable-328990c {
    --gantt-table-indent: 1.25rem;

    th {
        white-space: nowrap;
    }
}

.outlineHeader-328990c {
    width: 80px;
}

.reorderHeader-328990c {
    width: 150px;
}

.reorderCell-328990c {
    width: 150px;
}

.outlineCell-328990c {
    font-weight: 600;
    color: var(--bs-secondary-color);
}

.dragGrip-328990c {
    cursor: grab;
    opacity: 0.2;
    transition: opacity var(--transition-base);
}

.dragGripIcon-328990c {
    transform: rotate(90deg);
}

.ganttTable-328990c tr:hover .dragGrip-328990c {
    opacity: 1;
}

.summaryRow-328990c {
    background: rgba(var(--bs-info-rgb), 0.08);
    font-weight: 600;
}

.currentTaskRow-328990c {
    background: rgba(var(--bs-primary-rgb), 0.08);
}

.draggedRow-328990c {
    opacity: 0.65;
}

.taskNameText-328990c {
    font-weight: 500;
}

.progressBarTrack-328990c {
    width: 100%;
    max-width: 120px;
    height: 6px;
    background: rgba(var(--bs-secondary-rgb), 0.2);
    border-radius: 999px;
    overflow: hidden;
}

.progressBarFill-328990c {
    height: 100%;
    width: 0%;
    background: var(--bs-success);
}

.progressLabel-328990c {
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
}

.expandButton-328990c {
    width: 26px;
    height: 26px;
    padding: 0;
}


/* Tree styling for lazy-loading tree view - matches TreeView component */

.treeView-1d1d72c {
    --tree-line-color: var(--bs-border-color);
    --tree-hover-bg: var(--bs-tertiary-bg);
    --tree-button-bg: var(--bs-body-bg);
    --tree-button-fg: var(--bs-tertiary-color);
    --tree-node-height: 1.75rem;
    overflow: clip;
}

.treeList-1d1d72c {
    list-style: none;
    margin: 0;
    padding: 0;
}

.treeNode-1d1d72c {
    position: relative;
    line-height: 1;
}

.treeNodeContent-1d1d72c {
    height: var(--tree-node-height);
    padding: 0 var(--space-2);
    cursor: default;
    border-radius: var(--radius-sm);
    transition: background-color 0.15s ease;

    &:hover {
        background-color: var(--tree-hover-bg);
    }
}

.treeIndent-1d1d72c {
    height: 100%;
}

.treeLine-1d1d72c {
    width: 1.25rem;
    position: relative;
    flex-shrink: 0;

    /* Vertical line - full height to connect nodes */
    &::before {
        content: "";
        position: absolute;
        left: 0.525rem;
        top: calc(-0.26 * var(--tree-node-height));
        bottom: calc(-0.5 * var(--tree-node-height));
        width: 1px;
        background-color: var(--tree-line-color);
    }

    /* Horizontal connector */
    &::after {
        content: "";
        position: absolute;
        left: 0.525rem;
        top: 50%;
        width: 0.625rem;
        height: 1px;
        background-color: var(--tree-line-color);
    }

    /* Last child - vertical line only goes to middle */
    &.lastChild-1d1d72c::before {
        bottom: 50%;
    }

    /* Empty - no lines (for ancestors where parent was last child) */
    &.empty-1d1d72c::before,
    &.empty-1d1d72c::after {
        display: none;
    }

    /* Continuation - only vertical line, no horizontal */
    &.continuation-1d1d72c::after {
        display: none;
    }
}

.toggleBtn-1d1d72c {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    margin-right: 0.375rem;
    z-index: 2;
    padding: 0;
    border: none;
    cursor: pointer;
    border-radius: 0.1875rem;
    flex-shrink: 0;
    box-shadow: var(--shadow-xs);
    transition: all 0.15s ease;
    background: var(--tree-button-bg);
    color: var(--tree-button-fg);

    &:hover {
        background-color: var(--bs-gray-300);
        color: var(--bs-gray-700);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    }

    &:focus {
        outline: none;
    }

    svg {
        width: 1rem;
        height: 1rem;
    }
}

.nodeLabel-1d1d72c {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.875rem;
    padding: var(--space-2) 0;
}

.childrenList-1d1d72c {
    list-style: none;
    margin: 0;
    padding: 0;
}


.warningText-4bd309b {
    color: var(--bs-danger) !important;
    font-weight: 600;
}

.successText-4bd309b {
    color: var(--bs-success) !important;
    font-weight: 600;
}

.taskEditorCard-4bd309b {
    border-color: rgba(var(--bs-primary-rgb), 0.2);
}



.updateIndicator-84cc10b {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 5;
    padding: 0.35rem 0.6rem;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    box-shadow: var(--bs-box-shadow-sm);
    font-size: 0.85rem;
    color: var(--bs-secondary-color);
}

.settingsPanel-84cc10b {
    max-width: 420px;
}

.taskOverlay-84cc10b {
    position: fixed;
    inset: 0;
    z-index: 1055;
    background-color: rgba(0, 0, 0, 0.55);
    padding: var(--space-4);
}

.taskDialog-84cc10b {
    margin: 0;
    width: min(1100px, 100%);
    max-height: calc(100vh - 2rem);
}


.cell-768d4b2 {
    transition: background-color var(--transition-fast);

    &:hover {
        background-color: var(--bs-tertiary-bg);
    }
}



/* Dashboard chart card CSS module */

.chartCard-97a620f {
    /* The chart components render their own SVG-download control; on the dashboard
       the export lives on the modal's tab row instead, so hide the built-in one
       both inline and in the modal (donut keeps its Legend/Labels toggle — only the
       download button carries `mwu-chart-export` there). `!important` is required:
       the bar/area/time-series toolbars use Bootstrap's `.d-flex`, which is
       `display: flex !important` and would otherwise win. */
    & .mwu-chart-export {
        display: none !important;
    }

    /* Size comes from a Bootstrap `fs-*` utility on the element (no custom
       font-size token exists in the project); this rule only resets the button
       chrome and keeps it bold. */
    & .titleButton-97a620f {
        border: 0;
        background: none;
        padding: 0;
        font-weight: bold;
        color: var(--bs-body-color);
        text-decoration: none;
        cursor: pointer;

        &:hover {
            color: var(--bs-link-color);
            text-decoration: underline;
        }
    }

    & .modalBackdrop-97a620f {
        background-color: rgba(0, 0, 0, 0.5);

        & .modalChart-97a620f {
            min-height: 480px;
        }
    }
}


/* Stat badge with hover popover (start / end / change) */
.statWrapper-93d8131 {
    position: relative;
    cursor: help;
}

.statPopover-93d8131 {
    position: absolute;
    bottom: calc(100% + 0.25rem);
    right: 0;
    z-index: 10;
    min-width: 12rem;
    padding: var(--space-2) var(--space-3);
    border-radius: 0.375rem;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    font-size: 0.8125rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.1s ease-out;
}

.statWrapper-93d8131:hover .statPopover-93d8131,
.statWrapper-93d8131:focus-within .statPopover-93d8131 {
    opacity: 1;
}

.statPopoverRow-93d8131 + .statPopoverRow-93d8131 {
    margin-top: 0.125rem;
}

.statPopoverLabel-93d8131 {
    color: var(--bs-secondary-color);
}

.statPopoverDivider-93d8131 {
    margin: var(--space-1) 0;
    border: 0;
    border-top: 1px solid var(--bs-border-color);
}


/* Breadcrumb row with the large property icon: fixed height so it doesn't jump
   between the loading / fallback / loaded states, and everything (the parent
   crumb, the name, and the Java button) vertically centered against the icon. */
.breadcrumbBar-7259856 {
    align-items: center;
    min-height: 3rem;

    /* Each crumb is a centered flex row so its `>` divider (Bootstrap renders it in
       `::before`) lines up vertically with the tall icon instead of sitting at the
       baseline. */
    & .breadcrumb-item {
        /* `.breadcrumb-item` is Bootstrap-generated; no markup to add utilities to. */
        /* ast-grep-ignore prefer-bootstrap-flex-utility */
        display: flex;
        align-items: center;
    }

    /* The property's SVG icon shown as the breadcrumb's leading image (in place of
       the generic property glyph). */
    & .breadcrumbIcon-7259856 {
        width: 5rem;
        height: 3rem;
        object-fit: contain;
        margin-inline-end: var(--icon-spacing);
    }
}


/* Matches Java PropertyOverviewPanel.css `.propertyOverview .units` */

.unitGrid-2b860e8 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    grid-gap: 5px;
}


.map-c9bf9f3 {
    width: 100%;
    min-height: 500px;
    flex: 1 1 auto;
    height: 100%;
}

.numericGroup-c9bf9f3 {
    max-width: 200px;
}


/* Timeline range input — draggable date-range slider. */

.wrapper-acca9b9 {
    /* Fixed wide width so the year ticks have room to breathe; the
     * picker is right-aligned by `ms-auto` on its parent. */
    width: 760px;
    max-width: 100%;
}

.svgRail-acca9b9 {
    touch-action: none;
    user-select: none;
    cursor: pointer;
    width: 100%;
    display: block;
}

.handle-acca9b9 {
    cursor: ew-resize;
}

.tooltip-acca9b9 {
    pointer-events: none;
}


/* Port of Java PropertyOverviewPanel.css unit cells. `firstCol` / `lastCol` /
   `lastRow` are toggled by the mouseenter handler and `scaled` marks span>1
   cells — hence the :global() escapes. Rule order matters: later rules win
   the `--zoom-*` custom properties, and the potential-lease colors come last
   so they override the cell status color. */

.unitCell-ef7c011 {
    --border-color: var(--bs-border-color);
    border-color: var(--border-color);
}

.unitStatus-ef7c011 {
    display: none;
    font-variant: small-caps;
    text-transform: capitalize;
    white-space: nowrap;
    text-align: center;
    font-weight: 500;
    border-bottom: solid 1px var(--border-color);
}

.unitCell-ef7c011:hover .unitStatus-ef7c011 {
    display: block;
}

.unit-ef7c011 {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    overflow: hidden;
    border: solid 1px;
    border-radius: 5px;
    padding: 0 5px;

    & * {
        color: #333;
    }
}

.unitCell-ef7c011:hover .unit-ef7c011 {
    border: none;
}

.unitCell-ef7c011:hover {
    transition: 100ms;
    transition-property: transform, max-width;
    transform: scale(1.25, 1.25);
    transform-box: fill-box;
    transform-origin: var(--zoom-x, 125%) var(--zoom-y, 60%);
    z-index: 1000;
    border-style: solid;
    border-width: 4px;
    border-radius: 5px;
    max-width: 80vw;
    margin-top: -2rem;
    margin-bottom: -2rem;
}

.unitCell-ef7c011:hover:not(.scaled) {
    width: 120%;
    --zoom-x: 80%;
}

.unitCell-ef7c011.scaled:hover {
    --zoom-x: 50%;
}

.unitCell-ef7c011.firstCol:hover {
    --zoom-x: 5%;
}

.unitCell-ef7c011.lastCol:hover {
    --zoom-x: 95%;
}

/* The 120% hover width must not extend past the grid's right edge. */
.unitCell-ef7c011.lastCol:hover:not(.scaled) {
    margin-left: -20%;
}

.unitCell-ef7c011.firstCol.lastCol:hover {
    max-width: 90vw;
    transform: scale(1.1, 1.1);
    margin-left: 0;
    --zoom-x: 11%;
}

/* Near the bottom of the card-body the zoom grows upward instead of down. */
.unitCell-ef7c011.lastRow:hover {
    --zoom-y: 100%;
}

.unitName-ef7c011 {
    font-weight: bold;
}

.unitArea-ef7c011 {
    display: none;
    font-size: 66%;
}

.unitCell-ef7c011:hover .unitArea-ef7c011 {
    display: block;
    text-align: right;
}

.leases-ef7c011 {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    margin: 0 -5px;

    & * {
        font-size: x-small;
    }

    /* Bootstrap's .badge sets a white text color; the plain (no text-bg-*)
       expiry badge keeps the cell text color instead, like Java. */
    & .expiryNoBg-ef7c011 {
        color: inherit;
    }
}

/* Red overstay clock — out-specifies the `.status* *` text color rules.
   The svg's inner <path> needs it too: `fill: currentColor` resolves against
   the path's own `color`, which the universal status rules also set. */
.leases-ef7c011 .overstayClock-ef7c011,
.leases-ef7c011 .overstayClock-ef7c011 * {
    color: var(--bs-danger);
}

.currentLease-ef7c011,
.potentialLease-ef7c011 {
    width: 100%;
    padding: 0.5rem 5px;
}

.currentLease-ef7c011 {
    flex-grow: 1;
    background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.1) 0%,
        rgba(0, 0, 0, 0.1) var(--completion, 0%),
        transparent calc(var(--completion, 0%) + 0.01%),
        transparent 100%
    );
}

.currentLease-ef7c011:not(:first-child),
.potentialLease-ef7c011:not(:first-child) {
    border-top-style: dashed;
    border-top-width: 1px;
}

.tenant-ef7c011 {
    white-space: nowrap;
    overflow: hidden;
}

.rates-ef7c011 {
    display: block;
}

/* Status colors matching Java PropertyOverviewPanel.css */

.statusVacant-ef7c011 {
    background-color: #fff3cd;
    --border-color: #ffeeba;
}

.statusVacant-ef7c011:hover {
    --border-color: var(--bs-yellow);
}

.statusVacant-ef7c011 * {
    color: #856404;
}

.statusUnderOffer-ef7c011 {
    background-color: #fff3cd;
    --border-color: #c6c8ca;

    &:hover {
        --border-color: var(--bs-gray);
    }

    & * {
        color: #1b1e21;
    }
}

.statusBooked-ef7c011 {
    --border-color: #c6c8ca;
    background: #d6d8d9 repeating-linear-gradient(135deg, transparent, transparent 5px, rgba(212, 237, 218, .6) 5px, rgba(212, 237, 218, .6) 10px);

    &:hover {
        --border-color: rgb(195, 233, 204);
    }

    & * {
        color: #1b1e21;
    }
}

.statusLeased-ef7c011 {
    border-color: #bce8f1;
    --border-color: #d9edf7;

    &:hover {
        --border-color: var(--bs-success);
    }
}

.statusOccupied-ef7c011 {
    background-color: #d4edda;
    --border-color: #c3e6cb;

    &:hover {
        --border-color: var(--bs-success);
    }

    & * {
        color: #155724;
    }
}

.statusPaymentPeriod-ef7c011 {
    background-color: #cce5ff;
    --border-color: #b8daff;

    &:hover {
        --border-color: var(--bs-primary);
    }

    & * {
        color: #004085;
    }

    & .unitStatus-ef7c011 {
        font-size: 90%;
    }
}

.statusDisputedOccupation-ef7c011 {
    background-color: #f8d7da;
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffaeb6' fill-opacity='0.4' fill-rule='evenodd'%3E%3Ccircle cx='3' cy='3' r='3'/%3E%3Ccircle cx='13' cy='13' r='3'/%3E%3C/g%3E%3C/svg%3E");
    --border-color: #f5c6cb;

    &:hover {
        --border-color: var(--bs-danger);
    }

    & * {
        color: #721c24;
    }
}

.statusOverstay-ef7c011 {
    background-color: #fae6ff;
    --border-color: #d4b6db;
    background-image: url("data:image/svg+xml,%3Csvg width='15' height='15' viewBox='0 0 15 15' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23d4b6db' fill-opacity='0.4' fill-rule='evenodd'%3E%3Crect x='5' y='5' width='5' height='5'/%3E%3C/g%3E%3C/svg%3E");

    &:hover {
        --border-color: purple;
    }

    & * {
        color: #590c6b;
    }
}

/* Java `.unitCell.VACANT.COMMON_AREA`: common areas look white only while vacant. */
.statusVacant-ef7c011.commonArea-ef7c011 .unit-ef7c011 {
    background-color: #fefefe;
    --border-color: #fdfdfe;
}

.statusVacant-ef7c011.commonArea-ef7c011 * {
    color: #818182;
}

.statusNotOwned-ef7c011 {
    color: #818182 !important;
    background-color: #fefefe !important;
    --border-color: #fdfdfe !important;
    background: repeating-linear-gradient(
        -45deg,
        rgba(0, 0, 0, 0.05),
        rgba(0, 0, 0, 0.05) 10px,
        rgba(0, 0, 0, 0.1) 10px,
        rgba(0, 0, 0, 0.1) 20px
    );
}

/* Expired / potential-lease text colors (after the status colors, like in
   the Java file, so they override the cell status color). */

.currentLease-ef7c011.expired-ef7c011 * {
    color: rgba(169, 68, 66, 0.7);
}

.potentialAccepted-ef7c011 * {
    color: #3c763d;
}

.potentialChargeable-ef7c011 * {
    color: #a94442;
}

.potentialSigned-ef7c011 * {
    color: #3c763d;
    font-weight: bold;
}


.notes-cell-8eaf65c {
    white-space: pre-wrap;
    word-break: break-word;
}


.gallery-5ce1818 {
    padding: var(--space-4);
    overflow-y: auto;
}

.noImages-5ce1818 {
    width: 100%;
    text-align: center;
    padding: var(--space-12);
}


/* Matches Java PropertyOverviewPanel.css (header bar + show/hide buttons);
   the gray container box is replaced by the shared TabCard wrapper. */

.propertyOccupancy-b4a3c24 {
    font-size: 1.5rem;
}

.headerBar-b4a3c24 {
    padding-bottom: var(--space-2);
}

.btnShowNotOwned-b4a3c24 {
    background: repeating-linear-gradient(
        -45deg,
        rgba(255, 193, 7, 0.6),
        rgba(255, 193, 7, 0.6) 10px,
        rgba(255, 193, 7, 1) 10px,
        rgba(255, 193, 7, 1) 20px
    );
}

.btnHideNotOwned-b4a3c24 {
    background: repeating-linear-gradient(
        -45deg,
        rgba(90, 98, 104, 0.8),
        rgba(90, 98, 104, 0.8) 10px,
        rgba(90, 98, 104, 1) 10px,
        rgba(90, 98, 104, 1) 20px
    );
    color: white;
}


.propertyRatesOverview-82deedc {
    border: solid #ccc 1px;
    background: #f1f1f1;
    padding: 15px;
    margin-bottom: 15px;
    border-radius: var(--radius-sm);

    & .headerBar-82deedc {
        margin-bottom: var(--space-4);

        & .propertyTitle-82deedc {
            font-weight: 600;
            min-height: 1.5rem;
            font-size: 2rem;
            gap: 0.35rem;

            & .propertyTitleIcon-82deedc {
                width: 4rem;
                height: 4rem;
                min-width: 4rem;
            }

            & .propertyTitleLink-82deedc {
                text-decoration: none;

                &:hover {
                    text-decoration: underline;
                }
            }
        }

        & .headerRight-82deedc {
            margin-left: auto;

            & .occupancySummary-82deedc {
                font-size: 1.1rem;
                font-weight: 600;

                & .badge {
                    font-size: 0.95rem;
                    padding: 0.45rem 0.65rem;
                }
            }

            & .btnShowNotOwned-82deedc {
                background: repeating-linear-gradient(
                    -45deg,
                    rgba(255, 193, 7, 0.6),
                    rgba(255, 193, 7, 0.6) 10px,
                    rgba(255, 193, 7, 1) 10px,
                    rgba(255, 193, 7, 1) 20px
                );
            }

            & .btnHideNotOwned-82deedc {
                background: repeating-linear-gradient(
                    -45deg,
                    rgba(90, 98, 104, 0.8),
                    rgba(90, 98, 104, 0.8) 10px,
                    rgba(90, 98, 104, 1) 10px,
                    rgba(90, 98, 104, 1) 20px
                );
                color: white;
            }
        }
    }

    & .floorStats-82deedc {
        margin-left: auto;
        font-size: 1rem;
    }

    & .units-82deedc {
        display: grid;
        grid-template-columns: repeat(24, minmax(0, 1fr));
        grid-auto-flow: dense;
        grid-gap: 5px;
        padding: 10px 0;
        align-items: stretch;

        & .notOwned-82deedc {
            color: #818182 !important;
            background: repeating-linear-gradient(
                -45deg,
                rgba(0, 0, 0, 0.03),
                rgba(0, 0, 0, 0.03) 10px,
                rgba(0, 0, 0, 0.07) 10px,
                rgba(0, 0, 0, 0.07) 20px
            ) !important;
            border-color: #ccc !important;
        }

        & .unit-82deedc {
            display: flex;
            flex-direction: column;
            flex-grow: 1;
            overflow: hidden;
            border: solid 1px #dee2e6;
            border-radius: 5px;
            padding: 0.45rem 0.5rem;
            font-size: 0.9rem;
            transition: background-color var(--transition-base), border-color var(--transition-base);

            &:hover {
                box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
            }

            & .unitTitle-82deedc {
                font-weight: 600;
                margin-bottom: 0.2rem;
                font-size: 0.98rem;

                & .unitName-82deedc {
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    flex: 1;
                }

                & .variationBadges-82deedc {
                    display: flex;
                    gap: var(--space-1);
                    flex-shrink: 0;

                    & .badge {
                        font-size: 0.72rem !important;
                    }

                    & .variationBadge-82deedc {
                        font-size: 0.6rem;
                    }
                }
            }

            & .ownershipDate-82deedc {
                font-size: 0.78rem;
                font-weight: 600;
                color: #6c757d;
            }

            & .rates-82deedc {
                cursor: pointer;
                padding: 0.2rem 0;
                border-radius: 3px;

                &:hover {
                    background-color: rgba(0, 0, 0, 0.05);
                }

                & .ratesLine-82deedc {
                    white-space: nowrap;
                    font-size: 0.85rem;
                    line-height: 1.25;

                    & .annual-82deedc {
                        color: #6c757d;
                        font-size: 0.8rem;
                    }
                }
            }

            & .leases-82deedc {
                margin-top: auto;
                font-size: 0.82rem;

                & .currentLease-82deedc {
                    padding: 0.25rem 0.35rem;
                    border-radius: 3px;
                    margin-top: 0.2rem;
                    background: linear-gradient(
                        90deg,
                        rgba(0, 0, 0, 0.08) 0%,
                        rgba(0, 0, 0, 0.08) var(--completion, 0%),
                        transparent calc(var(--completion, 0%) + 0.01%),
                        transparent 100%
                    );

                    &.potentialLease-82deedc {
                        font-style: italic;
                        opacity: 0.85;
                        background: rgba(0, 0, 0, 0.03);
                    }

                    & .tenantName-82deedc {
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        font-size: 0.88rem;
                        font-weight: 500;
                    }

                    & .leaseRates-82deedc {
                        color: #6c757d;
                        white-space: nowrap;
                        font-size: 0.8rem;
                    }
                }
            }
        }
    }
}


.dropZone-e4c7cf7 {
    flex-grow: 1;
    width: 100%;
    max-height: 150px;
    /* ast-grep-ignore prefer-dropzone-utility */
    border: 3px dashed var(--bs-secondary-border-subtle);
    border-radius: var(--radius-2xl);
    background-color: var(--bs-secondary-bg-subtle);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: var(--space-4);
}


.listItem-5720af7 {
    transition:
        transform var(--transition-base),
        box-shadow var(--transition-base),
        opacity var(--transition-base),
        background-color var(--transition-base);

    .grabIcon-5720af7 {
        cursor: grab;
    }
}

.dragging-5720af7 {
    opacity: 0.5;
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1;
}

.dragOver-5720af7 {
    background-color: var(--bs-primary-bg-subtle) !important;
    border-color: var(--bs-primary-border-subtle) !important;
}


.listItem-126ef1a {
    transition:
        opacity var(--transition-base),
        background-color var(--transition-base);

    &.dragging-126ef1a {
        opacity: 0.4;

        & > * {
            background-color: var(--bs-secondary-bg) !important;
        }
    }

    &.dragOver-126ef1a > * {
        background-color: var(--bs-primary-bg-subtle) !important;
    }

    & .dragHandleCell-126ef1a {
        width: 1px;

        & .dragHandleIcon-126ef1a {
            cursor: grab;
        }
    }
}


.bankCurrencyFill-ed18a4d > div {
    display: block !important;
    width: 100%;
}


.formSelects-40387aa {
    position: relative;
    z-index: 3;
}

.willBeRenewedSelect-40387aa {
    max-width: 11rem;
}

/* Keep the floor/unit selects usable when the input-group is w-auto. */
.addUnitSelectors-40387aa select.form-select {
    min-width: 11rem;
}


.donutChart-47cecb8 {
    overflow: visible;
}

.segment-47cecb8 {
    transition: stroke-width var(--transition-fast);
    cursor: pointer;
}

.legendColor-47cecb8 {
    width: 12px;
    height: 12px;
}

.legendItem-47cecb8 {
    cursor: pointer;
    transition: font-weight var(--transition-fast);
}


@keyframes chargeableWarningPulse {
    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(var(--bs-warning-rgb), 0.55);
    }
    50% {
        box-shadow: 0 0 0 0.6rem rgba(var(--bs-warning-rgb), 0);
    }
}

.chargeableWarning-87bdf66 {
    border-left: 0.375rem solid var(--bs-warning);
    animation: chargeableWarningPulse 2.4s ease-in-out infinite;
}

.chargeableWarningIcon-87bdf66 {
    font-size: 1.75rem;
    color: var(--bs-warning-text-emphasis);
    line-height: 1;
}


/* Suppress Bootstrap's `is-valid` / `is-invalid` cosmetic styling until
   the user has attempted to save once. ValidationDecorator applies
   `is-valid` to every wrapped input by default (no errors → Success
   colour), which would otherwise paint empty fields green on first
   render — the classic "false positive" eager-validation look. Mirrors
   the pattern used in `visitor/edit/info.css`. */

.validationHidden-272f407 .is-invalid,
.validationHidden-272f407 .is-valid {
    border-color: var(--bs-border-color) !important;
}

.validationHidden-272f407 .form-control.is-invalid,
.validationHidden-272f407 .form-control.is-valid {
    background-image: none !important;
    padding-right: var(--space-3) !important;
}

.validationHidden-272f407 .form-select.is-invalid,
.validationHidden-272f407 .form-select.is-valid {
    --bs-form-select-bg-icon: none;
    padding-right: 2.25rem !important;
}

.validationHidden-272f407 .is-invalid:focus,
.validationHidden-272f407 .is-valid:focus {
    border-color: var(--bs-primary) !important;
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25) !important;
}

.validationHidden-272f407 .invalid-feedback,
.validationHidden-272f407 .valid-feedback {
    display: none !important;
}

/* Also neutralise the label colour change driven by
   validation_decorator.css when validation is hidden. */
.validationHidden-272f407 .validationDecorator.is-valid label,
.validationHidden-272f407 .validationDecorator.is-invalid label,
.validationHidden-272f407 .validationDecorator.is-warning label {
    color: inherit !important;
}


.colSelector-ccd9cc8 {
    width: 220px;
}

.colPeriod-ccd9cc8 {
    width: 140px;
}

.colCount-ccd9cc8 {
    width: 100px;
}

.colArea-ccd9cc8 {
    width: 120px;
}

.colRevenue-ccd9cc8 {
    width: 140px;
}


.colName-e3698c7 {
    width: 180px;
}

.colPeriod-e3698c7 {
    width: 140px;
}

.colCount-e3698c7 {
    width: 100px;
}

.colArea-e3698c7 {
    width: 120px;
}

.colRevenue-e3698c7 {
    width: 140px;
}


/* Big "+" straddling the border between the Rents and Service-charges
   totals cells so the footer reads as `rents + service charges = total`.
   Mirrors Java's `LeaseEditPage.css` `.sumTotalSign`. */

.sumTotalSign-d96e9f6 {
    position: relative;

    &::before {
        position: absolute;
        content: "+";
        font-size: 1.7em;
        top: -2px;
        left: -9px;
        display: block;
    }
}



.table-ffd8392 {
    table-layout: fixed;
}

.colIsRenewal-ffd8392 {
    width: 3%;
}

.colTenant-ffd8392 {
    width: 15%;
}

.colProperty-ffd8392 {
    width: 14%;
}

.colArea-ffd8392 {
    width: 5%;
}

.colTotalRents-ffd8392 {
    width: 11%;
}

.colDuration-ffd8392 {
    width: 8%;
}

.colEndDate-ffd8392 {
    width: 7%;
}

.colExpectedCheckout-ffd8392 {
    width: 9%;
}

.colBreakOption-ffd8392 {
    width: 7%;
}

.colRelationshipManager-ffd8392 {
    width: 9%;
}

.colWillRenew-ffd8392 {
    width: 6%;
}


.propertyMultiselect-451219e {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    grid-gap: 1rem;
    align-items: start;

    .disabledInput-451219e {
        .input-group-text {
            background-color: var(--bs-secondary-bg);
        }
    }
}


.propertySvgIcon-38e17d9 {
    display: inline-block;
    vertical-align: middle;
    max-width: 100px;
    max-height: 45px;
}


.propertyCard-57e4be8 {
    min-width: 400px;
    border-radius: 12px;
    overflow: visible;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: #ffffff;
    transition: box-shadow var(--transition-base);
    transform: translateY(-20px);
    margin-top: -10px;
    position: relative;

    &:hover {
        box-shadow: var(--shadow-lg);
    }

    &::after {
        content: "";
        position: absolute;
        bottom: -10px;
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: 0;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-top: 10px solid #ffffff;
        filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.1));
    }

    .closeButton-57e4be8 {
        position: absolute;
        top: 0.75rem;
        right: 0.75rem;
        z-index: 10;
        background: rgba(255, 255, 255, 0.95);
        border-radius: 50%;
        width: 32px;
        height: 32px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: var(--shadow-sm);
        opacity: 1;
        transition:
            opacity var(--transition-base),
            background var(--transition-base),
            box-shadow var(--transition-base);
        border: 1px solid rgba(0, 0, 0, 0.1);

        &::before {
            content: "";
            width: 14px;
            height: 14px;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23333' d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
        }

        &:hover {
            background: rgba(255, 255, 255, 1);
            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
        }
    }

    .propertyCardBody-57e4be8 {
        padding: var(--space-5);

        .propertyTitle-57e4be8 {
            font-weight: 600;
            color: #1e293b;
            font-size: 1.125rem;
            margin: 0;
        }

        .propertyFields-57e4be8 {
            .iconWrapper-57e4be8 {
                width: 32px;
                height: 32px;
                border-radius: 6px;
                background: #f1f5f9;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-shrink: 0;
                margin-bottom: var(--space-2);

                svg {
                    width: 16px;
                    height: 16px;
                    color: #475569;
                }
            }

            .fieldLabel-57e4be8 {
                font-size: 0.6875rem;
                color: #94a3b8;
                text-transform: uppercase;
                font-weight: 600;
                letter-spacing: 0.05em;
                margin-bottom: var(--space-1);
            }

            .fieldValue-57e4be8 {
                font-size: 0.875rem;
                color: #1e293b;
                font-weight: 600;
                word-break: break-word;
            }
        }
    }
}


.map-d137639 {
    min-height: 300px;
    flex: 1 1 auto;
}


.receivablesTrends-125cb14 {
    position: relative;
    width: 100%;

    svg.svg-125cb14 {
        display: block;
        width: 100%;
        min-height: 300px;
        height: 50vh;
        max-height: 500px;

        text {
            fill: var(--bs-body-color);
            stroke-width: 0;
        }

        .axis-125cb14 {
            shape-rendering: crispEdges;

            line {
                stroke: var(--bs-border-color);
                stroke-width: 2;
                stroke-dasharray: 4 2;
            }
            text {
                font-size: 12px;
            }

            .xTick-125cb14 {
                text {
                    text-anchor: end;
                    dominant-baseline: hanging;
                }
            }

            .yTick-125cb14 {
                text {
                    text-anchor: end;
                    dominant-baseline: central;
                }
            }
        }

        .bars-125cb14 {
            cursor: pointer;

            rect {
                opacity: 0.85;
            }

            &:hover rect {
                opacity: 1;
            }
        }
    }

    .legend-125cb14 {
        margin-top: var(--space-2);
        font-size: 0.8rem;

        .legendItem-125cb14 {
            gap: 0.35rem;
        }

        .legendColor-125cb14 {
            display: inline-block;
            width: 12px;
            height: 12px;
            border-radius: 2px;
        }
    }

    .tooltip-125cb14 {
        position: absolute;
        pointer-events: none;
        z-index: 1000;
        min-width: 220px;
        font-size: 0.875rem;
    }

    .tooltipColor-125cb14 {
        display: inline-block;
        width: 10px;
        height: 10px;
        margin-right: var(--space-1);
        border-radius: 2px;
    }
}


.recoveryTrends-26f36ce {
    position: relative;
    width: 100%;

    svg.svg-26f36ce {
        display: block;
        width: 100%;
        min-height: 300px;
        height: 50vh;
        max-height: 500px;

        text {
            fill: var(--bs-body-color);
            stroke-width: 0;
        }

        .axis-26f36ce {
            shape-rendering: crispEdges;

            line {
                stroke: var(--bs-border-color);
                stroke-width: 2;
                stroke-dasharray: 4 2;
            }
            text {
                font-size: 12px;
            }

            .xTick-26f36ce {
                text {
                    text-anchor: end;
                    dominant-baseline: hanging;
                }
            }

            .yTick-26f36ce {
                text {
                    text-anchor: end;
                    dominant-baseline: central;
                }
            }
        }

        .totalLine-26f36ce {
            stroke: var(--bs-primary);
            stroke-width: 2.5;
        }

        .totalDot-26f36ce {
            fill: var(--bs-primary);
            stroke: var(--bs-body-bg);
            stroke-width: 2;
            cursor: pointer;

            &:hover {
                r: 6;
            }
        }

        .areaFill-26f36ce {
            opacity: 0.15;
        }
    }

    .legend-26f36ce {
        margin-top: var(--space-2);
        font-size: 0.875rem;

        .legendLine-26f36ce {
            display: inline-block;
            width: 24px;
            height: 3px;
            background-color: var(--bs-primary);
            border-radius: 2px;
        }
    }

    .tooltip-26f36ce {
        position: absolute;
        pointer-events: none;
        z-index: 1000;
        min-width: 200px;
        font-size: 0.875rem;
    }

    .tooltipColor-26f36ce {
        display: inline-block;
        width: 10px;
        height: 10px;
        margin-right: var(--space-1);
        border-radius: 2px;
    }
}


.units-98b0ab3 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(25rem, 1fr));
    gap: var(--space-2);
}


.colCompanyIcon-2e92821 {
    width: 10%;
}


.dropZone-c19a60d {
    flex-grow: 1;
    width: 100%;
    max-height: 150px;
    /* ast-grep-ignore prefer-dropzone-utility */
    border: 3px dashed var(--bs-secondary-border-subtle);
    border-radius: var(--radius-2xl);
    background-color: var(--bs-secondary-bg-subtle);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: var(--space-4);
}


.dropZone-fb2d752 {
    flex-grow: 1;
    width: 100%;
    /* ast-grep-ignore prefer-dropzone-utility */
    border: 3px dashed var(--bs-secondary-border-subtle);
    border-radius: var(--radius-2xl);
    background-color: var(--bs-secondary-bg-subtle);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: var(--space-4);
}


.sparklineChart-504ac70 {
    display: inline-block;
    vertical-align: middle;
}


/* Areas panel — matches `AreasPanel` in details-view.jsx */

.plp-panel-fa0aa53 {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: var(--space-5);
    font-family: var(--sans);

    /* `.panel` prefix → 0,2,0, out-specifying theme `h3` rules (0,1,2). */
    & .plp-heading-fa0aa53 {
        margin: 0;
        font-size: 13px;
        font-family: var(--sans) !important;
        font-weight: 600 !important;
        color: var(--text) !important;
    }

    & .plp-rows-fa0aa53 {
        margin-top: 18px;
        gap: 14px;

        & .plp-row-fa0aa53 {
            padding-bottom: 10px;
            border-bottom: 1px dashed var(--border);

            & .plp-rowLabel-fa0aa53 {
                color: var(--text-dim);
                font-size: 12.5px;
            }

            & .plp-rowValue-fa0aa53 {
                font-family: var(--mono);
                font-size: 14px;
                color: var(--text);
            }
        }
    }
}

.plp-tabRow-fa0aa53 {
    gap: 6px;
    margin-top: var(--space-3);
}

.plp-tabBtn-fa0aa53 {
    padding: 6px 12px;
    border-radius: 7px;
    font-size: 11.5px;
    background: var(--surface-2);
    color: var(--text-dim);
    border: none;
    cursor: pointer;
    font-weight: 500;
    font-family: var(--sans);
    transition: background 0.15s ease, color 0.15s ease;

    &:hover {
        color: var(--text);
    }
}

.plp-tabActive-fa0aa53 {
    background: var(--accent);
    color: #fff;
}


/* Documents & Images panel — matches `DocumentsPanel` in details-view.jsx, plus editable-mode controls. */

.plp-panel-1b6a195 {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: var(--space-5);
    font-family: var(--sans);

    & .plp-titleGroup-1b6a195 {
        gap: 10px;

        & .plp-titleIcon-1b6a195 {
            color: var(--accent);
            flex-shrink: 0;
        }

        & .plp-dataRoomChip-1b6a195 {
            font-family: var(--mono);
            font-size: 10.5px;
            color: var(--text-mute);
            background: var(--surface-2);
            padding: 3px 8px;
            border-radius: 5px;
            border: 1px solid var(--border);
            letter-spacing: 0.04em;
            text-transform: uppercase;
        }
    }

    /* `.panel` prefix → 0,2,0, out-specifying theme `h3`/`a` rules (0,1,2). */
    & .plp-heading-1b6a195 {
        margin: 0;
        font-size: 13px;
        font-family: var(--sans) !important;
        font-weight: 600 !important;
        letter-spacing: 0.02em;
        color: var(--text) !important;
    }

    & .plp-documentsList-1b6a195 {
        margin-top: 14px;
        animation: fadeInPanel 0.25s ease both;

        & .plp-docRow-1b6a195 {
            display: grid;
            grid-template-columns: 44px 1fr auto auto auto;
            align-items: center;
            gap: 14px;
            padding: 12px 14px;
            border-radius: 10px;
            background: transparent;
            border: 1px solid transparent;
            transition: background 0.15s ease, border-color 0.15s ease;
            cursor: pointer;
            text-decoration: none;
            color: inherit;

            &:hover {
                background: var(--surface-2);
                border-color: var(--border-2);
            }

            & .plp-docInfo-1b6a195 {
                min-width: 0;

                & .plp-docName-1b6a195 {
                    font-size: 13px;
                    color: var(--text);
                    font-weight: 500;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }

                & .plp-docMeta-1b6a195 {
                    font-size: 11px;
                    color: var(--text-mute);
                    margin-top: 2px;
                    font-family: var(--mono);
                }
            }
        }
    }

    & .plp-addBtn-1b6a195 {
        margin-top: 10px;
        align-self: flex-start;
        gap: 6px;
        padding: 7px 12px;
        border-radius: 8px;
        background: var(--surface-2);
        border: 1px solid var(--border-2);
        color: var(--text);
        font-size: 12px;
        font-family: var(--sans);
        cursor: pointer;
        transition: background 0.15s ease;

        &:hover {
            background: var(--surface-3);
        }
    }

    & .plp-imagesGrid-1b6a195 {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        margin-top: 14px;
        animation: fadeInPanel 0.25s ease both;

        & .plp-imageTile-1b6a195 {
            position: relative;
            aspect-ratio: 4 / 3;
            border-radius: 10px;
            overflow: hidden;
            border: 1px solid var(--border);
            padding: 0;
            background: var(--surface-2);
            cursor: pointer;
            display: block;
            transition: border-color 0.15s ease, transform 0.15s ease;

            &:hover {
                border-color: var(--border-2);
                transform: translateY(-1px);
            }

            & img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                display: block;
            }

            & .plp-imageOverlay-1b6a195 {
                position: absolute;
                inset: 0;
                background: linear-gradient(to top, rgba(10, 18, 32, 0.85) 0%, rgba(10, 18, 32, 0) 45%);
                padding: 10px;

                & .plp-imageLabel-1b6a195 {
                    font-size: 11px;
                    color: #fff;
                    font-weight: 500;
                    text-align: left;
                }
            }
        }

        & .plp-imagesEmpty-1b6a195 {
            grid-column: 1 / -1;
            padding: 30px;
            text-align: center;
            color: var(--text-mute);
            font-size: 12px;
        }
    }
}

.plp-tabRow-1b6a195 {
    gap: 6px;
}

.plp-tabBtn-1b6a195 {
    padding: 6px 12px;
    border-radius: 7px;
    font-size: 11.5px;
    background: var(--surface-2);
    color: var(--text-dim);
    border: none;
    cursor: pointer;
    font-weight: 500;
    font-family: var(--sans);
    gap: 6px;
    transition: background 0.15s ease, color 0.15s ease;

    &:hover {
        color: var(--text);
    }

    & .plp-tabCount-1b6a195 {
        opacity: 0.7;
        font-family: var(--mono);
    }
}

.plp-tabActive-1b6a195 {
    background: var(--accent);
    color: #fff;
}

/* --- Documents tab --- */

.plp-kindBadge-1b6a195 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 22px;
    border-radius: 5px;
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}

.plp-kindPdf-1b6a195 {
    background: rgba(239, 90, 107, 0.14);
    color: #ff8a94;
}

.plp-kindXlsx-1b6a195 {
    background: rgba(53, 211, 153, 0.14);
    color: #4fe0ad;
}

.plp-kindDocx-1b6a195 {
    background: rgba(29, 155, 240, 0.14);
    color: #4fb7ff;
}

.plp-kindDefault-1b6a195 {
    background: var(--surface-2);
    color: var(--text-dim);
}

.plp-panel-1b6a195 .plp-docIconBtn-1b6a195 {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-dim) !important;
    cursor: pointer;
    display: grid;
    place-items: center;
    text-decoration: none !important;
    transition: color 0.15s ease, background 0.15s ease;
}

.plp-panel-1b6a195 .plp-docIconBtn-1b6a195:hover {
    color: var(--text) !important;
    background: var(--surface-2);
}

.plp-docRemoveBtn-1b6a195:hover {
    color: #fff;
    background: #ff5a6b;
    border-color: #ff5a6b;
}

/* --- Lightbox --- */

.plp-lightboxBackdrop-1b6a195 {
    position: fixed;
    inset: 0;
    background: rgba(5, 10, 20, 0.88);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 200;
    display: grid;
    place-items: center;
    padding: var(--space-10);
    animation: fadeInBackdrop 0.25s ease both;

    & .plp-lightboxFrame-1b6a195 {
        position: relative;
        max-width: 90vw;
        max-height: 86vh;

        & .plp-lightboxImg-1b6a195 {
            max-width: 90vw;
            max-height: 86vh;
            display: block;
            border-radius: 12px;
            box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
        }

        & .plp-lightboxNav-1b6a195 {
            position: absolute;
            bottom: -40px;
            left: 0;
            right: 0;
            gap: 18px;
            color: var(--text-dim);
            font-family: var(--mono);
            font-size: 11px;
        }
    }
}

.plp-lightboxBtn-1b6a195 {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(17, 29, 51, 0.9);
    border: 1px solid var(--border-2);
    color: var(--text);
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background 0.15s ease;

    &:hover {
        background: var(--surface-3, #1a2c4e);
    }
}

.plp-lightboxClose-1b6a195 {
    position: absolute;
    top: 24px;
    right: 24px;
}

/* --- Selector modal --- */

.plp-modalBackdrop-1b6a195 {
    position: fixed;
    inset: 0;
    background: rgba(5, 10, 20, 0.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 1200;
}

.plp-modal-1b6a195 {
    position: fixed;
    inset: 0;
    z-index: 1210;
    display: grid;
    place-items: center;
    padding: var(--space-6);

    & .plp-modalDialog-1b6a195 {
        background: var(--surface);
        border: 1px solid var(--border-2);
        border-radius: 14px;
        width: min(640px, 100%);
        max-height: 84vh;
        box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
        font-family: var(--sans);

        & .plp-modalHeader-1b6a195 {
            padding: 14px 18px;
            border-bottom: 1px solid var(--border);

            /* `.modalHeader` prefix → 0,2,0, out-specifying theme `h5` rules (0,1,2). */
            & .plp-modalTitle-1b6a195 {
                margin: 0;
                font-size: 14px;
                font-family: var(--sans) !important;
                font-weight: 600 !important;
                color: var(--text) !important;
            }

            & .plp-modalClose-1b6a195 {
                width: 28px;
                height: 28px;
                border-radius: 8px;
                background: transparent;
                border: 1px solid var(--border);
                color: var(--text-dim);
                display: grid;
                place-items: center;
                cursor: pointer;
                padding: 0;
                transition: color 0.15s ease, background 0.15s ease;

                &:hover {
                    background: var(--surface-2);
                    color: var(--text);
                }
            }
        }

        & .plp-modalBody-1b6a195 {
            padding: var(--space-4);
            overflow-y: auto;
            flex: 1;

            & .plp-emptyState-1b6a195 {
                text-align: center;
                padding: var(--space-10) var(--space-5);
                color: var(--text-mute);
                font-size: 13px;

                & .plp-emptyStateHint-1b6a195 {
                    font-size: 11.5px;
                    color: var(--text-mute);
                    margin-top: 6px;
                }
            }
        }

        & .plp-modalFooter-1b6a195 {
            padding: 12px 18px;
            border-top: 1px solid var(--border);

            & .plp-modalDoneBtn-1b6a195 {
                padding: var(--space-2) var(--space-4);
                border-radius: 8px;
                background: var(--accent);
                color: #fff;
                border: none;
                font-size: 12.5px;
                cursor: pointer;
                font-family: var(--sans);
                transition: filter 0.15s ease;

                &:hover {
                    filter: brightness(1.05);
                }
            }
        }
    }
}

.plp-modalListItem-1b6a195 {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 10px 12px;
    border-radius: 10px;
    background: transparent;
    border: 1px solid var(--border);
    cursor: pointer;
    text-align: left;
    color: inherit;
    font-family: inherit;
    transition: background 0.15s ease, border-color 0.15s ease;

    &:hover {
        background: var(--surface-2);
        border-color: var(--border-2);
    }

    & .plp-modalListInfo-1b6a195 {
        min-width: 0;

        & .plp-modalListName-1b6a195 {
            font-size: 13px;
            color: var(--text);
            font-weight: 500;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        & .plp-modalListMeta-1b6a195 {
            font-size: 11px;
            color: var(--text-mute);
            font-family: var(--mono);
        }
    }

    & .plp-modalCheck-1b6a195 {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: var(--accent);
        color: #fff;
        display: grid;
        place-items: center;
    }
}

.plp-modalListItemSelected-1b6a195 {
    background: rgba(29, 155, 240, 0.08);
    border-color: var(--accent);
}

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

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


/* Details gallery — matches `Gallery` in details-view.jsx, plus editable-mode controls. */

.plp-gallery-b07b515 {
    display: block;

    & .plp-main-b07b515 {
        position: relative;
        aspect-ratio: 4 / 3;
        border-radius: 14px;
        overflow: hidden;
        background: var(--surface);

        & .plp-mainImg-b07b515 {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        & .plp-mainEmpty-b07b515 {
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, var(--surface-2), var(--surface-3));
        }

        & .plp-badge-b07b515 {
            position: absolute;
            top: 16px;
            left: 16px;
            padding: 6px 12px;
            border-radius: 999px;
            font-size: 11px;
            font-weight: 600;
            background: rgba(29, 155, 240, 0.9);
            color: #fff;
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            font-family: var(--sans);
        }

        & .plp-coverChip-b07b515 {
            position: absolute;
            bottom: 12px;
            left: 16px;
            color: #fff;
            font-size: 11px;
            background: rgba(10, 18, 32, 0.7);
            padding: 4px 10px;
            border-radius: 6px;
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            font-family: var(--sans);
        }

        & .plp-dots-b07b515 {
            position: absolute;
            bottom: 12px;
            right: 16px;

            & .plp-dot-b07b515 {
                width: 8px;
                height: 8px;
                border-radius: 50%;
                border: none;
                background: rgba(255, 255, 255, 0.4);
                cursor: pointer;
                padding: 0;
                transition: background 0.15s ease;

                &.plp-dotActive-b07b515 {
                    background: #fff;
                }
            }
        }
    }
}

/* ---- Editable-mode controls ---- */

.plp-editStrip-b07b515 {
    margin-top: var(--space-3);
    padding: var(--space-3);
    border-radius: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    gap: 10px;

    & .plp-editTile-b07b515 {
        position: relative;
        width: 96px;
        height: 64px;
        border-radius: 8px;
        overflow: hidden;
        border: 1px solid var(--border-2);
        background: var(--surface-2);

        & img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        & .plp-editRemove-b07b515 {
            position: absolute;
            top: 4px;
            right: 4px;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            border: none;
            background: rgba(10, 18, 32, 0.82);
            color: #fff;
            display: grid;
            place-items: center;
            cursor: pointer;
            padding: 0;
            transition: background 0.15s ease;

            &:hover {
                background: #ff5a6b;
            }
        }

        & .plp-editCoverTag-b07b515 {
            position: absolute;
            bottom: 4px;
            left: 4px;
            padding: 2px 6px;
            border-radius: var(--radius-sm);
            background: rgba(10, 18, 32, 0.72);
            color: #fff;
            font-size: 9.5px;
            font-family: var(--sans);
            letter-spacing: 0.04em;
        }
    }

    & .plp-editAddBtn-b07b515 {
        align-self: flex-start;
        gap: 6px;
        padding: 7px 12px;
        border-radius: 8px;
        background: var(--surface-2);
        border: 1px solid var(--border-2);
        color: var(--text);
        font-size: 12px;
        font-family: var(--sans);
        cursor: pointer;
        transition: background 0.15s ease;

        &:hover {
            background: var(--surface-3);
        }
    }
}

/* ---- Selector modal ---- */

.plp-modalBackdrop-b07b515 {
    position: fixed;
    inset: 0;
    background: rgba(5, 10, 20, 0.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 1200;
}

.plp-modal-b07b515 {
    position: fixed;
    inset: 0;
    z-index: 1210;
    display: grid;
    place-items: center;
    padding: var(--space-6);

    & .plp-modalDialog-b07b515 {
        background: var(--surface);
        border: 1px solid var(--border-2);
        border-radius: 14px;
        width: min(780px, 100%);
        max-height: 84vh;
        box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
        font-family: var(--sans);

        & .plp-modalHeader-b07b515 {
            padding: 14px 18px;
            border-bottom: 1px solid var(--border);

            /* `.modalHeader` prefix → 0,2,0, out-specifying theme `h5` rules (0,1,2). */
            & .plp-modalTitle-b07b515 {
                margin: 0;
                font-size: 14px;
                font-family: var(--sans) !important;
                font-weight: 600 !important;
                color: var(--text) !important;
            }
        }

        & .plp-modalClose-b07b515 {
            width: 28px;
            height: 28px;
            border-radius: 8px;
            background: transparent;
            border: 1px solid var(--border);
            color: var(--text-dim);
            display: grid;
            place-items: center;
            cursor: pointer;
            padding: 0;
            transition: color 0.15s ease, background 0.15s ease;

            &:hover {
                background: var(--surface-2);
                color: var(--text);
            }
        }

        & .plp-modalBody-b07b515 {
            padding: var(--space-4);
            overflow-y: auto;
            flex: 1;

            & .plp-modalGrid-b07b515 {
                display: grid;
                grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
                gap: 10px;

                & .plp-modalItem-b07b515 {
                    position: relative;
                    aspect-ratio: 4 / 3;
                    border-radius: 10px;
                    overflow: hidden;
                    border: 2px solid transparent;
                    background: var(--surface-2);
                    cursor: pointer;
                    padding: 0;
                    display: block;
                    transition: border-color 0.15s ease, transform 0.15s ease;

                    &:hover {
                        transform: translateY(-1px);
                    }

                    & img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                        display: block;
                    }

                    &.plp-modalItemSelected-b07b515 {
                        border-color: var(--accent);
                    }

                    & .plp-modalCheck-b07b515 {
                        position: absolute;
                        top: 6px;
                        right: 6px;
                        width: 24px;
                        height: 24px;
                        border-radius: 50%;
                        background: var(--accent);
                        color: #fff;
                        display: grid;
                        place-items: center;
                    }
                }
            }

            & .plp-emptyState-b07b515 {
                text-align: center;
                padding: var(--space-10) var(--space-5);
                color: var(--text-mute);
                font-size: 13px;

                & .plp-emptyStateHint-b07b515 {
                    font-size: 11.5px;
                    color: var(--text-mute);
                    margin-top: 6px;
                }
            }
        }

        & .plp-modalFooter-b07b515 {
            padding: 12px 18px;
            border-top: 1px solid var(--border);

            & .plp-modalDoneBtn-b07b515 {
                padding: var(--space-2) var(--space-4);
                border-radius: 8px;
                background: var(--accent);
                color: #fff;
                border: none;
                font-size: 12.5px;
                cursor: pointer;
                font-family: var(--sans);
                transition: background 0.15s ease;

                &:hover {
                    filter: brightness(1.05);
                }
            }
        }
    }
}


/* Location panel — matches `LocationPanel` in details-view.jsx */

.plp-panel-1611cf0 {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: var(--space-5);
    gap: 14px;
    font-family: var(--sans);
}

/* `.panel` prefix → 0,2,0, out-specifying theme `h3`/`a` rules (0,1,2). */
.plp-panel-1611cf0 .plp-heading-1611cf0 {
    margin: 0;
    font-size: 13px;
    font-family: var(--sans) !important;
    font-weight: 600 !important;
    color: var(--text) !important;
}

.plp-pinIcon-1611cf0 {
    color: var(--accent);
    flex-shrink: 0;
}

.plp-mapFrame-1611cf0 {
    aspect-ratio: 4 / 3;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border);
}

.plp-mapContainer-1611cf0 {
    width: 100%;
    height: 100%;
    display: block;
}

.plp-addressBlock-1611cf0 {
    gap: 6px;
}

.plp-addressRow-1611cf0 .plp-pinIcon-1611cf0 {
    margin-top: 2px;
    width: 12px;
    height: 12px;
}

.plp-addressText-1611cf0 {
    font-size: 12.5px;
    color: var(--text);
}

.plp-coords-1611cf0 {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--text-mute);
    margin-left: var(--space-5);
}

.plp-panel-1611cf0 .plp-mapsLink-1611cf0 {
    padding: 10px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text-dim) !important;
    font-size: 12px;
    text-decoration: none !important;
    transition: background 0.15s ease, color 0.15s ease;
}

.plp-panel-1611cf0 .plp-mapsLink-1611cf0:hover {
    background: var(--surface-3);
    color: var(--text) !important;
}


/* Asset manager card — matches `OwnerCard` in details-view.jsx */

.plp-card-82d52c7 {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: var(--space-4);
    gap: 14px;
    font-family: var(--sans);

    & .plp-avatar-82d52c7 {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--accent), #0d7cc7);
        display: grid;
        place-items: center;
        font-weight: 600;
        color: #fff;
        font-size: 14px;
        font-family: var(--sans);
        flex-shrink: 0;
    }

    & .plp-body-82d52c7 {
        flex: 1;

        & .plp-label-82d52c7 {
            color: var(--text-mute);
            font-size: 10.5px;
            letter-spacing: 0.08em;
        }

        & .plp-name-82d52c7 {
            font-size: 13.5px;
            font-weight: 500;
            color: var(--text);
        }
    }

    & .plp-viewBtn-82d52c7 {
        padding: 8px 14px;
        background: transparent;
        color: var(--text-dim);
        border: 1px solid var(--border);
        border-radius: 8px;
        font-size: 12px;
        cursor: pointer;
        font-family: var(--sans);
        transition: background 0.15s ease, color 0.15s ease;

        &:hover {
            background: var(--surface-2);
            color: var(--text);
        }
    }
}


/* Property Details card — matches `PropertyDetailsCard` in details-view.jsx */

.plp-card-e1b1097 {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: var(--space-5);
    font-family: var(--sans);

    /* `.card` prefix → 0,2,0, out-specifying theme `h3` rules (0,1,2). */
    & .plp-heading-e1b1097 {
        margin: 0;
        font-size: 13px;
        font-family: var(--sans) !important;
        font-weight: 600 !important;
        color: var(--text) !important;
        letter-spacing: 0.02em;
    }
}

.plp-pairGrid-e1b1097 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-5);
    margin-top: var(--space-4);

    & .plp-pairLabel-e1b1097 {
        color: var(--text-mute);
        font-size: 10.5px;
        letter-spacing: 0.08em;
    }

    & .plp-pairValue-e1b1097 {
        color: var(--text);
        font-size: 13.5px;
        font-weight: 500;
        margin-top: var(--space-1);
    }
}

.plp-chipGrid-e1b1097 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
    margin-top: var(--space-5);

    & .plp-chip-e1b1097 {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 14px 16px;
        min-height: 76px;

        & .plp-chipAccent-e1b1097,
        & .plp-chipGood-e1b1097,
        & .plp-chipGold-e1b1097 {
            /* ast-grep-ignore prefer-bootstrap-flex-utility */
            display: flex;
            align-items: center;
            gap: var(--space-2);
            font-size: 12px;
            font-weight: 500;
        }

        & .plp-chipAccent-e1b1097 {
            color: var(--accent);
        }

        & .plp-chipGood-e1b1097 {
            color: var(--good);
        }

        & .plp-chipGold-e1b1097 {
            color: var(--gold);
        }

        & .plp-chipLabel-e1b1097 {
            color: var(--text-dim);
            font-weight: 500;
        }

        & .plp-chipValue-e1b1097 {
            font-size: 18px;
            font-weight: 600;
            color: var(--text);
        }
    }

    & .plp-classPair-e1b1097 {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 14px 16px;
        min-height: 76px;

        & .plp-classLabel-e1b1097 {
            color: var(--text-mute);
            font-size: 12px;
            font-weight: 500;
        }

        & .plp-classValue-e1b1097 {
            font-size: 18px;
            font-weight: 600;
            color: var(--text);
        }
    }
}

@media (max-width: 720px) {
    .plp-pairGrid-e1b1097 {
        grid-template-columns: repeat(2, 1fr);
    }

    .plp-chipGrid-e1b1097 {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* Property details body — content-only, no page chrome. */

/* Design tokens scoped to the preview body so the component works in any
   binary (the_exchange ships them globally too, this is the ERP-friendly
   fallback). */
.plp-body-1bc5648 {
    --bg: #0a1220;
    --bg-2: #0f1a2d;
    --surface: #111d33;
    --surface-2: #152440;
    --surface-3: #1a2c4e;
    --border: #1f3560;
    --border-2: #2a4679;
    --text: #e8eef7;
    --text-dim: #8a9bb8;
    --text-mute: #5f7090;
    --accent: #1d9bf0;
    --accent-2: #3fb0ff;
    --accent-soft: rgba(29, 155, 240, 0.12);
    --gold: #c9a86b;
    --good: #35d399;
    --serif: 'Playfair Display', Georgia, serif;
    --sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;

    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
    background: var(--bg);
    color: var(--text);
    font-family: var(--sans);
    /* Normalise inherited weight so a theme that bolds body text
       (e.g. Brutalist) doesn't bleed into the preview's body copy. */
    font-weight: 400;
}

.plp-eyebrowRow-1bc5648 {
    gap: 10px;
    margin-bottom: 10px;
}

.plp-categoryChip-1bc5648 {
    padding: 4px 10px;
    background: var(--accent-soft);
    color: var(--accent-2);
    border: 1px solid var(--border-2);
    border-radius: 6px;
    font-size: 10.5px;
    letter-spacing: 0.08em;
    font-weight: 500;
}

.plp-ticker-1bc5648 {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--text-mute);
}

/* Lock the preview's typography with `!important`: the ERP themes restyle
   bare elements via `:is(body.theme-X, .themeBox#theme-X) <el>`, whose
   `.themeBox#theme-X` id branch gives ID-level specificity (1,1,1) that no
   class selector can beat. The theme rules aren't `!important`, so this wins. */
.plp-body-1bc5648 .plp-title-1bc5648 {
    font-family: var(--serif) !important;
    font-size: 44px;
    font-weight: 500 !important;
    margin: 0;
    letter-spacing: -0.015em;
    line-height: 1.1;
    color: var(--text) !important;
    /* Neutralize theme `h1` gradient-text (Forest/Midnight/Ocean/Sunset set
       background + background-clip:text + transparent text-fill, plus a
       text-shadow on Midnight). */
    background: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: currentColor !important;
    text-shadow: none !important;
}

.plp-addressRow-1bc5648 {
    margin-top: 10px;
    color: var(--text-dim);
    font-size: 13px;
}

.plp-addressPin-1bc5648 {
    gap: 6px;
}

.plp-pin-1bc5648 {
    color: var(--accent);
    flex-shrink: 0;
}

.plp-grid-1bc5648 {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: var(--space-5);
    margin-top: var(--space-6);
}

.plp-sideColumn-1bc5648 {
    position: sticky;
    top: 80px;
    align-self: start;
}

@media (max-width: 960px) {
    .plp-grid-1bc5648 {
        grid-template-columns: 1fr;
    }

    .plp-title-1bc5648 {
        font-size: 32px;
    }
}


.propertyListingEditForm-87ce09e {
    /* Hide number input spinners/arrows for inputs in this form */
    input[type="number"]::-webkit-outer-spin-button,
    input[type="number"]::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    input[type="number"] {
        appearance: textfield;
        -moz-appearance: textfield;
    }

    input[type="range"] {
        height: calc(
            1.5em + 0.75rem + calc(var(--bs-border-width) * 2)
        ) !important;
        padding: 0.375rem 0.75rem;
        display: flex;
        align-items: center;
        box-sizing: border-box;
    }

    /* Input group width constraint for areas */
    .inputGroupConstrained-87ce09e {
        max-width: 20ex;
        flex-shrink: 0;
    }

    .map-87ce09e {
        width: 100%;
        min-height: 500px;
        flex: 1 1 auto;
        height: 100%;
    }
}

/* Cover image / drop-zone footprint: fills the card width at a landscape
   4:3 ratio, so the height stays bounded (width × 3/4) instead of the photo
   rendering at its natural — often oversized — height. */
.coverAspect-87ce09e {
    width: 100%;
    aspect-ratio: 4 / 3;
}


.portfolioEditForm-78e877b {
    .filesUpload-78e877b {
        width: 100%;
        height: 120px;

        .dropZone-78e877b {
            width: 100%;
            height: 100%;
            /* ast-grep-ignore prefer-dropzone-utility */
            border: 3px dashed var(--bs-secondary-border-subtle);
            border-radius: var(--radius-2xl);
            background-color: var(--bs-secondary-bg-subtle);

            .instructions-78e877b {

                p {
                    text-align: center;
                    margin: 0;
                }
            }

            &:hover {
                background-color: var(--bs-primary-bg-subtle);
                border-color: var(--bs-primary-border-subtle);
            }
        }
    }
}


.headerGrid-edb7f8d {
    grid-template-columns: minmax(0, 1fr) auto;
}


.gallery-f6e3c39 {
    padding: var(--space-4);
    overflow-y: auto;
}

.noImages-f6e3c39 {
    width: 100%;
    text-align: center;
    padding: var(--space-12);
}


/* Input group width constraint for areas */
.inputGroupConstrained-da0914a {
    max-width: 300px;
    flex-shrink: 0;
}


.portfolioMapView-f048474 {
    .portfolioMap-f048474 {
        width: 100%;
        min-height: 300px;
        flex: 1 1 auto;
        height: 100%;
    }
}


.portfolioInlineMultiselect-46da413 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    grid-gap: 1rem;
    align-items: start;
}

/* Applied to both the selected portfolio chips and the dropdown items so the
   sizing keeps working after the dropdown portals out of the wrapper. */
.coverImage-46da413 {
    width: 32px;
    object-fit: cover;
}


.previewWrapper-9f2aad7 {
    background: #0a1220;
    min-height: calc(100vh - 180px);
    margin: var(--space-3);
}


.hoverPopup-ba15f1a {
    position: relative;
    padding: 0;
    overflow: hidden;
    max-width: 150px;
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    background-color: var(--bs-body-bg);
    z-index: 1000;
    pointer-events: none;

    .hoverPopupImage-ba15f1a {
        width: 150px;
        height: 100px;
        overflow: hidden;
        border-radius: var(--bs-border-radius);

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


.propertyCard-a15be2b {
    min-width: 400px;
    border-radius: 12px;
    overflow: visible;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: box-shadow var(--transition-base);
    transform: translateY(-20px);
    margin-top: -10px;
    position: relative;

    &:hover {
        box-shadow: var(--shadow-lg);
    }

    &::after {
        content: "";
        position: absolute;
        bottom: -10px;
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: 0;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-top: 10px solid #ffffff;
        filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.1));
    }

    .statusBadge-a15be2b {
        position: absolute;
        top: 0.75rem;
        left: 0.75rem;
        z-index: 10;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(8px);
        color: #1e293b;
        padding: var(--space-2);
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all var(--transition-base);
        border: 1px solid rgba(0, 0, 0, 0.08);

        svg {
            width: 20px;
            height: 20px;
        }

        &:hover {
            background: rgba(255, 255, 255, 1);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
            transform: scale(1.05);
        }
    }

    .closeButton-a15be2b {
        position: absolute;
        top: 0.75rem;
        right: 0.75rem;
        z-index: 10;
        background: rgba(255, 255, 255, 0.95);
        border-radius: 50%;
        width: 32px;
        height: 32px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: var(--shadow-sm);
        opacity: 1;
        transition:
            opacity var(--transition-base),
            background var(--transition-base),
            box-shadow var(--transition-base);
        border: 1px solid rgba(0, 0, 0, 0.1);

        &::before {
            content: "";
            width: 14px;
            height: 14px;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23333' d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
        }

        &:hover {
            background: rgba(255, 255, 255, 1);
            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
        }
    }

    .propertyCardImage-a15be2b {
        position: relative;
        overflow: hidden;
        height: 200px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 12px 12px 0 0;

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

    .propertyCardBody-a15be2b {
        padding: var(--space-5);

        .propertyTitle-a15be2b {
            font-weight: bold;
            color: #1e293b;
            font-size: 1.125rem;
            margin: 0;
        }

        .propertyFields-a15be2b {
            .iconWrapper-a15be2b {
                width: 32px;
                height: 32px;
                border-radius: 6px;
                background: #f1f5f9;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-shrink: 0;
                margin-bottom: var(--space-2);

                svg {
                    width: 16px;
                    height: 16px;
                    color: #475569;
                }
            }

            .fieldLabel-a15be2b {
                font-size: 0.6875rem;
                color: #94a3b8;
                text-transform: uppercase;
                font-weight: bold;
                letter-spacing: 0.05em;
                margin-bottom: var(--space-1);
            }

            .fieldValue-a15be2b {
                font-size: 0.875rem;
                color: #1e293b;
                font-weight: bold;
                white-space: nowrap;
            }
        }
    }
}


.notesCell-e29d3b7 {
    white-space: pre-wrap;
    word-break: break-word;
}


.progressBar-c5877ce {
    height: 20px;
}

.progressFill-c5877ce {
    width: 0%;
}


.propertyMapView-80083c4 {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    overflow: hidden;

    .map-80083c4 {
        width: 100%;
        flex: 1 1 auto;
        min-height: 300px;
    }
}


.propertyMap2View-635b3ed {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    overflow: hidden;

    .map-635b3ed {
        width: 100%;
        flex: 1 1 auto;
        min-height: 300px;
    }
}


/* Constrains the company icon inside the list-page company dropdown so the
 * row height matches the standard `CompanySelect` look. The shared
 * `.companySvgIcon` rule (in mantiq_erp_common) only caps height at 45px,
 * which inflates the SingleSelect rows when the icon is large. We pass this
 * scoped class to <CompanyIcon class=…/> to override it locally. */
.companyDropdownIcon-5bab95b {
    width: 1.5rem;
    height: 1.5rem;
    max-height: 1.5rem;
    object-fit: contain;
    margin-inline-end: var(--space-3);
    vertical-align: middle;
}


.detailedEntriesContainer-b8ff8b3 {
    .card {
        transition: box-shadow var(--transition-fast);

        &:hover {
            box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
        }

        .card-body {
            h1,
            h2,
            h3,
            h4,
            h5,
            h6 {
                margin-top: var(--space-4);

                &:first-child {
                    margin-top: 0;
                }
            }

            /* Ensure images in description are responsive */
            img {
                max-width: 100%;
                height: auto;
            }
        }
    }
}


.activeCompany-fc6606c {
    font-weight: bold;
    --bs-table-active-bg: rgba(var(--bs-primary-rgb), 0.15) !important;

    a {
        text-decoration: none;
        color: var(--bs-primary);
        font-weight: bold;
    }
}


.tableFixedLayout-c842494 {
  table-layout: fixed;
  width: 100%;
}

.w15-c842494 {
  width: 15%;
}

.w85-c842494 {
  width: 85%;
}


@media print {
    .riskTable-405119c tbody tr td,
    .riskTable-405119c tbody tr th {
        background-color: inherit !important;
        color-adjust: exact;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}


.filterSearch-8222d60 {
    max-width: 300px;
}


.categoryHeader-a80dd28 {
    cursor: pointer;
}


.badgeMinWidth-1145667 {
    min-width: 2em;
}


.descriptionColumn-a829d38 {
    min-width: 15vw;
}


.tagsInput-2809f87 {
    min-height: calc(1.5em + 0.75rem + 2px);
}

.tagChip-2809f87 {
    cursor: default;
}

/* Make the range slider inherit form-control height so it lines up in input-groups. */
.rangeInput-2809f87 {
    height: auto;
    min-height: calc(1.5em + 0.75rem + 2px);
    padding: 0 var(--space-3);
    background-color: var(--bs-form-control-bg, transparent);
}


/* Matches Java Deal.PICTURE_THUMB_WIDTH / PICTURE_THUMB_HEIGHT. */
.pictureCell-6281855 {
    width: 128px;
    min-width: 128px;
    height: 96px;
    background-color: rgba(var(--bs-secondary-rgb), 0.1);

    & img {
        width: 128px;
        height: 96px;
        object-fit: cover;
    }
}



.ticketBoard-942dedc {
    --min-column-width: 350px;

    .ticketsContainer-942dedc {
        column-count: auto;
        column-width: var(--min-column-width);
        column-gap: var(--space-4);
        padding: var(--space-2) 0;
    }
}

/* Kanban board layout */
.kanbanBoard-942dedc {
    padding: var(--space-2) 0;

    & .kanbanColumn-942dedc {
        flex: 1;
        display: flex;
        flex-direction: column;
        background: var(--bs-secondary-bg);
        border-radius: var(--radius-md);
        padding: var(--space-4);
        min-height: 400px;
        min-width: 0; /* Allow shrinking below content size */

        /* Make masonry container work inside kanban columns */
        & .ticketsContainer-942dedc {
            column-width: 280px;
        }

        & .kanbanHeader-942dedc {
            margin-bottom: var(--space-4);
            padding-bottom: var(--space-2);
            border-bottom: 1px solid var(--bs-border-color);
        }
    }
}

.filterWidth-942dedc {
    width: 200px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .ticketBoard-942dedc {
        --min-column-width: 100%;

        .ticketsContainer-942dedc {
            column-count: 1;
        }
    }
}


.ticketCard-6043731 {
    break-inside: avoid-column;
    margin-bottom: var(--space-4);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);

    &:hover {
        transform: translateY(-2px);
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
    }

    a {
        text-decoration: none;
        color: inherit;
    }
}

.cardHeader-6043731 {
    margin-bottom: var(--space-2);
}

.ticketNumber-6043731 {
    font-family: var(--bs-font-monospace);
}

.ticketTitle-6043731 {
    font-weight: 500;
    margin-bottom: var(--space-2);
    line-height: 1.3;
    /* Limit to 2 lines */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ticketMeta-6043731 {
    font-size: 0.8125rem;
    color: var(--bs-secondary-color);
}

.imageGrid-6043731 {
    margin-top: var(--space-3);
    overflow: hidden;
}

.imageThumbnail-6043731 {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

.imageMore-6043731 {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-sm);
    background-color: var(--bs-secondary-bg);
    color: var(--bs-secondary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    flex-shrink: 0;
}


.ticketCommentDropzone-e268fbf {
    border: 2px dashed var(--bs-secondary-border-subtle);
    background-color: var(--bs-secondary-bg-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    text-align: center;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    margin-top: var(--space-3);

    &:hover {
        border-color: var(--bs-primary);
        background-color: var(--bs-primary-bg-subtle);
    }

    & .dropzoneIcon-e268fbf {
        font-size: 2rem;
        margin-bottom: var(--space-2);
        color: var(--bs-secondary);
        display: block;
    }

    & .dropzoneText-e268fbf {
        color: var(--bs-secondary);
        font-size: 0.9rem;
    }
}


.headerGrid-eda7f5a {
    grid-template-columns: minmax(0, 1fr) auto;
}

.ticketThumbnail-eda7f5a {
    width: 64px;
    height: 64px;
}


.ticketImageContainer-d193f30 {
    img {
        image-orientation: from-image;
        transition: transform 0.2s ease-in-out;
        cursor: pointer;

        &:hover {
            transform: scale(1.08);
            z-index: 10;
            position: relative;
        }
    }

    .ticketImage-d193f30 {
        object-fit: cover;
    }
}

.lightbox-d193f30 {
    /* Default to hidden */
    display: none;

    /* Overlay entire screen */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2000;

    /* Padding around image */
    padding: var(--space-4);

    /* Translucent background */
    background: rgba(0, 0, 0, 0.9);

    /* Show when targeted via URL hash */
    &:target {
        display: block;
    }

    .lightboxImage-d193f30 {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
}


.squareImage-b07c211 {
    aspect-ratio: 1;
    object-fit: cover;
}


.projectSelector-c27ef13 {
    cursor: pointer;

    .form-control.form-select {
        padding: 0;
    }

    button.selectorButton-c27ef13 {
        position: relative;
        width: 100%;
        padding: 0.375rem 2rem 0.375rem 0.75rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: left;
        border: none;
        background: transparent;

       
    }
}

.companyIcon-c27ef13 {
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
}

.companyHeaderClickable-c27ef13 {
    cursor: pointer;

    &:hover {
        background-color: var(--bs-secondary-bg);
    }
}

.companyHeaderSelected-c27ef13 {
    background-color: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text-emphasis);

    &:hover {
        background-color: var(--bs-primary-bg-subtle);
    }
}

.projectNode-c27ef13 {
    padding: 0.125rem 0;

    &:hover {
        background-color: var(--bs-secondary-bg);
        border-radius: var(--bs-border-radius-sm);
    }
}

.projectNodeClickable-c27ef13 {
    cursor: pointer;
    padding-inline: var(--space-2);
    border-radius: var(--bs-border-radius-sm);
}

.projectNodeSelected-c27ef13 {
    background-color: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text-emphasis);

    &:hover {
        background-color: var(--bs-primary-bg-subtle);
    }
}


.matrix-77a6be4 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background-color: var(--bs-border-color-translucent);
    border-top: 1px solid var(--bs-border-color-translucent);
}

.matrixCell-77a6be4 {
    padding: 0.9rem 1rem;
    background-color: var(--bs-body-bg);
    color: inherit;
    text-decoration: none;
    transition: background-color var(--transition-fast);

    &:hover {
        background-color: var(--bs-tertiary-bg);
    }
}

.matrixBadge-77a6be4 {
    min-width: 2.5rem;
    padding: 0.35rem 0.6rem;
    border-radius: 999px;
    font-size: 1.1rem;
    font-weight: 700;
    text-align: center;
}

.matrixLabel-77a6be4 {
    font-size: 0.9rem;
    font-weight: 500;
}


.chartContainer-f7ac5c1 {
    width: 100%;
    height: 300px;
    max-height: 300px;
    padding-bottom: 4.75rem;
    overflow: clip;

    .chart-f7ac5c1 {
        display: flex;
        height: 100%;
        position: relative;
        padding-left: var(--space-12);

        .yAxis-f7ac5c1 {
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 50px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: flex-end;
            padding-right: 10px;
        }

        .yLabel-f7ac5c1 {
        }

        .bars-f7ac5c1 {
            flex: 1;
            display: flex;
            align-items: flex-end;
            gap: var(--space-1);
        }

        .barWrapper-f7ac5c1 {
            flex: 1;
            display: flex;
            flex-direction: row;
            align-items: end;
            justify-content: center;
            position: relative;
            height: 100%;

            .bar-f7ac5c1 {
                width: 100%;
                height: 0%;
                max-width: 10vw;
                background-color: var(--bs-primary);
                transition: all var(--transition-slow);
                min-height: 2px;
                border-radius: var(--bs-border-radius) var(--bs-border-radius) 0
                    0;
            }

            .bar-f7ac5c1.selected-f7ac5c1 {
                background-color: #084298;
            }

            .barValue-f7ac5c1 {
                display: none;
            }

            .barLabel-f7ac5c1 {
                position: absolute;
                transform: rotate(-45deg);
                white-space: nowrap;
                bottom: -3.5rem;
                left: 50%;
                margin-inline-start: -4rem;
                transform-origin: center;
                color: var(--bs-secondary);
            }

            .barLabel-f7ac5c1.hideLabel-f7ac5c1 {
                display: none;
            }

            .barLabel-f7ac5c1.isMonday-f7ac5c1 {
                color: var(--bs-body-color);
                font-weight: bold;
            }

            &:hover {
                font-weight: bold;
                z-index: 1;

                .bar-f7ac5c1 {
                    background-color: var(--bs-primary-bg-subtle);
                    border: solid var(--bs-primary-border-subtle)
                        var(--bs-border-width);
                }

                .barValue-f7ac5c1,
                .barLabel-f7ac5c1 {
                    position: absolute;
                    display: block;
                    left: auto;
                    right: 0;
                    transform: translateX(100%);
                    z-index: 2;
                    white-space: nowrap;
                    padding: var(--space-1);
                    background-color: var(--bs-secondary-bg-subtle);
                    border: solid var(--bs-secondary-border-subtle)
                        var(--bs-border-width);
                    border-radius: var(--bs-border-radius);
                }

                .barLabel-f7ac5c1.hideLabel-f7ac5c1 {
                    display: block;
                    color: var(--bs-body-color);
                }

                .barLabel-f7ac5c1.isMonday-f7ac5c1 {
                    font-weight: 700;
                }

                .barValue-f7ac5c1 {
                    top: 0px;
                }

                .barLabel-f7ac5c1 {
                    bottom: 2rem;
                }
            }

            &.secondHalf-f7ac5c1:hover {
                .barValue-f7ac5c1,
                .barLabel-f7ac5c1 {
                    transform: none;
                    margin-right: 100%;
                }
            }
        }
    }
}


.form-control:has(button.dropdownToggle-818a512) {
    padding: 0;
}

button.dropdownToggle-818a512 {
    position: relative;
    padding-inline-end: var(--space-8);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
    color: var(--bs-body-color);
    border: none;

    &::after {
        position: absolute;
        inset-inline-end: 0.75rem;
        top: 50%;
        transform: translateY(-50%);
    }

    &:focus {
        border-color: #86b7fe;
        outline: 0;
        box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    }
}

.menu-818a512 {
    max-height: 70vh;
    overflow-y: auto;
    overflow-x: hidden;
}


.meetingPage-a16a99f {
    flex-grow: 1;
    display: flex;

    &,
    div:has(> &) {
        background-color: black !important;
        color: var(--bs-light);
    }
}


/* Flash animation for connection status changes */
@keyframes web_rtc_flash_connection {
    from,
    50%,
    to {
        opacity: 1;
    }

    25%,
    75% {
        opacity: 0;
    }
}

.flashConnection-b78eaa8 {
    animation-name: web_rtc_flash_connection;
    animation-duration: 1s;
    animation-fill-mode: both;
}

@keyframes web_rtc_badge_update {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(var(--bs-primary-rgb), 0.7);
    }
    30% {
        transform: scale(1.3);
        box-shadow: 0 0 0 4px rgba(var(--bs-primary-rgb), 0);
    }
    50% {
        transform: scale(0.95);
    }
    70% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(var(--bs-primary-rgb), 0);
    }
}

.badgeUpdating-b78eaa8 {
    animation: web_rtc_badge_update 0.6s ease-out;
}

.participant-b78eaa8 {
    color: var(--bs-danger);

    .showWhenConnected-b78eaa8 {
        display: none !important;
    }

    .showWhenDisconnected-b78eaa8 {
        display: inline-block !important;
    }

    &.connected-b78eaa8 {
        color: var(--bs-success);

        .showWhenConnected-b78eaa8 {
            display: inline-block !important;
        }

        .showWhenDisconnected-b78eaa8 {
            display: none !important;
        }
    }
}


.thRecipientType-e23b3a5 {
    width: 10rem;
}

.thActions-e23b3a5 {
    width: 3rem;
}


.widthBoundedInput-7bfd89f {
    min-width: 5rem;
    max-width: 5rem;
}


.maxWidthInput-f8f9d3d {
    max-width: 5rem;
}


/* Allows the domain link to be clickable without triggering the stretched link. */
.domainCell-7dd6ddb a {
    position: relative;
    z-index: 2;
}


.table-888d346 {
    table-layout: fixed;

    & td {
        overflow-wrap: anywhere;
    }
}

.colPhoto-888d346 {
    width: 5%;
}

.colName-888d346 {
    width: 20%;
}

.colVisited-888d346 {
    width: 16%;
}

.colBuilding-888d346 {
    width: 15%;
}

.colCard-888d346 {
    width: 11%;
}

.colCheckIn-888d346 {
    width: 11%;
}

.colCheckOut-888d346 {
    width: 11%;
}

.colDuration-888d346 {
    width: 11%;
}

.tableContainer-888d346 {
    container-type: inline-size;
}

@container (max-width: 40rem) {
    .tableContainer-888d346 .table-888d346 {
        font-size: var(--font-size-sm);
    }

    .tableContainer-888d346 .table-888d346 th,
    .tableContainer-888d346 .table-888d346 td {
        padding-inline: var(--space-1);
    }
}

@container (max-width: 34rem) {
    .tableContainer-888d346 .colCard-888d346,
    .tableContainer-888d346 .colDuration-888d346 {
        width: 0;
    }

    .tableContainer-888d346 .table-888d346 th:nth-child(5),
    .tableContainer-888d346 .table-888d346 td:nth-child(5),
    .tableContainer-888d346 .table-888d346 th:nth-child(8),
    .tableContainer-888d346 .table-888d346 td:nth-child(8) {
        padding-inline: 0;
        overflow: hidden;
        white-space: nowrap;
    }
}


.preview-2b35fea {
    height: min(60vh, 460px);
    max-width: 100%;
    aspect-ratio: 180 / 231;
    object-fit: cover;
    background-color: var(--bs-tertiary-bg);
}


.table-a40497d {
    table-layout: fixed;

    & td {
        overflow-wrap: anywhere;
    }
}

.colPhoto-a40497d {
    width: 5%;
}

.colName-a40497d {
    width: 20%;
}

.colVisited-a40497d {
    width: 16%;
}

.colBuilding-a40497d {
    width: 15%;
}

.colCard-a40497d {
    width: 11%;
}

.colCheckIn-a40497d {
    width: 11%;
}

.colCheckOut-a40497d {
    width: 11%;
}

.colDuration-a40497d {
    width: 11%;
}

.tableContainer-a40497d {
    container-type: inline-size;
}

@container (max-width: 40rem) {
    .tableContainer-a40497d .table-a40497d {
        font-size: var(--font-size-sm);
    }

    .tableContainer-a40497d .table-a40497d th,
    .tableContainer-a40497d .table-a40497d td {
        padding-inline: var(--space-1);
    }
}

@container (max-width: 34rem) {
    .tableContainer-a40497d .colCard-a40497d,
    .tableContainer-a40497d .colDuration-a40497d {
        width: 0;
    }

    .tableContainer-a40497d .table-a40497d th:nth-child(5),
    .tableContainer-a40497d .table-a40497d td:nth-child(5),
    .tableContainer-a40497d .table-a40497d th:nth-child(8),
    .tableContainer-a40497d .table-a40497d td:nth-child(8) {
        padding-inline: 0;
        overflow: hidden;
        white-space: nowrap;
    }
}


.countryPrefix-b3c1cbd {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.menu-b3c1cbd {
    min-width: min(18rem, calc(100vw - var(--space-6)));
}

.tableWrapper-b3c1cbd {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    outline: none;
}

.choiceDisplay-b3c1cbd {
    cursor: pointer;
}


.table-3b4ddff {
    table-layout: fixed;

    & td {
        overflow-wrap: anywhere;
    }
}

.colPhoto-3b4ddff {
    width: 5%;
}

.colName-3b4ddff {
    width: 20%;
}

.colVisited-3b4ddff {
    width: 16%;
}

.colBuilding-3b4ddff {
    width: 14%;
}

.colCard-3b4ddff {
    width: 11%;
}

.colCheckIn-3b4ddff {
    width: 11%;
}

.colDuration-3b4ddff {
    width: 11%;
}

.colAction-3b4ddff {
    width: 12%;
}

.tableContainer-3b4ddff {
    container-type: inline-size;
}

@container (max-width: 40rem) {
    .tableContainer-3b4ddff .table-3b4ddff {
        font-size: var(--font-size-sm);
    }

    .tableContainer-3b4ddff .table-3b4ddff th,
    .tableContainer-3b4ddff .table-3b4ddff td {
        padding-inline: var(--space-1);
    }
}

@container (max-width: 34rem) {
    .tableContainer-3b4ddff .colCard-3b4ddff,
    .tableContainer-3b4ddff .colDuration-3b4ddff {
        width: 0;
    }

    .tableContainer-3b4ddff .table-3b4ddff th:nth-child(5),
    .tableContainer-3b4ddff .table-3b4ddff td:nth-child(5),
    .tableContainer-3b4ddff .table-3b4ddff th:nth-child(7),
    .tableContainer-3b4ddff .table-3b4ddff td:nth-child(7) {
        padding-inline: 0;
        overflow: hidden;
        white-space: nowrap;
    }
}


.statusPill-3716332 {
    gap: 0.4rem;
    font-weight: 500;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
}


.validationHidden-f9f0ff1 .is-invalid,
.validationHidden-f9f0ff1 .is-valid {
    border-color: var(--bs-border-color) !important;
}

.validationHidden-f9f0ff1 .form-control.is-invalid,
.validationHidden-f9f0ff1 .form-control.is-valid {
    background-image: none !important;
    padding-right: var(--space-3) !important;
}

.validationHidden-f9f0ff1 .form-select.is-invalid,
.validationHidden-f9f0ff1 .form-select.is-valid {
    --bs-form-select-bg-icon: none;
    padding-right: 2.25rem !important;
}

.validationHidden-f9f0ff1 .is-invalid:focus,
.validationHidden-f9f0ff1 .is-valid:focus {
    border-color: var(--bs-primary) !important;
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25) !important;
}

.validationHidden-f9f0ff1 .invalid-feedback,
.validationHidden-f9f0ff1 .valid-feedback {
    display: none !important;
}


.idDocumentInputGroup-5d077cf .form-select.is-invalid {
    --bs-form-select-bg-icon: none;
    padding-right: 2.25rem;
    background-image: var(--bs-form-select-bg-img);
    background-position: right 0.75rem center;
    background-size: 16px 12px;
}

.idDocumentTypeSelect-5d077cf {
    flex-grow: 0;
    min-width: 8rem;
}

.validationHidden-5d077cf .is-invalid,
.validationHidden-5d077cf .is-valid {
    border-color: var(--bs-border-color) !important;
}

.validationHidden-5d077cf .form-control.is-invalid,
.validationHidden-5d077cf .form-control.is-valid {
    background-image: none !important;
    padding-right: var(--space-3) !important;
}

.validationHidden-5d077cf .form-select.is-invalid,
.validationHidden-5d077cf .form-select.is-valid {
    --bs-form-select-bg-icon: none;
    padding-right: 2.25rem !important;
}

.validationHidden-5d077cf .is-invalid:focus,
.validationHidden-5d077cf .is-valid:focus {
    border-color: var(--bs-primary) !important;
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25) !important;
}

.validationHidden-5d077cf .invalid-feedback,
.validationHidden-5d077cf .valid-feedback {
    display: none !important;
}

.identityGridContainer-5d077cf {
    container-type: inline-size;
}

.identityGrid-5d077cf {
    display: grid;
    grid-template-columns: minmax(7rem, 1fr) max-content minmax(0, 3fr);
    grid-template-rows: repeat(6, auto);
    column-gap: 0;
    row-gap: var(--space-4);
    align-items: start;
}

.photoCell-5d077cf {
    grid-column: 1;
    grid-row: 1 / -1;
    align-self: center;
}

.labelCell-5d077cf {
    grid-column: 2;
    text-align: end;
    padding-inline: var(--space-3);
    white-space: nowrap;
}

.inputCell-5d077cf {
    grid-column: 3;
    padding-inline: var(--space-3);
    min-width: 0;
}

@container (max-width: 28rem) {
    .identityGrid-5d077cf {
        grid-template-columns: 1fr;
        grid-template-rows: none;
    }

    .photoCell-5d077cf {
        grid-column: auto;
        grid-row: auto;
        justify-self: center;
        align-self: auto;
    }

    .labelCell-5d077cf {
        grid-column: auto;
        text-align: start;
        padding-inline: 0;
    }

    .inputCell-5d077cf {
        grid-column: auto;
        padding-inline: 0;
    }
}


.facePreview-e4c7b6e {
    max-width: 8rem;
    max-height: 10rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--bs-border-color);
}

.rawMrz-e4c7b6e {
    font-size: 0.75rem;
    padding: var(--space-2);
    background-color: var(--bs-tertiary-bg);
    border-radius: var(--radius-sm);
    white-space: pre;
    overflow-x: auto;
    margin: 0;
}

.scannedDataTitle-e4c7b6e {
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: var(--space-2);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}


.rawMrz-afc6997 {
    font-size: 0.75rem;
    white-space: pre;
    overflow-x: auto;
    margin: 0;
}


.photoColumn-1d5fa97 {
    flex: 0 0 auto;
    width: 100%;

    & .photoBox-1d5fa97 {
        width: clamp(108px, 28cqi, 180px);
        max-width: 100%;
        aspect-ratio: 180 / 231;
        object-fit: cover;
        cursor: pointer;
        background-color: var(--bs-tertiary-bg);
    }

    & .photoPlaceholder-1d5fa97 {
        width: clamp(108px, 28cqi, 180px);
        max-width: 100%;
        aspect-ratio: 180 / 231;
        background-color: var(--bs-tertiary-bg);
        color: var(--bs-secondary-color);
        cursor: pointer;
        font-size: 2.5rem;
    }

    & .photoActions-1d5fa97 {
        width: clamp(108px, 28cqi, 180px);
        max-width: 100%;

        & .btn-group > .btn {
            flex: 1 1 0;
        }
    }
}


.thumb-e8206ae {
    width: 40px;
    height: 40px;
    object-fit: cover;
    flex-shrink: 0;
    background-color: var(--bs-tertiary-bg);
    font-size: 1.25rem;
}


.table-fde9425 {
    table-layout: fixed;

    & td {
        overflow-wrap: anywhere;
    }

    & .colPhoto-fde9425 {
        width: 3.5rem;
    }

    & .colName-fde9425 {
        width: auto;
    }

    & .colEmail-fde9425 {
        width: auto;
    }

    & .colCompany-fde9425 {
        width: 9%;
    }

    & .colVisited-fde9425 {
        width: 9%;
    }

    & .colVisitedCompany-fde9425 {
        width: 8%;
    }

    & .colBuilding-fde9425 {
        width: 8%;
    }

    & .colCheck-fde9425 {
        width: 10%;
    }

    & .colDuration-fde9425 {
        width: 8%;
    }

    & .checkFilter-fde9425 input[type="date"] {
        width: auto !important;
        min-width: 0;
        flex: 1 1 auto;
    }
}


.table-99c1be8 {
    table-layout: fixed;

    & td {
        overflow-wrap: anywhere;
    }

    & .colPhoto-99c1be8 {
        width: 3.5rem;
    }

    & .colName-99c1be8 {
        width: auto;
    }

    & .colEmail-99c1be8 {
        width: auto;
    }

    & .colCompany-99c1be8 {
        width: 9%;
    }

    & .colVisited-99c1be8 {
        width: 9%;
    }

    & .colVisitedCompany-99c1be8 {
        width: 8%;
    }

    & .colBuilding-99c1be8 {
        width: 8%;
    }

    & .colCheck-99c1be8 {
        width: 10%;
    }

    & .colDuration-99c1be8 {
        width: 8%;
    }

    & .checkFilter-99c1be8 input[type="date"] {
        width: auto !important;
        min-width: 0;
        flex: 1 1 auto;
    }
}


.chart-9e1916f {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
}

.grid-9e1916f {
    stroke: var(--bs-border-color);
    stroke-width: 0.5;
}

.band-9e1916f {
    stroke: var(--bs-body-bg);
    stroke-width: 0.3;
}

.totalLine-9e1916f {
    fill: none;
    stroke: var(--bs-body-color);
    stroke-width: 1.2;
}

.focusLine-9e1916f {
    stroke: var(--bs-secondary-color);
    stroke-width: 0.5;
    stroke-dasharray: 2 2;
}

.yLabel-9e1916f,
.xLabel-9e1916f {
    fill: var(--bs-secondary-color);
    font-size: 7px;
}

.tooltip-9e1916f {
    fill: var(--bs-body-color);
    font-size: 8px;
    font-weight: 600;
}

.legend-9e1916f {
    gap: 0.25rem 0.625rem;
    margin-top: 0.375rem;
    padding: 0 var(--space-1);
}

.legendItem-9e1916f {
    min-width: 0;
    font-size: 0.7rem;
    color: var(--bs-secondary-color);
}

.swatch-9e1916f {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
    display: block;
}

.legendName-9e1916f {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 9rem;
}


.listBody-6d309a4 {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}


.row-6339cdb {
    --bs-gutter-x: 0;
}

.rowInner-6339cdb {
    min-width: 0;

    /* Selected conversation (this class is set alongside .rowInner). */
    &.activeRow-6339cdb {
        background-color: var(--bs-secondary-bg);
    }
}

.avatarSlot-6339cdb {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;

    .avatarIcon-6339cdb {
        font-size: 1.25rem;
        color: var(--bs-secondary-color);
    }
}

.rowText-6339cdb {
    flex: 1 1 auto;
    min-width: 0;

    .rowName-6339cdb {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .rowPreview-6339cdb {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}


.chatLayout-dbe06d4 {
    flex: 1 1 auto;
    display: flex;
    min-height: 0;
}

.conversationPane-dbe06d4 {
    width: 320px;
    flex-shrink: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.threadPane-dbe06d4 {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Mobile: a single pane at a time — the thread only when one is open. */
@media (max-width: 767.98px) {
    .conversationPane-dbe06d4 {
        width: 100%;
        border-inline-end: 0 !important;
    }

    .chatLayout-dbe06d4.hasActiveDetail-dbe06d4 .conversationPane-dbe06d4 {
        display: none;
    }

    .chatLayout-dbe06d4:not(.hasActiveDetail-dbe06d4) .threadPane-dbe06d4 {
        display: none;
    }
}


.ownRow-98146d0 {
    justify-content: flex-end;
}

.senderAvatar-98146d0 {
    flex-shrink: 0;
    width: 28px;
}

.avatar-98146d0 {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
}


.scrollWrapper-f667e7c {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.threadScroll-f667e7c {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.jumpToLatest-f667e7c {
    position: absolute;
    bottom: var(--space-2);
    left: 50%;
    transform: translateX(-50%);
    border-radius: 2rem;
    box-shadow: var(--bs-box-shadow-sm);
}


.avatarSlot-ed82b16 {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;

    .avatarIcon-ed82b16 {
        font-size: 1.25rem;
        color: var(--bs-secondary-color);
    }
}


.listItem-8dbdded {
    transition:
        opacity var(--transition-base),
        background-color var(--transition-base);

    &.dragging-8dbdded {
        opacity: 0.4;

        & > * {
            background-color: var(--bs-secondary-bg) !important;
        }
    }

    /* Drop indicator: a line at the top edge of the row marking where the
       dragged bookmark will land. box-shadow is used rather than border-top
       because table border-collapse swallows row borders. `!important` is
       required because Bootstrap's `.table` paints cell striping/hover
       backgrounds with its own higher-specificity inset box-shadow, which
       would otherwise override this one. */
    &.dragOver-8dbdded > * {
        box-shadow: inset 0 2px 0 0 var(--bs-primary) !important;
    }

    & .dragHandleCell-8dbdded {
        width: 1px;

        & .dragHandleIcon-8dbdded {
            cursor: grab;
        }
    }
}


.progressFill-c80b966 {
    width: 0%;
}


.chartContainer-4b2f3be {
    width: 100%;
    height: 100%;
    max-height: 500px;
    padding-bottom: 4.75rem;
    overflow: clip;

    .chart-4b2f3be {
        display: flex;
        height: 100%;
        position: relative;
        padding-left: var(--space-12);

        .yAxis-4b2f3be {
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 50px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: flex-end;
            padding-right: 10px;
        }

        .yLabel-4b2f3be {
        }

        .bars-4b2f3be {
            flex: 1;
            display: flex;
            align-items: flex-end;
            gap: var(--space-1);
        }

        .barWrapper-4b2f3be {
            flex: 1;
            display: flex;
            flex-direction: row;
            align-items: end;
            justify-content: center;
            position: relative;
            height: 100%;

            .bar-4b2f3be {
                width: 100%;
                height: 0%;
                max-width: 10vw;
                background-color: var(--bs-danger);
                transition: all var(--transition-slow);
                min-height: 2px;
                border-radius: var(--bs-border-radius) var(--bs-border-radius) 0
                    0;
            }

            .bar-4b2f3be.selected-4b2f3be {
                background-color: #991b1b;
            }

            .barValue-4b2f3be {
                display: none;
            }

            .barLabel-4b2f3be {
                position: absolute;
                transform: rotate(-45deg);
                white-space: nowrap;
                bottom: -3.5rem;
                left: 50%;
                margin-inline-start: -4rem;
                transform-origin: center;
                color: var(--bs-secondary);
            }

            .barLabel-4b2f3be.hideLabel-4b2f3be {
                display: none;
            }

            .barLabel-4b2f3be.isMonday-4b2f3be {
                color: var(--bs-body-color);
                font-weight: bold;
            }

            &:hover {
                font-weight: bold;
                z-index: 1;

                .bar-4b2f3be {
                    background-color: var(--bs-danger-bg-subtle);
                    border: solid var(--bs-danger-border-subtle)
                        var(--bs-border-width);
                }

                .barValue-4b2f3be,
                .barLabel-4b2f3be {
                    position: absolute;
                    display: block;
                    left: auto;
                    right: 0;
                    transform: translateX(100%);
                    z-index: 2;
                    white-space: nowrap;
                    padding: var(--space-1);
                    background-color: var(--bs-secondary-bg-subtle);
                    border: solid var(--bs-secondary-border-subtle)
                        var(--bs-border-width);
                    border-radius: var(--bs-border-radius);
                }

                .barLabel-4b2f3be.hideLabel-4b2f3be {
                    display: block;
                    color: var(--bs-body-color);
                }

                .barLabel-4b2f3be.isMonday-4b2f3be {
                    font-weight: 700;
                }

                .barValue-4b2f3be {
                    top: 0px;
                }

                .barLabel-4b2f3be {
                    bottom: 2rem;
                }
            }

            &.secondHalf-4b2f3be:hover {
                .barValue-4b2f3be,
                .barLabel-4b2f3be {
                    transform: none;
                    margin-right: 100%;
                }
            }
        }
    }
}


.chartContainer-8e4fdb1 {
    height: 500px;
}


.chart-5b4359d {
    height: 200px;
}

.userSearchField-5b4359d {
    min-width: 10ex;
}

.exceptionMessage-5b4359d {
    max-width: 75%;
    overflow: hidden;
    text-overflow: ellipsis;
}


.expandRows-5f093bd {
    .query-5f093bd {
        white-space: pre;
    }
}

.compactRows-5f093bd {
    .query-5f093bd {
        max-height: 1.5em;
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}


.expandRows-afdf18f {
    .query-afdf18f {
        white-space: pre;
    }
}

.compactRows-afdf18f {
    .query-afdf18f {
        max-height: 1.5em;
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}


.expandRows-384e3d4 {
    .query-384e3d4 {
        white-space: pre;
    }
}

.compactRows-384e3d4 {
    .query-384e3d4 {
        max-height: 1.5em;
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}


.filterControl-a1f8ace {
    flex: 1 1 240px;
}


.mapWrapper-4764bcd {
    height: calc(100vh - 250px);
    min-height: 400px;
}


.legendMarker-d2a8cbe {
    width: 12px;
    height: 12px;
}

.progressTrack-d2a8cbe,
.progressFill-d2a8cbe {
    width: 0%;
}


.metadataTable-d89ec58 {
    th {
        white-space: nowrap;
        font-weight: 600;
        width: 200px;
        vertical-align: top;
    }

    td {
        width: 100%;
        word-break: break-word;
    }
}

.userMessage-d89ec58 {

    .messageContent-d89ec58 {
        max-width: 70%;
        padding: var(--space-3) var(--space-4);
        word-wrap: break-word;
        white-space: pre-wrap;
        background-color: #007bff;
        color: white;
        border-radius: var(--radius-2xl) var(--radius-2xl) var(--radius-sm) var(--radius-2xl);
    }
}

.assistantMessage-d89ec58 {

    .messageContent-d89ec58 {
        max-width: 70%;
        padding: var(--space-3) var(--space-4);
        word-wrap: break-word;
        white-space: pre-wrap;
        background-color: #f8f9fa;
        color: #333;
        border: 1px solid #e9ecef;
        border-radius: var(--radius-2xl) var(--radius-2xl) var(--radius-2xl) var(--radius-sm);
    }
}


table.bugDetails-a980ddb {
    th {
        white-space: nowrap;
    }

    td {
        width: 100%;
    }
}

.stackTrace-a980ddb {
    font-family: monospace;
    margin-bottom: 0;
}

.copyIcon-a980ddb {
    position: fixed;
    padding-inline-start: var(--space-2);
    margin-top: var(--space-1);
    opacity: 0;
    transition: opacity 0.3s ease-in-out;

    a:hover & {
        opacity: 1;
    }
}


.securityEvent-eb197a2 {
    table.eventDetails-eb197a2 {
        th {
            white-space: nowrap;
            font-weight: 600;
            width: 200px;
            vertical-align: top;
        }

        td {
            width: 100%;
            word-break: break-word;
        }
    }

    .errorMessage-eb197a2 {
        font-family: monospace;
        margin-bottom: 0;
        font-size: 0.9rem;
        color: var(--bs-danger);
        background-color: var(--bs-danger-bg-subtle);
        padding: var(--space-4);
        border-radius: 0.375rem;
        border-left: 3px solid var(--bs-danger);
    }

    .headers-eb197a2 {
        font-family: monospace;
        margin-bottom: 0;
        font-size: 0.85rem;
        background-color: var(--bs-secondary-bg);
        padding: var(--space-4);
        border-radius: 0.375rem;
        max-height: 400px;
        overflow-y: auto;
        line-height: 1.6;
    }

    .simpleLog-eb197a2 {
        font-family: monospace;
        margin-bottom: 0;
        font-size: 0.9rem;
        background-color: var(--bs-info-bg-subtle);
        padding: var(--space-4);
        border-radius: 0.375rem;
        border-left: 3px solid var(--bs-info);
        white-space: pre-wrap;
        word-wrap: break-word;
    }

    .copyIcon-eb197a2 {
        position: fixed;
        padding-inline-start: var(--space-2);
        margin-top: var(--space-1);
        opacity: 0;
        transition: opacity 0.3s ease-in-out;

        a:hover & {
            opacity: 1;
        }
    }
}


.dropZone-d9c3be3 {
    flex-grow: 1;
    width: 100%;
    /* ast-grep-ignore prefer-dropzone-utility */
    border: 3px dashed var(--bs-secondary-border-subtle);
    border-radius: var(--radius-2xl);
    background-color: var(--bs-secondary-bg-subtle);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    & .instructions-d9c3be3 {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        & p {
            text-align: center;
        }
    }

    &:hover {
        background-color: var(--bs-primary-bg-subtle);
        border-color: var(--bs-primary-border-subtle);
    }
}


.featuresLayout-9ab185e {
    min-height: 100%;

    .sidebar-9ab185e {
        min-width: 25rem;
        position: sticky;
        top: var(--header-sticky-offset, 3.5rem);
        align-self: flex-start;
        height: calc(100vh - var(--header-sticky-offset, 3.5rem));
        overflow-y: auto;

        .sidebarHeader-9ab185e {
            position: sticky;
            top: 0;
            z-index: 1;
        }
    }
}


.progressColumn-60d9030 {
    min-width: 7.5rem;
}

.sizeProgress-60d9030 {
    height: 1.25rem;
}

.progressLarge-60d9030 {
    height: 25px;
}

.progressFill-60d9030 {
    width: 0%;
}


.strengthBar-3e4a31a {
    height: 0.5rem;
}

.strengthFill-3e4a31a {
    width: 0%;
}

.passwordConditions-3e4a31a {
    li {
        color: var(--bs-secondary);

        .iconChecked-3e4a31a,
        .iconUnchecked-3e4a31a {
            margin-right: var(--space-1);
        }

        .iconChecked-3e4a31a {
            display: none;
        }

        &.conditionChecked-3e4a31a {
            color: var(--bs-success);

            .iconChecked-3e4a31a {
                display: inline-block;
            }

            .iconUnchecked-3e4a31a {
                display: none;
            }
        }
    }
}


.assistsAvatar-1379e07 {
    width: 2.25em;
    height: 2.25em;
    border-radius: var(--radius-sm);
    overflow: hidden;
    flex-shrink: 0;

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


.grid-1119a1d {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-4);

    .themeBox,
    .themeCard-1119a1d {
        min-height: 400px;
        position: relative;
        transition: all var(--transition-slow);
    }
}

.previewFrame-1119a1d {
    border: 0;
    flex: 1 1 auto;
    width: 100%;
    min-height: 320px;
    display: block;
}

/* Each grid cell stacks the preview card on top and the Select button below.
 * The button is intentionally outside `.themeBox#theme-X` so per-theme CSS
 * variables don't cascade into it — uniform appearance across all 16 cards. */
.themeAction-1119a1d {
    padding: var(--space-1) 0;
}


/*
 * Cap the per-mailbox sub-card to a reading width so the card border
 * doesn't run far past the actual content on wide screens. 46rem
 * (~720px) comfortably fits the Users-with-access table (avatar + name
 * + 3 permission columns + remove button) plus the grant-access row
 * with the user picker.
 */
.mailboxCard-7df02c2 {
    max-width: 46rem;
}


.signature-preview-94ee3ec {
    height: 150px;
    width: 100%;
    object-fit: contain;
}


.mcpConnect-8b85e67 {
    /* Sits below the connected-apps table on the settings page. */
    margin-top: var(--space-5);
}

.connectSection-8b85e67 {
    margin-bottom: var(--space-4);

    h6 {
        margin-top: 0;
        margin-bottom: var(--space-2);
        font-weight: 600;
    }
}

.codeBlock-8b85e67 {
    background-color: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    font-size: 0.85rem;
    overflow-x: auto;
    white-space: pre;
    margin-bottom: var(--space-2);
}


.tooltipHolder-a8c09d4 {
    color: silver;
}

.isolatedScope-a8c09d4 {
    isolation: isolate;
}

.accesses-a8c09d4 table {
    --bs-table-bg: transparent;
}

.accesses-a8c09d4 .table-hover > tbody > tr:hover {
    --bs-table-hover-color: var(--bs-dark);
    --bs-table-hover-bg: yellow;
}

.accesses-a8c09d4 .table-hover td {
    position: relative;
}

.accesses-a8c09d4 .table-hover td:hover::after {
    position: absolute;
    color: var(--bs-table-hover-color);
    background-color: var(--bs-table-hover-bg);
    left: 0;
    top: -5000px;
    height: 10000px;
    width: 100%;
    z-index: -1;
}

.accesses-a8c09d4 tr.hasARole-a8c09d4 input {
    font-size: 150%;
}

.accesses-a8c09d4 tr.hasNoRole-a8c09d4 th {
    font-weight: normal;
    color: var(--bs-gray);
}


/* Recipient field (To / Cc / Bcc): a single-row textarea that auto-grows
   vertically as recipients wrap onto further lines, Outlook-style — the comma
   separated list stays one control instead of overflowing a fixed-height input.
   The height is driven from JS (`scroll_height`) for cross-browser behaviour; the
   rules below set the floor, the matching ceiling, and disable the manual grab
   handle. Keep `max-height` in sync with `MAX_RECIPIENT_HEIGHT_PX`. */
.recipientInput-555f7c2 {
    resize: none;
    /* One Bootstrap form-control row, so an empty field looks like a plain input. */
    min-height: calc(1.5em + 0.75rem + 2px);
    max-height: 160px;
    overflow-y: auto;
}


/* Inline mailbox auth form (shown in place of the mailbox until the session is
   authenticated). Constrained width so it reads as a sign-in card, not a
   full-width banner. */
.authForm-e05e7b7 {
    max-width: 26rem;
}

/* Compose header rows (From / To / Cc / Bcc / Subject): a fixed-width label sat
   on the same line as its field, Outlook-style. The shared width keeps every
   field's left edge aligned regardless of label length. */
.composeLabel-e05e7b7 {
    flex: 0 0 auto;
    width: 4rem;
}

/* Fill the parent flex track WITHOUT letting content dictate the base size:
   `flex-basis: 0` is the key. With plain `flex-grow: 1` the basis is `auto`
   (= content height), and the app's page chain caps height with
   `min-height: 100vh` (a floor, not a ceiling) — so tall mail content would grow
   the whole chain and scroll the page instead of the panes. flex-basis:0 +
   min-height:0 lets the box/layout/section shrink to the viewport so the inner
   list and message panes (overflow:auto) scroll independently. */
.fillFlex-e05e7b7 {
    flex: 1 1 0;
    min-height: 0;
}

/* Flex-shrink primitives Bootstrap can't express. Without min-width:0, a flex
   child keeps min-width:auto and `text-truncate` never engages — long subjects
   and addresses then blow the layout out horizontally. min-height:0 lets the
   column flexbox bound its children so the panes can scroll independently. */
.minWidth0-e05e7b7 {
    min-width: 0;
}

.minHeight0-e05e7b7 {
    min-height: 0;
}

/* Stacked (mobile/tablet) panes span the full width; the fixed-width multi-column
   layout only kicks in once the panes sit side-by-side (>= lg / 992px), matching
   the flex-lg-row breakpoint in the markup. */
.mailRail-e05e7b7,
.searchGroup-e05e7b7,
.messageListPane-e05e7b7 {
    width: 100%;
}

@media (min-width: 992px) {
    /* Single left rail: Compose on top, folders in the middle, account switcher
       pinned to the bottom (the markup makes it a flex column). Replaces the old
       two-pane mailbox + folder split. */
    .mailRail-e05e7b7 {
        width: 16rem;
    }

    .searchGroup-e05e7b7 {
        width: 18rem;
    }

    /* Fixed-width column that fills the full-height flex row. It is a flex
       column itself (see markup): the message list scrolls in an inner
       overflow-y-auto wrapper while the pagination footer stays pinned at the
       bottom — so the pane itself doesn't scroll. */
    .messageListPane-e05e7b7 {
        width: 31rem;
        min-height: 0;
    }
}

/* ── Sender avatar ─────────────────────────────────────────────────────────
   Circular initials badge shown in list rows and the reading-pane header.
   The background colour is picked from the fixed palette below by hashing the
   sender string (see sender_hash / SenderAvatar), so the same sender always gets
   the same colour. The colour MUST come from a class, not an inline style — the
   app's CSP forbids inline `style` attributes, so they are silently dropped. */
.avatar-e05e7b7 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
    user-select: none;
}

.avatarLg-e05e7b7 {
    width: 2.75rem;
    height: 2.75rem;
    font-size: 0.95rem;
}

/* Deterministic colour palette — all dark enough for white text. Keep the count
   (12) in sync with the AVATAR_PALETTE array in webmail.rs. */
.avatarC0-e05e7b7 {
    background-color: #c2410c;
}
.avatarC1-e05e7b7 {
    background-color: #b91c1c;
}
.avatarC2-e05e7b7 {
    background-color: #be185d;
}
.avatarC3-e05e7b7 {
    background-color: #a21caf;
}
.avatarC4-e05e7b7 {
    background-color: #7e22ce;
}
.avatarC5-e05e7b7 {
    background-color: #6d28d9;
}
.avatarC6-e05e7b7 {
    background-color: #4338ca;
}
.avatarC7-e05e7b7 {
    background-color: #1d4ed8;
}
.avatarC8-e05e7b7 {
    background-color: #0369a1;
}
.avatarC9-e05e7b7 {
    background-color: #0f766e;
}
.avatarC10-e05e7b7 {
    background-color: #15803d;
}
.avatarC11-e05e7b7 {
    background-color: #4d7c0f;
}

/* ── Message list rows ─────────────────────────────────────────────────────
   A denser, webmail-style row. Selection is a subtle tinted background plus a
   left accent bar instead of Bootstrap's heavy solid `.active` fill, and the
   per-row checkbox stays hidden until the row is hovered or the row is checked
   (driven reactively, no :has) to cut visual clutter.

   Specificity matters here: Bootstrap is loaded AFTER this bundle (leptos_meta
   emits its <link> at the <MetaTags/> slot, the end of <head>), so at equal
   specificity Bootstrap's `.list-group-item { background-color: … }` wins and
   a bare `.messageRowActive` (0,1,0) never renders — the only "highlight" was
   Bootstrap's `:focus` styling, which click gives and programmatic selection
   doesn't. Theme skins (`body.theme-* .list-group-item`, (0,2,1)) bury it
   further. The class is tripled to (0,3,0) to out-rank both. The left accent
   is an inset box-shadow, not a border: `.list-group-flush > .list-group-item`
   (0,2,0, after us) zeroes side border-widths, so a border-left can never
   show — and box-shadow also avoids any layout shift on selection. */
.messageRowActive-e05e7b7.messageRowActive-e05e7b7.messageRowActive-e05e7b7 {
    background-color: var(--bs-primary-bg-subtle);
    box-shadow: inset 3px 0 0 var(--bs-primary);
}

/* :focus (and :active) must be covered explicitly: Bootstrap 5.3's
   `.list-group-item-action:not(.active):focus` is (0,3,0) — the `:not(.active)`
   argument counts — which ties the base rule above and wins by load order. A
   clicked row keeps :focus after the pointer leaves, so without this the
   selection tint flipped to the hover colour the moment the mouse moved off. */
.messageRowActive-e05e7b7.messageRowActive-e05e7b7.messageRowActive-e05e7b7:hover,
.messageRowActive-e05e7b7.messageRowActive-e05e7b7.messageRowActive-e05e7b7:focus,
.messageRowActive-e05e7b7.messageRowActive-e05e7b7.messageRowActive-e05e7b7:active {
    background-color: var(--bs-primary-bg-subtle);
}

/* Hidden by default; revealed on row hover. The .selectBoxShown modifier keeps
   already-checked boxes visible even when the row isn't hovered. */
.selectBox-e05e7b7 {
    opacity: 0;
    transition: opacity 0.1s ease-in-out;
}

.messageRow-e05e7b7:hover .selectBox-e05e7b7,
.selectBoxShown-e05e7b7 {
    opacity: 1;
}

.unreadDot-e05e7b7 {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    flex-shrink: 0;
    border-radius: 50%;
    background-color: var(--bs-primary);
}

/* HTML email bodies render inside a sandboxed iframe (no scripts, no same-origin,
   no forms) so hostile markup is isolated from the ERP origin. The iframe must
   fill the reading pane, but flex-grow is unreliable on replaced elements like
   <iframe> (its intrinsic 300x150 size interferes). So a plain block wrapper does
   the flex-growing — that's reliable — and the iframe fills it absolutely. */
.messageBodyFrameWrap-e05e7b7 {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
}

.messageBodyFrame-e05e7b7 {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background-color: #ffffff;
}

/* Placeholder overlaid on the body frame while it loads. It sits above the
   iframe (which keeps loading underneath) so the previously opened email is
   never left on screen while the next one is still fetching. */
.messageBodyLoading-e05e7b7 {
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* Almost-fullscreen reading pane, the same affordance PDFs get via the file
   lightbox. The article is lifted out of the three-pane flex layout into an
   overlay that fills the routed content area; its own flex-column keeps the
   header pinned, the body iframe growing, and the attachments footer at the
   bottom, exactly as in the docked pane.

   `position: absolute; inset: 0` anchors to the app shell's `.routes` container
   (the nearest positioned ancestor — `app.css` makes it `position: relative`),
   which already begins at the aside menu's right edge. So the overlay fills the
   content region WITHOUT covering the aside, and follows it automatically when
   the aside collapses to width 0 or flips to the right in RTL — no hard-coded
   left offset, no fighting the aside's z-index.

   z-index 1020 keeps it above any sticky content bars inside `.routes` while
   staying below Bootstrap's modal backdrop (1050) — the compose modal portals
   to <body>, so Reply/Forward still stack on top of the expanded pane. */
.readingPaneFullScreen-e05e7b7 {
    position: absolute;
    inset: 0;
    z-index: 1020;
    background-color: var(--bs-body-bg);
}


.detailLink-c1dea08 {
    min-width: 0;
}

.detailContent-c1dea08 {
    min-width: 0;
}

.panel-c1dea08 {
    animation: panel-open 180ms ease-out;
    overflow: hidden;
}

@keyframes panel-open {
    from {
        opacity: 0;
        transform: translateY(-4px);
        max-height: 0;
    }
    to {
        opacity: 1;
        transform: translateY(0);
        max-height: 50rem;
    }
}


.iconBadge-80dfb26 {
    width: 3.5rem;
    height: 3.5rem;
}


.table-a530308 {
    .completed-a530308 {
        display: none;
    }

    tr {
        vertical-align: middle;
        &.table-success {
            .progress {
                display: none;
            }

            .completed-a530308 {
                display: block;
            }
        }

        td {
            &:has(.progress) {
                min-width: 40%;
                vertical-align: middle;
            }
        }

        .progress {
            min-height: 1rem;
        }
    }
}