/* ============================================================
   RIGHT RAIL — (Inset Panel + Sticky Header/Actions + Internal Scroll)
   ============================================================ */


/* One place to tune the right rail toolbar height */
:root {
    --rr-toolbar-h: 0px;
    --rr-actions-height: 65px;
    --rr-pad-left: 24px;
    --rr-pad-right: 8px;
}


/* ============================================================
   RR STATE VISIBILITY — (No flash, generic)
   - Hide all state panels until JS applies a state and marks the root ready.
   ============================================================ */

/* Prevent the rail from appearing until the RR root is ready */
body.show-rail .right-rail:not(.rr-ready) {
    opacity: 0;
    pointer-events: none;
    transform: translateX(20px);
}

/* Shell panel (master provides #RightRail + #RightRailContent) */
.right-rail {
    grid-column-start: 4;
    position: sticky;
    /* Inset panel (aligns with main-content/left-rail vertical rhythm) */
    top: var(--page-vertical-gap);
    margin-top: var(--page-vertical-gap);
    margin-bottom: var(--page-vertical-gap);
    width: var(--rail-width);
    min-width: var(--rail-width);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-1);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    overflow: hidden;
    /* ✅ Hug content (do not stretch to full grid row height) */
    align-self: start;
    height: auto;
    /* Cap height to the same viewport model as main-content */
    max-height: calc(100vh - var(--header-footer-total) - (var(--page-vertical-gap) * 2));
    /* iOS: 100vh is the viewport with the browser toolbars hidden, so on a phone the rail ran below the visible area and its Edit button
       was unreachable (found 2026-10-16). 100dvh is the visible one; a browser without dvh keeps the line above. */
    max-height: calc(100dvh - var(--header-footer-total) - (var(--page-vertical-gap) * 2));
    /* Fade behavior (default hidden unless body.show-rail) */
    opacity: 0;
    pointer-events: none;
    transform: translateX(20px);
    transition: opacity var(--rails-collapse-expand-time) ease, transform var(--rails-collapse-expand-time) ease;
}

/* When rail is shown */
body.show-rail .right-rail {
    pointer-events: auto;
    visibility: visible;
    opacity: 1;
    transform: translateX(0);
    /* subtle inner-edge alignment cue when rail is visible */
    border-left-color: color-mix(in srgb, var(--border) 65%, var(--brand-primary));
}

/* When rail is hidden */
body.close-rail .right-rail {
    pointer-events: none;
    opacity: 0;
    transform: translateX(20px);
    visibility: hidden;
}

/* Disabled (page doesn’t use rail) */
body.rr-disabled .right-rail {
    display: none;
}


/* ------------------------------------------------------------
   Content region (scroll owner + padding)
   ------------------------------------------------------------ */
#RightRailContent {
    /* Scroll authority lives here */
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    flex: 1;
    /* ✅ Match card cadence (24px) and give bottom breathing room */
    padding: 0 var(--rr-pad-right) 0 var(--rr-pad-left);
    box-sizing: border-box;
    /* Allow sticky header/actions to behave predictably */
    display: flex;
    flex-direction: column;
    scrollbar-gutter: stable;
}

/* Keep header/action separators spanning full width while content is padded */
.right-rail #RightRailContent .right-rail-header,
.right-rail #RightRailContent .right-rail-actions {
    margin-left: -24px;
    margin-right: -24px;
    padding-left: 24px;
    padding-right: 24px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

/* ------------------------------------------------------------
   Header (sticky inside RightRailContent)
   ------------------------------------------------------------ */

.right-rail-header {
    /* ✅ Cadence: more breathing room at top */
    padding-top: 16px; /* Was 24px check Edit */
    padding-bottom: 16px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: sticky;
    top: var(--rr-toolbar-h);
    z-index: 2;
}

/* Tabs */
.rr-tabs {
    border-bottom: var(--grid-border-color);
    border-bottom-style: solid;
    border-bottom-width: 1px;
    display: flex;
    align-items: center;
    flex-wrap: nowrap; /* keep a single row */
    gap: 16px; /* gap between buttons */
    padding: 16px 0;
    margin-left: -24px;
    margin-right: -24px;
    padding-left: 24px;
    padding-right: 24px;
    background: var(--surface);
    border-bottom: 1px solid var(--border); /* hairline divider*/
}

/* Space between header divider and the first field group */
#RightRailContent .right-rail-header + .rr-field {
    margin-top: 16px;
}


