/* ===== Popup detail-view side navigation rail =====
   Scope: this stylesheet styles ONLY the body region of nav-enabled popups (`.entirety-popup-body-with-nav`)
   and the rail itself. It deliberately does NOT touch the dialog, modal-content, header, focus
   guards, or the popup-resize machinery — popups without the rail receive zero rules from this file. */

/* Remove the modal-content's 1px border for nav-enabled popups only. With `ShowHeader=false` and
   the body's padding zeroed, this border was showing as a thin white line on the left of the
   image-header (and along every other edge). Targeted via `:has()` so popups WITHOUT the rail
   keep their default modal-content border intact. */
.dxbl-modal-content:has(> .entirety-popup-body-with-nav) {
    border: none !important;
}

/* Header in nav-enabled popups: place ImageHeader (fixed width matching the rail) on the left and
   the rest (form-header + optional stepper) on the right. The wrapper around form-header+stepper
   gets `flex: 1 1 auto` so it fills the remaining horizontal space.
   `padding: 0` on the host strips the 10px window-header padding so the ImageHeader sits flush
   against the popup's top-left corner; the padding is restored on `.window-header-main` so the
   form-header content keeps its breathing room. */
.window-header-with-nav {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    padding: 0 !important;
}

.window-header-with-nav .window-header-main {
    flex: 1 1 auto;
    min-width: 0;
    padding: 10px 10px;
}

/* Wrapper around the embedded XAF view (rendered via ViewSiteComponent). It just needs to grow
   so that the toolbar + close button siblings inside `.form-header` are pushed to the right.
   The inner XAF DxFormLayout handles its own column/row structure.
   Horizontal padding adds breathing room on both sides: from the ImageHeader on the left and
   from the toolbar/close-button on the right. */
.popup-header-detail-view {
    flex: 1 1 auto;
    min-width: 0;
    /* Left-align the header (avatar/identity) with the content's group headers below it. */
    padding-left: 1px;
    padding-right: 20px;
}

/* Uppercase ALL property captions inside the embedded header view only — does not affect any
   other DxFormLayout in the app. Targets both the modern and legacy DX caption class names so
   the rule is resilient to version differences. */
    .popup-header-detail-view .dxbl-fl-cell-caption,
    .popup-header-detail-view .dxbl-fl-cell-caption-container,
    .popup-header-detail-view .dxbl-fl-cell-label,
    .popup-header-detail-view label.dxbl-text {
        font-size: 10.5px;
        text-transform: uppercase;
        letter-spacing: .6px;
        font-weight: 600;
        color: #8b95a8;
        /*letter-spacing: 1px;*/
    }
.contact-symbols-header {
    color: #8b95a8;
}
/* Body becomes a flex column so the inner host (the `.main` div with `.entirety-popup-nav-host`)
   can claim 100% of the body's height via `flex: 1 1 auto`. */
.entirety-popup-body-with-nav {
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    min-height: 0;
    border-top-left-radius: 0 !important;
}

/* The host is the `.main` div inside the body. It holds [rail] + [main-content] in a horizontal
   flex layout. `flex: 1 1 auto` makes it stretch to the body's full height (top-to-bottom of the
   body area). `align-items: stretch` (default) makes both children fill that height. */
.entirety-popup-nav-host {
    display: flex !important;
    flex-direction: row !important;
    flex: 1 1 auto !important;
    min-height: 0;
    align-items: stretch;
}

.entirety-popup-nav-host .main-content {
    flex: 1 1 auto;
    min-width: 0;
    overflow-y: auto;
    /*padding: 8px 12px 8px 16px;*/
    margin-bottom: 10px;
}

/* Hide the OUTER TabbedGroup tab strip when the rail is enabled — the rail drives it.
   Nested TabbedGroups (inside a tab page's content) keep their own visible tab strip so users
   can navigate within the active outer tab. */
.entirety-popup-nav-host .dxbl-tabs-tablist {
    display: none !important;
}

.entirety-popup-nav-host .dxbl-tabs-content-panel .dxbl-tabs-tablist {
    display: flex !important;
}

.entirety-popup-nav-host .dxbl-tabs-content-panel {
    padding-top: 0 !important;
}

/* ===== Rail ===== */

