/*
 * DGA Table component tokens applied to wpDataTables output
 * (Resources > Investment Statistics, [wpdatatable id=14]).
 *
 * wpDataTables renders its own per-table inline <style> block with
 * !important on background-color/color for header + body cells --
 * those are the site editor's own explicit color choices for this
 * table's data, so they are left untouched here (overriding them would
 * mean fighting !important with !important, blind, with no visual
 * verification available in this environment).
 *
 * What IS safe to apply without any specificity fight: the DGA table
 * container framing (boxed card look, per DGA's Table component spec)
 * and heading/font-family tokens -- none of which the plugin's inline
 * block touches.
 */
.wpDataTablesWrapper {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border-neutral-primary);
  overflow: hidden;
}
/* wpDataTables injects its own inline <style> block on every page with
   this EXACT selector (`.wpdt-c.wpDataTablesWrapper table.wpdtSimpleTable
   thead th`) forcing white !important -- confirmed by walking every
   matched stylesheet rule for this element via document.styleSheets.
   Equal specificity + equal !important comes down to source order, and
   the plugin's inline block loads after this stylesheet, so it was
   winning outright. Adding the attribute selector below (matches any
   wpDataTables simple-table id, not just one specific table) makes this
   selector strictly MORE specific than the plugin's own, which beats it
   regardless of source order -- same technique used for the row hover
   effect below. */
.wpdt-c.wpDataTablesWrapper table[id^="wpdtSimpleTable-"].wpdtSimpleTable thead th {
  background-color: #e5e7eb !important;
}
.wpdt-c.wpDataTablesWrapper table[id^="wpdtSimpleTable-"].wpdtSimpleTable tbody tr:hover td {
  background-color: var(--colors-gray-neutral-100, #f3f4f6) !important;
}
/* DGA's real Table component (design.dga.gov.sa/guidelines/components/
   data-display/table) scrolls its own body horizontally rather than
   letting a wide table (Procurements has 6 columns of dates/reference
   numbers) force the whole page to overflow sideways or crush every
   column down to an unreadable width on a laptop/tablet screen. */
.wpDataTablesWrapper {
  overflow-x: auto;
}

h3.wpdt-c[id^="wdt-table-title-"] {
  font-family: var(--font-family-arabic);
  font-size: var(--font-size-text-lg);
  line-height: var(--line-height-text-lg);
  font-weight: var(--font-weight-bold);
  color: var(--text-default);
  margin-bottom: var(--spacing-4);
}

.wpdt-c.wpDataTablesWrapper table.wpdtSimpleTable thead th,
.wpdt-c.wpDataTablesWrapper table.wpdtSimpleTable tbody td {
  font-family: var(--font-family-arabic);
}

.wpdt-c.wpDataTablesWrapper table.wpdtSimpleTable tbody td a {
  color: var(--colors-primary-sa-flag-600-primary);
  text-decoration: none;
}
.wpdt-c.wpDataTablesWrapper table.wpdtSimpleTable tbody td a:hover {
  color: var(--colors-primary-sa-flag-700);
  text-decoration: underline;
}