/* =========================================================
   MTConfirm (the shared confirmation dialog)
   Built on the standard .modal / .modal-content.modal-fit chrome (components.css):
   X, border token, sentence-case title, auto-width actions. Only what .modal does
   not already give is here. UI_STANDARDS.md 4.6 (U1 D04).
   ========================================================= */

/* Above the right rails and other dialogs it opens over, below the toasts (9999). */
.modal.mt-confirm {
    z-index: 2400;
}

.mt-confirm__message {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.45;
    color: var(--ink);
    overflow-wrap: anywhere;
}

/* =========================================================
   Fade Panel (Reusable, opt-in)
   - Apply class "mt-fade-panel" to any UpdatePanel/container
   - Site.master PRM hook toggles .is-fading during async postbacks
   ========================================================= */

.mt-fade-panel {
    transition: opacity 180ms ease;
    will-change: opacity;
}

    .mt-fade-panel.is-fading {
        opacity: 0.25;
    }

/* =========================================================
   CORE TREEVIEW ADAPTER (structural, neutral, legacy‑safe)
   ========================================================= */

div.AspNet-TreeView {
    margin: 0;
    padding: 0;
}

    div.AspNet-TreeView ul {
        list-style: none;
        margin: 1px;
        padding: 0;
        white-space: nowrap;
    }

.AspNet-TreeView-Show {
}

.AspNet-TreeView-Hide {
    display: none;
}

div.AspNet-TreeView ul li {
    white-space: nowrap;
    padding: 2px 0 1px 2px;
}

div.AspNet-TreeView ul ul {
    white-space: nowrap;
    padding: 1px 0 1px 16px;
}

div.AspNet-TreeView .AspNet-TreeView-ClickableNonLink {
    cursor: pointer;
}

div.AspNet-TreeView .AspNet-TreeView-NonLink {
    cursor: default;
}

/* =========================================================
   BASE NORMALIZATION FOR ALL TREE TYPES (neutral)
   ========================================================= */

/* Remove bullets for all TreeViews */
.MenuLeftTree ul,
.MenuLeftTree li,
.StorePickerTree ul,
.StorePickerTree li,
.FeaturePickerTree ul,
.FeaturePickerTree li {
    list-style: none !important;
    margin: 0;
    padding: 0;
}

/* Fallback link styling (left‑nav overrides later) */
.MenuLeftTree a,
.StorePickerTree a,
.FeaturePickerTree a {
    color: var(--ink);
    text-decoration: none;
    font-size: 14px;
}


/* =========================================================
   LEFT NAV (TreeView) — token-driven, business-product friendly
   Robust to: .left-nav .AspNet-TreeView OR .MenuLeftTree.AspNet-TreeView
   ========================================================= */

/* Normalize link decoration & visited color */
.left-nav .AspNet-TreeView a,
.left-nav .AspNet-TreeView a:visited,
.MenuLeftTree.AspNet-TreeView a,
.MenuLeftTree.AspNet-TreeView a:visited {
    text-decoration: none;
    color: var(--ink);
    font-size: 14px;
}

/* Base chip for both links and clickable parents */
.left-nav .AspNet-TreeView li > a,
.left-nav .AspNet-TreeView li > .AspNet-TreeView-ClickableNonLink,
.MenuLeftTree.AspNet-TreeView li > a,
.MenuLeftTree.AspNet-TreeView li > .AspNet-TreeView-ClickableNonLink {
    display: block;
    padding: 4px 8px;
    border-radius: 6px;
    /* Better truncation behavior than forcing nowrap on <li> */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    /* Hover chip */
    .left-nav .AspNet-TreeView li > a:hover,
    .left-nav .AspNet-TreeView li > .AspNet-TreeView-ClickableNonLink:hover,
    .MenuLeftTree.AspNet-TreeView li > a:hover,
    .MenuLeftTree.AspNet-TreeView li > .AspNet-TreeView-ClickableNonLink:hover {
        background: var(--menu-hover-bg);
        color: var(--ink);
    }

    /* Keyboard focus (accessible + consistent with input focus language) */
    .left-nav .AspNet-TreeView li > a:focus-visible,
    .left-nav .AspNet-TreeView li > .AspNet-TreeView-ClickableNonLink:focus-visible,
    .MenuLeftTree.AspNet-TreeView li > a:focus-visible,
    .MenuLeftTree.AspNet-TreeView li > .AspNet-TreeView-ClickableNonLink:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px var(--focus-halo-brand);
        background: var(--menu-hover-bg);
    }

/* Hierarchy container */
.left-nav .AspNet-TreeView ul,
.MenuLeftTree.AspNet-TreeView ul {
    list-style: none;
    margin: 0;
    padding-left: 0;
}

/* Rows */
.left-nav .AspNet-TreeView li,
.MenuLeftTree.AspNet-TreeView li {
    line-height: 1.35;
    padding: 2px 0;
}

/* Indent children */
.left-nav .AspNet-TreeView ul ul,
.MenuLeftTree.AspNet-TreeView ul ul {
    padding-left: 20px !important;
}

