/* Agency settings: one card with the tabs down the left and the open tab's
   settings on the right. On a phone the tabs sit in rows above. */

.agency-settings {
  --settings-border: #e6e0d6;
  --settings-hairline: #efeae1;
  --settings-ink: #15302e;
  --settings-text: #3d4a49;
  --settings-muted: #8a938f;
  --settings-green: #2f7d4f;
  --settings-green-soft: #e8f2ea;
  --settings-blue: #2b5aa8;
  --settings-blue-soft: #e6eefb;
  --settings-amber: #b45309;
  --settings-amber-soft: #fef3c7;
  --settings-raised: #faf8f4;
  --settings-line-strong: #d8d1c4;

  color: var(--settings-ink);
}

.agency-settings__title {
  margin-bottom: 1.25rem;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
}

.agency-settings__card {
  display: grid;
  grid-template-columns: 14.5rem minmax(0, 1fr);
  border: 1px solid var(--settings-border);
  border-radius: 1rem;
  background: #fff;

  @media (width < 768px) {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* The tabs. */
.agency-settings__tabs {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1.25rem 1rem;
  border-right: 1px solid var(--settings-hairline);

  @media (width < 768px) {
    flex-direction: row;
    flex-wrap: wrap;
    padding: 0.75rem;
    border-right: 0;
    border-bottom: 1px solid var(--settings-hairline);
  }
}
.agency-settings__tab {
  display: flex;
  align-items: baseline;
  flex-shrink: 0;
  padding: 0.625rem 1rem;
  border-radius: 0.625rem;
  font-size: 1.0625rem;
  color: var(--settings-text);
  white-space: nowrap;

  &:hover { background: var(--settings-raised); }
  &[aria-current="page"] {
    background: var(--settings-green-soft);
    font-weight: 600;
    color: var(--settings-green);
  }
}

/* Overview and Audit trail are for super admins; a small grey tag says so. */
.agency-settings__tag {
  margin-left: auto;
  padding-left: 0.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--settings-muted);
}

/* The open tab. */
.agency-settings__pane {
  min-width: 0;
  padding: 2rem 2rem 2.5rem;

  @media (width < 768px) {
    padding: 1.25rem 1rem 1.5rem;
  }
}
.agency-settings__form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.agency-settings__head {
  margin-bottom: 0.25rem;
}
.agency-settings__heading {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.25;
}
.agency-settings__intro {
  margin-top: 0.375rem;
  font-size: 1.0625rem;
  color: var(--settings-text);
}
.agency-settings__errors ul {
  margin-left: 1.25rem;
  list-style: disc;
}

.agency-settings__field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  max-width: 35rem;

  &[hidden] { display: none; }
}
.agency-settings__label {
  font-size: 0.9375rem;
  font-weight: 600;
}
.agency-settings__input {
  width: 100%;
}
/* Boxes to type in are white with a soft border, like the rest of the new
   admin pages. */
.agency-settings :is(.input, .select, .textarea) {
  border-color: #d8d1c4;
  background-color: #fff;
}
.agency-settings__hint {
  font-size: 0.875rem;
  color: var(--settings-muted);
}
.agency-settings__save {
  border-radius: 999px;
  padding-inline: 1.5rem;
}

/* A soft panel at the top of a tab. */
.agency-settings__panel {
  padding: 1.5rem;
  border: 1px solid var(--settings-border);
  border-radius: 1rem;
  background: var(--settings-raised);
}

