/* ============================================================
   monitor-views.css  ·  Board + Calendar styles
   Append this to the end of monitor.css (or add as a separate
   <link> AFTER monitor.css). Uses neutral values close to the
   existing CDS palette — tweak the hex codes to match your
   exact tokens if they differ.
   ============================================================ */

:root {
  --v-teal: #0d9488;  --v-teal-700: #0f766e;  --v-teal-050: #ecfdfa;
  --v-line: #e5e9ef;  --v-muted: #64748b;     --v-ink: #0f172a;
  --v-ontrack:#16a34a;   --v-ontrack-bg:#e9f7ef;
  --v-attention:#d97706; --v-attention-bg:#fef6e7;
  --v-urgent:#ea580c;    --v-urgent-bg:#fdeee2;
  --v-overdue:#dc2626;   --v-overdue-bg:#fdecec;
  --v-shadow: 0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.05);
}

/* ---------- BOARD ---------- */
.bd-board { display:flex; gap:12px; overflow-x:auto; padding-bottom:12px; }
.bd-col { flex:0 0 236px; background:#eef1f5; border-radius:14px; padding:10px;
  display:flex; flex-direction:column; border:1.5px solid transparent; transition:.12s; }
.bd-col.drag-over { border-color:var(--v-teal); background:var(--v-teal-050); }
.bd-colhead { display:flex; align-items:center; justify-content:space-between; padding:4px 6px 10px; }
.bd-coltitle { display:flex; gap:8px; align-items:center; font-size:12.5px; font-weight:700; line-height:1.25; }
.bd-coltitle .th { display:block; font-weight:400; color:var(--v-muted); font-size:11px; }
.bd-n { font-size:12px; font-weight:800; color:#fff; background:var(--v-muted);
  width:20px; height:20px; border-radius:6px; display:grid; place-items:center; flex:0 0 auto; }
