/* @AI_CRITICAL_GUARD v3.0: UNTOUCHABLE ZONE — MACE APPROVAL REQUIRED.
   Protects: Enterprise UI/UX (Support Studio). RISK IMPACT REPORT + CLEARED before edits. */

/**
 * @file schedule_monitor_studio.css
 * @description SCHEDULE MONITOR (ssm) — Support Studio edition. Styles the live
 *              shift-schedule band embedded at the top of the "Your Case Today"
 *              panel (rendered by features/schedule_monitor_studio.js into
 *              #ss-sched-monitor). Consumes the Studio --ss-* design tokens so
 *              it auto-adapts to Light/Dark (data-ss-theme) with NO own theme
 *              block — this file therefore does NOT need to be after
 *              enterprise_theme.css, and is loaded BEFORE it so that file stays
 *              the LAST studio stylesheet (the enforced contract). Task colors
 *              are DATA-DRIVEN (--ssm-task inline from the team palette).
 *              QA: npm run test:schedule · skill: schedule-workspace-qa
 * @module MUMS/SupportStudio/Styles
 * @version ssm-1
 */

#ss-sched-monitor { display:block; margin:0 0 12px; }

.ssm-card{
  border:1px solid var(--ss-border);
  border-radius:var(--ss-radius, 12px);
  background:var(--ss-surface2, rgba(127,127,127,.06));
  padding:10px 12px 11px;
  display:flex;
  flex-direction:column;
  gap:9px;
  font-family:var(--ss-font);
  position:relative;
  overflow:hidden;
}
/* subtle state accent stripe on the left edge */
.ssm-card::before{
  content:"";
  position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--ss-accent);
  opacity:.9;
}
.ssm-state-active::before{ background:var(--ss-green, #22c55e); }
.ssm-state-next::before,
.ssm-state-upcoming::before{ background:var(--ss-accent, #58a6ff); }
.ssm-state-done::before{ background:var(--ss-muted, #8b949e); }
.ssm-state-none::before{ background:var(--ss-muted, #8b949e); opacity:.5; }

/* ── header ─────────────────────────────────────────────────────────────── */
.ssm-head{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}
.ssm-head-label{
  font-size:9px;
  font-weight:800;
  letter-spacing:.12em;
  color:var(--ss-muted);
  flex:0 0 auto;
}
.ssm-head-shift{
  font-size:11px;
  font-weight:600;
  color:var(--ss-text);
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.ssm-live{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:8.5px;
  font-weight:800;
  letter-spacing:.08em;
  color:var(--ss-green, #22c55e);
}
.ssm-pip{
  width:6px; height:6px; border-radius:50%;
  background:var(--ss-green, #22c55e);
  display:inline-block;
  box-shadow:0 0 0 0 rgba(34,197,94,.5);
  animation:ssmPulse 2.2s ease-out infinite;
}
@keyframes ssmPulse{ 0%{ box-shadow:0 0 0 0 rgba(34,197,94,.4);} 70%{ box-shadow:0 0 0 6px rgba(34,197,94,0);} 100%{ box-shadow:0 0 0 0 rgba(34,197,94,0);} }

/* ── body: countdown hero + task lines ──────────────────────────────────── */
.ssm-body{ display:flex; align-items:stretch; gap:12px; }
.ssm-cd{
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  padding-right:12px;
  border-right:1px solid var(--ss-border);
  min-width:64px;
}
.ssm-cd-val{
  font-size:19px;
  font-weight:800;
  line-height:1.05;
  color:var(--ss-text);
  font-variant-numeric:tabular-nums;
  font-family:var(--ss-mono, ui-monospace, monospace);
}
.ssm-cd-lbl{
  font-size:8.5px;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--ss-muted);
  margin-top:3px;
  white-space:nowrap;
}
.ssm-cd.is-warn .ssm-cd-val{ color:var(--ss-warn, #f59e0b); }
.ssm-cd.is-soon .ssm-cd-val{ color:var(--ss-danger, #ef4444); animation:ssmBlink 1.6s ease-out infinite; }
@keyframes ssmBlink{ 0%,100%{ opacity:1;} 50%{ opacity:.55;} }

.ssm-tasks{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:5px;
}
.ssm-line{ display:flex; align-items:center; gap:6px; min-width:0; }
.ssm-badge{
  flex:0 0 auto;
  font-size:8px;
  font-weight:800;
  letter-spacing:.09em;
  padding:2px 5px;
  border-radius:5px;
  min-width:34px;
  text-align:center;
  background:color-mix(in srgb, var(--ss-muted) 20%, transparent);
  color:var(--ss-muted);
}
.ssm-badge.is-now{ color:var(--ss-green, #22c55e); background:color-mix(in srgb, var(--ss-green, #22c55e) 20%, transparent); }
.ssm-badge.is-next{ color:var(--ss-accent, #58a6ff); background:color-mix(in srgb, var(--ss-accent, #58a6ff) 18%, transparent); }
.ssm-badge.is-then{ color:var(--ss-muted); background:transparent; border:1px solid var(--ss-border); }
.ssm-badge.is-done,
.ssm-badge.is-off{ color:var(--ss-muted); }

.ssm-dot{ width:8px; height:8px; border-radius:50%; background:var(--ssm-task, var(--ss-muted)); flex:0 0 auto; }
.ssm-dot.is-hollow{ background:transparent; border:2px solid var(--ssm-task, var(--ss-muted)); width:7px; height:7px; }
.ssm-task{
  font-size:12.5px;
  font-weight:700;
  color:var(--ss-text);
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.ssm-line + .ssm-line .ssm-task{ font-weight:600; color:var(--ss-muted); font-size:11.5px; }
.ssm-line-time{
  flex:0 0 auto;
  font-size:10px;
  font-variant-numeric:tabular-nums;
  color:var(--ss-muted);
  margin-left:auto;
  padding-left:6px;
}

/* ── day timeline strip ─────────────────────────────────────────────────── */
.ssm-strip{
  position:relative;
  height:6px;
  border-radius:999px;
  background:color-mix(in srgb, var(--ss-muted) 22%, transparent);
  overflow:hidden;
}
.ssm-seg{ position:absolute; top:0; bottom:0; border-radius:999px; background:var(--ssm-task, var(--ss-muted)); }
.ssm-seg.is-dim{ opacity:.42; }
.ssm-nowmark{
  position:absolute; top:-2px; bottom:-2px; width:2px;
  background:var(--ss-text);
  box-shadow:0 0 4px var(--ss-text);
}
.ssm-scale{
  display:flex;
  justify-content:space-between;
  font-size:8.5px;
  font-variant-numeric:tabular-nums;
  color:var(--ss-muted);
  margin-top:-3px;
}

/* skeleton */
.ssm-skel .ssm-head-shift{ color:var(--ss-muted); }

/* ── "Today's Cases" section label (frames the combined module) ──────────── */
.yct-cases-label{
  display:flex;
  align-items:center;
  gap:7px;
  font-size:10px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ss-muted);
  padding:2px 2px 8px;
  border-top:1px solid var(--ss-border);
  margin-top:2px;
}
.yct-cases-label i{ font-size:10px; color:var(--ss-accent); }