.MinWidth30 {
    min-width: 30px;
}

/* Position the newsletter badge to match the Active Visitors badge — slight right and on the icon */
.newsletter-badge-offset {
    transform: scale(1) translate(30%, 0%) !important;
}
.MinWidth30 .mud-list-item-icon {
    min-width: 30px;
}

.VerticalCentre {
    display: table-cell;
    vertical-align: middle;
    /* Note: set line-height on your item */
}

.CentreText {
    text-align: center !important;
}

@media (min-width: 600px) {
    .mud-container {
        padding-left: 12px;
        padding-right: 12px;
    }

    .mud-toolbar {
        height: 60px;
    }

    .mud-grid-spacing-xs-3 > .mud-grid-item {
        padding: 11px;
    }

    .mud-table-dense * .mud-table-row .mud-table-cell {
        padding: 11px !important;
        vertical-align: middle;
    }

    .mud-table-toolbar {
        margin-bottom: 16px;
    }

    .mud-nav-link-icon {
        font-size: 1.1rem;
    }

    .mud-chart.mud-chart-legend-right .mud-chart-legend {
        flex: auto;
    }

    .ecp-text ul {
        list-style: circle;
        padding: 20px;
    }

    .ecp-text ol {
        padding: 20px;
    }

    .ecp-text a {
        color: var(--mud-palette-primary) !important;
    }

    .monaco-editor-container {
        height: 600px;
    }

    .policy-editor-managed-variable {
        background: border-box;
        background-color: #f3ddf8 !important;
        border-color: lightpink;
        border-style: groove;
        border-width: thin;
        cursor: pointer;
        text-decoration: none;
        font-weight: bold;
        font-style: oblique;
    }

    .mud-picker-datepicker-toolbar .mud-button-date {
        font-size: 1rem!important;
    }

    .EcpDatePicker300 {
        max-width: 300px !important;
    }

    .EcpDatePicker630 {
        max-width: 630px !important;
    }

    .NoWrap {
        white-space: nowrap;
    }
    /* MudDataGrid - Columns - Start*/
    /* header Start */
    .HeadAlignCentre th:first-child, .HeadAlignRight th:first-child, .HeadAlignCentre td:first-child, .HeadAlignRight td:first-child {
        text-align: left !important;
    }

    .HeadAlignCentre th {
        text-align: center !important;
    }

    .HeadAlignCentre td,
    .HeadAlignCentre .sortable-column-header {
        text-align: center;
    }

    .HeadAlignRight th .column-header span,
    .HeadAlignRight th {
        text-align: right !important;
    }

    .HeadAlignRight .column-header,
    .HeadAlignRight td {
        text-align: right;
    }

    /* Header End */

    .TryOpt1 a {
        padding-right: unset !important;
        display: block;
    }

    .TryOpt1 .mud-chip,
    .TryOpt2 .mud-chip,
    .TryOpt3 .mud-chip {
        width: unset !important;
    }




    /* REMOVED 'div div div' because of interference from the 'new' style of MudChip with the addition of the generated MudChipContainer div*/

    .TryOpt1 a:has(p) {
        padding-right: 0 !important;
    }

    .TryOpt1 svg,
    .TryOpt1 .mud-chip {
        margin-right: 38px !important;
    }
    .TryOpt1,
    .TryOpt1 a,
    .TryOpt1 p {
        padding-right: 38px !important;
    }

/*    .TryOpt2 svg,*/
    .TryOpt2 .mud-chip {
        margin-right: 65px !important;
    }
    .TryOpt2Tag,
    .TryOpt2 a,
    .TryOpt2 div a,
    .TryOpt2 p {
        padding-right: 65px !important;
    }

    .TryOpt3 svg,
    .TryOpt3 .mud-tooltip-inline:has(button),
    .TryOpt3 .mud-chip {
        margin-right: 100px !important;
    }
    /* EcpUserRoleChip's read-only lock icon must keep normal spacing — the .TryOpt3 svg spacer
       above is meant for standalone cell icons, not an icon nested inside a chip. Scoped to the
       .ecp-role-chip marker class so it can ONLY affect EcpUserRoleChip, nothing else app-wide.
       Without this the lock is pushed 100px from its label and the chip blows out to full width. */
    .TryOpt3 .ecp-role-chip svg {
        margin-right: 4px !important;
    }
    .TryOpt3,
    .TryOpt3 a,
    .TryOpt3 div a,
    .TryOpt3 p {
        padding-right: 100px !important;
    }


        .TryOpt1 a,
        .TryOpt2 a,
        .TryOpt3 a {
            /*padding-right: unset !important;
        display: block;*/
        }

    .TryLeft {
        text-align: left !important;
    }

    /* TryRight - Start */
    .TryRight p,
    .TryRightP p {
        width: 100%;
        text-align: right;
    }

    .TryRight .column-header span,
    .TryRight div,
    .TryRightDiv div {
        width: 100%;
        text-align: right;
    }

    /* TryRight - End */

    /* Centre - Start */
    .TryCentre,
    .TryCentre p,
    .TryCentreTD {
        text-align: center !important;
    }

    .TryCentre .column-header {
        justify-content: center !important;
    }

    .TryCentreItem {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
    }

    /* Centre - End */
    .Width100Percent {
        width: 100% !important;
    }
    
    .CellBorderRight {
        border-right: solid #e0e0e0 1px;
    }

    .CellBorderLeft {
        border-left: solid #e0e0e0 1px;
    }

    .ForceCentre {
        text-align: center !important;
    }

    /* MudDataGrid - Columns - End*/
}

