/* =============================================
   سپهر پخش آفاق - استایل اصلی
   ============================================= */

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

:root {
  --primary: #0f1f4b;
  --primary-light: #1a3270;
  --accent: #c9a84c;
  --accent-light: #e8c96a;
  --success: #0f9d58;
  --success-bg: #e6f4ed;
  --danger: #d32f2f;
  --danger-bg: #fdecea;
  --warning: #f57c00;
  --warning-bg: #fff3e0;
  --info: #1565c0;
  --info-bg: #e3f2fd;
  --bg: #f0f2f8;
  --card: #ffffff;
  --border: #e0e4f0;
  --text: #1a1a2e;
  --text-muted: #7a7a9a;
  --sidebar-w: 250px;
  --header-h: 64px;
  --radius: 14px;
  --radius-sm: 8px;
  --shadow: 0 2px 16px rgba(15,31,75,0.08);
  --shadow-lg: 0 8px 40px rgba(15,31,75,0.15);
  --transition: all 0.2s ease;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Vazirmatn', sans-serif;
  direction: rtl;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.6;
  min-height: 100vh;
  overflow-wrap: break-word; /* ایمنی کلی پروژه: هر عدد یا متن طولانی به‌جای بیرون زدن از کادر، در همان باکس می‌شکند */
  word-break: break-word;
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ===== LOGIN ===== */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--primary) 0%, #0a1535 50%, #1a3270 100%);
  padding: 20px;
  position: relative;
  overflow: hidden;
}

.login-page::before {
  content: '';
  position: absolute;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(201,168,76,0.15) 0%, transparent 70%);
  top: -200px; right: -200px;
  border-radius: 50%;
}

.login-page::after {
  content: '';
  position: absolute;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(201,168,76,0.1) 0%, transparent 70%);
  bottom: -100px; left: -100px;
  border-radius: 50%;
}

.login-card {
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(20px);
  border-radius: 24px;
  padding: 48px 40px;
  width: 100%;
  max-width: 420px;
  box-shadow: var(--shadow-lg);
  position: relative;
  z-index: 1;
}

.login-brand {
  text-align: center;
  margin-bottom: 36px;
}

.brand-icon {
  width: 72px; height: 72px;
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  border-radius: 20px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px;
  font-size: 32px;
  box-shadow: 0 8px 24px rgba(15,31,75,0.3);
}

.brand-name {
  font-size: 22px;
  font-weight: 800;
  color: var(--primary);
  display: block;
}

.brand-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
}

.role-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 28px;
}

.role-card {
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 14px 10px;
  text-align: center;
  cursor: pointer;
  transition: var(--transition);
  background: white;
  user-select: none;
}

.role-card:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
}

.role-card.active {
  border-color: var(--primary);
  background: var(--primary);
  color: white;
}

.role-card .ri { font-size: 24px; display: block; margin-bottom: 6px; }
.role-card span { font-size: 13px; font-weight: 600; }

/* ===== FORMS ===== */
.form-group { margin-bottom: 18px; }

.form-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.form-control {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: 'Vazirmatn', sans-serif;
  font-size: 14px;
  color: var(--text);
  background: white;
  transition: var(--transition);
  outline: none;
  -webkit-appearance: none;
}

.form-control:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(15,31,75,0.08);
}

