/* Billing Dashboard: the four billing steps, one list, each opening to show
   its own sentence, tools and list of shifts, and step 4 "Reconcile" with
   its tabs. Design: the approved "each step its own list" frames. */

/* Step 5, Clean SEFind file, is optional and sits apart from the four. */
.billing-steps {
  margin-bottom: 2.25rem;
}

.billing-steps__header {
  margin-bottom: 0.25rem;
}

/* "Billing for Oct 28 – Nov 10" over "0 of 4 steps done · …", with Sync
   client primes on the right. */
.billing-steps__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
}

.billing-steps__window {
  font-size: 1.0625rem;
  font-weight: 700;
}

.billing-steps__done {
  margin-left: 0.75rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-primary);
}

/* How many of the four steps are clear. The view hands over the share. */
.billing-steps__progress {
  position: relative;
  height: 0.25rem;
  margin: 0.75rem 0 0.25rem;
  border-radius: 9999px;
  background: var(--color-base-300);
  overflow: hidden;

  &::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--share, 0%);
    border-radius: inherit;
    background: var(--color-primary);
    transition: width 0.3s ease;
  }
}

/* --- One step ---------------------------------------------------------- */

.billing-step {
  margin-top: 0.625rem;
  /* "Done — next" scrolls the next step into view: clear the sticky top bar
     (its live height) so the step's title lands in full view. */
  scroll-margin-top: calc(var(--app-header-h, 4rem) + 1rem);
  border: 1px solid var(--color-base-300);
  border-radius: 14px;
  background: var(--color-base-100);

  &[open] {
    border-color: color-mix(in oklch, var(--color-primary) 35%, transparent);
    box-shadow: 0 2px 10px rgb(0 0 0 / 0.05);
  }
}

.billing-step__head {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.875rem 1rem;
  cursor: pointer;
  list-style: none;
  border-radius: 14px;
  user-select: none;

  &::-webkit-details-marker { display: none; }

  .billing-step[open] > & {
    background: color-mix(in oklch, var(--color-primary) 9%, transparent);
    border-radius: 13px 13px 0 0;
    border-bottom: 1px solid color-mix(in oklch, var(--color-primary) 20%, transparent);
  }

  &:hover .billing-step__toggle {
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-primary) 20%, transparent);
  }
}

.billing-step__number {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 9999px;
  background: var(--color-primary);
  color: var(--color-primary-content);
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}


.billing-step__words {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.billing-step__title {
  font-size: 0.9375rem;
  font-weight: 700;
}

.billing-step__status {
  margin-top: 1px;
  font-size: 0.8125rem;
  color: color-mix(in oklch, var(--color-base-content) 60%, transparent);

  /* An open step says the same thing in fuller words inside, so the short
     line hides rather than repeat it. */
  .billing-step[open] & { display: none; }
}

.billing-step__count {
  display: none;
  flex-shrink: 0;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border: 1px solid var(--color-base-300);
  border-radius: 9999px;
  background: var(--color-base-100);
  color: var(--color-primary);
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;

  @media (min-width: 640px) { display: inline-flex; }
}

/* The big labelled toggle: outlined "Open ⌄" while closed, solid "Close ⌃"
   while open. */
.billing-step__toggle {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  height: 2.375rem;
  padding: 0 1rem 0 0.875rem;
  border: 2px solid var(--color-primary);
  border-radius: 9999px;
  background: var(--color-base-100);
  color: var(--color-primary);
  font-size: 0.875rem;
  font-weight: 700;
  white-space: nowrap;

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

  .billing-step[open] & {
    background: var(--color-primary);
    color: var(--color-primary-content);
  }
}

.billing-step__open,
.billing-step__close {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.billing-step__close,
.billing-step[open] .billing-step__open { display: none; }
.billing-step[open] .billing-step__close { display: inline-flex; }

.billing-step__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
}

/* The one longer sentence at the top of an open step, with the step's green
   button (and the words beside it) on the right. */
.billing-step__intro {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  padding: 1rem 1.25rem;

  @media (max-width: 700px) {
    padding: 0.875rem 1rem;
    .btn { width: 100%; }
  }
}

.billing-step__sentence {
  font-size: 0.875rem;
  color: color-mix(in oklch, var(--color-base-content) 65%, transparent);
}

.billing-step__action {
  display: flex;
  align-items: center;
  gap: 0.75rem;

  @media (max-width: 700px) { width: 100%; }
}

.billing-step__beside {
  font-size: 0.875rem;
  white-space: nowrap;
  color: color-mix(in oklch, var(--color-base-content) 50%, transparent);
}

/* The short line over a step's table saying what its rows are. */
.billing-step__note {
  padding: 0.75rem 1.25rem 0.5rem;
  font-size: 0.8125rem;
  font-style: italic;
  color: color-mix(in oklch, var(--color-base-content) 50%, transparent);
}

/* "Not billed · 3" over its own list in step 2. */
.billing-step__subhead {
  padding: 1rem 1.25rem 0.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
}

/* A list's frame keeps the height it had while a page or a tab turns
   (hold-still measures it and hands it over), so shorter content never lets
   the document shrink and pull the page down the screen. */
turbo-frame#billing-table-area,
turbo-frame[id^="billing-list-"],
turbo-frame#reconcile-lists {
  display: block;
  min-height: var(--held-height, auto);
}

