/* wwwroot/css/app.css */


/* --- تنظیمات فونت Vazirmatn --- */
@font-face {
    font-family: 'Vazirmatn';
    src: url('../fonts/Vazirmatn-Regular.woff2') format('woff2'), url('../fonts/Vazirmatn-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Vazirmatn';
    src: url('../fonts/Vazirmatn-Bold.woff2') format('woff2'), url('../fonts/Vazirmatn-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* اعمال فونت به صورت سراسری و بر روی کامپوننت‌های Radzen  */
body,
.rz-typography,
.rz-button,
.rz-input,
.rz-dropdown,
.rz-panel-menu-item-text,
.rz-panel-menu-item,
.rz-profile-menu-item .rz-text-base,
.rz-gravatar + span, /* نام کاربری در Header */
.rz-header,
.leaflet-popup-content,
.custom-popup-content h4,
.tab-toggle,
.marker-properties th,
.marker-properties td,
.metadata td,
.popup-actions,
.popup-button {
    font-family: 'Vazirmatn', sans-serif !important;
}

/* اعمال فونت به طور خاص روی "وب کشت" در سایدبار (هم در حالت باز و هم برای اطمینان) */
.sidebar-app-name {
    font-family: 'Vazirmatn', sans-serif !important;
}

/* تنظیم متغیرهای فونت Radzen (در صورت نیاز) */
:root {
    --rz-text-font-family: 'Vazirmatn', sans-serif !important;
    --rz-body-font-family: 'Vazirmatn', sans-serif !important;
    --rz-heading-font-family: 'Vazirmatn', sans-serif !important;
    --rz-display-font-family: 'Vazirmatn', sans-serif !important;
    --rz-text-font-family-subtitle1: 'Vazirmatn', sans-serif !important;
}

/* --- استایل‌های سایدبار (RadzenPanelMenu) --- */

/* این استایل، پیش‌فرض Radzen برای حالت جمع شده را نادیده می‌گیرد و سایدبار را به گونه‌ای تنظیم می‌کند که فقط آیکون‌ها و لوگو قابل مشاهده باشند. */
.rz-sidebar.rz-sidebar-collapsed {
    width: var(--rz-sidebar-collapsed-width, 48px) !important; /* یک عرض کوچک برای نمایش آیکون‌ها */
    opacity: 1 !important; /* مطمئن شوید که سایدبار قابل مشاهده باشد */
    /*overflow: hidden !important;*/ /* پنهان کردن هر محتوای اضافی که از عرض رد می‌شود (مثل متن) */
    transition: width var(--rz-transition, 0.3s ease-in-out), opacity var(--rz-transition, 0.3s ease-in-out) !important;
}

    /* --- تنظیمات برای عناصر داخل سایدبار در حالت جمع شده --- */

    /* نمایش لوگوی "وب کشت" و مخفی کردن متن "وب کشت" */
    .rz-sidebar.rz-sidebar-collapsed .rz-stack:first-child {
        display: flex !important; /* باید flex باشد تا آیتم‌ها در مرکز قرار گیرند */
        flex-direction: column !important; /* اگر عمودی بودنش مهم است */
        align-items: center !important; /* محتوا را در مرکز قرار دهد */
        padding: 0.5rem 0 !important; /* پدینگ کوچکتر برای فضای لوگو */
        border-bottom: none !important; /* خط پایین این بخش را در حالت جمع شده حذف کنید */
    }

        .rz-sidebar.rz-sidebar-collapsed .rz-stack:first-child .rz-image {
            display: block !important;
            width: 32px !important; /* اندازه کوچکتر برای لوگو در حالت جمع شده (مثال: 32px) */
            height: 32px !important;
            margin-bottom: 0.2rem !important; /* فاصله کوچک بین لوگو و آیکون های منو */
        }

    .rz-sidebar.rz-sidebar-collapsed .sidebar-app-name {
        display: none !important; /* پنهان کردن متن "وب کشت" در حالت جمع شده */
    }

    /* پنهان کردن اطلاعات ورژن و کپی‌رایت در پایین سایدبار وقتی که جمع شده است */
    .rz-sidebar.rz-sidebar-collapsed .rz-stack:last-child {
        display: none !important; /* پنهان کردن کل RadzenStack پایین سایدبار */
    }

    /* پنهان کردن متن آیتم‌های منو در حالت جمع شده */
    .rz-sidebar.rz-sidebar-collapsed .rz-panel-menu-item-text {
        display: none !important;
    }

    /* مرکز قرار دادن آیکون‌ها در سایدبار کوچک شده */
    .rz-sidebar.rz-sidebar-collapsed .rz-panel-menu-item {
        justify-content: center !important;
        padding: var(--rz-panel-menu-item-padding-collapsed, 0.75rem 0.5rem) !important;
    }

/* تنظیم برای RadzenBody تا محتوا به درستی در کنار سایدبار کوچک شده قرار گیرد */
.rz-layout.rz-sidebar-collapsed .rz-body {
    margin-inline-end: var(--rz-sidebar-collapsed-width, 48px) !important; /* برای RTL */
}

/* --- استایل‌های متفرقه شما --- */

.custom-radzen-body-padding {
    padding: 5px !important;
}

.popup-button {
    background-color: var(--rz-primary);
    color: var(--rz-text-light-color);
    border: none;
    padding: 6px 10px;
    margin: 2px;
    border-radius: var(--rz-border-radius);
    cursor: pointer;
    font-size: 0.85em;
    transition: background-color 0.2s;
    white-space: nowrap;
}

    .popup-button:hover {
        background-color: var(--rz-primary-dark);
    }

.leaflet-popup-content-wrapper {
    border-radius: var(--rz-border-radius-2);
    box-shadow: var(--rz-shadow-3);
    overflow: hidden;
}

.leaflet-popup-content {
    padding: 0 !important;
    margin: 0 !important;
    /* font-family قبلاً در سلکتور سراسری تنظیم شده */
    color: var(--rz-text-color);
}

.leaflet-popup-tip {
    background: var(--rz-base-background-color) !important;
}

.custom-popup-content {
    padding: 3px;
    background-color: var(--rz-base-background-color);
    min-width: 280px;
    max-width: 350px;
}

    .custom-popup-content h4 {
        color: var(--rz-primary);
        font-size: 1.1em;
        margin-top: 0;
        margin-bottom: var(--rz-theme-spacing-2);
        text-align: right;
    }

.popup-tabs-ui {
    border-bottom: 1px solid var(--rz-border-color);
    margin-bottom: var(--rz-theme-spacing-2);
    display: flex;
}



.hide-input {
    display: none;
}

.tab-toggle {
    display: block;
    padding: var(--rz-theme-spacing-2) var(--rz-theme-spacing-3);
    text-align: center;
    cursor: pointer;
    background-color: var(--rz-base-background-color);
    border: 1px solid transparent;
    border-bottom: none;
    font-size: 0.9em;
    font-weight: 500;
    color: var(--rz-text-color-secondary);
    transition: all 0.2s ease-in-out;
    border-radius: var(--rz-border-radius) var(--rz-border-radius) 0 0;
}

    .tab-toggle:hover {
        background-color: var(--rz-hover-background-color);
        color: var(--rz-text-color);
    }

.hide-input:checked + .tab-toggle {
    background-color: var(--rz-background-color);
    color: var(--rz-text-color);
    border-color: var(--rz-border-color);
    border-bottom-color: var(--rz-background-color);
    z-index: 1;
}

.tab-content {
    display: none;
    padding: var(--rz-theme-spacing-2) 0;
    background-color: var(--rz-background-color);
    border-top: none;
    border-radius: 0 0 var(--rz-border-radius) var(--rz-border-radius);
    position: relative;
    left: 0;
    right: 0;
    top: 1px;
}

.hide-input:checked ~ .tab-content {
    display: block;
}

.marker-properties,
.metadata {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 0;
}

    .marker-properties th,
    .marker-properties td {
        padding: 6px 8px;
        border-bottom: 1px solid var(--rz-border-color);
        font-size: 0.85em;
        text-align: right;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .marker-properties th {
        font-weight: 600;
        color: var(--rz-text-color-secondary);
        width: 50%;
    }

    .marker-properties td {
        font-weight: 400;
        color: var(--rz-text-color);
        width: 50%;
    }

    .metadata td:first-child {
        font-weight: 600;
        color: var(--rz-text-color-secondary);
    }

    .metadata td:last-child {
        font-weight: 400;
        color: var(--rz-text-color);
    }

    .marker-properties tbody tr:last-child th,
    .marker-properties tbody tr:last-child td,
    .metadata tbody tr:last-child td {
        border-bottom: none;
    }

.popup-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--rz-theme-spacing-2) 0;
    border-top: 1px solid var(--rz-border-color);
    margin-top: var(--rz-theme-spacing-2);
}

.button-group {
    display: flex;
    gap: 5px;
}

.delete-button {
    margin-right: auto;
}

.additional-buttons {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    row-gap: 3px !important;
    column-gap: 3px !important;
}

.rzi {
    font-family: 'Material Icons' !important;
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-feature-settings: 'liga';
    font-feature-settings: 'liga';
    vertical-align: middle;
}

.leaflet-popup-content button.rz-button span.rzi {
    font-family: 'Material Icons' !important;
    direction: ltr !important;
    margin-right: 1px !important;
}

/* site.css یا <style> در MapComponent.razor */

.selection-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /* ارتفاع را متناسب با نیاز خود تنظیم کنید */
    height: 100%;
    background-color: rgba(255, 255, 255, 0.5); /* رنگ نیمه‌شفاف */
    display: flex;
    justify-content: center;
    align-items: flex-start; /* قرار دادن در بالا */
    z-index: 1000; /* اطمینان از نمایش روی نقشه */
    pointer-events: none; /* اجازه می‌دهد کلیک‌ها به نقشه برسند */
}

.selection-indicator {
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 10px 20px;
    margin-top: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    font-family: 'Vazirmatn', sans-serif;
    color: #333;
    display: flex;
    align-items: center;
    gap: 10px;
}

    /* فایل wwwroot/css/site.css */
    .selection-indicator .rz-spinner {
        width: 20px; /* عرض را تنظیم کنید */
        height: 20px; /* ارتفاع را تنظیم کنید */
        border: 3px solid #f3f3f3; /* حاشیه خاکستری روشن */
        border-top: 3px solid #3498db; /* حاشیه آبی برای افکت چرخش */
        border-radius: 50%;
        animation: spin 1s linear infinite; /* انیمیشن چرخش */
    }

/* تعریف keyframe برای انیمیشن چرخش */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}
/* کلاس‌های استایل برای دکمه‌ها */
/* ===================================================================== */
/*              کلاس پایه برای دکمه‌های کنترل روی نقشه                   */
/* ===================================================================== */
.map-control-button {
    /* ابعاد و چیدمان داخلی */
    width: 130px; /* افزایش عرض برای جا دادن بهتر متن و آیکون */
    height: 48px; /* افزایش ارتفاع برای حس بهتر کلیک */
    display: flex; /* استفاده از Flexbox برای کنترل کامل چیدمان داخلی */
    align-items: center; /* تراز عمودی آیکون و متن در مرکز */
    justify-content: center; /* تراز افقی و ایجاد فاصله */
    gap: 8px; /* فاصله بین آیکون و متن */
    padding: 0 12px; /* پدینگ داخلی برای جلوگیری از چسبیدن محتوا به لبه‌ها */
    /* ظاهر و استایل */
    border: none; /* حذف حاشیه پیش‌فرض دکمه */
    border-radius: 12px; /* گردی بیشتر برای ظاهری مدرن و نرم */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08); /* سایه حرفه‌ای‌تر */
    cursor: pointer; /* تغییر نشانگر ماوس به حالت دست */
    /* فونت و آیکون */
    font-family: 'Vazirmatn', sans-serif; /* پیشنهاد فونت خوانای فارسی */
    font-size: 14px; /* اندازه بهینه برای متن */
    font-weight: 500; /* ضخامت متوسط برای خوانایی بهتر */
    line-height: 1; /* جلوگیری از ارتفاع اضافی خط */
    /* انیمیشن و بازخورد بصری */
    transition: all 0.2s ease-in-out; /* انیمیشن نرم برای تمام تغییرات */
}

    /* استایل آیکون داخل دکمه‌ها (با فرض اینکه آیکون‌های Radzen از کلاس rz-button-icon استفاده می‌کنند) */
    .map-control-button .rz-button-icon {
        font-size: 22px !important; /* اندازه آیکون را برای تناسب بهتر تنظیم می‌کنیم */
    }

    /* استایل برای حالت هاور (ماوس روی دکمه) */
    .map-control-button:hover {
        transform: translateY(-2px); /* کمی دکمه را به بالا حرکت می‌دهد */
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12), 0 4px 6px rgba(0, 0, 0, 0.08); /* سایه را برجسته‌تر می‌کند */
    }

    /* استایل برای حالت فعال (هنگام کلیک) */
    .map-control-button:active {
        transform: translateY(0); /* بازگشت به موقعیت اصلی */
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* سایه کمتر برای حس فشرده شدن */
    }


