/*
 * سیستم طراحی پایه پنل iqpack.ir -- تسک ارتقاء UI، بخش الف-۱.
 * تکمیل/یکدست‌سازی رنگ‌ها و spacing موجود پنل (استخراج‌شده از
 * public/css/welcome/welcome-panel.css: تیل #16ACB7/#0091A5/#00515C،
 * نارنجی #F7941D/#F68B35) -- نه بازطراحی از صفر.
 * additive و خارج از باندل Vue -- بدون نیاز به بیلد، شامل layouts/iqpack_panel.blade.php می‌شود.
 */

:root {
    /* رنگ‌ها -- برند واقعی پنل */
    --color-primary: #16ACB7;
    --color-primary-dark: #0091A5;
    --color-primary-darker: #00515C;
    --color-accent: #F7941D;
    --color-accent-dark: #F68B35;
    --color-secondary: #6c757d;
    --color-success: #1F9D55;
    --color-danger: #DC3545;
    --color-warning: #F0AD4E;
    --color-info: #17A2B8;
    --color-neutral-50: #f8f9fa;
    --color-neutral-100: #e5eeed;
    --color-neutral-200: #dbe4e4;
    --color-neutral-300: #C0D7DB;
    --color-neutral-600: #868585;
    --color-neutral-900: #3c3b3b;

    /* تایپوگرافی */
    --font-family-fa: 'Vazirmatn', 'IRANSans', Tahoma, sans-serif;
    --font-size-xs: 0.75rem;   /* 12px */
    --font-size-sm: 0.875rem;  /* 14px */
    --font-size-md: 1rem;      /* 16px */
    --font-size-lg: 1.25rem;   /* 20px */
    --font-size-xl: 1.75rem;   /* 28px */
    --line-height-fa: 1.8;

    /* spacing scale (پایه ۴px) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-8: 48px;

    /* border-radius یکدست */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 14px;

    /* سایه‌ها */
    --shadow-1: 0 1px 3px rgba(0,0,0,.08);
    --shadow-2: 0 2px 8px rgba(0,0,0,.12);
    --shadow-3: 0 4px 20px rgba(0,0,0,.18);

    /* z-index scale */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-modal: 1050;
    --z-toast: 1080;
    --z-bell: 99999; /* بالاتر از هرچیز -- زنگولهٔ اعلان */
}

@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700&display=swap');

body, .btn, input, select, textarea {
    font-family: var(--font-family-fa);
}

body {
    line-height: var(--line-height-fa);
}

/* ===== تایپوگرافی: سلسله‌مراتب واضح ===== */
h1 { font-size: var(--font-size-xl); font-weight: 700; }
h2 { font-size: 1.5rem; font-weight: 700; }
h3 { font-size: var(--font-size-lg); font-weight: 600; }
h4, h5 { font-size: var(--font-size-md); font-weight: 600; }
small, .caption { font-size: var(--font-size-xs); color: var(--color-neutral-600); }
p, .card-body, td { line-height: var(--line-height-fa); }
.text-long-form { max-width: 68ch; }

/* ===== جداول (الف-۲) ===== */
/* بازرسی baseline (Playwright) هیچ overflow افقی روی هیچ صفحه/ویوپورتی پیدا
   نکرد -- یعنی جداول فعلی احتمالاً از قبل داخل .table-responsive بوت‌استرپ
   هستند. به‌جای force کردن display:block روی همهٔ <table> (که جدول‌های
   دوستونی نمایشی/غیرقابل‌اسکرول را هم می‌شکند)، فقط یک شبکهٔ ایمنی افزوده
   می‌شود -- اگر جایی table بدون این کلاس‌ها بود، باز هم گیر نمی‌کند. */
table {
    max-width: 100%;
}
.table-responsive {
    overflow-x: auto;
}
table thead th {
    position: sticky;
    top: 0;
    background: var(--color-neutral-50);
    z-index: var(--z-sticky);
    white-space: nowrap;
}
table tbody tr:nth-child(even) { background: var(--color-neutral-50); }
table tbody tr:hover { background: var(--color-neutral-100); }
table td.text-num, table th.text-num,
table td[data-type="number"], table td[data-type="date"] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.empty-state {
    text-align: center;
    padding: var(--space-8) var(--space-4);
    color: var(--color-neutral-600);
}
.empty-state i, .empty-state .icon {
    font-size: 2.5rem;
    color: var(--color-neutral-300);
    display: block;
    margin-bottom: var(--space-3);
}

