@font-face {
    font-family: 'IRANYekan';
    src: url('/fonts/iranyekanwebregular.woff') format('woff');
    font-display: swap;
}

html, body {
    /*font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;*/
    min-height: 100% !important;
    overflow-y: auto !important;
    font-family: IRANYekan, Arial, sans-serif !important;
}

/* Radzen/viewport رو از تبدیل شدن به scroll container دربیار */
.app-center,
.app-viewport,
.rz-layout,
.rz-body,
.app-body,
.app-content {
    height: auto !important;
    min-height: 100% !important;
    overflow: visible !important;
    max-height: none !important;
}

a, .btn-link {
    color: #006bb7;
}

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

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

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

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

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

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

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

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

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

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* =========================
   Base (stable)
========================= */
html, body {
    height: 100%;
}

body {
    margin: 0;
    /*font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;*/
    /* دسکتاپ: زمینه خنثی (مثل okala اطراف سفید/خنثی) */
    background: linear-gradient(180deg, #eaf6ff 50%, #f7e7eab6 100%) !important;
}

/* =========================
   Radzen shell
========================= */
.app-shell {
    min-height: 100%;
    width: 100%;
    background: transparent !important;
    margin-bottom: 100px;
    box-shadow: none !important;
    background-color: transparent !important;
}

/* =========================
   Desktop blur background (only desktop)
   (بهینه: فقط یک لایه، فقط دسکتاپ)
========================= */
.bg-blur {
    position: fixed;
    inset: -40px;
    /*background: linear-gradient(180deg, #eaf6ff 0%, #f7e7ea 100%);*/
    filter: blur(28px);
    transform: scale(1.06);
    opacity: 0.95;
    z-index: 0;
    pointer-events: none;
    display: none !important;
}

@media (min-width: 992px) {
    .bg-blur {
        display: block;
    }
}

/* =========================
   Centering wrapper (fixes "stuck to right")
========================= */
.app-center {
    position: relative;
    z-index: 1;
    min-height: 100%;
    width: 100%;
    display: flex;
    justify-content: center; /* مرکز افقی قطعی */
    box-shadow: none !important;
    background-color: transparent !important;
}

/* =========================
   App viewport (phone-like)
========================= */
.app-viewport {
    position: relative;
    /*width: min(560px, 100%);*/
    width: 100% !important;
    height: 100% !important; /* ✅ مثل اپ موبایل: تمام ارتفاع */
    margin: 0 auto;
    /* ✅ دورش سفید و تمیز */
    /*background: linear-gradient(180deg, #eaf6ff 50%, #f7e7ea 100%) !important;*/
    background-color: transparent !important;
    box-shadow: none !important;
    border: 0px solid rgba(0,0,0,0.06);
    border-radius: 0px !important;
    overflow: hidden;
    box-shadow: 0 18px 50px rgba(0,0,0,0.14);
    /* جای منوی پایین */
    padding-bottom: calc(86px + env(safe-area-inset-bottom));
    margin-left: auto !important;
    margin-inline: auto !important;
    margin-right: auto !important; /* وسط‌چین قطعی حتی با RTL/LTR */
}

.pc-only {
    display: block !important;
}

.mobile-only {
    display: none !important;
}

.bottom-nav {
    display: none !important;
}

.landscape {
    z-index: 8768932432;
    display: none !important;
    position: absolute;
    width: 100% !important;
    height: 100vh; /* ✅ مثل اپ موبایل: تمام ارتفاع */
    margin: 0 auto;
    /* ✅ دورش سفید و تمیز */
    /*background: linear-gradient(180deg, #eaf6ff 0%, #f7e7ea 100%) !important;*/
    background-color: transparent;
    border: 0px solid rgba(0,0,0,0.06);
    border-radius: 22px;
}

@media (max-width: 768px) {

    .pc-only {
        display: none !important;
    }

    .mobile-only {
        display: flex !important;
    }

    .bottom-nav {
        display: flow !important;
    }
}

@media (max-width: 380px) {
    .app-viewport {
        min-width: 0;
        width: 100%;
        border-radius: 0;
        border: 0;
        box-shadow: none;
        height: 100vh;
        background: transparent; /* اگر خواستی موبایل هم سفید باشه: این خط رو حذف کن */
    }

    .vs-select-side.rz-dialog-side {
        width: 100%;
        min-width: 0;
    }

    body {
        /* موبایل: همان گرادیان خودت */
        background: linear-gradient(180deg, #eaf6ff 0%, #f7e7ea 100%);
    }
}
/* موبایل + لنداسکیپ: اپ باید کاملاً responsive باشه */
@media (max-width: 991.98px) {
    .app-viewport {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 0;
    }

    .landscape {
        display: flex !important;
    }
}
/* فقط دسکتاپ: عرض محدود شبیه اپ */
@media (min-width: 992px) {
    .app-viewport {
        border-radius: 22px;
    }

    .bottom-nav-inner {
        margin: 0px 18px 8px 3px !important;
    }
}
/* =========================
   Header
========================= */
.app-header {
    background: transparent !important;
    box-shadow: none !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 14px 6px 14px;
}

.header-left, .header-right {
    width: 56px;
    width: fit-content;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px 10px;
}

.header-center {
    flex: 1;
    text-align: center;
    font-size: 13px;
    color: rgba(0,0,0,0.72);
}

.icon-btn {
    border-radius: 12px !important;
}

.user-avatar {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    box-shadow: 0 6px 16px rgba(0,0,0,0.10);
}
/* =========================
   Content
========================= */
.app-body {
    background: transparent !important;
    min-width: 100% !important;
    min-height: 100%;
    padding: 0 !important;
}

.app-content {
    padding: 8px 10px 0 10px;
}
/* =========================
   Bottom navigation
========================= */
.bottom-nav {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 10px;
    width: min(560px, calc(100% - 22px));
    padding-bottom: env(safe-area-inset-bottom);
    z-index: 1000;
}

.bottom-nav-inner {
    background: rgba(255,255,255,0.92);
    border-radius: 18px;
    padding: 10px 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.14);
    border: 1px solid rgba(0,0,0,0.06);
}

.bottom-nav .nav-item {
    width: 25%;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 0;
    border-radius: 14px;
    color: rgba(0,0,0,0.55);
    transition: transform 120ms ease, background 120ms ease, color 120ms ease;
}

    .bottom-nav .nav-item .rz-icon {
        font-size: 22px;
        line-height: 1;
    }

    .bottom-nav .nav-item span {
        font-size: 12px;
        font-weight: 600;
        line-height: 1;
    }

    .bottom-nav .nav-item.active {
        color: #0b5d8a;
        background: rgba(11, 93, 138, 0.08);
    }

    .bottom-nav .nav-item:active {
        transform: scale(0.98);
    }
/* ===== HARD FIX: force RadzenLayout to behave like normal container ===== */
.rz-layout,
.rz-layout-root {
    display: block !important;
    width: 100% !important;
}

.app-center {
    width: 100vw !important; /* کل عرض واقعی ویوپورت */
    justify-content: center !important; /* وسط‌چین قطعی */
}
/* RadzenLayout را فقط از نظر overflow/width رام می‌کنیم، نه اینکه کل layout را بشکنیم */
.rz-layout,
.rz-layout-root {
    width: 100% !important;
    max-width: 100% !important;
}
/* وسط‌چین: 100% نه 100vw */
.app-center {
    width: 100% !important;
    display: flex;
    justify-content: center !important;
}


.bottom-nav .nav-item.active {
    color: #0b5d8a;
    background: rgba(11, 93, 138, 0.08);
}

.rz-stack.rz-display-flex.rz-flex-row.rz-align-items-center.rz-justify-content-space-between.bottom-nav-inner {
    margin: 0px 15px;
}
/* کل محتوای دیالوگ: تا 75% صفحه رشد کند */
.idsel-wrap {
    max-height: 75vh; /* ✅ تا 75% */
    display: flex;
    flex-direction: column;
    border-radius: 18px; /* ✅ گوشه گرد داخل */
    overflow: hidden; /* ✅ برای اینکه sticky/header و لیست تمیز باشه */
}
/* هدر ثابت */
.idsel-header {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 14px 10px 14px;
    background: rgba(255,255,255,0.92); /* برای خوانایی موقع اسکرول */
    backdrop-filter: blur(6px); /* اگر خیلی حساس به CPU هستی بگو حذفش کنم */
}
/* divider هم ثابت زیر هدر */
.idsel-divider {
    height: 1px;
    background: rgba(0,0,0,0.08);
}
/* فقط لیست اسکرول شود */
.idsel-scroll {
    overflow: auto; /* ✅ اسکرول فقط اینجا */
    -webkit-overflow-scrolling: touch;
}
/* ردیف‌ها */
.idsel-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
}

.idsel-row-sep {
    height: 1px;
    background: rgba(0,0,0,0.08);
    margin: 0 14px;
}

.idsel-title {
    font-size: 14px;
    font-weight: 600;
    color: rgba(0,0,0,0.82);
}

.idsel-empty {
    padding: 14px;
    color: rgba(0,0,0,0.5);
    font-size: 13px;
}

.idsel-check {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(0,0,0,0.55);
}

.idsel-text {
    font-size: 14px;
    color: rgba(0,0,0,0.78);
}

