/* ============================================================
   کامپوننت‌های مشترک سامانه
   ============================================================ */

/* ===== صفحه‌ی خانه ===== */
.home-hero {
  display:flex; align-items:flex-start; justify-content:space-between;
  gap: var(--sp-4); flex-wrap:wrap; margin-bottom: var(--sp-6);
}
.home-greet { font-size: var(--fs-2xl); font-weight: var(--fw-bold); color: var(--text); line-height:1.3; }
.home-greet span { color: var(--accent); }
.home-sub { font-size: var(--fs-md); color: var(--text-muted); margin-top: 2px; }
.home-date {
  font-size: var(--fs-sm); color: var(--text-secondary);
  background: var(--surface); border:1px solid var(--border);
  border-radius: var(--r-md); padding: 7px var(--sp-4); white-space:nowrap;
}

.home-stats {
  display:grid; gap: var(--sp-4); margin-bottom: var(--sp-8);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.stat-card {
  display:flex; flex-direction:column; align-items:flex-start; gap: var(--sp-1);
  background: var(--surface); border:1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--sp-5);
  cursor:pointer; text-align:right; font-family:inherit; color: var(--text);
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
  position:relative; overflow:hidden;
}
.stat-card::before {
  content:''; position:absolute; inset-block:0; inset-inline-start:0; width:3px;
  background: var(--accent);
}
.stat-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.stat-value { font-size: var(--fs-2xl); font-weight: var(--fw-bold); color: var(--text); line-height:1.2; }
.stat-label { font-size: var(--fs-sm); color: var(--text-muted); font-weight: var(--fw-medium); }
.stat-accent::before  { background: var(--accent); }
.stat-success::before { background: var(--success); }
.stat-warning::before { background: var(--warning); }
.stat-danger::before  { background: var(--danger); }
.stat-accent  .stat-value { color: var(--accent); }
.stat-success .stat-value { color: var(--success); }
.stat-warning .stat-value { color: var(--warning); }
.stat-danger  .stat-value { color: var(--danger); }

.home-section-title {
  font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--text);
  margin-bottom: var(--sp-4);
}
.home-quick {
  display:grid; gap: var(--sp-3);
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.quick-card {
  display:flex; align-items:center; gap: var(--sp-4);
  background: var(--surface); border:1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--sp-4);
  cursor:pointer; text-align:right; font-family:inherit; width:100%; color: var(--text);
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.quick-card:hover { border-color: var(--accent-border); background: var(--accent-subtle); box-shadow: var(--shadow-sm); }
.quick-icon {
  width:38px; height:38px; flex-shrink:0; border-radius: var(--r-md);
  background: var(--accent-subtle); color: var(--accent);
  display:flex; align-items:center; justify-content:center; font-size: var(--fs-lg);
}
.quick-card:hover .quick-icon { background: var(--accent); color: var(--text-on-accent); }
.quick-text { flex:1; display:flex; flex-direction:column; gap:1px; min-width:0; }
.quick-label { font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--text); }
.quick-desc  { font-size: var(--fs-sm); color: var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.quick-arrow { color: var(--text-muted); font-size: var(--fs-lg); flex-shrink:0; }

/* ===== سربرگ بخش‌ها ===== */
.sec-hd {
  display:flex; align-items:center; gap: var(--sp-3);
  margin-bottom: var(--sp-5); flex-wrap:wrap;
}
.sec-title { font-size: var(--fs-xl); font-weight: var(--fw-bold); color: var(--text); }
.sec-badge {
  font-size: var(--fs-xs); font-weight: var(--fw-semibold); padding:3px 9px;
  border-radius: var(--r-full);
  background: var(--accent-subtle); color: var(--accent);
  border:1px solid var(--accent-border);
}

/* ===== پنل / کارت ===== */
.panel, .card {
  background: var(--surface);
  border:1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  margin-bottom: var(--sp-5);
}

/* ===== دکمه‌ها ===== */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap: var(--sp-2);
  padding: 8px var(--sp-4); border-radius: var(--r-md);
  border:1px solid transparent; cursor:pointer;
  font-family:inherit; font-size: var(--fs-base); font-weight: var(--fw-semibold);
  transition: background var(--transition), border-color var(--transition), color var(--transition);
  white-space:nowrap;
}
.btn:disabled { opacity:.5; cursor:not-allowed; }
.btn-primary { background: var(--accent); color: var(--text-on-accent); }
.btn-primary:hover:not(:disabled) { background: var(--accent-hover); }
.btn-outline { background: var(--surface); color: var(--text-secondary); border-color: var(--border); }
.btn-outline:hover:not(:disabled) { background: var(--surface-2); color: var(--text); border-color: var(--border-strong); }
.btn-danger { background: var(--danger); color:#fff; }
.btn-danger:hover:not(:disabled) { filter: brightness(1.08); }
.btn-success { background: var(--success); color:#fff; }
.btn-success:hover:not(:disabled) { filter: brightness(1.08); }
.btn-sm { padding: 5px var(--sp-3); font-size: var(--fs-sm); }

/* ===== فرم ===== */
label { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-secondary); }

input[type=text], input[type=password], input[type=number], input[type=search],
input[type=date], input[type=email], input[type=tel], select, textarea,
.sinput, .ef-inp, .fgroup input, .fgroup2 input, .fg input {
  width:100%; padding: 8px var(--sp-3);
  background: var(--surface);
  border:1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text);
  font-family:inherit; font-size: var(--fs-base);
  outline:none;
  transition: border-color var(--transition), box-shadow var(--transition);
}
input:focus, select:focus, textarea:focus,
.sinput:focus, .ef-inp:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-subtle);
}
input::placeholder, textarea::placeholder { color: var(--text-muted); }
input:disabled, select:disabled, textarea:disabled {
  background: var(--surface-2); color: var(--text-muted); cursor:not-allowed;
}
select { cursor:pointer; }