/* ────────────────────────────────────────────────────────────────────────────
   Generalised MudDataGrid column alignment  —  GridCentre / GridLeft / GridRight

   Prefer the EcpGridColumn / EcpGridTemplateColumn components (Alignment="..."),
   which apply the class to both the cell and the header for you. Raw usage sets
   the same class on both CellClass and HeaderClass.

   These SUPERSEDE the TryCentre / TryOpt1-3 / TryRight family, whose hard-coded
   38/65/100px body pads only existed to line body content up under a header that
   MudDataGrid squeezes with its sort/filter icon cluster (.column-options).

   Design: the sort/filter icon cluster gets its OWN fixed-width lane on the right
   of the header (kept in normal flow, so it can never overlap the label), and the
   label takes the space that's left. The BODY cell reserves the IDENTICAL lane on
   its right, so body content sits in the same box as the header label and lines up
   directly under it. Both header and body cells have their right padding pinned to
   fixed values, so alignment also holds in dense grids (where MudDataGrid changes
   the default cell padding).

     - Centre: label + body both centre in the space left of the icon lane.
     - Right:  label + body both right-align to the inner edge of the icon lane.
     - Left:   label + body stay left; the lane just reserves the icons' space.

   --EcpGridIcons = width of the icon lane; --EcpGridEdge = gap from the cell's
   right edge to the icons. Tune in one place. Applied at all widths (outside the
   min-width:600px block).

   CheckboxCol (issue #6328) keeps its own full-cell centring further down — a
   narrow checkbox already centres perfectly and is too narrow to reach the icons. */

:root {
    --EcpGridIcons: 3.5rem;
    --EcpGridEdge: 0.5rem;
}

/* Header: icon cluster becomes a fixed-width lane on the right; label takes the rest. */
.GridCentre .column-options,
.GridLeft .column-options,
.GridRight .column-options {
    flex: 0 0 var(--EcpGridIcons);
    justify-content: flex-end;
}

.GridCentre .sortable-column-header,
.GridLeft .sortable-column-header,
.GridRight .sortable-column-header {
    flex: 1 1 auto;
    width: auto !important;   /* beat MudBlazor's .sortable-column-header { width: 100% } */
    min-width: 0;
}

/* Header cell: pin the right padding to the edge gap (the icon lane sits inside). */
.mud-data-grid th.mud-table-cell.GridCentre,
.mud-data-grid th.mud-table-cell.GridLeft,
.mud-data-grid th.mud-table-cell.GridRight {
    padding-right: var(--EcpGridEdge) !important;
}

/* Body cell: reserve the identical lane (edge + icons) on the right so body content
   shares the header label's box. Beats MudDataGrid's dense `padding: !important`. */
.mud-data-grid td.mud-table-cell.GridCentre,
.mud-data-grid td.mud-table-cell.GridLeft,
.mud-data-grid td.mud-table-cell.GridRight {
    padding-right: calc(var(--EcpGridEdge) + var(--EcpGridIcons)) !important;
}

/* Alignment within the label box (header) and content box (body). */
.GridCentre,
.GridCentre .sortable-column-header {
    text-align: center !important;
}