/* Your agency: the logo, the main color and the top of the app in it. */
.agency-brand {
  display: flex;
  gap: 1.5rem;
  padding: 1.5rem;
  border: 1px solid var(--settings-border);
  border-radius: 1rem;
  background: var(--settings-raised);

  @media (width < 640px) {
    flex-direction: column;
  }
}
.agency-brand__logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.625rem;
  cursor: pointer;

  &:focus-within .agency-brand__change { text-decoration: underline; }
}
.agency-brand__tile {
  display: grid;
  place-items: center;
  width: 5.5rem;
  height: 5.5rem;
  overflow: hidden;
  border-radius: 1rem;
  background: var(--brand-color);
  color: #fff;

  img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
  svg { width: 2.25rem; height: 2.25rem; }
  img[hidden], svg[hidden] { display: none; }
}
.agency-brand__change {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--settings-green);
}
.agency-brand__color {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.625rem;
  min-width: 0;
}
.agency-brand__picker {
  width: 4rem;
  height: 2.5rem;
  padding: 0.125rem;
  border: 1px solid var(--settings-line-strong);
  border-radius: 0.5rem;
  background: #fff;
  cursor: pointer;
}
.agency-brand__bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 2.75rem;
  padding: 0.5rem 1rem;
  border-radius: 0.625rem;
  background: var(--brand-color);
  font-weight: 600;
  color: #fff;
}
.agency-brand__bar-tile {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 0.375rem;
  background: rgb(255 255 255 / 0.25);
}

/* Pay periods: the pay period running today. */
.agency-pay-period__eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--settings-muted);
}
.agency-pay-period__dates {
  margin: 0.5rem 0 0.375rem;
  font-size: 1.5rem;
  font-weight: 700;
}

/* Pay periods: rebuilding them, under a line, for super admins. */
.agency-pay-period__rebuild {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--settings-hairline);
}
.agency-pay-period__rebuild-button {
  padding: 0.5rem 1.25rem;
  border: 1px solid var(--settings-line-strong);
  border-radius: 999px;
  background: #fff;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;

  &:hover { background: var(--settings-raised); }
}

/* Referral bonus: the rule as one sentence with two number boxes. */
.agency-referral {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;

  &[hidden] { display: none; }
}

/* Pay a referral bonus: the title and what on or off means, the switch on the right. */
.agency-referral__switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-radius: 0.875rem;
  background: var(--settings-raised);
  cursor: pointer;
}
.agency-referral__switch-title {
  display: block;
  font-size: 1.0625rem;
  font-weight: 600;
}
.agency-referral__switch-status {
  display: block;
  font-size: 0.9375rem;
  color: var(--settings-text);

  &[hidden] { display: none; }
}

/* The amount and the rule, each written as a sentence. */
.agency-referral__rules {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem;
  border: 1px solid var(--settings-border);
  border-radius: 0.875rem;
}
.agency-referral__rule {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  font-size: 1.0625rem;
}
.agency-referral__dollars {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--settings-text);
}
.agency-referral__number {
  width: 5.5rem;
  font-weight: 700;
  text-align: center;
}

.agency-referral__tracking {
  border: 0;

  ul {
    margin-top: 0.375rem;
    margin-left: 1.25rem;
    list-style: disc;
    color: var(--settings-text);
  }
  li + li { margin-top: 0.25rem; }
}
.agency-referral__tracking-title {
  font-weight: 600;
}

.agency-referral__now {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--settings-amber);
}
.agency-referral__off {
  font-size: 1rem;
  color: var(--settings-text);

  &[hidden] { display: none; }
}

/* Connected apps: one card each; Change opens its settings. */
.agency-apps {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1.25rem;
}
.agency-app {
  border: 1px solid var(--settings-border);
  border-radius: 1rem;
  background: var(--settings-raised);
}
.agency-app__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  cursor: pointer;
  list-style: none;

  &::-webkit-details-marker { display: none; }
}
.agency-app__icon {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid var(--settings-border);
  border-radius: 0.75rem;
  background: #fff;
  color: var(--settings-green);

  svg { width: 1.375rem; height: 1.375rem; }
}
.agency-app__about {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 12rem;
}
.agency-app__name {
  font-size: 1.0625rem;
  font-weight: 600;
}
.agency-app__line {
  font-size: 0.9375rem;
  color: var(--settings-muted);
}
.agency-app__status {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: var(--settings-amber-soft);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--settings-amber);

  &::before {
    content: "";
    width: 0.4375rem;
    height: 0.4375rem;
    border-radius: 50%;
    background: currentColor;
  }
}
.agency-app__status--on {
  background: var(--settings-green-soft);
  color: var(--settings-green);
}
.agency-app__change {
  padding: 0.375rem 1.125rem;
  border: 1px solid var(--settings-line-strong);
  border-radius: 999px;
  background: #fff;
  font-size: 0.9375rem;
  font-weight: 600;
}
.agency-app[open] .agency-app__change { visibility: hidden; }
.agency-app__fields {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 0 1.5rem 1.5rem;
}

