/* =====================================================================
 * App.css — ظاهر اپ موبایل
 *
 * پالت از دیزاین سیستم محاسب ۳۶۵: آبی #2563eb + زرد #facc15.
 * شعاع و سایه از همان زبان One UI داشبورد ERP گرفته شده تا اپ غریبه
 * به نظر نرسد.
 *
 * هیچ Tailwind و هیچ فایل بیرونی. اپ باید آفلاین باز شود و هر وابستگی
 * شبکه‌ای یعنی یک راه شکست بیشتر.
 * ===================================================================== */

/* ─────────────────────────────── فونت
 * Vazirmatn، خودمیزبان، ۱۵۰ کیلوبایت برای هر سه وزن.
 *
 * چرا لازم بود: نسخه‌ی قبل به فونت دستگاه تکیه می‌کرد. روی اندروید یعنی
 * Noto Naskh — یک نسخ عربی که ارقامش هم شکل دیگری دارد و کنار داشبورد
 * ERP مثل یک اپ غریبه به نظر می‌رسد.
 *
 * font-display: swap عمدی است: متن فوراً با فونت سیستم می‌آید و وقتی
 * فونت رسید عوض می‌شود. با block، اپِ آفلاین در اولین اجرا چند صد
 * میلی‌ثانیه متنِ نامرئی نشان می‌داد.
 */
