body {
    font-family: "Cairo", sans-serif !important;
    font-optical-sizing: auto;
    font-style: normal;
    text-shadow: 0 1px 1px rgb(115 115 115 / 22%), 0 1px 0px rgb(255 255 255 / 10%) !important;
}

.dpt-grid.mud-table {
    border: 1px solid #ececf1;
    border-top: 0;
    border-radius: 0 0 12px 12px;
    box-shadow: none;
    overflow: hidden;
}

.dpt-grid .mud-table-root {
    font-size: 13px;
}


/* The container is already overflow-y:auto — it just needs a bound to scroll against. */
.dpt-grid .mud-table-container {
    max-height: 480px;
}

.dpt-grid .mud-table-root .mud-table-head .mud-table-cell {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 8px 10px;
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #28245C;
    white-space: nowrap;
    background-color: #fafafc;
    border-bottom: 1px solid #ececf1;
}

/*.dpt-grid .mud-table-head .mud-table-cell {
    padding: 8px 10px;
    font-size: 44.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #28245C;
    white-space: nowrap;
    background: #fafafc;
    border-bottom: 1px solid #ececf1;
}*/
.dpt-grid .mud-table-body .mud-table-cell {
    padding: 12px 10px;
    vertical-align: middle;
    color: #3a3f4d;
    border-bottom: 0;
    border-top: 1px solid #f4f4f7;
}


.dpt-grid .mud-table-body .mud-table-row:hover {
    background: #f4f5fa !important;
}

/* Rows that open a record on click */
.dpt-grid-clickable .mud-table-body .mud-table-row {
    cursor: pointer;
}

.Parent-DptGrid {
    background: #28245C;
}

.mud-theme-default,
.mud-theme-light,
.mud-theme-dark {
    --mud-palette-primary: #EE316E;
    --mud-palette-secondary: #E1E6EF;
    --mud-palette-appbar-background: rgba(255,255,255,0.8);
    --mud-palette-appbar-text: #424242;
    --mud-palette-background: #f4f5fa;
    --mud-palette-black: #110e2d;
    --mud-palette-grey-light: #e8e8e8;
    --mud-palette-grey-lighter: #f4f5f7;
}

/* RTL Support */
[dir="rtl"] {
    direction: rtl;
    text-align: right;
}

    [dir="rtl"] .mud-input {
        text-align: right;
    }

    [dir="rtl"] .mud-button {
        direction: rtl;
    }

    [dir="rtl"] .mud-select {
        text-align: right;
    }

    [dir="rtl"] .mud-form-input-control {
        direction: rtl;
    }

    [dir="rtl"] .text-center {
        text-align: center !important;
    }

/* Language selector styling */
.language-selector {
    margin-bottom: 1rem;
}

.mud-card-header-avatar {
    padding-right: 0px !important;
    margin-right: 5px !important;
}

.borderRadius-10 {
    border-radius: 10px !important;
    box-shadow: 0px 2px 3px 1px #e9e3e3;
}

.mud-theme-light .tab-backgroundColor {
    background-color: #fff !important;
}

.mud-chip.mud-chip-size-medium {
    font-size: 14px !important;
    border-radius: 12px !important;
    height: 25px !important;
    line-height: 23px;
}


.mud-button {
    height: 35px;
    border-radius: 9px;
}

.mud-tabs-panels {
    background-color: #fff !important;
}

.mud-tabs-tabbar-content {
    border-bottom: 1px solid #ccc;
}

.overviewDashboardTils_header {
    font-size: 14px !important;
    font-weight: 500;
}

.overviewDashboardTils_content {
    font-size: 25px;
    font-weight: 600;
}

.mud-table-dense * .mud-table-row .mud-table-cell {
    padding: 3px 0px 3px 20px !important
}


.dptFieldset {
    border: 1px solid rgb(209 198 202);
    padding: 15px;
    border-radius: 9px;
}

.custom-select .mud-input-outlined {
    border-radius: 9px;
}

.mud-dialog {
    border-radius: 16px;
}

.my-breadcrumbs {
    font-weight: 500;
    font-size: 14px;
    color: #555;
}

.mud-table-sticky-header * .mud-table-root .mud-table-head .mud-table-cell {
    background-color: #f9f5f5 !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    height: 50px !important;
}


.mud-data-grid .mud-table-cell .column-header .sortable-column-header {
    white-space: nowrap !important;
}


.mud-data-grid .mud-table-head .mud-table-cell:nth-child(n+3) {
    border-left: 1px solid #28245C14 !important;
}

