:root {
    --primary-color-start: #FF4E50; /* Fiery Red - پرانرژی و جذاب */
    --primary-color-end: #F9D423; /* Vibrant Yellow - درخشان و گرم */
    --text-heading: #0D1B2A; /* Dark Navy - مدرن و سنگین */
    --text-body: #1B263B; /* Deep Indigo - خوانا و آرام */
    --text-muted: #6A0572; /* Vivid Purple - تزئینی و مدرن */
    --border-color: #E0AFFF; /* Soft Orchid - مرز نرم و شیک */
    --card-bg: rgba(255, 255, 255, 0.85); /* White Frost - زمینه شفاف و روشن */
    --font-family: 'Vazirmatn', sans-serif;
}

html, body {
    height: 100%;
}

body {
    font-family: var(--font-family);
    background-color: #f0f4f8; /* Light Cool Background */
    color: var(--text-body);
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    position: relative;
    min-height: 100vh;
}

    body::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: radial-gradient(circle at 10% 20%, rgba(255, 78, 80, 0.15), transparent 40%), radial-gradient(circle at 80% 90%, rgba(249, 212, 35, 0.15), transparent 40%), radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.2), transparent 40%);
        animation: aurora 30s linear infinite;
        z-index: -1;
    }

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

    100% {
        transform: rotate(360deg);
    }
}

.main-navbar, .main-footer {
    z-index: 10;
}

.main-navbar {
    background-color: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
}

.navbar-brand {
    font-weight: 600;
    color: var(--text-heading) !important;
}

.nav-link {
    position: relative;
    color: var(--text-body) !important;
    font-weight: 500;
    padding: 0.5rem 0.75rem !important;
    margin: 0 0.25rem;
    transition: color 0.3s ease;
}

    .nav-link::after {
        content: '';
        position: absolute;
        bottom: -5px;
        left: 50%;
        right: 50%;
        height: 2px;
        background: linear-gradient(90deg, var(--primary-color-start), var(--primary-color-end));
        transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    .nav-link:hover::after,
    .nav-item > .nav-link.active::after {
        left: 10%;
        right: 10%;
    }

    .nav-link:hover,
    .nav-item > .nav-link.active {
        color: var(--primary-color-start) !important;
    }

.dropdown-menu {
    border-radius: 0.75rem;
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
}

.dropdown-item:hover {
    background-color: rgba(255, 78, 80, 0.1);
    color: var(--primary-color-start);
}

main {
    flex: 1 0 auto;
    z-index: 1;
}

.main-footer {
    margin-top: auto;
    background-color: #FFFFFF;
    border-top: 1px solid var(--border-color);
    color: var(--text-muted);
    padding: 2.5rem 0;
    font-size: 0.9rem;
}

    .main-footer h5 {
        color: var(--text-heading);
    }

    .main-footer a {
        color: var(--text-body);
        text-decoration: none;
    }

        .main-footer a:hover {
            color: var(--primary-color-start);
        }
.field-validation-error {
    color: #dc3545;
    font-size: 0.875rem;
    margin-top: 0.25rem;
    display: block;
}

.input-validation-error {
    border-color: #dc3545;
}

    .input-validation-error:focus {
        border-color: #dc3545;
        box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
    }
/* ========== رفع قطعی مشکل سفید روی سفید در جداول ========== */
/* اعمال رنگ تیره به تمام سلول‌های جدول با بالاترین اولویت */
table td,
table th,
.table td,
.table th,
.modern-table td,
.modern-table th,
table tbody tr td,
table thead tr th {
    color: #1B263B !important;
}

    /* اگر سلولی کلاس text-white دارد، آن را نیز بازنویسی کن */
    table td.text-white,
    table th.text-white,
    .table td.text-white,
    .table th.text-white {
        color: #1B263B !important;
    }

/* لینک‌های درون جدول (اکشن‌ها) به رنگ مناسب */
table a:not(.btn) {
    color: #FF4E50 !important;
}

    table a:not(.btn):hover {
        color: #F9D423 !important;
    }

/* دکمه‌های آیکون‌دار در جدول باید رنگ‌های خود را حفظ کنند */
table .btn-icon {
    color: inherit !important; /* رنگ از کلاس‌های btn-outline-* می‌آید */
}

/* نشان‌های وضعیت (badge) رنگ خود را حفظ کنند */
table .badge {
    color: inherit !important;
}

/* بازنشانی هرگونه رنگ احتمالی از Bootstrap */
.table {
    --bs-table-color: #1B263B !important;
    color: #1B263B !important;
}
/* ========== بهبود فاصله‌های فرم‌ها ========== */
.form-floating {
    margin-bottom: 1.2rem;
}

    .form-floating > .form-control,
    .form-floating > .form-select {
        height: calc(3.8rem + 2px);
        padding: 1.2rem 1rem 0.6rem;
    }

    .form-floating > label {
        padding: 1rem 1rem;
    }

/* گروه‌های اینپوت (برای Select2 و ...) */
.input-group {
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.input-group-text {
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    border-color: var(--border-color);
    color: var(--text-body);
    font-weight: 500;
}

/* ========== بهبود جداول ========== */
.table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
    background: white;
}

    .table thead th {
        background: linear-gradient(90deg, var(--primary-color-start), var(--primary-color-end));
        color: white;
        font-weight: 600;
        font-size: 0.95rem;
        padding: 1rem 1.2rem;
        border: none;
        letter-spacing: 0.5px;
        text-transform: uppercase;
    }

    .table tbody tr {
        transition: background-color 0.2s ease, transform 0.2s ease;
    }

        .table tbody tr:hover {
            background-color: rgba(255, 78, 80, 0.04);
            transform: scale(1.01);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        }

    .table td, .table th {
        padding: 1rem 1.2rem;
        vertical-align: middle;
        border-bottom: 1px solid #e9ecef;
    }

.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, 0.02);
}

