/* =============================================
   ظ†ط¸ط§ظ… ط§ظ„ط¬ط¯ط§ظˆظ„ ط§ظ„ظ…طھط¬ط§ظˆط¨ط© — طµط­ظٹظپط© ط§ظ„ط´ظ…ط³ ط§ظ„ط¬ط¯ظٹط¯
   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 === */
.o24t-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 */
.o24t-table-responsive::before,
.o24t-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;
}
.o24t-table-responsive::before {
  left: 0;
  background: linear-gradient(to right, rgba(0,0,0,0.06), transparent);
}
.o24t-table-responsive::after {
  right: 0;
  background: linear-gradient(to left, rgba(0,0,0,0.06), transparent);
}
.o24t-table-responsive.o24t-can-scroll-start::before { opacity: 1; }
.o24t-table-responsive.o24t-can-scroll-end::after { opacity: 1; }

/* === Base Table Styles === */
.o24t-table-responsive table {
  width: 100%;
  min-width: 100%;
  border-collapse: collapse;
  font-size: inherit;
  line-height: 1.6;
  table-layout: auto; /* ط¹ط¯ظ… طھظ‚ظٹظٹط¯ ط¹ط±ط¶ ط§ظ„ط£ط¹ظ…ط¯ط© */
}

/* ط§ظ„ط¬ط¯ظˆظ„ ط¯ط§ط®ظ„ ط§ظ„ظ…ط­طھظˆظ‰ (ط¨ط¯ظˆظ† wrapper — fallback) */
.o24-art-content > table,
.o24-static-body > table {
  width: 100%;
  border-collapse: collapse;
  font-size: inherit;
  line-height: 1.6;
  margin: 20px 0;
}

.o24t-table-responsive th,
.o24t-table-responsive td,
.o24-art-content > table th,
.o24-art-content > table td,
.o24-static-body > table th,
.o24-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 */
.o24t-table-responsive thead th,
.o24-art-content > table thead th,
.o24-static-body > table thead th {
  background: var(--tbl-head-bg, #0D2E5C);
  color: var(--tbl-head-color, #FFFFFF);
  font-weight: 700;
  font-size: 0.95em;
  white-space: nowrap;
  position: relative;
}

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

/* Row hover */
.o24t-table-responsive tbody tr:hover {
  background: rgba(13, 46, 92, 0.04);
  transition: background 0.2s ease;
}

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

/* Scroll hint message */
.o24t-table-scroll-hint {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 12px;
  color: var(--o24-txt3, #8A94A6);
  background: #F8F9FA;
  border-top: 1px solid var(--o24-bdr, #E2E8F0);
  border-radius: 0 0 8px 8px;
}
.o24t-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) === */
.o24t-table-sticky-col th:first-child,
.o24t-table-sticky-col td:first-child {
  position: sticky;
  right: 0; /* RTL: ط£ظˆظ„ ط¹ظ…ظˆط¯ ط¹ظ„ظ‰ ط§ظ„ظٹظ…ظٹظ† */
  z-index: 1;
  background: #FFFFFF; /* ط®ظ„ظپظٹط© طµظ„ط¨ط© — ظ„ط§ ط´ظپط§ظپظٹط© */
  min-width: 120px;
  max-width: 200px; /* ظ„ط§ ظٹط؛ط·ظٹ ظ†طµظˆطµ ط§ظ„ط£ط¹ظ…ط¯ط© ط§ظ„ط£ط®ط±ظ‰ */
}
/* Header sticky */
.o24t-table-sticky-col thead th:first-child {
  background: var(--tbl-head-bg, #0D2E5C);
  color: var(--tbl-head-color, #FFFFFF);
  z-index: 3; /* ظپظˆظ‚ ط¨ط§ظ‚ظٹ headers + ظپظˆظ‚ sticky cells */
}
/* Shadow separator */
.o24t-table-sticky-col td:first-child {
  box-shadow: -2px 0 4px rgba(0,0,0,0.06);
}
/* Zebra rows: sticky column ظٹط£ط®ط° ظ†ظپط³ ظ„ظˆظ† ط§ظ„طµظپ */
.o24t-table-sticky-col.o24t-table-zebra tbody tr:nth-child(even) td:first-child,
.o24t-table-sticky-col.o24t-table-zebra-auto tbody tr:nth-child(even) td:first-child {
  background: #ECF0F8;
}
/* Hover: sticky column ظٹطھط¨ط¹ hover */
.o24t-table-sticky-col tbody tr:hover td:first-child {
  background: rgba(13, 46, 92, 0.06);
}

/* === Mobile Cards Mode (ظٹط¯ظˆظٹ ظپظ‚ط· — ط¹ط¨ط± class ط£ظˆ ط¥ط¹ط¯ط§ط¯) === */
@media (max-width: 768px) {
  .o24t-table-mobile-cards thead {
    display: none;
  }
  .o24t-table-mobile-cards tbody tr {
    display: block;
    margin-bottom: 12px;
    border: 1px solid var(--o24-bdr, #E2E8F0);
    border-radius: 8px;
    padding: 4px 0;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  }
  .o24t-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;
  }
  .o24t-table-mobile-cards tbody td:last-child {
    border-bottom: none;
  }
  .o24t-table-mobile-cards tbody td::before {
    content: attr(data-label);
    font-weight: 700;
    color: var(--o24-main, #0D2E5C);
    font-size: 0.85em;
    flex-shrink: 0;
    min-width: 80px;
  }
  .o24t-table-mobile-cards caption {
    border-radius: 8px 8px 0 0;
  }
  /* Cards wrapper: ظ„ط§ ظٹط­طھط§ط¬ scroll */
  .o24t-table-responsive:has(.o24t-table-mobile-cards) {
    overflow-x: visible;
    border: none;
  }
  .o24t-table-responsive:has(.o24t-table-mobile-cards)::before,
  .o24t-table-responsive:has(.o24t-table-mobile-cards)::after {
    display: none;
  }
}

/* === Mobile Responsive === */
@media (max-width: 768px) {
  .o24t-table-responsive {
    margin: 14px 0; /* ظ„ط§ negative margin — ظٹط¨ظ‚ظ‰ ط¯ط§ط®ظ„ container */
    border-radius: 6px;
  }

  /* ط§ظ„ط¬ط¯ظˆظ„ ظٹط£ط®ط° ط¹ط±ط¶ ظ…ط­طھظˆط§ظ‡ ط§ظ„ط·ط¨ظٹط¹ظٹ (ظٹط³ظ…ط­ ط¨ط§ظ„ط³ط­ط¨) */
  .o24t-table-responsive table:not(.o24t-table-mobile-cards) {
    width: max-content;
    min-width: 100%;
  }

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

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

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

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