.GridLeft,
.GridLeft .sortable-column-header {
    text-align: left !important;
}

.GridRight,
.GridRight .sortable-column-header {
    text-align: right !important;
}

/* Header label alignment is independent of sorting. MudBlazor only wraps the title in
   .sortable-column-header (which the text-align rules above centre) when the column is
   sortable; a NON-sortable column renders its title as a raw flex child of .column-header,
   whose MudBlazor default `justify-content: space-between` pins the label to the left.
   Overriding the flex justification centres/right-aligns that raw label to match the sortable
   path exactly — and is a no-op for sortable columns, whose `flex: 1 1 auto` title wrapper
   already absorbs the free space, so justify-content has nothing to distribute. */
.GridCentre .column-header {
    justify-content: center !important;   /* beat MudBlazor's .mud-data-grid .mud-table-cell .column-header (0,3,0) */
}

.GridRight .column-header {
    justify-content: flex-end !important;
}

/* MudCheckBox / input wrappers shrink so text-align can place them. */
.GridCentre .mud-input-control,
.GridLeft .mud-input-control,
.GridRight .mud-input-control {
    display: inline-flex !important;
    width: auto !important;
}

/* ── CheckboxCol: narrow-checkbox columns (issue #6328) — full-cell centring ── */
.CheckboxCol .column-header {
    justify-content: center !important;
    position: relative;
}

.CheckboxCol .column-options {
    position: absolute;
    right: 0;
}

.CheckboxCol,
.CheckboxCol .sortable-column-header {
    text-align: center !important;
}

.CheckboxCol .mud-stack {
    width: 100% !important;
}

.CheckboxCol .mud-input-control {
    display: inline-flex !important;
    width: auto !important;
}

.EcpPro MudDialog {
    max-height: 80vh;
}

.BorderFadeBase {
    border: 3px solid transparent; 
}
.BorderFade {
    /*animation: FadeOut 2s;*/
    animation: Pulse-Green 1s;
}
/*@keyframes FadeOut {
    0% {
        border: 5px solid lightgreen;
        transform: scale(0.8);
        transform-origin: 0% 0% 0px;
    }

    100% {
        border: 5px solid transparent;
        transform: scale(1);
        transform-origin: 0% 0% 0px;
    }
}*/


@keyframes Pulse-Green {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(42, 255, 71, 1);
    }

    25% {
        transform: scale(1);
        box-shadow: 0 0 0 2px rgba(42, 255, 71, 0);
    }
    50% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(42, 255, 71, 1);
    }
    75% {
        transform: scale(1);
        box-shadow: 0 0 0 2px rgba(42, 255, 71, 0);
    }

    100% {
        transform: scale(0.97);
        box-shadow: 0 0 0 0 rgba(42, 255, 71, 1);
    }
}

/*
@keyframes Pulse-Green {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(42, 255, 71, 1);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 3px rgba(42, 255, 71, 0.7);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(42, 255, 71, 0);
    }
}*/

/* ── App-wide MudTabs: each tab reads as its own folder tab ──
   Every tab is a bordered, rounded-top "card" with a gap between it and its
   neighbour (no more floating words). The full-width baseline is the PANEL's top
   border (not the tabbar's): the panel is pulled up 1px under the tab row and
   layered so inactive tabs sit on the line, while the active tab's surface-coloured
   bottom border sits ABOVE the panel and erases its own slice of the line — a real
   folder connection into the content below. Theme variables keep it correct in
   light and dark mode. The default sliding underline is hidden.

   Why the panel owns the baseline and the TABBAR (not the active tab) is lifted:
   1. The tabs live inside .mud-tabs-tabbar-content { overflow:hidden } (MudBlazor's
      horizontal tab-scroll clip), so a shadow a tab paints BELOW itself is clipped.
      Hence the active tab masks the line with a BORDER (inside its own box, not clipped).
   2. .mud-tabs-tabbar-wrapper carries transform:translateX() (the scroll offset), which
      creates a stacking context that TRAPS the active tab's z-index — so the active tab
      cannot be lifted above the panel directly. Instead we lift the whole .mud-tabs-tabbar
      above the panel and make the tabbar transparent, so the panel's top-border baseline
      still shows in the empty area beyond the tabs, while the active tab's surface bottom
      border (now above the panel) erases its slice of that line.
   We must NOT touch .mud-tabs-tabbar-content's overflow (keeps scroll intact). */
