/* ============================================================
   عطاچوب — سیستم طراحی مینیمال شیشه‌ای (Glassmorphism)
   ============================================================ */

:root{
    --primary:        #3457d5;
    --primary-dark:   #24409e;
    --primary-light:  #6d8bf0;
    --text:           #1f2430;
    --muted:          #667085;
    --danger:         #e5484d;
    --danger-dark:    #c53539;
    --success:        #16a34a;

    --glass-bg:       rgba(255, 255, 255, 0.55);
    --glass-bg-strong:rgba(255, 255, 255, 0.75);
    --glass-border:   rgba(255, 255, 255, 0.6);
    --glass-shadow:   0 8px 32px rgba(31, 45, 80, 0.12);

    --radius-lg: 22px;
    --radius-md: 16px;
    --radius-sm: 10px;

    --font: "Vazirmatn", "Vazir", "IRANSans", "Segoe UI", Tahoma, sans-serif;
}

*{ box-sizing: border-box; }

html, body{
    height: 100%;
    margin: 0;
    padding: 0;
    direction: rtl;
    font-family: var(--font);
    color: var(--text);
    overflow: hidden;
}

body{
    background:
        radial-gradient(circle at 15% 10%, #dbe6ff 0%, transparent 45%),
        radial-gradient(circle at 85% 15%, #e7f0ff 0%, transparent 40%),
        radial-gradient(circle at 50% 100%, #eef2ff 0%, transparent 55%),
        linear-gradient(160deg, #f3f5fb 0%, #e9edf7 100%);
    background-attachment: fixed;
}

/* ------------------------------------------------------------
   چیدمان کلی
   ------------------------------------------------------------ */

.app-shell{
    display: flex;
    flex-direction: column;
    height: 100vh;
    padding: 18px;
    gap: 16px;
}

.topbar{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 22px;
    border-radius: var(--radius-lg);
    background: var(--glass-bg-strong);
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
}

.topbar h1{
    font-size: 18px;
    margin: 0;
    font-weight: 800;
}

.topbar .subtitle{
    font-size: 12px;
    color: var(--muted);
    margin-top: 2px;
}

.main-area{
    flex: 1;
    display: flex;
    gap: 16px;
    min-height: 0;
}

/* ------------------------------------------------------------
   نوار تب‌ها (سایدبار شیشه‌ای)
   ------------------------------------------------------------ */

.nav{
    width: 224px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px;
    border-radius: var(--radius-lg);
    background: var(--glass-bg);
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    overflow-y: auto;
}

.nav-group{
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--glass-border);
}

.nav-group:first-of-type{
    margin-top: 6px;
}

.nav-group-title{
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    color: var(--muted);
    letter-spacing: .2px;
    padding: 2px 10px 6px;
    opacity: .85;
}
.nav-group-icon{
    flex-shrink: 0;
    width: 13px;
    height: 13px;
    stroke-width: 2;
}

.nav-btn{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 9px 12px;
    border-radius: var(--radius-md);
    border: none;
    background: transparent;
    color: var(--muted);
    font-family: var(--font);
    font-size: 13px;
    font-weight: 600;
    text-align: right;
    cursor: pointer;
    transition: background .18s ease, color .18s ease, transform .1s ease;
}

.nav-btn:hover{
    background: rgba(52, 87, 213, 0.08);
    color: var(--primary);
}

.nav-btn.active{
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    color: #fff;
    box-shadow: 0 6px 16px rgba(52, 87, 213, 0.35);
}

.nav-btn.disabled{
    opacity: .45;
    cursor: default;
}
.nav-btn.disabled:hover{
    background: transparent;
    color: var(--muted);
}

/* آیکون شیشه‌ای کنار هر تب — هم‌خانواده با زبان طراحی خودِ برنامه
   (همون var(--glass-bg)/backdrop-filter که .glass-card/.notif-bell هم
   استفاده می‌کنند)، به‌جای یک ایموجی خام کنار متن. */
.nav-icon{
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    line-height: 1;
    color: var(--primary);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    box-shadow: 0 2px 6px rgba(31, 45, 80, 0.08), inset 0 1px 0 rgba(255,255,255,.5);
    backdrop-filter: blur(10px) saturate(160%);
    -webkit-backdrop-filter: blur(10px) saturate(160%);
    transition: background .18s ease, transform .18s ease, box-shadow .18s ease, color .18s ease;
}

.nav-icon-svg{
    width: 16px;
    height: 16px;
    stroke-width: 1.8;
}

.nav-btn:hover .nav-icon{
    background: var(--glass-bg-strong);
    color: var(--primary-dark);
    transform: translateY(-1px);
}

.nav-btn.active .nav-icon{
    background: rgba(255,255,255,.22);
    border-color: rgba(255,255,255,.5);
    color: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.35);
}

.nav-btn.disabled .nav-icon{
    color: var(--muted);
    box-shadow: none;
}

.nav-label{ flex: 1; min-width: 0; }

/* نمونه‌ی انیمیشن آیکون (فقط روی یک تب، برای امتحان) — یک شناور‌شدن
   ملایمِ دائمی + درخشش خفیف، بدون نیاز به هاور تا همون لحظه‌ی باز شدن
   برنامه قابل دیدن باشد. اگر پسندیده شد، همین کلاس روی آیکون‌های
   دیگر هم قابل تکرار است. */
.nav-icon-demo{
    animation: nav-icon-float 2.4s ease-in-out infinite;
}
@keyframes nav-icon-float{
    0%, 100%{ transform: translateY(0); box-shadow: 0 2px 6px rgba(31, 45, 80, 0.08), inset 0 1px 0 rgba(255,255,255,.5); }
    50%{ transform: translateY(-3px); box-shadow: 0 6px 14px rgba(52, 87, 213, 0.28), inset 0 1px 0 rgba(255,255,255,.6); }
}

.nav-btn .badge{
    margin-right: auto;
    font-size: 10px;
    background: rgba(102,112,133,.15);
    padding: 2px 7px;
    border-radius: 999px;
}

/* ------------------------------------------------------------
   محتوای صفحه
   ------------------------------------------------------------ */

.page{
    flex: 1;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    display: none;
    flex-direction: column;
    gap: 16px;
}
.page.active{ display: flex; }

.glass-card{
    position: relative;
    z-index: 1;
    background: var(--glass-bg-strong);
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--glass-shadow);
    padding: 16px 20px;
}

/* وقتی داخل یک کارت، پیش‌نمایش/کشوی پیشنهاد مشتری باز است، همان کارت باید
   بالاتر از کارت‌های بعدی (مثلاً جدول زیرش) نمایش داده شود؛ وگرنه چون هر
   .glass-card به‌خاطر backdrop-filter یک stacking context جدا می‌سازد،
   پیش‌نمایش با اینکه position:absolute دارد باز هم زیر کارت بعدی که در
   ترتیب DOM بعد از آن می‌آید پنهان می‌شود. */
.glass-card:has(.suggest-box.show),
.glass-card:has(.customer-autocomplete-box.show),
.glass-card:has(.glass-select-panel.show){
    z-index: 30;
}

.section-title{
    font-size: 15px;
    font-weight: 800;
    margin: 0 0 4px 0;
}
.section-desc{
    font-size: 12.5px;
    color: var(--muted);
    margin: 0 0 10px 0;
}

/* ------------------------------------------------------------
   کارت‌های آماری داشبورد
   ------------------------------------------------------------ */

.stat-grid{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.stat-card{
    background: var(--glass-bg-strong);
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--glass-shadow);
    padding: 20px;
    text-align: center;
    transition: transform .15s ease;
}
.stat-card:hover{ transform: translateY(-3px); }

.stat-card .label{
    font-size: 12px;
    color: var(--muted);
    font-weight: 700;
    margin-bottom: 8px;
}
.stat-card .value{
    font-size: 28px;
    font-weight: 800;
    color: var(--primary);
}

/* ------------------------------------------------------------
   فرم‌ها
   ------------------------------------------------------------ */

.form-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 14px;
}