/* Left column inside the body: ImageHeader on top, nav rail directly below — both share this
   container so they read as one continuous vertical column.
   Background matches the rail's `rgb(62, 62, 62)` so the area exposed by the image-header's
   rounded bottom-right corner reveals dark grey (continuing the rail's colour) instead of the
   body's light-grey background showing through as a white patch. */
.popup-nav-column {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    min-height: 0;
    background: rgb(62, 62, 62);
}


/* Right column inside the body: form-header (caption + toolbar + close button + stepper) on top,
   ViewSite below. Together with .popup-nav-column this creates the true vertical-split layout
   where each column spans the full popup height. */
.popup-main-area {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
}

.popup-main-area > .window-header {
    flex: 0 0 auto;
}

.popup-main-area > .main-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.entirety-popup-nav {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    background: rgb(62, 62, 62);
    padding: 8px 0;
}

.entirety-popup-nav-accordion {
    background: transparent;
}

/* Suppress DX's selected-item background — selection is conveyed by foreground tint only. */
.entirety-popup-nav .dxbl-accordion-item-selected,
.entirety-popup-nav .dxbl-accordion-item-selected > *,
.entirety-popup-nav .dxbl-active,
.entirety-popup-nav .dxbl-active > * {
    background-color: transparent !important;
}

.entirety-popup-nav .dxbl-accordion-item,
.entirety-popup-nav-item {
    cursor: pointer !important;
}

.entirety-popup-nav-item {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 6px 10px;
    line-height: 1.3;
    /* Inset + rounded so the selected state reads as a pill (no layout shift on select). */
    margin: 1px 6px;
    border-radius: 8px;
    transition: background-color .12s ease;
}

/* Selected item: a pill in a lighter shade of the rail background (rgb(62,62,62)).
   Specificity raised above the DX selected-background suppression rule above. */
.entirety-popup-nav .dxbl-accordion-item-selected .entirety-popup-nav-item--selected,
.entirety-popup-nav .dxbl-accordion-item-selected.entirety-popup-nav-item--selected,
.entirety-popup-nav .entirety-popup-nav-item--selected {
    background-color: rgb(88, 88, 88) !important;
}

/* Icon rendered as a CSS mask of the source SVG so its colour is `background-color: currentColor`.
   This guarantees the icon and the description always share the exact same colour value
   (inherited from the wrapper's inline `color`). */
.entirety-popup-nav-item__icon {
    width: 18px;
    height: 18px;
    display: inline-block;
    flex-shrink: 0;
    margin-top: 2px;
    background-color: currentColor;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

.entirety-popup-nav-item__icon--placeholder {
    visibility: hidden;
    background-color: transparent;
}

.entirety-popup-nav-item__text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1;
}

/* Caption: normal weight when not selected; bold + white (inline) when selected. */
.entirety-popup-nav-item__caption {
    font-weight: 400;
    font-size: 13.5px;
    color: rgb(203, 210, 223);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.entirety-popup-nav-item--selected .entirety-popup-nav-item__caption {
    font-weight: 700;
}

/* Description colour is set inline per item to match the icon colour; we only style typography. */
.entirety-popup-nav-item__description {
    font-size: 11.5px;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Count badge on the right of a rail item (BadgeExpression result). */
.entirety-popup-nav-item__badge {
    align-self: center;
    margin-left: auto;
    flex-shrink: 0;
    min-width: 20px;
    height: 18px;
    padding: 0 6px;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.16);
    color: #e5e7eb;
    font-size: 11px;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
}

.entirety-popup-nav-item--selected .entirety-popup-nav-item__badge,
.entirety-popup-nav-item__badge--selected {
    background: #4147d5;
    color: #ffffff;
}

/* ===== Nested (drill-down) rail items ===== */

/* Child items sit indented under their parent. Overrides the base `margin: 1px 6px` left value. */
.entirety-popup-nav-item--child {
    margin-left: 24px;
}

/* Hide a collapsed child's whole accordion row (the marker class is on the item template root). */
.entirety-popup-nav .dxbl-accordion-item:has(.entirety-popup-nav-row-hidden) {
    display: none !important;
}

/* Expand/collapse caret on a parent item: a right-pointing triangle that rotates down when open. */
.entirety-popup-nav-chevron {
    align-self: center;
    margin-left: 8px;
    flex-shrink: 0;
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 5px solid currentColor;
    opacity: .75;
    cursor: pointer;
    transition: transform .15s ease;
}

.entirety-popup-nav-chevron--expanded {
    transform: rotate(90deg);
}