/* customer-card-tabs.css (1.11.2026, NV-2026-11-01-001/003): the customer card in 6 tabs. Loaded ONLY by customer-card.html, so no other page changes.
   Design-system tokens and components only (_ds.css). Families: cc-stick (the bar that stays on top), cc-ptab (one tab), cc-attn («דורש טיפול»), cc-pay (payments).
   Phone pass (Nativ 1.11: «במובייל צריך לסדר את הנראות, היא טיפה עקומה ... וצריך ליישר»): one right edge, 16px side gutter, 14px between cards,
   labels and values on two straight columns, tap targets of at least 44px, no sideways scroll, 12px for the small text of lists and hints. */

/* the phone page had body.codex-ux{overflow-x:hidden} (codex-ux-core.css), which makes <body> a scroll box and nothing can stick. clip keeps «no sideways scroll» without that. This page only. */
@media (max-width:899px){ html body.codex-ux{overflow-x:clip} }

/* ---- the bar that stays on top ---- */
.cc-stick{position:sticky;top:var(--v-top);z-index:var(--v-z-bar);margin:14px 0;padding:8px 10px;background:var(--v-surface);border:var(--v-bw) solid var(--v-border);border-radius:var(--v-r-panel);box-shadow:var(--v-sh-card)}
.cc-stick__id{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:2px 4px 8px;margin-bottom:8px;border-bottom:var(--v-bw) solid var(--v-line)}
.cc-stick__ava{width:30px;height:30px;font-size:13px;flex:none}
.cc-stick__name{font-size:17px;color:var(--v-ink)}
.cc-stick__pay{border:0;cursor:pointer;font:inherit}
.cc-stick__sp{flex:1}
.cc-stick__acts{display:flex;gap:8px;flex-wrap:wrap}
.cc-stick .v-tabs{margin:0;padding:0}
.cc-ptabs .v-tab{display:inline-flex;align-items:center;gap:6px}
.v-tab__n.is-bad{background:var(--v-bad);color:#fff}
.v-tab__n.is-warn{background:var(--v-warn-soft);color:var(--v-warn)}
.v-tab__n.is-ok{background:var(--v-good-soft);color:var(--v-good)}
.cc-ptab{min-width:0}

/* ---- «דורש טיפול» ---- */
.cc-attn .cc-tl__ic.is-bad{background:var(--v-bad-soft,#FDECEC);color:var(--v-bad)}
.cc-attn__sub{margin:0 0 10px}
.cc-attn__none{display:flex;align-items:center;gap:8px;margin:0;color:var(--v-good);font-weight:600}
.cc-attn__hint{margin-top:8px}
.cc-attn .cc-tl li{align-items:start}

/* ---- payments ---- */
.cc-pay__sub{margin:0 0 12px}
.cc-pay__stats{margin-bottom:12px;gap:8px}
.cc-pay__line{margin:0 0 10px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cc-pay__list > div > b{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.cc-pay__st{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:start}
.cc-pay__in{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.cc-pay__when{font-weight:600;color:var(--v-ink)}
.cc-pay__by{display:block;color:var(--v-muted);font-weight:400;font-size:12px}
.cc-pay__acts{display:flex;gap:12px;flex-wrap:wrap}
.cc-pay__hint{margin-top:8px}
.cc-rows > div.cc-payrow--late{box-shadow:inset -3px 0 0 var(--v-bad);padding-inline-start:10px}
.cc-ppf__chips{flex-wrap:wrap}
.cc-ppf__stats{margin:4px 0 8px;gap:8px}
.cc-ppf__stats .v-stat__v{font-size:18px}

/* the star «התיקים הפתוחים שלי» on the card is a button, not a map pin: _ds.css .v-pin{position:absolute} (the page-marks family) put it on top of «להתקשר» on the phone */
.cc-macts > .v-pin,[data-role="card-pin"],[data-role="card-pin-m"]{position:static}

/* ---- computer: tabs in one row ---- */
@media (min-width:900px){
  .cc-ptabs{flex-wrap:wrap}
  .cc-stick__ava{display:inline-grid;place-items:center}
}

/* ---- phone ---- */
@media (max-width:899px){
  body.codex-ux .v-mobonly > .v-wrap{padding-inline:16px}
  .cc-stick{top:0;margin:14px 0 0;padding:8px}
  .cc-stick__id{gap:6px;padding:0 2px 8px}
  .cc-stick__acts{display:none}
  /* the preferences save bar keeps today's place on the phone (end of the form): sticking to the bottom would put it under the app's bottom bar */
  .v-mobonly .v-prefs__bar{position:static}
  /* pinned on the phone: the tabs become one row that scrolls sideways (design m07), so the bar stays short */
  .cc-stick.is-stuck .cc-ptabs{display:flex !important;flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none}
  .cc-stick.is-stuck .cc-ptabs .v-tab{flex:none;white-space:nowrap;scroll-snap-align:start}
  .cc-stick__name{font-size:16px}
  /* six tabs in 3 x 2, all visible, no sideways scroll, each at least 44px */
  .cc-ptabs{display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;overflow:visible;white-space:normal}
  body.codex-ux .cc-ptabs .v-tab{justify-content:center;min-height:44px;padding:4px 6px;font-size:13px;line-height:1.2;text-align:center;white-space:normal}
  /* one rhythm: every card in a tab 14px apart, same inner padding */
  .v-mobonly .cc-ptab{display:flex;flex-direction:column;gap:14px;margin-top:14px}
  .v-mobonly .cc-ptab > *{margin-top:0 !important;margin-bottom:0 !important}
  .v-mobonly .cc-ptab .v-card{padding-inline:16px}
  /* label and value on two straight columns, both on the right edge of their column */
  .v-mobonly :is(.cc-rows,.v-facts) > div:not([style*="display: none"]){display:grid;grid-template-columns:7.5em minmax(0,1fr);column-gap:12px;align-items:baseline}
  .v-mobonly :is(.cc-rows,.v-facts) > div > b{white-space:normal}
  .v-mobonly :is(.cc-rows,.v-facts) > div > span{text-align:right;justify-self:stretch}
  .v-mobonly :is(.cc-rows,.v-facts) > div > :nth-child(n+3){grid-column:2}
  /* a card's link sits at the end of its head line, like the others */
  .v-mobonly .v-card__head .cc-card__link{margin-inline-start:auto}
  /* «דורש טיפול» and lists: the button goes under the text, on the same right edge, and is big enough to tap */
  .v-mobonly .cc-attn .cc-tl li{grid-template-columns:26px minmax(0,1fr)}
  .v-mobonly .cc-attn .cc-tl__w{grid-column:2;padding-top:0}
  /* the back office sets every button to 40px on the phone (!important); on this card the tap targets are 44px (Nativ 1.11: «לפי חוקים של ux ui») */
  body.codex-ux .v-mobonly :is(button,summary,.v-btn,.v-chip,.v-tab,.cc-stage,.v-ie-q,.nb__sum,.cc-card__link,a.v-link,.cc-docs__up,.cc-journey__go){min-height:44px !important}
  body.codex-ux .v-mobonly :is(button.v-link,a.v-link,button.v-pill){min-width:44px;display:inline-flex;align-items:center;justify-content:center}
  .v-mobonly .cc-pay__stats .v-stat__v{font-size:18px}
  /* small text of lists and hints: 12px */
  .v-mobonly .cc-tl__b small,.v-mobonly .cc-tl__w,.v-mobonly .v-fx__hint,.v-mobonly .cc-meta__sub{font-size:12px}
  .v-mobonly .v-tab__n{min-width:20px;height:20px;font-size:12px}
}