.adddev-wrap {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.adddev-title {
    font-size: 14px;
    font-weight: 600;
    color: rgba(0,0,0,0.82);
}

.adddev-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}
/* گرد کردن پنل Radzen dialog (اگر لازم شد) */
.rz-dialog, .rz-dialog-content, .rz-sidebar {
    border-radius: 20px !important;
    overflow: hidden !important;
}
/* ===== فقط برای همین SideDialog ===== */
/* دسکتاپ/تبلت: هم‌عرض اپ با فاصله */
.vs-select-side.rz-dialog-side {
    position: fixed !important;
    top: 0 !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: min(600px, calc(100% - 22px)) !important;
    max-width: min(600px, calc(100% - 22px)) !important;
    max-height: 75vh !important;
    height: auto !important;
    overflow: hidden !important;
    border-radius: 0 0 25px 25px !important;
}
/* موبایل: تمام عرض (فاصله صفر) */
@media (max-width: 480px) {
    .vs-select-side.rz-dialog-side {
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 0 0 18px 18px !important; /* اگر خواستی گردی کمتر */
    }
}

.vs-select-side .rz-dialog-side-content {
    overflow: hidden !important;
    padding: 0 !important;
}
/* خود رادزن داخلش اسکرول می‌سازه؛ ما می‌بندیمش */
.vs-select-side .rz-dialog-side-content {
    overflow: hidden !important; /* ✅ اسکرول از رادزن گرفته میشه */
    padding: 0 !important;
}
/* محتوای ما کل ارتفاع قابل استفاده رو بگیره */
.vs-select-side .idsel-wrap {
    height: 100%;
    max-height: none !important;
    display: flex;
    flex-direction: column;
}
/* هدر ثابت است (اسکرول ندارد) */
.vs-select-side .idsel-header {
    flex: 0 0 auto;
    padding: 14px 14px 10px 14px;
    background: rgba(255,255,255,0.92);
}
/* فقط لیست اسکرول شود */
.vs-select-side .idsel-scroll {
    flex: 1 1 auto;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 0 8px 0;
}
/* خطوط و ردیف‌ها (مینیمال) */
.vs-select-side .idsel-divider {
    height: 1px;
    background: rgba(0,0,0,0.08);
}

.vs-select-side .idsel-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
}

.vs-select-side .idsel-row-sep {
    height: 1px;
    background: rgba(0,0,0,0.08);
    margin: 0 14px;
}

.vs-select-side .idsel-title {
    font-size: 14px;
    font-weight: 600;
    color: rgba(0,0,0,0.82);
}

.adddev-error {
    color: #b42318;
    font-size: 12px;
}
/* constrain SideDialog width to app width (WITHOUT breaking Radzen animation) */
.vs-side-dialog.rz-dialog-side {
    position: fixed !important;
    /* ✅ به Radzen دست نزن: transform نده */
    left: 0 !important;
    right: 0 !important;
    /* ✅ وسط‌چین با margin auto */
    margin-left: auto !important;
    margin-right: auto !important;
    width: min(560px, calc(100% - 22px)) !important;
    max-width: min(560px, calc(100% - 22px)) !important;
    border-radius: 22px !important;
    overflow: hidden !important;
}
/* عنوان و محتوا هم داخل همین عرض بمانند */
.vs-side-dialog .rz-dialog-side-titlebar,
.vs-side-dialog .rz-dialog-side-content {
    width: 100% !important;
}
/* --- make AddDeviceDialog always on top of SideDialog --- */
.vs-add-dialog.rz-dialog {
    z-index: 3000 !important;
}
/* خود SideDialog پایین‌تر */
.vs-side-dialog.rz-dialog-side {
    z-index: 2000 !important;
}

.vs-add-dialog.rz-dialog {
    z-index: 3000 !important;
}
/* Bottom sheet container (keep Radzen animation) */
.vs-bottom-sheet.rz-dialog-side {
    position: fixed !important;
    left: 0 !important;
    right: 12px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: min(560px, 100%) !important;
    max-width: min(560px, 100%) !important;
    height: 75vh;
    max-height: 85vh !important;
    min-height: fit-content !important;
    border-radius: 22px 22px 0 0 !important;
    overflow: hidden !important;
}
/* موبایل: تمام عرض */
@media (max-width: 480px) {
    .vs-bottom-sheet.rz-dialog-side {
        width: 100% !important;
        max-width: 100% !important;
        right: 0 !important;
        border-radius: 18px 18px 0 0 !important;
    }
}
/* اسکرول/پدینگ رادزن را کنترل کن */
.vs-bottom-sheet .rz-dialog-side-content {
    padding: 0 !important;
    /*height: 100% !important;*/
    overflow: hidden !important;
}

.vs-select-device-dialog.rz-dialog {
    overflow: hidden !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,0.86) !important;
    box-shadow: 0 24px 80px rgba(0,31,43,0.24) !important;
}

.vs-select-device-dialog .rz-dialog-titlebar {
    display: none !important;
}

/* device-selector bottom sheet (mobile): hide default Radzen side titlebar,
   the component renders its own header */
.vs-select-device-sheet .rz-dialog-side-titlebar {
    display: none !important;
}

.vs-select-device-dialog .rz-dialog-content {
    height: 100% !important;
    max-height: 78vh !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/*.vs-bottom-sheet .rz-dialog-side-titlebar {
    display: none !important;
}*/

.sd-wrap {
    /* ✅ ارتفاع دقیقا هم‌اندازه‌ی بدنه دیالوگ (78vh) - تا در مانیتورهای کوتاه (720/1366)
       کارت‌های پایین لیست زیر دیالوگ بریده نشوند و اسکرول لیست درست کار کند */
    height: min(78vh, 820px);
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(245,250,252,0.86));
    border-radius: 18px;
    overflow: hidden;
}

.sd-handle {
    width: 42px;
    height: 5px;
    border-radius: 999px;
    background: rgba(0,74,97,0.18);
    margin: 10px auto 2px auto;
}

.sd-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 24px 14px 24px;
}

.sd-title {
    font-size: 18px;
    font-weight: 900;
    color: #0f2f39;
    line-height: 1.5;
}

.sd-subtitle {
    margin-top: 2px;
    font-size: 12px;
    font-weight: 700;
    color: rgba(15,47,57,0.5);
}

.sd-icon-btn,
.sd-add-btn,
.sd-search-btn {
    border-radius: 8px !important;
}

.sd-header-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.sd-add-btn {
    min-width: 132px !important;
    background: #004A61 !important;
    box-shadow: 0 8px 22px rgba(0,74,97,0.18);
}

.sd-divider {
    height: 1px;
    background: rgba(0,74,97,0.08);
    margin: 0 24px 14px 24px;
}

.sd-scroll {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
    gap: 10px;
    padding: 2px 24px 24px 24px;
}

.sd-row {
    width: 100%;
    min-height: 92px;
    border: 1px solid rgba(0,74,97,0.12);
    background: rgba(255,255,255,0.82);
    border-radius: 12px;
    padding: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    cursor: pointer;
    text-align: right;
    box-shadow: 0 8px 24px rgba(0,0,0,0.045);
    transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.sd-row:hover {
    transform: translateY(-2px);
    border-color: rgba(1,168,220,0.58);
    box-shadow: 0 12px 28px rgba(0,74,97,0.10);
}

.sd-row-text {
    min-width: 0;
    font-size: 14px;
    color: rgba(0,0,0,0.78);
}

.sd-row-icon {
    color: #01a8dc;
    font-size: 22px;
}

.sd-row-meta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.sd-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 62px;
    height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
}

.sd-pill-online {
    color: #047857;
    background: rgba(16,185,129,0.12);
}

.sd-pill-offline {
    color: #b42318;
    background: rgba(239,68,68,0.11);
}

.sd-row-sep {
    display: none;
}

.sd-column-sep {
    width: 2px;
    background: #fff;
    margin: 0px;
}
/* Add mode */
.sd-add {
    width: min(520px, calc(100% - 48px));
    margin: 8px auto 24px auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1 1 auto;
    background: rgba(255,255,255,0.84);
    border: 1px solid rgba(0,74,97,0.12);
    border-radius: 14px;
    box-shadow: 0 16px 36px rgba(0,74,97,0.08);
}

.sd-add-title {
    font-size: 18px;
    font-weight: 900;
    color: #0f2f39;
}

.sd-add-note {
    margin: -4px 0 8px 0;
    font-size: 12px;
    font-weight: 700;
    color: rgba(15,47,57,0.52);
}

.sd-add-input {
    height: 46px;
}

.sd-actions {
    display: flex;
    justify-content: stretch;
    gap: 10px;
    margin-top: 10px;
}

.sd-actions .rz-button {
    flex: 1;
    min-height: 44px;
}

.sd-msg {
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 13px;
}

.sd-msg-err {
    background: rgba(220, 38, 38, 0.08);
    color: rgba(127, 29, 29, 0.92);
}

.sd-msg-ok {
    background: rgba(16, 185, 129, 0.10);
    color: rgba(6, 95, 70, 0.92);
}

/* سرچ داخل پاپ‌آپ انتخاب دستگاه */
.sd-search {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 24px 16px 24px;
}


.sd-search-input .rz-inputtext,
.sd-search-input {
    height: 46px !important;
    border-radius: 10px !important;
}

.sd-search-btn {
    min-width: 52px !important;
    height: 46px !important;
    background: #01a8dc !important;
}

/* دات وضعیت دستگاه (سبز آنلاین / قرمز آفلاین) */
.sd-status-dot {
    width: 10px;
    height: 10px;
    min-width: 10px;
    border-radius: 999px;
    margin-left: 10px;
    flex-shrink: 0;
}

.sd-dot-online {
    background: #22c55e;
    box-shadow: 0 0 6px rgba(34, 197, 94, 0.8);
    animation: vsDotPulse 2s infinite;
}

.sd-dot-offline {
    background: #ef4444;
    box-shadow: 0 0 5px rgba(239, 68, 68, 0.6);
}

@keyframes vsDotPulse {
    0% { opacity: 1; }
    50% { opacity: 0.45; }
    100% { opacity: 1; }
}

.sd-loading-row {
    grid-column: 1 / -1;
    padding: 10px 14px;
}