/* ===================================================================== */
/*          موقعیت‌یابی دکمه‌ها بر روی نقشه (کلاس‌های اختصاصی)           */
/* ===================================================================== */
.add-polygon-button-position {
    position: absolute;
    top: 15px; /* فاصله بیشتر از لبه بالایی */
    left: 15px; /* فاصله بیشتر از لبه چپی */
    z-index: 1000;
}

.add-marker-button-position {
    position: absolute;
    top: 78px; /* افزایش فاصله از دکمه اول (48px ارتفاع دکمه + 15px فاصله) */
    left: 15px;
    z-index: 1000;
}


/* ===================================================================== */
/*     استایل‌های بهینه‌شده دکمه شناور (FAB) برای حالت موبایل - نسخه ۲     */
/* ===================================================================== */

.fab-container {
    position: absolute;
    /* کاهش فاصله از لبه‌های صفحه برای استفاده بهینه از فضا */
    bottom: 10px;
    left: 8px;
    z-index: 1010;
    display: flex;
    /*    flex-direction: column-reverse;
*/ flex-direction: column; /* <--- به column تغییر یافت */

    align-items: center;
}

/* دکمه اصلی FAB (کوچک‌تر شده) */
.fab-main {
    /* کاهش ابعاد دکمه اصلی برای ظاهری ظریف‌تر */
    width: 42px;
    height: 42px;
    border-radius: 50% !important;
    background-color: #0d6efd; /* رنگ آبی بوت‌استرپ، می‌توانید رنگ قبلی را حفظ کنید */
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s ease, background-color 0.2s ease;
    border: none;
    cursor: pointer;
    gap: 12px; /* فاصله بین دکمه اصلی و گزینه‌ها */
}

    .fab-main .rz-button-icon {
        /* افزایش اندازه آیکون نسبت به ابعاد جدید دکمه */
        font-size: 28px !important;
    }

    .fab-main:hover {
        transform: scale(1.05); /* انیمیشن هاور همچنان پابرجاست */
    }


