.MinWidth30 {
    min-width: 30px;
}

/* Workflow template Add-dialog copy-from picker: let the popover show ~20 rows before scrolling */
.workflow-template-source-list {
    max-height: 520px;
}

/* 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*/
}

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