/* TL-140/TL-138: TOP LEVEL EMPHASIS. THIS USED TO APPLY TO CBS INVOICES AND NOTHING ELSE, AND THE
   REASON IS THAT MOST ROOTS ARE NOT ANCHORS.

   The selector only matched `> a`. TL-138 gives a node with children and no Url of its own
   SelectAction.Expand, and the CSSFriendly adapter renders that as a SPAN
   (.AspNet-TreeView-ClickableNonLink), not an anchor. CBS Invoices is the single root that carries
   a real Url, so it was the only one still rendered as an anchor - hence the one node in bold.

   Adding the two non-link spans fixes it for every root. A node with no children and no Url
   renders as .AspNet-TreeView-NonLink, which is included so a trimmed role cannot produce an
   unemphasised root either.

   The same shape is why the icon colour needed a (0,1,1) selector in layout.css: assuming the
   markup is an <a> is the recurring mistake with this adapter. */
.left-nav .AspNet-TreeView > ul > li > a,
.left-nav .AspNet-TreeView > ul > li > .AspNet-TreeView-ClickableNonLink,
.left-nav .AspNet-TreeView > ul > li > .AspNet-TreeView-NonLink,
.MenuLeftTree.AspNet-TreeView > ul > li > a,
.MenuLeftTree.AspNet-TreeView > ul > li > .AspNet-TreeView-ClickableNonLink,
.MenuLeftTree.AspNet-TreeView > ul > li > .AspNet-TreeView-NonLink {
    font-weight: 600;
}

/* Children: slightly smaller */
.left-nav .AspNet-TreeView ul ul li > a,
.MenuLeftTree.AspNet-TreeView ul ul li > a {
    font-size: 13px;
}

/* Selected node (token-driven) */
.left-nav .AspNet-TreeView .AspNet-TreeView-Selected > a,
.left-nav .AspNet-TreeView .AspNet-TreeView-Selected > .AspNet-TreeView-ClickableNonLink,
.MenuLeftTree.AspNet-TreeView .AspNet-TreeView-Selected > a,
.MenuLeftTree.AspNet-TreeView .AspNet-TreeView-Selected > .AspNet-TreeView-ClickableNonLink {
    background: color-mix(in srgb, var(--brand-primary) 12%, var(--bg));
    color: var(--ink);
    font-weight: 700;
}


/* Expand/collapse controls: larger + attached, WITHOUT breaking TreeView flow */
.left-nav .AspNet-TreeView .AspNet-TreeView-Expand,
.left-nav .AspNet-TreeView .AspNet-TreeView-Collapse,
.MenuLeftTree.AspNet-TreeView .AspNet-TreeView-Expand,
.MenuLeftTree.AspNet-TreeView .AspNet-TreeView-Collapse {
    float: left; /* ✅ critical: keeps label on same line */
    width: 18px;
    height: 18px;
    line-height: 18px;
    margin: 3px -7px 0 0; /* tight gap to label, slight vertical alignment */

    display: block;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    opacity: 0.9;
    color: var(--muted);
    user-select: none;
}

/* TL-140: THE TOP-LEVEL CARET IS HIDDEN, AND ONLY THE TOP-LEVEL ONE. Every root now has an icon,
   and a caret beside it is two affordances for the same thing. LEVEL TWO AND BELOW KEEP THEIRS
   UNCHANGED - they have no icons, so the caret is the only thing that says a branch is there.

   THE SELECTOR IS WHAT LIMITS IT: `> ul > li >` reaches only a caret that is a DIRECT child of a
   root li. A nested li's caret is deeper and is never matched, so the rule above still governs it.
   Both `> ul` and `> div > ul` are covered because the adapter emits either depending on the node.
   Specificity is (0,3,2) against the base rule's (0,3,0), so this wins for roots without touching
   anything else.

   HIDDEN, NOT REMOVED FROM THE DOM, AND THAT IS DELIBERATE - these spans still do work even at root
   level: the adapter's own onclick lives on them, the TL-115 search opens a branch by swapping
   AspNet-TreeView-Expand for AspNet-TreeView-Collapse on exactly these elements, and TL-141's
   collapsed-rail peek uses the same MT_NavTree.openBranch helper. Removing them server-side would
   break both; display: none keeps the state machine intact and only takes the glyph off screen.

   SAFE BECAUSE NO ROOT NEEDS ITS CARET TO EXPAND: a walk of all 168 sitemap nodes found none that
   both carries a Url and has children, so every expandable root is URL-less and expands by clicking
   its label (TL-138). If a root with both is ever added, its children would be stranded - that is
   the condition to re-test.

   Left nav only. The store-picker trees use the same adapter classes and keep every caret. */
.left-nav .AspNet-TreeView > ul > li > .AspNet-TreeView-Expand,
.left-nav .AspNet-TreeView > ul > li > .AspNet-TreeView-Collapse,
.left-nav .AspNet-TreeView > div > ul > li > .AspNet-TreeView-Expand,
.left-nav .AspNet-TreeView > div > ul > li > .AspNet-TreeView-Collapse,
.MenuLeftTree.AspNet-TreeView > ul > li > .AspNet-TreeView-Expand,
.MenuLeftTree.AspNet-TreeView > ul > li > .AspNet-TreeView-Collapse,
.MenuLeftTree.AspNet-TreeView > div > ul > li > .AspNet-TreeView-Expand,
.MenuLeftTree.AspNet-TreeView > div > ul > li > .AspNet-TreeView-Collapse {
    display: none;
}

    /* Optional: slightly stronger on hover */
    .left-nav .AspNet-TreeView .AspNet-TreeView-Expand:hover,
    .left-nav .AspNet-TreeView .AspNet-TreeView-Collapse:hover,
    .MenuLeftTree.AspNet-TreeView .AspNet-TreeView-Expand:hover,
    .MenuLeftTree.AspNet-TreeView .AspNet-TreeView-Collapse:hover {
        color: var(--ink);
    }


/* =========================================================
   PICKERS — legacy-safe, but now separated cleanly
   ========================================================= */

/* -----------------------------------------
   FEATURE PICKER (neutral, non-branded)
   ----------------------------------------- */

/* Leaf indent (FeaturePicker only) */
.FeaturePickerTree div.AspNet-TreeView li.AspNet-TreeView-Leaf {
    padding-left: 20px;
}

/* Link decoration (FeaturePicker only) */
.FeaturePickerTree div.AspNet-TreeView li a {
    text-decoration: none;
}

.FeaturePickerTree div.AspNet-TreeView .AspNet-TreeView-ClickableNonLink:hover {
    text-decoration: none;
}

/* Image alignment (FeaturePicker only; StorePicker has its own rules) */
.FeaturePickerTree img {
    display: inline-block;
    vertical-align: middle;
    max-height: 16px;
}

/* -----------------------------------------
   LEFT NAV (minor tweak preserved)
   ----------------------------------------- */

.left-nav .AspNet-TreeView {
    font-size: 14px;
}

/* =========================================================
   TREEVIEW CHEVRONS — modern SVG masks
   ========================================================= */

/* Base icon box */
div.AspNet-TreeView .AspNet-TreeView-Expand,
div.AspNet-TreeView .AspNet-TreeView-Collapse {
    width: 20px;
    height: 20px;
    float: left;
    cursor: pointer;
    background: none !important;
    position: relative;
}

    /* Chevron mask (color via background-color) */
    div.AspNet-TreeView .AspNet-TreeView-Expand::before,
    div.AspNet-TreeView .AspNet-TreeView-Collapse::before {
        content: "";
        position: absolute;
        inset: 2px;
        display: block;
        background-color: var(--muted);
        -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'><path d='M0 0h24v24H0z' fill='none'/></svg>") center / contain no-repeat;
        mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'><path d='M0 0h24v24H0z' fill='none'/></svg>") center / contain no-repeat;
        transition: background-color .15s ease, transform .15s ease;
    }

    /* Expand: chevron RIGHT */
    div.AspNet-TreeView .AspNet-TreeView-Expand::before {
        -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'><path d='M9 6l6 6-6 6'/></svg>") center / contain no-repeat;
        mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'><path d='M9 6l6 6-6 6'/></svg>") center / contain no-repeat;
    }

    /* Collapse: chevron DOWN */
    div.AspNet-TreeView .AspNet-TreeView-Collapse::before {
        -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'><path d='M6 9l6 6 6-6'/></svg>") center / contain no-repeat;
        mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'><path d='M6 9l6 6 6-6'/></svg>") center / contain no-repeat;
    }

    /* Hover emphasis */
    div.AspNet-TreeView .AspNet-TreeView-Expand:hover::before,
    div.AspNet-TreeView .AspNet-TreeView-Collapse:hover::before {
        background-color: var(--ink);
    }

    /* Keyboard focus ring */
    div.AspNet-TreeView .AspNet-TreeView-Expand:focus,
    div.AspNet-TreeView .AspNet-TreeView-Collapse:focus {
        outline: 2px solid var(--focus-outline-soft);
        outline-offset: 2px;
    }



/* checkbox */
.switch {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 24px;
    margin-right: 8px;
}

    .switch input {
        display: none;
    }

.slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background-color: color-mix(in srgb, var(--muted) 30%, var(--surface));
    transition: .2s;
    border-radius: 24px;
}

    .slider:before {
        position: absolute;
        content: "";
        height: 18px;
        width: 18px;
        left: 3px;
        top: 3px;
        background-color: var(--toggle-knob);
        transition: .2s;
        border-radius: 50%;
    }

.switch input:checked + .slider {
    background-color: var(--brand-primary);
}

    .switch input:checked + .slider:before {
        transform: translateX(22px);
    }

.switch:hover .slider {
    filter: brightness(1.1);
}

.switch input:focus + .slider {
    box-shadow: var(--shadow-3);
}

.switch input:disabled + .slider {
    opacity: 0.5;
    cursor: not-allowed;
    transition: opacity .2s ease;
}

.switch:hover .slider:before {
    transform: scale(1.05);
}

/* =========================================================
   STORE PICKER — brand‑aware, token‑driven
   ========================================================= */

/* Normalize list items */
.StorePickerTree div.AspNet-TreeView ul li {
    vertical-align: middle;
    padding: 2px 0;
}

    /* Icon alignment */
    .StorePickerTree div.AspNet-TreeView ul li img {
        vertical-align: middle;
        margin-top: -2px;
        padding: 0 4px 0 2px;
        width: auto;
        height: 16px; /* parent default */
    }

/* Leaf nodes use smaller icons */
.StorePickerTree div.AspNet-TreeView li.AspNet-TreeView-Leaf img {
    height: 14px;
    color: var(--user-brand-color);
    transition: color .15s ease, opacity .15s ease;
}

/* Brand color for all icons (SVGs must use fill="currentColor") */
.StorePickerTree img {
    color: var(--user-brand-color);
    transition: color .15s ease, opacity .15s ease;
}

/* Hover state */
.StorePickerTree li:hover > a img,
.StorePickerTree li:hover > .AspNet-TreeView-ClickableNonLink img {
    color: var(--user-brand-color-hover);
}

/* Checked state */
.StorePickerTree .AspNet-TreeView-Checked img {
    color: var(--user-brand-color-checked);
}

/* Muted/disabled state */
.StorePickerTree .icon-muted img {
    color: var(--user-brand-color-muted);
    opacity: 0.6;
}

/* Remove bullets */
.StorePickerTree ul,
.StorePickerTree li {
    list-style: none !important;
    margin: 0;
    padding: 0;
}

/* Link styling */
.StorePickerTree a {
    color: var(--ink);
    text-decoration: none;
    font-size: 14px;
}

.StorePickerTree .AspNet-TreeView-ClickableNonLink:hover {
    color: var(--brand-ink);
    font-weight: 600;
}

/* =========================================================
   Segmented Toggle — accessibility helpers
   ========================================================= */

/* Focus ring (keyboard accessibility) */
.segmented-toggle__input:focus-visible + .segmented-toggle__label {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

/*========================================================= 
Segmented Toggle (Radio-based) - slider/thumb style
Reusable control (controls.css)
========================================================= */

.segmented-toggle {
    /* Theming hooks (override in tenant css if needed) */
    --seg-height: 40px;
    --seg-radius: var(--radius);
    --seg-pad: 8px;
    --seg-bg: var(--surface-subtle);
    --seg-border: var(--border);
    --seg-thumb: var(--hover-chip);
    --seg-text: var(--muted);
    --seg-text-active: var(--ink);
    --seg-shadow: var(--shadow-1);
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--seg-count, 3), minmax(0, 1fr));   /* U4: 3 by default; --seg-count (4, 5) via the modifier classes below */
    align-items: stretch;
    height: var(--seg-height);
    padding: var(--seg-pad);
    border: 1px solid var(--seg-border);
    border-radius: var(--seg-radius);
    background: var(--seg-bg);
    /* Prevent accidental text selection while toggling */
    user-select: none;
    -webkit-user-select: none;
    transition: background-color 160ms ease;
    transition: background-color 160ms ease;
}

    .segmented-toggle:hover {
        background: color-mix(in srgb, var(--pill-bg) 80%, var(--icon-accent) 8%);
        color: var(--ink);
        transform: translateY(-1px);
    }

/* Accessible but visually-hidden radios */
.segmented-toggle__input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* Labels act like the interactive buttons */
.segmented-toggle__label {
    position: relative;
    z-index: 2; /* above thumb */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: var(--seg-text);
    border-radius: calc(var(--seg-radius) - var(--seg-pad));
    cursor: pointer;
    /* Align with your button cadence but keep compact */
    line-height: 1;
    padding: 0 10px;
}

/* Thumb (the moving slider) */
.segmented-toggle__thumb {
    position: absolute;
    z-index: 1;
    top: var(--seg-pad);
    left: var(--seg-pad);
    width: calc((100% - (2 * var(--seg-pad))) / var(--seg-count, 3));
    height: calc(100% - (2 * var(--seg-pad)));
    border-radius: calc(var(--seg-radius) - var(--seg-pad));
    background: var(--seg-thumb);
    box-shadow: var(--seg-shadow);
    transform: translateX(0%);
    transition: transform 140ms ease;
}

/* Checked state controls thumb position + active label color */

#cbsInvStatusOpen:checked ~ .segmented-toggle__thumb {
    transform: translateX(0%);
}

#cbsInvStatusPaid:checked ~ .segmented-toggle__thumb {
    transform: translateX(100%);
}

#cbsInvStatusAll:checked ~ .segmented-toggle__thumb {
    transform: translateX(200%);
}

#cbsInvStatusOpen:checked + .segmented-toggle__label {
    color: var(--seg-text-active);
}

#cbsInvStatusPaid:checked + .segmented-toggle__label {
    color: var(--seg-text-active);
}

/* Checked label: active text color */
.segmented-toggle__input:checked + .segmented-toggle__label {
    color: var(--seg-text-active);
}

/* Thumb position for 3-option segmented toggles (generic) */
.segmented-toggle__input:nth-of-type(1):checked ~ .segmented-toggle__thumb {
    transform: translateX(0%);
}

.segmented-toggle__input:nth-of-type(2):checked ~ .segmented-toggle__thumb {
    transform: translateX(100%);
}

.segmented-toggle__input:nth-of-type(3):checked ~ .segmented-toggle__thumb {
    transform: translateX(200%);
}

/* === Actionbar tokens & segmented-toggle alignment helpers (controls.css) === */
:root {
    --actionbar-gap: clamp(8px, 0.8vw, 16px);
    --actionbar-search-min: 150px;
    --actionbar-search-max: 420px;
    --actionbar-icon-btn-w: 36px;
    --actionbar-toggle-z: 5;
}

