/**
 * @author    Axelweb <contact@axelweb.fr>
 * @copyright 2026 Axelweb
 * @license   http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
 */

/* AwTableBuilder - Front Office Styles
 *
 */

.awtb {
  --awtb-green-50: #bdc7bd;
  --awtb-green-100: #9eafa2;
  --awtb-green-500: #215237;
  --awtb-green-600: #023b1c;
  --awtb-neutral-50: #fbf5f3;
  --awtb-neutral-100: #dcd8d6;
  --awtb-neutral-400: #626364;
  --awtb-neutral-600: #060b0e;

  --awtb-surface: #fff;
  --awtb-border: var(--awtb-green-100);
  --awtb-border-width: 2px;
  --awtb-divider: rgba(158, 175, 162, 0.45);
  --awtb-head-bg: var(--awtb-green-50);
  --awtb-head-color: var(--awtb-green-600);
  --awtb-text: var(--awtb-neutral-600);
  --awtb-link: var(--awtb-green-500);
  --awtb-radius: 16px;
  --awtb-image-radius: 10px;
  --awtb-image-max: 400px;
  --awtb-product-thumb: 72px;
  --awtb-cell-padding: 16px 18px;
  --awtb-font-heading: 'Montserrat', sans-serif;
  /* Wide tables (3+ columns) never squeeze a column below this width */
  --awtb-min-column-width: 200px;
  --awtb-scrollbar-track: var(--awtb-neutral-100);
  --awtb-scrollbar-thumb: var(--awtb-green-500);

  margin: 32px 0;
  color: var(--awtb-text);
  text-align: left;
}

/*
 * Scroll wrapper
 * The scrollbar sits below the card, outside the rounded border.
 */

.awtb__scroll {
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 10px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

.awtb__scroll:focus-visible {
  outline: 2px solid var(--awtb-green-500);
  outline-offset: 4px;
  border-radius: var(--awtb-radius);
}

/* WebKit / Blink: thick rounded scrollbar */
.awtb__scroll::-webkit-scrollbar {
  height: 10px;
}

.awtb__scroll::-webkit-scrollbar-track {
  background: var(--awtb-scrollbar-track);
  border-radius: 999px;
}

.awtb__scroll::-webkit-scrollbar-thumb {
  background: var(--awtb-scrollbar-thumb);
  border-radius: 999px;
}

/* Firefox only: scrollbar-color would disable ::-webkit-scrollbar on Blink */
@supports not selector(::-webkit-scrollbar) {
  .awtb__scroll {
    scrollbar-width: auto;
    scrollbar-color: var(--awtb-scrollbar-thumb) var(--awtb-scrollbar-track);
  }
}

/*
 * Table card
 */

.awtb__table {
  width: 100%;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  background: var(--awtb-surface);
  border: var(--awtb-border-width) solid var(--awtb-border);
  border-radius: var(--awtb-radius);
  font-size: 15px;
  line-height: 1.55;
}

/* 3+ columns: keep columns readable, let the wrapper scroll instead */
.awtb--wide .awtb__table {
  min-width: calc(var(--awtb-columns, 3) * var(--awtb-min-column-width));
}

.awtb .awtb__cell {
  padding: var(--awtb-cell-padding);
  border: 0;
  border-right: 1px solid var(--awtb-divider);
  border-bottom: 1px solid var(--awtb-divider);
  text-align: left;
  vertical-align: middle;
  overflow-wrap: anywhere;
}

.awtb .awtb__cell:last-child {
  border-right: 0;
}

.awtb__table > :last-child > tr:last-child > .awtb__cell {
  border-bottom: 0;
}

/* Rounded corners follow the outer border, whatever the first/last row group is */
.awtb__table > :first-child > tr:first-child > .awtb__cell:first-child {
  border-top-left-radius: calc(var(--awtb-radius) - var(--awtb-border-width));
}

.awtb__table > :first-child > tr:first-child > .awtb__cell:last-child {
  border-top-right-radius: calc(var(--awtb-radius) - var(--awtb-border-width));
}

.awtb__table > :last-child > tr:last-child > .awtb__cell:first-child {
  border-bottom-left-radius: calc(var(--awtb-radius) - var(--awtb-border-width));
}

.awtb__table > :last-child > tr:last-child > .awtb__cell:last-child {
  border-bottom-right-radius: calc(var(--awtb-radius) - var(--awtb-border-width));
}

/* Header */
.awtb .awtb__cell--head {
  background: var(--awtb-head-bg);
  color: var(--awtb-head-color);
  font-family: var(--awtb-font-heading);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.4;
  border-right-color: rgba(2, 59, 28, 0.15);
  border-bottom-color: var(--awtb-border);
}

/*
 * Cell content (TinyMCE output). Resets the theme's .aw-cms-content
 * rhythm, which is tuned for long-form text, not for compact cells.
 */

.awtb .awtb__cell > * {
  margin: 0 0 10px;
}

.awtb .awtb__cell > :last-child {
  margin-bottom: 0;
}

.awtb .awtb__cell p {
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

/* TinyMCE leaves empty paragraphs behind images */
.awtb .awtb__cell p:empty {
  display: none;
}

.awtb .awtb__cell h2,
.awtb .awtb__cell h3,
.awtb .awtb__cell h4,
.awtb .awtb__cell h5,
.awtb .awtb__cell h6 {
  margin-top: 0;
  margin-bottom: 8px;
  font-family: var(--awtb-font-heading);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--awtb-green-600);
}

.awtb .awtb__cell ul,
.awtb .awtb__cell ol {
  padding-left: 18px;
  line-height: inherit;
}

.awtb .awtb__cell ul {
  list-style: disc;
}

.awtb .awtb__cell ol {
  list-style: decimal;
}

.awtb .awtb__cell li {
  margin: 4px 0;
}

.awtb .awtb__cell li::marker {
  color: var(--awtb-green-500);
}

.awtb .awtb__cell strong {
  color: var(--awtb-green-600);
}

.awtb .awtb__cell a {
  color: var(--awtb-link);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: text-decoration-color 0.2s ease;
}

.awtb .awtb__cell a:hover,
.awtb .awtb__cell a:focus-visible {
  color: var(--awtb-green-600);
  text-decoration-color: currentColor;
}

/*
 * Images: one rule for every table. Square crop, full cell width,
 * capped so a single-column table does not become a hero banner.
 * TinyMCE width/height attributes are ignored on purpose.
 */
.awtb .awtb__cell img {
  display: block;
  width: 100%;
  max-width: var(--awtb-image-max);
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--awtb-image-radius);
  box-shadow: none;
  background: var(--awtb-neutral-50);
}