/* ردیف فرم به‌صورت افقی/فلکس — برای مواردی که چند فیلد با اندازه‌های
   متفاوت (تاریخ، مشتری، دکمه‌ی جستجوی کوچک، توضیحات و...) باید همه
   توی یک ردیف کنار هم بیفتند (مثل فرم «ثبت خروج/فروش» و «ثبت فاکتور
   خرید»). */
.form-grid-inline{
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px 12px;
}
.form-grid-inline .field{
    flex: 1 1 160px;
    min-width: 130px;
}
/* فیلد باریک با اندازه‌ی ثابت (مثل باکس تاریخ/مشتری که نباید کش بیاد) */
.field.field-fixed-sm{
    flex: 0 0 140px;
    max-width: 140px;
    min-width: 140px;
}
/* فیلد فقط برای جا دادن دکمه‌ی آیکونی کوچک کنار یک باکس دیگر */
.field.field-icon-only{
    flex: 0 0 auto;
    min-width: 0;
}
/* دکمه‌ی آیکونی کوچک (مثلاً 🔍) بدون متن — دقیقاً هم‌قد یک input معمولی
   تا کنار باکس مشتری/کالا درست بنشیند */
.btn-icon-sm{
    width: 34px;
    height: 34px;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
}

/* هدر یک کارت قابل‌جمع‌شدن (مثل فرم «ثبت خروج/فروش») — عنوان و دکمه‌ی
   نمایش/پنهان‌کردن در یک ردیف */
.collapsible-card-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 4px;
}
.collapsible-card-header .section-title{ margin: 0; }

.product-group-create{
    display: flex;
    align-items: flex-end;
    gap: 14px;
    padding: 12px 14px;
    margin: 0 0 16px;
    border: 1px solid rgba(52,87,213,.18);
    border-radius: var(--radius-md);
    background: rgba(52,87,213,.06);
}
.product-group-create .field{ flex: 1; min-width: 220px; }
.product-group-create .btn-row{ margin: 0; flex-wrap: nowrap; }
.product-group-delete{ margin-top: 4px; align-self: flex-start; }
@media (max-width: 640px){
    .product-group-create{ align-items: stretch; flex-direction: column; }
    .product-group-create .field{ min-width: 0; }
}

/* نسخه‌ی جمع‌وجور برای کارت‌های کوچک مثل مدیریت گروه‌های کالا —
   کمترین فضای عمودی ممکن رو می‌گیره تا جدول‌های زیرش تو صفحه گم نشن */
.glass-card-compact{
    padding: 14px 20px;
}
.glass-card-compact .section-title{
    margin-bottom: 2px;
}
.glass-card-compact .section-desc{
    margin-bottom: 10px;
}
.form-grid-compact{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px 14px;
}
@media (max-width: 900px){
    .form-grid-compact{ grid-template-columns: repeat(2, 1fr); }
}

.field{
    display: flex;
    flex-direction: column;
    gap: 5px;
    position: relative;
}
/* بدون این قانون، ویژگی HTML «hidden» روی فیلدهایی که کلاس .field دارند
   عملاً بی‌اثر می‌ماند: مرورگر به‌صورت پیش‌فرض روی [hidden] یک قانون
   display:none می‌گذارد، اما چون آن قانون جزو استایل خودِ مرورگر است نه
   استایل‌شیت برنامه، قانون display:flex بالا (که در همین فایل تعریف
   شده) با هم‌ارزشیِ specificity رویش می‌نشیند و فیلد را — با وجود
   hidden — همچنان به‌صورت flex نشان می‌دهد. مثال واقعی همین مشکل: باکس‌های
   «زنجیره‌ی انتقال چک» که با App.onChequeStatusChange() باید فقط برای
   وضعیت «خرج شده» ظاهر شوند، اما بدون این قانون از همان ابتدا (چون
   خودشان class="field" هم دارند) قابل مشاهده می‌ماندند.
   .field[hidden] با یک کلاس اضافه (specificity بالاتر از .field تنها)
   این را برای همیشه حل می‌کند. */
