/* ===== سیستم صورتحساب الکترونیکی مودیان - استایل وب ===== */
:root {
  --primary: #0d6efd;
  --primary-dark: #0a58ca;
  --success: #198754;
  --danger: #dc3545;
  --warning: #ffc107;
  --info: #0dcaf0;
  --dark: #212529;
  --light: #f8f9fa;
  --sidebar-width: 260px;
  --header-height: 56px;
  --radius: 12px;
  --shadow: 0 4px 20px rgba(0,0,0,.08);
  --shadow-lg: 0 10px 40px rgba(0,0,0,.12);
  --transition: all 0.25s ease;
}

* { box-sizing: border-box; }

body {
  font-family: 'Vazirmatn', 'Tahoma', sans-serif;
  direction: rtl;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4e8ec 100%);
  min-height: 100vh;
  color: #333;
  margin: 0;
}

/* ----- صفحه ورود ----- */
.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: linear-gradient(145deg, #1a1f36 0%, #252b42 50%, #1e2439 100%);
}

.login-card {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  max-width: 420px;
  width: 100%;
}

.login-card .card-header {
  background: linear-gradient(135deg, var(--primary) 0%, #0a58ca 100%);
  color: #fff;
  padding: 1.5rem;
  text-align: center;
  font-weight: 700;
  font-size: 1.1rem;
}

.login-card .card-body { padding: 2rem; }

.login-card .form-control {
  border-radius: 8px;
  padding: 0.75rem 1rem;
  border: 1px solid #dee2e6;
  transition: var(--transition);
}

.login-card .form-control:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.2);
}

.login-card .btn-login {
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-weight: 600;
  transition: var(--transition);
}

.login-card .btn-login.btn-primary {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  border: none;
}

.login-card .btn-login.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(13, 110, 253, 0.4);
}

.login-footer {
  padding: 1rem 2rem;
  background: #f8f9fa;
  text-align: center;
  font-size: 0.85rem;
  color: #6c757d;
}

/* ----- لایه اصلی بعد از ورود ----- */
.app-header {
  height: var(--header-height);
  background: #fff;
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5rem;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.app-header .brand {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--dark);
}

.app-header .user-info {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.9rem;
  color: #6c757d;
}

.app-header .btn-outline-danger { border-radius: 8px; }

/* ----- نوار ابزار صفحات ----- */
.toolbar {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.toolbar .btn {
  border-radius: 8px;
  font-weight: 500;
  padding: 0.5rem 1rem;
  transition: var(--transition);
}

.toolbar .btn:hover { transform: translateY(-1px); }

/* ----- کارت‌ها و پنل‌ها ----- */
.card-modoon {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: none;
  overflow: hidden;
}

.card-modoon .card-header {
  background: #f8f9fa;
  border-bottom: 1px solid #eee;
  padding: 0.75rem 1rem;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--dark);
}

.card-modoon .card-body { padding: 1rem; }

/* ----- جستجو و فیلتر ----- */
.search-panel {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1rem;
  margin-bottom: 1rem;
}

