/* ============================================================
   CRM Customer Table — flexible component
   Strategy: variable cells. Mobile uses label/value auto-flow
   driven by data-label on each td (no fixed grid-areas).

   Add/remove a column = add/remove <th> + <td data-label="X">
   Mobile re-flows automatically.
   ============================================================ */

/* Container */
.cust-card{
  background:transparent;
  width:100%;
}
.cust-scroll{overflow:visible;}  /* no horizontal scroll — narrow viewports switch to card layout instead */

/* Table base */
.cust-table{
  width:100%;
  text-align:right;
  font-size:var(--font-size-body-small);
  border-collapse:separate;
  border-spacing:0 var(--space-sm);
}

/* ============================================================
   DESKTOP — 2-card row pattern
   Card 1 = checkbox (separate). Card 2 = all remaining cells.
   Border logic relies on DOM order, not class names:
   - first td after checkbox → right border + radius (RTL start)
   - last td → left border + radius (RTL end)
   - middle tds → top/bottom only
   ============================================================ */
.cust-table thead tr th,
.cust-table tbody tr td{
  background:#fff;
  border-top:1px solid var(--ta-color-border-subtle);
  border-bottom:1px solid var(--ta-color-border-subtle);
}

/* Outer-right (RTL start) — checkbox: rounded only on the outer (right) side, flat divider on inner (left) */
.cust-table thead tr th.col-checkbox,
.cust-table tbody tr td.col-checkbox{
  border-right:1px solid var(--ta-color-border-subtle);
  border-left:1px solid var(--ta-color-border-subtle);
  border-top-right-radius:var(--space-sm);
  border-bottom-right-radius:var(--space-sm);
  width:48px;
  text-align:center;
}

/* Cell after checkbox — flat (no extra border-right; divider comes from checkbox border-left) */
.cust-table thead tr th.col-checkbox + th,
.cust-table tbody tr td.col-checkbox + td{
  /* inherits top/bottom from base; flat inner edge */
}

/* Outer-left (RTL end) — last DIRECT cell of tr: rounded only on the outer (left) side.
   `>` matters: after JS wraps the data tds inside .cust-data-cluster, col-datetime
   becomes :last-child of that div. Without the child combinator, this rule would
   also style col-datetime and make it look like a separate card start. */
.cust-table thead tr > th:last-child,
.cust-table tbody tr > td:last-child{
  border-left:1px solid var(--ta-color-border-subtle);
  border-top-left-radius:var(--space-sm);
  border-bottom-left-radius:var(--space-sm);
}

/* Header cells */
.cust-table th{
  padding:var(--space-md) var(--space-lg);
  font-family:var(--font-family-app);
  font-weight:var(--font-weight-regular);
  font-size:var(--font-size-caption);
  color:var(--ta-color-text-subtle);
  white-space:nowrap;
  text-align:center;
  height:48px;
}
/* Text-aligned cells — opt-in classes (only override when needed) */
.cust-table th.cell-align-start,
.cust-table td.cell-align-start{text-align:right;}
.cust-table th.cell-align-end,
.cust-table td.cell-align-end{text-align:left;}