/* هر گزینه در منوی FAB (کمی کوچک‌تر شده) */
.fab-option {
    /* کاهش ابعاد گزینه‌ها برای هماهنگی */
    width: 36px;
    height: 36px;
    border-radius: 50% !important;
    /* تنظیم فاصله بین خود گزینه‌ها */
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.2);
    margin-bottom: 5px !important;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column; /* <--- به column تغییر یافت */
    /* حالت اولیه: مخفی و کوچک */
    transform: scale(0);
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    cursor: pointer;
}

    .fab-option .rz-button-icon {
        /* تنظیم اندازه آیکون‌های گزینه‌ها */
        font-size: 22px !important;
    }

    .fab-option:last-child {
        margin-bottom: 0;
    }


/* وقتی منو باز می‌شود (این بخش بدون تغییر باقی می‌ماند) */
.fab-options.open .fab-option {
    transform: scale(1);
    opacity: 1;
}

    /* انیمیشن تاخیری (این بخش بدون تغییر باقی می‌ماند) */
    .fab-options.open .fab-option:nth-child(1) {
        transition-delay: 0.1s;
    }

    .fab-options.open .fab-option:nth-child(2) {
        transition-delay: 0.05s;
    }


/*===========================================*/

/* برای نوار ابزار ویرایش */
.editing-overlay-header {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(255, 255, 255, 0.9);
    padding: 10px 15px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 1rem;
    font-family: 'Vazirmatn', sans-serif;
    color: #333;
}