.sd-row-text b {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 15px;
    font-weight: 900;
    color: #1c2f35;
}

.sd-row-text small {
    display: block;
    margin-top: 4px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    color: rgba(0,0,0,0.48);
    direction: ltr;
}

@media (max-width: 768px) {
    .sd-wrap {
        /* mobile bottom-sheet: match sheet height so list bottom is not clipped */
        height: 75vh;
        min-height: 0;
        border-radius: 18px 18px 0 0;
    }

    .sd-header {
        padding: 14px 16px 10px 16px;
    }

    .sd-title {
        font-size: 15px;
    }

    .sd-add-btn {
        min-width: 44px !important;
    }

    .sd-add-btn .rz-button-text {
        display: none;
    }

    .sd-divider {
        margin: 0 16px 12px 16px;
    }

    .sd-search {
        padding: 0 16px 12px 16px;
    }

    .sd-scroll {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 2px 16px 18px 16px;
    }

    .sd-row {
        min-height: 76px;
        border-radius: 10px;
        padding: 12px;
    }

    .sd-add {
        width: calc(100% - 32px);
        margin: 4px auto 16px auto;
        padding: 16px;
        box-shadow: none;
    }
}

/* دکمه آبی انتخاب/افزودن دستگاه در هدر */
.device-select-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 0;
    cursor: pointer;
    padding: 7px 14px;
    border-radius: 999px;
    background: linear-gradient(180deg, #0a7d9b, #004A61);
    color: #fff;
    box-shadow: 0 6px 16px rgba(0,0,0,0.10);
    font-family: IRANYekan, sans-serif;
    transition: transform .15s ease, box-shadow .15s ease;
}

.device-select-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(0,74,97,0.35);
}

.device-select-btn .device-select-name {
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* آیدی دستگاه داخل دکمه — بکگراند متفاوت که معلوم باشد */
.device-select-btn .device-select-id {
    font-size: 11px;
    font-weight: 700;
    direction: ltr;
    background: rgba(255,255,255,0.25);
    border: 1px solid rgba(255,255,255,0.35);
    color: #eafcff;
    padding: 2px 9px;
    border-radius: 999px;
    letter-spacing: .5px;
    white-space: nowrap;
}

.device-select-btn .device-select-add-img {
    width: 16px;
    height: 16px;
}


/* اسکرول افقی چارت لاگ + ارتفاع کل صفحه */
.log-chart-wrap {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch; /* اسکرول نرم روی موبایل */
    overscroll-behavior-x: contain;    /* اسکرول افقی چارت به کل صفحه نشت نکند */
    border-radius: 14px;
}

/* نوار وضعیت دستگاه در مانیتور */
.mp-statusbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 8px 14px;
    margin: 0 6px 6px 6px;
    border-radius: 14px;
    background: rgba(255,255,255,0.75);
    border: 1px solid rgba(0,0,0,0.06);
}

.mp-statusbar b {
    color: #004A61;
    font-size: 14px;
}

.mp-status-id {
    color: rgba(0,0,0,0.4);
    font-size: 11px;
    direction: ltr;
}

.mp-status-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 999px;
}

.mp-badge-online {
    background: rgba(34, 197, 94, 0.15);
    color: #15803d;
}

.mp-badge-offline {
    background: rgba(239, 68, 68, 0.12);
    color: #b91c1c;
}

.mp-status-last {
    margin-inline-start: auto;
    font-size: 11px;
    color: rgba(0,0,0,0.45);
}

.mp-update-note {
    text-align: center;
    font-size: 11.5px;
    color: rgba(0,0,0,0.45);
    padding: 4px 0 0 0;
}

.mp-applying {
    color: #b45309;
    font-weight: 700;
}



/*.rz-dialog-side.rz-dialog-side-position-bottom.vs-bottom-sheet.rz-open {
    direction: rtl;
}*/

.rz-dialog-side-titlebar {
    background-color: transparent !important;
}
/* From Uiverse.io by alexruix */
.loader {
    width: 48px;
    height: 48px;
    margin: auto;
    position: relative;
}

    .loader:before {
        content: '';
        width: 48px;
        height: 5px;
        background: #00b0ff50;
        position: absolute;
        top: 60px;
        left: 0;
        border-radius: 50%;
        animation: shadow324 0.5s linear infinite;
    }

    .loader:after {
        content: '';
        width: 100%;
        height: 100%;
        background: #00a9d7;
        position: absolute;
        top: 0;
        left: 0;
        border-radius: 4px;
        animation: jump7456 0.5s linear infinite;
    }

@keyframes jump7456 {
    15% {
        border-bottom-right-radius: 3px;
    }

    25% {
        transform: translateY(9px) rotate(22.5deg);
    }

    50% {
        transform: translateY(18px) scale(1, .9) rotate(45deg);
        border-bottom-right-radius: 40px;
    }

    75% {
        transform: translateY(9px) rotate(67.5deg);
    }

    100% {
        transform: translateY(0) rotate(90deg);
    }
}

@keyframes shadow324 {

    0%, 100% {
        transform: scale(1, 1);
    }

    50% {
        transform: scale(1.2, 1);
    }
}

.loading-overlay {
    position: fixed !important;
    inset: 0;
    z-index: 2147483647 !important;
    display: grid;
    place-items: center;
    /* روی همه چیز + جلوگیری از کلیک */
    pointer-events: all !important;
    /* بلور محیط اطراف */
    backdrop-filter: blur(100px) !important;
    -webkit-backdrop-filter: blur(100px) !important;
    /* یه تیرگی خیلی ملایم برای خوانایی */
    background: rgba(0,0,0,0.12);
    overflow: hidden !important;
}

.loading-box {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.loading-text {
    margin-top: 30px !important; /* چسبیده زیر انیمیشن */
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-size: 18px;
    letter-spacing: 0.2px;
    font-weight: 600;
    color: #111;
}
/* 1) Overlay واقعی روی کل صفحه */
.loading-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 2147483647 !important;
    display: grid;
    place-items: center;
    /* مهم: کل لایه کلیک‌ها رو می‌بلعه */
    pointer-events: auto !important;
    touch-action: none !important;
    /* شیشه‌ای شفاف */
    background: rgba(255,255,255,0.06) !important;
    backdrop-filter: blur(10px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(140%) !important;
}
/* لودر+متن بدون کارت */
.loading-box {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    background: transparent !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    font-size: 16px !important; /* برای لودرهای em-based */
}

.loading-text {
    font-size: 14px !important;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
    color: rgba(0,0,0,0.75) !important;
}
/* 2) ضدِ باگ: اگر fixed به خاطر transform والدها محدود شد، transform رو خنثی کن */
.app-shell, .app-center, .app-viewport,
.rz-layout, .rz-body, .rz-header {
    transform: none !important;
    filter: none !important;
}

.pre-page-maker {
    height: 100%;
    min-height: max-content;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}


:root {
    --header-h: 64px; /* ارتفاع هدر اصلی */
    --hero-h: 140px; /* ارتفاع هدر بزرگ (تست) */
}
/* هدر همیشه بالا */
.app-header {
    position: sticky;
    top: 0;
    z-index: 10000;
    height: var(--header-h);
    display: flex;
    align-items: center;
    /* شیشه‌ای خفن */
    background: rgba(255,255,255,0.60);
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    border-bottom: 1px solid rgba(0,0,0,0.06);
}
/* محتوا زیر هدر قرار بگیره */
.app-content {
    padding-bottom: 30px; /* برای bottom nav مثل قبل */
}
/* هدر بزرگ (Hero) که فقط بالای صفحه دیده میشه */
.header-hero {
    position: fixed;
    top: var(--header-h); /* زیر هدر اصلی */
    left: 0;
    right: 0;
    height: var(--hero-h);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, rgba(120,180,255,0.20), rgba(255,255,255,0.00));
    pointer-events: none; /* کلیک‌ها بره برای محتوا */
    transition: opacity .25s ease, transform .25s ease;
}
/* وقتی اسکرول کردی، هدر بزرگ محو/بالا جمع میشه */
body.is-scrolled .header-hero {
    opacity: 0;
    transform: translateY(-12px);
}

.app-header .header-center {
    font-weight: 700;
    letter-spacing: .2px;
    color: rgba(0,0,0,.78);
}

.app-header .icon-btn {
    border-radius: 12px;
}

.app-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 10000 !important;
    background: rgba(255,255,255,0.60);
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    border-bottom: 1px solid rgba(0,0,0,0.06);
}
/* ===== PresentData Card (match design) ===== */

.pd-card {
    background: var(--pd-bg);
    color: #fff;
    border-radius: 22px;
    box-shadow: 0 0px 15px rgba(0,0,0,.2);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* کارت کش نیاد */
    width: 100%;
    max-width: 100%;
    min-width: 0;
    /* انیمیشن تغییر سایز */
    transition: transform 220ms ease, padding 220ms ease, border-radius 220ms ease, box-shadow 220ms ease;
}
/* --- Large / Small sizing (do not stretch, controlled by grid cell) --- */
.pd--lg {
    padding: 10px;
}

.pd--sm {
    padding: 8px 0px 5px 0px;
    height: 120px !important;
    border-radius: 15px;
    box-shadow: 0 8px 18px rgba(0,0,0,.12);
}
/* title: top center, clamp lines */
.pd-title {
    font-weight: 800;
    line-height: 1.2;
    opacity: .96;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}

.pd--lg .pd-title {
    font-size: 18px;
    -webkit-line-clamp: 4;
    min-height: 40px;
    max-height: 40px;
}

