/* ═══════════════════════════════════════════════════════════════════════════
   Sales Ledger — app.css
   RTL, Persian — Harbor/Ember/Ink glassmorphism design system
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Reset & Base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    /* Ink (خنثی) */
    --ink-50:#f6f7f9;   --ink-100:#eceef2;  --ink-200:#d5dae3;  --ink-300:#b0b9cb;
    --ink-400:#8593ae;  --ink-500:#667694;  --ink-600:#515e7a;  --ink-700:#434d63;
    --ink-800:#3a4254;  --ink-900:#343947;  --ink-950:#22262f;

    /* Harbor (اصلی) */
    --harbor-50:#f0faf8;  --harbor-100:#d5f2ec; --harbor-200:#abe4d8; --harbor-300:#74cfbf;
    --harbor-400:#3fb5a2; --harbor-500:#249987; --harbor-600:#1a7a6d; --harbor-700:#186259;
    --harbor-800:#174f49; --harbor-900:#15423d; --harbor-950:#0a2624;

    /* Ember (تأکیدی) */
    --ember-50:#fff6ed;  --ember-100:#ffead5; --ember-200:#fdd1aa; --ember-300:#fcb174;
    --ember-400:#f9853c; --ember-500:#f76716; --ember-600:#e84d0c; --ember-700:#c0380c;

    --color-primary:     var(--harbor-600);
    --color-primary-dk:  var(--harbor-700);
    --color-success:     #15803d;
    --color-success-dk:  #0f5c2e;
    --color-warning:     var(--ember-600);
    --color-danger:      #be123c;
    --color-danger-dk:   #9f0f33;
    --color-purple:      #8b5cf6;
    --color-orange:      var(--ember-500);
    --color-dark:        var(--harbor-950);

    --bg-body:           #f4f7f6;
    --bg-card:           #ffffff;
    --bg-sidebar:        var(--harbor-950);
    --bg-sidebar-hover:  var(--harbor-900);
    --bg-topbar:         #ffffff;

    --text-primary:      var(--ink-950);
    --text-secondary:    var(--ink-700);
    --text-muted:        var(--ink-500);
    --text-sidebar:      #9fbdb5;
    --text-sidebar-mute: #6f9089;

    --border:            var(--ink-200);
    --border-focus:      var(--harbor-600);

    --sidebar-width:     264px;
    --topbar-height:     60px;
    --radius:            16px;
    --radius-sm:         12px;
    --shadow:            0 1px 2px rgba(34,38,47,.05), 0 8px 20px rgba(34,38,47,.06);
    --shadow-md:         0 12px 32px rgba(26,122,109,.16), 0 2px 6px rgba(34,38,47,.05);
    --shadow-glow:       0 0 0 4px rgba(36,153,135,.14);
    --transition:        .18s cubic-bezier(.2,.7,.3,1);

    --glass-bg:          rgba(255,255,255,.78);
    --glass-bg-strong:   rgba(255,255,255,.94);
    --glass-border:      rgba(255,255,255,.55);
    --glass-blur:        10px;
}

html { direction: rtl; }

body {
    font-family: 'Vazirmatn', Tahoma, 'Arial', sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-primary);
    background: var(--bg-body);
    min-height: 100vh;
}

a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }
ul, ol { list-style: none; }

@media (prefers-reduced-motion: reduce){
    *, *::before, *::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* ── App Layout ───────────────────────────────────────────────────────────── */
/* چیدمان اصلی (sidebar/topbar/nav/alert/page-content) اکنون به‌طور کامل در
   app-shell.css تعریف می‌شود تا دو سیستم با هم تداخل نکنند. این فایل فقط
   کامپوننت‌های محتوایی (کارت، دکمه، فرم، جدول، ...) را می‌سازد. */

/* ── Page Header ──────────────────────────────────────────────────────────── */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border);
}
.page-title    { font-size: clamp(19px, 2.3vw, 26px); font-weight: 800; letter-spacing: -.015em; color: var(--text-primary); display:flex; align-items:center; gap:8px; }
.page-subtitle { font-size: 13px; color: var(--text-muted); }
.page-actions  { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── Cards ────────────────────────────────────────────────────────────────── */
.card {
    background: var(--glass-bg-strong);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    border: 1px solid var(--glass-border);
    margin-bottom: 20px;
    overflow: hidden;
    transition: box-shadow var(--transition), transform var(--transition);
}
.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
    gap: 10px;
}
.card-title { font-size: 15px; font-weight: 700; }
.card-body  { padding: 20px; }
.card-body.p-0 { padding: 0; }
.card-body.p-3 { padding: 12px; }
.mt-3 { margin-top: 16px; }
.mb-3 { margin-bottom: 16px; }

/* ── Stats Grid ───────────────────────────────────────────────────────────── */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}
.stats-grid-2 { grid-template-columns: repeat(2, 1fr); }
.stats-grid-1 { grid-template-columns: 1fr; }

