/* The DSP's Clock In sheet and running Relief Care stay. */

/* Clock In sheet: the grabber a phone shows at the top of a bottom sheet. */
.clock-in-grabber {
  width: 2.5rem;
  height: 0.25rem;
  margin: 0 auto 0.875rem;
  border-radius: 2px;
  background: #d8d1c4;
}

/* Clock In sheet steps (card #449): who the DSP is with, then the service. */
.clock-in-sheet__step {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--color-base-content) 60%, transparent);
}

/* Each client keeps one of six colors (card #449): their photo ring and the
   arrow on their row wear it, so a DSP finds the right client at a glance.
   The colors are the client picker design's (client-selection-modal-theme-3). */
[data-client-color="0"] { --client-color: #2f80ed; }
[data-client-color="1"] { --client-color: #27ae60; }
[data-client-color="2"] { --client-color: #9b51e0; }
[data-client-color="3"] { --client-color: #e04f9c; }
[data-client-color="4"] { --client-color: #f2994a; }
[data-client-color="5"] { --client-color: #12a5a5; }

/* Step 1 of the Clock In sheet: who the DSP is with, after the operator's
   client picker design (client-selection-modal-theme-1). */
.clock-in-picker {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  color: #15302e;
}
.clock-in-picker__header {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0 0.25rem;
}
.clock-in-picker__eyebrow {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8a938f;
}
.clock-in-picker__title {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #15302e;
}
.clock-in-picker__group { padding: 0.375rem 0.25rem 0; }
.clock-in-picker__actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 0.375rem;

  form { width: 100%; }
  @media (min-width: 640px) { form { width: auto; } }
}
.clock-in-picker__cancel {
  width: 100%;
  height: 2.875rem;
  padding: 0 1.375rem;
  border: 1px solid #d8d1c4;
  border-radius: 0.5rem;
  background: #fff;
  color: #33474a;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;

  &:hover { background: #efeae2; }
  @media (min-width: 640px) { width: auto; height: 2.5rem; font-size: 0.875rem; }
}

/* Search narrows the list as the DSP types, by name or home. */
.clock-in-search {
  position: relative;
  display: flex;
  align-items: center;

  svg { position: absolute; left: 0.875rem; color: #8a938f; pointer-events: none; }
  input {
    width: 100%;
    height: 2.875rem;
    padding: 0 0.875rem 0 2.625rem;
    border: 1px solid #d8d1c4;
    border-radius: 0.5rem;
    background: #fff;
    font-size: 0.9375rem;
    color: #15302e;

    &::placeholder { color: #8a938f; }
    &:focus { outline: 2px solid #1f67a8; outline-offset: 1px; }
  }
}

.clock-in-clients {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.clock-in-client {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  width: 100%;
  min-height: 4rem;
  padding: 0.75rem 0.875rem 0.75rem 1rem;
  border: 1px solid color-mix(in srgb, var(--client-color) 38%, #fff);
  border-radius: 0.75rem;
  background: #fff;
  text-align: left;
  cursor: pointer;

  &:hover { border-color: var(--client-color); }
  &:focus-visible { outline: 3px solid var(--client-color); outline-offset: 2px; }
  &.hidden { display: none; }
}
.clock-in-client__chevron { flex-shrink: 0; color: var(--client-color); }
.clock-in-client__who {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  flex: 1;
  min-width: 0;
}
.clock-in-client__details {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}
.clock-in-client__name {
  font-size: 1rem;
  font-weight: 600;
  color: #15302e;
}
.clock-in-client__place {
  display: flex;
  align-items: center;
  gap: 0.3125rem;
  font-size: 0.75rem;
  color: #5c6b6a;
}
.clock-in-client__services {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  padding-top: 0.25rem;
}

/* The picker's own pills: smaller and outlined, beside the name. Hours left
   this week names each client's service the same way (card #426). */
:is(.clock-in-client__services, .hours-left__service) {
  .session-type {
    gap: 0.375rem;
    padding: 0.125rem 0.5rem;
    border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
    font-size: 0.6875rem;
    line-height: 1.3;
  }
  .session-type svg { width: 0.8125rem; height: 0.8125rem; }
  .session-type--attendant-care { color: #1b6b43; background: #ecf5ef; }
  .session-type--relief-care { color: var(--color-relief); background: var(--color-relief-soft); }
  .session-type--cen { color: #1f6e83; background: #e8f4f8; }
}

/* A client's photo, or their initials on cream, inside a ring in their color. */
.clock-in-avatar {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 3.25rem;
  height: 3.25rem;
  margin: 0.3125rem;
  overflow: hidden;
  border-radius: 9999px;
  background: #e8e2d8;
  box-shadow: 0 0 0 2px #fff, 0 0 0 5px var(--client-color);
  color: #33474a;
  font-size: 1.1875rem;
  font-weight: 700;
  letter-spacing: -0.01em;

  img { width: 100%; height: 100%; object-fit: cover; }
}

/* The sheet itself: a centered card on a computer, a bottom sheet on a phone. */
.clock-in-sheet {
  background: #fff;
  border-radius: 1.25rem 1.25rem 0 0;
  padding: 0.75rem 1rem 1.75rem;

  @media (min-width: 640px) {
    width: 32.5rem;
    max-width: calc(100vw - 2rem);
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: 0 12px 32px rgb(19 50 60 / 0.18);
  }
}
.modal:has(> .clock-in-sheet) { background-color: color-mix(in srgb, #0f2a32 55%, transparent); }

/* The client picked on step 1, carried onto step 2 in their color. */
.clock-in-chosen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 0.75rem;
  row-gap: 0.25rem;
  padding: 0.875rem;
  border: 1px solid #e6e0d6;
  border-radius: 0.75rem;
  background: #fff;

  strong { font-size: 1rem; font-weight: 600; color: #15302e; }
  .clock-in-avatar { width: 2.25rem; height: 2.25rem; font-size: 0.875rem; }
}

/* The sheet takes focus when it opens, so no client looks picked. */
.clock-in-sheet:focus { outline: none; }

/* Cancel and Clock In are soft, round pills on the sheet. */
.clock-in-sheet__button { min-height: 3rem; border-radius: 9999px; }

.clock-in-services {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Each service keeps its own color on the Clock In sheet — Attendant Care
   green, Relief Care lavender, CEN blue — so they read apart at a glance. */
.clock-in-service {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.875rem;
  border: 1px solid color-mix(in oklab, var(--service-color) 25%, var(--color-base-100));
  border-radius: 1.125rem;
  background: var(--service-soft);
  cursor: pointer;

  .radio { margin-top: 0.125rem; color: var(--service-color); border-color: color-mix(in oklab, var(--service-color) 45%, var(--color-base-100)); }
  .clock-in-service__title { color: var(--service-color); }

  &:has(:checked) {
    border-color: var(--service-color);
    box-shadow: inset 0 0 0 1px var(--service-color);

    .radio { border-color: var(--service-color); }
  }
}
.clock-in-service--attendant {
  --service-color: #15803d;
  --service-soft: #f0fdf4;
}
.clock-in-service--relief {
  --service-color: var(--color-relief);
  --service-soft: var(--color-relief-wash);
}
.clock-in-service--cen {
  --service-color: var(--color-cen);
  --service-soft: var(--color-cen-wash);
}
.clock-in-service[hidden] { display: none; }

/* Clock In takes the color of the service it starts. */
.clock-in-submit {
  --service-color: #15803d;
  background: var(--service-color);
  border-color: var(--service-color);
  color: #fff;
}
.clock-in-sheet:has(input[value="relief_care"]:checked) .clock-in-submit { --service-color: var(--color-relief); }
.clock-in-sheet:has(input[value="cen"]:checked) .clock-in-submit { --service-color: var(--color-cen); }
.clock-in-service__title {
  font-size: 0.875rem;
  font-weight: 600;
}

/* Relief Care days on the Clock In sheet: how many whole days, and when the
   last one ends (card #449). */
.clock-in-days {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-top: 0.625rem;
}
.clock-in-days__stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid color-mix(in oklab, var(--color-relief) 25%, var(--color-base-100));
  border-radius: 0.5rem;
  background: var(--color-base-100);

  button, output {
    display: inline-grid;
    place-items: center;
    width: 2.25rem;
    height: 2.125rem;
  }
  button { color: var(--color-relief); font-size: 1rem; cursor: pointer; }
  button:disabled { opacity: 0.35; cursor: default; }
  output { font-weight: 600; color: var(--color-base-content); }
}
.clock-in-days__ends { color: var(--color-relief); }
.clock-in-service:not(:has(:checked)) :is(.clock-in-days, .clock-in-days__ends) { display: none; }

/* The DSP's running Relief Care stay (card #449): no Clock Out, just the day
   it's on, when it ends, and Add 1 day / End early. */
.relief-care-stay {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  width: 100%;
  max-width: 28rem;
  padding: 1rem;
  border: 1px solid color-mix(in oklab, var(--color-relief) 25%, var(--color-base-100));
  border-radius: 0.75rem;
  background: var(--color-relief-wash);
  text-align: left;
}
.relief-care-stay__day {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-relief);
}
.relief-care-stay__add {
  background: var(--color-relief);
  border-color: var(--color-relief);
  color: #fff;
}
.relief-care-stay__reason {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--color-base-300);
  border-radius: 0.5rem;
  cursor: pointer;

  &:has(:checked) { border-color: var(--color-base-content); }
}