.pd--sm .pd-title {
    font-size: 11.5px;
    text-align: center;
    -webkit-line-clamp: 2;
    min-height: 40px;
    max-height: 40px;
}
/* bottom row like design: value left, unit right */
.pd-bottom {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    margin-top: 6px;
}
/* value: LTR, big, bottom-left */
.pd-value {
    direction: ltr;
    text-align: left;
    font-variant-numeric: tabular-nums;
    letter-spacing: .2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1;
    font-weight: 900;
    flex: 1 1 auto;
    min-width: 0;
    margin: 10px 0px 0px 0px;
}

.pd--lg .pd-value {
    font-size: 30px;
}

.pd--sm .pd-value {
    font-size: 16px;
    text-align: center;
}
/* unit: bottom-right, LTR */
.pd-unit {
    direction: ltr;
    text-align: right;
    opacity: .95;
    font-weight: 800;
    white-space: nowrap;
    flex: 0 0 auto;
}

.pd--lg .pd-unit {
    font-size: 25px;
}

.pd--sm .pd-unit {
    font-size: 12px;
    text-align: center;
}
/* ===== MonitorPage Layout (match two screenshots) ===== */

.mp-wrap {
    padding: 16px 14px 24px;
    min-height: max-content !important;
    /* بک‌گراند مثل عکس‌ها (ملایم) */
}
/* top area (title + switch + legend) */
.mp-topbar {
    border-radius: 22px;
    padding: 14px 14px 10px;
    backdrop-filter: blur(10px);
}
/* row: title right, switch left */
.mp-topbar-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin: 0px auto 15px auto;
    width: 100%;
}

@media (min-width: 678px) {

    .mp-topbar-row {
        width: 80%;
    }
}


.mp-title {
    font-size: 22px;
    font-weight: 900;
    color: #111827;
}

.mp-sizeToggle {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mp-txt {
    font-size: 14px;
    font-weight: 800;
    color: #111827;
}
/* legend centered like design */
.mp-legend {
    display: flex;
    justify-content: center;
    padding-top: 10px;
}

.mp-leg-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
    color: #111827;
}

.mp-dot {
    width: 18px;
    height: 18px;
    border-radius: 6px;
    display: inline-block;
}

.mp-dot--fridge {
    background: #9AD6B2;
}

.mp-dot--freezer {
    background: #97D7D8;
}
/* ===== Grid ===== */
.mp-grid {
    margin-top: 16px;
    display: grid;
    /* دقیقاً مثل عکس: وسط چین */
    justify-content: center;
    justify-items: center;
    gap: 18px;
    width: 100%;
}
/* ---- Large mode: 2 columns (always), big cards ---- */
.mp-grid--lg {
    /* کارت‌ها در هر ستون اندازه‌ی خودشون رو دارند، نه کش */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* سقف پهنای نمای دید مثل عکس */
    max-width: 520px;
    margin: 0 auto;
}
/* ---- Small mode: 4 columns (always), small cards ---- */
.mp-grid--sm {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    max-width: 520px; /* روی موبایل دقیقاً مثل عکس */
    margin: 0 auto;
}
/* ===== Card size control via grid cell ===== */
/* Large cards */
.mp-grid--lg > .pd-card {
    /* ثابت و شبیه عکس: تقریبا مربع گرد */
    width: clamp(160px, 40vw, 220px);
    height: clamp(140px, 34vw, 185px);
}
/* Small cards */
.mp-grid--sm > .pd-card {
    width: clamp(78px, 20vw, 110px);
    height: clamp(78px, 18vw, 105px);
}
/* Desktop: اجازه بده max-width بزرگ‌تر شود اما همچنان دیزاین حفظ شود */
@media (min-width: 900px) {
    .mp-grid--lg {
        max-width: 980px;
    }

    .mp-grid--sm {
        max-width: 980px;
    }
    /* بزرگ‌تر اما کنترل شده */
    .mp-grid--lg > .pd-card {
        width: clamp(190px, 18vw, 250px);
        height: clamp(160px, 16vw, 200px);
    }

    .mp-grid--sm > .pd-card {
        width: clamp(110px, 9vw, 135px);
        height: clamp(100px, 8vw, 125px);
    }
    /*
        کارت ماینتورینگ  در PC
    */



    .pd--lg .pd-title {
        font-size: 25px;
        -webkit-line-clamp: 4;
        min-height: 80px;
        max-height: 80px;
    }

    .pd--sm .pd-title {
        font-size: 18px;
        text-align: center;
        -webkit-line-clamp: 2;
        min-height: 40px;
        max-height: 40px;
    }

    .pd--lg .pd-value {
        font-size: 40px;
    }

    .pd--sm .pd-value {
        font-size: 26px;
        text-align: center;
    }


    .pd--lg .pd-unit {
        font-size: 35px;
    }

    .pd--sm .pd-unit {
        font-size: 18px;
        text-align: center;
    }
}
/* خیلی باریک‌ها: اگر 4 ستون واقعاً جا نشد، کارت کوچک‌تر شود (ولی ستون‌ها همان 4 تا بمانند) */
@media (max-width: 360px) {
    .mp-grid--sm > .pd-card {
        width: 74px;
        height: 92px;
    }
}
/* --- Smooth resize via transform --- */
.pd-card {
    transition: transform 260ms cubic-bezier(.2,.9,.2,1), opacity 180ms ease, box-shadow 260ms cubic-bezier(.2,.9,.2,1);
    transform-origin: center;
}
/* وقتی Small میشه کمی جمع شود */
.pd--sm {
    transform: scale(.92);
    opacity: .98;
}
/* وقتی Large است */
.pd--lg {
    transform: scale(1);
    opacity: 1;
}
/* کاهش motion برای دسترسی‌پذیری */
@media (prefers-reduced-motion: reduce) {
    .pd-card {
        transition: none;
    }
}
/* فقط داخل همین باکس اعمال میشه */
.mp-sizeToggle .mp-glassToggle.rz-button {
    /* شیشه‌ای */
    background: rgba(255, 255, 255, 0.14) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    /* بلور شدید */
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
    /* کمی برجستگی شیشه‌ای */
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    border-radius: 12px !important;
}
    /* آیکون‌ها سفید و خوانا */
    .mp-sizeToggle .mp-glassToggle.rz-button,
    .mp-sizeToggle .mp-glassToggle.rz-button .rzi {
    }
        /* اگر Radzen آیکون را داخل i.rzi می‌گذارد، کمی برجسته‌ترش کن */
        .mp-sizeToggle .mp-glassToggle.rz-button .rzi {
        }
        /* hover/focus برای صفحه روشن */
        .mp-sizeToggle .mp-glassToggle.rz-button:hover {
            background: rgba(255, 255, 255, 0.18) !important;
            box-shadow: 0 2px 20px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
        }

        .mp-sizeToggle .mp-glassToggle.rz-button:focus-visible {
            outline: 2px solid rgba(255,255,255,0.65);
            box-shadow: 0 2px 20px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.25);
            outline-offset: 2px;
        }

/* ===== Desktop Grid Layout ===== */
@media (min-width: 768px) {

    /* Large mode → 4 ستون */
    .mp-grid--lg {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        max-width: 1200px;
        gap: 20px;
    }

    /* Small mode → 8 ستون */
    .mp-grid--sm {
        grid-template-columns: repeat(8, minmax(0, 1fr));
        max-width: 1400px;
        gap: 14px;
    }
}

@media (min-width: 768px) {

    .mp-grid--lg > .pd-card {
        width: 100%;
        height: 200px;
        max-width: 240px;
    }

    .mp-grid--sm > .pd-card {
        width: 100%;
        height: 120px;
        max-width: 140px;
    }
}


.glass-menu {
    width: 220px; /* اگر خواستی بزرگ/کوچک کن */
    padding: 10px;
    border-radius: 12px; /* گوشه‌ها گرد */
    background: rgba(255,255,255,0.60); /* شیشه‌ای */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.20);
    box-shadow: 0 8px 22px rgba(0,0,0,0.18);
}

.menu-row {
    width: 100%;
    display: flex;
    direction: rtl;
    align-items: center;
    justify-content: space-between; /* متن راست، تیک چپ */
    gap: 12px;
    padding: 10px 12px;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: right;
    cursor: pointer;
    user-select: none;
}
    /* هیچ hover/focus/active افکتی نداشته باشه */
    .menu-row:hover,
    .menu-row:active,
    .menu-row:focus,
    .menu-row:focus-visible {
        outline: none !important;
        box-shadow: none !important;
        background: transparent !important;
    }
/* فضای ثابت برای تیک سمت چپ */
.tick-slot {
    width: 22px; /* عرض ثابت تا ردیف‌ها نلرزند */
    min-width: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tick-icon {
    font-size: 20px;
    line-height: 1;
}
/* اگر خواستی متن کمی بولد/سایز */
.row-text {
    font-size: 14px;
    font-weight: 600;
}


.my-popup.rz-popup.rz-open {
    direction: ltr ;
    background-color: transparent !important;
}

.my-popup.rz-popup.rz-close {
    background-color: transparent !important;
    direction: ltr ;
}


.scroll-top-fab {
    position: fixed;
    left: 20px;
    bottom: 80px; /* که روی bottom nav نیفته */
    z-index: 647;
    width: 52px;
    height: 52px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.25);
    background: #00c8ffa1;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 10px 26px rgba(0,0,0,0.18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    /* hidden by default */
    opacity: 0;
    transform: translateY(14px) scale(0.95);
    pointer-events: none;
    transition: opacity 160ms ease, transform 160ms ease;
    margin-bottom: 20px;
}

    .scroll-top-fab.is-visible {
        opacity: 1;
        transform: translateY(0) scale(1);
        pointer-events: auto;
    }

.fab-icon {
    font-size: 25px;
    font-weight: bolder;
    color: white;
    line-height: 1;
}

