@font-face {
    font-family: "VazirMatn";
    src: url(assets/fonts/Vazirmatn-FD-Regular.woff2) format('woff2');
    font-weight: 400
}
.responsive-grid-with-limits {
    max-height: calc(100vh - 150px);
}


/*.e-edit-dialog .e-footer-content{
    padding:unset !important;
    display:none !important;
}*/
.toast-icons {
    font-family: 'Toast_icons' !important;
    speak: none;
/*    font-size: 55px;*/
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.ri-checkbox-circle-line:before, .ri-error-warning-line:before, .ri-close-circle-line:before, .ri-question-line:before {
    font-size: 25px;
}


[data-bs-theme=dark] .e-grid .e-altrow {
    background-color: #222121 !important;
}

.e-grid .e-altrow {
    background-color: #fafafa !important;
}
.divider {
    display: block;
    text-align: center;
    margin: 1rem 0;
    overflow: hidden;
    white-space: nowrap;
}
    .divider .divider-text {
        position: relative;
        display: inline-block;
        /*font-size: 0.8rem;*/
        padding: 0rem 1rem;
        font-weight:bold;
    }
    .divider.divider.divider-info .divider-text:before, .divider.divider.divider-info .divider-text:after {
        border-color: #00cfdd;
    }
    .divider .divider-text:before {
        right: 100%;
    }
    .divider .divider-text:before, .divider .divider-text:after {
        content: "";
        position: absolute;
        top: 50%;
        width: 100vw;
        border-top: 1px solid #d4d8dd;
    }
    .divider.divider.divider-info .divider-text:before, .divider.divider.divider-info .divider-text:after {
        border-color: #00cfdd;
    }
    .divider .divider-text:after {
        left: 100%;
    }
    .divider .divider-text:before, .divider .divider-text:after {
        content: "";
        position: absolute;
        top: 50%;
        width: 100vw;
        border-top: 1px solid #d4d8dd;
    }
.e-grid .e-emptyrow:not(.e-editedbatchcell):not(.e-updatedtd) {
    text-align: center;
}

.blurred {
    filter: blur(5px);
    pointer-events: none;
    transition: filter 0.5s ease-in-out;
}

/* لایه تیره با لودر */
.content.blurred {
    filter: blur(5px);
    pointer-events: none;
    transition: filter 0.5s ease-in-out;
}

/* لودینگ متمرکز ناوبری صفحات */
.app-page-loading-overlay {
    position: absolute;
    inset: 60px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(244, 247, 252, 0.64);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 1100;
    animation: app-page-loading-fade-in 160ms ease-out;
}

.app-page-loading-card {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    width: min(100%, 22rem);
    padding: 1rem 1.1rem;
    color: #172033;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(var(--app-primary-rgb), 0.18);
    border-radius: 1rem;
    box-shadow: 0 18px 50px rgba(30, 41, 59, 0.16);
}

.app-page-loading-spinner {
    flex: 0 0 auto;
    width: 2.75rem;
    height: 2.75rem;
    border: 4px solid rgba(var(--app-primary-rgb), 0.17);
    border-top-color: var(--app-primary);
    border-inline-end-color: var(--app-accent);
    border-radius: 50%;
    animation: app-page-loading-spin 800ms linear infinite;
}

.app-page-loading-copy {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.app-page-loading-copy strong {
    color: inherit;
    font-size: 0.92rem;
    font-weight: 800;
}

.app-page-loading-copy span {
    color: #667085;
    font-size: 0.76rem;
    line-height: 1.7;
}

.dark .app-page-loading-overlay {
    background: rgba(9, 16, 32, 0.68);
}

.dark .app-page-loading-card {
    color: #f8fafc;
    background: rgba(20, 31, 52, 0.96);
    border-color: rgba(129, 122, 255, 0.28);
    box-shadow: 0 20px 56px rgba(0, 0, 0, 0.4);
}

.dark .app-page-loading-copy span {
    color: #aebbd0;
}

@keyframes app-page-loading-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes app-page-loading-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-page-loading-overlay,
    .app-page-loading-spinner {
        animation: none;
    }
}

.page-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* ارتفاع حداقل برابر با کل صفحه */
}

.e-removeEditcommand .e-unboundcell .e-unboundcelldiv button.e-Editbutton {
    display: none !important;
} 
  
    /*to remove the specific content button alone*/
.e-removeDeletecommand .e-unboundcell .e-unboundcelldiv button.e-Deletebutton {
    display: none !important;
}
.e-grid .e-headercelldiv {
     font-weight: bold !important;

}
[dir=rtl] .e-pager .e-icon-prev::before, [dir=rtl] .e-grid-menu .e-icon-prev::before {
    content: "\e748" !important;
}

[dir=rtl] .e-pager .e-icon-next::before, [dir=rtl] .e-grid-menu .e-icon-next::before {
    content: "\e765" !important;
}

[dir=rtl] .e-pager .e-icon-first::before, [dir=rtl] .e-grid-menu .e-icon-first::before {
    content: "\e818" !important;
}

[dir=rtl] .e-pager .e-icon-last::before, [dir=rtl] .e-grid-menu .e-icon-last::before {
    content: "\e833" !important;
}

[dir=rtl] .e-pager div.e-parentmsgbar {
    float: left !important;
    padding-left: 0 !important;
}

[dir=rtl] .e-grid .e-grid-icon {
    float: right !important;
}

[dir=rtl] .e-grid .e-groupheadercell span {
    float: right !important;
}

[dir=rtl] .e-grid .e-grouptext {
    margin-right: auto !important;
    margin-left: 0 !important;
}

[dir=rtl] .e-grid .e-groupsort {
    margin-right: auto !important;
    margin-left: -2px !important;
}

[dir=rtl] .e-grid .e-groupsort, [dir=rtl] .e-grid .e-ungroupbutton, [dir=rtl] .e-grid .e-toggleungroup {
    margin-left: auto !important;
    margin-right: -10px !important;
}

[dir=rtl] .e-grid.sf-grid span.e-ungroupbutton.e-icons {
    margin-left: auto !important;
    margin-right: -9px !important;
}

[dir=rtl] .e-grid span.e-ungroupbutton.e-icons {
    margin-left: auto !important;
    margin-right: -8px !important;
    padding-right: 0 !important;
    padding-left: 8px !important;
}

[dir=rtl] .e-popup.e-popup-open.e-dialog {
    float: right;
}

/*[dir=rtl] .e-grid .e-filtermenudiv {
    float: left !important;
    margin: -12px 4px -13px -3px !important;
    text-align: left !important;
}*/

/*[dir=rtl] .e-grid .e-gridheader .e-fltr-icon .e-sortfilterdiv {
    margin: -12px 4px -13px 14px !important;
}*/

[dir=rtl] .e-grid .e-sortfilterdiv {
    float: left !important;
    margin: -18px 4px -13px -2px !important;
    padding: 2px 8px 2px 2px !important;
}

[dir=rtl] .e-grid .e-gridheader .e-fltr-icon .e-sortnumber {
    margin: 2px 4px 0 0 !important;
}

[dir=rtl] .e-grid .e-sortnumber {
    float: left !important;
}
/*[dir=rtl] .e-grid .e-gridheader .e-sortfilter .e-fltr-icon .e-headercelldiv {
    margin: -5px -5px -5px 20px !important;
}*/
.e-grid .e-gridheader .e-sortfilter .e-fltr-icon .e-headercelldiv {
    margin: auto;
}
/*[dir=rtl] .e-grid .e-gridheader .e-sortfilter .e-headercelldiv, [dir=rtl] .e-grid .e-gridheader .e-stackedheadercelldiv {
    padding: 0 5px 0 18px !important;
}*/

[dir=rtl] .e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn {
    float: left !important;
    right: 0 !important;
}

[dir=rtl] .custom-label-right {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    float: right !important;
}

[dir=ltr] .custom-label-right {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    float: left !important;
}

.custom-label-right label {
    order: 1;
}

.custom-label-right .e-input-group {
    order: 2;
}

[dir=rtl] .e-input-group, [dir=rtl] .e-btn, [dir=rtl] .e-css.e-btn, [dir=rtl] .e-control, [dir=rtl] .e-css, [dir=rtl] .e-error, [dir=rtl] .e-list-item, [dir=rtl] .e-checkbox-wrapper .e-label, [dir=rtl] .e-css.e-checkbox-wrapper .e-label {
    font-family: VazirMatn,Inter, Helvetica, "sans-serif" !important;
}
    [dir=rtl] .e-btn.e-control.e-link.ki-outline {
        font-family: "keenicons-outline" !important;
    }
[dir=rtl] #MyGridId_ccdlg {
    left: 10px !important;
}

[dir=rtl] .e-dialog .e-footer-content {
    text-align: right !important;
}

[dir=rtl] .e-contextmenu-wrapper ul .e-menu-item .e-menu-icon, [dir=rtl] .e-contextmenu-container ul .e-menu-item .e-menu-icon {
    margin-left: 8px !important;
}

[dir=rtl] .e-grid .e-columnmenu {
    left: 23px !important;
    float: left !important;
    margin: -13px 4px -13px -18px !important;
}

[dir=rtl] .e-contextmenu-wrapper ul .e-menu-item .e-caret, [dir=rtl] .e-contextmenu-container ul .e-menu-item .e-caret {
    margin-right: 16px !important;
    margin-left: 0 !important;
    left: 7px !important;
}

[dir=rtl] .e-footer-content-custom {
    text-align: left !important;
    padding: 10px 20px 10px 20px !important;
}

.e-footer-content-custom {
    text-align: right !important;
    padding: 10px 20px 10px 20px !important;
}

.e-dialog .e-footer-content-custom .e-btn {
    margin-left: 8px !important;
}

#Grid_dialogEdit_wrapper .e-footer-content {
    display: none !important;
}

[dir=rtl] #Grid_columnChooserDialog #Grid_ccdlg {
    left: 0 !important;
}

[dir=rtl] .e-checkbox-wrapper .e-frame + .e-label, [dir=rtl] .e-css.e-checkbox-wrapper .e-frame + .e-label {
    margin-left: auto !important;
    margin-right: 8px !important;
}

[dir=rtl] .e-toast-container .e-toast .e-toast-icon {
    margin-right: auto !important;
    margin-left: 14px !important;
    left: auto !important;
    right: 16px !important;
}

[dir=rtl] .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-left:not(.e-round) .e-spinner {
    padding-right: unset !important;
    padding-left: 12px !important;
}

.menu-item {
    margin-right: 0.0625rem;
}
.e-icons-Check {
    color: #269b09 !important;
}
.e-icons-Close{
    color:#e90d0d !important;
}
.loader {
    width: 18px;
    height: 18px;
    border-width: 1px;
    border-style: dashed solid solid dotted;
    border-color: #2760d7 #2760d7 transparent #2760d7;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}

    .loader::after {
        content: '';
        box-sizing: border-box;
        position: absolute;
        left: 4px;
        top: 13px;
        border: 5px solid transparent;
        border-right-color: #2760d7;
        transform: rotate(-40deg);
    }

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}
[dir=rtl] .required-star {
    color: red;
    margin-right: 4px;
}

html:not([dir=rtl]) .required-star {
    color: red;
    margin-left: 4px;
}
.validation-message {
    color: red;
}


[dir=rtl] .fieldtooltip {
    width:20px;
    float:left;
}

html:not([dir=rtl]) .fieldtooltip {
    width: 20px;
    float: right;
}
.blinking {
    animation: blink 1s infinite;
}

@keyframes blink {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}
.e-grid .e-unboundcelldiv > button {
    margin: 0;
}
.e-btn.e-icon-btn, .e-css.e-btn.e-icon-btn {
    padding-right: 8px !important;
    padding-left: 8px !important;
}


.control-section .dual-list-wrapper {
    width: 60%;
    margin: 0 auto 10px;
    display: flex;
}

.dual-list-groupa,
.dual-list-groupb {
    width: 50%;
}

    .dual-list-groupb .e-listbox-container,
    .dual-list-groupb h4 {
        width: 87%;
        margin-left: 15px;
    }


#listbox-control {
    margin: auto;
}

.e-listbox-tool .e-movefrom::before {
    content: "\e748" !important;
}
.e-listbox-tool .e-moveto::before {
    content: "\e765" !important;
}
.e-listbox-tool .e-moveallto::before {
    content: "\e744" !important;
}
.e-listbox-tool .e-moveallfrom::before {
    content: "\e7a9" !important;
}

.MainCard{
    padding:30px;
/*    margin-top:20px;*/
}
.e-accordion .e-acrdn-item .e-acrdn-header .e-toggle-icon {
    left: 16px !important;
    right:unset !important;
}
.e-icons, .ki-outline {
    vertical-align: middle !important;
}
.e-multi-column {
    font-family: unset !important;
    text-align: right !important;
}
.e-card:hover {
    background-color: unset !important;
    
}
.frame-position-zo {
    position: fixed !important;
   
}
.frame .btn-list button {
    width: 90px !important;

}
.datepicker-plot-area .datepicker-time-view .divider {

    height: 0 !important;

}
.PersainDatePicker .e-input-group-icon.e-date-icon.e-icons {
    display: none;
}
.e-input-group-icon.e-time-icon.e-icons {
    display: none;
}
.e-control.e-timepicker.e-lib.e-input{
    text-align:right;
}
.e-upload .e-upload-files .e-upload-file-list .e-file-container .e-upload-progress-wrap .e-progress-bar-text {
    float: left !important;
}
.e-upload .e-file-select-wrap {
    padding: 12px 12px 12px 0 !important;
}
.e-upload .e-upload-files .e-upload-file-list .e-file-container {
    margin-left: 90px !important;
    margin-right: 12px !important;
}
    .e-upload .e-upload-files .e-upload-file-list .e-file-container .e-file-name {
        float: right !important;
    }
.e-upload .e-upload-files .e-file-remove-btn.e-icons, .e-upload .e-upload-files .e-file-delete-btn.e-icons, .e-upload .e-upload-files .e-file-abort-btn.e-icons, .e-upload .e-upload-files .e-file-pause-btn.e-icons, .e-upload .e-upload-files .e-file-play-btn.e-icons, .e-upload .e-upload-files .e-file-reload-btn.e-icons {
    left: 0 !important;
    right: unset !important;
}
.fr-webreport-toolbar div div a {
    text-align: right !important;
}
.fr-webreport-toolbar div div {
    left:unset !important;
    right:0 !important;
}
#print-area {
    direction: rtl;
    font-family: VazirMatn,Inter, Helvetica, "sans-serif" !important;
    color: #000;
/*    font-size: 14px;*/
}
@media print {
    body {
        font-family: VazirMatn, Tahoma, sans-serif !important;
        direction: rtl;
        margin: 0;
        background: white;
    }
    .a4-container {
        box-shadow: none;
    }
    @page {
        size: A4;
        margin: 0;
    }
}
text {
    font-family: VazirMatn,Inter, Helvetica, "sans-serif" !important;
}

.dxbrv-toolbar .dxbl-toolbar.dxbl-toolbar-adaptive > .dxbl-btn-toolbar {
    direction: ltr !important;
    font-family: VazirMatn,Inter, Helvetica, "sans-serif" !important;
}
.dxbrv-tabs {
    left: 0 !important;
    right: unset !important;
}
.dxbrv-wrapper .dxbrv-tab-panel {
    left: 3.50rem !important;
    right: unset !important;
}
.dxbl-treeview .dxbl-treeview-items-container {
    direction: ltr !important;
}
.dxbrv-wrapper {
    height: 100% !important;
}
.ltrDirection{
    direction:ltr !important;
}
.app-header {
    background-color: unset !important;
}
[data-kt-app-header-minimize=on] .app-header {
    background-color: unset !important;
}
body, .app-default {
    background-color: unset !important;
    background-size: cover;

    
    min-height: 100vh;
}

/*
    .e-rowcell .e-icon-btn .e-icons {
    font-size: 16px !important;
}

.e-rowcell .e-icon-btn .e-icons {
    font-size: 16px !important;
}
*/
.e-grid .e-unboundcelldiv > button {
    margin: unset !important;
}
[dir=rtl] .font-cerebri {
    font-family: VazirMatn, sans-serif;
}

.detached .detached-content {

    padding-top: 20px !important;
}
[data-mode=dark] .e-grid .e-altrow {
    background-color: #222121 !important;
}
a:hover {
  
    text-decoration: none;
}

.wrapper {
    min-height: 90%;
    display: flex;
    flex-direction: column;
}
.offcanvas {

    z-index: 10000 !important;

}
.dxbl-popup-cell{
    z-index:10000 !important;
}
.e-centeralign {
    text-align: center !important;
}

.showTimer .e-input-group-icon.e-time-icon.e-icons {
    display: unset !important;
}
.e-badge {
    font-family: VazirMatn,Inter, Helvetica, "sans-serif" !important;
    font-size: unset !important;
    font-weight: unset !important;
    display: unset !important;
}
/*.e-grid .e-headercelldiv {
    font-size: 14px !important;
}*/
.e-icons.e-large {
    font-size: 24px !important;
}
.row {

    align-items: center;
}

.e-vertical.e-rtl.e-align-before .e-opposite-content, .e-timeline.e-vertical.e-rtl.e-align-before .e-content {
    padding-top: 10px;
}
.e-grid .e-icon-gdownarrow, .e-grid .e-icon-grightarrow {
    padding: 12px 0px 11px 8px !important;
}

/* پوسته اصلی برنامه و توکن‌های طراحی مشترک */
:root {
    --app-primary: #6d5dfc;
    --app-primary-rgb: 109, 93, 252;
    --app-primary-strong: #5546e8;
    --app-primary-strong-rgb: 85, 70, 232;
    --app-primary-soft: #f0efff;
    --app-primary-light: #c4b5fd;
    --app-accent: #0ea5e9;
    --app-accent-rgb: 14, 165, 233;
    --app-on-primary: #ffffff;
    --app-shell-bg: #f4f7fb;
    --app-surface: rgba(255, 255, 255, 0.94);
    --app-border: #e5eaf1;
    --app-text: #1e293b;
    --app-muted: #64748b;
}

:root[data-palette="blue"] {
    --app-primary: #2563eb;
    --app-primary-rgb: 37, 99, 235;
    --app-primary-strong: #1d4ed8;
    --app-primary-strong-rgb: 29, 78, 216;
    --app-primary-soft: #eff6ff;
    --app-primary-light: #93c5fd;
    --app-accent: #06b6d4;
    --app-accent-rgb: 6, 182, 212;
}

:root[data-palette="turquoise"] {
    --app-primary: #0e7490;
    --app-primary-rgb: 14, 116, 144;
    --app-primary-strong: #155e75;
    --app-primary-strong-rgb: 21, 94, 117;
    --app-primary-soft: #ecfeff;
    --app-primary-light: #67e8f9;
    --app-accent: #06b6d4;
    --app-accent-rgb: 6, 182, 212;
}

:root[data-palette="green"] {
    --app-primary: #047857;
    --app-primary-rgb: 4, 120, 87;
    --app-primary-strong: #065f46;
    --app-primary-strong-rgb: 6, 95, 70;
    --app-primary-soft: #ecfdf5;
    --app-primary-light: #6ee7b7;
    --app-accent: #22c55e;
    --app-accent-rgb: 34, 197, 94;
}