/* Step 3's shifts wait under a quiet green toggle, like the SEFind link:
   "See shifts in the CSV · EXP-2026-1110-A · 20 shifts", the chevron turning
   up while the list is open. */
.billing-csv__toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  list-style: none;
  cursor: pointer;
  color: var(--color-primary);
  font-size: 0.9375rem;
  font-weight: 600;

  &::-webkit-details-marker { display: none; }
}
.billing-csv__label { text-decoration: underline; text-underline-offset: 3px; }
.billing-csv__icon,
.billing-csv__chevron { width: 1.0625rem; height: 1.0625rem; flex: none; }
.billing-csv__chevron { transition: transform 150ms; }
.billing-csv[open] .billing-csv__chevron { transform: rotate(180deg); }
/* "Downloaded today at 9:14 AM by Denise Harrington", quiet under the toggle. */
.billing-csv__downloaded {
  padding: 0 1.25rem 0.75rem 1.5rem;
  font-size: 0.875rem;
  color: color-mix(in oklch, var(--color-base-content) 60%, transparent);
}

/* A person's name in the table stays on one line: "Pia Lindgren", never
   "Pia" over "Lindgren". */
.billing-list__name {
  white-space: nowrap;
}

/* The Flags column keeps room for a badge to read in a line or two, and
   Actions takes only what its button needs, so neither squeezes the other. */
.billing-list__flags { min-width: 15rem; }
.billing-list__actions { width: 1%; white-space: nowrap; }

/* Step 3's "In CSV" column: the download a shift went out in. */
.billing-download__when {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-primary);
}

.billing-download__code {
  display: block;
  font-size: 0.71875rem;
  white-space: nowrap;
  color: color-mix(in oklch, var(--color-base-content) 45%, transparent);

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

.billing-step__where {
  font-size: 0.8125rem;
  color: color-mix(in oklch, var(--color-base-content) 55%, transparent);
}

@media (max-width: 700px) {
  .billing-step__head { gap: 0.625rem; padding: 0.75rem; }
  .billing-step__toggle { height: 2.25rem; padding: 0 0.75rem; }
  .billing-step__foot { flex-direction: column-reverse; align-items: stretch; }
  .billing-step__foot .btn { width: 100%; }
}

/* --- Step 4: Reconcile -------------------------------------------------- */

.reconcile {
  padding: 1rem;

  @media (max-width: 700px) { padding: 0.75rem; }
}

.reconcile__intro {
  margin-bottom: 0.75rem;
  font-size: 0.875rem;
  color: color-mix(in oklch, var(--color-base-content) 70%, transparent);
}

.reconcile__drop {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.125rem 1.375rem;
  border: 2px dashed color-mix(in oklch, var(--color-primary) 60%, transparent);
  border-radius: 1rem;
  background: color-mix(in oklch, var(--color-primary) 5%, transparent);
  cursor: pointer;
  transition: background-color 0.15s ease;

  &:hover,
  &[data-dragging="true"] { background: color-mix(in oklch, var(--color-primary) 12%, transparent); }

  @media (max-width: 700px) {
    flex-direction: column;
    text-align: center;
  }
}

.reconcile__drop-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  border-radius: 9999px;
  background: var(--color-base-100);
  color: var(--color-primary);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.08);
}

.reconcile__drop-words { flex: 1; display: flex; flex-direction: column; }
.reconcile__drop-title { font-size: 1rem; font-weight: 700; }
.reconcile__choose { color: var(--color-primary); font-weight: 600; text-decoration: underline; }