/* === Segmented toggle helpers (controls.css) === */
/* Ensure consistent label padding for accurate thumb centering */
.segmented-toggle__label {
    padding: 0 4px;
    box-sizing: border-box;
    white-space: nowrap;
    min-width: 0;
}

/* Keep the toggle from shrinking and ensure it sits above adjacent inputs */
.segmented-toggle {
    position: relative;
    z-index: 6; /* above inputs but below modals */
    --seg-count: 3;
    transition: color 140ms ease, transform 120ms ease;
}

/* Prevent labels and inputs from collapsing */
.segmented-toggle__input,
.segmented-toggle__label {
    flex-shrink: 0;
}

    .segmented-toggle__input:hover,
    .segmented-toggle__label:hover {
        color: var(--ink);
    }

/* Thumb sits behind labels but above background */
.segmented-toggle__thumb {
    z-index: 1;
}

/* Focused label should appear above the thumb */
.segmented-toggle__label:focus-visible {
    z-index: 2;
}

/* Small spacing helper when toggle sits next to inputs */
.segmented-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0; /* never shrink the wrap */
}


/* === Action bar shared tokens & helpers === */
.actionbar {
    width: 100%;
    box-sizing: border-box;
}

/* Reusable gap token (adjustable) */
:root {
    --actionbar-gap: clamp(8px, 0.8vw, 16px);
    --actionbar-search-min: 150px;
    --actionbar-search-max: 420px;
    --actionbar-icon-btn-w: 36px;
}

/* Small utility to visually hide text but keep it accessible */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* small helper: ensure toggle and its wrapper never collapse into the search */
.segmented-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0; /* never let the toggle wrap collapse */
    margin-left: 0; /* keep control over spacing via --filter-gap in cbs.css */
}

/* =========================================================
   Notifications (Reusable component)
   - Neutral defaults: safe in RR or main content
   - Tenant tweaks belong in tenant css (e.g., cbs.css)
   ========================================================= */

.mt-notif {
    display: grid;
    gap: 12px; /* helps when the host places multiple top-level sections */
    max-width: 100%;
    box-sizing: border-box;
}

/* Cards */
.mt-notif-card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    padding: 12px;
    box-shadow: var(--shadow-1);
    box-sizing: border-box;
}

    /* Ensure visible spacing between cards even when they are rendered inside UpdatePanel/Repeater wrappers */
    .mt-notif-card + .mt-notif-card {
        margin-top: 12px;
    }

/* Title */
.mt-notif-title {
    font-size: 13px;
    font-weight: 900;
    color: var(--ink);
    line-height: 1.2;
    margin: 0 0 6px 0;
    word-break: break-word;
}

/* Body (sanitized HTML can include links, lists, etc.) */
.mt-notif-body {
    font-size: 13px;
    font-weight: 600;
    color: color-mix(in srgb, var(--ink) 80%, var(--muted));
    line-height: 1.3;
    overflow-wrap: anywhere;
}

    /* Rich-text normalization inside notifications (keeps admin-authored HTML readable) */
    .mt-notif-body p {
        margin: 0 0 10px 0;
    }

    .mt-notif-body ul,
    .mt-notif-body ol {
        margin: 8px 0 8px 18px;
        padding: 0;
    }

    .mt-notif-body li {
        margin: 6px 0;
    }

    .mt-notif-body strong {
        font-weight: 900;
    }

    .mt-notif-body em {
        font-style: italic;
    }

    /* Targeted link styling (notifications only) */
    .mt-notif-body a {
        color: var(--accent);
        font-weight: 700;
        text-decoration: none;
        text-decoration-skip-ink: auto;
        overflow-wrap: anywhere; /* long URLs */
        word-break: break-word; /* safety */
    }

        .mt-notif-body a:visited {
            color: var(--brand-ink);
        }

        .mt-notif-body a:hover {
            color: var(--brand-ink);
            font-weight: 600;
        }

        .mt-notif-body a:focus-visible {
            outline: 2px solid color-mix(in srgb, var(--brand-primary) 45%, var(--shade-toward));
            outline-offset: 2px;
            border-radius: 4px;
        }

    /* Prevent content overflow (images or long URLs) */
    .mt-notif-body img {
        max-width: 100%;
        height: auto;
    }

/* Meta */
.mt-notif-meta {
    margin-top: 8px;
    font-size: 12px;
    font-weight: 700;
    color: var(--muted);
    line-height: 1.2;
}

/* Empty */
.mt-notif-empty {
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
}


/* Pager (kept neutral; host can wrap/sticky in RR if desired) */
.mt-notif-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
    width: 100%;
    max-width: 100%;
}


/* Works for asp:ImageButton (renders to <input type="image">) */
.mt-notif-pager-btn {
    height: 32px;
    width: 32px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    box-sizing: border-box;
    vertical-align: middle;
}


    .mt-notif-pager-btn:hover {
        filter: brightness(2.25);
    }

    .mt-notif-pager-btn[disabled],
    .mt-notif-pager-btn:disabled {
        opacity: 0.55;
        cursor: not-allowed;
        filter: none;
        pointer-events: none;
    }