/* ===== جدول =====
   سبک GitHub Primer: قاب کامل دور جدول، سربرگ تیره‌تر و بولد، و خط جداکننده‌ی
   پررنگ بین همه‌ی ردیف‌ها. عمداً از border-subtle استفاده نشده — درخواست این
   بود که جدول‌ها واضح‌تر و پررنگ‌تر دیده شوند. */
table {
  width:100%; border-collapse:separate; border-spacing:0;
  font-size: var(--fs-base);
  background: var(--surface);
  border:1px solid var(--border);
  border-radius: var(--r-md);
  overflow:hidden;
}
thead th {
  background: var(--surface-2);
  color: var(--text);
  font-size: var(--fs-sm); font-weight: var(--fw-semibold); text-align:right;
  padding: 11px var(--sp-4);
  border-bottom:1px solid var(--border);
  white-space:nowrap; position:sticky; top:0; z-index:2;
}
/* خط عمودی نازک بین ستون‌های سربرگ — مرز ستون‌ها را خوانا می‌کند */
thead th + th { border-right:1px solid var(--border); }

tbody td {
  padding: 11px var(--sp-4);
  border-top:1px solid var(--border);
  color: var(--text);
  font-weight: var(--fw-normal);
}
tbody tr:first-child td { border-top:none; }
tbody tr:hover td { background: var(--surface-2); }
/* ردیف‌های زوج کمی متمایز — دنبال کردن سطرهای بلند را آسان می‌کند.
   عمداً یک رنگ ثابت است نه color-mix(): آن تابع روی کروم زیر ۱۱۱ پشتیبانی
   نمی‌شود و محاسبه‌اش برای هر ردیف (اینجا بیش از هزار ردیف) هزینه دارد. */
tbody tr:nth-child(even) td { background: var(--row-alt); }
tbody tr:nth-child(even):hover td { background: var(--surface-2); }

.table-wrap {
  border-radius: var(--r-md); overflow:auto; max-width:100%;
}
/* فقط وقتی .table-wrap خودش قاب دارد، قاب جدول داخلی حذف می‌شود.
   (قبلاً این استثنا شامل «.panel > div > table» هم بود که ناخواسته قاب
   جدول‌های داخل پنل را برمی‌داشت — همان چیزی که باید پررنگ می‌بود.) */
.table-wrap > table { border:none; border-radius:0; }

/* ===== نشان وضعیت ===== */
.badge {
  display:inline-flex; align-items:center; gap:4px;
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  padding:3px 9px; border-radius: var(--r-full);
  border:1px solid transparent; white-space:nowrap;
}
.badge-success { background: var(--success-subtle); color: var(--success); border-color: var(--success-border); }
.badge-warning { background: var(--warning-subtle); color: var(--warning); border-color: var(--warning-border); }
.badge-danger  { background: var(--danger-subtle);  color: var(--danger);  border-color: var(--danger-border); }
.badge-info    { background: var(--info-subtle);    color: var(--info);    border-color: var(--info-border); }
.badge-neutral { background: var(--surface-2);      color: var(--text-secondary); border-color: var(--border); }