/* Right rail checkboxes (the Request panel: Not our vehicle, Mark resolved; the Edit users feature tree). This was a bare input[type="checkbox"] rule and, because Site.master
   loads this file on every page, it restyled EVERY checkbox in the app: grid selects, the request cards' tick cell, pickers, plain labels (checkbox-leaks_handoff.md).
   Now scoped to the rail's content. :where() adds no specificity, so the cascade inside the rail is exactly what the bare rule had (0,1,1): the rail's own refinements
   (cbs.css .rr-ntv-check, the Edit users tree) still win as before. The hidden .switch / .toggle inputs in the rail are unaffected (their rules are more specific). */
:where(#RightRailContent) input[type="checkbox"] {
    vertical-align: middle;
    position: relative;
    transform: translateY(-2px);
    width: 16px;
    height: 16px;
    margin: 6px 2px 6px 2px;
    padding: 2px 0 2px 0;
    accent-color: var(--brand-primary);
}

/* =========================================================
   Right Rail — Primary buttons (rail-scoped variant)
   Keeps global semantics (.btn.btn-primary), reduces visual dominance in RR
   ========================================================= */

.right-rail .btn.btn-primary,
.right-rail .btn.btn-secondary {
    width: 100%;
    height: 32px; /* slightly smaller than typical page CTAs */
    padding: 0 14px;
    font-size: 14px; /* keep readable; drop to 13px if you want denser */
    font-weight: 700;
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(var(--shadow-rgb-neutral), 0.10);
}

    /* Hover stays subtle (no big lifts in a narrow rail) */
    .right-rail .btn.btn-primary:hover:not(:where(:disabled, [disabled], [aria-disabled="true"])),
    .right-rail .btn.btn-secondary:hover:not(:where(:disabled, [disabled], [aria-disabled="true"])) {
        transform: translateY(-1px);
    }

.rr-tab btn btn-secondary icon-btn {
    padding: 0 11px;
}

/* Title block */
.rr-title-block {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0; /* critical for ellipsis */
}

.rr-title {
    font-size: 1.2rem;
    font-weight: 700;
    font-family: var(--ui-font);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rr-subtitle,
.rr-baid {
    font-size: .85rem;
    color: var(--muted);
}

/* Close button */
.right-rail-close .icon {
    width: 18px;
    height: 18px;
    display: block;
}

.right-rail-close {
    background: none;
    border: none;
    font-size: 22px;
    cursor: pointer;
    opacity: .6;
    transition: opacity .25s ease;
}

    .right-rail-close:hover {
        opacity: 1;
    }

/* ------------------------------------------------------------
   Field cadence
   ------------------------------------------------------------ */
.rr-field {
    margin-bottom: 14px; /* matches .form-row rhythm */
}

    .rr-field label {
        display: block;
        font-size: 14px;
        font-weight: 600;
        margin-bottom: 4px;
    }

/* ------------------------------------------------------------
   Actions (sticky at bottom inside RightRailContent)
   ------------------------------------------------------------ */
.right-rail-actions {
    position: sticky;
    bottom: 0;
    z-index: 3;
    /* TL-40: min-height, not height. The number of visible buttons changes with MODE - Save is
       display:none in view mode while Edit/Add/Cancel show - so a fixed 65px can only ever be
       right for one mode, and in the others the buttons overflowed a box that could not grow and
       were clipped at the rail's bottom edge. */
    min-height: var(--rr-actions-height);
    /* ✅ Cadence: feels like a footer */
    padding-top: 16px;
    padding-bottom: 15px;
    border-top: 1px solid var(--border);
    background: var(--surface);
    box-shadow: 0 -6px 10px rgba(var(--shadow-rgb), 0.04);
}


    /* =========================================================
   RR Actions — Inline variant (Save/Cancel side-by-side)
   Apply by adding class: .rr-actions-inline
   ========================================================= */
    .right-rail-actions.rr-actions-inline {
        display: flex;
        gap: 10px;
        align-items: center;
    }

        /* In inline mode, buttons share the row instead of stacking */
        .right-rail-actions.rr-actions-inline .btn {
            flex: 1 1 0;
            width: auto;
            min-width: 0;
        }

            /* Override rail-wide full-width primary in this specific inline layout */
            .right-rail-actions.rr-actions-inline .btn.btn-primary {
                width: auto;
            }


/* Right rail inputs: match app input style but keep compact */
#RightRailContent input[type="text"],
#RightRailContent input[type="email"],
#RightRailContent input[type="tel"],
#RightRailContent select,
#RightRailContent textarea {
    width: 100%;
    box-sizing: border-box;
    /* compact sizing */
    min-height: 20px;
    padding: 4px 5px;
    /* match app style */
    font-size: 13px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--ink);
}