.mud-tab {
    margin-right: 4px;
    border: 1px solid var(--mud-palette-lines-default) !important;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    background-color: var(--mud-palette-background-grey);
    color: var(--mud-palette-text-secondary);
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

    .mud-tab:hover {
        background-color: var(--mud-palette-action-default-hover);
        color: var(--mud-palette-text-primary);
    }

.mud-tab-active,
.mud-tab-active:hover {
    background-color: var(--mud-palette-surface) !important;
    color: var(--mud-palette-primary) !important;
    border-color: var(--mud-palette-lines-default) !important; /* keep the same 1px borders as inactive — no layout shift */
    border-bottom-color: var(--mud-palette-surface) !important; /* surface bottom border sits over the panel's top line and erases it → connects to the panel */
    border-top-color: var(--mud-palette-primary) !important; /* 1px of the accent is the border itself */
    box-shadow: inset 0 2px 0 0 var(--mud-palette-primary) !important; /* +2px inset = a 3px primary top accent that follows the rounded corners (no fringing) */
    font-weight: 600;
}

.mud-tab-slider {
    background-color: transparent !important;
}

/* MudTabs with Elevation + Rounded + ApplyEffectsToContainer draws an elevated
   rounded card around the WHOLE component; its top shadow + rounding fight the
   folder-tab headers. Strip that card; the folder body lives on the panel. */
.mud-tabs,
.mud-tabs-tabbar {
    box-shadow: none !important;
    border-radius: 0 !important;
    overflow: visible !important; /* Rounded adds overflow:hidden which clips the panel's shadow — corners are flat now, so let it show */
}

.mud-tabs-tabbar {
    background-color: transparent !important; /* let the panel's top-border baseline show through in the empty area beyond the tabs */
    position: relative;
    z-index: 2; /* lift the WHOLE tabbar above the panel (see header note): the active tab's own z-index is trapped by the wrapper's translateX stacking context, so we layer at tabbar level instead */
}

.mud-tabs-panels {
    background-color: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default) !important; /* the folder body; its TOP edge is the full-width baseline the tabs sit on */
    border-top-left-radius: 0 !important; /* square top-left to meet the tab row cleanly */
    border-top-right-radius: 6px !important; /* round the corner to the right of the last tab */
    border-bottom-left-radius: 6px !important;
    border-bottom-right-radius: 6px !important;
    margin-top: -1px; /* pull up 1px so the panel's top border overlaps the tab row's bottom border (one shared line) */
    position: relative;
    z-index: 1; /* below the tabbar: inactive tabs (opaque) sit on the line, the active tab's surface bottom border erases its slice, the transparent gaps/empty area let the line show */
    box-shadow: var(--mud-elevation-2) !important; /* same card shadow the container used to have, now on the folder body */
}

.DisabledText {
    text-decoration-line: line-through;
    text-decoration-color: #ff0258cc;
}

@media print {
    .e-richtexteditor, .e-rte-content, .e-rte-content .e-content {
        height: auto !important;
        overflow: visible !important;
    }
    #border-removal,
    .e-richtexteditor,
    .e-rte-content,
    .e-rte-content .e-content {
        border: none !important;
        box-shadow: none !important;
        outline: none !important;
    }

    #content-container {
        width: 100.5% !important; /* push scrollbar off-page */
        overflow: visible !important;
    }

    /* Hide scrollbar track completely */
    .e-rte-content .e-content::-webkit-scrollbar-track {
        background: transparent !important;
    }

    /* Hide scrollbars */
    .e-rte-content .e-content {
        scrollbar-width: none; /* Firefox */
    }

    .e-rte-content .e-content::-webkit-scrollbar {
        display: none; /* Chrome, Safari */
    }

    /* Hide app bar*/
    .mud-appbar {
        display: none !important;
    }
}

/* PSA/Integration logo dark mode support (#3970)
   Inverts logos when dark mode is active so they remain visible on dark backgrounds.
   The 'dark-mode' class is toggled on <body> by setTheme() in JavaScript.js.
   Uses invert(1) alone (not brightness(0) invert(1)) to preserve internal contrast
   for colored logos like Xero while still making dark logos light. */
body.dark-mode .psa-logo {
    filter: invert(1);
}

/* Ensure PSA logos are vertically centered inside MudChip and inline contexts */
.psa-logo {
    vertical-align: middle;
}

