/* @AI_CRITICAL_GUARD v3.0: UNTOUCHABLE ZONE — MACE APPROVAL REQUIRED.
   Protects: Enterprise UI/UX · Realtime Sync Logic · Core State Management.
   DO NOT modify without a RISK IMPACT REPORT cleared by MACE. */

/**
 * @file schedule_monitor.css
 * @description SCHEDULE MONITOR (smw) — live schedule strip bound FLUSH into the
 *              RIGHT of the bottom QUICKLINKS BAR (#quickLinksBar), beside the
 *              world clocks + circles. smw-3 redesign (MACE):
 *                • countdown timer HERO (not a wall clock)
 *                • NOW + NEXT tasks spelled out in FULL (no truncation) — the
 *                  host shrink-wraps to content so long labels stay readable
 *                • NO card chrome (border/radius/fill) — only a subtle left
 *                  divider, so it reads as part of the bar, not a floating add-on
 *              SELF-DUAL-THEME: local --smw-* tokens + :where(html[data-mode=
 *              "light"]) swap on BOTH #smw-host and the body-level #smw-pop.
 *              Loaded BEFORE main_theme.css (which stays the LAST sheet).
 *              Task colors are DATA-DRIVEN (--smw-task inline vars) — never
 *              hardcode task hues here.
 *              QA: npm run test:schedule · /_schedule_harness.html
 * @module MUMS/Styles
 * @version smw-3
 */

/* ── shared token blocks (host + body-level popover) ─────────────────────── */
#smw-host,
#smw-pop{
  --smw-line:      rgba(148,163,184,.22);
  --smw-line-2:    rgba(148,163,184,.38);
  --smw-ink:       #eef2fb;
  --smw-dim:       rgba(148,163,184,.94);
  --smw-faint:     rgba(148,163,184,.62);
  --smw-track:     rgba(148,163,184,.18);
  --smw-hover:     rgba(148,163,184,.10);
  --smw-live:      #34d399;
  --smw-live-ink:  #6ee7b7;
  --smw-warn:      #fbbf24;
  --smw-soon:      #f87171;
  --smw-rest:      #38bdf8;
  --smw-leave:     #fbbf24;
  --smw-badge-bg:  rgba(148,163,184,.16);
  --smw-pop-bg:    #0f1626;
  --smw-pop-line:  rgba(148,163,184,.24);
  --smw-shadow:    0 -14px 34px rgba(0,0,0,.42);
}
:where(html[data-mode="light"]) #smw-host,
:where(html[data-mode="light"]) #smw-pop{
  --smw-line:      rgba(15,23,42,.16);
  --smw-line-2:    rgba(15,23,42,.28);
  --smw-ink:       #0f172a;
  --smw-dim:       rgba(51,65,85,.94);
  --smw-faint:     rgba(71,85,105,.66);
  --smw-track:     rgba(15,23,42,.10);
  --smw-hover:     rgba(15,23,42,.06);
  --smw-live:      #16a34a;
  --smw-live-ink:  #15803d;
  --smw-warn:      #b45309;
  --smw-soon:      #dc2626;
  --smw-rest:      #0284c7;
  --smw-leave:     #b45309;
  --smw-badge-bg:  rgba(15,23,42,.08);
  --smw-pop-bg:    #ffffff;
  --smw-pop-line:  rgba(15,23,42,.14);
  --smw-shadow:    0 -14px 34px rgba(15,23,42,.20);
}

/* ── Host: bound flush to the bottom-right of the quicklinks bar ─────────── */
#smw-host{
  position:absolute;
  right:14px;
  bottom:8px;
  width:max-content;
  max-width:min(460px, 40vw);
  z-index:4;               /* above the transparent centered quicklinks-inner */
  color:var(--smw-ink);
}
/* Below this width the centered circles + left clocks leave no clean room on
   the right — hide the dock (My Schedule still has everything). Tablet/mobile
   reorganize the bar into a toggled sheet anyway. */
@media (max-width: 1399px){
  #smw-host{ display:none !important; }
  #smw-pop{ display:none !important; }
}

/* ── The strip itself — FLUSH, no card chrome (not a floating widget) ────── */
.smw{
  display:block;
  text-decoration:none;
  color:var(--smw-ink);
  padding:2px 4px 3px 12px;
  border-left:1px solid var(--smw-line);   /* subtle zone divider only */
  border-radius:6px;
  background:transparent;
  transition:background .16s ease;
  outline:none;
}
.smw:hover,
.smw:focus-visible{ background:var(--smw-hover); }

.smw-inner{
  display:flex;
  align-items:center;
  gap:12px;
  white-space:nowrap;
}

/* ── Countdown HERO ─────────────────────────────────────────────────────── */
.smw-cd{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  flex:0 0 auto;
  padding-right:12px;
  border-right:1px solid var(--smw-line);
  min-width:66px;
}
.smw-cd-value{
  font-size:19px;
  font-weight:800;
  line-height:1.05;
  letter-spacing:.01em;
  font-variant-numeric:tabular-nums;
  color:var(--smw-ink);
}
.smw-cd-label{
  font-size:9px;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--smw-faint);
  margin-top:2px;
  white-space:nowrap;
}
.smw-cd-label .smw-tz{ font-style:normal; color:var(--smw-live); }
.smw-cd.is-warn .smw-cd-value{ color:var(--smw-warn); }
.smw-cd.is-soon .smw-cd-value{ color:var(--smw-soon); animation:smwPulse 1.6s ease-out infinite; }
.smw-cd-idle .smw-cd-value{ color:var(--smw-faint); }
@keyframes smwPulse{
  0%   { opacity:1; }
  50%  { opacity:.55; }
  100% { opacity:1; }
}

