/* Billing Dashboard: status pills, 2:1 chips and the edit-window hold. */

/* Billing status pills and 2:1 chips. One color per billing step, only Voided
   gray; 2:1 is a square-cornered pink chip with a two-people icon so it never
   reads as a status. Design: "Billing · Status and 2:1 colors" (Pencil). */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.125rem 0.625rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.25rem;
  white-space: nowrap;
  background: #ece6dc;
  color: #5a5248;
}
.status-pill__icon { width: 0.8125rem; height: 0.8125rem; flex: none; }
.status-pill--pending_review  { background: #dbeafe; color: #1e3a8a; }
.status-pill--flagged         { background: #f2b517; color: #1f1a14; }
.status-pill--approved        { background: #ccefe9; color: #115e59; }
.status-pill--ready_to_submit { background: #2b2a28; color: #ffffff; }
.status-pill--submitted       { background: #2b2a28; color: #ffffff; }
.status-pill--accepted        { background: #2e7d4f; color: #ffffff; }
.status-pill--rejected        { background: #b42318; color: #ffffff; }
.status-pill--corrected       { background: #ffedd5; color: #9a3412; }
.status-pill--voided          { background: #ece6dc; color: #5a5248; }

.two-to-one-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  width: fit-content;
  padding: 0.125rem 0.5rem;
  border: 1px solid transparent;
  border-radius: 0.375rem;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.25rem;
  white-space: nowrap;
  background: #fce7f3;
  color: #9d174d;
}
.two-to-one-chip--other-provider { background: #ffffff; border-color: #db2777; }
.two-to-one-chip__icon { width: 0.75rem; height: 0.75rem; flex: none; }

/* A billing hold (the DSP edit window): a normal wait that still keeps the
   shift out of billing, so it sits between gray and red. */
.flag-hold {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0 0.5rem;
  border: 1px solid #f5b88a;
  border-radius: 9999px;
  background: #fff1e6;
  color: #9a3412;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.25rem;
  white-space: nowrap;
  cursor: help;
}
.flag-hold-row {
  border: 1px solid #f5b88a;
  background: #fff1e6;
  color: #9a3412;
}

/* Session modal · How this shift is billed: the shift's stretches as a bar,
   then its eXPRS lines. A piece's --share is its length in seconds; the
   stylesheet turns that into width. Design: "Billing modal · plain language
   · Desktop" (Pencil). */
.shift-billing {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.25rem 0;
  margin-bottom: 1rem;
  border-top: 1px solid #e5e1d8;
}
.shift-billing__title { font-size: 0.9375rem; font-weight: 700; color: #1f2937; }
.shift-billing__subtitle { font-size: 0.8125rem; font-weight: 600; color: #4b5563; }
.shift-billing__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.shift-billing__intro { font-size: 0.84375rem; line-height: 1.45; color: #4b5563; }
.shift-billing__fix { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; font-weight: 600; color: #2e7d52; }
.shift-billing__fix:hover { text-decoration: underline; }
.shift-billing__fix-icon { width: 0.875rem; height: 0.875rem; }
.shift-billing__timeline { display: flex; flex-direction: column; gap: 0.375rem; padding-bottom: 0.875rem; }
.shift-billing__times { display: flex; gap: 2px; font-size: 0.71875rem; color: #9ca3af; }
.shift-billing__time { flex: var(--share) 1 0%; min-width: 10.5rem; display: flex; justify-content: space-between; }

.shift-billing__strip {
  display: flex;
  gap: 2px;
  height: 2.125rem;
  border-radius: 0.5rem;
  overflow: hidden;
}
.shift-billing__piece {
  flex: var(--share) 1 0%;
  min-width: 10.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0 0.5rem;
  background: #e8e2d8;
  color: #4b5563;
  font-size: 0.71875rem;
  font-weight: 600;
}
.shift-billing__piece--zc,
.shift-billing__piece--ze { background: #2b86a0; color: #f4f7f5; }
.shift-billing__piece-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.shift-billing__code {
  display: inline-block;
  padding: 0.0625rem 0.4375rem;
  border-radius: 0.3125rem;
  background: #d6cfc3;
  color: #4b5563;
  font-size: 0.71875rem;
  font-weight: 700;
}
.shift-billing__piece--zc .shift-billing__code,
.shift-billing__piece--ze .shift-billing__code,
.shift-billing__line--zc .shift-billing__code,
.shift-billing__line--ze .shift-billing__code { background: #1f6e83; color: #f4f7f5; }

.shift-billing__lines {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #e6e0d6;
  border-radius: 0.625rem;
  overflow: hidden;
  font-size: 0.8125rem;
  color: #374151;
}
.shift-billing__lines th {
  background: #f7f4ef;
  padding: 0.5625rem 0.875rem;
  text-align: left;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #9ca3af;
}
.shift-billing__lines td { padding: 0.625rem 0.875rem; border-top: 1px solid #efeae1; }
.shift-billing__lines th:last-child,
.shift-billing__lines td:last-child { width: 4.5rem; }
.shift-billing__lines tfoot td { background: #f7f4ef; font-weight: 700; }
.shift-billing__line--zc,
.shift-billing__line--ze { background: #eaf4f7; }
.shift-billing__line--zc .shift-billing__name,
.shift-billing__line--ze .shift-billing__name { color: #1f6e83; }
.shift-billing__proc { font-weight: 700; color: #1f2937; margin-right: 0.25rem; }
.shift-billing__name { font-weight: 600; color: #1f2937; }

/* Session modal · the client's approved hours, one row per code. --share is
   the share of the authorization used. */
.approved-hours { display: flex; flex-direction: column; gap: 0.75rem; }
.approved-hours__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.approved-hours__title { font-size: 0.9375rem; font-weight: 700; color: #1f2937; }
.approved-hours__window { font-size: 0.78125rem; color: #6b7280; }
.approved-hours__table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #e6e0d6;
  border-radius: 0.625rem;
  overflow: hidden;
  font-size: 0.8125rem;
  color: #374151;
}
.approved-hours__table th {
  background: #f7f4ef;
  padding: 0.5625rem 0.875rem;
  text-align: left;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #9ca3af;
}
.approved-hours__table td { padding: 0.6875rem 0.875rem; border-top: 1px solid #efeae1; }
.approved-hours__table .approved-hours__number { text-align: right; white-space: nowrap; }
.approved-hours__idle td { background: #faf9f6; color: #9ca3af; }
.approved-hours__used { display: flex; align-items: center; gap: 0.75rem; }
.approved-hours__meter { flex: 1; min-width: 6rem; height: 0.375rem; border-radius: 9999px; background: #e8e2d8; overflow: hidden; }
.approved-hours__meter-fill { width: var(--share); min-width: 0.375rem; height: 100%; border-radius: 9999px; background: #4e9a6b; }
.approved-hours__meter-fill--near { background: #d97706; }
.approved-hours__meter-fill--over { background: #b42318; }
.approved-hours__pct { font-size: 0.75rem; color: #b0aaa0; }
.approved-hours__pct--near { color: #b45309; font-weight: 600; }
.approved-hours__pct--over { color: #b42318; font-weight: 700; }
.approved-hours__left { font-weight: 600; color: #2e7d52; }
.approved-hours__left--over { color: #b42318; }
.approved-hours__adds { font-weight: 700; }
.approved-hours__note { font-size: 0.75rem; color: #6b7280; }

/* Session modal header: a small ready tag beside the title, and the shift's
   people and rating as one aligned list. */
.ready-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.1875rem 0.625rem;
  border-radius: 9999px;
  background: #e3f1e8;
  color: #226b46;
  font-size: 0.78125rem;
  font-weight: 600;
  vertical-align: middle;
}
.ready-tag__icon { width: 0.8125rem; height: 0.8125rem; }
.shift-facts { display: grid; grid-template-columns: max-content 1fr; gap: 0.3125rem 0.75rem; margin-top: 0.5rem; font-size: 0.875rem; color: #374151; }
.shift-facts dt { font-size: 0.78125rem; font-weight: 600; color: #9ca3af; align-self: center; }
.shift-facts dd { margin: 0; }
.shift-facts__who { font-weight: 600; color: #1f2937; margin-right: 0.375rem; }
.shift-facts__stars { color: #e8a33d; letter-spacing: 0.05em; }
.shift-facts__stars-off { color: #d6cfc3; }

/* Phone width: the bar keeps each piece's code and hours, the tables drop the
   words a code already says and the usage meter, so nothing wraps or runs off. */
@media (max-width: 640px) {
  .shift-billing__piece { min-width: 6.5rem; padding: 0 0.25rem; gap: 0.25rem; }
  .shift-billing__time { min-width: 6.5rem; }
  .shift-billing__piece-who,
  .staffing-words,
  .approved-hours__meter { display: none; }
  .approved-hours__used { white-space: nowrap; gap: 0.375rem; }
  .shift-billing__lines td,
  .approved-hours__table td,
  .approved-hours__table th { padding-left: 0.625rem; padding-right: 0.625rem; }
  .approved-hours__table td:first-child { white-space: nowrap; }
}

/* A reopened shift that already went to eXPRS, and the export result that
   names each shift left out of the file and why (card #355). */
.already-sent {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding: 0.875rem 1rem;
  border: 1px solid #ebcb8b;
  border-radius: 0.625rem;
  background: #fdf6e9;
  color: #5c3b0a;
  font-size: 0.875rem;
  line-height: 1.45;
}
.already-sent__icon { width: 1.125rem; height: 1.125rem; flex: none; margin-top: 0.125rem; color: #8a5a12; }
.already-sent__title { font-weight: 600; }

.left-out { flex-direction: column; gap: 0.75rem; }
.left-out__head { display: flex; align-items: center; gap: 0.625rem; font-size: 0.9375rem; font-weight: 600; }
.left-out__list { display: flex; flex-direction: column; gap: 0.5rem; padding-left: 1.75rem; }
.left-out__who { font-weight: 600; color: #1f2937; }

/* An overnight shift (card #464): one shift, tagged, and billed as one eXPRS
   line per date — cut at 12:00 AM on a bar, with the lines beneath. Design:
   Pencil "#464 Billing modal · one overnight shift" and its 2:1 and Relief
   Care cases, approved by the operator 2026-10-07. */
.overnight-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  background: #fbefd3;
  color: #8a5a12;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;

  svg { width: 0.75rem; height: 0.75rem; }
}

.overnight-bill {
  --overnight-na: #e8e2d8;
  --overnight-na-chip: #d6cfc3;
  --overnight-na-ink: #4b5563;
  --overnight-pair: #2b86a0;
  --overnight-pair-chip: #1f6e83;
  --overnight-pair-wash: #eaf4f7;
  --overnight-line: #efeae1;

  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-base-300, #e5e7eb);
}
.overnight-bill__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b7280;

  svg { width: 1rem; height: 1rem; color: #8a5a12; }
}
.overnight-bill__bar {
  display: flex;
  gap: 2px;
  height: 2.125rem;
  overflow: hidden;
  border-radius: 0.5rem;
}
.overnight-bill__part {
  display: flex;
  flex: var(--share, 1) 1 0%;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  min-width: 0;
  padding: 0 0.375rem;
  overflow: hidden;
  background: var(--overnight-na);
  color: var(--overnight-na-ink);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}
.overnight-bill__part--zc,
.overnight-bill__part--ze { background: var(--overnight-pair); color: #f4f7f5; }
.overnight-bill__part--relief-care { background: var(--color-relief-soft); color: var(--color-relief); }
.overnight-bill__midnight { flex: none; width: 3px; background: #15302e; }
.overnight-bill__code {
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--overnight-na-chip);
  color: var(--overnight-na-ink);
  font-size: 0.6875rem;
  font-weight: 700;
}
.overnight-bill__part--zc .overnight-bill__code,
.overnight-bill__part--ze .overnight-bill__code,
.overnight-bill__line--zc .overnight-bill__code,
.overnight-bill__line--ze .overnight-bill__code { background: var(--overnight-pair-chip); color: #fff; }
.overnight-bill__part--relief-care .overnight-bill__code { background: #ddd6fe; color: var(--color-relief); }
.overnight-bill__ticks {
  display: flex;
  justify-content: space-between;
  gap: 2px;
  font-size: 0.6875rem;
  color: #9ca3af;
}
.overnight-bill__tick {
  display: flex;
  flex: var(--share, 1) 1 0%;
  justify-content: space-between;
  min-width: 0;
  white-space: nowrap;
}
.overnight-bill__tick--midnight > span:first-child { font-weight: 700; color: #15302e; }
.overnight-bill__lines {
  margin-top: 0.5rem;
  overflow: hidden;
  border: 1px solid #e6e0d6;
  border-radius: 0.625rem;
}
.overnight-bill__line {
  display: grid;
  grid-template-columns: 15rem 7rem 1fr 4rem;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5625rem 0.875rem;
  border-top: 1px solid var(--overnight-line);
  font-size: 0.8125rem;
  color: #374151;
  font-variant-numeric: tabular-nums;

  &:first-child { border-top: 0; }
}
.overnight-bill__line--head { background: #f7f4ef; font-size: 0.6875rem; font-weight: 600; color: #9ca3af; }
.overnight-bill__line--total { background: #f7f4ef; font-weight: 700; }
.overnight-bill__line--zc,
.overnight-bill__line--ze { background: var(--overnight-pair-wash); }
.overnight-bill__code-cell { display: flex; align-items: center; gap: 0.375rem; }
.overnight-bill__hours { text-align: right; }
.overnight-bill__footnote { font-size: 0.75rem; color: #6b7280; }

@media (max-width: 720px) {
  .overnight-bill__wide,
  .overnight-bill__part .overnight-bill__code { display: none; }
  .overnight-bill__part { padding: 0 0.125rem; text-overflow: clip; }
  .overnight-bill__line {
    grid-template-columns: 1fr auto;
    grid-template-areas: "when hours" "code hours";
    row-gap: 0.25rem;
  }
  .overnight-bill__line--head { display: none; }
  .overnight-bill__when { grid-area: when; font-weight: 600; color: #1f2937; }
  .overnight-bill__code-cell { grid-area: code; }
  .overnight-bill__what { display: none; }
  .overnight-bill__hours { grid-area: hours; font-weight: 600; }
  .overnight-bill__line--total { grid-template-areas: "when hours"; }
  .overnight-bill__line--total > span:nth-child(2),
  .overnight-bill__line--total > span:nth-child(3) { display: none; }
}