/* Client Sessions filter pills. One rule for every pill: outlined in its own
   color, filled with white text when it's the one you're on. Live sessions is
   a friendly coral with a dot that always blinks.
   Design: "Client Sessions · Active pill" (Pencil), approved 2026-10-05. */
.session-pill {
  --pill: #6b6155;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.125rem 0.75rem;
  border: 1px solid var(--pill);
  border-radius: 9999px;
  color: var(--pill);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.5rem;
  white-space: nowrap;
}
.session-pill[aria-current="page"] {
  background: var(--pill);
  color: #fff;
  font-weight: 700;
}
.session-pill--live             { --pill: #f0564a; font-weight: 600; }
.session-pill--all              { --pill: #2563eb; }
.session-pill--current_month    { --pill: #7c3aed; }
.session-pill--previous_month   { --pill: #db2777; }
.session-pill--previous_quarter { --pill: #b45309; }
.session-pill--deleted          { --pill: #6b6155; }
.session-pill--date_range       { --pill: #15803d; }
.live-badge__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background: currentColor;
}
@media (prefers-reduced-motion: no-preference) {
  .live-badge__dot {
    animation: live-badge-blink 2s steps(1, end) infinite;
  }
}
@keyframes live-badge-blink {
  50% { opacity: 0; }
}

/* "Add a session" (card #500): the shift a DSP forgot to clock in, entered
   from the office. A centered dialog on a computer, the whole screen with a
   teal Back header on a phone. Design: design_card500.pen, "#500 · Add
   session modal · 1280", "#500 · Add session · 390" and "#500 · Add session
   modal · can't save (overlap)", signed off for the card. */
.add-session-button {
  height: 2.75rem;
  padding-inline: 1.25rem;
  font-size: 0.9375rem;
  font-weight: 600;
}

.add-session-dialog__box {
  width: 100%;
  max-width: 37.5rem;
  max-height: 92vh;
  padding: 0;
  border-radius: 1rem;
  background: #fefbf7;
  display: flex;
  flex-direction: column;
}
.add-session-dialog__mobile-header { display: none; }

.add-session {
  --ink: #102a32;
  --ink-soft: rgb(16 42 50 / 0.7);
  --ink-faint: rgb(16 42 50 / 0.5);
  --line: rgb(16 42 50 / 0.12);
  --field-line: rgb(16 42 50 / 0.2);
  --paper: #fefbf7;
  --sand: #f5f0e8;

  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
  color: var(--ink);
}
.add-session__body {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 1.5rem;
  overflow-y: auto;
  min-height: 0;
}
.add-session__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.add-session__title-block { display: flex; flex-direction: column; gap: 0.25rem; }
.add-session__title { font-size: 1.5rem; font-weight: 800; color: var(--ink); }
.add-session__subtitle { font-size: 0.875rem; color: var(--ink-soft); }
.add-session__close { font-size: 0.8125rem; font-weight: 600; color: var(--ink-soft); white-space: nowrap; cursor: pointer; }

.add-session__error {
  display: flex;
  gap: 0.625rem;
  padding: 0.75rem 0.875rem;
  border: 1px solid #f5b5b5;
  border-radius: 0.625rem;
  background: #fde8e8;
  color: #7a1a12;
  font-size: 0.875rem;
}
.add-session__error-icon { width: 1.125rem; height: 1.125rem; flex-shrink: 0; margin-top: 0.0625rem; }
.add-session__error-title { font-weight: 700; margin-bottom: 0.125rem; }

.add-session__section {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background: var(--sand);
}
.add-session__section-title {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.add-session__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.add-session__field { display: flex; flex-direction: column; gap: 0.375rem; min-width: 0; }
.add-session__label { font-size: 0.875rem; font-weight: 500; color: var(--ink-soft); }
.add-session__input {
  width: 100%;
  height: 2.5rem;
  border: 1px solid var(--field-line);
  border-radius: 0.5rem;
  background-color: var(--paper);
  font-size: 0.875rem;
  color: var(--ink);
}
.add-session__input--refused { border-color: #d92d20; }
.add-session__note { height: 6rem; padding: 0.75rem; }

.add-session__types { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.add-session__type {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  height: 2.25rem;
  padding-inline: 0.875rem;
  border: 1px solid var(--field-line);
  border-radius: 9999px;
  background: var(--paper);
  color: var(--ink-soft);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;

  &:has(:checked) { border-color: #15803d; background: #f0fdf4; color: #15803d; font-weight: 600; }
  &:has(:focus-visible) { outline: 2px solid #15803d; outline-offset: 2px; }
}

.add-session__length { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--ink-soft); }
.add-session__overnight {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  height: 1.5rem;
  padding-inline: 0.625rem;
  border-radius: 9999px;
  background: #e9e6f7;
  color: #4c3d99;
  font-size: 0.75rem;
  font-weight: 600;
}
.add-session__length[hidden], .add-session__overnight[hidden] { display: none; }

.add-session__no-location { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--ink-soft); }

.add-session__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.875rem 1.5rem;
  border-top: 1px solid var(--line);
  background: var(--sand);
  border-radius: 0 0 1rem 1rem;
}
.add-session__entered-by { display: flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; color: var(--ink-faint); }
.add-session__actions { display: flex; gap: 0.5rem; }
.add-session__cancel { height: 2.5rem; color: var(--ink-soft); font-weight: 600; }
.add-session__submit { height: 2.5rem; padding-inline: 1.125rem; border-radius: 0.625rem; font-weight: 600; }

@media (max-width: 1023px) {
  .add-session-dialog__box {
    max-width: none;
    width: 100%;
    height: 100dvh;
    max-height: none;
    border-radius: 0;
  }
  .add-session-dialog__mobile-header {
    display: flex;
    flex-shrink: 0;
    padding: 0.75rem;
    background: #13323c;
    color: #f8f5ef;

    button { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.875rem; font-weight: 600; cursor: pointer; }
  }
  .add-session__footer { border-radius: 0; }
}

@media (max-width: 640px) {
  .add-session__body { padding: 1.25rem 1rem; }
  .add-session__title { font-size: 1.375rem; }
  .add-session__row--stack { grid-template-columns: 1fr; }
  .add-session__types { flex-direction: column; }
  .add-session__type { height: 2.75rem; }
  .add-session__footer { flex-direction: column; align-items: stretch; padding: 1rem; }
  .add-session__actions > * { flex: 1; height: 3rem; }
  .add-session-button { width: 100%; height: 3rem; font-size: 1rem; }
}