.editing-indicator {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.editing-buttons {
    display: flex;
    gap: 0.5rem;
}

/* برای اسپینر (در صورت نیاز) */
.editing-indicator .rz-spinner {
    width: 20px;
    height: 20px;
}

.status-light {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    border: 2px solid var(--rz-base-300);
}

    .status-light.on {
        background-color: #4CAF50; /* سبز */
        box-shadow: 0 0 12px 2px #4CAF50;
    }

    .status-light.off {
        background-color: #F44336; /* قرمز */
        box-shadow: 0 0 12px 2px #F44336;
    }

.loading-overlay {
    position: fixed; /* روی تمام محتوای دیگر قرار می‌گیرد */
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(25, 25, 25, 0.7); /* پس‌زمینه نیمه‌شفاف */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* بالاترین لایه */
    backdrop-filter: blur(5px); /* افکت بلور برای پس‌زمینه (پشتیبانی مدرن) */
}

.loading-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    color: white;
    font-family: 'Vazirmatn', sans-serif; /* یک فونت فارسی زیبا */
}

.spinner {
    width: 60px;
    height: 60px;
    border: 5px solid rgba(255, 255, 255, 0.3);
    border-top-color: #007bff; /* رنگ اصلی اسپینر */
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.loading-message {
    font-size: 1.1rem;
    font-weight: 500;
}

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

/* File: WebKesht.Client/Pages/RawMqttConsole.razor.css */

.console-container {
    background-color: #1e1e1e; /* رنگ زمینه مشکی/خاکستری تیره */
    color: #d4d4d4; /* رنگ متن سفید/خاکستری روشن */
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace; /* فونت مناسب کنسول */
    border: 1px solid #333;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    height: 70vh; /* ارتفاع دلخواه برای کنسول */
    overflow: hidden; /* مخفی کردن اسکرول بار اصلی کانتینر */
}

.console-header {
    background-color: #333;
    padding: 8px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #444;
}

    .console-header span {
        font-weight: bold;
        color: #00aaff;
    }

.console-button {
    background-color: #555;
    color: #fff;
    border: 1px solid #666;
    border-radius: 3px;
    padding: 4px 10px;
    cursor: pointer;
    transition: background-color 0.2s;
}

    .console-button:hover {
        background-color: #777;
    }

.console-output {
    flex-grow: 1; /* باعث می‌شود این بخش تمام فضای باقی‌مانده را پر کند */
    overflow-y: auto; /* اسکرول فقط در این بخش نمایش داده می‌شود */
    padding: 10px;
}

.console-line {
    display: flex;
    white-space: pre-wrap; /* برای شکستن خطوط طولانی در صورت نیاز */
    word-break: break-all;
    margin-bottom: 4px;
}

.timestamp {
    color: #6a9955; /* سبز */
    margin-right: 10px;
    flex-shrink: 0;
}

.topic {
    color: #9cdcfe; /* آبی روشن */
    margin-right: 10px;
    flex-shrink: 0;
}

.message-body {
    color: #ce9178; /* نارنجی */
}

/* MapPage.razor.css */

.map-container {
    position: relative; /* این مهم‌ترین بخش است */
    height: 100%; /* یا هر ارتفاعی که برای نقشه در نظر دارید */
    width: 100%;
    /*    style ="position: relative; height: 100%; width: 100%;"*/
}
/* =================================================================== */
/*   استایل‌های پنل هواشناسی در سایدبار                                  */
/* =================================================================== */

/* این کد سایدبار را به یک flex-box عمودی تبدیل می‌کند تا بتوانیم محتوا را مدیریت کنیم */
.rz-sidebar-content {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.weather-sidebar-panel {
    padding: 1rem;
    margin: 0.5rem;
    border-radius: var(--rz-border-radius);
    background-color: rgba(var(--rz-base-900-rgb), 0.1); /* یک پس‌زمینه محو و هماهنگ */
    border: 1px solid var(--rz-base-300);
    transition: all 0.2s ease-in-out;
    font-family: 'Vazirmatn', sans-serif;
}

    .weather-sidebar-panel .weather-sidebar-row {
        font-size: 14px;
    }

/* هدر پنل */
.weather-sidebar-header {
    text-align: center;
    color: var(--rz-text-title-color);
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--rz-base-300);
    margin-bottom: 0.5rem;
}

    .weather-sidebar-header .rzi {
        font-size: 24px;
    }

/* هر ردیف از اطلاعات */
.weather-sidebar-row {
    padding: 0.25rem 0;
}

/* آیکون‌ها */
.weather-sidebar-icon {
    color: var(--rz-text-secondary-color);
    font-size: 20px;
}

/* مقادیر عددی */
.weather-sidebar-value {
    font-weight: 600;
    direction: ltr; /* برای نمایش صحیح اعداد و واحدها */
    min-width: 80px; /* برای تراز بودن اعداد */
    text-align: right;
}

/* استایل آیکون در حالت بسته سایدبار */
.weather-sidebar-collapsed-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 48px;
    cursor: pointer;
    /*    color: var(--rz-text-title-color);*/
    color: var(--rz-text-secondary-color);
    transition: background-color 0.2s;
}

    .weather-sidebar-collapsed-icon:hover {
        background-color: var(--rz-base-300);
    }

    .weather-sidebar-collapsed-icon .rzi {
        font-size: 28px;
    }


