/* ============================================================
   ma-design.css — بازطراحی UI بر اساس design.md (منولی)
   آخرین stylesheet صفحه؛ فقط ظاهر را تغییر می‌دهد — بدون دست‌زدن
   به منطق JS، بک‌اند و فیلدها.

   راهنمای لایه‌ها:
   • قواعد معمولی: unlayered → بالاتر از همه لایه‌ها (theme/utilities/bootstrap).
   • قواعد !important برای شکستن !importantهای Bootstrap: داخل لایهٔ bs-fix
     (اولین لایه؛ برای important، ترتیب لایه‌ها معکوس است و bs-fix می‌برد).

   ── مرحله ۱: توکن‌های رنگ design.md ──
   surface: #131313 · containers: 0e/1c/20/2a/35 · on-surface: #e5e2e1
   تأکید: نئون لایم #D4FF00 (فقط نقاط تعامل)
   ── مرحله ۲: کارت‌ها — شعاع ۳۲px، بوردر ظریف، سایه نرم ──
   ── مرحله ۳: ورودی کپسولی + فوکوس لایم + چیپ‌ها ──
   ── مرحله ۴: ناوبری شیشه‌ای (frosted glass) ──
   ============================================================ */

@layer bs-fix, bootstrap;
/* ↑ کمکی: اما ترتیب واقعی لایه در bootstrap.layer.css اعلام شده؛
   این خط فقط مطمئن می‌شود اگر لایه‌ها تازه اعلام شوند باز همان ترتیب است. */

/* ============================================================
   ── bs-fix (فقط !importantها؛ لایهٔ اول = برندهٔ important) ──
   ============================================================ */
@layer bs-fix {
  /* بوردر ظریف سفید (طراحی: 1px rgba(255,255,255,.1)) —
     شکستن .border مرجع بوت‌استرپ که #dee2e6 را با !important نشان می‌کند */
  .border { border-color: rgba(255, 255, 255, 0.1) !important; }
  .border-neutral-900 { border-color: rgba(255, 255, 255, 0.05) !important; }
  .border-neutral-800 { border-color: rgba(255, 255, 255, 0.10) !important; }
  .border-neutral-700 { border-color: rgba(255, 255, 255, 0.12) !important; }
  .border-neutral-600 { border-color: rgba(255, 255, 255, 0.18) !important; }
  .border-neutral-500 { border-color: rgba(255, 255, 255, 0.15) !important; }
  .border-neutral-300 { border-color: rgba(255, 255, 255, 0.22) !important; }
  .border-neutral-200 { border-color: rgba(255, 255, 255, 0.28) !important; }
  .border-neutral-100 { border-color: rgba(255, 255, 255, 0.32) !important; }
  .border-stone-700   { border-color: rgba(255, 255, 255, 0.12) !important; }
  .border-stone-800   { border-color: rgba(255, 255, 255, 0.10) !important; }

  /* فوکوس ورودی همیشه نئون لایم (حتی روی !important بوت‌استرپ) */
  #root input:focus,
  #root textarea:focus,
  #root select:focus {
    box-shadow: 0 0 0 2px rgba(212, 255, 0, 0.35), 0 0 16px rgba(212, 255, 0, 0.12) !important;
  }
}

/* ============================================================
   ── مرحله ۱: توکن‌های رنگ design.md ──
   ============================================================ */
