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

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

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