.stat-card {
    /* بدون backdrop-filter عمداً: این کارت‌ها چندتایی و در یک شبکه‌اند؛ بلور
       روی هرکدام هزینهٔ ترکیب‌بندی را در اسکرول جمع می‌کند و لگ می‌سازد. */
    background: var(--glass-bg-strong);
    border-radius: var(--radius);
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: var(--shadow);
    border: 1px solid var(--glass-border);
    border-right: 4px solid transparent;
    transition: transform var(--transition), box-shadow var(--transition);
}
.stat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.stat-blue   { border-right-color: #1d4ed8; }
.stat-green, .stat-success { border-right-color: var(--color-success); }
.stat-purple { border-right-color: var(--color-purple); }
.stat-orange { border-right-color: var(--color-orange); }
.stat-red    { border-right-color: var(--color-danger); }

.stat-icon  { font-size: 28px; flex-shrink: 0; }
.stat-value { font-size: 22px; font-weight: 700; line-height: 1.2; }
.stat-label { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

/* ── Dashboard Grid ───────────────────────────────────────────────────────── */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 20px;
}

/* ── Tables ───────────────────────────────────────────────────────────────── */
.table-responsive { overflow-x: auto; }

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}
.table th,
.table td {
    padding: 10px 16px;
    text-align: right;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.table th {
    background: var(--ink-50);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .01em;
    color: var(--text-secondary);
    text-transform: none;
}
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr { transition: background .14s ease; }
.table tbody tr:hover { background: var(--harbor-100); }
.table-footer td { background: var(--ink-50); font-weight: 700; }

/* ── Stackable tables (mobile card layout) ───────────────────────────────────
   Same mechanism as .ui .table.is-stackable in admin-theme.css, but scoped to
   the plain .table used across most views (no .ui wrapper required).
   Usage: add class="table is-stackable" to the <table>, and data-label="..."
   to each <td> (matching its column header). Below 768px each row becomes a
   card instead of relying on horizontal scroll. */
@media (max-width: 768px) {
    .table.is-stackable thead {
        position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
        overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
    }
    .table.is-stackable,
    .table.is-stackable tbody,
    .table.is-stackable tr,
    .table.is-stackable td { display: block; width: 100%; }

    .table.is-stackable tbody tr {
        padding: 10px 14px;
        margin-bottom: 12px;
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        background: #fff;
    }
    .table.is-stackable tbody tr:hover { background: #fff; }

    .table.is-stackable td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 7px 0;
        border: none;
        border-bottom: 1px dashed var(--border);
        white-space: normal;
        text-align: left;
    }
    .table.is-stackable td:last-child { border-bottom: none; }
    .table.is-stackable td.sticky-col { position: static; background: transparent; box-shadow: none; }

    /* ستون عملیات: چند دکمه باید بشکنند به خط بعد، نه اینکه توسط flex
       تک‌خطی فشرده/سرریز شوند (رفتار پیش‌فرض flex یعنی nowrap). */
    .table.is-stackable td.actions {
        flex-wrap: wrap; justify-content: flex-start; gap: 8px;
    }

    .table.is-stackable td[data-label]::before {
        content: attr(data-label);
        font-size: 11.5px; font-weight: 700; color: var(--text-muted);
        flex-shrink: 0; text-align: right;
    }

    /* First cell of a row (usually the row's title/name) rendered as a card heading, not a key-value line */
    .table.is-stackable td.is-card-title {
        display: block; text-align: right;
        padding-bottom: 8px; margin-bottom: 8px;
        border-bottom: 1px solid var(--border);
        font-weight: 600;
    }
    .table.is-stackable td.is-card-title::before { content: none; }

    .table.is-stackable tfoot { display: block; }
    .table.is-stackable tfoot tr { background: var(--ink-50); }
}

/* ردیف اول هر گروه (مثلاً وقتی جدول بر اساس محصول گروه‌بندی شده)، یک خط جداکننده
   کمی پررنگ‌تر می‌گیرد تا مرز گروه‌ها هم در نمای دسکتاپ هم در نمای کارتیِ موبایل
   قابل تشخیص باشد، بدون شکستن ساختار جدول به چند جدول جدا. */
.table tbody tr.row-group-start td { border-top: 2px solid var(--border); }
.table.is-stackable tbody tr.row-group-start { margin-top: 18px; }

.inline-adjust-form { display: flex; gap: 6px; align-items: center; }
.inline-adjust-form input[type="number"] { width: 90px; }

/* ── جدول فشرده‌ی موبایل (یک ردیف واقعی به‌ازای هر آیتم) ─────────────────────
   برخلاف is-stackable که هر ردیف را به چند خط عمودی (کارت) تبدیل می‌کند،
   این حالت برای فهرست‌های طولانی (مثل موجودی انبار) است که تبدیل‌شدن به کارت
   باعث اسکرول عمودی زیاد می‌شود؛ به‌جایش جدول واقعی می‌ماند ولی فشرده و بدون
   اسکرول افقی: ستون کم‌اهمیت مخفی می‌شود، اسم محصول کوتاه می‌شود، فونت/فاصله
   کوچک‌تر می‌شود. */
@media (max-width: 600px) {
    .table.is-compact-mobile { font-size: 12px; }
    .table.is-compact-mobile th,
    .table.is-compact-mobile td { padding: 7px 6px; white-space: nowrap; }
    .table.is-compact-mobile .col-hide-mobile { display: none; }
    .table.is-compact-mobile .col-truncate {
        max-width: 32vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .table.is-compact-mobile .inline-adjust-form { gap: 4px; }
    .table.is-compact-mobile .inline-adjust-form input[type="number"] { width: 54px; padding: 6px 4px; font-size: 12px; }
    .table.is-compact-mobile .inline-adjust-form button { padding: 6px 8px; font-size: 11px; }
}

.row-inactive { opacity: 0.55; }
.row-gold   { background: #fffbeb !important; }
.row-silver { background: #f8fafc !important; }
.row-bronze { background: #fef3c7 !important; }

/* Sticky column in commission table */
.sticky-col {
    position: sticky;
    right: 0;
    background: #fff;
    z-index: 10;
    border-left: 1px solid var(--border);
}
.commission-table th.sticky-col { background: var(--ink-50); }
.commission-table input { width: 90px; text-align: center; }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 18px;
    border-radius: var(--radius-sm);
    font-size: 13.5px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition), color var(--transition);
    text-decoration: none !important;
    white-space: nowrap;
}
.btn:active { transform: translateY(0) scale(.98); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--color-primary); }
.btn-block { width: 100%; }

.btn-primary {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
    box-shadow: 0 6px 16px rgba(26,122,109,.28);
}
.btn-primary:hover { background: var(--color-primary-dk); border-color: var(--color-primary-dk); transform: translateY(-2px); box-shadow: 0 10px 22px rgba(24,98,89,.32); }

.btn-success {
    background: var(--color-success);
    color: #fff;
    border-color: var(--color-success);
}
.btn-success:hover { background: var(--color-success-dk); border-color: var(--color-success-dk); transform: translateY(-2px); }

.btn-warning {
    background: var(--color-warning);
    color: #fff;
    border-color: var(--color-warning);
}
.btn-warning:hover { filter: brightness(.92); transform: translateY(-2px); }

.btn-danger {
    background: var(--color-danger);
    color: #fff;
    border-color: var(--color-danger);
}
.btn-danger:hover { background: var(--color-danger-dk); transform: translateY(-2px); }

.btn-outline {
    background: var(--glass-bg);
    color: var(--text-secondary);
    border-color: var(--border);
}
.btn-outline:hover { background: var(--harbor-50); border-color: var(--color-primary); color: var(--color-primary); transform: translateY(-2px); }

.btn-sm   { padding: 8px 14px; font-size: 12.5px; }
.btn-xs   { padding: 6px 12px; font-size: 12px; }
.w-100    { width: 100%; }

/* ── Forms ────────────────────────────────────────────────────────────────── */
.form-card { max-width: 900px; }

.form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 4px;
    align-items: flex-start;
}
.form-group { display: flex; flex-direction: column; margin-bottom: 14px; }
.form-group.col-2  { flex: 0 0 calc(16.66% - 10px); min-width: 100px; }
.form-group.col-3  { flex: 0 0 calc(25% - 12px); min-width: 120px; }
.form-group.col-4  { flex: 0 0 calc(33.33% - 11px); min-width: 140px; }
.form-group.col-6  { flex: 0 0 calc(50% - 8px); min-width: 160px; }
.form-group.col-8  { flex: 0 0 calc(66.66% - 6px); min-width: 200px; }
.form-group.col-12 { flex: 0 0 100%; }

.form-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 5px;
}
.required { color: var(--color-danger); }