.form-control::placeholder { color: #bbb; }

textarea.form-control { resize: vertical; min-height: 80px; }

select.form-control {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%237a7a9a' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 12px center;
  padding-left: 36px;
}

/* ===== BUTTONS ===== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  font-family: 'Vazirmatn', sans-serif;
  font-size: 13px;
  font-weight: 600;
  transition: var(--transition);
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
}

.btn:active { transform: scale(0.97); }

.btn-primary { background: var(--primary); color: white; }
.btn-primary:hover { background: var(--primary-light); }

.btn-accent { background: var(--accent); color: white; }
.btn-accent:hover { background: var(--accent-light); color: var(--primary); }

.btn-success { background: var(--success); color: white; }
.btn-success:hover { filter: brightness(1.1); }

.btn-danger { background: var(--danger); color: white; }
.btn-danger:hover { filter: brightness(1.1); }

.btn-warning { background: var(--warning); color: white; }
.btn-outline { background: white; color: var(--primary); border: 2px solid var(--border); }
.btn-outline:hover { border-color: var(--primary); }

.btn-ghost { background: transparent; color: var(--text-muted); }
.btn-ghost:hover { background: var(--bg); color: var(--primary); }

.btn-sm { padding: 6px 12px; font-size: 12px; }
.btn-lg { padding: 14px 28px; font-size: 15px; }
.btn-block { width: 100%; justify-content: center; }
.btn-icon { padding: 8px; border-radius: var(--radius-sm); }

/* ===== LAYOUT ===== */
.app-layout {
  display: flex;
  min-height: 100vh;
}

/* ===== HEADER ===== */
.app-header {
  position: fixed;
  top: 0; right: 0; left: 0;
  height: var(--header-h);
  background: var(--primary);
  display: flex;
  align-items: center;
  padding: 0 24px;
  z-index: 200;
  box-shadow: 0 2px 20px rgba(0,0,0,0.2);
}

.header-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: white;
  font-weight: 800;
  font-size: 16px;
  text-decoration: none;
}

.header-brand .logo {
  width: 36px; height: 36px;
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
}

.header-right { margin-right: auto; }

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-user {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,0.9);
  font-size: 13px;
}

.user-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  overflow: hidden;
}

.user-avatar img { width: 100%; height: 100%; object-fit: cover; }

.role-pill {
  padding: 4px 12px;
  background: rgba(255,255,255,0.15);
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  color: white;
}

/* ===== SIDEBAR ===== */
.app-sidebar {
  position: fixed;
  top: var(--header-h);
  right: 0;
  width: var(--sidebar-w);
  height: calc(100vh - var(--header-h));
  background: white;
  border-left: 1px solid var(--border);
  overflow-y: auto;
  z-index: 100;
  padding: 12px 0;
  transition: var(--transition);
}

.nav-section {
  padding: 8px 16px 4px;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 20px;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
  border-right: 3px solid transparent;
  text-decoration: none;
  position: relative;
}

.nav-item:hover {
  background: var(--bg);
  color: var(--primary);
}

.nav-item.active {
  background: rgba(15,31,75,0.06);
  color: var(--primary);
  font-weight: 700;
  border-right-color: var(--primary);
}

.nav-item .nav-icon {
  width: 20px;
  text-align: center;
  font-size: 16px;
  flex-shrink: 0;
}

.nav-badge {
  margin-right: auto;
  background: var(--danger);
  color: white;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
}

/* ===== MAIN ===== */
.app-main {
  margin-right: var(--sidebar-w);
  margin-top: var(--header-h);
  padding: 28px;
  min-height: calc(100vh - var(--header-h));
  width: calc(100% - var(--sidebar-w));
}

/* ===== PAGE HEADER ===== */
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 28px;
  flex-wrap: wrap;
  gap: 12px;
}

.page-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--primary);
  line-height: 1.2;
}

.page-subtitle {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 4px;
}

/* ===== CARDS ===== */
.card {
  background: var(--card);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.card-header {
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--primary);
}

.card-body { padding: 22px; }

/* ===== STATS ===== */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 18px;
  margin-bottom: 28px;
}

.stat-card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 22px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  gap: 16px;
  transition: var(--transition);
  min-width: 0; /* اجازه می‌دهد باکس آماری کوچک‌تر از محتوای پیش‌فرضش شود تا اعداد بزرگ آن را از کادر بیرون نزنند */
}

.stat-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

.stat-icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}