.mt-notif-pageinfo {
    font-size: 12px;
    font-weight: 800;
    color: var(--muted);
    line-height: 1;
    margin: 0;
    padding-top: 1px; /* tiny optical alignment with 32px icons */
    white-space: nowrap;
}

/* used for search or filter clear buttons (eraser SVG icon)*/
.input-with-clear {
    position: relative;
    display: inline-block;
}

    .input-with-clear input {
        padding-right: 32px; /* space for the button */
    }

    .input-with-clear .search-clear {
        position: absolute;
        right: 6px;
        top: 50%;
        transform: translateY(-50%);
        border: none;
        background: transparent;
        cursor: pointer;
        font-size: 14px;
        opacity: 1;
        height: 28px;
        width: 28px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: var(--muted);
    }

        .input-with-clear .search-clear:hover {
            color: var(--brand-ink);
            transform: translateY(calc(-50% - 1px));
        }

/* Percent picker */
.percent-picker-input-group {
    /* display: inline-flex; */
    align-items: center;
}

.percent-picker-field {
    position: relative;
    /* display: inline-block; */
}

.percent-picker-input {
    /* width: 110px; */
    padding-right: 26px;
    text-align: right;
}

.percent-picker-suffix {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--muted);
    font-weight: 500;
}

/* Currency picker */

.currency-picker-input-group {
    /* display: inline-flex; */
    align-items: center;
}

.currency-picker-field {
    position: relative;
    /* display: inline-block; */
}

/* Input */
.currency-picker-input {
    padding-left: 16px;
    text-align: right;
}

/* $ prefix inside input */
.currency-picker-prefix {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    pointer-events: none;
    font-size: 13px;
    font-weight: 500;
}

/* Match HeatMapThresholds focus behavior */
.currency-picker-field:focus-within .currency-picker-prefix {
    color: var(--ink);
}


/* Left Nav Toggle Button */
.left-nav-toggle .icon {
    width: 24px;
    height: 24px;
    display: block;
}

.left-nav-toggle {
    color: var(--brand-ink);
    align-self: flex-end;
    margin: 16px 8px 8px 0;
    background: none;
    border: none;
    font-size: 22px;
    cursor: pointer;
    opacity: .6;
    transition: opacity .25s ease;
}

    .left-nav-toggle:hover {
        transform: translateY(-1px);
        opacity: 1;
    }


    /* Default: show expand (safe default if no classes yet) */
    .left-nav-toggle .icon-collapse {
        display: none;
    }

    .left-nav-toggle .icon-expand {
        display: block;
    }

/* When nav is OPEN (show-lnav): button should show “collapse” action */
body.show-lnav .left-nav-toggle .icon-collapse {
    display: block;
}

body.show-lnav .left-nav-toggle .icon-expand {
    display: none;
}

/* When nav is CLOSED (close-lnav): show “expand” action */
body.close-lnav .left-nav-toggle .icon-collapse {
    display: none;
}

body.close-lnav .left-nav-toggle .icon-expand {
    display: block;
}



/* =========================================================
Global App Tooltip (single portal element)
========================================================= */
#app-tooltip {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    /* Surface */
    background: var(--tooltip-bg);
    color: var(--tooltip-color);
    font-weight: 500;
    border-top: 2px solid color-mix( in srgb, var(--brand-primary) 85%, var(--surface-overlay) );
    /* Type */
    font-family: var(--ui-font);
    font-size: 12px;
    line-height: 1.35;
    letter-spacing: 0.01em;

    /* SEC-24: pre-line, NOT normal. This is what lets the plain-text branch of the tooltip engine
       keep its line breaks now that it assigns textContent instead of innerHTML. It used to replace
       \n with <br>, and building markup was the only reason innerHTML was needed there - which made
       a user-data tooltip an injection sink (site.core.js:266).

       pre-line COLLAPSES runs of spaces and still wraps on width, exactly as normal does; the only
       difference is that a real newline becomes a line break. So nothing that was wrapping before
       changes, including the rich data-tooltip-html tooltips, whose breaks come from block elements
       rather than from newlines. */
    white-space: pre-line;
    /* Shape */
    padding: 8px 10px; /* Slightly adjusted padding for the header/grid card layout */
    border-radius: 6px;
    /* Elevation (the “wow”) */
    box-shadow: 0 6px 18px rgba(var(--shadow-rgb), 0.28), 0 2px 6px rgba(var(--shadow-rgb), 0.20);
    /* Motion */
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 160ms ease, transform 160ms ease;
    /* Layering */
    z-index: 5000;
    max-width: 320px;
    /* --- Tooltip Semantic Tokens for Rich Cards --- */
    --tt-border: color-mix(in srgb, var(--tooltip-color) 15%, transparent);
    --tt-text-main: var(--tooltip-color);
    --tt-text-muted: color-mix(in srgb, var(--tooltip-color) 70%, transparent);
    --tt-success: #5EE28A;
    --tt-danger: #FF7A7A;
}

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

    #app-tooltip .tt-label {
        white-space: nowrap;
        opacity: 0.7;
        margin-right: 4px;
    }

    #app-tooltip .tt-subtitle {
        font-size: .72rem;
        font-weight: 400;
        color: var(--tt-text-muted);
        margin-top: -2px;
        margin-bottom: 6px;
    }