.scroll-top-fab {
    opacity: 0;
    transform: translateY(14px) scale(0.95);
    pointer-events: none;
    transition: opacity 160ms ease, transform 160ms ease;
}

    .scroll-top-fab.is-visible {
        opacity: 1;
        transform: translateY(0) scale(1);
        pointer-events: auto;
    }
/* موبایل/پیش‌فرض */
.scroll-top-fab {
    position: fixed;
    left: 16px;
    bottom: 80px;
    z-index: 647;
}
/* دسکتاپ: دکمه داخل قاب 560px */
/*@media (min-width: 992px) {
    .scroll-top-fab {
        left: calc(50vw - 280px + 16px) !important;*/ /* داخل app-viewport */
/*}
}*/

.rz-resize {
    border: none !important;
}

.rz-dialog-resize-bar {
    height: 40px !important;
    background-color: transparent !important;
    width: 90% !important;
}
/* ====== DataGrid Pill Style ====== */
.grid-pill {
    --pill-radius: 12px;
    --header-bg: #A185EA;
    --header-fg: #4E6182;
    width: 100%;
    --row-bg: #FFFFFF;
    border: 0px;
    --row-border: #E6EAF2;
    --row-gap: 10px; /* فاصله عمودی بین ردیف‌ها */
}
    /* حذف کادر/بوردر دور خود گرید */
    .grid-pill .rz-data-grid,
    .grid-pill .rz-datatable {
        border: 0px !important;
        box-shadow: none !important;
        background: transparent !important;
    }
    /* جدول داخلی: فاصله بین ردیف‌ها برای کارت شدن */
    .grid-pill .rz-data-grid-table,
    .grid-pill .rz-datatable-table,
    .grid-pill table {
        border-collapse: separate !important;
        border-spacing: 0 var(--row-gap) !important;
        /* ✅ گرید همیشه تمام‌عرض — عرض جدول نباید به جمع پیکسلی ستون‌ها محدود شود
           (Radzen روی جدول table-layout:fixed می‌گذارد؛ با !important فضای خالیِ اضافه
           بین ستون‌ها پخش می‌شود و گرید کل عرض صفحه را می‌گیرد —
           در موبایل هم وقتی جمع ستون‌ها از عرض صفحه بیشتر باشد،
           اسکرول افقی fix-grid مثل قبل کار می‌کند) */
        width: 100% !important;
        min-width: 100% !important;
        border: 0px;
    }
    /* --- Header --- */
    .grid-pill thead tr {
        border: 0px !important;
        filter: drop-shadow(0 2px 6px rgba(0,0,0,.08)); /* سایه‌ی نرم هدر */
    }

        .grid-pill thead tr th {
            background: var(--header-bg) !important;
            color: var(--header-fg) !important;
            font-weight: 500 !important;
            font-size: 12px;
            border: 0px !important;
            text-align: center !important;
            padding: 0px 0px !important;
        }
            /* گردی دو سر هدر (RTL) */
            .grid-pill thead tr th:first-child {
                border-top-right-radius: var(--pill-radius);
                border-bottom-right-radius: var(--pill-radius);
                border: none !important;
            }

            .grid-pill thead tr th:last-child {
                border-top-left-radius: var(--pill-radius);
                border-bottom-left-radius: var(--pill-radius);
                border: none !important;
            }
    /* --- Rows --- */
    /* سایه برای هر ردیف؛ با drop-shadow کل ردیف کارت می‌شود */
    .grid-pill tbody tr {
        filter: drop-shadow(0 2px 6px rgba(0,0,0,.06));
        border: 0px;
    }

        .grid-pill tbody tr td {
            background: var(--row-bg) !important;
            border: 1px solid var(--row-border) !important;
            padding: 5px 5px !important;
            min-height: 20px;
        }
            /* گردی دو سر ردیف (RTL) */
            .grid-pill tbody tr td:first-child {
                border-top-right-radius: var(--pill-radius);
                border-bottom-right-radius: var(--pill-radius);
            }

            .grid-pill tbody tr td:last-child {
                border-top-left-radius: var(--pill-radius);
                border-bottom-left-radius: var(--pill-radius);
            }
        /* هاور هر ردیف */
        .grid-pill tbody tr:hover td {
            background: #F6FAFF !important;
            border-color: #DCE6F7 !important;
        }
/* ===============================
   Responsive header title (Radzen)
   Applies only inside .grid-pill
   =============================== */
/* متغیرهای محلی (عوض‌شدنی) */
.grid-pill {
    --fs-grid-header: clamp(10px, 0.9vw, 14px); /* فونت هدر (min, preferred, max) */
    --fs-grid-header-sm: clamp(10px, 1.0vw, 12px); /* برای نمایشگرهای کوچکتر */
    --grid-header-line-clamp: 2; /* چند خط هدر نمایش داده شود (2 یا 1) */
}
    /* پایه: هدف قرار دادن خودِ span های رادزن */
    .grid-pill .rz-column-title {
        display: flex; /* کمک می‌کند تراز وسطی و wrap بهتر شود */
        align-items: center;
        justify-content: center;
        padding: 8px 12px !important; /* مقادیر دلخواه؛ از !important برای override Radzen */
        box-sizing: border-box;
    }
        /* محتوای عنوان: اندازه متن ریسپانسیو و امکان دو خط */
        .grid-pill .rz-column-title .rz-column-title-content {
            font-size: var(--fs-grid-header) !important;
            font-weight: 500 !important;
            line-height: 1.1 !important;
            color: inherit !important;
            /* اجازهٔ چند خطِ کنترل‌شده + ellipsis بعد از n خط */
            display: -webkit-box !important;
            -webkit-line-clamp: var(--grid-header-line-clamp);
            -webkit-box-orient: vertical;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
            white-space: normal !important; /* مهم: اجازهٔ wrap بده */
            word-break: break-word !important;
            text-align: center !important;
        }
        /* اگر می‌خواهی عناوین دقیقاً یک خط بمانند (اختیاری: برای ستون‌های خاص) */
        /* فقط به th مربوطه کلاس HeaderClass="nowrap-header" بده */
        .grid-pill .rz-column-title.nowrap,
        .grid-pill .rz-column-title.nowrap .rz-column-title-content {
            white-space: nowrap !important;
            -webkit-line-clamp: 1 !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
        }
/* کوچک کردن فونت برای صفحات کوچکتر (اختیاری و ایمن) */
@media (max-width: 1100px) {
    .grid-pill .rz-column-title .rz-column-title-content {
        font-size: var(--fs-grid-header-sm) !important;
    }
}
/* اگر می‌خواهی در breakpoint پایین‌تر حتی فشرده‌تر باشه */
@media (max-width: 900px) {
    .grid-pill {
        --grid-header-line-clamp: 2;
    }
        /* دو خط بماند */
        .grid-pill .rz-column-title .rz-column-title-content {
            font-size: clamp(11px, 1.0vw, 14px) !important;
        }
}
/* کمک: اگر Radzen داخل th wrapper اضافه کرد، این سلکتورها رو هم پوشش میدیم */
.grid-pill th .rz-column-title,
.grid-pill th .rz-column-title .rz-column-title-content {
    vertical-align: middle;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* grid-pill — تیتر ستون‌ها (از کد خودت استفاده شده و با !important تقویت شده) */
.grid-pill .rz-column-title {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 12px !important;
    box-sizing: border-box !important;
}

    .grid-pill .rz-column-title .rz-column-title-content {
        font-size: var(--fs-grid-header) !important;
        font-weight: 500 !important;
        line-height: 1.1 !important;
        color: inherit !important;
        display: -webkit-box !important;
        -webkit-line-clamp: var(--grid-header-line-clamp) !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: normal !important;
        word-break: break-word !important;
        text-align: center !important;
    }

    .grid-pill .rz-column-title.nowrap,
    .grid-pill .rz-column-title.nowrap .rz-column-title-content {
        white-space: nowrap !important;
        -webkit-line-clamp: 1 !important;
    }
/* کل Grid پرکننده */
.fix-grid {
    display: flex !important;
    flex-direction: column !important;
    height: 95% !important;
    min-height: 0 !important;
    padding: 0px 10px 0 0;
    overflow-x: scroll;
    overflow-y: scroll;
    margin: 0px 0px 20px 0px;
}
    /* بدنه (سطرها) */
    .fix-grid .rz-datagrid-scrollable-body {
        flex: 1 !important;
        min-height: 0 !important;
        overflow-y: auto !important;
    }
    /* Pager پایین */
    .fix-grid .rz-paginator {
        flex-shrink: 0 !important;
    }
/* ریسپانسیو: بهتره نچرخونیم؛ فقط فونت و clamp تغییر کنه */
@media (max-width: 768px) {
    .invoice-grid {
        transform: none !important; /* غیرفعال کردن rotate قبلی */
    }

        .invoice-grid .rz-datagrid {
            font-size: clamp(8px, 2vw, 12px) !important;
        }

    .grid-pill .rz-column-title .rz-column-title-content {
        font-size: var(--fs-grid-header-sm) !important;
    }
}

.rz-column-title-content.rz-text-truncate {
    width: 100% !important;
    padding: 0 !important;
}


.rz-unselectable-text.rz-text-align-center {
    min-width: max-content !important;
}
/* اسکرول بار */
.rz-data-grid-data::-webkit-scrollbar {
    width: 3px !important;
    height: 3px !important;
    background: transparent;
    margin: 5px !important;
}
/* مسیر اسکرول */
.rz-data-grid-data::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.06) !important;
    backdrop-filter: blur(6px) !important;
    border-radius: 12px;
}
/* خودِ thumb (دکمه اسکرول) */
.rz-data-grid-data::-webkit-scrollbar-thumb {
    background: #2323236c !important; /* سفید شفاف */
    backdrop-filter: blur(12px) !important;
    border-radius: 12px !important;
    /*border: 1.5px solid rgb(0, 0, 0, 0.09) !important;*/
}
    /* هاور */
    .rz-data-grid-data::-webkit-scrollbar-thumb:hover {
        background: rgb(36, 0, 82, 0.38) !important;
    }