.stat-icon.blue { background: #dbeafe; }
.stat-icon.green { background: var(--success-bg); }
.stat-icon.gold { background: #fef9e7; }
.stat-icon.red { background: var(--danger-bg); }
.stat-icon.purple { background: #f3e8ff; }

.stat-info { min-width: 0; flex: 1 1 auto; } /* فرزند فلکس بدون min-width:0 نمی‌تواند از عرض والد کوچک‌تر شود و همین باعث بیرون‌زدگی عدد می‌شد */
.stat-label { font-size: 12px; color: var(--text-muted); font-weight: 500; overflow-wrap: break-word; word-break: break-word; }
.stat-value {
  font-size: clamp(15px, 4vw, 22px); /* روی صفحات باریک، اندازه فونت خودکار کوچک‌تر می‌شود تا عدد همیشه داخل کادر جا شود */
  font-weight: 800;
  color: var(--primary);
  margin-top: 2px;
  overflow-wrap: break-word;
  word-break: break-word;
  max-width: 100%;
}
.stat-change { font-size: 11px; margin-top: 4px; }
.stat-change.up { color: var(--success); }
.stat-change.down { color: var(--danger); }

/* .sort-btn (پنل حسابدار: دکمه‌های بازه سریع + پاک‌کردن) قبلاً هیچ استایلی نداشت؛
   دقیقاً همان ظاهر پیل بازه‌ی زمانی که در پنل تامین‌کننده/ادمین وجود دارد اینجا داده می‌شود
   تا هر سه پنل یک ظاهر یکسان داشته باشند. */
.sort-btn { padding:5px 14px; border-radius:6px; border:1.5px solid var(--border); background:white; font-size:11px; font-weight:700; color:var(--text-muted); cursor:pointer; font-family:'Vazirmatn',sans-serif; transition:var(--transition); text-decoration:none; display:inline-block; }
.sort-btn.active, .sort-btn:hover { background:var(--primary); border-color:var(--primary); color:white; }

/* ===== دکمه‌ی گرافیکی «اعمال بازه دلخواه» =====
   یک کلاس مشترک که در پنل‌های تامین‌کننده، حسابدار، ادمین و ویزیتور روی همین دکمه اضافه شده؛
   ظاهری متمایز (پیل طلایی با گرادیان، سایه و انیمیشن) نسبت به دکمه‌های ساده‌ی بازه‌ی سریع دارد
   تا کاربر بلافاصله متوجه شود این دکمه یک اکشن (اعمال بازه‌ی انتخابی) است، نه یک فیلتر ساده. */
.btn-apply-range {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 20px !important;
  border: none !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, var(--accent-light), var(--accent)) !important;
  color: var(--primary) !important;
  font-weight: 800 !important;
  font-size: 12px !important;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(201, 168, 76, 0.35);
  transition: var(--transition);
  white-space: nowrap;
}
.btn-apply-range::before {
  content: '✓';
  font-weight: 900;
  font-size: 13px;
  line-height: 1;
}
.btn-apply-range:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(201, 168, 76, 0.45);
  filter: brightness(1.05);
  color: var(--primary) !important;
}
.btn-apply-range:active { transform: translateY(0); box-shadow: 0 2px 6px rgba(201, 168, 76, 0.3); }
.btn-apply-range.active {
  background: linear-gradient(135deg, var(--primary), var(--primary-light)) !important;
  color: #fff !important;
  box-shadow: 0 3px 10px rgba(15, 31, 75, 0.35);
}

/* ===== بازه‌ی زمانی دلخواه «از / تا» - کامپوننت مشترک (.range-custom) =====
   هر ردیف «از/تا + دکمه اعمال» باید این ساختار را داشته باشد:
   <div class="range-custom">
     <label class="range-date-group"><span>از:</span><input class="jalali-date" ...></label>
     <label class="range-date-group"><span>تا:</span><input class="jalali-date" ...></label>
     <button class="btn-apply-range">اعمال بازه دلخواه</button>
   </div>
   برچسب و اینپوت هر کدام داخل range-date-group به‌عنوان یک واحد کنار هم می‌مانند (نه اینکه
   حروف برچسب جدا جدا بشکنند)، و در موبایل (رجوع به مدیا-کوئری پایین فایل) دکمه‌ی اعمال
   زیر آن‌ها و تمام‌عرض قرار می‌گیرد. */
.range-custom {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.range-date-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: text;
}
.range-date-group span {
  white-space: nowrap;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
}
.range-date-group input {
  width: auto;
  flex: 0 0 120px;
  min-width: 90px;
}
.date-filter-bar > span,
.range-bar > span {
  white-space: nowrap;
  flex-shrink: 0;
}

/* ===== TABLE ===== */
/* اسکرول افقی نرم (به‌خصوص روی موبایل با کشیدن انگشت) وقتی جدول از عرض container بیشتر شود */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

thead th {
  padding: 12px 16px;
  background: var(--bg);
  color: var(--text-muted);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: right;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  vertical-align: middle;
  /* محتوای هر سلول (به‌خصوص اعداد و مبالغ) همیشه یک‌خط بماند و به‌جای شکستن زیر هم،
     در صورت تنگ بودن فضا کل جدول به‌صورت افقی اسکرول شود (به کمک overflow-x روی .table-wrap) */
  white-space: nowrap;
}

tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: rgba(15,31,75,0.02); }

