/* css/sales-reps-calendar.css — Sales Reps: Bookings, the manager's calendar (js/sales-reps-calendar.js).
   Calendly's Scheduled events list and Google Calendar's week, in the app's own tokens. After sales-reps-manager.css. */

.srcal-bar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.srcal-filter { display: flex; flex-direction: column; gap: 4px; min-width: 180px; }
.srcal-filter .select { min-width: 0; }
.srcal-warn { margin-bottom: 14px; padding-left: 12px; border-left: 3px solid var(--warn); }

/* The rep's colour, the same six the cover grid uses. s0: no rep. */
.srcal-tint.s0 { background: var(--surface-2); }
.srcal-tint.s1 { background: color-mix(in srgb, var(--accent) 32%, var(--surface)); }
.srcal-tint.s2 { background: color-mix(in srgb, var(--good) 36%, var(--surface)); }
.srcal-tint.s3 { background: color-mix(in srgb, var(--warn) 40%, var(--surface)); }
.srcal-tint.s4 { background: color-mix(in srgb, var(--plum) 34%, var(--surface)); }
.srcal-tint.s5 { background: color-mix(in srgb, var(--rose) 32%, var(--surface)); }
.srcal-tint.s6 { background: color-mix(in srgb, var(--accent-deep) 30%, var(--surface)); }
.srcal-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }

/* Upcoming and Past: one card per day, a row per booking. */
.srcal-day { margin-bottom: 12px; padding: 4px 0; overflow: hidden; }
.srcal-dayhead { display: flex; align-items: center; gap: 8px; margin: 0; padding: 12px 16px 8px; font-size: 14px; font-weight: 600; }
.srcal-dayhead .count { margin-left: auto; }
.srcal-row {
  display: grid; grid-template-columns: 4px minmax(118px, auto) minmax(0, 1fr) auto auto; align-items: center; gap: 12px;
  width: 100%; padding: 10px 16px; border: 0; border-top: 1px solid var(--border); background: transparent;
  font: inherit; color: var(--text); text-align: left; cursor: pointer;
}
.srcal-row:hover, .srcal-row:focus-visible { background: var(--surface-2); }
.srcal-row.cut .srcal-main b, .srcal-row.cut .srcal-when { text-decoration: line-through; color: var(--text-3); }
.srcal-strip { align-self: stretch; border-radius: 2px; min-height: 34px; }
.srcal-when { font-variant-numeric: tabular-nums; font-size: 13.5px; white-space: nowrap; }
.srcal-main { display: flex; flex-direction: column; min-width: 0; }
.srcal-main b, .srcal-main span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srcal-with { font-size: 13px; white-space: nowrap; }
.srcal-badges { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
@media (max-width: 640px) {
  .srcal-row { grid-template-columns: 4px minmax(0, 1fr); grid-auto-flow: row; row-gap: 4px; }
  .srcal-strip { grid-row: span 4; }
  .srcal-badges { justify-content: flex-start; }
}

/* Week: seven columns, the hours down the side. Scrolls sideways inside its card on a phone. */
.srcal-week { padding: 0; overflow: hidden; }
.srcal-weeknav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.srcal-weeknav .sr-small { margin-left: auto; }
.srcal-wk-scroll { overflow-x: auto; }
.srcal-wk { --srcal-hour: 44px; min-width: 680px; }
.srcal-wk-head, .srcal-wk-body { display: grid; grid-template-columns: 56px repeat(7, minmax(0, 1fr)); }
.srcal-wk-head span { padding: 8px 6px; font-size: 12.5px; font-weight: 600; color: var(--text-2); text-align: center; border-bottom: 1px solid var(--border); }
.srcal-wk-head span.today { color: var(--accent-deep); }
.srcal-wk-gutter span { display: block; height: var(--srcal-hour); padding: 0 6px; font-size: 11px; color: var(--text-3); text-align: right; transform: translateY(-6px); }
.srcal-wk-gutter span:first-child { transform: none; }
.srcal-wk-col {
  position: relative; height: calc(var(--srcal-rows) * var(--srcal-hour)); border-left: 1px solid var(--border);
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--srcal-hour) - 1px), var(--border) calc(var(--srcal-hour) - 1px), var(--border) var(--srcal-hour));
}
.srcal-wk-col.today { background-color: color-mix(in srgb, var(--accent) 5%, transparent); }
.srcal-block {
  position: absolute; left: 3px; right: 3px; min-height: 20px; overflow: hidden; display: flex; flex-direction: column; gap: 1px;
  padding: 3px 6px; border: 1px solid color-mix(in srgb, var(--text) 12%, transparent); border-radius: 6px;
  font: inherit; font-size: 11.5px; line-height: 1.25; color: var(--text); text-align: left; cursor: pointer;
}
.srcal-block b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srcal-block span { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srcal-block.short { flex-direction: row; align-items: center; gap: 6px; padding-top: 0; padding-bottom: 0; }
.srcal-block.short b { flex: 0 1 auto; min-width: 3em; }
.srcal-block.short span { flex: 0 100 auto; min-width: 0; }   /* the time gives way first; the name is what a manager looks for */
.srcal-block.cut { opacity: .55; text-decoration: line-through; }
.srcal-block.warn { box-shadow: inset 3px 0 0 var(--warn); }
.srcal-block:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.srcal-now { position: absolute; left: 0; right: 0; height: 2px; background: var(--danger); pointer-events: none; }
.srcal-legend { display: flex; flex-wrap: wrap; gap: 14px; padding: 10px 16px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--text-2); }
.srcal-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -2px; }

/* One booking's sheet. */
.srcal-detail-when { margin: 0 0 6px; font-size: 15px; line-height: 1.45; }
.srcal-dl { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; padding: 8px 0; border-top: 1px solid var(--border); font-size: 13.5px; }
.srcal-dl > span:last-child { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 480px) { .srcal-dl { grid-template-columns: minmax(0, 1fr); gap: 2px; } }
.srcal-addr { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px; color: var(--text-2); user-select: all; }