/* ============================================================
   FLOW3D 2026 — COMPONENTS
   /assets/css/components.css

   Depends on: tokens.css

   Sections:
   1.  Tables
   2.  Accordions
   3.  Cards
   4.  Images
   5.  Icons
   6.  Badges & Labels
   7.  Dividers
   8.  Elementor Widget Overrides
   ============================================================ */


/* ------------------------------------------------------------
   1. TABLES
   ------------------------------------------------------------ */

table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--fs-font);
  font-size: var(--fs-font-size-base);
  color: var(--fs-color-text);
  margin-bottom: var(--fs-space-md);
}

/* Header row */
table thead tr {
  background-color: var(--fs-color-primary);
}

table thead th {
  font-family: var(--fs-font);
  font-size: var(--fs-font-size-sm);
  font-weight: var(--fs-font-weight-bold);
  color: var(--fs-color-page-bg);
  padding: var(--fs-space-sm) var(--fs-space-md);
  text-align: left;
  border-bottom: none;
}

/* Body rows */
table tbody tr {
  background-color: var(--fs-color-page-bg);
  border-bottom: 1px solid var(--fs-color-field-bg);
  transition: background-color var(--fs-transition-base);
}

table tbody tr:hover {
  background-color: var(--fs-color-table-hover);
}

table tbody td {
  padding: var(--fs-space-sm) var(--fs-space-md);
  font-size: var(--fs-font-size-base);
  color: var(--fs-color-text);
  border-bottom: 1px solid var(--fs-color-field-bg);
}

/* Zebra striping — optional, apply .fs-table-striped to table */
.fs-table-striped tbody tr:nth-child(even) {
  background-color: var(--fs-color-field-bg);
}

/* Responsive table wrapper */
.fs-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: var(--fs-space-md);
}

.fs-table-wrap table {
  margin-bottom: 0;
  min-width: 600px;
}


/* ------------------------------------------------------------
   2. ACCORDIONS
   ------------------------------------------------------------ */

/* Accordion container */
.fs-accordion,
.elementor-accordion {
  border-radius: var(--fs-radius);
  overflow: hidden;
  margin-bottom: var(--fs-space-md);
}

/* Accordion item */
.fs-accordion-item,
.elementor-accordion-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.fs-accordion-item:last-child,
.elementor-accordion-item:last-child {
  border-bottom: none;
}

/* Accordion header — closed state */
.fs-accordion-header,
.elementor-tab-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--fs-color-dark);
  color: var(--fs-color-field-bg);
  padding: var(--fs-space-sm) var(--fs-space-md);
  font-family: var(--fs-font);
  font-size: var(--fs-font-size-base);
  font-weight: var(--fs-font-weight-semibold);
  cursor: pointer;
  transition:
    background-color var(--fs-transition-base),
    color var(--fs-transition-base);
  user-select: none;
}

.fs-accordion-header:hover,
.elementor-tab-title:hover {
  background-color: var(--fs-color-primary);
  color: var(--fs-color-page-bg);
}

/* Accordion header — open/active state */
.fs-accordion-item.is-open .fs-accordion-header,
.elementor-tab-title.elementor-active {
  background-color: var(--fs-color-primary);
  color: var(--fs-color-page-bg);
}

/* Accordion icon — plus/minus */
.fs-accordion-icon,
.elementor-accordion-icon {
  color: var(--fs-color-page-bg);
  font-size: 1.25rem;
  line-height: 1;
  transition: transform var(--fs-transition-base);
  flex-shrink: 0;
  margin-left: var(--fs-space-sm);
}

/* Rotate icon when open */
.fs-accordion-item.is-open .fs-accordion-icon {
  transform: rotate(45deg);          /* + becomes × */
}