/* ===== BADGES ===== */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.badge-registered { background: var(--info-bg); color: var(--info); }
.badge-processing { background: var(--warning-bg); color: var(--warning); }
.badge-ready { background: #f3e8ff; color: #7b2ff7; }
.badge-delivered { background: var(--success-bg); color: var(--success); }
.badge-partial_return { background: #fff3e0; color: #e65100; }
.badge-full_return { background: var(--danger-bg); color: var(--danger); }
.badge-cancelled { background: #f5f5f5; color: #757575; }
.badge-cash { background: var(--success-bg); color: var(--success); }
.badge-credit { background: var(--info-bg); color: var(--info); }
.badge-cheque { background: #f3e8ff; color: #7b2ff7; }
.badge-partial-settle { background: var(--warning-bg); color: var(--warning); }

/* ===== PRODUCT CARDS ===== */
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 18px;
}

.product-card {
  background: var(--card);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: var(--transition);
  cursor: pointer;
  box-shadow: var(--shadow);
}

.product-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--primary);
}

.product-card.out-of-stock {
  opacity: 0.6;
  filter: grayscale(0.4);
}

.product-card.out-of-stock:hover {
  transform: none;
  box-shadow: var(--shadow);
  border-color: var(--border);
}

.product-img {
  width: 100%;
  height: 180px;
  object-fit: contain;
  object-position: center;
  background: var(--bg);
}

.product-img-placeholder {
  width: 100%;
  height: 180px;
  background: linear-gradient(135deg, var(--bg), var(--border));
  display: flex; align-items: center; justify-content: center;
  font-size: 48px;
}

.product-body { padding: 14px; }

.product-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
  line-height: 1.4;
}

.product-price-box { margin-bottom: 10px; }

.price-original {
  font-size: 11px;
  color: var(--text-muted);
  text-decoration: line-through;
}

.price-sale {
  font-size: 15px;
  font-weight: 800;
  color: var(--success);
}

.price-only {
  font-size: 15px;
  font-weight: 800;
  color: var(--primary);
}

.discount-badge {
  display: inline-block;
  background: var(--danger);
  color: white;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  margin-right: 4px;
}

.stock-info {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 10px;
}