/* ======================================================= */
/* بازنویسی استایل‌های Radzen برای Tooltip شیشه‌ای آب و هوا */
/* ======================================================= */

/* 
  انتخابگر زیر، div اصلی Tooltip را هدف قرار می‌دهد که کلاس سفارشی ما را دارد.
  ما پس‌زمینه، سایه، حاشیه و padding پیش‌فرض آن را حذف می‌کنیم تا نامرئی شود.
*/
.rz-tooltip.glassmorphic-weather-tooltip .rz-tooltip-content {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

    /* فلش کوچک کنار Tooltip را هم حذف می‌کنیم. */
    .rz-tooltip.glassmorphic-weather-tooltip .rz-tooltip-content::after {
        display: none !important;
    }


/* =============================================== */
/*   استایل‌های کانتینر اصلی Tooltip (شیشه‌ای)     */
/* =============================================== */

.weather-tooltip-container {
    direction: rtl;
    font-family: 'Vazirmatn', sans-serif;
    /* --- افکت Glassmorphism --- */
    background: rgba(40, 100, 180, 0.25); /* کمی رنگ را واضح‌تر کردم برای خوانایی بهتر */
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
    padding: 12px;
    overflow: hidden; /* برای اینکه گوشه‌های گرد ردیف‌های داخلی را برش دهد */
}

/* استایل ردیف‌های داخل Tooltip */
.weather-tooltip-row {
    border-radius: 8px; /* گوشه‌های گردتر برای زیبایی بیشتر */
    transition: all 0.2s ease-in-out;
}

    .weather-tooltip-row:hover {
        background-color: rgba(255, 255, 255, 0.2);
        transform: scale(1.02); /* کمی بزرگنمایی برای تعامل بهتر */
    }


/* CSS برای کنترل نمایش ستون‌ها */
@media (max-width: 768px) {
    .desktop-only-column {
        display: none !important;
    }

    .mobile-compact-view {
        display: block;
    }

    .desktop-view {
        display: none;
    }
}

@media (min-width: 769px) {
    .mobile-compact-view {
        display: none;
    }

    .desktop-view {
        display: block;
    }
}


.mobile-only {
    display: none;
}

.desktop-only {
    display: block;
}

@media (max-width: 768px) {
    .mobile-only {
        display: block;
    }

    .desktop-only {
        display: none;
    }

    .mobile-column {
        display: block;
    }

    .desktop-column {
        display: none;
    }
}

@media (min-width: 769px) {
    .mobile-column {
        display: none;
    }

    .desktop-column {
        display: table-cell;
    }
}
/*=====================================*/
/*استایل های صفحه لاگین*/
/*=====================================*/
.main-logo:hover {
    transform: scale(1.05);
}

.partner-logo:hover {
    transform: scale(1.1);
}

.nikoojavane-logo:hover {
    transform: scale(1.1);
}

.logo-container {
    padding: 0.5rem;
    transition: all 0.3s ease;
}

.website-link:hover {
    color: #005c99 !important;
    transform: translateY(-1px);
}

.contact-info {
    background: rgba(0, 122, 204, 0.05);
    border-radius: 8px;
    padding: 1rem;
    margin: 0 1rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .partner-logos {
        gap: 1rem !important;
    }

    .contact-info {
        margin: 0 0.5rem;
    }

    .main-logo {
        width: min(250px, 85vw) !important;
    }

    .partner-logo {
        width: min(100px, 40vw) !important;
    }

    .nikoojavane-logo {
        width: min(200px, 40vw) !important;
    }
}

@media (max-width: 480px) {
    .partner-logos .rz-col {
        margin-bottom: 1rem;
    }

    .main-logo {
        width: min(220px, 90vw) !important;
    }

    .partner-logo {
        width: min(90px, 45vw) !important;
    }
}
/*=====================================*/
/*استایل های تولتیب های نقشه*/
/* === استایل‌های مدرن و بهبود یافته برای Popup های نقشه === */

.custom-popup-content {
    background: linear-gradient(145deg, #ffffff, #f8fafc);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(0, 0, 0, 0.05);
    min-width: 320px;
    max-width: 420px;
    padding: 0;
    font-family: 'Vazirmatn', sans-serif;
    position: relative;
    backdrop-filter: blur(10px);
}

/* هدر مدرن برای popup */
.popup-header {
    background: linear-gradient(135deg, var(--rz-primary), #667eea);
    color: white;
    padding: 16px 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

    .popup-header::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="20" r="2" fill="rgba(255,255,255,0.1)"/><circle cx="80" cy="80" r="1.5" fill="rgba(255,255,255,0.1)"/><circle cx="40" cy="70" r="1" fill="rgba(255,255,255,0.1)"/></svg>');
        pointer-events: none;
    }

.popup-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
    position: relative;
    z-index: 1;
}

.popup-subtitle {
    font-size: 0.85rem;
    opacity: 0.9;
    margin: 4px 0 0 0;
    position: relative;
    z-index: 1;
}

/* تب‌های مدرن */
.popup-tabs-ui {
    display: flex;
    background: #f1f5f9;
    border: none;
    position: relative;
    overflow: hidden;
}

    .popup-tabs-ui::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, var(--rz-border-color), transparent);
    }

.tab-item {
    flex: 1;
    position: relative;
}

.tab-toggle {
    display: block;
    padding: 14px 8px;
    text-align: center;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--rz-text-color-secondary);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    position: relative;
    background: transparent;
    border: none;
    overflow: hidden;
}

    .tab-toggle::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--rz-primary);
        opacity: 0;
        transform: scale(0);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .tab-toggle:hover {
        color: var(--rz-primary);
        transform: translateY(-1px);
    }

        .tab-toggle:hover::before {
            opacity: 0.05;
            transform: scale(1);
        }

.hide-input:checked + .tab-toggle {
    color: var(--rz-primary);
    font-weight: 600;
    background: white;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
}

    .hide-input:checked + .tab-toggle::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 3px;
        background: linear-gradient(90deg, var(--rz-primary), #667eea);
        border-radius: 3px 3px 0 0;
        animation: slideIn 0.3s ease;
    }

@keyframes slideIn {
    from {
        width: 0;
        opacity: 0;
    }

    to {
        width: 40px;
        opacity: 1;
    }
}

/* محتوای تب با انیمیشن بهتر */
.tab-content {
    padding: 20px;
    background: white;
    animation: fadeInUp 0.4s ease;
    position: relative;
}

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

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

/* جدول مشخصات مدرن */
.marker-properties {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

    .marker-properties th {
        background: linear-gradient(135deg, #f8fafc, #e2e8f0);
        color: var(--rz-text-color-secondary);
        font-weight: 600;
        padding: 12px 16px;
        text-align: right;
        border-bottom: 1px solid #e2e8f0;
        width: 45%;
        position: relative;
    }

        .marker-properties th::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 3px;
            height: 60%;
            background: var(--rz-primary);
            opacity: 0.3;
            border-radius: 0 2px 2px 0;
        }

    .marker-properties td {
        padding: 12px 16px;
        color: var(--rz-text-color);
        border-bottom: 1px solid #f1f5f9;
        background: white;
        position: relative;
        max-width: 150px;
        word-wrap: break-word;
        font-weight: 500;
    }

    .marker-properties tr:hover {
        background: linear-gradient(90deg, transparent, #f8fafc, transparent);
    }

    .marker-properties tr:last-child th,
    .marker-properties tr:last-child td {
        border-bottom: none;
    }

/* دکمه‌های اکشن مدرن */
.additional-buttons {
    padding: 16px 20px;
    background: linear-gradient(145deg, #f8fafc, #f1f5f9);
    border-top: 1px solid rgba(0,0,0,0.05);
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    justify-content: center !important;
}

    .additional-buttons .rz-button {
        border-radius: 12px !important;
        font-size: 0.85rem !important;
        padding: 8px 16px !important;
        font-weight: 500 !important;
        border: none !important;
        position: relative;
        overflow: hidden;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
    }

        .additional-buttons .rz-button::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(45deg, rgba(255,255,255,0.1), rgba(255,255,255,0.3));
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .additional-buttons .rz-button:hover {
            transform: translateY(-2px) scale(1.02);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
        }

            .additional-buttons .rz-button:hover::before {
                opacity: 1;
            }

        .additional-buttons .rz-button:active {
            transform: translateY(0) scale(0.98);
        }

        /* استایل خاص برای دکمه حذف */
        .additional-buttons .rz-button.rz-button-danger {
            background: linear-gradient(135deg, #ef4444, #dc2626) !important;
            color: white !important;
        }

        /* استایل خاص برای دکمه‌های اطلاعاتی */
        .additional-buttons .rz-button.rz-button-info {
            background: linear-gradient(135deg, var(--rz-primary), #667eea) !important;
            color: white !important;
        }

        /* استایل خاص برای دکمه‌های موفقیت */
        .additional-buttons .rz-button.rz-button-success {
            background: linear-gradient(135deg, #10b981, #059669) !important;
            color: white !important;
        }

        /* آیکون‌های دکمه */
        .additional-buttons .rz-button .rz-button-icon {
            margin-left: 6px !important;
            font-size: 1rem !important;
        }

/* انیمیشن ظاهر شدن popup */
.leaflet-popup-content-wrapper {
    animation: popupAppear 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes popupAppear {
    from {
        opacity: 0;
        transform: scale(0.8) translateY(10px);
    }

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

/* ریسپانسیو */
@media (max-width: 480px) {
    .custom-popup-content {
        min-width: 280px;
        max-width: 340px;
    }

    .popup-header {
        padding: 12px 16px;
    }

    .tab-content {
        padding: 16px;
    }

    .additional-buttons {
        padding: 12px 16px;
    }

        .additional-buttons .rz-button {
            font-size: 0.8rem !important;
            padding: 6px 12px !important;
        }
}

/* استایل‌های بهبود یافته برای انیمیشن */
/* انیمیشن برای خطوط اتصال SVG */
.connection-animated {
    stroke-dasharray: 8, 12;
    animation: connectionFlow 3s linear infinite;
}

/* انیمیشن جریان */
@keyframes connectionFlow {
    0% {
        stroke-dashoffset: 0;
    }

    100% {
        stroke-dashoffset: 20; /* مجموع dasharray (8+12) */
    }
}

/* انیمیشن pulse برای جذابیت */
@keyframes connectionPulse {
    0%, 100% {
        stroke-opacity: 0.6;
        stroke-width: 4;
    }

    50% {
        stroke-opacity: 1;
        stroke-width: 6;
    }
}

/* سلکتور مستقیم برای SVG path */
path.connection-line.connection-animated {
    stroke-dasharray: 8, 12;
    animation: connectionFlow 3s linear infinite;
}

/* hover effect */
path.connection-line.connection-hover {
    stroke-width: 6;
    filter: drop-shadow(0 0 5px rgba(102, 126, 234, 0.8));
    animation: connectionPulse 1.5s ease-in-out infinite;
}

/* برای اطمینان - سلکتور کلی‌تر */
svg path.connection-line.connection-animated {
    stroke-dasharray: 8, 12 !important;
    animation: connectionFlow 3s linear infinite !important;
}

/* انیمیشن ترکیبی */
.connection-line.connection-animated.connection-pulse {
    animation: connectionFlow 3s linear infinite, connectionPulse 2s ease-in-out infinite;
}