/* --- @import url('https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/Vazirmatn-font-face.css');  --- */
@font-face {
    font-family: 'Vazirmatn';
    /* ✅ صحیح: آدرس کامل از ریشه استاتیک */
    src: url('/static/fonts/ttf/Vazirmatn-Black.ttf') format('ttf');
    font-weight: 900;
    font-style: normal;
}
@font-face {
    font-family: 'IRANSans';
    src: url('/static/fonts/IRANSans.ttf') format('truetype');
    font-weight: normal;
}
:root {
    --bg-body: #f4f5fa;
    --bg-header: #ffffff;
    --primary: #7367f0;     /* رنگ اصلی بنفش/آبی */
    --text-dark: #5e5873;
    --text-light: #6e6b7b;
    --border: #ebe9f1;
    --shadow: 0 0 15px 0 rgba(0,0,0,0.05);
}

body {
    background-color: var(--bg-body);
    color: var(--text-light);
    margin: 0;
    direction: rtl;
    font-weight:600;
}

/* --- هدر افقی بالا --- */
.navbar-horizontal {
    background-color: var(--bg-header);
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2rem;
    box-shadow: var(--shadow);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.navbar-brand {
    font-weight: bold;
    font-size: 1.2rem;
    color: var(--primary);
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    padding-left: 15px;
}

/* --- منوی وسط --- */
.nav-menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 5px;
}

.nav-item a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 15px;
    color: var(--text-dark);
    text-decoration: none;
    font-size: 0.9rem;
    border-radius: 5px;
    transition: all 0.2s ease-in-out;
}

.nav-item a:hover {
    background-color: #f0f0f0;
    color: var(--primary);
}

.nav-item a.active {
    background: linear-gradient(118deg, var(--primary), rgba(115, 103, 240, 0.7));
    color: #fff;
    box-shadow: 0 0 6px 1px rgba(115, 103, 240, 0.6);
    font-family: 'Vazirmatn', 'B Yekan', Tahoma, sans-serif;
}

/* --- پروفایل سمت چپ --- */
.user-nav {
    display: flex;
    align-items: center;
    gap: 15px;
}

.user-info {
    text-align: left;
    line-height: 1.2;
}

.user-name {
    display: block;
    font-weight: 600;
    color: var(--text-dark);
}

.user-role {
    font-size: 0.75rem;
    color: #b9b9c3;
}

/* --- اصلاح فضای محتوا (رفع خرابی ظاهر) --- */
#content {
    max-width: 1400px;  /* محدود کردن عرض برای خوانایی بهتر */
    margin: 2rem auto;  /* وسط چین کردن محتوا */
    padding: 0 2rem;
}

/* کارت‌های سفید برای جدول‌ها و فرم‌ها */
.module, .results, .changelist-form, #changelist {
    background: #fff;
    border-radius: 6px;
    box-shadow: var(--shadow);
    padding: 5px;
    border: none !important;
}

/* مخفی کردن هدر پیش‌فرض جنگو */
#header, .breadcrumbs {
    display: none !important;
}

/* اصلاح دکمه‌ها */
.button, input[type=submit], .submit-row input {
    background: var(--primary) !important;
    border: none !important;
    color: white !important;
    padding: 10px 50px;
    border-radius: 5px;
    cursor: pointer;
	margin-left: 20px;
}

/* اصلاح جدول */
table {
    width: 100%;
}
thead th {
    background: #f3f2f7;
    color: var(--text-dark);
    padding: 10px;
    border: none;
}
tbody td {
    padding: 10px;
    border-top: 1px solid var(--border);
}

/* ریسپانسیو برای موبایل */
@media (max-width: 992px) {
    .nav-menu span { display: none; } /* فقط آیکون در تبلت */
}
/* تمیز کردن ظاهر فیلترها */
#changelist-filter ul {
    padding: 0;
    margin: 0;
}
#changelist-filter li {
    list-style: none;
    margin-bottom: 10px;
}
#changelist-filter a {
    color: #6e6b7b;
    text-decoration: none;
    display: block;
    padding: 5px 10px;
    border-radius: 4px;
    transition: all 0.2s;
}
#changelist-filter a:hover, #changelist-filter li.selected a {
    background-color: rgba(115, 103, 240, 0.1);
    color: #7367f0;
}

/* تنظیم دکمه برو */
.actions button.button {
    height: 38px;
    line-height: 1;
}
/* --- اصلاحات جدول --- */
#changelist-form {
    box-shadow: 0 4px 24px 0 rgba(34, 41, 47, 0.1);
}

