/* Calendar card presentation: never extend the appointment's time bounds. */
#view-calendar #calendar-grid .appt.is-refined {
  grid-template-columns:minmax(0,1fr) auto;grid-template-rows:16px minmax(0,1fr) 16px;
  align-content:stretch;align-items:start;gap:0 8px;padding:2px 8px;border-radius:8px;
  background:linear-gradient(115deg,color-mix(in srgb,var(--payment-color) 10%,transparent),transparent 75%),color-mix(in srgb,var(--payment-surface) 28%,var(--ws-input));
  border-left:3px solid var(--payment-color);
  border-color:color-mix(in srgb,var(--payment-color) 45%,var(--ws-line));
  border-left-color:var(--payment-color);
  box-shadow:inset 0 1px 0 #ffffff05;
}
#view-calendar #calendar-grid .appt.is-refined .appt-client-link {
  grid-column:1;grid-row:1;font-size:13px;font-weight:650;line-height:16px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none;
}
#view-calendar #calendar-grid .appt.is-refined .appt-client-link:hover {text-decoration:underline}
#view-calendar #calendar-grid .appt.is-refined .appt-time {
  grid-column:2;grid-row:1;margin-right:8px;font-size:11px;line-height:16px;font-weight:500;letter-spacing:0;
}
#view-calendar #calendar-grid .appt.is-refined > .appt-service {
  display:flex;align-items:center;gap:6px;grid-column:1/-1;grid-row:2;
  min-height:0;font-size:12px;line-height:15px;color:var(--ws-ink);opacity:.95;
}
#view-calendar #calendar-grid .appt.is-refined .appt-service-name {min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#view-calendar #calendar-grid .appt.is-refined .appt-service-quantity {
  display:inline-flex;flex:none;align-items:center;justify-content:center;min-width:24px;
  padding:0 4px;border:1px solid var(--ws-line);border-radius:5px;
  background:var(--ws-raised);font-size:11px;line-height:13px;font-weight:600;white-space:nowrap;
}
#view-calendar #calendar-grid .appt.is-refined .appt-payment-chip,
#view-calendar #calendar-grid .appt.is-refined .appt-status-chip {
  display:inline-flex;align-items:center;align-self:end;min-height:14px;
  font-size:10px;line-height:12px;padding:0 5px;border-radius:5px;margin:0;max-width:100%;
}
#view-calendar #calendar-grid .appt.is-refined .appt-payment-chip {grid-column:1;grid-row:3;justify-self:start}
#view-calendar #calendar-grid .appt.is-refined .appt-status-chip {grid-column:2;grid-row:3;justify-self:end}
#view-calendar #calendar-grid .appt.is-refined.status-arrived .appt-status-chip {
  color:#a5e7c5;background:#264b3c;border:1px solid #548e70;
}
#view-calendar #calendar-grid .appt.is-refined.status-arrived .appt-status-chip::before {content:"✓";margin-right:3px}
:root[data-theme=light] #view-calendar #calendar-grid .appt.is-refined.status-arrived .appt-status-chip {color:#236346;background:#deefe4;border-color:#92bba2}
/* Keep manual keyboard access without a permanent icon or reserved card space. */
#view-calendar #calendar-grid .appt .appt-drag-handle {position:absolute;top:0;right:0;width:1px;min-width:0;height:1px;min-height:0;padding:0;margin:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#view-calendar #calendar-grid .appt .appt-drag-handle:focus-visible {top:2px;right:3px;width:auto;height:auto;min-height:24px;padding:2px 8px;clip-path:none;z-index:5;border:1px solid var(--ws-line);border-radius:5px;background:var(--ws-raised);font:600 12px/18px var(--font);color:var(--ws-ink)}
#view-calendar #calendar-grid .appt.is-refined.is-group {grid-template-rows:16px minmax(0,1fr) 16px;padding-top:2px;padding-bottom:2px}
#view-calendar #calendar-grid .appt.is-refined.is-group > .appt-service-list {
  display:flex;flex-direction:column;align-items:stretch;gap:0;margin:0;padding:0;
  width:100%;overflow:auto;scrollbar-width:thin;
}
#view-calendar #calendar-grid .appt.is-refined.is-group .appt-service-list li {
  display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:7px;
  height:var(--appt-service-row-height);min-height:13px;align-items:center;
  border-bottom:1px solid color-mix(in srgb,var(--payment-color) 18%,transparent);
  font-size:12px;line-height:15px;
}
#view-calendar #calendar-grid .appt.is-refined.is-group .appt-service-list li:last-child {border-bottom:0}
#view-calendar #calendar-grid .appt.is-refined .appt-service-label {display:flex;align-items:center;gap:5px;min-width:0}
#view-calendar #calendar-grid .appt.is-refined.is-group .appt-service-list time {font-size:11px;line-height:15px;font-weight:500;color:var(--text-secondary)}
#view-calendar #calendar-grid .appt.is-refined .service-motion-icon {display:inline-flex;width:19px;height:19px;min-width:0;border:0;background:none;padding:0;border-radius:0;color:var(--svc-accent);overflow:visible}
#view-calendar #calendar-grid .appt.is-refined .service-motion-icon svg {width:100%;height:100%}
#view-calendar #calendar-grid .appt.is-refined .service-motion-icon [class] {animation-play-state:paused}
#view-calendar #calendar-grid .appt.is-refined:hover .service-motion-icon [class] {animation-play-state:running}
#view-calendar #calendar-grid .appt.is-refined .service-motion-icon[data-service-kind=barrel] {--svc-accent:#b7a1e0}
:root[data-theme=light] #view-calendar #calendar-grid .appt.is-refined .service-motion-icon {color:var(--svc-ink)}
#view-calendar #calendar-grid .appt.is-refined.is-inline-card {
  grid-template-rows:13px minmax(0,1fr);padding:0 6px;gap:0 6px;
}
#view-calendar #calendar-grid .appt.is-refined.is-inline-card :is(.appt-client-link,.appt-time) {font-size:10px;line-height:13px}
#view-calendar #calendar-grid .appt.is-refined.is-inline-card > .appt-service {grid-column:1;grid-row:2;font-size:10px;line-height:12px}
#view-calendar #calendar-grid .appt.is-refined.is-inline-card .appt-payment-chip {grid-column:2;grid-row:2;font-size:9px;line-height:11px;min-height:12px;margin-right:16px}
#view-calendar #calendar-grid .appt.is-refined.is-inline-card .appt-status-chip {grid-column:2;grid-row:2;font-size:0;line-height:11px;min-height:12px;width:12px;padding:0;justify-content:center}
#view-calendar #calendar-grid .appt.is-refined.is-inline-card .appt-status-chip::before {font-size:10px;margin:0}
#view-calendar #calendar-grid .appt.is-refined.is-inline-card:not(.status-arrived) .appt-status-chip::before {content:"•"}
#view-calendar #calendar-grid .appt.is-refined.is-inline-card .appt-service-quantity {font-size:9px;line-height:10px;min-width:20px}
#view-calendar #calendar-grid .appt.is-refined.is-micro-card {grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr) auto;grid-template-rows:minmax(0,1fr);padding-top:0;padding-bottom:0;align-items:center}
#view-calendar #calendar-grid .appt.is-refined.is-micro-card :is(.appt-client-link,.appt-time) {font-size:10px;line-height:11px}
#view-calendar #calendar-grid .appt.is-refined.is-micro-card > .appt-service {font-size:10px;line-height:11px}
#view-calendar #calendar-grid .appt.is-refined.is-micro-card .appt-status-chip {min-height:10px;line-height:8px}
#view-calendar #calendar-grid .appt.is-refined.is-micro-card .appt-client-link {grid-column:1;grid-row:1}
#view-calendar #calendar-grid .appt.is-refined.is-micro-card > .appt-service {grid-column:2;grid-row:1}
#view-calendar #calendar-grid .appt.is-refined.is-micro-card .appt-time {grid-column:3;grid-row:1;margin-right:16px}
#view-calendar #calendar-grid .appt.is-refined.is-micro-card .appt-payment-chip {display:none}
#view-calendar #calendar-grid .appt.is-refined.is-micro-card .appt-status-chip {grid-column:3;grid-row:1}
#view-calendar #calendar-grid .appt.is-refined.status-cancelled .appt-client-link {text-decoration:line-through}

/* Three legible rows also fit a 48 px hour card at the compact calendar scale. */
#view-calendar #calendar-grid .appt.is-refined.is-dense-card {grid-template-rows:14px minmax(0,1fr) 14px;padding:1px 8px}
#view-calendar #calendar-grid .appt.is-refined.is-dense-card :is(.appt-client-link,.appt-time) {line-height:14px}
#view-calendar #calendar-grid .appt.is-refined.is-dense-card > .appt-service {line-height:14px}
#view-calendar #calendar-grid .appt.is-refined .appt-row-meta {padding-right:0}

#view-calendar #calendar-grid .appt.is-refined:is([data-payment-tone=unpaid],[data-payment-tone=partial]) {
  background:linear-gradient(115deg,color-mix(in srgb,var(--payment-color) 9%,transparent),transparent 75%),var(--payment-surface);
}