.form-control {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 13.5px;
    font-family: inherit;
    color: var(--text-primary);
    background: var(--glass-bg);
    transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
    direction: rtl;
}
.form-control:hover { border-color: var(--harbor-300); }
.form-control:focus {
    outline: none;
    border-color: var(--border-focus);
    box-shadow: var(--shadow-glow);
    background: #fff;
}
.form-control-sm { padding: 7px 10px; font-size: 12.5px; }
.form-control::placeholder { color: var(--text-muted); }

select.form-control { cursor: pointer; }

.form-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

/* Radio Group */
.radio-group { display: flex; gap: 20px; align-items: center; padding-top: 6px; }
.radio-label { display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: 13.5px; }

/* Input with icon */
.input-with-toggle { position: relative; }
.input-with-toggle .form-control { padding-left: 40px; }
.toggle-password {
    position: absolute;
    left: 10px; top: 50%;
    transform: translateY(-50%);
    background: none; border: none;
    cursor: pointer; font-size: 16px; opacity: .6;
    transition: opacity .15s ease;
}
.toggle-password:hover { opacity: 1; }

/* ── Filter Card ──────────────────────────────────────────────────────────── */
.filter-card .card-body { padding: 16px 20px; }
.filter-form .form-actions { border-top: none; padding-top: 0; margin-top: 8px; }
.align-items-end { align-items: flex-end; }
.d-flex { display: flex; }