table {
    border-spacing: 0;
    width: 100%;
}

table thead th {
    background-color: #f3f2f7;
    color: #6e6b7b;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    padding: 15px 10px;
    border: none;
}

table tbody tr {
    border-bottom: 1px solid #ebe9f1;
    transition: all 0.2s;
}

table tbody tr:hover {
    background-color: #f8f8f8;
    transform: translateY(-2px);
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    z-index: 10;
    position: relative;
}

table tbody td {
    padding: 15px 10px;
    vertical-align: middle;
    color: #6e6b7b;
    border-top: 1px solid #ebe9f1;
}

/* --- اصلاح دکمه‌های وضعیت و اکشن داخل جدول --- */
.field-status_display, .field-actions {
    white-space: nowrap; /* جلوگیری از شکستن خط */
}

/* دکمه‌های رنگی وضعیت */
td a.button-status, span.button-status {
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
    color: white !important;
    text-decoration: none;
    display: inline-block;
    min-width: 80px;
    text-align: center;
}

/* استایل دکمه "برو" در اکشن بار */
.actions button.button {
    background-color: #7367f0 !important;
    color: white;
    border: none;
    padding: 8px 20px;
    border-radius: 5px;
    cursor: pointer;
    margin-right: 10px;
    height: 38px;
}

.actions select {
    height: 38px;
    border: 1px solid #d8d6de;
    border-radius: 5px;
    padding: 0 10px;
    min-width: 200px;
}
/* --- اصلاح ستون عملیات و مدارک (رفع به هم ریختگی) --- */

/* 1. آزاد کردن فضا برای ستون‌های عملیات */
/* نام کلاس‌ها بر اساس نام فیلدها در admin.py است. معمولاً field-actions یا field-documents */
td.field-actions, 
td.field-documents, 
td.field-ops, 
td.field-custom_actions {
    white-space: normal !important; /* اجازه شکستن خط */
    min-width: 160px; /* حداقل عرض برای جا شدن دکمه‌ها */
    padding: 8px 10px !important;
    vertical-align: middle !important;
}

/* 2. چیدمان دکمه‌ها کنار هم */
/* اگر دکمه‌ها داخل یک div هستند یا مستقیم داخل td */
td.field-actions, 
td.field-documents {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* یا center */
    gap: 8px; /* فاصله بین دکمه‌ها */
    flex-wrap: wrap; /* اگر جا نشد برود خط بعد */
}

/* 3. استایل‌دهی به خود دکمه‌ها (زیباسازی) */
td.field-actions a, 
td.field-documents a,
td .button-action {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 6px 12px !important;
    border-radius: 5px !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: all 0.2s ease-in-out;
    margin: 2px !important; /* فاصله ایمنی */
    position: static !important; /* حذف هرگونه پوزیشن شناور مزاحم */
    height: auto !important;
    border: none !important;
}

/* افکت هاور برای دکمه‌ها */
td.field-actions a:hover, 
td.field-documents a:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

/* --- رنگ‌بندی اختصاصی بر اساس محتوای دکمه (هوشمند) --- */

/* دکمه ویرایش (زرد/نارنجی) */
td a[href*="change"], 
td a:contains("ویرایش"),
.btn-edit {
    background-color: #ff9f43 !important;
    color: #fff !important;
}

/* دکمه حذف یا ابطال (قرمز) */
td a[href*="delete"], 
td a:contains("ابطال"),
td a:contains("حذف"),
.btn-delete {
    background-color: #ea5455 !important;
    color: #fff !important;
}

/* دکمه مدارک یا آپلود (بنفش یا آبی) */
td a:contains("مدارک"),
td a:contains("آپلود"),
.btn-docs {
    background-color: #7367f0 !important; /* بنفش */
    color: #fff !important;
}

/* دکمه تایید نهایی یا سبز */
td a:contains("تایید"),
.btn-success {
    background-color: #28c76f !important;
    color: #fff !important;
}

/* --- رفع مشکل آیکون‌های روی هم افتاده --- */
/* اگر از آیکون font-awesome یا مشابه استفاده می‌کنید */
td a i, td a span {
    margin-left: 5px; /* فاصله آیکون تا متن */
    display: inline-block;
}
    /* تمام دکمه‌های داخل ستون عملیات */