.mud-table-sticky-header * .mud-table-root .mud-table-head * .mud-table-cell:first-child {
    border-radius: 0px !important;
}

.toolbar {
    border-radius: 12px 12px;
}

.toolstrip-bar {
    border-radius: 12px 12px 0 0;
    border: 1px solid var(--mud-palette-lines-default);
    border-bottom: 0px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    /* min-height, not height: the bar grows when the command buttons wrap onto extra
       rows instead of overflowing into a horizontal scrollbar on smaller screens. */
    min-height: 40px;
    row-gap: 4px;
    background: #ffff;
}

/* The command buttons take whatever width is left over and are the only part allowed to
   shrink, so they wrap onto extra rows while Search/Refresh keep their place on the first
   row. flex-basis must be 0 — with the default `auto` the browser breaks the line (pushing
   Search down) before it shrinks this group. The automatic min-content floor is kept, so
   on a very narrow window the bar wraps as a whole instead of the buttons overlapping. */
.toolstrip-commands {
    flex: 1 1 0%;
}

.toolstrip-utilities {
    flex: 0 0 auto;
}

.toolstrip-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background-color 0.2s;
    gap: 4px; /* space between icon and text */
    cursor: pointer;
    font-size: 14px !important;
    font-weight: 650 !important;
}

    .toolstrip-item:hover {
        background: rgba(138, 0, 0, 0.12);
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
    }


    .toolstrip-item.disabled {
        opacity: 0.5;
        pointer-events: none;
    }



.mud-menu > div.mud-disabled * {
    cursor: default;
    color: #b3a3a3;
}

.toolstrip-search {
    width: 220px;
    max-width: 100%;
}

.toolstrip-separator {
    width: 1px;
    height: 24px;
    background-color: var(--mud-palette-lines-default);
    align-self: center;
}

.mud-menu-item .mud-menu-item-icon {
    margin-inline-end: 5px !important;
}

.mud-theme-secondary {
    background-color: #28245C !important;
}



.mud-table-cell {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

.mud-table-head .mud-table-row {
    background-color: #d5e0d659;
}

.mud-menu-list {
    padding: 0px 0 !important;
}

.mud-chip-filled.mud-chip-color-error {
    background-color: #FFE3E3 !important;
    color: #C62828 !important;
}

.mud-chip-filled.mud-chip-color-success {
    background-color: #E5F6EF !important;
    color: #1B806A !important;
}

.mud-chip-filled.mud-chip-color-tertiary {
    background-color: #E3F7F2 !important;
    color: #1EC8A5 !important;
}

.mud-chip-filled.mud-chip-color-warning {
    background-color: #FFF3E0 !important;
    color: #FF9800 !important;
}

.mud-chip-filled.mud-chip-color-info {
    background-color: #EAF4FE !important;
    color: #1E88E5 !important;
}

/*.mud-chip-filled.mud-chip-color-primary {
    background-color: #FFE3E3 !important;
    color: #C62828 !important;
}*/

.mud-chip-filled.mud-chip-color-primary {
    background-color: #FDE7EF !important;
    color: #EE316E !important;
}

.successSpan {
    background-color: #E5F6EF;
    padding-right: 10px;
    padding-left: 10px;
    border-radius: 10px;
    color: #1B806A;
}


.errorSpan {
    background-color: #FFE3E3 !important;
    color: #C62828 !important;
    padding-right: 10px;
    padding-left: 10px;
    border-radius: 10px;
}

#components-reconnect-modal {
    display: none !important;
}

.compliance-markdown-content {
    line-height: 1.6;
    word-break: break-word;
}

    .compliance-markdown-content h1,
    .compliance-markdown-content h2,
    .compliance-markdown-content h3,
    .compliance-markdown-content h4,
    .compliance-markdown-content h5,
    .compliance-markdown-content h6 {
        margin: 16px 0 8px;
        font-weight: 600;
        line-height: 1.3;
    }

    .compliance-markdown-content h1 {
        font-size: 1.5rem;
    }

    .compliance-markdown-content h2 {
        font-size: 1.3rem;
    }

    .compliance-markdown-content h3 {
        font-size: 1.15rem;
    }

    .compliance-markdown-content p {
        margin: 0 0 12px;
    }

    .compliance-markdown-content ul,
    .compliance-markdown-content ol {
        margin: 0 0 12px;
        padding-left: 24px;
    }

    .compliance-markdown-content li {
        margin-bottom: 4px;
    }

    .compliance-markdown-content blockquote {
        margin: 0 0 12px;
        padding: 4px 16px;
        border-left: 3px solid #EE316E;
        background-color: #f8f9fc;
    }

    .compliance-markdown-content pre {
        margin: 0 0 12px;
        padding: 12px;
        overflow-x: auto;
        border-radius: 6px;
        background-color: #f4f5f7;
    }

    .compliance-markdown-content code {
        padding: 1px 4px;
        border-radius: 4px;
        background-color: #f4f5f7;
        font-family: Consolas, Monaco, "Courier New", monospace;
        font-size: 0.9em;
    }

    .compliance-markdown-content pre code {
        padding: 0;
        background-color: transparent;
    }

    .compliance-markdown-content a {
        color: #EE316E;
    }