/* ===== GrapeJS MJML editor ===== */

/* Editor wrapper — GrapesJS renders its own panels inside this */
.editor-wrapper {
    height: calc(100vh - 300px);
    min-height: 500px;
    border-radius: 4px;
    overflow: hidden;
}

/* Templates side-panel on EmailSignature Add/Edit — match editor height and scroll internally */
.templates-side-panel {
    height: calc(100vh - 300px);
    min-height: 500px;
    overflow-y: auto;
}

/* Thin vertical rail shown when the templates panel is collapsed — just enough room for the
   chevron icon that re-opens the panel. */
.templates-side-panel-rail {
    height: calc(100vh - 300px);
    min-height: 500px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 8px;
}

/* Each template list item — make the whole row a clickable card with a visible separator */
.template-list-item {
    flex-direction: column;
    align-items: stretch !important;
    border: 1px solid #e0e4e8;
    border-radius: 4px;
    margin-bottom: 8px;
    padding: 8px !important;
}

/* Wrapper around the inline template thumbnail. Defines the visible thumbnail size and clips
   the scaled iframe inside. pointer-events disabled so the row click selects the template
   without the iframe intercepting; click the dedicated Preview icon for full-size. */
.template-preview-thumb {
    width: 100%;
    height: 180px;
    border-top: 1px solid #eee;
    background: #fff;
    overflow: hidden;
    pointer-events: none;
    display: block;
    position: relative;
}

/* Inner iframe rendered at 2× the wrapper width, then transform-scaled to 50%. Net effect:
   the full signature (typically 300–600px wide) fits inside the small thumbnail box without
   scrollbars, like a true miniature of the document. The iframe is needed so the template's
   <style> block survives — our HtmlSanitizer would otherwise strip it and kill the colours. */
.template-preview-thumb-frame {
    width: 200%;
    height: 360px;
    border: 0;
    transform: scale(0.5);
    transform-origin: top left;
    display: block;
}

/* Import/code modal size fix */
.gjs-mdl-dialog {
    max-width: 800px;
}

.gjs-mdl-dialog textarea {
    width: 100%;
    min-height: 300px;
    font-family: monospace;
    font-size: 13px;
}

/* Prevent Bootstrap/MudBlazor from interfering with GrapesJS */
.editor-wrapper .gjs-pn-btn {
    box-shadow: none;
}

.editor-wrapper button.gjs-pn-btn {
    border: none;
}

.editor-wrapper .gjs-pn-btn:focus {
    outline: none;
    box-shadow: none;
}

/* ===== GrapesJS light theme ===== */
.gjs-light-theme .gjs-one-bg {
    background-color: #fdfdfd;
}

.gjs-light-theme .gjs-two-color:not(.gjs-pn-active) {
    color: #1f2937;
}

.gjs-light-theme .gjs-three-bg {
    background-color: #f5f6f8;
}

.gjs-light-theme .gjs-pn-btn:not(.gjs-pn-active) {
    color: #1f2937 !important;
}

.gjs-light-theme .gjs-pn-btn.gjs-pn-active {
    color: #ec5b43 !important;
}
/* Suppresses the spurious scrollbar in short dialogs made of outlined MudTextFields: each
   outlined field reserves ~50px of untransformed layout height for its floating-label notch,
   inflating scrollHeight past the real content. Apply via MudDialog ContentClass only when the
   content genuinely fits (never on dialogs that legitimately scroll, e.g. image galleries). */
.dialog-content-no-scroll {
    /* !important + the exact longhand MudBlazor sets (.mud-dialog-content { overflow-y: auto })
       — a plain class ties on specificity and loses the cascade to MudBlazor's own rule. */
    overflow-y: hidden !important;
}

/* HEADING SCALE ONLY for MudMarkdown rendered inside a small in-page panel. MudMarkdown sizes
   headings at page scale, so a plain "# Title" dwarfed the tenant-note panel and authors
   resorted to "###### Title" to get something reasonable.

   Scope is deliberately narrow. MudBlazor.Markdown already ships purpose-built styling for the
   markdown body (lists, code, blockquote, tables) under .mud-markdown-body, some of it with
   !important — overriding all of that here would duplicate it, fight it, and lose in places.
   Font-size on headings is the one thing it does NOT set (it only adds a border/margin to
   h1-h2), so this is a clean override rather than a tug of war.

   Deliberately GLOBAL rather than two CSS-isolation files: the tenant-note panel and the
   editor dialog's Preview tab must render identically, and duplicating the block under two
   ::deep scopes guarantees they eventually drift. Applied via a wrapper div around
   <MudMarkdown/>. app.css loads after MudBlazor.Markdown.min.css, so equal-specificity rules
   here win on source order.

   h4-h6 bottom out AT body size, never below it — notes already written with "######" as a
   workaround must stay readable, and a heading smaller than its own paragraph text is worse
   than one that is slightly too big. */
