/* =====================================================================
   سامانه متامد - استایل پایه
   مطابق Metamed Design System v1.0:
   رنگ اصلی: آبی (اعتماد/سلامت/فناوری) | رنگ مکمل: سبز (امید/نیکوکاری/رشد)
   شعار: سادگی برای اپراتور، شفافیت برای مدیر، اعتماد برای خیر.
   ===================================================================== */

:root {
  /* پالت رنگی هماهنگ‌شده با سامانه «نگار» برای یکدستی ظاهری بین محصولات */
  --color-primary: #2563eb;
  --color-primary-dark: #1d4ed8;
  --color-primary-light: #eff6ff;
  --color-sidebar-bg: #101a2c;
  --color-sidebar-active: #1d4ed8;
  --color-sidebar-active-bg: rgba(255,255,255,0.08);
  --color-secondary: #17a673;
  --color-secondary-light: #e6f7f1;
  --color-warning: #d97706;
  --color-warning-light: #fef3c7;
  --color-critical: #dc2626;
  --color-critical-light: #fee2e2;
  --color-success: #16a34a;
  --color-neutral: #9ca3af;
  --color-neutral-light: #f1f2f4;
  --color-bg: #f4f6f9;
  --color-surface: #ffffff;
  --color-text: #1f2937;
  --color-text-muted: #6b7280;
  --color-border: #e2e6ec;
  --radius: 10px;
  --shadow: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.04);
  --font-family: "IRANSans", "IRANSansX", "IRANYekan", "Vazirmatn", Tahoma, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

/* مرورگرها به‌طور پیش‌فرض فونت سیستم را به <button> می‌دهند نه فونت صفحه؛ این قانون
   سراسری همه دکمه‌ها (از جمله دکمه‌های آیکونی) را با فونت اصلی برنامه هماهنگ می‌کند. */
button { font-family: inherit; }

body {
  font-family: var(--font-family);
  background: var(--color-bg);
  color: var(--color-text);
  margin: 0;
  direction: rtl;
  font-size: 14px;
  line-height: 1.8;
}

a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

.app-shell {
  display: flex;
  min-height: 100vh;
}

/* ---- نوار کناری (سمت راست، مطابق RTL) ---- */
.sidebar {
  width: 240px;
  background: var(--color-sidebar-bg);
  color: #cdd7e6;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  transition: margin-right .2s ease;
}
.sidebar.collapsed { margin-right: -240px; }

@media (max-width: 880px) {
  .sidebar { position: fixed; z-index: 50; height: 100vh; margin-right: -240px; }
  .sidebar.open { margin-right: 0; }
}

.sidebar .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.sidebar .brand .logo-dot {
  width: 34px; height: 34px; border-radius: 9px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700;
}

.sidebar .brand .brand-logo {
  width: 36px; height: 36px; object-fit: contain; flex-shrink: 0;
}

.sidebar .brand-title { font-size: 15px; font-weight: 700; color: #fff; }
.sidebar .brand-sub { font-size: 11px; color: #93a3bb; }

/* پدینگ فشرده تا با فهرست کامل ۱۳ آیتم منو نیازی به اسکرول نوار کناری نباشد */
.sidebar nav { padding: 6px 0; flex: 1; overflow-y: auto; }

.sidebar nav a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 18px;
  color: #cdd7e6;
  font-size: 13px;
  border-right: 3px solid transparent;
  line-height: 1.4;
}

.sidebar nav a .nav-icon { font-size: 14px; width: 18px; text-align: center; flex-shrink: 0; }

.sidebar nav a:hover { background: rgba(255,255,255,0.06); text-decoration: none; }

.sidebar nav a.active {
  background: var(--color-sidebar-active-bg);
  border-right-color: var(--color-sidebar-active);
  color: #fff;
  font-weight: 600;
}

/* ---- عنوان گروه در نوار کناری (مطابق نگار: دسته‌بندی آیتم‌های منو) ---- */
.nav-group-title {
  font-size: 11px;
  color: #7f8aa3;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 14px 18px 6px;
}

/* ---- زیرمنوی جمع‌شونده (تنظیمات/گزارش فعالیت‌ها) مطابق الگوی نگار ---- */
.nav-submenu { border: none; }
.nav-submenu summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 9px;
  justify-content: space-between;
  padding: 8px 18px;
  font-size: 13px;
  color: #cdd7e6;
  user-select: none;
}
.nav-submenu summary .submenu-label { display: flex; align-items: center; gap: 9px; }
.nav-submenu summary::-webkit-details-marker { display: none; }
.nav-submenu summary::after {
  content: '‹';
  font-size: 15px;
  color: #7f8aa3;
  transition: transform .15s ease;
}
.nav-submenu[open] summary::after { transform: rotate(-90deg); }
.nav-submenu summary:hover { background: rgba(255,255,255,.06); }
.nav-submenu a { padding-right: 32px; }