/* Accordion content panel */
.fs-accordion-content,
.elementor-tab-content {
  background-color: var(--fs-color-page-bg);
  padding: var(--fs-space-md);
  font-family: var(--fs-font);
  font-size: var(--fs-font-size-base);
  line-height: var(--fs-line-height-base);
  color: var(--fs-color-text);
  display: none;
}

.fs-accordion-item.is-open .fs-accordion-content,
.elementor-tab-content.elementor-active {
  display: block;
}


/* ------------------------------------------------------------
   3. CARDS
   ------------------------------------------------------------ */

.fs-card {
  background-color: var(--fs-color-page-bg);
  border: 1px solid var(--fs-color-field-bg);
  border-radius: var(--fs-radius);
  overflow: hidden;
  transition: box-shadow var(--fs-transition-base);
}

.fs-card:hover {
  box-shadow: 0 4px 16px rgba(28, 91, 94, 0.12);
}

/* Card image */
.fs-card-image {
  width: 100%;
  aspect-ratio: 4 / 3;               /* card image ratio per design spec */
  object-fit: cover;
  border-radius: 0;                   /* image inside card — no radius */
  display: block;
}

/* Card body */
.fs-card-body {
  padding: var(--fs-space-md);
}

/* Card title */
.fs-card-title {
  font-family: var(--fs-font);
  font-size: var(--fs-font-size-h5);
  font-weight: var(--fs-font-weight-semibold);
  color: var(--fs-color-text);
  margin-top: 0;
  margin-bottom: var(--fs-space-xs);
  line-height: var(--fs-line-height-h5);
}

/* Card text */
.fs-card-text {
  font-size: var(--fs-font-size-base);
  color: var(--fs-color-text-muted);
  line-height: var(--fs-line-height-base);
  margin-bottom: var(--fs-space-md);
}

/* Card footer */
.fs-card-footer {
  padding: var(--fs-space-sm) var(--fs-space-md);
  border-top: 1px solid var(--fs-color-field-bg);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Dark card variant */
.fs-card-dark {
  background-color: var(--fs-color-dark);
  border-color: transparent;
}

.fs-card-dark .fs-card-title {
  color: var(--fs-color-page-bg);
}

.fs-card-dark .fs-card-text {
  color: var(--fs-color-field-bg);
}

.fs-card-dark .fs-card-footer {
  border-top-color: rgba(255, 255, 255, 0.08);
}


/* ------------------------------------------------------------
   4. IMAGES
   ------------------------------------------------------------ */

/* Base image styles — applied globally in style.css reset.
   Aspect ratio wrappers for CSS-controlled ratios. */

/* Hero / banner — 3:1 */
.fs-img-hero {
  width: 100%;
  aspect-ratio: 3 / 1;
  object-fit: cover;
  border-radius: var(--fs-radius);
  display: block;
}

/* Card image — 4:3 */
.fs-img-card {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--fs-radius);
  display: block;
}

/* Thumbnail — 1:1 */
.fs-img-thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--fs-radius);
  display: block;
}

/* No radius override — for logos, icons, UI images */
.fs-img-flat {
  border-radius: 0;
}


/* ------------------------------------------------------------
   5. ICONS
   Duotone style per design spec.
   Outline: primary, Fill: secondary at ~30% opacity.
   ------------------------------------------------------------ */

.fs-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* SVG duotone — outline layer */
.fs-icon svg .icon-outline,
.fs-icon svg [stroke] {
  stroke: var(--fs-color-primary);
  stroke-width: 2px;
  fill: none;
}

/* SVG duotone — fill layer */
.fs-icon svg .icon-fill,
.fs-icon svg [fill]:not([fill="none"]) {
  fill: var(--fs-color-secondary);
  opacity: 0.3;
}


/* ------------------------------------------------------------
   6. BADGES & LABELS
   Not in the design doc — added as a likely-needed component
   for product tags, status indicators, category labels.
   ------------------------------------------------------------ */