.tt-header {
    margin-bottom: 8px;
    border-bottom: 1px solid var(--tt-border);
    padding-bottom: 6px;
}

.tt-header-main {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

/* Wraps title + optional qualifier so they stay together as the flex start
   item. No declarations needed today; named so the structure is addressable. */
.tt-title-wrap {
}

.tt-title {
    font-weight: 600;
    font-size: 13px;
    color: var(--tt-text-main);
}

/* Parenthetical after the title — an hour label, a store. The margin replaces
   a literal space that used to sit in the markup. */
.tt-qualifier {
    color: var(--tt-text-muted);
    font-size: 11px;
    margin-left: 4px;
}

/* The headline value, right of the title on the same baseline. */
.tt-headline {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    font-size: 13px;
    color: var(--tt-text-main);
    margin-left: 12px;
    white-space: nowrap;
}

/* Muted second line under the title. */
.tt-subtitle {
    font-size: 11px;
    color: var(--tt-text-muted);
    margin-top: 2px;
}

/* Body: label column flexes, value column sizes to content. */
/* TL-171: prose inside a tooltip, for the left-nav tooltips - a name, the rule that .tt-header
   already draws, and a sentence. max-width keeps a long description to a readable measure instead
   of one very wide line, which is the one place a measure genuinely helps. */
.tt-body {
    max-width: 320px;
    line-height: 1.45;
    white-space: normal;
}

.tt-grid {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 16px;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    align-items: center;
}

.tt-label {
    color: var(--tt-text-muted);
    white-space: nowrap;
}

.tt-value {
    color: var(--tt-text-main);
    text-align: right;
    white-space: normal;
}

/* Impact and Variance rows. */
.tt-strong {
    font-weight: 600;
}


/* ================================
   APP-WIDE CHECKBOX COMPONENT
   ================================ */

/* Wrapper (optional but recommended for layout consistency) */
.checkbox-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    user-select: none;
}

    /* Base checkbox */
    .checkbox-item input[type="checkbox"],
    input[type="checkbox"].app-checkbox {
        appearance: none;
        width: 16px;
        height: 16px;
        border: 1.5px solid var(--border);
        border-radius: 3px;
        background: var(--surface);
        cursor: pointer;
        position: relative;
        transition: all 0.15s ease;
    }

        /* Hover */
        .checkbox-item:hover input[type="checkbox"],
        input[type="checkbox"].app-checkbox:hover {
            border-color: var(--brand-primary);
        }

        /* Checked */
        .checkbox-item input[type="checkbox"]:checked,
        input[type="checkbox"].app-checkbox:checked {
            background: var(--brand-primary);
            border-color: var(--brand-primary);
        }

            /* Checkmark */
            .checkbox-item input[type="checkbox"]:checked::after,
            input[type="checkbox"].app-checkbox:checked::after {
                content: "";
                position: absolute;
                left: 4px;
                top: 1px;
                width: 5px;
                height: 9px;
                border: solid var(--brand-on-primary);
                border-width: 0 2px 2px 0;
                transform: rotate(45deg);
            }

    /* Label */
    .checkbox-item label {
        font-size: 13px;
        color: var(--muted);
        line-height: 1.2;
    }

    /* Selected label emphasis */
    .checkbox-item input[type="checkbox"]:checked + label,
    input[type="checkbox"].app-checkbox:checked + label {
        color: var(--text);
        opacity: 0.85;
        font-weight: 600;
    }

    /* Disabled */
    .checkbox-item input[type="checkbox"]:disabled,
    input[type="checkbox"].app-checkbox:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

        .checkbox-item input[type="checkbox"]:disabled + label,
        input[type="checkbox"].app-checkbox:disabled + label {
            opacity: 0.5;
            cursor: not-allowed;
        }

/* =========================
   Segmented Control (Primary Mode Switch)
   ========================= */

.segmented-control {
    display: inline-flex;
    border-radius: 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    overflow: hidden;
    /* ✅ slight elevation so it reads as important */
    box-shadow: var(--shadow-1);
}

/* container spacing when used as primary control */
.report-header-mode .segmented-control {
    height: 36px;
    margin-bottom: 2px;
}