/* Filter pills — a styled activator over a MudMenu. Shared by the PRM dashboard
   header filters and the Deals List region filter. */
.prm-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid #e3e5ee;
    border-radius: 9px;
    padding: 8px 12px;
    font-size: 13px;
    line-height: 1;
    color: #3a3f4d;
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
    transition: border-color .15s ease, background-color .15s ease;
}

    .prm-pill:hover {
        border-color: #cfd2de;
        background: #fbfbfd;
    }

.prm-pill-disabled {
    opacity: .55;
    pointer-events: none;
}

.prm-pill-label {
    color: #7a8091;
    font-weight: 500;
}

.prm-pill-value {
    color: #3a3f4d;
    font-weight: 700;
}

.prm-pill .prm-pill-lead {
    width: 18px;
    height: 18px;
    color: #7a8091;
}

.prm-pill .prm-pill-chevron {
    width: 18px;
    height: 18px;
    color: #a2a7b5;
    margin-left: 2px;
}


/* ── KPI cards (mirror .kpi-card) ── */
.poc-kpi-card {
    min-height: 118px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: #fff;
    border: 1px solid #ececf1;
    border-radius: 12px;
    padding: 14px 16px;
}

.poc-kpi-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 34px;
}

.poc-kpi-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
}

.poc-ic-navy {
    color: #5B3E9E;
    background: #EDEBFB;
}

.poc-ic-amber {
    color: #B58100;
    background: #FFF3CD;
}

.poc-ic-green {
    color: #1B806A;
    background: #E5F6EF;
}

.poc-ic-blue {
    color: #1F5FA5;
    background: #E6F0FB;
}

.poc-kpi-value {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: #28245C;
}

.poc-kpi-title {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: #7a8091;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* ── Panels (mirror .prm-panel) ── */
.poc-panel.mud-paper,
.poc-panel.mud-card {
    background: #fff;
    border: 1px solid #ececf1;
    border-radius: 14px;
    box-shadow: none;
    overflow: hidden;
}

.poc-panel-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

.poc-panel-icon {
    color: #EE316E;
    font-size: 19px;
}

.poc-panel-title {
    font-size: 15px;
    font-weight: 800;
    color: #28245C;
    letter-spacing: -0.01em;
}

.poc-panel-note {
    margin-left: auto;
    font-size: 11.5px;
    color: #a2a7b5;
}

/* List page header panel */
.poc-header-title {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #28245C;
}

.poc-header-sub {
    font-size: 12.5px;
    font-weight: 500;
    color: #7a8091;
}

/* ── Detail grid (mockup detail modal grid) ── */
.poc-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 24px;
}

@media (max-width: 720px) {
    .poc-detail-grid {
        grid-template-columns: 1fr;
    }
}

.poc-detail-item .poc-k {
    font-size: 11px;
    color: #a2a7b5;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 3px;
}

.poc-detail-item .poc-v {
    font-size: 13.5px;
    font-weight: 600;
    color: #28245C;
}

/* Clickable identity cell in the POC grid (the customer link that opens the row). It has to read as the
   record's identifier first and as a link second, so it takes the panel navy at full weight instead of the
   palette's link pink — the same treatment the Quote Builder grids give their id cells. Paired with
   Color="Color.Inherit" on the MudLink, because MudBlazor's .mud-*-text colour utilities are !important. */
.poc-link-strong {
    font-weight: 700;
    color: #28245C;
}

.poc-criteria-box {
    background: #fafafc;
    border: 1px solid #ececf1;
    border-radius: 9px;
    padding: 12px 14px;
    font-size: 13px;
    color: #565c6e;
    line-height: 1.5;
}