/* Onboarding: the steps as soft cards in their order. */
.agency-steps__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
}
.agency-steps__buttons {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.agency-steps__retired-button {
  font-size: 0.9375rem;
  color: var(--settings-muted);
  cursor: pointer;

  &:hover { color: var(--settings-ink); }
}
/* A quiet green link, like "Add a note →" on the DSP page. */
.agency-steps__add {
  color: #5b8a6c;
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;

  &:hover { color: #2e7d4f; text-decoration: underline; }
}
.agency-steps__list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

/* One step. While it is dragged, a green line shows where it will land. */
.agency-step {
  position: relative;
  display: grid;
  grid-template-columns: 1.25rem 2.25rem minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 1rem;
  padding: 0.875rem 1rem 0.875rem 1.25rem;
  border: 1px solid var(--settings-border);
  border-radius: 1rem;
  background: var(--settings-raised);
  cursor: grab;

  &.is-dragging {
    box-shadow: 0 0.5rem 1.25rem rgb(20 40 38 / 0.18);
    opacity: 0.95;
  }
  &[data-drop]::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: 2px;
    background: var(--settings-green);
  }
  &[data-drop=before]::before { top: -0.4375rem; }
  &[data-drop=after]::before { bottom: -0.4375rem; }
}
.agency-step__grip {
  width: 1.125rem;
  height: 1.125rem;
  color: var(--settings-muted);
}
.agency-step__number {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--settings-line-strong);
  border-radius: 50%;
  background: #fff;
  font-weight: 600;
}
.agency-step__about {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}
.agency-step__name {
  font-size: 1.0625rem;
  font-weight: 600;
}
.agency-step__line {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  color: var(--settings-muted);
  text-align: left;

  svg { flex-shrink: 0; width: 1rem; height: 1rem; }
}
.agency-step__line--email {
  color: var(--settings-green);
}
a.agency-step__line,
button.agency-step__line {
  cursor: pointer;

  &:hover { text-decoration: underline; }
}

/* Who handles the step, in that role's color. */
.agency-step__role {
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: var(--settings-green-soft);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--settings-green);
}
.agency-step__role--training-admin {
  background: var(--settings-blue-soft);
  color: var(--settings-blue);
}
.agency-step__role--billing-admin {
  background: var(--settings-amber-soft);
  color: var(--settings-amber);
}

/* The lock switch: filled green with a lock when needed to clock in. */
.agency-step__needed {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  min-width: 10rem;
  padding: 0.375rem 0.875rem;
  border: 1px solid var(--settings-line-strong);
  border-radius: 999px;
  background: #fff;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--settings-muted);
  cursor: pointer;

  svg { width: 1rem; height: 1rem; }
  &[aria-checked=true] {
    border-color: var(--settings-green);
    background: var(--settings-green);
    color: #fff;
  }
  &:focus-visible { outline: 2px solid var(--settings-green); outline-offset: 3px; }
}

.agency-step__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.agency-step__menu {
  position: relative;

  summary {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    color: var(--settings-text);
    cursor: pointer;
    list-style: none;

    &::-webkit-details-marker { display: none; }
    &:hover { background: #fff; }
    svg { width: 1.125rem; height: 1.125rem; }
  }
}
.agency-step__menu-list {
  position: absolute;
  right: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  min-width: 10rem;
  padding: 0.375rem;
  border: 1px solid var(--settings-border);
  border-radius: 0.75rem;
  background: #fff;
  box-shadow: 0 0.5rem 1.25rem rgb(20 40 38 / 0.12);

  button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.9375rem;
    text-align: left;
    cursor: pointer;

    &:hover { background: var(--settings-raised); }
    svg { width: 1rem; height: 1rem; }
  }
}

