/* css/customer-invitations.css
   Sender-side invitation tracking (People -> Customers), 2026-10-15.
   docs/engineering/INVITATION-TRACKING-WEB.md. Same language as
   css/customer-portal.css: existing brand tokens (css/brandv2.tokens.css
   --k-*) with fallbacks, rounded cards, restrained dot + label status badges,
   one primary action per card, 44px minimum touch targets. No new tokens. */

.cit.card { padding: 20px; border-radius: 24px; }
.cit-head { margin: 0 0 14px; }
.cit-head h2 { margin: 0 0 4px; font-size: 19px; line-height: 1.2; font-weight: 700; color: var(--k-text-primary, #142B2E); }
.cit-head p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--k-text-secondary, #46605F); }
.cit-groups { display: flex; flex-direction: column; gap: 12px; }
.cit-group {
  border: 1px solid var(--k-line, #E2EAE8); border-radius: 18px; background: var(--k-surface, #fff); overflow: hidden;
}
.cit-group-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px 10px; }
.cit-avatar {
  width: 40px; height: 40px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center;
  background: var(--k-accent-tint, #E3F0EF); color: var(--accent-text, #135759); font-size: 15px; font-weight: 700; letter-spacing: 0.02em;
}
.cit-group-text { display: flex; flex-direction: column; min-width: 0; }
.cit-group-text strong { font-size: 16px; font-weight: 600; color: var(--k-text-primary, #142B2E); overflow-wrap: anywhere; }
.cit-group-text span { font-size: 13.5px; color: var(--k-text-secondary, #46605F); overflow-wrap: anywhere; }

.cit-rows { list-style: none; margin: 0; padding: 0; }
.cit-rows li + li .cit-row { border-top: 1px solid var(--k-line, #E2EAE8); }
.cit-group .cit-rows li:first-child .cit-row { border-top: 1px solid var(--k-line, #E2EAE8); }
.cit-rows-flat { border: 1px solid var(--k-line, #E2EAE8); border-radius: 18px; overflow: hidden; }
.cit-row {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 12px 16px; margin: 0;
  border: 0; border-radius: 0; background: var(--k-surface, #fff); color: var(--k-text-primary, #142B2E);
  font: inherit; text-align: left; cursor: pointer; box-shadow: none;
}
.cit-row:hover { background: var(--k-surface-2, #EEF4F2); }
.cit-row:focus-visible { outline: 3px solid var(--k-accent, #1B6B6D); outline-offset: -3px; }
.cit-row-main { display: flex; flex-direction: column; flex: 1; min-width: 0; gap: 2px; }
.cit-row-title { font-size: 15.5px; font-weight: 600; overflow-wrap: anywhere; }
.cit-row-meta { font-size: 13.5px; color: var(--k-text-secondary, #46605F); }
.cit-row-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 4px; }
.cit-chevron { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--k-text-tertiary, #5B7371); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Status badge: a colored dot and a plain label on a quiet surface. */
.cit-badge {
  display: inline-flex; align-items: center; gap: 7px; flex: none; padding: 4px 10px 4px 9px; border-radius: 999px;
  background: var(--k-surface-2, #EEF4F2); color: var(--k-text-primary, #142B2E);
  font-size: 12.5px; font-weight: 600; line-height: 18px; white-space: nowrap;
}
.cit-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--k-text-tertiary, #5B7371); flex: none; }
.cit-badge[data-cit-status="pending"] .cit-dot { background: var(--k-warn, #8A5A0F); }
.cit-badge[data-cit-status="accepted"] .cit-dot { background: var(--k-pos, #157A5F); }
.cit-badge[data-cit-status="failed"] { background: var(--k-neg-tint, #F8E9E7); color: var(--k-neg, #BE4038); }
.cit-badge[data-cit-status="failed"] .cit-dot { background: var(--k-neg, #BE4038); }
.cit-badge[data-cit-status="expired"], .cit-badge[data-cit-status="revoked"] { color: var(--k-text-secondary, #46605F); }
.cit-chip-slot:empty { display: none; }
.cit-chip-slot { margin-top: 6px; }

.cit-unavailable { padding: 4px 0 0; }
.cit-unavailable p { margin: 0 0 6px; font-size: 14.5px; color: var(--k-text-secondary, #46605F); }
.cit-unavailable strong { color: var(--k-text-primary, #142B2E); }

/* Detail sheet (inside the shared #modal). */
.cit-sheet { display: flex; flex-direction: column; gap: 4px; }
.cit-facts { margin: 0 0 8px; padding: 0; }
.cit-fact { display: grid; grid-template-columns: 1fr; gap: 4px; padding: 12px 0; border-bottom: 1px solid var(--k-line, #E2EAE8); }
.cit-fact:last-child { border-bottom: 0; }
.cit-fact dt { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--k-text-tertiary, #5B7371); }
.cit-fact dd { margin: 0; display: flex; flex-direction: column; gap: 2px; font-size: 15.5px; color: var(--k-text-primary, #142B2E); overflow-wrap: anywhere; }
.cit-fact dd > span { font-size: 14px; color: var(--k-text-secondary, #46605F); }
.cit-status-fact { display: flex !important; flex-direction: row !important; flex-wrap: wrap; align-items: center; gap: 10px; }
.cit-sheet-line { font-size: 14px; color: var(--k-text-secondary, #46605F); }
.cit-access { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.cit-access li { display: flex; flex-direction: column; gap: 2px; }
.cit-access strong { font-size: 15.5px; font-weight: 600; }
.cit-access span { font-size: 13.5px; color: var(--k-text-secondary, #46605F); }
.cit-access .cit-caps { color: var(--k-text-tertiary, #5B7371); }
.cit-actions { display: flex; align-items: center; gap: 10px; margin: 8px 0 0; }
.cit-btn {
  min-height: 48px; padding: 12px 18px; border-radius: 16px; font: inherit; font-size: 16px; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; box-shadow: none;
}
.cit-btn[disabled] { opacity: 0.55; cursor: not-allowed; }
.cit-btn:focus-visible, .cit-menu-item:focus-visible { outline: 3px solid var(--k-accent, #1B6B6D); outline-offset: 2px; }
.cit-primary { flex: 1; background: var(--brand-navy, #0B3A3C); color: #fff; border: 1px solid var(--brand-navy, #0B3A3C); }
.cit-primary:hover { background: var(--k-accent-press, #155A5C); }
.cit-secondary { background: var(--k-surface, #fff); color: var(--k-text-primary, #142B2E); border: 1.5px solid var(--k-line, #C9D6D3); }
.cit-danger { flex: 1; background: var(--k-surface, #fff); color: var(--k-neg, #BE4038); border: 1.5px solid var(--k-line, #C9D6D3); }
.cit-danger:hover { background: var(--k-neg-tint, #F8E9E7); }
.cit-icon {
  width: 48px; padding: 0; background: var(--k-surface, #fff); color: var(--k-text-primary, #142B2E);
  border: 1.5px solid var(--k-line, #C9D6D3); letter-spacing: 0.08em; font-size: 14px;
}
.cit-more { position: relative; display: inline-flex; }
.cit-menu {
  position: absolute; right: 0; bottom: 56px; z-index: 5; min-width: 220px; padding: 6px; display: flex; flex-direction: column;
  background: var(--k-surface, #fff); border: 1px solid var(--k-line, #E2EAE8); border-radius: 16px;
  box-shadow: var(--k-shadow-2, 0 8px 24px rgba(6, 42, 44, 0.07));
}
.cit-menu[hidden] { display: none; }
.cit-menu-item {
  display: block; width: 100%; min-height: 44px; padding: 10px 14px; border: 0; border-radius: 10px; background: none;
  text-align: left; font: inherit; font-size: 15px; color: var(--k-text-primary, #142B2E); cursor: pointer; box-shadow: none;
}
.cit-menu-item:hover { background: var(--k-surface-2, #EEF4F2); }
.cit-menu-danger { color: var(--k-neg, #BE4038); }
.cit-note { margin: 8px 0 0; font-size: 14px; line-height: 1.45; color: var(--k-text-secondary, #46605F); }
.cit-message:empty { display: none; }
.cit-message { margin: 10px 0 0; padding: 10px 14px; border-radius: 12px; background: var(--k-accent-tint, #E3F0EF); color: var(--accent-text, #135759); font-size: 14px; }
.cit-sheet [data-invite-copy] { min-height: 48px; margin-top: 8px; border-radius: 16px; }

@media (min-width: 720px) {
  .cit-fact { grid-template-columns: 160px 1fr; align-items: baseline; gap: 16px; }
  .cit-actions { justify-content: flex-start; }
  .cit-primary, .cit-danger { flex: 0 1 auto; min-width: 220px; }
}

/* Invitation lifecycle (2026-10-16): Invite to Balen form callouts (linked
   account, replaced pending invitation) and already-active assets. */
.ca-callout {
  margin: 0 0 12px; padding: 10px 14px; border-radius: 12px; font-size: 14px; line-height: 1.45;
  background: var(--k-accent-tint, #E3F0EF); color: var(--accent-text, #135759);
}
.ca-asset-active { color: var(--k-text-secondary, #46605F); }
.ca-asset-note { font-size: 12.5px; color: var(--k-text-secondary, #46605F); }
.cit-fact-note { display: block; font-size: 12.5px; color: var(--k-text-secondary, #46605F); }

/* Owner UX 2026-10-16: "Invite someone" on the asset home (primary sharing
   action, below the header, before the overview) and its quick sheet. */
.thing-invite-row { margin: 12px 0 4px; }
.thing-invite-btn {
  display: block; width: 100%; min-height: 52px; border-radius: 16px; font-size: 16px; font-weight: 700;
  box-shadow: var(--k-shadow-card, 0 1px 2px rgba(6, 42, 44, 0.05), 0 8px 24px rgba(6, 42, 44, 0.07));
}
.ca-q-existing { margin-top: 14px; }
.ca-q-existing summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; color: var(--accent-text, #135759); font-weight: 600; }
.ca-q-list { list-style: none; margin: 8px 0 0; padding: 0; max-height: 280px; overflow: auto; }
.ca-q-pick {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; min-height: 48px; padding: 10px 12px;
  border: 1px solid var(--k-line, #E2EAE8); border-radius: 12px; background: var(--k-surface, #fff); margin: 0 0 6px; text-align: left;
}
.ca-q-pick span { font-size: 13px; color: var(--k-text-secondary, #46605F); }
.ca-q-linked { color: var(--accent-text, #135759); }