/* موبایل: جدول‌های بزرگ به کارت تبدیل شوند (اگر ستون data-label دارند) */
@media (max-width: 640px) {
    table.responsive-cards, table.responsive-cards tbody, table.responsive-cards tr, table.responsive-cards td {
        display: block;
        width: 100%;
    }
    table.responsive-cards thead { display: none; }
    table.responsive-cards tr {
        margin-bottom: var(--space-4);
        border: 1px solid var(--color-neutral-200);
        border-radius: var(--radius-md);
        padding: var(--space-2);
        box-shadow: var(--shadow-1);
    }
    table.responsive-cards td {
        text-align: right;
        padding: var(--space-2) var(--space-3);
        border: none;
    }
    table.responsive-cards td[data-label]::before {
        content: attr(data-label);
        float: right;
        font-weight: 600;
        color: var(--color-neutral-600);
        margin-left: var(--space-2);
    }
}

/* ===== فرم‌ها و input ها (الف-۴) ===== */
label {
    display: inline-block;
    font-size: var(--font-size-sm);
    font-weight: 600;
    margin-bottom: var(--space-1);
    color: var(--color-neutral-900);
}
input, select, textarea, .form-control {
    border-radius: var(--radius-sm);
    transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus, .form-control:focus {
    outline: none;
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px rgba(22,172,183,.2) !important;
}
input.is-invalid, select.is-invalid, textarea.is-invalid, .form-control.is-invalid {
    border-color: var(--color-danger) !important;
}
.invalid-feedback {
    display: block;
    color: var(--color-danger);
    font-size: var(--font-size-xs);
    margin-top: var(--space-1);
}
input:disabled, select:disabled, textarea:disabled, .form-control:disabled {
    background: var(--color-neutral-100);
    color: var(--color-neutral-600);
    cursor: not-allowed;
}
@media (max-width: 640px) {
    input, select, textarea, .form-control, .btn, button {
        min-height: 44px;
    }
}
.btn.is-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}
.btn.is-loading::after {
    content: '';
    position: absolute;
    width: 16px; height: 16px;
    top: 50%; left: 50%;
    margin: -8px 0 0 -8px;
    border: 2px solid rgba(255,255,255,.5);
    border-top-color: #fff;
    border-radius: 50%;
    animation: btn-spin .6s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* ===== کارت‌ها و status badge (الف-۵) ===== */
.card {
    box-shadow: var(--shadow-1);
    border-radius: var(--radius-md);
    border: none;
}
.card-body { padding: var(--space-4); }
.badge {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-sm);
    padding: var(--space-1) var(--space-2);
    font-size: var(--font-size-xs);
    font-weight: 600;
    vertical-align: middle;
}
.badge-success, .status-active   { background: rgba(31,157,85,.12); color: var(--color-success); }
.badge-danger,  .status-expired,
.status-cancelled, .status-rejected { background: rgba(220,53,69,.12); color: var(--color-danger); }
.badge-warning, .status-pending  { background: rgba(240,173,78,.15); color: #a06a0a; }
.badge-secondary, .status-suspended, .status-inactive { background: var(--color-neutral-100); color: var(--color-neutral-600); }
.card .badge, .card .btn { vertical-align: middle; }

/* ===== تسک هم‌راستاسازی IQGeneral · بخش ۵ (قاعدهٔ رنگ) =====
   یک <style> سراسری قدیمی (بدون فایل قابل ردیابی، احتمالاً از یک partial
   مشترک قدیمی) با سلکتور nth-child به هر برچسب معمولی .input-group-text
   یک پس‌زمینهٔ نارنجی متناوب (zebra-stripe) می‌داد -- روی کل فرم‌های
   «مدیریت سازمانی»/«مدیریت مالی» و احتمالاً بیشتر. این با قاعدهٔ رنگ
   تثبیت‌شده (نارنجی = فقط دکمهٔ CTA اصلی) در تضاد است و باعث می‌شد دکمهٔ
   واقعی «ایجاد» در میان برچسب‌های هم‌رنگ گم شود. برچسب‌هایی که عمداً رنگ
   دارند (مثل .bg-blue تیل در FormPartItem.vue) با :not([class*="bg-"])
   دست‌نخورده می‌مانند. */
.input-group-text:not([class*="bg-"]) {
    background-color: #e9ecef !important;
    color: #495057 !important;
    border-color: #ced4da !important;
}