.rz-pager-pages {
    background-color: transparent !important;
}

.rz-pager-prev.rz-pager-element {
    background-color: white !important;
}

    .rz-pager-prev.rz-pager-element:hover {
        background-color: #a185ea7f !important;
    }

.rz-pager-next.rz-pager-element {
    background-color: white !important;
}

    .rz-pager-next.rz-pager-element:hover {
        background-color: #a185ea7f !important;
    }

.rz-pager-page.rz-pager-element.rz-state-active.rz-state-focused {
    background-color: #A185EA !important;
    color: white;
}

.rz-pager-page.rz-pager-element.rz-state-active {
    background-color: #A185EA !important;
    color: white;
}

.rz-pager.rz-unselectable-text.rz-helper-clearfix.rz-align-justify {
    background-color: transparent !important;
}

.rz-pager-page.rz-pager-element {
    background-color: white !important;
}

    .rz-pager-page.rz-pager-element:hover {
        background-color: #a185ea7f !important;
    }

.rz-pager-last.rz-pager-element {
    background-color: white !important;
}

    .rz-pager-last.rz-pager-element:hover {
        background-color: #a185ea7f !important;
    }

.rz-pager-first.rz-pager-element {
    background-color: white !important;
}

    .rz-pager-first.rz-pager-element:hover {
        background-color: #a185ea7f !important;
    }

.data-container {
    height: calc(90dvh - 8rem);
    overflow-y: auto;
}
/* کلاس عمومی برای RadzenFormField */
.my-formfield {
    font-size: 15px !important;
    background-color: #fff;
    border-radius: 15px;
    border-color: #6b7280;
    font-weight: 900;
    color: #004A61 !important; /* رنگ متن اصلی */
    width: 90%;
    align-self: center !important;
    box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.1);
    padding: 15px !important;
    margin: 0px 0px 0px 0px;
}
    /* استایل ورودی‌ها */
    .my-formfield .rz-inputtext {
        font-size: 20px;
        color: #333;
        border-color: #4361ee;
        border: 1px solid #ccc; /* رنگ پیش‌فرض بردر */
        border-radius: 20px; /* گردی گوشه‌ها */
        padding: 0.6rem 1rem;
        height: 50px !important;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
        background-color: #fff;
    }
        /* وقتی فوکوس میشه */
        .my-formfield .rz-inputtext:focus {
            border-color: #4a90e2; /* رنگ آبی بردر */
            border: 1px;
            outline: none; /* برداشتن outline پیش‌فرض */
            color: red;
        }
    /* لیبل بالای FormField */
    .my-formfield .rz-label {
        font-size: var(--fs-grid-header) !important;
        color: #555;
        margin-bottom: 4px;
    }

    .my-formfield.rz-focused .rz-label {
        color: #4361ee !important; /* هر رنگی که خواستی (اینجا آبی) */
    }


.rz-form-field-label.rz-text-truncate {
    color: #004A61 !important;
}


.rz-form-field.rz-variant-filled .rz-form-field-content:before,
.rz-form-field.rz-variant-text .rz-form-field-content:before {
    content: "";
    position: absolute;
    z-index: 1;
    bottom: 0;
    left: 0;
    right: 0;
    height: 5px; /* ضخامت */
    background: #64b5f6; /* آبی روشن */
    border-radius: 50px; /* گرد شدن دو گوشه */
    border: none !important; /* حذف border قبلی Radzen */
    transition: all 0.25s;
}

.notFound {
    margin: 0 auto;
    width: 100%;
    height: 100%;
}

.error-container {
    margin-top: 2rem !important;
    text-align: center; /* متن رو در وسط کانتینر قرار میده */
}

.Loginfield {
    align-items: center !important;
    align-content: center !important;
    align-self: center !important;
    background-color: white;
    width: 90%;
    max-width: 700px;
    height: 350px;
    border-radius: 20px !important;
    padding: 10px 10px !important;
    font-size: 30px;
    margin: 0 auto;
    box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.2);
    /* مهم‌ترین بخش برای انیمیشن در هنگام ریسایز صفحه */
    transition: width 2s ease, height 2s ease, max-width 2s ease, padding 2s ease, border-radius 2s ease, box-shadow 2s ease;
}


@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

@keyframes pulse {
    0% {
        opacity: 0.7;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0.7;
    }
}

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

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

@keyframes zoomOut {
    from {
        transform: scale(1);
    }

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

@keyframes zoomIn {
    from {
        transform: scale(0.8);
        opacity: 0;
    }

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

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }

    20% {
        transform: translateX(-6px);
    }

    40% {
        transform: translateX(6px);
    }

    60% {
        transform: translateX(-4px);
    }

    80% {
        transform: translateX(4px);
    }
}

@keyframes colorPulse {
    0% {
        background: #ff7675;
    }

    50% {
        background: #d63031;
    }

    100% {
        background: #ff7675;
    }
}

@keyframes textColor {
    0% {
        color: #000;
    }

    100% {
        color: #f00;
    }
}


@keyframes typing {
    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}
/*انیمیشن‌های تایپ‌کردن (fake typing)

کمی تریکه، ولی با width یا ch می‌سازیم.*/

@keyframes caret {
    0%, 100% {
        border-color: transparent;
    }

    50% {
        border-color: black;
    }
}