.field[hidden]{
    display: none;
}
.field label{
    font-size: 11.5px;
    color: var(--muted);
    font-weight: 700;
}
.field input, .field textarea{
    font-family: var(--font);
    font-size: 13px;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(31,45,80,.12);
    background: rgba(255,255,255,.75);
    outline: none;
    color: var(--text);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.field input:focus, .field textarea:focus{
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(52,87,213,.15);
}

/* کشویی‌های داخل فرم‌های واقعی (نوع چک، وضعیت، گروه کالا، نقش کاربر و
   ...) — بر خلاف کشویی‌های فیلتر نوار ابزار جدول‌ها (که عمداً مثل
   دکمه‌ی خاکستری «خروجی» می‌مانند، طبق قانون سراسری select{} پایین‌تر)،
   این‌ها باید دقیقاً همان ظاهر ورودی‌های متنی کنارشان را داشته باشند
   (باکس شیشه‌ای سفید با حاشیه‌ی نازک) نه یک دکمه‌ی خاکستری بدون حاشیه
   — وگرنه داخل یک فرم که بقیه‌ی فیلدهایش سفید/شیشه‌ای‌اند، این‌ها
   ناهماهنگ به چشم می‌آیند. */
.field select{
    font-family: var(--font);
    font-size: 13px;
    font-weight: 400;
    padding: 8px 32px 8px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(31,45,80,.12);
    background-color: rgba(255,255,255,.75);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0l5 6 5-6z' fill='%23667085'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    outline: none;
    color: var(--text);
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.field select:hover{ background-color: rgba(255,255,255,.92); }
.field select:focus{
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(52,87,213,.15);
}

/* ------------------------------------------------------------
   کشویی‌های شیشه‌ای سفارشی (glass-select) — جایگزین بصری کشویی‌های
   واقعی فرم‌ها. کاربر خواست باز شدنشان دقیقاً مثل پیش‌نمایش/کشوی
   پیشنهاد مشتری (`.customer-autocomplete-box`) به‌نظر برسد، نه یک
   لیست کشویی خام مرورگر (که هیچ‌وقت با CSS محض شیشه‌ای/blur نمی‌شود).
   خودِ <select> اصلی در DOM می‌ماند (مخفی) تا تمام منطق جاوااسکریپت
   موجود (خواندن/نوشتن .value، رویداد onchange) دست‌نخورده کار کند؛
   App.enhanceGlassSelect در app.js این پوشش را دور هر select می‌سازد.
   ------------------------------------------------------------ */

.glass-select-wrap{ position: relative; width: 100%; }
.glass-select-native{ display: none !important; }

.glass-select-box{
    position: relative;
    width: 100%;
    box-sizing: border-box;
    text-align: right;
    font-family: var(--font);
    font-size: 13px;
    padding: 8px 30px 8px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(31,45,80,.12);
    background-color: rgba(255,255,255,.75);
    color: var(--text);
    cursor: pointer;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.glass-select-box:hover{ background-color: rgba(255,255,255,.92); }
.glass-select-box.open,
.glass-select-box:focus-visible{
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(52,87,213,.15);
}
.glass-select-box::after{
    content: "";
    position: absolute;
    right: 13px;
    top: 45%;
    width: 7px;
    height: 7px;
    border-right: 2px solid var(--muted);
    border-bottom: 2px solid var(--muted);
    transform: translateY(-50%) rotate(45deg);
    transition: transform .18s ease;
    pointer-events: none;
}
.glass-select-box.open::after{
    transform: translateY(-20%) rotate(-135deg);
}

/* دقیقاً همان زبان طراحی/متغیرهای customer-autocomplete-box: بلور
   شیشه‌ای، حاشیه و سایه‌ی یکسان — تا واقعاً همان حس را بدهد، نه فقط
   شبیه آن.
   (hotfix) این پنل قبلاً position:absolute و فرزندِ .glass-select-wrap
   بود؛ وقتی select داخل جعبه‌ای مثل .modal-box (که backdrop-filter
   دارد) قرار می‌گرفت — دقیقاً مثل صفحه‌ی ورود — طبق مشخصات CSS خودِ
   backdrop-filter یک containing block جدید برای فرزندهای absolute/fixed
   می‌سازد، و overflow-y:auto مودال هم پنل را می‌برید؛ نتیجه این بود که
   کشو یا اصلاً دیده نمی‌شد یا پشتِ خودِ باکس/مودال گم می‌شد. دقیقاً
   همان مشکلی که پیش‌تر برای notif-panel حل شد: حالا این پنل با
   position:fixed به body منتقل می‌شود (App.enhanceGlassSelect) و
   موقعیتش هر بار موقع باز شدن با جاوااسکریپت بر اساس مکان باکس
   محاسبه می‌شود — دیگر هیچ‌وقت داخل هیچ containing block محدودی
   نیست. */
.glass-select-panel{
    display: none;
    position: fixed;
    background: var(--glass-bg-strong);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    box-shadow: 0 12px 30px rgba(31,45,80,.18);
    max-height: 260px;
    overflow-y: auto;
    z-index: 5000;
    padding: 4px;
}
.glass-select-panel.show{ display: block; }

.glass-select-option{
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text);
    transition: background .12s ease;
}
.glass-select-option:hover{ background: rgba(52,87,213,.10); }
.glass-select-option.active{
    background: rgba(52,87,213,.14);
    font-weight: 700;
    color: var(--primary-dark);
}
.glass-select-empty{
    padding: 10px;
    text-align: center;
    color: var(--muted);
    font-size: 12.5px;
}

/* باکس قیمت داخل جدول مودال‌های «ویرایش فاکتور خرید/فروش» — قبلاً یک
   input خام بدون کلاس بود (فقط style="width:120px" این‌لاین) و به‌همین
   خاطر ظاهرش با بقیه‌ی ورودی‌های برنامه (که از طریق ".field input"
   استایل می‌گیرند) یکی نبود. همون ظاهر رو اینجا هم عیناً می‌آوریم. */
.se-line-price, .pe-line-price{
    font-family: var(--font);
    font-size: 13px;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(31,45,80,.12);
    background: rgba(255,255,255,.75);
    outline: none;
    color: var(--text);
    transition: border-color .15s ease, box-shadow .15s ease;
    width: 120px;
}
.se-line-price:focus, .pe-line-price:focus{
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(52,87,213,.15);
}

/* برای فیلدهای عددی کوتاه (تعداد و مشابه) که نیازی به عرض کامل ندارند */
.field.field-narrow{
    max-width: 120px;
}

/* فیلد تاریخ شمسی (مثل 1404/05/20) — نیازی به عرض کامل ردیف ندارد */
.field.field-date{
    max-width: 140px;
}
.field.field-date input{
    direction: ltr;
    text-align: center;
    letter-spacing: .5px;
    font-variant-numeric: tabular-nums;
}

.btn-row{
    display: flex;
    gap: 8px;
    margin-top: 10px;
    justify-content: flex-start;
}

button.btn{
    font-family: var(--font);
    font-size: 12.5px;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    border: none;
    cursor: pointer;
    transition: transform .1s ease, filter .15s ease;
}
button.btn:active{ transform: scale(.97); }

.btn-primary{
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    color: #fff;
    box-shadow: 0 6px 14px rgba(52,87,213,.3);
}
.btn-primary:hover{ filter: brightness(1.06); }

.btn-ghost{
    background: rgba(102,112,133,.12);
    color: var(--text);
}
.btn-ghost:hover{ background: rgba(102,112,133,.2); }

.btn-danger{
    background: linear-gradient(135deg, var(--danger), #ff7a7e);
    color: #fff;
    box-shadow: 0 6px 14px rgba(229,72,77,.3);
}
.btn-danger:hover{ filter: brightness(1.06); }

.btn-sm{
    padding: 6px 12px;
    font-size: 12px;
    border-radius: 8px;
}

.btn-xs{
    padding: 4px 9px;
    font-size: 11px;
    border-radius: 7px;
    white-space: nowrap;
}

.badge{
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}
.badge-ok{
    background: rgba(22,163,74,.12);
    color: var(--success);
}
.badge-warn{
    background: rgba(229,72,77,.12);
    color: var(--danger);
}
.badge-info{
    background: rgba(52,87,213,.12);
    color: var(--primary);
}

/* بج سطح اعلان در تب «سابقه اعلان‌ها» — هم‌رنگ با کارت‌های زنگوله
   (.notif-item.level-*) تا بین این دو بخش هماهنگی بصری باشد */
.level-badge.level-overdue{ background: rgba(229,72,77,.12); color: var(--danger-dark); }
.level-badge.level-today{ background: rgba(217,119,6,.14); color: #b45309; }
.level-badge.level-soon{ background: rgba(52,87,213,.12); color: var(--primary-dark); }

/* جعبه‌ی راهنمای هشدار داخل فرم‌ها (مثلاً «این تیکه موجودی منفی
   داشت») — هم‌رنگ با badge-warn ولی به‌صورت یک بلوک کامل */
.note-box{
    background: rgba(229,72,77,.08);
    border: 1px dashed rgba(229,72,77,.35);
    color: var(--danger);
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 13px;
    line-height: 1.7;
}

/* ستون «موجودی»/«تعداد» وقتی منفیه (بدهیِ پیش‌فروش): عدد با badge-warn
   قرمزه، و یک باکس کوچیک‌تر قرمزِ دوم (همون رنگ/مدل badge-warn، فقط
   ریزتر) درست زیرش نشون می‌ده که دقیقاً چه بدهی‌ایه (مثلاً «پیش‌فروش»
   یا «کمبود موجودی») — به‌جای این‌که این توضیح داخل همون یک خط/باکس
   بیاد. */
.qty-stack{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
}
.badge-sub{
    padding: 2px 8px;
    font-size: 10px;
}

/* ------------------------------------------------------------
   کشویی‌ها (select) — همه جای برنامه (فرم‌ها، فیلترهای نوار ابزار
   جدول‌ها، ستون وضعیت داخل جدول‌ها) دقیقاً مثل دکمه‌ی خاکستری
   «خروجی» (btn-ghost) دیده می‌شن، نه مثل یک ورودی متنی — یک ظاهر
   یکدست برای تمام کشویی‌های برنامه
   ------------------------------------------------------------ */

select{
    font-family: var(--font);
    font-size: 13px;
    font-weight: 700;
    padding: 10px 34px 10px 16px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    background-color: rgba(102,112,133,.12);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0l5 6 5-6z' fill='%23667085'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    outline: none;
    color: var(--text);
    cursor: pointer;
    transition: background .18s ease, box-shadow .15s ease;
}
select:hover{ background-color: rgba(102,112,133,.2); }
select:focus{ box-shadow: 0 0 0 3px rgba(52,87,213,.15); }

/* داخل ردیف‌های جدول (مثل کشویی تغییر سریع وضعیت چک) فضای عمودی
   کمتری هست، پس فقط اندازه‌ش جمع‌وجورتر می‌شه، نه رنگ و ظاهرش */
table.data-table td select{
    font-size: 12.5px;
    padding: 6px 26px 6px 10px;
    border-radius: 8px;
    background-position: right 8px center;
}

/* ------------------------------------------------------------
   پیش‌نمایش زندهٔ مشتریان مشابه (typeahead)
   ------------------------------------------------------------ */

.suggest-box{
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    margin-top: 6px;
    background: var(--glass-bg-strong);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    box-shadow: 0 12px 30px rgba(31,45,80,.18);
    max-height: 260px;
    overflow-y: auto;
    z-index: 50;
    display: none;
}
.suggest-box.show{ display: block; }

.suggest-item{
    padding: 10px 14px;
    cursor: pointer;
    font-size: 13px;
    border-bottom: 1px solid rgba(31,45,80,.06);
    transition: background .12s ease;
}
.suggest-item:last-child{ border-bottom: none; }
.suggest-item:hover, .suggest-item.highlighted{
    background: rgba(52,87,213,.1);
}
.suggest-item .name{ font-weight: 700; }
.suggest-item .meta{ color: var(--muted); font-size: 11.5px; margin-top: 2px; }

/* ------------------------------------------------------------
   جدول‌ها
   ------------------------------------------------------------ */

.table-toolbar{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    gap: 10px;
}
.table-toolbar input{
    font-family: var(--font);
    font-size: 13px;
    padding: 9px 14px;
    border-radius: 999px;
    border: 1px solid rgba(31,45,80,.12);
    background: rgba(255,255,255,.75);
    width: 280px;
    outline: none;
}
.table-toolbar input:focus{
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(52,87,213,.15);
}

/* کشویی‌های فیلتر داخل نوار ابزار جدول‌ها (مثلاً فیلتر نوع/وضعیت چک) —
   ظاهرشون رو از قانون یکدست select در بالا می‌گیرن (مثل دکمه‌ی
   «خروجی»)؛ فقط ارتفاعشون با بقیه‌ی نوار ابزار هماهنگ می‌شه */
.table-toolbar select{
    padding: 9px 30px 9px 14px;
}

/* ------------------------------------------------------------
   منوی «خروجی» (چاپ / اکسل) — یک دکمه‌ی واحد به‌جای چند دکمه‌ی
   جدا، تا نوار ابزار جدول‌ها شلوغ نشود (Stage21)
   ------------------------------------------------------------ */

.export-menu{
    position: relative;
}
.export-menu-dropdown{
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 6px;
    min-width: 160px;
    background: var(--glass-bg-strong);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    box-shadow: 0 12px 30px rgba(31,45,80,.18);
    padding: 6px;
    z-index: 60;
}
.export-menu-dropdown.show{ display: block; }
.export-menu-dropdown button{
    display: block;
    width: 100%;
    text-align: right;
    background: transparent;
    border: none;
    border-radius: 8px;
    padding: 9px 12px;
    font-family: var(--font);
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    cursor: pointer;
    transition: background .12s ease;
}
.export-menu-dropdown button:hover{
    background: rgba(52,87,213,.1);
}

.table-wrap{
    border-radius: var(--radius-md);
    overflow-x: auto;
    overflow-y: auto;
    border: 1px solid rgba(31,45,80,.08);
    max-width: 100%;
}

/* وقتی جدول از عرض کادر بیشتر بشه (مثلاً ستون عملیات با چند دکمه)،
   دیگه چیزی بیرون نمی‌زنه و از بین نمی‌ره — با اسکرول افقی همون‌جا
   قابل‌دسترسه. ستون آخر (عملیات) رو هم می‌چسبونیم به جدول تا حتی موقع
   اسکرول افقی گم نشه. */
table.data-table{
    min-width: 100%;
}
table.data-table td:has(.row-actions){
    white-space: nowrap;
}

/* ستون‌های «نام» (کالا/مشتری/خدمت/کاربر/...) عریض‌تر باشن که متن معمولاً
   توی یک خط جا بشه و دو خطی نشه — هم توی جدول‌های اصلی صفحات و هم
   توی جدول‌های داخل مودال‌ها (پیکر جستجو، ویرایش فاکتور و...). چون
   عرض یک ستون توی HTML table بین همه‌ی ردیف‌ها مشترکه، همین min-width
   روی th برای کل ستون (هدر + سلول‌های بدنه) اعمال می‌شه. */
table.data-table thead th:has(input.col-filter[placeholder="نام کالا"]),
table.data-table thead th:has(input.col-filter[placeholder="نام مشتری"]),
table.data-table thead th:has(input.col-filter[placeholder="نام خدمت"]),
table.data-table thead th:has(input.col-filter[placeholder="نام"]){
    min-width: 220px;
}

/* سلول‌های نام (تولیدشده توسط app.js با کلاس cell-name، یا سلول‌های
   کد/نام کالای قابل‌دابل‌کلیک توی مودال‌های ویرایش فاکتور) هرگز نباید
   بشکنن و دو خطی بشن؛ اگه محتوا از عرض ستون بلندتر بود، به‌جای شکستن،
   با اسکرول افقیِ table-wrap دیده می‌شه. */
td.cell-name,
td.pe-line-code, td.pe-line-name, td.se-line-code, td.se-line-name{
    white-space: nowrap;
}

table.data-table{
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    background: rgba(255,255,255,.5);
}

table.data-table thead th{
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
    font-weight: 700;
    padding: 12px 14px;
    text-align: right;
    border-left: 1px solid rgba(255,255,255,.18);
    /* سرستون‌ها ثابت (sticky) بمونن و موقع اسکرول جدول به سمت پایین
       بالا نرن/محو نشن — چون هر table.data-table همیشه داخل یه
       .table-wrap با overflow-y واقعاً محدود (یا با flex:1 داخل یه
       .glass-card بلندی‌محدود، یا با max-height مستقیم روی خودِ
       table-wrap توی مودال‌ها) قرار داره، همون table-wrap مرجع
       اسکرولِ sticky می‌شه و top:0 دقیقاً یعنی «همیشه بالای همون
       جدول». چون thead قبل از tbody توی DOM میاد، z-index لازمه تا
       موقع اسکرول روی سطرهای بدنه (که پس‌زمینه‌ی نیمه‌شفاف/hover دارن)
       همیشه بالا بمونه. این تغییر هم روی نسخه‌ی دسکتاپ (pywebview) و
       هم روی مرورگر (وقتی از server.py باز می‌شه) یکسان اعمال می‌شه،
       چون هر دو دقیقاً همین فایل CSS رو سرو می‌کنن. */
    position: sticky;
    top: 0;
    z-index: 3;
}
table.data-table thead th:last-child{ border-left: none; }

/* دستگیره‌ی تغییر عرض ستون — با JS (App._initColumnResize) روی لبه‌ی
   چپ هر th اضافه می‌شه (چون جدول راست‌به‌چپه، لبه‌ی چپ هر ستون همون
   مرز با ستون بعدیه). کشیدن این دستگیره فقط عرض همون ستون رو عوض
   می‌کنه؛ دابل‌کلیک روش، عرض ستون رو با محتوا هم‌اندازه می‌کنه.
   توجه: قبلاً اینجا یک قانون جدا با «position: relative» روی همین
   th ست می‌شد تا دستگیره (position:absolute) نسبت به th جاگذاری
   بشه — ولی چون این قانون بعد از قانون «position: sticky» بالا
   می‌اومد و specificity یکسانی داشتن، همین «relative» جای «sticky»
   رو می‌گرفت و سرستون‌ها موقع اسکرول بالا می‌رفتن/گم می‌شدن! خودِ
   position:sticky هم یک context جایگذاری معتبر برای فرزند
   absolute می‌سازه، پس نیازی به این override جداگانه نبود. */
.col-resize-handle{
    position: absolute;
    top: 0;
    left: -4px;
    width: 8px;
    height: 100%;
    cursor: col-resize;
    z-index: 4;
    touch-action: none;
}
.col-resize-handle::after{
    content: "";
    position: absolute;
    top: 18%;
    bottom: 18%;
    left: 50%;
    width: 2px;
    transform: translateX(-50%);
    background: rgba(255,255,255,.32);
    border-radius: 2px;
    transition: background .15s ease, width .15s ease;
}
.col-resize-handle:hover::after,
th.col-resize-active .col-resize-handle::after{
    background: #fff;
    width: 3px;
}
body.col-resizing{ cursor: col-resize !important; user-select: none; }
body.col-resizing *{ cursor: col-resize !important; }

/* باکس جستجوی مینیمال داخل سرستون‌ها — روی همون پس‌زمینه گرادیانت هدر
   بدون قاب و پس‌زمینه‌ی اضافه، فقط یک خط زیرش، رنگ متن سفید و placeholder
   کمی کم‌رنگ‌تر که اسم ستون رو نشون میده. */
table.data-table thead th input.col-filter{
    width: 100%;
    background: rgba(255,255,255,.14);
    border: none;
    border-bottom: 1px solid rgba(255,255,255,.5);
    border-radius: 4px 4px 0 0;
    color: #fff;
    font-weight: 700;
    font-size: 12.5px;
    font-family: inherit;
    padding: 5px 8px;
    text-align: right;
    outline: none;
    box-sizing: border-box;
}
table.data-table thead th input.col-filter::placeholder{
    color: rgba(255,255,255,.85);
    font-weight: 700;
}
table.data-table thead th input.col-filter:focus{
    background: rgba(255,255,255,.26);
    border-bottom-color: #fff;
}

/* سلول‌های قابل‌کلیک برای تغییر کالای یک ردیف در پنجره‌ی ویرایش فاکتور
   (خرید/فروش) — خط‌چین زیرش نشون میده که با دابل‌کلیک قابل تغییره */
td.pe-line-code, td.pe-line-name, td.se-line-code, td.se-line-name{
    border-bottom: 1px dashed var(--primary, #3457d5);
}

table.data-table tbody td{
    padding: 11px 14px;
    text-align: right;
    border-left: 1px solid rgba(31,45,80,.06);
    border-bottom: 1px solid rgba(31,45,80,.06);
}
table.data-table tbody td:last-child{ border-left: none; }

table.data-table tbody tr:nth-child(even){ background: rgba(52,87,213,.045); }
table.data-table tbody tr:hover{ background: rgba(52,87,213,.1); }

table.data-table tbody tr.selected{
    background: rgba(52,87,213,.18) !important;
}

.row-actions{
    display: flex;
    gap: 5px;
    flex-wrap: nowrap;
    justify-content: flex-start;
}

.empty-state{
    text-align: center;
    padding: 30px;
    color: var(--muted);
    font-size: 13px;
}

/* ------------------------------------------------------------
   مودال (تأیید موارد مشابه)
   ------------------------------------------------------------ */

.modal-overlay{
    position: fixed;
    inset: 0;
    background: rgba(20, 26, 46, 0.35);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 100;
}
.modal-overlay.show{ display: flex; }

/* مودال‌های عمومیِ «تو در تو» (تأیید/پرسش مقدار/انتخابگر) ممکن است از
   داخلِ یک مودالِ دیگر (مثلاً ویرایش فاکتور فروش) باز شوند. چون همه‌ی
   .modal-overlay یک z-index یکسان دارند، ترتیب نمایش‌شان صرفاً به
   ترتیب‌شان در DOM بستگی داشت و همین باعث می‌شد این دو مودال — که
   زودتر از خیلی از مودال‌های صفحه در HTML آمده‌اند — پشتِ مودالِ باز
   قبلی پنهان بمانند. با یک z-index بالاتر، این دو همیشه بالای هر
   مودالِ دیگری می‌مانند، صرف‌نظر از موقعیت‌شان در DOM.*/
#generic-modal,
#picker-modal{ z-index: 150; }

.modal-box{
    width: 420px;
    max-width: 96vw;
    max-height: 86vh;
    overflow-y: auto;
    background: var(--glass-bg-strong);
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 50px rgba(20,26,46,.3);
    padding: 22px;
}
.modal-box h3{
    margin: 0 0 10px 0;
    font-size: 15px;
}
.modal-box p{
    font-size: 13px;
    color: var(--muted);
    line-height: 1.8;
    margin: 0 0 16px 0;
    white-space: pre-line;
}
.modal-box .btn-row{ justify-content: flex-start; margin-top: 0; }

/* جدول‌های داخل مودال‌ها (پیکر جستجو، ویرایش فاکتور خرید/فروش،
   مرجوعی) قبلاً چون فقط به‌اندازه‌ی table.data-table معمولی جا داشتن
   ولی مودال به‌اندازه‌ی کافی عریض نبود، مجبور به اسکرول افقی می‌شدن.
   با کوچیک‌تر کردن پدینگ/فونت مخصوص همین جدول‌ها (بدون تغییر ظاهر
   بقیه‌ی جدول‌های برنامه) + عریض‌ترکردن خودِ مودال‌ها (پایین همین فایل)،
   ستون‌ها معمولاً بدون نیاز به اسکرول افقی جا می‌شن؛ اگه باز هم پنجره
   خیلی باریک بود، overflow-x:auto موجود روی .table-wrap همچنان به‌عنوان
   شبکه‌ی ایمنی باقی می‌مونه. */
.modal-box table.data-table thead th,
.modal-box table.data-table tbody td{
    padding: 7px 9px;
    font-size: 12px;
}
.modal-box table.data-table thead th:has(input.col-filter[placeholder="نام کالا"]),
.modal-box table.data-table thead th:has(input.col-filter[placeholder="نام مشتری"]),
.modal-box table.data-table thead th:has(input.col-filter[placeholder="نام خدمت"]),
.modal-box table.data-table thead th:has(input.col-filter[placeholder="نام"]){
    min-width: 160px;
}

/* دکمه‌ی «ورود» و «ساخت کاربر مدیر» در مودال ورود — باید وسط‌چین باشه
   و یک فاصله‌ی خیلی کم از فیلدهای بالایی داشته باشه، نه اینکه بچسبه */
#login-overlay .btn-row{
    justify-content: center;
    margin-top: 8px;
}

/* ------------------------------------------------------------
   نوتیفیکیشن ساده
   ------------------------------------------------------------ */

.toast{
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--glass-bg-strong);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid var(--glass-border);
    border-radius: 999px;
    padding: 10px 22px;
    font-size: 13px;
    font-weight: 600;
    box-shadow: var(--glass-shadow);
    opacity: 0;
    transition: opacity .25s ease, transform .25s ease;
    z-index: 200;
    pointer-events: none;
}
.toast.show{
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.toast.success{ color: var(--success); }
.toast.error{ color: var(--danger); }

/* ------------------------------------------------------------
   زنگوله‌ی اعلان‌ها (سررسید چک و ...) — گوشه‌ی بالای نوار ابزار
   ------------------------------------------------------------ */

.notif-wrap{ position: relative; }

.notif-bell{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    color: var(--primary-dark);
    cursor: pointer;
    box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255,255,255,.7);
    transition: background .2s ease, box-shadow .2s ease, transform .15s ease, color .2s ease;
}
/* یک هایلایت نرم بالای دایره — همان ترفند نوری که کارت‌های شیشه‌ای
   بقیه‌ی برنامه هم به‌صورت ضمنی از box-shadow می‌گیرند، اینجا برای
   یک دایره‌ی کوچک واضح‌تر با یک گرادیان محو بالای آن ساخته می‌شود.
   به‌جای overflow:hidden روی خودِ دکمه (که بج قرمز را هم می‌بریید و
   داخل دایره ماسک می‌کرد)، این پوشش خودش را با border-radius:inherit
   به شکل دایره محدود می‌کند؛ بج آزاد است از لبه‌ی دایره بیرون بزند. */
.notif-bell::before{
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(160deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 55%);
    pointer-events: none;
}
.notif-bell:hover{
    background: var(--glass-bg-strong);
    box-shadow: 0 4px 18px rgba(52,87,213,.25), inset 0 1px 0 rgba(255,255,255,.8);
    transform: translateY(-1px);
}
.notif-bell:active{ transform: translateY(0) scale(.93); }

.notif-bell-icon{
    width: 18px;
    height: 18px;
    transform-origin: 50% 4px; /* لولا از بالای زنگوله، جایی که به دیوار وصله */
}

/* وقتی حداقل یک اعلان فوری (امروز/گذشته) هست، هم رنگ زنگوله گرم‌تر
   می‌شود هم آیکون هر چند ثانیه یک‌بار «زنگ می‌خورد» */
.notif-bell.has-alert{ color: var(--danger-dark); }
.notif-bell.has-alert .notif-bell-icon{ animation: notif-ring 3.2s ease-in-out infinite; }

@keyframes notif-ring{
    0%, 74%, 100% { transform: rotate(0); }
    76% { transform: rotate(-14deg); }
    78% { transform: rotate(12deg); }
    80% { transform: rotate(-9deg); }
    82% { transform: rotate(6deg); }
    84% { transform: rotate(-3deg); }
    86% { transform: rotate(0); }
}

.notif-badge{
    position: absolute;
    top: -3px;
    left: -3px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 999px;
    background: linear-gradient(135deg, #ff6b6b, var(--danger));
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 2px var(--glass-bg-strong), 0 2px 6px rgba(197,53,57,.4);
    animation: notif-badge-pop .25s cubic-bezier(.34,1.56,.64,1);
}
.notif-badge::after{
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: var(--danger);
    z-index: -1;
    animation: notif-badge-pulse 2s ease-out infinite;
}

@keyframes notif-badge-pop{
    0% { transform: scale(0); }
    70% { transform: scale(1.15); }
    100% { transform: scale(1); }
}
@keyframes notif-badge-pulse{
    0% { opacity: .55; transform: scale(1); }
    100% { opacity: 0; transform: scale(2.1); }
}

.notif-panel{
    display: flex;
    flex-direction: column;
    position: fixed;
    /* موقعیت واقعی (top/left) هر بار موقع باز شدن با جاوااسکریپت
       (App.toggleNotifPanel) بر اساس مکان دکمه‌ی زنگوله محاسبه و
       inline ست می‌شود؛ این مقادیر فقط پیش‌فرض اولیه‌اند. */
    top: 70px;
    left: 20px;
    width: 340px;
    max-height: 420px;
    background: var(--glass-bg-strong);
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    box-shadow: var(--glass-shadow);
    /* بالاتر از کارت‌های شیشه‌ای صفحات (که خودشان stacking context
       دارند) ولی پایین‌تر از picker-modal (۱۵۰) که همیشه باید روی
       همه چیز باشد. */
    z-index: 140;
    overflow: hidden;

    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px) scale(.97);
    transform-origin: 0 0;
    pointer-events: none;
    transition: opacity .18s ease, transform .18s cubic-bezier(.2,.9,.3,1.3), visibility .18s;
}
.notif-panel.show{
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.notif-panel-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    font-weight: 700;
    font-size: 13px;
    border-bottom: 1px solid var(--glass-border);
    flex-shrink: 0;
    background: linear-gradient(90deg, rgba(52,87,213,.08), transparent);
}

.notif-panel-list{
    overflow-y: auto;
    padding: 6px;
}

.notif-empty{
    padding: 24px 10px;
    text-align: center;
    color: var(--muted);
    font-size: 13px;
}

.notif-item{
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    margin-bottom: 4px;
    cursor: pointer;
    border-inline-start: 3px solid var(--muted);
    background: rgba(255,255,255,.4);
    transition: background .15s ease, transform .12s ease;
    animation: notif-item-in .22s ease both;
}
.notif-item:hover{ background: rgba(255,255,255,.8); transform: translateX(-2px); }
.notif-item:last-child{ margin-bottom: 0; }

@keyframes notif-item-in{
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.notif-item.level-overdue{ border-inline-start-color: var(--danger); }
.notif-item.level-today{ border-inline-start-color: #d97706; }
.notif-item.level-soon{ border-inline-start-color: var(--primary); }

.notif-item-title{
    font-size: 12px;
    font-weight: 800;
}
.notif-item.level-overdue .notif-item-title{ color: var(--danger-dark); }
.notif-item.level-today .notif-item-title{ color: #b45309; }
.notif-item.level-soon .notif-item-title{ color: var(--primary-dark); }

.notif-item-msg{
    font-size: 12.5px;
    color: var(--text);
    line-height: 1.6;
}

/* اسکرول‌بار نازک و مینیمال */
::-webkit-scrollbar{ width: 8px; height: 8px; }
::-webkit-scrollbar-track{ background: transparent; }
::-webkit-scrollbar-thumb{ background: rgba(102,112,133,.35); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover{ background: rgba(102,112,133,.55); }

/* انتخاب مشتری — پیشنهاد زنده در تمام فرم‌هایی که فیلد مشتری دارند */
.customer-autocomplete-wrap{ position:relative; width:100%; }
.customer-autocomplete-wrap > input{ width:100%; box-sizing:border-box; }
.customer-autocomplete-box{
    position:absolute;
    top:calc(100% + 4px);
    right:0;
    left:0;
    background:var(--glass-bg-strong);
    backdrop-filter:blur(20px) saturate(180%);
    -webkit-backdrop-filter:blur(20px) saturate(180%);
    border:1px solid var(--glass-border);
    border-radius:var(--radius-md);
    box-shadow:0 12px 30px rgba(31,45,80,.18);
    max-height:260px;
    overflow-y:auto;
    z-index:5000;
    display:none;
}
.customer-autocomplete-box.show{ display:block; }
.customer-autocomplete-item{
    padding:9px 12px;
    cursor:pointer;
    border-bottom:1px solid rgba(31,45,80,.06);
}
.customer-autocomplete-item:last-child{ border-bottom:none; }
.customer-autocomplete-item:hover, .customer-autocomplete-item.active{ background:rgba(52,87,213,.10); }
.customer-autocomplete-item .name{ font-weight:700; }
.customer-autocomplete-item .meta{ color:var(--muted); font-size:10px; margin-top:2px; }

/* فیلدهای «زنجیره‌ی انتقال چک» (نفر اول/دوم) که فقط برای وضعیت «خرج
   شده» ظاهر می‌شوند — قبلاً توی همون گرید دوستونه‌ی عکس‌های چک بودند و
   چون برچسب‌هاشون بلند است، کنار عکس‌ها به‌هم می‌ریختند. حالا یک ردیف
   جدا و تمام‌عرض هستند، هرکدام زیر هم، و عکس‌ها همیشه توی گرید خودشان
   ثابت می‌مانند. وقتی هیچ‌کدام نمایش داده نمی‌شوند، این بخش هیچ فاصله‌ی
   اضافه‌ای نمی‌گیرد. */
.cheque-chain-fields{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.cheque-chain-fields:has(.field:not([hidden])){
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px dashed rgba(31,45,80,.12);
}

.cheque-image-field input[type="file"]{
    font-size: 12px;
    padding: 7px 9px;
    border: 1px solid rgba(31,45,80,.12);
    border-radius: var(--radius-sm);
    background: rgba(255,255,255,.75);
    color: var(--text);
}
.cheque-image-preview{
    display: block;
    width: 120px;
    height: 76px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(31,45,80,.14);
    margin-top: 4px;
}

.cheque-view-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:12px}
.cheque-view-image,.cheque-view-empty{min-height:180px;padding:10px;border:1px solid rgba(31,45,80,.12);border-radius:var(--radius-md);background:rgba(255,255,255,.5);text-align:center}
.cheque-view-label{font-size:12px;font-weight:800;color:var(--muted);margin-bottom:8px}
.cheque-view-image img{display:block;width:100%;height:220px;object-fit:contain;border-radius:var(--radius-sm);background:rgba(31,45,80,.04)}
.cheque-view-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--muted);font-size:12px}
@media(max-width:640px){.cheque-view-grid{grid-template-columns:1fr}}