/* جداول مدرن با هدر شیشه‌ای */
.modern-table {
    border-collapse: separate;
    border-spacing: 0 8px; /* فاصله بین ردیف‌ها */
    background: transparent;
    box-shadow: none;
}

    .modern-table thead th {
        background: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(10px);
        color: var(--text-heading);
        font-weight: 700;
        border-bottom: 2px solid var(--border-color);
        border-radius: 0.5rem 0.5rem 0 0;
    }

    .modern-table tbody tr {
        background: white;
        border-radius: 1rem;
        transition: all 0.3s ease;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
    }

        .modern-table tbody tr:hover {
            box-shadow: 0 8px 20px rgba(255, 78, 80, 0.15);
            transform: translateY(-2px);
        }

    .modern-table td {
        padding: 1.2rem;
        border: none;
    }

    .modern-table tbody tr td:first-child {
        border-top-right-radius: 1rem;
        border-bottom-right-radius: 1rem;
    }

    .modern-table tbody tr td:last-child {
        border-top-left-radius: 1rem;
        border-bottom-left-radius: 1rem;
    }

/* ========== فاصله‌های کلی صفحات ========== */
.container, .container-fluid {
    padding-right: 2rem;
    padding-left: 2rem;
}

@media (max-width: 768px) {
    .container, .container-fluid {
        padding-right: 1rem;
        padding-left: 1rem;
    }
}

.card-body {
    padding: 2rem;
}

/* بهبود دکمه‌های داخل جدول */
.table .btn-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    background: white;
    border: 1px solid #dee2e6;
    color: #495057;
}

    .table .btn-icon:hover {
        background: var(--primary-color-start);
        color: white;
        border-color: transparent;
        transform: translateY(-2px);
        box-shadow: 0 4px 10px rgba(255, 78, 80, 0.3);
    }

/* رفع فاصله‌های فرم‌های فیلتر */
.form-label {
    margin-bottom: 0.3rem;
    font-weight: 600;
    color: var(--text-heading);
}
/* انیمیشن fade-in برای محتوای اصلی */
main {
    animation: fadeInMain 0.6s ease-in-out;
}

@keyframes fadeInMain {
    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.loader-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(5px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.3s ease;
}

.loader-container.fade-out {
    opacity: 0;
    pointer-events: none;
}

.spinner {
    width: 50px;
    height: 50px;
    border: 5px solid #f3f3f3;
    border-top: 5px solid var(--primary-color-start);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

    100% {
        transform: rotate(360deg);
    }
}
.page-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(5px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    transition: opacity 0.2s ease;
}

    .page-loader .spinner {
        width: 60px;
        height: 60px;
        border: 6px solid #f3f3f3;
        border-top: 6px solid var(--primary-color-start);
        border-radius: 50%;
        animation: spin 1s linear infinite;
    }

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

    100% {
        transform: rotate(360deg);
    }
}
.connection-status {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: #dc3545;
    color: white;
    text-align: center;
    padding: 0.5rem;
    z-index: 1100;
    box-shadow: 0 2px 10px rgba(220, 53, 69, 0.3);
    animation: slideDown 0.3s ease;
}

    .connection-status .status-content {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
    }

    .connection-status i {
        font-size: 1.2rem;
    }