:root {
  --color-surface: #131313;
  --color-surface-dim: #131313;
  --color-surface-bright: #3a3939;
  --color-surface-container-lowest: #0e0e0e;
  --color-surface-container-low: #1c1b1b;
  --color-surface-container: #201f1f;
  --color-surface-container-high: #2a2a2a;
  --color-surface-container-highest: #353534;
  --color-on-surface: #e5e2e1;
  --color-on-surface-variant: #c5c9ac;
  --color-surface-variant: #353534;
  --color-background: #131313;
  --color-on-background: #e5e2e1;
  --color-outline: #8f9378;
  --color-outline-variant: #444932;
  --color-primary: #d4ff00;
  --color-on-primary: #2a3400;
  --color-primary-container: #caf300;
  --color-on-primary-container: #596c00;
  --color-inverse-surface: #e5e2e1;
  --color-inverse-on-surface: #313030;
  --color-inverse-primary: #536600;
  --color-tertiary: #ffffff;
  --color-on-tertiary: #313030;
  --color-tertiary-container: #e5e2e1;
  --color-on-tertiary-container: #656464;
  --color-error: #ffb4ab;
  --color-error-container: #93000a;
  --color-on-error-container: #ffdad6;
  --ma-border-soft: rgba(255, 255, 255, 0.1);

  /* مرحله ۲ — شعاع‌ها: کارت اصلی ۳۲px */
  --radius-md: 0.5rem;    /*  8px */
  --radius-lg: 0.75rem;   /* 12px */
  --radius-xl: 1rem;      /* 16px */
  --radius-2xl: 1.5rem;   /* 24px */
  --radius-3xl: 2rem;     /* 32px — استاندارد کارت‌های design.md */
}

/* ---------- بدنه و پس‌زمینه پایه ---------- */
body {
  background-color: #131313;
  color: #e5e2e1;
}

/* ---------- بازتصویب سطح‌های خنثی Tailwind به سطوح design.md ----------
   bg-neutral-950 → container-lowest #0e0e0e   ·  900 → low #1c1b1b
   bg-neutral-800 → container #201f1f          ·  700/600 → high #2a2a2a
   bg-neutral-500 → container-highest #353534 */