.field-display_operations a {
        display: inline-block;
        padding: 5px 10px;
        margin: 2px;
        border-radius: 4px;
        text-decoration: none;
        font-size: 11px;
        color: white !important; /* رنگ متن */
}
.field-upload_docs_link a.button {
        background-color: #28a745 !important; /* رنگ سبز */
        padding: 4px 8px;
        border-radius: 4px;
    }
# مثال: اضافه کردن class="op-btn edit-btn"
buttons.append(f'<a href="..." class="op-btn edit-btn">📝 ویرایش</a>')

**سپس در CSS:**
css
.op-btn {
    padding: 5px 10px;
    border-radius: 4px;
    color: white;
}
.edit-btn { background-color: #ffc107; color: black; }
.delete-btn { background-color: #dc3545; }
.assign-btn { background-color: #007bff; }
/* =========================================
   وسط‌چین کردن کل جدول و ستون‌ها
   ========================================= */
#changelist table thead th,
#changelist table tbody td {
    text-align: center !important;
    vertical-align: middle !important;
}

/* وسط‌چین کردن محتوای هدر (برای وقتی که آیکون Sort دارد) */
#changelist table thead th .text {
    justify-content: center;
    display: inline-flex;
}

/* =========================================
   استایل ستون عملیات ادغام شده
   ========================================= */
.field-display_operations {
    /* عرض کافی برای جای گرفتن دکمه‌ها */
    min-width: 140px; 
}

/* کانتینری که در پایتون ساختیم */
.op-container {
    display: flex;
    align-items: center;
    justify-content: center; /* دکمه‌ها را وسط سلول می‌چیند */
    gap: 6px;                /* فاصله بین دکمه‌ها */
    flex-wrap: wrap;         /* اگر جا نشد برود خط بعد */
}

/* استایل دکمه‌های عملیات */
.op-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 10px;
    border-radius: 4px;
    color: #fff !important;
    font-size: 0.75rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
    min-width: 70px; /* یک اندازه حداقل برای زیبایی */
}

.op-btn i {
    margin-left: 5px; /* فاصله آیکون تا متن */
}