/*
 * Product card: thumbnail + name, linking to the product page.
 * Rendered from views/templates/hook/product-card.tpl
 */

.awtb .awtb__cell .awtb-product {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 6px 0;
  padding: 8px;
  border: 1px solid var(--awtb-divider);
  border-radius: var(--awtb-image-radius);
  background: var(--awtb-neutral-50);
  color: var(--awtb-green-600);
  font-family: var(--awtb-font-heading);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  text-decoration: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.awtb .awtb__cell .awtb-product:hover,
.awtb .awtb__cell .awtb-product:focus-visible {
  border-color: var(--awtb-green-500);
  box-shadow: 0 2px 10px rgba(2, 59, 28, 0.12);
  color: var(--awtb-green-600);
  text-decoration: none;
}

.awtb .awtb__cell .awtb-product:focus-visible {
  outline: 2px solid var(--awtb-green-500);
  outline-offset: 2px;
}

.awtb .awtb__cell .awtb-product__thumb {
  flex: 0 0 var(--awtb-product-thumb);
  width: var(--awtb-product-thumb);
  height: var(--awtb-product-thumb);
  border-radius: 8px;
  overflow: hidden;
  background: var(--awtb-surface);
}

/* Overrides the generic cell image rule (full width, capped, rounded) */
.awtb .awtb__cell .awtb-product__image {
  width: 100%;
  max-width: none;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
  background: var(--awtb-surface);
}

.awtb .awtb__cell .awtb-product__name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-width: 0;
}

/*
 * Swipe hint, shown whenever the table overflows
 * (class toggled by awtablebuilder.js)
 */

.awtb__hint {
  display: none;
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--awtb-neutral-400);
}

.awtb--overflow .awtb__hint {
  display: block;
}

.awtb__hint-arrow {
  display: inline-block;
  margin-left: 4px;
  animation: awtb-nudge 1.4s ease-in-out infinite;
}

@keyframes awtb-nudge {
  0%,
  100% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(4px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .awtb__hint-arrow {
    animation: none;
  }
}

/*
 * Small screens
 */

@media (max-width: 640px) {
  .awtb {
    --awtb-cell-padding: 12px 14px;
    --awtb-radius: 12px;
    margin: 24px 0;
  }

  .awtb__table {
    font-size: 14px;
  }
}