/* ── Badges ───────────────────────────────────────────────────────────────── */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
}
.badge-admin       { background: var(--harbor-100); color: var(--harbor-800); }
.badge-seller      { background: #e8eeff; color: #1d4ed8; }
.badge-supervisor  { background: var(--ember-50); color: var(--ember-700); }
.badge-producer    { background: #f3e8ff; color: #7e22ce; }
.badge-active      { background: #e8f5ec; color: #166534; }
.badge-inactive    { background: var(--ink-100); color: var(--ink-500); }
.badge-danger      { background: #fdeaee; color: #991b1b; }
.badge-warning     { background: var(--ember-50); color: var(--ember-700); }
.badge-installment { background: #fdf3e3; color: #92400e; }
.badge-cash        { background: #e8f5ec; color: #166534; }
.badge-today       { background: #e8eeff; color: #1d4ed8; }
.badge-shift       { background: var(--harbor-100); color: var(--harbor-800); }

/* ── Rank Badges ──────────────────────────────────────────────────────────── */
.rank-badge { font-size: 18px; }
.rank-badge:not(.rank-1):not(.rank-2):not(.rank-3) {
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 700;
}

/* ── Report View Grid ─────────────────────────────────────────────────────── */
.report-view-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.info-list { display: grid; grid-template-columns: 120px 1fr; gap: 8px 16px; align-items: start; }
.info-list dt { font-weight: 600; color: var(--text-secondary); font-size: 13px; }
.info-list dd { color: var(--text-primary); }

.total-display { display: flex; flex-direction: column; gap: 16px; }
.total-item { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--border); }
.total-item:last-child { border-bottom: none; }
.total-label { font-weight: 600; color: var(--text-secondary); }
.total-value { font-size: 18px; font-weight: 700; }

/* ── Items Section (Report Form) ──────────────────────────────────────────── */
.items-section {
    margin-top: 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 20px;
}
.items-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--ink-50);
    border-bottom: 1px solid var(--border);
}
.items-title { font-size: 14px; font-weight: 600; margin: 0; }

/* کلاس واقعی HTML این است (نه .items-header بالا) — قبلاً هیچ استایلی نمی‌گرفت */
.items-section-header {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    flex-wrap: wrap;
    padding: 12px 16px;
    background: var(--ink-50);
    border-bottom: 1px solid var(--border);
}
.items-section-header #addCustomerBtn { min-height: 40px; }

#groupsContainer { padding: 14px; }

.items-totals-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    flex-wrap: wrap;
    padding: 14px 16px;
    background: var(--canvas, #f3f6f8);
    border-top: 1px solid var(--border);
    font-size: 14px;
}

.items-table th, .items-table td { white-space: nowrap; vertical-align: middle; }
.items-table .form-control { margin: 0; }
.items-table .select2-container { min-width: 220px; }

/* Report Totals */
.report-totals {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    padding: 16px 0;
    border-top: 2px solid var(--border);
    margin-top: 4px;
    margin-bottom: 4px;
}
.total-box {
    font-size: 15px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 8px;
}
.total-box strong { font-size: 18px; color: var(--text-primary); }
.total-box-green strong { color: var(--color-success); }

/* ── Pagination ───────────────────────────────────────────────────────────── */
.pagination-wrapper {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    padding: 12px 16px;
    border-top: 1px solid var(--border);
}
.page-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 13px;
    color: var(--text-secondary);
    text-decoration: none;
    transition: var(--transition);
}
.page-btn:hover, .page-btn.active {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
    text-decoration: none;
    transform: translateY(-1px);
}

/* ── Misc Helpers ─────────────────────────────────────────────────────────── */
.text-success { color: var(--color-success) !important; }
.text-danger  { color: var(--color-danger)  !important; }
.text-muted   { color: var(--text-muted)    !important; }
.text-center  { text-align: center; }
.text-left    { text-align: left; }
.fw-bold      { font-weight: 700; }
.mr-2         { margin-left: 8px; } /* RTL: "right" is actually left visually */
.empty-state  { padding: 32px; text-align: center; color: var(--text-muted); font-size: 14px; }
.actions      { white-space: nowrap; }
.actions .btn + .btn { margin-right: 4px; }

/* ── Auth ─────────────────────────────────────────────────────────────────── */
.auth-body {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
    overflow-x: hidden;
    background-color: var(--harbor-950);
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E"),
        radial-gradient(circle at 18% 20%, rgba(63,181,162,.35) 0%, transparent 45%),
        radial-gradient(circle at 85% 78%, rgba(247,103,22,.3) 0%, transparent 45%),
        linear-gradient(155deg, #0a2624 0%, #174f49 42%, #1a7a6d 72%, #c0380c 140%);
}
.auth-body::before, .auth-body::after{
    content: ""; position: fixed; z-index: 0; pointer-events: none; will-change: transform;
    border-radius: 50%; filter: blur(46px);
}
.auth-body::before{
    inset-inline-start: -8%; inset-block-start: -6%;
    width: min(40vmax, 460px); height: min(40vmax, 460px);
    background: var(--harbor-300); opacity: .3;
    animation: authOrbA 20s ease-in-out infinite;
}
.auth-body::after{
    inset-inline-end: -10%; inset-block-end: -8%;
    width: min(34vmax, 400px); height: min(34vmax, 400px);
    background: var(--ember-300); opacity: .28;
    animation: authOrbB 17s ease-in-out infinite;
}
@keyframes authOrbA{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(5%,6%); } }
@keyframes authOrbB{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(-5%,-6%); } }

.auth-container { width: 100%; max-width: 420px; position: relative; z-index: 1; }
.auth-card {
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    border: 1px solid rgba(255,255,255,.6);
    border-radius: 1.75rem;
    padding: 40px 36px 20px 36px;
    box-shadow: 0 24px 70px rgba(10,38,36,.45);
    animation: authCardIn .5s cubic-bezier(.22,1,.36,1) both;
}
@keyframes authCardIn{ from{ opacity:0; transform:translateY(14px) scale(.985); } to{ opacity:1; transform:none; } }
.auth-logo { text-align: center; margin-bottom: 28px; }
.auth-logo-icon { font-size: 44px; display: block; margin-bottom: 10px; filter: drop-shadow(0 4px 10px rgba(26,122,109,.35)); }
.auth-title { font-size: 19px; font-weight: 800; margin-bottom: 4px; color: var(--text-primary); }
.auth-subtitle { font-size: 13px; color: var(--text-muted); }
.auth-form .form-group { margin-bottom: 16px; }
.auth-form .btn-primary { margin-top: 8px; font-size: 15px; padding: 12px; }
.auth-footer { text-align: center; margin-top: 40px; color: var(--text-muted); font-size: 9px; }
.auth-alert { max-width: 420px; margin: 0 auto 16px; position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce){
    .auth-body::before, .auth-body::after{ animation: none; }
}

/* ── Select2 RTL Tweaks ───────────────────────────────────────────────────── */
.select2-container--default .select2-selection--single {
    height: 36px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    direction: rtl;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 34px;
    padding-right: 12px;
    padding-left: 28px;
    font-family: 'Vazirmatn', Tahoma, sans-serif;
    font-size: 13.5px;
    color: var(--text-primary);
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    left: 6px; right: auto;
}
.select2-dropdown { direction: rtl; font-family: 'Vazirmatn', Tahoma, sans-serif; font-size: 13.5px; }
.select2-results__option { padding: 8px 12px; }
.select2-container--default .select2-results__option--highlighted { background-color: var(--color-primary) !important; }
.select2-search__field { direction: rtl; font-family: 'Vazirmatn', Tahoma, sans-serif; }
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--border-focus);
    box-shadow: var(--shadow-glow);
}