.sidebar-footer {
  padding: 10px 18px;
  font-size: 11px;
  color: #7c8aa3;
  border-top: 1px solid rgba(255,255,255,0.08);
  text-align: center;
  flex-shrink: 0;
}

/* ---- دکمه خروج در نوار بالا (طبق سند طراحی: خروج از نوار کناری به نوار بالا منتقل شد) ---- */
.logout-form-topbar { margin: 0; }
.btn-logout-topbar {
  background: #fff; border: 1px solid var(--color-border); color: var(--color-critical);
  padding: 7px 14px; border-radius: 8px; cursor: pointer; font-family: var(--font-family);
  font-size: 12.5px; font-weight: 600;
}
.btn-logout-topbar:hover { background: var(--color-critical-light); border-color: var(--color-critical); }

/* ---- تب‌های صفحه تنظیمات ---- */
.tabs { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.tab-link { padding: 7px 14px; border-radius: 8px; border: 1px solid var(--color-border); background: #fff; color: var(--color-text); font-size: 13px; font-weight: 600; }
.tab-link:hover { text-decoration: none; border-color: var(--color-primary); }
.tab-link.active { background: var(--color-primary-light); border-color: var(--color-primary); color: var(--color-primary-dark); }

/* ---- انتخابگر تم (تنظیمات) ---- */
.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.theme-swatch { border: 2px solid var(--color-border); border-radius: 10px; padding: 12px; cursor: pointer; text-align: center; background: #fff; font-family: var(--font-family); }
.theme-swatch.active { border-color: var(--color-primary); box-shadow: 0 0 0 2px var(--color-primary) inset; }
.theme-preview { display: flex; height: 34px; border-radius: 6px; overflow: hidden; margin-bottom: 8px; }
.theme-preview span { flex: 1; }
.theme-swatch .theme-name { font-size: 12px; font-weight: 600; }

/* ---- محتوای اصلی ---- */
.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.topbar {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.topbar h1 { font-size: 18px; margin: 0; flex: 1; }
.topbar .user-chip { font-size: 13px; color: var(--color-text-muted); }

/* ---- دکمه‌های آیکونی خنثی نوار بالا (همبرگر سایدبار و مشابه) ---- */
.icon-btn {
  background: none; border: none; font-size: 20px; cursor: pointer; color: var(--color-text);
  padding: 4px; line-height: 1;
}
.icon-btn:hover { color: var(--color-primary); }

/* ---- دکمه‌های آیکونی اقدام روی ردیف جدول (ویرایش/حذف/مشاهده/فعال‌سازی) ----
   مطابق سامانه نگار: به‌جای دکمه متنی، آیکون رنگی کوچک با title برای دسترسی‌پذیری. */
.icon-action-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 7px; border: 1px solid var(--color-border);
  background: #fff; cursor: pointer; font-size: 14px; margin-left: 4px;
  text-decoration: none; padding: 0; vertical-align: middle;
}
.icon-action-btn:hover { text-decoration: none; filter: brightness(0.97); }
.icon-edit   { color: var(--color-primary); border-color: #bfdbfe; background: var(--color-primary-light); }
.icon-delete { color: var(--color-critical); border-color: #fecaca; background: var(--color-critical-light); }
.icon-toggle { color: var(--color-warning); border-color: #fde68a; background: var(--color-warning-light); }
.icon-view   { color: var(--color-success); border-color: #a7f3d0; background: var(--color-secondary-light); }
.icon-repair { color: #b45309; border-color: #fde68a; background: var(--color-warning-light); animation: icon-repair-pulse 2s ease-in-out infinite; }
@keyframes icon-repair-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(180,83,9,0.35); } 50% { box-shadow: 0 0 0 4px rgba(180,83,9,0); } }
.icon-print  { color: var(--color-text-muted); border-color: var(--color-border); background: #fff; }
.icon-actions-cell { display: flex; gap: 4px; align-items: center; }
.link-form { display: inline; margin: 0; }

.content { padding: 22px 24px; flex: 1; }

/* ---- کارت‌ها ---- */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
  margin-bottom: 18px;
}

.card h2 { font-size: 15px; margin: 0 0 14px; }

/* کارتی که نیاز به اقدام کاربر دارد (مثلاً فاز دوم خرابی/تعمیر) — با حاشیه و پس‌زمینه هشداری متمایز می‌شود */
.card-action-needed {
  border-color: #fde68a;
  background: linear-gradient(var(--color-warning-light), var(--color-warning-light)) padding-box,
              var(--color-surface);
  border-right: 4px solid var(--color-warning);
}
.card-action-needed h2 { display: flex; align-items: center; gap: 8px; }

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.kpi-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px 18px;
}

.kpi-card .kpi-label { color: var(--color-text-muted); font-size: 12.5px; margin-bottom: 8px; }
.kpi-card .kpi-value { font-size: 26px; font-weight: 700; }
.kpi-card.primary .kpi-value { color: var(--color-primary); }
.kpi-card.secondary .kpi-value { color: var(--color-secondary); }
.kpi-card.warning .kpi-value { color: var(--color-warning); }
.kpi-card.critical .kpi-value { color: var(--color-critical); }

/* ---- دکمه‌ها ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: var(--font-family);
  font-size: 13.5px;
  font-weight: 600;
}

.btn-primary { background: var(--color-primary); color: #fff; }
.btn-primary:hover { background: var(--color-primary-dark); text-decoration: none; }
.btn-secondary { background: var(--color-secondary); color: #fff; }
.btn-outline { background: #fff; border-color: var(--color-border); color: var(--color-text); }
.btn-outline:hover { border-color: var(--color-primary); color: var(--color-primary); text-decoration: none; }
.btn-danger { background: var(--color-critical); color: #fff; }
.btn-sm { padding: 6px 12px; font-size: 12.5px; }

/* ---- فرم‌ها ---- */
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px; }
.form-group label { font-size: 13px; font-weight: 600; color: var(--color-text); text-align: right; display: block; }
.form-group .hint { font-size: 11.5px; color: var(--color-text-muted); }
.form-group input, .form-group select, .form-group textarea {
  padding: 9px 11px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-family: var(--font-family);
  font-size: 13.5px;
  background: #fff;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-light);
}
.field-error { color: var(--color-critical); font-size: 12px; }
.form-actions { display: flex; gap: 10px; margin-top: 18px; }

/* ---- جداول ---- */
table.data-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.data-table th, table.data-table td { padding: 10px 12px; border-bottom: 1px solid var(--color-border); text-align: right; }
table.data-table th { background: var(--color-neutral-light); font-weight: 700; color: var(--color-text); }
table.data-table tbody tr:hover { background: #fafbfe; }

/* افزونه DataTables به‌صورت پیش‌فرض برای چیدمان چپ‌به‌راست (LTR) طراحی شده و روی سربرگ
   ستون‌های قابل مرتب‌سازی، قواعد CSS خودش (اختصاصی‌تر از table.data-table th بالا) را
   اعمال می‌کند که نتیجه‌اش عنوان ستون چپ‌چین در برابر محتوای راست‌چین ردیف‌ها بود. این قواعد
   با !important در همه فهرست‌های برنامه (هر جدولی که DataTable روی آن init شود) رفع می‌شود. */
table.dataTable thead th,
table.dataTable thead td {
  text-align: right !important;
}
/* ریشه واقعی اشکال قبلی (بعد از بررسی سورس اصلی DataTables 1.13.8): این افزونه علامت
   سورت را نه با background-image بلکه با دو شبه‌عنصر جدا می‌سازد — ::before (▲) و
   ::after (▼) — با گزیننده «thead > tr > th.sorting» که تخصیصی‌تر (specificity بالاتر)
   از گزیننده قبلی ماست؛ چون فقط ::after را بازنویسی کرده بودیم، ::before دست‌نخورده با
   موقعیت اصلی خودش (bottom:50%; right:10px) رندر می‌شد و همان چیزی بود که «زیر نام فیلد»
   دیده می‌شد. راه‌حل قطعی: با همان زنجیره گزینشگر DataTables + !important، ::before را
   کاملاً خاموش می‌کنیم و ::after را به‌عنوان تنها نشانگر، با موقعیت مطلق روی لبه سمت چپ
   سلول (صرف‌نظر از هرگونه بسته‌بندی متن) بازتعریف می‌کنیم. */
table.dataTable thead > tr > th.sorting:before,
table.dataTable thead > tr > th.sorting_asc:before,
table.dataTable thead > tr > th.sorting_desc:before,
table.dataTable thead > tr > th.sorting_asc_disabled:before,
table.dataTable thead > tr > th.sorting_desc_disabled:before {
  content: none !important;
  display: none !important;
}
table.dataTable thead > tr > th.sorting,
table.dataTable thead > tr > th.sorting_asc,
table.dataTable thead > tr > th.sorting_desc,
table.dataTable thead > tr > th.sorting_asc_disabled,
table.dataTable thead > tr > th.sorting_desc_disabled {
  position: relative !important;
  white-space: nowrap !important;
  padding-right: 12px !important;
  padding-left: 22px !important;
}
table.dataTable thead > tr > th.sorting:after,
table.dataTable thead > tr > th.sorting_asc:after,
table.dataTable thead > tr > th.sorting_desc:after,
table.dataTable thead > tr > th.sorting_asc_disabled:after,
table.dataTable thead > tr > th.sorting_desc_disabled:after {
  content: '\25B4\25BE' !important;
  display: inline-block !important;
  position: absolute !important;
  left: 8px !important;
  right: auto !important;
  top: 50% !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
  font-size: 9px !important;
  line-height: 1 !important;
  letter-spacing: -1px !important;
  opacity: 1 !important;
  color: var(--color-text-muted) !important;
}
table.dataTable thead > tr > th.sorting_asc:after {
  content: '\25B4' !important;
  font-size: 11px !important;
  color: var(--color-primary) !important;
}
table.dataTable thead > tr > th.sorting_desc:after {
  content: '\25BE' !important;
  font-size: 11px !important;
  color: var(--color-primary) !important;
}

/* ---- برچسب وضعیت ---- */
.badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; }
.badge-primary { background: var(--color-primary-light); color: var(--color-primary-dark); }
.badge-secondary { background: var(--color-secondary-light); color: var(--color-secondary); }
.badge-warning { background: var(--color-warning-light); color: #b45309; }
.badge-critical { background: var(--color-critical-light); color: var(--color-critical); }
.badge-neutral { background: var(--color-neutral-light); color: var(--color-text-muted); }

/* ---- اعلان‌ها (Toast) ---- */
.toast {
  position: fixed; top: 18px; left: 50%; transform: translateX(-50%);
  z-index: 999; padding: 12px 20px; border-radius: 10px; box-shadow: var(--shadow);
  font-size: 13.5px; font-weight: 600; color: #fff;
}
.toast-success { background: var(--color-success); }
.toast-error { background: var(--color-critical); }

/* ---- صفحه ورود ---- */
.login-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
}
.login-card {
  background: #fff; border-radius: 16px; padding: 34px; width: 100%; max-width: 380px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}
.login-logo { display: block; width: 64px; height: 64px; object-fit: contain; margin: 0 auto 14px; }
.login-card h1 { text-align: center; font-size: 20px; margin-bottom: 4px; }
.login-card p.subtitle { text-align: center; color: var(--color-text-muted); font-size: 12.5px; margin-bottom: 22px; }

.helper-panel { background: var(--color-secondary-light); border: 1px solid var(--color-secondary); border-radius: 8px; padding: 10px 12px; font-size: 12px; color: #0b5e42; margin-top: 16px; }
.login-version { text-align: center; color: var(--color-text-muted); font-size: 11.5px; margin-top: 18px; }

.empty-state { text-align: center; color: var(--color-text-muted); padding: 30px 10px; }

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { padding: 8px 0; border-bottom: 1px dashed var(--color-border); font-size: 13px; }
.timeline li:last-child { border-bottom: none; }
.timeline .t-time { color: var(--color-text-muted); font-size: 11.5px; }

.detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: 10px 20px; }
.detail-grid dt { font-size: 11.5px; color: var(--color-text-muted); margin-bottom: 2px; }
.detail-grid dd { margin: 0; font-size: 14px; font-weight: 600; }

/* ---- جستجوی زنده بیمار/تحویل‌گیرنده (Typeahead) ---- */
#patient-search-wrap, #recipient-search-wrap { position: relative; }
#patient-search-results, #recipient-search-results {
  display: none;
  position: absolute;
  z-index: 50;
  top: 100%;
  right: 0; left: 0;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: var(--shadow);
  max-height: 220px;
  overflow-y: auto;
  margin-top: 4px;
}
.ps-item { padding: 8px 12px; cursor: pointer; font-size: 13px; }
.ps-item:hover { background: var(--color-primary-light); }
.ps-item.ps-empty { color: var(--color-text-muted); cursor: default; }
.ps-item.ps-empty:hover { background: transparent; }

/* ---- چک‌لیست آماده‌سازی (مرحله ۴ امانت) ---- */
.prep-checklist { list-style: none; margin: 0; padding: 0; }
.prep-checklist li { display: flex; align-items: center; gap: 10px; padding: 10px 4px; border-bottom: 1px dashed var(--color-border); }
.prep-checklist li:last-child { border-bottom: none; }
.prep-checklist form { margin: 0; }
.prep-checklist .prep-name { flex: 1; font-size: 13.5px; }
.prep-checklist .prep-done { color: var(--color-success); font-weight: 600; font-size: 12.5px; }

/* ---- صفحات جای‌نگه‌دار (گزارشات) ---- */
.stub-page { text-align: center; padding: 60px 20px; color: var(--color-text-muted); }
.stub-page .stub-icon { font-size: 44px; margin-bottom: 14px; }
.stub-page h2 { color: var(--color-text); margin-bottom: 8px; }

/* ---- کاتالوگ خدمات آماده‌سازی/اسناد ضمانت (تنظیمات) ---- */
.checkbox-grid { display: flex; flex-wrap: wrap; gap: 12px; }
.checkbox-grid label { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; font-size: 12.5px; cursor: pointer; }

/* ---- پیوست‌های فایل ---- */
.attachments-box { margin-top: 4px; }
.attachments-box form { margin: 0; }

/* ---- مودال (پاپ‌آپ) — برای فرم‌های ویرایش تب تنظیمات (شهرستان/شعبه/واحد/دسته‌بندی/
   عنوان تجهیز/تامین‌کننده/کاربر)؛ تا پیش از این نسخه، فرم ویرایش به‌صورت یک کارت معمولی
   پایین فهرست رندر می‌شد که در فهرست‌های طولانی بدون اسکرول دیده نمی‌شد. چون این کارت‌ها
   کاملاً توسط PHP و بر اساس وجود $editXxx رندر می‌شوند (بدون AJAX)، مودال هم به همان
   شکل ساده — نمایش/عدم‌نمایش شرطی سمت سرور — کار می‌کند و نیازی به JS برای باز شدن ندارد؛
   فقط دکمه بستن (× یا انصراف) با ناوبری به همان تب بدون edit_id، آن را می‌بندد. */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(17, 24, 39, 0.55);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 16px;
  overflow-y: auto;
  z-index: 1000;
}
.modal-box {
  background: var(--color-surface);
  border-radius: var(--radius);
  box-shadow: 0 20px 50px rgba(0,0,0,0.3);
  padding: 20px 22px;
  width: 100%;
  max-width: 640px;
  position: relative;
  margin: auto 0;
}
.modal-box h2 { font-size: 15px; margin: 0 0 14px; padding-left: 30px; }
.modal-close {
  position: absolute;
  top: 14px;
  left: 14px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: #fff;
  color: var(--color-text-muted);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.modal-close:hover { background: var(--color-neutral-light); color: var(--color-text); }
@media print {
  .modal-overlay { display: none !important; }
}

/* ---- چاپ ----
   هنگام چاپ، نوار کناری/بالایی/دکمه‌ها/فرم‌ها پنهان می‌شوند و فقط محتوای اصلی
   (جدول یا کارت جزئیات) چاپ می‌شود. */
@media print {
  .no-print, .sidebar, .topbar, .toast { display: none !important; }
  /* کنترل‌های افزونه DataTables (جستجو/تعداد ردیف/صفحه‌بندی/اطلاعات) هنگام چاپ حذف
     می‌شوند تا فقط خودِ جدول اطلاعات چاپ شود، نه چیدمان کامل صفحه. */
  .dataTables_wrapper .dataTables_filter,
  .dataTables_wrapper .dataTables_length,
  .dataTables_wrapper .dataTables_info,
  .dataTables_wrapper .dataTables_paginate,
  .print-hide { display: none !important; }
  .app-shell { display: block; }
  .main { display: block; }
  .content { padding: 0; }
  .card { box-shadow: none; border: none; }
  body { background: #fff; }
}