#RR_Features {
    font-size: 13px;
}

/* textarea: allow more height + resize */
#RightRailContent textarea {
    min-height: 50px;
    resize: vertical;
    padding-top: 10px;
    padding-bottom: 10px;
}

    /* disabled: keep readable but clearly non-editable */
    #RightRailContent input:disabled,
    #RightRailContent select:disabled,
    #RightRailContent textarea:disabled {
        opacity: 0.55;
        cursor: not-allowed;
        transform: none !important;
        filter: none; /* cancels any hover brightness */
        pointer-events: none;
    }

/* ============================================================
   TWO-COLUMN LAYOUT (main + right rail)
   ============================================================ */

.layout-two-column {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--rail-width, 360px);
    gap: 24px;
}

body.close-rail .layout-two-column {
    grid-template-columns: 1fr;
}

body.hide-rail .layout-two-column {
    grid-template-columns: 1fr;
}
/* ============================================================
   ANIMATIONS
   ============================================================ */
/* Flash animation */
.rr-flash {
    animation: rrFlash 0.6s ease-out;
}

@keyframes rrFlash {
    0% {
        background-color: var(--rail-flash);
    }

    100% {
        background-color: transparent;
    }
}


/* RR: add breathing room between the header bar and the first component

   CBS-70: padding-bottom added for the other end of the same problem - on a tall viewport the last
   notification, or the pager when there is one, sat flush against the bottom of the rail.

   IT IS PADDING ON THE CONTAINER, NOT A MARGIN ON THE LAST CARD, deliberately. A margin on
   .mt-notif-card:last-child disappears when the list is empty (the empty-state panel is not a card)
   and lands in the wrong place when the pager is rendered, because the pager is the last child, not
   a card. Padding on .mt-notif holds in all three cases: three cards, four cards plus a pager, and
   "No notifications."

   IT IS SCOPED TO THE RAIL, matching the margin-top above, because .mt-notif in
   App_Themes/controls/controls.css is documented as a neutral default that must stay safe outside
   the rail as well. 12px is not arbitrary - it is the same value as the margin-top here and the same
   as the card-to-card gap, so the list reads as evenly inset top and bottom. */
.right-rail #RightRailContent .rr-state[data-rr-state="notifications"] .mt-notif {
    margin-top: 12px;
    padding-bottom: 12px;
}

/* =========================================================
   Notifications pager — sticky + full-bleed inside Right Rail
   ========================================================= */

/* Make ONLY the pager sticky/full-bleed when notifications sit in the rail */
/* I could not get this to span the entire rr so I gave up for now, but here’s the intended style if you want to try again:
        .right-rail #RightRailContent .mt-notif-pager {
        position: sticky;
        bottom: 0;
        z-index: 3;*/
/* Full-bleed across the padded scroll container */
/*margin-left: calc(-1 * var(--rr-pad-left));
        margin-right: calc(-1 * var(--rr-pad-right));
        padding-left: var(--rr-pad-left);
        padding-right: var(--rr-pad-right);*/
/* Ensure the sticky row actually stretches */
/*width: auto;
        align-self: stretch;
        background: var(--surface);
        border-top: 1px solid var(--border);
        box-shadow: 0 -6px 10px rgba(var(--shadow-rgb), 0.04);
        padding-top: 8px;
        padding-bottom: 8px;
    }*/

/* =========================================================
   TL-40 2026-09-19: right-rail section disclosure pills.

   Moved here verbatim from App_Themes/Core/tenants/cbs.css, where every selector
   was prefixed body.cbs-invoices #RightRailContent .rr-state[data-rr-state="details"].
   That sheet is only emitted for CBS tenants (Site.master.cs ApplyTenantStyling),
   so on Commission Plans and Store Groups - which use the same
   button.rr-disclosure.rr-disclosure-pill markup for "Audit Information" - the
   classes matched nothing and the browser's default button showed through.

   Unscoped here, so every page that uses the class gets the same small,
   low-emphasis pill. The declarations are unchanged; only the selector moved.
   ========================================================= */

.rr-disclosure-pill {
    width: 100%;
    display: flex;
    height: 32px;
    padding: 0 12px;
    align-items: center;
    gap: 10px;
    margin: 12px 0;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--surface-subtle);
    color: var(--ink);
    font-weight: 800;
    font-size: 13px;
    cursor: pointer;
}

    .rr-disclosure-pill .icon {
        width: 20px;
        height: 20px;
        flex: 0 0 20px;
    }

