/* ================================================================
   CONTENT TABLES — Jinan University
   ----------------------------------------------------------------
   Branded styling for tables admins paste/insert into page content.
   safe_editorial_html() wraps every <table> in .rich-table-wrap, so
   this is the single scope. Everything uses !important on purpose:
   editorial tables arrive with pasted inline styles and legacy
   presentational attributes (bgcolor, border="1", cellpadding,
   width, font) — we override ALL of it so every table reads as
   native Jinan, no matter what was inserted.
   Signature: a gold→teal rule across the top, echoing the card
   accent used throughout the site.
   ================================================================ */

.rich-table-wrap {
  --jt-teal: var(--jinan-teal, #00846e);
  --jt-gold: var(--jinan-gold, #f7b243);
  --jt-ink: var(--jinan-charcoal, #2b2d31);
  --jt-line: rgba(0, 132, 110, 0.13);    /* subtle outer frame */
  --jt-rowline: rgba(0, 132, 110, 0.34); /* visible row dividers */
  --jt-colline: rgba(0, 132, 110, 0.24); /* visible column dividers */
  --jt-zebra: rgba(0, 132, 110, 0.045);
  --jt-hover: rgba(247, 178, 67, 0.16);

  position: relative;
  margin: 1.6rem 0;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: #fff;
  border: 1px solid var(--jt-line);
  border-radius: 12px;
  box-shadow: 0 6px 20px -12px rgba(0, 0, 0, 0.32);
}

/* Signature: gold→teal rule across the very top of every table. */
.rich-table-wrap::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--jt-gold), var(--jt-teal));
  z-index: 3;
}

/* ---- the table itself: strip pasted borders/bg/fonts/width ---- */
.rich-table-wrap table {
  width: 100% !important;
  margin: 0 !important;
  border: 0 !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  background: transparent !important;
  font-family: "Lato", "Cairo", system-ui, -apple-system, sans-serif !important;
  font-size: 0.95rem !important;
  line-height: 1.5 !important;
  color: var(--jt-ink) !important;
}

/* pasted <tr style="background:…"> would show through transparent cells */
.rich-table-wrap tr {
  background: transparent !important;
}

/* ---- header cells: real <th>, a <thead>, OR — when the table has
   neither — the first row (academic content tables lead with a header) ---- */
.rich-table-wrap th,
.rich-table-wrap thead td,
.rich-table-wrap table:not(:has(th)):not(:has(thead)) tr:first-child td {
  background: var(--jt-teal) !important;
  color: #fff !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.005em;
  text-align: start !important;
  padding: 0.72rem 1rem !important;
  border: 0 !important;
  vertical-align: middle !important;
}

/* ---- body cells ---- */
.rich-table-wrap td {
  padding: 0.62rem 1rem !important;
  border: 0 !important;
  border-bottom: 1px solid var(--jt-rowline) !important;
  background: transparent !important;
  color: var(--jt-ink) !important;
  font-size: 0.95rem !important;
  font-weight: 400 !important;
  vertical-align: middle !important;
}

/* column dividers (vertical) — teal between body columns, a light tint
   between the teal header columns; never on the last column of a row */
.rich-table-wrap td:not(:last-child) {
  border-inline-end: 1px solid var(--jt-colline) !important;
}
.rich-table-wrap th:not(:last-child),
.rich-table-wrap thead td:not(:last-child),
.rich-table-wrap table:not(:has(th)):not(:has(thead)) tr:first-child td:not(:last-child) {
  border-inline-end: 1px solid rgba(255, 255, 255, 0.22) !important;
}

/* zebra + hover, scoped to body rows so the header stays teal */
.rich-table-wrap tbody tr:nth-child(even) td {
  background: var(--jt-zebra) !important;
}
.rich-table-wrap tbody tr:hover td {
  background: var(--jt-hover) !important;
}

/* the wrapper border closes the grid — drop the last row's hairline */
.rich-table-wrap tbody tr:last-child td {
  border-bottom: 0 !important;
}

/* links inside tables keep the brand treatment, not pasted blue */
.rich-table-wrap a {
  color: var(--jt-teal) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.rich-table-wrap a:hover { color: var(--jinan-gold-dark, #c77f2a) !important; }

/* override pasted inline font sizing/colour on inner spans/fonts too */
.rich-table-wrap td font,
.rich-table-wrap td span,
.rich-table-wrap th font,
.rich-table-wrap th span {
  font-family: inherit !important;
  color: inherit !important;
  background: transparent !important;
}

/* CKEditor sometimes wraps tables in <figure class="table"> — neutralise
   its margin so we don't double up with the wrapper. */
figure.table { margin: 0 !important; max-width: 100% !important; }

/* tighten on small screens; the wrapper scrolls horizontally if needed */
@media (max-width: 575.98px) {
  .rich-table-wrap th,
  .rich-table-wrap thead td { padding: 0.55rem 0.72rem !important; }
  .rich-table-wrap td { padding: 0.5rem 0.72rem !important; font-size: 0.9rem !important; }
}