/* ── Filter chips wrapper — keep MudChipSet behaviour, tighten spacing ── */
.poc-filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

    .poc-filters .mud-chip.mud-chip-selected {
        background-color: #28245C !important;
        color: #fff !important;
    }

    .poc-filters .mud-chip {
        font-weight: 700;
        background-color: #fff !important;
    }


.poc-grid .mud-table-root {
    font-size: 12.5px;
}

.poc-grid .mud-table-head .mud-table-cell {
    padding: 8px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #a2a7b5;
    white-space: nowrap;
    border-bottom: 0;
    background: #fff;
}

.poc-grid .mud-table-body .mud-table-cell {
    padding: 9px 8px;
    color: #3a3f4d;
    border-bottom: 0;
    border-top: 1px solid #f4f4f7;
}

/* Neutralise DptGrid's Striped=true so rows read clean like the PRM table */
.poc-grid.mud-table-striped .mud-table-body .mud-table-row:nth-of-type(odd),
.poc-grid.mud-table-striped .mud-table-body .mud-table-row:nth-of-type(even) {
    background: transparent;
}

.poc-grid .mud-table-body .mud-table-row:hover {
    background: #fbfbfd !important;
}

/* ── Status dot-pill (mockup status pill) ── */
.poc-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    border-radius: 20px;
    font-size: 11.5px;
    font-weight: 700;
}

    .poc-status-pill .poc-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
    }

/* ── Dialogs (mockup modal: pink icon head, sectioned body, light footer) ── */
.poc-dialog-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.poc-dialog-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #FDE9F1;
    color: #EE316E;
    flex: none;
}

.poc-dialog-title {
    font-size: 16px;
    font-weight: 800;
    color: #28245C;
    line-height: 1.2;
}

.poc-dialog-sub {
    font-size: 12px;
    color: #a2a7b5;
    margin-top: 2px;
}

.poc-dialog .mud-dialog-title {
    border-bottom: 1px solid #ececf1;
    padding-bottom: 16px;
}

.poc-dialog .mud-dialog-actions {
    background: #fafafc;
    border-top: 1px solid #ececf1;
    padding: 12px 24px;
    margin: 0;
}

/* Details dialog sits narrower than MudBlazor's Medium, matching the design's 680px modal. */
.poc-dialog-detail.mud-dialog {
    max-width: 680px;
}

/* Floor height shared by both tab panels of the details dialog, so the modal does not visibly shrink when
   the user switches from POC Details to Session Updates. MudTabs has no equal-height parameter (MaxHeight
   is its only sizing knob and would cap, not floor), hence a class rather than a component property.
   360px comes from the two panels' composed heights: POC Details is ~345px in its base state (16px pt-4 +
   a four-row .poc-detail-grid at ~40px per row with 16px gaps + a 33px my-4 divider + the ~88px criteria
   block), and Session Updates tops out at ~358px (16px pt-4 + the 28px "Newest first" caption + the 240px
   .poc-updates-list cap + the ~74px post-update box) while collapsing to ~150px on an empty feed. So 360px
   holds the dialog steady in the common case with no dead space under a saturated feed. It is capped
   against the viewport because .mud-dialog-content scrolls on overflow: a bare pixel floor would give a
   short window a dialog-level scrollbar nested around the feed's own. Chrome around the panel (title ~77px,
   48px tab bar, ~54px footer, 16px content padding and the 64px --mud-appbar-height the dialog's max-height
   subtracts) costs ~260px, so 46vh stays inside the available height down to a ~480px-tall viewport and
   yields the full 360px from ~783px upward. Deliberately no max-height — the feed owns its own scrolling. */
.poc-tab-panel {
    min-height: min(360px, 46vh);
}

/* ── Row icon action (mockup .icon-action: a bordered square rather than a bare glyph) ── */
.poc-icon-action.mud-icon-button {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid #ececf1;
    border-radius: 7px;
    background: #fff;
    color: #565c6e;
}

    .poc-icon-action.mud-icon-button:hover {
        background: #fafafc;
    }

.poc-icon-action .mud-icon-root {
    font-size: 16px;
}

.poc-updates-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 240px;
    overflow-y: auto;
    padding-right: 2px;
}

.poc-update-item {
    background: #fafafc;
    border: 1px solid #ececf1;
    border-radius: 9px;
    padding: 10px 12px;
    font-size: 12.5px;
    color: #3a3f4d;
    line-height: 1.5;
}

    .poc-update-item .poc-update-meta {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        font-size: 11px;
        color: #a2a7b5;
        margin-bottom: 4px;
    }

        .poc-update-item .poc-update-meta strong {
            color: #565c6e;
            font-weight: 700;
        }