.segmented-control .segment {
    padding: 8px 16px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

    /* divider */
    .segmented-control .segment:not(:last-child) {
        border-right: 1px solid color-mix(in srgb, var(--muted) 25%, transparent);
    }

    /* ✅ ACTIVE = PRIMARY STYLE */
    .segmented-control .segment.active {
        background: color-mix(in srgb, var(--brand-primary) 75%, var(--surface));
        opacity: 1;
        color: var(--brand-on-primary);
        font-weight: 600;
    }



    /* hover (inactive only) */
    .segmented-control .segment:not(.active):hover {
        background: color-mix(in srgb, var(--brand-primary) 10%, var(--surface));
        color: var(--brand-ink);
    }

    /* focus accessibility */
    .segmented-control .segment:focus-visible {
        outline: 2px solid var(--brand-primary);
        outline-offset: -2px;
    }

    /* optional: disabled state (future-proof) */
    .segmented-control .segment[disabled] {
        color: color-mix(in srgb, var(--muted) 30%, var(--surface));
        cursor: not-allowed;
    }

/* ==========================================
   Secondary Segmented Controls
   Report Parameters
   ========================================== */

.segmented-control-secondary {
    box-shadow: none;
    border-color: color-mix(in srgb, var(--border) 80%, transparent);
}

    .segmented-control-secondary .segment {
        padding: 6px 14px;
        font-size: 13px;
        font-weight: 500;
    }


        .segmented-control-secondary .segment.active {
            background: color-mix( in srgb, var(--brand-primary) 60%, var(--tint-toward) );
            color: var(--brand-on-primary);
            font-weight: 600;
        }


        .segmented-control-secondary .segment:not(.active):hover {
            background: color-mix( in srgb, var(--brand-primary) 8%, var(--surface) );
            color: var(--brand-ink);
        }


/* Email token input */

.token-input {
    display: flex;
    flex-direction: column; /* ✅ ensures tokens ABOVE input */
    gap: 6px;
    border: 1px solid var(--border);
    padding: 6px;
    border-radius: 4px;
    cursor: text;
}


.token-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.token {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 12px;
    background: var(--bg-muted);
    font-size: 12px;
}

    .token.invalid {
        background: var(--surface-danger);
        border: 1px solid var(--border-danger);
    }

.token-remove {
    margin-left: 6px;
    cursor: pointer;
    font-weight: bold;
}

.token-edit {
    margin-left: 6px;
    cursor: pointer;
    font-weight: bold;
}

.token-entry {
    border: none !important;
    outline: none;
    flex: 1;
    min-width: 120px;
}

/* Text-field focus, the two places the shared rule in theme.css cannot reach (2026-10-16).
   1. The email token box: the visible field is the .token-input wrapper, the typing field inside it has no border
      of its own, so the underline goes on the wrapper (:focus-within) and the inner field draws nothing.
      The wrapper takes the standard 8px field radius so the line follows the same corners as every other field. */
.token-input {
    --fu-color: var(--focus-underline-color);
    --fu-border: var(--focus-border-color);
    border-radius: 8px;
    transition: box-shadow .12s ease, border-color .12s ease;
}

.token-input:is(.field-error, .invalid, [aria-invalid="true"]) {
    --fu-color: var(--focus-underline-error);
    --fu-border: var(--focus-underline-error);
}

.token-input:focus-within {
    border-color: var(--fu-border);
    border-bottom-color: var(--fu-color);
    box-shadow: inset 0 calc(1px - var(--focus-underline-width)) 0 0 var(--fu-color);
}

.token-input input.token-entry:focus:not(:disabled) {
    outline: none;
    box-shadow: none;
}

@media (forced-colors: active) {
    .token-input:focus-within {
        outline: 2px solid Highlight;
        outline-offset: 1px;
    }
}

/* 2. The right rail. rightrail.css styles its fields through #RightRailContent (an ID), which out-ranks the shared
      rule in theme.css, so the same declarations are restated here under the same ID. They replace the old
      indigo glow, the error glow and the valid glow that rightrail.css still carries (it is not edited here). */
#RightRailContent :is(input:not([type="checkbox"], [type="radio"], [type="button"], [type="submit"], [type="reset"], [type="file"], [type="image"], [type="range"], [type="color"], [type="hidden"]), select, textarea, .input):focus:not(:disabled) {
    outline: 2px solid transparent;
    outline-offset: 0;
    border-color: var(--fu-border);
    border-bottom-color: var(--fu-color);
    box-shadow: inset 0 calc(1px - var(--focus-underline-width)) 0 0 var(--fu-color);
}

@media (forced-colors: active) {
    #RightRailContent :is(input:not([type="checkbox"], [type="radio"], [type="button"], [type="submit"], [type="reset"], [type="file"], [type="image"], [type="range"], [type="color"], [type="hidden"]), select, textarea, .input):focus:not(:disabled) {
        outline: 2px solid Highlight;
        outline-offset: 1px;
    }
}


.token-selected {
    outline: 1px solid var(--brand-primary);
}




/* =========================================================
   Segmented toggle with 4 or 5 options (U4, Requests views). The same control and the same look as the
   3-option one (Inactive / Locked / All on Edit Users); only the number of equal columns and the thumb steps change.
   ========================================================= */
.segmented-toggle--2 { --seg-count: 2; }
.segmented-toggle--4 { --seg-count: 4; }
.segmented-toggle--5 { --seg-count: 5; }

.segmented-toggle__input:nth-of-type(4):checked ~ .segmented-toggle__thumb {
    transform: translateX(300%);
}

.segmented-toggle__input:nth-of-type(5):checked ~ .segmented-toggle__thumb {
    transform: translateX(400%);
}

/* A label may carry a count after the words; it wraps nowhere and keeps tabular figures. */
.segmented-toggle__label .seg-count {
    margin-left: 6px;
    font-weight: 400;
    font-variant-numeric: tabular-nums;
}

/* U2-001 (2026-10-15): the Run / Schedule control clipped "Schedule" at 360 because its content (213px) was wider than the room left beside the
   collapse and pin icons (197px) and the control hides overflow. Under 481 the segments are tighter and the control may shrink to its room. */
@media (max-width: 480px) {
    .segmented-control { min-width: 0; max-width: 100%; }
    .segmented-control .segment { padding-left: 10px; padding-right: 10px; gap: 4px; }
}