.search-panel .form-label { font-weight: 500; color: #495057; }

.search-panel .form-control,
.search-panel .form-select {
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

.search-panel .btn-search {
  border-radius: 8px;
  font-weight: 600;
  padding: 0.5rem 1.25rem;
}

/* ----- جداول ----- */
.table-modoon {
  margin: 0;
}

.table-modoon thead th {
  background: #f8f9fa;
  border-bottom: 2px solid #dee2e6;
  font-weight: 600;
  color: #495057;
  padding: 0.75rem 1rem;
  white-space: nowrap;
}

.table-modoon tbody td {
  padding: 0.75rem 1rem;
  vertical-align: middle;
}

.table-modoon tbody tr {
  transition: background 0.2s;
}

.table-modoon tbody tr:hover {
  background: #f8f9fa;
}

.table-modoon tbody tr.selected {
  background: #e7f1ff;
}

.table-modoon .table-actions {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.table-modoon .table-actions .btn {
  padding: 0.25rem 0.5rem;
  font-size: 0.8rem;
  border-radius: 6px;
}

/* ----- دکمه‌های عملیات زیر جدول ----- */
.action-bar {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 0.75rem 1rem;
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.action-bar .btn { border-radius: 8px; font-weight: 500; }

/* ----- لاگ وقایع و درخت ----- */
.event-log {
  background: #1e1e2e;
  color: #a9dc76;
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 0.8rem;
  padding: 1rem;
  border-radius: 8px;
  max-height: 220px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

.event-log .log-time { color: #6c757d; }

.tree-panel {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 1rem;
  max-height: 320px;
  overflow: auto;
  border: 1px solid #dee2e6;
}

.tree-panel .tree-item {
  padding: 0.25rem 0.5rem;
  margin: 0.15rem 0;
  border-radius: 6px;
  font-size: 0.9rem;
}

.tree-panel .tree-item:hover { background: #e9ecef; }

.tree-panel .tree-children { margin-right: 1rem; border-right: 2px solid #dee2e6; padding-right: 0.5rem; }

/* ----- Progress بار ارسال ----- */
.progress-wrap {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.25rem;
  margin: 1rem 0;
}

.progress-wrap .progress {
  height: 10px;
  border-radius: 10px;
  background: #e9ecef;
}

.progress-wrap .progress-bar {
  border-radius: 10px;
  transition: width 0.4s ease;
}

.progress-wrap .progress-label {
  font-weight: 600;
  color: var(--primary);
  margin-bottom: 0.5rem;
}

/* ----- چک‌باکس‌ها در فرم ارسال ----- */
.send-options label {
  font-weight: 500;
  cursor: pointer;
  margin-left: 0.5rem;
}

/* ----- آلرت / Toast سفارشی (شیک و مدرن) ----- */
#toast-container {
  position: fixed;
  top: 1rem;
  left: 1rem;
  right: 1rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: none;
}

.toast-modoon {
  pointer-events: auto;
  max-width: 420px;
  margin-right: auto;
  margin-left: 0;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0,0,0,.15), 0 0 1px rgba(0,0,0,.1);
  padding: 1rem 1.25rem;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  animation: toastIn 0.35s ease;
  border-right: 4px solid var(--primary);
}

@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.toast-modoon.toast-success { border-right-color: var(--success); }

.toast-modoon.toast-error { border-right-color: var(--danger); }

.toast-modoon.toast-warning { border-right-color: var(--warning); }

.toast-modoon.toast-info { border-right-color: var(--info); }

.toast-modoon .toast-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.toast-modoon.toast-success .toast-icon { background: rgba(25, 135, 84, 0.15); color: var(--success); }

.toast-modoon.toast-error .toast-icon { background: rgba(220, 53, 69, 0.15); color: var(--danger); }

.toast-modoon.toast-warning .toast-icon { background: rgba(255, 193, 7, 0.2); color: #856404; }

.toast-modoon.toast-info .toast-icon { background: rgba(13, 202, 240, 0.15); color: var(--info); }

.toast-modoon .toast-body { flex: 1; }

.toast-modoon .toast-title { font-weight: 700; margin-bottom: 0.25rem; font-size: 0.95rem; }

.toast-modoon .toast-message { font-size: 0.9rem; color: #495057; white-space: pre-wrap; }

.toast-modoon .toast-close {
  background: none;
  border: none;
  color: #adb5bd;
  cursor: pointer;
  padding: 0.25rem;
  font-size: 1.1rem;
  line-height: 1;
  transition: color 0.2s;
}

.toast-modoon .toast-close:hover { color: #333; }

/* ----- مودال تایید شیک ----- */
.modal-modoon .modal-content {
  border-radius: var(--radius);
  border: none;
  box-shadow: var(--shadow-lg);
}

.modal-modoon .modal-header {
  border-bottom: 1px solid #eee;
  padding: 1rem 1.25rem;
  font-weight: 700;
}

.modal-modoon .modal-footer .btn { border-radius: 8px; }

/* ----- فرم‌های تب‌دار (صورتحساب) ----- */
.nav-tabs .nav-link {
  border-radius: 8px 8px 0 0;
  font-weight: 500;
  border: none;
  color: #6c757d;
  padding: 0.6rem 1rem;
}

.nav-tabs .nav-link:hover { color: var(--primary); }

.nav-tabs .nav-link.active {
  background: #fff;
  color: var(--primary);
  border-bottom: 2px solid var(--primary);
}

.form-section label { font-weight: 500; color: #495057; }

.form-section .form-control,
.form-section .form-select {
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

/* ----- وضعیت‌ها ----- */
.badge-state-1 { background: #6c757d; }
.badge-state-2 { background: #ffc107; color: #333; }
.badge-state-3 { background: #fd7e14; }
.badge-state-4 { background: #0dcaf0; color: #333; }
.badge-state-5 { background: #198754; }
.badge-state-6 { background: #6f42c1; }

/* ----- فوتر وضعیت ----- */
.app-footer {
  background: #fff;
  border-top: 1px solid #dee2e6;
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  color: #6c757d;
}

/* ----- ریسپانسیو ----- */
@media (max-width: 768px) {
  .toolbar { flex-direction: column; align-items: stretch; }
  .action-bar { flex-direction: column; }
  .table-modoon .table-actions { justify-content: flex-start; }
}

/* ----- اسکلت بار (در صورت نیاز) ----- */
.skeleton { background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: skeleton 1.5s ease-in-out infinite; border-radius: 4px; }

@keyframes skeleton { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }