/* ============================================================
   Draqee — mobile-scrollable CKEditor tables (frontend)
   Applies to every <figure class="table"> that CKEditor outputs:
   blog posts, tool pages, About page, and any other CMS page.
   ============================================================ */
figure.table {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
  figure.table {
    display: block !important;
    width: auto !important;          /* beats inline width:900px from Table Properties */
    max-width: 100% !important;
    margin-left: 0 !important;       /* browser default figure margin (40px) pushed tables off-screen */
    margin-right: 0 !important;
    overflow-x: auto !important;
  }
  figure.table > table {
    display: table !important;
    width: 100% !important;
    max-width: none !important;      /* let the table grow wider than the screen, the figure scrolls */
    overflow: visible !important;
    table-layout: auto !important;
  }
  figure.table td,
  figure.table th {
    min-width: 110px;                /* stops columns being squashed to 1 letter per line */
    overflow-wrap: break-word;
  }
}

/* ============================================================
   Draqee — default striped table style (frontend)
   Every CKEditor table: gray bold header row + alternating strips.
   Light theme = light grays, dark theme (html.dark) = dark strips.
   A background set per cell in CKEditor (Cell properties) still wins,
   because those cells are skipped by :not([style*="background"]).
   ============================================================ */
html body figure.table table {
  border-collapse: separate;   /* needed for rounded corners */
  border-spacing: 0;
}

/* Rounded corners (12px): first row top corners, last row bottom corners */
html body figure.table table > thead > tr:first-child > *:first-child,
html body figure.table table > tbody:first-child > tr:first-child > *:first-child { border-top-left-radius: 12px; }
html body figure.table table > thead > tr:first-child > *:last-child,
html body figure.table table > tbody:first-child > tr:first-child > *:last-child { border-top-right-radius: 12px; }
html body figure.table table > tbody > tr:last-child > *:first-child { border-bottom-left-radius: 12px; }
html body figure.table table > tbody > tr:last-child > *:last-child { border-bottom-right-radius: 12px; }

html body figure.table table th,
html body figure.table table td {
  border: 0;
  padding: 12px 16px;
  text-align: left;
  vertical-align: middle;
}

/* ---- Light theme ---- */
html body figure.table table th:not([style*="background"]) {
  background: #e4e4e4;
  color: #111111;
  font-weight: 700;
}
html body figure.table table tbody tr:nth-child(odd) td:not([style*="background"]) {
  background: #f2f2f2;
}
html body figure.table table tbody tr:nth-child(even) td:not([style*="background"]) {
  background: #ffffff;
}

/* ---- Dark theme ---- */
html.dark body figure.table table th:not([style*="background"]) {
  background: #262b34;
  color: #ffffff;
}
html.dark body figure.table table tbody tr:nth-child(odd) td:not([style*="background"]) {
  background: #171a21;
}
html.dark body figure.table table tbody tr:nth-child(even) td:not([style*="background"]) {
  background: #0e1016;
}