/* ── NOW / NEXT task rows (FULL text) ───────────────────────────────────── */
.smw-tasks{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:3px;
  min-width:0;
}
.smw-line{
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
}
.smw-badge{
  flex:0 0 auto;
  font-size:8.5px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:2px 5px;
  border-radius:5px;
  background:var(--smw-badge-bg);
  color:var(--smw-dim);
  min-width:34px;
  text-align:center;
}
.smw-badge.is-primary{ color:var(--smw-live-ink); background:color-mix(in srgb, var(--smw-live) 20%, transparent); }
.smw-state-next  .smw-badge.is-primary,
.smw-state-upcoming .smw-badge.is-primary{ color:var(--smw-ink); background:var(--smw-badge-bg); }
.smw-state-rest  .smw-badge.is-primary{ color:var(--smw-rest); background:color-mix(in srgb, var(--smw-rest) 18%, transparent); }
.smw-state-leave .smw-badge.is-primary{ color:var(--smw-leave); background:color-mix(in srgb, var(--smw-leave) 18%, transparent); }
.smw-state-done  .smw-badge.is-primary,
.smw-state-none  .smw-badge.is-primary{ color:var(--smw-faint); background:var(--smw-badge-bg); }
.smw-badge.is-secondary{ color:var(--smw-faint); background:transparent; border:1px solid var(--smw-line); }

.smw-dot{
  width:8px; height:8px;
  border-radius:50%;
  background:var(--smw-task, var(--smw-dim));
  flex:0 0 auto;
}
.smw-dot.is-hollow{
  background:transparent;
  border:2px solid var(--smw-task, var(--smw-dim));
  width:7px; height:7px;
}
.smw-taskname{
  font-size:12.5px;
  font-weight:700;
  color:var(--smw-ink);
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;   /* only bites for pathologically long custom labels */
}
.smw-line:last-child .smw-taskname{ font-weight:600; color:var(--smw-dim); font-size:11.5px; }
.smw-linetime{
  flex:0 0 auto;
  font-size:10.5px;
  font-variant-numeric:tabular-nums;
  color:var(--smw-faint);
  padding-left:2px;
}

/* ── Micro day-strip (full width of the widget) ─────────────────────────── */
.smw-strip{
  position:relative;
  display:block;
  height:4px;
  margin-top:5px;
  border-radius:999px;
  background:var(--smw-track);
  overflow:hidden;
}
.smw-seg{
  position:absolute;
  top:0; bottom:0;
  border-radius:999px;
  background:var(--smw-task, var(--smw-dim));
}
.smw-seg.is-dim{ opacity:.45; }
.smw-nowmark{
  position:absolute;
  top:-2px; bottom:-2px;
  width:2px;
  background:var(--smw-ink);
  box-shadow:0 0 4px var(--smw-ink);
}

/* ── Body-level popover (fixed → escapes the bar's overflow/contain clip) ── */
#smw-pop.smw-pop{
  position:fixed;
  right:14px;
  bottom:96px;
  min-width:260px;
  max-width:380px;
  border:1px solid var(--smw-pop-line);
  border-radius:12px;
  background:var(--smw-pop-bg);
  box-shadow:var(--smw-shadow);
  padding:10px;
  color:var(--smw-ink);
  display:none;
  flex-direction:column;
  gap:6px;
  z-index:5300;            /* above the bar (2000) and the mobile sheet (5200) */
}
#smw-pop.smw-pop.is-open{ display:flex; }
.smw-pop-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  font-size:10px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--smw-dim);
  padding-bottom:6px;
  border-bottom:1px solid var(--smw-pop-line);
}
.smw-pop-team{ font-weight:600; text-transform:none; letter-spacing:0; }
.smw-pop-note{ font-size:11px; color:var(--smw-dim); }
.smw-pop-row{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  color:var(--smw-ink);
  min-width:0;
}
.smw-pop-row.is-done{ opacity:.55; }
.smw-pop-row.is-live .smw-pop-task{ font-weight:700; }
.smw-pop-dot{
  width:8px; height:8px;
  border-radius:50%;
  background:var(--smw-task, var(--smw-dim));
  flex:0 0 auto;
}
.smw-pop-time{
  font-variant-numeric:tabular-nums;
  color:var(--smw-dim);
  font-size:11px;
  flex:0 0 auto;
}
.smw-pop-task{
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.smw-pop-flag{
  flex:0 0 auto;
  font-size:9px;
  font-weight:700;
  letter-spacing:.08em;
  color:var(--smw-live-ink);
}
.smw-pop-foot{
  padding-top:6px;
  border-top:1px solid var(--smw-pop-line);
  font-size:10px;
  color:var(--smw-dim);
  text-align:right;
}

.smw-dim{ color:var(--smw-dim); }