/* ── Persian Datepicker Tweaks ────────────────────────────────────────────── */
.datepicker-plot-area { direction: rtl; font-family: 'Vazirmatn', Tahoma, sans-serif; }

/* ── Seller Name in commission table ──────────────────────────────────────── */
.seller-name { min-width: 140px; }



.customer-card {
    /* بدون backdrop-filter: این کارت‌ها ممکن است چند بار در یک صفحه تکرار
       شوند؛ بلور روی هرکدام هزینهٔ اسکرول را بالا می‌برد. */
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    margin-bottom: 16px;
    overflow: hidden;
    background: var(--glass-bg-strong);
    box-shadow: var(--shadow);
}

.customer-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: var(--ink-50);
    font-weight: 700;
    font-size: 15px;
    border-bottom: 1px solid var(--border);
}

.item-count {
    font-weight: 400;
    font-size: 12px;
    color: var(--text-muted);
}

.items-list {
    padding: 8px 0;
}

.item-row {
    padding: 10px 16px;
    border-bottom: 1px dashed var(--border);
}
.item-row:last-child { border-bottom: none; }

.item-name {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.item-details {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    font-size: 13px;
    color: var(--text-secondary);
}

.item-details label {
    color: var(--text-muted);
    font-size: 12px;
}

.customer-card-footer {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 16px;
    background: var(--ink-50);
    border-top: 2px solid var(--border);
    font-size: 13px;
    font-weight: 600;
}

.grand-total {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    padding: 14px 20px;
    background: linear-gradient(135deg, var(--harbor-950), var(--harbor-800));
    color: #fff;
    border-radius: var(--radius);
    font-weight: 700;
    font-size: 14px;
    margin-top: 8px;
    box-shadow: var(--shadow-md);
}

.grand-total .text-success { color: #4ade80 !important; }

@media (max-width: 480px) {
    .customer-card-footer,
    .grand-total { flex-direction: column; gap: 4px; }
    .item-details { gap: 6px 16px; }
}



/* ── Print Styles ─────────────────────────────────────────────────────────── */
@media print {
    .sidebar, .topbar, .page-header .btn, .page-header .page-actions,
    .filter-card, .form-actions, .pagination-wrapper, .actions { display: none !important; }
    .main-content { margin-right: 0 !important; }
    .page-content { padding: 0 !important; }
    .card { box-shadow: none !important; border: 1px solid #ddd !important; }
    body { background: #fff !important; font-size: 12px; }
    .table th, .table td { padding: 6px 10px !important; }
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .report-view-grid { grid-template-columns: 1fr; }
    .dashboard-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .stats-grid { grid-template-columns: 1fr 1fr; }
    .page-content { padding: 16px; }

    .form-group.col-2,
    .form-group.col-3,
    .form-group.col-4,
    .form-group.col-6,
    .form-group.col-8 { flex: 0 0 100%; }

    .commission-table { font-size: 12px; }
    .commission-table .form-control { width: 70px; }

    /* Touch targets: bump interactive controls to the ~44px minimum comfortable tap size on mobile,
       without touching desktop density where a mouse pointer makes the smaller size fine. */
    .btn { min-height: 44px; padding: 10px 18px; }
    .btn-sm { min-height: 40px; padding: 9px 16px; }
    .btn-xs { min-height: 36px; padding: 7px 12px; }

    .form-control,
    select.form-control { min-height: 44px; padding: 10px 12px; font-size: 16px; }
    .form-control-sm { min-height: 40px; }

    .page-btn { width: 44px; height: 44px; }

    .select2-container--default .select2-selection--single { height: 44px; }
    .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 42px; }
    .select2-container--default .select2-selection--single .select2-selection__arrow { height: 42px; }

    input[type="checkbox"],
    input[type="radio"] { width: 20px; height: 20px; }

    .actions .btn + .btn { margin-right: 6px; margin-bottom: 6px; }
}

@media (max-width: 480px) {
    .stats-grid { grid-template-columns: 1fr; }
    .auth-card { padding: 28px 20px; }
    .table th, .table td { padding: 8px 10px; font-size: 12.5px; }
}
@media (max-width: 768px) {
    #items-table thead { display: none; }

    #items-table tr.item-row {
        display: block;
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        margin-bottom: 12px;
        padding: 8px;
        background: #fff;
    }

    #items-table tr.item-row td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 4px 0;
        border: none;
    }

    #items-table tr.item-row td::before {
        content: attr(data-label);
        font-weight: bold;
        font-size: 12px;
        color: var(--text-secondary);
        min-width: 90px;
    }

    #items-table tr.item-row td .form-control {
        width: 100% !important;
    }
}

