/* ==========================================================================
   Webpresso Table Builder – frontend output
   --------------------------------------------------------------------------
   Every colour and spacing value runs through a CSS variable on .ccm-tbl.
   A theme can override them globally without overriding this file:

       .ccm-tbl{ --tbl-line: #ddd; --tbl-head-bg: transparent; }

   Breakpoint: 767.98px (Bootstrap md).
   Icon in the scroll hint: Phosphor Icons (MIT).
   ========================================================================== */

:where(.ccm-tbl){
  --tbl-line:#e4e7eb;
  --tbl-line-strong:#c3c9d1;
  --tbl-head-fg:#1f2933;
  --tbl-head-bg:#f5f7f9;
  --tbl-zebra:#f7f8fa;
  --tbl-label:#6b7684;
  --tbl-radius:.5rem;
  --tbl-pad-y:.7rem;
  --tbl-pad-x:.9rem;
  /* Card layout on small screens – every preset overrides these */
  --tbl-card-border:0;
  --tbl-card-top:2px solid var(--tbl-line-strong);
  --tbl-card-radius:0;
  --tbl-card-bg:transparent;
  --tbl-card-pad:.5rem 0 .7rem;
  --tbl-card-cell-px:0;
  --tbl-card-cell-line:0;
}

/* The theme may set the outer margin; the maximum width is a block
   setting and has to win. */
.ccm-tbl.ccm-tbl{margin:0 0 1.5rem;font-variant-numeric:tabular-nums;
  max-width:var(--tbl-maxw,none) !important}
/* Caption: only the body-text variant is tinted and scaled down. As h2–h5
   the theme's heading styles apply on purpose – nothing but the spacing is
   overridden here. */
.ccm-tbl.ccm-tbl .ccm-tbl__caption{margin:0 0 .6rem}
.ccm-tbl.ccm-tbl p.ccm-tbl__caption{font-size:.85rem;color:var(--tbl-label)}
.ccm-tbl.ccm-tbl .ccm-tbl__scroller{position:relative}
.ccm-tbl.ccm-tbl table{width:100% !important;border-collapse:collapse !important;background:transparent !important}
.ccm-tbl.ccm-tbl th,
.ccm-tbl.ccm-tbl td{padding:var(--tbl-pad-y) var(--tbl-pad-x) !important;text-align:left;vertical-align:top !important;border:0 !important;
  overflow-wrap:break-word}
/* Only when at least one column width is set. Without a fixed table layout
   the colgroup values would be mere wishes that the browser overrules
   depending on the content. */
.ccm-tbl.ccm-tbl--fixed table{table-layout:fixed !important}
.ccm-tbl.ccm-tbl thead th{font-weight:600;color:var(--tbl-head-fg)}
.ccm-tbl.ccm-tbl tbody th{font-weight:600}
.ccm-tbl.ccm-tbl a{color:inherit;text-decoration:underline;text-underline-offset:.15em}
.ccm-tbl.ccm-tbl .ccm-tbl__hint{display:none !important;font-size:.78rem;color:var(--tbl-label);margin:.45rem 0 0}
.ccm-tbl.ccm-tbl .ccm-tbl__hint::before{content:'';display:inline-block;width:1em;height:1em;vertical-align:-.15em;
  margin-right:.4em;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M216.49%2C184.49l-32%2C32a12%2C12%2C0%2C0%2C1-17-17L179%2C188H48a12%2C12%2C0%2C0%2C1%2C0-24H179l-11.52-11.51a12%2C12%2C0%2C0%2C1%2C17-17l32%2C32A12%2C12%2C0%2C0%2C1%2C216.49%2C184.49Zm-145-64a12%2C12%2C0%2C0%2C0%2C17-17L77%2C92H208a12%2C12%2C0%2C0%2C0%2C0-24H77L88.49%2C56.49a12%2C12%2C0%2C0%2C0-17-17l-32%2C32a12%2C12%2C0%2C0%2C0%2C0%2C17Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center/contain;
  mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M216.49%2C184.49l-32%2C32a12%2C12%2C0%2C0%2C1-17-17L179%2C188H48a12%2C12%2C0%2C0%2C1%2C0-24H179l-11.52-11.51a12%2C12%2C0%2C0%2C1%2C17-17l32%2C32A12%2C12%2C0%2C0%2C1%2C216.49%2C184.49Zm-145-64a12%2C12%2C0%2C0%2C0%2C17-17L77%2C92H208a12%2C12%2C0%2C0%2C0%2C0-24H77L88.49%2C56.49a12%2C12%2C0%2C0%2C0-17-17l-32%2C32a12%2C12%2C0%2C0%2C0%2C0%2C17Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center/contain}
.ccm-tbl.ccm-tbl--compact{--tbl-pad-y:.4rem;--tbl-pad-x:.6rem}
.ccm-tbl.ccm-tbl--flush th:first-child,
.ccm-tbl.ccm-tbl--flush td:first-child{padding-left:0 !important}
.ccm-tbl.ccm-tbl--flush th:last-child,
.ccm-tbl.ccm-tbl--flush td:last-child{padding-right:0 !important}

/* ============ PRESETS ============ */

/* 1) lines – horizontal rules only (default) */
.ccm-tbl.ccm-tbl--p-lines thead th{border-bottom:1px solid var(--tbl-line-strong) !important}
.ccm-tbl.ccm-tbl--p-lines tbody tr{border-bottom:1px solid var(--tbl-line)}
.ccm-tbl.ccm-tbl--p-lines tbody tr:last-child{border-bottom:0 !important}

/* 2) quiet – a single rule below the header row */
.ccm-tbl.ccm-tbl--p-quiet thead th{border-bottom:1px solid var(--tbl-line-strong) !important}
.ccm-tbl.ccm-tbl--p-quiet tbody tr:last-child{border-bottom:1px solid var(--tbl-line) !important}
.ccm-tbl.ccm-tbl--p-quiet{--tbl-pad-y:.55rem}

/* 3) open – no rules at all, header row as a small label */
.ccm-tbl.ccm-tbl--p-open thead th{
  font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--tbl-label);font-weight:600;padding-bottom:.3rem !important}
.ccm-tbl.ccm-tbl--p-open{--tbl-pad-y:.4rem}
.ccm-tbl.ccm-tbl--p-open{--tbl-card-top:1px solid var(--tbl-line)}

/* 4) zebra – stripes instead of rules */
.ccm-tbl.ccm-tbl--p-zebra thead th{border-bottom:1px solid var(--tbl-line-strong) !important}
.ccm-tbl.ccm-tbl--p-zebra tbody tr:nth-child(odd){background:var(--tbl-zebra) !important}
.ccm-tbl.ccm-tbl--p-zebra{--tbl-card-border:0;--tbl-card-top:0;--tbl-card-bg:var(--tbl-zebra);
  --tbl-card-radius:var(--tbl-radius);--tbl-card-pad:.2rem 0;--tbl-card-cell-px:var(--tbl-pad-x)}

/* 5) card – outer border with radius, horizontal rules inside */
.ccm-tbl.ccm-tbl--p-card .ccm-tbl__scroller{border:1px solid var(--tbl-line) !important;border-radius:var(--tbl-radius) !important;overflow:hidden !important}
.ccm-tbl.ccm-tbl--p-card thead th{background:var(--tbl-head-bg) !important;border-bottom:1px solid var(--tbl-line) !important}
.ccm-tbl.ccm-tbl--p-card tbody tr+tr{border-top:1px solid var(--tbl-line) !important}
.ccm-tbl.ccm-tbl--p-card{--tbl-card-border:1px solid var(--tbl-line);--tbl-card-top:1px solid var(--tbl-line);
  --tbl-card-radius:var(--tbl-radius);--tbl-card-bg:#fff;--tbl-card-pad:0;--tbl-card-cell-px:var(--tbl-pad-x);
  --tbl-card-cell-line:1px solid var(--tbl-line)}

/* 6) grid – the classic full grid */
.ccm-tbl.ccm-tbl--p-grid th,
.ccm-tbl.ccm-tbl--p-grid td{border:1px solid var(--tbl-line) !important}
.ccm-tbl.ccm-tbl--p-grid thead th{background:var(--tbl-head-bg) !important}
.ccm-tbl.ccm-tbl--p-grid{--tbl-card-border:1px solid var(--tbl-line);--tbl-card-top:1px solid var(--tbl-line);
  --tbl-card-radius:0;--tbl-card-bg:#fff;--tbl-card-pad:0;--tbl-card-cell-px:var(--tbl-pad-x);
  --tbl-card-cell-line:1px solid var(--tbl-line)}