@font-face {
    font-family: 'Vazirmatn';
    src: url('fonts/Vazirmatn-Regular.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Vazirmatn';
    src: url('fonts/Vazirmatn-Medium.woff2') format('woff2');
    font-weight: 500 600; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Vazirmatn';
    src: url('fonts/Vazirmatn-Bold.woff2') format('woff2');
    font-weight: 700 900; font-style: normal; font-display: swap;
}

/* ─────────────────────────────── توکن‌های محلی
 * ⚠ هیچ رنگ و شعاع و سایه‌ای اینجا مقدار خام ندارد.
 * همه نام‌مستعارِ توکن‌های App_Tokens.css اند که خودش از دیزاین سیستم
 * محاسب ۳۶۵ (پروژه‌ی Claude Design) ساخته می‌شود. یعنی عوض شدن رنگ برند
 * آنجا، بدون دست زدن به این فایل، در کل اپ می‌نشیند.
 *
 * نام‌های کوتاه (--brand، --ink) عمداً نگه داشته شدند: ۷۰۰ خط قانون
 * رویشان نوشته شده و تغییر نامشان یک refactor پرریسک بود بدون هیچ سود.
 */
:root {
    --brand:        var(--surface-brand);
    --brand-dark:   var(--surface-brand-hover);
    --brand-soft:   var(--surface-brand-soft);
    --accent:       var(--surface-accent);
    --accent-text:  var(--text-warn);

    --ink:          var(--text-body);
    --ink-2:        var(--text-muted);
    --ink-3:        var(--text-faint);
    --line:         var(--border-default);
    --bg:           var(--border-subtle);
    --surface:      var(--surface-card);

    --ok:           var(--text-success);
    --warn:         var(--text-warn);
    --danger:       var(--text-danger);

    --r-card:       var(--radius-lg);
    --r-btn:        var(--radius-md);
    --shadow:       var(--shadow-md);
    --shadow-up:    0 -4px 18px rgba(15, 23, 42, .08);

    /* مقیاس فاصله — از توکن‌ها، تا ریتم عمودی اپ با بقیه‌ی سیستم یکی باشد */
    --s1: var(--space-1);  --s2: var(--space-2);  --s3: var(--space-3);
    --s4: var(--space-4);  --s5: var(--space-5);  --s6: var(--space-6);

    /* ارتفاع نوار پایین + ناحیه‌ی امن گوشی‌های بدون دکمه */
    --tabs-h:       calc(60px + env(safe-area-inset-bottom, 0px));
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
    height: 100%;
    overscroll-behavior-y: none;   /* جلوی «pull to refresh» که اپ را ری‌لود می‌کند */
}

body {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    line-height: var(--lh-normal);
    -webkit-font-smoothing: antialiased;
}

button, input { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
[hidden] { display: none !important; }

.gd-ico { width: 22px; height: 22px; fill: currentColor; flex: none; }

/* اعداد فارسی خوانا نگه داشته می‌شوند ولی جهتشان نباید بشکند */
.gd-num { unicode-bidi: plaintext; }

/* ═══════════════════════════ جفت‌سازی ═══════════════════════════ */
.gd-pair {
    position: fixed; inset: 0;
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    background: linear-gradient(160deg, var(--brand) 0%, #1e3a8a 100%);
}
.gd-pair-card {
    width: 100%; max-width: 380px;
    background: var(--surface);
    border-radius: 24px;
    padding: 28px 22px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .25);
    text-align: center;
}
.gd-pair-logo {
    width: 64px; height: 64px; margin: 0 auto 14px;
    border-radius: 18px; background: var(--brand-soft);
    display: grid; place-items: center;
}
.gd-pair-logo svg { width: 36px; height: 36px; fill: var(--brand); }
.gd-pair-card h1 { font-size: 20px; font-weight: 700; }
.gd-pair-sub { color: var(--ink-2); font-size: 13.5px; margin: 6px 0 20px; }

.gd-or {
    position: relative; margin: 18px 0 12px;
    color: var(--ink-3); font-size: 12.5px;
}
.gd-or::before {
    content: ''; position: absolute; inset-inline: 0; top: 50%;
    height: 1px; background: var(--line);
}
.gd-or span { position: relative; background: var(--surface); padding: 0 10px; }

.gd-code-input {
    text-align: center;
    letter-spacing: .32em;
    font-size: 20px;
    font-weight: 700;
    direction: ltr;
}
.gd-pair-msg { margin-top: 12px; font-size: 13px; min-height: 20px; }
.gd-pair-msg[data-kind="error"] { color: var(--danger); }
.gd-pair-msg[data-kind="ok"]    { color: var(--ok); }

/* ═══════════════════════════ فرم ═══════════════════════════ */
.gd-input {
    width: 100%;
    background: var(--bg);
    border: 1.5px solid transparent;
    border-radius: var(--r-btn);
    padding: 12px 14px;
    outline: none;
    transition: border-color .15s, background .15s;
}
.gd-input:focus { border-color: var(--brand); background: var(--surface); }
.gd-input::placeholder { color: var(--ink-3); }

.gd-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    background: var(--bg);
    color: var(--ink);
    border-radius: var(--r-btn);
    padding: 13px 18px;
    font-weight: 600;
    transition: transform .1s, background .15s;
}
.gd-btn:active { transform: scale(.98); }
.gd-btn-block { width: 100%; margin-top: 10px; }
.gd-btn-primary { background: var(--brand); color: #fff; }
.gd-btn-primary:active { background: var(--brand-dark); }
.gd-btn-danger { background: #fef2f2; color: var(--danger); }
.gd-btn[disabled] { opacity: .5; pointer-events: none; }

.gd-iconbtn {
    width: 38px; height: 38px; border-radius: 12px;
    display: grid; place-items: center; color: var(--ink-2);
}
.gd-iconbtn:active { background: var(--bg); }

/* ═══════════════════════════ چیدمان ═══════════════════════════ */
.gd-top {
    position: sticky; top: 0; z-index: 20;
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px;
    padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 10px;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
}
.gd-top-title { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.gd-top-title strong { font-size: 17px; }
.gd-top-sub { font-size: 11.5px; color: var(--ink-3); }
.gd-top-end { display: flex; align-items: center; gap: 6px; }

.gd-pill {
    font-size: 11px; font-weight: 700;
    padding: 4px 10px; border-radius: 999px;
    background: #dcfce7; color: #15803d;
}
.gd-pill[data-state="offline"] { background: #fef3c7; color: #b45309; }
.gd-pill[data-state="syncing"] { background: var(--brand-soft); color: var(--brand); }

.gd-syncbar {
    background: var(--brand-soft); color: var(--brand);
    font-size: 12.5px; text-align: center; padding: 7px 12px;
    position: sticky; top: 0; z-index: 19;
}

.gd-main {
    padding: 12px 14px calc(var(--tabs-h) + 14px);
    min-height: 100%;
}

.gd-view { animation: fade .18s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } }

.gd-sec-title {
    font-size: 13px; font-weight: 700; color: var(--ink-2);
    margin: 14px 2px 8px;
    display: flex; align-items: center; gap: 8px;
}
.gd-badge {
    background: var(--accent); color: #713f12;
    border-radius: 999px; padding: 1px 8px; font-size: 11.5px;
}
.gd-hint { font-size: 12px; color: var(--ink-3); margin-top: 8px; }

.gd-card {
    background: var(--surface);
    border-radius: var(--r-card);
    padding: 14px 16px;
    box-shadow: var(--shadow);
    margin-bottom: 12px;
}

.gd-kv { display: grid; gap: 2px; }
.gd-kv > div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; }
.gd-kv dt { color: var(--ink-2); font-size: 13px; }
.gd-kv dd { font-weight: 600; font-size: 13.5px; text-align: left; unicode-bidi: plaintext; }

/* ═══════════════════════════ جست‌وجو ═══════════════════════════ */
.gd-searchrow { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.gd-scanbtn {
    width: 46px; height: 46px; flex: none;
    border-radius: var(--r-btn);
    background: var(--brand); color: #fff;
    display: grid; place-items: center;
}
.gd-scanbtn:active { background: var(--brand-dark); }

.gd-results {
    background: var(--surface);
    border-radius: var(--r-card);
    box-shadow: var(--shadow);
    overflow: hidden;
    margin-bottom: 12px;
    max-height: 46vh; overflow-y: auto;
}

.gd-list { display: grid; gap: 8px; }

.gd-row {
    display: flex; align-items: center; gap: 10px;
    background: var(--surface);
    border-radius: 16px;
    padding: 11px 13px;
    box-shadow: var(--shadow);
    width: 100%; text-align: right;
}
.gd-results .gd-row {
    border-radius: 0; box-shadow: none;
    border-bottom: 1px solid var(--line);
}
.gd-results .gd-row:last-child { border-bottom: 0; }
.gd-row:active { background: var(--brand-soft); }

.gd-row-main { flex: 1; min-width: 0; }
.gd-row-title {
    font-size: 14px; font-weight: 600;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.gd-row-meta {
    font-size: 11.5px; color: var(--ink-3);
    display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px;
    unicode-bidi: plaintext;
}
.gd-row-end { text-align: left; flex: none; }
.gd-price { font-weight: 700; font-size: 14px; unicode-bidi: plaintext; }
.gd-price-unit { font-size: 10.5px; color: var(--ink-3); font-weight: 400; }

.gd-stock { font-size: 11px; font-weight: 700; }
.gd-stock[data-level="in"]  { color: var(--ok); }
.gd-stock[data-level="low"] { color: var(--warn); }
.gd-stock[data-level="out"] { color: var(--danger); }

/* ─────────────────────────────── بندانگشتی محصول */
/* وقتی عکسی نیست، به‌جای کادر خالی حرف اول نام کالا نشان داده می‌شود.
   کادر خالی شبیه «چیزی خراب است» به نظر می‌رسد؛ حرف اول شبیه یک
   تصمیم. اندازه ثابت است تا فهرست موقع رسیدن عکس‌ها نپرد. */
.gd-thumb {
    width: 48px; height: 48px; flex: none;
    border-radius: 12px; overflow: hidden;
    background: var(--bg);
    display: grid; place-items: center;
    font-weight: 800; font-size: 17px; color: var(--ink-3);
    position: relative;
}
.gd-thumb img {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: contain;
    background: #fff;
}
.gd-thumb.has-img { background: #fff; }

.gd-sheet-hero {
    width: 100%; aspect-ratio: 1;
    max-height: 280px;
    border-radius: 18px; overflow: hidden;
    background: var(--bg);
    display: grid; place-items: center;
    margin-bottom: 14px;
}
.gd-sheet-hero img { width: 100%; height: 100%; object-fit: contain; }
.gd-sheet-hero .ph { font-size: 44px; font-weight: 800; color: var(--ink-3); }

/* ─────────────────────────────── نوار پیشرفت */
.gd-prog { margin: 10px 0 4px; }
.gd-prog-bar {
    height: 8px; border-radius: 999px; background: var(--bg); overflow: hidden;
}
.gd-prog-bar i {
    display: block; height: 100%; width: 0;
    background: var(--brand); border-radius: 999px;
    transition: width .25s ease;
}
.gd-prog-text { font-size: 12px; color: var(--ink-2); }

/* ─────────────────────────────── کلید */
.gd-switch {
    display: flex; align-items: center; gap: 10px;
    margin-top: 12px; font-size: 13.5px; color: var(--ink-2);
}
.gd-switch input { width: 20px; height: 20px; accent-color: var(--brand); flex: none; }

/* ─────────────────────────────── کارت پیشنهاد دانلود عکس */
.gd-offer {
    background: linear-gradient(135deg, var(--brand-soft), #fff);
    border: 1px solid #dbeafe;
    border-radius: var(--r-card);
    padding: 14px 16px;
    margin-bottom: 12px;
}
.gd-offer h3 { font-size: 14.5px; margin-bottom: 4px; }
.gd-offer p { font-size: 12.5px; color: var(--ink-2); margin-bottom: 10px; }
.gd-offer-row { display: flex; gap: 8px; }
.gd-offer-row .gd-btn { flex: 1; margin: 0; padding: 10px; font-size: 13.5px; }

.gd-empty {
    text-align: center; padding: 56px 20px; color: var(--ink-3);
}
.gd-empty-ico { width: 54px; height: 54px; fill: var(--ink-3); opacity: .45; }
.gd-empty p { font-weight: 600; color: var(--ink-2); margin-top: 10px; }
.gd-empty span { font-size: 12.5px; }

/* ═══════════════════════════ سبد ═══════════════════════════ */
.gd-cart { list-style: none; display: grid; gap: 8px; }
.gd-cart li {
    background: var(--surface); border-radius: 16px;
    padding: 11px 13px; box-shadow: var(--shadow);
}
.gd-cart-top { display: flex; gap: 10px; align-items: flex-start; }
.gd-cart-name { flex: 1; font-size: 14px; font-weight: 600; }
.gd-cart-del { color: var(--ink-3); padding: 2px 4px; }
.gd-cart-bot {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 8px; gap: 10px;
}
.gd-qty { display: flex; align-items: center; gap: 2px; background: var(--bg); border-radius: 12px; }
.gd-qty button { width: 34px; height: 34px; font-size: 19px; font-weight: 700; color: var(--brand); }
.gd-qty input {
    width: 48px; text-align: center; background: none; border: 0;
    outline: none; font-weight: 700; unicode-bidi: plaintext;
}
.gd-cart-sum { font-weight: 700; unicode-bidi: plaintext; }

.gd-cartfoot {
    background: var(--surface);
    border-radius: var(--r-card);
    padding: 14px 16px;
    box-shadow: var(--shadow);
    margin-top: 12px;
}
.gd-customer-btn {
    display: flex; align-items: center; gap: 8px;
    width: 100%; background: var(--bg);
    border-radius: var(--r-btn); padding: 10px 12px;
    font-size: 13.5px; font-weight: 600; margin-bottom: 12px;
}
.gd-totals { display: grid; gap: 2px; }
.gd-totals > div { display: flex; justify-content: space-between; padding: 3px 0; }
.gd-totals dt { color: var(--ink-2); font-size: 13px; }
.gd-totals dd { font-weight: 600; unicode-bidi: plaintext; }
.gd-grand {
    border-top: 1px dashed var(--line);
    margin-top: 6px; padding-top: 8px !important;
}
.gd-grand dt { font-weight: 700; color: var(--ink) !important; font-size: 14px !important; }
.gd-grand dd { font-size: 18px; font-weight: 800; color: var(--brand); }
.gd-toman dd { font-size: 11.5px; color: var(--ink-3); font-weight: 400; }

/* ═══════════════════════════ صف خروجی ═══════════════════════════ */
.gd-outbox { margin-bottom: 6px; }
.gd-state {
    font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
}
.gd-state[data-s="pending"] { background: #fef3c7; color: #b45309; }
.gd-state[data-s="failed"]  { background: #fee2e2; color: var(--danger); }
.gd-err { font-size: 11.5px; color: var(--danger); margin-top: 4px; }

/* ═══════════════════════════ نوار پایین ═══════════════════════════ */
.gd-tabs {
    position: fixed; inset-inline: 0; bottom: 0; z-index: 30;
    display: grid; grid-template-columns: repeat(5, 1fr);
    background: var(--surface);
    box-shadow: var(--shadow-up);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
.gd-tab {
    position: relative;
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 8px 0 7px;
    color: var(--ink-3); font-size: 10.5px; font-weight: 600;
}
.gd-tab .gd-ico { width: 21px; height: 21px; }
.gd-tab.is-active { color: var(--brand); }
.gd-dot {
    position: absolute; top: 6px; inset-inline-end: 50%;
    transform: translateX(50%) translateX(14px);
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--danger);
}

/* ═══════════════════════════ اسکنر ═══════════════════════════ */
.gd-scanner {
    position: fixed; inset: 0; z-index: 60; background: #000;
    display: grid; place-items: center;
}
.gd-scanner video { width: 100%; height: 100%; object-fit: cover; }

/* ظرف رمزگشای پشتیبان. خودش <video> می‌سازد، پس همان قاعده‌ی بالا
   رویش هم می‌نشیند؛ فقط باید تمام صفحه را بگیرد و زیر کادر و راهنما
   بماند. */
#scanFallback { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
#scanFallback video { width: 100% !important; height: 100% !important; object-fit: cover; }
/* این کتابخانه یک تصویر «اسکن» و چند عنصر کمکی می‌سازد که با پوسته‌ی
   ما جور نیست — کادر و راهنمای خودمان جایشان را می‌گیرند. */
#scanFallback img, #scanFallback #qr-shaded-region { display: none !important; }
.gd-scan-frame, .gd-scan-hint, .gd-scan-close { z-index: 2; }
.gd-scan-frame {
    position: absolute; width: 74%; max-width: 320px; aspect-ratio: 1.5;
    border: 3px solid var(--accent); border-radius: 18px;
    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .5);
}
.gd-scan-hint {
    position: absolute; bottom: 16%; color: #fff; font-size: 13.5px;
    background: rgba(0, 0, 0, .55); padding: 7px 14px; border-radius: 999px;
    text-align: center; max-width: 84%;
}
.gd-scan-close {
    position: absolute; top: calc(14px + env(safe-area-inset-top, 0px));
    inset-inline-start: 14px;
    width: 42px; height: 42px; border-radius: 50%;
    background: rgba(0, 0, 0, .55); color: #fff; font-size: 18px;
}

/* ═══════════════════════════ کشو ═══════════════════════════ */
.gd-veil {
    position: fixed; inset: 0; z-index: 40;
    background: rgba(15, 23, 42, .45);
    animation: fade .16s ease;
}
.gd-sheet {
    position: fixed; inset-inline: 0; bottom: 0; z-index: 50;
    background: var(--surface);
    border-radius: 24px 24px 0 0;
    max-height: 85vh;
    display: flex; flex-direction: column;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    animation: rise .22s cubic-bezier(.2, .9, .3, 1);
}
@keyframes rise { from { transform: translateY(100%); } }
.gd-sheet-grip {
    width: 38px; height: 4px; border-radius: 999px;
    background: var(--line); margin: 9px auto 2px;
}
.gd-sheet-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 6px 16px 10px; border-bottom: 1px solid var(--line);
}
.gd-sheet-head strong { font-size: 16px; }
.gd-sheet-body { padding: 14px 16px 18px; overflow-y: auto; }

/* ─────────────────────────────── «ثبت شد» */
.gd-done { text-align: center; padding: 6px 0 18px; }
.gd-done-ico {
    width: 62px; height: 62px; margin: 0 auto 12px;
    border-radius: 50%; background: #dcfce7; color: var(--ok);
    display: grid; place-items: center; font-size: 32px; font-weight: 800;
}
.gd-done-t { font-size: 17px; font-weight: 700; }
.gd-done-s { font-size: 12.5px; color: var(--ink-3); unicode-bidi: plaintext; margin-top: 2px; }
.gd-done-p { font-size: 20px; font-weight: 800; color: var(--brand); margin-top: 8px; unicode-bidi: plaintext; }

.gd-pay-row {
    display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
}
.gd-pay-row label { flex: 1; font-size: 13.5px; font-weight: 600; }
.gd-pay-row input { width: 46%; }

/* ═══════════════════════════ توست ═══════════════════════════ */
.gd-toast {
    position: fixed; z-index: 70;
    bottom: calc(var(--tabs-h) + 14px);
    inset-inline: 20px;
    background: var(--ink); color: #fff;
    border-radius: 14px; padding: 12px 16px;
    font-size: 13.5px; text-align: center;
    opacity: 0; transform: translateY(10px);
    transition: opacity .2s, transform .2s;
    pointer-events: none;
}
.gd-toast.is-on { opacity: 1; transform: translateY(0); }
.gd-toast[data-kind="error"] { background: var(--danger); }
.gd-toast[data-kind="ok"]    { background: var(--ok); }

/* ═══════════════════════════ دسکتاپ ═══════════════════════════ */
/* اپ برای گوشی است، ولی اگر کسی روی مرورگر دسکتاپ بازش کرد نباید
   کشیده و زشت شود. */
@media (min-width: 720px) {
    body { display: flex; justify-content: center; }
    #app { width: 100%; max-width: 480px; box-shadow: 0 0 60px rgba(0,0,0,.08); background: var(--bg); }
    .gd-tabs { max-width: 480px; inset-inline: auto; }
}

/* ═════════════════════════════ ثبت‌ها ═════════════════════════════ */
/* کلید بخش. چهار دفتر در یک تب، چون نوار پایین جای پنج تب بیشتر ندارد. */
.gd-seg {
    display: grid; grid-template-columns: repeat(4, 1fr);
    background: var(--bg); border-radius: 14px; padding: 3px;
    margin-bottom: 12px;
}
.gd-seg button {
    padding: 9px 0; border-radius: 11px;
    font-size: 13px; font-weight: 600; color: var(--ink-2);
    transition: background .15s, color .15s;
}
.gd-seg button.is-active { background: var(--surface); color: var(--brand); box-shadow: var(--shadow); }

.gd-two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.gd-two .gd-btn { margin: 0; }

.gd-fab {
    width: 100%; margin-bottom: 12px;
    background: var(--brand); color: #fff;
    border-radius: var(--r-btn); padding: 12px;
    font-weight: 700; font-size: 14px;
}
.gd-fab:active { background: var(--brand-dark); }

.gd-kindchip {
    width: 34px; height: 34px; flex: none;
    border-radius: 11px; background: var(--bg);
    display: grid; place-items: center; font-size: 17px;
}

.gd-pick { max-height: 42vh; overflow-y: auto; }

.gd-state[data-s="ok"] { background: #dcfce7; color: #15803d; }

/* ───────────────────────────── تردد */
.gd-punch {
    background: var(--surface); border-radius: var(--r-card);
    padding: 22px 18px; box-shadow: var(--shadow);
    text-align: center; margin-bottom: 12px;
}
.gd-punch-state { font-size: 15px; font-weight: 700; }
.gd-punch-time { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; unicode-bidi: plaintext; }
.gd-punch-btn {
    width: 100%; margin-top: 16px; padding: 18px;
    border-radius: 20px; font-size: 18px; font-weight: 800;
    background: var(--ok); color: #fff;
    transition: transform .1s;
}
.gd-punch-btn[data-kind="out"] { background: var(--warn); }
.gd-punch-btn:active { transform: scale(.98); }
.gd-punch-btn[disabled] { opacity: .6; }
.gd-punch .gd-kv { margin-top: 16px; text-align: right; }

/* ═════════════════════════════ ERP کامل ═════════════════════════════ */
.gd-erpbtn {
    background: var(--brand); color: #fff;
    border-radius: 10px; padding: 6px 12px;
    font-size: 12px; font-weight: 800; letter-spacing: .04em;
}
.gd-erpbtn:active { background: var(--brand-dark); }

/* پرده‌ی «در حال باز کردن ERP» — با دکمه‌ی انصراف، تا کسی که فقط
   می‌خواست یک قیمت آفلاین ببیند گیر نکند. */
.gd-erp-splash {
    position: fixed; inset: 0; z-index: 80;
    background: linear-gradient(160deg, var(--brand), #1e3a8a);
    display: grid; place-items: center; padding: 24px;
}
.gd-erp-card {
    background: var(--surface); border-radius: 24px;
    padding: 28px 22px; width: 100%; max-width: 340px; text-align: center;
    box-shadow: 0 20px 50px rgba(0,0,0,.25);
}
.gd-erp-logo {
    width: 62px; height: 62px; margin: 0 auto 14px;
    border-radius: 18px; background: var(--brand-soft); color: var(--brand);
    display: grid; place-items: center; font-weight: 900; font-size: 17px;
}
.gd-erp-t { font-size: 16px; font-weight: 700; }
.gd-erp-s { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }
.gd-erp-bar {
    height: 5px; border-radius: 999px; background: var(--bg);
    overflow: hidden; margin: 18px 0 16px;
}
.gd-erp-bar i {
    display: block; height: 100%; width: 0; background: var(--brand);
    transition: width 2.4s linear;
}

/* نوار به‌روزرسانی APK */
.gd-update {
    position: fixed; z-index: 75;
    inset-inline: 12px; bottom: calc(var(--tabs-h) + 10px);
    background: var(--ink); color: #fff;
    border-radius: 16px; padding: 10px 12px;
    display: flex; align-items: center; gap: 10px;
    font-size: 13px; box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
.gd-update span { flex: 1; }
.gd-update-btn {
    background: var(--accent); color: #713f12;
    border-radius: 10px; padding: 7px 14px;
    font-weight: 800; font-size: 12.5px; text-decoration: none;
}
.gd-update-x { color: #94a3b8; padding: 0 4px; font-size: 15px; }

/* =====================================================================
 * لایه‌ی ریدیزاین — بازنویسی سطح‌های پرترافیک روی توکن‌های دیزاین سیستم
 *
 * چرا لایه و نه بازنویسی کل فایل: ۷۰۰ خط قانون و ۶۰ کلاس اینجاست که
 * App.js به اسم صدایشان می‌زند. بازنویسی از صفر یعنی ریسک جاافتادن یک
 * کلاس و شکستن یک صفحه‌ی کامل، بدون هیچ سود بصری اضافه. این لایه فقط
 * آنچه را که کاربر بیشترین وقتش را رویش می‌گذراند بالا می‌برد.
 * ===================================================================== */

/* ── هدر: هویت، نه فقط یک عنوان ─────────────────────────────────────
   قبلاً هدر یک کلمه‌ی خشک بود. حالا لوگوی مجموعه، نام صفحه و نام کاربر
   با هم — همان چیزی که داشبورد ERP هم دارد، تا اپ ادامه‌ی آن به نظر
   برسد نه یک برنامه‌ی جدا. */
.gd-top {
    padding: calc(var(--s3) + env(safe-area-inset-top, 0px)) var(--s4) var(--s3);
    box-shadow: var(--shadow-xs);
    border-bottom: 0;
}
.gd-top-title strong {
    font-size: var(--fs-h3);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-tight);
}
.gd-top-sub { font-size: var(--fs-xs); }

.gd-pill {
    font-size: var(--fs-xs);
    padding: 5px 11px;
    background: var(--surface-success-soft);
    color: var(--text-success);
}
.gd-pill[data-state="offline"] { background: var(--surface-accent-soft); color: var(--text-warn); }

/* ── جست‌وجو: عنصر اصلی صفحه‌ی فروش، پس بزرگ‌تر و واضح‌تر ─────────── */
.gd-searchrow { gap: var(--s2); margin-bottom: var(--s3); }
.gd-input {
    padding: 14px var(--s4);
    background: var(--surface);
    border-color: var(--border-default);
    font-size: var(--fs-body);
}
.gd-input:focus { box-shadow: var(--focus-ring); border-color: var(--border-focus); }
.gd-scanbtn {
    width: 50px; height: 50px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-brand);
}

/* ── ردیف کالا: عکس بزرگ‌تر، قیمت به‌عنوان لنگر بصری ───────────────── */
.gd-row {
    gap: var(--s3);
    padding: var(--s3);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    transition: box-shadow var(--dur-fast) var(--ease-standard),
                transform var(--dur-fast) var(--ease-standard);
}
.gd-row:active { transform: scale(var(--press-scale)); box-shadow: var(--shadow-sm); }
.gd-row-title {
    font-size: var(--fs-body);
    font-weight: var(--fw-medium);
    line-height: var(--lh-tight);
}
.gd-row-meta { font-size: var(--fs-xs); margin-top: var(--s1); gap: var(--s2); }
.gd-price {
    font-size: var(--fs-price);
    font-weight: var(--fw-black);
    letter-spacing: var(--ls-tight);
    line-height: 1.2;
}
.gd-price-unit { font-size: var(--fs-xs); }
.gd-thumb { width: 54px; height: 54px; border-radius: var(--radius-md); }

.gd-list { gap: var(--s2); }

/* ── عنوان بخش: خط‌کش بصری بین گروه‌ها ───────────────────────────── */
.gd-sec-title {
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    color: var(--text-muted);
    margin: var(--s5) var(--s1) var(--s2);
}

/* ── کارت: عمق کمتر، فاصله‌ی بیشتر — سبک‌تر به چشم می‌آید ─────────── */
.gd-card {
    border-radius: var(--radius-lg);
    padding: var(--s4) var(--s5);
    box-shadow: var(--shadow-xs);
    margin-bottom: var(--s3);
}

/* ── دکمه: قد بلندتر برای انگشت، وزن بیشتر برای عمل اصلی ─────────── */
.gd-btn {
    padding: 14px var(--s5);
    border-radius: var(--radius-md);
    font-weight: var(--fw-bold);
    transition: transform var(--dur-fast) var(--ease-standard),
                background var(--dur-fast) var(--ease-standard);
}
.gd-btn:active { transform: scale(var(--press-scale)); }
.gd-btn-primary { box-shadow: var(--shadow-brand); }
.gd-btn-danger { background: var(--surface-danger-soft); }

/* ── پای سبد: نوار چسبان، نه بلوکی که ته صفحه گم شود ─────────────
   فروشنده وسط اضافه کردن کالا باید همیشه جمع کل و دکمه‌ی ثبت را
   ببیند. قبلاً باید تا ته فهرست اسکرول می‌کرد. */
.gd-cartfoot {
    position: sticky;
    bottom: calc(var(--tabs-h) - var(--s3));
    z-index: 15;
    border-radius: var(--radius-lg);
    padding: var(--s4);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-subtle);
}
.gd-grand dd { font-size: var(--fs-h2); font-weight: var(--fw-black); }
.gd-toman dd { font-size: var(--fs-xs); }

/* ── نوار پایین: نشانگر فعال، نه فقط تغییر رنگ ──────────────────── */
.gd-tab { padding: var(--s2) 0 7px; font-size: 10.5px; }
.gd-tab::before {
    content: '';
    position: absolute; top: 0; inset-inline-start: 50%;
    transform: translateX(50%);
    width: 0; height: 3px;
    border-radius: 0 0 var(--radius-pill) var(--radius-pill);
    background: var(--surface-brand);
    transition: width var(--dur-base) var(--ease-out);
}
.gd-tab.is-active::before { width: 26px; }
.gd-tabs { box-shadow: var(--shadow-up); }

/* ── حالت خالی: راهنما، نه یک آیکون خاکستری ─────────────────────── */
.gd-empty { padding: var(--space-12) var(--s5); }
.gd-empty p { font-size: var(--fs-h3); font-weight: var(--fw-bold); margin-top: var(--s3); }
.gd-empty span { font-size: var(--fs-sm); display: block; margin-top: var(--s1); }
.gd-empty-ico { width: 64px; height: 64px; opacity: .35; }

/* ── کشو: دستگیره‌ی واضح‌تر و سرصفحه‌ی سنگین‌تر ──────────────────── */
.gd-sheet { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.gd-sheet-head strong { font-size: var(--fs-h3); font-weight: var(--fw-bold); }
.gd-sheet-body { padding: var(--s4) var(--s5) var(--s6); }

/* ── کلید بخش «ثبت‌ها» ─────────────────────────────────────────── */
.gd-seg { border-radius: var(--radius-md); padding: var(--s1); }
.gd-seg button { font-size: var(--fs-sm); font-weight: var(--fw-bold); border-radius: var(--radius-sm); }
.gd-seg button.is-active { box-shadow: var(--shadow-xs); }

/* ── دکمه‌ی تردد: بزرگ‌ترین هدف لمسی اپ ─────────────────────────── */
.gd-punch-btn {
    border-radius: var(--radius-lg);
    font-size: var(--fs-h2);
    box-shadow: var(--shadow-md);
}

/* ── ERP: تنها دکمه‌ای که از رنگ برند پر است، چون مقصد اصلی است ─── */
.gd-erpbtn {
    border-radius: var(--radius-sm);
    padding: 7px 13px;
    font-size: var(--fs-xs);
    box-shadow: var(--shadow-brand);
}

/* ── دسکتاپ: اپ برای گوشی است ولی نباید کشیده شود ───────────────── */
@media (min-width: 720px) {
    #app { border-radius: var(--radius-lg); overflow: hidden; }
}

/* ورود با نام کاربری روی صفحه‌ی اتصال */
#loginBox .gd-input, #otpBox .gd-input { margin-bottom: var(--space-2, 8px); }
#loginBox .gd-btn, #otpBox .gd-btn      { margin-top: var(--space-1, 4px); }
#otpBox .gd-code-input { letter-spacing: .28em; }
.gd-pair-card > .gd-or  { margin: 18px 0 12px; }

/* مانده حساب مشتری — مورد ۱ نقشه‌ی تکمیل */
.gd-due { text-align: center; line-height: 1.25; }
.gd-due b    { display: block; font-size: 13px; color: var(--danger); font-weight: 700; }
.gd-due span { display: block; font-size: 10.5px; color: var(--ink-3); }

.gd-balance {
    display: flex; align-items: center; justify-content: space-between;
    margin: var(--s3) 0; padding: var(--s3) var(--s4);
    border-radius: var(--r-btn);
    background: var(--surface-success-soft); color: var(--ok);
    font-size: 13.5px;
}
.gd-balance b { font-weight: 700; }
.gd-balance.is-due { background: var(--surface-danger-soft); color: var(--danger); }

/* برچسب بدهی کنار نام مشتری، بالای سبد */
.gd-due-tag {
    margin-inline-start: 6px; padding: 1px 7px;
    border-radius: var(--radius-pill);
    background: var(--surface-danger-soft); color: var(--danger);
    font-size: 10.5px; font-weight: 700;
    unicode-bidi: plaintext;
}

/* =====================================================================
 * حد لمس — سه دکمه‌ای که زیر ۴۴ پیکسل بودند
 *
 * اندازه‌گیری روی خود صفحه (۳۷۵×۸۱۲) این سه را نشان داد:
 *   .gd-iconbtn    ۳۸×۴۴   — عرض کم
 *   .gd-update-btn ۶۴×۳۵   — ارتفاع کم
 *   .gd-update-x   ۲۰×۴۴   — عرض کم
 *
 * ⚠ اندازه‌ی *دیده‌شده* عمداً دست‌نخورده می‌ماند و فقط ناحیه‌ی لمس بزرگ
 * می‌شود. بزرگ کردن خودِ دکمه، چیدمان هدر را که روی ۳۸ پیکسل بسته شده
 * جابه‌جا می‌کرد. انگشت روی گوشی حدود ۹ میلی‌متر پهناست؛ دکمه‌ی ۲۰
 * پیکسلی یعنی خطای لمس، نه ریزه‌کاری بصری.
 * ===================================================================== */
.gd-iconbtn {
    min-width: 44px;                 /* ۳۸ ← ۴۴ */
    min-height: 44px;
}

.gd-update-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px;                /* ۳۵.۳ ← ۴۴ */
    padding-block: 0;                /* padding عمودی جای min-height را می‌گرفت */
}

.gd-update-x {
    min-width: 44px; min-height: 44px;
    display: inline-grid; place-items: center;
    padding: 0;                      /* ۰ ۴px دیگر لازم نیست */
}