/* Sort icon — optional, attach inside <th> */
.ch-sort{
  width:18px;height:18px;flex-shrink:0;
  border-radius:var(--border-radius-full);
  display:inline-flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1.5px;
  color:var(--ta-color-text-subtle);
  vertical-align:middle;margin-inline-start:var(--space-xs);
}
.ch-sort svg{width:10px;height:5px;display:block;}
.cust-table th.is-active .ch-sort{
  background:var(--ta-color-brand-subtle,#e0fbff);
  color:var(--ta-color-text-default);
}

/* Body rows */
.cust-table tbody tr{
  cursor:pointer;
  transition:background .15s;
}
@media (hover: hover){
  .cust-table tbody tr:hover td{background:var(--color-grays-100);}
}
/* Phone card layout — hover lights the whole card, not individual cells.
   Cell tds are transparent (see @media (max-width:840px) below), so the
   tr bg shows through. */
@media (hover: hover) and (max-width:840px){
  .cust-table tbody tr:hover{background:var(--color-grays-100);}
  .cust-table tbody tr:hover td{background:transparent;}
}
.cust-table td{
  padding:var(--space-md) var(--space-lg);
  vertical-align:middle;
  height:64px;
  text-align:center;
}

/* Actions cell — always pinned to end (left in RTL) */
.cust-table th.col-actions,
.cust-table td.col-actions{text-align:end;}

/* Desktop min-widths — ensure each column is wide enough that the SortHeader
   in the thead fits horizontally without wrapping. JS syncs th width = body td width,
   so widening body widens header. */
.cust-table tbody td.col-txn{min-width:100px;}
.cust-table tbody td.col-tickets{min-width:80px;}
.cust-table tbody td.col-amount{min-width:75px;}
.cust-table tbody td.col-datetime{min-width:100px;}
.cust-table tbody td.col-status{min-width:80px;}

/* Right-align sortable columns (RTL natural). Header label ends at the right edge of
   the cell, body content ends at the right edge → they line up on the same axis. */
.cust-table th.col-txn,
.cust-table th.col-tickets,
.cust-table th.col-amount,
.cust-table th.col-datetime,
.cust-table th.col-status,
.cust-table tbody td.col-txn,
.cust-table tbody td.col-tickets,
.cust-table tbody td.col-amount,
.cust-table tbody td.col-datetime,
.cust-table tbody td.col-status{
  text-align:right;
}

/* ============================================================
   Cell content presets (typography/widgets) — composable.
   Use any subset; add new ones without touching layout code.
   ============================================================ */

/* Name + avatar */
.cust-name-cell{
  display:flex;align-items:center;gap:var(--space-md);
  justify-content:flex-start;
  min-width:0;
}
.cust-avatar{
  width:var(--dim-11);height:var(--dim-11);
  flex-shrink:0;
  border-radius:var(--border-radius-full);
  background:#f3f3f3;
  overflow:hidden;
  box-shadow:2px 4px 4px 0 rgba(197,197,197,0.25);
}
.cust-avatar img{width:100%;height:100%;object-fit:cover;display:block;}
.cust-name-text{
  font-family:var(--font-family-app);
  font-weight:var(--font-weight-bold);
  font-size:16px;
  line-height:1.2;
  color:var(--ta-color-text-default);
  /* Wrap to 2 lines so the column doesn't push the table past the viewport
     at tablet widths. 3rd line clips with ellipsis. */
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:break-word;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  line-clamp:2;
  overflow:hidden;
  min-width:0;
}

/* Contact (phone + email stacked) */
.cust-contact-phone{
  font-family:var(--font-family-app);
  font-weight:var(--font-weight-regular);
  font-size:var(--font-size-body-small);
  line-height:1.2;
  color:var(--ta-color-text-default);
}
.cust-contact-email{
  font-family:var(--font-family-app);
  font-weight:var(--font-weight-regular);
  font-size:var(--font-size-body-small);
  line-height:1.2;
  color:var(--ta-color-text-subtle);
}

/* Numeric badge (credits/transactions/tickets) — soft gray fill (matches .cust-txn-chip) */
.cust-credits-badge{
  display:inline-flex;align-items:center;justify-content:center;
  padding:var(--space-xs);
  min-width:var(--dim-6);
  background:var(--color-grays-100);
  color:var(--ta-color-text-default);
  border-radius:var(--border-radius-sm);
  font-family:var(--font-family-app);
  font-weight:var(--font-weight-bold);
  font-size:var(--font-size-body-small);
  line-height:1.2;
}

/* LTV */
.cust-ltv{
  font-family:var(--font-family-app);
  font-weight:var(--font-weight-bold);
  font-size:var(--font-size-body-small);
  color:var(--ta-color-text-default);
}

/* Last active */
.cust-last-active{
  font-family:var(--font-family-app);
  font-weight:var(--font-weight-regular);
  font-size:var(--font-size-body-small);
  color:var(--ta-color-text-default);
}

/* Status pill */
.status-pill{
  display:inline-flex;align-items:center;justify-content:center;
  padding:var(--space-sm);  /* Figma: px-sm py-8 (8px = space-sm both axes) */
  border-radius:5px;        /* Figma: rounded-[5px] — still hardcoded in Figma */
  font-family:var(--font-family-app);
  font-weight:var(--font-weight-bold);  /* Figma: --font-weight/bold */
  font-size:var(--font-size-caption);
  line-height:1.1;
  color:var(--ta-color-text-default);
  white-space:nowrap;
  min-width:41px;  /* Figma: w-[41px] — uniform short-text width, grows for longer */
  height:28px;     /* Figma: h-[28px] */
  box-sizing:border-box;
}
.status-pill.active{background:var(--color-green-200,#d4e468);}
.status-pill.inactive{
  background:rgba(0,0,0,0.08);
  color:var(--ta-color-text-subtle);
}
/* Valid (transactions: "תקינה") — green */
.status-pill.valid{
  background:var(--ta-color-state-success-subtle);
  color:var(--ta-color-state-success-bg);
}
/* Pending / rejected (transactions: "דחויה") — red */
.status-pill.pending{
  background:var(--ta-color-state-error-bg);
  color:var(--ta-color-state-error-main);
}
/* Despair (transactions: "מיואש") — orange/warning */
.status-pill.despair{
  background:var(--ta-color-state-warning-bg);
  color:var(--ta-color-state-warning-main);
}

/* Transaction ID chip — soft gray fill, text-subtle, radius-sm */
.cust-txn-chip{
  display:inline-flex;align-items:center;justify-content:center;
  padding:var(--space-xs) var(--space-sm);
  border-radius:var(--border-radius-sm);
  background:var(--color-grays-100);
  color:var(--ta-color-text-subtle);
  font-family:var(--font-family-app);
  font-weight:var(--font-weight-regular);
  font-size:var(--font-size-body-small);
  line-height:1.2;
  white-space:nowrap;
}

/* Amount (currency) — same weight as LTV */
.cust-amount{
  font-family:var(--font-family-app);
  font-weight:var(--font-weight-bold);
  font-size:var(--font-size-body-small);
  color:var(--ta-color-text-default);
  white-space:nowrap;
}

/* Date + time stacked (Figma: two regular lines, leading-1.2) */
.cust-date-cell{
  display:inline-flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:0;
}
.cust-date,
.cust-time{
  font-family:var(--font-family-app);
  font-weight:var(--font-weight-regular);
  font-size:var(--font-size-body-small);
  line-height:1.2;
  color:var(--ta-color-text-default);
  white-space:nowrap;
}

/* Actions cluster */
.cust-row-actions{
  display:inline-flex;align-items:center;gap:var(--space-sm);
}

/* Data cluster — wraps 5 data tds inside each tbody tr.
   Desktop: display:contents so the wrapper has no layout effect (tds remain table-cells).
   Mobile: see @media — becomes a flex-wrap container with its own row/column gaps. */
.cust-data-cluster{display:contents;}

/* ============================================================
   INTERMEDIATE STATE — filter row collapsed but table still horizontal.
   Triggered by body.crm-compact class (set by JS in CRM-עסקאות.html when
   the filter row's chips don't fit). Hide the mailing (send) action button
   to free space; the kebab "more actions" remains and can expose mailing
   via a popup. ONLY applies on desktop/tablet — at phone (≤840px) the
   card layout has room for both buttons, so both stay visible.
   ============================================================ */
@media (min-width:841px){
  body.crm-compact .cust-table .cust-row-actions > button:first-child{display:none;}
}

/* ============================================================
   PHONE — ≤840px. Tablet (841–1099) keeps the desktop tabular
   layout — sidebar is hidden by the page, leaving room.
   Matches Figma AmbassadorItemRow (App Tickchak / 35538:69137).
   Card with 2 zones: main content (3 stacked rows) + sidebar
   (vertical line + checkbox 24×24).
     Row 1: actions cluster (end/left) ⟷ status pill (start/right)
     Row 2: name + avatar (start-aligned/right)
     Row 3: data fields (flex-wrap, gap-xl, label-above-value)
   ============================================================ */
@media (max-width:840px){
  .cust-card{background:transparent;}
  .cust-scroll{overflow:visible;}

  .cust-table{display:block;width:100%;}
  .cust-table thead{display:none;}
  .cust-table tbody{display:block;width:100%;}

  /* Reset desktop cell chrome — borders/radius/bg bleed otherwise */
  .cust-table tbody tr td,
  .cust-table tbody tr td.col-checkbox,
  .cust-table tbody tr td.col-checkbox + td,
  .cust-table tbody tr td:last-child{
    border:none;
    border-radius:0;
    background:transparent;
  }

  /* Row card — Figma: white bg, rounded-5, custom shadow, padding-md.
     padding-inline-start reserves the sidebar (checkbox+line) on the start side (right in RTL). */
  .cust-table tbody tr{
    position:relative;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    align-content:flex-start;    /* don't stretch wrapped lines — Figma: top-aligned with fixed 12px gaps */
    row-gap:0;
    column-gap:var(--space-xl);  /* gap-24 between row-1 items (status ↔ actions) */
    background:#fff;
    border:1px solid var(--ta-color-border-subtle);
    border-radius:var(--border-radius-md);  /* Figma: rounded-[border-radius-md, 8px] */
    box-shadow:none;
    padding:var(--space-md);
    padding-inline-start:calc(var(--dim-6) + var(--space-md) * 2 + 1px + var(--space-md));  /* sidebar (49px) + gap (12) = 61px */
    margin-bottom:var(--space-md);
    /* height content-driven — natural fit for current data */
  }

  /* Two forced line breaks → 3-row main content layout.
     Each pseudo IS the gap between rows (height = 16). row-gap on tr is 0
     so the pseudo height isn't doubled. Inside the data cluster (see below),
     gap is independent — that's the point of wrapping the data in a div. */
  .cust-table tbody tr::before,
  .cust-table tbody tr::after{
    content:"";
    flex-basis:100%;
    height:var(--space-lg, 16px);
  }
  .cust-table tbody tr::before{order:3;}
  .cust-table tbody tr::after{order:6;}

  /* Data cluster — wraps the 5 data tds in row 3. Created by JS at runtime
     to avoid HTML foster-parenting. flex-wrap with its own gap → row-gap
     stays at 16 between wrapping lines, independent of the tr's pseudo gaps. */
  .cust-table tbody tr .cust-data-cluster{
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-start;  /* RTL: start = right edge */
    align-items:flex-start;
    gap:var(--space-lg, 16px) var(--space-2xl, 32px);
    flex-basis:100%;
    order:7;
  }

  /* Default cell — inline, order 7 → flows into row 3 (data fields).
     Each data field is column-stacked: label on top, value(s) below. */
  .cust-table tbody tr td{
    display:flex;
    flex-direction:column;
    align-items:flex-start;  /* RTL: start = right ✓ matches Figma items-end visual */
    flex:0 0 auto;
    min-width:0;
    padding:0;
    height:auto;
    text-align:start;
    order:7;
    gap:var(--space-xs);  /* Figma: gap-4 between label and value */
  }
  .cust-table tbody tr td::before{display:none;}

  /* Data cells visual order in row 3, right→left (matches Figma 35538:69253):
     LTV (₪) → Credits (count) → Active (time) → Contact (phone+email)
     align-self: flex-start = align to top of row 3 (Figma items-start) */
  .cust-table tbody tr td.col-ltv,
  .cust-table tbody tr td.col-credits,
  .cust-table tbody tr td.col-active,
  .cust-table tbody tr td.col-contact{
    align-self:flex-start;
  }
  .cust-table tbody tr td.col-ltv{order:7;}
  .cust-table tbody tr td.col-credits{order:8;}
  .cust-table tbody tr td.col-active{order:9;}
  .cust-table tbody tr td.col-contact{order:10;min-width:105px;}  /* Figma: w-[105px] — min so it can grow but won't squeeze */
  /* Transaction-specific data fields — same row 3 flow */
  .cust-table tbody tr td.col-txn,
  .cust-table tbody tr td.col-tickets,
  .cust-table tbody tr td.col-amount,
  .cust-table tbody tr td.col-datetime{
    align-self:flex-start;
  }
  .cust-table tbody tr td.col-txn{order:11;}
  .cust-table tbody tr td.col-tickets{order:12;}
  .cust-table tbody tr td.col-datetime{order:13;}
  .cust-table tbody tr td.col-amount{order:14;}

  /* Label-above-value for data cells (Figma: caption 12px, text-subtle, leading-none) */
  .cust-table tbody tr td:not(.col-checkbox):not(.col-name):not(.col-actions):not(.col-status)[data-label]::before{
    display:block;
    content:attr(data-label);
    font-family:var(--font-family-app);
    font-size:var(--font-size-caption);
    font-weight:var(--font-weight-regular);
    color:var(--ta-color-text-subtle);
    line-height:1;
  }

  /* Sidebar — checkbox 24x24 absolute on the start side (right in RTL).
     Layout (right→left in RTL): pad12 · checkbox24 · pad12 · line1px · main content
     border-inline-end is the vertical divider between sidebar and main content. */
  .cust-table tbody tr td.col-checkbox{
    position:absolute;
    top:0;
    bottom:0;
    inset-inline-start:0;
    width:calc(var(--dim-6) + var(--space-md) * 2 + 1px);  /* 49px total (incl. line) */
    display:flex;
    flex-direction:row;             /* override default column → vertical-center checkin */
    align-items:center;             /* vertical center */
    justify-content:flex-start;     /* RTL: start = right → checkin sits near card's right edge */
    gap:0;
    padding-inline-start:var(--space-md);
    padding-inline-end:var(--space-md);
    background:transparent;
    border:none;
    border-radius:0;
    border-inline-end:1px solid var(--ta-color-border-subtle);
  }
  /* Restyle inner checkin to match Figma checkbox spec: 24x24, white, gray-300 border, radius-sm */
  .cust-table tbody tr td.col-checkbox .checkin .shape{
    width:var(--dim-6);
    height:var(--dim-6);
    background:var(--color-solids-white,#fff);
    border:1px solid var(--color-grays-300);
    border-radius:var(--border-radius-sm);
  }
  /* When the row is selected, force the checkmark visible regardless of .on class.
     Belt-and-suspenders: iOS Safari sometimes loses class toggles on programmatic dispatch. */
  .cust-table tbody tr.is-selected .checkin .check{
    opacity:1;
    transform:scale(1) rotate(0);
  }

  /* Row 1 — Status pill on the start side (right), Actions on the end side (left) */
  .cust-table tbody tr td.col-status{
    order:1;
    flex:0 0 auto;
    flex-direction:row;  /* override column from default */
    gap:0;
  }
  .cust-table tbody tr td.col-status::before{display:none;}

  .cust-table tbody tr td.col-actions{
    order:2;
    flex:0 0 auto;
    flex-direction:row;
    margin-inline-start:auto;  /* push to end (left in RTL) */
    gap:0;
  }
  .cust-table tbody tr td.col-actions::before{display:none;}

  /* Row 2 — Name + Avatar full width, right-aligned (RTL: flex-start = right) */
  .cust-table tbody tr td.col-name{
    order:4;
    flex:0 0 100%;
    flex-direction:row;
    gap:0;
  }
  .cust-table tbody tr td.col-name::before{display:none;}
  .cust-table tbody tr td.col-name .cust-name-cell{
    width:100%;
    justify-content:flex-start;  /* RTL: avatar on right, name to its left */
  }
  .cust-table tbody tr td.col-name .cust-name-text{
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
    line-height:1.4;  /* Figma: leading-[1.4] */
  }

  /* ========================================================
     TYPOGRAPHY (Figma exact, 35538:69253)
     Uniform: 12px text-default Assistant family, all data values
     Numeric metrics (credits count, LTV currency) → Bold leading-1.2
     Text metrics (last-active time, phone, email)  → Regular leading-none
     Labels (all)                                   → Regular text-subtle leading-none
     Name (top)                                     → Bold 16px leading-1.4
     ========================================================  */
  .cust-table tbody tr td .cust-credits-badge,
  .cust-table tbody tr td .cust-ltv,
  .cust-table tbody tr td .cust-amount,
  .cust-table tbody tr td .cust-last-active,
  .cust-table tbody tr td .cust-contact-phone,
  .cust-table tbody tr td .cust-contact-email,
  .cust-table tbody tr td .cust-txn-chip,
  .cust-table tbody tr td .cust-date,
  .cust-table tbody tr td .cust-time{
    font-family:var(--font-family-app);
    font-size:var(--font-size-caption);     /* 12px */
    color:var(--ta-color-text-default);
    white-space:nowrap;
  }
  /* Numeric metrics — Bold leading-1.2 */
  .cust-table tbody tr td .cust-credits-badge,
  .cust-table tbody tr td .cust-ltv,
  .cust-table tbody tr td .cust-amount{
    font-weight:var(--font-weight-bold);
    line-height:1.2;
  }
  /* Text metrics — Regular leading-none */
  .cust-table tbody tr td .cust-last-active,
  .cust-table tbody tr td .cust-contact-phone,
  .cust-table tbody tr td .cust-contact-email,
  .cust-table tbody tr td .cust-date,
  .cust-table tbody tr td .cust-time{
    font-weight:var(--font-weight-regular);
    line-height:1;
  }

  /* Mobile: keep credits badge + TXN chip as styled chips (don't strip fill) */
  /* Date/time on mobile — single line, time after date */
  .cust-table tbody tr td.col-datetime .cust-date-cell{
    flex-direction:row;
    gap:var(--space-xs);
  }

  /* Email is text-default in Figma (not subtle as desktop has it) */
  .cust-table tbody tr td.col-contact .cust-contact-email{display:block;}

  /* Avatar — exact Figma shadow + gap-sm in name cell */
  .cust-table tbody tr td.col-name .cust-name-cell{
    gap:var(--space-sm);  /* Figma: gap-8 */
  }
  .cust-table tbody tr td.col-name .cust-avatar{
    box-shadow:1.419px 2.839px 2.839px 0px rgba(197,197,197,0.25);  /* Figma exact */
  }
}