.bd-col.s7 .bd-n { background:#0891b2; }
.bd-count { font-size:12px; font-weight:700; color:var(--v-muted); background:#fff;
  border-radius:999px; padding:1px 8px; min-width:22px; text-align:center; }
.bd-colbody { display:flex; flex-direction:column; gap:8px; min-height:24px; }

.bd-card { background:#fff; border-radius:11px; padding:11px; box-shadow:var(--v-shadow);
  border-left:3px solid var(--v-line); cursor:grab; position:relative; transition:.12s; }
.bd-card:hover { box-shadow:0 3px 10px rgba(15,23,42,.10); transform:translateY(-1px); }
.bd-card:active { cursor:grabbing; }
.bd-card:focus-visible { outline:2px solid var(--v-teal); outline-offset:2px; }
.bd-card.dragging { opacity:.45; }
.bd-card.st-ontrack   { border-left-color:var(--v-ontrack); }
.bd-card.st-attention { border-left-color:var(--v-attention); }
.bd-card.st-urgent    { border-left-color:var(--v-urgent); }
.bd-card.st-overdue   { border-left-color:var(--v-overdue); }
.bd-ref { font-size:12.5px; font-weight:800; }
.bd-supp { font-size:12.5px; margin-top:1px; }
.bd-meta { display:flex; gap:6px; margin-top:8px; flex-wrap:wrap; }
.bd-pill { font-size:10.5px; font-weight:700; padding:2px 7px; border-radius:6px; background:#f1f5f9; color:#475569; }
.bd-pill.mode { background:#eef2ff; color:#4338ca; }
.bd-eta { display:flex; align-items:center; gap:5px; margin-top:8px; font-size:11.5px; color:var(--v-muted); font-weight:600; }
.bd-dot { width:7px; height:7px; border-radius:50%; flex:0 0 auto; }
.bd-dot.ontrack{background:var(--v-ontrack)} .bd-dot.attention{background:var(--v-attention)}
.bd-dot.urgent{background:var(--v-urgent)}   .bd-dot.overdue{background:var(--v-overdue)}

.bd-picker { position:absolute; top:8px; right:8px; z-index:5; }
.bd-picker summary { list-style:none; cursor:pointer; width:24px; height:24px; border-radius:7px;
  display:grid; place-items:center; color:var(--v-muted); font-size:15px; background:#f1f5f9; }
.bd-picker summary::-webkit-details-marker { display:none; }
.bd-menu { position:absolute; right:0; top:28px; background:#fff; border:1px solid var(--v-line);
  border-radius:10px; box-shadow:0 8px 24px rgba(15,23,42,.14); padding:5px; width:190px; }
.bd-menu button { display:block; width:100%; text-align:left; border:0; background:transparent;
  padding:7px 9px; border-radius:7px; font-size:12px; font-weight:600; color:var(--v-ink); cursor:pointer; }
.bd-menu button:hover { background:var(--v-teal-050); color:var(--v-teal-700); }
.bd-menu button.cur { color:var(--v-teal-700); background:var(--v-teal-050); }
.bd-mh { font-size:10.5px; font-weight:700; color:var(--v-muted); padding:5px 9px 4px;
  text-transform:uppercase; letter-spacing:.4px; }

/* ---------- CALENDAR — shared nav + mode ---------- */
.cl-mode { display:inline-flex; gap:3px; background:#eef1f5; border:1px solid var(--v-line);
  border-radius:10px; padding:3px; margin-bottom:14px; }
.cl-seg { border:0; background:transparent; padding:6px 18px; border-radius:8px;
  font-size:13px; font-weight:600; color:var(--v-muted); cursor:pointer; transition:.15s; }
.cl-seg:hover { color:var(--v-ink); }
.cl-seg.on { background:#fff; color:var(--v-teal-700); box-shadow:var(--v-shadow); }
.cl-nav { display:flex; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
.cl-label { font-weight:700; font-size:15px; }
.cl-range { color:var(--v-muted); font-size:13px; font-weight:500; }
.cl-btn { border:1px solid var(--v-line); background:#fff; border-radius:9px; padding:7px 12px;
  font-size:13px; font-weight:600; color:var(--v-ink); cursor:pointer; transition:.15s; }
.cl-btn:hover { border-color:#cbd5e1; background:#fafbfc; }
.cl-btn.icon { padding:7px 11px; }
.cl-btn.today { color:var(--v-teal-700); border-color:#bfe6df; background:var(--v-teal-050); }

/* ---------- CALENDAR — week ---------- */
.cl-week { display:grid; grid-template-columns:repeat(7,1fr); gap:10px; }
.cl-day { background:#fff; border:1px solid var(--v-line); border-radius:14px; min-height:180px;
  display:flex; flex-direction:column; overflow:hidden; }
.cl-day.today { border-color:var(--v-teal); box-shadow:0 0 0 2px var(--v-teal-050); }
.cl-day.weekend { background:#fbfcfd; }
.cl-dhead { padding:9px 11px; border-bottom:1px solid var(--v-line); display:flex; align-items:baseline; justify-content:space-between; }
.cl-dow { font-size:11px; font-weight:700; color:var(--v-muted); text-transform:uppercase; letter-spacing:.3px; }
.cl-day.today .cl-dow { color:var(--v-teal-700); }
.cl-dnum { font-size:16px; font-weight:800; }
.cl-dbody { padding:8px; display:flex; flex-direction:column; gap:7px; flex:1; }
.cl-empty { color:#cbd5e1; font-size:20px; text-align:center; margin:auto; font-weight:300; }
.cl-card { border-radius:9px; padding:8px 9px; font-size:11.5px; line-height:1.3; border-left:3px solid; cursor:pointer; }
.cl-card.st-ontrack   { background:var(--v-ontrack-bg);   border-color:var(--v-ontrack); }
.cl-card.st-attention { background:var(--v-attention-bg); border-color:var(--v-attention); }
.cl-card.st-urgent    { background:var(--v-urgent-bg);    border-color:var(--v-urgent); }
.cl-card.st-overdue   { background:var(--v-overdue-bg);   border-color:var(--v-overdue); }
.cl-cref { font-weight:800; }
.cl-csupp { color:#334155; }
.cl-stbadge { font-size:9.5px; font-weight:800; padding:1px 6px; border-radius:5px; background:#fff;
  color:#475569; margin-top:5px; display:inline-block; }
.cl-caction { margin-top:4px; font-size:10.5px; color:#475569; }

/* ---------- CALENDAR — month ---------- */
.cl-mhead { display:grid; grid-template-columns:repeat(7,1fr); gap:8px; margin-bottom:8px; }
.cl-mhead span { font-size:11px; font-weight:700; color:var(--v-muted); padding-left:4px;
  text-transform:uppercase; letter-spacing:.3px; }
.cl-mgrid { display:grid; grid-template-columns:repeat(7,1fr); grid-auto-rows:116px; gap:8px; }
.cl-mcell { background:#fff; border:1px solid var(--v-line); border-radius:10px; padding:7px;
  display:flex; flex-direction:column; gap:4px; overflow:hidden; }
.cl-mcell.out { background:#fafbfc; opacity:.5; }
.cl-mcell.today { border-color:var(--v-teal); box-shadow:0 0 0 2px var(--v-teal-050); }
.cl-mnum { font-size:12.5px; font-weight:700; color:#475569; align-self:flex-start; }
.cl-mcell.today .cl-mnum { background:var(--v-teal); color:#fff; width:21px; height:21px;
  border-radius:6px; display:grid; place-items:center; font-size:11px; }
.cl-chip { font-size:10px; font-weight:700; padding:2px 6px; border-radius:5px; cursor:pointer;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; border-left:3px solid var(--v-line);
  color:#334155; background:#f1f5f9; }
.cl-chip.st-ontrack   { background:var(--v-ontrack-bg);   border-color:var(--v-ontrack); }
.cl-chip.st-attention { background:var(--v-attention-bg); border-color:var(--v-attention); }
.cl-chip.st-urgent    { background:var(--v-urgent-bg);    border-color:var(--v-urgent); }
.cl-chip.st-overdue   { background:var(--v-overdue-bg);   border-color:var(--v-overdue); }
.cl-more { font-size:10px; font-weight:700; color:var(--v-muted); padding-left:2px; }

@media (max-width:900px) {
  .cl-week { grid-template-columns:1fr; gap:8px; }
  .cl-day { min-height:auto; } .cl-day.weekend { background:#fff; }
  .cl-mgrid { grid-auto-rows:82px; gap:4px; }
  .cl-mhead { gap:4px; } .cl-mhead span { font-size:9px; padding-left:2px; }
  .cl-chip { font-size:9px; padding:1px 4px; } .cl-mnum { font-size:11px; }
}