/* ============================================================================
   calendar.css — tweaks specific to the Calendar module ONLY.
   No fonts/colors/global styles here (core.css owns all tokens).
   Every class is prefixed .calendar-* and uses ONLY palette tokens via var(--…).
   Covers: month grid + cells + event chips, segmented control, agenda slots,
   legend, time-mix donut legend, calendar sources + toggle switch.
   ========================================================================== */

/* ── month-grid card chrome ─────────────────────────────────────────────── */
.calendar-card{display:flex;flex-direction:column}
.calendar-bar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:14px 16px;border-bottom:1px solid var(--border);
  background:linear-gradient(180deg,var(--panel-hi),transparent)}
.calendar-month{font-family:var(--font-display);font-size:16px;font-weight:600;letter-spacing:.2px;min-width:120px;text-align:center}
.calendar-nav{width:30px;padding:5px 0;font-size:15px;line-height:1}
.calendar-today-btn{width:auto;padding:5px 12px;font-size:11px}

/* segmented month/week/day switch */
.calendar-segs{display:inline-flex;background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:2px}
.calendar-seg{
  font-family:var(--font-mono);font-size:10px;letter-spacing:1px;text-transform:uppercase;
  color:var(--text-muted);padding:5px 10px;border-radius:6px;transition:.15s var(--ease)}
.calendar-seg:hover{color:var(--text)}
.calendar-seg.active{background:var(--panel-hi);color:var(--accent1);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent1) 25%,transparent)}

/* weekday header */
.calendar-dow{
  display:grid;grid-template-columns:repeat(7,1fr);
  padding:9px 10px 7px;
  font-family:var(--font-mono);font-size:9px;letter-spacing:2px;color:var(--text-faint);text-transform:uppercase}
.calendar-dow span{text-align:center}

/* ── the grid ───────────────────────────────────────────────────────────── */
.calendar-grid{
  display:grid;grid-template-columns:repeat(7,1fr);
  gap:6px;padding:0 10px 12px;flex:1}

.calendar-cell{
  position:relative;min-height:88px;display:flex;flex-direction:column;gap:5px;
  padding:7px 7px 6px;border-radius:var(--radius-sm);
  background:var(--bg2);border:1px solid var(--border);
  cursor:pointer;overflow:hidden;transition:border-color .16s var(--ease),transform .16s var(--ease),background .16s var(--ease)}
.calendar-cell:hover{border-color:var(--border-hi);transform:translateY(-1px);background:var(--panel)}
.calendar-cell:focus-visible{outline:2px solid var(--accent1);outline-offset:1px}
.calendar-cell--mute{background:transparent;border-color:transparent;cursor:default;pointer-events:none}
.calendar-cell--weekend{background:color-mix(in srgb,var(--bg) 60%,transparent)}

/* today */
.calendar-cell--today{
  border-color:var(--border-hi);
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent1) 10%,transparent),var(--bg2));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent1) 35%,transparent),0 0 22px var(--weather)}
.calendar-cell--today .calendar-daynum{color:var(--accent1)}

.calendar-daynum{
  display:flex;align-items:center;gap:5px;
  font-family:var(--font-display);font-size:13px;font-weight:600;color:var(--text);line-height:1;font-variant-numeric:tabular-nums}
.calendar-cell--weekend .calendar-daynum{color:var(--text-muted)}
.calendar-today-dot{width:5px;height:5px;border-radius:50%;background:var(--accent1);box-shadow:0 0 7px var(--accent1)}

/* event chips */
.calendar-chips{display:flex;flex-direction:column;gap:3px;min-width:0}
.calendar-chip{
  display:block;max-width:100%;
  font-size:10px;font-weight:600;line-height:1.35;
  padding:2px 6px;border-radius:5px;
  color:var(--text);
  background:color-mix(in srgb, var(--cc) 16%, transparent);
  border-left:2px solid var(--cc);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.calendar-more{font-family:var(--font-mono);font-size:9px;letter-spacing:.5px;color:var(--text-faint);padding-left:2px}

/* ── legend ─────────────────────────────────────────────────────────────── */
.calendar-legend{display:flex;flex-wrap:wrap;gap:9px 14px}
.calendar-legend-item{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--text-muted)}
.calendar-legend-item i{width:11px;height:11px;border-radius:3px;display:inline-block;box-shadow:0 0 8px currentColor}

