/* The calendar's toolbar and the day as a list (pages/calendar.html, js/pages/calendar.js). The columns themselves stay
   in pages.css. Simple first: the week as days to tap, the day in one line, whose day as a row of people, and on a
   phone the day as a list — now, next, the free windows to offer — instead of columns too narrow to read. */

/* ---------- the toolbar ---------- */
.cal-toolbar { display: grid; gap: 10px; padding: 10px 12px 12px; background: var(--bg); border-bottom: 1px solid var(--line); }
.cal-toolbar__top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cal-toolbar__top .daynav { flex: 1; justify-content: space-between; min-width: 0; }
.cal-view { flex: none; }
.cal-view button { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 10px; }
.cal-view .ic { flex: none; }

/* the week: seven days, the one shown filled, today in the signal colour, how many booked under each */
.cal-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-day {
  display: grid; justify-items: center; gap: 1px; min-width: 0; padding: 6px 0 5px; border: 1px solid transparent; border-radius: var(--radius-sm);
  background: none; color: var(--ink-2); font: inherit; cursor: pointer; transition: background .15s, border-color .15s;
}
.cal-day:hover { background: var(--surface); }
.cal-day__wd { font-size: 11px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
.cal-day__n { font-family: var(--font-display); font-size: 18px; font-weight: 600; line-height: 1.15; color: var(--ink); }
.cal-day__count { min-height: 15px; font-size: 11px; color: var(--ink-3); }
.cal-day__count:not(:empty)::before { content: "● "; font-size: 7px; vertical-align: 2px; color: var(--accent-text); }
.cal-day.is-past .cal-day__n { color: var(--ink-3); }
.cal-day.is-today { border-color: color-mix(in srgb, var(--signal) 45%, transparent); }
.cal-day.is-today .cal-day__wd { color: var(--signal); }
.cal-day[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.cal-day[aria-pressed="true"] .cal-day__n, .cal-day[aria-pressed="true"] .cal-day__count, .cal-day[aria-pressed="true"] .cal-day__wd { color: var(--accent-ink); }
.cal-day[aria-pressed="true"] .cal-day__count::before { color: var(--accent-ink); }

/* the day in one line */
.cal-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; font-size: 13.5px; color: var(--ink-2); }
.cal-sum__text { font-weight: 600; color: var(--ink); }
.cal-sum__bar { flex: 0 0 84px; height: 6px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.cal-sum__bar > span { display: block; width: calc(var(--load, 0) * 1%); height: 100%; border-radius: inherit; background: var(--accent); }

/* whose day */
.cal-people { display: flex; gap: 6px; margin: 0 -12px; padding: 0 12px 2px; overflow-x: auto; scrollbar-width: none; }
.cal-people::-webkit-scrollbar { display: none; }
.cal-person {
  flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 12px 0 4px; border: 1px solid var(--line-strong); border-radius: 99px;
  background: var(--bg); color: var(--ink); font: inherit; font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: background .15s, border-color .15s;
}
.cal-person:hover { border-color: var(--c, var(--ink-3)); }
.cal-person__av { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--c, var(--accent)); color: #fff; font-size: 10.5px; font-weight: 700; }
.cal-person__av > span:empty { display: none; }
.cal-person--all .cal-person__av { background: var(--surface-2); color: var(--ink-2); }
.cal-person[aria-pressed="true"] { border-color: var(--c, var(--accent)); background: color-mix(in srgb, var(--c, var(--accent)) 14%, var(--bg)); box-shadow: inset 0 0 0 1px var(--c, var(--accent)); }
.cal-person--all[aria-pressed="true"], .cal-people:not(:has([aria-pressed="true"])) .cal-person--all { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }

.cal-modes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

@media (min-width: 900px) {
  /* a computer's width: the date and the view on the left, the week on the right; the day's line and the people under */
  .cal-toolbar { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "top week" "sum people" "modes modes" "branches branches"; align-items: center; column-gap: 24px; padding: 12px 24px; }
  .cal-toolbar__top { grid-area: top; }
  .cal-toolbar__top .daynav { flex: none; }
  .cal-week { grid-area: week; width: 100%; max-width: 520px; justify-self: end; }
  .cal-sum { grid-area: sum; }
  .cal-people { grid-area: people; justify-self: end; max-width: 100%; margin: 0; padding: 0; }
  .cal-modes { grid-area: modes; }
  .cal-branches { grid-area: branches; }
}

/* one person's columns: the whole width is theirs */
.cal--one { --col-min: 240px; }
/* the client first in a block, the time under: the block's place already tells the time; a long block keeps the name in
   sight while it scrolls under the head (its own background over the lines it passes) */
/* clip, not hidden: a hidden overflow would make the block its own scroller and pin the name inside it */
.appt { overflow: clip; }
.appt:not(.is-short) .appt__client { order: -1; position: sticky; top: 41px; z-index: 1; background: inherit; }
.appt:not(.is-short) .appt__car { order: -2; }
.appt:not(.is-short) .appt__time { margin-top: 1px; }
/* a place, not a person: its icon on the column's head */
.avatar--staff .ic { width: 14px; height: 14px; }
.avatar--staff > span:empty { display: none; }

/* ---------- the day as a list ---------- */
.agenda { flex: 1; min-height: 0; overflow: auto; padding: 12px 12px 104px; background: var(--bg-app); background-image: var(--app-deco); overscroll-behavior: contain; }
.agenda > * { max-width: 760px; margin-left: auto; margin-right: auto; }

/* who is free soonest — tap to book them */
.ag-next-box { display: grid; gap: 10px; margin-bottom: 14px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); }
.ag-next-box__title { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.ag-next-box__title .ic { color: var(--ok); }
.ag-next-list { display: flex; gap: 6px; margin: 0 -12px; padding: 0 12px 2px; overflow-x: auto; scrollbar-width: none; }
.ag-next-list::-webkit-scrollbar { display: none; }
.ag-next {
  flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 12px 0 10px; border: 1px solid color-mix(in srgb, var(--ok) 30%, var(--line));
  border-radius: 99px; background: var(--ok-soft); color: var(--ink); font: inherit; font-size: 13px; cursor: pointer;
}
.ag-next:hover { border-color: var(--ok); }
.ag-next__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c, var(--ok)); }
.ag-next b { color: var(--ok); font-weight: 700; }