/* With a mouse the steps are dragged; on a touch screen each has arrows. */
.agency-step__move {
  display: none;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--settings-border);
  border-radius: 0.5rem;
  background: #fff;
  color: var(--settings-text);
  cursor: pointer;

  svg { width: 1.125rem; height: 1.125rem; }
  &:focus-visible { outline: 2px solid var(--settings-green); outline-offset: 2px; }
}
/* Nowhere to go: the first step cannot go up, the last cannot go down. */
.agency-step:first-child .agency-step__move--up,
.agency-step:last-child .agency-step__move--down {
  opacity: 0.35;
  pointer-events: none;
}
@media (pointer: coarse) {
  .agency-step { cursor: default; }
  .agency-step__grip { visibility: hidden; }
  .agency-step__move { display: grid; }
}

/* On a phone each step stacks: number and name, then its role and switch. */
@media (width < 900px) {
  .agency-step {
    grid-template-columns: 1.25rem 2.25rem minmax(0, 1fr) auto;
    grid-template-areas:
      "grip number about actions"
      ".    .      role  role"
      ".    .      needed needed";
    row-gap: 0.625rem;
  }
  .agency-step__grip { grid-area: grip; }
  .agency-step__number { grid-area: number; }
  .agency-step__about { grid-area: about; }
  .agency-step__role { grid-area: role; justify-self: start; }
  .agency-step__needed { grid-area: needed; justify-self: start; }
  .agency-step__actions { grid-area: actions; }
}

.agency-steps__retired {
  margin-top: 0.75rem;

  li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--settings-hairline);
  }
}

/* Overview: the agency's numbers at a glance and the latest shifts. */
.agency-overview {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1.5rem;
}
.agency-overview__eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--settings-muted);
}
.agency-overview__numbers {
  display: grid;
  gap: 1rem 1.75rem;
  margin-bottom: 0.75rem;

  div { display: flex; flex-direction: column-reverse; justify-content: flex-end; }
  dt { font-size: 0.9375rem; color: var(--settings-text); }
  dd { font-size: 2rem; font-weight: 700; line-height: 1.15; }
}
.agency-overview__numbers--people {
  grid-template-columns: repeat(auto-fill, minmax(7rem, max-content));
}
.agency-overview__numbers--week {
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
}
.agency-overview__numbers .agency-overview__waiting { color: var(--settings-amber); }
.agency-overview__numbers .agency-overview__link {
  order: -1;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--settings-green);

  a:hover { text-decoration: underline; }
}
.agency-overview__shifts li {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 0;
  border-top: 1px solid var(--settings-hairline);

  @media (width < 640px) {
    grid-template-columns: 4rem minmax(0, 1fr) auto;
    span:nth-child(3) { display: none; }
  }
}
.agency-overview__date { color: var(--settings-muted); }
.agency-overview__dsp { font-weight: 600; }
.agency-overview__status {
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: #f1efea;
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
}

/* Audit trail: when, who, and what they changed, newest first. */
.agency-audit {
  margin-top: 1.5rem;

  li {
    display: grid;
    grid-template-columns: 10rem minmax(0, 1fr);
    gap: 1rem;
    padding: 1rem 0;
    border-top: 1px solid var(--settings-hairline);

    @media (width < 640px) {
      grid-template-columns: minmax(0, 1fr);
      gap: 0.25rem;
    }
  }
}
.agency-audit__when {
  font-size: 0.9375rem;
  color: var(--settings-muted);
}
.agency-audit__who { font-weight: 600; }
.agency-audit__what { color: var(--settings-text); }
.agency-audit__empty { margin-top: 1.5rem; }