@keyframes slideFromTop {
    from {
        transform: translateY(-200px);
        opacity: 0;
    }

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

@keyframes slideFromBottom {
    from {
        transform: translateY(50px);
        opacity: 0;
    }

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

@keyframes slideFromRight {
    from {
        transform: translateX(200px);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideFromLeft {
    from {
        transform: translateX(-200px);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes moveAround {
    0% {
        transform: translate(0, 0);
    }

    25% {
        transform: translate(100px, 0);
    }

    50% {
        transform: translate(100px, 100px);
    }

    75% {
        transform: translate(0, 100px);
    }

    100% {
        transform: translate(0, 0);
    }
}

.pulse {
    animation: pulse 0.9s ease-in;
}

.fade {
    animation: fadeIn 0.9s ease-in;
}

.slideFromBottom {
    /*animation: fadeIn .3s ease-in;*/
    animation: slideFromBottom 0.4s ease-out forwards;
}

.slideFromBottom2 {
    animation: slideFromBottom 0.6s ease-out forwards;
}

.slideFromTop {
    animation: slideFromTop 0.3s ease-out forwards;
}

.slideFromLeft {
    animation: slideFromRight 0.4s ease-out forwards;
}

.slideFromLeft2 {
    animation: slideFromRight 0.5s ease-out forwards;
}

.slideFromRight {
    animation: slideFromRight 0.5s ease-out forwards;
}

.zoomIn {
    animation: zoomIn 0.9s ease-out forwards;
}

.typing {
    animation: typing 0.4s ease-out forwards;
}

.fadeIn {
    animation: fadeIn 0.3s ease-out forwards;
}
/* ردیف لوگو */
.header-top {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px 0;
}


.rz-navigation-item-text {
    color: black;
}

/* رنگ و ضخامت و فاصله‌ی خط رو اینجا تنظیم کن */
:root {
    --menu-accent: #01A8DC; /* رنگ خط و متن در حالت hover/active */
    --menu-underline-height: 3px;
    --menu-underline-offset: 4px; /* فاصله‌ی خط تا متن */
}

.rz-menu .rz-navigation-item-link {
    position: relative;
    padding-bottom: calc(var(--menu-underline-height) + var(--menu-underline-offset));
    transition: color .25s ease;
    color: #000; /* رنگ پیش‌فرض متن */
    text-decoration: none;
}

    /* خودِ خطِ انیمیشنی */
    .rz-menu .rz-navigation-item-link::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: 0;
        width: 100%;
        height: var(--menu-underline-height);
        background: var(--menu-accent);
        border-radius: 999px; /* گوشه‌های گرد */
        transform: translateX(-50%) scaleX(0); /* از وسط، صفر تا کامل */
        transform-origin: center center; /* شروع از وسط */
        transition: transform .35s cubic-bezier(.22,.61,.36,1);
        pointer-events: none; /* خط کلیک نگیرد */
    }

/* هاور: خط از وسط باز می‌شود و رنگ متن عوض می‌شود */
.rz-menu .rz-navigation-item:hover .rz-navigation-item-link {
    color: var(--menu-accent);
}

    .rz-menu .rz-navigation-item:hover .rz-navigation-item-link::after {
        transform: translateX(-50%) scaleX(1);
    }

/* آیتم فعال (صفحه‌ی جاری): خط بماند و متن همرنگ خط باشد */
.rz-menu .rz-navigation-item-link.active {
    color: var(--menu-accent);
    font-weight: 500;
}

    .rz-menu .rz-navigation-item-link.active::after {
        transform: translateX(-50%) scaleX(1);
    }

/* آیکن‌ها هم‌زمان با متن همرنگ شوند */
.rz-menu .rz-navigation-item-link .rz-navigation-item-icon {
    transition: color .25s ease;
    color: #004A61 !important; /* پیش‌فرضِ آیکن */
}

.rz-menu .rz-navigation-item:hover .rz-navigation-item-icon,
.rz-menu .rz-navigation-item-link.active .rz-navigation-item-icon {
    color: var(--menu-accent) !important;
}

.menu-col {
    text-align: center;
}

.rz-navigation-item-text {
    font-weight: 600;
    font-size: 14px;
    color: #004A61 !important;
}

.rz-navigation-item-wrapper {
    display: flex;
    justify-content: right;
}

.rz-menu-toggle-item {
    direction: ltr;
}

.letter-type-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    width: 100%;
    justify-content: left;
}

.type-button {
    border: 2px solid;
    padding: 6px 16px;
    border-radius: 12px;
    font-size: 12rem;
    cursor: pointer;
    background-color: transparent;
    transition: all 0.2s ease;
}

    .type-button.active {
        color: white !important;
        background: #00c423;
    }

    .type-button:hover {
        opacity: 0.85;
    }

.Sellect-type-button {
    color: white;
    background-color: #01a8dc !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    width: 100px !important;
    min-width: min-content;
}

    .Sellect-type-button .rz-button-icon-left.rzi {
        margin-right: -5px !important;
    }

/*خط عمودی*/
.vertical-line {
    margin: 30px 0;
    width: 5px !important; /* ضخامت خط */
    min-height: 100% !important; /* پر کردن کامل ارتفاع والد */
    background: rgba(255,255,255,0.5); /* سفید شفاف */
    border-radius: 999px; /* گرد کردن کامل دو سر */
    box-shadow: 0 0 6px rgba(255,255,255,0.6);
}

/* کانتینر اصلی نوتیفیکیشن – وسط واقعی */
.rz-notification {
    position: fixed !important;
    top: 20px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    display: flex !important;
    flex-direction: column !important; /* ✅ چند نوتیفیکیشن همزمان → زیر هم (نه کنار هم) */
    align-items: center !important;    /* ✅ هر پیام وسط صفحه */
    justify-content: flex-start !important;
    gap: 10px;                         /* فاصله بین پیام‌ها */
    pointer-events: none; /* که پیام قابل کلیک باشد ولی بقیه نه */
    z-index: 9999;
}

/* آیتم پیام‌ها */
.rz-notification-item-wrapper {
    pointer-events: auto !important; /* برای اینکه فقط خود پیام قابل کلیک باشد */
}

/* ظاهر پیام */
.rz-notification-item {
    background-color: #4b4b4ba7 !important;
    color: #fff !important;
    border-radius: 10px !important;
    padding: 12px 16px !important;
}

/* متن داخل پیام */
.rz-notification-message-wrapper {
    color: #fff !important;
}

/* دکمه ضربدر */
.rz-notification-close.rzi {
    color: #FFF !important;
    font-size: 18px;
    opacity: 1 !important;
}

.view-settings {
    width: 100%;
    padding: 0px 10px 20px 10px;
    margin: 70px auto 0px auto; /* Centrize horizontally */
    box-sizing: border-box;
    max-width: 800px; /* Max width on desktop */
}

.Setting-card {
    border-radius: 15px !important;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.05) !important;
    background-color: white;
}


.Setting-card-title {
    margin: 0px 2px;
    color: gray !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}



.Submit_button {
    color: white;
    background-color: #01a8dc !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    width: 100% !important;
    min-width: min-content;
    margin-top: 50px !important;
}


.StackButton {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pre-page-maker.slideFromBottom {
    overflow: hidden;
}

.FieldsetStyle {
    width: 100%;
    max-width: 700px;
    margin: 70px auto 20px auto !important;
    background-color: white !important;
    border-radius: 20px !important;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.05) !important;
}

.goback_button {
    width: 45px;
    height: 40px;
    border-radius: 15px !important;
    background-color: white !important;
    display: flex !important;
    border: 2px solid rgb(86, 86, 86) !important;
    align-items: center !important;
    justify-content: center !important;
}

.rz-fieldset-content {
    padding: 20px 5px 0px 5px !important;
}


.inputstyle .rz-inputtext {
    height: 40px !important;
    min-height: 40px !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    padding: 12px 10px !important;
    color: black !important;
}

.rz-form-field-content .rz-form-field-label.rz-text-truncate {
    font-size: 16px !important;
    font-weight: 600;
    margin: -5px 0px 0px 0px !important;
}


/*سام هاو باعث میشه تویه ایفون خودکار زوم نکنه در تکست باکس ها !*/
@supports (-webkit-touch-callout: none) {
    input,
    textarea,
    select,
    .rz-input,
    .rz-textbox,
    .rz-dropdown input,
    .rz-numeric input,
    .rz-spinner-input,
    .rz-maskinput input,
    .rz-datepicker input,
    .rz-autocomplete input {
        font-size: 16px !important;
    }
}

.text_But_Like_Button {
    color: #fff !important;
    background-color: #01A8DC;
    padding: 2px 8px 4px 8px !important;
    margin: 0px !important;
    border-radius: 10px;
    font-size: 14px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2) !important;
}

.wheel-container {
    height: 250px;
    direction: ltr;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.wheel-item {
    scroll-snap-align: center;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 16px;
    font-size: 18px;
    color: #9c9c9c;
    transition: all 0.2s ease;
}

    .wheel-item.selected {
        font-size: 22px;
        font-weight: 600;
        color: #01a8dc;
    }

.tick-icon {
    font-size: 20px;
    color: #01a8dc;
}

/*.rz-form-field-label.rz-text-truncate {
    margin: -10px 0px 0px 0px !important;
}*/


.glass-search-overlay {
    position: fixed;
    inset: 0;
    backdrop-filter: blur(12px);
    background: rgba(0,0,0,0.15);
    z-index: 99990;
}

.glass-search-box {
    position: fixed;
    top: 10%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 450px;
    display: flex;
    margin: 0 auto !important;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border-radius: 20px;
    background: rgba(0,0,0,0.46);
    backdrop-filter: blur(25px);
    border: 1px solid rgba(255,255,255,0.25);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.2);
    z-index: 99999;
}

.glass-icon-btn {
    font-size: 20px;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.25);
    padding: 8px 10px;
    border-radius: 12px;
    cursor: pointer;
    color: white;
}

.glass-input {
    flex: 1;
    padding: 10px;
    font-size: 18px;
    background: transparent;
    border: none;
    outline: none;
    color: white;
    font-weight: 500;
}

    .glass-input::placeholder {
        color: rgba(255,255,255,0.7);
    }


.search-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 150px;
    background: rgb(27, 0, 141, 0.33);
    backdrop-filter: blur(8px);
    border: 1px solid rgb(0, 130, 206, 0.30);
    border-radius: 14px;
    padding: 6px 10px 4px 10px;
    margin-top: 6px;
    color: white;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0px;
}

.search-tag-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tag-close-btn {
    background: transparent;
    border: none;
    color: white;
    font-size: 16px;
    cursor: pointer;
    padding: 0;
    margin-left: 4px;
    opacity: 0.7;
}

    .tag-close-btn:hover {
        opacity: 1;
    }


.EmptyButton {
    border: 2px solid #3900c8ff !important;
    background-color: #3100db16 !important;
    color: #3100dbb2 !important;
    border-radius: 10px !important;
    box-shadow: none;
}

    .EmptyButton:hover {
        background-color: #3100db34 !important;
    }

    .EmptyButton:active {
        background-color: #3100db88 !important;
        color: #fff !important;
    }


/* دکمه جدید افزودن کاربر - بدون هیچ تداخلی با scroll-top-fab */

.add-user-fab-btn {
    position: fixed;
    right: 20px;
    bottom: 22vh;
    z-index: 90000;
    width: 120px;
    height: 50px;
    border-radius: 15px;
    background: #4300ead8;
    color: #fff;
    border: 1px solid rgba(255,255,255,0.25);
    box-shadow: 0 10px 26px rgba(0,0,0,0.18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    opacity: 1;
    pointer-events: auto;
    transition: background 160ms ease;
}

    /* حالت هاور */
    .add-user-fab-btn:hover {
        background: #4300ea9f;
    }

    .add-user-fab-btn .add-user-icon {
        font-size: 35px;
        font-weight: 900;
        margin-right: 10px;
        color: #fff;
    }

    .add-user-fab-btn .add-user-text {
        font-size: 16px;
        font-weight: bold;
        color: #fff;
    }


.rz-dialog-titlebar {
    background-color: transparent !important;
}

.rz-dialog-title {
    font-size: 16px !important;
    font-weight: 500 !important;
}

.rz-dialog-side-title {
    font-size: 16px !important;
    font-weight: 500 !important;
}

/* ------------------------------
   کانتینر اصلی پنل‌ها
-------------------------------- */
.layout-container {
    display: flex;
    flex-direction: column;
    padding-bottom: 100px; /* فضای امن برای footer ثابت */
}

/* ------------------------------
   پنل‌های چپ و راست
-------------------------------- */
.panel-left,
.panel-right {
    background-color: transparent;
    padding: 16px;
    border-radius: 8px;
}

/* ------------------------------
   حالت دسکتاپ – دو ستون
-------------------------------- */
@media (min-width: 768px) {
    .layout-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
        gap: 16px;
    }
}

/* ------------------------------
   پنل Footer ثابت در پایین صفحه
-------------------------------- */
.panel-footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: transparent;
    padding: 16px 20px;
    border-top: 0px solid #ddd;
    display: flex;
    justify-content: center; /* یا space-between بر اساس نیاز */
    align-items: center;
    z-index: 9999;
}


.rz-dialog.rz-open {
    background-color: #ffffffc7 !important;
}

.rz-dialog-wrapper {
    backdrop-filter: blur(8px) !important;
}

/* Select device - compact premium layout */
.vs-select-device-dialog.rz-dialog {
    width: min(1240px, calc(100vw - 56px)) !important;
    max-width: min(1240px, calc(100vw - 56px)) !important;
}

.sd-wrap {
    height: min(78vh, 820px);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.94), rgba(242,248,250,0.90)),
        radial-gradient(circle at 18% 0%, rgba(1,168,220,0.12), transparent 34%);
}

.sd-header {
    padding: 20px 28px 12px 28px;
}

.sd-title {
    font-size: 20px;
    letter-spacing: 0;
}