/* ── گروه مشتری ─────────────────────────────────────────────────────────── */
.customer-group {
    /* بدون backdrop-filter: هر مشتری یک کارت جدا می‌سازد و می‌تواند چندبار
       تکرار شود؛ بلور روی هرکدام هنگام اسکرول لگ محسوسی ایجاد می‌کرد. */
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    background: var(--glass-bg);
    margin-bottom: 14px;
    overflow: hidden;
    box-shadow: var(--shadow);
}
.customer-group:last-child { margin-bottom: 0; }

.group-header {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    flex-wrap: wrap;
    padding: 12px 14px;
    background: rgba(255,255,255,.65);
    border-bottom: 1px solid var(--border);
}
.group-label { font-size: 14px; font-weight: 700; color: var(--text-primary); }
.group-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.group-actions .btn-xs { min-height: 36px; padding: 8px 12px; }

/* ── کنترل‌های تخفیف گروه — داخل row1 اولین کارت محصول می‌نشینند ─────────── */
.group-discount-inline {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding-inline-end: 10px; margin-inline-end: 10px;
    border-inline-end: 1px dashed var(--border);
}
.discount-field { display: flex; align-items: center; gap: 6px; }
.discount-field label { font-size: 12.5px; font-weight: 600; color: var(--ink-700); white-space: nowrap; }
.discount-percent-input { width: 70px !important; text-align: center; padding: 8px 6px !important; }
.discount-percent-input:disabled { background: var(--ink-100); color: var(--ink-400); cursor: not-allowed; }
.discount-qty-hint, .discount-lock-hint {
    font-size: 11.5px; color: var(--ember-700); font-weight: 600;
    background: var(--ember-50); padding: 3px 10px; border-radius: 999px;
}
.discount-lock-hint { color: #be123c; background: #fdeaee; }

/* ── سوییچ قابل‌استفاده‌ی مجدد (اسنپ‌پی، تخفیف تعدادی) ───────────────────── */
.switch-field { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
.switch { position: relative; display: inline-block; inline-size: 42px; block-size: 24px; flex-shrink: 0; }
.switch input[type="checkbox"] {
    position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; inline-size: 100%; block-size: 100%;
}
.switch-slider {
    position: absolute; inset: 0; background: var(--ink-300); border-radius: 999px;
    transition: background .15s ease; pointer-events: none;
}
.switch-slider::before {
    content: ""; position: absolute; inline-size: 18px; block-size: 18px;
    inset-block-start: 3px; inset-inline-start: 3px;
    background: #fff; border-radius: 50%; transition: inset-inline-start .15s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.switch input:checked + .switch-slider { background: var(--color-primary, var(--harbor-600)); }
.switch input:checked + .switch-slider::before { inset-inline-start: 21px; }
.switch input:disabled + .switch-slider { opacity: .5; cursor: not-allowed; }
.switch-text { font-size: 12.5px; font-weight: 600; color: var(--ink-700); }

/* ── کارت هر محصول ──────────────────────────────────────────────────────── */
/* فاصلهٔ عمودی بین کارت‌های محصول — به‌اندازه‌ی کافی برای اینکه سایهٔ هرکدام
   از همسایه‌اش جدا دیده شود، نه چسبیده. */
.group-items-body { display: flex; flex-direction: column; gap: 14px; padding: 12px; background: rgba(246,247,249,.6); }

.item-card {
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-sm);
    padding: 12px;
    background: #fff;
    position: relative;
    display: flex; flex-direction: column; gap: 10px;
    /* سایه‌ی محسوس — کارت‌ها را از هم و از پس‌زمینهٔ خاکستری group-items-body جدا می‌کند */
    box-shadow: 0 2px 6px rgba(34,38,47,.08), 0 1px 2px rgba(34,38,47,.05);
    transition: box-shadow .18s ease, transform .18s ease;
}
.item-card:hover { box-shadow: 0 6px 16px rgba(34,38,47,.1), 0 2px 4px rgba(34,38,47,.06); }

/* چهار ردیفِ کارت محصول: (۱) تخفیف٪ + تخفیف تعدادیِ گروه (فقط اولین کارت)،
   (۲) تعداد + محصول، (۳) قیمت واحد + جمع کل، (۴) اسنپ‌پی + حذف. */
.item-card .row1,
.item-card .row2,
.item-card .row3,
.item-card .row4 {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.item-card .row1:empty { display: none; }
.item-card .row3,
.item-card .row4 { justify-content: space-between; }

.item-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.item-field label { font-size: 11px; color: var(--ink-500); margin: 0; display: flex; align-items: center; gap: 4px; }
.item-field--qty { flex: 0 0 90px; }
.item-field--price,
.item-field--readonly { flex: 1; }
.item-card .row4 .remove-row { flex-shrink: 0; margin-top: 0; min-height: 36px; padding: 8px 12px; }
.item-field--readonly .line-total {
    background: var(--ink-100) !important; color: var(--ink-700); font-weight: 700;
    border-color: var(--ink-200) !important; cursor: default;
}

@media (max-width: 768px) {
    .items-section-header { flex-direction: column; align-items: stretch; }
    .items-section-header #addCustomerBtn { width: 100%; }
    .items-totals-bar { flex-direction: column; align-items: stretch; gap: 8px; }

    /* عرض واقعی موبایل کم است — پدینگ‌های تودرتو (کارت→بخش اقلام→گروه→ردیف)
       جمع می‌شوند و محتوا را بیش از حد فشرده می‌کنند؛ همه‌جا کم می‌شود تا
       باکس هر مشتری واقعاً تمام‌عرض حس شود. */
    .form-card .card-body { padding: 10px; }
    .items-section { margin-top: 12px; margin-bottom: 12px; }
    #groupsContainer { padding: 6px; }
    .customer-group { border-radius: var(--radius-sm); margin-bottom: 10px; }
    .group-header { padding: 8px 10px; }
    .group-items-body { padding: 6px; gap: 10px; }
    .item-card { padding: 8px; gap: 8px; }

    /* کنترل‌های تخفیف گروه (داخل row1) در موبایل تمام‌عرض، ولی همچنان یک
       ردیفِ واحد — درصد و تعدادی نباید از هم جدا و زیر هم بیفتند. */
    .group-discount-inline {
        flex-wrap: wrap; gap: 8px 10px;
        width: 100%; padding-inline-end: 0; margin-inline-end: 0;
        border-inline-end: none; padding-block-end: 8px; border-block-end: 1px dashed var(--border);
    }
    .discount-field { flex-shrink: 0; }
    .discount-percent-input { width: 56px !important; }
    .group-discount-inline .switch-text { font-size: 11.5px; }

    .item-field--qty { flex: 1 1 45%; }
    .item-field--product { flex: 1 1 50%; }
}

/* ══ نوار اکشن چسبان ورودی + خلاصهٔ زنده + اسنک‌بار بازگردانی ═══════════════ */

/* هایلایت مشتری فعال — بدون محو کردن بقیه، فقط حلقهٔ ملایم */
.customer-group { transition: box-shadow .15s ease, border-color .15s ease; }
.customer-group.is-active-group {
    border-color: var(--color-primary, var(--harbor-600));
    box-shadow: 0 0 0 1px var(--color-primary, var(--harbor-600)), 0 3px 12px rgba(26,122,109,.18);
}

/* موبایل: نوار شناور در قوس شست — فشرده، همه چیز در دو ردیف کوتاه */
.entry-actionbar {
    position: fixed; inset-inline: 0; bottom: 0; z-index: 40;
    display: flex; flex-direction: column; gap: 4px;
    background: var(--glass-bg-strong);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border-top: 1px solid var(--border);
    box-shadow: 0 -4px 18px rgba(34,38,47,.12);
    padding: 6px 10px calc(6px + env(safe-area-inset-bottom, 0px));
}
.entry-actionbar-summary {
    display: flex; align-items: center; justify-content: center; gap: 14px;
    font-size: 11.5px; color: var(--ink-700); line-height: 1.3;
}
.entry-actionbar-summary .ea-metric strong { font-weight: 800; font-size: 13px; color: var(--ink-950); margin-inline-start: 3px; }
.entry-actionbar-summary .ea-metric--comm strong { color: var(--color-success, #15803d); }

/* هر سه اکشن (محصول/مشتری/ثبت) در یک ردیف — رنگ‌شان تمایزشان می‌دهد، نه ارتفاعشان */
.entry-actionbar-actions { display: flex; gap: 6px; }
.entry-actionbar-actions .btn {
    min-height: 42px; font-size: 13px; font-weight: 700; padding: 0 10px;
}
.entry-actionbar-actions .ea-add-product { flex: 1.6 1 auto; }
.entry-actionbar-actions .ea-add-customer { flex: 1 1 auto; }

/* دکمهٔ نهاییِ ثبت/ذخیره — رنگ جدا از دو اکشن پرتکرار کنارش، تا اشتباه لمس نشود */
.entry-actionbar-actions .ea-save-btn {
    flex: 1 1 auto;
    background: var(--color-dark, var(--harbor-950)); color: #fff; border: none;
}
.entry-actionbar-actions .ea-save-btn:hover { background: #000; }

/* فضای پایین صفحه تا نوار شناور، لینک انصراف را نپوشاند (فقط صفحات دارای فرم) */
@media (max-width: 767px) {
    body.has-entry-actionbar .form-actions { margin-bottom: 100px; }
}

/* اسنک‌بار بازگردانی */
.entry-snackbar {
    position: fixed; inset-inline: 12px; bottom: 136px; z-index: 50;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    background: var(--harbor-950); color: #fff; border-radius: var(--radius-sm); padding: 12px 14px;
    box-shadow: 0 8px 24px rgba(0,0,0,.28);
    opacity: 0; transform: translateY(8px);
    transition: opacity .18s ease, transform .18s ease;
    pointer-events: none;
}
.entry-snackbar.show { opacity: 1; transform: none; pointer-events: auto; }
.entry-snackbar-text { font-size: 13.5px; font-weight: 600; }
.entry-snackbar-undo {
    background: none; border: none; color: var(--harbor-300); font: inherit; font-weight: 800;
    font-size: 14px; cursor: pointer; padding: 6px 8px; white-space: nowrap; flex-shrink: 0;
}

/* دسکتاپ/تبلت: نوار از حالت شناور به جریان عادیِ زیر لیست برمی‌گردد */
@media (min-width: 768px) {
    .entry-actionbar {
        position: static; box-shadow: none;
        flex-direction: row; align-items: center; justify-content: space-between;
        border: 1px solid var(--border); border-radius: var(--radius);
        margin-top: 14px; padding: 12px 16px;
    }
    .entry-actionbar-summary { justify-content: flex-start; font-size: 13px; }
    .entry-actionbar-summary .ea-metric strong { font-size: 15px; }
    .entry-actionbar-actions { flex: 0 0 auto; margin-inline-start: auto; }
    .entry-actionbar-actions .ea-add-product,
    .entry-actionbar-actions .ea-add-customer { flex: 0 0 auto; padding: 0 16px; }
    .entry-actionbar-actions .ea-save-btn { flex: 0 0 auto; padding: 0 22px; }
    .entry-snackbar { inset-inline: auto; inset-inline-end: 24px; bottom: 24px; max-width: 360px; }
}

.ranking-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
    gap:18px;
}

.ranking-card{
    /* بدون backdrop-filter: کارت‌های رتبه‌بندی چندتایی در یک شبکه‌اند */
    background: var(--glass-bg-strong);
    border-radius:var(--radius);
    padding:16px;
    box-shadow: var(--shadow);
    border:1px solid var(--glass-border);
    transition: transform .2s ease, box-shadow .2s ease;
}

.ranking-card:hover{
    transform:translateY(-4px);
    box-shadow: var(--shadow-md);
}

.ranking-header{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:10px;
}

.rank-number{
    background: var(--ink-100);
    padding:3px 8px;
    border-radius:6px;
    font-size:12px;
}

.ranking-name{
    font-weight:700;
}

.ranking-stats{
    display:flex;
    justify-content:space-between;
    margin:10px 0;
    font-size:13px;
}

.ranking-products{
    font-size:12px;
    color: var(--text-muted);
    margin:10px 0;
}

.ranking-balance{
    margin-top:10px;
    padding-top:10px;
    border-top:1px solid var(--border);
    text-align:center;
}

.balance-value{
    font-weight:700;
    font-size:16px;
}

.rank-gold{
    border-top:4px solid #eab308;
}

.rank-silver{
    border-top:4px solid #b9c2cc;
}

.rank-bronze{
    border-top:4px solid #c99163;
}