/* =============================================
   نظام الجداول المتجاوبة — صحيفة الشمس الجديد
   Responsive Tables System v1.1
   - Horizontal scroll (default, always safe)
   - Sticky first column (optional, RTL tested)
   - Mobile cards (manual only, via class or admin)
   - RTL + iPhone Safari optimized
   - لا يعتمد على overflow-x:hidden من html/body
   ============================================= */

/* === Table Responsive Wrapper === */
.table-responsive {
  position: relative;
  width: 100%;
  max-width: 100%; /* لا يتجاوز أبداً عرض الأب */
  overflow-x: auto;
  overflow-y: hidden; /* يمنع scroll عمودي غير مطلوب */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  margin: 20px 0;
  border-radius: 8px;
  border: 1px solid var(--tbl-border, #E2E8F0);
}

/* Scroll gradient hints */
.table-responsive::before,
.table-responsive::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 30px;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.table-responsive::before {
  left: 0;
  background: linear-gradient(to right, rgba(0,0,0,0.06), transparent);
}
.table-responsive::after {
  right: 0;
  background: linear-gradient(to left, rgba(0,0,0,0.06), transparent);
}
.table-responsive.can-scroll-start::before { opacity: 1; }
.table-responsive.can-scroll-end::after { opacity: 1; }

/* === Base Table Styles === */
.table-responsive table {
  width: 100%;
  min-width: 100%;
  border-collapse: collapse;
  font-size: inherit;
  line-height: 1.6;
  table-layout: auto; /* عدم تقييد عرض الأعمدة */
}

/* الجدول داخل المحتوى (بدون wrapper — fallback) */
.art-content > table,
.static-body > table {
  width: 100%;
  border-collapse: collapse;
  font-size: inherit;
  line-height: 1.6;
  margin: 20px 0;
}

.table-responsive th,
.table-responsive td,
.art-content > table th,
.art-content > table td,
.static-body > table th,
.static-body > table td {
  padding: 12px 16px;
  text-align: right;
  border: 1px solid var(--tbl-border, #E2E8F0);
  vertical-align: top;
  word-break: normal;
  overflow-wrap: break-word;
}

/* Header styles */
.table-responsive thead th,
.art-content > table thead th,
.static-body > table thead th {
  background: var(--tbl-head-bg, #006C35);
  color: var(--tbl-head-color, #FFFFFF);
  font-weight: 700;
  font-size: 0.95em;
  white-space: nowrap;
  position: relative;
}

/* Zebra rows */
.table-responsive.table-zebra tbody tr:nth-child(even),
.table-responsive.table-zebra-auto tbody tr:nth-child(even) {
  background: #F8FAF8;
}

/* Row hover */
.table-responsive tbody tr:hover {
  background: rgba(0, 108, 53, 0.04);
  transition: background 0.2s ease;
}

/* Caption */
.table-responsive caption {
  caption-side: top;
  padding: 10px 16px;
  font-size: 0.9em;
  font-weight: 700;
  color: var(--c-text2, #4A5568);
  text-align: right;
  background: #F8F9FA;
  border-bottom: 2px solid var(--tbl-head-bg, #006C35);
}

/* Scroll hint message */
.table-scroll-hint {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 12px;
  color: var(--c-text3, #8A94A6);
  background: #F8F9FA;
  border-top: 1px solid var(--c-border, #E2E8F0);
  border-radius: 0 0 8px 8px;
}
.table-scroll-hint i {
  font-size: 14px;
  animation: swipeHint 2s ease-in-out infinite;
}
@keyframes swipeHint {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-6px); }
}

/* === Sticky First Column (RTL) === */
.table-sticky-col th:first-child,
.table-sticky-col td:first-child {
  position: sticky;
  right: 0; /* RTL: أول عمود على اليمين */
  z-index: 1;
  background: #FFFFFF; /* خلفية صلبة — لا شفافية */
  min-width: 120px;
  max-width: 200px; /* لا يغطي نصوص الأعمدة الأخرى */
}
/* Header sticky */
.table-sticky-col thead th:first-child {
  background: var(--tbl-head-bg, #006C35);
  color: var(--tbl-head-color, #FFFFFF);
  z-index: 3; /* فوق باقي headers + فوق sticky cells */
}
/* Shadow separator */
.table-sticky-col td:first-child {
  box-shadow: -2px 0 4px rgba(0,0,0,0.06);
}
/* Zebra rows: sticky column يأخذ نفس لون الصف */
.table-sticky-col.table-zebra tbody tr:nth-child(even) td:first-child,
.table-sticky-col.table-zebra-auto tbody tr:nth-child(even) td:first-child {
  background: #F0F4F0;
}
/* Hover: sticky column يتبع hover */
.table-sticky-col tbody tr:hover td:first-child {
  background: rgba(0, 108, 53, 0.06);
}

/* === Mobile Cards Mode (يدوي فقط — عبر class أو إعداد) === */
@media (max-width: 768px) {
  .table-mobile-cards thead {
    display: none;
  }
  .table-mobile-cards tbody tr {
    display: block;
    margin-bottom: 12px;
    border: 1px solid var(--c-border, #E2E8F0);
    border-radius: 8px;
    padding: 4px 0;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  }
  .table-mobile-cards tbody td {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 8px 14px;
    border: none;
    border-bottom: 1px solid #F0F0F0;
    gap: 10px;
  }
  .table-mobile-cards tbody td:last-child {
    border-bottom: none;
  }
  .table-mobile-cards tbody td::before {
    content: attr(data-label);
    font-weight: 700;
    color: var(--c-primary, #006C35);
    font-size: 0.85em;
    flex-shrink: 0;
    min-width: 80px;
  }
  .table-mobile-cards caption {
    border-radius: 8px 8px 0 0;
  }
  /* Cards wrapper: لا يحتاج scroll */
  .table-responsive:has(.table-mobile-cards) {
    overflow-x: visible;
    border: none;
  }
  .table-responsive:has(.table-mobile-cards)::before,
  .table-responsive:has(.table-mobile-cards)::after {
    display: none;
  }
}

/* === Mobile Responsive === */
@media (max-width: 768px) {
  .table-responsive {
    margin: 14px 0; /* لا negative margin — يبقى داخل container */
    border-radius: 6px;
  }

  /* الجدول يأخذ عرض محتواه الطبيعي (يسمح بالسحب) */
  .table-responsive table:not(.table-mobile-cards) {
    width: max-content;
    min-width: 100%;
  }

  .table-responsive th,
  .table-responsive td {
    padding: 10px 12px;
    font-size: 14px;
  }

  .table-scroll-hint {
    display: flex;
  }

  /* Sticky col on mobile */
  .table-sticky-col td:first-child {
    box-shadow: -3px 0 6px rgba(0,0,0,0.08);
  }
}

/* === Print === */
@media print {
  .table-responsive {
    overflow: visible !important;
  }
  .table-scroll-hint,
  .table-responsive::before,
  .table-responsive::after {
    display: none !important;
  }
  .table-sticky-col th:first-child,
  .table-sticky-col td:first-child {
    position: static;
    box-shadow: none;
  }
}