@keyframes slideDown {
    from {
        transform: translateY(-100%);
    }

    to {
        transform: translateY(0);
    }
}
.navbar-toggler {
    border: none;
    padding: 0.5rem;
    transition: all 0.2s;
}

    .navbar-toggler:focus {
        box-shadow: none;
    }

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
/* تبدیل جداول به کارت در موبایل */
@media (max-width: 768px) {
    table.table,
    .table {
        border: 0;
    }

        table.table thead,
        .table thead {
            display: none; /* مخفی کردن هدر */
        }

        table.table tbody tr,
        .table tbody tr {
            display: block;
            border: 1px solid var(--border-color);
            border-radius: 0.75rem;
            margin-bottom: 1rem;
            padding: 0.5rem;
            background: white;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        }

        table.table td,
        .table td {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.5rem !important;
            border: none;
            border-bottom: 1px dashed #eee;
        }

            table.table td:last-child,
            .table td:last-child {
                border-bottom: none;
            }

            table.table td::before,
            .table td::before {
                content: attr(data-label);
                font-weight: 600;
                color: var(--text-heading);
                margin-left: 1rem;
                font-size: 0.9rem;
                min-width: 100px;
                text-align: left;
            }

            /* دکمه‌های عملیات */
            table.table td .action-buttons,
            .table td .action-buttons {
                justify-content: flex-end;
            }
}

@media (min-width: 769px) {
    /* در دسکتاپ، نمایش عادی جدول */
    table.table td::before,
    .table td::before {
        display: none;
    }
}
/* انیمیشن بازخورد لمسی برای دکمه‌ها */
.btn-touch {
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

    .btn-touch:active {
        transform: scale(0.96);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    }

/* نسخه کمی متفاوت برای دکمه‌های سایه‌دار */
.btn-touch-shadow:active {
    transform: scale(0.96);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
}

/* برای لینک‌هایی که شبیه دکمه هستند */
a.btn-touch {
    display: inline-block;
}
/* افکت موج (ripple) - نیاز به جاوااسکریپت دارد */
.btn-ripple {
    position: relative;
    overflow: hidden;
    transition: background-color 0.3s;
}

    .btn-ripple:after {
        content: "";
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        pointer-events: none;
        background-image: radial-gradient(circle, rgba(255,255,255,0.3) 10%, transparent 10.01%);
        background-repeat: no-repeat;
        background-position: 50%;
        transform: scale(10, 10);
        opacity: 0;
        transition: transform 0.3s, opacity 0.5s;
    }

    .btn-ripple:active:after {
        transform: scale(0, 0);
        opacity: 0.3;
        transition: 0s;
    }

.welcome-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1100;
}

.welcome-card {
    background: white;
    border-radius: 2rem;
    padding: 2rem;
    max-width: 800px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
}

.welcome-header {
    text-align: center;
    margin-bottom: 2rem;
}

    .welcome-header h2 {
        color: var(--primary-color-start);
        font-weight: 700;
        margin-bottom: 0.5rem;
    }

.feature-item {
    background: #f8f9fa;
    border-radius: 1rem;
    padding: 1.5rem;
    text-align: center;
    height: 100%;
    transition: transform 0.2s, box-shadow 0.2s;
}

    .feature-item:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    }

    .feature-item i {
        font-size: 2.5rem;
        color: var(--primary-color-start);
        margin-bottom: 1rem;
    }

    .feature-item h5 {
        font-weight: 600;
        margin-bottom: 0.5rem;
    }

    .feature-item p {
        color: #6c757d;
        margin-bottom: 0;
    }

.welcome-footer {
    text-align: center;
    margin-top: 2rem;
}

@media (max-width: 768px) {
    .welcome-card {
        padding: 1.5rem;
    }

    .feature-item {
        padding: 1rem;
    }
}