/* Settings revamp — component styles, layered on the design system in
   styles.css the same way tasks.css layers the Tasks redesign. Only the
   redesign-specific .set-* row anatomy lives here; cards, buttons, badges,
   chips and the ⋯ kebab menus are the shared classes. */

/* one 720px column for the stacked cards */
.set-wrap { max-width: 720px; }

/* Team page: the Commissions ↔ People tab switch above the card */
.team-tabswitch { margin-bottom: 14px; }
@media (max-width: 640px) {
  .team-tabswitch { display: flex; }
  .team-tabswitch .seg-opt { flex: 1; text-align: center; justify-content: center; }
}

/* one row in a settings card (team member / checklist step / lead source):
   a soft hover pill that bleeds into the card padding — no hairlines */
.set-row {
  position: relative;
  display: flex; align-items: center; gap: 11px;
  padding: 8px 10px; margin: 0 -10px; border-radius: 8px;
  transition: background .12s;
}
.set-row.list { gap: 10px; padding: 7px 10px; }
.set-row:hover { background: #f7f9fc; }

/* row actions stay hidden until the row is hovered (or the action is focused /
   its menu is open); touch has no hover, so keep them reachable at 55% */
.set-act { opacity: 0; transition: opacity .12s; }
.set-row:hover .set-act, .set-act.open, .set-act:focus-visible { opacity: 1; }
@media (hover: none) { .set-act { opacity: .55; } }

/* initials avatar — 28px circle in a muted deterministic tone per person */
.set-avatar {
  width: 28px; height: 28px; border-radius: 50%; flex: none;
  color: #fff; font-size: 10.5px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}

.set-name { flex: 1; min-width: 0; }
.set-idx { width: 16px; text-align: right; flex: none; }
.set-editable { cursor: text; }

/* in-place rename editor — the row swaps its label for an input (blue tint
   marks the row as live, matching the drag-active handle colour) */
.set-editrow, .set-editrow:hover { background: var(--blue-bg); }
.set-editrow .set-handle { pointer-events: none; }
.set-editrow .set-handle svg { fill: #8ba8d8; }
.set-editinput { flex: 1; min-width: 0; font-size: 13px; padding: 4px 8px; }
.set-editbtn { padding: 4px 12px; }
.set-email { max-width: 45%; flex: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* phone: a team row's login cluster (linked email / "Link login" + note) drops
   to its own indented line so the name never fights it for width; the ::after
   element is the forced line break, the 39px indent lines up with the name */
@media (max-width: 700px) {
  .set-row:has(.set-avatar) { flex-wrap: wrap; row-gap: 2px; }
  .set-row:has(.set-avatar)::after { content: ""; order: 1; flex-basis: 100%; height: 0; }
  .set-row:has(.set-avatar) > .set-email,
  .set-row:has(.set-avatar) > .icon-btn.set-act,
  .set-row:has(.set-avatar) > .small { order: 2; }
  .set-row:has(.set-avatar) > .set-email,
  .set-row:has(.set-avatar) > .icon-btn.set-act { margin-left: 39px; }
  .set-row:has(.set-avatar) > .set-email { max-width: calc(100% - 39px); }
}

/* group labels (Admins / Closers / Setters) */
.set-grouplabel {
  font-size: 12px; font-weight: 700; color: var(--faint);
  text-transform: uppercase; letter-spacing: .05em; margin: 16px 0 2px;
}
.set-grouplabel.first { margin-top: 0; }

/* empty state — dashed box */
.set-empty {
  border: 1px dashed var(--line); border-radius: 8px; margin-top: 4px;
  padding: 10px 12px; color: var(--faint); font-size: 12.5px;
}

/* six-dot drag handle — arms HTML5 drag on its row; arrow keys reorder too */
.set-handle {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  background: none; border: 0; padding: 2px 3px; margin: -2px -3px;
  border-radius: 5px; cursor: grab;
}
.set-handle:active { cursor: grabbing; }
.set-handle svg { display: block; fill: #c1cad6; transition: fill .12s; }
.set-handle:hover svg, .set-handle:focus-visible svg { fill: #8ba8d8; }

/* mid-drag: the source row lifts; a 2px blue line previews where it lands */
.set-row.dragging { background: #fff; box-shadow: 0 8px 20px rgba(22, 33, 46, .16); opacity: .5; }
.set-row.drop-before::before, .set-row.drop-after::after {
  content: ""; position: absolute; left: 4px; right: 4px; height: 2px;
  border-radius: 2px; background: var(--blue); pointer-events: none;
}
.set-row.drop-before::before { top: -1px; }
.set-row.drop-after::after { bottom: -1px; }

/* ---- Team page: the Commissions card (reuses the .set-* row anatomy) ---- */
/* headline tiles: owed is the hero (it's the payout), collected sits beside it */
.com-tiles { display: flex; gap: 10px; margin-bottom: 16px; }
.com-tile {
  flex: 1; border: 1px solid var(--line); border-radius: 10px;
  padding: 12px 14px; min-width: 0;
}
.com-tile.hero { background: var(--green-bg); border-color: var(--green-line); }
.com-tile-label {
  font-size: 11px; font-weight: 700; color: var(--faint);
  text-transform: uppercase; letter-spacing: .05em;
}
.com-tile-value { font-size: 22px; font-weight: 750; letter-spacing: -.3px; margin-top: 3px; }
.com-tile.hero .com-tile-value { color: var(--green); }

/* "All paid ✓" state on the hero tile */
.com-tile.hero.settled .com-tile-value { font-size: 18px; }

/* the per-person rows: what they're owed sits right-aligned and bold; the
   whole row is a button that expands to the deals behind the number */
.com-row { cursor: pointer; }
.com-row.open, .com-row.open:hover { background: var(--grey-bg, #f2f4f8); }
.com-owed { font-weight: 750; font-size: 14px; flex: none; }
.com-owed.zero { color: var(--faint); font-weight: 600; }
.com-exempt { font-size: 11.5px; font-weight: 600; color: var(--faint); flex: none; }
.com-chev { color: var(--faint); font-size: 15px; font-weight: 700; flex: none; width: 10px; transition: transform .15s; }
.com-chev.open { transform: rotate(90deg); }

/* the month's payout-run banner: amber "to pay" before the run is recorded,
   green once it is; sits between the tiles and the per-person rows */
.com-payrun {
  display: flex; align-items: center; gap: 12px;
  border-radius: 10px; padding: 10px 14px; margin-bottom: 14px;
  font-size: 12.5px;
}
.com-payrun > span:first-child { flex: 1; }
.com-payrun.due { background: var(--amber-bg); border: 1px solid var(--amber-line); color: var(--amber); }
.com-payrun.paid { background: var(--green-bg); border: 1px solid var(--green-line); color: var(--green); }
.com-payrun-drift { color: var(--amber); }
.com-payrun-btn { flex: none; }

/* after the run: a quiet tick on settled rows; amber for cash accrued since */
.com-paidtick { color: var(--green); font-weight: 800; flex: none; }
.com-drift { font-size: 11px; font-weight: 700; color: var(--amber); flex: none; white-space: nowrap; }

/* a person's own rate, shown beside their name on the sheet and as the
   pay summary chip on the roster row ("€500 + 12.5%") */
.com-custom {
  font-size: 10.5px; font-weight: 700; color: var(--blue);
  background: var(--blue-bg); border-radius: 999px; padding: 1px 7px; vertical-align: 1px;
}
.com-ratechip { flex: none; font-size: 11.5px; font-weight: 700; color: var(--faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.com-ratechip.custom { color: var(--blue); }

/* the roster's inline editor — one form instead of a menu of prompts */
.sales-editform { align-items: flex-start; cursor: default; }
.sales-editform .set-avatar { margin-top: 2px; }
.sales-editgrid { flex: 1; min-width: 0; display: grid; gap: 10px; padding: 1px 0 4px; }
.sales-edittitle { font-size: 13px; }
.sales-editpair { display: flex; gap: 12px; flex-wrap: wrap; }
.sales-editpair .sales-editfield { flex: 1; min-width: 170px; }
.sales-editfield {
  display: block; font-size: 10.5px; font-weight: 700; color: var(--faint);
  text-transform: uppercase; letter-spacing: .4px;
}
.sales-editfield .input {
  display: block; margin-top: 4px; width: 100%; max-width: 340px;
  font-size: 13px; text-transform: none; letter-spacing: 0;
}
.sales-editfield.chk {
  display: flex; align-items: center; gap: 7px;
  text-transform: none; letter-spacing: 0; font-size: 12.5px; font-weight: 600; color: var(--muted);
  cursor: pointer;
}
.sales-editnote { font-size: 11.5px; color: var(--faint); margin-top: -4px; }
.sales-editactions { display: flex; gap: 8px; align-items: center; }
.sales-editactions .danger { margin-left: auto; }

/* the expanded deals behind a row (and behind the unattributed line) */
.com-deals { margin: -2px -10px 6px; padding: 2px 10px 4px 49px; }
.com-deal {
  display: flex; align-items: baseline; gap: 10px;
  padding: 5px 0; border-bottom: 1px dashed var(--line-soft); font-size: 12.5px;
}
.com-deal:last-child { border-bottom: 0; }
/* the column labels above the figures ("collected" · "their cut") */
.com-deal.com-deal-head { padding: 4px 0 0; border-bottom: 0; }
.com-deal-head span {
  font-size: 9.5px; font-weight: 700; color: var(--faint);
  text-transform: uppercase; letter-spacing: .05em;
}
.com-deal.rowlink { cursor: pointer; }
.com-deal.rowlink:hover .com-deal-name { text-decoration: underline; }
.com-deal-date { flex: none; width: 52px; color: var(--faint); font-variant-numeric: tabular-nums; }
.com-deal-name { flex: 1; min-width: 0; font-weight: 600; }
.com-deal-collected { flex: none; color: var(--faint); font-variant-numeric: tabular-nums; }
.com-deal-cash { flex: none; min-width: 52px; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.com-deal-plan {
  font-size: 10px; font-weight: 700; color: var(--faint); text-transform: uppercase;
  letter-spacing: .04em; border: 1px solid var(--line); border-radius: 4px; padding: 0 4px;
}
.com-deal-via { display: block; font-size: 11px; font-weight: 500; color: var(--faint); }
.com-deal-via.warn { color: var(--amber); }
.com-deals .icon-btn { flex: none; }
/* People card: the Active ↔ Deactivated tab switch (appears only once someone
   is deactivated) and the Deactivated tab's rows */
.com-peopletabs { margin-left: auto; padding: 2px; }
.com-peopletabs .seg-opt { padding: 4px 10px; font-size: 12px; }
.com-inactive .set-avatar { filter: grayscale(1); opacity: .65; }
.com-inactive .set-name { color: var(--muted); }

/* someone credited on this month's deals who has since been removed from the roster */
.com-gone {
  font-size: 10.5px; font-weight: 700; color: var(--faint);
  text-transform: uppercase; letter-spacing: .04em;
  border: 1px solid var(--line); border-radius: 999px; padding: 1px 7px;
  vertical-align: 1px; white-space: nowrap;
}
.com-rate { font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--faint); margin-left: 4px; }
/* the unattributed-cash line — expandable like the person rows */
.com-unattr {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  font-size: 12.5px; color: var(--amber); margin: 12px -10px 0;
  padding: 8px 10px; border-radius: 8px;
}
.com-unattr:hover, .com-unattr.open { background: var(--amber-bg); }
.com-unattr > span:first-child { flex: 1; }
.com-deals.unattr { margin-top: 2px; padding-left: 10px; }

/* Data & Account rows + the sign-out danger zone */
.set-acct-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; }
.set-acct-row:first-child { padding-top: 2px; }
.set-acct-row + .set-acct-row { border-top: 1px solid var(--line-soft); }
.set-pw-form { padding-bottom: 14px; }
.set-danger {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--red-line); border-radius: 8px;
  padding: 11px 14px; background: #fdf7f7;
}
.set-danger b { color: var(--red); }