:root[data-palette="olive"] {
    --app-primary: #65752e;
    --app-primary-rgb: 101, 117, 46;
    --app-primary-strong: #4d5d20;
    --app-primary-strong-rgb: 77, 93, 32;
    --app-primary-soft: #f5f7e9;
    --app-primary-light: #c7d990;
    --app-accent: #a3b85c;
    --app-accent-rgb: 163, 184, 92;
}

:root[data-palette="yellow"] {
    --app-primary: #eab308;
    --app-primary-rgb: 234, 179, 8;
    --app-primary-strong: #ca8a04;
    --app-primary-strong-rgb: 202, 138, 4;
    --app-primary-soft: #fefce8;
    --app-primary-light: #fde68a;
    --app-accent: #f59e0b;
    --app-accent-rgb: 245, 158, 11;
    --app-on-primary: #2d2500;
}

:root[data-palette="orange"] {
    --app-primary: #ea580c;
    --app-primary-rgb: 234, 88, 12;
    --app-primary-strong: #c2410c;
    --app-primary-strong-rgb: 194, 65, 12;
    --app-primary-soft: #fff7ed;
    --app-primary-light: #fdba74;
    --app-accent: #fb923c;
    --app-accent-rgb: 251, 146, 60;
}

:root[data-palette="red"] {
    --app-primary: #dc2626;
    --app-primary-rgb: 220, 38, 38;
    --app-primary-strong: #b91c1c;
    --app-primary-strong-rgb: 185, 28, 28;
    --app-primary-soft: #fef2f2;
    --app-primary-light: #fca5a5;
    --app-accent: #f97316;
    --app-accent-rgb: 249, 115, 22;
}

