html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* Online top-up: compact the actual MudDialog footer container. */
.otu-dialog.mud-dialog .mud-dialog-actions,
.otu-dialog.my-Dialog.mud-dialog .mud-dialog-actions {
    box-sizing: border-box;
    min-height: 46px !important;
    padding-top: 3px !important;
    padding-bottom: 3px !important;
}

/* Manual credit dialog: keep footer actions fixed outside content scroll */
.mcd-dialog.mud-dialog,
.mcd-dialog.my-Dialog.mud-dialog {
    display: flex !important;
    flex-direction: column !important;
    max-height: min(92vh, 860px) !important;
    overflow: hidden !important;
}

.mcd-dialog.mud-dialog .mud-dialog-title,
.mcd-dialog.my-Dialog.mud-dialog .mud-dialog-title {
    flex: 0 0 auto !important;
}

.mcd-dialog.mud-dialog .mud-dialog-content,
.mcd-dialog.my-Dialog.mud-dialog .mud-dialog-content {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

.mcd-dialog.mud-dialog .mud-dialog-actions,
.mcd-dialog.my-Dialog.mud-dialog .mud-dialog-actions {
    flex: 0 0 auto !important;
    position: relative;
    z-index: 2;
    min-height: 44px !important;
    padding: 6px 16px !important;
    border-top: 1px solid #ecebf7;
    background: #fcfbff !important;
}

.mcd-dialog.mud-dialog .mud-dialog-actions .mud-button-root,
.mcd-dialog.my-Dialog.mud-dialog .mud-dialog-actions .mud-button-root {
    min-height: 34px !important;
    height: 34px !important;
    padding-inline: 12px !important;
    font-size: 12px !important;
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: #0071c1;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

    .loading-progress circle {
        fill: none;
        stroke: #e0e0e0;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: #1b6ec2;
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }

code {
    color: #c02d76;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}
.dynamic-template-page {
    direction: rtl;
}

.dynamic-template-card {
    border: 1px solid rgba(148, 163, 184, .2);
    border-radius: var(--dt-card-radius, 16px);
    padding: 14px;
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.94));
}

.dynamic-template-card.designer {
    border-color: rgba(79, 70, 229, .24);
}

.dynamic-token-grid {
    align-items: stretch;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    max-height: 290px;
    overflow: auto;
    padding: 10px;
    border: 1px solid rgba(148, 163, 184, .18);
    border-radius: 14px;
    background: rgba(248, 250, 252, .68);
    box-sizing: border-box;
    min-width: 0;
    width: 100%;
}

.dynamic-token-grid.compact {
    max-height: 260px;
}

.contact-fixed-fields-card {
    min-width: 0;
}

.dynamic-fields-accordion {
    display: block;
}

.dynamic-fields-accordion-summary {
    cursor: pointer;
    list-style: none;
    margin-bottom: 0 !important;
    outline: none;
}

.dynamic-fields-accordion-summary::-webkit-details-marker {
    display: none;
}

.contact-fixed-fields-header.dynamic-fields-accordion-summary {
    align-items: center;
    grid-template-columns: 34px minmax(0, 1fr) 24px;
}

.custom-fields-accordion-summary {
    grid-template-columns: 34px minmax(0, 1fr) 24px;
}

.dynamic-fields-accordion[open] > .dynamic-fields-accordion-summary {
    margin-bottom: 12px !important;
}

.dynamic-fields-accordion-toggle {
    align-items: center;
    color: #64748b;
    display: inline-flex;
    justify-content: center;
    transition: transform .18s ease;
}

.dynamic-fields-accordion[open] > .dynamic-fields-accordion-summary .dynamic-fields-accordion-toggle {
    transform: rotate(180deg);
}

.dynamic-fields-accordion-content {
    min-width: 0;
}

.contact-fixed-fields-header {
    align-items: start;
    display: grid;
    gap: 8px;
    grid-template-columns: 34px minmax(0, 1fr);
    margin-bottom: 12px;
    width: 100%;
}

.contact-fixed-fields-heading {
    min-width: 0;
}

.contact-fixed-fields-title-row {
    align-items: center;
    display: flex;
    gap: 8px;
    justify-content: space-between;
    min-width: 0;
}

.contact-fixed-fields-header .mud-typography-caption {
    color: #94a3b8;
    display: block;
    line-height: 1.8;
    margin-top: 2px;
}

.contact-fixed-fields-grid {
    align-items: stretch;
    background: rgba(248, 250, 252, .78);
    border: 1px solid rgba(99, 102, 241, .15);
    border-radius: 12px;
    box-sizing: border-box;
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-height: 330px;
    min-width: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 8px;
    width: 100%;
}

.contact-fixed-field {
    align-items: center;
    background: linear-gradient(145deg, #eef2ff, #ffffff 72%);
    border: 1px solid rgba(99, 102, 241, .42);
    border-radius: 10px;
    box-sizing: border-box;
    cursor: grab;
    display: flex;
    gap: 7px;
    justify-content: space-between;
    min-height: 52px;
    min-width: 0;
    overflow: hidden;
    padding: 7px 9px;
    position: relative;
    transition: background .16s ease, border-color .16s ease, box-shadow .16s ease;
    user-select: none;
    width: 100%;
}

.contact-fixed-field:hover {
    background: #eef2ff;
    border-color: #6366f1;
    box-shadow: 0 5px 12px rgba(79, 70, 229, .1);
}

.contact-fixed-field:active {
    cursor: grabbing;
}

.contact-fixed-field-content {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}

.contact-fixed-field-title,
.contact-fixed-field-token {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.contact-fixed-field-title {
    color: #1e293b;
    font-size: 11.5px;
    font-weight: 800;
}

.contact-fixed-field-token {
    color: #64748b;
    direction: ltr;
    font-size: 9.5px;
    margin-top: 3px;
    text-align: left;
}

.contact-fixed-field-add {
    align-items: center;
    background: rgba(79, 70, 229, .09);
    border-radius: 50%;
    color: #4f46e5;
    display: inline-flex;
    flex: 0 0 22px;
    font-size: 13px;
    font-weight: 900;
    height: 22px;
    justify-content: center;
    width: 22px;
}

.contact-fixed-field.dragging {
    opacity: .55;
}

.custom-contact-fields-grid {
    border-color: rgba(20, 184, 166, .2);
    max-height: 280px;
}

.contact-fixed-field.custom-contact-field {
    background: linear-gradient(145deg, #ecfdf5, #ffffff 72%);
    border-color: rgba(20, 184, 166, .42);
}

.contact-fixed-field.custom-contact-field:hover {
    background: #ecfdf5;
    border-color: #14b8a6;
    box-shadow: 0 5px 12px rgba(13, 148, 136, .12);
}

.custom-contact-field .contact-fixed-field-title {
    color: #134e4a;
}

.custom-contact-field .contact-fixed-field-add {
    background: rgba(20, 184, 166, .12);
    color: #0f766e;
}

.dynamic-token-card {
    align-items: center;
    border: 1px solid rgba(99, 102, 241, .3);
    border-radius: 13px;
    background: linear-gradient(145deg, #ffffff, #f8fafc);
    box-shadow: 0 8px 18px rgba(15, 23, 42, .045);
    box-sizing: border-box;
    color: #1e293b;
    cursor: grab;
    display: flex;
    gap: 8px;
    justify-content: space-between;
    min-height: 58px;
    overflow: hidden;
    padding: 10px 12px;
    position: relative;
    text-align: right;
    transition: .16s ease;
    width: 100%;
    user-select: none;
}

.dynamic-token-card:active {
    cursor: grabbing;
}

.dynamic-token-card:hover {
    background: #eef2ff;
    border-color: rgba(79, 70, 229, .72);
    box-shadow: 0 12px 24px rgba(79, 70, 229, .12);
    transform: translateY(-2px);
}

.dynamic-token-card .dynamic-token-title {
    display: block;
    font-size: 12px;
    font-weight: 900;
    color: #0f172a;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dynamic-token-card small {
    color: #64748b;
    display: block;
    direction: ltr;
    font-size: 10px;
    margin-top: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dynamic-token-content {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}

.dynamic-token-add {
    align-items: center;
    background: rgba(15, 23, 42, .04);
    border-radius: 999px;
    color: #64748b;
    display: inline-flex;
    flex: 0 0 24px;
    font-size: 14px;
    font-weight: 900;
    height: 24px;
    justify-content: center;
    transition: .16s ease;
    width: 24px;
}

.dynamic-token-card.custom-field {
    border-color: rgba(20, 184, 166, .42);
    background: linear-gradient(135deg, rgba(240, 253, 250, .88), #ffffff 72%);
    box-shadow: 0 4px 10px rgba(15, 118, 110, .055);
    min-height: 42px;
    padding: 7px 9px;
}

.dynamic-token-card.fixed {
    border-color: rgba(99, 102, 241, .55);
    background: linear-gradient(145deg, #eef2ff, #ffffff 70%);
}

.dynamic-counter {
    align-items: center;
    color: #64748b;
    display: flex;
    font-size: 12px;
    justify-content: space-between;
    margin-top: 4px;
}

.used-token-panel {
    border: 1px dashed rgba(99, 102, 241, .35);
    border-radius: 14px;
    margin-top: 10px;
    padding: 10px;
}

.used-token-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.empty-token-box {
    background: rgba(241, 245, 249, .75);
    border-radius: 10px;
    color: #64748b;
    font-size: 12px;
    margin-top: 8px;
    padding: 12px;
    text-align: center;
    grid-column: 1 / -1;
}

.dynamic-preview {
    background: #0f172a;
    border-radius: 14px;
    color: #e2e8f0;
    line-height: 2;
    min-height: 120px;
    padding: 14px;
    white-space: pre-wrap;
}

.dynamic-template-modern {
    --dt-card-border: 1px solid color-mix(in srgb, var(--mud-palette-primary, #685dd8) 22%, #e2e0ee);
    --dt-card-border-dashed: 1px dashed color-mix(in srgb, var(--mud-palette-primary, #685dd8) 46%, #bfb5e0);
    --dt-card-radius: 16px;
    background: linear-gradient(135deg, rgba(248, 250, 252, .95), rgba(239, 246, 255, .55));
    border-radius: 18px;
    padding: 4px;
}

.dynamic-template-modern .dynamic-template-card,
.dynamic-template-modern .dynamic-form-actions,
.dynamic-template-modern .mud-paper.dynamic-template-card,
.dynamic-template-modern .mud-paper.dynamic-form-actions {
    border: var(--dt-card-border) !important;
    border-radius: var(--dt-card-radius) !important;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .055);
}

.dynamic-template-modern .used-token-card,
.dynamic-template-modern .mud-paper.used-token-card {
    border: var(--dt-card-border-dashed) !important;
    border-radius: var(--dt-card-radius) !important;
    box-shadow: none;
}

.dynamic-template-side {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.template-step-card {
    position: relative;
    overflow: hidden;
}

.template-step-card::before,
.used-token-card::before,
.designer::before {
    display: none;
}

.dynamic-card-title {
    align-items: center;
    display: flex;
    gap: 9px;
    margin-bottom: 12px;
    width: 100%;
}

.dynamic-field-header {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
}

.dynamic-card-title.compact-title {
    margin-bottom: 0;
}

.dynamic-card-title .mud-typography-caption {
    color: #94a3b8;
    line-height: 1.8;
}

.dynamic-step-badge,
.dynamic-section-icon {
    align-items: center;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    color: #4f46e5;
    display: inline-flex;
    flex: 0 0 34px;
    font-size: 14px;
    font-weight: 900;
    height: 34px;
    justify-content: center;
}

.dynamic-step-badge.contact,
.dynamic-section-icon.contact {
    background: transparent;
    color: #4f46e5;
}

.dynamic-step-badge.custom,
.dynamic-section-icon.custom {
    background: transparent;
    color: #0f766e;
}

.dynamic-step-badge.designer,
.dynamic-section-icon.designer {
    background: transparent;
    color: #7c3aed;
}

.dynamic-count-chip {
    justify-self: end;
    margin: 0;
    white-space: nowrap;
}

.dynamic-designer-head {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
    margin-bottom: 12px;
    min-width: 0;
    width: 100%;
}

.dynamic-designer-head .dynamic-card-title {
    flex: 1 1 220px;
    margin-bottom: 0;
    min-width: 0;
}

.dynamic-designer-head .dynamic-card-title > div {
    min-width: 0;
}

.dynamic-designer-head .dynamic-card-title .mud-typography-caption {
    display: block;
    line-height: 1.7;
    overflow-wrap: anywhere;
    white-space: normal;
}

.dynamic-help-pill {
    align-items: center;
    background: #f8fafc;
    border: 1px solid rgba(99, 102, 241, .18);
    border-radius: 999px;
    color: #475569;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 700;
    gap: 4px;
    justify-content: center;
    padding: 6px 10px;
    white-space: nowrap;
}

.peer-designer-actions {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

@media (max-width: 900px) {
    .dynamic-designer-head {
        align-items: stretch;
        flex-direction: column;
        gap: 10px;
    }

    .dynamic-designer-head .dynamic-card-title {
        flex: 1 1 auto;
        width: 100%;
    }

    .dynamic-help-pill,
    .peer-designer-actions {
        justify-content: center;
        width: 100%;
    }

    .dynamic-help-pill {
        box-sizing: border-box;
        font-size: .72rem;
        min-height: 36px;
        padding: 8px 12px;
        white-space: normal;
    }

    .peer-designer-actions {
        justify-content: stretch;
    }

    .peer-designer-actions .dynamic-help-pill {
        flex: 1 1 auto;
    }
}

@media (max-width: 600px) {
    .dynamic-designer-head .dynamic-card-title .mud-typography-caption {
        font-size: .72rem !important;
        line-height: 1.65 !important;
    }

    .dynamic-help-pill {
        font-size: .68rem;
    }
}

.dynamic-guide-alert {
    border-color: rgba(59, 130, 246, .2) !important;
    background: rgba(239, 246, 255, .72) !important;
}

.dynamic-token-grid.custom {
    gap: 6px;
    max-height: 280px;
    padding: 7px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dynamic-token-card:hover .dynamic-token-add {
    background: rgba(79, 70, 229, .12);
    color: #4f46e5;
}

.dynamic-token-card.fixed:hover {
    background: #eef2ff;
}

.dynamic-token-card.custom-field:hover {
    background: linear-gradient(135deg, #ccfbf1, #ffffff 78%);
    border-color: rgba(13, 148, 136, .78);
    box-shadow: 0 8px 16px rgba(20, 184, 166, .13);
}

.dynamic-token-card.custom-field .dynamic-token-title {
    color: #134e4a;
    font-size: 11.5px;
}

.dynamic-token-card.custom-field small {
    color: #64748b;
    font-size: 9.5px;
    margin-top: 1px;
}

.dynamic-editor-dropzone {
    border: 1px dashed transparent;
    border-radius: 16px;
    padding: 6px;
    position: relative;
    transition: .18s ease;
}

.dynamic-editor-dropzone.drag-over {
    background: rgba(99, 102, 241, .06);
    border-color: rgba(79, 70, 229, .45);
    box-shadow: inset 0 0 0 2px rgba(99, 102, 241, .08);
}

.used-token-item.drag-over {
    border-color: #4f46e5;
    box-shadow: inset 0 0 0 2px rgba(79, 70, 229, .14);
}

.dynamic-token-card.dragging,
.used-token-item.dragging {
    opacity: .55;
}

.drop-hint {
    align-items: center;
    background: rgba(255,255,255,.9);
    border: 1px solid rgba(148, 163, 184, .25);
    border-radius: 999px;
    bottom: 14px;
    color: #94a3b8;
    display: inline-flex;
    font-size: 11px;
    gap: 4px;
    left: 14px;
    padding: 4px 9px;
    pointer-events: none;
    position: absolute;
}

.used-token-card {
    border: 1px dashed color-mix(in srgb, var(--mud-palette-primary, #685dd8) 46%, #bfb5e0);
    margin-top: 10px;
}

.used-token-head {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 12px;
    justify-content: space-between;
    min-width: 0;
    width: 100%;
}

.used-token-head-main {
    align-items: flex-start;
    display: flex;
    flex: 1 1 220px;
    gap: 9px;
    min-width: 0;
}

.used-token-head-text {
    min-width: 0;
}

.used-token-head-text .mud-typography-caption {
    color: #94a3b8;
    display: block;
    line-height: 1.6;
    margin-top: 2px;
    white-space: normal;
}

.used-token-head-actions {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
}

.used-token-head-actions .dynamic-count-chip,
.used-token-head-actions .mud-chip {
    margin: 0 !important;
    white-space: nowrap;
}

.used-token-card .dynamic-card-title {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
}

@media (max-width: 900px) {
    .used-token-head {
        align-items: stretch;
        flex-direction: column;
        gap: 10px;
    }

    .used-token-head-main {
        flex: 1 1 auto;
        width: 100%;
    }

    .used-token-head-actions {
        justify-content: space-between;
        width: 100%;
    }

    .used-token-head-text .mud-typography-subtitle2 {
        font-size: .9rem !important;
        line-height: 1.3 !important;
    }

    .used-token-head-text .mud-typography-caption {
        font-size: .72rem !important;
        line-height: 1.5 !important;
    }

    .used-token-list.modern {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .used-token-head-actions .dynamic-count-chip,
    .used-token-head-actions .mud-chip {
        font-size: .68rem !important;
        height: 26px !important;
        min-height: 26px !important;
    }
}

.used-token-list.modern {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 12px;
}

.used-token-item {
    align-items: center;
    border: 1px solid rgba(100, 116, 139, .36);
    border-radius: 14px;
    cursor: grab;
    display: grid;
    gap: 5px;
    grid-template-columns: 20px minmax(0, 1fr) auto auto;
    min-height: 36px;
    padding: 5px 7px;
    transition: .16s ease;
    user-select: none;
}

.used-token-item:hover {
    box-shadow: 0 8px 20px rgba(15, 23, 42, .07);
    transform: translateY(-1px);
}

.used-token-item.fixed-token {
    background: linear-gradient(135deg, rgba(238, 242, 255, .95), rgba(255,255,255,.96));
    border-color: rgba(99, 102, 241, .48);
}

.used-token-item.custom-token {
    background: linear-gradient(135deg, rgba(236, 254, 255, .95), rgba(255,255,255,.96));
    border-color: rgba(20, 184, 166, .48);
}

.token-drag-handle {
    color: #94a3b8;
    display: inline-flex;
}

.token-order {
    background: rgba(15, 23, 42, .06);
    border-radius: 999px;
    color: #475569;
    font-size: 11px;
    font-weight: 800;
    padding: 4px 7px;
    text-align: center;
}

.token-title {
    color: #1e293b;
    font-size: 11.5px;
    font-weight: 850;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.token-label {
    display: block;
    min-width: 0;
    overflow: hidden;
}

.token-key {
    color: #94a3b8;
    direction: ltr;
    display: block;
    font-size: 9px;
    font-weight: 500;
    margin-top: 1px;
    overflow: hidden;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.token-source {
    border-radius: 999px;
    font-size: 9.5px;
    font-weight: 800;
    padding: 3px 6px;
}

.fixed-token .token-source {
    background: rgba(99, 102, 241, .12);
    color: #4338ca;
}

.custom-token .token-source {
    background: rgba(20, 184, 166, .14);
    color: #0f766e;
}

.token-actions {
    align-items: center;
    display: flex;
    gap: 0;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.soft-preview .dynamic-preview {
    background: linear-gradient(135deg, #f0fdf4, #eff6ff 48%, #fff7ed);
    border: 1px solid rgba(34, 197, 94, .18);
    color: #334155;
    font-size: 13px;
    min-height: 140px;
}

.soft-preview .dynamic-preview.is-placeholder {
    color: #94a3b8;
    font-style: italic;
}

@media (max-width: 600px) {
    .dynamic-token-grid,
    .dynamic-token-grid.custom,
    .used-token-list.modern,
    .contact-fixed-fields-grid {
        grid-template-columns: 1fr;
    }
}

.soft-preview {
    margin-top: 10px;
}

.dynamic-form-actions {
    background: rgba(255,255,255,.88);
    border: 1px solid rgba(148, 163, 184, .18);
    border-radius: var(--dt-card-radius, 16px);
    margin-top: 10px;
    padding: 10px 12px;
}

.modern-black-tooltip .mud-tooltip {
    background: #111827 !important;
    border-radius: 10px !important;
    color: #fff !important;
    font-size: 11px !important;
    padding: 7px 10px !important;
}

/* ===== Peer-to-Peer (ارسال نظیر به نظیر) ===== */
.peer-p2p-page {
    background: linear-gradient(145deg, rgba(236, 253, 245, .9), rgba(239, 246, 255, .7) 45%, rgba(255, 251, 235, .55));
    border-radius: 18px;
    padding: 6px;
}

.peer-guide-alert {
    border-radius: 14px !important;
    border: 1px solid rgba(14, 165, 233, .18) !important;
}

/* Phone numbers file upload guide */
.phone-file-upload {
    margin-top: 4px;
}

.phone-file-guide {
    background:
        radial-gradient(circle at top right, rgba(14, 165, 233, .12), transparent 42%),
        linear-gradient(180deg, #f8fbff 0%, #ffffff 70%);
    border: 1px solid rgba(14, 165, 233, .18);
    border-radius: 16px !important;
    overflow: hidden;
    padding: 14px 16px !important;
}

.phone-file-guide-click-hint {
    color: #0284c7;
    font-weight: 600;
    margin-inline-start: 4px;
}

.phone-file-guide-header {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: space-between;
    margin-bottom: 0;
}

.phone-file-guide-toggle {
    cursor: pointer;
    user-select: none;
}

.phone-file-guide-header-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.phone-file-guide-chevron-wrap {
    align-items: center;
    background: rgba(14, 165, 233, .14);
    border: 1px solid rgba(14, 165, 233, .28);
    border-radius: 999px;
    display: inline-flex;
    flex-shrink: 0;
    height: 26px;
    justify-content: center;
    width: 26px;
}

.phone-file-guide-chevron {
    color: #0284c7 !important;
    cursor: pointer;
    font-size: 1.15rem !important;
}

.phone-file-guide-body {
    border-top: 1px dashed rgba(14, 165, 233, .35);
    margin-top: 12px;
    padding-top: 12px;
}

.phone-file-guide-title {
    align-items: center;
    display: flex;
    gap: 12px;
    min-width: 0;
}

.phone-file-guide-icon {
    align-items: center;
    background: linear-gradient(135deg, #0ea5e9, #14b8a6);
    border-radius: 50%;
    color: #fff !important;
    display: inline-flex;
    flex-shrink: 0;
    height: 32px;
    justify-content: center;
    width: 32px;
}

.phone-file-guide-icon .mud-icon-root {
    color: #fff !important;
    font-size: 1.1rem !important;
}

.phone-file-guide-sub {
    color: #64748b !important;
    display: block;
    margin-top: 2px;
}

.phone-file-sample-btn {
    background: rgba(14, 165, 233, .06) !important;
    border-color: rgba(14, 165, 233, .35) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    color: #0369a1 !important;
    font-size: .78rem !important;
    font-weight: 500 !important;
    text-transform: none !important;
}

.phone-file-sample-btn .mud-button-label,
.phone-file-sample-btn .mud-icon-root {
    color: #0369a1 !important;
    font-weight: 500 !important;
}

.phone-file-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.phone-file-tip {
    align-items: flex-start;
    background: rgba(255, 255, 255, .85);
    border: 1px solid rgba(148, 163, 184, .22);
    border-radius: 10px;
    display: flex;
    gap: 8px;
    height: 100%;
    min-height: 0;
    padding: 8px 10px;
}

.phone-file-tip strong {
    color: #0f172a;
    display: block;
    font-size: .76rem;
    line-height: 1.3;
    margin-bottom: 2px;
}

.phone-file-tip span {
    color: #64748b;
    display: block;
    font-size: .68rem;
    line-height: 1.55;
}

.phone-file-action-btn {
    border-radius: 10px !important;
    font-size: .875rem !important;
    font-weight: 600 !important;
    min-height: 38px;
    padding: 6px 16px !important;
    text-transform: none !important;
}

.phone-file-selected-chip {
    align-items: center;
    background: rgba(99, 102, 241, .08);
    border: 1px solid rgba(99, 102, 241, .5);
    border-radius: 999px;
    color: #4f46e5;
    display: inline-flex;
    gap: 6px;
    max-width: min(280px, 100%);
    min-height: 30px;
    padding: 2px 4px 2px 8px;
}

.phone-file-selected-chip-icon {
    color: #6366f1 !important;
    flex-shrink: 0;
    font-size: 1rem !important;
}

.phone-file-selected-chip-name {
    flex: 1;
    font-size: .78rem;
    font-weight: 600;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.phone-file-selected-chip-close {
    background: #6366f1 !important;
    border-radius: 50% !important;
    color: #fff !important;
    height: 20px !important;
    min-width: 20px !important;
    padding: 0 !important;
    width: 20px !important;
}

.phone-file-selected-chip-close .mud-icon-root {
    color: #fff !important;
    font-size: .85rem !important;
}

.phone-file-progress {
    background: linear-gradient(135deg, rgba(14, 165, 233, .08), rgba(20, 184, 166, .1));
    border: 1px solid rgba(14, 165, 233, .18);
    border-radius: 12px;
    padding: 10px 12px;
}

.phone-file-progress-meta {
    align-items: center;
    color: #0f766e;
    display: flex;
    font-size: .75rem;
    justify-content: space-between;
    margin-bottom: 8px;
}

.phone-file-progress-bar {
    border-radius: 999px !important;
    height: 10px !important;
    overflow: hidden;
}

.phone-file-progress-bar .mud-progress-linear-bar {
    background-color: transparent !important;
    background-image:
        linear-gradient(
            45deg,
            rgba(255, 255, 255, .28) 25%,
            transparent 25%,
            transparent 50%,
            rgba(255, 255, 255, .28) 50%,
            rgba(255, 255, 255, .28) 75%,
            transparent 75%,
            transparent
        ),
        linear-gradient(90deg, #0ea5e9 0%, #14b8a6 28%, #6366f1 55%, #f59e0b 78%, #0ea5e9 100%) !important;
    background-size: 18px 18px, 200% 100% !important;
    animation: phone-file-progress-stripes .9s linear infinite;
}

@keyframes phone-file-progress-stripes {
    from {
        background-position: 18px 0, 0 0;
    }

    to {
        background-position: 0 0, -100% 0;
    }
}

.phone-file-result-alert {
    border-radius: 12px !important;
}

/* Dual list editor (manual numbers) */
.dual-list-editor {
    margin-top: 12px;
}

.dual-list-guide {
    background:
        radial-gradient(circle at top left, rgba(14, 165, 233, .1), transparent 42%),
        linear-gradient(180deg, #f8fbff 0%, #ffffff 72%);
    border: 1px solid rgba(14, 165, 233, .16);
    border-radius: 16px;
    margin-bottom: 14px;
    overflow: hidden;
    padding: 14px 16px 10px;
}

.dual-list-guide-top {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: space-between;
    margin-bottom: 8px;
}

.dual-list-guide-title {
    align-items: center;
    display: flex;
    gap: 12px;
    min-width: 0;
}

.dual-list-guide-icon {
    align-items: center;
    background: linear-gradient(135deg, #0ea5e9, #14b8a6);
    border-radius: 50%;
    color: #fff;
    display: inline-flex;
    flex-shrink: 0;
    height: 32px;
    justify-content: center;
    width: 32px;
}

.dual-list-guide-icon .mud-icon-root {
    font-size: 1.1rem !important;
}

.dual-list-guide-sub {
    color: #64748b !important;
    display: block;
    margin-top: 6px;
}

.dual-list-guide-panels {
    background: transparent !important;
}

.dual-list-guide-panel {
    background: transparent !important;
    box-shadow: none !important;
}

    .dual-list-guide-panel .mud-expand-panel-header {
        background: linear-gradient(150deg, #e0f2fe 0%, #eff6ff 55%, #e0f2fe 100%) !important;
        border: 1px solid rgba(14, 165, 233, .28) !important;
        border-radius: var(--mud-default-borderradius) !important;
        color: #0284c7 !important;
        font-size: .72rem !important;
        font-weight: 600 !important;
        min-height: 36px !important;
        padding: 6px 10px !important;
    }

.dual-list-guide-toggle {
    align-items: center;
    color: #0284c7;
    display: flex;
    gap: 8px;
    width: 100%;
}

.dual-list-guide-info-icon {
    color: #0284c7 !important;
    flex-shrink: 0;
    font-size: 1.15rem !important;
}

.dual-list-guide-toggle-text {
    flex: 1;
    font-size: .72rem;
    font-weight: 600;
    line-height: 1.5;
    min-width: 0;
}

.dual-list-guide-chevron-wrap {
    align-items: center;
    background: rgba(14, 165, 233, .14);
    border: 1px solid rgba(14, 165, 233, .28);
    border-radius: 999px;
    display: inline-flex;
    flex-shrink: 0;
    height: 26px;
    justify-content: center;
    margin-inline-start: auto;
    width: 26px;
}

.dual-list-guide-chevron {
    color: #0284c7 !important;
    font-size: 1.15rem !important;
}

.dual-list-guide-panel .mud-expand-panel-icon {
    display: none !important;
}

.dual-list-guide-panel .mud-expand-panel-content {
    padding: 4px 0 8px !important;
}

.dual-list-guide-list {
    color: #334155;
    font-family: Samim, Vazirmatn, Tahoma, sans-serif;
    font-size: .84rem;
    line-height: 1.95;
    list-style: none;
    margin: 0;
    padding: 0;
}

.dual-list-guide-list li {
    align-items: flex-start;
    display: flex;
    gap: 8px;
    padding: 5px 0;
}

.dual-list-guide-li-icon {
    color: #0ea5e9 !important;
    flex-shrink: 0;
    font-size: 1.05rem !important;
    margin-top: 4px;
}

.dual-list-guide-alert {
    color: #dc2626 !important;
    font-weight: 600;
}

.dual-list-guide-alert .dual-list-guide-li-icon {
    color: #ef4444 !important;
}

.dual-list-guide-link {
    color: #0284c7;
}

.dual-list-kbd-icon {
    align-items: center;
    background: rgba(14, 165, 233, .1);
    border: 1px solid rgba(14, 165, 233, .22);
    border-radius: 6px;
    color: #0284c7;
    display: inline-flex;
    margin: 0 3px;
    padding: 1px 4px;
    vertical-align: middle;
}

.dual-list-kbd {
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-bottom-width: 2px;
    border-radius: 6px;
    color: #334155;
    display: inline-block;
    font-family: Samim, Tahoma, sans-serif;
    font-size: .74rem;
    font-weight: 700;
    line-height: 1;
    margin: 0 2px;
    min-width: 28px;
    padding: 5px 8px;
    text-align: center;
    vertical-align: middle;
}

.dual-list-kbd-plus {
    color: #64748b;
    font-weight: 700;
    margin: 0 2px;
}

.dual-list-hint-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.dual-list-paste-btn {
    background: rgba(14, 165, 233, .08) !important;
}

.dual-list-stat {
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    padding: 5px 10px;
}

.dual-list-stat-ok {
    background: rgba(16, 185, 129, .12);
    color: #047857;
}

.dual-list-stat-blacklist {
    background: rgba(245, 158, 11, .14);
    color: #b45309;
}

.dual-list-stat-bad {
    background: rgba(239, 68, 68, .1);
    color: #b91c1c;
}

.dual-list-panel {
    background: #fff;
    border: 1px solid rgba(148, 163, 184, .22);
    border-radius: 16px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .04);
    height: 100%;
    overflow: hidden;
    padding: 14px;
    position: relative;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.dual-list-panel::before {
    content: "";
    height: 3px;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.dual-list-panel-valid::before {
    background: linear-gradient(90deg, #10b981, #14b8a6);
}

.dual-list-panel-invalid::before {
    background: linear-gradient(90deg, #f43f5e, #fb7185);
}

.dual-list-panel:hover {
    box-shadow: 0 14px 34px rgba(15, 23, 42, .07);
}

.dual-list-panel-valid {
    background:
        linear-gradient(180deg, rgba(236, 253, 245, .65) 0%, #ffffff 42%);
    border-color: #047857;
}

.dual-list-panel-invalid {
    background:
        linear-gradient(180deg, rgba(255, 241, 242, .7) 0%, #ffffff 42%);
    border-color: #be123c;
}

.dual-list-panel-header {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
    margin-bottom: 12px;
}

.dual-list-panel-title {
    align-items: center;
    display: flex;
    gap: 10px;
    min-width: 0;
}

.dual-list-panel-title strong {
    color: #0f172a;
    display: block;
    font-size: .9rem;
    line-height: 1.3;
}

.dual-list-panel-title small {
    color: #64748b;
    display: block;
    font-size: .7rem;
    margin-top: 2px;
}

.dual-list-badge {
    align-items: center;
    border-radius: 12px;
    display: inline-flex;
    flex-shrink: 0;
    height: 36px;
    justify-content: center;
    width: 36px;
}

.dual-list-badge-ok {
    background: rgba(16, 185, 129, .14);
    color: #059669;
}

.dual-list-badge-bad {
    background: rgba(244, 63, 94, .12);
    color: #e11d48;
}

.dual-list-panel-meta {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.dual-list-count-chip {
    cursor: help;
    font-weight: 700 !important;
    justify-content: center;
    min-width: 40px;
}

.dual-list-actions {
    align-items: center;
    background: #fff;
    border: 1px solid rgba(148, 163, 184, .35);
    border-radius: 999px;
    display: inline-flex;
    gap: 1px;
    padding: 3px 4px;
}

.dual-list-action-btn {
    border-radius: 999px !important;
}

.dual-list-field .mud-input-outlined-border {
    border-radius: 12px !important;
}

.dual-list-field-valid .mud-input-outlined-border {
    border-color: #047857 !important;
}

.dual-list-field-invalid .mud-input-outlined-border {
    border-color: #be123c !important;
}

.dual-list-field textarea {
    font-family: Samim, Vazirmatn, Tahoma, "Segoe UI", sans-serif !important;
    font-size: .9rem !important;
    font-weight: 400 !important;
    letter-spacing: .01em;
    line-height: 1.85 !important;
    min-height: 190px !important;
}

.dual-list-field textarea::placeholder {
    color: #94a3b8 !important;
    font-family: Samim, Vazirmatn, Tahoma, "Segoe UI", sans-serif !important;
    font-size: .74rem !important;
    font-weight: 400 !important;
    letter-spacing: normal !important;
    line-height: 1.9 !important;
    opacity: 1 !important;
}

.dual-list-field-valid textarea {
    color: #0f766e !important;
}

.dual-list-field-invalid textarea {
    color: #be123c !important;
}

.dual-list-footer-btn {
    border-radius: 10px !important;
    font-weight: 600 !important;
    text-transform: none !important;
}

@media (max-width: 600px) {
    .dual-list-guide-top {
        align-items: flex-start;
    }

    .dual-list-panel-header {
        flex-direction: column;
    }
}

.peer-info-alert {
    border-radius: 12px !important;
}

.peer-file-chip {
    align-items: center;
    background: rgba(16, 185, 129, .08);
    border: 1px solid rgba(16, 185, 129, .22);
    border-radius: 12px;
    display: flex;
    gap: 10px;
    padding: 8px 10px;
}

.peer-file-meta {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.peer-file-meta strong {
    font-size: .82rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.peer-file-meta small {
    color: #64748b;
    font-size: .72rem;
}

.peer-dup-hint,
.peer-mobile-hint {
    color: #92400e !important;
    display: block;
    font-size: .62rem !important;
    font-weight: 400;
    line-height: 1.65 !important;
    margin-top: 4px;
}

.peer-service-line-hint {
    background: linear-gradient(135deg, rgba(190, 24, 93, .08), rgba(219, 39, 119, .06));
    border: 1px solid rgba(190, 24, 93, .28);
    border-radius: 8px;
    color: #9d174d !important;
    display: block;
    font-size: .72rem !important;
    font-weight: 600;
    line-height: 1.7 !important;
    margin-top: 4px;
    padding: 8px 10px;
}

.peer-source-divider {
    margin: 23px 0 23px !important;
}

.peer-mobile-hint {
    margin-bottom: 4px;
}

.peer-upload-btn {
    border-radius: 7px !important;
    font-size: .78rem !important;
    font-weight: 600 !important;
    letter-spacing: .01em;
    min-height: 34px !important;
    padding: 4px 12px !important;
    text-transform: none !important;
}

.peer-upload-btn .mud-button-label {
    font-size: .78rem !important;
}

.peer-upload-progress {
    background: linear-gradient(135deg, rgba(14, 165, 233, .08), rgba(20, 184, 166, .1));
    border: 1px solid rgba(14, 165, 233, .18);
    border-radius: 12px;
    padding: 8px 10px;
}

.peer-upload-progress-meta {
    align-items: center;
    color: #0f766e;
    display: flex;
    font-size: .72rem;
    justify-content: space-between;
    margin-bottom: 6px;
}

.peer-upload-progress-bar {
    border-radius: 999px !important;
    height: 8px !important;
}

/* هدر کارت ستون‌های اکسل — نظیر به نظیر */
.peer-fields-card .peer-fields-summary {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 6px;
    list-style: none;
    margin-bottom: 0 !important;
    min-width: 0;
    outline: none;
    width: 100%;
}

.peer-fields-summary-top {
    align-items: center;
    display: grid;
    gap: 8px;
    grid-template-columns: 34px minmax(0, 1fr) 28px;
    min-width: 0;
    width: 100%;
}

.peer-fields-summary-title {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 8px;
    min-width: 0;
}

.peer-fields-summary-title .mud-typography {
    flex: 1 1 auto;
    min-width: 0;
}

.peer-fields-summary-title .dynamic-count-chip,
.peer-fields-summary-title .mud-chip {
    flex: 0 0 auto;
    margin: 0 !important;
}

.peer-fields-summary-hint {
    color: #94a3b8 !important;
    display: block !important;
    line-height: 1.55 !important;
    margin: 0 !important;
    padding-inline-start: 42px;
    white-space: normal !important;
}

.peer-fields-card .dynamic-fields-accordion-toggle {
    align-self: center;
    justify-self: center;
}

.peer-fields-card[open] > .peer-fields-summary {
    margin-bottom: 12px !important;
}

.peer-fields-card[open] > .peer-fields-summary .dynamic-fields-accordion-toggle {
    transform: rotate(180deg);
}

.peer-columns-grid {
    max-height: 260px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-left: 2px;
    padding-right: 2px;
    scrollbar-gutter: stable;
}

@media (max-width: 900px) {
    .peer-fields-summary-top {
        gap: 6px;
        grid-template-columns: 30px minmax(0, 1fr) 26px;
    }

    .peer-fields-summary-top .dynamic-section-icon {
        flex-basis: 30px;
        height: 30px;
        width: 30px;
    }

    .peer-fields-summary-title .mud-typography-subtitle2 {
        font-size: .9rem !important;
        line-height: 1.3 !important;
    }

    .peer-fields-summary-hint {
        font-size: .72rem !important;
        line-height: 1.5 !important;
        padding-inline-start: 0;
    }

    .peer-fields-card .dynamic-count-chip,
    .peer-fields-card .mud-chip {
        font-size: .68rem !important;
        height: 24px !important;
        min-height: 24px !important;
    }

    .peer-columns-grid {
        grid-template-columns: 1fr;
        max-height: 220px;
    }
}

@media (max-width: 600px) {
    .peer-fields-summary-title {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

    .peer-fields-summary-hint {
        font-size: .7rem !important;
    }
}

.peer-columns-grid::-webkit-scrollbar {
    width: 6px;
}

.peer-columns-grid::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, .35);
    border-radius: 999px;
}

.peer-mobile-field {
    border-color: rgba(16, 185, 129, .45) !important;
    background: rgba(16, 185, 129, .08) !important;
}

.peer-link-options {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding-top: 6px;
}

.peer-link-option {
    align-items: center;
    background: color-mix(in srgb, var(--mud-palette-primary, #685dd8) 3%, #fff);
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary, #685dd8) 16%, #e8e6f2);
    border-radius: 10px;
    box-shadow: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-height: 74px;
    padding: 12px 10px 10px;
    position: relative;
    text-align: center;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
    width: 100%;
}

.peer-link-public-fields {
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
}

@media (max-width: 900px) {
    .peer-link-options {
        grid-template-columns: 1fr;
    }

    .peer-link-public-fields {
        grid-template-columns: 1fr;
    }

    .peer-link-option {
        text-align: center;
    }
}

.peer-link-option:hover:not(.is-disabled):not(.is-selected) {
    background: color-mix(in srgb, var(--mud-palette-primary, #685dd8) 7%, #fff);
    border-color: color-mix(in srgb, var(--mud-palette-primary, #685dd8) 28%, #d8d4ea);
}

.peer-link-option.is-selected {
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--mud-palette-primary, #685dd8) 12%, #fff),
        color-mix(in srgb, var(--mud-palette-primary, #685dd8) 6%, #fff)
    );
    border-color: color-mix(in srgb, var(--mud-palette-primary, #685dd8) 55%, #fff);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--mud-palette-primary, #685dd8) 18%, transparent);
}

.peer-link-option.is-disabled {
    cursor: not-allowed;
    opacity: .55;
}

.peer-link-option-check {
    align-items: center;
    background: var(--mud-palette-primary, #685dd8);
    border-radius: 999px;
    color: #fff;
    display: inline-flex;
    height: 18px;
    justify-content: center;
    left: 50%;
    position: absolute;
    top: -8px;
    transform: translateX(-50%);
    width: 18px;
}

.peer-link-option-check .mud-icon-root {
    font-size: 12px !important;
}

.peer-link-option-title {
    color: #0f172a;
    display: block;
    font-size: .78rem;
    font-weight: 700;
    line-height: 1.35;
    text-align: center !important;
    width: 100%;
}

.peer-link-option.is-selected .peer-link-option-title {
    color: var(--mud-palette-primary, #685dd8);
}

.peer-link-option-desc {
    color: #64748b;
    display: block;
    font-size: .68rem;
    line-height: 1.55;
    text-align: center;
    width: 100%;
}

.peer-link-option.is-selected .peer-link-option-desc {
    color: color-mix(in srgb, var(--mud-palette-primary, #685dd8) 72%, #475569);
}

.peer-link-field {
    border-color: rgba(14, 165, 233, .45) !important;
    background: rgba(14, 165, 233, .08) !important;
}

.peer-link-chip {
    height: 22px !important;
    font-size: 10px !important;
}

.peer-mobile-chip {
    height: 22px !important;
    font-size: 10px !important;
}

.peer-row-data-preview {
    background: rgba(241, 245, 249, .9);
    border: 1px dashed rgba(148, 163, 184, .35);
    border-radius: 10px;
    color: #475569;
    font-size: .78rem;
    line-height: 1.8;
    min-height: 44px;
    padding: 8px 10px;
    white-space: pre-wrap;
}

.preview-var-highlight {
    background: rgba(99, 102, 241, .12);
    border-radius: 4px;
    color: #4f46e5;
    font-weight: 700;
    padding: 0 3px;
}

.dynamic-preview .preview-var-highlight {
    background: rgba(16, 185, 129, .12);
    color: #047857;
}

/* جلوگیری از ماندن حالت کم‌رنگ بعد از Drag */
.peer-p2p-page .used-token-item {
    opacity: 1 !important;
}

.peer-p2p-page .used-token-item.dragging {
    opacity: .7 !important;
}

.peer-excel-table-wrap {
    max-height: 220px;
    overflow: auto;
    border-radius: 12px;
    border: 1px solid rgba(203, 213, 225, .7);
    background: #fff;
}

.peer-excel-table {
    border-collapse: separate;
    border-spacing: 0;
    font-size: .78rem;
    min-width: 100%;
    width: max-content;
}

.peer-excel-table th,
.peer-excel-table td {
    border-bottom: 1px solid rgba(226, 232, 240, .95);
    padding: 9px 12px;
    text-align: right;
    white-space: nowrap;
}

.peer-excel-table thead th {
    background: #e8eef7;
    color: #1e293b;
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .03em;
    position: sticky;
    top: 0;
    z-index: 1;
    border-bottom: 2px solid #94a3b8;
    box-shadow: 0 2px 4px rgba(15, 23, 42, .06);
}

.peer-excel-table tbody tr:nth-child(even) {
    background: #fafbfc;
}

.peer-excel-table tbody tr:hover {
    background: #f1f5f9;
}

.peer-excel-table .is-mobile-col {
    background: rgba(16, 185, 129, .08);
    color: #047857;
    font-weight: 600;
}

.peer-excel-table thead th.is-mobile-col {
    background: #d1fae5;
    color: #065f46;
    border-bottom: 2px solid #10b981;
}

.peer-excel-table .is-link-col {
    background: rgba(14, 165, 233, .08);
    color: #0369a1;
    font-weight: 600;
}

.peer-excel-table thead th.is-link-col {
    background: #e0f2fe;
    color: #075985;
    border-bottom: 2px solid #0ea5e9;
}

.peer-col-badge {
    border-radius: 999px;
    display: inline-block;
    font-size: .62rem;
    font-weight: 700;
    margin-right: 6px;
    padding: 1px 7px;
    vertical-align: middle;
}

.peer-col-badge.is-mobile {
    background: #10b981;
    color: #fff;
}

.peer-col-badge.is-link {
    background: #0ea5e9;
    color: #fff;
}

/* ===== SMS Send Wizard (3-step) ===== */
.sms-wizard {
    background: transparent;
    border: none;
    border-radius: 0;
    overflow: visible;
    padding: 0;
}

.sms-recipient-step {
    margin: 0;
    padding: 0;
}

/* Recipient-source tabs — a compact, centered segmented control. */
.sms-recipient-tabs.mud-tabs {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sms-recipient-tabs .mud-tabs-tabbar {
    display: flex !important;
    overflow: visible !important;
    align-self: center;
    width: fit-content !important;
    max-width: 100%;
    justify-content: center;
    margin: 0 auto .85rem;
}

.sms-recipient-tabs .mud-tabs-tabbar-inner {
    align-items: center;
    background: linear-gradient(145deg, color-mix(in srgb, var(--mud-palette-primary) 8%, #fff), color-mix(in srgb, var(--mud-palette-primary) 3%, #fff));
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 20%, var(--mud-palette-lines-default));
    border-radius: 14px;
    box-shadow: 0 6px 18px color-mix(in srgb, var(--mud-palette-primary) 10%, transparent), inset 0 1px 0 rgba(255,255,255,.7);
    display: flex !important;
    flex: 0 0 auto !important;
    overflow: visible !important;
    padding: 4px;
    width: auto !important;
}

.sms-recipient-tabs .mud-tabs-tabbar-content {
    flex: 0 1 auto !important;
    display: flex !important;
    min-width: 0 !important;
    overflow: visible !important;
    width: auto !important;
}

.sms-recipient-tabs .mud-tabs-scroll-button {
    display: none !important;
}

.sms-recipient-tabs .mud-tabs-tabbar-wrapper {
    box-sizing: border-box;
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    gap: 3px !important;
    justify-content: center !important;
    max-width: 100%;
    min-width: 0 !important;
    transform: none !important;
    width: auto !important;
}

.sms-recipient-tabs .mud-tab {
    flex: 0 0 auto !important;
    background: transparent !important;
    border: 1px solid transparent;
    border-radius: 10px;
    color: var(--mud-palette-text-secondary) !important;
    font-size: .76rem !important;
    font-weight: 700 !important;
    gap: 5px !important;
    justify-content: center !important;
    letter-spacing: 0 !important;
    max-width: none !important;
    min-height: 38px !important;
    min-width: 84px !important;
    overflow: hidden;
    padding: 5px 12px !important;
    text-overflow: ellipsis;
    text-transform: none !important;
    white-space: nowrap !important;
    transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease, transform .18s ease;
    width: auto !important;
}

.sms-recipient-tabs .mud-tab:hover:not(.mud-tab-disabled) {
    background: color-mix(in srgb, var(--mud-palette-primary) 9%, transparent);
    color: var(--mud-palette-primary) !important;
    transform:translateY(-1px);
}

.sms-recipient-tabs .mud-tab.mud-tab-active {
    background: linear-gradient(145deg, #fff, color-mix(in srgb, var(--mud-palette-primary) 5%, #fff)) !important;
    border-color: color-mix(in srgb, var(--mud-palette-primary) 28%, var(--mud-palette-lines-default));
    box-shadow: 0 3px 9px color-mix(in srgb, var(--mud-palette-primary) 18%, transparent), inset 0 1px 0 #fff;
    color: var(--mud-palette-primary) !important;
}

.sms-recipient-tabs .mud-tab.mud-tab-disabled {
    opacity: .62;
}

.sms-recipient-tabs .mud-tab .mud-icon-root {
    flex-shrink: 0;
    font-size: 1.05rem !important;
}

.sms-recipient-tabs .mud-tab-slider {
    display: none !important;
}

@media (max-width: 900px) {
    .sms-recipient-tabs .mud-tabs-tabbar,
    .sms-recipient-tabs .mud-tabs-tabbar-inner,
    .sms-recipient-tabs .mud-tabs-tabbar-content,
    .sms-recipient-tabs .mud-tabs-tabbar-wrapper {
        min-height: 0 !important;
        overflow: visible !important;
    }

    .sms-recipient-tabs .mud-tabs-tabbar-wrapper {
        gap: 3px !important;
    }

    .sms-recipient-tabs .mud-tab {
        align-items: center !important;
        flex-direction: column !important;
        font-size: .68rem !important;
        font-weight: 700 !important;
        gap: 2px !important;
        line-height: 1.15 !important;
        min-height: 44px !important;
        min-width: 70px !important;
        padding: 5px 8px !important;
    }

    .sms-recipient-tabs .mud-tab .mud-icon-root {
        font-size: 1.1rem !important;
        margin: 0 !important;
    }

    .sms-recipient-tabs .mud-tab.mud-tab-active {
        font-size: .7rem !important;
    }
}

@media (max-width: 600px) {
    .sms-recipient-tabs .mud-tab {
        font-size: .64rem !important;
        min-height: 43px !important;
        min-width: 0 !important;
        padding: 5px 2px !important;
    }
}

.sms-wizard-chrome {
    background: color-mix(in srgb, var(--mud-palette-primary) 4%, #fff);
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 17%, transparent);
    border-bottom: none;
    border-radius: 12px 12px 0 0;
    margin-bottom: 0;
    overflow: hidden;
    padding: 0;
}

.sms-wizard-head {
    align-items: center;
    background: transparent;
    border: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: space-between;
    margin-bottom: 0;
    padding: 8px 12px 6px;
}

.sms-wizard-head-main {
    align-items: center;
    display: flex;
    gap: 8px;
    min-width: 0;
}

.sms-wizard-head-icon {
    align-items: center;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    color: var(--mud-palette-primary);
    display: inline-flex;
    flex-shrink: 0;
    height: auto;
    justify-content: center;
    width: auto;
}

.sms-wizard-head-icon .mud-icon-root {
    font-size: 1.35rem !important;
}

.sms-wizard-title {
    color: #0f172a !important;
    font-size: .82rem !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
}

.sms-wizard-subtitle {
    color: #64748b !important;
    display: block;
    font-size: .72rem !important;
    line-height: 1.4 !important;
    margin-top: 6px !important;
}

.sms-wizard-head-text .sms-wizard-title.mb-0 {
    margin-bottom: 0 !important;
}

.sms-wizard-subtitle strong {
    color: var(--mud-palette-primary);
    font-weight: 700;
}

.sms-wizard-progress-wrap {
    flex: 1 1 140px;
    max-width: 220px;
    min-width: 120px;
}

.sms-wizard-progress-meta {
    align-items: center;
    color: var(--mud-palette-primary);
    display: flex;
    font-size: .66rem;
    justify-content: space-between;
    margin-bottom: 3px;
}

.sms-wizard-progress-bar {
    border-radius: 999px !important;
    height: 5px !important;
}

.sms-wizard-stepper.mud-stepper {
    background: transparent;
}

/* نوار مراحل به باکس هدر می‌چسبد و یک باکس واحد می‌سازد */
.sms-wizard-stepper .mud-stepper-nav {
    background: color-mix(in srgb, var(--mud-palette-primary) 4%, #fff);
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 17%, transparent);
    border-radius: 0 0 12px 12px;
    border-top: 1px solid color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
    gap: 2px;
    margin-bottom: 10px;
    margin-top: 0;
    min-height: 0 !important;
    padding: 0 6px 2px;
}

.sms-wizard-stepper .mud-step {
    border-radius: 8px;
    min-height: 0 !important;
    min-width: 0;
    padding: 0 4px;
    /* Override MudBlazor's 24px vertical inset without changing horizontal spacing. */
    padding-block: 10px !important;
    transition: background-color .2s ease, transform .2s ease;
}

/* Cancel MudBlazor's negative connector margins so lines stay between steps. */
.sms-wizard-stepper.mud-stepper .mud-stepper-nav-connector {
    margin-inline: 4px !important;
}

.sms-wizard-stepper .mud-step-label {
    min-width: 0;
    padding-block: 5px !important;
}

.sms-wizard-stepper .mud-step:hover {
    background: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent);
}

.sms-wizard-stepper .mud-step-label-icon-container {
    margin-inline-end: 6px !important;
}

.sms-wizard-stepper .mud-step-label .mud-typography {
    font-family: Samim, Vazirmatn, Tahoma, sans-serif !important;
    font-size: .74rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
}

.sms-wizard-stepper .mud-step-label-icon {
    align-items: center !important;
    display: inline-flex !important;
    font-size: .75rem !important;
    font-weight: 700 !important;
    height: 1.22rem !important;
    justify-content: center !important;
    line-height: 1 !important;
    padding: 0 !important;
    width: 1.22rem !important;
}

.sms-wizard-stepper .mud-step-label-icon .mud-typography,
.sms-wizard-stepper .mud-step-label-icon span {
    align-items: center !important;
    display: inline-flex !important;
    font-size: .75rem !important;
    font-weight: 700 !important;
    height: 100% !important;
    justify-content: center !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Keep the stage navigation dense but fully readable on tablet and mobile. */
@media (max-width: 900px) {
    .sms-wizard-stepper .mud-stepper-nav {
        gap: 0;
        margin-bottom: 6px;
        overflow: hidden;
        padding: 0 2px 2px;
    }

    .sms-wizard-stepper .mud-step {
        flex: 0 1 auto !important;
        min-width: 0 !important;
        padding-inline: 8px !important;
    }

    .sms-wizard-stepper.mud-stepper .mud-stepper-nav-connector {
        flex: 1 1 12px;
        min-width: 6px;
    }

    .sms-wizard-stepper .mud-step-label {
        gap: 4px !important;
        justify-content: center;
        min-width: 0;
        padding-block: 4px !important;
    }

    .sms-wizard-stepper .mud-step-label-icon-container {
        margin-inline-end: 4px !important;
    }

    .sms-wizard-stepper .mud-step-label .mud-typography {
        font-size: .68rem !important;
        line-height: 1.15 !important;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .sms-wizard-stepper .mud-step-label-icon {
        font-size: .68rem !important;
        height: 1.15rem !important;
        width: 1.15rem !important;
    }
}

@media (max-width: 520px) {
    .sms-wizard-stepper .mud-stepper-nav {
        padding-inline: 0;
    }

    .sms-wizard-stepper .mud-step {
        padding-inline: 4px !important;
    }

    .sms-wizard-stepper .mud-step-label-icon-container {
        margin-inline-end: 3px !important;
    }

    .sms-wizard-stepper .mud-step-label .mud-typography {
        font-size: .62rem !important;
    }

    .sms-wizard-stepper .mud-step-label {
        padding-block: 3px !important;
    }
}

.sms-wizard-step-title {
    align-items: center;
    display: inline-flex;
    font-family: Samim, Vazirmatn, Tahoma, sans-serif;
    font-size: .84rem;
    font-weight: 700;
    gap: 6px;
}

.sms-wizard-step-title-icon {
    font-size: 1.05rem !important;
}

.sms-wizard-stepper .mud-stepper-content {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 8px 0 0;
}

.sms-wizard-stepper .mud-stepper-actions {
    background: #f8fafc;
    border: 1px solid rgba(148, 163, 184, .16);
    border-radius: 12px;
    margin-top: 10px;
    padding: 8px 10px !important;
}

/* لیست سیاه: حذف کادر تو کادر DualListEditor */
.blacklist-add-page .dual-list-panel {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}

.blacklist-add-page .dual-list-panel::before {
    display: none;
}

.blacklist-add-page .dual-list-panel:hover {
    box-shadow: none;
    transform: none;
}

.blacklist-add-page .dual-list-panel-valid,
.blacklist-add-page .dual-list-panel-invalid {
    background: transparent;
}

.blacklist-add-page .dual-list-panel-header {
    margin-bottom: 8px;
}

.blacklist-add-page .dual-list-field .mud-input-outlined-border {
    border-radius: 12px !important;
}

.blacklist-add-page .dual-list-field-valid .mud-input-outlined-border {
    border-color: #047857 !important;
}

.blacklist-add-page .dual-list-field-invalid .mud-input-outlined-border {
    border-color: #be123c !important;
}

/* کاهش کادر تو کادر داخل ویزارد */
.sms-wizard .dual-list-editor {
    margin-top: 4px;
}

.sms-wizard .dual-list-panel {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}

.sms-wizard .dual-list-panel::before {
    display: none;
}

.sms-wizard .dual-list-panel:hover {
    box-shadow: none;
    transform: none;
}

.sms-wizard .dual-list-panel-valid,
.sms-wizard .dual-list-panel-invalid {
    background: transparent;
}

.sms-wizard .dual-list-panel-header {
    margin-bottom: 8px;
}

.sms-wizard .dual-list-field .mud-input-outlined-border {
    border-color: rgba(148, 163, 184, .35) !important;
    border-radius: 10px !important;
}

.sms-wizard .dual-list-field-valid .mud-input-outlined-border {
    border-color: #047857 !important;
}

.sms-wizard .dual-list-field-invalid .mud-input-outlined-border {
    border-color: #be123c !important;
}

.sms-wizard .mud-tabs {
    background: transparent;
}

.sms-wizard .mud-tabs .mud-tabs-toolbar {
    background: transparent !important;
    border-bottom: 1px solid rgba(148, 163, 184, .16);
    min-height: 40px;
}

.sms-wizard .mud-tabs-panels {
    background: transparent !important;
    border: none !important;
    padding: 10px 0 0 !important;
}

.sms-wizard-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
    width: 100%;
}

.sms-wizard-step-dots {
    align-items: center;
    display: flex;
    flex: 1;
    gap: 8px;
    justify-content: center;
    min-width: 72px;
}

.sms-wizard-dot {
    background: #94a3b8;
    border: 2px solid #e2e8f0;
    border-radius: 999px;
    box-sizing: border-box;
    display: inline-block;
    height: 10px;
    transition: all .25s ease;
    width: 10px;
}

.sms-wizard-dot.is-done {
    background: #0d9488;
    border-color: #99f6e4;
    box-shadow: 0 0 0 2px rgba(13, 148, 136, .18);
}

.sms-wizard-dot.is-active {
    background: var(--mud-palette-primary);
    border-color: color-mix(in srgb, var(--mud-palette-primary) 45%, #fff);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mud-palette-primary) 22%, transparent);
    height: 10px;
    width: 26px;
}

.sms-wizard-btn {
    border-radius: 11px !important;
    font-weight: 700 !important;
    min-height: 38px !important;
    text-transform: none !important;
}

.sms-wizard-btn-prev {
    border-color: #cbd5e1 !important;
    color: #475569 !important;
}

.sms-wizard-btn-next,
.sms-wizard-btn-submit {
    box-shadow: none !important;
    min-width: 120px;
}

.sms-wizard-btn-submit {
    box-shadow: none !important;
}

.sms-wizard-submit-icon { font-size: 1.05rem; margin-left: .35rem; }

@media (max-width: 600px) {
    .sms-wizard {
        padding: 10px 8px;
    }

    .sms-wizard-head {
        padding: 8px 10px 6px;
    }

    .sms-wizard-progress-wrap {
        max-width: none;
    }

    .sms-wizard-actions {
        justify-content: center;
    }

    .sms-wizard-step-dots {
        order: 3;
        width: 100%;
    }
}

/* ===== پنل مشخصات پیامک / تنظیمات ارسال (مینیمال) ===== */
.sms-info-panels,
.mud-expansion-panels:has(> .sendsmsExpand) {
    background: transparent !important;
    box-shadow: none !important;
}

.sendsmsExpand.mud-expand-panel {
    background: #fff !important;
    border: 1px solid #d5d9e0 !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04) !important;
    margin-bottom: 0 !important;
    overflow: hidden;
}

.sendsmsExpand .mud-expand-panel-header,
.sendsmsExpand.mud-expand-panel.mud-panel-expanded .mud-expand-panel-header {
    background: linear-gradient(100deg, #f0eef8 0%, #f7f6fb 55%, #ffffff 100%) !important;
    border: none !important;
    border-bottom: 1px dashed #d1d5db !important;
    border-radius: 11px 11px 0 0 !important;
    min-height: 0 !important;
    padding: 7px 12px !important;
}

.sendsmsExpand:not(.mud-panel-expanded) .mud-expand-panel-header {
    border-bottom: none !important;
}

.sms-panel-head {
    align-items: center;
    display: flex;
    gap: 8px;
    min-width: 0;
    width: 100%;
}

.sms-panel-badge {
    align-items: center;
    background: #fff;
    border: 1px solid #b6bcc6;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
    color: #374151;
    display: inline-flex;
    flex-shrink: 0;
    height: 27px;
    justify-content: center;
    width: 27px;
}

.sms-panel-badge .mud-icon-root {
    color: #374151 !important;
    font-size: 1rem !important;
}

.sms-panel-head-text {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
}

.sms-panel-title {
    color: #111827;
    font-size: .88rem;
    font-weight: 800 !important;
    letter-spacing: -.01em;
    line-height: 1.2;
}

.sms-panel-sub {
    color: #9ca3af;
    font-size: .65rem;
    font-weight: 400;
    line-height: 1.25;
}

.sendsmsExpand .mud-expand-panel-header .mud-expand-panel-text,
.sendsmsExpand .mud-expand-panel-header .mud-typography {
    color: #111827 !important;
    font-size: .95rem !important;
    font-weight: 800 !important;
}

.sendsmsExpand .mud-expand-panel-icon {
    align-items: center !important;
    background: #fff !important;
    border: 1px solid #b6bcc6 !important;
    border-radius: 50% !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .06) !important;
    color: #4b5563 !important;
    display: inline-flex !important;
    height: 24px !important;
    justify-content: center !important;
    margin: 0 !important;
    min-width: 24px !important;
    padding: 0 !important;
    transform: none !important;
    width: 24px !important;
}

.sendsmsExpand .mud-expand-panel-icon .mud-icon-root,
.sendsmsExpand .mud-expand-panel-icon svg {
    color: #4b5563 !important;
    fill: currentColor !important;
    font-size: .95rem !important;
    height: .95rem !important;
    width: .95rem !important;
}

.sendsmsExpand .mud-expand-panel-content {
    background: #fff !important;
    padding: 14px !important;
}

.sendsmsExpand .mud-expand-panel-content .mud-expand-panel-body {
    margin: 0 !important;
}

/* ردیف سوییچ + شمارنده کاراکتر زیر باکس متن پیام */
.sms-counter {
    align-items: center;
    box-sizing: border-box;
    color: var(--bs-body-color);
    display: flex;
    flex-wrap: wrap;
    font-size: .75rem;
    gap: 8px 12px;
    justify-content: space-between;
    margin-top: 8px;
    min-width: 0;
    overflow: visible;
    width: 100%;
}

.sms-counter-switch,
.sms-counter > .mud-input-control {
    flex: 1 1 auto;
    margin: 0 !important;
    max-width: 100%;
    min-width: 0;
}

.sms-counter-switch .mud-typography,
.sms-counter .mud-switch .mud-typography {
    white-space: normal;
}

/* شمارنده کاراکتر / تعداد پیامک — radius هم‌اندازه باکس متن */
.sms-char-counter {
    align-items: center;
    background: #f8fafc;
    border: 1px solid #b6c2d1;
    border-radius: var(--mud-default-borderradius, 4px);
    box-sizing: border-box;
    display: inline-flex;
    flex: 0 1 auto;
    gap: 8px;
    max-width: 100%;
    min-height: 32px;
    min-width: 0;
    padding: 4px 12px 4px 10px;
    position: relative;
    transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}

.sms-char-counter:hover,
.sms-char-counter:focus-visible {
    background: #f4f7ff;
    border-color: #7067e8;
    box-shadow: 0 4px 14px rgba(83, 70, 190, .12);
    outline: none;
}

.sms-counter-guide {
    align-items: flex-start;
    background: linear-gradient(145deg, #34363d 0%, #25272d 100%);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 10px;
    bottom: calc(100% + 12px);
    box-shadow: 0 12px 30px rgba(28, 30, 38, .24);
    color: #fff;
    direction: rtl;
    display: flex;
    font-size: .78rem;
    font-weight: 500;
    gap: 9px;
    left: 0;
    line-height: 1.9;
    max-width: calc(100vw - 48px);
    opacity: 0;
    padding: 12px 13px;
    pointer-events: none;
    position: absolute;
    text-align: right;
    transform: translateY(5px);
    transition: opacity .14s ease, transform .14s ease, visibility .14s ease;
    visibility: hidden;
    white-space: normal;
    width: 370px;
    z-index: 1400;
}

.sms-counter-guide::after {
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 8px solid #292b31;
    bottom: -8px;
    content: "";
    left: 24px;
    position: absolute;
}

.sms-char-counter:hover .sms-counter-guide,
.sms-char-counter:focus-visible .sms-counter-guide,
.sms-char-counter:focus-within .sms-counter-guide {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}

.sms-counter-guide-icon {
    align-items: center;
    background: rgba(123, 111, 240, .2);
    border-radius: 7px;
    color: #c9c4ff;
    display: inline-flex;
    flex: 0 0 auto;
    height: 27px;
    justify-content: center;
    margin-top: 1px;
    width: 27px;
}

.sms-counter-guide-icon .mud-icon-root {
    font-size: 1rem;
}

.sms-char-counter-icon {
    color: #0284c7 !important;
    flex: 0 0 auto;
    font-size: 1.05rem !important;
}

.sms-char-stat {
    align-items: baseline;
    cursor: default;
    display: inline-flex;
    gap: 4px;
    min-width: 0;
}

.sms-char-stat small {
    color: #64748b;
    font-size: .68rem;
    font-weight: 600;
}

.sms-char-stat strong {
    color: #334155;
    font-size: .82rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    min-width: 1ch;
}

.sms-char-sep {
    align-self: stretch;
    background: #64748b;
    flex: 0 0 auto;
    margin: 4px 2px;
    opacity: 1;
    width: 1px;
}

/* موبایل و تبلت: سوییچ و شمارنده زیر هم، بدون بریدگی */
@media (max-width: 900px) {
    .sms-counter {
        align-items: stretch;
        flex-direction: column;
        gap: 10px;
    }

    .sms-counter-switch,
    .sms-counter > .mud-input-control {
        flex: 0 0 auto;
        width: 100%;
    }

    .sms-char-counter,
    .sms-counter .sendsmsNormal {
        justify-content: center;
        width: 100%;
    }

    .sms-char-counter {
        gap: 6px;
        min-height: 36px;
        padding: 6px 10px;
    }
}

@media (max-width: 600px) {
    .sms-char-stat small {
        font-size: .66rem;
    }

    .sms-char-stat strong {
        font-size: .78rem;
    }

    .sms-char-counter-icon {
        font-size: 1rem !important;
    }
}

.sendsmsNormal.mud-alert {
    align-items: center;
    background: linear-gradient(100deg, #eef6ff 0%, #f5f3ff 55%, #ecfaf6 100%) !important;
    border: 1px solid #dbe7f5 !important;
    border-radius: 999px !important;
    color: #0f172a !important;
    min-height: 32px;
    padding: 2px 10px !important;
}

.sendsmsNormal .mud-alert-message {
    color: #334155 !important;
    font-size: .78rem !important;
    font-weight: 600 !important;
    padding: 4px 0 !important;
}

.sendsmsNormal .mud-alert-icon {
    color: #0284c7 !important;
    margin-inline-end: 4px !important;
    padding: 0 !important;
}

/* ابزارهای کنار باکس متن پیام */
.sms-message-composer {
    align-items: stretch;
    display: flex;
    gap: 8px;
    overflow: visible;
}

.sms-message-field-wrap {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    position: relative;
}

.sms-line-option {
    align-items: center;
    display: inline-flex;
    gap: 8px;
    width: 100%;
}

.sms-line-signature-badge {
    align-items: center;
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    border-radius: 999px;
    color: #4f46e5;
    display: inline-flex;
    font-size: .69rem;
    font-weight: 700;
    gap: 3px;
    line-height: 1.5;
    padding: 3px 6px 2px 6px;
    white-space: nowrap;
}

.sms-line-signature-badge .sms-line-signature-badge__icon {
    align-self: center;
    display: inline-flex;
    flex: 0 0 17px;
    font-size: 18px !important;
    height: 14px !important;
    justify-content: center;
    line-height: 14px;
    margin: 0;
    position: static;
    transform: none;
    vertical-align: middle;
    width: 17px !important;
}

.sms-line-signature-badge .sms-line-signature-badge__icon::before {
    font-size: 21px;
    line-height: 12px;
}

.sms-protected-signature {
    background: transparent;
    border: 0;
    border-top: 1px dashed rgba(99, 102, 241, .3);
    bottom: 10px;
    box-sizing: border-box;
    display: block;
    inset-inline: 14px;
    min-height: 24px;
    padding: 4px 2px 0;
    pointer-events: none;
    position: absolute;
    z-index: 3;
}

.sms-protected-signature__text {
    color: #6558c7;
    font-size: .78rem;
    font-weight: 700;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.sms-message-field-wrap.has-protected-signature {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .23);
    border-radius: var(--mud-default-borderradius, 4px);
    transition: border-color .16s ease, box-shadow .16s ease;
}

.sms-message-field-wrap.has-protected-signature:focus-within {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 1px var(--mud-palette-primary);
}

.sms-message-composite-label {
    background: #fff;
    color: rgba(0, 0, 0, .6);
    font-size: .72rem;
    line-height: 1;
    padding: 0 5px;
    pointer-events: none;
    position: absolute;
    right: 10px;
    top: -6px;
    z-index: 5;
}

.sms-message-field-wrap.has-protected-signature:focus-within > .sms-message-composite-label {
    color: var(--mud-palette-primary);
}

.sms-message-field-wrap.has-protected-signature .mud-input-outlined-border {
    border-color: transparent !important;
}

.sms-message-field-wrap.has-protected-signature textarea.mud-input-slot {
    padding-bottom: 46px !important;
}

.dynamic-editor-dropzone .sms-protected-signature {
    bottom: 10px;
    inset-inline: 14px;
}

.dynamic-editor-dropzone.signature-active .drop-hint {
    bottom: 51px;
}

.sms-message-field-wrap > .mud-input-control {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    height: 100%;
    margin: 0 !important;
}

.sms-message-field-wrap .mud-input-control-input-container {
    flex: 1 1 auto;
    height: 100%;
}

.sms-message-field-wrap .mud-input.mud-input-outlined {
    height: 100%;
}

.sms-message-field-wrap .mud-input-outlined-border {
    height: 100% !important;
}

.sms-message-field-wrap textarea.mud-input-slot {
    height: 100% !important;
    min-height: 176px !important;
}

.sms-message-toolbar {
    align-items: center;
    align-self: stretch;
    background: #fafbfc;
    border: 1px solid #b6c2d1;
    border-radius: var(--mud-default-borderradius, 4px);
    box-sizing: border-box;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    height: auto;
    justify-content: space-evenly;
    min-height: 100%;
    overflow: visible;
    padding: 6px 4px;
}

.sms-message-toolbar .tg-emoji-root {
    display: flex;
    justify-content: center;
    position: relative;
}

.sms-message-tool-btn {
    border-radius: 10px !important;
}

.sms-message-tool-btn--danger:hover:not(:disabled) {
    background: rgba(239, 68, 68, .08) !important;
}

/* پیش‌نمایش موبایل — باریک، بدون اسکرول مودال */
.sms-mobile-preview-dialog.mud-dialog {
    display: flex !important;
    flex-direction: column !important;
    max-height: none !important;
    max-width: 340px !important;
    overflow: hidden !important;
    width: 340px !important;
}

.mud-dialog-container:has(.sms-mobile-preview-dialog) {
    overflow: hidden !important;
}

.sms-mobile-preview-dialog .mud-dialog-title {
    flex: 0 0 auto !important;
    min-height: 0 !important;
    padding: 4px 8px !important;
}

.sms-mobile-preview-dialog .mud-dialog-title .mud-typography {
    font-size: .78rem !important;
    line-height: 1.2 !important;
}

.sms-mobile-preview-dialog.my-Dialog .mud-dialog-content {
    display: flex !important;
    flex: 0 0 auto !important;
    flex-direction: column !important;
    max-height: none !important;
    overflow: hidden !important;
    padding: 6px 12px 10px !important;
}

.sms-preview-body {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sms-mobile-preview-dialog.my-Dialog .mud-dialog-actions {
    display: none !important;
}

.sms-preview-cancel-btn {
    background: #ff9800 !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(255, 152, 0, .35) !important;
    color: #fff !important;
    font-weight: 700 !important;
    min-width: 120px;
    text-transform: none !important;
}

.sms-preview-cancel-btn:hover {
    background: #f57c00 !important;
}

.sms-preview-cancel-btn .mud-icon-root,
.sms-preview-cancel-btn .mud-button-label {
    color: #fff !important;
}

/* تب‌های پیش‌نمایش موبایل در sms-phone-preview.css */

.sms-phone-stage {
    display: flex;
    justify-content: center;
    padding: 0 0 4px;
}

.sms-phone-empty {
    color: #94a3b8;
    font-size: .78rem;
    padding-top: 48px;
    text-align: center;
}

/* ---- iPhone 17 (روشن) ---- */
.iphone17 {
    filter: drop-shadow(0 18px 32px rgba(15, 23, 42, .18));
    position: relative;
    width: 252px;
}

.iphone17-frame {
    background: linear-gradient(160deg, #e8eaed 0%, #c5c7cb 45%, #9ea1a6 100%);
    border-radius: 42px;
    padding: 9px;
    position: relative;
}

.iphone17-frame::before {
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 42px;
    bottom: 0;
    content: "";
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
}

.iphone17-side {
    background: linear-gradient(180deg, #d1d5db, #9ca3af);
    border-radius: 2px;
    position: absolute;
    width: 3px;
    z-index: 2;
}

.iphone17-side--left {
    box-shadow: 0 36px 0 #c4c8ce, 0 68px 0 #c4c8ce;
    height: 28px;
    left: -2px;
    top: 96px;
}

.iphone17-side--right {
    height: 54px;
    right: -2px;
    top: 118px;
}

.iphone17-screen {
    background: #fff;
    border-radius: 34px;
    display: flex;
    flex-direction: column;
    height: 480px;
    overflow: hidden;
    position: relative;
}

.iphone17-island {
    background: #111;
    border-radius: 18px;
    height: 26px;
    left: 50%;
    position: absolute;
    top: 10px;
    transform: translateX(-50%);
    width: 98px;
    z-index: 3;
}

.iphone17-island::after {
    background: #2a2a2a;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
    content: "";
    height: 10px;
    position: absolute;
    right: 10px;
    top: 8px;
    width: 10px;
}

.iphone17-status {
    color: #111;
    display: flex;
    font-size: .68rem;
    font-weight: 700;
    justify-content: space-between;
    padding: 14px 18px 0;
    position: relative;
    z-index: 2;
}

.iphone17-status-right {
    align-items: center;
    display: inline-flex;
    gap: 4px;
}

.iphone17-signal,
.iphone17-wifi,
.iphone17-battery {
    background: #111;
    border-radius: 1px;
    display: inline-block;
    height: 7px;
}

.iphone17-signal { opacity: .95; width: 14px; }
.iphone17-wifi { border-radius: 50% 50% 0 0; height: 6px; width: 10px; }
.iphone17-battery {
    border-radius: 2px;
    height: 8px;
    position: relative;
    width: 16px;
}

.iphone17-battery::after {
    background: #111;
    border-radius: 1px;
    content: "";
    height: 4px;
    position: absolute;
    right: -2px;
    top: 2px;
    width: 1.5px;
}

.iphone17-nav {
    align-items: center;
    background: rgba(247, 247, 247, .92);
    border-bottom: 1px solid #e5e5ea;
    color: #111;
    display: flex;
    justify-content: space-between;
    padding: 10px 10px 8px;
}

.iphone17-nav-back {
    color: #007aff;
    font-size: .72rem;
    font-weight: 600;
    min-width: 64px;
}

.iphone17-nav-info {
    color: #007aff;
    font-size: 1.05rem;
    text-align: end;
    width: 64px;
}

.iphone17-contact {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.iphone17-avatar {
    align-items: center;
    background: linear-gradient(145deg, #aeb4bc, #8e959e);
    border-radius: 50%;
    color: #fff;
    display: inline-flex;
    font-size: .75rem;
    font-weight: 700;
    height: 34px;
    justify-content: center;
    width: 34px;
}

.iphone17-contact strong {
    color: #111;
    font-size: .74rem;
    font-weight: 700;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.iphone17-chat {
    background: #fff;
    flex: 1;
    overflow: auto;
    padding: 10px 12px 8px;
}

.iphone17-date {
    color: #8e8e93;
    font-size: .65rem;
    margin-bottom: 8px;
    text-align: center;
}

.iphone17-bubble {
    background: #34c759;
    border-radius: 18px;
    color: #fff;
    font-size: .8rem;
    line-height: 1.65;
    margin-inline-start: auto;
    max-width: 86%;
    padding: 8px 11px;
    white-space: pre-wrap;
    word-break: break-word;
}

.iphone17-composer {
    align-items: center;
    background: #f2f2f7;
    border-top: 1px solid #e5e5ea;
    display: flex;
    gap: 8px;
    padding: 8px 10px 4px;
}

.iphone17-plus {
    color: #8e8e93;
    font-size: 1.2rem;
}

.iphone17-input {
    background: #fff;
    border: 1px solid #d1d1d6;
    border-radius: 999px;
    color: #8e8e93;
    flex: 1;
    font-size: .72rem;
    padding: 7px 12px;
}

.iphone17-mic { font-size: .85rem; }

.iphone17-home {
    background: #111;
    border-radius: 999px;
    height: 4px;
    margin: 6px auto 8px;
    opacity: .22;
    width: 108px;
}

/* ---- Galaxy S (روشن) ---- */
.galaxys {
    filter: drop-shadow(0 18px 32px rgba(15, 23, 42, .18));
    position: relative;
    width: 250px;
}

.galaxys-frame {
    background: linear-gradient(165deg, #eceff3 0%, #cfd4dc 50%, #aeb6c2 100%);
    border-radius: 34px;
    padding: 7px;
    position: relative;
}

.galaxys-frame::before {
    border: 1px solid rgba(255, 255, 255, .65);
    border-radius: 34px;
    bottom: 0;
    content: "";
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
}

.galaxys-side {
    background: #b0b8c4;
    border-radius: 2px;
    position: absolute;
    width: 3px;
    z-index: 2;
}

.galaxys-side--left {
    box-shadow: 0 42px 0 #b0b8c4;
    height: 34px;
    left: -2px;
    top: 110px;
}

.galaxys-side--right {
    height: 48px;
    right: -2px;
    top: 130px;
}

.galaxys-screen {
    background: #f7f8fa;
    border-radius: 28px;
    display: flex;
    flex-direction: column;
    height: 480px;
    overflow: hidden;
    position: relative;
}

.galaxys-punch {
    background: #111;
    border: 2px solid #e5e7eb;
    border-radius: 50%;
    height: 12px;
    left: 50%;
    position: absolute;
    top: 9px;
    transform: translateX(-50%);
    width: 12px;
    z-index: 3;
}

.galaxys-status {
    color: #111;
    display: flex;
    font-size: .66rem;
    font-weight: 600;
    justify-content: space-between;
    padding: 12px 14px 0;
}

.galaxys-status-right {
    align-items: center;
    display: inline-flex;
    gap: 5px;
}

.galaxys-signal,
.galaxys-battery {
    background: #111;
    border-radius: 1px;
    display: inline-block;
    height: 7px;
}

.galaxys-signal { width: 13px; }
.galaxys-battery {
    border-radius: 2px;
    height: 8px;
    width: 15px;
}

.galaxys-appbar {
    align-items: center;
    background: #fff;
    border-bottom: 1px solid #e8eaed;
    display: flex;
    gap: 8px;
    justify-content: space-between;
    margin-top: 6px;
    padding: 10px 12px;
}

.galaxys-back,
.galaxys-more {
    color: #1a73e8;
    font-size: 1.1rem;
    width: 20px;
}

.galaxys-contact {
    align-items: center;
    color: #111;
    display: flex;
    flex: 1;
    gap: 8px;
    min-width: 0;
}

.galaxys-avatar {
    align-items: center;
    background: linear-gradient(145deg, #5b9dff, #1a73e8);
    border-radius: 50%;
    color: #fff;
    display: inline-flex;
    flex-shrink: 0;
    font-size: .75rem;
    font-weight: 700;
    height: 34px;
    justify-content: center;
    width: 34px;
}

.galaxys-contact strong {
    display: block;
    font-size: .8rem;
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.galaxys-contact small {
    color: #6b7280;
    font-size: .62rem;
}

.galaxys-chat {
    background: #f0f2f5;
    flex: 1;
    overflow: auto;
    padding: 12px;
}

.galaxys-meta {
    color: #6b7280;
    font-size: .65rem;
    margin-bottom: 8px;
    text-align: center;
}

.galaxys-bubble {
    background: #dceeff;
    border-radius: 16px 16px 4px 16px;
    color: #111;
    font-size: .8rem;
    line-height: 1.65;
    margin-inline-start: auto;
    max-width: 86%;
    padding: 8px 11px;
    white-space: pre-wrap;
    word-break: break-word;
}

.galaxys-composer {
    align-items: center;
    background: #fff;
    border-top: 1px solid #e8eaed;
    color: #1a73e8;
    display: flex;
    gap: 8px;
    padding: 8px 10px;
}

.galaxys-input {
    background: #f1f3f4;
    border-radius: 999px;
    color: #6b7280;
    flex: 1;
    font-size: .72rem;
    padding: 8px 12px;
}

.galaxys-nav {
    align-items: center;
    background: #fff;
    display: flex;
    justify-content: space-around;
    padding: 8px 24px 10px;
}

.galaxys-nav span {
    background: #9ca3af;
    border-radius: 2px;
    display: block;
    height: 10px;
    opacity: .7;
    width: 10px;
}

.galaxys-nav span:nth-child(1) { border-radius: 50%; }
.galaxys-nav span:nth-child(2) { height: 3px; width: 16px; }
.galaxys-nav span:nth-child(3) { height: 10px; width: 10px; }


@media (max-width: 600px) {
    .sms-message-composer {
        flex-direction: column;
    }

    .sms-message-toolbar {
        flex-direction: row;
        justify-content: flex-end;
        width: 100%;
    }
}

/* ===== انتخابگر مینیمال نوع زمان‌بندی ===== */
.sms-schedule-picker-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sms-schedule-picker-label {
    align-items: center;
    color: #64748b;
    display: inline-flex;
    font-size: .72rem;
    font-weight: 600;
    gap: 5px;
    letter-spacing: -.01em;
}

.sms-schedule-picker-hint {
    color: #94a3b8;
    font-size: .65rem;
    font-weight: 500;
    line-height: 1.2;
    margin-top: -2px;
}

.sms-schedule-picker-label .mud-icon-root {
    color: var(--mud-palette-primary, var(--bs-primary, #685dd8)) !important;
    font-size: .95rem !important;
}

.sms-schedule-picker {
    --sch-ink: #1e293b;
    --sch-accent: var(--mud-palette-primary, var(--bs-primary, #685dd8));
    display: grid;
    gap: 6px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 5px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #f8fafc;
}

.sms-schedule-option {
    appearance: none;
    align-items: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 9px;
    color: var(--sch-ink);
    cursor: pointer;
    display: flex;
    gap: 8px;
    min-height: 0;
    padding: 8px 10px;
    text-align: right;
    transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
    width: 100%;
}

.sms-schedule-option:hover {
    background: #fff;
    border-color: color-mix(in srgb, var(--sch-accent) 28%, #e2e8f0);
}

.sms-schedule-option:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--sch-accent) 55%, transparent);
    outline-offset: 1px;
}

.sms-schedule-option.is-active {
    background: linear-gradient(
        135deg,
        var(--sch-accent) 0%,
        color-mix(in srgb, var(--sch-accent) 75%, #8b7cf0) 100%
    );
    border-color: transparent;
    box-shadow: 0 6px 14px -8px color-mix(in srgb, var(--sch-accent) 65%, transparent);
    color: #fff;
}

.sms-schedule-option__icon {
    align-items: center;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    color: var(--sch-accent);
    display: inline-flex;
    flex-shrink: 0;
    height: 28px;
    justify-content: center;
    transition: background .18s ease, border-color .18s ease, color .18s ease;
    width: 28px;
}

.sms-schedule-option__icon .mud-icon-root {
    font-size: 1rem !important;
}

.sms-schedule-option.is-active .sms-schedule-option__icon {
    background: rgba(255, 255, 255, .2);
    border-color: transparent;
    color: #fff;
}

.sms-schedule-option__title {
    flex: 1;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.2;
    min-width: 0;
}

.sms-schedule-option__check {
    align-items: center;
    background: rgba(255, 255, 255, .22);
    border-radius: 999px;
    display: inline-flex;
    flex-shrink: 0;
    height: 20px;
    justify-content: center;
    width: 20px;
}

.sms-schedule-option__check .mud-icon-root {
    color: #fff !important;
    font-size: .85rem !important;
}

@media (max-width: 700px) {
    .sms-schedule-picker {
        grid-template-columns: 1fr;
    }
}

/* ===== صفحه صف ارسال کاربر ===== */
.send-queue-page {
    --sq-accent: var(--mud-palette-primary, var(--bs-primary, #685dd8));
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.send-queue-hero {
    align-items: center;
    background:
        radial-gradient(90% 140% at 100% 0%, color-mix(in srgb, var(--sq-accent) 16%, transparent), transparent 55%),
        #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 14px 20px;
    justify-content: space-between;
    padding: 14px 16px;
}

.send-queue-hero__main {
    align-items: center;
    display: flex;
    gap: 12px;
    min-width: 0;
}

.send-queue-hero__badge {
    align-items: center;
    background: linear-gradient(145deg, var(--sq-accent), color-mix(in srgb, var(--sq-accent) 70%, #8b7cf0));
    border-radius: 12px;
    color: #fff;
    display: inline-flex;
    flex-shrink: 0;
    height: 42px;
    justify-content: center;
    width: 42px;
}

.send-queue-hero__badge .mud-icon-root {
    color: #fff !important;
    font-size: 1.3rem !important;
}

.send-queue-hero__title {
    color: #0f172a;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.3;
    margin: 0;
}

.send-queue-hero__sub {
    color: #64748b;
    font-size: .75rem;
    font-weight: 500;
    line-height: 1.4;
    margin: 2px 0 0;
}

.send-queue-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.send-queue-stat {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 76px;
    padding: 8px 12px;
}

.send-queue-stat__value {
    color: #0f172a;
    font-size: .95rem;
    font-weight: 800;
    line-height: 1.2;
}

.send-queue-stat__label {
    color: #64748b;
    font-size: .68rem;
    font-weight: 600;
}

.send-queue-stat--warn .send-queue-stat__value { color: #d97706; }
.send-queue-stat--ok .send-queue-stat__value { color: #059669; }
.send-queue-stat--err .send-queue-stat__value { color: #dc2626; }

.send-queue-panel {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    overflow: hidden;
    padding: 12px;
}

.send-queue-toolbar {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
    margin-bottom: 10px;
}

.send-queue-search {
    flex: 1 1 220px;
    max-width: 320px;
    margin-inline-start: auto;
}

.send-queue-loading,
.send-queue-empty {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 6px;
    justify-content: center;
    min-height: 220px;
    padding: 28px 16px;
    text-align: center;
}

.send-queue-empty__icon {
    color: #94a3b8 !important;
    font-size: 2.4rem !important;
    margin-bottom: 4px;
}

.send-queue-grid.mud-data-grid {
    background: transparent;
}

.send-queue-rownum {
    color: #94a3b8;
    font-size: .75rem;
    font-weight: 700;
}

.send-queue-campaign {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 160px;
}

.send-queue-campaign__title {
    color: #0f172a;
    font-size: .82rem;
    font-weight: 700;
    line-height: 1.3;
}

.send-queue-campaign__meta {
    align-items: center;
    color: #64748b;
    display: flex;
    flex-wrap: wrap;
    font-size: .68rem;
    font-weight: 500;
    gap: 4px;
}

.send-queue-chip {
    font-size: .7rem !important;
    height: 24px !important;
}

.send-queue-schedule {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 140px;
}

.send-queue-schedule__next {
    align-items: center;
    color: #334155;
    display: inline-flex;
    font-size: .75rem;
    font-weight: 600;
    gap: 4px;
}

.send-queue-schedule__next .mud-icon-root {
    color: var(--sq-accent) !important;
    font-size: 1rem !important;
}

.send-queue-schedule__progress {
    color: #64748b;
    font-size: .68rem;
    line-height: 1.35;
}

.send-queue-progress {
    border-radius: 999px;
    max-width: 140px;
}

.send-queue-stats-cell {
    align-items: center;
    display: inline-flex;
    flex-wrap: wrap;
    font-size: .72rem;
    font-weight: 600;
    gap: 6px;
    white-space: nowrap;
}

.send-queue-stat-item {
    align-items: baseline;
    border-radius: 999px;
    display: inline-flex;
    gap: 4px;
    padding: 2px 8px;
}

.send-queue-stat-item strong {
    font-size: .8rem;
    font-weight: 800;
}

.send-queue-stat-item.is-ok {
    background: #ecfdf5;
    color: #059669;
}

.send-queue-stat-item.is-ok strong {
    color: #047857;
}

.send-queue-stat-item.is-fail {
    background: #fef2f2;
    color: #dc2626;
}

.send-queue-stat-item.is-fail strong {
    color: #b91c1c;
}

.send-queue-stat-item.is-total {
    background: #eef2ff;
    color: #4f46e5;
}

.send-queue-stat-item.is-total strong {
    color: #4338ca;
}

.send-queue-stat-sep {
    color: #cbd5e1;
    font-weight: 600;
}

.send-queue-datetime {
    align-items: center;
    color: #64748b;
    display: inline-flex;
    font-size: .72rem;
    font-weight: 500;
    gap: 8px;
    white-space: nowrap;
}

.send-queue-actions {
    align-items: center;
    display: inline-flex;
    gap: 2px;
}

/* Shared Statistics Reports table behavior. Sticky cells are enabled by
   ReportTableScroll only while the table actually overflows horizontally. */
.report-table-scroll {
    width: 100%;
    overflow-x: auto;
}

.report-table-overflow-observer {
    display: none !important;
}

.report-table-scroll.is-h-scroll .report-freeze-first,
.report-table-scroll.is-h-scroll .report-freeze-total,
.report-table-scroll.is-h-scroll .report-freeze-total-group {
    position: sticky;
}

.report-table-scroll.is-h-scroll .report-freeze-first {
    right: 0;
    z-index: 4;
    background: var(--report-sticky-first-bg, #fff);
}

.report-table-scroll.is-h-scroll thead .report-freeze-first,
.report-table-scroll.is-h-scroll thead .report-freeze-total,
.report-table-scroll.is-h-scroll thead .report-freeze-total-group {
    z-index: 7;
}

.report-table-scroll.is-h-scroll .report-freeze-total-end,
.report-table-scroll.is-h-scroll .report-freeze-total-group {
    left: 0;
}

.report-table-scroll.is-h-scroll .report-freeze-total-start {
    left: var(--report-total-column-width, 68px);
}

.report-table-scroll.is-h-scroll .report-freeze-total-group {
    min-width: calc(var(--report-total-column-width, 68px) * 2);
}

.report-table-scroll.is-h-scroll .report-freeze-first,
.report-table-scroll.is-h-scroll .report-freeze-total,
.report-table-scroll.is-h-scroll .report-freeze-total-group {
    box-shadow: none !important;
}

/* Sending Status is the typography baseline for all Statistics Reports tables. */
.report-table-scroll thead th {
    color: #565b70;
    font-size: .73rem !important;
    font-weight: 800 !important;
    text-align: center !important;
}

.report-table-scroll thead .report-freeze-first {
    color: #454052;
    font-size: .8rem !important;
    font-weight: 800 !important;
}

.report-table-scroll tbody .report-freeze-first,
.report-table-scroll tbody .report-freeze-total {
    color: #454a58;
    font-size: .75rem !important;
    font-weight: 700 !important;
    text-align: center !important;
}

.report-table-scroll tfoot td {
    color: #292236;
    font-size: .8rem !important;
    font-weight: 800 !important;
    text-align: center !important;
}

@media (max-width: 900px) {
    .send-queue-hero {
        align-items: stretch;
        flex-direction: column;
    }

    .send-queue-search {
        margin-inline-start: 0;
        max-width: none;
        width: 100%;
    }
}

/* ===== Calendar Occasions module ===== */
.co-page {
    --co-primary: #685dd8;
    --co-ink: #1e293b;
    --co-muted: #64748b;
    --co-line: color-mix(in srgb, var(--co-primary) 14%, #e2e8f0);
    --co-soft: color-mix(in srgb, var(--co-primary) 8%, #f8fafc);
    direction: rtl;
    padding: 2px 0 12px;
}

.co-shell {
    background:
        radial-gradient(900px 280px at 0% 0%, color-mix(in srgb, var(--co-primary) 12%, transparent), transparent 55%),
        linear-gradient(180deg, #fff 0%, #f6f7fb 100%);
    border: 1px solid var(--co-line);
    border-radius: 18px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .04);
    padding: 10px 12px 12px;
}

.co-header {
    margin-bottom: 16px;
}

.co-header-main {
    align-items: center;
    display: flex;
    gap: 8px;
}

.co-brand-mark {
    align-items: center;
    background: linear-gradient(145deg, #685dd8, #4f46e5);
    border-radius: 9px;
    color: #fff;
    display: inline-flex;
    font-size: .95rem;
    height: 32px;
    justify-content: center;
    width: 32px;
}

.co-title {
    color: var(--co-ink);
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.25;
    margin: 0;
}

.co-subtitle {
    color: var(--co-muted);
    font-size: .72rem;
    line-height: 1.25;
    margin: 1px 0 0;
}

/* آکاردئون فیلترها (صفحه ماژول + مودال) */
.co-filters-accordion {
    margin-bottom: 16px;
}

.co-filters-accordion-toggle {
    align-items: center;
    background: color-mix(in srgb, var(--co-primary) 6%, #f5f6fa);
    border: 1px solid color-mix(in srgb, var(--co-primary) 28%, #e2e8f0);
    border-radius: 12px;
    color: var(--co-ink);
    cursor: pointer;
    display: flex;
    gap: 10px;
    justify-content: space-between;
    padding: 8px 12px;
    transition: background .15s ease, border-color .15s ease;
    width: 100%;
}

.co-filters-accordion.is-open .co-filters-accordion-toggle {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-color: transparent;
}

.co-filters-accordion-toggle:hover {
    background: color-mix(in srgb, var(--co-primary) 6%, #f5f6fa);
    border-color: color-mix(in srgb, var(--co-primary) 28%, #e2e8f0);
}

.co-filters-accordion-main {
    align-items: center;
    display: inline-flex;
    gap: 6px;
    min-width: 0;
}

.co-filters-accordion-main strong {
    font-size: .8rem;
    font-weight: 700;
}

.co-filters-accordion-main em {
    color: var(--co-muted);
    font-size: .72rem;
    font-style: normal;
    font-weight: 600;
}

.co-filters-accordion-meta {
    align-items: center;
    color: var(--co-primary);
    display: inline-flex;
    flex: 0 0 auto;
    gap: 6px;
}

.co-filters-accordion-hint {
    color: var(--co-muted);
    font-size: .72rem;
    font-weight: 600;
}

.co-filters-accordion-meta > i {
    font-size: 1rem;
    line-height: 1;
}

.co-filters-accordion.is-open .co-filters-stack {
    border: 1px solid color-mix(in srgb, var(--co-primary) 14%, #e2e8f0);
    border-radius: 0 0 12px 12px;
    border-top: 0;
    margin-bottom: 0;
    padding: 8px;
}

.co-filters-accordion .co-filters-stack {
    gap: 8px;
}

/* Filters — compact */
.co-filters-stack {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.co-filters-stack .co-filters {
    margin-bottom: 0;
}

.co-filters {
    align-items: center;
    background: #f5f6fa;
    border: 1px solid color-mix(in srgb, var(--co-primary) 14%, #e2e8f0);
    border-radius: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
    margin-bottom: 16px;
    padding: 8px 10px;
}

.co-filters-head {
    align-items: center;
    display: inline-flex;
    flex: 0 0 auto;
    gap: 6px;
}

.co-filters-icon {
    color: var(--co-primary);
    font-size: .95rem;
    line-height: 1;
}

.co-filters-label {
    color: var(--co-ink);
    font-size: .8rem;
    font-weight: 700;
    white-space: nowrap;
}

.co-filter-seg {
    align-items: center;
    background: #fff;
    border: 1px solid #e6eaf1;
    border-radius: 10px;
    display: inline-flex;
    flex: 1 1 280px;
    flex-wrap: wrap;
    gap: 5px;
    min-width: 0;
    padding: 5px;
}

.co-filter-chip {
    align-items: center;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    color: #64748b;
    cursor: pointer;
    display: inline-flex;
    font-size: .75rem;
    font-weight: 600;
    gap: 4px;
    padding: 3px 8px;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
    white-space: nowrap;
}

.co-filter-chip .co-filter-swatch {
    background: var(--c);
    border-radius: 50%;
    display: inline-block;
    flex: 0 0 auto;
    height: 6px;
    opacity: .65;
    width: 6px;
}

.co-filter-tick {
    color: var(--c);
    font-size: .62rem;
    line-height: 1;
}

.co-filter-chip:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #334155;
}

.co-filter-chip.is-on {
    background: color-mix(in srgb, var(--c) 12%, #fff);
    border-color: color-mix(in srgb, var(--c) 45%, #fff);
    color: #0f172a;
    font-weight: 700;
}

.co-filter-chip.is-on .co-filter-swatch {
    opacity: 1;
}

.co-filters-tools {
    align-items: center;
    display: inline-flex;
    flex: 0 0 auto;
    gap: 6px;
    margin-inline-start: auto;
}

.co-tool-btn {
    align-items: center;
    background: #fff;
    border: 1px solid color-mix(in srgb, var(--co-primary) 28%, #e2e8f0);
    border-radius: 999px;
    color: var(--co-primary);
    cursor: pointer;
    display: inline-flex;
    font-size: .66rem;
    font-weight: 700;
    gap: 4px;
    padding: 3px 8px;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.co-tool-btn i {
    font-size: .72rem;
    line-height: 1;
}

.co-tool-btn:hover {
    background: color-mix(in srgb, var(--co-primary) 10%, #fff);
    border-color: color-mix(in srgb, var(--co-primary) 45%, #e2e8f0);
}

.co-tool-btn.muted {
    background: #fff5f5;
    border-color: #f1a7a7;
    color: #e03131;
}

.co-tool-btn.muted:hover {
    background: #ffe3e3;
    border-color: #e03131;
    color: #c92a2a;
}

.co-link-btn {
    background: none;
    border: 0;
    color: var(--co-primary);
    cursor: pointer;
    font-size: .72rem;
    font-weight: 600;
    padding: 2px 4px;
}

.co-link-btn.muted { color: #94a3b8; }

.co-sep { display: none; }

/* Date row — three calendars side by side */
.co-date-row {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 16px;
}

.co-filter-check {
    color: var(--c) !important;
    font-size: 14px !important;
}

/* Layout: first column = right in RTL (details), second = left (calendar) */
.co-layout {
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(260px, .88fr) minmax(0, 1.12fr);
}

.co-calendar-panel {
    background: #fff;
    border: 1px solid var(--co-line);
    border-radius: 14px;
}

.co-calendar-panel {
    align-items: center;
    display: flex;
    justify-content: center;
    min-width: 0;
    padding: 8px;
}

.co-loading {
    align-items: center;
    display: flex;
    justify-content: center;
    min-height: 280px;
}

/* DNT Persian Calendar — Pishgam-style */
.co-calendar-panel {
    align-items: stretch !important;
    align-self: start;
    background: #fff !important;
    border: 1px solid var(--co-line) !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .03) !important;
    height: auto;
    justify-content: stretch !important;
    overflow: hidden;
    padding: 16px 14px 12px !important;
}

.co-dnt-wrap,
.co-pishgam {
    --co-cal-gap: 4px;
    display: flex;
    flex-direction: column;
    min-width: 0;
    width: 100%;
}

.co-cal-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
    margin-bottom: 12px;
}

.co-cal-nav {
    align-items: center;
    display: inline-flex;
    gap: 6px;
}

.co-month-dd {
    position: relative;
}

.co-month-trigger {
    align-items: center;
    appearance: none;
    background: #fff !important;
    background-image: none !important;
    border: 1px solid #d9dee7;
    border-radius: 10px;
    color: #334155;
    cursor: pointer;
    direction: rtl;
    display: inline-flex !important;
    font-size: .92rem;
    font-weight: 700;
    gap: 6px;
    justify-content: flex-start;
    min-height: 38px;
    min-width: 118px;
    padding: .35rem .7rem !important;
    text-align: right;
}

.co-month-caret {
    color: #64748b;
    flex: 0 0 auto;
    font-size: .78rem;
    line-height: 1;
    margin-inline-start: auto;
}

.co-month-dd.is-open .co-month-caret {
    transform: rotate(180deg);
}

.co-month-backdrop {
    background: transparent;
    inset: 0;
    position: fixed;
    z-index: 19;
}

.co-month-menu {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .12);
    display: flex;
    flex-direction: column;
    inset-inline-end: 0;
    inset-inline-start: auto;
    max-height: 280px;
    min-width: 148px;
    overflow: auto;
    padding: 6px;
    position: absolute;
    top: calc(100% + 4px);
    z-index: 20;
}

.co-month-item {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: #334155;
    cursor: pointer;
    direction: rtl;
    display: flex;
    flex-direction: row;
    font-size: .72rem;
    font-weight: 600;
    gap: 5px;
    justify-content: flex-start;
    padding: 5px 8px;
    text-align: right;
    width: 100%;
}

.co-month-item:hover {
    background: #f8fafc;
}

.co-month-item.is-active {
    background: color-mix(in srgb, var(--co-primary, #685dd8) 12%, #fff);
    color: var(--co-primary, #685dd8);
    font-weight: 800;
}

.co-month-item-check {
    color: var(--co-primary, #685dd8);
    flex: 0 0 auto;
    font-size: .58rem;
    line-height: 1;
    margin-inline-start: auto;
}

.co-month-label {
    flex: 0 1 auto;
    font-size: inherit;
}

.co-month-num {
    color: #94a3b8;
    flex: 0 0 auto;
    font-size: .55rem;
    font-weight: 600;
    line-height: 1;
    opacity: .9;
}

.co-occasion-form .co-month-num {
    color: #94a3b8;
    font-size: .68rem;
    font-weight: 600;
}

.co-month-item.is-active .co-month-num,
.co-month-trigger .co-month-num {
    color: color-mix(in srgb, var(--co-primary, #685dd8) 70%, #94a3b8);
}

.co-cal-select,
.co-pishgam select.form-select,
.co-pishgam .form-select {
    background-color: #fff;
    border: 1px solid #d9dee7;
    border-radius: 10px;
    color: #334155;
    font-size: .92rem;
    font-weight: 700;
    min-height: 38px;
    min-width: 110px;
    padding: .35rem 2rem .35rem .75rem;
}

.co-pishgam .co-nav-btn,
.co-pishgam button.co-nav-btn {
    align-items: center;
    background: #fff !important;
    border: 1px solid #d9dee7 !important;
    border-radius: 10px !important;
    color: #64748b !important;
    display: inline-flex;
    height: 38px;
    justify-content: center;
    padding: 0 !important;
    width: 38px;
}

.co-pishgam .co-nav-btn:hover {
    background: #f8fafc !important;
    border-color: #c5cddb !important;
    color: #334155 !important;
}

.co-cal-grid-wrap {
    position: relative;
}

.co-cal-loading {
    align-items: center;
    background: rgba(255, 255, 255, .55);
    display: flex;
    inset: 0;
    justify-content: center;
    position: absolute;
    z-index: 2;
}

.co-cell {
    cursor: pointer;
    transition: background .12s ease;
}

.co-cell:hover:not(.empty) {
    background: #fafbff !important;
}

.co-cell.empty {
    cursor: default;
    background: #fbfcfe !important;
}

.co-cell-inner {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    min-height: 100%;
    padding-bottom: 8px;
    position: relative;
    z-index: 0;
}

/* نشان مناسبت — مستطیل کوچک، پایین راست */
.co-marks {
    align-items: center;
    bottom: 5px;
    cursor: help;
    display: inline-flex;
    flex-direction: row-reverse;
    gap: 3px;
    justify-content: flex-start;
    left: auto;
    max-width: calc(100% - 8px);
    padding: 0;
    position: absolute;
    right: 5px;
    transform: none;
}

.co-mark {
    background: var(--ev, #868e96);
    border: 1px solid #fff;
    border-radius: 2px;
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--ev, #868e96) 30%, transparent),
        0 1px 2px rgba(15, 23, 42, .14);
    display: inline-block;
    flex: 0 0 auto;
    height: 7px;
    width: 9px;
}

.co-mark-more {
    background: #eef2ff;
    border-radius: 999px;
    color: var(--co-primary, #685dd8);
    font-size: .62rem;
    font-weight: 800;
    line-height: 1;
    padding: 2px 4px;
}

.co-occasion-tip .mud-tooltip {
    max-width: 240px !important;
    padding: 8px 10px !important;
}

.co-tip-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
    text-align: right;
}

.co-tip-head {
    color: #cbd5e1;
    font-size: 11px;
    font-weight: 600;
    margin-bottom: 2px;
}

.co-tip-item {
    align-items: center;
    color: #fff;
    display: flex;
    font-size: 12px;
    font-weight: 600;
    gap: 7px;
    line-height: 1.35;
}

.co-tip-item i {
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .25);
    display: inline-block;
    flex: 0 0 auto;
    height: 8px;
    width: 8px;
}

.co-tip-more {
    color: #94a3b8;
    font-size: 11px;
    margin-top: 2px;
}


/* Grid — سلول‌های جدا و خمیده */
.co-pishgam .co-dnt-table {
    --bs-table-bg: transparent;
    --bs-table-striped-bg: transparent;
    --bs-table-hover-bg: transparent;
    background: transparent !important;
    border-collapse: separate !important;
    border-spacing: var(--co-cal-gap) !important;
    margin-bottom: 0;
    table-layout: fixed;
    width: 100%;
}

.co-pishgam .co-dnt-table > :not(caption) > * > * {
    border-bottom-width: 0 !important;
    box-shadow: none !important;
    padding: .35rem .2rem !important;
}

/* عنوان روزها — هم‌عرض دقیق با سلول‌های تقویم */
.co-pishgam .co-weekdays {
    background: color-mix(in srgb, var(--co-primary) 12%, #fff);
    border: 1px solid color-mix(in srgb, var(--co-primary) 16%, #e8ecf2);
    border-radius: 10px;
    box-sizing: border-box;
    display: grid;
    gap: var(--co-cal-gap);
    grid-template-columns: repeat(7, minmax(0, 1fr));
    margin: 0 var(--co-cal-gap) 6px;
    overflow: hidden;
    padding: 0;
}

.co-pishgam .co-weekday {
    border-radius: 10px;
    color: #4338ca !important;
    font-size: .86rem !important;
    font-weight: 700 !important;
    letter-spacing: 0;
    line-height: 1.15;
    padding: .42rem .2rem;
    text-align: center;
}

.co-pishgam .co-weekday.is-friday {
    color: #e03131 !important;
}

.co-weekday-short {
    display: none;
}

.co-pishgam .co-dnt-table tbody td.co-cell {
    background: #f5f7fa !important;
    border: 1px solid #d8dee8 !important;
    border-radius: 10px !important;
    height: 54px;
    min-height: 54px;
    padding: 4px !important;
    position: relative;
    transition: background .15s ease, border-color .15s ease, transform .12s ease;
    vertical-align: middle;
    width: 14.28%;
}

.co-pishgam .co-dnt-table tbody td.co-cell:hover:not(.empty) {
    background: #e5e9f0 !important;
    border-color: #c9d1de !important;
}

.co-pishgam .co-dnt-table tbody td.co-cell.empty {
    background: transparent !important;
    border-color: transparent !important;
    cursor: default;
}

.co-pishgam .co-dnt-table tbody tr:first-child td {
    border-top-width: 1px !important;
}

/* تعطیل رسمی */
.co-pishgam .co-dnt-table tbody td.co-cell.is-holiday {
    background: #fff1f2 !important;
    border: 1px solid #f1b0b7 !important;
}

.co-pishgam td.co-cell.is-holiday .co-day-num,
.co-pishgam td.co-cell.is-holiday .co-day-num b {
    color: #c92a2a !important;
}

.co-holiday-flag {
    background: #ffe3e3;
    border-radius: 999px;
    color: #c92a2a;
    font-size: .5rem;
    font-weight: 700;
    inset-inline-start: 3px;
    letter-spacing: 0;
    line-height: 1;
    padding: 1px 3px;
    pointer-events: none;
    position: absolute;
    top: 3px;
    transform: scale(.92);
    transform-origin: top right;
    z-index: 1;
}

.co-pishgam td.co-cell.is-holiday .co-cell-inner {
    padding-top: 11px;
}

.co-pishgam .co-dnt-table tbody td.co-cell.is-holiday.is-selected {
    background: color-mix(in srgb, var(--co-primary) 10%, #fff5f5) !important;
    border: 1px solid var(--co-primary) !important;
}

.co-pishgam .co-dnt-table tbody td.co-cell.is-holiday.is-today:not(.is-selected) {
    background: #fff1f2 !important;
    border: 1.5px dashed #e03131 !important;
}

/* روز جاری — مینیمال، گرم و ملایم */
.co-pishgam .co-dnt-table tbody td.co-cell.is-today {
    background: #fff8ef !important;
    border: 1.5px dashed #f0b429 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    z-index: 1;
}

.co-pishgam td.co-cell.is-today .co-day-num,
.co-pishgam td.co-cell.is-today .co-day-num b {
    color: #c2410c !important;
    font-weight: 900 !important;
}

/* روز انتخاب‌شده توسط کاربر */
.co-pishgam .co-dnt-table tbody td.co-cell.is-selected {
    background: color-mix(in srgb, var(--co-primary) 10%, #fff) !important;
    border: 1px solid var(--co-primary) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    z-index: 2;
}

.co-pishgam td.co-cell.is-selected .co-day-num,
.co-pishgam td.co-cell.is-selected .co-day-num b {
    color: var(--co-primary) !important;
    font-weight: 900 !important;
}

/* وقتی امروز همان روز انتخاب‌شده است */
.co-pishgam .co-dnt-table tbody td.co-cell.is-today.is-selected {
    background: color-mix(in srgb, var(--co-primary) 12%, #fff) !important;
    border: 1px solid var(--co-primary) !important;
    box-shadow: inset 0 0 0 1px rgba(240, 180, 41, .55) !important;
}

.co-pishgam .co-day-num,
.co-pishgam .co-day-num b {
    align-self: center;
    color: #1e293b;
    display: inline-flex;
    font-size: 1.08rem;
    font-weight: 800 !important;
    justify-content: center;
    line-height: 1;
    min-width: 1.55rem;
    position: relative;
    z-index: 2;
}

.co-pishgam .co-friday,
.co-pishgam .co-friday b {
    color: #e03131 !important;
}


/* Today footer — مینیمال */
.co-today-bar {
    display: flex;
    justify-content: center;
    margin-top: 2px;
    padding-top: 0;
}

.co-today-btn,
.co-pishgam .co-today-btn {
    align-items: center;
    background: color-mix(in srgb, var(--co-primary) 10%, #fff) !important;
    border: 1px solid color-mix(in srgb, var(--co-primary) 35%, #e2e8f0) !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    color: var(--co-primary) !important;
    cursor: pointer;
    display: inline-flex;
    font-size: .8rem !important;
    font-weight: 700 !important;
    gap: 8px;
    max-width: 100%;
    padding: .4rem .9rem .4rem .75rem !important;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.co-today-btn i {
    color: var(--co-primary);
    font-size: 1rem;
    line-height: 1;
}

.co-today-btn span {
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.co-today-btn:hover {
    background: color-mix(in srgb, var(--co-primary) 16%, #fff) !important;
    border-color: var(--co-primary) !important;
    color: #4f46e5 !important;
}

.co-header-actions {
    display: flex;
    gap: 8px;
    margin-inline-start: auto;
}

.co-header {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: space-between;
}

.co-side-panel {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.co-date-card {
    background: #fff;
    border: 1px solid var(--co-line);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    overflow: hidden;
    padding: 8px 12px;
    position: relative;
}

.co-date-card::before {
    content: "";
    height: 100%;
    inset-inline-start: 0;
    position: absolute;
    top: 0;
    width: 3px;
}

.co-date-card.solar::before { background: #685dd8; }
.co-date-card.gregorian::before { background: #0e7490; }
.co-date-card.hijri::before { background: #2f9e44; }

.co-date-kind {
    font-size: .75rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

.co-date-card.solar .co-date-kind { color: #685dd8; }
.co-date-card.gregorian .co-date-kind { color: #0e7490; }
.co-date-card.hijri .co-date-kind { color: #2f9e44; }

.co-date-main {
    align-items: center;
    display: flex;
    flex-direction: row;
    gap: 8px;
    justify-content: space-between;
    min-width: 0;
    width: 100%;
}

.co-date-text {
    color: var(--co-ink);
    flex: 1 1 auto;
    font-size: .8rem;
    font-weight: 800;
    line-height: 1.35;
    min-width: 0;
    overflow: hidden;
    text-align: start;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.co-date-num {
    border-radius: 999px;
    display: inline-block;
    flex: 0 0 auto;
    font-family: inherit;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1.2;
    padding: 2px 8px;
    white-space: nowrap;
}

.co-date-card.solar .co-date-num {
    background: color-mix(in srgb, #685dd8 18%, #fff);
    border: 1px solid color-mix(in srgb, #685dd8 40%, #fff);
    color: #4f46e5;
}

.co-date-card.gregorian .co-date-num {
    background: #d7f1f6;
    border: 1px solid #8ed0dc;
    color: #0e7490;
}

.co-date-card.hijri .co-date-num {
    background: #dcf5e4;
    border: 1px solid #8ed9a4;
    color: #2b8a3e;
}

.co-lists {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.co-list-card {
    background: #fff !important;
    border: 1px solid var(--co-line) !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .03) !important;
    overflow: hidden;
    padding: 10px 12px 12px;
    position: relative;
}

.co-list-card::before {
    content: "";
    display: block;
    height: 100%;
    inset-inline-start: 0;
    position: absolute;
    top: 0;
    width: 3px;
}

.co-list-card.is-system::before { background: var(--co-primary); }
.co-list-card.is-org::before { background: #2f9e44; }

.co-list-card.is-system {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--co-primary) 6%, #fff) 0%, #fff 48%) !important;
}

.co-list-card.is-org {
    background:
        linear-gradient(180deg, color-mix(in srgb, #2f9e44 7%, #fff) 0%, #fff 48%) !important;
}

.co-list-head {
    align-items: center;
    border-bottom: 0;
    display: flex;
    gap: 8px;
    justify-content: space-between;
    margin-bottom: 8px;
    padding: 0;
}

.co-list-title {
    align-items: center;
    display: flex;
    flex: 1 1 auto;
    gap: 8px;
    min-width: 0;
}

.co-list-heading {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 5px 6px;
    min-width: 0;
}

.co-list-ico-wrap {
    align-items: center;
    border-radius: 10px;
    display: inline-flex;
    flex: 0 0 auto;
    height: 34px;
    justify-content: center;
    width: 34px;
}

.co-list-card.is-system .co-list-ico-wrap {
    background: color-mix(in srgb, var(--co-primary) 14%, #fff);
    color: var(--co-primary);
}

.co-list-card.is-org .co-list-ico-wrap {
    background: #e8f8ec;
    color: #2f9e44;
}

.co-list-ico {
    font-size: 1.05rem;
    line-height: 1;
}

.co-list-card.is-system .co-list-ico,
.co-list-card.is-org .co-list-ico { color: inherit; }

.co-page .co-list-card .co-list-name,
.co-page .co-list-card strong.co-list-name {
    color: #0f172a !important;
    font-size: .84rem !important;
    font-weight: 700 !important;
    line-height: 1.25;
    margin: 0 !important;
}

.co-list-tag {
    border-radius: 999px;
    font-size: .65rem;
    font-style: normal;
    font-weight: 700;
    letter-spacing: .01em;
    padding: 2px 7px;
}

.co-list-card.is-system .co-list-tag {
    background: color-mix(in srgb, var(--co-primary) 12%, #fff);
    border: 1px solid color-mix(in srgb, var(--co-primary) 22%, #fff);
    color: #4f46e5;
}

.co-list-card.is-org .co-list-tag {
    background: #eaf8ee;
    border: 1px solid #b7e4c4;
    color: #2f9e44;
}

.co-list-count-tip {
    cursor: help;
    display: inline-flex;
}

.co-page .co-list-card .co-list-count,
.co-page .co-list-card b.co-list-count,
.co-page .co-list-card .co-list-count-tip .co-list-count {
    align-items: center;
    border-radius: 999px;
    display: inline-flex;
    font-family: Vazirmatn, Samim, Tahoma, sans-serif !important;
    font-size: .88rem !important;
    font-weight: 600 !important;
    justify-content: center;
    line-height: 1;
    min-height: 28px;
    min-width: 28px;
    padding: 5px 9px;
    text-shadow: none;
}

.co-list-card.is-system .co-list-count {
    background: color-mix(in srgb, var(--co-primary) 12%, #fff) !important;
    border: 1px solid color-mix(in srgb, var(--co-primary) 28%, #fff);
    color: #4f46e5 !important;
}

.co-list-card.is-org .co-list-count {
    background: #eaf8ee !important;
    border: 1px solid #b7e4c4;
    color: #2f9e44 !important;
}

.co-list-actions {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    gap: 6px;
}

.co-add-btn {
    align-items: center;
    background: #2f9e44;
    border: 0;
    border-radius: 9px;
    box-shadow: 0 4px 10px rgba(47, 158, 68, .22);
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    font-size: .9rem;
    height: 28px;
    justify-content: center;
    transition: background .15s ease, transform .15s ease;
    width: 28px;
}

.co-add-btn:hover {
    background: #2b8a3e;
    transform: translateY(-1px);
}

.co-list-card.is-system .co-add-btn {
    background: var(--co-primary);
    box-shadow: 0 4px 10px color-mix(in srgb, var(--co-primary) 24%, transparent);
}

.co-list-card.is-system .co-add-btn:hover {
    background: color-mix(in srgb, var(--co-primary) 88%, #000);
}

.co-empty {
    align-items: center;
    background: #f8fafc;
    border: 1px dashed #e2e8f0;
    border-radius: 10px;
    color: #64748b;
    display: flex;
    flex-direction: column;
    font-size: .76rem;
    font-weight: 500;
    gap: 6px;
    justify-content: center;
    min-height: 72px;
    padding: 14px 10px;
    text-align: center;
}

.co-empty i {
    font-size: 1.25rem;
    line-height: 1;
    opacity: .7;
}

.co-list-card.is-system .co-empty {
    background: color-mix(in srgb, var(--co-primary) 4%, #f8fafc);
    border-color: color-mix(in srgb, var(--co-primary) 18%, #e2e8f0);
}

.co-list-card.is-system .co-empty i { color: var(--co-primary); }

.co-list-card.is-org .co-empty {
    background: color-mix(in srgb, #2f9e44 5%, #f8fafc);
    border-color: color-mix(in srgb, #2f9e44 20%, #e2e8f0);
}

.co-list-card.is-org .co-empty i { color: #2f9e44; }

.co-occasion-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    list-style: none;
    margin: 0;
    max-height: 220px;
    overflow: auto;
    padding: 0;
}

.co-occasion-list li {
    align-items: flex-start;
    background: #fff;
    border: 1px dashed #cbd5e1;
    border-radius: 10px;
    display: flex;
    gap: 8px;
    padding: 8px 9px;
}

.co-occasion-list li:hover {
    background: #f8fafc;
    border-color: #94a3b8;
}

.co-occasion-list .co-dot,
.co-cat-option .co-dot {
    border-radius: 50%;
    display: inline-block;
    flex: 0 0 auto;
    height: 8px;
    margin-top: 4px;
    width: 8px;
}

.co-occasion-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.co-occasion-body strong,
.co-occasion-body .co-occasion-title {
    color: var(--co-ink);
    font-size: .78rem;
    font-weight: 700;
}

.co-occasion-body .co-occasion-title.is-holiday {
    color: #b91c1c;
}

.co-occasion-body small {
    color: var(--co-muted);
    font-size: .68rem;
}

.co-item-actions { display: inline-flex; }

.co-cat-option {
    align-items: center;
    display: inline-flex;
    gap: 8px;
}

/* فرم مودال مناسبت — فاصله ردیف‌ها و فاصله تا دکمه‌ها فشرده */
.co-occasion-dialog.mud-dialog {
    height: auto !important;
}

.co-occasion-dialog.mud-dialog .mud-dialog-content {
    flex: 0 0 auto !important;
    flex-grow: 0 !important;
    padding-bottom: 2px !important;
    padding-top: 8px !important;
}

.co-occasion-dialog.mud-dialog .mud-dialog-actions {
    border-top: 0 !important;
    margin-top: 0 !important;
    min-height: 0 !important;
    padding-top: 2px !important;
    padding-bottom: 8px !important;
}

.co-occasion-dialog.mud-dialog .mud-dialog-actions .mud-button-root {
    margin-top: 0 !important;
}

.co-occasion-form-switch .mud-switch,
.co-occasion-form-switch .mud-input-control {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
}

.co-occasion-form.mud-grid {
    --mud-palette-table-hover: transparent;
}

.co-occasion-form > .mud-grid-item.co-form-row-date {
    order: -2 !important;
}

.co-occasion-form > .mud-grid-item.co-form-row-kind {
    order: -1 !important;
}

.co-occasion-form > .mud-grid-item {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

.co-occasion-form .mud-input-helper-text,
.co-occasion-form .mud-input-control > .mud-input-control-input-container + .mud-input-helper-text {
    margin-top: 0;
    min-height: 0;
}

.co-occasion-form-switch {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.co-occasion-form .mud-input-control {
    margin-bottom: 0 !important;
}

.co-occasion-list li.co-occasion-clickable {
    cursor: pointer;
}

.co-occasion-list li.co-occasion-clickable:hover {
    background: #f8fafc;
}

.co-occasion-details-dialog .mud-dialog {
    border-radius: 18px !important;
    overflow: hidden;
}

.co-occasion-details-dialog .mud-dialog-title {
    background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
    border-bottom: 1px solid #eef2f7 !important;
    padding: 12px 16px !important;
}

.co-occasion-details-dialog .mud-dialog-content {
    padding: 12px 16px 2px !important;
}

.co-occasion-details-dialog .mud-dialog-actions {
    border-top: 0 !important;
    gap: 6px;
    justify-content: flex-end;
    margin-top: 0 !important;
    min-height: 0 !important;
    padding: 2px 12px 6px !important;
}

.co-occasion-details-dialog .mud-dialog-actions .mud-button-root {
    font-size: .78rem !important;
    margin-top: 0 !important;
    min-height: 30px !important;
    padding: 2px 10px !important;
}

.co-occasion-details-dialog .mud-dialog-actions .mud-button-root .mud-button-label {
    gap: 4px;
}

.co-occasion-details-dialog .mud-dialog-actions .mud-icon-root {
    font-size: 1rem !important;
}

.co-details-titlebar {
    --accent: #685dd8;
    align-items: center;
    display: flex;
    gap: 10px;
    min-width: 0;
}

.co-details-titlebar-ico {
    align-items: center;
    background: color-mix(in srgb, var(--accent) 14%, #fff);
    border: 1px solid color-mix(in srgb, var(--accent) 26%, #fff);
    border-radius: 8px;
    color: var(--accent);
    display: inline-flex;
    flex: 0 0 auto;
    height: 24px;
    justify-content: center;
    width: 24px;
}

.co-details-titlebar-ico .mud-icon-root {
    font-size: 14px !important;
    height: 14px !important;
    width: 14px !important;
}

.co-details-titlebar-label {
    color: #0f172a;
    font-family: Samim, Tahoma, sans-serif;
    font-size: .95rem;
    font-weight: 800;
    line-height: 1.3;
}

.co-details-titlebar-text {
    display: none;
}

.co-details-dialog-title {
    display: none;
}

.co-details-shell {
    --accent: #685dd8;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.co-details-intro {
    color: #64748b;
    font-family: Samim, Tahoma, sans-serif;
    font-size: .84rem;
    font-weight: 700;
    margin: 0;
}

.co-details-hero {
    background:
        radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--accent) 22%, #fff) 0%, transparent 55%),
        linear-gradient(160deg, #f8fafc 0%, #fff 60%);
    border: 1px solid color-mix(in srgb, var(--accent) 18%, #e2e8f0);
    border-radius: 16px;
    overflow: hidden;
    padding: 16px 16px 14px;
    position: relative;
}

.co-details-hero-band {
    background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 35%, #fff));
    height: 4px;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.co-details-hero-glow {
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    border-radius: 999px;
    filter: blur(28px);
    height: 120px;
    left: -30px;
    opacity: .55;
    pointer-events: none;
    position: absolute;
    top: -40px;
    width: 120px;
}

.co-details-hero-top {
    align-items: flex-start;
    display: flex;
    gap: 10px;
    justify-content: space-between;
    margin-bottom: 10px;
    position: relative;
    z-index: 1;
}

.co-details-hero-identity {
    align-items: center;
    display: flex;
    flex: 1;
    gap: 10px;
    min-width: 0;
}

.co-details-mark {
    align-items: center;
    background: color-mix(in srgb, var(--accent) 14%, #fff);
    border: 1px solid color-mix(in srgb, var(--accent) 28%, #fff);
    border-radius: 12px;
    color: var(--accent);
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 1.15rem;
    height: 40px;
    justify-content: center;
    width: 40px;
}

.co-details-name {
    color: #0f172a;
    font-family: Samim, Tahoma, sans-serif;
    font-size: 1.08rem;
    font-weight: 800;
    line-height: 1.4;
    margin: 0;
    min-width: 0;
}

.co-details-name.is-holiday {
    color: #b91c1c;
}

.co-details-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
}

.co-details-chip {
    border-radius: 999px;
    font-family: Samim, Tahoma, sans-serif;
    font-size: .72rem;
    font-weight: 700;
    padding: 4px 10px;
}

.co-details-chip.is-system {
    background: color-mix(in srgb, #685dd8 14%, #fff);
    color: #4f46a8;
}

.co-details-chip.is-org {
    background: color-mix(in srgb, #2f9e44 14%, #fff);
    color: #1f7a33;
}

.co-details-chip.is-holiday {
    background: #ffe4e8;
    color: #b91c1c;
}

.co-details-chip.is-on {
    background: #e8f8ee;
    color: #198754;
}

.co-details-chip.is-off {
    background: #f1f5f9;
    color: #64748b;
}

.co-details-date-line {
    align-items: center;
    color: #64748b;
    display: flex;
    flex-wrap: wrap;
    font-size: .84rem;
    font-weight: 600;
    gap: 6px;
    margin: 0;
    position: relative;
    z-index: 1;
}

.co-details-date-line i {
    color: var(--accent);
}

.co-details-sep {
    opacity: .45;
}

.co-details-tiles {
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr 1fr;
}

.co-details-tile {
    align-items: flex-start;
    background: #fff;
    border: 1px solid #c9d2de;
    border-radius: 14px;
    box-shadow: 0 1px 0 rgba(15, 23, 42, .02);
    display: flex;
    gap: 10px;
    padding: 12px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.co-details-tile:hover {
    border-color: color-mix(in srgb, var(--accent) 35%, #e8edf4);
    box-shadow: 0 8px 20px rgba(15, 23, 42, .04);
}

.co-details-tile > i {
    align-items: center;
    background: #f8fafc;
    border-radius: 10px;
    color: var(--accent);
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 1rem;
    height: 34px;
    justify-content: center;
    width: 34px;
}

.co-details-tile span {
    color: #94a3b8;
    display: block;
    font-size: .72rem;
    font-weight: 600;
    margin-bottom: 3px;
}

.co-details-tile strong {
    align-items: center;
    color: #0f172a;
    display: inline-flex;
    font-family: Samim, Tahoma, sans-serif;
    font-size: .88rem;
    font-weight: 800;
    gap: 6px;
}

.co-details-tile strong.is-holiday {
    color: #b91c1c;
}

.co-details-swatch {
    border-radius: 999px;
    display: inline-block;
    height: 10px;
    width: 10px;
}

.co-details-note {
    background: linear-gradient(180deg, #fbfcfe 0%, #f8fafc 100%);
    border: 1px solid #c9d2de;
    border-radius: 14px;
    box-shadow: 0 1px 0 rgba(15, 23, 42, .02);
    padding: 12px 14px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.co-details-note:hover {
    border-color: color-mix(in srgb, var(--accent) 35%, #e8edf4);
    box-shadow: 0 8px 20px rgba(15, 23, 42, .04);
}

.co-details-note-head {
    align-items: center;
    color: #64748b;
    display: flex;
    font-size: .78rem;
    font-weight: 700;
    gap: 6px;
    margin-bottom: 8px;
}

.co-details-note p {
    color: #334155;
    font-size: .88rem;
    line-height: 1.7;
    margin: 0;
}

.co-details-note p.is-empty {
    color: #94a3b8;
    font-style: italic;
}

.co-details-primary-btn {
    border-radius: 10px !important;
}

@media (max-width: 560px) {
    .co-details-tiles {
        grid-template-columns: 1fr;
    }
}

.co-occasion-picker-dialog.mud-dialog,
.co-occasion-picker-dialog.my-Dialog.mud-dialog {
    display: flex !important;
    flex-direction: column !important;
    max-height: min(90vh, 900px) !important;
    max-width: 1280px !important;
    overflow: hidden !important;
}

.co-occasion-picker-dialog.mud-dialog .mud-dialog-content,
.co-occasion-picker-dialog.my-Dialog.mud-dialog .mud-dialog-content {
    flex: 1 1 auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: auto !important;
    padding: 8px 12px 2px !important;
}

/* فوتر دقیقاً مثل جزئیات مناسبت — بدون هاشور، دکمه‌ها سمت چپ */
.co-occasion-picker-dialog.mud-dialog .mud-dialog-actions,
.co-occasion-picker-dialog.my-Dialog.mud-dialog .mud-dialog-actions {
    background: transparent !important;
    border-top: 0 !important;
    flex: 0 0 auto !important;
    gap: 8px;
    justify-content: flex-end !important;
    margin-top: 0 !important;
    min-height: 0 !important;
    padding: 2px 16px 8px !important;
    position: static;
}

.co-occasion-picker-dialog.mud-dialog .mud-dialog-actions::before,
.co-occasion-picker-dialog.my-Dialog.mud-dialog .mud-dialog-actions::before {
    content: none !important;
    display: none !important;
}

.co-occasion-picker-dialog.mud-dialog .mud-dialog-actions .mud-button-root,
.co-occasion-picker-dialog.my-Dialog.mud-dialog .mud-dialog-actions .mud-button-root {
    margin-top: 0 !important;
}

.co-picker-page {
    padding: 0 !important;
}

.co-picker-page .co-shell {
    border-radius: 14px;
    box-shadow: none;
    margin: 0;
    max-width: none;
    padding: 8px 8px 6px;
}

.co-picker-page.co-page {
    margin: 0;
    max-width: none;
    padding: 0 !important;
}

.co-picker-page .co-header {
    display: none;
}

/* آکاردئون فیلتر مودال — فشرده‌تر از صفحه ماژول */
.co-picker-page .co-filters-accordion {
    margin-bottom: 6px;
}

.co-picker-page .co-filters-accordion-toggle {
    padding: 7px 10px;
}

.co-picker-page .co-filters-accordion.is-open .co-filters-stack-row {
    border: 1px solid color-mix(in srgb, var(--co-primary) 14%, #e2e8f0);
    border-radius: 0 0 12px 12px;
    border-top: 0;
    margin-bottom: 0;
    padding: 6px;
}

/* دو باکس فیلتر جدا در یک سطر (دسکتاپ) */
.co-picker-page .co-filters-stack-row {
    align-items: stretch;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 6px;
    margin-bottom: 6px;
}

.co-picker-page .co-filters-stack-row .co-filters {
    align-items: center;
    flex-wrap: nowrap;
    gap: 4px 6px;
    margin-bottom: 0;
    min-width: 0;
    padding: 4px 6px;
}

.co-picker-page .co-filters-stack-row .co-filters[aria-label="فیلتر گروه مناسبت"] {
    flex: 0 0 auto;
}

.co-picker-page .co-filters-stack-row .co-filters[aria-label="فیلتر نوع مناسبت"] {
    flex: 1 1 auto;
}

.co-picker-page .co-filters-stack-row .co-filter-seg {
    flex: 0 1 auto;
    flex-wrap: nowrap;
    gap: 4px;
    min-width: 0;
    padding: 3px;
}

.co-picker-page .co-filters-stack-row .co-filters-tools {
    flex: 0 0 auto;
    gap: 4px;
    margin-inline-start: 0;
}

.co-picker-page .co-filters-label {
    font-size: .72rem;
}

.co-picker-page .co-filter-chip {
    font-size: .75rem;
    padding: 3px 7px;
}

.co-picker-page .co-filter-tick {
    font-size: .58rem;
}

.co-picker-page .co-tool-btn {
    font-size: .64rem;
    padding: 3px 7px;
}

.co-picker-page .co-tool-btn i {
    font-size: .68rem;
}

/* تاریخ: عنوان + متن کامل (وسط) + عددی در یک سطر */
.co-picker-page .co-date-row {
    gap: 6px;
    margin-bottom: 8px;
}

.co-picker-page .co-date-card {
    align-items: center;
    flex-direction: row;
    gap: 8px;
    padding: 6px 10px;
}

.co-picker-page .co-date-kind {
    flex: 0 0 auto;
}

.co-picker-page .co-date-main {
    display: contents;
}

.co-picker-page .co-date-text {
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
}

.co-picker-page .co-date-num {
    flex: 0 0 auto;
}

.co-picker-page .co-layout {
    align-items: start;
    gap: 8px;
}

.co-picker-page .co-lists {
    gap: 6px;
}

.co-picker-page .co-list-card {
    border-radius: 12px !important;
    padding: 8px 10px 8px;
}

.co-picker-page .co-list-head {
    margin-bottom: 4px;
    padding-bottom: 4px;
}

.co-picker-page .co-empty {
    padding: 8px 6px;
}

.co-picker-page .co-calendar-panel {
    align-self: start;
    padding: 6px;
}

.co-picker-page .co-occasion-list li {
    cursor: pointer;
}

/* انتخاب در لیست تقویمی/سازمانی — کادر تیره + تیک سبز */
.co-picker-page .co-list-card.is-system .co-occasion-list li.is-picked,
.co-picker-page .co-list-card.is-org .co-occasion-list li.is-picked {
    background: color-mix(in srgb, #2f9e44 8%, #fff);
    border: 1.5px solid #2f9e44;
    box-shadow: none;
}

.co-picker-page .co-list-card.is-system .co-occasion-list li.is-picked {
    background: color-mix(in srgb, #685dd8 8%, #fff);
    border-color: #685dd8;
}

.co-picked-check {
    color: #2f9e44 !important;
    flex: 0 0 auto;
    font-size: 1.45rem !important;
    line-height: 1;
    margin-top: 2px;
}

.co-pick-add-btn {
    align-items: center;
    align-self: center;
    background: color-mix(in srgb, #2f9e44 10%, #fff);
    border: 1px solid color-mix(in srgb, #2f9e44 40%, #fff);
    border-radius: 8px;
    color: #2b8a3e;
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 auto;
    font-family: inherit;
    font-size: .68rem;
    font-weight: 700;
    gap: 3px;
    line-height: 1;
    padding: 5px 8px;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
    white-space: nowrap;
}

.co-pick-add-btn i {
    font-size: .85rem;
    line-height: 1;
}

.co-pick-add-btn:hover {
    background: #2f9e44;
    border-color: #2f9e44;
    color: #fff;
}

.co-list-card.is-system .co-pick-add-btn {
    background: color-mix(in srgb, var(--co-primary) 10%, #fff);
    border-color: color-mix(in srgb, var(--co-primary) 40%, #fff);
    color: var(--co-primary);
}

.co-list-card.is-system .co-pick-add-btn:hover {
    background: var(--co-primary);
    border-color: var(--co-primary);
    color: #fff;
}

.co-clear-pick {
    align-items: center;
    background: transparent;
    border: 0;
    color: #94a3b8;
    cursor: pointer;
    display: inline-flex;
    padding: 4px;
}

.co-clear-pick:hover {
    color: #e03131;
}

/* باکس انتخاب‌شده — رنگ متمایز (کهربایی) و کادر متفاوت */
.co-list-card.is-selected-pick {
    background:
        linear-gradient(180deg, color-mix(in srgb, #f59f00 10%, #fff) 0%, #fff 48%) !important;
    border-color: color-mix(in srgb, #f59f00 35%, #e2e8f0) !important;
}

.co-list-card.is-selected-pick::before {
    background: #f59f00;
}

.co-list-card.is-selected-pick .co-list-ico-wrap {
    background: color-mix(in srgb, #f59f00 16%, #fff);
    color: #d97706;
}

.co-list-card.is-selected-pick .co-list-ico {
    color: inherit;
}

.co-list-card.is-selected-pick .co-list-tag {
    background: color-mix(in srgb, #f59f00 16%, #fff);
    border: 1px solid color-mix(in srgb, #f59f00 40%, #fff);
    color: #b45309;
    font-size: .65rem;
    font-style: normal;
    font-weight: 700;
    padding: 2px 8px;
}

.co-list-card.is-selected-pick .co-empty i {
    color: #f59f00;
}

.co-picker-page .co-list-card.is-selected-pick .co-occasion-list li.is-picked {
    background: color-mix(in srgb, #f59f00 12%, #fff);
    border: 1.5px solid #f59f00;
    box-shadow: none;
}

.co-occasion-select-box {
    align-items: center;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: space-between;
    padding: 12px 14px;
}

.co-occasion-select-main {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 2px;
    min-width: 180px;
}

.co-selected-card.is-empty {
    --accent: #685dd8;
    background: linear-gradient(180deg, color-mix(in srgb, #685dd8 5%, #fff) 0%, #fff 70%);
    border-style: solid;
}

.co-selected-card.is-empty .co-selected-card-title {
    color: #475569;
    font-size: .9rem;
    font-weight: 800;
}

.co-selected-card.is-empty .co-selected-card-mark {
    background: color-mix(in srgb, #685dd8 10%, #fff);
    color: #685dd8;
    opacity: .9;
}

/* انتخاب روش تعیین روز ارسال مناسبتی */
.co-source-mode {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 12px 2px;
}

.co-source-mode-label {
    color: #334155;
    font-size: .78rem;
    font-weight: 800;
    line-height: 1.2;
}

.co-source-mode .mud-radio-group,
.co-source-mode-group.mud-radio-group,
.co-source-mode-group {
    align-items: center !important;
    column-gap: 40px !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 4px 40px !important;
    margin: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    row-gap: 4px !important;
}

.co-source-mode .mud-radio,
.co-source-mode-group .mud-radio,
.co-source-mode-radio.mud-radio,
label.co-source-mode-radio {
    height: auto !important;
    margin-bottom: 0 !important;
    margin-inline-end: 28px !important;
    margin-top: 0 !important;
    min-height: 0 !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}

.co-source-mode .mud-radio-content,
.co-source-mode .mud-button-root,
.co-source-mode .mud-typography {
    line-height: 1.2 !important;
    margin: 0 !important;
    padding-bottom: 0 !important;
}

.co-source-mode .mud-radio .mud-icon-button,
.co-source-mode .mud-radio .mud-button-root {
    margin: 0 !important;
    padding: 4px !important;
}

.co-source-mode-option {
    align-items: center;
    display: inline-flex;
    font-size: .82rem;
    font-weight: 700;
    gap: 6px;
}

.co-source-mode-option i {
    font-size: 1rem;
    opacity: .9;
}

.co-source-mode-hint {
    margin: 0 !important;
}

.co-select-box-item.mud-grid-item,
.mud-grid-item.co-select-box-item {
    margin-bottom: 4px !important;
    padding-bottom: 2px !important;
}

.co-custom-field-body {
    align-items: flex-start !important;
    width: 100%;
}

.co-custom-field-select-wrap {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
}

.co-custom-field-select-wrap .mud-input-control {
    margin-top: 2px;
}

.co-field-hint {
    color: #94a3b8 !important;
    display: block;
    font-size: .68rem !important;
    font-weight: 500 !important;
    line-height: 1.45;
    margin-top: 4px !important;
}

/* کارت مناسبت انتخاب‌شده در تنظیمات ارسال مناسبتی */
.co-selected-card {
    --accent: #685dd8;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--accent) 7%, #fff) 0%, #fff 70%);
    border: 1px solid color-mix(in srgb, var(--accent) 28%, #e2e8f0);
    border-radius: 12px;
    overflow: hidden;
    position: relative;
}

.co-selected-card-band {
    background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #fff));
    height: 3px;
    width: 100%;
}

.co-selected-card-head {
    align-items: center;
    background: color-mix(in srgb, var(--accent) 8%, #fff);
    border-bottom: 1px dashed color-mix(in srgb, var(--accent) 22%, #e2e8f0);
    color: #0f172a;
    display: flex;
    font-size: .82rem;
    font-weight: 900;
    gap: 6px;
    line-height: 1;
    padding: 7px 12px;
}

.co-selected-card-head span {
    color: #0f172a;
    font-weight: 900;
}

.co-selected-card-head i {
    color: var(--accent);
    font-size: 1.05rem;
    line-height: 1;
}

.co-selected-card-body {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 12px;
    justify-content: space-between;
    padding: 9px 12px 10px;
}

.co-selected-card-mark {
    align-items: center;
    background: color-mix(in srgb, var(--accent) 14%, #fff);
    border: 1px solid color-mix(in srgb, var(--accent) 28%, #fff);
    border-radius: 10px;
    color: var(--accent);
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 1.05rem;
    height: 34px;
    justify-content: center;
    width: 34px;
}

.co-selected-card-main {
    display: flex;
    flex: 1 1 220px;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.co-selected-card-title {
    color: #0f172a;
    display: block;
    font-size: .95rem;
    font-weight: 800;
    letter-spacing: -.01em;
    line-height: 1.35;
}

.co-selected-card-title.is-holiday {
    color: #c92a2a;
}

.co-selected-card-details {
    align-items: center;
    color: #64748b;
    display: flex;
    flex-wrap: wrap;
    font-size: .72rem;
    font-weight: 600;
    gap: 5px 6px;
    line-height: 1.3;
}

.co-selected-chip {
    align-items: center;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    color: #475569;
    display: inline-flex;
    font-size: .65rem;
    font-weight: 700;
    gap: 4px;
    line-height: 1;
    padding: 3px 7px;
    white-space: nowrap;
}

.co-selected-chip.is-system {
    background: color-mix(in srgb, #685dd8 12%, #fff);
    border-color: color-mix(in srgb, #685dd8 30%, #fff);
    color: #5b4fc9;
}

.co-selected-chip.is-org {
    background: color-mix(in srgb, #2f9e44 12%, #fff);
    border-color: color-mix(in srgb, #2f9e44 30%, #fff);
    color: #2b8a3e;
}

.co-selected-chip.is-holiday {
    background: color-mix(in srgb, #e03131 10%, #fff);
    border-color: color-mix(in srgb, #e03131 28%, #fff);
    color: #c92a2a;
}

.co-selected-chip.is-cat {
    background: #fff;
}

.co-selected-swatch {
    border-radius: 50%;
    display: inline-block;
    height: 7px;
    width: 7px;
}

.co-selected-meta-item {
    align-items: center;
    display: inline-flex;
    gap: 3px;
    white-space: nowrap;
}

.co-selected-meta-item i {
    font-size: .82rem;
    opacity: .85;
}

.co-selected-sep {
    color: #cbd5e1;
}

.co-selected-card-actions {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
}

@media (max-width: 600px) {
    .co-selected-card-body {
        padding: 10px;
    }

    .co-selected-card-title {
        font-size: .9rem;
    }

    .co-selected-card-actions {
        width: 100%;
    }

    .co-selected-card-actions .mud-button-root {
        width: 100%;
    }
}

.co-picker-dialog {
    min-height: 420px;
}

.co-picker-layout {
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(0, 1.4fr) minmax(260px, .9fr);
}

.co-picker-cal {
    max-height: 520px;
    overflow: auto;
}

.co-picker-side {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px;
}

.co-picker-empty {
    color: #64748b;
    font-size: .85rem;
    padding: 12px 4px;
}

@media (max-width: 900px) {
    .co-picker-layout {
        grid-template-columns: 1fr;
    }
}

.co-send-picker {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 10px;
}

.co-send-cal {
    max-height: 420px;
    overflow: auto;
}

.co-send-cal .co-pishgam {
    font-size: .9em;
}

.co-send-occasion-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.co-send-occasion-item {
    align-items: center;
    background: #fff;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    gap: 8px;
    padding: 8px 10px;
    text-align: right;
    width: 100%;
}

.co-send-occasion-item.is-selected {
    background: color-mix(in srgb, #685dd8 10%, #fff);
    border-color: #685dd8;
}

.co-send-occasion-item small {
    color: #64748b;
}

.co-form-kind-toggle {
    align-items: center;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    display: flex;
    justify-content: flex-start;
    min-height: 44px;
    padding: 8px 12px;
    position: relative;
}

.co-form-kind-label {
    color: #475569;
    font-size: .82rem;
    font-weight: 700;
    position: relative;
    z-index: 1;
}

.co-form-kind-group {
    left: 50%;
    min-width: 220px;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}

.co-form-kind-group .mud-toggle-item {
    flex: 1 1 0;
    font-family: Samim, Tahoma, sans-serif !important;
    font-weight: 700 !important;
    justify-content: center;
}

.co-form-date-banner {
    align-items: center;
    background: color-mix(in srgb, #685dd8 10%, #fff);
    border: 1px solid color-mix(in srgb, #685dd8 28%, #e2e8f0);
    border-radius: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    justify-content: space-between;
    padding: 8px 12px;
}

.co-form-date-label {
    color: #64748b;
    font-size: .78rem;
    font-weight: 600;
}

.co-form-date-value {
    color: #312e81;
    font-size: .86rem;
    font-weight: 800;
    letter-spacing: .01em;
}

/* روز / ماه / سال — هر سه MudSelect با فونت نرم‌افزار */
.co-occasion-dialog .co-form-date-field,
.co-occasion-dialog .co-form-date-field .mud-input-slot,
.co-occasion-dialog .co-form-date-field .mud-select-input,
.co-occasion-dialog .co-form-date-field .mud-typography,
.co-occasion-dialog .co-form-month-value,
.co-occasion-dialog .co-form-month-name {
    color: #334155 !important;
    font-family: Samim, Tahoma, sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
}

.co-occasion-dialog .co-form-date-field .co-month-num {
    color: #64748b !important;
    font-family: Samim, Tahoma, sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}

.co-occasion-dialog .co-form-month-value {
    align-items: center;
    display: inline-flex;
    gap: 4px;
}

@media (max-width: 1100px) {
    .co-layout { grid-template-columns: 1fr; }
    .co-calendar-panel { order: -1; }

    /* تبلت: باکس‌های فیلتر زیر هم، چیپ‌ها قابل شکستن */
    .co-picker-page .co-filters-stack-row {
        flex-direction: column;
        flex-wrap: wrap;
    }

    .co-picker-page .co-filters-stack-row .co-filters,
    .co-picker-page .co-filters-stack-row .co-filters[aria-label="فیلتر گروه مناسبت"],
    .co-picker-page .co-filters-stack-row .co-filters[aria-label="فیلتر نوع مناسبت"] {
        flex: 1 1 100%;
        flex-wrap: wrap;
        width: 100%;
    }

    .co-picker-page .co-filters-stack-row .co-filter-seg {
        flex: 1 1 auto;
        flex-wrap: wrap;
    }

    .co-filters-stack .co-filters {
        flex-wrap: wrap;
    }

    .co-filters-stack .co-filter-seg {
        flex: 1 1 100%;
        flex-wrap: wrap;
    }

    /* هدر تقویم — تبلت: ماه و سال تمام‌عرض و منظم */
    .co-cal-toolbar {
        flex-direction: column;
        gap: 8px;
    }

    .co-cal-nav {
        display: flex;
        width: 100%;
    }

    .co-month-dd {
        flex: 1 1 auto;
        min-width: 0;
    }

    .co-month-trigger,
    .co-pishgam select.co-cal-select,
    .co-pishgam .co-cal-select {
        min-width: 0;
        text-align: center !important;
        width: 100%;
    }

    .co-month-dd {
        position: relative;
    }

    .co-month-trigger {
        justify-content: center !important;
        padding-inline: 2rem .7rem !important;
        position: relative;
    }

    /* فلش مثل دسکتاپ سمت چپ بماند (نه برعکس) */
    .co-month-trigger .co-month-caret {
        inset-inline-end: 10px;
        inset-inline-start: auto;
        margin-inline-start: 0;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }

    .co-month-dd.is-open .co-month-trigger .co-month-caret {
        transform: translateY(-50%) rotate(180deg);
    }

    /* لیست ماه تمام‌عرض و هم‌تراز با کمبو */
    .co-month-menu {
        inset-inline-end: 0;
        inset-inline-start: 0;
        left: 0;
        min-width: 100%;
        right: 0;
        width: 100%;
    }

    .co-month-item {
        font-size: .68rem;
        justify-content: center;
        padding: 4px 6px;
        text-align: center;
    }

    .co-month-item-check {
        font-size: .5rem;
    }

    .co-month-num {
        font-size: .5rem;
    }

    .co-month-menu {
        max-height: 240px;
        padding: 4px;
    }

    .co-pishgam select.co-cal-select,
    .co-pishgam select.form-select.co-cal-select {
        background-position: left .65rem center;
        padding-inline: 1.75rem .75rem !important;
        text-align: center !important;
        text-align-last: center;
    }

    .co-pishgam .co-weekdays {
        margin-inline: 0;
    }

    .co-pishgam .co-weekday {
        font-size: .78rem !important;
        padding: .36rem .1rem;
    }

    .co-calendar-panel {
        padding: 12px 10px 10px !important;
    }

    /* نشانه‌های روز — تبلت (خواناتر از دسکتاپ) */
    .co-pishgam .co-dnt-table tbody td.co-cell {
        height: 56px;
        min-height: 56px;
    }

    .co-pishgam .co-day-num,
    .co-pishgam .co-day-num b {
        font-size: 1rem;
    }

    .co-cell-inner {
        padding-bottom: 10px;
    }

    .co-marks {
        bottom: 4px;
        gap: 3px;
        max-width: calc(100% - 6px);
        right: 4px;
    }

    .co-mark {
        border: 1px solid #fff;
        border-radius: 2px;
        box-shadow:
            0 0 0 1px color-mix(in srgb, var(--ev, #868e96) 30%, transparent),
            0 1px 2px rgba(15, 23, 42, .14);
        height: 8px;
        width: 10px;
    }

    .co-mark-more {
        font-size: .62rem;
        padding: 2px 4px;
    }

    .co-holiday-flag {
        font-size: .58rem;
        font-weight: 800;
        inset-inline-start: 3px;
        padding: 2px 4px;
        top: 3px;
        transform: none;
    }

    .co-pishgam td.co-cell.is-holiday .co-cell-inner {
        padding-top: 12px;
    }
}

@media (max-width: 800px) {
    .co-date-row { grid-template-columns: 1fr; }
    .co-date-text { white-space: normal; }

    .co-picker-page .co-date-card {
        flex-wrap: wrap;
        gap: 4px 8px;
    }

    .co-picker-page .co-filters-accordion-hint {
        display: none;
    }

    .co-pishgam .co-weekday-full {
        display: none;
    }

    .co-pishgam .co-weekday-short {
        display: inline;
    }

    .co-pishgam .co-weekday {
        font-size: .82rem !important;
        font-weight: 800 !important;
    }

    .co-month-trigger,
    .co-pishgam select.co-cal-select,
    .co-pishgam .co-nav-btn,
    .co-pishgam button.co-nav-btn {
        font-size: .84rem;
        min-height: 34px;
    }

    .co-pishgam .co-nav-btn,
    .co-pishgam button.co-nav-btn {
        height: 34px;
        width: 34px;
    }

    .co-today-btn span {
        font-size: .78rem;
    }

    /* نشانه‌های روز — تبلت باریک / موبایل بزرگ */
    .co-pishgam .co-dnt-table tbody td.co-cell {
        height: 52px;
        min-height: 52px;
        padding: 3px !important;
    }

    .co-pishgam .co-day-num,
    .co-pishgam .co-day-num b {
        font-size: .95rem;
        min-width: 1.3rem;
    }

    .co-cell-inner {
        padding-bottom: 9px;
    }

    .co-marks {
        bottom: 3px;
        gap: 2px;
        max-width: calc(100% - 4px);
        right: 3px;
    }

    .co-mark {
        border: 1px solid #fff;
        border-radius: 2px;
        box-shadow:
            0 0 0 1px color-mix(in srgb, var(--ev, #868e96) 28%, transparent),
            0 1px 2px rgba(15, 23, 42, .12);
        height: 7px;
        width: 9px;
    }

    .co-mark-more {
        font-size: .58rem;
        padding: 1px 3px;
    }

    .co-holiday-flag {
        font-size: .55rem;
        font-weight: 800;
        inset-inline-start: 2px;
        letter-spacing: 0;
        padding: 2px 4px;
        top: 2px;
        transform: none;
    }

    .co-pishgam td.co-cell.is-holiday .co-cell-inner {
        padding-top: 11px;
    }
}

@media (max-width: 640px) {
    .co-shell { border-radius: 14px; padding: 10px; }
    .co-filters { align-items: stretch; flex-direction: column; }
    .co-filters-tools { margin-inline-start: 0; }
    .co-dnt-table tbody td {
        height: 48px;
        min-height: 48px;
    }

    /* موبایل: هر باکس فیلتر ستونی — عنوان، چیپ‌ها، دکمه‌ها */
    .co-picker-page .co-filters-stack-row .co-filters {
        align-items: stretch;
        flex-direction: column;
        gap: 6px;
    }

    .co-picker-page .co-filters-stack-row .co-filters-tools {
        justify-content: flex-start;
        margin-inline-start: 0;
        width: 100%;
    }

    .co-picker-page .co-filters-stack-row .co-filter-seg {
        width: 100%;
    }

    .co-filters-stack .co-filters {
        align-items: stretch;
        flex-direction: column;
        gap: 6px;
    }

    .co-filters-stack .co-filters-tools {
        justify-content: flex-start;
        width: 100%;
    }

    /* هدر تقویم — موبایل فشرده */
    .co-calendar-panel {
        padding: 8px 6px 8px !important;
    }

    .co-cal-toolbar {
        gap: 6px;
        margin-bottom: 8px;
    }

    .co-pishgam {
        --co-cal-gap: 3px;
    }

    .co-pishgam .co-weekdays {
        border-radius: 8px;
        margin-bottom: 4px;
    }

    .co-pishgam .co-weekday {
        font-size: .78rem !important;
        padding: .28rem 0;
    }

    .co-pishgam .co-dnt-table tbody td.co-cell {
        height: 48px;
        min-height: 48px;
        padding: 2px !important;
    }

    /* نشانه‌های روز — موبایل خوانا */
    .co-pishgam .co-day-num,
    .co-pishgam .co-day-num b {
        font-size: .88rem;
        min-width: 1.2rem;
    }

    .co-cell-inner {
        padding-bottom: 8px;
    }

    .co-marks {
        bottom: 3px;
        gap: 2px;
        max-width: calc(100% - 4px);
        right: 3px;
    }

    .co-mark {
        border: 1px solid #fff;
        border-radius: 2px;
        box-shadow:
            0 0 0 1px color-mix(in srgb, var(--ev, #868e96) 28%, transparent),
            0 1px 2px rgba(15, 23, 42, .12);
        height: 7px;
        width: 8px;
    }

    .co-mark-more {
        font-size: .55rem;
        padding: 1px 3px;
    }

    .co-holiday-flag {
        font-size: .52rem;
        font-weight: 800;
        inset-inline-start: 2px;
        padding: 1px 3px;
        top: 2px;
        transform: none;
    }

    .co-pishgam td.co-cell.is-holiday .co-cell-inner {
        padding-top: 10px;
    }

    .co-today-bar {
        margin-top: 8px;
    }

    .co-today-btn {
        max-width: 100%;
        padding: .4rem .7rem !important;
    }
}


/* ========== Online Top-Up Dialog (navbar) ========== */
.otu-dialog.mud-dialog,
.otu-dialog.my-Dialog.mud-dialog {
    max-width: 640px;
    width: min(96vw, 640px);
    border-radius: 12px !important;
    overflow: hidden;
    box-shadow: 0 28px 70px rgba(35, 28, 90, .22) !important;
}

.otu-dialog.mud-dialog .mud-dialog-title,
.otu-dialog.my-Dialog.mud-dialog .mud-dialog-title {
    padding: 18px 22px 10px !important;
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(93, 69, 232, .14), transparent 55%),
        linear-gradient(180deg, #faf9ff 0%, #fff 100%);
}

.otu-dialog .otu-dialog__content,
.otu-dialog.mud-dialog .mud-dialog-content {
    padding: 8px 22px 6px !important;
    max-height: min(72vh, 720px);
    overflow-y: auto;
}

.otu-dialog .otu-dialog__actions,
.otu-dialog.mud-dialog .mud-dialog-actions {
    padding: 12px 22px 18px !important;
    gap: 10px;
    justify-content: flex-start !important;
    flex-direction: row-reverse;
    border-top: 1px solid #ecebf7;
    background: #fcfbff;
}

@media (max-width: 560px) {
    .otu-dialog.mud-dialog .mud-dialog-title {
        padding: 14px 14px 8px !important;
    }

    .otu-dialog.mud-dialog .mud-dialog-content {
        padding: 6px 14px !important;
    }

    .otu-dialog.mud-dialog .mud-dialog-actions {
        padding: 10px 14px 14px !important;
        flex-wrap: wrap;
    }
}

/* Final online top-up footer spacing override. */
.otu-dialog.mud-dialog .mud-dialog-actions,
.otu-dialog.my-Dialog.mud-dialog .mud-dialog-actions,
.otu-dialog.mud-dialog .otu-dialog__actions {
    box-sizing: border-box;
    min-height: 46px !important;
    padding: 3px 16px !important;
}

/* Final online top-up header height override. */
.otu-dialog.mud-dialog .mud-dialog-title,
.otu-dialog.my-Dialog.mud-dialog .mud-dialog-title {
    box-sizing: border-box;
    min-height: 50px !important;
    padding: 4px 16px !important;
}

.otu-dialog.mud-dialog .otu-title {
    min-height: 36px !important;
}

.otu-dialog.mud-dialog.mud-dialog-rtl .mud-dialog-title .mud-button-close {
    top: 50% !important;
    transform: translateY(-50%) !important;
}

.otu-dialog.mud-dialog .mud-dialog-actions,
.otu-dialog.my-Dialog.mud-dialog .mud-dialog-actions,
.otu-dialog.mud-dialog .otu-dialog__actions {
    min-height: 44px !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    gap: 8px !important;
}

.otu-dialog.mud-dialog .mud-dialog-title .mud-button-close {
    display: none !important;
}

/* Footer buttons — global (MudDialog portals outside scoped CSS) */
.otu-dialog.mud-dialog .otu-dialog__actions > .mud-button-root.otu-cancel-btn,
.otu-dialog.mud-dialog .otu-dialog__actions > .mud-button-root:not(.otu-pay-btn):not(.otu-action-summary),
.otu-dialog.my-Dialog.mud-dialog .otu-dialog__actions > .mud-button-root.otu-cancel-btn,
.otu-dialog.my-Dialog.mud-dialog .otu-dialog__actions > .mud-button-root:not(.otu-pay-btn) {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 64px !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    padding: 0 14px !important;
    font-size: 12px !important;
    line-height: 1 !important;
}

.otu-dialog.mud-dialog .otu-dialog__actions > .mud-button-root.otu-pay-btn,
.otu-dialog.my-Dialog.mud-dialog .otu-dialog__actions > .mud-button-root.otu-pay-btn,
.otu-dialog .otu-pay-btn.mud-button-root {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    padding: 0 14px !important;
    font-size: 12px !important;
    line-height: 1 !important;
}

.otu-dialog .otu-pay-btn .mud-button-label,
.otu-dialog .otu-pay-btn .mud-button-label .mud-icon-root {
    font-size: inherit !important;
}

.otu-dialog .otu-pay-btn .mud-icon-root {
    font-size: 18px !important;
    width: 18px !important;
    height: 18px !important;
}
/* Compact news publication guide and user-assignment summary */
.mud-paper.news-schedule-guide {
    padding: 8px 10px !important;
    border: 1px solid var(--mud-palette-info-lighten);
    border-radius: 7px;
    background: #eaf6ff !important;
    background-color: #eaf6ff !important;
}

.news-schedule-guide .mud-stack-row {
    align-items: center !important;
}

.news-schedule-guide .mud-icon-root {
    width: 17px;
    height: 17px;
    font-size: 17px;
    margin-top: 0 !important;
}

.news-schedule-guide .mud-typography-subtitle2 {
    font-size: .78rem;
    line-height: 1.35;
    font-weight: 600;
}

.news-schedule-guide .mud-typography-caption {
    font-size: .68rem;
    line-height: 1.45;
    opacity: .78;
}

.news-user-assignment-card .co-selected-card-body {
    min-height: 58px;
    padding-block: 8px;
    gap: 9px;
}

.news-user-assignment-card .co-selected-card-mark {
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 9px;
}

.news-user-assignment-card .co-selected-card-title {
    font-size: .78rem;
    line-height: 1.35;
    font-weight: 600;
}

.news-user-assignment-card .co-selected-card-details {
    margin-top: 3px;
    gap: 4px;
}

.news-user-assignment-card .my-Listchip {
    min-height: 23px;
    height: 23px;
    font-size: .68rem;
}

/* Active sessions card header (global because this project does not load scoped css consistently) */
.session-card {
    border: 1px solid rgba(98, 84, 221, .13) !important;
    border-radius: 12px !important;
}

.session-card .session-card-head {
    width: 100%;
    min-height: 36px;
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px;
    padding-bottom: 9px;
    border-bottom: 1px solid rgba(25, 30, 50, .07);
}

.session-card .session-ip {
    flex: 0 0 auto;
    color: var(--mud-palette-primary);
    font-size: 1rem;
    font-weight: 700;
    line-height: 26px;
    white-space: nowrap;
}

.session-card .current-session-chip {
    flex: 0 0 auto !important;
    width: auto !important;
    height: 25px !important;
    margin: 0 !important;
    font-size: .69rem !important;
    font-weight: 700 !important;
    white-space: nowrap;
}

.session-card .session-active-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--mud-palette-success);
    font-size: .7rem;
    font-weight: 700;
}

.session-card .session-active-label > span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--mud-palette-success);
}

.session-card .session-time-grid {
    width: 100%;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px;
    margin: 9px 0 12px !important;
}

.session-card .session-time-item {
    min-width: 0;
    min-height: 48px;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px;
    padding: 6px 7px;
    border: 1px solid rgba(98, 84, 221, .07);
    border-radius: 8px;
    background: rgba(98, 84, 221, .035);
}

.session-card .session-time-item .mud-icon-root {
    flex: 0 0 auto;
    color: var(--mud-palette-primary);
    font-size: 16px;
}

.session-card .session-time-item > div {
    min-width: 0;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start;
    gap: 2px;
}

.session-card .session-time-item span {
    color: #8a91a3;
    font-size: .63rem;
    line-height: 1.3;
    white-space: nowrap;
}

.session-card .session-time-item strong {
    max-width: 100%;
    display: block;
    overflow: hidden;
    color: #34394b;
    font-size: .66rem;
    font-weight: 700;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 390px) {
    .session-card .session-time-grid {
        grid-template-columns: 1fr !important;
    }
}
/* Statistics reports: MudSelect popovers are rendered in a portal outside scoped component CSS. */
.report-multi-select-popover {
    margin-top: 4px;
    overflow: hidden;
    border: 1px solid #dddbea;
    border-radius: 12px !important;
    background: #fff;
    box-shadow: 0 12px 32px rgba(46, 43, 70, .14) !important;
    font-family: ReportPersian, Samim, sans-serif !important;
}

.report-multi-select-popover .mud-list {
    padding: .35rem !important;
}

.report-multi-select-popover .mud-list-item {
    min-height: 38px;
    margin: 2px 0;
    border-radius: 8px;
    color: #4e5363;
    font-size: .72rem;
}

.report-multi-select-popover .mud-list-item:hover {
    background: #f5f3fc;
}

.report-multi-select-popover .mud-list-item.mud-selected-item {
    background: #f0edfc;
    color: #5d5299;
    font-weight: 700;
}

.report-multi-select-popover .mud-checkbox .mud-icon-root {
    color: #7769df;
    font-size: 1.25rem;
}
    display: inline-flex;
    gap: 2px;