/* this-week stat severity colours */
.calendar-sr-warn{color:var(--warn)}
.calendar-sr-ok{color:var(--success)}

/* ── today's agenda slots ───────────────────────────────────────────────── */
.calendar-agenda{display:flex;flex-direction:column;gap:8px}
.calendar-slot{
  display:grid;grid-template-columns:46px 4px 1fr auto;align-items:center;gap:10px;
  padding:8px 9px;border-radius:var(--radius-sm);
  background:var(--bg2);border:1px solid var(--border);transition:.15s var(--ease)}
.calendar-slot:hover{border-color:var(--border-hi)}
.calendar-slot--now{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent1) 30%,transparent);background:linear-gradient(90deg,color-mix(in srgb,var(--accent1) 6%,transparent),var(--bg2))}
.calendar-slot-time{font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.5px;color:var(--text-muted);font-variant-numeric:tabular-nums}
.calendar-slot-rail{align-self:stretch;width:4px;border-radius:3px;background:var(--cc);box-shadow:0 0 8px var(--cc);min-height:30px}
.calendar-slot-body{min-width:0;display:flex;flex-direction:column;gap:5px}
.calendar-slot-title{font-size:13px;font-weight:600;color:var(--text);line-height:1.2}
.calendar-slot-go{width:28px;padding:4px 0;font-size:13px}

/* upcoming meetings — keep join button compact */
.calendar-up .calendar-join{flex:none}

/* ── time-mix donut block ───────────────────────────────────────────────── */
.calendar-mix{display:grid;grid-template-columns:150px 1fr;gap:14px;align-items:center}
.calendar-donut{max-width:150px}
.calendar-mix-legend{display:flex;flex-direction:column;gap:7px;min-width:0}
.calendar-mix-row{display:grid;grid-template-columns:12px 1fr auto;align-items:center;gap:8px}
.calendar-mix-dot{width:9px;height:9px;border-radius:3px;box-shadow:0 0 7px currentColor}
.calendar-mix-lbl{font-size:12px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.calendar-mix-val{font-family:var(--font-mono);font-size:12px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums}

/* ── calendar sources + toggle switch ───────────────────────────────────── */
.calendar-sources{display:flex;flex-direction:column}
.calendar-source{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--border)}
.calendar-source:last-child{border-bottom:none}
.calendar-source-dot{width:10px;height:10px;border-radius:3px;flex:none;box-shadow:0 0 8px currentColor}
.calendar-source-name{flex:1;font-size:13px;color:var(--text)}
.calendar-toggle{
  width:34px;height:19px;border-radius:11px;flex:none;cursor:pointer;
  background:var(--bg);border:1px solid var(--border);position:relative;transition:.18s var(--ease)}
.calendar-toggle i{
  position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:50%;
  background:var(--text-faint);transition:.18s var(--ease)}
.calendar-toggle.on{background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent1) 40%,transparent)}
.calendar-toggle.on i{left:17px;background:var(--accent-grad);box-shadow:0 0 8px var(--glow)}
.calendar-toggle:focus-visible{outline:2px solid var(--accent1);outline-offset:2px}

/* ── "Connected as {email}" chip (links to Integrations) ────────────────── */
.calendar-conn{
  display:inline-flex;align-items:center;gap:8px;
  padding:5px 10px;border-radius:999px;cursor:pointer;
  background:var(--bg);border:1px solid var(--border);
  font-size:11px;color:var(--text-muted);transition:.16s var(--ease)}
.calendar-conn:hover{border-color:var(--border-hi);color:var(--text);background:var(--panel)}
.calendar-conn b{color:var(--text);font-weight:600}
.calendar-conn-dot{width:7px;height:7px;border-radius:50%;flex:none;background:var(--text-faint)}
.calendar-conn-dot.on{background:var(--success);box-shadow:0 0 8px var(--success)}
.calendar-conn-go{font-size:12px;color:var(--text-faint)}
.calendar-conn:hover .calendar-conn-go{color:var(--accent1)}

