/* =================================================================================
   استایل‌های پایه و سراسری
   =================================================================================
   قبلاً همهٔ CSS داخل تگ <style> در index.html بود. الان به سه فایل منطقی
   تقسیم شده: base (پایه), components (اجزای ظاهری تکرارشونده),
   responsive (قوانین مخصوص صفحات کوچک). هیچ رنگ/فونت/افکتی نسبت به نسخهٔ
   قبلی تغییر نکرده - فقط محل نگهداری‌شان مرتب شده است.
*/

html, body {
    height: 100%;
}

body {
    font-family: 'Vazirmatn', sans-serif;
    background-color: #f1f5f9;
    color: #0f172a;
    margin: 0;
}

::-webkit-scrollbar {
    height: 8px;
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
    background: #94a3b8;
    border-radius: 10px;
}

.animate-fade {
    animation: fadeIn 0.3s ease-out;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

.main-content-scroll {
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 5rem;
}


/* =================================================================================
   استایل اجزای تکرارشونده (جدول، فرم ورود، کارت‌ها، دکمه‌ها)
   ================================================================================= */

/* --- جدول --- */
.custom-table {
    font-size: 0.95rem;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}
.custom-table thead tr {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    color: white;
    position: sticky;
    top: 0;
    z-index: 10;
}
.custom-table tfoot tr {
    background-color: rgba(15, 23, 42, 0.9);
    color: white;
    font-weight: 900;
    font-size: 1.1rem;
}
.custom-table tbody tr:nth-child(even) { background-color: #f8fafc; }
.custom-table tbody tr:hover { background-color: #f1f5f9; transition: all 0.2s; cursor: pointer; }
.custom-table th {
    padding: 1.25rem 1rem;
    font-size: 0.9rem;
    text-align: center;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
}
.custom-table th:hover { background: rgba(255,255,255,0.1); }
.custom-table td {
    padding: 1rem;
    text-align: center;
    vertical-align: middle;
    border-bottom: 1px solid #e2e8f0;
}
/* برای ستون‌هایی که می‌توانند یک رشتهٔ طولانی بدون فاصله داشته باشند
   (مثل شمارهٔ حساب/فاکتور داخل شرح تراکنش) - عمداً روی همهٔ سلول‌های
   جدول اعمال نمی‌شود، چون overflow-wrap: anywhere حتی کلمات/برچسب‌های
   خیلی کوتاه (مثل «بس») را هم وقتی ستون تنگ می‌شود از وسط می‌شکند؛ فقط
   همان ستون خاصی که واقعاً به آن نیاز دارد باید این کلاس را بگیرد. */
.cell-wrap-anywhere { overflow-wrap: anywhere; }

.table-container {
    width: 100%;
    overflow-x: auto;
    border-radius: 1.5rem;
    background: white;
    border: 1px solid #e2e8f0;
    margin-bottom: 1rem;
}

/* --- ردیف قابل‌بازشدن "+" (جدول واکنش‌گرا) --- */
.expand-col { width: 44px; }
.expand-btn {
    width: 32px; height: 32px;
    border-radius: 0.75rem;
    border: 2px solid #e2e8f0;
    background: white;
    color: #64748b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.expand-btn:hover { border-color: #3b82f6; color: #3b82f6; }
.expanded-detail-row td {
    background: #f8fafc;
    padding: 1.25rem 1.5rem;
    text-align: right;
}
.expanded-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.75rem 1.5rem;
}
.expanded-detail-item {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.expanded-detail-label {
    font-size: 0.7rem;
    font-weight: 900;
    color: #94a3b8;
    text-transform: uppercase;
}
.expanded-detail-value {
    font-weight: 800;
    color: #1e293b;
}

/* --- فرم ورود --- */
.login-gradient { background: radial-gradient(circle at top left, #1e293b 0%, #0f172a 100%); }
.glass-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* --- فیلترها --- */
.filter-input {
    height: 48px;
    background: #fff;
    border: 2px solid #e2e8f0;
    border-radius: 0.85rem;
    padding: 0 1rem;
    font-weight: 900;
    font-size: 0.95rem;
    outline: none;
    transition: all 0.2s;
    text-align: center;
    color: #1e293b;
    width: 100%;
}
.filter-input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
}

/* --- دکمه‌ها و کارت‌ها --- */
.modern-back-btn {
    background: #fff;
    border: 2px solid #e2e8f0;
    border-radius: 1rem;
    height: 48px;
    width: 100%;
    max-width: 140px;
    font-weight: 900;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.3s;
    color: #64748b;
}
.modern-back-btn:hover {
    border-color: #3b82f6;
    color: #3b82f6;
    background: #f0f7ff;
    transform: translateX(4px);
}

.header-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 2.5rem;
    padding: 2rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.chart-container {
    position: relative;
    height: 350px;
    width: 350px;
    max-width: 100%;
    margin: 0 auto;
}

.sort-icon-svg {
    width: 14px;
    height: 14px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 4px;
}

.page-btn {
    padding: 0.75rem;
    border-radius: 1rem;
    border: 2px solid #e2e8f0;
    background: white;
    transition: all 0.2s;
}
.page-btn:hover:not(:disabled) {
    border-color: #3b82f6;
    color: #3b82f6;
    transform: scale(1.05);
}
.page-btn:disabled { opacity: 0.3; cursor: not-allowed; }

/* دکمه‌های صفحه‌بندی روی موبایل - رفع باگ واقعی گزارش‌شده (مرداد ۱۴۰۵):
   اندازهٔ پیش‌فرض دکمه‌ها + بج «صفحه X / Y» روی گوشی‌های باریک (~۳۹۰
   پیکسل) کمی از عرض واقعی صفحه بیشتر می‌شد و دکمهٔ آخر («تنها یکی از
   ۵ دکمه) به خط بعد می‌افتاد. با کوچک‌کردن فاصلهٔ داخلی و فونت، همهٔ
   ۵ عنصر (۴ دکمه + بج) در یک خط جا می‌شوند. */
@media (max-width: 480px) {
    .page-btn {
        padding: 0.5rem;
    }
    .page-btn svg {
        width: 1rem;
        height: 1rem;
    }
}

/* --- «+» و ردیف بازشدهٔ فوتر جمع کل (زمینهٔ تیرهٔ فوتر، متن سفید) --- */
.custom-table tfoot .expand-btn {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.35);
    color: white;
}
.custom-table tfoot .expand-btn:hover { border-color: white; color: white; background: rgba(255, 255, 255, 0.25); }
.custom-table tfoot .expanded-detail-row td {
    background: rgba(15, 23, 42, 0.9) !important;
    border-bottom: none;
}
.custom-table tfoot .expanded-detail-label { color: #cbd5e1; }
.custom-table tfoot .expanded-detail-value { color: white; }

/* --- راهنمای کاربری --- */
.guide-overlay,
.guide-doc {
    text-align: start;
}

.guide-help-btn {
    width: 2.25rem;
    height: 2.25rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 2px solid #e2e8f0;
    border-radius: 9999px;
    color: #64748b;
    transition: all 0.3s;
}
.guide-help-btn:hover {
    border-color: #3b82f6;
    color: #3b82f6;
    background: #f0f7ff;
}

.guide-topbar-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    height: 2.25rem;
    padding: 0 0.75rem;
    border-radius: 0.75rem;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 900;
    transition: all 0.3s;
    white-space: nowrap;
}


/* =================================================================================
   قوانین واکنش‌گرا (Responsive)
   =================================================================================
   کلاس‌های Tailwind (مثل sm: / md: / lg:) خودشان واکنش‌گرا هستند و نیازی به
   قانون دستی ندارند. این فایل فقط برای کلاس‌های سفارشی خودمان (که در
   styles/components.css تعریف شده‌اند) است.

   دو نقطهٔ شکست مجزا در پروژه: نوار کناری/هدر (چیدمان کلی صفحه) زیر
   1024px (معادل lg در Tailwind) به حالت موبایل/اورلی می‌روند - این خودِ
   Sidebar.jsx/App.jsx است، نه این فایل. ستون‌های جدولِ بدون strictPrimary
   (پایین همین فایل) هنوز زیر 768px (معادل md) با کلاس hide-on-narrow
   پنهان می‌شوند - این دو عدد عمداً یکی نیستند: تا 1024px نوار کناری کنار
   می‌رود و فضای واقعی جدول به‌خودی‌خود بیشتر می‌شود، برای همین ستون‌های
   غیر-strictPrimary نیازی به پنهان‌شدن زودتر از 768px ندارند.
*/

/* ستون دکمهٔ "+" فقط وقتی در DOM اصلاً رندر می‌شود که JS (پراپ hasSecondary
   در ResponsiveTable.jsx) تشخیص داده حداقل یک ستون واقعاً پنهان است - این
   تصمیم مستقل از عرض صفحه است (برای جدول‌های strictPrimary در هر عرضی
   می‌تواند درست باشد، نه فقط زیر ۷۶۸px)، پس اینجا هیچ قانون CSS ثابتی
   نباید آن را بدون قید‌وشرط مخفی کند - یک نسخهٔ قبلی این فایل دقیقاً همین
   اشتباه را داشت (`@media (min-width:768px){.expand-col{display:none}}`)
   که باعث می‌شد دکمهٔ "+" در تبلت/لپ‌تاپ هیچ‌وقت دیده نشود، حتی برای
   جدول‌هایی که واقعاً ستون پنهان داشتند. */

/* فوتر جدول را هر کامپوننت خودش می‌سازد و معمولاً همیشه یک سلول expand-col
   دارد، ولی هدر/بدنه (ResponsiveTable.jsx) این ستون را فقط وقتی رندر
   می‌کنند که واقعاً ستونی پنهان باشد. اگر ستونی پنهان نباشد، سلول اضافهٔ
   فوتر یک ستون فانتوم ایجاد می‌کرد (فضای خالی انتهای هر سطر و جابه‌جایی
   جمع‌ها). ResponsiveTable.jsx وضعیت واقعی را روی خودِ جدول علامت می‌زند
   و این قانون، هر expand-col اضافه را فقط در همان حالت مخفی می‌کند - برای
   همهٔ فوترهای فعلی و آینده، بدون نیاز به دست‌زدن به تک‌تک کامپوننت‌ها. */
.custom-table[data-has-secondary="false"] .expand-col {
    display: none;
}

@media (max-width: 767px) {
    .custom-table th.hide-on-narrow,
    .custom-table td.hide-on-narrow {
        display: none;
    }

    /* نمودار دونات در پیشخوان روی موبایل کوچک‌تر و مربعی می‌ماند */
    .chart-container {
        width: min(280px, 80vw);
        height: min(280px, 80vw);
    }

    /* کارت‌های اصلی صفحات با گوشهٔ کمتر گرد روی موبایل، تا فضای مفید بیشتر شود */
    .header-card {
        border-radius: 1.5rem;
        padding: 1.5rem;
    }
}

@media (max-width: 480px) {
    .custom-table th,
    .custom-table td {
        padding: 0.65rem 0.5rem;
        font-size: 0.85rem;
    }
    .expand-col { width: 36px; }
    .expand-btn { width: 28px; height: 28px; }
}

/* گوشی‌های خیلی باریک (اکثر اندروید‌های معمولی، ~۳۶۰-۴۰۰ پیکسل): حتی با
   کاهش قبلی، مجموع عرض ستون‌های همیشه‌نمایان (مثلاً کد+نام+مانده در
   «عملکرد مشتریان»/«مرور حسابها») گاهی چند پیکسل از عرض واقعی صفحه
   بیشتر می‌شد و باعث یک اسکرول افقی کوچک و آزاردهنده در خودِ جدول
   می‌شد (نه کل صفحه) - با تست واقعی روی عرض ۳۹۰ پیکسل (نمونهٔ گزارش‌شده)
   تأیید و رفع شد.*/
@media (max-width: 400px) {
    .custom-table th,
    .custom-table td {
        padding: 0.55rem 0.3rem;
        font-size: 0.8rem;
    }
}

/* =================================================================================
   استایل مخصوص چاپ (دکمهٔ چاپ در صفحهٔ شرح عملکرد)
   =================================================================================
   وقتی کاربر چاپ می‌زند، فقط خودِ گزارش (فیلترها + جدول) چاپ شود؛ نوار
   کناری، هدر بالای صفحه، و دکمه‌های چاپ/اکسل/پی‌دی‌اف اصلاً چاپ نشوند. */
@media print {
    aside, .no-print, .app-header {
        display: none !important;
    }
    .print-only {
        display: block !important;
    }
    .app-root {
        display: block !important;
        height: auto !important;
        overflow: visible !important;
    }
    body, .main-content-scroll {
        overflow: visible !important;
        height: auto !important;
        background: white !important;
    }
    .table-container {
        box-shadow: none !important;
        overflow: visible !important;
    }
    /* سربرگ جدول در ابتدای هر صفحهٔ چاپ تکرار شود؛ هیچ ردیفی وسط دو صفحه
       نصف نشود - این دو قانون علت اصلی نامنظم بودن قبلیِ صفحه‌بندی چاپ بود */
    .custom-table thead {
        display: table-header-group;
    }
    .custom-table tfoot {
        display: table-footer-group;
    }
    .custom-table tr {
        page-break-inside: avoid;
        break-inside: avoid;
    }
}

/* =================================================================================
   چاپ راهنمای کاربری
   ================================================================================= */
@media print {
    body.guide-open .app-root {
        display: none !important;
    }
    .guide-overlay {
        position: static !important;
        inset: auto !important;
        overflow: visible !important;
        background: white !important;
    }
    .guide-doc {
        box-shadow: none !important;
        border: none !important;
        border-radius: 0 !important;
    }
    .guide-doc, .guide-doc * {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .guide-block {
        break-inside: avoid;
    }
    .guide-heading {
        break-after: avoid;
    }
}