/* =====================================================================================================================
   THE SCHEDULE BOARD (4 October 2026, feedback #216) - Components/Scheduling/TeamSchedule.razor
   ---------------------------------------------------------------------------------------------------------------------
   Global rather than scoped, every rule under a "ts-" class: the booking that follows the pointer while it is dragged,
   and the outline of where it will land, are made by js/archex-schedule.js on the page's body, where a component's
   scoped styles cannot reach. Nothing else in ArchEx uses "ts-".

   The look: the desk's own warm paper and ochre, people down the side, days across, and each booking a bar in its
   job's own colour (--h, a hue from the job's id) - so a job is recognisable at a glance wherever it falls.
   ===================================================================================================================== */

.ts-page {
    min-height: 100dvh;
    padding: 20px 24px 40px;
    background: var(--color-background, #F7F4EE);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ts {
    --ts-ink: #1F1F1F;
    --ts-muted: #6B645B;
    --ts-faint: #9A9187;
    --ts-line: #ECE6DC;
    --ts-line-strong: #DDD4C6;
    --ts-paper: #FFFFFF;
    --ts-weekend: #FAF7F2;
    --ts-past: #FCFBF9;
    --ts-ochre: var(--color-primary, #F26C21);
    --ts-ochre-dark: var(--color-primary-dark, #D85A14);
    --ts-red: #C62828;
    --ts-bar-h: 48px;
    --ts-who-face: 34px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    color: var(--ts-ink);
    font-family: var(--font-body, Lato, Arial, sans-serif);
}

.ts.is-fortnight { --ts-bar-h: 42px; }
.ts.is-month { --ts-bar-h: 30px; --ts-who-face: 28px; }

.ts button { font: inherit; }

/* ---- the top ------------------------------------------------------------------------------------------------- */

.ts-top {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.ts-heading { margin-right: auto; min-width: 220px; }
.ts-eyebrow { margin: 0 0 2px; color: var(--ts-ochre); font-size: 11px; font-weight: 800; letter-spacing: .16em; }
.ts-range {
    margin: 0;
    font-family: var(--font-heading, Montserrat, Arial, sans-serif);
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.1;
    color: var(--ts-ink);
}

.ts-nav { display: flex; align-items: center; gap: 4px; padding: 4px; background: var(--ts-paper); border: 1px solid var(--ts-line-strong); border-radius: 12px; }
.ts-icon, .ts-today {
    display: grid;
    place-items: center;
    height: 34px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--ts-ink);
    cursor: pointer;
}
.ts-icon { width: 34px; }
.ts-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ts-today { padding: 0 14px; font-weight: 700; font-size: 14px; }
.ts-icon:hover, .ts-today:hover { background: #F4EFE7; }

.ts-seg { display: flex; padding: 4px; gap: 2px; background: #EFE9DF; border-radius: 12px; }
.ts-seg button {
    height: 34px;
    padding: 0 14px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--ts-muted);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}
.ts-seg button.is-on { background: var(--ts-paper); color: var(--ts-ink); box-shadow: 0 1px 2px rgba(31, 24, 16, .12); }

.ts-search {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 42px;
    padding: 0 12px;
    min-width: 240px;
    background: var(--ts-paper);
    border: 1px solid var(--ts-line-strong);
    border-radius: 12px;
}
.ts-search:focus-within { border-color: var(--ts-ochre); box-shadow: 0 0 0 3px rgba(242, 108, 33, .14); }
.ts-search svg { width: 17px; height: 17px; flex: none; fill: none; stroke: var(--ts-muted); stroke-width: 2.2; stroke-linecap: round; }
.ts-search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; font: inherit; font-size: 14px; color: var(--ts-ink); }

.ts-book {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 42px;
    padding: 0 18px 0 14px;
    border: 0;
    border-radius: 12px;
    background: var(--ts-ochre);
    color: #FFFFFF;
    font-weight: 800;
    font-size: 15px;
    cursor: pointer;
    box-shadow: 0 6px 16px -6px rgba(242, 108, 33, .6);
}
.ts-book svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }
.ts-book:hover { background: var(--ts-ochre-dark); }

/* ---- the numbers ------------------------------------------------------------------------------------------- */

.ts-insights { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.ts-insight {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 10px;
    align-items: baseline;
    padding: 12px 14px;
    background: var(--ts-paper);
    border: 1px solid var(--ts-line);
    border-radius: 14px;
    text-align: left;
    text-decoration: none;
    color: var(--ts-ink);
    cursor: default;
}
button.ts-insight:not(:disabled), a.ts-insight { cursor: pointer; }
button.ts-insight:not(:disabled):hover, a.ts-insight:hover { border-color: var(--ts-line-strong); box-shadow: 0 6px 18px -10px rgba(31, 24, 16, .3); }
.ts-insight-value { grid-row: 1 / span 2; font-family: var(--font-heading, Montserrat, Arial, sans-serif); font-size: 30px; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.ts-insight-label { font-weight: 800; font-size: 14px; }
.ts-insight-sub { grid-column: 2; font-size: 12.5px; color: var(--ts-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ts-insight.is-needs.has-some .ts-insight-value { color: #B06A00; }
.ts-insight.is-clash.has-some .ts-insight-value, .ts-insight.is-ready .ts-insight-value { color: var(--ts-red); }
.ts-insight.is-weather.has-some .ts-insight-value { color: #1565C0; }
.ts-insight.is-on { border-color: currentColor; box-shadow: inset 0 0 0 1px currentColor; }
.ts-insight.is-needs.is-on { color: #8A5300; background: #FFF6E5; }
.ts-insight.is-clash.is-on { color: var(--ts-red); background: #FDECEC; }
.ts-insight.is-weather.is-on { color: #0D47A1; background: #EAF2FD; }
.ts-insight:disabled { opacity: 1; }

.ts-armed {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 12px;
    background: hsl(var(--h) 85% 95%);
    border: 1px solid hsl(var(--h) 50% 75%);
    font-size: 14px;
}
.ts-armed-swatch { width: 12px; height: 12px; border-radius: 4px; background: hsl(var(--h) 60% 45%); }
.ts-armed button { margin-left: auto; height: 30px; padding: 0 12px; border: 1px solid hsl(var(--h) 40% 70%); border-radius: 8px; background: #FFFFFF; font-weight: 700; cursor: pointer; }

/* ---- the board ---------------------------------------------------------------------------------------------- */

.ts-body { display: grid; grid-template-columns: minmax(0, 1fr) 46px; gap: 12px; align-items: start; }
.ts-body.has-tray { grid-template-columns: minmax(0, 1fr) 280px; }

.ts-scroll {
    position: relative;
    max-height: calc(100dvh - 250px);
    min-height: 420px;
    overflow: auto;
    background: var(--ts-paper);
    border: 1px solid var(--ts-line-strong);
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(31, 24, 16, .05), 0 18px 40px -24px rgba(31, 24, 16, .25);
    overscroll-behavior: contain;
}

.ts-loading, .ts-none { margin: 0; padding: 48px 24px; text-align: center; color: var(--ts-muted); }

/* As wide as the scroller, never narrower than every day at its smallest (--ts-min, worked out by the page): the
   columns share the width out, and a long job name is cut short in its bar instead of widening its day. */
.ts-board { width: 100%; min-width: var(--ts-min, 900px); }
.ts-row {
    display: grid;
    grid-template-columns: var(--ts-cols);
    grid-template-rows: repeat(var(--ts-lanes, 1), var(--ts-bar-h));
    border-bottom: 1px solid var(--ts-line);
    position: relative;
}

/* the heading row of days */
.ts-head {
    position: sticky;
    top: 0;
    z-index: 6;
    grid-template-rows: auto;
    background: var(--ts-paper);
    border-bottom: 1px solid var(--ts-line-strong);
    box-shadow: 0 6px 12px -12px rgba(31, 24, 16, .4);
}
.ts-corner {
    position: sticky;
    left: 0;
    z-index: 7;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 2px;
    padding: 10px 14px;
    background: var(--ts-paper);
    border-right: 1px solid var(--ts-line-strong);
    font-weight: 800;
    font-size: 13px;
}
.ts-corner small { font-weight: 600; font-size: 11.5px; color: var(--ts-faint); }

.ts-day {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    align-items: end;
    column-gap: 6px;
    padding: 9px 10px 8px;
    border-right: 1px solid var(--ts-line);
    min-width: 0;
}
.ts-day-name { grid-column: 1 / -1; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ts-faint); }
.ts-day-date { font-family: var(--font-heading, Montserrat, Arial, sans-serif); font-size: 22px; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.ts-day-today { justify-self: start; align-self: center; padding: 2px 7px; border-radius: 999px; background: var(--ts-ochre); color: #FFFFFF; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; }
.ts-day.is-weekend { background: var(--ts-weekend); }
.ts-day.is-weekend .ts-day-date { color: var(--ts-muted); }
.ts-day.is-past .ts-day-date { color: var(--ts-faint); }
.ts-day.is-today { background: #FFF4EC; box-shadow: inset 0 -3px 0 var(--ts-ochre); }
.ts-day.is-today .ts-day-name, .ts-day.is-today .ts-day-date { color: var(--ts-ochre-dark); }

.ts-wx {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 5px;
    font-size: 12px;
    color: var(--ts-muted);
    white-space: nowrap;
}
.ts-wx b { font-weight: 800; color: var(--ts-ink); }
.ts-wx.is-hot b { color: var(--ts-red); }
.ts-wx-rain { font-style: normal; font-weight: 700; color: #1565C0; }
.ts-wx-svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* A month: each heading a narrow column - two letters, the date, the sky - stacked and centred. */
.ts.is-month .ts-day { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px; padding: 7px 0 6px; }
.ts.is-month .ts-day-name { font-size: 9.5px; letter-spacing: .02em; }
.ts.is-month .ts-day-date { font-size: 14px; }
.ts.is-month .ts-wx { margin-top: 2px; }
.ts.is-month .ts-wx b, .ts.is-month .ts-wx-rain { display: none; }
.ts.is-month .ts-wx-svg { width: 13px; height: 13px; }
.ts.is-month .ts-day.is-hot .ts-wx-svg, .ts.is-month .ts-wx.is-hot .ts-wx-svg { color: var(--ts-red); }
.ts.is-fortnight .ts-day { padding: 8px 6px 7px; }
.ts.is-fortnight .ts-day-date { font-size: 18px; }
.ts.is-fortnight .ts-wx-rain { display: none; }

/* who, down the side */
.ts-who {
    position: sticky;
    left: 0;
    z-index: 4;
    grid-column: 1;
    grid-row: 1 / -1;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px 6px 14px;
    background: var(--ts-paper);
    border-right: 1px solid var(--ts-line-strong);
    min-width: 0;
}
.ts-who-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ts-who-text strong { font-size: 14px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ts-who-text small { font-size: 12px; color: var(--ts-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ts.is-month .ts-who-text small { display: none; }

.ts-face {
    flex: none;
    display: grid;
    place-items: center;
    width: var(--ts-who-face);
    height: var(--ts-who-face);
    border-radius: 50%;
    background: hsl(var(--h, 30) 55% 88%);
    color: hsl(var(--h, 30) 45% 25%);
    font-size: 12.5px;
    font-weight: 800;
    overflow: hidden;
}
.ts-face.has-photo { background: #EEE; }
.ts-face.has-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ts-face.is-needs { background: #FFF1D6; color: #8A5300; }

.ts-load { display: flex; align-items: center; gap: 5px; flex: none; }
/* How full their period is: a hairline along the foot of their name, and the days as a number. */
.ts-load-bar { position: absolute; left: 14px; right: 12px; bottom: 1px; height: 2px; border-radius: 999px; background: #F1ECE4; overflow: hidden; }
.ts-load-bar span { display: block; height: 100%; border-radius: inherit; background: var(--ts-ochre); }
.ts-load-words { font-size: 11.5px; font-weight: 800; color: var(--ts-muted); font-variant-numeric: tabular-nums; }
.ts-not-ready {
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #FFF1D6;
    color: #8A5300;
    font-size: 12px;
    font-weight: 900;
}
.ts-person.is-not-ready .ts-who-text strong { color: #6B4A12; }

/* the day cells behind the bars */
.ts-cell { border-right: 1px solid var(--ts-line); min-width: 0; cursor: cell; }
.ts-cell.is-weekend { background: var(--ts-weekend); background-image: repeating-linear-gradient(135deg, transparent 0 7px, rgba(31, 24, 16, .025) 7px 8px); }
.ts-cell.is-past { background-color: var(--ts-past); }
.ts-cell.is-today { background: #FFF8F2; }
.ts-cell:hover { background-color: #FFF4EA; }
.ts-cell.is-picking { background: rgba(242, 108, 33, .16) !important; }

/* Away and the days nobody works (feedback #257): leave hatched across a person's days, under any booking; a public
   holiday or closed day named on its day and faintly hatched down the board. */
.ts-away {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    min-width: 0;
    margin: 4px 2px;
    padding: 0 8px;
    border: 1px dashed rgba(22, 25, 28, .35);
    border-radius: 9px;
    background: repeating-linear-gradient(135deg, rgba(22, 25, 28, .10) 0 6px, rgba(22, 25, 28, .03) 6px 12px);
    pointer-events: none;
    overflow: hidden;
}
.ts-away span { font-size: 12px; font-weight: 800; color: #3F454B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ts-away.is-tall { align-items: flex-end; padding-bottom: 8px; }
.ts-cell.is-holiday { background-image: repeating-linear-gradient(135deg, rgba(232, 89, 12, .08) 0 6px, transparent 6px 12px); }
.ts-day.is-holiday { background: #FFF1E6; }
.ts-day-holiday { grid-column: 1 / -1; display: block; min-width: 0; margin-top: 2px; font-size: 10.5px; font-weight: 800; color: #B5470B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* "Needs someone" */
.ts-needs { background: #FFFCF6; border-bottom: 2px solid #F3E2C2; }
.ts-who-needs { background: #FFF9EE; }
.ts-needs-mark { display: grid; place-items: center; width: var(--ts-who-face); height: var(--ts-who-face); border-radius: 50%; background: #FFE9BF; color: #8A5300; flex: none; }
.ts-needs-mark svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---- a booking ---------------------------------------------------------------------------------------------- */

.ts-bar {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    margin: 4px 3px;
    padding: 0 8px 0 9px;
    border: 1px solid hsl(var(--h) 45% 80%);
    border-left: 4px solid hsl(var(--h) 62% 42%);
    border-radius: 9px;
    background: hsl(var(--h) 85% 94%);
    color: hsl(var(--h) 50% 16%);
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
    transition: box-shadow .12s ease, transform .12s ease, opacity .12s ease;
    font-family: var(--font-body, Lato, Arial, sans-serif);
}
.ts-bar:hover { box-shadow: 0 6px 14px -8px hsl(var(--h) 50% 30% / .55); transform: translateY(-1px); z-index: 3; }
.ts-bar:focus-visible { outline: 2px solid hsl(var(--h) 62% 42%); outline-offset: 2px; }
.ts-bar.is-open { box-shadow: 0 0 0 2px hsl(var(--h) 62% 42%); z-index: 3; }
.ts-bar-text { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.2; }
.ts-bar-text strong { font-size: 13px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ts-bar-text small { font-size: 11.5px; font-weight: 600; color: hsl(var(--h) 25% 34%); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ts.is-month .ts-bar { margin: 3px 2px; padding: 0 5px 0 6px; border-left-width: 3px; border-radius: 6px; }
.ts.is-month .ts-bar-text strong { font-size: 11.5px; }
.ts.is-month .ts-bar-text small { display: none; }

/* PENCILLED IN (7 October 2026, feedback #292: "something that me and Louisa can pencil things booking in and schedule
   work at a visual"). Drawn as pencil: a grey dashed outline, the job's colour only faintly, the name in italics and a
   pencil at the end. Inked in from its card. */
.ts-bar.is-unconfirmed {
    border: 1.5px dashed #8B857C;
    border-left: 4px dashed hsl(var(--h) 40% 55%);
    background: hsl(var(--h) 40% 97%);
    color: #4A4540;
}
.ts-bar.is-unconfirmed .ts-bar-text strong { font-style: italic; font-weight: 700; }
.ts-bar.is-unconfirmed::after { content: "\270E"; flex: none; font-size: 13px; color: #6B645C; }
.ts-tag.is-unconfirmed { border: 1px dashed #8B857C; background: #FFFFFF; color: #4A4540; }

.ts-pencil {
    min-height: 40px;
    padding: 0 16px;
    border: 1.5px dashed #8B857C;
    border-radius: 10px;
    background: #FFFFFF;
    color: #34302B;
    font: 700 14px var(--font-body, Lato, Arial, sans-serif);
    cursor: pointer;
}
.ts-pencil:hover:not(:disabled) { border-color: #34302B; }
.ts-pencil:disabled { opacity: .5; cursor: default; }

.ts-ink { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; border: 1.5px dashed #8B857C; border-radius: 12px; padding: 10px 12px; }
.ts-ink p { margin: 0; font-weight: 700; color: #4A4540; }
.ts-bar.is-needs {
    border: 1.5px dashed hsl(var(--h) 50% 55%);
    background: repeating-linear-gradient(135deg, hsl(var(--h) 85% 96%) 0 8px, #FFFFFF 8px 14px);
    cursor: grab;
}
.ts-bar.is-clash { box-shadow: inset 0 0 0 2px var(--ts-red); }
.ts-bar.is-past { opacity: .55; }
.ts-bar.is-dim { opacity: .18; filter: grayscale(.7); }
.ts-bar.is-dim:hover { opacity: .5; }
.ts-bar.clip-start { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: 0; border-left-style: dotted; }
.ts-bar.clip-end { border-top-right-radius: 0; border-bottom-right-radius: 0; margin-right: 0; }
.ts-board.has-focus .ts-bar:not(.is-dim) { box-shadow: 0 0 0 2px hsl(var(--h) 62% 42% / .35); }

.ts-flag {
    flex: none;
    padding: 2px 6px;
    border-radius: 6px;
    font-size: 10.5px;
    font-weight: 900;
    letter-spacing: .01em;
    white-space: nowrap;
}
.ts-flag.is-heat { background: #FFE6D9; color: #A23B00; }
.ts-flag.is-wind { background: #E1EEFC; color: #0D47A1; }
.ts-flag.is-rain { background: #DDF2F2; color: #00626B; }
.ts-flag.is-stops { background: var(--ts-red); color: #FFFFFF; }
.ts-flag.is-clash { width: 18px; padding: 2px 0; text-align: center; background: var(--ts-red); color: #FFFFFF; border-radius: 50%; }
/* Booked on a day the person is on leave (5 October 2026): the leave's hatching on the flag, and its dashed edge round
   the bar, so it shows in the month view too, where the flag has no room. */
.ts-flag.is-leave { background: repeating-linear-gradient(135deg, #E4E6E8 0 5px, #F4F5F6 5px 10px); color: #2B3036; border: 1px dashed rgba(22, 25, 28, .45); }
.ts-bar.is-on-leave:not(:focus-visible) { outline: 2px dashed rgba(22, 25, 28, .55); outline-offset: -2px; }
.ts.is-month .ts-flag:not(.is-stops):not(.is-clash) { display: none; }

/* From ServiceM8: a tab on the bar's top edge, so it takes no room from the job's name. */
.ts-s8 {
    position: absolute;
    top: -7px;
    right: 6px;
    padding: 0 4px;
    border-radius: 4px;
    background: #FFFFFF;
    border: 1px solid hsl(var(--h) 35% 78%);
    color: #7A7064;
    font-size: 8.5px;
    font-weight: 900;
    line-height: 12px;
    letter-spacing: .04em;
}
.ts.is-month .ts-s8 { display: none; }

/* At the office (feedback #255): a little house on the bar's top edge, left of where ServiceM8's tab sits. */
.ts-office {
    position: absolute;
    top: -8px;
    left: 8px;
    width: 16px;
    height: 16px;
    border-radius: 5px;
    background: #16191C;
    display: grid;
    place-items: center;
}
.ts-office svg { width: 12px; height: 12px; fill: none; stroke: #FFCC00; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

.ts-grip { position: absolute; top: 0; right: -2px; bottom: 0; width: 10px; cursor: ew-resize; border-radius: 0 8px 8px 0; }
.ts-grip::after { content: ""; position: absolute; top: 30%; bottom: 30%; right: 4px; width: 2px; border-radius: 2px; background: hsl(var(--h) 45% 55%); opacity: 0; transition: opacity .12s ease; }
.ts-bar:hover .ts-grip::after { opacity: 1; }

/* ---- dragging ---------------------------------------------------------------------------------------------- */

.ts.is-dragging, .ts.is-dragging * { cursor: grabbing !important; }
.ts-bar.is-lifted { opacity: .3; }
.ts-ghost {
    position: fixed !important;
    left: 0;
    top: 0;
    z-index: 1000;
    margin: 0 !important;
    pointer-events: none;
    opacity: .95;
    box-shadow: 0 22px 40px -14px rgba(31, 24, 16, .55) !important;
    transition: none !important;
}
.ts-drop {
    position: fixed;
    z-index: 999;
    pointer-events: none;
    border: 2px dashed var(--color-primary, #F26C21);
    border-radius: 10px;
    background: rgba(242, 108, 33, .09);
}
.ts-drop.is-refused { border-color: #C62828; background: rgba(198, 40, 40, .06); }

/* ---- the jobs waiting ------------------------------------------------------------------------------------ */

.ts-tray {
    position: sticky;
    top: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: calc(100dvh - 250px);
    overflow: auto;
    padding: 10px;
    background: var(--ts-paper);
    border: 1px solid var(--ts-line-strong);
    border-radius: 18px;
}
.ts-body:not(.has-tray) .ts-tray { padding: 6px 4px; align-items: center; }
.ts-tray-head {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 6px 6px 8px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    font-weight: 800;
    font-size: 14px;
    color: var(--ts-ink);
    cursor: pointer;
}
.ts-tray-head:hover { background: #F7F2EA; }
.ts-tray-head svg { width: 16px; height: 16px; margin-left: auto; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.ts-body:not(.has-tray) .ts-tray-head { flex-direction: column; writing-mode: vertical-rl; padding: 10px 4px; }
.ts-body:not(.has-tray) .ts-tray-head svg { margin: 0; writing-mode: horizontal-tb; }
.ts-count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: #EFE9DF; font-size: 12px; font-weight: 900; writing-mode: horizontal-tb; }
.ts-tray-hint { margin: 0 6px 4px; font-size: 12.5px; line-height: 1.4; color: var(--ts-muted); }
.ts-tray-none { margin: 6px; font-size: 13px; color: var(--ts-muted); }

.ts-job {
    display: flex;
    gap: 10px;
    padding: 10px;
    border: 1px solid var(--ts-line);
    border-radius: 12px;
    background: var(--ts-paper);
    cursor: grab;
    user-select: none;
    touch-action: none;
}
.ts-job:hover { border-color: hsl(var(--h) 45% 75%); background: hsl(var(--h) 85% 98%); }
.ts-job.is-armed { border-color: var(--ts-ochre); box-shadow: 0 0 0 2px rgba(242, 108, 33, .3); }
.ts-job-swatch { flex: none; width: 5px; align-self: stretch; border-radius: 3px; background: hsl(var(--h) 62% 42%); }
.ts-job-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ts-job-text strong { font-size: 13.5px; font-weight: 800; line-height: 1.25; }
.ts-job-text small { font-size: 12px; color: var(--ts-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ts-job-text em { font-style: normal; font-size: 11.5px; font-weight: 700; color: hsl(var(--h) 45% 32%); }

/* ---- booking (the pop-up) ---------------------------------------------------------------------------------- */

.ts-pop-scrim { position: fixed; inset: 0; z-index: 79; background: transparent; }
.ts-pop {
    position: fixed;
    z-index: 80;
    width: 400px;
    max-width: calc(100vw - 32px);
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 18px 18px;
    background: var(--ts-paper);
    border: 1px solid var(--ts-line-strong);
    border-radius: 18px;
    box-shadow: 0 30px 60px -20px rgba(31, 24, 16, .45), 0 2px 6px rgba(31, 24, 16, .08);
    animation: ts-pop-in .14s ease-out;
}
@keyframes ts-pop-in { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }
.ts-pop-head { display: flex; align-items: flex-start; gap: 12px; }
.ts-pop-head h2 { margin: 0; font-family: var(--font-heading, Montserrat, Arial, sans-serif); font-size: 17px; font-weight: 800; line-height: 1.25; }
.ts-x {
    margin-left: auto;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 9px;
    background: #F4EFE7;
    color: var(--ts-ink);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    flex: none;
}
.ts-x:hover { background: #ECE4D8; }

.ts-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ts-field > span:first-child { font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ts-muted); }
.ts-input {
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--ts-line-strong);
    border-radius: 10px;
    background: #FFFFFF;
    font: inherit;
    font-size: 14px;
    color: var(--ts-ink);
    min-width: 0;
}
.ts-input:focus { outline: 0; border-color: var(--ts-ochre); box-shadow: 0 0 0 3px rgba(242, 108, 33, .14); }
.ts-pop-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }

.ts-suggest { display: flex; flex-direction: column; max-height: 230px; overflow: auto; border: 1px solid var(--ts-line); border-radius: 12px; }
.ts-suggest button {
    display: flex;
    align-items: stretch;
    gap: 10px;
    padding: 9px 10px;
    border: 0;
    border-bottom: 1px solid var(--ts-line);
    background: #FFFFFF;
    text-align: left;
    cursor: pointer;
    color: var(--ts-ink);
}
.ts-suggest button:last-child { border-bottom: 0; }
.ts-suggest button:hover { background: hsl(var(--h) 85% 97%); }
.ts-suggest button > span:last-child, .ts-chosen > span:nth-child(2) { display: flex; flex-direction: column; min-width: 0; }
.ts-suggest strong, .ts-chosen strong { font-size: 13.5px; font-weight: 800; }
.ts-suggest small, .ts-chosen small { font-size: 12px; color: var(--ts-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ts-suggest-none { padding: 12px; font-size: 13px; color: var(--ts-muted); }
.ts-chosen {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border: 1px solid hsl(var(--h) 45% 78%);
    border-radius: 12px;
    background: hsl(var(--h) 85% 96%);
}
.ts-chosen button { margin-left: auto; height: 30px; padding: 0 10px; border: 1px solid var(--ts-line-strong); border-radius: 8px; background: #FFFFFF; font-weight: 700; font-size: 12.5px; cursor: pointer; }

.ts-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ts-chips button {
    height: 34px;
    padding: 0 12px;
    border: 1px solid var(--ts-line-strong);
    border-radius: 999px;
    background: #FFFFFF;
    font-size: 13px;
    font-weight: 700;
    color: var(--ts-ink);
    cursor: pointer;
}
.ts-chips button.is-on { background: var(--ts-ink); border-color: var(--ts-ink); color: #FFFFFF; }

.ts-check { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; cursor: pointer; }
.ts-check input { width: 18px; height: 18px; accent-color: var(--ts-ochre); }

.ts-error { margin: 0; padding: 10px 12px; border-radius: 10px; background: #FDECEC; color: #8E1B1B; font-size: 13.5px; line-height: 1.4; }
.ts-note { margin: 0; padding: 12px 14px; border-radius: 12px; background: #F4F1EC; color: var(--ts-gunmetal, #3B3B3B); font-size: 13.5px; line-height: 1.45; }

.ts-pop-foot, .ts-drawer-actions { display: flex; justify-content: flex-end; gap: 8px; }
.ts-primary, .ts-quiet {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 16px;
    border-radius: 11px;
    font-weight: 800;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
}
.ts-primary { border: 0; background: var(--ts-ochre); color: #FFFFFF; }
.ts-primary:hover:not(:disabled) { background: var(--ts-ochre-dark); }
.ts-primary:disabled { opacity: .45; cursor: default; }
.ts-quiet { border: 1px solid var(--ts-line-strong); background: #FFFFFF; color: var(--ts-ink); }
.ts-quiet:hover:not(:disabled) { border-color: var(--ts-ink); }
.ts-danger { color: #A31F1F; }
.ts-danger:hover:not(:disabled) { border-color: #A31F1F; }
.ts-danger-fill { background: #B3261E; }
.ts-danger-fill:hover:not(:disabled) { background: #8E1B1B; }

/* ---- a booking, opened -------------------------------------------------------------------------------------- */

.ts-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 70;
    width: 420px;
    max-width: 100vw;
    display: flex;
    flex-direction: column;
    background: var(--ts-paper);
    border-left: 1px solid var(--ts-line-strong);
    box-shadow: -24px 0 60px -30px rgba(31, 24, 16, .45);
    animation: ts-drawer-in .16s ease-out;
}
@keyframes ts-drawer-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.ts-drawer-head { position: relative; display: flex; gap: 12px; padding: 22px 20px 16px; border-bottom: 1px solid var(--ts-line); }
.ts-drawer-band { position: absolute; inset: 0 0 auto 0; height: 6px; background: hsl(var(--h) 62% 42%); }
.ts-drawer-head h2 { margin: 0; font-family: var(--font-heading, Montserrat, Arial, sans-serif); font-size: 21px; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; }
.ts-drawer-place { margin: 4px 0 0; font-size: 13.5px; color: var(--ts-muted); }
/* Room at the foot for the Feedback button, which floats over every page's bottom corner. */
.ts-drawer-body { flex: 1; overflow: auto; padding: 4px 20px 88px; }
.ts-drawer-section { display: flex; flex-direction: column; gap: 10px; padding: 16px 0; border-bottom: 1px solid var(--ts-line); }
.ts-drawer-section:last-child { border-bottom: 0; }
.ts-drawer-section h3 { margin: 0; font-size: 12px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--ts-muted); }
.ts-drawer-who { display: flex; align-items: center; gap: 12px; }
.ts-drawer-who .ts-face { --ts-who-face: 42px; font-size: 15px; }
.ts-drawer-who > span:last-child { display: flex; flex-direction: column; }
.ts-drawer-who strong { font-size: 16px; font-weight: 800; }
.ts-drawer-who small { font-size: 13px; color: var(--ts-muted); }
.ts-drawer-when { margin: 0; display: flex; flex-direction: column; gap: 2px; }
.ts-drawer-when strong { font-size: 15px; }
.ts-drawer-when span { font-size: 13.5px; color: var(--ts-muted); }
.ts-drawer-small { margin: 0; font-size: 13px; line-height: 1.45; color: var(--ts-muted); }
.ts-drawer-danger { flex-direction: row; flex-wrap: wrap; gap: 8px; }
.ts-drawer-danger .ts-drawer-small { flex-basis: 100%; }
.ts-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ts-tag { padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 800; }
.ts-tag.is-s8 { background: #EFE9DF; color: #5B5247; }
.ts-tag.is-unconfirmed { background: #FFF1D6; color: #8A5300; }
.ts-tag.is-clash { background: #FDECEC; color: #8E1B1B; }
.ts-tag.is-office { background: #16191C; color: #FFCC00; }

.ts-give { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.ts-give button {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 6px;
    border: 1px solid var(--ts-line-strong);
    border-radius: 12px;
    background: #FFFFFF;
    font-size: 13px;
    font-weight: 800;
    color: var(--ts-ink);
    cursor: pointer;
}
.ts-give button:hover:not(:disabled) { border-color: var(--ts-ochre); background: #FFF6EE; }
.ts-give button:disabled { opacity: .45; cursor: not-allowed; }

.ts-wx-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ts-wx-list li {
    display: grid;
    grid-template-columns: 62px 22px 58px 1fr;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border-radius: 10px;
    background: #F8F5F0;
    font-size: 13px;
}
.ts-wx-list li.is-watch { background: #FFF6E5; }
.ts-wx-list li.is-stops { background: #FDECEC; }
.ts-wx-day { font-weight: 800; }
.ts-wx-icon .ts-wx-svg { width: 20px; height: 20px; color: var(--ts-muted); }
.ts-wx-temp { font-weight: 800; }
.ts-wx-temp small { font-weight: 600; color: var(--ts-faint); }
.ts-wx-more { color: var(--ts-muted); font-size: 12.5px; }
.ts-wx-says { grid-column: 1 / -1; font-size: 12.5px; line-height: 1.4; color: #6B2E00; font-weight: 700; }
.ts-wx-list li.is-stops .ts-wx-says { color: #8E1B1B; }

.ts-crew { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; }
.ts-crew span { color: var(--ts-muted); }

.ts-drawer-facts dl { display: grid; grid-template-columns: 90px 1fr; gap: 6px 10px; margin: 0; font-size: 13.5px; }
.ts-drawer-facts dt { color: var(--ts-muted); font-weight: 700; }
.ts-drawer-facts dd { margin: 0; font-weight: 600; }
.ts-open-job { align-self: flex-start; }

/* ---- what just happened ---------------------------------------------------------------------------------- */

.ts-toast {
    position: fixed;
    left: 50%;
    bottom: 28px;
    z-index: 90;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: min(680px, calc(100vw - 32px));
    padding: 12px 10px 12px 18px;
    border-radius: 14px;
    background: #1F1F1F;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 20px 44px -16px rgba(0, 0, 0, .55);
    animation: ts-toast-in .18s ease-out;
}
@keyframes ts-toast-in { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }
.ts-toast.is-error { background: #8E1B1B; }
.ts-toast button { height: 32px; padding: 0 12px; border: 0; border-radius: 9px; background: rgba(255, 255, 255, .12); color: #FFC9A6; font-weight: 900; cursor: pointer; }
.ts-toast button:hover { background: rgba(255, 255, 255, .2); }
.ts-toast .ts-toast-x { width: 32px; padding: 0; color: #FFFFFF; font-size: 18px; }

/* the other scheduling pages, under the board */
.ts-also { display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 0 4px; font-size: 13.5px; }
.ts-also a { color: #6B645B; font-weight: 700; text-decoration: none; }
.ts-also a:hover { color: var(--color-primary-dark, #D85A14); text-decoration: underline; }

@media (max-width: 1100px) {
    .ts-body.has-tray { grid-template-columns: minmax(0, 1fr) 230px; }
    .ts-range { font-size: 23px; }
}