.reconcile__meta {
  font-size: 0.8125rem;
  color: color-mix(in oklch, var(--color-base-content) 60%, transparent);
}

.reconcile__meta--small { font-size: 0.75rem; }

.reconcile__last {
  margin-top: 0.875rem;
  text-align: right;
  font-size: 0.8125rem;
  color: color-mix(in oklch, var(--color-base-content) 60%, transparent);
}

.reconcile__empty {
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  color: color-mix(in oklch, var(--color-base-content) 60%, transparent);
}

.reconcile__quiet-button {
  border: 1px solid var(--color-base-300);
  background: var(--color-base-100);
  text-transform: none;
  letter-spacing: normal;
}

/* Step 4's tabs and the one table under them. */
.reconcile__lists {
  padding: 0 1.25rem;

  .billing-tabs { margin: 0.5rem 0 0; padding: 0; }

  @media (max-width: 700px) { padding: 0 1rem; }
}

/* Pop-overs: the "Clear old items" box, the "More" menu and the shift picker. */
.reconcile__popover {
  position: relative;

  > summary { list-style: none; }
  > summary::-webkit-details-marker { display: none; }
}

/* Placed under its button by the popover controller, which measures it. */
.reconcile__popover-panel {
  position: fixed;
  right: var(--right, 1rem);
  top: var(--top, 6rem);
  z-index: 30;
  width: 16.25rem;
  max-width: calc(100vw - 1rem);
  border: 1px solid var(--color-base-300);
  border-radius: 10px;
  background: var(--color-base-100);
  box-shadow: 0 10px 28px rgb(0 0 0 / 0.16);
  text-align: left;
  font-size: 0.84375rem;
  white-space: normal;
}

.reconcile__popover-panel--wide { width: min(22.5rem, 90vw); }

/* The shift picker floats beside the menu instead of growing it; on a
   phone, where there is no room beside it, over it. */
.reconcile__popover--inner > .reconcile__popover-panel {
  position: absolute;
  top: 0;
  right: calc(100% + 6px);
  width: min(18.75rem, 80vw);
  max-height: 22rem;
  overflow-y: auto;

  @media (max-width: 700px) { right: 0; top: 100%; }
}

.reconcile__menu-note {
  padding: 0.5625rem 0.875rem;
  font-size: 0.75rem;
  color: color-mix(in oklch, var(--color-base-content) 60%, transparent);
}

.reconcile__menu-item {
  display: block;
  width: 100%;
  padding: 0.5625rem 0.875rem;
  border-top: 1px solid var(--color-base-200);
  font-weight: 600;
  text-align: left;
  cursor: pointer;

  &:hover { background: var(--color-base-200); }
}

.reconcile__menu-item--quiet {
  color: color-mix(in oklch, var(--color-base-content) 60%, transparent);
}

.reconcile__picker-search {
  padding: 0.5rem;
  border-bottom: 1px solid var(--color-base-200);
}

.reconcile__picker-item {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0.5rem 0.75rem;
  border-top: 1px solid var(--color-base-200);
  text-align: left;
  cursor: pointer;

  &:hover { background: var(--color-base-200); }
}

.reconcile__picker-item--same {
  background: color-mix(in oklch, var(--color-primary) 10%, transparent);
}

.reconcile__picker-foot {
  padding: 0.5rem 0.75rem;
  border-top: 1px solid var(--color-base-200);
  font-size: 0.75rem;
  color: color-mix(in oklch, var(--color-base-content) 60%, transparent);
}

.reconcile__clearing { padding: 1rem; }
.reconcile__clearing-title { font-size: 0.9375rem; font-weight: 700; margin-bottom: 0.125rem; }

.reconcile__field {
  display: block;
  flex: 1;
  margin-top: 0.625rem;

  > span {
    display: block;
    margin-bottom: 0.1875rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: color-mix(in oklch, var(--color-base-content) 60%, transparent);
  }
}

.reconcile__field-row { display: flex; gap: 0.625rem; }

.reconcile__clearing-count {
  margin-top: 0.875rem;
  padding: 0.625rem 0.75rem;
  border-radius: 8px;
  background: oklch(97% 0.04 85);
  font-weight: 600;
}

.reconcile__clearing-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.875rem;
}

/* --- Step 4's lists the admin acts on ---------------------------------- */

.needs-you {
  overflow: visible;
}

.needs-you__scroll { overflow-x: auto; }