.fs-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--fs-space-xs);
  border-radius: var(--fs-radius-sm);
  font-family: var(--fs-font);
  font-size: var(--fs-font-size-sm);
  font-weight: var(--fs-font-weight-semibold);
  line-height: 1.4;
  white-space: nowrap;
}

/* Primary badge */
.fs-badge-primary {
  background-color: var(--fs-color-primary);
  color: var(--fs-color-page-bg);
}

/* Secondary badge */
.fs-badge-secondary {
  background-color: var(--fs-color-field-bg);
  color: var(--fs-color-text);
}

/* Accent badge */
.fs-badge-accent {
  background-color: var(--fs-color-accent);
  color: var(--fs-color-page-bg);
}

/* Outlined badge */
.fs-badge-outline {
  background-color: transparent;
  color: var(--fs-color-primary);
  border: 1px solid var(--fs-color-border);
}


/* ------------------------------------------------------------
   7. DIVIDERS
   ------------------------------------------------------------ */

hr,
.fs-divider {
  border: none;
  border-top: 1px solid var(--fs-color-field-bg);
  margin: var(--fs-space-lg) 0;
}

/* Accent divider */
.fs-divider-accent {
  border-top-color: var(--fs-color-accent);
  border-top-width: 2px;
}

/* Dark divider — for use on light sections */
.fs-divider-dark {
  border-top-color: var(--fs-color-border);
}


/* ------------------------------------------------------------
   8. ELEMENTOR WIDGET OVERRIDES
   ------------------------------------------------------------ */

/* --- Accordion widget --- */
.elementor-widget-accordion .elementor-accordion-item {
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0;
}

.elementor-widget-accordion .elementor-accordion-item:first-child {
  border-radius: var(--fs-radius) var(--fs-radius) 0 0;
}

.elementor-widget-accordion .elementor-accordion-item:last-child {
  border-radius: 0 0 var(--fs-radius) var(--fs-radius);
  border-bottom: none;
}

.elementor-widget-accordion .elementor-tab-title {
  background-color: var(--fs-color-dark);
  color: var(--fs-color-field-bg);
  padding: var(--fs-space-sm) var(--fs-space-md);
  font-family: var(--fs-font);
  font-weight: var(--fs-font-weight-semibold);
}

.elementor-widget-accordion .elementor-tab-title:hover,
.elementor-widget-accordion .elementor-tab-title.elementor-active {
  background-color: var(--fs-color-primary);
  color: var(--fs-color-page-bg);
}

.elementor-widget-accordion .elementor-accordion-icon {
  color: var(--fs-color-page-bg);
}

.elementor-widget-accordion .elementor-tab-content {
  background-color: var(--fs-color-page-bg);
  color: var(--fs-color-text);
  font-family: var(--fs-font);
  padding: var(--fs-space-md);
}

/* --- Image widget --- */
.elementor-widget-image img {
  border-radius: var(--fs-radius);
}

.elementor-widget-image.fs-img-flat img {
  border-radius: 0;
}

/* --- Divider widget --- */
.elementor-widget-divider .elementor-divider-separator {
  border-top-color: var(--fs-color-field-bg);
}

/* --- Table (if using a table plugin or HTML widget) --- */
.elementor-widget-text-editor table thead tr {
  background-color: var(--fs-color-primary);
}

.elementor-widget-text-editor table thead th {
  color: var(--fs-color-page-bg);
  font-weight: var(--fs-font-weight-bold);
  padding: var(--fs-space-sm) var(--fs-space-md);
}

.elementor-widget-text-editor table tbody tr {
  background-color: var(--fs-color-page-bg);
  border-bottom: 1px solid var(--fs-color-field-bg);
  transition: background-color var(--fs-transition-base);
}

.elementor-widget-text-editor table tbody tr:hover {
  background-color: var(--fs-color-table-hover);
}

.elementor-widget-text-editor table tbody td {
  padding: var(--fs-space-sm) var(--fs-space-md);
  color: var(--fs-color-text);
}