.rr-disclosure-label {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rr-disclosure-pill::after {
    content: "\25BC";
    font-size: 11px;
    opacity: 0.65;
    margin-left: auto;
}

.rr-disclosure-pill[aria-expanded="true"] {
    background: color-mix(in srgb, var(--brand-primary) 10%, var(--surface));
    border-color: color-mix(in srgb, var(--brand-primary) 35%, var(--border));
}

    .rr-disclosure-pill[aria-expanded="true"]::after {
        content: "\25B2";
        opacity: 0.8;
    }

.rr-disclosure-pill:hover {
    filter: brightness(1.02);
}

.rr-disclosure-pill:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--brand-primary) 45%, var(--shade-toward));
    outline-offset: 2px;
}

/* TL-40 2026-09-19: rail textareas. Both Commission Plans (the Stores list) and Store
   Groups use a plain textarea in the rail, which advertised a native two-way resize
   grabber that no other panel in the app shows, and took none of the app's input
   styling. Here rather than in a page sheet, because both pages need it and it is a
   rail rule. */
#RightRailContent textarea {
    resize: vertical;
    width: 100%;
    box-sizing: border-box;
    font: inherit;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 8px 10px;
}

/* TL-44 2026-09-19: rail field VALUES truncate instead of spilling.

   .rr-value had no styling at all - it is used only by Commission Plans and Store
   Groups - so a long "Last Modified" ran straight out of its field. The values here
   are audit information that matters occasionally, so a single line with an ellipsis
   and a tooltip is the right trade rather than wrapping and pushing the panel about.
   The full value comes back on hover: the setters write the text into title, and
   Site.master's tooltip engine turns that into the app's styled tooltip.

   CBS Invoices does not share this defect - its rail values use word-break:
   break-word (tenants/cbs.css) and wrap rather than spill. */
#RightRailContent .rr-value {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================================
   VALIDITY ON RAIL FIELDS — VAL-15 (a2/a3)
   ============================================================

   The rail styles its own inputs (#RightRailContent input[type="text"] above): compact, 13px,
   4px padding. The app-wide ".input" class is 44px tall with 10px padding, so BORROWING IT FOR A
   RAIL FIELD MAKES THAT FIELD TALLER THAN ITS NEIGHBOURS — the ID selector above wins on
   font-size and padding, but ".input" also sets `height`, which nothing here overrides.

   VAL-10 gave RR_BAID class="input" to get the standard green and red. That worked for the colour
   and left the field 44px tall beside ~28px neighbours. The right fix is the rail having its own
   validity colours, at the rail's own specificity, so no rail field ever needs ".input".

   Colour only. Size, padding and rhythm belong to the rules above, and a field must not move when
   its validity changes (that was the other half of VAL-10). */

#RightRailContent input.field-error,
#RightRailContent select.field-error,
#RightRailContent textarea.field-error {
    border-color: var(--danger);
    background-color: var(--surface-danger);
    color: var(--danger);
}

#RightRailContent input.is-valid,
#RightRailContent select.is-valid,
#RightRailContent textarea.is-valid {
    border-color: var(--success);
    background-color: var(--surface-success);
}

/* Defensive: if a rail field is ever given ".input" again, do not let it grow. */
#RightRailContent input.input,
#RightRailContent select.input,
#RightRailContent textarea.input {
    height: auto;
}

/* The message under a rail field. .field-error-msg (theme.css) supplies the colour and size;
   this only tightens the spacing to the rail's rhythm. An empty message must take no room —
   it is always in the DOM and usually blank. */
#RightRailContent .field-error-msg {
    margin-top: 4px;
    margin-bottom: 0;
}

    #RightRailContent .field-error-msg:empty {
        display: none;
    }

/* VAL-18: the note above the Features picker that says why a CBS role is locked (Settings/UserMgmt/Edit.aspx,
   MT_CbsRuleNote). Microtext, in the app's muted colour; it has no inline style so a theme can restyle it. */

#RightRailContent .rr-rule-note {
    font-size: 12px;
    line-height: 1.4;
    color: var(--muted);
    margin: 4px 0 6px;
}

    #RightRailContent .rr-rule-note:empty {
        display: none;
    }