/* ── new-meeting panel ──────────────────────────────────────────────────── */
.calendar-newmtg-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:12px 14px;margin-top:4px}
.calendar-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.calendar-field--full{grid-column:1 / -1}
.calendar-field-lbl{
  font-family:var(--font-mono);font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--text-faint)}
.calendar-input{
  width:100%;padding:9px 11px;border-radius:var(--radius-sm);
  background:var(--bg2);border:1px solid var(--border);color:var(--text);
  font-family:var(--font-sans,inherit);font-size:13px;transition:.16s var(--ease);appearance:none}
.calendar-input:hover{border-color:var(--border-hi)}
.calendar-input:focus{outline:none;border-color:color-mix(in srgb,var(--accent1) 55%,transparent);box-shadow:0 0 0 3px var(--accent-soft)}
select.calendar-input{cursor:pointer}

/* attendee multi-select */
.calendar-attendees{display:flex;flex-wrap:wrap;gap:8px}
.calendar-att{
  display:inline-flex;align-items:center;gap:7px;
  padding:4px 10px 4px 4px;border-radius:999px;cursor:pointer;
  background:var(--bg2);border:1px solid var(--border);color:var(--text-muted);transition:.15s var(--ease)}
.calendar-att:hover{border-color:var(--border-hi);color:var(--text)}
.calendar-att .avatar{width:24px;height:24px;font-size:10px}
.calendar-att-name{font-size:12px;font-weight:600}
.calendar-att.on{
  color:var(--text);
  background:var(--accent-soft);
  border-color:color-mix(in srgb,var(--accent1) 45%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent1) 25%,transparent)}

/* footer: record toggle + actions */
.calendar-newmtg-foot{margin-top:16px;gap:10px}
.calendar-rec{display:inline-flex;align-items:center;gap:9px;cursor:pointer;background:none;border:none;padding:0}
.calendar-rec-lbl{font-size:12px;font-weight:600;color:var(--text-muted)}
.calendar-rec[aria-checked="true"] .calendar-rec-lbl{color:var(--text)}
.calendar-rec-tog{
  width:34px;height:19px;border-radius:11px;flex:none;position:relative;
  background:var(--bg);border:1px solid var(--border);transition:.18s var(--ease)}
.calendar-rec-tog i{
  position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:50%;
  background:var(--text-faint);transition:.18s var(--ease)}
.calendar-rec-tog.on{background:color-mix(in srgb,var(--danger) 22%,transparent);border-color:color-mix(in srgb,var(--danger) 45%,transparent)}
.calendar-rec-tog.on i{left:17px;background:var(--danger);box-shadow:0 0 8px var(--danger)}
.calendar-rec:focus-visible{outline:2px solid var(--accent1);outline-offset:3px;border-radius:6px}

/* persistent "created" confirmation row inside the panel */
.calendar-newmtg-done{margin-top:14px}

/* ── responsive ─────────────────────────────────────────────────────────── */
@media (max-width:1180px){
  .calendar-cell{min-height:78px}
}
@media (max-width:820px){
  .calendar-mix{grid-template-columns:1fr}
  .calendar-donut{margin:0 auto}
  .calendar-newmtg-grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  .calendar-cell{min-height:62px;padding:5px}
  .calendar-grid{gap:4px;padding:0 7px 10px}
  .calendar-chip{font-size:9px;padding:1px 4px}
  /* on the narrowest screens, show day numbers + a dot density rather than full chips */
  .calendar-daynum{font-size:12px}
  .calendar-slot{grid-template-columns:42px 4px 1fr auto}
  /* clamp the title so a long event never widens the slot past the viewport */
  .calendar-slot-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .calendar-conn-txt{max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .calendar-newmtg-foot{flex-direction:column;align-items:stretch}
  /* the month/week/day switch + nav must wrap, never scroll the page sideways */
  .calendar-segs{flex-wrap:wrap}
  /* attendee multi-select wraps to its own rows rather than forcing overflow */
  .calendar-attendees{gap:6px}
}