/* Dashboard-only pieces: debtor groups, task buckets, mode panels. */

/* A debtor group is one tinted block holding the client row and its invoices.
   The whole inset lives on the group: 13px from every edge to the row's
   content and to the child boxes. The row keeps only its vertical padding
   (5 + 8 = 13 at the top) and the children lose their side margins. */
.group {
  border-radius: 18px;
  /* Even top and bottom as it looks, not as it measures: the client's row is
     taller than its avatar, so it already carries 9px of its own under the
     circle. The last nested row carries none, and the block's own padding
     makes up the difference. */
  padding: 5px 13px 13px;
  display: flex;
  flex-direction: column;
}

.group.red {
  background: var(--red-bg);
}

.group.orange {
  background: var(--orange-bg);
}

.group.none {
  background: var(--row);
}

/* Inside a group the last column ends 23px from the group's edge: 13px group
   inset + 10px of padding on the row and on every child box, so the child
   text does not touch its white box and all rows line up with the header. */
.group > .row {
  background: transparent;
  /* The same 10px on the right as every child box, so the fixed columns of
     the client row and of its invoices start at the same x. */
  padding: 8px 10px 8px 0;
  min-height: 58px;
}

.group .child {
  background: var(--card);
  margin: 0;
  /*padding-right: 10px;*/
}

/* Buckets (Днес, Тази седмица, Този месец) on the dashboard task list are
   separated by a light, faint
   line above each heading; the first bucket has none. */
.bucket {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
}

.bucket:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.bucket > header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
}

.bucket > header b {
  font-size: 18px;
  font-weight: 600;
}

.bucket > header span {
  font-size: 12px;
  color: var(--muted);
}

.bucket > header i {
  margin-left: auto;
  font-style: normal;
  font-size: 12px;
  color: var(--muted);
}

.work-proj {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.work-proj .sub {
  font-size: 14px;
}

/* ------------------------------------------------------- nested rows */

/* The elbow lives inside the child row, first cell, and pokes 10px up into
   the gap so it visually hangs off the row above. Colour is --muted so it
   reads clearly, exactly as the prototype draws it. */
.kid-lead {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.elbow {
  width: 12px;
  height: 12px;
  flex: none;
  border-left: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  border-radius: 0 0 0 5px;
  margin-top: -10px;
}

/* Title row: the heading sits left, everything else is pushed to the right. */
.title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.title-row h1 {
  margin-right: auto;
}

/* Task rows on the dashboard: a red pill when late. */
.duepill {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  padding: 5px 12px;
  border-radius: 999px;
  /* A hairline drawn inside the pill, so the tinted states keep an edge
     against the row without the pill growing by a pixel. */
  outline: 1px solid color-mix(in srgb,var(--text) 12%,transparent);
  outline-offset: -1px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

/* A deadline that is neither near nor missed is just the date, no pill. */
.duedate {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}

/* The calendar mark is exactly the size of the date beside it and takes its
   colour, in the pill and in the plain date alike. */
.duepill svg,
.duedate svg {
  width: 1em;
  height: 1em;
  flex: none;
  color: inherit;
}

/* Already late: the solid pill. The three days before: the same pill, softer,
   so the two never read as equally urgent. This is why a task row needs no
   siren of its own. */
/* The label sits on --red-fill, not --red: white on the plain --red is
   3.48:1 in the light theme and 2.98:1 in the dark one, both under AA. */
.duepill.late {
  background: var(--red-fill);
  color: var(--on-fill);
}

.duepill.soon {
  background: var(--orange-bg);
  color: var(--orange-ink);
}

.group.hatch {
  background: var(--hatch);
}


/* A second block inside a section, e.g. the debtors under the money cards. */
.section-part {
  /*margin-top: 18px;*/
}

/* A due date that is not overdue: plain muted text with the exact metrics of
   a .tag (same font, padding and height), so rows with and without the red
   pill line up. */
.due-plain {
  display: inline-flex;
  align-items: center;
  padding: 4px 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
}