/* Main Control color contract: service colors and operational state colors are separate. */
:root {
  --service-m: #4779a4;
  --service-m-soft: #e4eff9;
  --service-mm: #76598b;
  --service-mm-soft: #eee6f4;
  --service-f: #ad607f;
  --service-f-soft: #f8e8ef;
  --service-st: #a8610e;
  --service-st-soft: #fff0d8;
  --service-cp: #3f8066;
  --service-cp-soft: #e4f1eb;
  --status-working: #b45f12;
  --status-working-soft: #fff0dc;
  --status-queue: #76598b;
  --status-queue-soft: #eee6f4;
  --status-break: #a8610e;
  --status-break-soft: #fff0d8;
  --status-room-in-use: #b45f12;
  --status-room-in-use-soft: #fff0dc;
  --status-idle-soft: #f7faf8;
}

.service-tone-m { --service-tone: var(--service-m); --service-tone-soft: var(--service-m-soft); }
.service-tone-mm { --service-tone: var(--service-mm); --service-tone-soft: var(--service-mm-soft); }
.service-tone-f { --service-tone: var(--service-f); --service-tone-soft: var(--service-f-soft); }
.service-tone-st { --service-tone: var(--service-st); --service-tone-soft: var(--service-st-soft); }
.service-tone-cp { --service-tone: var(--service-cp); --service-tone-soft: var(--service-cp-soft); }
.service-tone-neutral { --service-tone: #61716b; --service-tone-soft: #f0f3f1; }

.control-code-card[class*="service-tone-"] {
  border-color: var(--service-tone);
  background: var(--service-tone-soft);
}
.control-code-card.service-tone-cp { background: #fff; }
.control-code-card[class*="service-tone-"] > strong { color: var(--service-tone); }
.control-code-card[class*="service-tone-"]:hover,
.control-code-card[class*="service-tone-"]:focus-visible {
  border-color: var(--service-tone);
  background: var(--service-tone-soft);
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--service-tone);
}
.bulk-code-row[class*="service-tone-"] {
  border-left: 7px solid var(--service-tone);
  background: var(--service-tone-soft);
}
.bulk-code-row[class*="service-tone-"] > strong { color: var(--service-tone); }

.key-item.massage { background: var(--service-m-soft); color: var(--service-m); }
.key-item.medical { background: var(--service-mm-soft); color: var(--service-mm); }
.key-item.facial { background: var(--service-f-soft); color: var(--service-f); }
.key-item.steam { background: var(--service-st-soft); color: var(--service-st); }
.key-item.couple { border: 2px solid var(--service-cp); background: #fff; color: var(--service-cp); }

.family-massage { --service-border: var(--service-m); --service-background: var(--service-m-soft); }
.family-medical { --service-border: var(--service-mm); --service-background: var(--service-mm-soft); }
.family-facial { --service-border: var(--service-f); --service-background: var(--service-f-soft); }
.family-steam { --service-border: var(--service-st); --service-background: var(--service-st-soft); }
.cp-chip {
  display: inline-grid;
  min-width: 27px;
  margin-right: 3px;
  place-items: center;
  border-radius: 999px;
  background: var(--service-cp);
  color: #fff;
  padding: 2px 6px;
  font-size: 11px;
  font-weight: 900;
}
.calendar-card.cp-marked {
  outline: 3px solid var(--service-cp);
  outline-offset: -3px;
}

.calendar-card.group-marked {
  outline: 3px solid #65412f;
  outline-offset: -3px;
}

/* A group may also contain a Couples service. Keep both facts visible. */
.calendar-card.cp-marked.group-marked {
  outline-color: #65412f;
  outline-offset: 0;
  box-shadow: inset 0 0 0 3px var(--service-cp);
}

.key-item.group {
  color: #fff;
  background: #65412f;
}

/* Staff cards use status colors, never service-category colors. */
.staff-card {
  border-color: #ccd8d2;
  background: var(--status-idle-soft);
}
.staff-card.busy {
  border-color: #d59a62;
  background: var(--status-working-soft);
}
.staff-card.busy .staff-card-top em {
  background: var(--status-working);
  color: #fff;
}
.staff-card.has-queue {
  box-shadow: none;
}
.staff-card.queued {
  border-color: var(--status-queue);
  background: var(--status-queue-soft);
}
.staff-card.multi-queue,
.room-card.multi-queue {
  outline: 4px solid var(--status-queue);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #fff;
}
.staff-card.staff-state-break {
  border-color: #dfb678;
  background: var(--status-break-soft);
}
.staff-card.staff-state-break .staff-card-top em {
  background: var(--status-break);
  color: #fff;
}
.staff-card.staff-state-clocked_out {
  border-color: #aebbb6;
  background: #edf0ee;
  color: #52625d;
}

/* Room cards follow the same operational colors as staff cards. */
.room-card.idle {
  border-color: #ccd8d2;
  background: #fff;
}
.room-card.in_use {
  border-color: #d59a62;
  background: var(--status-room-in-use-soft);
}
.room-card.in_use strong,
.room-card.in_use span {
  color: var(--status-room-in-use);
  font-weight: 800;
}
.room-card.reserved {
  border-color: var(--status-queue);
  background: var(--status-queue-soft);
}
.room-card.reserved strong,
.room-card.reserved span {
  color: #5e4273;
  font-weight: 800;
}