.ag-head { display: flex; align-items: baseline; gap: 8px; margin: 18px 2px 8px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.ag-head small { font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink-3); }
.ag-head__dot { display: none; }
.ag-head--now { color: var(--signal); }
.ag-head--now .ag-head__dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 0 color-mix(in srgb, var(--signal) 60%, transparent); animation: ag-pulse 1.8s ease-out infinite; }
@keyframes ag-pulse { 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .ag-head--now .ag-head__dot { animation: none; } }

/* a visit: the time on the left, who and what in the middle, its state and money on the right */
.ag-item {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: start; gap: 12px; width: 100%; margin-bottom: 8px; padding: 12px 12px 12px 10px;
  border: 1px solid var(--line); border-left: 4px solid var(--c, var(--ink-3)); border-radius: var(--radius); background: var(--bg); color: var(--ink);
  font: inherit; text-align: left; cursor: pointer; box-shadow: var(--shadow-1); transition: box-shadow .15s, transform .1s;
}
.ag-item:hover { box-shadow: var(--shadow-2); }
.ag-item:active { transform: scale(.995); }
.ag-item.is-now { border-color: color-mix(in srgb, var(--signal) 55%, var(--line)); border-left-color: var(--c, var(--signal)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--signal) 14%, transparent), var(--shadow-1); }
.ag-item__time { display: grid; line-height: 1.2; }
.ag-item__time b { font-family: var(--font-display); font-size: 17px; font-weight: 600; }
.ag-item__time small { font-size: 12px; color: var(--ink-3); }
.ag-item__body { display: grid; gap: 2px; min-width: 0; }
.ag-item__name { display: flex; align-items: center; gap: 5px; min-width: 0; font-size: 15px; font-weight: 650; }
.ag-item__name > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-item__alert { flex: none; color: var(--bad); }
.ag-item__car { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); }
.ag-item__what { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; color: var(--ink-2); }
.ag-item__what:empty { display: none; }
.ag-item__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 3px; font-size: 12.5px; color: var(--ink-3); }
.ag-item__who { display: inline-flex; align-items: center; gap: 5px; }
.ag-item__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--ink-3)); }
.ag-item__dep { padding: 1px 7px; border-radius: 99px; background: var(--warn-soft); color: var(--warn); font-weight: 600; }
.ag-item__dep.is-ok { background: var(--ok-soft); color: var(--ok); }
.ag-item__side { display: grid; justify-items: end; gap: 6px; }
.ag-item__status {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 99px; white-space: nowrap; font-size: 12px; font-weight: 600;
  background: color-mix(in srgb, var(--status-color, var(--ink-3)) 14%, var(--bg)); color: color-mix(in srgb, var(--status-color, var(--ink-3)) 70%, var(--ink));
}
.ag-item__status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--status-color, var(--ink-3)); }
.ag-item__sum { font-size: 12.5px; color: var(--ink-2); white-space: nowrap; }
.ag-item.is-paid .ag-item__sum { color: var(--ok); font-weight: 600; }
.ag-item.st-cancelled { background: var(--surface); box-shadow: none; border-style: dashed; border-left-style: solid; opacity: .75; }
.ag-item.st-cancelled .ag-item__name > span { text-decoration: line-through; }
.ag-item.st-no_show { border-left-color: var(--bad); }

/* a free window: a dashed place to book */
.ag-free {
  display: flex; align-items: center; gap: 12px; width: 100%; margin-bottom: 8px; padding: 10px 12px; border: 1.5px dashed color-mix(in srgb, var(--ok) 45%, var(--line-strong));
  border-radius: var(--radius); background: color-mix(in srgb, var(--ok) 5%, var(--bg)); color: var(--ink); font: inherit; text-align: left; cursor: pointer;
}
.ag-free:hover { border-style: solid; }
.ag-free__plus { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--ok); color: #fff; }
.ag-free__text { display: grid; line-height: 1.25; }
.ag-free__text b { font-weight: 650; }
.ag-free__text small { font-size: 12.5px; color: var(--ok); }
.ag-free__go { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--ok); }

/* what is over today: folded */
.ag-more { display: flex; align-items: center; gap: 8px; width: 100%; margin: 14px 0 8px; padding: 10px 4px; border: 0; border-top: 1px dashed var(--line-strong); background: none; color: var(--ink-2); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.ag-more .ic { transition: transform .2s; }
.ag-more.is-open .ic { transform: rotate(180deg); }

.ag-empty { display: grid; justify-items: center; gap: 10px; padding: 48px 16px; text-align: center; color: var(--ink-2); }
.ag-empty .ic--lg { color: var(--ink-3); }
.ag-empty p { margin: 0; }

@media (max-width: 420px) {
  .ag-item { grid-template-columns: 50px minmax(0, 1fr); }
  .ag-item__side { grid-column: 2; grid-row: 2; justify-items: start; grid-auto-flow: column; align-items: center; }
  .cal-view button span { display: none; }
}