/* =========================================================
   RIGHT RAIL AS A PHONE OVERLAY (2026-10-16, overlays lane)

   WHAT THE DEVELOPER SAW (iPhone, Chrome and Safari, toolbars showing): on Edit users the rail ran below the visible screen and its Edit button could
   not be tapped, even after dragging the page.
   THE CAUSES, all measured in the static mock with iOS' two viewports (100vh = 844, 100dvh = 664):
     1. The rail's own cap was calc(100vh - ...) (above). On iOS 100vh is the viewport with the toolbars hidden, so the rail was 747px tall in a
        664px window and .layout-body (overflow: hidden) cut off its bottom, with the pinned Edit/Save footer inside the cut. Nothing scrolls the
        shell, so the button was out of reach.
     2. Under 1101 the rail was still a 280px GRID COLUMN (layout.css), squeezing the page to 78px of a 390px phone, and a rail docked in a
        column has no way to be taller than the grid row.
   WHAT THIS DOES, under 641 wide or on a short landscape phone (900 wide and 500 tall, the same query CBS Invoices' overlay uses; its own rules in
   tenants/cbs.css apply to body.cbs-invoices.cbs-rail-strip and this block leaves that page alone). Wider windows are untouched.
   The rail is a panel fixed to the right edge of the VISIBLE viewport (top and bottom 0, so no vh or dvh height can overshoot), 92vw up to 360px;
   #RightRailContent is its single scroller; the title row sticks at the top and .right-rail-actions is pinned at the bottom (padding for the home
   indicator), so the primary action is always reachable without dragging the page. z-index 1100: above the app bar (1000, which holds the bell
   panel and the account menu) and the footer (900), below the left drawer (1160), dialogs (2000) and toasts. The scrim behind it, the one-overlay-
   at-a-time rule and Escape live in MT.Overlays (site.core.js) and components.css (OVERLAYS).
   ========================================================= */
@media (max-width: 640px), (max-width: 900px) and (max-height: 500px) {

    body.rr-enabled:not(.cbs-rail-strip) .right-rail {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: auto;
        grid-column: auto;
        width: min(92vw, 360px);
        min-width: 0;
        height: auto;
        max-height: none;
        margin: 0;
        align-self: auto;
        border-radius: var(--radius) 0 0 var(--radius);
        z-index: 1100;
        /* off the right edge while closed, so opening and closing is a slide (MT_CloseRightRail waits for this transform's transitionend) */
        transform: translateX(100%);
    }

    body.rr-enabled.show-rail:not(.cbs-rail-strip) .right-rail {
        transform: translateX(0);
    }

    body.rr-enabled:not(.cbs-rail-strip) #RightRailContent {
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    /* the footer is the bottom of the panel: it stays at the bottom when the form is short, and clears the home indicator */
    body.rr-enabled:not(.cbs-rail-strip) .right-rail-actions {
        margin-top: auto;
        padding-bottom: calc(15px + env(safe-area-inset-bottom, 0px));
    }

    /* 16px text so the phone browser does not zoom on focus, and 40px controls (the small-form density rule) */
    body.rr-enabled:not(.cbs-rail-strip) #RightRailContent input[type="text"],
    body.rr-enabled:not(.cbs-rail-strip) #RightRailContent input[type="email"],
    body.rr-enabled:not(.cbs-rail-strip) #RightRailContent input[type="tel"],
    body.rr-enabled:not(.cbs-rail-strip) #RightRailContent select,
    body.rr-enabled:not(.cbs-rail-strip) #RightRailContent textarea {
        font-size: 16px;
    }

    body.rr-enabled:not(.cbs-rail-strip) #RightRailContent input[type="text"],
    body.rr-enabled:not(.cbs-rail-strip) #RightRailContent input[type="email"],
    body.rr-enabled:not(.cbs-rail-strip) #RightRailContent input[type="tel"],
    body.rr-enabled:not(.cbs-rail-strip) #RightRailContent select {
        min-height: 40px;
    }

    body.rr-enabled:not(.cbs-rail-strip) .right-rail .btn.btn-primary,
    body.rr-enabled:not(.cbs-rail-strip) .right-rail .btn.btn-secondary {
        height: 40px;
    }

    body.rr-enabled:not(.cbs-rail-strip) .right-rail-close {
        min-width: 40px;
        min-height: 40px;
    }

    /* the shared tooltip engine never hides after a tap on touch and would sit over the panel */
    body.rr-enabled.show-rail:not(.cbs-rail-strip) #app-tooltip {
        display: none;
    }
}

@media ((max-width: 640px), (max-width: 900px) and (max-height: 500px)) and (prefers-reduced-motion: reduce) {
    body.rr-enabled:not(.cbs-rail-strip) .right-rail,
    body.rr-enabled.show-rail:not(.cbs-rail-strip) .right-rail {
        transform: none;
    }
}