.ecp-note-markdown h1,
.ecp-note-markdown h2,
.ecp-note-markdown h3,
.ecp-note-markdown h4,
.ecp-note-markdown h5,
.ecp-note-markdown h6 {
    margin-top: 0.9rem;
    margin-bottom: 0.3rem;
    font-weight: 600;
    line-height: 1.3;
}

/* Element AND .mud-typography-* selectors: MudMarkdown renders headings via MudText, so the
   emitted markup carries both. Descendant selectors beat MudBlazor's single-class typography
   rules on specificity, so no !important is needed. */
.ecp-note-markdown h1,
.ecp-note-markdown .mud-typography-h1 { font-size: 1.2rem; }

.ecp-note-markdown h2,
.ecp-note-markdown .mud-typography-h2 { font-size: 1.1rem; }

.ecp-note-markdown h3,
.ecp-note-markdown .mud-typography-h3 { font-size: 1.05rem; }

.ecp-note-markdown h4,
.ecp-note-markdown .mud-typography-h4,
.ecp-note-markdown h5,
.ecp-note-markdown .mud-typography-h5,
.ecp-note-markdown h6,
.ecp-note-markdown .mud-typography-h6 { font-size: 1rem; }

/* The panel's own padding does the outer spacing. Targets the children of MudMarkdown's own
   .mud-markdown-body root — a direct child of .ecp-note-markdown is that wrapper div, not the
   first heading, so the shorter selector would be a silent no-op. */
.ecp-note-markdown .mud-markdown-body > :first-child {
    margin-top: 0;
}

.ecp-note-markdown .mud-markdown-body > :last-child {
    margin-bottom: 0;
}

/* ───── Service Desk session menu ─────
   GLOBAL, not component-scoped, and it has to be: MudBlazor moves popovers into its provider at the
   end of <body>, outside the switcher's DOM subtree, so the .mud-popover wrapper never carries the
   component's CSS-isolation attribute and a scoped rule cannot reach it.

   MudBlazor 9.5.0's layers are drawer 1100, popover 1200, app bar 1300, DIALOG 1400, snackbar 1500,
   tooltip 1600. The sessions menu is a popover, so at 1200 it rendered UNDER the floating panel's
   click-away backdrop and every click on a menu item — including "Link another ticket" — was
   swallowed by the backdrop and closed the panel instead. Docked to the right there is no backdrop,
   which is why the menu only ever worked in that one placement.

   The three Service Desk layers sit BETWEEN the app bar and the dialog, and they are declared here
   as custom properties rather than as literals in three files so the ordering cannot drift apart.
   The floating panel used to be 1401 over a 1400 backdrop, which put it above the dialog layer — so
   every MudDialog, including the ticket search the menu opens, rendered underneath the panel that
   launched it. */
:root {
    /* Above the app bar (1300), below the dialog layer (1400). Order within the band matters:
       backdrop < panel < the panel's own menus. */
    --sd-z-floating-backdrop: 1349;
    --sd-z-floating-panel: 1350;
    --sd-z-session-menu: 1351;
}

.sd-session-menu-popover {
    z-index: var(--sd-z-session-menu) !important;
}

/* Coach-mark element picker (authoring only).
   These two classes live here rather than in CoachTourHost.razor.css because coachmark.js applies
   them to document.body and to an element it creates itself - neither carries the component's
   CSS-isolation attribute, so scoped styles would never match. */
body.coachmark-picking,
body.coachmark-picking * {
    cursor: crosshair !important;
}

/* The pick bar's Back button is the one clickable thing that is not a pick target. */
body.coachmark-picking .coachmark-pickbar-back,
body.coachmark-picking .coachmark-pickbar-back * {
    cursor: pointer !important;
}

/* Shift held during a pick: clicks pass through to the page (a wizard's Next, a tab, a menu), so
   the page shows its own cursors and the highlight box gets out of the way. */