/* ===== مودال ===== */
.modal-overlay {
  position:fixed; inset:0; background:rgba(15,20,28,.55);
  z-index:1000; align-items:center; justify-content:center;
  backdrop-filter: blur(2px); padding: var(--sp-4);
}
.modal {
  background: var(--surface);
  border:1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-xl);
  max-height: 92vh; overflow-y:auto;
  animation: modalIn .18s ease;
}
@keyframes modalIn { from{opacity:0;transform:translateY(-8px) scale(.99)} to{opacity:1;transform:none} }
.modal-header {
  display:flex; align-items:center; justify-content:space-between; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-bottom:1px solid var(--border);
  position:sticky; top:0; background: var(--surface); z-index:1;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
}
.modal-title { font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--text); }
.modal-close {
  background:none; border:none; cursor:pointer;
  color: var(--text-muted); font-size: var(--fs-xl); line-height:1;
  width:30px; height:30px; border-radius: var(--r-md);
  display:flex; align-items:center; justify-content:center;
  transition: background var(--transition), color var(--transition);
}
.modal-close:hover { background: var(--surface-2); color: var(--text); }

/* ===== نوتیفیکیشن ===== */
.notif-btn {
  position:relative; background:none;
  border:1px solid var(--border); border-radius: var(--r-md);
  color: var(--text-secondary); cursor:pointer;
  padding: 6px var(--sp-3); font-family:inherit; font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  transition: all var(--transition); white-space:nowrap;
}
.notif-btn:hover { background: var(--surface-2); color: var(--text); border-color: var(--border-strong); }
.notif-badge {
  position:absolute; top:-6px; inset-inline-start:-6px;
  min-width:17px; height:17px; padding:0 4px;
  background: var(--danger); color:#fff;
  border-radius: var(--r-full); font-size: 10px; font-weight: var(--fw-bold);
  display:flex; align-items:center; justify-content:center;
}
.notif-badge.hidden { display:none; }

/* ===== توست ===== */
.toast {
  position:fixed; bottom: var(--sp-6); inset-inline-start: var(--sp-6);
  background: var(--surface); color: var(--text);
  border:1px solid var(--border); border-inline-start:3px solid var(--accent);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  padding: var(--sp-3) var(--sp-5); font-size: var(--fs-base); font-weight: var(--fw-medium);
  z-index:2000; animation: toastIn .2s ease; max-width: 380px;
}
@keyframes toastIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }
.toast.warn { border-inline-start-color: var(--warning); }
.toast.error { border-inline-start-color: var(--danger); }

/* ===== وضعیت اتصال ===== */
#api-status.online  { background: var(--success-subtle); color: var(--success); }
#api-status.offline { background: var(--warning-subtle); color: var(--warning); }

/* ===== ریسپانسیو جدول‌ها ===== */
@media (max-width: 700px) {
  .home-stats { grid-template-columns: repeat(2, 1fr); }
  .home-quick { grid-template-columns: 1fr; }
  .home-hero { flex-direction:column; }
  .modal { width: 100% !important; }
}

/* راهنمای کوتاه بالای فرم‌ها */
.form-hint {
  background: var(--accent-subtle);
  border: 1px solid var(--accent-border);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  line-height: var(--lh-normal);
  margin-bottom: var(--sp-4);
}

/* ===== ویرایشگر قالب پیامک ===== */
.ph-chip {
  background: var(--surface-2); border:1px solid var(--border);
  border-radius: var(--r-full); padding:4px 11px;
  font-family:inherit; font-size: var(--fs-xs); font-weight: var(--fw-medium);
  color: var(--text-secondary); cursor:pointer;
  transition: all var(--transition);
}
.ph-chip:hover {
  background: var(--accent-subtle); border-color: var(--accent-border);
  color: var(--accent);
}
.sms-preview {
  background: var(--surface-2); border:1px solid var(--border);
  border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-base); line-height:2;
  white-space: pre-wrap; color: var(--text);
  min-height: 60px;
}