/* ============================================================================
   DESIGN SYSTEM - سیستم سفارش‌گیری ویزیتوری
   ----------------------------------------------------------------------------
   منطق پالت: بندرلنگه زیر آفتاب مستقیم خلیج‌فارس یعنی کنتراست بالا اجباریه؛
   شیشه‌ی روشن/پاستلی زیر نور مستقیم عملاً ناخواناست. پس «گلس تیره» به جای
   «گلس روشن» - شیشه روی یک زمینه‌ی سرمه‌ای غروب، با سه رنگ تاکیدی معنادار:
   نارنجی (اکشن اصلی)، طلایی (احتیاط/اعتبار)، فیروزه‌ای (اطلاعات/خنکی آب خلیج).
   اعداد/مبالغ همیشه با فونت مونواسپیس سیستم (بدون هزینه دانلود اضافه) چیده می‌شن
   تا ستون‌های پول توی جدول‌ها درست زیر هم بشینن.
   ============================================================================ */

:root {
    /* رنگ پایه */
    --ink:        #0a0f16;
    --ink-2:      #10161f;
    --glass:      rgba(255, 255, 255, 0.055);
    --glass-brd:  rgba(255, 255, 255, 0.09);
    --glass-hi:   rgba(255, 255, 255, 0.09);

    /* تاکیدی */
    --ember:      #ff6b42;
    --ember-dim:  #c94f2e;
    --gold:       #f2b705;
    --tide:       #22d3c9;
    --alarm:      #f0453a;
    --ok:         #34d17a;

    /* متن */
    --paper:      #f1eee7;
    --mist:       #8c93a6;
    --mist-dim:   #5b6274;

    /* تایپوگرافی */
    --font-fa:    'Vazirmatn', sans-serif;
    --font-num:   ui-monospace, 'SF Mono', 'Cascadia Mono', Consolas, monospace;

    /* هندسه */
    --radius-sm:  10px;
    --radius-md:  16px;
    --radius-lg:  22px;
    --blur:       18px;

    --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
    --space-5: 24px; --space-6: 32px; --space-7: 48px;
}

/* حالت روز - فقط سطوح رو روشن‌تر می‌کنیم، ساختار رنگ‌ها یکی می‌مونه */
[data-theme="light"] {
    --ink:        #eef0f4;
    --ink-2:      #e4e7ee;
    --glass:      rgba(20, 25, 35, 0.045);
    --glass-brd:  rgba(20, 25, 35, 0.10);
    --paper:      #171b23;
    --mist:       #545b6b;
    --mist-dim:   #8a90a0;
}

* { box-sizing: border-box; }

html {
    direction: rtl;
}

body {
    margin: 0;
    background:
        radial-gradient(1200px 600px at 85% -10%, rgba(255,107,66,0.08), transparent 60%),
        radial-gradient(900px 500px at -10% 110%, rgba(34,211,201,0.06), transparent 60%),
        var(--ink);
    color: var(--paper);
    font-family: var(--font-fa);
    font-weight: 500;
    line-height: 1.6;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    transition: background-color .25s ease, color .25s ease;
}

h1, h2, h3, .num-xl {
    font-weight: 800;
    letter-spacing: -0.01em;
}

.num, .money, .qty, input[type="number"], time, .mono {
    font-family: var(--font-num);
    font-feature-settings: "tnum" 1;
    direction: ltr;
    unicode-bidi: plaintext;
}

a { color: var(--tide); }

/* --------------------------------------------------------------- Glass --- */
.glass {
    background: var(--glass);
    border: 1px solid var(--glass-brd);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(var(--blur)) saturate(140%);
    -webkit-backdrop-filter: blur(var(--blur)) saturate(140%);
    box-shadow: 0 8px 32px rgba(0,0,0,0.28), inset 0 1px 0 var(--glass-hi);
}

.card {
    padding: var(--space-5);
}

