/* Day, week and team calendar views (js/calendar-views.js), for both shells.
   Colours read each shell's tokens first, so the grid sits in the admin panel
   and on the agent desk without a second copy. Wide views scroll inside their
   own container on a phone; the page itself never scrolls sideways. */

.cv-scroll{
  --cv-hour:48px;
  --cv-line:var(--line,#e2e8f0);
  --cv-ink:var(--ink,#221f20);
  --cv-muted:var(--muted,#64748b);
  --cv-card:var(--card,#fff);
  --cv-bg:var(--bg,#fafbfc);
  --cv-radius:var(--radius,6px);
  --cv-today:#c45c26;
  /* min-width:0 keeps a flex or grid parent from growing to the grid's width. */
  max-width:100%;min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch;
}

/* ---------------------------------------------------------------- time grid */
.cv-grid{
  display:grid;grid-template-rows:auto auto 1fr;
  min-width:calc(56px + var(--cv-days) * 96px);
  border:1px solid var(--cv-line);border-radius:var(--cv-radius);background:var(--cv-card);color:var(--cv-ink);
}
.cv-grid.cv-grid-day{min-width:0}
.cv-grid-head,.cv-grid-allday,.cv-grid-body{
  display:grid;grid-template-columns:56px repeat(var(--cv-days),minmax(0,1fr));
}
.cv-grid-head{border-bottom:1px solid var(--cv-line)}
.cv-grid-allday{border-bottom:1px solid var(--cv-line);background:var(--cv-bg)}
.cv-corner{min-width:0}
.cv-dayhead{
  display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0;
  padding:8px 4px;border:0;border-left:1px solid var(--cv-line);background:none;
  font:inherit;color:inherit;cursor:pointer;
}
.cv-dayhead:hover{background:var(--cv-bg)}
.cv-dow{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--cv-muted)}
.cv-dom{font-size:18px;font-weight:700;line-height:1.2;min-width:30px;text-align:center;border-radius:999px;font-variant-numeric:tabular-nums}
.cv-dayhead.is-today .cv-dom{background:var(--cv-today);color:#fff}
.cv-dayhead.is-weekend .cv-dow{color:#9a9184}
.cv-gutter-label{padding:6px 6px 6px 0;text-align:right;font-size:10.5px;color:var(--cv-muted)}
.cv-allday-cell{display:flex;flex-direction:column;gap:3px;min-width:0;padding:4px;border-left:1px solid var(--cv-line)}

.cv-grid-body{position:relative}
.cv-gutter{display:flex;flex-direction:column}
.cv-hour{position:relative;height:var(--cv-hour);flex:0 0 auto}
.cv-hour span{
  position:absolute;top:-7px;right:6px;padding:0 2px;background:var(--cv-card);
  font-size:11px;color:var(--cv-muted);font-variant-numeric:tabular-nums;
}
.cv-hour:first-child span{top:2px}
.cv-col{
  position:relative;min-width:0;height:calc(var(--cv-hour) * var(--cv-hours));
  border-left:1px solid var(--cv-line);
  background-image:linear-gradient(to bottom,var(--cv-line) 1px,transparent 1px);
  background-size:100% var(--cv-hour);
}
.cv-col.is-weekend{background-color:#faf9f6}
.cv-col.is-today{background-color:rgba(196,92,38,.035)}
.cv-slot{height:calc(var(--cv-hour) / 2);cursor:pointer}
.cv-slot:hover{background:rgba(124,58,237,.08)}

.cv-ev{
  position:absolute;z-index:2;box-sizing:border-box;min-height:18px;overflow:hidden;
  display:flex;flex-direction:column;gap:1px;padding:2px 6px;
  border:1px solid var(--cv-card);border-left-width:3px;border-radius:6px;
  font:inherit;font-size:11.5px;line-height:1.25;text-align:left;cursor:pointer;
}
.cv-ev-time{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.cv-ev-title,.cv-ev-who{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cv-ev-who{opacity:.8}
.cv-ev-visit{background:#e6f4f1;color:#0f5f58;border-left-color:#0f766e}
.cv-ev-call{background:#e8efff;color:#1e3a8a;border-left-color:#1d4ed8}
.cv-ev-meeting{background:#f3e8ff;color:#5b21b6;border-left-color:#7c3aed}
.cv-ev-busy{
  background:repeating-linear-gradient(135deg,#eef0f3 0 6px,#e6e9ee 6px 12px);
  color:#475569;border-left-color:#94a3b8;cursor:default;
}
.cv-ev:hover:not(.cv-ev-busy){filter:brightness(.97)}
.cv-now{position:absolute;left:0;right:0;z-index:3;height:2px;background:#dc2626;pointer-events:none}
.cv-now::before{content:'';position:absolute;left:-4px;top:-3px;width:8px;height:8px;border-radius:50%;background:#dc2626}
.cv-now.cv-now-v{top:0;bottom:0;right:auto;width:2px;height:auto}
.cv-now.cv-now-v::before{left:-3px;top:-4px}

.cv-chip{
  display:block;max-width:100%;box-sizing:border-box;padding:2px 6px;border-radius:4px;
  font-size:10.5px;font-weight:650;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cv-chip-holiday{background:#f6ebe4;color:#8a4b2a}
.cv-chip-birthday{background:#e8f0fa;color:#1f3f63}
.cv-chip-leave{background:#e8f5ef;color:#1f6b48}
.cv-chip-regional{background:#f3f0ff;color:#5f3dc4}
.cv-chip-google{background:#e8f0fe;color:#1967d2}

/* --------------------------------------------------------------- team week */
.cv-team{
  border:1px solid var(--cv-line);border-radius:var(--cv-radius);background:var(--cv-card);color:var(--cv-ink);
}
.cv-team-week{min-width:calc(180px + var(--cv-days) * 118px)}
.cv-team-row{display:grid;grid-template-columns:180px repeat(var(--cv-days),minmax(0,1fr));border-top:1px solid var(--cv-line)}
.cv-team-headrow{border-top:0;background:var(--cv-bg)}
.cv-team-who{display:flex;flex-direction:column;justify-content:center;gap:2px;min-width:0;padding:10px 12px}
.cv-team-who b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cv-team-who span{font-size:11.5px;color:var(--cv-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cv-team-headrow .cv-team-who{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--cv-muted)}
.cv-team-cell{
  position:relative;display:flex;flex-direction:column;gap:3px;min-width:0;min-height:64px;
  padding:6px;border-left:1px solid var(--cv-line);
}
.cv-team-daycol{padding:0;min-height:0}
.cv-team-daycol .cv-dayhead{border-left:0;width:100%;height:100%}
.cv-team-cell.is-weekend{background:#faf9f6}
.cv-team-cell.is-away{background:repeating-linear-gradient(135deg,#f3faf6 0 8px,#edf6f1 8px 16px)}
.cv-team-cell.is-today{background-color:rgba(196,92,38,.05)}
.cv-team-ev{
  display:block;width:100%;box-sizing:border-box;padding:2px 6px;
  border:0;border-left:3px solid;border-radius:4px;
  font:inherit;font-size:11px;line-height:1.35;text-align:left;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;
}
.cv-team-ev.cv-ev-busy{cursor:default}
.cv-more{font-size:10.5px;color:var(--cv-muted)}
.cv-team-add{
  align-self:flex-start;margin-top:auto;width:24px;height:20px;padding:0;
  border:1px dashed var(--cv-line);border-radius:4px;background:transparent;
  font:inherit;font-size:13px;line-height:1;color:var(--cv-muted);cursor:pointer;opacity:.35;
}
.cv-team-cell:hover .cv-team-add,.cv-team-add:focus-visible{opacity:1;border-color:#7c3aed;color:#7c3aed}

/* ---------------------------------------------------------------- team day */
.cv-team-day{min-width:calc(180px + var(--cv-hours) * 56px)}
.cv-lane-row{display:grid;grid-template-columns:180px minmax(0,1fr);border-top:1px solid var(--cv-line)}
.cv-lane{
  position:relative;min-width:0;min-height:52px;border-left:1px solid var(--cv-line);
  background-image:linear-gradient(to right,var(--cv-line) 1px,transparent 1px);
  background-size:calc(100% / var(--cv-hours)) 100%;
}
.cv-lane.cv-ticks{
  display:grid;grid-template-columns:repeat(var(--cv-hours),minmax(0,1fr));align-items:center;
  min-height:0;padding:8px 0;background:none;
}
.cv-tick{padding-left:4px;font-size:11px;color:var(--cv-muted);font-variant-numeric:tabular-nums}
.cv-lane .cv-slot{position:absolute;top:0;bottom:0;height:auto}
.cv-lane-away{
  position:absolute;inset:0;display:flex;align-items:center;padding:0 10px;pointer-events:none;
  background:repeating-linear-gradient(135deg,#f3faf6 0 8px,#edf6f1 8px 16px);
  font-size:11.5px;font-weight:600;color:#1f6b48;
}
.cv-lane-ev{
  position:absolute;top:6px;height:calc(100% - 12px);z-index:2;box-sizing:border-box;min-width:6px;padding:0 6px;
  border:1px solid var(--cv-card);border-left-width:3px;border-radius:6px;
  font:inherit;font-size:11px;line-height:1;text-align:left;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;
}
.cv-lane-ev.cv-ev-busy{cursor:default}

/* Rendered outside .cv-scroll, so it reads the shell's tokens directly. */
.cv-empty{padding:24px;border:1px dashed var(--line,#e2e8f0);border-radius:var(--radius,6px);text-align:center;color:var(--muted,#64748b)}

.cv-ev:focus-visible,.cv-dayhead:focus-visible,.cv-team-ev:focus-visible,.cv-team-add:focus-visible,.cv-lane-ev:focus-visible{
  outline:2px solid #7c3aed;outline-offset:1px;
}

@media (max-width:720px){
  .cv-scroll{--cv-hour:44px}
  .cv-team-row,.cv-lane-row{grid-template-columns:132px repeat(var(--cv-days,1),minmax(0,1fr))}
  .cv-lane-row{grid-template-columns:132px minmax(0,1fr)}
  .cv-team-week{min-width:calc(132px + var(--cv-days) * 112px)}
  .cv-team-day{min-width:calc(132px + var(--cv-hours) * 52px)}
}