.sd-icon-btn {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    border-radius: 12px !important;
    color: #00394b !important;
    background: rgba(0,74,97,0.08) !important;
}

.sd-icon-btn .rz-button-icon-left,
.sd-icon-btn .rzi {
    color: #00394b !important;
    opacity: 1 !important;
    font-size: 22px !important;
}

.sd-add-btn {
    height: 42px !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, #004A61, #01a8dc) !important;
}

.sd-current {
    margin: 0 28px 14px 28px;
    padding: 12px 14px;
    border: 1px solid rgba(1,168,220,0.18);
    border-radius: 14px;
    background: rgba(1,168,220,0.08);
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 10px;
    color: #0f2f39;
}

.sd-current-kicker {
    font-size: 11px;
    font-weight: 900;
    color: #007294;
    background: rgba(255,255,255,0.72);
    border-radius: 999px;
    padding: 5px 9px;
}

.sd-current b {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sd-current small {
    direction: ltr;
    color: rgba(15,47,57,0.55);
}

/* disconnect button of the current-device box */
.sd-disconnect-btn {
    justify-self: end;
    border-radius: 10px !important;
}

.sd-disconnect-btn .rz-button-icon-left,
.sd-disconnect-btn .rzi {
    font-size: 18px !important;
}

.sd-scroll {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-height: none;
    padding: 4px 28px 28px 28px;
}

.sd-row {
    position: relative;
    min-height: 104px;
    border-radius: 14px;
    overflow: hidden;
    animation: fadeIn 220ms ease-out both;
}

.sd-row::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 14px;
    bottom: 14px;
    width: 4px;
    border-radius: 999px;
    background: rgba(0,74,97,0.18);
}

.sd-row-selected {
    border-color: rgba(1,168,220,0.8);
    background: rgba(255,255,255,0.96);
    box-shadow: 0 14px 34px rgba(1,168,220,0.16);
}

.sd-row-selected::before {
    background: #01a8dc;
}

.sd-more {
    grid-column: 1 / -1;
    min-height: 46px;
    border: 1px solid rgba(0,74,97,0.14);
    border-radius: 14px;
    background: rgba(255,255,255,0.72);
    color: #004A61;
    font: inherit;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.sd-add {
    width: min(620px, calc(100% - 56px));
    margin-top: 18px;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 10px 4px 28px 4px;
}

.sd-add-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 10px;
}

.sd-add-icon {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    background: linear-gradient(135deg, #004A61, #01a8dc);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 14px 28px rgba(0,74,97,0.18);
}

.sd-add-icon .rz-icon {
    font-size: 30px;
}

.sd-add-input,
.sd-add-input .rz-inputtext {
    min-height: 52px !important;
    border-radius: 14px !important;
    font-size: 16px !important;
}

.sd-actions {
    margin-top: auto;
    padding-top: 8px;
}

.sd-actions .rz-button {
    border-radius: 14px !important;
}

@media (max-width: 768px) {
    .vs-select-device-dialog.rz-dialog {
        width: 100% !important;
        max-width: 100% !important;
    }

    .sd-wrap {
        /* mobile bottom-sheet: match sheet height so list bottom is not clipped */
        height: 75vh;
    }

    .sd-header {
        padding: 14px 16px 10px 16px;
    }

    .sd-current {
        margin: 0 16px 12px 16px;
        grid-template-columns: 1fr auto;
    }

    .sd-current-kicker {
        grid-column: 1 / -1;
        width: fit-content;
    }

    /* mobile: disconnect button takes a full row */
    .sd-disconnect-btn {
        grid-column: 1 / -1;
        justify-self: stretch;
    }

    .sd-scroll {
        grid-template-columns: 1fr;
        padding: 2px 16px 18px 16px;
    }

    .sd-row {
        min-height: 82px;
    }

    .sd-add {
        width: calc(100% - 32px);
        padding: 4px 0 18px 0;
    }
}

.add-device-shell {
    min-height: 360px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.96), rgba(244,250,252,0.9)),
        radial-gradient(circle at 15% 0%, rgba(1,168,220,0.14), transparent 36%);
}

.add-device-head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 14px;
    align-items: center;
}

.add-device-mark {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    background: linear-gradient(135deg, #004A61, #01a8dc);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 16px 30px rgba(0,74,97,0.2);
}

.add-device-mark .rz-icon {
    font-size: 32px;
}

.add-device-copy {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.add-device-copy b {
    font-size: 18px;
    font-weight: 900;
    color: #0f2f39;
}

.add-device-copy span {
    font-size: 12px;
    font-weight: 800;
    color: rgba(15,47,57,0.52);
}

.add-device-close {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    border-radius: 12px !important;
    color: #00394b !important;
    background: rgba(0,74,97,0.08) !important;
}

.add-device-close .rz-button-icon-left,
.add-device-close .rzi {
    color: #00394b !important;
    opacity: 1 !important;
    font-size: 22px !important;
}

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

.add-device-field {
    width: 100%;
    background-color: transparent !important;
    box-shadow: none !important;
}

.add-device-submit {
    width: 100% !important;
    min-height: 50px !important;
    margin-top: auto !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, #004A61, #01a8dc) !important;
    color: #fff !important;
    font-weight: 900 !important;
    box-shadow: 0 14px 30px rgba(0,74,97,0.18) !important;
}

@media (max-width: 768px) {
    .add-device-shell {
        min-height: 70vh;
        padding: 18px 16px calc(18px + env(safe-area-inset-bottom)) 16px;
    }

    .add-device-head {
        gap: 10px;
    }

    .add-device-mark {
        width: 50px;
        height: 50px;
        border-radius: 16px;
    }

    .add-device-fields {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

:root {
    --rz-border-width: 1.5px !important;
}


.LoginBackgraound {
    backdrop-filter: blur(8px) !important;
    height: 100%;
    /* ✅ فیکس نصفه‌بودن صفحه: چون والد (#app-root) ارتفاع صریح ندارد،
       height:100% به auto برمی‌گشت و پس‌زمینه فقط نصف صفحه را می‌گرفت.
       با min-height تمام‌صفحه (موبایل و PC) تضمین می‌شود */
    min-height: 100vh;
    min-height: 100dvh; /* موبایل — با احتساب نوار آدرس مرورگر */
    width: 100%;
    background-image: url("/images/LoginBackground.svg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    align-self: center !important;
    display: flex !important;
    backdrop-filter: blur(28px) !important;
    justify-content: center; /* وسط افقی */
    align-items: center !important;
    backdrop-filter: blur(12px) !important;
}

.iconbutton {
    background-color: #fff !important;
    backdrop-filter: blur(18px) !important;
    border-radius: 15px;
}


.DataListItem {
    align-content: center !important;
    width: 100%;
    max-width: 400px;
    border-radius: 15px !important;
    height: fit-content;
    box-shadow: none;
    background-color: #ffffffcd;
    border: 1px solid rgba(0,0,0,0.06);
    /*backdrop-filter: blur(25px);*/
    margin: 10PX auto !important;
}

.wave-attention {
    animation: pulseWavee 0.5s ease-out forwards, shake 3s ease-in-out infinite 5s;
}

/* ورود از راست */
@keyframes pulseWavee {
    from {
        transform: translateX(200px);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* لرزش */
@keyframes shake {
    0%, 97%, 100% {
        transform: translateX(0) rotate(0);
    }

    98% {
        transform: translateX(-3px) rotate(-3deg);
    }

    99% {
        transform: translateX(3px) rotate(3deg);
    }
}

.rz-text-body1.underLoginText {
    color: gray;
    font-weight: 700;
    font-size: 16px;
    margin: 0 auto !important;
    justify-content: center !important;
    align-content: end !important;
    display: flex !important;
    flex-wrap: wrap-reverse !important;
    align-items: end !important;
    margin-top: 0px !important;
    font-family:IRANYekan;
    padding: 5px !important;
}

.rz-textbox.inputstyle{ 
    font-size:16px !important;
}

/* ✅ چارت داخل dir="ltr" قرار گرفته — tooltip دیگر نیاز به هک RTL ندارد
   (قانون قبلی left:auto !important جای tooltip را خراب می‌کرد و حذف شد) */
.rz-chart-tooltip.rz-chart-shared-tooltip {
    direction: ltr !important;
}

.rz-grid-table.rz-grid-table-fixed.rz-grid-table-striped{
    width:max-content !important;
}

/* ✅ آیکون چشم پسورد (نمایش/مخفی‌کردن رمز) — هم‌رنگ متن‌های سایت (آبی نفتی #004A61) */
button.password-eye .rzi {
    color: #004A61 !important;
}

/* ✅ استایل واحد دکمه‌های ذخیره/انصراف/اعمال دیالوگ‌ها — هم‌سبک دیالوگ جدول‌های کانفیگ
   (ذخیره ۲/۳ عرض با رنگ فیروزه‌ای Submit_button سایت، انصراف ۱/۳ باقی‌مانده) */
.vs-actions {
    display: flex;
    gap: 8px;
}

    .vs-actions .rz-button {
        margin: 0 !important;
        border-radius: 10px !important;
        font-weight: 600 !important;
    }

    .vs-actions .vs-btn-save {
        flex: 2 1 0 !important;
        width: auto !important;
    }

    .vs-actions .vs-btn-cancel {
        flex: 1 1 0 !important;
        width: auto !important;
    }

/* نسخه مستقل همین استایل — برای دکمه اعمال فیلتر (تمام‌عرض) و دکمه‌های خارج از .vs-actions */
.vs-btn-save {
    background-color: #01a8dc !important; /* همرنگ Submit_button سایت */
    color: #fff !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
}

.vs-btn-cancel {
    border-radius: 10px !important;
    font-weight: 600 !important;
}