/* ===== CART ===== */
.qty-control {
  display: flex;
  align-items: center;
  gap: 0;
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.qty-btn {
  width: 34px; height: 34px;
  background: white;
  border: none;
  cursor: pointer;
  font-size: 18px;
  font-weight: 700;
  color: var(--primary);
  transition: var(--transition);
  display: flex; align-items: center; justify-content: center;
}

.qty-btn:hover { background: var(--primary); color: white; }

.qty-input {
  width: 44px;
  text-align: center;
  border: none;
  border-right: 1px solid var(--border);
  border-left: 1px solid var(--border);
  font-family: 'Vazirmatn', sans-serif;
  font-size: 14px;
  font-weight: 700;
  outline: none;
  color: var(--primary);
}
/* حذف فلش‌های پیش‌فرض input عددی در مرورگرهای مختلف - چون دکمه‌های +/- سفارشی خودمان را داریم */
.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty-input[type=number] { -moz-appearance: textfield; }

/* ===== MODAL ===== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: var(--transition);
}

.modal-overlay.open {
  opacity: 1;
  visibility: visible;
}

.modal {
  background: white;
  border-radius: 20px;
  width: 100%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  transform: scale(0.95);
  transition: var(--transition);
}

.modal-overlay.open .modal { transform: scale(1); }

.modal-header {
  padding: 22px 26px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  background: white;
  z-index: 1;
}

.modal-title { font-size: 17px; font-weight: 800; color: var(--primary); }
.modal-close {
  width: 32px; height: 32px;
  border: none; background: var(--bg);
  border-radius: 50%; cursor: pointer;
  font-size: 18px; color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
  transition: var(--transition);
}
.modal-close:hover { background: var(--danger-bg); color: var(--danger); }

.modal-body { padding: 26px; }

.modal-footer {
  padding: 18px 26px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 10px;
  flex-direction: row-reverse;
}

/* ===== TOAST ===== */
.toast-container {
  position: fixed;
  top: 80px;
  left: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.toast {
  background: var(--primary);
  color: white;
  padding: 14px 20px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 260px;
  animation: slideIn 0.3s ease;
}

.toast.success { background: var(--success); }
.toast.error { background: var(--danger); }
.toast.warning { background: var(--warning); }

@keyframes slideIn {
  from { transform: translateX(-100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* ===== FORM GRID ===== */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-grid .full { grid-column: 1 / -1; }

/* ===== TABS ===== */
.tabs {
  display: flex;
  gap: 2px;
  background: var(--bg);
  padding: 4px;
  border-radius: 12px;
  margin-bottom: 22px;
  width: fit-content;
}

.tab-btn {
  padding: 9px 22px;
  border: none;
  border-radius: 9px;
  background: none;
  font-family: 'Vazirmatn', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition);
}

.tab-btn.active {
  background: white;
  color: var(--primary);
  font-weight: 700;
  box-shadow: var(--shadow);
}

/* ===== FILTER BAR ===== */
.filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.filter-bar .form-control {
  width: auto;
  min-width: 160px;
}

.search-input {
  position: relative;
}

.search-input .form-control {
  padding-right: 40px;
}

.search-input .search-icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}

/* ===== EMPTY STATE ===== */
.empty-state {
  text-align: center;
  padding: 60px 24px;
  color: var(--text-muted);
}

.empty-state .empty-icon { font-size: 56px; margin-bottom: 16px; opacity: 0.5; }
.empty-state h3 { font-size: 16px; color: var(--text); margin-bottom: 8px; }
.empty-state p { font-size: 13px; }

/* ===== PRINT ===== */
@media print {
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  body > *:not(#print-receipt) { display: none !important; }
  #print-receipt { display: block !important; }
}

#print-receipt {
  display: none;
  width: 80mm;
  font-family: 'Vazirmatn', sans-serif;
  direction: rtl;
  font-size: 9pt;
  color: #000;
}

/* ===== UTILITY GRID CLASSES (جایگزین گریدهای inline قبلی، برای اینکه بشود در حالت موبایل/تبلت کنترلشان کرد) ===== */
.grid-2   { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.grid-3   { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.grid-side-360 { display: grid; grid-template-columns: 1fr 360px; gap: 24px; }
.grid-side-380 { display: grid; grid-template-columns: 1fr 380px; gap: 24px; }
/* نکته مهم: پیش‌فرض آیتم‌های CSS Grid ، min-width:auto است، یعنی هیچ‌وقت باریک‌تر از
   عریض‌ترین محتوای بدون‌شکست (مثلاً ردیف‌های .cart-item که چند عنصر white-space:nowrap دارند)
   نمی‌شوند. نتیجه این بود که وقتی سبد خرید حداقل یک آیتم داشت، همان یک ردیف عریض کل گرید -
   و در نتیجه کل صفحه - را از عرض صفحه‌ی موبایل بیرون می‌زد (چون overflow-x:hidden روی
   body/html است، این سرریز به‌جای اسکرول، به‌سادگی کلیپ/قطع می‌شد و انگار بخشی از صفحه گم شده بود).
   min-width:0 به فرزندان مستقیم گرید اجازه می‌دهد به‌اندازه‌ی ستون خودشان جمع شوند و اسکرول
   افقی داخلی خودِ .cart-item (که از قبل overflow-x:auto دارد) به‌درستی کار کند. */
.grid-side-360 > *, .grid-side-380 > * { min-width: 0; }
.standalone-main { margin-right: 0; max-width: 900px; margin-top: 80px; margin-bottom: 0; margin-left: auto; padding: 28px; }

/* ===== RESPONSIVE ===== */

/* جلوگیری از اسکرول افقی کل صفحه در صورت وجود هر المان عریض ناخواسته */
html, body { overflow-x: hidden; max-width: 100%; }

/* ===================================================
   تبلت (حدوداً ۷۶۹ تا ۱۰۲۴ پیکسل)
   سایدبار باریک‌تر می‌شود، گریدهای دو/سه‌ستونه‌ی کنار-هم (مثل فرم+لیست یا نمودارها)
   جمع‌وجورتر می‌شوند تا فشرده روی هم نیفتند، ولی هنوز کاملاً زیر هم نمی‌روند
   چون فضای کافی برای دو ستون وجود دارد.
   =================================================== */
@media (max-width: 1024px) and (min-width: 769px) {
  :root { --sidebar-w: 210px; }

  .app-main { padding: 22px; }

  .grid-side-360, .grid-side-380 { grid-template-columns: 1fr; }
  .standalone-main { max-width: 100%; padding: 22px; }

  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .products-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
  .orders-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
}

/* ===================================================
   موبایل: طبق درخواست، همه‌ی المان‌های اصلی صفحه به‌صورت
   عمودی (یک ستون) و با عرض کامل نمایش داده می‌شوند.
   =================================================== */
@media (max-width: 768px) {
  :root {
    --sidebar-w: 0px;
    --header-h: 58px;
  }

  .app-sidebar {
    transform: translateX(100%);
    width: 250px;
  }

  .app-sidebar.open {
    transform: translateX(0);
    box-shadow: var(--shadow-lg);
  }

  .app-main {
    margin-right: 0;
    padding: 14px;
    width: 100%;
  }

  /* نکته مهم: قبلاً دکمه همبرگر (باز کردن منو) فقط با جاوااسکریپت و فقط در لحظه‌ی
     بارگذاری اولیه صفحه نمایش داده می‌شد. اگر بارگذاری اسکریپت به هر دلیلی به تاخیر
     می‌افتاد یا کاربر بعداً صفحه را می‌چرخاند (rotate)، دکمه ممکن بود اصلاً دیده نشود
     و کاربر هیچ راهی برای باز کردن منو نداشت. الان با CSS و !important همیشه و به‌طور
     تضمینی در این عرض صفحه نمایش داده می‌شود. */
  #sidebar-toggle { display: flex !important; }

  /* هدر روی موبایل: فضای کمتر + جلوگیری از سرریز نام کاربر/نقش روی صفحات خیلی باریک */
  .app-header { padding: 0 12px; }
  .header-brand { font-size: 14px; gap: 6px; }
  .header-brand .logo { width: 30px; height: 30px; font-size: 15px; }
  .header-user span:first-child { display: none; } /* نام کامل کاربر مخفی می‌شود، فقط نقش (role-pill) و آواتار می‌ماند */
  .header-actions { gap: 6px; }
  .header-actions .btn-ghost.btn-sm { padding: 6px 8px; font-size: 12px; }

  .page-title { font-size: 18px; }
  .page-header { margin-bottom: 18px; }

  /* همه‌ی گریدهای اصلی محتوا: یک ستون و تمام عرض */
  .stats-grid,
  .form-grid,
  .orders-grid,
  .detail-grid,
  .grid-2,
  .grid-3,
  .grid-side-360,
  .grid-side-380,
  .order-meta,
  .role-grid {
    grid-template-columns: 1fr !important;
  }

  .products-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .standalone-main {
    max-width: 100%;
    margin-top: calc(var(--header-h) + 14px);
    padding: 14px;
  }

  /* نوار فیلتر/جستجو: عمودی و تمام عرض به‌جای فشرده کنار هم */
  .filter-bar {
    flex-direction: column;
    align-items: stretch;
  }
  .filter-bar .form-control,
  .filter-bar select,
  .filter-bar .search-input {
    width: 100% !important;
    min-width: 0;
  }

  /* تب‌ها: تمام عرض، هر تب سهم مساوی */
  .tabs { width: 100%; }
  .tab-btn { flex: 1 1 0; text-align: center; }

  /* هدر کارت‌ها (عنوان + دکمه‌های عملیات): روی موبایل زیر هم */
  .card-header { flex-direction: column; align-items: stretch; }
  .card-header .d-flex { flex-wrap: wrap; }

  /* هدر صفحه (عنوان + دکمه‌های اکشن بالای هر صفحه): زیر هم و دکمه تمام عرض */
  .page-header { flex-direction: column; align-items: stretch; }
  .page-header .d-flex { flex-direction: column; }
  .page-header .d-flex .btn { width: 100%; justify-content: center; }

  /* فوتر مودال: دکمه‌ها زیر هم و تمام عرض */
  .modal-footer { flex-direction: column-reverse; }
  .modal-footer .btn { width: 100%; justify-content: center; }

  /* هر ردیف flex با استایل inline کنترل‌نشده: اجازه‌ی شکستن به چند خط بدهیم
     تا به‌جای فشرده‌شدن یا بیرون‌زدن، عناصر زیر هم بروند */
  div[style*="display:flex"],
  div[style*="display: flex"] {
    flex-wrap: wrap;
  }

  /* توجه: قبلاً اینجا یک قانون table{display:block} برای اسکرول افقی خودکار وجود داشت، اما
     چون تگ‌های <tr>/<td> داخل جدول کماکان display:table-row/table-cell دارند (این قانون فقط
     خود <table> را تغییر می‌داد)، مرورگر مجبور به ساخت یک «جدول ناشناس» داخلی می‌شد که از
     اندازه‌ی content خودش پیروی می‌کند نه عرض کارت - و همین باعث می‌شد جدول‌های کم‌ستون
     (مثل «پرفروش‌ترین محصولات») به‌جای پرکردن کل عرض کارت، فقط نصف یا کمتر جمع شوند.
     .table-wrap (overflow-x:auto) به‌تنهایی برای اسکرول افقیِ جدول‌های پرستون کافی است؛
     چون جدول با width:100% وقتی محتوایش (به‌خاطر white-space:nowrap سلول‌ها) از عرض کارت
     بیشتر شود، به‌طور طبیعی از width:100% فراتر می‌رود و همان چیزی که .table-wrap باید
     اسکرول کند رخ می‌دهد - بدون نیاز به display:block و بدون شکستن جدول‌های کم‌ستون. */

  /* مودال‌ها: پدینگ کمتر تا فضای بیشتری برای محتوا روی صفحه‌ی کوچک بماند */
  .modal-overlay { padding: 10px; align-items: flex-start; padding-top: 40px; }
  .modal-header { padding: 16px 18px; }
  .modal-body { padding: 16px 18px; }
  .modal-footer { padding: 14px 18px; flex-wrap: wrap; }

  /* ردیف دکمه‌های عملیات سفارش (تحویل/مرجوعی/چاپ/مسیریابی) روی موبایل زیر هم بیفتند نه فشرده کنار هم */
  .order-actions { flex-wrap: wrap; }
  .order-actions .btn { flex: 1 1 auto; min-width: 120px; }

  /* کارت‌های آمار و جزئیات: اعداد بزرگ روی موبایل خودکار کوچک‌تر می‌شوند تا از کادر بیرون نزنند */
  .stat-value { font-size: clamp(13px, 5vw, 20px) !important; }
  .stat-card { padding: 14px; gap: 10px; }
  .stat-icon { width: 40px; height: 40px; font-size: 18px; }

  /* ===== بازه‌ی زمانی دلخواه «از / تا» - کامپوننت مشترک تمام پنل‌ها (.range-custom) =====
     نسخه‌ی قبلی این فیکس بر پایه‌ی attribute selector روی style اینلاین فرم بود (شکننده و
     وابسته به ترتیب دقیق نوشتن استایل). حالا هر بلوک «از/تا + دکمه اعمال» باید داخل یک
     div.range-custom قرار بگیرد و هر برچسب+اینپوت هم داخل یک label.range-date-group -
     این‌طوری برچسب و اینپوتش همیشه به‌عنوان یک واحد کنار هم می‌مانند یا با هم به خط بعد
     می‌روند (نه اینکه حروف برچسب تک‌تک زیر هم بیفتند)، و دکمه‌ی اعمال هم زیرشان تمام‌عرض
     و شکیل می‌شود. */
  .range-custom { width: 100%; gap: 10px; }
  .range-date-group { flex: 1 1 130px; min-width: 130px; }
  .range-date-group input { flex: 1 1 auto; width: auto !important; min-width: 0; }
  .range-custom .btn-apply-range,
  .range-custom > a.sort-btn,
  .range-custom > a.range-btn {
    flex-basis: 100%;
    width: 100%;
    justify-content: center;
    text-align: center;
    margin-top: 4px;
  }

  /* .profit-table دیگر نیازی به قانون جداگانه ندارد؛ با حذف table{display:block} در بالا،
     همه‌ی جدول‌های پروژه (نه فقط این کلاس) به‌درستی عرض کامل کارت را پر می‌کنند. */
}


@media (max-width: 480px) {
  .stats-grid { grid-template-columns: 1fr; }
  .products-grid { grid-template-columns: 1fr; }
  .login-card { padding: 28px 20px; }

  .modal-overlay { padding: 6px; padding-top: 20px; }
  .modal { border-radius: 14px; }
  .modal-title { font-size: 15px; }

  /* روی گوشی‌های خیلی باریک، حتی متن نقش (role-pill) هم بی‌خیال می‌شویم تا فقط آواتار بماند */
  .header-user .role-pill { display: none; }

  .card-body { padding: 16px; }
  .page-title { font-size: 16px; }
}

/* ===== UTILITIES ===== */
.text-primary { color: var(--primary); }
.text-muted { color: var(--text-muted); }
.text-success { color: var(--success); }
.text-danger { color: var(--danger); }
.text-warning { color: var(--warning); }
.text-center { text-align: center; }
.text-left { text-align: left; }
.fw-bold { font-weight: 700; }
.fw-black { font-weight: 900; }
.d-flex { display: flex; }
.align-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.mb-8 { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.mt-16 { margin-top: 16px; }
.p-0 { padding: 0; }
.w-100 { width: 100%; }
.rounded { border-radius: var(--radius-sm); }
.divider { height: 1px; background: var(--border); margin: 16px 0; }
.section-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 12px;
  margin-top: 20px;
}

/* =============================================
   مدیریت سفارشات (کارت/جدول/جزئیات) - مشترک بین پنل مدیر و حسابدار
   ============================================= */
.order-card { background:white; border-radius:var(--radius); border:1px solid var(--border); padding:18px; box-shadow:var(--shadow); transition:var(--transition); cursor:pointer; }
.order-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:var(--primary); }
.orders-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; }
.pagination { display:flex; gap:6px; align-items:center; margin-top:20px; justify-content:center; }
.page-btn { width:36px; height:36px; border-radius:8px; border:1.5px solid var(--border); background:white; cursor:pointer; font-family:'Vazirmatn',sans-serif; font-size:13px; font-weight:600; color:var(--text-muted); transition:var(--transition); display:flex; align-items:center; justify-content:center; }
.page-btn.active { background:var(--primary); border-color:var(--primary); color:white; }
.page-btn:hover:not(.active) { border-color:var(--primary); color:var(--primary); }
.detail-section { margin-bottom:20px; }
.detail-section-title { font-size:12px; font-weight:800; color:var(--text-muted); text-transform:uppercase; letter-spacing:1px; margin-bottom:10px; padding-bottom:6px; border-bottom:2px solid var(--border); }
.detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.detail-item { font-size:13px; }
.detail-item .di-label { color:var(--text-muted); font-size:11px; font-weight:600; margin-bottom:2px; }
.detail-item .di-val { font-weight:600; color:var(--text); }
.status-btn { padding:9px 18px; border-radius:8px; border:2px solid transparent; font-family:'Vazirmatn',sans-serif; font-size:12px; font-weight:700; cursor:pointer; transition:var(--transition); }
.sb-process { background:#fff3e0; color:#f57c00; border-color:#f57c00; }
.sb-ready    { background:#f3e8ff; color:#7b2ff7; border-color:#7b2ff7; }
.sb-deliver  { background:var(--success-bg); color:var(--success); border-color:var(--success); }
.sb-cancel   { background:var(--danger-bg); color:var(--danger); border-color:var(--danger); }
.sb-process:hover { background:#f57c00; color:white; }
.sb-ready:hover   { background:#7b2ff7; color:white; }
.sb-deliver:hover { background:var(--success); color:white; }
.sb-cancel:hover  { background:var(--danger); color:white; }
.note-bubble { background:var(--bg); border-radius:10px; padding:12px 14px; font-size:13px; margin-bottom:8px; border-right:3px solid var(--primary); }
.note-bubble .nb-role { font-size:10px; color:var(--text-muted); font-weight:700; margin-bottom:4px; }
.items-tbl th, .items-tbl td { padding: 10px 12px; font-size: 12px; }
.return-item { display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--border); }
.return-item:last-child { border-bottom:none; }