.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;
}