:root[data-mode="dark"] {
    --app-primary-soft: color-mix(in srgb, var(--app-primary) 16%, #172033);
}

/* نگاشت ابزارهای قالب و Bootstrap به پالت انتخاب‌شده */
:root {
    --bs-primary: var(--app-primary);
    --bs-primary-rgb: var(--app-primary-rgb);
    --bs-link-color: var(--app-primary);
    --bs-link-color-rgb: var(--app-primary-rgb);
    --bs-link-hover-color: var(--app-primary-strong);
    --bs-link-hover-color-rgb: var(--app-primary-strong-rgb);
    --bs-focus-ring-color: rgba(var(--app-primary-rgb), 0.25);
}

.bg-purple {
    background-color: var(--app-primary) !important;
}

.bg-purple.text-white {
    color: var(--app-on-primary) !important;
}

.text-purple,
.\!text-purple {
    color: var(--app-primary) !important;
}

.border-purple {
    border-color: var(--app-primary) !important;
}

.fill-purple {
    fill: var(--app-primary) !important;
}

.hover\:bg-purple:hover {
    color: var(--app-on-primary) !important;
    background-color: var(--app-primary) !important;
}

.hover\:text-purple:hover {
    color: var(--app-primary) !important;
}

.hover\:border-purple:hover {
    border-color: var(--app-primary) !important;
}

.form-radio.text-purple:checked,
.form-checkbox.text-purple:checked,
.form-checkbox.outborder-purple:checked {
    border-color: var(--app-primary) !important;
    background-color: var(--app-primary) !important;
}

.app-shell {
    position: relative;
    min-height: 100vh;
    color: var(--app-text);
    background:
        radial-gradient(circle at 8% 4%, rgba(var(--app-primary-rgb), 0.08), transparent 26rem),
        radial-gradient(circle at 92% 88%, rgba(var(--app-accent-rgb), 0.07), transparent 24rem),
        var(--app-shell-bg) !important;
}

.app-shell-container {
    min-height: 100vh;
}

.app-main {
    min-width: 0;
}

.app-content-scroll {
    height: calc(100vh - 72px) !important;
    padding: 22px 24px 12px !important;
    scrollbar-color: #cbd5e1 transparent;
    scrollbar-width: thin;
}

.app-content-scroll::-webkit-scrollbar,
.app-sidebar-menu::-webkit-scrollbar {
    width: 5px;
}

.app-content-scroll::-webkit-scrollbar-track,
.app-sidebar-menu::-webkit-scrollbar-track {
    background: transparent;
}

.app-content-scroll::-webkit-scrollbar-thumb,
.app-sidebar-menu::-webkit-scrollbar-thumb {
    border-radius: 9999px;
    background: #cbd5e1;
}

.app-content {
    width: 100%;
    max-width: 1680px;
    margin-inline: auto;
}

.app-mobile-overlay {
    backdrop-filter: blur(4px);
}

/* نوار بالای برنامه */
.app-topbar {
    position: sticky !important;
    z-index: 30 !important;
    inset-block-start: 0;
    height: 72px !important;
    padding-inline: 20px !important;
    border-block-end: 1px solid rgba(226, 232, 240, 0.88) !important;
    background: rgba(255, 255, 255, 0.97) !important;
    box-shadow: 0 10px 30px -28px rgba(15, 23, 42, 0.7);
}

.app-topbar-leading {
    min-width: 0;
}

.app-context-chip {
    display: flex !important;
    min-width: 0;
    max-width: min(52vw, 760px);
    height: 42px !important;
    padding-inline: 13px !important;
    border: 1px solid #e8ebf3;
    border-radius: 13px !important;
    color: #334155;
    background: linear-gradient(135deg, #f8fafc, var(--app-primary-soft)) !important;
}

.app-context-chip > svg {
    flex: none;
    width: 18px;
    height: 18px;
    color: var(--app-primary) !important;
}

.app-context-details {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 7px;
    overflow: hidden;
}

.app-context-details > span {
    overflow: hidden;
    font-size: 0.79rem !important;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-context-company {
    min-width: 4rem;
    max-width: 250px;
    color: #263247 !important;
    font-weight: 800;
}

.app-context-branch,
.app-context-type {
    max-width: 190px;
    padding: 4px 8px;
    border: 1px solid rgba(var(--app-primary-rgb), 0.12);
    border-radius: 9999px;
    line-height: 1.25;
}

.app-context-branch {
    color: #58667b !important;
    background: rgba(255, 255, 255, 0.72);
}

.app-context-type {
    color: var(--app-primary-strong) !important;
    background: rgba(var(--app-primary-rgb), 0.08);
}

.app-topbar-actions {
    flex: none;
    gap: 7px !important;
}

.app-topbar-actions > div {
    height: auto !important;
}

.app-topbar-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding-inline: 9px;
    border: 1px solid transparent;
    border-radius: 12px;
    color: #475569 !important;
    background: transparent;
    text-decoration: none;
    transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.app-topbar-action:hover {
    border-color: rgba(var(--app-primary-rgb), 0.16);
    color: var(--app-primary-strong) !important;
    background: var(--app-primary-soft);
    box-shadow: 0 8px 18px -13px rgba(var(--app-primary-strong-rgb), 0.7);
    transform: translateY(-1px);
}

.app-topbar-action svg {
    width: 19px;
    height: 19px;
}

.app-topbar-action-group {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.app-topbar-divider {
    flex: 0 0 auto;
    width: 1px;
    height: 22px;
    margin-inline: 2px;
    background: #e2e8f0;
}

.app-language-picker {
    position: relative;
    height: auto !important;
}

.app-language-trigger {
    gap: 5px;
    min-width: 70px;
}

.app-language-trigger > i:first-child {
    font-size: 1.2rem;
    line-height: 1;
}

.app-language-code {
    min-width: 19px;
    font-size: 0.7rem;
    font-weight: 850;
    letter-spacing: 0.04em;
}

.app-language-chevron {
    margin-inline-start: -2px;
    font-size: 0.9rem;
    line-height: 1;
    transition: transform 150ms ease;
}

.app-language-trigger[aria-expanded=true] .app-language-chevron {
    transform: rotate(180deg);
}

.app-language-popover {
    position: absolute;
    z-index: 80;
    inset-block-start: calc(100% + 10px);
    inset-inline-end: 0;
    width: 220px;
    padding: 9px;
    border: 1px solid #e5eaf1;
    border-radius: 16px;
    color: #334155;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 24px 60px -24px rgba(15, 23, 42, 0.42);
    backdrop-filter: blur(18px);
}

.app-language-header {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 5px 6px 10px;
    margin-block-end: 5px;
    border-block-end: 1px solid #edf0f5;
    color: #1e293b;
    font-size: 0.8rem;
    font-weight: 800;
}

.app-language-header > span {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border-radius: 10px;
    color: var(--app-primary-strong);
    background: var(--app-primary-soft);
    font-size: 1rem;
}

.app-language-option {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 32px 18px;
    align-items: center;
    width: 100%;
    min-height: 42px;
    gap: 7px;
    padding: 6px 8px;
    border: 1px solid transparent;
    border-radius: 11px;
    color: #526074;
    background: transparent;
    text-align: start;
    transition: color 150ms ease, border-color 150ms ease, background-color 150ms ease;
}

.app-language-option:hover:not(:disabled) {
    border-color: rgba(var(--app-primary-rgb), 0.18);
    color: var(--app-primary-strong);
    background: var(--app-primary-soft);
}

.app-language-option-active {
    border-color: rgba(var(--app-primary-rgb), 0.28);
    color: var(--app-primary-strong);
    background: var(--app-primary-soft);
}

.app-language-option-name {
    overflow: hidden;
    font-size: 0.78rem;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-language-option-code {
    color: #8490a2;
    font-size: 0.66rem;
    font-weight: 800;
    text-align: center;
}

.app-language-option > i {
    color: var(--app-primary);
    font-size: 1rem;
    opacity: 0;
}

.app-language-option-active > i {
    opacity: 1;
}

.app-palette-picker {
    position: relative;
    height: auto !important;
}

.app-palette-trigger {
    position: relative;
    padding-inline: 9px 12px;
}

.app-palette-trigger > i {
    font-size: 1.2rem;
    line-height: 1;
}

.app-palette-current {
    position: absolute;
    inset-block-end: 6px;
    inset-inline-end: 6px;
    width: 8px;
    height: 8px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: var(--app-primary);
    box-shadow: 0 0 0 1px rgba(var(--app-primary-rgb), 0.2);
}

.app-palette-popover {
    position: absolute;
    z-index: 80;
    inset-block-start: calc(100% + 10px);
    inset-inline-end: 0;
    width: min(324px, calc(100vw - 24px));
    padding: 10px;
    border: 1px solid #e5eaf1;
    border-radius: 18px;
    color: #334155;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 24px 60px -24px rgba(15, 23, 42, 0.42);
    backdrop-filter: blur(18px);
}

.app-palette-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 6px 11px;
    border-block-end: 1px solid #edf0f5;
}

.app-palette-header-icon {
    display: grid;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid rgba(var(--app-primary-rgb), 0.16);
    border-radius: 12px;
    color: var(--app-primary-strong);
    background: var(--app-primary-soft);
    font-size: 1.15rem;
}

.app-palette-header > div {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 2px;
}

.app-palette-header strong {
    color: #1e293b;
    font-size: 0.86rem;
    font-weight: 800;
}

.app-palette-header small {
    color: #7b8798;
    font-size: 0.69rem;
    line-height: 1.6;
}

.app-palette-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    padding-block-start: 9px;
}

.app-palette-option {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) 18px;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 6px 8px;
    border: 1px solid #e9edf3;
    border-radius: 12px;
    color: #526074;
    background: #fbfcfe;
    text-align: start;
    transition: color 150ms ease, border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.app-palette-option:hover {
    border-color: rgba(var(--app-primary-rgb), 0.28);
    color: var(--app-primary-strong);
    background: var(--app-primary-soft);
    transform: translateY(-1px);
}

.app-palette-option-active {
    border-color: rgba(var(--app-primary-rgb), 0.46);
    color: var(--app-primary-strong);
    background: var(--app-primary-soft);
    box-shadow: 0 0 0 2px rgba(var(--app-primary-rgb), 0.08);
}

.app-palette-swatch {
    position: relative;
    display: block;
    width: 28px;
    height: 28px;
    border: 2px solid #ffffff;
    border-radius: 9px;
    background: linear-gradient(135deg, var(--palette-primary) 0 55%, var(--palette-accent) 55% 100%);
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.1);
}

.app-palette-option > span:not(.app-palette-swatch) {
    overflow: hidden;
    font-size: 0.75rem;
    font-weight: 720;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-palette-check {
    color: var(--app-primary);
    font-size: 1rem;
    opacity: 0;
    transform: scale(0.75);
    transition: opacity 150ms ease, transform 150ms ease;
}

.app-palette-option-active .app-palette-check {
    opacity: 1;
    transform: scale(1);
}

.app-menu-toggle {
    flex: none;
    border-color: #e5eaf1;
    background: #ffffff;
}

.app-profile {
    height: auto !important;
    margin-inline-start: 2px;
}

.app-profile-trigger {
    min-height: 44px;
    padding: 5px 7px 5px 10px;
    border: 1px solid #e5eaf1;
    border-radius: 14px;
    color: #334155;
    background: rgba(248, 250, 252, 0.92);
    transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

[dir=rtl] .app-profile-trigger {
    padding: 5px 10px 5px 7px;
}

.app-profile-trigger:hover {
    border-color: rgba(var(--app-primary-rgb), 0.26);
    background: #ffffff;
    box-shadow: 0 9px 22px -17px rgba(15, 23, 42, 0.8);
}

.app-profile-trigger img {
    width: 34px !important;
    height: 34px !important;
    border: 2px solid #ffffff;
    box-shadow: 0 0 0 1px rgba(var(--app-primary-rgb), 0.2), 0 7px 14px -10px rgba(15, 23, 42, 0.8);
}

.app-profile-menu {
    top: calc(100% + 8px) !important;
    width: 205px !important;
    padding: 7px;
    border-color: #e5eaf1 !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 22px 50px -22px rgba(15, 23, 42, 0.38);
    backdrop-filter: blur(16px);
}

.app-profile-menu > li > a {
    min-height: 40px;
    margin-block: 2px;
    padding-inline: 10px !important;
    border-radius: 10px;
    color: #475569 !important;
    transition: color 150ms ease, background-color 150ms ease, transform 150ms ease;
}

.app-profile-menu > li > a:hover {
    color: var(--app-primary-strong) !important;
    background: var(--app-primary-soft) !important;
    transform: translateX(0);
}

/* سایدبار و منوی اصلی */
.app-sidebar {
    border-inline-end: 1px solid rgba(226, 232, 240, 0.92);
    background: #ffffff;
    box-shadow: 18px 0 44px -40px rgba(15, 23, 42, 0.8);
}

/* سایدبار عمودی همیشه ارتفاع viewport دارد تا پنل کاربر آن را کوتاه نکند. */
.vertical .app-sidebar {
    inset-block: 0;
    height: 100dvh;
    min-height: 100vh;
}

.vertical .app-sidebar-surface,
.detached .app-sidebar-surface {
    height: 100%;
}

[dir=rtl] .app-sidebar {
    box-shadow: -18px 0 44px -40px rgba(15, 23, 42, 0.8);
}

.app-sidebar-surface {
    position: relative;
    background:
        radial-gradient(circle at 50% 0, rgba(var(--app-primary-rgb), 0.07), transparent 14rem),
        #ffffff !important;
}

.app-sidebar-surface::before {
    position: absolute;
    z-index: 2;
    inset-block: 18px;
    inset-inline-start: 0;
    width: 3px;
    border-radius: 0 9999px 9999px 0;
    content: "";
    background: linear-gradient(180deg, var(--app-primary), var(--app-accent));
    opacity: 0.78;
}

[dir=rtl] .app-sidebar-surface::before {
    border-radius: 9999px 0 0 9999px;
}

.app-sidebar-brand {
    height: 72px !important;
    border-block-end: 1px solid rgba(226, 232, 240, 0.78);
    background: transparent !important;
}

.app-sidebar-brand a {
    min-width: 0;
}

.app-sidebar-brand img {
    max-height: 38px;
    filter: saturate(1.03);
}

.app-sidebar-brand-compact {
    flex: 0 0 48px;
    width: 48px !important;
    min-width: 48px !important;
    height: 48px;
    overflow: visible !important;
}

.app-sidebar-brand-icon {
    display: block;
    flex: 0 0 42px;
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
    transform: none !important;
}

[data-sidebar=collapsed] .app-sidebar-brand,
.vertical.toggle-sidebar .app-sidebar:not(:hover) .app-sidebar-brand {
    padding-inline: 0 !important;
}

.app-sidebar-menu {
    height: calc(100vh - 72px) !important;
    padding: 16px 12px 24px !important;
    scrollbar-color: #d9ddea transparent;
    scrollbar-width: thin;
}

.app-sidebar .nav-item > a {
    min-height: 44px;
    margin-block-end: 5px !important;
    padding: 9px 11px !important;
    border: 1px solid transparent;
    border-radius: 13px !important;
    color: #526075 !important;
    font-weight: 650;
    transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.app-sidebar .nav-item > a:hover {
    border-color: rgba(var(--app-primary-rgb), 0.12);
    color: var(--app-primary-strong) !important;
    background: linear-gradient(105deg, rgba(var(--app-primary-rgb), 0.11), rgba(var(--app-accent-rgb), 0.04));
    box-shadow: 0 9px 20px -18px rgba(var(--app-primary-strong-rgb), 0.9);
}

.app-sidebar .nav-item > a.active {
    border-color: rgba(var(--app-primary-rgb), 0.16);
    color: var(--app-primary-strong) !important;
    background: linear-gradient(105deg, rgba(var(--app-primary-rgb), 0.15), rgba(var(--app-accent-rgb), 0.06));
    box-shadow: 0 12px 24px -20px rgba(var(--app-primary-strong-rgb), 0.95);
}

.app-sidebar .nav-item > a svg {
    flex: none;
    width: 20px;
    height: 20px;
}

.app-sidebar .nav-item > a .dropdown-icon {
    color: #a0aec0;
}

.app-sidebar ul.sub-menu {
    gap: 2px !important;
    margin: 2px 7px 10px;
    padding: 6px;
    border: 1px solid #edf0f6;
    border-radius: 13px;
    background: rgba(248, 250, 252, 0.82);
}

.app-sidebar ul.sub-menu li a {
    min-height: 36px;
    padding-block: 7px !important;
    padding-inline: 27px 10px !important;
    border-radius: 9px !important;
    color: #64748b;
    font-size: 0.79rem;
    line-height: 1.6;
    transition: color 150ms ease, background-color 150ms ease;
}

.app-sidebar ul.sub-menu li a::before {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 11px !important;
    width: 5px !important;
    height: 5px !important;
    border: 1px solid #aab4c4;
    border-radius: 9999px;
    content: "" !important;
    background: transparent !important;
    transform: translateY(-50%) !important;
}

.app-sidebar ul.sub-menu li a:hover {
    color: var(--app-primary-strong) !important;
    background: #ffffff;
}

.app-sidebar ul.sub-menu li a:hover::before,
.app-sidebar ul.sub-menu li a.active::before {
    border-color: var(--app-primary);
    background: var(--app-primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--app-primary-rgb), 0.1);
}

.app-sidebar ul.sub-menu li a.active {
    color: var(--app-primary-strong) !important;
    background: #ffffff;
    font-weight: 750;
}

/* عنوان صفحات و کارت‌های متداول داخل پوسته */
.app-page-header {
    padding: 4px 2px;
}

.app-page-header .detached-breadcrumb {
    margin: 0;
}

.app-page-header .detached-breadcrumb li:first-child {
    color: #8a96a8;
    font-size: 0.72rem;
    font-weight: 650;
}

.app-page-header .detached-breadcrumb li:last-child {
    color: #1e293b;
    font-size: 1.35rem;
    font-weight: 850;
    letter-spacing: -0.02em;
}

.app-shell .card {
    border-radius: 18px !important;
    box-shadow: 0 18px 42px -34px rgba(15, 23, 42, 0.55);
}

.app-shell .card:not(.bg-primary):not(.bg-success):not(.bg-danger):not(.bg-info):not(.bg-warning) {
    border: 1px solid var(--app-border) !important;
    background: var(--app-surface) !important;
}

.app-shell .card.bg-primary {
    color: var(--app-on-primary) !important;
}

.app-shell .card:is(.bg-success, .bg-danger, .bg-info, .bg-warning) {
    color: #ffffff !important;
}

.app-shell .card:is(.bg-primary, .bg-success, .bg-danger, .bg-info, .bg-warning) :is(h1, h2, h3, h4, h5, h6) {
    color: inherit !important;
}

.app-shell footer {
    color: #7c8799;
}

/* حالت‌های تیره و رنگی پوسته */
[data-mode=dark] .app-shell,
.dark .app-shell {
    --app-shell-bg: #0f172a;
    --app-surface: rgba(22, 31, 50, 0.95);
    --app-border: #273449;
    --app-text: #e5e7eb;
    --app-muted: #94a3b8;
    background:
        radial-gradient(circle at 8% 4%, rgba(var(--app-primary-rgb), 0.13), transparent 27rem),
        radial-gradient(circle at 92% 88%, rgba(var(--app-accent-rgb), 0.09), transparent 25rem),
        var(--app-shell-bg) !important;
}

[data-mode=dark] .app-topbar,
.dark .app-topbar {
    border-block-end-color: rgba(51, 65, 85, 0.8) !important;
    background: rgba(15, 23, 42, 0.88) !important;
    box-shadow: 0 12px 32px -28px rgba(0, 0, 0, 0.95);
}

[data-mode=dark] .app-context-chip,
.dark .app-context-chip {
    border-color: #2c3a50;
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.94), rgba(40, 35, 71, 0.78)) !important;
}

[data-mode=dark] .app-context-chip span,
.dark .app-context-chip span {
    color: #d6dbe5 !important;
}

[data-mode=dark] .app-topbar-action,
.dark .app-topbar-action {
    color: #cbd5e1 !important;
}

[data-mode=dark] .app-topbar-action:hover,
.dark .app-topbar-action:hover {
    border-color: rgba(var(--app-primary-rgb), 0.3);
    color: var(--app-primary-light) !important;
    background: rgba(var(--app-primary-rgb), 0.14);
}

[data-mode=dark] .app-topbar-divider,
.dark .app-topbar-divider {
    background: #334155;
}

[data-mode=dark] .app-language-popover,
.dark .app-language-popover {
    border-color: #334155;
    color: #d7deea;
    background: rgba(21, 30, 48, 0.98);
    box-shadow: 0 26px 64px -22px rgba(0, 0, 0, 0.72);
}

[data-mode=dark] .app-language-header,
.dark .app-language-header {
    border-block-end-color: #334155;
    color: #f1f5f9;
}

[data-mode=dark] .app-language-option,
.dark .app-language-option {
    color: #bdc8d8;
}

[data-mode=dark] .app-language-option:hover:not(:disabled),
[data-mode=dark] .app-language-option-active,
.dark .app-language-option:hover:not(:disabled),
.dark .app-language-option-active {
    border-color: rgba(var(--app-primary-rgb), 0.4);
    color: var(--app-primary-light);
    background: rgba(var(--app-primary-rgb), 0.16);
}

[data-mode=dark] .app-palette-current,
.dark .app-palette-current {
    border-color: #162137;
}

[data-mode=dark] .app-palette-popover,
.dark .app-palette-popover {
    border-color: #334155;
    color: #d7deea;
    background: rgba(21, 30, 48, 0.98);
    box-shadow: 0 26px 64px -22px rgba(0, 0, 0, 0.72);
}

[data-mode=dark] .app-palette-header,
.dark .app-palette-header {
    border-block-end-color: #334155;
}

[data-mode=dark] .app-palette-header strong,
.dark .app-palette-header strong {
    color: #f1f5f9;
}

[data-mode=dark] .app-palette-header small,
.dark .app-palette-header small {
    color: #94a3b8;
}

[data-mode=dark] .app-palette-header-icon,
.dark .app-palette-header-icon {
    border-color: rgba(var(--app-primary-rgb), 0.28);
    color: var(--app-primary-light);
    background: rgba(var(--app-primary-rgb), 0.16);
}

[data-mode=dark] .app-palette-option,
.dark .app-palette-option {
    border-color: #334155;
    color: #bdc8d8;
    background: rgba(30, 41, 59, 0.78);
}

[data-mode=dark] .app-palette-option:hover,
[data-mode=dark] .app-palette-option-active,
.dark .app-palette-option:hover,
.dark .app-palette-option-active {
    border-color: rgba(var(--app-primary-rgb), 0.42);
    color: var(--app-primary-light);
    background: rgba(var(--app-primary-rgb), 0.16);
}

[data-mode=dark] .app-menu-toggle,
[data-mode=dark] .app-profile-trigger,
.dark .app-menu-toggle,
.dark .app-profile-trigger {
    border-color: #334155;
    color: #e2e8f0;
    background: rgba(30, 41, 59, 0.86);
}

[data-mode=dark] .app-profile-menu,
.dark .app-profile-menu {
    border-color: #334155 !important;
    background: rgba(21, 30, 48, 0.98) !important;
}

[data-mode=dark] .app-profile-menu > li > a,
.dark .app-profile-menu > li > a {
    color: #cbd5e1 !important;
}

[data-mode=dark] .app-profile-menu > li > a:hover,
.dark .app-profile-menu > li > a:hover {
    color: var(--app-primary-light) !important;
    background: rgba(var(--app-primary-rgb), 0.14) !important;
}

[data-mode=dark] .app-sidebar,
[data-mode=dark] .app-sidebar-surface,
[data-sidebar=dark] .app-sidebar,
[data-sidebar=dark] .app-sidebar-surface,
.dark .app-sidebar,
.dark .app-sidebar-surface {
    border-color: #263348;
    background:
        radial-gradient(circle at 50% 0, rgba(var(--app-primary-rgb), 0.12), transparent 15rem),
        #151f32 !important;
}

[data-sidebar=brand] .app-sidebar,
[data-sidebar=brand] .app-sidebar-surface {
    border-color: rgba(255, 255, 255, 0.08);
    background:
        radial-gradient(circle at 50% 0, rgba(var(--app-primary-rgb), 0.32), transparent 16rem),
        linear-gradient(180deg, #172554, #172033) !important;
}

[data-mode=dark] .app-sidebar-brand,
[data-sidebar=dark] .app-sidebar-brand,
[data-sidebar=brand] .app-sidebar-brand,
.dark .app-sidebar-brand {
    border-block-end-color: rgba(148, 163, 184, 0.13);
}

[data-mode=dark] .app-sidebar .nav-item > a,
[data-sidebar=dark] .app-sidebar .nav-item > a,
[data-sidebar=brand] .app-sidebar .nav-item > a,
.dark .app-sidebar .nav-item > a {
    color: #cbd5e1 !important;
}

[data-mode=dark] .app-sidebar .nav-item > a:hover,
[data-mode=dark] .app-sidebar .nav-item > a.active,
[data-sidebar=dark] .app-sidebar .nav-item > a:hover,
[data-sidebar=dark] .app-sidebar .nav-item > a.active,
[data-sidebar=brand] .app-sidebar .nav-item > a:hover,
[data-sidebar=brand] .app-sidebar .nav-item > a.active,
.dark .app-sidebar .nav-item > a:hover,
.dark .app-sidebar .nav-item > a.active {
    border-color: rgba(var(--app-primary-rgb), 0.24);
    color: var(--app-primary-light) !important;
    background: linear-gradient(105deg, rgba(var(--app-primary-rgb), 0.2), rgba(var(--app-accent-rgb), 0.07));
}

[data-mode=dark] .app-sidebar ul.sub-menu,
[data-sidebar=dark] .app-sidebar ul.sub-menu,
[data-sidebar=brand] .app-sidebar ul.sub-menu,
.dark .app-sidebar ul.sub-menu {
    border-color: rgba(148, 163, 184, 0.12);
    background: rgba(15, 23, 42, 0.42);
}

[data-mode=dark] .app-sidebar ul.sub-menu li a,
[data-sidebar=dark] .app-sidebar ul.sub-menu li a,
[data-sidebar=brand] .app-sidebar ul.sub-menu li a,
.dark .app-sidebar ul.sub-menu li a {
    color: #9eabc0;
}

[data-mode=dark] .app-sidebar ul.sub-menu li a:hover,
[data-mode=dark] .app-sidebar ul.sub-menu li a.active,
[data-sidebar=dark] .app-sidebar ul.sub-menu li a:hover,
[data-sidebar=dark] .app-sidebar ul.sub-menu li a.active,
[data-sidebar=brand] .app-sidebar ul.sub-menu li a:hover,
[data-sidebar=brand] .app-sidebar ul.sub-menu li a.active,
.dark .app-sidebar ul.sub-menu li a:hover,
.dark .app-sidebar ul.sub-menu li a.active {
    color: var(--app-primary-light) !important;
    background: rgba(255, 255, 255, 0.055);
}

[data-mode=dark] .app-page-header .detached-breadcrumb li:last-child,
.dark .app-page-header .detached-breadcrumb li:last-child {
    color: #f1f5f9;
}

@media (max-width: 1023px) {
    .app-topbar {
        height: 64px !important;
        padding-inline: 14px !important;
    }

    .app-content-scroll {
        height: calc(100vh - 64px) !important;
        padding: 15px 14px 10px !important;
    }

    .app-sidebar {
        box-shadow: 24px 0 60px -30px rgba(15, 23, 42, 0.7);
    }

    [dir=rtl] .app-sidebar {
        box-shadow: -24px 0 60px -30px rgba(15, 23, 42, 0.7);
    }
}

@media (min-width: 1024px) {
    /* هنگام بازشدن موقت سایدبار جمع‌شده، محتوا هم‌زمان کوچک می‌شود و زیر منو قرار نمی‌گیرد. */
    .vertical.toggle-sidebar .app-sidebar:hover + .app-main {
        margin-inline-start: 240px;
    }
}

@media (max-width: 767px) {
    .app-context-chip {
        display: none !important;
    }

    .app-topbar-actions {
        gap: 4px !important;
    }

    .app-topbar-utility-group,
    .app-topbar-divider:last-of-type {
        display: none;
    }

    .app-profile-trigger {
        min-height: 40px;
        padding: 3px !important;
        border-radius: 12px;
    }

    .app-profile-trigger img {
        width: 32px !important;
        height: 32px !important;
        margin: 0 !important;
    }
}

@media (max-width: 420px) {
    .app-topbar {
        padding-inline: 10px !important;
    }

    .app-topbar-action {
        min-width: 34px;
        height: 34px;
        padding-inline: 7px;
        border-radius: 10px;
    }

    .app-topbar-actions {
        gap: 2px !important;
    }

    .app-language-trigger {
        min-width: 60px;
        gap: 3px;
    }

    .app-language-chevron {
        display: none;
    }

    .app-topbar-action svg {
        width: 18px;
        height: 18px;
    }

    .app-content-scroll {
        padding-inline: 10px !important;
    }
}

.detached .app-topbar {
    inset-block-start: 1rem;
    border: 1px solid rgba(226, 232, 240, 0.9) !important;
    border-radius: 16px;
}

/* پوسته مشترک صفحات احراز هویت، تمام ارتفاع صفحه را در هر دو تم پوشش می‌دهد. */
.auth-layout {
    position: relative;
    display: flex;
    min-height: 100dvh;
    flex-direction: column;
    overflow: hidden;
    color: #172033;
    background: #f8fafc;
}

.auth-layout-backdrop {
    position: absolute;
    z-index: 0;
    inset-block-start: 0;
    inset-inline: 0;
    min-height: max(220px, 50vh);
    background-color: #323a46;
    background-image: url("assets/images/bg-main.png");
    background-position: bottom;
    background-size: cover;
}

.auth-layout-header,
.auth-layout-footer,
.auth-layout > .auth-page {
    position: relative;
    z-index: 1;
}

.auth-layout > .auth-page {
    flex: 1;
}

.auth-layout-footer {
    width: 100%;
    color: #334155;
}

.auth-layout-nav {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 72px;
    gap: 18px;
}

.auth-layout-brand {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}

.auth-language-switcher {
    display: inline-flex;
    align-items: center;
    padding: 4px;
    gap: 3px;
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 14px;
    direction: ltr;
    background: rgba(255, 255, 255, 0.78);
    box-shadow:
        0 12px 28px -22px rgba(15, 23, 42, 0.62),
        inset 0 1px 0 rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
}

.auth-language-option {
    min-width: 72px;
    min-height: 36px;
    padding: 0 12px;
    border: 0;
    border-radius: 10px;
    color: #64748b;
    background: transparent;
    cursor: pointer;
    font: inherit;
    font-size: 0.74rem;
    font-weight: 800;
    transition: color 160ms ease, background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.auth-language-option:hover:not(:disabled):not(.auth-language-option-active) {
    color: var(--app-primary-strong);
    background: rgba(var(--app-primary-rgb), 0.07);
}

.auth-language-option-active {
    color: var(--app-on-primary);
    background: linear-gradient(135deg, var(--app-primary), var(--app-primary-strong));
    box-shadow: 0 10px 18px -12px rgba(var(--app-primary-strong-rgb), 0.9);
}

.auth-language-option:focus-visible {
    outline: 3px solid rgba(var(--app-primary-rgb), 0.23);
    outline-offset: 2px;
}

.auth-language-option:disabled {
    cursor: wait;
}

[data-mode=dark] .auth-language-switcher,
.dark .auth-language-switcher {
    border-color: rgba(148, 163, 184, 0.2);
    background: rgba(23, 32, 51, 0.82);
    box-shadow:
        0 14px 30px -24px rgba(0, 0, 0, 0.9),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

[data-mode=dark] .auth-language-option,
.dark .auth-language-option {
    color: #aab7ca;
}

[data-mode=dark] .auth-language-option:hover:not(:disabled):not(.auth-language-option-active),
.dark .auth-language-option:hover:not(:disabled):not(.auth-language-option-active) {
    color: var(--app-primary-light);
    background: rgba(var(--app-primary-rgb), 0.13);
}

[data-mode=dark] .auth-language-option-active,
.dark .auth-language-option-active {
    color: #ffffff;
}

/* مودال وضعیت اتصال Blazor خارج از Circuit رندر می‌شود تا هنگام قطع SignalR نیز قابل استفاده بماند. */
#components-reconnect-modal {
    position: fixed;
    z-index: 13000;
    inset: 0;
    display: none;
    padding: 24px;
    place-items: center;
    color: #172033;
    background: rgba(15, 23, 42, 0.3);
    backdrop-filter: blur(10px) saturate(0.85);
}

#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    display: grid;
    animation: app-reconnect-overlay-in 180ms ease-out both;
}

.app-reconnect-card {
    width: min(410px, 100%);
    padding: 30px 28px 28px;
    border: 1px solid rgba(255, 255, 255, 0.84);
    border-radius: 24px;
    text-align: center;
    background: rgba(255, 255, 255, 0.96);
    box-shadow:
        0 32px 80px -32px rgba(15, 23, 42, 0.62),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    animation: app-reconnect-card-in 220ms ease-out both;
}

.app-reconnect-visual {
    display: grid;
    width: 64px;
    height: 64px;
    margin: 0 auto 18px;
    place-items: center;
    border-radius: 20px;
    color: var(--app-primary-strong);
    background: linear-gradient(145deg, var(--app-primary-soft), rgba(var(--app-accent-rgb), 0.12));
}

.app-reconnect-spinner,
.app-reconnect-failed-icon,
.app-reconnect-rejected-icon {
    display: none;
}

.components-reconnect-show .app-reconnect-spinner {
    display: block;
    width: 30px;
    height: 30px;
    border: 3px solid rgba(var(--app-primary-rgb), 0.18);
    border-block-start-color: var(--app-primary);
    border-inline-end-color: var(--app-accent);
    border-radius: 9999px;
    animation: app-reconnect-spin 850ms linear infinite;
}

.components-reconnect-failed .app-reconnect-failed-icon,
.components-reconnect-rejected .app-reconnect-rejected-icon {
    display: block;
    font-size: 1.8rem;
}

.components-reconnect-failed .app-reconnect-visual {
    color: #dc354f;
    background: rgba(244, 63, 94, 0.1);
}

.components-reconnect-rejected .app-reconnect-visual {
    color: #d97706;
    background: rgba(245, 158, 11, 0.12);
}

.app-reconnect-state {
    display: none;
}

.components-reconnect-show .app-reconnect-state-show,
.components-reconnect-failed .app-reconnect-state-failed,
.components-reconnect-rejected .app-reconnect-state-rejected {
    display: block;
}

.app-reconnect-state h2 {
    margin: 0;
    color: inherit;
    font-size: 1.08rem;
    font-weight: 900;
}

.app-reconnect-state p {
    max-width: 320px;
    margin: 8px auto 0;
    color: #64748b;
    font-size: 0.8rem;
    line-height: 1.8;
}

.app-reconnect-attempt {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    margin-block-start: 14px;
    padding: 4px 11px;
    gap: 4px;
    border: 1px solid rgba(var(--app-primary-rgb), 0.15);
    border-radius: 9999px;
    color: var(--app-primary-strong);
    background: rgba(var(--app-primary-rgb), 0.07);
    font-size: 0.7rem;
    font-weight: 750;
}

.app-reconnect-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    margin-block-start: 18px;
    padding: 0 18px;
    gap: 7px;
    border: 0;
    border-radius: 12px;
    color: var(--app-on-primary);
    background: linear-gradient(135deg, var(--app-primary), var(--app-primary-strong));
    box-shadow: 0 14px 24px -16px rgba(var(--app-primary-strong-rgb), 0.9);
    cursor: pointer;
    font: inherit;
    font-weight: 850;
    transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}

.app-reconnect-button:hover {
    box-shadow: 0 18px 28px -16px rgba(var(--app-primary-strong-rgb), 0.95);
    filter: saturate(1.08);
    transform: translateY(-1px);
}

.app-reconnect-button:focus-visible {
    outline: 3px solid rgba(var(--app-primary-rgb), 0.25);
    outline-offset: 3px;
}

@keyframes app-reconnect-overlay-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes app-reconnect-card-in {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes app-reconnect-spin {
    to {
        transform: rotate(1turn);
    }
}

[data-mode=dark] #components-reconnect-modal,
.dark #components-reconnect-modal {
    color: #f8fafc;
    background: rgba(3, 7, 18, 0.68);
}

[data-mode=dark] .app-reconnect-card,
.dark .app-reconnect-card {
    border-color: rgba(148, 163, 184, 0.18);
    background: rgba(23, 32, 51, 0.97);
    box-shadow:
        0 32px 85px -30px rgba(0, 0, 0, 0.94),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

[data-mode=dark] .app-reconnect-visual,
.dark .app-reconnect-visual {
    color: var(--app-primary-light);
    background: linear-gradient(145deg, rgba(var(--app-primary-rgb), 0.22), rgba(var(--app-accent-rgb), 0.14));
}

[data-mode=dark] .components-reconnect-failed .app-reconnect-visual,
.dark .components-reconnect-failed .app-reconnect-visual {
    color: #fda4af;
    background: rgba(244, 63, 94, 0.14);
}

[data-mode=dark] .components-reconnect-rejected .app-reconnect-visual,
.dark .components-reconnect-rejected .app-reconnect-visual {
    color: #fcd34d;
    background: rgba(245, 158, 11, 0.14);
}

[data-mode=dark] .app-reconnect-state p,
.dark .app-reconnect-state p {
    color: #aab7ca;
}

[data-mode=dark] .app-reconnect-attempt,
.dark .app-reconnect-attempt {
    border-color: rgba(var(--app-primary-rgb), 0.28);
    color: var(--app-primary-light);
    background: rgba(var(--app-primary-rgb), 0.13);
}

@media (prefers-reduced-motion: reduce) {
    #components-reconnect-modal,
    .app-reconnect-card,
    .app-reconnect-spinner,
    .app-reconnect-button {
        animation: none !important;
        transition: none !important;
    }
}

/* سطح بصری صفحات احراز هویت بدون وابستگی به جهت زبان */
.auth-page {
    isolation: isolate;
    overflow: hidden;
}

.auth-page::before {
    position: absolute;
    z-index: -2;
    inset: 0;
    content: "";
    background:
        radial-gradient(circle at 12% 18%, rgba(var(--app-primary-rgb), 0.22), transparent 30rem),
        radial-gradient(circle at 88% 72%, rgba(var(--app-accent-rgb), 0.13), transparent 26rem),
        linear-gradient(180deg, rgba(30, 41, 59, 0.05), rgba(248, 250, 252, 0.78) 58%, #ffffff 100%);
}

.auth-ambient {
    position: absolute;
    z-index: -1;
    width: 16rem;
    height: 16rem;
    border-radius: 9999px;
    pointer-events: none;
    filter: blur(3px);
    opacity: 0.5;
    animation: auth-float 8s ease-in-out infinite;
}

.auth-ambient-one {
    inset-block-start: 8%;
    inset-inline-start: -7rem;
    background: linear-gradient(135deg, rgba(var(--app-primary-rgb), 0.2), rgba(var(--app-primary-rgb), 0.05));
}

.auth-ambient-two {
    inset-inline-end: -6rem;
    inset-block-end: 4%;
    width: 13rem;
    height: 13rem;
    background: linear-gradient(135deg, rgba(var(--app-accent-rgb), 0.16), rgba(var(--app-accent-rgb), 0.05));
    animation-delay: -4s;
}

.auth-card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow:
        0 30px 70px -28px rgba(15, 23, 42, 0.34),
        0 18px 34px -24px rgba(var(--app-primary-strong-rgb), 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(18px);
}

.auth-card::before {
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    height: 4px;
    content: "";
    background: linear-gradient(90deg, var(--app-primary), var(--app-primary-strong) 50%, var(--app-accent));
}

.auth-card::after {
    position: absolute;
    inset-block-start: -7rem;
    inset-inline-end: -7rem;
    width: 14rem;
    height: 14rem;
    border-radius: 9999px;
    content: "";
    background: radial-gradient(circle, rgba(var(--app-primary-rgb), 0.1), transparent 68%);
    pointer-events: none;
}

.auth-card > * {
    position: relative;
    z-index: 1;
}

.app-transition-overlay {
    position: fixed;
    z-index: 12000;
    inset: 0;
    display: grid;
    padding: 24px;
    place-items: center;
    color: #172033;
    background: rgba(241, 245, 249, 0.72);
    backdrop-filter: blur(12px) saturate(0.9);
    animation: app-transition-fade-in 180ms ease-out both;
}

.app-transition-panel {
    display: flex;
    align-items: center;
    width: min(390px, 100%);
    padding: 30px 28px;
    flex-direction: column;
    border: 1px solid rgba(255, 255, 255, 0.82);
    border-radius: 24px;
    text-align: center;
    background: rgba(255, 255, 255, 0.94);
    box-shadow:
        0 28px 70px -30px rgba(15, 23, 42, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.86);
    animation: app-transition-panel-in 220ms ease-out both;
}

.app-transition-spinner {
    position: relative;
    display: grid;
    width: 64px;
    height: 64px;
    margin-block-end: 18px;
    place-items: center;
    border-radius: 20px;
    color: var(--app-primary-strong);
    background: linear-gradient(145deg, var(--app-primary-soft), rgba(var(--app-accent-rgb), 0.12));
}

.app-transition-spinner::before {
    position: absolute;
    inset: -5px;
    border: 3px solid rgba(var(--app-primary-rgb), 0.15);
    border-block-start-color: var(--app-primary);
    border-inline-end-color: var(--app-accent);
    border-radius: 24px;
    content: "";
    animation: app-transition-spin 850ms linear infinite;
}

.app-transition-spinner i {
    font-size: 1.75rem;
}

.app-transition-panel strong {
    color: inherit;
    font-size: 1.08rem;
    font-weight: 900;
}

.app-transition-panel > span:last-child {
    max-width: 300px;
    margin-block-start: 7px;
    color: #64748b;
    font-size: 0.78rem;
    line-height: 1.75;
}

@keyframes app-transition-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes app-transition-panel-in {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes app-transition-spin {
    to {
        transform: rotate(1turn);
    }
}

.auth-heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-block-end: 26px;
    text-align: center;
}

.auth-icon-badge {
    display: grid;
    width: 54px;
    height: 54px;
    margin-block-end: 14px;
    place-items: center;
    border: 1px solid rgba(var(--app-primary-rgb), 0.15);
    border-radius: 18px;
    color: var(--app-primary-strong);
    background: linear-gradient(145deg, var(--app-primary-soft), rgba(var(--app-primary-rgb), 0.16));
    box-shadow: 0 12px 24px -14px rgba(var(--app-primary-strong-rgb), 0.7);
}

.auth-icon-badge svg {
    width: 27px;
    height: 27px;
}

.auth-icon-badge-success {
    border-color: rgba(16, 185, 129, 0.18);
    color: #059669;
    background: linear-gradient(145deg, #ecfdf5, #d1fae5);
    box-shadow: 0 12px 24px -14px rgba(5, 150, 105, 0.65);
}

.auth-stepper {
    display: flex;
    direction: ltr;
    align-items: center;
    justify-content: center;
    margin-block-end: 15px;
}

.auth-step {
    display: grid;
    width: 25px;
    height: 25px;
    place-items: center;
    border: 1px solid #e2e8f0;
    border-radius: 9999px;
    color: #94a3b8;
    background: #ffffff;
    font-size: 11px;
    font-weight: 800;
}

.auth-step-active {
    border-color: var(--app-primary);
    color: var(--app-on-primary);
    background: linear-gradient(135deg, var(--app-primary), var(--app-primary-strong));
    box-shadow: 0 6px 14px -6px rgba(var(--app-primary-strong-rgb), 0.85);
}

.auth-step-complete {
    border-color: #10b981;
    color: #ffffff;
    background: #10b981;
}

.auth-step-line {
    width: 46px;
    height: 2px;
    background: #e2e8f0;
}

.auth-step-line-complete {
    background: linear-gradient(90deg, #10b981, var(--app-primary));
}

.auth-title {
    margin: 0;
    color: #172033;
    font-size: clamp(1.5rem, 3vw, 1.8rem);
    font-weight: 800;
    letter-spacing: -0.025em;
}

.auth-description {
    max-width: 390px;
    margin: 8px 0 0;
    color: #64748b;
    font-size: 0.925rem;
    line-height: 1.8;
}

.auth-phone {
    display: inline-block;
    margin-inline-start: 4px;
    color: var(--app-primary-strong);
    font-weight: 800;
    letter-spacing: 0.04em;
}

.auth-fields {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.auth-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.auth-field > label {
    color: #334155;
    font-size: 0.84rem;
    font-weight: 700;
}

.auth-input.form-input {
    width: 100%;
    height: 52px;
    padding-inline: 16px;
    border: 1px solid #dbe3ee;
    border-radius: 14px;
    outline: none;
    color: #1e293b;
    background: rgba(248, 250, 252, 0.82);
    font: inherit;
    transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.auth-input.form-input:hover {
    border-color: #b9c6d8;
    background: #ffffff;
}

.auth-input.form-input:focus {
    border-color: var(--app-primary);
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(var(--app-primary-rgb), 0.1), 0 8px 20px -16px rgba(var(--app-primary-strong-rgb), 0.75);
    transform: translateY(-1px);
}

.auth-input.form-input.invalid {
    border-color: #ef4444;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.08);
}

.auth-input.form-input::placeholder {
    color: #a0aec0;
}

.auth-input-ltr {
    direction: ltr;
    text-align: left;
}

/* ورودی رمز مستقل از زبان صفحه همیشه از چپ به راست تایپ و نمایش داده می‌شود. */
.auth-input.form-input[type=password] {
    direction: ltr !important;
    text-align: left !important;
}

.auth-validation {
    margin-block-end: 14px;
    padding: 10px 12px;
    border: 1px solid rgba(239, 68, 68, 0.16);
    border-radius: 12px;
    background: rgba(254, 242, 242, 0.72);
}

.auth-validation:empty {
    display: none;
}

.auth-validation ul {
    margin: 0;
    padding-inline-start: 18px;
}

.auth-primary-button.e-btn,
.auth-primary-button.e-btn.e-primary {
    width: 100%;
    min-height: 52px;
    margin-block-start: 2px;
    border: 0 !important;
    border-radius: 14px !important;
    color: var(--app-on-primary) !important;
    background: linear-gradient(115deg, var(--app-primary), var(--app-primary-strong)) !important;
    box-shadow: 0 15px 24px -14px rgba(var(--app-primary-strong-rgb), 0.9) !important;
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease !important;
}

.auth-primary-button.e-btn:hover:not(:disabled) {
    box-shadow: 0 18px 30px -14px rgba(var(--app-primary-strong-rgb), 0.95) !important;
    filter: saturate(1.08);
    transform: translateY(-2px);
}

.auth-primary-button.e-btn:active:not(:disabled) {
    transform: translateY(0);
}

.auth-otp-content {
    gap: 0;
}

.auth-timer {
    width: 132px;
    height: 132px;
    margin-block: 0 26px;
    border-radius: 9999px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.98) 52%, rgba(248, 250, 252, 0.92) 100%);
    box-shadow: 0 18px 32px -25px rgba(15, 23, 42, 0.55);
}

.auth-timer-track {
    stroke: #e7ebf2;
}

.auth-timer-center {
    line-height: 1;
}

.auth-timer-value {
    font-size: 2rem;
    font-weight: 900;
    letter-spacing: -0.035em;
}

.auth-timer-caption {
    margin-block-start: 7px;
    color: #94a3b8;
    font-size: 0.75rem;
    font-weight: 700;
}

.auth-resend-button {
    max-width: 92px;
    padding: 8px;
    border: 0;
    border-radius: 10px;
    color: var(--app-primary-strong);
    background: var(--app-primary-soft);
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1.55;
    cursor: pointer;
    transition: color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.auth-resend-button:hover {
    color: var(--app-on-primary);
    background: var(--app-primary);
    transform: translateY(-1px);
}

.auth-otp-form {
    margin-inline: auto;
}

.auth-otp-field > label {
    text-align: center;
}

.auth-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-block-start: 25px;
    padding-block-start: 21px;
    border-block-start: 1px solid #edf0f5;
    color: #64748b;
    font-size: 0.85rem;
    text-align: center;
}

.auth-footer a {
    color: var(--app-primary-strong);
    font-weight: 800;
    text-decoration: none;
}

.auth-footer a:hover {
    color: var(--app-primary);
    text-decoration: underline;
    text-underline-offset: 4px;
}

@keyframes auth-float {
    0%, 100% {
        transform: translate3d(0, 0, 0);
    }

    50% {
        transform: translate3d(0, -14px, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .auth-ambient {
        animation: none;
    }

    .app-transition-overlay,
    .app-transition-panel,
    .app-transition-spinner::before {
        animation: none;
    }

    .auth-input.form-input,
    .auth-primary-button.e-btn,
    .auth-resend-button {
        transition: none !important;
    }
}

@media (max-width: 420px) {
    .auth-layout-nav {
        min-height: 64px;
    }

    .auth-layout-brand img {
        height: 2.75rem;
    }

    .auth-language-option {
        min-width: 60px;
        min-height: 34px;
        padding-inline: 9px;
        font-size: 0.68rem;
    }

    .auth-card {
        border-radius: 22px;
    }

    .auth-heading {
        margin-block-end: 22px;
    }

    .auth-icon-badge {
        width: 48px;
        height: 48px;
        border-radius: 16px;
    }

    .auth-input.form-input {
        height: 49px;
    }
}

.dark .auth-card,
[data-mode=dark] .auth-card {
    border-color: rgba(148, 163, 184, 0.15);
    background: rgba(23, 32, 51, 0.94);
    box-shadow: 0 30px 75px -30px rgba(0, 0, 0, 0.85);
}

.dark .app-transition-overlay,
[data-mode=dark] .app-transition-overlay {
    color: #f8fafc;
    background: rgba(7, 12, 23, 0.76);
}

.dark .app-transition-panel,
[data-mode=dark] .app-transition-panel {
    border-color: rgba(148, 163, 184, 0.18);
    background: rgba(23, 32, 51, 0.95);
    box-shadow:
        0 30px 75px -30px rgba(0, 0, 0, 0.9),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.dark .app-transition-spinner,
[data-mode=dark] .app-transition-spinner {
    color: var(--app-primary-light);
    background: linear-gradient(145deg, rgba(var(--app-primary-rgb), 0.2), rgba(var(--app-accent-rgb), 0.13));
}

.dark .app-transition-panel > span:last-child,
[data-mode=dark] .app-transition-panel > span:last-child {
    color: #aab7ca;
}

.dark .auth-layout,
[data-mode=dark] .auth-layout {
    color-scheme: dark;
    color: #e2e8f0;
    background: #0b1220;
}

.dark .auth-layout-backdrop,
[data-mode=dark] .auth-layout-backdrop {
    background-color: #111827;
    background-blend-mode: multiply;
}

.dark .auth-page::before,
[data-mode=dark] .auth-page::before {
    background:
        radial-gradient(circle at 12% 18%, rgba(var(--app-primary-rgb), 0.2), transparent 30rem),
        radial-gradient(circle at 88% 72%, rgba(var(--app-accent-rgb), 0.1), transparent 26rem),
        linear-gradient(180deg, rgba(15, 23, 42, 0.08), rgba(11, 18, 32, 0.88) 58%, #0b1220 100%);
}

.dark .auth-layout-footer,
[data-mode=dark] .auth-layout-footer {
    color: #cbd5e1 !important;
}

.dark .auth-title,
.dark .auth-field > label,
[data-mode=dark] .auth-title,
[data-mode=dark] .auth-field > label {
    color: #f8fafc;
}

.dark .auth-description,
.dark .auth-footer,
[data-mode=dark] .auth-description,
[data-mode=dark] .auth-footer {
    color: #94a3b8;
}

.dark .auth-input.form-input,
[data-mode=dark] .auth-input.form-input {
    border-color: #3b4a61 !important;
    color: #f8fafc !important;
    caret-color: var(--app-primary-light);
    background: rgba(15, 23, 42, 0.88) !important;
}

.dark .auth-input.form-input:hover,
.dark .auth-input.form-input:focus,
[data-mode=dark] .auth-input.form-input:hover,
[data-mode=dark] .auth-input.form-input:focus {
    border-color: var(--app-primary) !important;
    background: #111a2b !important;
}

.dark .auth-input.form-input::placeholder,
[data-mode=dark] .auth-input.form-input::placeholder {
    color: #7f8da3 !important;
}

.dark .auth-footer,
[data-mode=dark] .auth-footer {
    border-block-start-color: rgba(148, 163, 184, 0.14);
}

.dark .auth-footer-note,
[data-mode=dark] .auth-footer-note {
    color: #cbd5e1 !important;
}

.dark .auth-footer a,
.dark .auth-inline-action a,
.dark .auth-phone,
[data-mode=dark] .auth-footer a,
[data-mode=dark] .auth-inline-action a,
[data-mode=dark] .auth-phone {
    color: #b9a7ff !important;
}

.dark .auth-timer-caption,
[data-mode=dark] .auth-timer-caption {
    color: #a8b3c4;
}

.dark .auth-timer,
[data-mode=dark] .auth-timer {
    background: radial-gradient(circle, rgba(30, 41, 59, 0.98) 52%, rgba(15, 23, 42, 0.94) 100%);
}

.dark .auth-timer-track,
[data-mode=dark] .auth-timer-track {
    stroke: #334155;
}

/* wrapper جهت OTP را از جهت کلی صفحه مستقل نگه می‌دارد. */
.otp-ltr-wrapper {
    direction: ltr !important;
}

/* CssClass روی همان ریشه e-otpinput قرار می‌گیرد؛ بنابراین selector باید هر دو کلاس را هم‌زمان هدف بگیرد. */
.e-otpinput.otp-ltr-container {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    gap: 8px !important;
    direction: ltr !important;
}

/* از معکوس‌شدن اعداد داخل هر خانه در صفحات RTL جلوگیری می‌کند. */
.e-otpinput.otp-ltr-container .e-otp-input-field {
    direction: ltr !important;
    text-align: center !important;
    width: 42px !important;
    height: 52px !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
    border: 2px solid #e5e7eb !important;
    background-color: #f9fafb !important;
    color: #1f2937 !important;
    transition: all 0.2s ease !important;
}

    /* 3. حالت فوکوس و فعال */
    .e-otpinput.otp-ltr-container .e-otp-input-field:focus,
    .e-otpinput.otp-ltr-container .e-otp-input-field.e-otp-input-focus {
        border-color: var(--app-primary) !important;
        box-shadow: 0 4px 12px rgba(var(--app-primary-rgb), 0.15) !important;
        transform: translateY(-2px);
    }

/* 4. پشتیبانی از دارک مود */
.dark .e-otpinput.otp-ltr-container .e-otp-input-field,
[data-mode=dark] .e-otpinput.otp-ltr-container .e-otp-input-field {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
    color: #f3f4f6 !important;
}
@keyframes otp-pulse {
    0% {
        transform: scale(1) !important;
    }

    50% {
        transform: scale(1.3) !important;
    }

    100% {
        transform: scale(1) !important;
    }
}

.pulse-active {
    animation: otp-pulse 0.8s ease-in-out infinite !important;
    display: inline-block !important; /* جلوگیری از نادیده گرفتن transform */
    will-change: transform; /* بهینه‌سازی پرفورمنس GPU */
}
/* مودال تنظیمات قالب مستقل از لایه‌بندی تاپ‌بار روی کل صفحه قرار می‌گیرد. */
.app-theme-modal {
    position: fixed !important;
    z-index: 10050 !important;
    inset: 0 !important;
    width: 100vw;
    height: 100dvh;
    background: rgba(15, 23, 42, 0.66) !important;
    backdrop-filter: blur(7px);
    isolation: isolate;
}

.app-theme-modal-frame {
    width: 100%;
    min-height: 100%;
}

.app-theme-dialog {
    max-height: calc(100dvh - 3rem);
    border-color: rgba(226, 232, 240, 0.94) !important;
    border-radius: 20px !important;
    box-shadow: 0 32px 90px -28px rgba(15, 23, 42, 0.62) !important;
}

.app-theme-dialog-header {
    padding: 16px 18px !important;
}

.app-theme-dialog-title {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
}

.app-theme-dialog-title > span {
    display: inline-grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid rgba(var(--app-primary-rgb), 0.14);
    border-radius: 10px;
    color: var(--app-primary-strong);
    background: var(--app-primary-soft);
    font-size: 1rem;
}

.app-modal-close {
    display: inline-grid;
    flex: none;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid transparent;
    border-radius: 10px;
    color: #7b8798;
    background: transparent;
    transition: color 150ms ease, border-color 150ms ease, background-color 150ms ease, transform 150ms ease;
}

.app-modal-close:hover,
.app-modal-close:focus-visible {
    border-color: rgba(239, 68, 68, 0.18);
    color: #dc334f;
    background: rgba(239, 68, 68, 0.09);
    outline: none;
    transform: rotate(4deg);
}

.app-theme-dialog-body {
    max-height: calc(100dvh - 112px);
    padding: 18px !important;
    overflow-y: auto;
}

.app-theme-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
    padding-block-start: 5px;
}

.app-theme-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 41px;
    gap: 7px;
    padding-inline: 14px;
    border: 1px solid;
    border-radius: 11px;
    font-size: 0.79rem;
    font-weight: 780;
    transition: color 150ms ease, border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.app-theme-save {
    border-color: var(--app-primary);
    color: var(--app-on-primary);
    background: linear-gradient(135deg, var(--app-primary), var(--app-primary-strong));
    box-shadow: 0 12px 22px -17px rgba(var(--app-primary-strong-rgb), 0.86);
}

.app-theme-save:hover {
    color: #ffffff;
    box-shadow: 0 16px 27px -17px rgba(var(--app-primary-strong-rgb), 0.96);
    transform: translateY(-1px);
}

.app-theme-reset {
    border-color: rgba(239, 68, 68, 0.28);
    color: #d33a50;
    background: rgba(239, 68, 68, 0.045);
}

.app-theme-reset:hover {
    border-color: #e3485d;
    color: #ffffff;
    background: #e3485d;
    transform: translateY(-1px);
}

/* سربرگ و کارت‌های آماری صفحه شرکت‌ها */
.company-page {
    padding: 18px !important;
}

.company-page-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-block-end: 15px;
    padding-block-end: 13px;
    border-block-end: 1px solid var(--app-border);
}

.company-page-heading-icon {
    display: inline-grid;
    flex: none;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid rgba(var(--app-primary-rgb), 0.13);
    border-radius: 12px;
    color: var(--app-primary-strong);
    background: var(--app-primary-soft);
    font-size: 1.2rem;
}

.company-page-heading h1 {
    margin: 0;
    color: var(--app-text);
    font-size: 1.08rem;
    font-weight: 850;
    letter-spacing: -0.015em;
}

.company-stats {
    --bs-gutter-x: 1rem;
    --bs-gutter-y: 1rem;
    margin-block-end: 16px;
}

.company-stat-card {
    position: relative;
    min-height: 86px;
    height: 100%;
    overflow: hidden;
    border-radius: 16px !important;
    box-shadow: 0 18px 34px -24px rgba(15, 23, 42, 0.66) !important;
}

.company-stat-card::after {
    position: absolute;
    inset-block-start: -44px;
    inset-inline-end: -34px;
    width: 112px;
    height: 112px;
    border: 18px solid rgba(255, 255, 255, 0.08);
    border-radius: 9999px;
    content: "";
    pointer-events: none;
}

.company-stat-card.bg-primary {
    color: var(--app-on-primary) !important;
    background: linear-gradient(135deg, var(--app-primary), var(--app-primary-strong)) !important;
}

.company-stat-card.bg-success {
    background: linear-gradient(135deg, #0f9f75, #14b88a) !important;
}

.company-stat-card.bg-danger {
    background: linear-gradient(135deg, #e3485d, #f05a68) !important;
}

.company-stat-card.bg-info {
    background: linear-gradient(135deg, #078cc4, #11a7d8) !important;
}

.company-stat-body {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    padding: 14px 15px !important;
}

.company-stat-body > div {
    width: 100%;
}

.company-stat-label {
    min-width: 0;
}

.company-stat-label h6 {
    margin: 0 !important;
    color: inherit !important;
    font-size: 0.79rem;
    font-weight: 760;
    line-height: 1.4;
}

.company-stat-label small {
    color: inherit;
    font-size: 0.68rem;
    opacity: 0.82;
}

.company-stat-icon {
    display: inline-grid;
    flex: none;
    width: 36px;
    height: 36px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.13);
    font-size: 1.12rem;
}

.company-stat-value {
    flex: none;
    margin: 0;
    color: inherit !important;
    font-size: clamp(1.75rem, 2.4vw, 2.15rem);
    font-weight: 900;
    line-height: 1;
}

.company-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 72px;
    gap: 6px;
    padding: 4px 9px;
    border: 1px solid transparent;
    border-radius: 9999px;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.35;
    white-space: nowrap;
}

.company-status-dot {
    position: relative;
    z-index: 0;
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 9999px;
    background: currentColor;
    box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 14%, transparent);
}

.company-status-dot::after {
    position: absolute;
    z-index: -1;
    inset: -2px;
    border-radius: inherit;
    background: currentColor;
    content: "";
    pointer-events: none;
    animation: app-status-pulse 1.8s ease-out infinite;
}

@keyframes app-status-pulse {
    0% {
        opacity: 0.38;
        transform: scale(0.75);
    }

    70%,
    100% {
        opacity: 0;
        transform: scale(2.35);
    }
}

@media (prefers-reduced-motion: reduce) {
    .company-status-dot::after {
        opacity: 0.18;
        transform: scale(1.35);
        animation: none;
    }
}

.company-status-badge-active {
    border-color: rgba(15, 159, 117, 0.22);
    color: #087a59;
    background: rgba(16, 185, 129, 0.1);
}

.company-status-badge-inactive {
    border-color: rgba(227, 72, 93, 0.22);
    color: #c7354c;
    background: rgba(244, 63, 94, 0.09);
}

/* زبان بصری مشترک گریدها و فرم‌های Syncfusion داخل پوسته اصلی */
.app-shell .e-grid {
    border: 1px solid var(--app-border) !important;
    border-radius: 15px !important;
    background: var(--app-surface) !important;
    box-shadow: 0 16px 38px -34px rgba(15, 23, 42, 0.62);
}

.app-shell .e-grid .e-toolbar {
    min-height: 51px;
    padding-inline: 8px !important;
    border-block-end-color: var(--app-border) !important;
    border-radius: 15px 15px 0 0;
    background: #ffffff !important;
}

.app-shell .e-grid .e-toolbar .e-toolbar-items {
    min-height: 50px;
    background: transparent !important;
}

.app-shell .e-grid .e-toolbar .e-tbar-btn {
    border-radius: 9px !important;
}

.app-shell .e-grid .e-gridheader {
    border-color: var(--app-border) !important;
}

.app-shell .e-grid .e-headercell {
    position: relative;
    border-color: #e8edf3 !important;
    background: #f8fafc !important;
}

.app-shell .e-grid .e-headercelldiv {
    color: #253147;
    font-size: 0.79rem;
    font-weight: 800 !important;
}

.app-shell .e-grid .e-headercell .e-filtermenudiv,
.app-shell .e-grid .e-headercell .e-sortfilterdiv {
    position: absolute !important;
    top: 50% !important;
    right: auto !important;
    left: auto !important;
    float: none !important;
    width: 20px;
    height: 20px;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 20px;
    text-align: center;
    transform: translateY(-50%);
}

.app-shell .e-grid .e-headercell .e-filtermenudiv,
.app-shell .e-grid .e-headercell .e-sortfilterdiv {
    inset-inline-end: 7px !important;
}

.app-shell .e-grid .e-headercell:has(.e-filtermenudiv) .e-sortfilterdiv {
    inset-inline-end: 29px !important;
}

.app-shell .e-grid .e-headercell:has(.e-filtermenudiv) .e-headercelldiv {
    padding-inline-end: 48px !important;
}

.app-shell .e-grid .e-rowcell {
    border-color: #edf1f5 !important;
    color: #364152;
}

.app-shell .e-grid .e-altrow {
    background: #fbfcfe !important;
}

.app-shell .e-grid .e-row:hover .e-rowcell {
    background: #f7f6ff !important;
}

.app-shell .e-grid .e-pager {
    border-color: var(--app-border) !important;
    border-radius: 0 0 15px 15px;
    background: #ffffff !important;
}

.app-shell .e-grid .e-unboundcelldiv {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 2px;
    white-space: nowrap;
}

.app-shell .e-grid .custom-large-btn.e-btn {
    width: 28px !important;
    min-width: 28px !important;
    height: 28px !important;
    min-height: 28px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-color: transparent !important;
    border-radius: 7px !important;
    background: transparent !important;
    box-shadow: none !important;
}

.app-shell .e-grid .custom-large-btn.e-btn .e-btn-icon {
    margin: 0 !important;
    font-size: 16px !important;
}

.app-shell .e-grid .custom-large-btn.e-btn.e-info {
    color: #089dcc !important;
}

.app-shell .e-grid .custom-large-btn.e-btn.e-warning {
    color: #e58a09 !important;
}

.app-shell .e-grid .custom-large-btn.e-btn.e-primary {
    color: #5b50e8 !important;
}

.app-shell .e-grid .custom-large-btn.e-btn.e-danger {
    color: #ef334f !important;
}

.app-shell .e-grid .custom-large-btn.e-btn:hover {
    border-color: rgba(var(--app-primary-rgb), 0.1) !important;
    background: var(--app-primary-soft) !important;
}

.app-shell .e-input-group:not(.e-disabled),
.app-shell .e-input-group.e-control-wrapper:not(.e-disabled),
.app-shell .e-float-input:not(.e-disabled),
.app-shell .e-float-input.e-control-wrapper:not(.e-disabled) {
    min-height: 42px;
    border: 1px solid #dbe2eb !important;
    border-radius: 11px !important;
    background: #ffffff !important;
    box-shadow: none !important;
    transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.app-shell .e-input-group.e-input-focus,
.app-shell .e-input-group.e-control-wrapper.e-input-focus,
.app-shell .e-input-group:focus-within,
.app-shell .e-float-input.e-input-focus,
.app-shell .e-float-input:focus-within {
    border-color: rgba(var(--app-primary-rgb), 0.7) !important;
    box-shadow: 0 0 0 3px rgba(var(--app-primary-rgb), 0.1) !important;
}

.app-shell .e-input-group.e-disabled,
.app-shell .e-input-group.e-control-wrapper.e-disabled {
    border-radius: 11px !important;
    background: #f3f5f8 !important;
}

.app-shell .e-input-group input.e-input,
.app-shell .e-input-group textarea.e-input {
    padding-inline: 12px !important;
}

.app-shell .e-btn:not(.custom-large-btn):not(.e-icon-btn) {
    min-height: 38px;
    border-radius: 10px !important;
}

/* کارت‌های بخش تنظیمات کاربر */
.settings-grid {
    align-items: start;
}

.settings-card {
    overflow: hidden;
    padding: 0 !important;
}

.settings-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 17px;
    border-block-end: 1px solid var(--app-border);
    background: linear-gradient(135deg, rgba(248, 250, 252, 0.96), rgba(247, 246, 255, 0.76));
}

.settings-card-header h2 {
    margin: 0;
    color: var(--app-text);
    font-size: 0.98rem;
    font-weight: 820;
}

.settings-card-icon {
    display: inline-grid;
    flex: none;
    width: 36px;
    height: 36px;
    place-items: center;
    border: 1px solid rgba(var(--app-primary-rgb), 0.13);
    border-radius: 11px;
    color: var(--app-primary-strong);
    background: var(--app-primary-soft);
    font-size: 1.08rem;
}

.settings-card-icon-info {
    border-color: rgba(var(--app-accent-rgb), 0.15);
    color: var(--app-accent);
    background: rgba(var(--app-accent-rgb), 0.09);
}

.settings-card-icon-warning {
    border-color: rgba(245, 158, 11, 0.17);
    color: #b56b05;
    background: rgba(245, 158, 11, 0.1);
}

.settings-card-body {
    padding: 18px;
}

.profile-image-preview {
    padding: 12px;
    border: 1px solid #e6eaf0;
    border-radius: 14px;
    background: #f8fafc;
}

.profile-image-preview img {
    width: 72px !important;
    height: 72px !important;
    border: 3px solid #ffffff;
    box-shadow: 0 0 0 1px rgba(var(--app-primary-rgb), 0.16), 0 14px 26px -18px rgba(15, 23, 42, 0.72);
    object-fit: cover;
}

.profile-image-panel > .e-btn,
.profile-image-panel > .e-progress-btn {
    width: auto !important;
    max-width: 100%;
    justify-self: start;
}

/* صفحه تنظیمات شرکت از همان الگوی عنوان و کارت‌های تنظیمات استفاده می‌کند. */
.company-settings-page {
    padding: 18px !important;
}

.company-settings-page .company-page-heading {
    margin-block-end: 18px;
}

.company-logo-editor {
    overflow: hidden;
    border-color: #e2e7ef !important;
    border-radius: 16px !important;
    background: #fafbfd !important;
}

.company-settings-page textarea.e-control.e-textarea,
.company-settings-page .company-address-input.e-control.e-textarea {
    width: 100% !important;
    min-width: 100% !important;
    min-height: 86px !important;
    resize: vertical;
}

.company-settings-page .e-input-group.e-control-wrapper.e-multi-line-input {
    width: 100% !important;
}

/* صفحه تنظیمات سراسری سامانه */
.system-settings-page {
    padding: 18px !important;
}

.system-settings-heading {
    align-items: flex-start;
}

.system-settings-heading p,
.settings-card-header p {
    margin: 4px 0 0;
    color: var(--app-muted);
    font-size: 0.76rem;
    line-height: 1.65;
}

.system-settings-layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.system-settings-wide-card {
    grid-column: 1 / -1;
}

.system-settings-state {
    display: flex;
    min-height: 220px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--app-muted);
    font-size: 0.88rem;
    font-weight: 700;
}

.system-settings-state-error {
    color: #dc3545;
}

.system-settings-state-error i {
    font-size: 1.35rem;
}

.system-settings-spinner {
    width: 23px;
    height: 23px;
    border: 3px solid var(--app-primary-soft);
    border-block-start-color: var(--app-primary);
    border-radius: 50%;
    animation: system-settings-spin 0.8s linear infinite;
}

@keyframes system-settings-spin {
    to {
        transform: rotate(360deg);
    }
}

.system-auth-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.system-auth-option {
    display: flex;
    min-height: 82px;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 14px 15px;
    border: 1px solid var(--app-border);
    border-radius: 14px;
    background: rgba(var(--app-primary-rgb), 0.025);
}

.system-auth-option-wide {
    grid-column: 1 / -1;
}

.system-auth-option > div {
    display: grid;
    gap: 5px;
}

.system-auth-option strong {
    color: var(--app-text);
    font-size: 0.86rem;
}

.system-auth-option small,
.system-settings-field > small {
    color: var(--app-muted);
    font-size: 0.7rem;
    line-height: 1.55;
}

.system-provider-header h2 {
    flex: 1;
}

.system-provider-header .e-switch-wrapper {
    flex: none;
}

.system-settings-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.system-priority-fields {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.system-settings-field {
    display: grid;
    min-width: 0;
    align-content: start;
    gap: 7px;
}

.system-settings-field-full {
    grid-column: 1 / -1;
}

.system-settings-field > label {
    color: var(--app-text);
    font-size: 0.76rem;
    font-weight: 750;
}

.system-settings-field .validation-message,
.system-settings-validation {
    color: #dc3545;
    font-size: 0.72rem;
}

.system-settings-validation {
    margin-block-end: 14px;
    padding: 11px 14px;
    border: 1px solid rgba(220, 53, 69, 0.18);
    border-radius: 12px;
    background: rgba(220, 53, 69, 0.06);
}

.system-settings-validation:empty {
    display: none;
}

.system-settings-actions {
    position: sticky;
    z-index: 3;
    inset-block-end: 12px;
    display: flex;
    justify-content: flex-end;
    margin-block-start: 16px;
    padding: 12px;
    border: 1px solid var(--app-border);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 16px 32px -26px rgba(15, 23, 42, 0.7);
    backdrop-filter: blur(10px);
}

.system-settings-actions .e-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

[data-mode=dark] .system-auth-option,
.dark .system-auth-option {
    border-color: #334155;
    background: rgba(var(--app-primary-rgb), 0.07);
}

[data-mode=dark] .system-auth-option strong,
[data-mode=dark] .system-settings-field > label,
.dark .system-auth-option strong,
.dark .system-settings-field > label {
    color: #e2e8f0;
}

[data-mode=dark] .system-settings-actions,
.dark .system-settings-actions {
    border-color: #334155;
    background: rgba(23, 32, 51, 0.92);
}

@media (max-width: 991px) {
    .system-settings-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .system-settings-wide-card {
        grid-column: auto;
    }

    .system-auth-options,
    .system-priority-fields {
        grid-template-columns: minmax(0, 1fr);
    }

    .system-auth-option-wide {
        grid-column: auto;
    }
}

@media (max-width: 575px) {
    .system-settings-page {
        padding: 12px !important;
    }

    .system-settings-fields {
        grid-template-columns: minmax(0, 1fr);
    }

    .system-settings-field-full {
        grid-column: auto;
    }

    .system-auth-option {
        align-items: flex-start;
    }
}

/* رنگ‌های تیره برای اجزای بصری جدید */
[data-mode=dark] .app-topbar,
.dark .app-topbar {
    background: rgba(15, 23, 42, 0.97) !important;
}

[data-mode=dark] .app-context-chip .app-context-company,
.dark .app-context-chip .app-context-company {
    color: #f1f5f9 !important;
}

[data-mode=dark] .app-context-chip .app-context-branch,
.dark .app-context-chip .app-context-branch {
    border-color: #38465b;
    color: #cbd5e1 !important;
    background: rgba(15, 23, 42, 0.48);
}

[data-mode=dark] .app-context-chip .app-context-type,
.dark .app-context-chip .app-context-type {
    border-color: rgba(var(--app-primary-rgb), 0.28);
    color: var(--app-primary-light) !important;
    background: rgba(var(--app-primary-rgb), 0.14);
}

[data-mode=dark] .app-theme-dialog,
[data-mode=dark] .app-theme-dialog-header,
.dark .app-theme-dialog,
.dark .app-theme-dialog-header {
    border-color: #334155 !important;
    background: #172033 !important;
}

[data-mode=dark] .company-page-heading h1,
[data-mode=dark] .settings-card-header h2,
.dark .company-page-heading h1,
.dark .settings-card-header h2 {
    color: #f1f5f9;
}

[data-mode=dark] .company-status-badge-active,
.dark .company-status-badge-active {
    border-color: rgba(52, 211, 153, 0.26);
    color: #6ee7b7;
    background: rgba(16, 185, 129, 0.13);
}

[data-mode=dark] .company-status-badge-inactive,
.dark .company-status-badge-inactive {
    border-color: rgba(251, 113, 133, 0.28);
    color: #fda4af;
    background: rgba(244, 63, 94, 0.13);
}

[data-mode=dark] .app-shell .e-grid,
.dark .app-shell .e-grid {
    background: #172033 !important;
}

[data-mode=dark] .app-shell .e-grid .e-toolbar,
[data-mode=dark] .app-shell .e-grid .e-toolbar .e-toolbar-items,
[data-mode=dark] .app-shell .e-grid .e-pager,
.dark .app-shell .e-grid .e-toolbar,
.dark .app-shell .e-grid .e-toolbar .e-toolbar-items,
.dark .app-shell .e-grid .e-pager {
    background: #172033 !important;
}

[data-mode=dark] .app-shell .e-grid .e-headercell,
.dark .app-shell .e-grid .e-headercell {
    border-color: #2a394f !important;
    background: #1c283c !important;
}

[data-mode=dark] .app-shell .e-grid .e-headercelldiv,
.dark .app-shell .e-grid .e-headercelldiv {
    color: #e2e8f0;
}

[data-mode=dark] .app-shell .e-grid .e-rowcell,
.dark .app-shell .e-grid .e-rowcell {
    border-color: #263449 !important;
    color: #cbd5e1;
    background: #172033 !important;
}

[data-mode=dark] .app-shell .e-grid .e-altrow,
[data-mode=dark] .app-shell .e-grid .e-altrow .e-rowcell,
.dark .app-shell .e-grid .e-altrow,
.dark .app-shell .e-grid .e-altrow .e-rowcell {
    background: #19243a !important;
}

[data-mode=dark] .app-shell .e-grid .e-row:hover .e-rowcell,
.dark .app-shell .e-grid .e-row:hover .e-rowcell {
    background: #252547 !important;
}

[data-mode=dark] .app-shell .e-input-group:not(.e-disabled),
[data-mode=dark] .app-shell .e-input-group.e-control-wrapper:not(.e-disabled),
[data-mode=dark] .app-shell .e-float-input:not(.e-disabled),
[data-mode=dark] .app-shell .e-float-input.e-control-wrapper:not(.e-disabled),
.dark .app-shell .e-input-group:not(.e-disabled),
.dark .app-shell .e-input-group.e-control-wrapper:not(.e-disabled),
.dark .app-shell .e-float-input:not(.e-disabled),
.dark .app-shell .e-float-input.e-control-wrapper:not(.e-disabled) {
    border-color: #334155 !important;
    background: #111a2b !important;
}

[data-mode=dark] .settings-card-header,
.dark .settings-card-header {
    background: linear-gradient(135deg, rgba(28, 40, 60, 0.98), rgba(41, 35, 74, 0.64));
}

[data-mode=dark] .profile-image-preview,
.dark .profile-image-preview {
    border-color: #334155;
    background: #111a2b;
}

@media (max-width: 1199px) {
    .app-context-type {
        display: none;
    }
}

@media (max-width: 899px) {
    .app-context-branch {
        display: none;
    }

    .app-context-company {
        max-width: 200px;
    }
}

@media (max-width: 575px) {
    .company-page {
        padding: 12px !important;
    }

    .company-page-heading {
        margin-block-end: 12px;
        padding-block-end: 11px;
    }

    .company-stat-card {
        min-height: 80px;
    }

    .settings-card-header,
    .settings-card-body {
        padding: 14px;
    }
}

/* انتخاب شرکت و شعبه در جریان ورود */
.auth-inline-action {
    margin-block-start: -2px;
}

.auth-inline-action a {
    color: var(--app-primary-strong);
    font-size: 0.8rem;
    font-weight: 750;
    text-decoration: none;
}

.auth-inline-action a:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.auth-choice-list {
    display: grid;
    max-height: min(42vh, 340px);
    gap: 9px;
    padding: 2px;
    overflow-y: auto;
    scrollbar-color: #d6dbe5 transparent;
    scrollbar-width: thin;
}

.auth-choice-card {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 12px;
    padding: 11px 12px;
    border: 1px solid #e2e7ef;
    border-radius: 15px;
    color: #253147;
    background: rgba(248, 250, 252, 0.76);
    text-align: start;
    transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.auth-choice-card:hover,
.auth-choice-card:focus-visible {
    border-color: rgba(var(--app-primary-rgb), 0.36);
    background: #ffffff;
    box-shadow: 0 14px 30px -22px rgba(var(--app-primary-strong-rgb), 0.72);
    outline: none;
    transform: translateY(-1px);
}

.auth-choice-logo {
    display: inline-grid;
    flex: none;
    width: 50px;
    height: 50px;
    place-items: center;
    overflow: hidden;
    border: 1px solid #e5eaf1;
    border-radius: 14px;
    background: #ffffff;
}

.auth-choice-logo img {
    width: 100%;
    height: 100%;
    padding: 6px;
    object-fit: contain;
}

.auth-choice-logo-icon {
    border-color: rgba(var(--app-primary-rgb), 0.14);
    color: var(--app-primary-strong);
    background: var(--app-primary-soft);
    font-size: 1.35rem;
}

.auth-choice-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    gap: 3px;
}

.auth-choice-content strong,
.auth-choice-content small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.auth-choice-content strong {
    color: #263247;
    font-size: 0.88rem;
    font-weight: 820;
}

.auth-choice-content small {
    color: #7a8799;
    font-size: 0.72rem;
}

.auth-choice-content .auth-choice-badge {
    width: fit-content;
    padding: 3px 8px;
    border-radius: 9999px;
    color: var(--app-primary-strong);
    background: var(--app-primary-soft);
    font-weight: 750;
}

.auth-choice-arrow {
    flex: none;
    color: #9aa5b5;
    font-size: 1.25rem;
}

.auth-back-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 40px;
    gap: 7px;
    margin-block-start: 13px;
    border: 0;
    border-radius: 11px;
    color: #64748b;
    background: transparent;
    font-size: 0.8rem;
    font-weight: 750;
    transition: color 150ms ease, background-color 150ms ease;
}

.auth-back-button:hover {
    color: var(--app-primary-strong);
    background: var(--app-primary-soft);
}

[data-mode=dark] .auth-choice-card,
.dark .auth-choice-card {
    border-color: #334155;
    color: #e2e8f0;
    background: rgba(15, 23, 42, 0.54);
}

[data-mode=dark] .auth-choice-card:hover,
[data-mode=dark] .auth-choice-card:focus-visible,
.dark .auth-choice-card:hover,
.dark .auth-choice-card:focus-visible {
    border-color: rgba(var(--app-primary-rgb), 0.44);
    background: #1d2940;
}

[data-mode=dark] .auth-choice-logo,
.dark .auth-choice-logo {
    border-color: #334155;
    background: #111a2b;
}

[data-mode=dark] .auth-choice-content strong,
.dark .auth-choice-content strong {
    color: #f1f5f9;
}

/* نمای کلی پروفایل و کارت‌های قابل توسعه آن */
.profile-page {
    display: grid;
    gap: 16px;
}

.profile-hero {
    position: relative;
    min-height: 168px;
    overflow: hidden;
    border: 0 !important;
    padding: 0 !important;
    color: var(--app-on-primary);
    background: linear-gradient(120deg, var(--app-primary-strong), var(--app-primary) 50%, var(--app-accent)) !important;
    box-shadow: 0 22px 46px -30px rgba(var(--app-primary-strong-rgb), 0.76) !important;
}

.profile-hero-accent {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 10% 5%, rgba(255, 255, 255, 0.18), transparent 13rem),
        radial-gradient(circle at 86% 28%, rgba(56, 189, 248, 0.28), transparent 17rem);
}

.profile-hero-accent::before,
.profile-hero-accent::after {
    position: absolute;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 9999px;
    content: "";
}

.profile-hero-accent::before {
    inset-block-start: -90px;
    inset-inline-start: 12%;
    width: 230px;
    height: 230px;
}

.profile-hero-accent::after {
    inset-inline-end: 5%;
    inset-block-end: -120px;
    width: 250px;
    height: 250px;
}

.profile-hero-content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    min-height: 168px;
    gap: 18px;
    margin: 0;
    padding: 22px 24px;
}

.profile-avatar-wrap {
    position: relative;
    flex: none;
}

.profile-avatar {
    width: 96px;
    height: 96px;
    border: 5px solid rgba(255, 255, 255, 0.92);
    border-radius: 24px;
    background: #eef1f6;
    box-shadow: 0 20px 34px -20px rgba(15, 23, 42, 0.76);
    object-fit: cover;
}

.profile-online-dot {
    position: absolute;
    inset-inline-end: 5px;
    inset-block-end: 5px;
    width: 16px;
    height: 16px;
    border: 3px solid #ffffff;
    border-radius: 9999px;
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.12);
}

.profile-identity {
    flex: 1;
    min-width: 0;
    padding: 0;
}

.profile-eyebrow {
    display: inline-block;
    margin-block-end: 4px;
    color: color-mix(in srgb, var(--app-on-primary) 72%, transparent);
    font-size: 0.7rem;
    font-weight: 850;
    letter-spacing: 0.04em;
}

.profile-identity h1 {
    margin: 0;
    overflow: hidden;
    color: var(--app-on-primary);
    font-size: clamp(1.25rem, 2.3vw, 1.7rem);
    font-weight: 900;
    letter-spacing: -0.025em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-contact-row {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 14px;
    margin-block-start: 7px;
}

.profile-contact-row span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: color-mix(in srgb, var(--app-on-primary) 80%, transparent);
    font-size: 0.76rem;
}

.profile-contact-row i {
    color: var(--app-on-primary);
    font-size: 0.95rem;
}

.profile-edit-button {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    min-height: 41px;
    gap: 7px;
    padding-inline: 14px;
    border: 1px solid rgba(255, 255, 255, 0.76);
    border-radius: 12px;
    color: var(--app-primary-strong);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 14px 24px -18px rgba(15, 23, 42, 0.58);
    font-size: 0.78rem;
    font-weight: 800;
    text-decoration: none;
    transition: box-shadow 150ms ease, transform 150ms ease;
}

.profile-edit-button:hover {
    color: var(--app-primary-strong);
    background: #ffffff;
    box-shadow: 0 18px 28px -17px rgba(15, 23, 42, 0.64);
    transform: translateY(-1px);
}

.profile-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 13px;
}

.profile-metric-card {
    display: flex;
    align-items: center;
    min-width: 0;
    min-height: 78px;
    gap: 11px;
    padding: 13px 14px !important;
}

.profile-metric-icon,
.profile-card-header > span {
    display: inline-grid;
    flex: none;
    width: 39px;
    height: 39px;
    place-items: center;
    border: 1px solid rgba(var(--app-primary-rgb), 0.13);
    border-radius: 12px;
    color: var(--app-primary-strong);
    background: var(--app-primary-soft);
    font-size: 1.12rem;
}

.profile-metric-icon-info,
.profile-card-header > .profile-card-header-info {
    border-color: rgba(var(--app-accent-rgb), 0.14);
    color: var(--app-accent);
    background: rgba(var(--app-accent-rgb), 0.09);
}

.profile-metric-icon-warning,
.profile-card-header > .profile-card-header-warning {
    border-color: rgba(245, 158, 11, 0.16);
    color: #b56b05;
    background: rgba(245, 158, 11, 0.1);
}

.profile-metric-icon-success {
    border-color: rgba(34, 197, 94, 0.16);
    color: #15803d;
    background: rgba(34, 197, 94, 0.1);
}

.profile-metric-icon-danger {
    border-color: rgba(239, 68, 68, 0.16);
    color: #dc2626;
    background: rgba(239, 68, 68, 0.09);
}

.profile-metric-card > div {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.profile-metric-card strong {
    overflow: hidden;
    color: var(--app-text);
    font-size: 1.28rem;
    font-weight: 900;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-metric-card strong.profile-status-text {
    font-size: 0.92rem;
}

.profile-metric-card span:last-child {
    color: var(--app-muted);
    font-size: 0.71rem;
    font-weight: 650;
}

.profile-content-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.profile-detail-card {
    overflow: hidden;
    padding: 0 !important;
}

.profile-detail-card-wide {
    grid-column: 1 / -1;
}

.profile-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-block-end: 1px solid var(--app-border);
    background: linear-gradient(135deg, rgba(248, 250, 252, 0.96), rgba(247, 246, 255, 0.72));
}

.profile-card-header > span {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    font-size: 1rem;
}

.profile-card-header h2 {
    margin: 0;
    color: var(--app-text);
    font-size: 0.92rem;
    font-weight: 830;
}

.profile-detail-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    padding: 6px 16px 16px;
}

.profile-detail-item {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 5px;
    padding: 12px 10px;
    border-block-end: 1px dashed #e5eaf1;
}

.profile-detail-item span {
    color: var(--app-muted);
    font-size: 0.7rem;
}

.profile-detail-item strong {
    overflow: hidden;
    color: var(--app-text);
    font-size: 0.82rem;
    font-weight: 760;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-chip-list {
    display: flex;
    align-content: flex-start;
    flex-wrap: wrap;
    min-height: 105px;
    gap: 7px;
    padding: 16px;
}

.profile-chip {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    min-height: 30px;
    padding-inline: 10px;
    overflow: hidden;
    border: 1px solid rgba(var(--app-primary-rgb), 0.13);
    border-radius: 9999px;
    color: var(--app-primary-strong);
    background: var(--app-primary-soft);
    font-size: 0.72rem;
    font-weight: 720;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-chip-info {
    border-color: rgba(var(--app-accent-rgb), 0.14);
    color: var(--app-accent);
    background: rgba(var(--app-accent-rgb), 0.08);
}

.profile-chip-warning {
    border-color: rgba(245, 158, 11, 0.16);
    color: #a35d04;
    background: rgba(245, 158, 11, 0.09);
}

.profile-empty-slot {
    display: grid;
    width: 100%;
    min-height: 72px;
    place-items: center;
    border: 1px dashed #dce2ea;
    border-radius: 12px;
    color: #a1aab8;
    background: #fafbfd;
}

/* پنل هویت نشست در پایین سایدبار */
.app-sidebar-menu {
    flex: 1;
    height: auto !important;
    min-height: 0;
    padding-block-end: 14px !important;
}

.app-sidebar-user-panel {
    display: flex;
    flex: none;
    align-items: center;
    min-height: 62px;
    gap: 7px;
    margin: 0 10px 11px;
    padding: 8px;
    border: 1px solid #e8ecf2;
    border-radius: 15px;
    background: linear-gradient(135deg, #f8fafc, var(--app-primary-soft));
    box-shadow: 0 14px 28px -25px rgba(15, 23, 42, 0.7);
}

.app-sidebar-user-link {
    display: flex;
    flex: 1;
    align-items: center;
    min-width: 0;
    gap: 9px;
    color: inherit;
    text-decoration: none;
}

.app-sidebar-avatar-wrap {
    position: relative;
    flex: none;
}

.app-sidebar-avatar-wrap img {
    width: 40px;
    height: 40px;
    border: 2px solid #ffffff;
    border-radius: 12px;
    background: #eef1f6;
    box-shadow: 0 0 0 1px rgba(var(--app-primary-rgb), 0.14);
    object-fit: cover;
}

.app-sidebar-online-dot {
    position: absolute;
    z-index: 0;
    inset-inline-end: -1px;
    inset-block-end: -1px;
    width: 11px;
    height: 11px;
    border: 2px solid #ffffff;
    border-radius: 9999px;
    color: #22c55e;
    background: currentColor;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.14);
}

.app-sidebar-online-dot::after {
    position: absolute;
    z-index: -1;
    inset: -2px;
    border-radius: inherit;
    background: currentColor;
    content: "";
    pointer-events: none;
    animation: app-status-pulse 1.8s ease-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .app-sidebar-online-dot::after {
        opacity: 0.18;
        transform: scale(1.35);
        animation: none;
    }
}

.app-sidebar-user-details {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    gap: 1px;
}

.app-sidebar-user-details strong,
.app-sidebar-user-details small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-sidebar-user-details strong {
    color: #29364a;
    font-size: 0.76rem;
    font-weight: 820;
}

.app-sidebar-user-details small {
    color: #7c899b;
    font-size: 0.65rem;
}

.app-sidebar-logout {
    display: inline-grid;
    flex: none;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid rgba(239, 68, 68, 0.12);
    border-radius: 10px;
    color: #dc5262;
    background: rgba(239, 68, 68, 0.06);
    font-size: 1.05rem;
    text-decoration: none;
    transition: color 150ms ease, border-color 150ms ease, background-color 150ms ease;
}

.app-sidebar-logout:hover {
    border-color: rgba(239, 68, 68, 0.24);
    color: #ffffff;
    background: #e3485d;
}

.vertical.toggle-sidebar .app-sidebar:not(:hover) .app-sidebar-user-panel {
    justify-content: center;
    margin-inline: 7px;
    padding-inline: 5px;
}

.vertical.toggle-sidebar .app-sidebar:not(:hover) .app-sidebar-user-link {
    flex: none;
}

.vertical.toggle-sidebar .app-sidebar:not(:hover) .app-sidebar-user-details,
.vertical.toggle-sidebar .app-sidebar:not(:hover) .app-sidebar-logout {
    display: none;
}

/* تکمیل پوسته بصری تمام کنترل‌های Syncfusion مورد استفاده پروژه */
[dir=rtl] .app-shell .e-control,
.app-shell .e-btn,
.e-dialog,
.e-popup,
.e-toast,
.e-tooltip-wrap {
    font-family: VazirMatn, Inter, Helvetica, sans-serif !important;
}

.app-shell .e-btn:not(.custom-large-btn):not(.e-icon-btn) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 39px;
    gap: 7px;
    padding-inline: 14px;
    border-radius: 10px !important;
    font-size: 0.79rem;
    font-weight: 760;
    box-shadow: none;
    transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.app-shell .e-btn:not(.custom-large-btn):not(.e-icon-btn) .e-btn-icon {
    margin: 0 !important;
}

[dir=ltr] .app-shell .e-btn:not(.custom-large-btn):not(.e-icon-btn),
[dir=ltr] .e-dialog .e-btn:not(.e-icon-btn) {
    direction: ltr !important;
}

[dir=rtl] .app-shell .e-btn:not(.custom-large-btn):not(.e-icon-btn),
[dir=rtl] .e-dialog .e-btn:not(.e-icon-btn) {
    direction: rtl !important;
}

.app-shell .e-btn:not(.custom-large-btn):not(.e-icon-btn):hover {
    box-shadow: 0 12px 22px -18px rgba(15, 23, 42, 0.72);
    transform: translateY(-1px);
}

.app-shell .e-btn.e-primary:not(.auth-primary-button):not(.custom-large-btn),
.app-shell .e-css.e-btn.e-primary:not(.auth-primary-button):not(.custom-large-btn) {
    border-color: var(--app-primary) !important;
    color: var(--app-on-primary) !important;
    background: linear-gradient(135deg, var(--app-primary), var(--app-primary-strong)) !important;
}

.app-shell .e-btn.e-info:not(.custom-large-btn),
.app-shell .e-css.e-btn.e-info:not(.custom-large-btn) {
    border-color: #0d9dcc !important;
    color: #ffffff !important;
    background: linear-gradient(135deg, #0ea5e9, #078cc4) !important;
}

.app-shell .e-btn.e-warning:not(.custom-large-btn),
.app-shell .e-css.e-btn.e-warning:not(.custom-large-btn) {
    border-color: #e99a16 !important;
    color: #ffffff !important;
    background: linear-gradient(135deg, #f5a623, #d98508) !important;
}

.app-shell .e-btn.e-secondary,
.app-shell .e-css.e-btn.e-secondary {
    border-color: #d9e0e9 !important;
    color: #526075 !important;
    background: #f8fafc !important;
}

.app-shell .e-float-input .e-float-line::before,
.app-shell .e-float-input .e-float-line::after,
.app-shell .e-input-group::before,
.app-shell .e-input-group::after {
    display: none !important;
}

.app-shell .e-input-group .e-input-group-icon,
.app-shell .e-input-group.e-control-wrapper .e-input-group-icon {
    display: inline-grid;
    place-items: center;
    border: 0 !important;
    border-radius: 9px;
    color: #718096;
    background: transparent;
}

.app-shell .e-input-group .e-input-group-icon:hover,
.app-shell .e-input-group.e-control-wrapper .e-input-group-icon:hover {
    color: var(--app-primary-strong);
    background: var(--app-primary-soft);
}

.e-popup.e-ddl,
.e-popup.e-multi-select-list-wrapper,
.e-popup.e-datepicker,
.e-popup.e-timepicker {
    margin-block-start: 6px;
    overflow: hidden;
    border: 1px solid #dfe5ed !important;
    border-radius: 13px !important;
    background: #ffffff !important;
    box-shadow: 0 24px 55px -24px rgba(15, 23, 42, 0.4) !important;
}

.e-dropdownbase .e-list-item {
    min-height: 38px;
    margin: 3px 5px;
    padding-inline: 10px !important;
    border-radius: 8px;
    color: #475569;
}

.e-dropdownbase .e-list-item.e-active,
.e-dropdownbase .e-list-item.e-item-focus,
.e-dropdownbase .e-list-item:hover {
    color: var(--app-primary-strong) !important;
    background: var(--app-primary-soft) !important;
}

.app-shell .e-switch-wrapper,
.e-dialog .e-switch-wrapper {
    --app-switch-handle-size: 14px;
    --app-switch-inset: 2px;
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    height: 20px !important;
    min-height: 20px !important;
}

.app-shell .e-switch-wrapper .e-switch-inner,
.e-dialog .e-switch-wrapper .e-switch-inner {
    border: 1px solid #d9e0e9 !important;
    border-radius: 9999px;
    background: #e8edf3 !important;
}

.app-shell .e-switch-wrapper .e-switch-handle,
.e-dialog .e-switch-wrapper .e-switch-handle {
    left: var(--app-switch-inset) !important;
    width: var(--app-switch-handle-size) !important;
    height: var(--app-switch-handle-size) !important;
    margin-left: 0 !important;
    background: #ffffff !important;
    box-shadow: 0 3px 8px -4px rgba(15, 23, 42, 0.8);
}

.app-shell .e-switch-wrapper .e-switch-handle.e-switch-active,
.e-dialog .e-switch-wrapper .e-switch-handle.e-switch-active {
    left: calc(100% - var(--app-switch-handle-size) - var(--app-switch-inset)) !important;
    margin-left: 0 !important;
}

.app-shell .e-switch-wrapper.e-rtl .e-switch-handle,
.e-dialog .e-switch-wrapper.e-rtl .e-switch-handle {
    left: calc(100% - var(--app-switch-handle-size) - var(--app-switch-inset)) !important;
    margin-left: 0 !important;
}

.app-shell .e-switch-wrapper.e-rtl .e-switch-handle.e-switch-active,
.e-dialog .e-switch-wrapper.e-rtl .e-switch-handle.e-switch-active {
    left: var(--app-switch-inset) !important;
    margin-left: 0 !important;
}

.app-shell .e-switch-wrapper .e-switch-inner.e-switch-active,
.app-shell .e-switch-wrapper .e-switch-inner.e-switch-active .e-switch-on,
.e-dialog .e-switch-wrapper .e-switch-inner.e-switch-active,
.e-dialog .e-switch-wrapper .e-switch-inner.e-switch-active .e-switch-on {
    border-color: var(--app-primary) !important;
    background: var(--app-primary) !important;
}

.app-shell .e-switch-wrapper.e-focus .e-switch-inner,
.app-shell .e-switch-wrapper:focus .e-switch-inner,
.e-dialog .e-switch-wrapper.e-focus .e-switch-inner,
.e-dialog .e-switch-wrapper:focus .e-switch-inner {
    box-shadow: 0 0 0 3px rgba(var(--app-primary-rgb), 0.16) !important;
}

.app-shell .e-upload {
    overflow: hidden;
    border: 1px dashed #ccd5e1 !important;
    border-radius: 13px !important;
    background: #fafbfd;
}

.app-shell .e-upload .e-file-select-wrap {
    padding: 13px !important;
    border: 0 !important;
    background: transparent !important;
}

.app-shell .e-upload .e-upload-files {
    border-block-start: 1px solid #e8edf3 !important;
    background: #ffffff;
}

.app-shell .e-upload .e-upload-file-list {
    min-height: 48px;
    border-color: #edf1f5 !important;
}

.app-shell .e-upload .e-file-name {
    color: #344054;
    font-weight: 700;
}

.app-shell .e-upload .e-file-size,
.app-shell .e-upload .e-file-status {
    color: #8491a3;
}

.app-shell .e-data-form .e-form-label {
    margin-block-end: 6px;
    color: #4b596d;
    font-size: 0.76rem;
    font-weight: 760;
}

.app-shell .e-data-form .e-form-group {
    margin-block-end: 15px;
}

.e-dialog {
    overflow: hidden;
    border: 1px solid #dfe5ed !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    box-shadow: 0 30px 80px -28px rgba(15, 23, 42, 0.58) !important;
}

.e-dialog .e-dlg-header-content {
    height: 64px !important;
    min-height: 64px;
    padding: 15px 18px !important;
    border-block-end: 1px solid #e7ebf1;
    background: linear-gradient(135deg, #fbfcfe, #f7f6ff) !important;
}

.e-dialog .e-dlg-header {
    display: flex !important;
    align-items: center;
    width: calc(100% - 46px) !important;
    min-height: 34px;
    margin: 0 !important;
    color: #273449;
    font-size: 1rem !important;
    font-weight: 850 !important;
    line-height: 1.4 !important;
}

.grid-dialog-title {
    display: block;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    color: #273449;
    font-size: 0.92rem;
    font-weight: 840;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.e-dialog .e-dlg-closeicon-btn {
    display: inline-grid !important;
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    place-items: center;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    color: #7b8798 !important;
    background: transparent !important;
    transition: color 150ms ease, border-color 150ms ease, background-color 150ms ease, transform 150ms ease;
}

.e-dialog .e-dlg-closeicon-btn:hover,
.e-dialog .e-dlg-closeicon-btn:focus-visible {
    border-color: rgba(239, 68, 68, 0.18) !important;
    color: #dc334f !important;
    background: rgba(239, 68, 68, 0.09) !important;
    outline: none;
    transform: rotate(4deg);
}

.e-dialog .e-dlg-closeicon-btn .e-btn-icon {
    margin: 0 !important;
}

.e-dialog .e-dlg-content {
    padding: 18px !important;
    color: #475569;
    background: #ffffff !important;
}

.e-dialog .e-input-group:not(.e-disabled),
.e-dialog .e-input-group.e-control-wrapper:not(.e-disabled),
.e-dialog .e-float-input:not(.e-disabled),
.e-dialog .e-float-input.e-control-wrapper:not(.e-disabled) {
    min-height: 42px;
    border: 1px solid #dbe2eb !important;
    border-radius: 11px !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

.e-dialog .e-input-group.e-input-focus,
.e-dialog .e-input-group.e-control-wrapper.e-input-focus,
.e-dialog .e-input-group:focus-within,
.e-dialog .e-float-input.e-input-focus,
.e-dialog .e-float-input:focus-within {
    border-color: rgba(var(--app-primary-rgb), 0.7) !important;
    box-shadow: 0 0 0 3px rgba(var(--app-primary-rgb), 0.1) !important;
}

/* افکت underline قالب Fluent غیرفعال است؛ focus فقط با border و ring کارت نمایش داده می‌شود. */
html[data-mode] body.e-bigger .e-dialog .e-input-group::before,
html[data-mode] body.e-bigger .e-dialog .e-input-group::after,
html[data-mode] body.e-bigger .e-dialog .e-input-group.e-control-wrapper::before,
html[data-mode] body.e-bigger .e-dialog .e-input-group.e-control-wrapper::after,
html[data-mode] body.e-bigger .e-dialog .e-input-in-wrap::before,
html[data-mode] body.e-bigger .e-dialog .e-input-in-wrap::after,
html[data-mode] body.e-bigger .e-dialog .e-float-input .e-float-line::before,
html[data-mode] body.e-bigger .e-dialog .e-float-input .e-float-line::after,
html[data-mode] body.e-bigger .app-shell .e-input-group::before,
html[data-mode] body.e-bigger .app-shell .e-input-group::after,
html[data-mode] body.e-bigger .app-shell .e-input-group.e-control-wrapper::before,
html[data-mode] body.e-bigger .app-shell .e-input-group.e-control-wrapper::after,
html[data-mode] body.e-bigger .app-shell .e-input-in-wrap::before,
html[data-mode] body.e-bigger .app-shell .e-input-in-wrap::after,
html[data-mode] body.e-bigger .app-shell .e-float-input .e-float-line::before,
html[data-mode] body.e-bigger .app-shell .e-float-input .e-float-line::after {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    border: 0 !important;
    content: none !important;
}

.e-dialog .e-btn:not(.e-icon-btn) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 39px;
    gap: 7px;
    padding-inline: 14px;
    border-radius: 10px !important;
    font-size: 0.79rem;
    font-weight: 760;
}

.e-dialog .e-btn:not(.e-icon-btn) .e-btn-icon {
    margin: 0 !important;
}

.e-dialog .e-btn.e-primary,
.e-dialog .e-css.e-btn.e-primary {
    border-color: var(--app-primary) !important;
    color: var(--app-on-primary) !important;
    background: linear-gradient(135deg, var(--app-primary), var(--app-primary-strong)) !important;
}

.e-dialog .e-btn.e-secondary,
.e-dialog .e-css.e-btn.e-secondary {
    border-color: #d9e0e9 !important;
    color: #526075 !important;
    background: #f8fafc !important;
}

.e-dialog .e-footer-content {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 13px 18px !important;
    border-block-start: 1px solid #e7ebf1;
    background: #fafbfd !important;
}

.e-dlg-overlay {
    background: rgba(15, 23, 42, 0.56) !important;
    backdrop-filter: blur(4px);
}

.e-toast-container .e-toast {
    width: 380px !important;
    max-width: calc(100vw - 24px) !important;
    overflow: hidden;
    border: 1px solid rgba(226, 232, 240, 0.92) !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 22px 48px -24px rgba(15, 23, 42, 0.46) !important;
}

.e-toast-container .e-toast .e-toast-content {
    color: #475569 !important;
}

.e-toast-container .e-toast .e-toast-title {
    color: #253147 !important;
    font-weight: 820 !important;
}

.e-toast-container .e-toast .e-toast-icon {
    display: inline-grid !important;
    flex: 0 0 34px;
    width: 34px !important;
    height: 34px !important;
    place-items: center;
    border-radius: 10px;
    opacity: 1 !important;
}

.e-toast-container .e-toast .e-toast-icon::before {
    display: block;
    line-height: 1;
}

.e-toast-container .e-toast.e-toast-danger .e-toast-icon {
    color: #e3485d !important;
    background: rgba(227, 72, 93, 0.11);
}

.e-toast-container .e-toast.e-toast-success .e-toast-icon {
    color: #0f9f75 !important;
    background: rgba(15, 159, 117, 0.11);
}

.e-toast-container .e-toast.e-toast-warning .e-toast-icon {
    color: #d98508 !important;
    background: rgba(217, 133, 8, 0.12);
}

.e-toast-container .e-toast.e-toast-info .e-toast-icon {
    color: #078cc4 !important;
    background: rgba(7, 140, 196, 0.11);
}

.e-toast-container .e-toast .e-toast-close-icon {
    flex: 0 0 26px;
    width: 26px !important;
    height: 26px !important;
    margin-inline-start: auto !important;
    margin-inline-end: 0 !important;
    border: 1px solid rgba(100, 116, 139, 0.18) !important;
    border-radius: 8px !important;
    color: #526075 !important;
    background: rgba(100, 116, 139, 0.08) !important;
    opacity: 1 !important;
    transition: color 150ms ease, border-color 150ms ease, background-color 150ms ease;
}

.e-toast-container .e-toast .e-toast-close-icon:hover,
.e-toast-container .e-toast .e-toast-close-icon:focus-visible {
    border-color: rgba(239, 68, 68, 0.26) !important;
    color: #dc334f !important;
    background: rgba(239, 68, 68, 0.11) !important;
    outline: none;
}

.e-tooltip-wrap {
    border: 0 !important;
    border-radius: 9px !important;
    background: #172033 !important;
    box-shadow: 0 12px 28px -16px rgba(15, 23, 42, 0.8) !important;
}

.e-tooltip-wrap .e-tip-content {
    color: #f8fafc !important;
    font-size: 0.72rem;
}

.e-checkbox-wrapper .e-frame,
.e-css.e-checkbox-wrapper .e-frame {
    border-color: #cbd5e1 !important;
    border-radius: 5px !important;
}

.e-checkbox-wrapper .e-frame.e-check,
.e-css.e-checkbox-wrapper .e-frame.e-check {
    border-color: var(--app-primary) !important;
    background: var(--app-primary) !important;
}

.e-checkbox-wrapper .e-frame.e-check::before,
.e-css.e-checkbox-wrapper .e-frame.e-check::before {
    color: var(--app-on-primary) !important;
}

.e-calendar .e-header .e-title,
.e-calendar .e-header .e-icon-container {
    color: #334155 !important;
}

.e-calendar .e-content td.e-selected span.e-day,
.e-calendar .e-content td.e-focused-date.e-selected span.e-day {
    color: var(--app-on-primary) !important;
    background: var(--app-primary) !important;
}

.e-calendar .e-content td.e-focused-date span.e-day,
.e-calendar .e-content td:hover span.e-day {
    color: var(--app-primary-strong) !important;
    background: var(--app-primary-soft) !important;
}

/* حالت تیره پروفایل، سایدبار و کنترل‌های Syncfusion */
[data-mode=dark] .profile-identity h1,
[data-mode=dark] .profile-metric-card strong,
[data-mode=dark] .profile-card-header h2,
[data-mode=dark] .profile-detail-item strong,
.dark .profile-identity h1,
.dark .profile-metric-card strong,
.dark .profile-card-header h2,
.dark .profile-detail-item strong {
    color: #f1f5f9;
}

[data-mode=dark] .profile-card-header,
.dark .profile-card-header {
    background: linear-gradient(135deg, rgba(28, 40, 60, 0.98), rgba(41, 35, 74, 0.62));
}

[data-mode=dark] .profile-detail-item,
.dark .profile-detail-item {
    border-color: #304057;
}

[data-mode=dark] .profile-empty-slot,
.dark .profile-empty-slot {
    border-color: #334155;
    color: #718096;
    background: #111a2b;
}

[data-mode=dark] .grid-dialog-title,
.dark .grid-dialog-title {
    color: #f1f5f9;
}

[data-mode=dark] .company-logo-editor,
.dark .company-logo-editor {
    border-color: #334155 !important;
    background: #111a2b !important;
}

[data-mode=dark] .app-sidebar-user-panel,
[data-sidebar=dark] .app-sidebar-user-panel,
[data-sidebar=brand] .app-sidebar-user-panel,
.dark .app-sidebar-user-panel {
    border-color: rgba(148, 163, 184, 0.15);
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.92), rgba(45, 39, 76, 0.68));
}

[data-mode=dark] .app-sidebar-user-details strong,
[data-sidebar=dark] .app-sidebar-user-details strong,
[data-sidebar=brand] .app-sidebar-user-details strong,
.dark .app-sidebar-user-details strong {
    color: #e2e8f0;
}

[data-mode=dark] .app-sidebar-user-details small,
[data-sidebar=dark] .app-sidebar-user-details small,
[data-sidebar=brand] .app-sidebar-user-details small,
.dark .app-sidebar-user-details small {
    color: #94a3b8;
}

[data-mode=dark] .app-shell .e-upload,
.dark .app-shell .e-upload {
    border-color: #3a475c !important;
    background: #111a2b;
}

[data-mode=dark] .app-shell .e-upload .e-upload-files,
.dark .app-shell .e-upload .e-upload-files {
    background: #172033;
}

[data-mode=dark] .app-shell .e-upload .e-file-name,
[data-mode=dark] .app-shell .e-data-form .e-form-label,
.dark .app-shell .e-upload .e-file-name,
.dark .app-shell .e-data-form .e-form-label {
    color: #d8dee8;
}

[data-mode=dark] .e-popup.e-ddl,
[data-mode=dark] .e-popup.e-multi-select-list-wrapper,
[data-mode=dark] .e-popup.e-datepicker,
[data-mode=dark] .e-popup.e-timepicker,
.dark .e-popup.e-ddl,
.dark .e-popup.e-multi-select-list-wrapper,
.dark .e-popup.e-datepicker,
.dark .e-popup.e-timepicker {
    border-color: #334155 !important;
    background: #172033 !important;
}

[data-mode=dark] .e-dropdownbase .e-list-item,
.dark .e-dropdownbase .e-list-item {
    color: #cbd5e1;
}

[data-mode=dark] .e-dialog,
[data-mode=dark] .e-dialog .e-dlg-content,
.dark .e-dialog,
.dark .e-dialog .e-dlg-content {
    border-color: #334155 !important;
    color: #cbd5e1;
    background: #172033 !important;
}

[data-mode=dark] .e-dialog .e-dlg-header-content,
[data-mode=dark] .e-dialog .e-footer-content,
.dark .e-dialog .e-dlg-header-content,
.dark .e-dialog .e-footer-content {
    border-color: #334155;
    background: #1c283c !important;
}

[data-mode=dark] .e-dialog .e-dlg-header,
.dark .e-dialog .e-dlg-header {
    color: #f1f5f9;
}

[data-mode=dark] .e-dialog .e-input-group:not(.e-disabled),
[data-mode=dark] .e-dialog .e-input-group.e-control-wrapper:not(.e-disabled),
[data-mode=dark] .e-dialog .e-float-input:not(.e-disabled),
[data-mode=dark] .e-dialog .e-float-input.e-control-wrapper:not(.e-disabled),
.dark .e-dialog .e-input-group:not(.e-disabled),
.dark .e-dialog .e-input-group.e-control-wrapper:not(.e-disabled),
.dark .e-dialog .e-float-input:not(.e-disabled),
.dark .e-dialog .e-float-input.e-control-wrapper:not(.e-disabled) {
    border-color: #334155 !important;
    background: #111a2b !important;
}

[data-mode=dark] .e-calendar .e-header .e-title,
[data-mode=dark] .e-calendar .e-header .e-icon-container,
.dark .e-calendar .e-header .e-title,
.dark .e-calendar .e-header .e-icon-container {
    color: #e2e8f0 !important;
}

[data-mode=dark] .e-toast-container .e-toast,
.dark .e-toast-container .e-toast {
    border-color: #334155 !important;
    background: rgba(23, 32, 51, 0.98) !important;
}

[data-mode=dark] .e-toast-container .e-toast .e-toast-title,
.dark .e-toast-container .e-toast .e-toast-title {
    color: #f1f5f9 !important;
}

[data-mode=dark] .e-toast-container .e-toast .e-toast-content,
.dark .e-toast-container .e-toast .e-toast-content {
    color: #cbd5e1 !important;
}

[data-mode=dark] .e-toast-container .e-toast .e-toast-close-icon,
.dark .e-toast-container .e-toast .e-toast-close-icon {
    border-color: rgba(226, 232, 240, 0.22) !important;
    color: #f8fafc !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

[data-mode=dark] .e-toast-container .e-toast .e-toast-close-icon:hover,
[data-mode=dark] .e-toast-container .e-toast .e-toast-close-icon:focus-visible,
.dark .e-toast-container .e-toast .e-toast-close-icon:hover,
.dark .e-toast-container .e-toast .e-toast-close-icon:focus-visible {
    border-color: rgba(248, 113, 113, 0.42) !important;
    color: #fecaca !important;
    background: rgba(239, 68, 68, 0.18) !important;
}

@media (max-width: 1023px) {
    .profile-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .profile-content-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .profile-detail-card-wide {
        grid-column: 1 / -1;
    }
}

@media (max-width: 767px) {
    .profile-hero-accent {
        height: auto;
    }

    .profile-hero-content {
        align-items: center;
        flex-wrap: wrap;
        min-height: 156px;
        margin: 0;
        padding: 18px 16px;
    }

    .profile-avatar {
        width: 88px;
        height: 88px;
        border-radius: 22px;
    }

    .profile-identity {
        padding: 0;
    }

    .profile-edit-button {
        width: 100%;
    }

    .profile-detail-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575px) {
    .profile-metrics,
    .profile-content-grid,
    .profile-detail-list {
        grid-template-columns: 1fr;
    }

    .profile-detail-card-wide {
        grid-column: auto;
    }

    .profile-hero-content {
        gap: 12px;
    }

    .profile-identity {
        width: calc(100% - 104px);
    }

    .profile-contact-row {
        display: none;
    }
}

/* تراز عمودی کنترل‌های compact سینکفوژن را بدون وابستگی به کلاس سراسری e-bigger تثبیت می‌کند. */
.app-shell .e-input-group:not(.e-disabled),
.app-shell .e-input-group.e-control-wrapper:not(.e-disabled),
.e-dialog .e-input-group:not(.e-disabled),
.e-dialog .e-input-group.e-control-wrapper:not(.e-disabled),
.e-filter-popup .e-input-group:not(.e-disabled),
.e-filter-popup .e-input-group.e-control-wrapper:not(.e-disabled) {
    align-items: center !important;
}

.app-shell .e-input-group input.e-input:not([type="checkbox"]),
.app-shell .e-input-group.e-control-wrapper input.e-input:not([type="checkbox"]),
.e-dialog .e-input-group input.e-input:not([type="checkbox"]),
.e-dialog .e-input-group.e-control-wrapper input.e-input:not([type="checkbox"]),
.e-filter-popup .e-input-group input.e-input:not([type="checkbox"]),
.e-filter-popup .e-input-group.e-control-wrapper input.e-input:not([type="checkbox"]) {
    height: 40px !important;
    min-height: 40px !important;
    padding-block: 0 !important;
    line-height: 40px !important;
}

.app-shell .e-btn:not(.custom-large-btn):not(.e-icon-btn),
.e-dialog .e-btn:not(.e-icon-btn),
.e-filter-popup .e-btn:not(.e-icon-btn) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 39px;
    padding-block: 0 !important;
    line-height: 1 !important;
}

.app-shell .e-btn:not(.custom-large-btn):not(.e-icon-btn) .e-btn-icon,
.e-dialog .e-btn:not(.e-icon-btn) .e-btn-icon,
.e-filter-popup .e-btn:not(.e-icon-btn) .e-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1 !important;
}

/* ورودی مشترک تاریخ و ساعت در فرم و فیلتر گرید تمام عرض والد را حفظ می‌کند. */
.app-date-time-picker {
    width: 100%;
    min-width: 0;
}

.app-date-time-picker > .e-input-group,
.app-date-time-picker > .e-control-wrapper {
    width: 100% !important;
}

/* بازشدن تقویم فقط از طریق خود فیلد انجام می‌شود و فضای آیکن حذف‌شده را اشغال نمی‌کند. */
.app-date-time-picker .e-date-icon,
.app-date-time-picker .e-time-icon {
    display: none !important;
}

.app-date-time-picker .app-persian-date-filter {
    position: relative;
}

.app-date-time-picker .app-persian-date-filter > .e-input {
    padding-right: 38px !important;
}

.app-date-time-picker-clear {
    position: absolute;
    z-index: 2;
    right: 8px;
    left: auto;
    inset-block-start: 50%;
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    padding: 0;
    transform: translateY(-50%);
    border: 0;
    border-radius: 8px;
    color: var(--app-muted);
    background: transparent;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: color 140ms ease, background-color 140ms ease;
}

.app-date-time-picker-clear:hover,
.app-date-time-picker-clear:focus-visible {
    color: var(--app-primary-strong);
    background: var(--app-primary-soft);
    outline: none;
}

/* تقویم جلالی مشترک را بالاتر از popup سینکفوژن و هماهنگ با پالت فعال سایت نمایش می‌دهد. */
.app-persian-date-filter-host,
.e-filter-popup.app-persian-date-filter-host,
.e-popup-open.app-persian-date-filter-host {
    overflow: visible !important;
}

.datepicker-container.app-persian-date-filter-popup {
    z-index: 2147483000 !important;
    direction: ltr;
    font-family: VazirMatn, Inter, Helvetica, sans-serif !important;
}

.datepicker-container.app-persian-date-filter-popup .datepicker-plot-area {
    box-sizing: border-box;
    width: 280px !important;
    min-width: 280px !important;
    max-width: calc(100vw - 16px);
    padding: 10px !important;
    overflow: hidden;
    border: 1px solid var(--app-border) !important;
    border-radius: 16px !important;
    color: var(--app-text) !important;
    background: var(--app-surface) !important;
    box-shadow: 0 24px 55px -22px rgba(15, 23, 42, 0.48) !important;
    backdrop-filter: blur(14px);
    direction: rtl;
    inset: 0 auto auto 0 !important;
}

.datepicker-container.app-persian-date-filter-popup .datepicker-plot-area *,
.datepicker-container.app-persian-date-filter-popup .datepicker-plot-area .datepicker-day-view .table-days td span {
    font-family: inherit !important;
    text-shadow: none !important;
}

.datepicker-container.app-persian-date-filter-popup .datepicker-navigator {
    display: flex !important;
    align-items: center;
    gap: 6px;
    margin-block-end: 7px;
}

.datepicker-container.app-persian-date-filter-popup .datepicker-navigator .pwt-btn-next,
.datepicker-container.app-persian-date-filter-popup .datepicker-navigator .pwt-btn-prev {
    display: inline-flex !important;
    flex: 0 0 34px;
    align-items: center;
    justify-content: center;
    width: 34px !important;
    height: 34px !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    color: var(--app-muted) !important;
    background: var(--app-primary-soft) !important;
    line-height: 1 !important;
}

.datepicker-container.app-persian-date-filter-popup .datepicker-navigator .pwt-btn-switch {
    display: inline-flex !important;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    width: auto !important;
    height: 34px !important;
    margin: 0 !important;
    border-radius: 10px !important;
    color: var(--app-text) !important;
    background: transparent !important;
    font-weight: 800 !important;
    line-height: 1 !important;
}

.datepicker-container.app-persian-date-filter-popup .datepicker-navigator .pwt-btn-next:hover,
.datepicker-container.app-persian-date-filter-popup .datepicker-navigator .pwt-btn-prev:hover,
.datepicker-container.app-persian-date-filter-popup .datepicker-navigator .pwt-btn-switch:hover {
    color: var(--app-primary-strong) !important;
    background: var(--app-primary-soft) !important;
}

.datepicker-container.app-persian-date-filter-popup .datepicker-day-view .month-grid-box {
    min-height: 224px !important;
    margin: 0 !important;
}

.datepicker-container.app-persian-date-filter-popup .datepicker-day-view .month-grid-box .header {
    padding-block-end: 5px !important;
}

.datepicker-container.app-persian-date-filter-popup .datepicker-day-view .month-grid-box .header .header-row-cell {
    height: 30px !important;
    color: var(--app-muted) !important;
    font-size: 11px !important;
    font-weight: 750 !important;
    line-height: 30px !important;
}

.datepicker-container.app-persian-date-filter-popup .datepicker-day-view .table-days td {
    height: 34px !important;
    padding: 2px !important;
}

.datepicker-container.app-persian-date-filter-popup .datepicker-day-view .table-days td span {
    display: grid !important;
    place-items: center;
    height: 30px !important;
    border: 1px solid transparent !important;
    border-radius: 9px !important;
    color: var(--app-text) !important;
    background: transparent !important;
    font-size: 12px !important;
    line-height: 1 !important;
    transition: color 140ms ease, background-color 140ms ease, border-color 140ms ease;
}

.datepicker-container.app-persian-date-filter-popup .datepicker-day-view .table-days td span:hover,
.datepicker-container.app-persian-date-filter-popup .datepicker-month-view .month-item:hover,
.datepicker-container.app-persian-date-filter-popup .datepicker-year-view .year-item:hover {
    border-color: rgba(var(--app-primary-rgb), 0.16) !important;
    color: var(--app-primary-strong) !important;
    background: var(--app-primary-soft) !important;
}

.datepicker-container.app-persian-date-filter-popup .datepicker-day-view .table-days td.today span {
    border-color: rgba(var(--app-primary-rgb), 0.72) !important;
    color: var(--app-primary-strong) !important;
    background: var(--app-primary-soft) !important;
}

.datepicker-container.app-persian-date-filter-popup .datepicker-day-view .table-days td.selected span,
.datepicker-container.app-persian-date-filter-popup .datepicker-month-view .month-item.selected,
.datepicker-container.app-persian-date-filter-popup .datepicker-year-view .year-item.selected {
    border-color: var(--app-primary) !important;
    color: var(--app-on-primary) !important;
    background: linear-gradient(135deg, var(--app-primary), var(--app-primary-strong)) !important;
    box-shadow: 0 7px 16px -9px rgba(var(--app-primary-rgb), 0.9);
}

.datepicker-container.app-persian-date-filter-popup .datepicker-day-view .table-days td span.other-month,
.datepicker-container.app-persian-date-filter-popup .datepicker-day-view .table-days td.disabled span,
.datepicker-container.app-persian-date-filter-popup .datepicker-month-view .month-item-disable,
.datepicker-container.app-persian-date-filter-popup .datepicker-year-view .year-item-disable {
    color: var(--app-muted) !important;
    background: transparent !important;
    opacity: 0.42;
}

.datepicker-container.app-persian-date-filter-popup .datepicker-month-view,
.datepicker-container.app-persian-date-filter-popup .datepicker-year-view {
    padding-block-start: 6px !important;
}

.datepicker-container.app-persian-date-filter-popup .datepicker-month-view .month-item,
.datepicker-container.app-persian-date-filter-popup .datepicker-year-view .year-item {
    box-sizing: border-box;
    height: 42px !important;
    margin: 2px 0 !important;
    border: 2px solid var(--app-surface) !important;
    border-radius: 11px !important;
    color: var(--app-text) !important;
    background: transparent !important;
    line-height: 38px !important;
}

.datepicker-container.app-persian-date-filter-popup .toolbox {
    box-sizing: border-box;
    display: block !important;
    width: 100% !important;
    margin: 8px 0 0 !important;
    padding: 8px 0 0 !important;
    border-block-start: 1px solid var(--app-border);
}

.datepicker-container.app-persian-date-filter-popup .toolbox .pwt-btn-today {
    box-sizing: border-box;
    display: inline-flex !important;
    float: none !important;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    min-width: 100% !important;
    height: 36px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    border: 1px solid rgba(var(--app-primary-rgb), 0.16) !important;
    border-radius: 10px !important;
    color: var(--app-primary-strong) !important;
    background: var(--app-primary-soft) !important;
    font-family: inherit !important;
    font-size: 0.76rem !important;
    font-weight: 780 !important;
    line-height: 1 !important;
    transition: color 140ms ease, border-color 140ms ease, background-color 140ms ease;
}

.datepicker-container.app-persian-date-filter-popup .toolbox .pwt-btn-today:hover,
.datepicker-container.app-persian-date-filter-popup .toolbox .pwt-btn-today:focus-visible {
    border-color: var(--app-primary) !important;
    color: var(--app-on-primary) !important;
    background: linear-gradient(135deg, var(--app-primary), var(--app-primary-strong)) !important;
    outline: none;
}

[data-mode="dark"] .datepicker-container.app-persian-date-filter-popup .datepicker-plot-area,
.dark .datepicker-container.app-persian-date-filter-popup .datepicker-plot-area {
    border-color: #334155 !important;
    background: rgba(23, 32, 51, 0.98) !important;
    box-shadow: 0 26px 65px -22px rgba(0, 0, 0, 0.78) !important;
}

/* تقویم‌های داخلی Syncfusion را با تقویم جلالی و پالت فعال سایت هم‌ظاهر می‌کند. */
.e-popup.e-datepicker {
    width: 280px !important;
    min-width: 280px !important;
    max-width: calc(100vw - 16px);
    padding: 0 !important;
    overflow: hidden;
    border: 1px solid var(--app-border) !important;
    border-radius: 16px !important;
    color: var(--app-text) !important;
    background: var(--app-surface) !important;
    box-shadow: 0 24px 55px -22px rgba(15, 23, 42, 0.48) !important;
    backdrop-filter: blur(14px);
}

.e-popup.e-datepicker .e-calendar,
.e-calendar.app-calendar-surface {
    box-sizing: border-box;
    width: 100% !important;
    max-width: none !important;
    padding: 10px !important;
    border: 0 !important;
    color: var(--app-text) !important;
    background: transparent !important;
    font-family: VazirMatn, Inter, Helvetica, sans-serif !important;
}

.e-calendar .e-header {
    min-height: 41px !important;
    padding: 0 0 7px !important;
    border: 0 !important;
    color: var(--app-text) !important;
    background: transparent !important;
}

.e-calendar .e-header .e-title {
    min-height: 34px;
    padding-inline: 9px !important;
    border-radius: 10px;
    color: var(--app-text) !important;
    font-family: inherit !important;
    font-size: 0.82rem !important;
    font-weight: 800 !important;
    line-height: 34px !important;
    transition: color 140ms ease, background-color 140ms ease;
}

.e-calendar .e-header .e-title:hover,
.e-calendar .e-header .e-title:focus-visible {
    color: var(--app-primary-strong) !important;
    background: var(--app-primary-soft) !important;
    outline: none;
}

.e-calendar .e-header .e-icon-container {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    margin-inline: 3px !important;
    padding: 0 !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    color: var(--app-muted) !important;
    background: var(--app-primary-soft) !important;
    line-height: 1 !important;
    transition: color 140ms ease, border-color 140ms ease, background-color 140ms ease;
}

.e-calendar .e-header .e-icon-container:hover,
.e-calendar .e-header .e-icon-container:focus-visible {
    border-color: rgba(var(--app-primary-rgb), 0.18) !important;
    color: var(--app-primary-strong) !important;
    background: var(--app-primary-soft) !important;
    outline: none;
}

.e-calendar .e-content {
    padding: 0 !important;
    color: var(--app-text) !important;
    background: transparent !important;
}

.e-calendar .e-content table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 3px 2px !important;
    background: transparent !important;
}

.e-calendar .e-content thead,
.e-calendar .e-content tbody,
.e-calendar .e-content tr,
.e-calendar .e-content th,
.e-calendar .e-content td {
    border: 0 !important;
    background: transparent !important;
}

.e-calendar .e-content th {
    height: 30px !important;
    padding: 0 !important;
    color: var(--app-muted) !important;
    font-family: inherit !important;
    font-size: 0.68rem !important;
    font-weight: 750 !important;
    line-height: 30px !important;
}

.e-calendar .e-content td {
    height: 34px !important;
    padding: 2px !important;
}

.e-calendar .e-content td span.e-day {
    box-sizing: border-box;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 30px !important;
    height: 30px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    border: 1px solid transparent !important;
    border-radius: 9px !important;
    color: var(--app-text) !important;
    background: transparent !important;
    font-family: inherit !important;
    font-size: 0.75rem !important;
    line-height: 1 !important;
    text-shadow: none !important;
    transition: color 140ms ease, border-color 140ms ease, background-color 140ms ease;
}

.e-calendar .e-content td:not(.e-selected):not(.e-disabled):hover span.e-day,
.e-calendar .e-content td.e-focused-date:not(.e-selected) span.e-day {
    border-color: rgba(var(--app-primary-rgb), 0.16) !important;
    color: var(--app-primary-strong) !important;
    background: var(--app-primary-soft) !important;
}

.e-calendar .e-content td.e-today:not(.e-selected) span.e-day {
    border-color: rgba(var(--app-primary-rgb), 0.72) !important;
    color: var(--app-primary-strong) !important;
    background: var(--app-primary-soft) !important;
    font-weight: 800 !important;
}

.e-calendar .e-content td.e-selected span.e-day,
.e-calendar .e-content td.e-focused-date.e-selected span.e-day {
    border-color: var(--app-primary) !important;
    color: var(--app-on-primary) !important;
    background: linear-gradient(135deg, var(--app-primary), var(--app-primary-strong)) !important;
    box-shadow: 0 7px 16px -9px rgba(var(--app-primary-rgb), 0.9);
    font-weight: 800 !important;
}

.e-calendar .e-content td.e-other-month span.e-day,
.e-calendar .e-content td.e-disabled span.e-day {
    color: var(--app-muted) !important;
    background: transparent !important;
    opacity: 0.42;
}

.e-calendar .e-content.e-year td,
.e-calendar .e-content.e-decade td {
    height: 44px !important;
}

.e-calendar .e-content.e-year td span.e-day,
.e-calendar .e-content.e-decade td span.e-day {
    width: 100% !important;
    height: 40px !important;
    border-radius: 11px !important;
}

.e-calendar .e-footer-container {
    padding: 8px 0 0 !important;
    border-block-start: 1px solid var(--app-border) !important;
    background: transparent !important;
}

.e-calendar .e-footer-container .e-btn.e-today {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 36px;
    padding: 0 12px !important;
    border: 1px solid rgba(var(--app-primary-rgb), 0.16) !important;
    border-radius: 10px !important;
    color: var(--app-primary-strong) !important;
    background: var(--app-primary-soft) !important;
    font-family: inherit !important;
    font-size: 0.76rem !important;
    font-weight: 780 !important;
    line-height: 1 !important;
}

.e-calendar .e-footer-container .e-btn.e-today:hover,
.e-calendar .e-footer-container .e-btn.e-today:focus-visible {
    border-color: var(--app-primary) !important;
    color: var(--app-on-primary) !important;
    background: linear-gradient(135deg, var(--app-primary), var(--app-primary-strong)) !important;
    outline: none;
}

[data-mode="dark"] .e-popup.e-datepicker,
.dark .e-popup.e-datepicker {
    border-color: #334155 !important;
    background: rgba(23, 32, 51, 0.98) !important;
    box-shadow: 0 26px 65px -22px rgba(0, 0, 0, 0.78) !important;
}