/* رنگ اختصاصی دکمه‌ها */
.edit-btn {
    background-color: #ff9f43; /* زرد/نارنجی برای ویرایش */
}
.edit-btn:hover { background-color: #e08a35; }

.delete-btn {
    background-color: #ea5455; /* قرمز برای ابطال */
}
.delete-btn:hover { background-color: #c94546; }

.docs-btn {
    background-color: #28c76f; /* سبز برای مدارک */
}
.docs-btn:hover { background-color: #20a058; }
/* وسط‌چین کردن عمودی و افقی تمام محتویات جدول */
#result_list tbody tr td, 
#result_list tbody tr th {
    vertical-align: middle !important; /* رفع مشکل چسبیدن به سقف */
    text-align: center !important;     /* وسط‌چین افقی */
}

/* تنظیم خاص برای ستون نام پذیرنده که چپ‌چین یا راست‌چین باشد (اختیاری) */
.field-display_full_name {
    text-align: right !important; /* اگر می‌خواهید نام راست‌چین باشد */
    padding-right: 15px !important;
}

/* کانتینر دکمه‌های عملیات */
.op-container {
    display: flex !important;          /* فعال‌سازی فلکس */
    flex-direction: row !important;    /* چیدمان افقی (در یک خط) */
    align-items: center !important;    /* تراز عمودی وسط */
    justify-content: center !important;/* تراز افقی وسط */
    gap: 5px !important;               /* فاصله بین دکمه‌ها */
    white-space: nowrap !important;    /* جلوگیری شدید از شکستن خط */
    width: 100%;
}

/* استایل پایه دکمه‌ها */
.op-btn {
    display: inline-flex !important;   /* جلوگیری از تمام‌صفحه شدن دکمه */
    align-items: center;
    justify-content: center;
    padding: 6px 12px !important;      /* کمی پدینگ بیشتر برای زیبایی */
    border-radius: 4px;
    font-size: 11px !important;
    font-weight: normal;
    text-decoration: none !important;
    color: white !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    margin: 0 !important;              /* حذف حاشیه‌های پیش‌فرض جنگو */
    height: 28px;                      /* ارتفاع ثابت برای هم‌اندازه شدن */
    line-height: 1;
}

/* آیکون‌های داخل دکمه (اگر استفاده می‌کنید) */
.op-btn i {
    margin-left: 5px;
}

/* تنظیم عرض ستون عملیات تا فضا برای یک خط شدن داشته باشد */
.field-display_operations {
    min-width: 200px; /* حداقل عرض را زیاد می‌کنیم تا دکمه‌ها جا شوند */
    width: auto;
}
/* تنظیمات دکمه وضعیت که حالا لینک شده است */
a.status-link {
    text-decoration: none !important; /* حذف خط زیر لینک */
    display: block;                   /* برای پر کردن فضا */
    width: 100%;                      /* عرض کامل */
    cursor: pointer;                  /* نمایش دست هنگام موس */
}

a.status-link span {
    cursor: pointer;
    display: inline-block; /* یا block بسته به سلیقه */
    min-width: 100px;      /* حداقل عرض برای یکدست شدن */
    font-size: 11px;
}

/* هاور (وقتی موس روی وضعیت می‌رود) */
a.status-link:hover span {
    opacity: 0.8;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}



/* ==============================================
   MOBILE RESPONSIVE STYLES (Max Width: 768px)
   ============================================== */
@media screen and (max-width: 768px) {

    /* 1. اصلاح کانتینر اصلی */
    #content {
        padding: 10px !important;
        margin: 0 !important;
        width: 100% !important;
    }

    /* 2. مدیریت جدول‌ها (مهم‌ترین بخش) */
    /* اجازه می‌دهد جدول اسکرول افقی داشته باشد اما کل صفحه بهم نریزد */
    .results {
        overflow-x: auto;
        display: block;
        width: 100%;
        border: 1px solid #eee;
    }
    
    #result_list {
        min-width: 800px; /* حداقل عرض جدول برای خوانایی ستون‌ها */
    }

    /* 3. مخفی کردن یا جابجایی فیلترها */
    /* فیلترها در موبایل باید زیر لیست باشند نه سمت راست */
    #changelist-filter {
        position: relative !important;
        width: 100% !important;
        margin-top: 20px;
        background: #f8f9fa;
        border-top: 2px solid #ddd;
        padding-bottom: 20px;
    }
    
    #changelist-filter h2 {
        background: #447e9b;
        color: white;
        padding: 10px;
        cursor: pointer; /* نشان می‌دهد که قابل کلیک است */
    }

    /* 4. اصلاح فرم‌ها (Edit Page) */
    /* فیلدها زیر هم قرار بگیرند نه کنار هم */
    .change-form .fieldBox {
        float: none !important;
        width: 90% !important;
        margin-bottom: 15px;
    }

    .form-row {
        display: flex;
      /*  flex-direction: column; */
        padding: 10px 0;
    }

    .form-row > div {
        width: 100% !important;
        margin: 5px 0 !important;
    }

    /* لیبل‌ها و اینپوت‌ها تمام عرض شوند */
    label {
        width: 100% !important;
        text-align: right !important;
        margin-bottom: 5px;
        display: block;
    }

    input[type=text], input[type=password], input[type=email], input[type=url], input[type=number], textarea, select {
        width: 100% !important;
        max-width: 100%;
        height: 40px; /* ارتفاع بیشتر برای راحتی لمس */
        box-sizing: border-box;
    }
    
    /* 5. ویجت تاریخ تولد (که جدید ساختیم) */
    /* سه منوی کشویی را کنار هم یا زیر هم مرتب می‌کند */
    .form-row .field-birth_date select {
        width: 32% !important; /* تقسیم فضا بین ۳ منو */
        display: inline-block;
        margin-left: 1%;
    }

    /* 6. دکمه‌های اکشن و ذخیره */
    .submit-row {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: white;
        padding: 10px;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
        z-index: 1000;
        display: flex;
        justify-content: space-between;
    }
    
    .submit-row input {
        margin: 0 5px !important;
        padding: 10px 20px !important;
        width: auto !important;
    }

    /* فاصله دادن پایین صفحه تا دکمه‌ها روی محتوا نیفتند */
    #content-main {
        padding-bottom: 80px; 
    }

    /* 7. اصلاح پاپ‌آپ‌های کاستوم شما */
    /* مدال‌ها در موبایل باید تمام صفحه شوند */
    [id^="modal_"] > div:first-child {
        /* کانتینر اصلی مودال */
        width: 95% !important;
        height: auto !important;
        max-height: 90vh;
    }
    
    /* تصاویر داخل مودال */
    [id^="modal_"] img {
        max-width: 100%;
        height: auto;
    }
}