/* -------------------------------------------------------------- Button --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 14px 22px;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    font-family: var(--font-fa);
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    transition: transform .12s ease, filter .12s ease, background .12s ease;
    -webkit-tap-highlight-color: transparent;
    min-height: 48px;
}
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }

.btn-primary  { background: var(--ember); color: #180a04; }
.btn-primary:hover:not(:disabled)  { filter: brightness(1.08); }
.btn-gold     { background: var(--gold); color: #1a1300; }
.btn-ghost    { background: transparent; border-color: var(--glass-brd); color: var(--paper); }
.btn-ghost:hover:not(:disabled) { background: var(--glass); }
.btn-danger   { background: transparent; border-color: var(--alarm); color: var(--alarm); }
.btn-danger:hover:not(:disabled) { background: rgba(240,69,58,0.12); }
.btn-block    { width: 100%; }
.btn-lg       { min-height: 58px; font-size: 17px; }

/* --------------------------------------------------------------- Field --- */
.field { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }
.field label { font-size: 13px; color: var(--mist); font-weight: 600; }
.field input, .field select, .field textarea {
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--glass-brd);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    color: var(--paper);
    font-family: var(--font-fa);
    font-size: 16px; /* جلوگیری از زوم خودکار سافاری موبایل */
    min-height: 48px;
    outline: none;
    transition: border-color .15s ease;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--tide); }
.field .hint { font-size: 12px; color: var(--mist-dim); }

/* --------------------------------------------------------------- Badge --- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}
.badge-ok      { background: rgba(52,209,122,0.14); color: var(--ok); }
.badge-warn    { background: rgba(242,183,5,0.14);  color: var(--gold); }
.badge-danger  { background: rgba(240,69,58,0.14);  color: var(--alarm); }
.badge-info    { background: rgba(34,211,201,0.14); color: var(--tide); }
.badge-mute    { background: rgba(140,147,166,0.14); color: var(--mist); }

/* -------------------------------------------------------- Credit Gauge --- */
/* عنصر امضادار سیستم: نمای لحظه‌ای نسبت بدهی به سقف اعتبار، رنگ از فیروزه‌ای
   تا طلایی تا قرمز - همون منطقی که کدِ FIN_01 پشتشه، این‌جا قابل مشاهده می‌شه. */
.credit-gauge { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.credit-gauge svg { transform: rotate(-225deg); }
.credit-gauge .track { fill: none; stroke: rgba(255,255,255,0.08); stroke-linecap: round; }
.credit-gauge .fill  { fill: none; stroke-linecap: round; transition: stroke-dashoffset .5s ease, stroke .3s ease; }
.credit-gauge .label { position: absolute; text-align: center; }
.credit-gauge .label .pct { font-family: var(--font-num); font-weight: 800; font-size: 22px; display: block; }
.credit-gauge .label .cap { font-size: 10px; color: var(--mist); }

/* ---------------------------------------------------------------- Misc --- */
.container { max-width: 1180px; margin: 0 auto; padding: 0 var(--space-5); }
.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }
.gap-2 { gap: var(--space-2); } .gap-3 { gap: var(--space-3); } .gap-4 { gap: var(--space-4); }
.grow { flex: 1; }
.muted { color: var(--mist); }
.text-sm { font-size: 13px; }
.divider { height: 1px; background: var(--glass-brd); border: none; margin: var(--space-4) 0; }

table { width: 100%; border-collapse: collapse; }
th { text-align: right; font-size: 12px; color: var(--mist); font-weight: 700; padding: var(--space-3); border-bottom: 1px solid var(--glass-brd); }
td { padding: var(--space-3); border-bottom: 1px solid rgba(255,255,255,0.04); font-size: 14px; }
tr:last-child td { border-bottom: none; }

.skeleton {
    background: linear-gradient(90deg, rgba(255,255,255,0.03) 25%, rgba(255,255,255,0.07) 37%, rgba(255,255,255,0.03) 63%);
    background-size: 400% 100%;
    animation: skeleton-wave 1.4s ease infinite;
    border-radius: var(--radius-sm);
}
@keyframes skeleton-wave { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

:focus-visible { outline: 2px solid var(--tide); outline-offset: 2px; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--glass-brd); border-radius: 8px; }