body.coachmark-picking.coachmark-passthrough,
body.coachmark-picking.coachmark-passthrough * {
    cursor: revert !important;  /* the page's own pointer / grab / resize cursors, not a flat auto */
}

body.coachmark-passthrough .coachmark-pick-highlight {
    visibility: hidden;
}

.coachmark-pick-highlight {
    position: fixed;
    z-index: 2000;
    pointer-events: none;      /* must never eat the click it is highlighting */
    border: 2px solid #1668b8;
    border-radius: 3px;
    background: rgba(22, 104, 184, 0.12);
    transition: top 60ms linear, left 60ms linear, width 60ms linear, height 60ms linear;
}

/* Elements that already carry a data-coach hook, shown for the duration of a pick so the author
   can aim at a durable anchor on purpose. Green rather than the picker's blue so the two never
   read as the same thing; dashed so it reads as "available", not "selected". Sits one layer under
   the live highlight, and never takes a pointer event. */
.coachmark-hooked-layer {
    position: fixed;
    inset: 0;
    z-index: 1999;
    pointer-events: none;
}

.coachmark-hooked-box {
    position: fixed;
    box-sizing: border-box;
    border: 2px dashed #2e7d32;
    border-radius: 4px;
    background: rgba(46, 125, 50, 0.08);
}

.coachmark-hooked-label {
    position: absolute;
    top: -1.35rem;
    left: -2px;
    padding: 1px 6px;
    border-radius: 3px 3px 0 0;
    background: #2e7d32;
    color: #ffffff;
    font-family: Consolas, "Courier New", monospace;
    font-size: 0.7rem;
    line-height: 1.25rem;
    white-space: nowrap;
}

/* A hook flush with the top of the window would have its label clipped; it reads below instead. */
.coachmark-hooked-box-flipped .coachmark-hooked-label {
    top: auto;
    bottom: -1.35rem;
    border-radius: 0 0 3px 3px;
}

/* ===== Ad Hoc Policy — Conditional Access dialogs (#7521) =====

   GLOBAL, NOT CSS-ISOLATED, DELIBERATELY. These rules used to live in each dialog's .razor.css
   and 22 of them never applied. Isolation stamps its scope attribute only on plain HTML
   elements written in the component's own markup; these dialogs are MudBlazor components all
   the way down (MudDialog > MudText / MudPaper / MudStack), so nothing carried the attribute,
   and `::deep .x` — which compiles to `[b-scope] .x` and needs a stamped ANCESTOR — matched
   nothing. Wrapping each dialog's content in a plain <div> fixed it (1e4e5d164), at the cost of
   a structural div nobody may delete. Moving the rules here removes that coupling: there is no
   isolation boundary left to fall through.

   Safe as global because every class is namespaced adhoc-ca-* and is used ONLY by the seven
   dialogs under Client/Pages/Policy/AdHoc/CA/ (checked when moved). Keep new classes in that
   namespace. The two CA views, BindingsView and DefinitionView, keep their isolated
   stylesheets: their rules target their own plain HTML elements and always applied.

   SPECIFICITY — the one thing that changed in the move. Isolated, each rule was one class
   heavier ([b-scope] .x = 0,2,0). Here a single class is 0,1,0, which TIES MudBlazor's own
   `.mud-paper { color; background-color }` and wins only because this file loads after
   MudBlazor.min.css in index.html. Do not move this file above it. Where MudBlazor is
   genuinely heavier the selector is raised to match — see the drift table below.

   Palette variables only: dark mode is a live runtime toggle, not a media query, so a literal
   colour would survive the theme flip. */

/* Emergency-access (break-glass) registry */
.adhoc-ca-bg-subtitle,
.adhoc-ca-bg-upn {
    color: var(--mud-palette-text-secondary);
}

.adhoc-ca-bg-upn {
    font-weight: 400;
}

.adhoc-ca-bg-add {
    background-color: var(--mud-palette-background-gray);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
}

.adhoc-ca-bg-verify {
    background-color: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
}

/* Tenant bindings */
.adhoc-ca-bindings-subtitle {
    color: var(--mud-palette-text-secondary);
}

.adhoc-ca-bindings-locator {
    color: var(--mud-palette-text-secondary);
    font-family: var(--mud-typography-caption-family, monospace);
}

