/* Clients list. */

/* ------------------------------------------------------------ clients */

/* Every client is one group block, exactly like the dashboard debtors; the
   tint is the only difference (red, orange, hatched lines, or plain).
   The summary is the client row. */
details.client > summary {
  list-style: none;
}

details.client > summary::-webkit-details-marker {
  display: none;
}

details.client.group > summary {
  background: transparent;
  padding: 8px 18px 8px 0;
  min-height: 58px;
  border-radius: 14px;
}

/* The heading ends its last column at the same 23px as the groups do
   (13px group inset + 10px row padding), so the table shares one right edge. */
.thead.t-cli {
  padding-right: 23px;
}

/* The only way to open a client, so it is a control: 26px box (over the 24px
   minimum) and an edge that clears 3:1 against the row behind it. */
.caret {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--line);
  transition: transform .15s;
}

.caret svg {
  width: 16px;
  height: 16px;
}

.child .glyph.sub {
  width: 20px;
  height: 20px;
}

/* The group's extra 2px at the bottom belongs under the child rows; when the
   accordion is closed the padding is the same on both sides. */
/* Folded there is nothing under the client's row, so the block goes back to
   the even 5px it has at the top. */
details.client.group:not([open]) {
  padding-bottom: 5px;
}

/* Dormant and ended clients keep a plain row with a muted name and a dashed
   1px ring just inside the edge: yellow for dormant, red for ended. CSS
   cannot set the dash length of an outline, so the ring is an SVG stroke
   drawn as the block's background image (dash 8px, gap 4px, radius 17.5).
   A data URI cannot read a token, so each ring is written twice, once per
   theme. The ended ring used to be #000000, which is 1.5:1 on the dark row
   behind it - the only mark that told an ended client apart was invisible in
   the dark theme. Both colours now clear 3:1 in both themes: dormant
   #a87a00 / #ffc633, ended #c4102f / #ff5c78. */
details.client.dormant .name,
details.client.ended .name {
  color: var(--muted);
}

details.client.group.dormant,
details.client.group.ended {
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

details.client.group.dormant {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.5' y='0.5' rx='17.5' fill='none' stroke='%23a87a00' stroke-width='1' stroke-dasharray='8 4' style='width:calc(100%25 - 1px);height:calc(100%25 - 1px)'/%3E%3C/svg%3E");
}

details.client.group.ended {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.5' y='0.5' rx='17.5' fill='none' stroke='%23c4102f' stroke-width='1' stroke-dasharray='8 4' style='width:calc(100%25 - 1px);height:calc(100%25 - 1px)'/%3E%3C/svg%3E");
}

[data-theme="dark"] details.client.group.dormant {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.5' y='0.5' rx='17.5' fill='none' stroke='%23ffc633' stroke-width='1' stroke-dasharray='8 4' style='width:calc(100%25 - 1px);height:calc(100%25 - 1px)'/%3E%3C/svg%3E");
}

[data-theme="dark"] details.client.group.ended {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.5' y='0.5' rx='17.5' fill='none' stroke='%23ff5c78' stroke-width='1' stroke-dasharray='8 4' style='width:calc(100%25 - 1px);height:calc(100%25 - 1px)'/%3E%3C/svg%3E");
}

details.client.ended .glyph {
  opacity: .55;
}


/* A client's projects and plans sit a little closer to each other than the
   clients do: the rows are shorter than a debtor's, so ten between them read
   as a break in the block rather than as spacing inside it. */
[data-table] details.client > .kids {
  row-gap: 7px;
  column-gap: var(--table-gap);
}