/* ============ RESPONSIVE ============ */
@media (max-width:767.98px){
  /* A) horizontal scrolling */
  .ccm-tbl.ccm-tbl--scroll .ccm-tbl__scroller{overflow-x:auto !important;-webkit-overflow-scrolling:touch}
  .ccm-tbl.ccm-tbl--scroll table{min-width:34rem}
  .ccm-tbl.ccm-tbl--scroll .ccm-tbl__hint{display:block !important}

  /* B + C) shared card layout */
  .ccm-tbl.ccm-tbl--stack table,
.ccm-tbl.ccm-tbl--stack tbody,
.ccm-tbl.ccm-tbl--stack tr,
.ccm-tbl.ccm-tbl--stack th,
.ccm-tbl.ccm-tbl--stack td,
.ccm-tbl.ccm-tbl--grouped table,
.ccm-tbl.ccm-tbl--grouped tbody,
.ccm-tbl.ccm-tbl--grouped tr,
.ccm-tbl.ccm-tbl--grouped th,
.ccm-tbl.ccm-tbl--grouped td{display:block !important;width:auto !important}
  .ccm-tbl.ccm-tbl--stack thead,
.ccm-tbl.ccm-tbl--grouped thead{display:none !important}
  .ccm-tbl.ccm-tbl--stack colgroup,
.ccm-tbl.ccm-tbl--grouped colgroup{display:none !important}
  .ccm-tbl.ccm-tbl--stack table,
.ccm-tbl.ccm-tbl--grouped table{table-layout:auto !important}
  .ccm-tbl.ccm-tbl--stack .ccm-tbl__scroller,
.ccm-tbl.ccm-tbl--grouped .ccm-tbl__scroller{border:0 !important;border-radius:0 !important;overflow:visible !important}
  .ccm-tbl.ccm-tbl--stack tbody tr,
.ccm-tbl.ccm-tbl--grouped tbody tr{
    border:var(--tbl-card-border);
    border-top:var(--tbl-card-top);
      border-bottom: 0;
    border-radius:var(--tbl-card-radius);
    background:var(--tbl-card-bg);
    padding:var(--tbl-card-pad);
    overflow:hidden
  }
.ccm-tbl.ccm-tbl--stack tbody tr:first-child {
    border-top: 0;
}
  .ccm-tbl.ccm-tbl--stack tbody tr:last-child,
.ccm-tbl.ccm-tbl--grouped tbody tr:last-child{
    margin-bottom:0}
  /* Block class twice: in the card layout no theme rule may leak cell
     borders through. Separation is the cards' job alone here. */
  .ccm-tbl.ccm-tbl.ccm-tbl--stack tbody tr>*,
.ccm-tbl.ccm-tbl.ccm-tbl--grouped tbody tr>*{
    border:0 !important;background:transparent !important;
    padding-left:var(--tbl-card-cell-px) !important;padding-right:var(--tbl-card-cell-px) !important;
      padding-bottom: 0 !important;
  }

  /* B) stacked */
  .ccm-tbl.ccm-tbl--stack tbody tr>*:first-child{font-weight:300;padding-bottom:.15rem !important; padding-top: 0 !important}
  .ccm-tbl.ccm-tbl--stack tbody tr>*+*{padding-top:0 !important}

  /* C) grouped – cell rules only where the card has a border. With the flat
     presets the sections already separate enough; extra rules per cell look
     restless on a phone. */
  .ccm-tbl.ccm-tbl.ccm-tbl--grouped tbody tr>*{border-bottom:var(--tbl-card-cell-line) !important}
  .ccm-tbl.ccm-tbl--grouped tbody tr>*:last-child{border-bottom:0 !important}
  .ccm-tbl.ccm-tbl--grouped tbody tr>*[data-label]{display:grid !important;grid-template-columns:minmax(5rem,38%) 1fr !important;gap:.1rem 1rem}
  .ccm-tbl.ccm-tbl--grouped tbody tr>*[data-label]::before{content:attr(data-label);font-weight:600;color:var(--tbl-label)}
  .ccm-tbl.ccm-tbl--grouped.ccm-tbl--cardtitle tbody tr>*:first-child{
    font-weight:600;display:block !important;padding-top:.5rem !important;padding-bottom:.5rem !important}
  .ccm-tbl.ccm-tbl--grouped.ccm-tbl--cardtitle tbody tr>*:first-child::before{content:none}
  .ccm-tbl.ccm-tbl--p-card.ccm-tbl--grouped.ccm-tbl--cardtitle tbody tr>*:first-child,
.ccm-tbl.ccm-tbl--p-grid.ccm-tbl--grouped.ccm-tbl--cardtitle tbody tr>*:first-child{background:var(--tbl-head-bg) !important}
}