.adhoc-ca-bindings-editor {
    background-color: var(--mud-palette-background-gray);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
}

/* Deployment review */
.adhoc-ca-review-subtitle,
.adhoc-ca-review-reason {
    color: var(--mud-palette-text-secondary);
}

.adhoc-ca-review-stat {
    min-width: 8rem;
    background-color: var(--mud-palette-background-gray);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
}

/* After .adhoc-ca-review-stat on purpose: same specificity, so order makes the blocked border win. */
.adhoc-ca-review-stat-blocked {
    border-color: var(--mud-palette-error);
}

.adhoc-ca-review-detail {
    background-color: var(--mud-palette-background-gray);
}

/* Drift diff (#5884, criterion 7). JSONPaths and JSON values are both long, so the table
   scrolls inside its own container and the dialog, and the page behind it, never scroll
   sideways. */
.adhoc-ca-drift-intro {
    color: var(--mud-palette-text-secondary);
}

.adhoc-ca-drift-scroll {
    overflow-x: auto;
    max-width: 100%;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
}

.adhoc-ca-drift-table {
    min-width: 100%;
}

/* RAISED to 0,2,1. MudBlazor styles cells with `.mud-simple-table table * tr>th` / `>td` (0,1,3),
   which sets font-weight and vertical-align. A plain `.adhoc-ca-drift-table th` (0,1,1) would
   LOSE both. The isolated rule was 0,2,1 and won; `.mud-simple-table.adhoc-ca-drift-table` puts
   it back there. Both classes sit on the same element — MudSimpleTable's root — so this matches
   exactly what the isolated rule matched. */
.mud-simple-table.adhoc-ca-drift-table th {
    color: var(--mud-palette-text-secondary);
    font-weight: 600;
    white-space: nowrap;
}

.mud-simple-table.adhoc-ca-drift-table td {
    vertical-align: top;
}

.adhoc-ca-drift-path,
.adhoc-ca-drift-value {
    display: inline-block;
    background-color: var(--mud-palette-background-gray);
    border-radius: var(--mud-default-borderradius);
    padding: 2px 6px;
    font-size: 0.8rem;
}

.adhoc-ca-drift-path {
    color: var(--mud-palette-primary);
    white-space: nowrap;
}

/* The Promote-early dialog (#7816, review A8): a long unbroken policy name or reason wraps inside the dialog. */
.adhoc-ca-promote-early-body {
    overflow-wrap: anywhere;
}

/* Inline emphasis inside a Conditional Access alert, in place of a raw <strong> (review A8). */
.adhoc-ca-emphasis {
    font-weight: 700;
}

/* Named ids (#7768): the name carries a dotted underline to say "hover for the id". */
.adhoc-ca-drift-named {
    text-decoration: underline dotted;
    cursor: help;
}

/* An id whose lookup found no object: muted and italic, from the palette so it reads in dark mode too. */
.adhoc-ca-drift-unresolved {
    color: var(--mud-palette-text-secondary);
    font-style: italic;
    cursor: help;
}

.adhoc-ca-drift-names {
    margin-top: 4px;
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary);
}

/* Wrap rather than truncate: a silently cut JSON value is worse than a tall row, because the
   operator cannot tell that anything was hidden. */
.adhoc-ca-drift-value {
    /* Monospace explicitly: the value was a <code>, monospace by default, before review A7 made it a MudText. */
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    color: var(--mud-palette-text-primary);
    white-space: pre-wrap;
    word-break: break-word;
    max-width: 32rem;
}

/* Fork a baseline */
.adhoc-ca-fork-intro {
    color: var(--mud-palette-text-secondary);
}

.adhoc-ca-fork-scroll {
    overflow-x: auto;
    max-width: 100%;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
}

/* Promote to template */
.adhoc-ca-promote-subtitle,
.adhoc-ca-promote-reason {
    color: var(--mud-palette-text-secondary);
}

.adhoc-ca-promote-confirm {
    background-color: var(--mud-palette-background-gray);
    border: 1px solid var(--mud-palette-warning);
    border-radius: var(--mud-default-borderradius);
}

/* Unmanaged policies */
.adhoc-ca-unmanaged-subtitle,
.adhoc-ca-unmanaged-muted {
    color: var(--mud-palette-text-secondary);
}

.adhoc-ca-unmanaged-accept {
    background-color: var(--mud-palette-background-gray);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
}