.needs-you__table {
  width: 100%;
  min-width: 51.25rem;
  border-collapse: collapse;
  font-size: 0.84375rem;

  th {
    padding: 0.625rem 0.5rem;
    background: var(--color-base-200);
    text-align: left;
    white-space: nowrap;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: color-mix(in oklch, var(--color-base-content) 55%, transparent);
  }

  td {
    padding: 0.75rem 0.5rem;
    border-top: 1px solid var(--color-base-200);
    vertical-align: top;
  }
}

/* "Clear old items", in the header row's own case and size. */
.needs-you__clear {
  text-transform: none;
  letter-spacing: normal;
}

.needs-you__pick { width: 2.125rem; padding-left: 0.875rem !important; }
.needs-you__right { text-align: right !important; }
.needs-you__name { font-weight: 600; color: var(--color-primary); }
.needs-you__kept { font-weight: 700; }
.needs-you__table s { color: color-mix(in oklch, var(--color-base-content) 45%, transparent); }
.needs-you__row--picked { background: color-mix(in oklch, var(--color-primary) 6%, transparent); }

.needs-you__overnight {
  margin-top: 0.25rem;
  font-size: 0.75rem;
  color: oklch(50% 0.12 60);
}

.needs-you__tag {
  display: inline-block;
  padding: 0.125rem 0.625rem;
  border-radius: 9999px;
  background: color-mix(in oklch, var(--color-primary) 14%, transparent);
  color: var(--color-primary);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.needs-you__tag--grey {
  background: var(--color-base-200);
  color: color-mix(in oklch, var(--color-base-content) 70%, transparent);
}

.needs-you__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.375rem;
}

.needs-you__action-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
}

/* The dark bar that appears once rows are picked. */
.needs-you__bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.625rem;
  padding: 0.75rem 1rem;
  background: var(--color-base-content);
  color: var(--color-base-100);

  &.hidden { display: none; }
}

.needs-you__bar-link {
  font-size: 0.8125rem;
  text-decoration: underline;
  opacity: 0.85;
}

.needs-you__bar-second {
  background: var(--color-base-100);
  color: var(--color-base-content);
}

/* The green bar above the Not in DSP Sync table when lines look like shifts
   from a few days earlier: how many, and one button that accepts them all.
   On a phone the button sits under the words. */
.needs-you__earlier {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0.75rem 0 0.25rem;
  padding: 0.75rem 1rem;
  border: 1px solid color-mix(in oklch, var(--color-primary) 35%, transparent);
  border-radius: 0.75rem;
  background: color-mix(in oklch, var(--color-primary) 8%, var(--color-base-100));
  font-size: 0.9375rem;
  line-height: 1.45;

  & form { flex: none; }

  @media (max-width: 700px) {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
}

.needs-you__earlier-text { flex: 1; margin: 0; }

/* --- Changed by eXPRS --------------------------------------------------- */

.done-for-you__row { cursor: pointer; }
.done-for-you__row:hover { background: var(--color-base-200); }
.done-for-you__row--split { background: color-mix(in oklch, var(--color-info) 5%, transparent); }
.done-for-you__exprs-date { font-size: 0.8125rem; color: oklch(50% 0.12 60); }

.done-for-you__overnight {
  font-size: 0.75rem;
  font-weight: 600;
  color: oklch(45% 0.1 280);
}

/* Clean SEFind file: a helper tool, not a step, so it is a green text link
   under the four steps that opens in place. */
.sefind-tool { margin: 1.25rem 0 1.5rem; }
.sefind-tool__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  list-style: none;
  cursor: pointer;
  color: var(--color-primary);
  font-size: 0.9375rem;
  font-weight: 600;

  &::-webkit-details-marker { display: none; }
  svg { width: 1.0625rem; height: 1.0625rem; }
}
.sefind-tool__label { text-decoration: underline; text-underline-offset: 3px; }
.sefind-tool__chevron { transition: transform 150ms; }
.sefind-tool[open] .sefind-tool__chevron { transform: rotate(90deg); }
.sefind-tool__body { padding-top: 0.75rem; }

/* The page's top tabs sit flush left, so "eXPRS Billing" lines up with the
   title above and the steps below: the bar's padding and the first tab's own
   padding are pulled back by the same amount. */
.billing-tab-nav { margin-left: -1.25rem; }

/* Step 4's five tabs spread across the full width of the step on a computer;
   a phone keeps them side by side and scrolls. */
.reconcile__lists .billing-tabs {
  @media (min-width: 768px) {
    justify-content: space-between;
    gap: 1rem;
  }
}