.bg-neutral-950  { background-color: #0e0e0e; }
.bg-neutral-900  { background-color: #1c1b1b; }
.bg-neutral-800  { background-color: #201f1f; }
.bg-neutral-700  { background-color: #2a2a2a; }
.bg-neutral-600  { background-color: #2a2a2a; }
.bg-neutral-500  { background-color: #353534; }
.bg-\[\#0a0a0a\] { background-color: #0e0e0e; }
.bg-\[\#0b0b0b\] { background-color: #0e0e0e; }
.bg-\[\#0c0c0c\] { background-color: #0e0e0e; }
.bg-\[\#0d0d0d\] { background-color: #0e0e0e; }
.bg-\[\#0e0e0e\] { background-color: #0e0e0e; }
.bg-\[\#0f0f0f\] { background-color: #0e0e0e; }
/* سطح‌های تیره literal در فرم‌ها → سطوح استاندارد design.md */
.bg-\[\#161616\] { background-color: #1c1b1b; }
.bg-\[\#181818\] { background-color: #1c1b1b; }
.bg-\[\#1e1e1e\] { background-color: #201f1f; }
.bg-\[\#1f1f1f\] { background-color: #201f1f; }
.bg-\[\#202020\] { background-color: #201f1f; }
.bg-\[\#212121\] { background-color: #201f1f; }
.bg-\[\#242424\] { background-color: #201f1f; }
.bg-\[\#262626\] { background-color: #201f1f; }

/* هوور معادل سطح‌های تیره */
.hover\:bg-neutral-800:hover { background-color: #201f1f !important; }
.hover\:bg-neutral-700:hover { background-color: #2a2a2a !important; }
.hover\:bg-neutral-900:hover { background-color: #1c1b1b !important; }
.hover\:bg-neutral-950:hover { background-color: #0e0e0e !important; }

/* گرادیانت معادل (views.css: grad-neutral-950) بر اساس سطوح تازه */
.grad-neutral-950 { background-image: linear-gradient(to right, #201f1f, #0e0e0e); }

/* ---------- glass-card روی سطوح تازه ---------- */
.glass-card {
  background: rgba(28, 27, 27, 0.8);
  border: 1px solid var(--ma-border-soft);
}

/* ============================================================
   ── مرحله ۲: اشکال — کارت‌های گرد ۳۲px و سایه نرم شناورها ──
   ============================================================ */

/* تصاویر هم‌قواره کارت */
.rounded-\[24px\] { border-radius: 32px; }
.rounded-\[28px\] { border-radius: 32px; }

/* سایه‌های نرم و پهن — فقط عناصر شناور (design.md: tonal layering) */
.shadow-login-modal,
.shadow-demo-modal {
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), 0 0 30px rgba(212, 255, 0, 0.08);
}
.shadow-bottom-nav,
.shadow-bottom-nav-waiter {
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.55);
}
.shadow-cart-bar,
.shadow-cart-lime,
.shadow-call-float,
.shadow-fcb {
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}

/* ============================================================
   ── مرحله ۳: اجزای تعاملی — ورودی کپسولی، فوکوس لایم، چیپ ──
   ============================================================ */

/* ورودی‌ها: کپسول کامل روی سطوح تیره (checkbox/radio/range/file/color مستثنا) */
#root input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),
#root select {
  border-radius: 9999px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
/* textarea چندخطی: گرد بزرگ اما پیل نیست */
#root textarea {
  border-radius: 1.5rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* فوکوس: حلقه نئون لایم روی outline — مستقل از !importantهای بوت‌استرپ */
#root input:focus-visible,
#root textarea:focus-visible,
#root select:focus-visible,
#root input:focus,
#root textarea:focus,
#root select:focus {
  outline: 2px solid rgba(212, 255, 0, 0.7);
  outline-offset: 1px;
}

/* متن ورودی همیشه روشن و جای‌نگه‌دار کم‌رنگ */
#root input:not([type="checkbox"]):not([type="radio"]),
#root textarea,
#root select {
  color: #e5e2e1;
}

/* گزینه‌های دراپ‌داون: منوی بومی مرورگر پس‌زمینه روشن دارد؛ رنگ گزینه‌ها صریحاً تیره تا روی سفید خوانا باشد (کل سایت) */
select option,
select optgroup {
  color: #1c1917;
  background-color: #ffffff;
}
#root input::placeholder,
#root textarea::placeholder {
  color: rgba(229, 226, 225, 0.45);
}

/* چیپ‌های لایم: متن مشکی (contrast design.md) */
[class*=bg-primary].rounded-full,
.bg-lime-400.rounded-full {
  color: #000000;
}

/* ============================================================
   ── مرحله ۴: ناوبری شناور شیشه‌ای (frosted glass) ──
   ============================================================ */
#root .fixed.bottom-0 {
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  background-color: rgba(19, 19, 19, 0.62);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* کنتراست متن روی لایه مات حفظ شود */
#root .fixed.bottom-0 [class*=text-neutral-8],
#root .fixed.bottom-0 [class*=text-neutral-9] {
  color: #e5e2e1;
}

@layer bs-fix {
/* ============================================================
   ── حالت روشن داشبورد مجموعه (body.vd-light) ──
   در حالت «روشن» پنل مجموعه، کلاس vd-light روی body گذاشته می‌شود
   (در VenueDashboard.renderMain) و پالت‌های تیرهٔ Tailwind در همین محدوده
   به سطوح روشن نگاشت می‌شوند. رنگ متن روی دکمه‌های رنگی (سبز/قرمز/آبی…)
   سفید می‌ماند تا کنتراست حفظ شود.
   ============================================================ */

/* سطوح خنثی → روشن */
body.vd-light .bg-neutral-950,
body.vd-light .bg-neutral-950\/80,
body.vd-light .bg-neutral-950\/60,
body.vd-light .bg-neutral-900,
body.vd-light .bg-neutral-900\/95,
body.vd-light .bg-neutral-900\/90,
body.vd-light .bg-neutral-900\/80,
body.vd-light .bg-neutral-900\/60,
body.vd-light .bg-neutral-900\/50,
body.vd-light .bg-neutral-900\/40,
body.vd-light .bg-stone-950,
body.vd-light .bg-stone-950\/80,
body.vd-light .bg-stone-950\/60,
body.vd-light .bg-stone-950\/40,
body.vd-light .bg-stone-900,
body.vd-light .bg-stone-900\/90,
body.vd-light .bg-stone-900\/80,
body.vd-light .bg-stone-900\/60,
body.vd-light .bg-stone-900\/50,
body.vd-light .bg-stone-900\/40,
body.vd-light .bg-stone-800,
body.vd-light .bg-stone-800\/90,
body.vd-light .bg-stone-800\/80,
body.vd-light .bg-stone-800\/60,
body.vd-light .bg-stone-800\/40,
body.vd-light .bg-stone-800\/30,
body.vd-light .bg-neutral-800,
body.vd-light .bg-neutral-800\/80,
body.vd-light .bg-neutral-800\/60,
body.vd-light .bg-neutral-800\/50,
body.vd-light .bg-neutral-800\/40,
body.vd-light .bg-neutral-700,
body.vd-light .bg-\[\#121212\],
body.vd-light .bg-\[\#131313\],
body.vd-light .bg-\[\#141414\],
body.vd-light .bg-\[\#141416\],
body.vd-light .bg-\[\#141210\],
body.vd-light .bg-\[\#161412\],
body.vd-light .bg-\[\#151515\],
body.vd-light .bg-\[\#161616\],
body.vd-light .bg-\[\#171717\],
body.vd-light .bg-\[\#181818\],
body.vd-light .bg-\[\#1a1a1a\],
body.vd-light .bg-\[\#1c1c1c\],
body.vd-light .bg-\[\#1e1e1e\],
body.vd-light .bg-\[\#1f1f1f\] { background-color: #ffffff !important; }

body.vd-light .bg-neutral-950,
body.vd-light .bg-neutral-950\/80,
body.vd-light .bg-stone-950,
body.vd-light .bg-stone-950\/60,
body.vd-light .bg-stone-950\/40,
body.vd-light .bg-neutral-900,
body.vd-light .bg-stone-800,
body.vd-light .bg-stone-800\/80,
body.vd-light .bg-neutral-800 { background-color: #f8fafc !important; }

/* ورودی‌ها و نوارهای درون کارت‌های CRM */
body.vd-light .bg-stone-900\/60,
body.vd-light .bg-stone-900\/50,
body.vd-light .bg-stone-900\/40 { background-color: #f8fafc !important; }
body.vd-light .bg-black\/50 { background-color: rgba(15, 23, 42, 0.05) !important; }
body.vd-light .bg-\[\#142314\] { background-color: #f0fdf4 !important; }

/* گرادیانت‌های تیرهٔ نوارهای هشدار → نسخهٔ روشن */
body.vd-light .from-neutral-900 { background-image: linear-gradient(to left, #fff7ed, #ffffff) !important; }
body.vd-light .from-amber-950\/40 { background-image: linear-gradient(to right, #fffbeb, #ffffff) !important; }
body.vd-light .from-stone-900\/80,
body.vd-light .from-stone-900\/70,
body.vd-light .from-stone-900\/60 { background-image: linear-gradient(to left, #f8fafc, #ffffff) !important; }

/* متن‌های خنثی → تیره (خوانا روی سطح روشن) */
body.vd-light .text-neutral-100,
body.vd-light .text-neutral-200,
body.vd-light .text-stone-100,
body.vd-light .text-stone-200,
body.vd-light .text-slate-100 { color: #0f172a !important; }
body.vd-light .text-neutral-300,
body.vd-light .text-stone-300,
body.vd-light .text-slate-300 { color: #334155 !important; }
body.vd-light .text-neutral-400,
body.vd-light .text-stone-400,
body.vd-light .text-slate-400 { color: #475569 !important; }
body.vd-light .text-neutral-500,
body.vd-light .text-stone-500,
body.vd-light .text-slate-500 { color: #64748b !important; }
body.vd-light .text-neutral-600,
body.vd-light .text-stone-600 { color: #94a3b8 !important; }
body.vd-light .text-white { color: #0f172a !important; }
body.vd-light .hover\:text-white:hover { color: #0f172a !important; }

/* رنگ متن روی سطح‌های پرمایه (دکمه/بج رنگی) سفید می‌ماند */
body.vd-light .text-white[class*="bg-emerald-"],
body.vd-light .text-white[class*="bg-rose-"],
body.vd-light .text-white[class*="bg-sky-"],
body.vd-light .text-white[class*="bg-indigo-"],
body.vd-light .text-white[class*="bg-blue-"],
body.vd-light .text-white[class*="bg-purple-"],
body.vd-light .text-white[class*="bg-violet-"],
body.vd-light .text-white[class*="bg-teal-"],
body.vd-light .text-white[class*="bg-cyan-"],
body.vd-light .text-white[class*="bg-green-"],
body.vd-light .text-white[class*="bg-red-"],
body.vd-light .text-white[class*="bg-fuchsia-"],
body.vd-light .text-white[class*="bg-black"] { color: #ffffff !important; }

/* رنگ‌های روشن روی سطح روشن → نسخهٔ پررنگ‌تر */
body.vd-light .text-amber-200,
body.vd-light .text-amber-300 { color: #b45309 !important; }
body.vd-light .text-emerald-200,
body.vd-light .text-emerald-300 { color: #047857 !important; }
body.vd-light .text-rose-200,
body.vd-light .text-rose-300 { color: #be123c !important; }
body.vd-light .text-sky-300 { color: #0369a1 !important; }
body.vd-light .text-yellow-300 { color: #a16207 !important; }

/* حاشیه‌ها → روشن (با !important چون لایهٔ bs-fix مقادیر تیره را مهم کرده است) */
body.vd-light .border-neutral-900,
body.vd-light .border-neutral-800,
body.vd-light .border-neutral-700,
body.vd-light .border-neutral-600,
body.vd-light .border-stone-800,
body.vd-light .border-stone-700,
body.vd-light .border-stone-600 { border-color: #e2e8f0 !important; }
/* قاعدهٔ عمومی .border در لایهٔ پایه سفیدِ ۱۰٪ است؛ در حالت روشن باید خاکستری روشن شود */
body.vd-light .border { border-color: #e2e8f0 !important; }
body.vd-light [class*="border-white/"] { border-color: rgba(15, 23, 42, 0.08) !important; }

/* هاورها */
body.vd-light .hover\:bg-neutral-800:hover,
body.vd-light .hover\:bg-neutral-700:hover,
body.vd-light .hover\:bg-neutral-900:hover,
body.vd-light .hover\:bg-stone-800:hover,
body.vd-light .hover\:bg-stone-700:hover { background-color: #e2e8f0 !important; }

/* ورودی‌های پنل مجموعه در حالت روشن */
body.vd-light #root input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
body.vd-light #root textarea,
body.vd-light #root select { color: #0f172a !important; }
body.vd-light #root input::placeholder,
body.vd-light #root textarea::placeholder { color: rgba(15, 23, 42, 0.35) !important; }

/* متن روی لایهٔ تیرهٔ تصاویر (کارت بازی) و بج‌های روی عکس، در حالت روشن هم روشن می‌ماند */
body.vd-light #vd-main .relative.h-36 .text-white { color: #ffffff !important; }
body.vd-light .bg-black\/70 .text-amber-300,
body.vd-light .bg-black\/70 .text-\[\#d4ff00\] { color: #fcd34d !important; }


/* چیپ‌های تیرهٔ درون کارت‌ها → سطح روشن (بدون آسیب به لایه‌های روی تصویر) */
body.vd-light .bg-black\/40:not([class*="text-white"]),
body.vd-light .bg-black\/20 { background-color: rgba(15, 23, 42, 0.06) !important; }
}